/*
 * THE SITE SHELL (2026-10-25, site polish A "Sky Soft daylight").
 *
 * One header, one language switch, one footer, one button set and one ground for every
 * served page that is NOT a signed legal page. The audit of 2026-10-25 measured the old
 * site as "seven sites": three Hebrew faces, six language-switch styles, five button
 * styles, six footers. This file is the one answer to all of them.
 *
 * Layering: base.css, brand.css and legal.css stay as they are (the legal pages are
 * signed bytes and keep their current chrome; changing it means a re-sign). This file is
 * linked AFTER them and after a page's own stylesheet, and every rule here is scoped to
 * `body.shell` or to the shell's own class names, so a page that does not opt in is
 * untouched.
 *
 * Tokens are the app's own daylight (the Folio app's light ground and Heebo); light only. Caps (design-match): one face per language, the
 * spine's two radii (--r-surface 14, --r-control 10), two of its three shadows, one 4/8
 * rhythm, no motion.
 */
:root {
  --shell-ground: #f3f7fb;
  --shell-paper: #ffffff;
  --shell-ink: #0c2340;
  --shell-muted: #41566d;
  --shell-line: #dbe4ec;
  --shell-control-line: #6b8499;
  --shell-soft: #e4f0f8;
  --shell-primary: #075985;
  --shell-primary-hover: #05405f;
  --shell-on-primary: #ffffff;
  --shell-link: #075985;
  --shell-good: #176246;
  --shell-accent: #0284c7;
  --shell-error: #9b1c1c;
  --shell-font-he: "Heebo", system-ui, sans-serif;
  --shell-font-en: "Inter", system-ui, sans-serif;
  --shell-font-ar: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --shell-font: var(--shell-font-he);
  --shell-frame: min(1160px, 100% - 32px);
  /* The spine's two radii and two shadows, the same values as shared/base.css, set here too for
     the shell pages that do not load base.css (answers, support, pricing, institutions): without
     them their buttons and the language tile drew square (final round). */
  --r-control: 10px;
  --r-surface: 14px;
  --sh-1: 0 1px 2px rgba(12, 35, 64, 0.06);
  --sh-2: 0 4px 16px rgba(12, 35, 64, 0.08);
  /* ONE TYPE LADDER (final round, punch item 5): every text on a shell page is one of these.
     Phone 13 / 15 / 17 / 22 / 32; from 821 px 13 / 15 / 17 / 22 / 34 / 56. Meta (captions,
     dates, labels), small (secondary lines, footer, controls), body, a sub-heading or lede on a
     computer, h2, h1. */
  --t-meta: 13px;
  --t-small: 15px;
  --t-body: 17px;
  --t-sub: 22px;
  --t-lede: 17px;
  --t-h2: 22px;
  --t-h1: 32px;
  /* One reading measure (finding 15): running text holds about 60 to 72 characters a line. A ch
     is a different share of a line in each face, so the measure is set per language (measured by
     the type pin in acquisition-browser: 75 characters a line at most). */
  --measure: 58ch;
}
html[lang="en"] { --measure: 50ch; }
html[lang="ar"] { --measure: 42ch; }

/* Light only (Sol read 2026-10-25, P0): the pages that link the shell keep their own light
   content colours, so a dark ground under them would read at 1.4-2.4:1. One light site; a
   dark mode needs every shell page's content styles first. */

html[lang="en"] { --shell-font: var(--shell-font-en); }
html[lang="ar"] { --shell-font: var(--shell-font-ar); }

html:has(> body.shell) { background: var(--shell-ground); color-scheme: light; }
body.shell {
  margin: 0;
  min-inline-size: 320px;
  overflow-x: hidden;
  background: var(--shell-ground);
  color: var(--shell-ink);
  font-family: var(--shell-font);
  font-size: 17px;
  line-height: 1.55;
}
body.shell :focus-visible { outline: 3px solid var(--shell-link); outline-offset: 3px; }
body.shell :is(button, input, select, textarea) { font-family: inherit; }
/* Hebrew and Arabic are never letter-spaced (finding 20): no tracking on any text of an he or ar page. */
html:not([lang="en"]) body.shell, html:not([lang="en"]) body.shell * { letter-spacing: 0 !important; }
/* One h1 and h2 for every shell page (finding 2): the ladder's sizes, line height 1.12 (1.3 for
   Arabic, whose marks need the room). A page's own h1 rules lose to these. */
body.shell h1, body.shell h1 * { font-size: var(--t-h1) !important; line-height: 1.12 !important; }
html[lang="ar"] body.shell h1, html[lang="ar"] body.shell h1 * { line-height: 1.3 !important; }
body.shell h1 { letter-spacing: 0; }
html[lang="en"] body.shell h1 { letter-spacing: -0.01em; }
/* The 404 keeps the legal pages' prose styles (shared/legal.css, frozen); its sizes follow the ladder here. */
/* The 404's ways out are the shell's buttons (final round, punch item 15). */
body.shell .legal .code { font-size: var(--t-small); }
/* The eyebrow, where a page keeps one (one at most: /download dropped its "הורדה והתקנה", its
   h1 says it): 15 px, weight 600, sentence case, no tracking. */
body.shell :is(.eyebrow, .inst-kicker) { font-size: var(--t-small) !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; }
/* The wordmark is a baked outline (brand.css); its fallback text must not pull Inter onto a Hebrew or Arabic page. */
html:not([lang="en"]) body.shell .folio-brand__wordmark { font-family: sans-serif; }

.shell-frame { inline-size: var(--shell-frame); margin-inline: auto; }
/* One content frame (final round, punch item 4): the header, every page's main content and the
   footer share one frame, 1160 px at most, a 16 px gutter on a phone and 48 px from 821 px.
   Each page marks its content wrapper .shell-main; the page's own width rules lose here. */
body.shell .shell-main { inline-size: var(--shell-frame); max-inline-size: none; margin-inline: auto; }

/* ---- header ---------------------------------------------------------------- */
body.shell .shell-header { position: static; margin: 0; padding: 0; border: 0; box-shadow: none; background: var(--shell-ground); inline-size: auto; max-inline-size: none; min-block-size: 0; }
body.shell .shell-header__inner {
  inline-size: var(--shell-frame);
  max-inline-size: none;
  margin-inline: auto;
  padding: 0;
  min-block-size: 44px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
body.shell .shell-header .folio-brand, body.shell .shell-footer .folio-brand { color: var(--shell-ink); }
body.shell .shell-header .folio-brand { --folio-brand-word-size: 23px; inline-size: auto; block-size: auto; }

/* ---- the one language switch: three 44 px targets, the current one on paper ---- */
body.shell .shell-lang { display: flex; gap: 2px; direction: ltr; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body.shell .shell-lang > button, body.shell .shell-lang > a {
  position: relative;
  isolation: isolate;
  min-inline-size: 44px;
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--shell-muted);
  font: inherit;
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
/* The current language (final round, finding 13): a quiet 36 px tile drawn inside the 44 px
   target, the soft fill, no shadow; the target stays 44 px and the tile no longer touches the
   top edge of a phone screen. */
body.shell .shell-lang > [aria-current="true"], body.shell .shell-lang > [aria-current="page"], body.shell .shell-lang > [aria-pressed="true"] {
  background: transparent;
  color: var(--shell-ink);
  font-weight: 700;
  box-shadow: none;
}
body.shell .shell-lang > [aria-current="true"]::before, body.shell .shell-lang > [aria-current="page"]::before, body.shell .shell-lang > [aria-pressed="true"]::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  border-radius: var(--r-control);
  background: var(--shell-soft);
}
/* "ع" and "עב" in the system face: a page never downloads another language's face for one label
   (finding 24: the Arabic home loaded Heebo for "עב", 295 KB against Hebrew's 158). */
html:not([lang="ar"]) body.shell .shell-lang [lang="ar"] { font-family: system-ui, sans-serif; }
html:not([lang="he"]) body.shell .shell-lang [lang="he"] { font-family: system-ui, sans-serif; }

/* ---- buttons: one primary, one secondary ------------------------------------ */
.btn {
  min-block-size: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-inline: 18px;
  border: 1.5px solid transparent;
  border-radius: var(--r-control);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn--primary { background: var(--shell-primary); color: var(--shell-on-primary); box-shadow: var(--sh-2); }
/* A page's own link colour (the 404's legal prose: `.legal a`) never reaches a button's label. */
body.shell a.btn { text-decoration: none; padding-block: 0; }
body.shell a.btn--primary { color: var(--shell-on-primary); }
body.shell a.btn--secondary { color: var(--shell-ink); }
.btn--primary:hover, .btn--primary:active { background: var(--shell-primary-hover); }
.btn--secondary { min-block-size: 48px; border-color: var(--shell-control-line); background: var(--shell-paper); color: var(--shell-ink); }
.btn--secondary:hover { border-color: var(--shell-ink); }
.btn--secondary:active { border-color: var(--shell-ink); background: var(--shell-soft); }
/* Touch feedback (final round, finding 22): the colour above changes at once under any motion
   setting; the 1 px press and its 120 ms easing only when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color 120ms ease-out, border-color 120ms ease-out, transform 120ms ease-out; }
  .btn:active { transform: translateY(1px); }
}
.btn .when-done, .btn[data-state="done"] .when-idle { display: none; }
.btn[data-state="done"] .when-done { display: inline-flex; align-items: center; gap: 8px; }
.btn[data-state="done"].btn--secondary { border-color: var(--shell-good); color: var(--shell-good); }
body.shell :is(.primary-action, .secondary-action) { min-block-size: 52px; border-radius: var(--r-control); font-weight: 700; }
body.shell .primary-action:not(:disabled):not([aria-disabled="true"]) { border-color: var(--shell-primary); background: var(--shell-primary); color: var(--shell-on-primary); box-shadow: var(--sh-2); }
body.shell .primary-action:not(:disabled):not([aria-disabled="true"]):hover { border-color: var(--shell-primary-hover); background: var(--shell-primary-hover); }
body.shell .secondary-action:not(:disabled) { min-block-size: 48px; border: 1.5px solid var(--shell-control-line); background: var(--shell-paper); color: var(--shell-ink); }
.shell .icon { inline-size: 20px; block-size: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---- the phone-to-computer handoff (shared/handoff.js), on the home and /download ------
   Phone or computer: html[data-device] is set with /download's own rule (download-core
   detectJourney). Without JavaScript the width decides, so the page still makes sense. */
.handoff__computer { display: none; }
html[data-device="desktop"] .handoff__phone { display: none; }
html[data-device="desktop"] .handoff__computer { display: grid; }
@media (min-width: 721px) {
  html:not([data-device]) .handoff__phone { display: none; }
  html:not([data-device]) .handoff__computer { display: grid; }
}
/* Send and copy side by side, so both stay inside a phone's first screen. Copy takes the width
   its label needs and send takes the rest, so each label stays on one line from 360 px (the
   shell's 16 px gutter left send 4 px short in Hebrew); narrower, a label may take two lines
   inside its button rather than push it down. */
.handoff__actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.handoff__actions .btn { min-block-size: 52px; padding-inline: 10px; font-size: var(--t-body); }
/* Under 371 px both labels drop to the ladder's 15 so each stays on one line (Hebrew's send
   label broke onto a lone word at 360). */
@media (max-width: 370px) {
  .handoff__actions .btn { font-size: var(--t-small); }
}
.handoff__actions [data-handoff="share"] .icon { display: none; }
.handoff__status { margin-block-start: 8px; color: var(--shell-good); font-size: var(--t-small); font-weight: 600; line-height: 1.4; }
.handoff__status[data-tone="error"] { color: var(--shell-error); }
.handoff__status a { color: var(--shell-link); font-weight: 700; text-underline-offset: 3px; display: inline-flex; align-items: center; min-block-size: 44px; }
/* Empty, it stays in the accessibility tree (no display: none), so its first message is announced. */
.handoff__status:empty { margin: 0; }
.handoff__hint { margin-block-start: 8px; color: var(--shell-muted); font-size: 15px; line-height: 1.45; }
/* The computer's download link names the detected system (handoff.js sets html[data-platform]). */
.handoff__computer { gap: 12px; justify-items: start; }
.os { display: none; }
html:not([data-platform="mac"]):not([data-platform="win"]) .os-any,
html[data-platform="mac"] .os-mac, html[data-platform="win"] .os-win { display: inline; }
.app-store-slot:empty { display: none; }
/* Every page points to download (final round, punch item 10): under the intro of the answers,
   support and institutions pages, and the home's closing block at the end of answers and support. */
.intro-action { margin-block-start: 24px; max-inline-size: 560px; }
.final-block { margin-block-start: 56px; }
.final { display: grid; gap: 16px; padding: 24px 20px; border-radius: var(--r-surface); background: var(--shell-soft); }
.final h2 { margin: 0; font-size: var(--t-h2); line-height: 1.22; }
.final .btn { inline-size: 100%; }
@media (min-width: 821px) {
  .handoff__computer .btn { min-inline-size: 260px; }
  .final { grid-template-columns: 1fr auto; align-items: center; padding: 40px; }
  .final .btn { inline-size: auto; min-inline-size: 260px; }
}
/* A page-level handoff that exists on a phone only (/download, under its headline). */
.phone-handoff { display: none; }
html[data-device="mobile"] .phone-handoff { display: block; margin-block: 16px 24px; }
@media (max-width: 720px) { html:not([data-device]) .phone-handoff { display: block; margin-block: 16px 24px; } }
.phone-handoff__lede { margin: 0 0 10px; color: var(--shell-muted); font-size: var(--t-body); line-height: 1.5; }
.phone-handoff__alt { min-block-size: 44px; display: inline-flex; align-items: center; margin-block-start: 4px; color: var(--shell-link); font-weight: 700; text-underline-offset: 4px; }
/* /download on a phone (final round, punch item 9, M's ruling 19): the h1, the line that says the
   install happens on the computer, send and copy, and the Google link, nothing else. The four
   steps, readiness, the device line, the Google lede and the privacy note are the computer's.
   The Google step waits for its link (:target, and html[data-google-step] set by download.js, since
   the language script rewrites the address without the fragment) and then shows its collection
   notice before its button. A stage the flow opens itself (the profile, the ready states) shows as it did. */
html[data-device="mobile"] body.shell :is(.intro > .lede, .journey, .device-row, [data-download-readiness], .privacy-note),
html[data-device="mobile"]:not([data-google-step="open"]) body.shell #google-stage:not(:target) { display: none; }
@media (max-width: 720px) {
  html:not([data-device]) body.shell :is(.intro > .lede, .journey, .device-row, [data-download-readiness], .privacy-note),
  html:not([data-device]):not([data-google-step="open"]) body.shell #google-stage:not(:target) { display: none; }
}
html[data-device="mobile"] body.shell .flow-card { margin-block-start: 0; }
/* /download's h1 wraps by balance, not by a 13ch box (it stacked three short lines on a phone). */
body.shell .intro h1 { max-inline-size: none; }

/* ---- footer ----------------------------------------------------------------- */
/* One footer (final round, punch item 4): the home's, on every shell page. A page's own footer
   rules (width, flex, padding) are reset here so the footer is the same everywhere. */
body.shell .shell-footer { display: block; inline-size: auto; max-inline-size: none; min-block-size: 0; margin: 0; padding: 0; border: 0; border-block-start: 1px solid var(--shell-line); background: var(--shell-paper); color: var(--shell-muted); font-size: 15px; text-align: start; }
body.shell .shell-footer__inner {
  inline-size: var(--shell-frame);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  padding-block: 12px 20px;
}
body.shell .shell-footer .folio-brand { --folio-brand-word-size: 20px; min-block-size: 44px; padding: 0; display: inline-flex; align-items: center; }
body.shell .shell-footer nav { display: flex; flex-wrap: wrap; gap: 0 2px; margin-inline: -8px; }
body.shell .shell-footer nav a {
  min-block-size: 44px;
  min-inline-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 8px;
  color: var(--shell-muted);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
body.shell .shell-footer nav a:hover { color: var(--shell-ink); text-decoration: underline; text-underline-offset: 3px; }
/* A page that switches language in place (institutions) carries one set of links per language. */
body.shell .shell-footer nav > [data-lang] { flex-wrap: wrap; gap: 0 2px; }

/* Heebo sets wider than the Assistant /download was tuned for: on a phone its 34 px
   headline ran to four lines above the handoff, the four-step strip's two-word labels
   broke a word per line between 621 and 900 px, and running copy could end on one word. */
/* /download's four steps: meta size wherever two cells share a narrow row (phones and 621-900 px). */
@media (max-width: 900px) {
  body.shell .journey li { font-size: var(--t-meta); }
}
/* /download from 821 to 1055 px: one column (the intro, then the flow); two columns left the h1
   330 px wide, so the ladder's 56 px broke one word per line. */
/* From 1056 px the flow column starts level with the intro (it sat 80 px lower). */
@media (min-width: 1056px) {
  body.shell main.shell-main:has(> .intro) > .flow-card { margin-block-start: 0; }
}
@media (min-width: 821px) and (max-width: 1055px) {
  body.shell main.shell-main:has(> .intro) { display: block; }
  body.shell main.shell-main:has(> .intro) .intro { position: static; }
  body.shell main.shell-main:has(> .intro) > :is(.flow-card, .privacy-note) { max-inline-size: none; grid-column: auto; }
}
/* No line of copy ends on one word: balance (applied to short blocks, six lines or fewer).
   The longhand on purpose: the text-wrap shorthand would also reset white-space: nowrap. */
body.shell :is(h1, h2, h3, p, li, small, summary, label, button, .stage-copy, .release-proof, [data-i18n]) { text-wrap-style: balance; }

@media (min-width: 821px) {
  :root { --shell-frame: min(1160px, 100% - 96px); --t-lede: 22px; --t-h2: 34px; --t-h1: 56px; }
  body.shell .shell-header__inner { min-block-size: 72px; }
  body.shell .shell-header .folio-brand { --folio-brand-word-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  body.shell *, body.shell *::before, body.shell *::after { transition: none !important; animation: none !important; }
}