/* ==========================================================================
   בגרוטו — design system   (handoff C02 typography/spacing + C03 colour)
   ==========================================================================

   WHERE THE COLOURS COME FROM
   Every value below was measured off the handoff's own target boards with a
   per-region median (scratchpad/sample.py), never a mean: a mean across the CTA
   is dragged toward its white label and lands on a visibly wrong blue. Text and
   glyph pixels are masked out by luminance before the median is taken.

   Cobalt is the one token the targets disagree about, so it gets the long note:

     source-logo.jpg   the ט of the wordmark .............. #2D57D0
     screen-03         the "זה מתאים לי" CTA ............... #2F5EE1
     screen-09         the step-1 numbered dot ............ #1B5CFB
     screen-01         the hero CTA, over the dark video .. #0558FE

   The last two sit against dark or high-contrast surroundings, where JPEG
   chroma subsampling pushes a saturated blue brighter — they are upper bounds,
   not readings. The two trustworthy samples (a large flat fill on a light card)
   bracket #2D57D0…#2F5EE1, which is also the family of the handoff's opening
   token #315DDB.

   --cobalt is #2A5BE0: inside that bracket, and the deciding argument is AA.
   White on #2A5BE0 is 5.72:1 and cobalt-on-the-blue-tint is 5.03:1; the value
   this file shipped before (#1E68FF) is 4.69:1 on white and drops under 4.5:1
   as a link on the tint. C03 says explicitly that AA wins even where it costs a
   small deviation from a pixel in the image.

   The page colour is the opposite case — there the handoff was right and this
   file was wrong in a way you can see. Measured neutral (#FBFBFA on screen 01,
   #F7F8FA on screen 03) against a page that used to be warm (#F7F3F0).

   Every pair below clears WCAG AA; the ratios are in the comments.
   ========================================================================== */

/* Rubik is embedded by fonts.css, which index.html loads first. */

:root {
  /* --- surfaces -------------------------------------------------------- */
  --page:        #F8FAFC;   /* C03; measured #FBFBFA / #F7F8FA — cool, not warm */
  --surface:     #FFFFFF;   /* measured #FEFEFE on the cards */
  --surface-2:   #F2F6FB;
  --scrim:       #0E1A2E;   /* the hero's dark side, pulled toward the ink navy */

  /* --- ink ------------------------------------------------------------- */
  --ink:         #142B42;   /* C03; the logo letters measure #162C43. 13.8:1 on --page */
  --ink-2:       #45506B;   /* 7.68:1 */
  --ink-3:       #626D87;   /* 4.95:1 — the floor, so even the quietest text is AA */
  --on-dark:     #FFFFFF;
  --on-dark-2:   #D6DEEA;   /* 12.85:1 on --scrim */

  /* --- cobalt (primary action) ----------------------------------------- */
  --cobalt:      #2A5BE0;   /* see the long note above */
  --cobalt-700:  #2149BC;   /* hover; white on it is 7.65:1 */
  --cobalt-800:  #1A3A96;   /* text on a tint; 8.84:1 on --cobalt-tint */
  --cobalt-tint: #E9F1FE;   /* measured: the icon tile and the selected option row */
  --cobalt-tint-2:#DFEBFD;  /* measured: the Groto speech bubble, one step stronger */
  --cobalt-line: #C7DBFA;
  --cobalt-rgb:  42, 91, 224;   /* for rgba() shadows and focus rings */

  /* --- the three tracks ------------------------------------------------
     Measured off the three panels of screen 08. These are identity, not
     decoration: a track keeps its tint on every screen that mentions it. */
  --track-base-tint: #E9F3FD;  --track-base-line: #CFE3F8;  /* בונים בסיס */
  --track-solo-tint: #FEF8ED;  --track-solo-line: #F2E3C6;  /* מתרגלים עצמאית */
  --track-exam-tint: #E4F5E6;  --track-exam-line: #C6E6CB;  /* מתנסים בבגרות */

  /* --- the small lime accent (C03) --------------------------------------
     Decorative only — the sparkle marks around Groto. Never a text colour,
     never the sole carrier of a state. Measured #DEED95; C03 says #D7ED8B. */
  --accent:      #D7ED8B;
  --accent-line: #BFDC6A;

  /* --- Groto ------------------------------------------------------------
     The character is the supplied asset and is never recoloured. These are the
     colours the UI around him has to match. */
  --groto:            #1E3E88;   /* measured off his cover */
  --groto-bubble:     #DFEBFD;
  --groto-bubble-line:#BFD6F7;

  /* His size is chosen by ROLE, never per screen. Each token is fluid, so one
     value serves both a 390px phone and a 1440px desktop.
       hero   — introducing himself (landing, a celebration)
       coach  — beside a decision (onboarding steps)
       state  — an empty, error or recovery state
       inline — inside a card or a panel heading
       icon   — illustrating a step in a row of steps
       avatar — a face next to a short line of speech */
  --groto-hero:   clamp(150px, 18vw, 250px);
  --groto-coach:  clamp(132px, 21vw, 300px);
  --groto-state:  clamp(140px, 13vw, 190px);
  --groto-inline: clamp(76px, 7vw, 96px);
  --groto-icon:   clamp(64px, 6.5vw, 96px);
  --groto-avatar: 44px;

  /* --- semantic: used ONLY where the meaning is real ------------------- */
  --good:        #0B6B46;   --good-tint:   #E3F3EC;   /* 5.71:1 */
  --warn:        #8A4E04;   --warn-tint:   #FBEEDC;   /* 5.79:1 */
  --alert:       #A5271C;   --alert-tint:  #FDE9E7;   /* 6.19:1 */
  --neutral:     #5A6377;   --neutral-tint:#EDF0F4;   /* 5.27:1 */

  /* --- lines & elevation ----------------------------------------------- */
  --line:        #E3E9F1;
  --line-strong: #C8D2E0;
  --control-line: #738297; /* Active control edges: >=3:1 against light surfaces. */
  --shadow-sm:   0 1px 2px rgba(20,43,66,.06), 0 1px 1px rgba(20,43,66,.04);
  --shadow-md:   0 4px 16px rgba(20,43,66,.08), 0 1px 3px rgba(20,43,66,.05);
  --shadow-lg:   0 18px 48px rgba(20,43,66,.16);

  /* --- spacing: the C02 scale, and nothing between its steps ------------
     4 / 8 / 12 / 16 / 24 / 32 / 48. A screen that needs 20px needs 16 or 24. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  /* --- geometry ---------------------------------------------------------
     C02 puts component corners in the 10–16px band. --r-xl is deliberately
     outside it: it belongs to the hero panel, which C02 exempts by name. */
  --r-sm: 10px;  --r-md: 14px;  --r-lg: 16px;  --r-xl: 28px;  --r-pill: 999px;

  /* C02: 24px margins on a phone. --gutter is that number everywhere. */
  --gutter: var(--s5);
  --maxw: 1240px;

  /* --- controls ---------------------------------------------------------
     C02: at least 44px, usually 48–56. A control smaller than --tap-min is
     allowed to LOOK smaller, but it extends its own hit area to the floor —
     see .btn-sm::after. */
  --tap-min: 44px;
  --ctl-h:   48px;
  --ctl-h-lg:56px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 180ms;
}

/* Honour the OS "reduce motion" preference globally. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: "Rubik", "Heebo", "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  /* Only 400 and 700 are embedded. Without this, a declared 800 is synthesised
     by smearing the 700 outlines, which reads as a blurrier, wider headline
     than the reference — the exact thing being matched here. */
  font-synthesis-weight: none;
  /* The whole product is Hebrew; direction is set on <html dir="rtl"> too. */
  text-align: start;
  overflow-x: hidden;           /* belt-and-braces against a stray wide child */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.18; font-weight: 700; letter-spacing: -.015em; color: var(--heading-ink); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, video, svg { max-width: 100%; }

/* Latin/numeric runs inside Hebrew prose: keep them LTR so "5 יח״ל" and
   "2x+3" don't get reordered by the bidi algorithm. */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.math {
  direction: ltr; unicode-bidi: isolate;
  font-family: "Cambria Math", Georgia, "Times New Roman", serif;
  font-size: 1.05em;
}
/* Maths inside Hebrew (review N3). An inline maths run is an LTR isolate that
   never wraps inside the expression, so "0 ≤ t ≤ 7" can never be reordered or
   split; the Hebrew sentence around it stays RTL. `.m` is the same isolate in
   the UI font, for short tokens in copy (1/2, sqrt(2), 35581) — ui.js mathText()
   and isolateMath() produce it. Display maths (.mathblock) may still wrap. */
bdi.math, span.math, label.math { white-space: nowrap; }
.m { direction: ltr; unicode-bidi: isolate; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --- focus: visible, never removed -------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
  border-radius: 6px;
}
.on-dark :focus-visible, .lp-hero :focus-visible { outline-color: #9CC0FF; }

/* The router focuses the page heading so a screen-reader user lands on the new
   content. A heading is not a control, so it must not draw a focus ring. */
h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; inset-inline-start: 50%; top: -60px; transform: translateX(50%);
  z-index: 200; background: var(--ink); color: #fff; padding: 10px 18px;
  border-radius: 0 0 var(--r-md) var(--r-md); font-weight: 700; text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 0; }

/* ==========================================================================
   layout primitives
   ========================================================================== */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.stack > * + * { margin-top: var(--gap, 16px); }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row-tight { display: flex; align-items: center; gap: 8px; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ==========================================================================
   typography scale — C02
   Rubik, weights 400 and 700 only (fonts.css embeds exactly those two, and
   font-synthesis-weight:none below stops the browser faking anything else).
   Body is 16–18px. NOTHING in this file is smaller than 14px: C02 puts the
   floor for useful text there, and a badge label is useful text.
   The display size is a landing-page size, not a per-screen one — C02 forbids
   a giant scale on every screen, so .h1/.h2 stay modest.
   ========================================================================== */
/* Fitted to the reference by ink, with the real typeface in place: its second
   headline line inks out at 487 x 57px across a 1205px hero, which is Rubik
   Bold at 67.5px with -0.045em tracking — 5.601% of the hero width. Hero width
   is viewport - 48px, hence calc(R*100vw - R*48px) throughout this file. */
.display  { font-size: clamp(2.7rem, calc(5.601vw - 2.69px), 6rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.082; }
.h1       { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); }
.h2       { font-size: clamp(1.3rem, calc(2.419vw - 1.16px), 2rem); }
.h3       { font-size: 1.12rem; font-weight: 700; }
.lead     { font-size: clamp(1rem, calc(1.829vw - .88px), 1.5rem); color: var(--ink-2); line-height: 1.41; }
.body     { font-size: 1rem; color: var(--ink-2); }           /* 16px */
.body-lg  { font-size: 1.125rem; color: var(--ink-2); }        /* 18px — top of the C02 body band */
.small    { font-size: .9375rem; color: var(--ink-2); }        /* 15px */
.tiny     { font-size: .875rem;  color: var(--ink-3); }        /* 14px — the floor, not 12.8px */
.strongink{ color: var(--ink); }
.eyebrow  { font-size: .875rem; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); text-transform: none; }

/* ==========================================================================
   buttons
   ========================================================================== */
.btn {
  --btn-bg: var(--surface); --btn-fg: var(--ink); --btn-line: var(--line-strong);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  padding: 13px 22px; min-height: var(--ctl-h);   /* 48px — the C02 default */
  font: inherit; font-weight: 700; font-size: 1rem;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-line); border-radius: var(--r-pill);
  cursor: pointer; text-decoration: none; text-align: center;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn-primary {
  --btn-bg: var(--cobalt); --btn-fg: #fff; --btn-line: var(--cobalt);
  box-shadow: 0 6px 20px rgba(var(--cobalt-rgb), .24);
}
.btn-primary:hover:not(:disabled) { --btn-bg: var(--cobalt-700); --btn-line: var(--cobalt-700); box-shadow: 0 10px 26px rgba(var(--cobalt-rgb), .3); }

.btn-ghost  { --btn-bg: transparent; --btn-line: transparent; --btn-fg: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { --btn-bg: rgba(20,43,66,.06); --btn-fg: var(--ink); }

.btn-quiet  { --btn-bg: var(--surface); --btn-line: var(--line); }
.btn-quiet:hover:not(:disabled) { --btn-line: var(--line-strong); box-shadow: var(--shadow-sm); }

.btn-tinted { --btn-bg: var(--cobalt-tint); --btn-line: var(--cobalt-line); --btn-fg: var(--cobalt-800); }
.btn-tinted:hover:not(:disabled) { --btn-bg: #DCE7FD; }

/* The hero CTA. Measured on screen-01's desktop panel at ~380x70 image px,
   which is well above the C02 "usually 48–56px" band — that band is the floor
   for an ordinary button, not a ceiling for this one. */
.btn-lg  {
  padding-block: 0;
  padding-inline: clamp(24px, calc(4.44vw - 2.13px), 70px);
  min-height: clamp(var(--ctl-h-lg), calc(4.73vw - 2.27px), 74px);
  font-size: clamp(1.25rem, calc(1.718vw - .82px), 1.7rem);
  gap: clamp(10px, calc(1.2vw - .58px), 22px);
}

/* A small button is allowed to LOOK small — the reference's entry pill is 30px
   tall — but it is not allowed to be a small target. The pseudo-element below
   extends the hit area to the C02 floor without moving a single pixel of the
   visible box. */
.btn-sm  { padding: var(--s2) 15px; min-height: 36px; font-size: .9375rem; gap: 7px; }
.btn-sm::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: var(--tap-min); transform: translateY(-50%);
  min-width: var(--tap-min);
}
.btn-block { width: 100%; }

/* The CTA arrow in the reference points to the inline-end (left in RTL). */
.btn .arrow { flex: 0 0 auto; transition: transform var(--dur) var(--ease); }
.btn:hover:not(:disabled) .btn .arrow, .btn:hover:not(:disabled) .arrow { transform: translateX(-3px); }

.btn-icon {
  width: var(--tap-min); height: var(--tap-min); min-height: var(--tap-min);
  padding: 0; border-radius: var(--r-pill);
  display: inline-grid; place-items: center;
}

/* ==========================================================================
   cards & surfaces
   ========================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
}
.card-pad-sm { padding: 16px; }
.card-raised { box-shadow: var(--shadow-md); border-color: transparent; }
.card-tint   { background: var(--cobalt-tint); border-color: var(--cobalt-line); }

/* The three tracks, measured off the panels of screen 08. A track's tint is
   identity: the same tint follows it from screen 03 to 08 to 10. */
.card-track-base { background: var(--track-base-tint); border-color: var(--track-base-line); }
.card-track-solo { background: var(--track-solo-tint); border-color: var(--track-solo-line); }
.card-track-exam { background: var(--track-exam-tint); border-color: var(--track-exam-line); }
.card-cream  { background: var(--track-solo-tint); border-color: var(--track-solo-line); }
.card-dark   { background: var(--scrim); border-color: transparent; color: var(--on-dark); }
.card-dark .body, .card-dark .small, .card-dark .lead { color: var(--on-dark-2); }

.card-link {
  display: block; color: inherit; text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }

.divider { height: 1px; background: var(--line); border: 0; margin: 18px 0; }

/* ==========================================================================
   badges / pills / status
   State is NEVER carried by colour alone — every badge ships a glyph + word.
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--s1) var(--s3); border-radius: var(--r-pill);
  font-size: .875rem; font-weight: 700; line-height: 1.5;   /* 14px — the C02 floor */
  background: var(--neutral-tint); color: var(--ink-2);
  border: 1px solid transparent; white-space: nowrap;
}
.badge-good    { background: var(--good-tint);    color: var(--good);    border-color: #BEE2D1; }
.badge-warn    { background: var(--warn-tint);    color: var(--warn);    border-color: #F0D9B4; }
.badge-alert   { background: var(--alert-tint);   color: var(--alert);   border-color: #F7C9C4; }
.badge-info    { background: var(--cobalt-tint);  color: var(--cobalt-800); border-color: var(--cobalt-line); }
.badge-untested{ background: var(--neutral-tint); color: var(--neutral); border-color: #DBE1E9; }

/* --- C07: where a thing came from, as three explicit states ---------------
   These are never decorative. "verified" is a claim about a real source check
   and may only be used where verifiedAt is actually set. */
.badge-demo {        /* sample content written for this build */
  background: repeating-linear-gradient(135deg, #EDF1F6 0 6px, #E3E9F1 6px 12px);
  color: #46506A; border-color: #D3DCE7;
}
.badge-verified   { background: var(--good-tint);   color: var(--good);  border-color: #BEE2D1; }
.badge-unavailable{ background: var(--neutral-tint);color: var(--neutral); border-color: #DBE1E9; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line-strong);
  font-size: .875rem; font-weight: 700; color: var(--ink-2);
  cursor: pointer; transition: all var(--dur) var(--ease); font-family: inherit;
}
/* Hover is grey and never blue; selected is solid cobalt with a ✓ before the
   text (review ID 31). Hover exists only on devices that hover, so a tap on a
   phone never leaves a "stuck" colour behind. */
@media (hover: hover) {
  .chip:hover { border-color: var(--ink-3); background: var(--surface-2); color: var(--ink); }
}
.chip[aria-pressed="true"], .chip.is-on,
.chip[aria-pressed="true"]:hover, .chip.is-on:hover {
  background: var(--cobalt); border-color: var(--cobalt); color: #fff;
}
.chip[aria-pressed="true"] svg, .chip.is-on svg { flex: 0 0 auto; }
/* The ✓ before a selected chip's text (spec §10), drawn here so every chip —
   including ones whose aria-pressed is toggled in place — gets it. A chip that
   already carries its own glyph keeps just that glyph. */
.chip[aria-pressed="true"]:not(:has(svg))::before, .chip.is-on:not(:has(svg))::before,
.chip-radio:has(> input:checked):not(:has(svg))::before {
  content: ""; flex: 0 0 auto; inline-size: 15px; block-size: 15px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   forms
   ========================================================================== */
.field { display: block; }
.field > .label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 7px; color: var(--ink); }
.field > .hint  { display: block; font-size: .875rem; color: var(--ink-3); margin-top: 6px; }

.input, .select, .textarea {
  width: 100%; padding: 12px 15px; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--control-line);
  border-radius: var(--r-md); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(var(--cobalt-rgb), .16); }
.textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
/* The dropdown arrow. It used to be two 6px CSS-gradient half-squares meant to
   meet as a triangle; they met edge-on and rendered as a notched caret pointing
   the wrong way — visible on every select in the app, not only the two on the
   source screens. One inlined chevron, matching the `down` icon in ui.js so the
   control and the disclosures agree. */
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626D87' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: left 13px center;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  padding-inline-start: 15px; padding-inline-end: 38px;
}

/* Big tappable choice rows — the intake/diagnostic answer pattern, and the
   track picker on screen 03. */
.option {
  position: relative;
  display: flex; align-items: flex-start; gap: 13px; width: 100%; text-align: start;
  padding: 15px 18px; min-height: var(--ctl-h); background: var(--surface);
  border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
  font: inherit; color: var(--ink); cursor: pointer;
  transition: all var(--dur) var(--ease);
}
/* Hover: grey border + grey fill. Selected: cobalt border, inset line, tint and
   a filled ✓ mark. They must never look alike (review ID 31). */
@media (hover: hover) {
  .option:hover { border-color: var(--ink-3); background: var(--surface-2); }
  .option:hover .mark { border-color: var(--ink-3); }
}
.option[aria-pressed="true"], .option.is-on,
.option:has(input:checked),
.option[aria-pressed="true"]:hover, .option.is-on:hover, .option:has(input:checked):hover {
  border-color: var(--cobalt); background: var(--cobalt-tint); box-shadow: inset 0 0 0 1px var(--cobalt);
}
/* The native radio stays in the accessibility tree and keeps its keyboard
   behaviour; only its painting is replaced. The row is a <label for>, so the
   whole row is the hit area and the focus ring is drawn on the row. */
.option .mark > input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.option:has(input:focus-visible) { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.option .mark {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; margin-top: 2px;
  border: 2px solid var(--line-strong); display: grid; place-items: center;
  background: var(--surface); transition: all var(--dur) var(--ease);
}
.option.sq .mark { border-radius: 6px; }
.option[aria-pressed="true"] .mark, .option.is-on .mark,
.option:has(input:checked) .mark { border-color: var(--cobalt); background: var(--cobalt); color: #fff; }
.option .mark svg { opacity: 0; transition: opacity var(--dur) var(--ease); }
.option[aria-pressed="true"] .mark svg, .option.is-on .mark svg,
.option:has(input:checked) .mark svg { opacity: 1; }
.option .grow { display: block; }
.option .opt-title { display: block; font-weight: 700; }
.option .opt-note  { display: block; font-size: .875rem; color: var(--ink-2); margin-top: var(--s1); }

/* Answer rows while a question is being reviewed. */
.option.rev-correct { border-color: var(--good); background: var(--good-tint); box-shadow: none; }
.option.rev-wrong   { border-color: var(--alert); background: var(--alert-tint); box-shadow: none; }
.option.rev-muted   { opacity: .62; }

/* ==========================================================================
   progress
   ========================================================================== */
.meter { height: 8px; border-radius: var(--r-pill); background: var(--neutral-tint); overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--cobalt); border-radius: inherit; transition: width 380ms var(--ease); }
.meter.good > i { background: var(--good); }
.meter.warn > i { background: var(--warn); }
.meter.sm { height: 6px; }

.steps { display: flex; gap: 6px; }
.steps > i { height: 5px; flex: 1; border-radius: var(--r-pill); background: var(--neutral-tint); transition: background var(--dur) var(--ease); }
.steps > i.done { background: var(--cobalt); }
.steps > i.now  { background: var(--cobalt); opacity: .55; }

/* ==========================================================================
   app chrome — top bar + bottom bar (mobile)
   ========================================================================== */
.appbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(248,250,252,.88); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.appbar .wrap { display: flex; align-items: center; gap: 18px; height: 66px; }
.appbar-nav { display: flex; gap: 2px; margin-inline-start: auto; }
/* Reference nav links: ~15px, with the visual gap coming from their padding
   rather than from the flex gap (measured 29px between adjacent labels). */
.appbar-nav a {
  padding: 9px 14px; border-radius: var(--r-pill); text-decoration: none;
  color: var(--ink-2); font-weight: 400; font-size: clamp(.86rem, calc(1.245vw - .6px), 1.1rem); white-space: nowrap;
  transition: all var(--dur) var(--ease);
}
.appbar-nav a:hover { background: rgba(20,43,66,.06); color: var(--ink); }
.appbar-nav a[aria-current="page"] { background: var(--cobalt-tint); color: var(--cobalt-800); }
/* One set of destinations (review 28/N7): the four links sit centred and the
   labelled gear link "הגדרות" sits at the far end, replacing the unlabelled
   person icon that progress also used. */
.appbar .wrap > .appbar-nav { margin-inline-start: auto; margin-inline-end: auto; }
.appbar-settings {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 9px 14px; border-radius: var(--r-pill); text-decoration: none;
  color: var(--ink-2); font-size: clamp(.86rem, calc(1.245vw - .6px), 1.1rem); white-space: nowrap;
  transition: all var(--dur) var(--ease);
}
.appbar-settings svg { flex: 0 0 auto; }
.appbar-settings:hover { background: rgba(20,43,66,.06); color: var(--ink); }
.appbar-settings[aria-current="page"] { background: var(--cobalt-tint); color: var(--cobalt-800); }
.appbar-settings + .appbar-settings { margin-inline-start: -14px; }
/* The student's Bagrut, next to the wordmark, and the way to change it. */
.appbar-subject {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; min-height: 40px;
  padding: 6px 8px 6px 12px; border-radius: var(--r-pill); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink);
  font-size: .9375rem; font-weight: 700; white-space: nowrap;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.appbar-subject-name { overflow: hidden; text-overflow: ellipsis; }
.appbar-subject-change {
  font-size: .8125rem; font-weight: 700; color: var(--cobalt-700);
  background: var(--cobalt-tint); border-radius: var(--r-pill); padding: 3px 10px;
}
.appbar-subject svg { flex: 0 0 auto; color: var(--cobalt-700); }
.appbar-subject:hover { border-color: var(--cobalt); background: var(--cobalt-tint); }
.appbar-subject:focus-visible, .appbar-settings:focus-visible { outline: 3px solid rgba(var(--cobalt-rgb), .45); outline-offset: 2px; }

/* --- C01: the brand mark -------------------------------------------------
   The identity is the word בגרוטו with the ט carrying the cobalt, and that is
   the LAST explicit instruction in the handoff — it overrides the folded-page
   glyph that still appears in the headers of screens 01, 03, 09, 11, 14 and 16,
   and it replaces the hand-drawn underline this file used to draw (the updated
   logo board has no underline at all).

   It is type, not an image: the handoff forbids pasting the logo board as a
   header, and type is what survives 200% zoom, a forced-colours mode and a
   copy-paste. The letter spans carry no whitespace, so the DOM text is still
   exactly "בגרוטו"; the accessible name comes from the link's aria-label and
   the spans are hidden from the accessibility tree so no engine spells the
   word out letter by letter. */
.brand { display: inline-flex; align-items: center; gap: var(--s2); text-decoration: none; color: inherit; }
/* Reference wordmark inks out at 145px across a 1205px hero — 31px of Rubik
   Bold, which is considerably larger than a default nav wordmark. */
.brand .word { font-weight: 700; font-size: clamp(1.19rem, calc(2.649vw - 1.27px), 2.6rem); letter-spacing: -.025em; line-height: 1; color: var(--ink); }
.brand .tet  { color: var(--cobalt); }
.brand.on-dark .word { color: #fff; }
/* On the dark hero the ink half goes white, so the ט needs a lighter cobalt to
   stay distinguishable against it — #7FA8FF is 7.2:1 on the hero scrim. */
.brand.on-dark .tet  { color: #7FA8FF; }

/* The compact square mark from the logo board: the ט alone on a blue tint.
   Used where there is no room for the word — the phone tab bar, a favicon. */
.brand-glyph {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 1.4em; height: 1.4em; border-radius: .34em;
  background: var(--cobalt-tint); color: var(--cobalt);
  font-size: clamp(1.19rem, calc(2.649vw - 1.27px), 2.6rem);   /* track .word */
  font-weight: 700; line-height: 1;
}
.brand.on-dark .brand-glyph { background: rgba(255,255,255,.16); color: #fff; }

.tabbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 70;
  display: none; background: rgba(255,255,255,.96); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: var(--tap-min);
  padding: 6px 2px; text-decoration: none; color: var(--ink-3);
  /* 14px, the C02 floor. The tab bar therefore carries SHORT labels — see the
     TABS list in app.js, which names each destination in one or two words
     rather than reusing the desktop nav's longer phrasing. */
  font-size: .875rem; font-weight: 700; border-radius: var(--r-sm);
  line-height: 1.25; text-align: center;
}
.tabbar a[aria-current="page"] { color: var(--cobalt); }
/* The current tab gets a tint pill behind its icon, so colour is not the only
   signal of where you are. */
.tabbar a > svg { display: block; padding: 3px 14px; box-sizing: content-box; border-radius: var(--r-pill); transition: background var(--dur) var(--ease); }
.tabbar a[aria-current="page"] > svg { background: var(--cobalt-tint); }
.tabbar a[aria-current="page"] > span { color: var(--cobalt-800); }

/* The phone bar is hidden by the ATTRIBUTE on the bare pages — the landing hero
   and screen 16's two recovery views, which carry their own chrome. The media
   query below sets `display:flex`, and an author rule beats the UA sheet's
   `[hidden]`, so without this line those pages would show an empty 44px bar
   pinned to the bottom of the screen. */
.tabbar[hidden] { display: none !important; }
/* …and the body stops reserving room for a bar that is not there. */
[data-bare] body, body[data-bare] { padding-bottom: 0; }

/* ==========================================================================
   HERO media — the landing video (layout lives in the UX 2026-10-22 · landing block)
   ========================================================================== */
/* Both <video> layers sit here, object-fit:cover, never stretched. */
/* The remastered clip is 3.2 MB and arrives as base64 text, so there is a
   real gap before the first frame can be decoded. The poster is the clip's
   own opening frame at 960x540 (23 KB), painted instantly and crossfaded
   out the moment the video is live — it is the same footage, not a
   substitute for it. */
.hero-media {
  position: absolute; inset: 0; z-index: 0;
  background: var(--scrim) center 42% / cover no-repeat;
  background-image: url(assets/hero-poster.webp);
}
.hero-media.has-video { background-image: none; }
.hero-media video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  /* Desktop: the three students sit centre-frame, so centre is the safe crop. */
  object-position: 50% 42%;
  filter: brightness(1.06) saturate(1.05) contrast(1.02);
  opacity: 0; transition: opacity 520ms linear;
}
.hero-media video.is-live { opacity: 1; }

/* ==========================================================================
   content sections
   ========================================================================== */
.section { padding: clamp(30px, 4.4vw, 56px) 0; }
.section-head { margin-bottom: 22px; }
.section-head .h2 + .body { margin-top: 8px; }

.page { padding: clamp(20px, 3vw, 34px) 0 90px; }
.page-head { margin-bottom: 24px; }
.page-head .h1 + .lead { margin-top: 10px; }

/* Centred single-column flow used by onboarding/intake/diagnostic. */
.flow { max-width: 680px; margin-inline: auto; }
.flow-wide { max-width: 860px; margin-inline: auto; }

/* ==========================================================================
   data display
   ========================================================================== */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: baseline; }
.kv dt { color: var(--ink-3); font-size: .875rem; }
.kv dd { margin: 0; font-weight: 700; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: -4px; padding-inline: 4px; }
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 460px; }
table.data th, table.data td { padding: 11px 12px; text-align: start; border-bottom: 1px solid var(--line); }
table.data th { font-size: .875rem; color: var(--ink-3); font-weight: 700; white-space: nowrap; }
table.data tr:last-child td { border-bottom: 0; }

/* Horizontal bar chart used by the past-exams analysis. */
/* The frequency bars and the year strip that used to live here are gone with
   the data behind them. They drew "11 מתוך 12" from a hand-written table nobody
   had counted, which is the histogram handoff page 6 forbids until there is a
   defined sample with sources. Deleted rather than left unused, so nothing can
   quietly reach for them again. See src/source.js. */

/* ==========================================================================
   question workspace (practice + exam)
   ========================================================================== */
.work { display: grid; grid-template-columns: 1fr 272px; gap: 22px; align-items: start; }
.work-aside { position: sticky; top: 82px; }

.qnav { display: flex; flex-wrap: wrap; gap: 7px; }
.qnav button {
  width: 40px; height: 40px; border-radius: 10px; font: inherit; font-weight: 700; font-size: .9375rem;
  background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--ink-2); cursor: pointer;
  display: grid; place-items: center; position: relative;
  transition: all var(--dur) var(--ease);
}
.qnav button:hover { border-color: var(--cobalt); }
.qnav button.answered { background: var(--cobalt-tint); border-color: var(--cobalt-line); color: var(--cobalt-800); }
.qnav button.flagged::after {
  content: ""; position: absolute; top: -3px; inset-inline-end: -3px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--warn); border: 1.5px solid var(--surface);
}
.qnav button[aria-current="true"] { border-color: var(--cobalt); box-shadow: 0 0 0 2px rgba(var(--cobalt-rgb), .26); color: var(--ink); }

.qbody { font-size: 1.06rem; line-height: 1.75; }
.qbody .given { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; margin-top: 14px; }
.qbody .given li { display: flex; gap: 9px; }
.qbody .given li + li { margin-top: 6px; }
.qbody .given li::before { content: "•"; color: var(--cobalt); font-weight: 700; }

/* A tiny inline figure, drawn with CSS/SVG — no external images. */
.figure { margin-top: 16px; padding: 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); text-align: center; }
.figure svg { max-width: 100%; height: auto; }
.figure figcaption { margin-top: 8px; font-size: .875rem; color: var(--ink-3); }

.hintbox { border-inline-start: 3px solid var(--cobalt); background: var(--cobalt-tint); padding: 13px 16px; border-radius: 0 var(--r-md) var(--r-md) 0; }
.solution-step { display: flex; gap: 13px; }
.solution-step + .solution-step { margin-top: 14px; }
.solution-step .n {
  flex: 0 0 auto; width: 27px; height: 27px; border-radius: 50%;
  background: var(--cobalt-tint); color: var(--cobalt-800);
  display: grid; place-items: center; font-weight: 700; font-size: .875rem;
}
.solution-step.flagged .n { background: var(--alert-tint); color: var(--alert); }

.timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem; }
.timer.low { color: var(--alert); }

/* ==========================================================================
   empty / loading / error states
   ========================================================================== */
.empty {
  text-align: center; padding: clamp(28px, 5vw, 52px) 22px;
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface-2);
}
.empty .glyph { width: 46px; height: 46px; margin-inline: auto; margin-bottom: 12px; color: var(--ink-3); }
.empty .h3 { margin-bottom: 6px; }

.notice { display: flex; gap: 11px; padding: 13px 16px; border-radius: var(--r-md); font-size: .9375rem; line-height: 1.55; }
.notice .glyph { flex: 0 0 auto; margin-top: 1px; }
.notice-info { background: var(--cobalt-tint); color: var(--cobalt-800); border: 1px solid var(--cobalt-line); }
.notice-warn { background: var(--warn-tint); color: var(--warn); border: 1px solid #F0D9B4; }
.notice-alert{ background: var(--alert-tint); color: var(--alert); border: 1px solid #F7C9C4; }
.notice-demo { background: var(--surface-2); color: var(--ink-2); border: 1px dashed var(--line-strong); }

.skel { background: linear-gradient(90deg, #E7EDF4 25%, #F3F7FB 37%, #E7EDF4 63%); background-size: 400% 100%; animation: shimmer 1.3s linear infinite; border-radius: var(--r-sm); }
@keyframes shimmer { 0% { background-position: 100% 0 } 100% { background-position: -100% 0 } }

/* ==========================================================================
   modal
   ========================================================================== */
.modal-root { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 20px; }
.modal-veil { position: absolute; inset: 0; background: rgba(16,20,28,.5); backdrop-filter: blur(3px); border: 0; width: 100%; cursor: pointer; }
.modal-box {
  position: relative; width: min(520px, 100%); max-height: 86vh; overflow: auto;
  background: var(--surface); border-radius: var(--r-lg); padding: 26px;
  box-shadow: var(--shadow-lg); animation: pop 200ms var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.985) } to { opacity: 1; transform: none } }

/* ==========================================================================
   transitions between routes — subtle, never blocking
   ========================================================================== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.view-enter { animation: fadeUp 240ms var(--ease) both; }

/* The landing's first step forward (go(…, {flow:true}) in app.js): the screens
   cross-fade with a small lift, and Groto, who is on both, glides from his spot
   on the landing to his spot beside the picker. Reduced motion never gets here. */
@keyframes flowOut { to { opacity: 0; transform: translateY(-12px) } }
@keyframes flowIn { from { opacity: 0; transform: translateY(14px) } }
::view-transition-old(root) { animation: flowOut 260ms var(--ease) both; }
::view-transition-new(root) { animation: flowIn 340ms var(--ease) both; }
::view-transition-group(groto) { animation-duration: 460ms; animation-timing-function: var(--ease); }
[data-flow] .stage-aside .groto-fig { view-transition-name: groto; }

/* ==========================================================================
   C04 — גרוטו, the coaching component
   One highlighted target at a time. The bubble is positioned by groto.js from
   the live rect of the target element, so everything here is geometry the
   script sets through custom properties rather than fixed offsets.
   ========================================================================== */
.groto-layer {
  position: fixed; inset: 0; z-index: 90;
  /* The layer never eats a click. Only the bubble's own controls do. */
  pointer-events: none;
}

.groto-bubble {
  position: absolute; pointer-events: auto;
  max-width: min(320px, calc(100vw - 2 * var(--gutter)));
  background: var(--groto-bubble);
  border: 1px solid var(--groto-bubble-line);
  border-radius: var(--r-md);
  padding: var(--s3) var(--s4);
  box-shadow: var(--shadow-md);
  color: var(--ink);
  font-size: 1rem; line-height: 1.5;
  animation: grotoIn 200ms var(--ease) both;
}
@keyframes grotoIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

.groto-bubble .groto-msg { margin: 0; }
.groto-bubble .groto-foot {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: var(--s3);
}
.groto-bubble .groto-dismiss {
  font: inherit; font-size: .9375rem; font-weight: 700;
  background: transparent; border: 0; padding: var(--s2) var(--s3);
  margin: calc(var(--s2) * -1) calc(var(--s3) * -1);
  color: var(--cobalt-800); cursor: pointer; border-radius: var(--r-sm);
  min-height: var(--tap-min);
}
.groto-bubble .groto-dismiss:hover { background: rgba(var(--cobalt-rgb), .1); }

/* The tail. It is drawn ONLY when groto.js has found room for it on a side it
   can actually point from — C04 forbids an arrow that points at the wrong
   thing, so the no-room case drops the tail instead of guessing. */
.groto-bubble[data-tail]::before,
.groto-bubble[data-tail]::after {
  content: ""; position: absolute; width: 0; height: 0;
  border: 9px solid transparent;
}
.groto-bubble[data-tail="bottom"]::before { bottom: -19px; left: var(--tail-pos, 24px); border-top-color: var(--groto-bubble-line); }
.groto-bubble[data-tail="bottom"]::after  { bottom: -17px; left: var(--tail-pos, 24px); border-top-color: var(--groto-bubble); }
.groto-bubble[data-tail="top"]::before    { top: -19px;    left: var(--tail-pos, 24px); border-bottom-color: var(--groto-bubble-line); }
.groto-bubble[data-tail="top"]::after     { top: -17px;    left: var(--tail-pos, 24px); border-bottom-color: var(--groto-bubble); }
.groto-bubble[data-tail="left"]::before   { left: -19px; top: var(--tail-pos, 20px); border-right-color: var(--groto-bubble-line); }
.groto-bubble[data-tail="left"]::after    { left: -17px; top: var(--tail-pos, 20px); border-right-color: var(--groto-bubble); }
.groto-bubble[data-tail="right"]::before  { right: -19px; top: var(--tail-pos, 20px); border-left-color: var(--groto-bubble-line); }
.groto-bubble[data-tail="right"]::after   { right: -17px; top: var(--tail-pos, 20px); border-left-color: var(--groto-bubble); }

/* The highlight on the target. An outline, never an overlay: C04 forbids
   covering the control, and an outline cannot intercept a pointer event. */
.groto-spot {
  outline: 3px solid var(--cobalt);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

[data-coach-disabled] [data-coach-auto], .groto-card[hidden], .groto-bubble[hidden] { display: none !important; }

/* Groto standing beside the content, as on screens 03, 09 and 11. The figure
   is decorative; the instruction is in the bubble, which is real text. */
/* .groto-fig itself is defined once, under "Every pose has 81–95% …" below. */
.groto-aside { display: flex; align-items: flex-start; gap: var(--s4); }

/* The in-flow coaching card — screen 08's "נתחיל בצעד אחד" and screen 09's
   "מתחילים כאן". Same component, no tail, no positioning, no layer. */
.groto-card {
  display: flex; align-items: center; gap: var(--s3);
  background: var(--track-solo-tint); border: 1px solid var(--track-solo-line);
  border-radius: var(--r-md); padding: var(--s3) var(--s4);
}
.groto-card.tone-blue { background: var(--cobalt-tint); border-color: var(--cobalt-line); }
.groto-card .groto-fig { width: clamp(44px, 7vw, 66px); }
.groto-card .groto-title { font-weight: 700; color: var(--heading-ink); display: block; }
.groto-card .groto-body  { font-size: .9375rem; color: var(--ink-2); }

/* C04: the whole thing is suppressible, and reduced motion kills the entrance
   rather than merely shortening it. */
@media (prefers-reduced-motion: reduce) {
  .groto-bubble { animation: none; }
}

/* ==========================================================================
   C05 — fields, errors and maths
   ========================================================================== */
/* An error is a sentence about THIS field, tied to it by aria-describedby and
   announced politely. Colour is never the only signal — there is a glyph and
   there are words. */
.field-error {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: 6px; font-size: .9375rem; font-weight: 400; color: var(--alert);
}
.field-error svg { flex: 0 0 auto; margin-top: 2px; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--alert);
  box-shadow: 0 0 0 3px rgba(165,39,28,.12);
}

/* A maths answer box. Short, LTR, and sitting on the same baseline as the
   formula fragment that labels it ("x = [ ]"), as on screens 08 and 09. */
.mathfield { display: inline-flex; align-items: center; gap: var(--s2); direction: ltr; unicode-bidi: isolate; }
.mathfield > .input { width: clamp(90px, 22vw, 180px); text-align: center; direction: ltr; }

/* A formula on its own line. The slab tint is measured from screen 09. */
.mathblock {
  direction: ltr; unicode-bidi: isolate; text-align: center;
  font-family: "Cambria Math", Georgia, "Times New Roman", serif;
  font-size: 1.5rem; line-height: 1.5;
  padding: var(--s3) var(--s4);
  background: var(--cobalt-tint); border-radius: var(--r-md);
  overflow-x: auto;
}
.mathblock.bare { background: transparent; padding-inline: 0; }

/* The optional hint — screen 08's "רמז (אופציונלי)". Closed by default, and
   what is behind it is a nudge, never the answer. */
.disclosure { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.disclosure > summary {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4); min-height: var(--tap-min);
  cursor: pointer; font-weight: 700; color: var(--cobalt-800);
  list-style: none; border-radius: inherit;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary .chev { margin-inline-start: auto; transition: transform var(--dur) var(--ease); }
.disclosure[open] > summary .chev { transform: rotate(180deg); }
.disclosure > .disclosure-body { padding: 0 var(--s4) var(--s4); font-size: .9375rem; color: var(--ink-2); line-height: 1.6; }

/* ==========================================================================
   C06 — solution, why, and self-report
   ========================================================================== */
.sol-step {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); padding: var(--s4);
}
.sol-step + .sol-step { margin-top: var(--s3); }
.sol-step.is-open { border-color: var(--cobalt-line); box-shadow: var(--shadow-sm); }

/* A step the student has not reached yet. It is a real button — C06 puts no
   condition on skipping ahead — and it is the whole row, so the tap target is
   the size of the step rather than the size of its label. */
button.sol-step-ahead {
  display: block; width: 100%; text-align: start;
  min-height: var(--ctl-h); font: inherit; color: var(--ink); cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
button.sol-step-ahead:hover { border-color: var(--cobalt-line); }
.sol-step-head { display: flex; align-items: center; gap: var(--s3); }
.sol-step .n {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  background: var(--neutral-tint); color: var(--ink-2);
  display: grid; place-items: center; font-weight: 700; font-size: .9375rem;
}
/* The live step's dot, measured #1B5CFB on screen 09 — cobalt, filled. */
.sol-step.is-open .n { background: var(--cobalt); color: #fff; }
.sol-step .sol-title { font-weight: 700; font-size: 1.06rem; }
.sol-step .sol-what  { margin-top: var(--s2); color: var(--ink-2); }

/* "למה עושים את זה?" — one per step, and it explains why the move is legal,
   when to reach for it, and what it means on the picture. */
.sol-why { margin-top: var(--s3); }
.sol-why > summary {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap-min); cursor: pointer; list-style: none;
  font-weight: 700; font-size: .9375rem; color: var(--cobalt-800);
}
.sol-why > summary::-webkit-details-marker { display: none; }
.sol-why > summary .chev { transition: transform var(--dur) var(--ease); }
.sol-why[open] > summary .chev { transform: rotate(180deg); }
.sol-why .why-body {
  margin-top: var(--s2); padding: var(--s3) var(--s4);
  background: var(--cobalt-tint); border-radius: var(--r-md);
  font-size: .9375rem; line-height: 1.65; color: var(--ink);
}
.sol-why .why-body dt { font-weight: 700; }
.sol-why .why-body dd { margin: 0 0 var(--s3); color: var(--ink-2); }
.sol-why .why-body dd:last-child { margin-bottom: 0; }

/* The self-report row from the foot of screen 09. This is how the session felt
   to the student. It is stored separately from the attempt log and it is never
   turned into a mark — C06 forbids a grade or a verdict on a student. */
.selfreport { border: 0; border-top: 1px solid var(--line); padding: var(--s4) 0 0; margin: 0; min-width: 0; }
.selfreport > legend { float: none; font-size: .9375rem; color: var(--ink-2); font-weight: 400; margin-bottom: var(--s3); }
.selfreport .choices { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* A chip that IS a radio. The input stays in the accessibility tree and keeps
   its keyboard behaviour — arrow keys move within the group, the legend names
   it — and is only moved out of sight. display:none would delete all of that. */
.chip-radio { position: relative; }
.chip-radio > input {
  position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0;
  margin: 0; cursor: pointer;
}
.chip-radio:has(> input:checked) { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.chip-radio:has(> input:focus-visible) { outline: 3px solid var(--cobalt); outline-offset: 2px; }

/* ==========================================================================
   C07 — where it came from, and whether it actually saved
   ========================================================================== */
.save-row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }

/* The "saved" line. It is rendered only after a write succeeded, so it never
   appears next to work that is only in memory. */
.save-state { display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; font-weight: 700; }
.save-state[data-state="saved"]   { color: var(--good); }
.save-state[data-state="saving"]  { color: var(--ink-3); font-weight: 400; }
.save-state[data-state="memory"]  { color: var(--warn); }
.save-state[data-state="failed"]  { color: var(--alert); }

/* An irreversible delete is physically separated from everything else, and the
   button never sits inside the same group as a save. */
.danger-zone {
  margin-top: var(--s7);
  border: 1px solid #F0C9C4; border-radius: var(--r-lg);
  background: var(--alert-tint); padding: var(--s5);
}
.danger-zone .h3 { color: var(--alert); }
.btn-danger { --btn-bg: var(--alert); --btn-fg: #fff; --btn-line: var(--alert); }
.btn-danger:hover:not(:disabled) { --btn-bg: #8C1F16; --btn-line: #8C1F16; }

/* ==========================================================================
   C08 — the accessible shell
   ========================================================================== */
/* A real switch. It is a <button role="switch">, so the keyboard gets it for
   free; this only draws it. Screen 14 is the reference. */
/* Off is light (neutral track, a ≥3:1 edge and a grey knob at the start); on is
   cobalt with a white knob carrying a ✓ at the end (review N20). The word next
   to it (.switch-state) says פועל / כבוי, so state is never colour alone. */
.switch {
  flex: 0 0 auto; position: relative;
  width: 56px; height: 32px; padding: 0; border: 0; border-radius: var(--r-pill);
  /* The track's own colour stays the ≥3:1 control line (UI-04); the two inset
     shadows paint it as a 2px edge around a light neutral fill. */
  background: var(--control-line);
  box-shadow: inset 0 0 0 2px var(--control-line), inset 0 0 0 40px var(--neutral-tint);
  cursor: pointer;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.switch::after {
  content: ""; position: absolute; top: 6px; inset-inline-start: 6px;
  width: 20px; height: 20px; border-radius: 50%; background-color: var(--control-line);
  background-repeat: no-repeat; background-position: center; background-size: 14px;
  transition: translate var(--dur) var(--ease);
}
.switch[aria-checked="true"] { background: var(--cobalt); box-shadow: none; }
.switch[aria-checked="true"]::after {
  top: 4px; inset-inline-start: 4px; width: 24px; height: 24px;
  background-color: #fff; box-shadow: var(--shadow-sm);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A5BE0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  translate: 24px 0;
}
[dir="rtl"] .switch[aria-checked="true"]::after { translate: -24px 0; }
.switch-state { flex: 0 0 auto; min-width: 3.2em; text-align: end; font-size: .875rem; font-weight: 700; color: var(--ink-3); }
.switch-state.is-on { color: var(--cobalt-800); }
/* "✓ נשמר" beside the switch that was just changed (settings, review 33). */
.switch-row .row-saved { flex: 0 0 auto; color: var(--good); font-size: .875rem; }
/* The hit area reaches the C02 floor without the track growing to match. */
.switch::before { content: ""; position: absolute; inset: -6px; }

.switch-row {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
}
.switch-row + .switch-row { margin-top: var(--s2); }
.switch-row .grow { display: block; }
.switch-row .grow .label { font-weight: 700; display: block; }
.switch-row .grow .note  { display: block; font-size: .9375rem; color: var(--ink-2); }

/* A genuine radio group: a <fieldset> with a <legend>, so the group has a name
   and arrow keys move within it. The legend is visible unless a heading right
   above already says the same thing. */
.choicegroup { border: 0; padding: 0; margin: 0; min-width: 0; }
.choicegroup > legend { padding: 0; font-weight: 700; margin-bottom: var(--s3); }
.choicegroup .choices { display: grid; gap: var(--s3); }

/* ==========================================================================
   responsive — a real phone layout, not a shrunken desktop
   ========================================================================== */
@media (max-width: 1000px) {
  .work { grid-template-columns: 1fr; }
  .work-aside { position: static; }
}

@media (max-width: 860px) {
  /* C02 asks for 24px phone margins before any visual tuning, so the gutter
     stays on the scale here rather than dropping to 16px as it used to. */
  :root { --gutter: var(--s5); }

  .appbar-nav { display: none; }
  .appbar .wrap { height: 58px; gap: 8px; }
  /* Help and settings stay in the phone's top bar as icons, so the tab bar
     below holds only the destinations. */
  .appbar-settings { padding: 0; width: 44px; height: 44px; justify-content: center; }
  .appbar-settings > span { display: none; }
  .appbar-settings + .appbar-settings { margin-inline-start: 0; }
  .appbar-subject { margin-inline-end: auto; font-size: .875rem; padding-inline-start: 10px; }
  .appbar-subject-change { display: none; }
  .tabbar { display: flex; }
  body { padding-bottom: 66px; }           /* room for the fixed tab bar */
  /* Keyboard focus and in-page jumps stop above the fixed tab bar, never under it. */
  html:not(:has(body[data-bare])) { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

  .btn-lg { width: 100%; }


  .card { padding: 17px; border-radius: var(--r-md); }
  .modal-box { padding: 20px; }
  .page { padding-bottom: 40px; }
}

@media (max-width: 420px) {
  .btn { padding: 12px 17px; }
  .qnav button { width: 34px; height: 34px; }
}

/* Print: nobody will, but a cut-off exam page is a bad look if they do. */
@media print {
  .appbar, .tabbar, .work-aside { display: none !important; }
}

/* ==========================================================================
   SCREENS 01–04 and 15 — entry and onboarding
   ==========================================================================

   Everything below is laid out from the handoff's target boards. Three habits
   the boards impose, and they are worth stating once rather than repeating in
   every rule:

   · Each board shows ONE page at two breakpoints. The wide panel is desktop and
     the narrow one is the phone, so nothing here is a two-column desktop layout
     that collapses — the phone rules are their own composition.
   · On every choice row the boards put the illustration at the inline-START and
     the radio at the inline-END, which is the mirror of what `radioGroup()`
     emits. `.rowflip` below is that mirror, done once.
   · Groto sits on the inline-END (the left, in RTL) and the content he points at
     on the inline-START. He is sized to the control he serves, not to the page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   the three tracks, as a shared vocabulary
   A track's tint is its identity and follows it from screen 01 to 03 to 15.
   -------------------------------------------------------------------------- */
.track-base { --track-tint: var(--track-base-tint); --track-line: var(--track-base-line); }
.track-solo { --track-tint: var(--track-solo-tint); --track-line: var(--track-solo-line); }
.track-exam { --track-tint: var(--track-exam-tint); --track-line: var(--track-exam-line); }

/* ==========================================================================
   S02/S04 — the stage rail
   Three dots on a line with their names beneath. It reports WHICH STEP of the
   choice we are on; it is never a score and never a readiness figure.
   ========================================================================== */
.stagerail { display: flex; align-items: flex-start; justify-content: center; }
/* Each item has to be at least as wide as its own name, or the three names run
   into one another and read as a single word — which is exactly what happened
   the first time this rendered. */
.stagerail-item { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 0 0 auto; min-width: clamp(56px, 7vw, 92px); }
.stagerail-dot {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--line-strong);
}
.stagerail-item.is-done .stagerail-dot { background: var(--cobalt-line); border-color: var(--cobalt-line); }
.stagerail-item.is-now  .stagerail-dot { border-color: var(--cobalt); box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 9px var(--cobalt); }
.stagerail-name { font-size: .875rem; color: var(--ink-3); white-space: nowrap; }
.stagerail-item.is-now .stagerail-name { color: var(--cobalt-800); font-weight: 700; }
.stagerail-join { flex: 0 1 clamp(40px, 7vw, 110px); height: 2px; background: var(--line-strong); margin-top: 6px; }

/* The numbered 1-2-3 rail of the guided first step. Same idea, different form:
   the boards draw this one with the numbers inside the dots. */
.steprail { display: flex; align-items: center; gap: var(--s2); }
.steprail-dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .875rem; font-weight: 700;
  background: var(--surface); color: var(--ink-3); border: 1.5px solid var(--line-strong);
}
.steprail-dot.is-now { background: var(--cobalt); color: #fff; border-color: var(--cobalt); }
.steprail-join { width: clamp(16px, 2vw, 26px); height: 1.5px; background: var(--line-strong); }
.steprail-label { margin-top: var(--s2); }
.steprail-label b { display: block; font-weight: 700; color: var(--ink-2); font-size: .875rem; }
.steprail-label span { display: block; font-size: .875rem; color: var(--ink-3); }

/* ==========================================================================
   S02/S03/S04 — the stage: content on the inline-start, Groto on the
   inline-end. One grid, three screens.
   ========================================================================== */
/* Named areas rather than source order, because the two breakpoints want
   different orders and neither should be achieved by reordering the DOM:
   desktop puts Groto in a column of his own beside everything, the phone puts
   him BETWEEN the heading and the choices, which is what the narrow panels of
   boards 02 and 03 show. */
.stage {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-areas: "head aside" "body aside";
  gap: clamp(12px, 2vw, 28px) clamp(16px, 3vw, 48px);
  align-items: start;
}
.stage-head { grid-area: head; min-width: 0; }
.stage-body { grid-area: body; min-width: 0; }
.stage-aside {
  grid-area: aside; align-self: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3);
}
.stage-head > .h1 + .lead { margin-top: var(--s3); }

/* His bubble on these screens is in the document, not on the coaching layer:
   it is beside him permanently rather than pointing at one control, so it must
   not take the one slot C04 reserves for a live coach. */
.stage-bubble {
  position: relative; max-width: 30ch;
  background: var(--groto-bubble); border: 1px solid var(--groto-bubble-line);
  color: var(--ink); border-radius: var(--r-md); padding: var(--s3) var(--s4);
  font-size: .9375rem; line-height: 1.5;
}
.stage-bubble b { display: block; font-weight: 700; }
.stage-bubble::after {
  content: ""; position: absolute; bottom: -9px; inset-inline-start: 26px;
  width: 0; height: 0; border: 9px solid transparent;
  border-top-color: var(--groto-bubble); border-bottom: 0;
}
/* The ONLY size rule for the onboarding coach (pick / intake), every viewport. */
.stage-aside .groto-fig { width: var(--groto-coach); flex: 0 0 auto; max-width: 100%; height: auto; }

/* ==========================================================================
   choice rows — the boards' orientation
   `radioGroup()` emits [radio, text, art]; every board shows [art, text, radio].
   One flip, applied by the screens that need it.
   ========================================================================== */
.choicegroup.rowflip .option { flex-direction: row-reverse; align-items: center; }
.choicegroup.rowflip .option > .mark { margin-top: 0; }
.choice-ico {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--cobalt-tint); color: var(--cobalt-800);
  border: 1px solid var(--cobalt-line);
}
.option:has(input:checked) .choice-ico { background: var(--surface); }
/* The track illustration at the end of a screen-03 row. */
.choice-art { flex: 0 0 auto; width: clamp(54px, 9vw, 86px); height: auto; color: var(--cobalt); }
.choice-art svg { display: block; width: 100%; height: auto; }

/* The subject rows of screen 02 are a single centred name, as on the board. */
.choicegroup.centred .option .grow { text-align: center; }
.choicegroup.centred .option .opt-title { font-size: 1.12rem; }

/* The boards put the forward action across the full width of the choices it
   belongs to, not floated beside them. */
.stage-body > div > .btn-primary, .stage-cta { width: 100%; }

/* ==========================================================================
   S04 — the guided first step
   ========================================================================== */
.guided-card {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(18px, 2.6vw, 34px);
}
.guided-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent); color: #35430F;
  border: 1px solid var(--accent-line); border-radius: var(--r-pill);
  padding: var(--s1) var(--s3); font-size: .875rem; font-weight: 700;
}
.guided-q { margin-top: var(--s4); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 700; line-height: 1.3; }
.guided-fn { margin-top: var(--s3); text-align: center; font-size: clamp(1.1rem, .9rem + .8vw, 1.5rem); }

/* The axis figure: one line, one marked point, drawn rather than fetched. */
.guided-axis {
  margin-top: var(--s5); padding: var(--s4);
  background: var(--surface); border-radius: var(--r-md);
}
.guided-axis svg { display: block; width: 100%; max-width: 430px; height: auto; margin-inline: auto; }

/* "y = [ ]" is a maths fragment, so it is laid out LTR: the label, the equals
   sign and then the box. Letting it inherit RTL put the box before its own
   label, which is the single most common way a Hebrew UI gets maths wrong. */
.guided-answer {
  margin-top: var(--s4); padding: var(--s4);
  background: var(--surface); border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center; gap: var(--s3);
  direction: ltr; unicode-bidi: isolate;
}
/* flex-basis, not width:100% — a 100%-wide flex item forces its own wrap, and
   on a 390px screen that dropped the box onto the line below its own label. */
.guided-answer .input { flex: 1 1 140px; width: auto; max-width: 260px; min-width: 110px; text-align: center; }
.guided-actions { margin-top: var(--s5); display: grid; gap: var(--s3); justify-items: stretch; }
.guided-actions .btn-primary { width: 100%; }
.guided-alone { justify-self: center; }

/* ==========================================================================
   S15 — איך לומדים עם גרוטו
   ========================================================================== */
.how-page {
  --how-navy: #071A30; --how-lime: #DCF64C; --how-sky: #AAE7FA; --how-blue: #0A58FE;
  padding: 0 0 clamp(40px, 6vw, 90px);
}
/* The band: the landing's navy, so the explanation looks like the same product. */
.how-band {
  color: #fff; padding: clamp(18px, 2.4vw, 30px) 0 clamp(26px, 3.6vw, 48px);
  background: radial-gradient(120% 140% at 85% 0%, #17407F 0%, #0B2548 45%, var(--how-navy) 100%);
}
.how-hero { display: flex; align-items: center; gap: clamp(12px, 3vw, 48px); }
.how-hero-copy { flex: 1 1 auto; min-width: 0; }
.how-hero-fig { flex: 0 0 auto; }
.how-groto { width: clamp(120px, 16vw, 220px); height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0,0,0,.35)); }
.how-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 10px; font-weight: 700; color: #fff; font-size: clamp(1rem, .9rem + .3vw, 1.2rem); }
.how-eyebrow::before { content: ""; width: 34px; height: 4px; border-radius: 2px; background: var(--how-lime); }
.how-title { margin: 0; color: #fff; font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); line-height: 1.08; font-weight: 800; }
.how-title .accent-line { color: var(--how-sky); }
.how-lead { margin: var(--s3) 0 0; max-width: 36em; color: rgba(255,255,255,.88); font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); line-height: 1.5; }

.how-body { padding-top: clamp(24px, 3.4vw, 44px); display: grid; gap: clamp(28px, 4vw, 52px); }
.how-sec-title { margin: 0 0 var(--s4); font-size: clamp(1.35rem, 1.05rem + 1vw, 1.9rem); color: var(--ink); }

/* A drawing of the app bar, with numbered pins the steps refer to. */
.how-bar {
  display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); flex-wrap: wrap;
  padding: 12px clamp(14px, 2vw, 22px); border-radius: 18px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(10,30,70,.08);
  pointer-events: none; user-select: none; font-size: .9375rem; color: var(--ink-2);
}
.how-bar-brand .word { font-size: 1.45rem; }
.how-bar-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-weight: 700; color: var(--ink); }
.how-bar-change { font-size: .8125rem; color: var(--cobalt-700); background: var(--cobalt-tint); border-radius: var(--r-pill); padding: 2px 10px; }
.how-bar-nav { display: inline-flex; align-items: center; gap: clamp(8px, 1.4vw, 18px); flex-wrap: wrap; margin-inline: auto; }
.how-bar-nav > span:not(.how-pin) { display: inline-flex; align-items: center; gap: 5px; }
.how-bar-nav svg, .how-bar-end svg { color: var(--cobalt-700); }
.how-bar-end { display: inline-flex; align-items: center; gap: 12px; }
.how-pin {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--how-blue); color: #fff; font-size: .8125rem; font-weight: 800;
  box-shadow: 0 0 0 3px rgba(10,88,254,.18);
}
.how-steps { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 24px); }
.how-step { display: flex; gap: 14px; align-items: flex-start; }
.how-step-n { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--how-blue); color: #fff; font-weight: 800; }
.how-step-title { margin: 4px 0 4px; font-size: 1.125rem; color: var(--ink); }
.how-step-body { margin: 0; color: var(--ink-2); line-height: 1.5; }

/* The three places, each with a picture of its screen. */
.how-places { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 24px); }
.how-place {
  display: flex; flex-direction: column; gap: var(--s3);
  background: linear-gradient(180deg, #F3F8FF, #fff 60%); border: 1px solid #D7E5FA;
  border-radius: 22px; padding: clamp(16px, 2vw, 24px);
}
.how-place-head { display: flex; align-items: center; gap: 12px; }
.how-place-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--how-blue); color: #fff; }
.how-place-name { margin: 0; font-size: 1.375rem; color: var(--ink); }
.how-place-line { margin: 0; color: var(--ink-2); line-height: 1.5; }
.how-place .how-demo { border: 1px solid var(--line); }
.how-place-go { margin-top: auto; align-self: flex-start; gap: 8px; }
.how-more { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3) var(--s5); color: var(--ink-2); }
.how-more li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.how-more b { color: var(--ink); }
.how-more-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--cobalt-tint); color: var(--cobalt-800); }

/* The illustrations. These are pictures of the product: nothing inside is
   focusable and the whole panel is hidden from the accessibility tree, so the
   page never shows a control that does not work. */
.how-demo {
  background: var(--surface); border-radius: var(--r-md);
  padding: var(--s4); display: grid; gap: var(--s3);
  font-size: .875rem; color: var(--ink-2);
  pointer-events: none; user-select: none;
}
.how-demo-head { font-weight: 700; color: var(--ink); background: var(--cobalt-tint); border-radius: var(--r-sm); padding: 5px 10px; justify-self: start; }
.how-demo-math { text-align: center; font-size: 1rem; color: var(--ink); }
.how-demo-math.inline { text-align: start; }
.how-demo-step { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.how-demo-step .n {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: .75rem; font-weight: 700;
  background: var(--cobalt); color: #fff;
}
.how-demo-input {
  border: 1px solid var(--cobalt-line); border-radius: var(--r-sm);
  padding: 10px 12px; color: var(--ink-3); background: var(--surface);
}
.how-demo-row { display: flex; align-items: center; gap: var(--s2); color: var(--cobalt-800); background: var(--cobalt-tint); border-radius: var(--r-sm); padding: 9px 12px; font-weight: 700; }
.how-demo-ico { display: inline-flex; }
.how-demo-bar { display: flex; align-items: center; gap: var(--s2); }
.how-demo-q { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* The exam demo: the timer is shown OFF (the app's default), and the options
   carry Hebrew letters, as a bagrut paper does. */
.how-exam-q { margin: 14px 0 10px; font-weight: 700; font-size: 1.0625rem; color: var(--ink); }
.how-exam-opts { display: grid; gap: 8px; }
.how-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--surface); }
.how-opt b { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--ink-2); font-size: .875rem; }
.how-opt .m { font-size: 1.0625rem; font-weight: 700; }
.how-opt.is-on { border-color: var(--cobalt); background: var(--cobalt-tint); box-shadow: inset 0 0 0 1px var(--cobalt); }
.how-opt.is-on b { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }

.how-promises { margin: 0; padding: clamp(16px, 2vw, 24px); border-radius: 20px; background: var(--surface); border: 1px solid var(--line); list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.how-promise { display: flex; align-items: flex-start; gap: var(--s3); }
.how-promise-ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--cobalt-tint); color: var(--cobalt-800);
}
.how-promise-title { display: block; font-weight: 700; color: var(--heading-ink); }
.how-promise-body { display: block; font-size: .875rem; color: var(--ink-3); }

/* The three-dot glyph is drawn as three zero-length strokes; without a round
   cap a zero-length stroke paints nothing at all. */
.choice-ico svg path[d^='M6 12h.01'] { stroke-linecap: round; stroke-width: 2.6; }
.how-cta { display: flex; justify-content: center; align-items: center; gap: var(--s3); flex-wrap: wrap; }

/* ==========================================================================
   the phone compositions
   Not a shrunken desktop: each board's narrow panel is its own arrangement.
   ========================================================================== */
@media (max-width: 860px) {
  /* S02–S04 — one column, and Groto AFTER the heading rather than beside it. */
  .stage { grid-template-columns: 1fr; grid-template-areas: "head" "aside" "body"; gap: var(--s4); }
  .stage-aside { flex-direction: row; align-items: center; justify-content: flex-start; }
  .stage-bubble { max-width: none; }
  .stage-bubble::after { bottom: auto; top: 20px; inset-inline-start: -9px; border: 9px solid transparent; border-inline-start: 0; border-inline-end-color: var(--groto-bubble); }

  .stagerail-join { flex-basis: clamp(26px, 9vw, 70px); }

  .how-hero { align-items: flex-end; gap: var(--s3); }
  .how-groto { width: 104px; }
  .how-steps, .how-places, .how-more, .how-promises { grid-template-columns: 1fr; }
  .how-bar-nav { margin-inline: 0; order: 3; width: 100%; }
  .how-title { font-size: clamp(1.8rem, 1.1rem + 3.4vw, 2.4rem); }
  .how-cta { flex-direction: column; align-items: stretch; }
  .how-cta .btn { width: 100%; }

  .guided-answer { flex-wrap: wrap; }

  /* The picker's head is three things on one line at desktop width. On a phone
     the rail needs the full width or its three names are squeezed into the
     corner, so the row wraps and the rail takes a line of its own. */
  .pick-head { flex-wrap: wrap; row-gap: var(--s4); }
  .pick-head .stagerail { order: 3; flex: 1 0 100%; }
}

/* The narrowest supported width: 360px still has to hold three stage names. */
@media (max-width: 400px) {
  .stagerail-name { font-size: .875rem; }
  .stagerail-join { flex-basis: clamp(14px, 6vw, 40px); }
  .choice-ico { width: 40px; height: 40px; }
}

/* ==========================================================================
   SCREENS 05–09 — the learning path
   ==========================================================================

   The five boards of this chapter share three habits, worth stating once:

   · Groto sits on the inline-END (the left, in RTL) and the thing he is talking
     about on the inline-START. In the DOM the copy comes FIRST, so a phone
     stacks the task and its button above him rather than pushing the action
     below the fold — which is what the screen 05 prompt asks for by name.
   · A track's tint is its identity and follows it here from screens 01/03/15.
     Screen 08's board draws the exam panel lavender; the token is green,
     measured off screens 01 and 15 which agree with each other and with the
     component's own badge. Two boards against one, and the settled token wins.
   · Nothing below introduces a shadow, a gradient or a card that the boards do
     not show, and every pair clears AA. Measured, worst first:

       ink-3 on the exam tint ...... 4.56:1      ink-3 on the base tint . 4.61:1
       ink-3 on --surface-2 ........ 4.77:1      ink-3 on the solo tint . 4.90:1
       good on --good-tint ......... 5.71:1   (the "saved" line)
       white on --cobalt ........... 5.72:1   (every primary button)
       warn on --warn-tint ......... 5.79:1   (the clock, and "time is up")
       alert on --alert-tint ....... 6.19:1   (the "not quite" feedback)
       ink-2 on the three tints .... 7.08–7.60:1
       cobalt-800 on --cobalt-tint . 8.84:1   (the icon tiles, the links)
       ink on the three tints ...... 12.73–13.66:1
   ========================================================================== */

/* --------------------------------------------------------------------------
   shared: Groto in flow, and his line
   -------------------------------------------------------------------------- */
.groto-block { display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.groto-block .groto-fig { width: clamp(96px, 16vw, 220px); }

/* The in-flow bubble. It is NOT the positioned coach from groto.js: there is
   nothing here to point at, so it carries no tail that could aim at the wrong
   control, and being in the document it cannot cover anything. */
.groto-say {
  position: relative; max-width: 26ch;
  background: var(--groto-bubble); border: 1px solid var(--groto-bubble-line);
  border-radius: var(--r-md); padding: var(--s3) var(--s4);
  font-size: .9375rem; line-height: 1.5; color: var(--ink);   /* 11.9:1 on the bubble */
}
.groto-say::after {
  content: ""; position: absolute; bottom: -9px; width: 0; height: 0;
  border: 9px solid transparent; border-bottom: 0; border-top-color: var(--groto-bubble);
}
.groto-say.say-end::after   { inset-inline-end: 24px; }
.groto-say.say-start::after { inset-inline-start: 24px; }
.groto-block > .groto-say { order: -1; }   /* the line above the figure */

/* The tile at the start of a row — screens 06 and 07 both open every row with
   one. Decoration: the row's real label is the text beside it. */
.icon-tile {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-sm);
  background: var(--cobalt-tint); color: var(--cobalt-800);
}
.icon-tile.tile-green { background: var(--good-tint);  color: var(--good); }
.icon-tile.tile-amber { background: var(--warn-tint);  color: var(--warn); }
.tile-text {
  direction: ltr; unicode-bidi: isolate; font-weight: 700; font-size: .8125rem;
  letter-spacing: -.01em;
}

.linkish {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap-min);
  font-weight: 700; font-size: .9375rem; color: var(--cobalt-800);
  text-decoration: underline; text-underline-offset: 3px;
}
.linkish:hover { color: var(--cobalt-700); }
/* A "go to" link: chevFwd AFTER the text (it points left — forward in RTL).
   Back / exit links put chevBack BEFORE the text (review ID 38). ui.js goLink()
   and backLink() build both. */
.golink { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--cobalt-800); text-decoration: none; }
.golink:hover { text-decoration: underline; text-underline-offset: 3px; }
.golink svg { flex: 0 0 auto; }
button.linkish { background: none; border: 0; cursor: pointer; font-family: inherit; padding: 0; }

.sample-note { margin-top: var(--s3); text-align: end; }

/* ==========================================================================
   S05 — #/dashboard
   ========================================================================== */
.dash { padding-top: clamp(16px, 2.6vw, 34px); }

/* The three-step path. Step 1 is "בונים בסיס" and it is RIGHTMOST: screen 05's
   own board and screen 01's both draw it there, screen 15's draws it leftmost,
   and RTL reading order settled it. No reversing is needed: the document is
   RTL, so a plain flex row already puts the first <li> on the right, and the
   DOM order a screen reader hears is the same 1-2-3. */
.pathline { margin-bottom: clamp(20px, 3vw, 38px); }
.pathline-row { display: flex; align-items: flex-start; gap: 0; list-style: none; }
.pathline-item { display: flex; align-items: center; flex: 1 1 0; min-width: 0; }
.pathline-item:first-child { flex: 0 0 auto; }
.pathline-join {
  flex: 1 1 auto; min-width: 12px; height: 2px; background: var(--line-strong);
  margin-top: 17px; align-self: flex-start;
}
/* The run up to and including the current step is drawn in cobalt, the way the
   board does: it is the distance already covered, not a decoration. */
.pathline-item.is-joined .pathline-join { background: var(--cobalt); }

.pathline-step {
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3); border-radius: var(--r-md);
  text-decoration: none; color: var(--ink-3); min-width: 0;
}
.pathline-step:hover { background: var(--track-tint, var(--surface-2)); color: var(--ink); }
.pathline-n {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700;
  background: var(--surface); border: 2px solid var(--line-strong); color: var(--ink-3);
}
.pathline-name { font-size: .9375rem; text-align: center; }
.is-done .pathline-n { border-color: var(--cobalt); color: var(--cobalt-800); }
.is-now  .pathline-n { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.is-now  .pathline-name { color: var(--cobalt-800); font-weight: 700; }

/* The one big card. Copy on the inline-start, Groto opposite. */
.actioncard {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .86fr);
  gap: clamp(16px, 3vw, 48px); align-items: center;
  padding: clamp(20px, 3.2vw, 48px);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md); border-color: transparent;
}
.actioncard-copy { min-width: 0; }
.actioncard-title {
  font-size: clamp(2rem, 1.1rem + 4.2vw, 5rem); line-height: 1.04;
  letter-spacing: -.035em; margin-top: var(--s2);
}
.actioncard-lead { margin-top: var(--s3); color: var(--ink-2); font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem); }
.actioncard-why { margin-top: var(--s2); color: var(--ink-3); max-width: 50ch; font-size: .9375rem; line-height: 1.55; }
.actioncard-go { margin-top: clamp(16px, 2.4vw, 32px); }
.actioncard-go .btn { font-size: clamp(1.05rem, .9rem + .7vw, 1.4rem); }

/* The "saved" line: green ink on the good tint, 5.71:1. It is rendered only
   when a save demonstrably happened — see dashboardScreen(). */
.savedline {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: var(--s3); padding: var(--s3) var(--s4);
  background: var(--good-tint); border: 1px solid #BFE5D4; border-radius: var(--r-md);
  color: var(--good); font-size: .9375rem; font-weight: 700;
}
.savedline-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--good); color: #fff; flex: 0 0 auto; }

.actioncard-alt { margin-top: var(--s3); text-align: end; }
.actioncard-fig { display: grid; place-items: center; min-width: 0; }

.dash-more { margin-top: clamp(22px, 3.4vw, 44px); }
.dash-links { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.openrow { display: block; }

/* ==========================================================================
   S06 — #/subject
   ========================================================================== */
.subject-head { margin-bottom: clamp(16px, 2.4vw, 28px); }

/* The three stage tabs. Same RTL rule as the path strip: "בונים בסיס" first,
   therefore rightmost. */
.stagetabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-bottom: clamp(16px, 2.4vw, 28px); }
.stagetab {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--ctl-h-lg); padding: var(--s2) var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink-2); text-decoration: none; font-weight: 700;
  text-align: center;
}
@media (hover: hover) { .stagetab:hover { border-color: var(--line-strong); background: var(--surface-2); color: var(--ink); } }
.stagetab.is-on { background: var(--track-tint); border-color: var(--track-line); color: var(--ink); }
.stagetab .icon-tile { width: 30px; height: 30px; border-radius: 8px; }

.subject-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(14px, 2.2vw, 28px); align-items: start; }
.topiclist { display: grid; gap: var(--s3); min-width: 0; }

.topicrow { padding: 0; overflow: hidden; }
.topicrow.is-open { border-color: var(--cobalt-line); box-shadow: var(--shadow-sm); }
.topicrow-head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4); min-height: 72px; text-decoration: none; color: var(--ink);
}
.topicrow-head:hover { background: var(--surface-2); }
.topicrow-name { display: block; font-weight: 700; font-size: 1.0625rem; }
.topicrow-note { display: block; font-size: .875rem; color: var(--ink-3); margin-top: 2px; }
.topicrow-chev { color: var(--ink-3); flex: 0 0 auto; }

.idealist { padding: 0 var(--s4) var(--s4); display: grid; gap: var(--s3); }
.idealist-empty { padding: 0 var(--s4) var(--s4); }
.idearow {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line);
}
.idearow.is-on { background: var(--cobalt-tint); border-color: var(--cobalt-line); }
.idearow-name { display: block; font-weight: 700; }
.idearow-about { display: block; font-size: .875rem; color: var(--ink-3); margin-top: 2px; }
/* Secondary by design. The mockup draws a filled button here AND in the detail
   panel; two primaries pointing at the same place is the duplication the
   prompt rules out, so the prominent one stays in the detail. */
.idearow-go { flex: 0 0 auto; }

.topicdetail {
  background: var(--track-tint, var(--surface-2));
  border: 1px solid var(--track-line, var(--line));
  border-radius: var(--r-lg); padding: clamp(16px, 2.2vw, 28px);
  min-width: 0;
}
.topicdetail .groto-block { align-items: flex-end; }
.detail-title { margin-top: var(--s4); font-size: clamp(1.3rem, 1rem + 1.1vw, 1.9rem); }
.detail-about { margin-top: var(--s2); }
.detail-lead { margin-top: var(--s2); }
.detail-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.detail-meta { margin-top: var(--s3); }

.ideagraph {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  margin-top: var(--s4); padding: var(--s4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.ideagraph-expr { flex: 0 0 auto; font-size: 1.4rem; }
.ideagraph .figure { margin-top: 0; flex: 1 1 220px; background: transparent; border: 0; padding: 0; }
.ideagraph .figure figcaption { font-size: .8125rem; }

/* ==========================================================================
   S07 — #/build
   ========================================================================== */
.readycard {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(16px, 3vw, 48px); align-items: center;
  padding: clamp(20px, 3.2vw, 48px); border-radius: var(--r-xl);
  box-shadow: var(--shadow-md); border-color: transparent;
}
.readycard-copy { min-width: 0; display: grid; gap: var(--s4); }
/* The board puts a soft blue shape behind Groto on this screen. It is one flat
   tint at low opacity — no gradient and no shadow, which C03 rules out where it
   does not serve the target. */
.readycard-fig { display: grid; place-items: center; min-width: 0; position: relative; }
.readycard-fig::before {
  content: ""; position: absolute; inset: 12% 6% 16%;
  background: var(--cobalt-tint); border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
}
.readycard-fig .groto-fig { position: relative; }
.ready-title { font-size: clamp(1.9rem, 1.1rem + 3vw, 3.4rem); line-height: 1.1; letter-spacing: -.035em; margin: 0; }

.readyrows { list-style: none; display: grid; gap: var(--s3); }
.readyrow { display: flex; align-items: center; gap: var(--s3); font-size: 1.0625rem; font-weight: 700; color: var(--ink); }

.ready-advanced .disclosure { background: var(--surface-2); border-color: var(--line); }
.ready-advanced .disclosure > summary { color: var(--ink-2); }

/* The two solution modes, side by side as the board draws them. */
.solvemodes .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.solvemodes .option { padding: var(--s3) var(--s4); min-height: var(--ctl-h); }
.solvemodes .option .opt-title { font-size: .9375rem; }
.solvemodes .option .mark { order: 3; margin-inline-start: auto; }
.solvemodes .choice-ico, .solvemodes .icon-tile { width: 32px; height: 32px; border-radius: 8px; }
/* On a phone the two half-width options cannot hold mark + tile + word: the
   title shrank to ~34px and read "באפליק…". The decorative tile goes, the
   insets tighten, and the title keeps its full width. */
@media (max-width: 480px) {
  .solvemodes .option { gap: var(--s2); padding-inline: var(--s3); }
  .solvemodes .choice-ico, .solvemodes .icon-tile { display: none; }
}
@media (max-width: 359px) { .solvemodes .choices { grid-template-columns: 1fr; } }

.timerrow {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s2) var(--s4);
}
.timerrow .switch-row { border: 0; padding: var(--s2) 0; }
.ready-go .btn { font-size: clamp(1.05rem, .9rem + .7vw, 1.35rem); }
.ready-note { text-align: center; }

/* ==========================================================================
   S08 — #/session
   ==========================================================================
   One variation at a time. The board shows all three because it is a board.
   -------------------------------------------------------------------------- */
.sessionstage {
  background: var(--track-tint, var(--surface-2));
  border: 1px solid var(--track-line, var(--line));
  border-radius: var(--r-xl); padding: clamp(16px, 2.6vw, 34px);
}
.sessionstage-head { text-align: center; margin-bottom: var(--s4); }
.sessiontitle { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); }
/* The question card is first in the DOM and takes the wide column; Groto
   follows and lands on the inline-end, which in RTL is the left. `order` was
   the wrong tool here — it changes the auto-placement sequence, so it put the
   card into the NARROW column and gave Groto the wide one. */
.sessionstage-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .46fr); gap: clamp(14px, 2.4vw, 34px); align-items: start; }
.sessiongroto { display: grid; place-items: center; min-width: 0; }
.sessiongroto.is-quiet .groto-fig { opacity: .95; }

.qcard { padding: clamp(16px, 2.4vw, 30px); border-radius: var(--r-lg); }
.qcard-exam { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.qcard-top { justify-content: center; }
.qtext { font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem); font-weight: 700; line-height: 1.45; }
/* Inline maths inside the question sets its own family, never its own size —
   otherwise a formula in a heading drags the whole line out of the type scale. */
.qtext .math, .results-lead .math { font-size: 1em; }
.qcard-go { margin-top: var(--s5); }

.answerblock { margin-top: var(--s4); }
.pairfields { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; direction: ltr; unicode-bidi: isolate; }
/* The answer-format hint is a Hebrew sentence (review N3). Inside the LTR
   answer row it used to be laid out LTR, scrambling every question; it is RTL,
   on its own line, with its maths tokens isolated (ui.js answerHint()). */
.answer-hint, .pairfields > p { direction: rtl; unicode-bidi: isolate; text-align: start; flex-basis: 100%; }
.answer-hint .m { font-weight: 700; color: var(--ink); }
.pairfield { display: inline-flex; align-items: center; gap: var(--s2); }
.pairfield .math { font-size: 1.25rem; }
.pairfield .input { width: clamp(84px, 18vw, 170px); min-height: var(--ctl-h); text-align: center; }
.pairsep { font-size: 1.25rem; color: var(--ink-2); }
.paperlink { margin-top: var(--s3); }
.paperrow { margin-top: var(--s4); }

.answerblock + .disclosure, .qcard .disclosure { margin-top: var(--s4); }
.qcard .groto-card { margin-top: var(--s4); }

.qfeedback { margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); }
.qfeedback.is-right { border-color: #BFE5D4; background: var(--good-tint); }
.qfeedback.is-wrong { border-color: #F7C9C4; background: var(--alert-tint); }

/* The question rail. It navigates; it does not report a score. */
.qrail { display: flex; gap: var(--s2); list-style: none; flex-wrap: wrap; }
.qrail-dot {
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--line-strong); background: var(--surface);
  color: var(--ink-3); font-weight: 700; font-family: inherit;
}
.qrail-dot.is-answered { border-color: var(--cobalt-line); color: var(--cobalt-800); }
.qrail-dot.is-now { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }

.sessionside { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s5); }

/* The clock. It says the time, and when the time is up it says that. It never
   submits, grades, locks or deletes — see sessionScreen() and store.timeLeft(). */
.sessionclock {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s4); border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-size: .9375rem; color: var(--ink-2);
}
.sessionclock.is-low { border-color: #F0D9B4; background: var(--warn-tint); color: var(--warn); }
.sessionclock.is-up  { border-color: #F0D9B4; background: var(--warn-tint); color: var(--warn); font-weight: 700; }

.examexit { margin-top: var(--s4); }
.switchnote { flex: 1 1 100%; }

/* ==========================================================================
   S09 — #/results
   ========================================================================== */
.results-top { display: flex; justify-content: flex-end; padding-block: var(--s3) var(--s5); border-bottom: 1px solid var(--line); margin-bottom: clamp(16px, 2.6vw, 34px); }
.resultrail { display: flex; align-items: center; gap: var(--s3); list-style: none; }
.resultrail li + li::before { content: ""; display: block; }
.resultrail-dot {
  width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--line-strong); background: var(--surface); padding: 0;
  position: relative;
}
/* C02's 44px floor, without drawing a 44px dot. */
.resultrail-dot::after { content: ""; position: absolute; inset: -13px; }
.resultrail-dot.is-done { border-color: var(--cobalt-line); }
.resultrail-dot.is-now { border-color: var(--cobalt); box-shadow: inset 0 0 0 3px var(--cobalt); }

.results-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .5fr); gap: clamp(14px, 2.6vw, 44px); align-items: end; }
.results-main { min-width: 0; }
/* Groto never takes content width on a phone — the prompt says so by name, and
   at narrow widths the clamp's lower bound is 0 and the column collapses. */
.results-fig { display: grid; place-items: end center; min-width: 0; }
.results-title { font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); line-height: 1.08; letter-spacing: -.035em; }
.results-lead { margin-top: var(--s3); font-size: 1.0625rem; }
.results-main > .mathblock { margin-block: var(--s4); font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); }

.yourrow { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); }

/* The current step is a wide card; the next one is a quiet peek under it. */
.results-main .sol-step { padding: clamp(16px, 2.2vw, 26px); border-radius: var(--r-lg); }
.results-main .sol-step.is-open { border-color: var(--cobalt-line); }
.sol-slab { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s3); }
.sol-slab > .mathblock { flex: 1 1 240px; }
/* A step's equation never breaks across lines ("100%−15% = 85%" / "= 0.85" on
   a phone): it stays one line and the slab scrolls sideways instead. Mixed
   Hebrew lines (.math-mixed) are prose and still wrap. */
.sol-slab > * { min-width: 0; }
.sol-slab .mathblock:not(.math-mixed) { white-space: nowrap; overflow-wrap: normal; }
.sol-slab > .numberline { flex: 1 1 200px; display: grid; place-items: center; }
button.sol-step-back { all: unset; display: block; width: 100%; cursor: pointer; }
button.sol-step-back:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; border-radius: var(--r-sm); }
.sol-step-done { opacity: .86; }
.sol-step-done:hover { opacity: 1; }

.results-actions { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: flex-end; margin-top: var(--s5); }
.results-main .selfreport { margin-top: var(--s5); }
.results-new { display: flex; gap: var(--s5); flex-wrap: wrap; margin-top: var(--s4); }
.results-all { margin-top: var(--s5); padding: 0; }
.results-all > summary { padding: var(--s4); cursor: pointer; font-weight: 700; min-height: var(--tap-min); display: flex; align-items: center; }
.allrow { display: block; width: 100%; text-align: start; font: inherit; cursor: pointer; }

/* ==========================================================================
   the phone compositions for 05–09
   ========================================================================== */
@media (max-width: 900px) {
  .subject-cols { grid-template-columns: 1fr; }
  .sessionstage-body { grid-template-columns: 1fr; }
  .results-cols { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  /* S05 — the path shortens to its three numbers with only the current one
     named, so the task and its button stay above the fold. */
  .pathline-name { display: none; }
  .pathline-item.is-now .pathline-name { display: block; }
  .pathline-n { width: 30px; height: 30px; font-size: .9375rem; }
  .pathline-join { margin-top: 14px; }

  .actioncard, .readycard { grid-template-columns: 1fr; padding: var(--s5) var(--s4); border-radius: var(--r-lg); }
  /* Groto comes after the action on a phone — he never pushes it down. */
  .actioncard-fig .groto-fig, .readycard-fig .groto-fig { width: clamp(110px, 34vw, 190px); }
  .actioncard-alt { text-align: start; }

  .stagetabs { grid-template-columns: 1fr; gap: var(--s2); }
  .stagetab { justify-content: flex-start; min-height: var(--ctl-h); }

  /* S06 — the detail opens under the row it belongs to, not in a column. */
  .topicrow .topicdetail { border-radius: var(--r-md); margin: 0 var(--s4) var(--s4); }
  .topicdetail .groto-block { align-items: center; }
  .ideagraph { justify-content: center; }

  .sessionstage { padding: var(--s4) var(--s3); border-radius: var(--r-lg); }
  .sessiongroto .groto-fig { width: clamp(96px, 30vw, 150px); }
  .sessionside { gap: var(--s3); }

  /* S09 — Groto is small and after the content, never across it. */
  .results-fig { place-items: center; }
  .results-fig .groto-fig { width: clamp(100px, 30vw, 160px); }
  .results-actions { justify-content: stretch; }
  .results-actions .btn { flex: 1 1 100%; }
}

@media (max-width: 420px) {
  .qrail-dot { width: 32px; height: 32px; }
  .pairfield .input { width: 100%; min-width: 0; }
  .pairfields { width: 100%; }
  .pairfield { flex: 1 1 120px; }
}

/* The guided track's first step. It occupies the card alone — the student is
   asked one thing at a time, which is what "בונים בסיס" means — and nothing is
   gated on the answer: the continue button works either way. */
.scaffold .groto-card { margin-top: var(--s4); }
.scaffold-say { margin-top: var(--s3); color: var(--warn); }
.scaffold-say.is-right { color: var(--good); }

/* The rail's hairline, so the four questions read as one road rather than four
   unrelated dots. Decorative, and hidden from the accessibility tree. */
.resultrail-join { display: block; width: clamp(28px, 6vw, 86px); height: 2px; background: var(--line-strong); }
.resultrail li { display: flex; align-items: center; gap: var(--s3); }

/* The badge row under the subject heading holds four pills and must wrap: at
   360px they are wider than the screen, and `.row-tight` does not wrap because
   most of its users are two short chips on one line. */
.subject-head .row-tight { flex-wrap: wrap; row-gap: var(--s2); }
/* A drawn figure never sets the width of its column. Both of these carry an
   intrinsic px size for the desktop composition, and both must shrink. */
.ideagraph > * { min-width: 0; }
.ideagraph svg, .numberline svg, .sol-slab svg { max-width: 100%; height: auto; }

/* ==========================================================================
   S10-S14 + S16 — sources, preferences and the two ways back
   ==========================================================================

   One shared ingredient first. Screens 10, 11 and 13 all open the same way: a
   title and one line of lead at the inline start, Groto at the inline end, at a
   size that leaves the copy the wider column. The boards draw him at roughly a
   quarter of the canvas on the desktop and above the copy on the phone, which
   is exactly what a two-column grid collapsing to one row already does.
   ========================================================================== */

.topfig {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(200px, 26vw, 360px);
  align-items: center; gap: var(--s5);
  padding-block: clamp(var(--s4), 3vw, var(--s6));
}
.topfig-copy .lead { max-width: min(46ch, 100%); }
.topfig-art { display: flex; justify-content: center; }
.topfig-art .groto-fig { width: 100%; max-width: 268px; height: auto; }
/* Screen 10's board puts Groto at the inline start and the heading after him;
   screen 13's does the opposite. One class, rather than a second component. */
.topfig-flip { grid-template-columns: clamp(200px, 24vw, 320px) minmax(0, 1fr); }

/* --------------------------------------------------------------------------
   S10 — #/progress
   -------------------------------------------------------------------------- */

/* The band. It LOOKS like a meter and is not one: no fill proportional to
   anything, no number, and the "current" segment is marked rather than filled
   up to. There is no drag target and no slider role, because moving it would
   mean nothing — it reports how the last rounds were practised. */
.readiness {
  background: var(--cobalt-tint); border: 1px solid var(--cobalt-line);
  border-radius: var(--r-lg); padding: clamp(var(--s4), 3vw, var(--s5));
}
.readiness-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.readiness-head .badge-demo { background: var(--surface); border-color: var(--cobalt-line); color: var(--cobalt-800); border-style: solid; }
.readiness-head .tiny { color: var(--cobalt-800); }

.readiness-band {
  list-style: none; margin: var(--s4) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3);
}
.readiness-seg { display: flex; flex-direction: column; gap: var(--s3); align-items: center; }
.readiness-rail {
  position: relative; display: block; width: 100%; height: 16px;
  border-radius: var(--r-pill); background: var(--line-strong);
}
.readiness-seg.is-now .readiness-rail { background: var(--cobalt); }
/* The knob sits at the segment's inline END — the far edge of the marked band,
   where the reference draws it. In RTL that is its left edge, which is what
   `inset-inline-end` resolves to without a second rule. */
.readiness-knob {
  position: absolute; inset-inline-end: -4px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface); border: 4px solid var(--cobalt);
}
.readiness-label { font-weight: 700; font-size: clamp(.9375rem, 1.3vw, 1.125rem); color: var(--ink); text-align: center; }
.readiness-seg.is-now .readiness-label { color: var(--cobalt-800); }
.readiness-why { margin-top: var(--s4); font-size: .875rem; line-height: 1.6; color: var(--ink-2); }

.evidence { margin-top: clamp(var(--s5), 4vw, var(--s6)); }
.evidence-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); }
.evidence-sub { font-size: 1rem; color: var(--ink-2); }

.evidence-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); align-items: stretch; }
.evcard { border-radius: var(--r-lg); padding: var(--s4); border: 1px solid var(--line); background: var(--surface); }
/* Each group gets its own tint, as the board does. The tints are the semantic
   ones already in the file, so nothing new was sampled: they carry meaning here
   (practised / helped / open) and the heading repeats it in words. */
.evcard-green { background: var(--good-tint);   border-color: #C9E6D8; }
.evcard-amber { background: var(--warn-tint);   border-color: #F0D9B4; }
.evcard-blue  { background: var(--cobalt-tint); border-color: var(--cobalt-line); }
.evcard-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.evcard-title { font-size: 1.0625rem; }
.evcard-ico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); }
.evcard-green .evcard-ico { color: var(--good); }
.evcard-amber .evcard-ico { color: var(--warn); }
.evcard-blue  .evcard-ico { color: var(--cobalt); }
.evcard-tag { margin-top: var(--s2); font-weight: 700; color: var(--warn); }
.evcard-line { margin-top: var(--s3); color: var(--ink-2); line-height: 1.65; }

.nextstep {
  margin-top: clamp(var(--s5), 4vw, var(--s6));
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
  background: var(--cobalt-tint); border: 1px solid var(--cobalt-line);
  border-radius: var(--r-lg); padding: clamp(var(--s4), 3vw, var(--s5));
  text-align: center;
}
.nextstep-why { font-size: .9375rem; color: var(--cobalt-800); }
.nextstep .btn { min-width: min(100%, 24rem); }
/* `.openrow` is the dashboard's, and it is display:block — sharing it here
   silently cancelled `.spread`'s flex and left every row hugging one edge. */
.standrow { width: 100%; }

/* --------------------------------------------------------------------------
   S11 — #/archive
   -------------------------------------------------------------------------- */

/* Three filters in a row on the desktop; one disclosure on the phone. Both hold
   the SAME controls — the fold's copies are wired back to the originals in
   library.js — so neither is a decorative stand-in for the other. */
.filterbar {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: var(--s4); margin-bottom: var(--s5);
}
.filterbar-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); align-items: center; }
/* Each filter is one pill carrying its own name, as the board draws it. */
.filterbar .select, .filterfold-body .select { border-radius: var(--r-pill); padding-inline: var(--s4); }
.field-pair { border: 0; padding: 0; margin: 0; min-width: 0; }
.field-pair > .row-tight { gap: var(--s2); }
.field-pair select { flex: 1 1 0; min-width: 0; }

.filterfold { display: none; margin-bottom: var(--s5); }
.filterfold > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s2);
  min-height: var(--ctl-h); padding: 0 var(--s4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm); font-weight: 700; font-size: .9375rem; color: var(--ink);
}
.filterfold > summary::-webkit-details-marker { display: none; }
.filterfold > summary .chev { margin-inline-start: auto; color: var(--ink-3); transition: transform var(--dur) var(--ease); }
.filterfold[open] > summary .chev { transform: rotate(180deg); }
.filterfold-body {
  display: grid; gap: var(--s4); margin-top: var(--s3); padding: var(--s4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}

/* The empty shelf. Not a skeleton, not a spinner — a drawing, a heading, a
   sentence that says why, and the one thing that IS available now. */
.shelf-empty { text-align: center; padding-block: clamp(var(--s5), 5vw, var(--s7)); }
.shelf-art { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 0; margin-bottom: var(--s5); }
.shelf-art .groto-fig { width: clamp(150px, 22vw, 268px); height: auto; }
.shelf-art .paper-art { width: clamp(120px, 18vw, 220px); margin-inline-start: -2%; margin-bottom: 6%; }
.paper-art svg { width: 100%; height: auto; }
.shelf-empty .lead { max-width: min(46ch, 100%); margin-inline: auto; margin-top: var(--s3); }

/* --------------------------------------------------------------------------
   S12 — #/exam
   -------------------------------------------------------------------------- */

.exam-head { position: relative; text-align: center; padding-block: clamp(var(--s4), 3vw, var(--s5)); }
.exam-head-art { position: absolute; inset-inline-end: 0; top: 0; width: clamp(120px, 16vw, 230px); }
.exam-head-art .groto-fig { width: 100%; height: auto; }
.exam-head-copy { max-width: min(56ch, 100%); margin-inline: auto; }
/* The badge is a pill, and a pill does not wrap — which is fine until 200% text
   zoom makes "תצוגת הדגמה · לא שאלון רשמי" 392px wide on a 360px screen. Here it
   is allowed to become two lines rather than push the page sideways. */
.exam-head-copy .badge-demo {
  background: var(--warn-tint); border: 1px solid #F0D9B4; border-style: solid;
  color: var(--warn); font-weight: 700;
  white-space: normal; max-width: 100%; text-align: center;
}

/* Screen 12's prompt is explicit: "בדסקטופ מציג מסמך משמאל ופרטי מקור/מצב
   מימין". In RTL the first grid column is the rightmost, so the aside is placed
   into it EXPLICITLY while the document stays first in the DOM — which is what
   the phone layout needs ("המסמך בראש, controls מיד אחריו"). */
.paper { display: grid; grid-template-columns: clamp(260px, 26vw, 340px) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.paper > .paper-view { grid-column: 2; grid-row: 1; }
.paper > .paper-aside { grid-column: 1; grid-row: 1; }
.paper-view {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s3); overflow: hidden;
}
.paper-view:fullscreen { background: var(--page); padding: var(--s5); overflow: auto; }
.paper-view.is-wide { position: fixed; inset: 0; z-index: 60; overflow: auto; }
.paper-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: var(--s2) var(--s2) var(--s3); }
.paper-page { font-weight: 700; font-size: .9375rem; color: var(--ink-2); padding-inline: var(--s3); }
.paper-zoom { min-width: 4.5ch; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; font-size: .875rem; color: var(--ink-2); }
.paper-sep { width: 1px; height: 22px; background: var(--line-strong); }
.paper-pagenote { padding-inline: var(--s2); margin-bottom: var(--s3); color: var(--ink-3); }
/* `back` is one chevron; previous and next need it pointing opposite ways, so
   the next button mirrors it rather than shipping a second path. */

/* Zoom by type size rather than by transform: the sheet reflows and stays
   inside its column, where a scaled sheet would be clipped by the card at the
   top end and leave a hole at the bottom one. */
.paper-sheet {
  --paper-zoom: 1;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: clamp(var(--s4), 4vw, var(--s6));
  font-size: calc(1rem * var(--paper-zoom));
  min-height: 320px;
}
.paper-title { font-size: calc(1.3em); font-weight: 700; text-align: center; }
/* The board numbers the parts א. / ב. — Hebrew letters, which is what an exam
   paper actually uses, and what `list-style-type: hebrew` produces natively. */
.paper-items { margin: var(--s5) 0 0; padding-inline-start: 1.8em; display: grid; gap: var(--s3); list-style-type: hebrew; }
.paper-items li { font-size: 1em; line-height: 1.7; }
.paper-sheet .mathblock { font-size: 1.25em; }

.paper-aside .btn-ico { display: inline-flex; margin-inline-end: var(--s2); }

/* A source row: a value, and a disclosure that says where the value came from
   or why there is none. The chevron points along the reading direction, so the
   RTL page gets the arrow it expects without a mirrored icon. */
.srcrow {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.srcrow > summary, .srcrow-link {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s3);
  min-height: 72px; padding: var(--s3) var(--s4); color: inherit; text-decoration: none;
}
.srcrow > summary::-webkit-details-marker { display: none; }
.srcrow-link { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.srcrow-link:hover, .srcrow > summary:hover { border-color: var(--cobalt-line); }
.srcrow-title { display: block; font-weight: 700; font-size: .9375rem; color: var(--ink); }
.srcrow-value { display: block; margin-top: 2px; font-size: .875rem; color: var(--ink-3); }
.srcrow .chev, .srcrow-link .chev { color: var(--ink-3); flex: 0 0 auto; }
.srcrow[open] .chev { transform: rotate(-90deg); }
.srcrow-body { padding: 0 var(--s4) var(--s4); border-top: 1px solid var(--line); padding-top: var(--s3); }
.srcrow .icon-tile { width: 42px; height: 42px; }

.btn .btn-ico { display: inline-flex; margin-inline-end: var(--s2); }

/* --------------------------------------------------------------------------
   S13 — #/analysis
   -------------------------------------------------------------------------- */

.sample-pick { max-width: 30rem; margin-bottom: var(--s5); }
.analysis-panel {
  background: var(--cobalt-tint); border: 1px solid var(--cobalt-line);
  border-radius: var(--r-xl); padding: clamp(var(--s4), 3vw, var(--s5));
}
.analysis-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); align-items: stretch; }
.analysis-card { text-align: center; }
.analysis-ico { width: 54px; height: 54px; border-radius: 50%; margin-inline: auto; margin-bottom: var(--s3); display: grid; place-items: center; background: var(--cobalt-tint); color: var(--cobalt-800); }
/* The board draws three grey bars here. They are replaced by the sentence the
   group will hold plus an explicit state, because an endless shimmer is a claim
   that something is loading and nothing is. */
.analysis-state { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--neutral-tint); color: var(--neutral); font-weight: 700; }

.analysis-note {
  margin-top: var(--s4); padding-top: var(--s4);
  display: flex; align-items: center; justify-content: center; gap: var(--s3); flex-wrap: wrap;
  text-align: center;
}
.analysis-note-ico { flex: 0 0 auto; color: var(--cobalt-800); }
.analysis-note .grow { flex: 1 1 320px; }
.analysis-note-go { flex: 1 0 100%; display: flex; justify-content: center; margin-top: var(--s2); }
.analysis-panel .analysis-card { background: var(--surface); border-color: transparent; }

/* --------------------------------------------------------------------------
   S14 — #/profile
   -------------------------------------------------------------------------- */

.prefs { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 320px); gap: var(--s6); align-items: start; padding-block: var(--s5); }
.prefs-main { max-width: 36rem; }

.prefgroup { margin-top: var(--s5); }
.prefgroup-title { font-size: 1.0625rem; margin-bottom: var(--s3); }
.prefgroup-body { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; }
/* The switch rows bring their own padding from the C08 component; the group
   only owns the frame and the hairlines between rows. */
.prefgroup-body > .switch-row { padding: var(--s4); margin: 0; border: 0; }
.prefgroup-body > * + * { border-top: 1px solid var(--line); }
.prefgroup-body > .choicegroup { border: 0; padding: var(--s4); }
.prefgroup-body > .choicegroup .choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }

.prefrow { display: flex; align-items: center; gap: var(--s3); min-height: 76px; padding: var(--s4); color: inherit; text-decoration: none; }
.prefrow-link:hover { background: var(--surface-2); }
.prefrow-title { display: block; font-weight: 700; font-size: .9375rem; color: var(--heading-ink); }
.prefrow-note { display: block; margin-top: 3px; font-size: .875rem; color: var(--ink-3); }
.prefrow .chev { color: var(--ink-3); flex: 0 0 auto; }

.prefnote {
  margin-top: var(--s5); display: flex; gap: var(--s3); align-items: flex-start;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4);
}
.prefnote-ico { flex: 0 0 auto; color: var(--ink-2); }
.prefnote-title { display: block; font-weight: 700; font-size: .9375rem; color: var(--heading-ink); }
.prefnote-body { display: block; margin-top: 3px; font-size: .875rem; color: var(--ink-2); line-height: 1.55; }

.savenote:empty { display: none; }
.savenote { margin-top: var(--s3); }
/* Data management is separated from the main action by a rule and a click, as
   the board has it: the irreversible one is never the thing a thumb lands on. */
.datazone { text-align: center; }
.datapanel { margin-top: var(--s4); text-align: start; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4); }

.prefs-aside { position: sticky; top: 82px; }
.prefs-aside .groto-block .groto-fig { width: var(--groto-state); }
.prefs-aside .groto-say { max-width: none; }
/* The board has Groto first and his line under him, so the bubble's tail points
   up at him rather than down. */
.groto-under > .groto-say { order: 0; }
.groto-under > .groto-say::after { bottom: auto; top: -9px; border-bottom: 9px solid var(--groto-bubble); border-top: 0; }

/* --------------------------------------------------------------------------
   S16 — the two ways back
   -------------------------------------------------------------------------- */

.recovery-page { min-height: 100svh; display: grid; place-items: center; padding: var(--gutter); }
/* Under the app bar the card centres in what is left of the screen. */
body:not([data-bare]) .recovery-page { min-height: calc(100svh - 160px); }
.recovery {
  width: min(560px, 100%); text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  padding: clamp(var(--s5), 5vw, var(--s7));
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
}
.recovery .brand { margin-bottom: var(--s4); }
.recovery-art { position: relative; display: grid; place-items: center; margin-bottom: var(--s4); min-height: 190px; width: 100%; }
/* The scene sits behind Groto and never competes with him: it is one flat glyph
   at the page tint, which is as much "illustration" as a 404 needs. */
.recovery-scene { position: absolute; inset-inline-end: 8%; top: 4%; color: var(--cobalt-line); opacity: .75; }
.recovery-broke .recovery-scene { color: var(--line-strong); }
.recovery-art .groto-fig { position: relative; width: var(--groto-state); height: auto; }
.recovery-title { font-size: clamp(1.5rem, 4.6vw, 2rem); margin-top: var(--s2); }
.recovery-line { color: var(--ink-2); }
.recovery-actions { width: 100%; display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); }
.recovery-actions .btn { width: 100%; }
/* The secondary is visibly quieter than the primary — it is a different route,
   not a second way to press the same one. */
.recovery-actions .btn-quiet { background: var(--surface); border: 1.5px solid var(--line-strong); box-shadow: none; }
.recovery-aside { margin-top: var(--s4); color: var(--ink-3); max-width: min(44ch, 100%); }
.recovery-detail > summary { cursor: pointer; font-size: .8125rem; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  /* One column, and the explicit desktop placement has to be undone or the
     document and the rail would both try to sit in column 1. DOM order takes
     over, which puts the document on top and the controls directly after it. */
  .paper { grid-template-columns: 1fr; }
  .paper > .paper-view, .paper > .paper-aside { grid-column: 1; grid-row: auto; }
  .prefs { grid-template-columns: 1fr; gap: var(--s5); }
  .prefs-main { max-width: none; }
  .prefs-aside { position: static; order: -1; }
  .prefs-aside .groto-block { flex-direction: row; align-items: center; justify-content: center; }
  .prefs-aside .groto-block > .groto-say { order: 0; }
  .prefs-aside .groto-say::after { display: none; }
}

@media (max-width: 860px) {
  /* The phone column of every one of these boards is the same move: one column,
     Groto above the copy, and the filters folded. */
  .topfig { grid-template-columns: 1fr; gap: var(--s4); text-align: center; }
  .topfig-copy .lead { margin-inline: auto; }
  .topfig-art { order: 1; }
  .topfig-art .groto-fig { max-width: 210px; }

  .readiness-band { gap: var(--s2); }
  .readiness-label { font-size: .8125rem; }
  .readiness-knob { width: 20px; height: 20px; border-width: 3px; }

  .evidence-groups { grid-template-columns: 1fr; gap: var(--s3); }
  .evidence-head { flex-direction: column; align-items: flex-start; gap: var(--s1); }
  .nextstep { flex-direction: column; align-items: stretch; text-align: center; }
  .nextstep .btn { width: 100%; }

  .filterbar { display: none; }
  .filterfold { display: block; }

  /* The document goes on top and the controls come directly after it, which is
     what screen 12's prompt asks for by name. Source order already does that;
     the aside only has to stop being sticky. */
  .paper-aside { position: static; }
  /* On a phone Groto goes above the copy rather than beside it; the DOM has him
     after it (he belongs with the sheet on the desktop), so order moves him. */
  .exam-head { display: flex; flex-direction: column; text-align: center; padding-top: var(--s3); }
  .exam-head-art { position: static; order: -1; width: clamp(110px, 32vw, 170px); margin-inline: auto; margin-bottom: var(--s3); }

  .analysis-groups { grid-template-columns: 1fr; gap: var(--s3); }
  .analysis-card { text-align: start; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--s3); align-items: center; }
  .analysis-ico { grid-row: span 3; margin: 0; width: 44px; height: 44px; }
  .analysis-note { text-align: start; }
  .analysis-note-go, .analysis-note-go .btn { width: 100%; }

  .prefgroup-body > .choicegroup .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* C02: a phone's primary action is full width. */
  .prefs-main > div > .btn, .datazone .btn { width: 100%; }

  .recovery { border: 0; box-shadow: none; background: transparent; padding-inline: 0; }
}

@media (max-width: 400px) {
  /* The two solve-on choices stay side by side at 360px, as the board's phone
     column draws them — stacking them pushed the save button below the fold for
     no gain. The note shrinks instead. */
  .prefgroup-body > .choicegroup .choices { gap: var(--s2); }
  .prefgroup-body > .choicegroup .opt-note { font-size: 1rem; }
  .readiness-label { font-size: .75rem; }
}

/* C08 / C04: the in-app "less motion" switch, which is a preference the student
   set here rather than one the OS reported. Same effect, different source, so it
   needs its own selector alongside the media query at the top of this file. */
[data-reduce-motion] { --dur: 1ms; }
[data-reduce-motion] *, [data-reduce-motion] *::before, [data-reduce-motion] *::after {
  animation-duration: 1ms !important; animation-iteration-count: 1 !important;
  transition-duration: 1ms !important; scroll-behavior: auto !important;
}

/* Full mathematics source catalogue, integrated with the learning workspace. */
.catalog-page { --catalog-gap: 20px; }
.catalog-page .wrap { max-width: 1200px; }
.catalog-heading { display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px; }
.catalog-heading .lead { max-width:780px; }
.catalog-tabs { display:flex;flex-wrap:wrap;gap:10px;margin:24px 0; }
.catalog-tabs .is-on { background:var(--cobalt);color:white;border-color:var(--cobalt); }
.catalog-filters { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:24px 0 16px; }
.catalog-search { grid-column:span 2; }
.catalog-count { margin:20px 0;gap:12px; }
.catalog-results,.catalog-rules { display:grid;gap:16px;margin-top:24px; }
.catalog-card { padding:24px;display:flex;align-items:flex-start;gap:24px; }
.catalog-card-copy { flex:1;min-width:0;display:grid;gap:10px; }
.catalog-card-copy h2 a { color:inherit;text-decoration:none; }
.catalog-card-copy h2 a:hover { text-decoration:underline; }
.catalog-card-actions { display:grid;gap:10px;min-width:155px; }
.catalog-description { margin:0; }
.catalog-pagination { display:flex;justify-content:center;align-items:center;gap:24px;padding:16px 0 32px; }
.catalog-summary,.catalog-open,.catalog-practice { margin:24px 0; }
.catalog-summary { padding:20px;border-inline-start:4px solid var(--cobalt);background:var(--surface-2); }
.catalog-open { display:flex;flex-wrap:wrap;gap:12px; }
.catalog-viewer iframe { border:1px solid var(--line);border-radius:16px;width:100%;height:75vh;min-height:420px; }
.catalog-practice { display:grid;gap:16px; }
.catalog-practice .textarea { min-height:140px; }
.catalog-refs { display:grid;gap:8px;padding-inline-start:22px; }
.catalog-refs a { overflow-wrap:anywhere; }
.catalog-decision { border:1px solid var(--line);border-radius:16px;padding:20px;display:grid;gap:14px; }
.catalog-subpart { padding:12px;border-bottom:1px solid var(--line); }
.catalog-topic-counts { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0; }
.catalog-topic-count { padding:16px;display:flex;justify-content:space-between;gap:16px;align-items:center;color:inherit;text-decoration:none; }
.catalog-topic-count strong { white-space:nowrap;font-size:.875rem; }
@media(max-width:900px){.catalog-filters{grid-template-columns:repeat(2,minmax(0,1fr));}.catalog-topic-counts{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){.catalog-heading{gap:8px;align-items:flex-start;}.catalog-heading .groto{max-width:64px;}.catalog-card{padding:18px;display:block;}.catalog-card-actions{grid-template-columns:1fr 1fr;margin-top:18px;min-width:0;}.catalog-card-actions .btn{white-space:normal;text-align:center;}.catalog-filters{gap:12px;}.catalog-tabs .chip{font-size:.875rem;}.catalog-topic-counts{grid-template-columns:1fr;}.catalog-page .h1{font-size:clamp(1.7rem,7vw,2.8rem);}.catalog-count{align-items:flex-start;}.catalog-count .btn{flex-shrink:0;}.catalog-heading .lead{font-size:1rem;}.catalog-decision{padding:16px;}}
.learning-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px;}
.learning-controls{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:16px;margin:24px 0;}
.learning-cols{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.3fr);gap:24px;align-items:start;margin:24px 0;}
.learning-topics{display:grid;gap:10px;max-height:72vh;overflow:auto;padding:4px;}
.learning-topic{padding:16px 18px;display:grid;gap:5px;color:inherit;text-decoration:none;}
.learning-topic.is-on{border-color:var(--cobalt);box-shadow:0 0 0 1px var(--cobalt);background:var(--cobalt-tint);}
.learning-detail{padding:28px;display:grid;gap:20px;position:sticky;top:96px;}
.learning-prereqs{display:flex;flex-wrap:wrap;gap:10px;}.learning-prereqs h3{width:100%;}
.learning-note{padding-top:16px;border-top:1px solid var(--line);}.learning-note p{margin-top:12px;}
.learning-resume{padding:16px;background:var(--cobalt-tint);border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 0;}
.learning-footnote{margin:24px 0;}.learning-drafts{margin:24px 0;}
.learning-ready{max-width:680px!important;display:grid;gap:20px;}.learning-ready>.groto{justify-self:center;}.learning-ready .card{display:grid;gap:20px;}
@media(max-width:760px){.learning-cols{grid-template-columns:1fr;}.learning-detail{position:static;order:-1;padding:20px;}.learning-topics{max-height:none;grid-template-columns:repeat(2,minmax(0,1fr));}.learning-topic{padding:14px;}.learning-topic strong{font-size:1rem;}.learning-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}.learning-heading .groto{max-width:80px;}.learning-heading .h1{font-size:clamp(1.8rem,8vw,2.8rem);}}
@media(max-width:359px){.learning-topics{grid-template-columns:1fr;}.learning-heading .groto{max-width:56px;}}
.gradual-hints,.inline-solution{display:grid;gap:14px;margin-top:20px;}.inline-solution{border-top:1px solid var(--line);padding-top:20px;}.gradual-hints .btn,.inline-solution>.btn{justify-self:start;}.answerblock .small{line-height:1.6;flex-basis:100%;}
.question-provenance{margin-block:12px;font-size:.875rem;}.question-provenance p{margin-top:10px;}.learning-note a{overflow-wrap:anywhere;}
.learning-figure{margin:20px 0;max-width:560px;}.learning-figure svg{width:100%;height:auto;display:block;background:white;border-radius:12px;}.learning-figure figcaption{margin-top:12px;font-size:.875rem;line-height:1.6;}
.catalog-advanced{grid-column:1/-1;}.catalog-advanced summary{cursor:pointer;font-size:1rem;font-weight:600;padding:10px 0;}.catalog-advanced-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:16px;}@media(max-width:900px){.catalog-advanced-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}.catalog-search{grid-column:auto;}}
.height-grid{border-collapse:collapse;margin:12px auto 20px;text-align:center;}.height-grid caption{font-size:.875rem;line-height:1.5;margin-bottom:10px;}.height-grid th{font-size:.875rem;padding:8px;}.height-grid td{border:2px solid #245FE5;background:#EAF2FF;min-width:52px;height:52px;font-size:1.25rem;font-weight:700;color:#142B42;}.learning-figure .height-grid+svg{max-height:200px;}

/* Focused learning: one question, clear hierarchy, room for working out. */
.h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 700; line-height: 1.18; letter-spacing: -.025em; }
.h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.1rem); font-weight: 700; line-height: 1.25; }
.h3 { font-size: 1.25rem; line-height: 1.35; }
.page .lead { max-width: 66ch; font-size: clamp(1rem, .96rem + .35vw, 1.2rem); line-height: 1.65; font-weight: 400; }
.stage-head .h1 { max-width: 22ch; }
.stage-head > .eyebrow { margin-bottom: .75rem; color: var(--cobalt-800); }
body[data-focus] .page { padding-top: clamp(1.25rem, 4vw, 3.5rem); padding-bottom: 2.5rem; }
body[data-focus] .wrap { max-width: 1180px; }
body[data-focus] .sessionstage-head { margin-bottom: 1.75rem; }
.focus-question { max-width: 760px; margin-inline: auto; }
.focus-question-nav { margin-bottom: .75rem; }
.focus-progress { display: flex; gap: .4rem; margin-bottom: 2.5rem; }
.focus-progress > span { flex: 1; height: .3rem; background: var(--line); border-radius: 2rem; }
.focus-progress > .is-done { background: var(--cobalt); }
.focus-question .stage-head { margin-bottom: 1.75rem; }
.focus-question .stage-head .h1 { max-width: 100%; }
.focus-question-actions { display: flex; gap: .75rem; margin-top: 1.75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.focus-question-actions .btn-primary { flex: 1 1 16rem; }
.sessiontitle { margin-top: .35rem; }
.sessionstage-head > .tiny { margin-top: .7rem; }
.question-label, .answer-label { color: var(--cobalt-800); font-size: .875rem; font-weight: 700; line-height: 1.5; }
.question-label { margin-bottom: .65rem; }
.answer-label { margin-bottom: .75rem; }
.qtext { font-size: clamp(1.3rem, 1.12rem + .7vw, 1.7rem); line-height: 1.5; font-weight: 700; color: var(--ink); }
.qcard > .given { font-size: 1.0625rem; line-height: 1.75; margin-block: 1rem; }
.qcard .answerblock { padding-top: 1.5rem; }
.inline-solution > .h3 { padding-inline-start: .8rem; border-inline-start: 4px solid var(--cobalt); }
.sol-step .sol-title { font-size: 1.15rem; line-height: 1.5; }
.sol-step .sol-what, .why-body { font-size: 1rem; line-height: 1.75; font-weight: 400; }

.drawing-pad { margin-top: 1.5rem; border: 1px solid var(--cobalt-line); border-radius: var(--r-md); background: var(--surface-2); min-width: 0; }
.drawing-pad > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; cursor: pointer; padding: 1rem; min-height: 52px; list-style: none; }
.drawing-pad > summary::-webkit-details-marker { display: none; }
.drawing-pad > summary::before { content: '+'; color: var(--cobalt); font-size: 1.25rem; font-weight: 700; }
.drawing-pad[open] > summary::before { content: '−'; }
.pad-summary-title { font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.pad-summary-note { font-size: .875rem; color: var(--ink-2); }
.pad-body { display: grid; gap: 1rem; padding: 0 1rem 1rem; }
.pad-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; }
.pad-toolbar .btn { min-height: 44px; padding: .5rem .85rem; font-size: .875rem; white-space: normal; }
.pad-toolbar [aria-pressed='true'] { color: var(--cobalt-800); background: var(--cobalt-tint); border-color: var(--cobalt); }
.pad-canvas { display: block; width: 100%; height: auto; min-width: 0; border: 1px solid var(--line-strong); border-radius: .5rem; background-color: #fff; background-image: linear-gradient(#e7edf5 1px, transparent 1px), linear-gradient(90deg, #e7edf5 1px, transparent 1px); background-size: 24px 24px; cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; }
.pad-canvas[hidden] { display: none; }
.pad-canvas[data-tool='eraser'] { cursor: cell; }
.pad-notes { min-height: 100px; resize: vertical; }
.pad-status { min-height: 1.5em; }
@media (max-width: 540px) {
  .focus-progress { margin-bottom: 1.75rem; }
  .focus-question-actions { flex-direction: column; }
  .focus-question-actions .btn-primary { flex: auto; }
  .drawing-pad > summary { padding: .8rem; }
  .pad-body { padding-inline: .65rem; }
  .pad-toolbar { gap: .35rem; }
  .pad-toolbar .btn { flex: 1 1 auto; padding-inline: .55rem; }
  .pad-summary-note { flex-basis: 100%; padding-inline-start: 1.3rem; }
}

.catalog-card .row-tight, .catalog-record .row-tight, .catalog-page .row-tight { flex-wrap: wrap; }
.catalog-card .badge, .catalog-record .badge, .catalog-page .badge { white-space: normal; overflow-wrap: anywhere; }

/* Groto's dialogue and the surrounding learning space.
   Keep the existing cobalt/book identity. Edge colour gives wide pages depth;
   opaque reading surfaces and a quieter focused mode keep the work calm. */
:root {
  --heading-ink: #141414;      /* headings: near-black (owner, 2026-11-08: "I prefer black") */
  --heading-secondary: #2A2A2A;
  --groto-bubble: #E5EEFF;
  --groto-bubble-line: #B8CCEE;
}
/* The page glow (review N13). It scrolls with the page instead of being
   `fixed`, each radial layer fades to transparent inside its own sized box, the
   side bands run the full height, and the base colour IS the centre colour —
   so nothing meets at an edge and no horizontal line appears on long pages. */
html { min-height: 100%; }
body {
  min-height: 100vh;
  background-color: #F9FBFF;
  background-image:
    radial-gradient(ellipse 70% 60% at 0% 0%, rgba(103,150,239,.17), rgba(103,150,239,0) 100%),
    radial-gradient(ellipse 55% 50% at 100% 55%, rgba(78,126,220,.10), rgba(78,126,220,0) 100%),
    linear-gradient(90deg, #EAF1FC 0%, rgba(249,251,255,0) 23%, rgba(249,251,255,0) 77%, #EAF1FC 100%);
  background-size: 100% 1100px, 100% 1400px, 100% 100%;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
body[data-focus] {
  background-image:
    radial-gradient(ellipse 70% 55% at 0% 0%, rgba(103,150,239,.12), rgba(103,150,239,0) 100%),
    linear-gradient(90deg, #EDF3FC 0%, rgba(250,252,255,0) 24%, rgba(250,252,255,0) 76%, #EDF3FC 100%);
  background-size: 100% 1000px, 100% 100%;
}
.page .h1 { color: var(--heading-ink); }
.page .h2, .page .h3 { color: var(--heading-secondary); }
.page .eyebrow { color: var(--cobalt-800); }
.page .lead, .page .tiny, .page .small { color: var(--ink-2); }
.page .qtext { color: var(--ink); }
.page .question-label, .page .answer-label { color: var(--cobalt-800); }
.page .card { box-shadow: 0 5px 20px rgba(30, 68, 132, .055), 0 1px 2px rgba(30, 68, 132, .035); }
.sessionstage { box-shadow: 0 12px 38px rgba(35, 76, 142, .07); }

/* Every pose has 81–95% opaque-width occupancy. Minimum dimensions therefore
   refer to real, recognisable artwork (not a large padded image box). */
.groto-fig {
  flex: 0 0 auto;
  width: clamp(128px, var(--groto-size, 17vw), 340px);
  max-width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 1;
  display: block;
  object-fit: contain;
}
.groto-block { gap: 0; min-width: 0; }
.groto-block .groto-fig { width: clamp(168px, var(--groto-size, 20vw), 320px); }
.groto-block > .groto-say { order: -2; }
.groto-block > .groto-trail { order: -1; }
.stage-aside { gap: 0; }
.stage-bubble, .groto-say {
  background: var(--groto-bubble);
  border-color: var(--groto-bubble-line);
  color: #18365D;
  font-size: 1rem;
  line-height: 1.6;
  box-shadow: 0 3px 12px rgba(36, 75, 135, .06);
}
.stage-bubble::after, .groto-say::after { content: none; }
.groto-trail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 24px;
  height: 45px;
  flex: 0 0 45px;
  pointer-events: none;
}
.groto-trail > i {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  border: 1px solid #A9C0E8;
  background: var(--groto-bubble);
  border-radius: 50%;
}
.groto-trail > i:nth-child(2) { width: 11px; height: 11px; }
.groto-trail > i:nth-child(3) { width: 6px; height: 6px; }
.topicdetail .groto-block { align-items: center; }
.sessiongroto .groto-fig { width: clamp(176px, var(--groto-size, 19vw), 256px); }
.sessiongroto.is-quiet .groto-fig { width: clamp(144px, 16vw, 208px); opacity: 1; }
.results-fig .groto-fig { width: clamp(168px, var(--groto-size, 24vw), 340px); }
.learning-heading > .groto-fig, .catalog-heading > .groto-fig { width: clamp(136px, 15vw, 184px); }
.learning-ready > .groto-fig { width: 192px; justify-self: center; }

/* Hint cards: Groto, then circles growing towards his actual text bubble.
   The connector is a separate grid cell, so nothing crosses the reading area. */
.groto-card {
  display: grid;
  grid-template-columns: 112px 42px minmax(0, 1fr);
  align-items: center;
  gap: 0;
  background: transparent;
  border: 0;
  padding: 0;
}
.groto-card.tone-blue { background: transparent; border: 0; }
.groto-card .groto-fig { width: 112px; }
.groto-card > .groto-trail {
  flex-direction: row-reverse;
  width: 42px;
  height: 24px;
  gap: 3px;
  align-self: start;
  margin-top: 24px;
}
.groto-card-copy {
  background: var(--track-solo-tint);
  border: 1px solid var(--track-solo-line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  min-width: 0;
}
.groto-card.tone-blue .groto-card-copy { background: var(--groto-bubble); border-color: var(--groto-bubble-line); }
.groto-card > .btn { grid-column: 3; justify-self: start; margin-top: 12px; }
.groto-card .groto-body { font-size: 1rem; line-height: 1.65; }

@media (max-width: 1000px) {
  .prefs-aside .groto-block { flex-direction: column; gap: 0; }
  .prefs-aside .groto-block > .groto-say { order: -2; max-width: 30ch; }
}
@media (max-width: 860px) {
  .stage-aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px 128px;
    align-items: center;
  }
  .stage-aside .groto-trail {
    flex-direction: row;
    width: 40px;
    height: 24px;
    gap: 3px;
    align-self: center;
    transform: translateY(-20px);
  }
  .stage-bubble { max-width: none; padding: 12px; }
  .groto-block .groto-fig { width: clamp(148px, 36vw, 192px); }
  .sessiongroto .groto-fig { width: 168px; }
  .sessiongroto.is-quiet .groto-fig { width: 144px; }
  .results-fig .groto-fig { width: 176px; }
}
@media (max-width: 540px) {
  .learning-heading, .catalog-heading { flex-wrap: wrap; gap: 12px; }
  .learning-heading > div, .catalog-heading > div { flex: 1 1 100%; }
  .learning-heading > .groto-fig, .catalog-heading > .groto-fig { width: 136px; margin-inline: auto; }
  .groto-card { grid-template-columns: 1fr; justify-items: center; }
  .groto-card .groto-card-copy { grid-row: 1; width: 100%; }
  .groto-card > .groto-trail { grid-row: 2; flex-direction: column; width: 24px; height: 45px; margin: 0; gap: 4px; }
  .groto-card .groto-fig { grid-row: 3; width: 128px; }
  .groto-card > .btn { grid-column: 1; justify-self: center; }
  .stage-aside { grid-template-columns: minmax(0, 1fr) 36px 112px; }
  .stage-aside .groto-trail { width: 36px; gap: 2px; }
  .stage-bubble { font-size: .9375rem; }
}
@media (max-width: 860px) {
  .exam-head-art { width: 160px; }
}
@media (max-width: 400px) {
  /* Give the short dialogue its full line width instead of squeezing it beside
     the character. The three circles still end exactly above his head. */
  .stage-aside { display: flex; flex-direction: column; align-items: center; }
  .stage-aside .stage-bubble { width: 100%; }
  .stage-aside .groto-trail { flex-direction: column; width: 24px; height: 45px; gap: 4px; transform: none; }
}

/* Questionnaire-scoped learning: a compact topic grid before choosing a lesson. */
.student-topic-grid,.student-exam-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-block:24px}
.student-topic{display:flex;flex-direction:column;gap:12px;padding:24px;text-decoration:none;color:var(--ink);min-width:0;transition:border-color .15s,box-shadow .15s}
.student-topic:hover,.student-topic:focus-visible{border-color:var(--cobalt);box-shadow:0 7px 24px #152a4010}
.student-topic h2{margin:0}.student-topic p{margin:0}.student-topic-go{margin-top:auto;font-weight:700;color:var(--cobalt)}
.student-topic-detail{margin-block:22px;max-width:850px}.student-topic-detail .btn{margin-block:12px}
.student-exam-card{display:flex;flex-direction:column;gap:12px;min-width:0}.student-exam-card>.btn{margin-top:auto;align-self:flex-start}
.student-source{max-width:1040px}.student-source>.learning-note{margin-block:24px}.student-source .catalog-practice{margin-block:24px}
.student-topic-grid h2,.student-exam-grid h2{font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.5}
.learning-controls .select{max-width:100%;text-overflow:ellipsis}.learning-note a{overflow-wrap:anywhere}
@media(max-width:1000px){.student-topic-grid,.student-exam-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.student-topic-grid,.student-exam-grid{grid-template-columns:minmax(0,1fr);gap:12px;margin-block:18px}.student-topic{padding:20px}.learning-heading>div{min-width:0}.learning-controls{grid-template-columns:minmax(0,1fr)}.student-source .row{flex-wrap:wrap}.student-exam-card>.btn{width:100%}.student-topic-detail{padding:20px}}

.student-topic-detail{position:static}.appbar nav[aria-label="ניהול תוכן"]{display:flex;flex-wrap:wrap;gap:8px}.appbar nav[aria-label="ניהול תוכן"] a{padding:8px;min-height:44px}

.appbar.is-owner .wrap{height:auto;min-height:66px;flex-wrap:wrap;padding-block:8px;gap:8px}.appbar.is-owner nav{max-width:100%}

/* Direct source-question practice: stable images, small-screen zoom, honest progress. */
.subject-art { width: 112px; height: 112px; object-fit: contain; border-radius: 22px; flex: 0 0 auto; }
.student-topic { position: relative; }
.topic-art { width: 84px; height: 84px; object-fit: contain; border-radius: 16px; margin-block-end: 12px; }
.exam-session-summary { border: 1px solid var(--line); border-radius: 18px; padding: 18px; margin-block: 20px; background: var(--surface, #fff); }
.exam-progress { font-size: 1.125rem; font-weight: 800; margin: 0 0 10px; }
.exam-session-summary progress { display: block; width: 100%; height: 10px; accent-color: var(--teal, #127a79); }
.exam-session-summary .small { margin-block: 12px 0; }
.exam-actionbar, .exam-media-toolbar, .exam-completion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block: 18px; }
.exam-media-toolbar { justify-content: space-between; }
.exam-question { min-width: 0; }
.exam-pages { min-width: 0; width: 100%; }
.exam-page { margin: 20px 0; min-width: 0; }
.exam-page figcaption { margin-block-end: 8px; }
.exam-page-viewport { overflow-x: auto; max-width: 100%; background: #fff; border: 1px solid var(--control-line); border-radius: 8px; direction: rtl; }
.exam-source-image { display: block; width: 100%; max-width: 100%; height: auto; background: #fff; }
.exam-pages.is-zoomed .exam-source-image, .exam-source-aid.is-zoomed .exam-source-image { width: 1100px; min-width: 1100px; max-width: none; }
.exam-accessible-text { font-family: inherit; font-size: 1rem; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.exam-completion { padding-block: 16px; border-block-start: 1px solid var(--line); }
.exam-completion p { flex-basis: 100%; }
.exam-completion [hidden] { display: none; }
.student-source { max-width: 1040px; min-width: 0; }
@media (max-width: 600px) {
 .subject-art { width: 80px; height: 80px; border-radius: 16px; }
 .topic-art { width: 72px; height: 72px; }
 .exam-session-summary { padding: 14px; }
 .exam-completion .btn, .exam-media-toolbar .btn { width: 100%; white-space: normal; }
 .exam-page-viewport { border-radius: 4px; }
 .student-source .catalog-practice { padding: 16px; }
}
.exam-question [hidden] { display: none; }

/* Question-first topic entry. Secondary navigation never occupies the solver. */
.exam-focused .student-source { max-width: 1000px; }
.exam-focus-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-block-end: 12px; }
.exam-focus-head h1 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); line-height: 1.4; margin: 0; flex: 1 1 280px; }
.exam-focus-head .linkish { font-size: 1rem; }
.exam-toolstrip { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 10px; }
.exam-focused .exam-page { margin-block: 10px 18px; }
.exam-focused .exam-solve-tools { margin-block: 18px; }
.exam-focused .exam-completion { display: block; padding-block: 12px; margin-block: 12px; border: 0; }
.exam-primary-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.exam-primary-buttons > .btn { min-width: 230px; }
.exam-secondary { margin-block-start: 20px; }
.exam-secondary > summary, .session-options > summary { font-size: 1rem; cursor: pointer; padding-block: 14px; }
/* Plain <details> disclosures use the `down` chevron, not the browser's
   triangle, which points LEFT in RTL and reads as a forward link (ID 38). */
.learning-note > summary, .learning-drafts > summary, .question-provenance > summary, .session-options > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
}
.learning-note > summary::-webkit-details-marker, .learning-drafts > summary::-webkit-details-marker,
.question-provenance > summary::-webkit-details-marker, .session-options > summary::-webkit-details-marker { display: none; }
.learning-note > summary::before, .learning-drafts > summary::before, .question-provenance > summary::before, .session-options > summary::before {
  content: ""; flex: 0 0 auto; inline-size: 16px; block-size: 16px; background: currentColor; transition: transform var(--dur) var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.learning-note[open] > summary::before, .learning-drafts[open] > summary::before,
.question-provenance[open] > summary::before, .session-options[open] > summary::before { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .learning-note > summary::before, .session-options > summary::before { transition: none; } }
.exam-secondary .exam-session-summary { margin-block: 12px; }
.guided-action { display: grid; gap: 8px; max-width: 680px; }
.action-cue { display: flex; align-items: center; gap: 12px; position: static; min-width: 0; }
.action-cue .groto-fig { width: 112px; height: 112px; min-width: 112px; object-fit: contain; animation: none; }
.action-cue-bubble { border: 1px solid var(--groto-bubble-line); background: var(--groto-bubble); border-radius: 18px; padding: 12px 16px; max-width: 400px; }
.action-cue-copy { margin: 0; font-size: 1rem; line-height: 1.6; }
.action-cue-dismiss { border: 0; background: transparent; color: var(--ink); font: inherit; font-size: .875rem; text-decoration: underline; padding: 8px 0 0; min-height: 44px; min-width: 44px; cursor: pointer; }
.action-cue[hidden], .exam-focused [hidden] { display: none; }
body[data-focus] .sessionstage-head { margin-block-end: 12px; }
body[data-focus] .sessiontitle { font-size: clamp(1.25rem, 2.5vw, 1.75rem); margin-block: 4px; }
body[data-focus] .sessionstage-body { grid-template-columns: minmax(0,1fr); }
body[data-focus] .sessionstage { max-width: 980px; margin-inline: auto; }
body[data-focus] .sessionstage-head > .small { margin-block: 8px 0; }
.session-options { margin-block-start: 18px; }
.session-options .sessionside { display: block; }
@media(max-width:600px){
 .exam-focus-head { gap: 8px; }
 .exam-focus-head h1 { flex-basis: 100%; order: 1; }
 .exam-toolstrip .btn { flex: 1 1 auto; font-size: .875rem; padding-inline: 12px; }
 .exam-primary-buttons > .btn { width: 100%; min-width: 0; }
 .action-cue .groto-fig { width: 96px; height: 96px; min-width: 96px; }
 .action-cue-bubble { padding: 10px 12px; }
 .action-cue { gap: 8px; }
}

/* Explicit single-click choices: selected state remains visible when returning. */
button.selection-option { width: 100%; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.selection-option[aria-pressed="true"] { border-color: var(--cobalt); background: var(--cobalt-tint); }
.selection-option .mark { opacity: .45; }
.selection-option[aria-pressed="true"] .mark { opacity: 1; }
.selection-help { margin-top: 16px; }

.tutor-panel { margin-top: 24px; padding: 20px; border: 1px solid var(--cobalt-line); border-radius: 18px; background: var(--surface); }
.tutor-heading { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.tutor-heading .groto-fig { width: 88px; height: 88px; flex: 0 0 88px; }
.tutor-panel .gradual-hints { display: grid; gap: 10px; }
.tutor-solution { margin-top: 16px; }
.tutor-step-feedback { margin: 18px 0; }
.tutor-remediation { padding-block: 12px; }
/* The available pane determines whether image annotation and typing fit beside one another. */
.drawing-pad { container-type: inline-size; }
.pad-workspace { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; align-items: start; }
.pad-drawing-area, .pad-keyboard-area { min-width: 0; display: grid; gap: 12px; }
.pad-background-select { max-width: 100%; white-space: normal; }
.pad-surface { width: 100%; }
.pad-keyboard-area .pad-notes { min-height: 220px; width: 100%; }
.pad-background-controls[hidden], .pad-background-status[hidden] { display: none; }
@container (min-width: 640px) {
 .pad-workspace { grid-template-columns: minmax(0,1.4fr) minmax(210px,.9fr); }
 .pad-keyboard-area .pad-notes { min-height: 360px; }
}
.exam-solving-layout { display: grid; gap: 20px; align-items: start; }
.exam-solving-layout > * { min-width: 0; }
@media (min-width: 1200px) {
 .exam-focused .student-source { max-width: 1560px; }
 .exam-solving-layout { grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); }
 .exam-solving-layout .exam-solve-tools { margin-block: 10px 18px; }
}
[data-coach-disabled] .tutor-heading .groto-fig { display: none; }
.formula-sheet-panel { border: 1px solid var(--line-strong); border-radius: 16px; padding: 20px; margin-block: 16px; background: var(--surface); }
.formula-sheet-panel[hidden] { display: none; }
.formula-sheet-body { max-width: 900px; margin-inline: auto; }
.formula-sheet + .formula-sheet { margin-block-start: 24px; }
.learning-figure > img { display: block; width: 100%; max-width: 960px; height: auto; margin-inline: auto; }

/* Verified worked diagrams: one in-flow image, readable scale on request.
   Only horizontal scrolling is nested; the full height stays in the page. */
.learning-figure-verified { min-width: 0; width: 100%; }
.learning-figure-verified.is-enlarged { max-width: 100%; }
.learning-figure-toggle { min-height: 44px; max-width: 100%; white-space: normal; margin-block-end: 12px; }
.learning-figure-hint { margin-block-end: 12px; font-size: .875rem; line-height: 1.6; }
.learning-figure-hint[hidden] { display: none; }
.learning-figure-viewport { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; direction: ltr; touch-action: auto; overscroll-behavior: auto; }
.learning-figure-viewport > img { display: block; width: 100%; max-width: 100%; height: auto; margin-inline: auto; }
.learning-figure-verified.is-enlarged .learning-figure-viewport > img { min-width: 100%; max-width: none; margin-inline: 0; }
.learning-figure-viewport:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }

/* Explicit on-question help sits beside work without taking over the answer. */
.practice-workspace { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.45fr); gap: 24px; align-items: start; }
.practice-work, .practice-help { min-width: 0; }
.practice-help .tutor-panel { margin-top: 0; }
body[data-focus] .sessiontitle { font-size: clamp(1.6rem,3vw,2.15rem); line-height: 1.35; }
.sessionstage .question-label { font-weight: 700; margin-block: 12px 8px; }
.sessionstage .qtext { font-size: clamp(1.25rem,2.2vw,1.6rem); line-height: 1.6; }
.tutor-heading { align-items: start; }
.tutor-heading-copy { min-width: 0; }
.tutor-heading-copy h3 { margin-block: 0 8px; }
.tutor-heading-copy p { margin: 0; }
.groto-speech { position: relative; border: 1px solid var(--groto-bubble-line); border-radius: 18px; background: var(--groto-bubble); padding: 14px 16px; color: #18365D; }
.groto-speech::after { content: ''; position: absolute; inset: auto; inset-inline: auto; width: 12px; height: 12px; background: var(--groto-bubble); border: 0; pointer-events: none; }
.groto-speech[data-groto-side='right']::after { right: -7px; top: 22px; border-right: 1px solid var(--groto-bubble-line); border-bottom: 1px solid var(--groto-bubble-line); transform: rotate(-45deg); }
.groto-speech[data-groto-side='left']::after { left: -7px; top: 22px; border-left: 1px solid var(--groto-bubble-line); border-top: 1px solid var(--groto-bubble-line); transform: rotate(-45deg); }
.groto-speech[data-groto-side='top']::after { top: -7px; left: calc(50% - 6px); border-left: 1px solid var(--groto-bubble-line); border-top: 1px solid var(--groto-bubble-line); transform: rotate(45deg); }
.groto-speech[data-groto-side='bottom']::after { bottom: -7px; left: calc(50% - 6px); border-right: 1px solid var(--groto-bubble-line); border-bottom: 1px solid var(--groto-bubble-line); transform: rotate(45deg); }
.groto-speech:not([data-groto-side])::after, [data-coach-disabled] .groto-speech::after { content: none; }
.stage-aside { gap: 16px; }
.tutor-help-response { margin-block-start: 12px; }
@media(max-width:1050px) { .practice-workspace { grid-template-columns: minmax(0,1fr); } }
@media(max-width:860px) { .stage-aside { grid-template-columns: minmax(0,1fr) 128px; gap: 16px; } }
@media(max-width:540px) { .stage-aside { grid-template-columns: minmax(0,1fr) 112px; gap: 12px; } }
@media(max-width:420px) {
 .tutor-heading, .action-cue { flex-direction: column; align-items: center; }
 .tutor-heading-copy, .action-cue-bubble { width: 100%; box-sizing: border-box; }
 .tutor-panel { padding: 16px; }
 .stage-aside { display: flex; flex-direction: column; }
}

/* Keep the official source intact and the requested help next to the work. */
.exam-practice-layout { grid-template-columns: minmax(0,1fr); }
.exam-practice-layout > :first-child { grid-column: 1 / -1; }
.practice-help { container-type: inline-size; }
@media(min-width:1051px) {
 .exam-practice-layout { grid-template-columns: minmax(0,1fr) 300px; }
}
@media(min-width:1500px) {
 body[data-focus] .exam-focused .student-source { max-width: 1560px; }
 .exam-practice-layout { grid-template-columns: minmax(0,1fr) minmax(0,1.1fr) 320px; }
 .exam-practice-layout > :first-child { grid-column: auto; }
}
@container(max-width:360px) {
 .practice-help .tutor-heading { flex-direction: column; align-items: center; }
 .practice-help .tutor-heading-copy { width: 100%; box-sizing: border-box; }
}

/* Responsive questionnaire: one task at a useful scale, with content-led
   height. Scoped to onboarding so exams, scratchpads and learning stay intact. */
body[data-focus] .page.onboarding-page,
.page.onboarding-page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-block: clamp(20px, 3.5vh, 42px) max(24px, env(safe-area-inset-bottom));
}
body[data-focus] .onboarding-page > .wrap,
.onboarding-page > .wrap {
  width: 92%;
  max-width: 2560px;
  padding-inline: 0;
}
.onboarding-shell {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vh, 48px);
}
.onboarding-nav { min-height: 48px; flex: 0 0 auto; gap: 16px; }
.onboarding-nav > .btn { min-height: 44px; }
.onboarding-nav .stagerail { flex: 0 1 430px; }
.onboarding-nav .stagerail-item { min-width: 64px; }
.onboarding-nav .stagerail-join { flex-basis: 76px; }
.onboarding-page .stage {
  flex: 1 0 auto;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
  grid-template-areas: "head aside" "body aside";
  gap: 28px clamp(40px, 5vw, 160px);
  align-content: center;
  padding-block: clamp(12px, 3vh, 36px);
}
.onboarding-page .stage-head { align-self: end; }
.onboarding-page .stage-head .h1 {
  max-width: none;
  font-size: clamp(2.2rem, 3.1vw, 4.4rem);
  line-height: 1.2;
  text-wrap: balance;
}
.onboarding-page .stage-head .lead {
  max-width: 54ch;
  margin-top: 18px;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.65;
}
.onboarding-page .choices { gap: 14px; }
.onboarding-page .choicegroup .option {
  min-height: 90px;
  padding: 18px 22px;
  gap: 18px;
  border-radius: 18px;
  touch-action: manipulation;
}
.onboarding-page .choicegroup .option .grow { min-width: 0; text-align: start; }
.onboarding-page .choicegroup .opt-title { font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.4; }
.onboarding-page .choicegroup .opt-note { font-size: 1rem; line-height: 1.5; }
.onboarding-page .choice-ico { width: 56px; height: 56px; border-radius: 16px; }
.onboarding-page .choicegroup .mark { width: 24px; height: 24px; opacity: 1; }
.onboarding-page .stage-aside {
  display: flex;
  flex-direction: column;
  align-self: center;
  gap: 24px;
  min-width: 0;
}
.onboarding-page .stage-bubble {
  max-width: min(100%, 32ch);
  padding: 18px 24px;
  border-radius: 22px;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.6;
}
.onboarding-page .selection-help { margin-top: 20px; font-size: 1rem; }
.onboarding-save { flex: 0 0 auto; }
/* Honor the coaching preference without leaving an empty mascot column. */
.onboarding-page .stage:not(:has(.stage-aside)) {
  grid-template-columns: minmax(0, 800px);
  grid-template-areas: "head" "body";
  justify-content: center;
}
.onboarding-page.intake-details .onboarding-shell { justify-content: center; }
.onboarding-page .focus-question { width: 100%; max-width: 900px; }

/* Tablet keeps a side-by-side companion, with a narrower readable form. */
@media (min-width: 761px) and (max-width: 1100px) {
  .onboarding-page .stage {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr);
    gap: 24px 32px;
  }
  .onboarding-page .stage-head .h1 { font-size: clamp(2rem, 3.6vw, 2.7rem); }
  .onboarding-page .stage-bubble { font-size: 1rem; padding: 16px; }
  .onboarding-page .choicegroup .option { min-height: 84px; padding: 16px; }
  .onboarding-nav { flex-wrap: nowrap; }
  .onboarding-nav .stagerail { order: 0; flex: 0 1 300px; }
  .onboarding-nav .stagerail-item { min-width: 54px; }
  .onboarding-nav .stagerail-join { flex-basis: 40px; }
}

/* Phone is a new composition: short companion row, full-width choices,
   natural vertical scroll for long questionnaire lists and enlarged text. */
@media (max-width: 760px) {
  body[data-focus] .page.onboarding-page,
  .page.onboarding-page { padding-block: 16px max(24px, env(safe-area-inset-bottom)); gap: 12px; }
  body[data-focus] .onboarding-page > .wrap,
  .onboarding-page > .wrap { width: 100%; max-width: 640px; padding-inline: max(20px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  .onboarding-shell { flex: 0 0 auto; gap: 28px; }
  .onboarding-nav { gap: 12px; flex-wrap: wrap; }
  .onboarding-nav > .btn { padding-inline: 8px; font-size: 1rem; min-height: 44px; }
  .onboarding-nav .stagerail { order: 3; flex: 1 0 100%; padding-top: 4px; }
  .onboarding-nav .stagerail-item { min-width: 58px; }
  .onboarding-nav .stagerail-join { flex-basis: 60px; }
  .onboarding-page .stage {
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "aside" "body";
    gap: 20px;
    padding-block: 0;
  }
  .onboarding-page .stage-head .h1 { font-size: clamp(1.8rem, 6.8vw, 2.4rem); line-height: 1.22; }
  .onboarding-page .stage-head .lead { margin-top: 12px; font-size: 1rem; line-height: 1.6; }
  .onboarding-page .stage-aside { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; }
  .onboarding-page .stage-bubble { flex: 1 1 auto; max-width: 32ch; font-size: 1rem; padding: 12px 14px; border-radius: 16px; }
  .onboarding-page .choices { gap: 10px; }
  .onboarding-page .choicegroup .option { min-height: 72px; padding: 12px 14px; gap: 12px; border-radius: 16px; }
  .onboarding-page .choicegroup .opt-title { font-size: 1.0625rem; }
  .onboarding-page .choicegroup .opt-note { font-size: 1rem; }
  .onboarding-page .choice-ico { width: 44px; height: 44px; border-radius: 12px; }
  .onboarding-page .choice-art { width: 58px; }
  .onboarding-page .selection-help { margin-top: 14px; font-size: 1rem; line-height: 1.6; }
  .onboarding-page .focus-question .stage-head { margin-bottom: 24px; }
  .onboarding-page .focus-progress { margin-bottom: 28px; }
}
@media (max-width: 360px) {
  body[data-focus] .onboarding-page > .wrap,
  .onboarding-page > .wrap { padding-inline: 16px; }
  .onboarding-page .stage-aside { gap: 10px; }
  .onboarding-page .stage-bubble { padding: 10px 12px; }
}

/* Ultrawide gains useful canvas width and stronger hierarchy, while height
   limits keep a short laptop from inheriting a tall-display composition. */
@media (min-width: 1700px) and (min-height: 850px) {
  .onboarding-page .choicegroup .option { min-height: clamp(96px, 9vh, 128px); padding: 22px 28px; }
  .onboarding-page .choicegroup .opt-title { font-size: clamp(1.375rem, 1.4vw, 1.875rem); }
  .onboarding-page .choicegroup .opt-note { font-size: 1.0625rem; }
  .onboarding-page .choice-ico { width: 64px; height: 64px; }
  .onboarding-page .stage-head .lead { font-size: clamp(1.25rem, 1.2vw, 1.5rem); }
  .onboarding-page .stage-bubble { font-size: clamp(1.125rem, 1.2vw, 1.5rem); }
}
@media (min-width: 761px) and (max-height: 800px) {
  body[data-focus] .page.onboarding-page,
  .page.onboarding-page { padding-block: 20px 24px; }
  .onboarding-shell { gap: 20px; }
  .onboarding-page .stage { gap: 22px clamp(32px, 4vw, 88px); padding-block: 8px; }
  .onboarding-page .stage-head .h1 { font-size: clamp(2rem, 3vw, 2.75rem); }
  .onboarding-page .stage-head .lead { margin-top: 12px; font-size: 1.0625rem; }
  .onboarding-page .choicegroup .option { min-height: 80px; padding: 14px 18px; }
  .onboarding-page .stage-aside { gap: 16px; }
  .onboarding-page .stage-bubble { font-size: 1rem; padding: 14px 18px; }
}

/* Real pending states only. Approved loading scene: no artificial dwell or percentage. */
.page.is-loading, body[data-focus] .page.is-loading { padding: 0; }
.loading-stage { width: 100%; max-width: none; min-height: 100vh; min-height: 100svh; margin: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 42%, #fff 0, #f7fbff 76%); color: #08264b; }
.page.catalog-page .loading-stage { min-height: 100svh; }
.loading-content { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(20px, 3.5svh, 34px); padding: max(24px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom)); }
.loading-character { position: relative; isolation: isolate; width: min(760px, 100%); aspect-ratio: 1.55; flex: 0 0 auto; direction: ltr; }
.loading-character::before { content: ''; position: absolute; z-index: -1; left: 22%; bottom: 1%; width: 74%; height: 14%; border-radius: 50%; background: #e4f1ff; }
.loading-character .groto-fig { position: absolute; z-index: 1; left: 30%; top: -3%; width: 70%; max-width: none; height: auto; aspect-ratio: 1; margin: 0; object-fit: contain; }
.loading-bubble { position: absolute; z-index: 2; left: 4%; top: 39%; width: 55%; height: 32%; margin: 0; padding: 0; max-width: none; border: 0; background: transparent; color: #fff; direction: rtl; }
.loading-bubble-shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.loading-bubble-shape path { fill: #2A5BE0; stroke: #fff; stroke-width: 3; stroke-linejoin: round; }
.loading-bubble-copy { position: absolute; left: 5%; top: 23%; width: 69%; margin: 0; color: #fff; font-size: clamp(26px, 4.1vw, 44px); line-height: 1.12; font-weight: 800; text-align: center; }
.loading-bubble-copy span { display: block; white-space: nowrap; }
.loading-bubble::after { content: none; }
.loading-sparks { position: absolute; left: 5%; top: 29%; width: 10%; height: 9%; }
.loading-sparks i { position: absolute; display: block; width: 12%; height: 78%; border-radius: 999px; background: #cef57b; }
.loading-sparks i:first-child { left: 20%; top: 10%; transform: rotate(-49deg); }
.loading-sparks i:last-child { left: 65%; top: -20%; transform: rotate(-20deg); }
.loading-state { display: grid; justify-items: center; gap: clamp(18px, 3svh, 30px); text-align: center; max-width: 100%; }
.loading-status { margin: 0; font-size: clamp(20px, 2.7vw, 34px); line-height: 1.35; font-weight: 700; color: #08264b; }
.loading-dots { display: inline-flex; direction: ltr; gap: clamp(12px, 1.2vw, 18px); }
.loading-dots i { display: block; width: clamp(14px, 1.6vw, 22px); height: clamp(14px, 1.6vw, 22px); border-radius: 50%; background: #2159e8; animation: loading-pulse 1.5s ease-in-out infinite; }
.loading-dots i:nth-child(2) { animation-delay: .2s; }.loading-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes loading-pulse { 0%, 70%, 100% { opacity: .65; } 35% { opacity: 1; } }
.loading-recovery { max-width: 680px; margin: auto; padding: 40px 24px; }
.loading-recovery h1 { font-size: 2rem; margin-bottom: 16px; }.loading-recovery p { line-height: 1.7; margin-bottom: 24px; }
@media (max-width: 760px) {
 .loading-content { gap: 26px; padding-inline: 12px; }
 .loading-character { width: min(480px, 100%); }
 .loading-bubble-copy { font-size: clamp(17px, 5.4vw, 26px); }
 .loading-status { font-size: clamp(20px, 5.6vw, 28px); }
 .loading-state { gap: 20px; }
}
@media (max-height: 650px) and (min-width: 761px) {
 .loading-character { width: min(600px, 110svh); }
 .loading-content { gap: 12px; padding-block: 16px; }
 .loading-bubble-copy { font-size: clamp(20px, 4.7svh, 30px); }
 .loading-state { gap: 12px; }.loading-status { font-size: 24px; }
}
@media (max-height: 500px) {
 .loading-content { gap: 10px; padding-block: 12px; }
 .loading-character { width: min(620px, 108svh, 100%); }
 .loading-bubble-copy { font-size: clamp(14px, 4.5svh, 24px); }
 .loading-state { gap: 10px; }.loading-status { font-size: 18px; }
 .loading-dots i { width: 12px; height: 12px; }
}
@media (prefers-reduced-motion: reduce) { .loading-dots i { animation: none; opacity: 1; } }
[data-reduce-motion] .loading-dots i { animation: none; opacity: 1; }

/* Explicit final-result checking; isolated from the retained scratch board. */
.answer-check-panel{margin-top:var(--s4);padding:var(--s4);border:1px solid var(--line,#d7dfd9);border-radius:20px;background:var(--surface,#fff);min-width:0;display:grid;gap:var(--s3)}
.answer-check-panel .field,.answer-check-fields{min-width:0;max-width:100%}.answer-check-fields{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:end}.answer-check-fields .field{flex:1 1 8rem}.answer-check-panel select,.answer-check-panel input,.answer-check-panel textarea{width:100%;max-width:100%;box-sizing:border-box}.answer-check-panel select{white-space:normal;text-overflow:ellipsis}.answer-check-feedback:empty{display:none}.answer-check-feedback{border-radius:12px;padding:var(--s3);background:var(--paper,#f5f7f5)}.answer-check-feedback[data-answer-check-status="correct"]{border-inline-start:4px solid #267455}.answer-check-feedback .btn,.answer-error .btn{margin-top:var(--s2);white-space:normal}.answer-check-panel .small{margin:0}

/* Reviewed six-question teaching panels. Scope does not alter the questionnaire layout. */
.teaching-panel{display:grid;gap:var(--s4);min-width:0;margin-top:var(--s4);padding:clamp(14px,2vw,24px);border:1px solid var(--cobalt-line);border-radius:18px;background:var(--cobalt-tint);overflow-wrap:anywhere}
.teaching-panel .teaching-section{min-width:0;display:grid;gap:var(--s2)}
.teaching-panel .teaching-label{font-size:1rem;font-weight:700;color:var(--ink);margin:0}
.teaching-panel p{margin:0;line-height:1.7}.teaching-panel .teaching-rule{padding:var(--s3);background:var(--surface,#fff);border-radius:12px;min-width:0}
.teaching-panel .teaching-rule-name{font-weight:700}.teaching-panel .teaching-statement,.teaching-panel .teaching-derived-math{unicode-bidi:plaintext;white-space:pre-wrap}
.teaching-panel .teaching-symbols{display:grid;grid-template-columns:minmax(2.5rem,max-content) minmax(0,1fr);gap:4px 12px;margin-top:var(--s2)}
.teaching-panel dt{font-weight:600}.teaching-panel dd{margin:0;line-height:1.65}.teaching-panel .teaching-symbols dt{max-width:8rem;overflow-wrap:anywhere;unicode-bidi:isolate}
.teaching-panel .teaching-caveat{font-size:.875rem;color:var(--ink-2)}.teaching-panel .teaching-list{margin:0;padding-inline-start:1.3rem;display:grid;gap:var(--s2)}
.teaching-panel .teaching-condition{display:grid;gap:4px;margin:0;padding-inline-start:var(--s3);border-inline-start:3px solid var(--cobalt-line)}
.teaching-panel .teaching-condition dd+dt{margin-top:var(--s2)}.teaching-panel .teaching-model{padding:var(--s3);border-radius:12px;background:var(--surface,#fff)}
.teaching-panel .mathblock{margin:0;min-width:0;max-width:100%;overflow-x:auto}.teaching-panel>.learning-figure{margin:0;min-width:0;max-width:100%}
@media(max-width:600px){.teaching-panel{padding:12px;gap:18px}.teaching-panel .teaching-rule{padding:12px}.teaching-panel .teaching-symbols{grid-template-columns:minmax(2rem,max-content) minmax(0,1fr)}}

/* Individually reviewed source-question regions; separate from scratchpad diagrams. */
.exam-question-source-body[hidden] { display: none; }
.exam-question-region { min-width: 0; margin: 0 0 10px; }
.exam-question-context-label { margin: 0 0 5px; }
.exam-question-crop { position: relative; width: 100%; overflow: hidden; background: #fff; direction: ltr; }
.exam-question-crop > .exam-question-crop-image { position: absolute; max-width: none; min-width: 0; height: auto; margin: 0; }
.exam-pages.is-zoomed .exam-question-crop { width: 1100px; min-width: 1100px; }
.exam-pages.is-zoomed .exam-question-crop > .exam-question-crop-image { min-width: 0; max-width: none; }
.exam-question-original-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; }
.exam-question-crop-status:empty { display: none; }

/* Scratchpad-only view controls and an in-page work dialog. */
.pad-view-toolbar { align-items: center; }
.pad-view-toolbar .pad-zoom-label { min-width: 3.6em; text-align: center; direction: ltr; font-variant-numeric: tabular-nums; }
.pad-view-toolbar .pad-open-work { margin-inline-start: auto; }
.pad-view-toolbar [hidden] { display: none; }
.pad-view-help { line-height: 1.6; }
.pad-canvas[data-tool='pan'] { cursor: grab; }
.pad-canvas[data-navigating='true'] { cursor: grabbing; }
.pad-canvas:focus-visible { outline: 3px solid var(--cobalt); outline-offset: -3px; }
.pad-work-overlay { position: fixed; inset: 0; z-index: 139; display: grid; place-items: center; padding: 16px; background: rgba(16,20,28,.5); overscroll-behavior: contain; }
.pad-work-dialog { position: relative; width: 92vw; max-width: 100%; max-height: 92vh; max-height: 92dvh; overflow: auto; overscroll-behavior: contain; background: var(--surface-2); border: 1px solid var(--cobalt-line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); container-type: inline-size; }
.pad-work-header { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; background: var(--surface-2); border-bottom: 1px solid var(--line-strong); }
.pad-work-header .h3 { margin: 0; }
.pad-work-header .btn { flex-shrink: 0; min-height: 44px; }
.pad-work-dialog .pad-body { padding-top: 16px; }
.pad-work-dialog .pad-canvas { max-height: clamp(220px, calc(92dvh - 330px), 1000px); }
@media (min-width: 800px) {
  .pad-work-dialog .pad-workspace { grid-template-columns: minmax(0,1fr) clamp(210px, 18vw, 340px); }
}
@media (max-width: 520px) {
  .pad-work-overlay { padding: 8px; }
  .pad-work-dialog { width: 100%; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .pad-work-header { padding: 12px; }
  .pad-view-toolbar .pad-open-work { flex-basis: 100%; margin-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pad-work-dialog, .pad-work-dialog .pad-canvas { animation: none; transition: none; }
}

/* Approved exercise composition: full question/answer right, scratch/Groto left.
   Default content remains in normal page flow; only requested dialogs scroll. */
body[data-focus] .page.exercise-page,
.page.exercise-page { padding-block: 0 36px; background: transparent; }
/* A forward-filled transform animation captures fixed mobile shortcuts. */
.exercise-page.view-enter { animation: none; }
body[data-focus] .exercise-page .wrap,
.exercise-page .wrap { width: auto; max-width: none; margin-inline: 32px; padding-inline: 0; }
body[data-focus] .exercise-page .sessionstage,
.exercise-page .sessionstage { max-width: none; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.exercise-page .sessionstage-body { display: block; }
.exercise-masthead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; gap: 16px; padding: 0 32px; margin-inline: -32px; margin-bottom: 18px; background: #fff; border-bottom: 1px solid #e3e9f1; }
.exercise-masthead .brand { justify-self: start; }
.exercise-masthead .brand .word { font-size: 34px; }
.exercise-masthead-title { font-size: 18px; font-weight: 600; color: var(--ink-2); }
.exercise-masthead > .btn { justify-self: end; padding-inline: 0; min-height: 44px; border: 0; color: var(--cobalt); background: transparent; font-size: 14px; }
.exercise-context { display:flex; align-items:center; justify-content:space-between; min-height:68px; gap:16px; margin-bottom:0; }
.exercise-page .exam-focus-head { display:block; margin:0; }
.exercise-page .exam-focus-head h1 { font-size:28px; line-height:1.3; margin:3px 0 16px; }
.exercise-page .exam-focus-head .small { font-size:13px; color:var(--ink-3); margin:0; }
.exercise-page .exam-toolstrip { margin:0 0 16px; align-items:center; gap:10px; }
.exercise-page .exam-toolstrip > * { min-height:40px; border:1px solid #ccd7e7; border-radius:12px; padding:9px 18px; background:#fff; font-size:14px; text-decoration:none; }
.exercise-page .exam-toolstrip > a:last-child:not(:first-child) { font-size:12px; }
body[data-focus] .exercise-page .sessionstage-head { text-align: start; margin: 0 0 18px; display: flex; align-items: center; gap: 10px 20px; flex-wrap: wrap; }
.exercise-page .sessionstage-head .sessiontitle { flex: 1 1 300px; margin: 0; font-size: clamp(1.3rem,1.7vw,2rem); }
.exercise-page .sessionstage-head > .small,
.exercise-page .sessionstage-head > .tiny { margin: 0; }
.exercise-workspace { display:grid; grid-template-columns:minmax(0,1fr) 368px; grid-template-areas:'question scratch' 'question solution'; grid-template-rows:max-content minmax(0,1fr); gap:16px 24px; align-items:start; }
.exercise-workspace > * { min-width:0; }
.exercise-question { grid-area:question; }
.exercise-scratch { grid-area:scratch; }
.exercise-solution { grid-area:solution; }
.exercise-sections { display:none; }
.exercise-section { scroll-margin-block-start:18px; }
.exercise-section:focus-visible { outline:3px solid var(--cobalt); outline-offset:4px; }
.exercise-workspace .qcard,
.exercise-workspace .exam-question { padding:20px 24px 22px; border:1px solid #e3e9f1; border-radius:18px; background:#fff; box-shadow:none; }
.exam-question { container-type:inline-size; }
.exercise-question-heading { display:flex; align-items:center; gap:12px; margin:0 0 14px; min-height:22px; }
.exercise-question-heading h2 { font-size:20px; margin:0; }
.exercise-question-heading .badge { font-size:11px; font-weight:400; padding:5px 12px; border:0; background:#f2f6fb; }
.exercise-question-heading .btn { margin-inline-start:auto; padding:0; min-height:24px; border:0; font-size:12px; font-weight:400; color:var(--cobalt); background:transparent; }
.exercise-source-reading { max-height:none; overflow:visible; border-radius:0; }
.exercise-source-reading:focus-visible { outline:3px solid var(--cobalt); outline-offset:3px; }
.exercise-source-reading .exam-pages { max-width:828px; margin-inline:auto; }
.exercise-source-reading .exam-page { margin:0 0 14px; }
.exercise-source-reading .exam-page:last-child { margin-bottom:0; }
.exercise-source-reading .exam-page-viewport { border:0; border-radius:0; overflow:visible; }
.exercise-source-reading .is-zoomed .exam-page-viewport { overflow-x:auto; }
.exam-page-viewport:focus-visible { outline:2px solid var(--cobalt); outline-offset:2px; }
.exercise-source-reading [data-single-page='true'] figcaption,
.exercise-source-reading [data-single-page='true'] .exam-question-original-links,
.exercise-source-reading .exam-question-crop-status[data-state='ready'] { display:none; }
.exercise-source-reading .exam-question-region { margin-bottom:0; }
.exam-source-narrow { display:none; }
.exercise-source-reading .exam-question-crop-status { margin-top:8px; font-size:13px; }
.exercise-workspace .qcard-top { justify-content:flex-start; }
.exercise-page .sessionstage .qtext { font-size:clamp(1.35rem,1.8vw,2.15rem); line-height:1.6; max-width:66ch; }
.exercise-workspace .qcard > .given { font-size:1.0625rem; line-height:1.75; }
.exercise-answer { border-top:1px solid #e3e9f1; margin-top:22px; }
.exercise-answer .answerblock { margin-top:0; padding-top:20px; }
.exercise-answer .qcard-go { margin-top:18px; }
.exercise-answer .pairfields { width:100%; }
.exercise-answer .pairfield { flex:1 1 160px; min-width:0; }
.exercise-answer .input { min-height:52px; max-width:100%; }
.exercise-answer .pairfield .input { width:100%; flex:1 1 0; min-width:0; }
.exercise-workspace .answer-check-panel { margin-top:24px; padding:12px 0 0; border:0; border-top:1px solid #e3e9f1; border-radius:0; gap:10px 14px; }
.exercise-workspace .answer-check-panel h3 { font-size:20px; margin:0; }
.exercise-workspace .answer-check-panel > .btn { justify-self:start; min-width:min(100%,184px); box-shadow:none; }
.exercise-workspace .answer-check-fields .input { min-height:52px; }
.answer-check-panel[data-answer-mode='comparison'] { grid-template-columns:minmax(0,1fr) 184px; }
.answer-check-panel[data-answer-mode='comparison'] > h3 { grid-column:1/-1; }
.answer-check-panel[data-answer-mode='comparison'] .answer-check-fields { grid-column:1; grid-row:2; }
.answer-check-panel[data-answer-mode='comparison'] .answer-check-fields .field { margin:0; }
.answer-check-panel[data-answer-mode='comparison'] .answer-check-fields .label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.answer-check-panel[data-answer-mode='comparison'] textarea { min-height:67px; height:67px; padding:13px 14px; resize:vertical; font-size:16px; border:1px solid #b8c9e2; border-radius:12px; }
.answer-check-panel[data-answer-mode='comparison'] > .btn { grid-column:2; grid-row:2; width:100%; height:67px; border-radius:12px; }
.answer-check-panel[data-answer-mode='comparison'] > p,
.answer-check-panel[data-answer-mode='comparison'] .answer-check-feedback { grid-column:1/-1; }
.exercise-workspace .answer-check-help { font-size:12px; color:var(--ink-3); line-height:1.5; }
.answer-check-panel > p:empty { display:none; }
.exercise-workspace .practice-help { position:static; max-height:none; overflow:visible; padding:0; margin:0; border:0; background:transparent; }
.exercise-groto { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; border:0; padding:0; background:transparent; color:var(--cobalt); font:inherit; cursor:pointer; }
.exercise-groto-invitation { border:1px solid #cfe0ff; background:#e9f1fe; border-radius:15px; min-height:40px; padding:9px 24px; font-size:14px; }
.exercise-groto .groto-fig { width:275px; height:275px; max-width:100%; object-fit:contain; animation:none; }
.exercise-help-content[hidden], .exercise-help-dialog [hidden] { display:none; }
.exercise-groto:focus-visible { outline:3px solid var(--cobalt); outline-offset:4px; border-radius:15px; }
.exercise-workspace .exam-solve-tools { margin:0; }
.exercise-workspace .drawing-pad { margin:0; background:#fff; border:1px solid #e3e9f1; border-radius:18px; }
.exercise-workspace .drawing-pad > summary { display:flex; align-items:center; justify-content:space-between; min-height:46px; padding:10px 18px 6px; list-style:none; }
.exercise-workspace .drawing-pad > summary::-webkit-details-marker { display:none; }
.exercise-workspace .drawing-pad .pad-summary-title { font-size:20px; }
.exercise-workspace .drawing-pad .pad-body { padding:0 17px 10px; gap:0; }
.exercise-workspace .drawing-pad .pad-workspace { grid-template-columns:minmax(0,1fr); gap:0; }
.exercise-workspace .drawing-pad .pad-drawing-area { gap:12px; }
.exercise-workspace .drawing-pad .pad-canvas { max-height:none; }
.drawing-pad-compact .pad-primary-toolbar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; align-items:start; }
.drawing-pad-compact .pad-primary-toolbar > .btn,
.drawing-pad-compact .pad-more-tools > summary { min-width:0; min-height:40px; width:100%; padding:7px 3px; border:1px solid #ccd7e7; border-radius:12px; font-size:12px; line-height:1.3; color:var(--ink); background:#fff; font-weight:400; text-align:center; }
.drawing-pad-compact .pad-primary-toolbar > .btn[aria-pressed='true'] { color:var(--cobalt); border-color:#bcd2ff; background:#e9f1fe; }
.pad-more-tools { min-width:0; position:relative; }
.pad-more-tools > summary { display:grid; place-items:center; cursor:pointer; list-style:none; }
.pad-more-tools > summary::-webkit-details-marker { display:none; }
.pad-more-tools[open] { grid-column:1/-1; display:grid; gap:12px; padding:10px; border:1px solid #e3e9f1; border-radius:12px; }
.pad-more-tools[open] > summary { width:auto; justify-self:end; padding-inline:14px; }
.pad-more-tools .pad-toolbar { display:flex; flex-wrap:wrap; gap:6px; }
.pad-more-tools .pad-keyboard-notes { min-width:0; }
.pad-instructions > summary,.pad-keyboard-notes > summary { cursor:pointer; min-height:44px; padding:10px 0; font-weight:500; color:var(--cobalt-800); }
.drawing-pad-compact .pad-status,
.drawing-pad-compact .pad-background-status { margin:0; min-height:0; font-size:11px; line-height:1.4; color:var(--ink-3); }
.drawing-pad-compact .pad-keyboard-area { gap:0; padding-top:4px; }
.drawing-pad-compact .pad-open-work { min-width:28px; min-height:28px; border:0; padding:0; color:var(--cobalt); font-size:23px; line-height:1; background:transparent; }
.pad-expand-surface { position:absolute; inset:0; z-index:2; cursor:zoom-in; border:0; background:transparent; }
.pad-expand-surface:focus-visible { outline:3px solid var(--cobalt); outline-offset:-3px; }
.pad-surface.has-diagram-grid { background-image:linear-gradient(#e7edf5 1px,transparent 1px),linear-gradient(90deg,#e7edf5 1px,transparent 1px); background-size:24px 24px; }
.exercise-page .exam-completion { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; gap:8px; margin:14px 0; padding:0; }
.exercise-page .exam-completion > .small { flex-basis:auto; margin:0; font-size:12px; color:var(--ink-3); }
.exercise-page .exam-completion .guided-action { display:block; }
.exercise-page .exam-completion .action-cue { display:none; }
.exercise-page .exam-completion .btn { border:0; background:transparent; color:var(--cobalt); padding:4px 0; min-height:32px; font-size:13px; box-shadow:none; }
.exercise-page .exam-completion .exam-primary-buttons > .btn { min-width:0; }
.exercise-help-overlay { position:fixed; inset:0; z-index:160; display:grid; place-items:center; padding:24px; background:rgba(20,43,66,.3); }
.exercise-help-dialog { width:min(680px,100%); max-height:88dvh; overflow:auto; overscroll-behavior:contain; padding:24px; border:1px solid #e3e9f1; border-radius:22px; background:#fff; box-shadow:0 20px 70px #142b4233; }
.exercise-help-header { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.exercise-help-header h2 { margin:0; flex:1 1 auto; font-size:22px; }
.exercise-help-header .btn { min-height:44px; }
.exercise-help-menu { display:grid; gap:12px; }
.exercise-help-menu .btn { text-align:start; justify-content:flex-start; min-height:54px; white-space:normal; }
.exercise-help-dialog .tutor-panel { margin:0; padding:0; border:0; background:transparent; }
.exercise-help-dialog .tutor-panel > * { margin-top:16px; }
.exercise-help-dialog .tutor-panel .tutor-heading { display:none; }
.exercise-help-dialog .tutor-final-answer-text { white-space:pre-wrap; line-height:1.8; }
/* Expanded workspace keeps the actual question and actual drawing mounted. */
.pad-work-overlay { padding:14px; }
.pad-work-dialog { width:calc(100vw - 28px); max-width:1600px; height:calc(100dvh - 28px); max-height:none; overflow:hidden; display:flex; flex-direction:column; background:#f7f9fb; }
.pad-work-header { flex:0 0 auto; min-height:78px; }
.pad-work-header > div { flex:1; }
.pad-work-header p { font-size:12px; margin:4px 0 0; }
.pad-work-columns { min-height:0; flex:1; overflow:auto; }
.pad-work-dialog.has-question .pad-work-columns { display:grid; grid-template-columns:minmax(320px,min(var(--question-share,42%),calc(100% - 334px))) 14px minmax(320px,1fr); overflow:hidden; }
.pad-work-dialog .pad-body { min-width:0; padding:16px; overflow:auto; overscroll-behavior:contain; }
.pad-work-dialog .pad-workspace { display:block; }
.pad-work-dialog .pad-canvas { max-height:max(240px,calc(100dvh - 220px)); }
.pad-work-dialog .pad-primary-toolbar { margin-bottom:12px; }
.pad-work-dialog .pad-expand-surface[hidden] { display:none; }
.pad-work-dialog .pad-status { margin-top:8px; }
.pad-question-pane { min-width:0; overflow:auto; overscroll-behavior:contain; padding:16px; }
.pad-question-pane .exercise-question { margin:0; padding:18px; border:1px solid #e3e9f1; border-radius:18px; background:#fff; }
.pad-question-pane .exercise-question .exercise-source-reading { max-height:none; overflow:visible; }
.pad-question-header { display:none; }
.pad-question-divider { position:relative; cursor:col-resize; touch-action:none; background:transparent; border-radius:6px; }
.pad-question-divider::after { content:''; position:absolute; width:4px; height:64px; inset:calc(50% - 32px) 5px auto; border-radius:4px; background:#b8c9e2; }
.pad-question-divider:hover,.pad-question-divider:focus-visible { background:#e2eafe; outline:2px solid var(--cobalt); outline-offset:-2px; }
.pad-show-question { display:none; }
@container (max-width:600px) {
 .exam-source-wide { display:none; }
 .exam-source-narrow { display:block; max-width:430px; margin-inline:auto; }
 .exam-source-narrow + .exam-source-narrow { margin-top:20px; }
 .exam-source-narrow .exam-question-context-label { margin:0 0 14px; font-size:12px; color:var(--ink-3); }
 .answer-check-panel[data-answer-mode='comparison'] { grid-template-columns:minmax(0,1fr); }
 .answer-check-panel[data-answer-mode='comparison'] .answer-check-fields { grid-column:1; grid-row:2; }
 .answer-check-panel[data-answer-mode='comparison'] > .btn { grid-column:1; grid-row:3; min-height:46px; height:auto; }
}
@media (min-width:1100px) and (max-height:800px) {
 .exercise-source-reading .exam-pages { max-width:790px; }
 .exercise-groto .groto-fig { width:235px; height:235px; }
 .exercise-masthead { margin-bottom:12px; }
 .exercise-context { min-height:62px; }
}
@media (max-width:1099px) {
 .exercise-workspace { grid-template-columns:minmax(0,1fr); grid-template-areas:'question' 'scratch' 'solution'; grid-template-rows:auto; gap:20px; }
 .exercise-workspace .exercise-scratch { width:100%; max-width:600px; justify-self:center; }
 .exercise-groto .groto-fig { width:230px; height:230px; }
 .exercise-context { align-items:flex-start; flex-wrap:wrap; }
 .exercise-page .exam-focus-head h1 { font-size:24px; margin-bottom:12px; }
 .exercise-page .exam-toolstrip { margin-bottom:16px; }
}
@media (max-width:899px) {
 .pad-work-overlay { padding:0; }
 .pad-work-dialog { width:100%; max-width:none; height:100dvh; border-radius:0; }
 .pad-work-header { min-height:72px; padding:12px; gap:8px; flex-wrap:wrap; }
 .pad-work-header .h3 { font-size:18px; }
 .pad-work-dialog.has-question .pad-work-columns { display:block; overflow:auto; }
 .pad-work-dialog .pad-body { padding:12px; }
 .pad-question-pane { display:none; }
 .pad-question-pane.is-open { display:block; position:absolute; inset:0; z-index:5; padding:12px; background:#f7f9fb; }
 .pad-question-header { display:flex; position:sticky; top:-12px; z-index:4; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; background:#f7f9fb; }
 .pad-question-header h3 { font-size:18px; margin:0; }
 .pad-question-divider { display:none; }
 .pad-show-question { display:inline-flex; }
 .pad-work-dialog .pad-canvas { max-height:max(240px,calc(100dvh - 220px)); }
}
@media (max-width:600px) {
 body[data-focus] .page.exercise-page,.page.exercise-page { padding-block:0 calc(96px + env(safe-area-inset-bottom)); }
 body[data-focus] .exercise-page .wrap,.exercise-page .wrap { margin-inline:16px; }
 .exercise-masthead { grid-template-columns:1fr auto; margin-inline:-16px; padding-inline:16px; height:58px; margin-bottom:18px; }
 .exercise-masthead .brand .word { font-size:30px; }
 .exercise-masthead-title { display:none; }
 .exercise-masthead > .btn { font-size:12px; }
 .exercise-context { margin-bottom:10px; gap:0; }
 .exercise-page .exam-focus-head h1 { font-size:23px; margin:8px 0 12px; }
 .exercise-page .exam-focus-head .small { font-size:12px; }
 .exercise-page .exam-toolstrip { width:100%; gap:8px; margin:0 0 8px; }
 .exercise-page .exam-toolstrip > * { padding:6px 9px; font-size:12px; min-height:34px; }
 .exercise-workspace .qcard,.exercise-workspace .exam-question { padding:16px 13px; border-radius:17px; }
 .exercise-question-heading { gap:6px; margin-bottom:20px; }
 .exercise-question-heading h2 { font-size:18px; }
 .exercise-question-heading .badge { display:none; }
 .exercise-question-heading .btn { font-size:11px; }
 .exercise-source-reading .exam-pages { max-width:100%; }
 .exercise-workspace .answer-check-panel { margin-top:20px; padding-top:14px; gap:10px; }
 .answer-check-panel[data-answer-mode='comparison'] { grid-template-columns:minmax(0,1fr); }
 .answer-check-panel[data-answer-mode='comparison'] .answer-check-fields { grid-column:1; grid-row:2; }
 .answer-check-panel[data-answer-mode='comparison'] textarea { height:84px; min-height:84px; }
 .answer-check-panel[data-answer-mode='comparison'] > .btn { grid-column:1; grid-row:3; width:100%; min-height:46px; height:auto; }
 .exercise-workspace .answer-check-help { font-size:12px; line-height:1.6; }
 .exercise-sections { display:flex; position:fixed; inset:auto 0 0; z-index:100; padding:8px 12px calc(8px + env(safe-area-inset-bottom)); gap:8px; border-top:1px solid #e3e9f1; background:#fff; box-shadow:0 -4px 18px #142b4208; }
 .exercise-sections > button { flex:1 1 0; min-width:0; min-height:48px; padding:8px 3px; border:1px solid #ccd7e7; border-radius:12px; font:inherit; font-size:14px; color:var(--ink); background:#fff; cursor:pointer; }
 .exercise-sections > button:last-child { display:flex; align-items:center; justify-content:center; gap:4px; color:var(--cobalt); background:#e9f1fe; border-color:#bcd2ff; }
 .exercise-sections > button:last-child::before { content:''; display:block; width:36px; height:36px; flex:0 0 36px; background:url('assets/groto/hint.webp') center/contain no-repeat; }
 .exercise-sections > button:focus-visible { outline:3px solid var(--cobalt); outline-offset:2px; }
 .exercise-workspace.is-editing .exercise-sections { display:none; }
 .exercise-workspace .exercise-solution { display:none; }
 .exercise-workspace .drawing-pad .pad-body { padding-inline:16px; }
 .exercise-workspace .drawing-pad .pad-summary-title { font-size:20px; }
 .exercise-page .exam-completion { gap:10px; }
 .exercise-page .exam-completion > .small { font-size:11px; }
 .exercise-page .exam-completion .guided-action { width:100%; }
 .exercise-page .exam-completion .btn { width:100%; min-height:44px; border:1px solid #ccd7e7; border-radius:12px; background:#fff; color:var(--ink); font-size:14px; }
 .exercise-help-overlay { padding:0; align-items:end; }
 .exercise-help-dialog { max-height:90dvh; width:100%; padding:20px 16px calc(20px + env(safe-area-inset-bottom)); border-radius:22px 22px 0 0; }
}
@media (prefers-reduced-motion:reduce) {
 .exercise-workspace,.exercise-workspace * { scroll-behavior:auto; }
}
/* Source/formula controls occupy the context row on wide screens and remain
   a real in-flow row between answer and draft on small screens. */
.exercise-page .student-source { position:relative; }
.exercise-workspace > .exam-toolstrip { position:absolute; top:94px; left:0; max-width:calc(100% - 500px); }
@media(max-width:1099px) {
 .exercise-workspace:has(> .exam-toolstrip) { grid-template-areas:'question' 'resources' 'scratch' 'solution'; }
 .exercise-workspace > .exam-toolstrip { position:static; grid-area:resources; max-width:100%; margin:0; }
}
@media(max-width:600px) {
 .exercise-context { min-height:64px; margin-bottom:10px; }
 .exercise-workspace > .exam-toolstrip { justify-content:space-between; gap:8px; }
 .exercise-workspace > .exam-toolstrip > * { border:0; background:transparent; padding:4px 0; font-size:12px; min-height:32px; }
}
.exercise-workspace .drawing-pad > summary::before { display:none; }
.pad-work-dialog .pad-body { container-type:inline-size; }
.pad-work-dialog .pad-canvas { height:min(calc(100dvh - 220px),140cqw); min-height:180px; max-height:none; }
.answer-check-panel[data-answer-mode='comparison'][data-has-part-selector='true'] .answer-check-part { grid-column:1/-1; grid-row:2; }
.answer-check-panel[data-answer-mode='comparison'][data-has-part-selector='true'] .answer-check-fields { grid-row:3; }
.answer-check-panel[data-answer-mode='comparison'][data-has-part-selector='true'] > .btn { grid-row:3; }
@container (max-width:600px) {
 .answer-check-panel[data-answer-mode='comparison'][data-has-part-selector='true'] > .btn { grid-row:4; }
}
@media(max-width:600px) {
 .answer-check-panel[data-answer-mode='comparison'][data-has-part-selector='true'] > .btn { grid-row:4; }
}

/* Topic selection: one clear mathematical illustration for every real topic. */
.student-topic .topic-art {
 display: block;
 width: 100%;
 height: auto;
 aspect-ratio: 25 / 14;
 object-fit: contain;
 border-radius: 14px;
 margin: 0 0 6px;
 flex: 0 0 auto;
}
.student-topic .topic-art.is-photo { object-fit: cover; background: #e8edf7; }
.student-topic-grid .student-topic {
 gap: 12px;
 padding: 18px;
}
.student-topic-grid .student-topic h2 {
 line-height: 1.45;
 text-wrap: balance;
}
.student-topic-grid .student-topic p {
 line-height: 1.65;
}
.student-topic-grid .student-topic-go {
 padding-block-start: 6px;
}
.learning-heading > div:only-child {
 flex: 1 1 auto;
 min-width: 0;
}
@media (max-width: 620px) {
 .student-topic-grid .student-topic { padding: 16px; }
 .student-topic .topic-art:not(.is-photo) { max-height: 200px; background: #f4f7fe; }
}

/* Exercise workbench, October 2026. The large working layout is now the
   default, with one live question, one answer, and one unbounded draft. */
.exercise-workbench,
.exercise-workbench:has(> .exam-toolstrip) {
  grid-template-columns:minmax(320px, 38%) minmax(0, 1fr);
  grid-template-areas:'resources resources' 'question scratch' 'solution scratch';
  grid-template-rows:auto auto 1fr;
  column-gap:20px; row-gap:14px;
  align-items:start;
}
.exercise-workbench > .exam-toolstrip {
  position:static; grid-area:resources; max-width:none;
  display:flex; flex-wrap:wrap; gap:8px; margin:0;
}
.exercise-workbench > .exam-toolstrip > * {
  min-height:36px; padding:6px 12px; font-size:13px;
  border-radius:9px; background:#fff;
}
.exercise-workbench .exercise-question { min-width:0; }
.exercise-workbench .qcard,
.exercise-workbench .exam-question { padding:16px 18px; }
.exercise-workbench .exercise-question-heading { margin-bottom:12px; gap:8px; }
.exercise-workbench .exercise-question-heading h2 { font-size:18px; }
.exercise-workbench .exercise-question-heading .badge { display:none; }
.exercise-workbench .exercise-question-heading .btn { font-size:12px; min-height:36px; padding:6px 8px; }
.exercise-workbench .exercise-source-reading {
  max-height:clamp(200px, calc(100dvh - 595px), 380px);
  overflow:auto; overscroll-behavior:contain;
  scrollbar-gutter:stable; border-radius:6px;
}
.exercise-workbench .exam-page[data-source-presentation='full-page'] .exam-source-image {
  width:max(100%, 680px); max-width:none;
}
.exercise-workbench .exam-page[data-source-presentation='full-page'] .exam-page-viewport {
  overflow:auto; overscroll-behavior:contain;
}
.exercise-workbench .exam-question-crop-status { font-size:11px; line-height:1.5; margin-block:8px; }
.exercise-workbench .exam-question-original-links { gap:8px; font-size:11px; }
.exercise-workbench .answer-check-panel { margin-top:14px; padding-top:12px; gap:8px; }
.exercise-workbench .answer-check-panel h3 { font-size:18px; }
.exercise-workbench .answer-check-panel textarea { min-height:72px; height:72px; }
.exercise-workbench .answer-check-panel .btn { min-height:42px; }
.exercise-workbench .exercise-scratch { width:100%; max-width:none; align-self:stretch; }
.exercise-workbench .drawing-pad { border-radius:18px; }
.exercise-workbench .drawing-pad > summary { min-height:54px; padding:12px 16px; }
.exercise-workbench .drawing-pad .pad-summary-title { font-size:22px; }
.exercise-workbench .drawing-pad .pad-body { padding:0 14px 12px; }
.exercise-workbench .drawing-pad .pad-drawing-area { gap:10px; }
.drawing-pad-workbench .pad-surface { background-color:#fff; }
.exercise-workbench .drawing-pad-workbench .pad-canvas {
  width:100%; height:clamp(360px, calc(100dvh - 295px), 920px);
  min-height:0; max-height:none; aspect-ratio:auto;
}
.drawing-pad-workbench .pad-primary-toolbar {
  display:flex; flex-wrap:wrap; align-items:center; gap:7px;
}
.drawing-pad-workbench .pad-primary-toolbar > .btn,
.drawing-pad-workbench .pad-more-tools > summary {
  width:auto; flex:0 1 auto; min-height:38px; padding:7px 12px;
  font-size:13px; white-space:normal;
}
.drawing-pad-workbench .pad-more-tools { display:contents; }
.drawing-pad-workbench .pad-more-tools::details-content { display:contents; }
.drawing-pad-workbench .pad-more-tools[open] { display:contents; padding:0; border:0; }
.drawing-pad-workbench .pad-more-tools[open] > summary {
  background:#e9f1fe; color:var(--cobalt); padding:7px 12px;
}
.drawing-pad-workbench .pad-more-tools > .pad-toolbar { display:flex; flex-wrap:wrap; margin:0; gap:6px; }
.drawing-pad-workbench .pad-more-tools:not([open]) > :not(summary) { display:none; }
.drawing-pad-workbench .pad-more-tools > .pad-background-controls { flex:1 1 220px; margin:0; }
.drawing-pad-workbench .pad-more-tools > .pad-background-controls[hidden] { display:none; }
.drawing-pad-workbench .pad-background-controls .label { font-size:11px; }
.drawing-pad-workbench .pad-background-select { min-height:38px; padding-block:6px; font-size:12px; }
.drawing-pad-workbench .pad-more-tools > .pad-instructions,
.drawing-pad-workbench .pad-more-tools > .pad-keyboard-notes { flex:1 1 100%; }
.drawing-pad-workbench .pad-view-toolbar .btn { min-height:38px; }
.drawing-pad-workbench .pad-toolbar [hidden] { display:none; }
.drawing-pad-workbench .pad-canvas[data-navigating='true'] { cursor:grabbing; }
.exercise-workbench .exercise-solution { display:block; align-self:end; }
.exercise-workbench .exercise-groto {
  display:flex; flex-direction:row-reverse; justify-content:center;
  align-items:center; gap:8px; min-height:190px; width:100%;
}
.exercise-workbench .exercise-groto .groto-fig {
  flex:0 0 clamp(190px, 17vw, 245px); width:clamp(190px, 17vw, 245px);
  height:clamp(190px, 17vw, 245px); max-width:52%;
}
.exercise-workbench .exercise-groto-invitation {
  flex:0 1 210px; text-align:center; font-size:15px; line-height:1.5;
  padding:12px 14px; border-radius:16px; background:#e9f1fe;
}
@media (min-width:1100px) {
 .exercise-page .exercise-masthead { margin-bottom:10px; }
 .exercise-page .exercise-context { min-height:54px; }
 .exercise-page .exam-focus-head h1 { font-size:25px; margin:3px 0 10px; }
}
@media (min-width:900px) and (max-width:1099px) {
 .exercise-workbench { grid-template-columns:minmax(310px, 42%) minmax(0,1fr); }
 .exercise-workbench .exercise-groto .groto-fig { width:190px; height:190px; flex-basis:190px; }
 .exercise-workbench .exercise-groto-invitation { font-size:13px; padding:10px; }
}
@media (max-width:899px) {
 .exercise-workbench,
 .exercise-workbench:has(> .exam-toolstrip) {
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:'resources' 'question' 'solution' 'scratch';
  grid-template-rows:auto; gap:14px;
 }
 .exercise-workbench .exercise-source-reading {
  max-height:clamp(280px, 52dvh, 600px); overflow:auto;
 }
 .exercise-workbench .drawing-pad-workbench .pad-canvas {
  height:clamp(360px, 60dvh, 700px);
 }
 .exercise-workbench .exercise-groto { min-height:180px; gap:16px; }
 .exercise-workbench .exercise-groto .groto-fig { width:190px; height:190px; flex-basis:190px; }
 .exercise-workbench .exercise-groto-invitation { font-size:14px; flex-basis:220px; }
}
@media (max-width:600px) {
 .exercise-workbench > .exam-toolstrip { gap:6px; justify-content:flex-start; }
 .exercise-workbench > .exam-toolstrip > * {
  border:1px solid #ccd7e7; padding:7px 9px; min-height:36px; font-size:12px;
 }
 .exercise-workbench .qcard,
 .exercise-workbench .exam-question { padding:14px 12px; }
 .exercise-workbench .exercise-question-heading .btn { font-size:11px; }
 .exercise-workbench .exercise-solution { display:block; }
 .exercise-workbench .drawing-pad .pad-body { padding-inline:10px; }
 .exercise-workbench .drawing-pad .pad-summary-title { font-size:21px; }
 .drawing-pad-workbench .pad-primary-toolbar > .btn,
 .drawing-pad-workbench .pad-more-tools > summary { min-height:42px; font-size:12px; padding:8px 10px; }
 .exercise-workbench .exercise-groto { gap:6px; }
 .exercise-workbench .exercise-groto .groto-fig { width:180px; height:180px; flex-basis:180px; }
}
@media (max-height:600px) and (min-width:900px) {
 .exercise-workbench .exercise-source-reading { max-height:260px; }
 .exercise-workbench .drawing-pad-workbench .pad-canvas { height:460px; }
}

/* Keep the actual guide in the opening frame without narrowing the draft.
   These are the same question, guide and drawing nodes in normal page flow. */
@media (min-width:900px) {
 .exercise-workbench,
 .exercise-workbench:has(> .exam-toolstrip) {
  grid-template-areas:'resources resources' 'solution scratch' 'question scratch';
 }
 .exercise-workbench .exercise-solution { align-self:start; }
 .exercise-workbench .exercise-groto { min-height:0; gap:12px; }
 .exercise-workbench .exercise-groto .groto-fig {
  flex-basis:clamp(160px, 14vw, 190px);
  width:clamp(160px, 14vw, 190px); height:clamp(160px, 14vw, 190px);
 }
}
@media (max-width:899px) {
 .exercise-workbench,
 .exercise-workbench:has(> .exam-toolstrip) {
  grid-template-areas:'resources' 'solution' 'question' 'scratch';
 }
 .exercise-workbench .exercise-groto { min-height:0; gap:12px; }
 .exercise-workbench .exercise-groto .groto-fig {
  flex-basis:120px; width:120px; height:120px;
 }
}
.drawing-pad-workbench .pad-open-work {
 min-width:0; min-height:36px; padding:6px 10px; border:1px solid #ccd7e7;
 border-radius:9px; font-size:13px; line-height:1.4; background:#fff;
}
/* An image can pan sideways; vertical scrolling belongs to its surrounding
   reader, or to the question sheet in enlarged work mode. */
.exercise-workbench .exam-page-viewport,
.exercise-workbench .exam-page[data-source-presentation='full-page'] .exam-page-viewport,
.pad-question-pane .exam-page-viewport {
 overscroll-behavior-x:contain; overscroll-behavior-y:auto;
}

/* Approved question-first exercise system, 2026-10-14.
   One reusable layout, original source pixels and verified tutor/checker data.
   The draft exists only in its explicitly requested expanded workspace. */
.exercise-page { --exercise-blue:#2A5BE0; --exercise-navy:#142B42; --exercise-wash:#E9F1FE; background:transparent; color:var(--exercise-navy); }
.exercise-page .exercise-masthead { background:transparent; border-bottom:0; height:76px; margin-bottom:4px; }
.exercise-page .exercise-masthead-title { display:none; }
.exercise-page .exercise-masthead { grid-template-columns:1fr 1fr; }
.exercise-page .exercise-masthead > .btn { font-size:18px; font-weight:500; color:var(--exercise-blue); gap:4px; }
.exercise-page .exercise-masthead .brand .word { font-size:42px; }
.exercise-page .exercise-context { justify-content:center; margin:0 0 24px; }
.exercise-page .exam-focus-head { text-align:center; }
.exercise-page .exam-focus-head > .small { margin:0 0 6px; font-size:14px; }
.exercise-page .exam-focus-head .exercise-welcome-title { font-size:clamp(32px,4.25vw,64px); font-weight:800; letter-spacing:-.035em; line-height:1.2; margin:0; color:var(--exercise-navy); }
.exercise-welcome-title > span { color:var(--exercise-blue); }
.exercise-question-first,
.exercise-question-first.exercise-workbench,
.exercise-question-first.exercise-workbench:has(> .exam-toolstrip) {
 grid-template-columns:minmax(0,1fr) clamp(270px,27vw,390px);
 grid-template-areas:'question solution' 'scratch solution' 'detail detail';
 grid-template-rows:auto auto auto; gap:18px 24px; align-items:start;
}
.exercise-question-first > .exercise-scratch[hidden] { display:none !important; }
.exercise-question-first > .exercise-scratch-entry { grid-area:scratch; width:100%; min-height:62px; font-size:23px; font-weight:700; border-radius:18px; background:var(--exercise-blue); border-color:var(--exercise-blue); box-shadow:none; }
.exercise-question-first > .exercise-scratch-entry::before { content:'✎'; font-size:1.2em; margin-inline-end:10px; }
.exercise-question-first .qcard,
.exercise-question-first .exam-question { padding:24px 26px; border:1px solid #DDE7F3; border-radius:23px; box-shadow:0 5px 18px #142b4204; }
.exercise-question-first .exercise-question-heading { flex-wrap:wrap; gap:8px 18px; border-bottom:1px solid #DDE7F3; padding-bottom:18px; margin-bottom:18px; }
.exercise-question-first .exercise-question-heading h2 { font-size:30px; font-weight:750; }
.exercise-question-meta { margin-inline-start:auto; color:#677C9C; font-size:17px; line-height:1.5; }
.exercise-question-first .exercise-question-heading .btn { min-height:40px; padding:8px 12px; font-size:14px; border:1px solid #D2E0FA; border-radius:12px; background:#F5F8FF; }
.exercise-question-first .exercise-source-reading { max-height:none; height:auto; overflow:visible; scrollbar-gutter:auto; border-radius:0; }
.exercise-question-first .exercise-source-reading .exam-pages { max-width:none; }
.exercise-question-first .exam-page[data-source-presentation='full-page'] .exam-source-image { width:100%; max-width:100%; }
.exercise-question-first .exam-page[data-source-presentation='full-page'] .exam-page-viewport { overflow-x:auto; overflow-y:visible; overscroll-behavior-x:contain; overscroll-behavior-y:auto; }
.exercise-question-first .exercise-source-reading .is-zoomed .exam-source-image { width:max(100%,1000px); max-width:none; }
.exercise-question-first .exercise-source-reading .exam-question-crop-status { font-size:14px; line-height:1.65; }
.exercise-question-first .exercise-resources { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:8px 12px; margin:16px 0 0; }
.exercise-question-first .exercise-resources > * { min-height:42px; padding:9px 13px; font-size:15px; border-color:#D2E0FA; border-radius:12px; background:#F5F8FF; }
.exercise-question-first .answer-check-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(170px,.7fr); gap:12px 20px; margin-top:20px; padding:20px; border:1px solid #D4E2FA; border-radius:18px; background:#F4F8FF; }
.exercise-question-first .answer-check-panel > h3 { grid-column:1/-1; font-size:24px; font-weight:700; margin:0; color:var(--exercise-blue); }
.exercise-question-first .answer-check-part { grid-column:1/-1; margin:0; }
.exercise-question-first .answer-check-part > .label { font-size:14px; }
.exercise-question-first .answer-check-part select { width:auto; max-width:100%; min-height:46px; font-size:17px; border:1px solid #D2E0FA; border-radius:13px; background:white; }
.exercise-question-first .answer-check-fields { grid-column:1; display:flex; gap:12px; align-items:end; min-width:0; }
.exercise-question-first .answer-check-fields .field { flex:1 1 0; min-width:0; margin:0; }
.exercise-question-first .answer-check-fields .label { font-size:16px; }
.exercise-question-first .answer-check-fields .input { width:100%; min-height:54px; font-size:23px; text-align:center; border:1px solid #BCCEE8; border-radius:12px; background:white; }
.exercise-question-first .answer-check-fields textarea { width:100%; min-height:90px; height:90px; background:white; }
.exercise-question-first .answer-check-panel > .btn { grid-column:2; grid-row:auto; align-self:end; justify-self:stretch; min-width:0; min-height:54px; height:auto; font-size:17px; border-radius:13px; background:var(--exercise-blue); }
.exercise-question-first .answer-check-panel > .answer-check-help { grid-column:1/-1; grid-row:auto; font-size:13px; color:#627795; margin:0; }
.exercise-question-first .answer-check-panel .answer-check-feedback { grid-column:1/-1; }
.exercise-question-first .answer-check-feedback[data-answer-check-status='correct'] { padding:14px; border-radius:12px; color:#235C3A; background:#EDF7EF; }
.exercise-question-first .answer-check-feedback[data-answer-check-status='incorrect'] { padding:14px; border-radius:12px; color:#704C21; background:#FFF6E8; }
.exercise-question-first .practice-help.exercise-solution { display:block; grid-area:solution; position:static; min-width:0; overflow:visible; border:0; background:transparent; padding:0; align-self:start; }
.exercise-question-first .exercise-groto { display:flex; flex-direction:column; align-items:center; gap:12px; padding:34px 0 18px; min-height:0; width:100%; transform:translateY(24px); transition:transform 300ms cubic-bezier(.2,.7,.2,1),padding 300ms ease; }
.exercise-question-first .exercise-groto .groto-fig { flex-basis:auto; width:min(100%,350px); height:350px; max-width:100%; filter:drop-shadow(0 12px 12px #142b420c); transition:width 300ms ease,height 300ms ease,transform 300ms ease; }
.exercise-question-first .exercise-groto-invitation { display:block; flex-basis:auto; padding:16px 22px; min-height:0; max-width:100%; color:var(--exercise-navy); background:var(--exercise-wash); border:1px solid #D1E1FF; border-radius:24px; font-size:clamp(19px,1.65vw,25px); line-height:1.35; font-weight:750; text-align:center; }
.exercise-question-first .exercise-groto-invitation::before,
.exercise-question-first .exercise-groto-invitation::after { display:none; }
.exercise-question-first .is-help-open .exercise-groto { transform:translateY(0); padding-top:0; }
.exercise-question-first .is-help-open .exercise-groto .groto-fig { width:240px; height:240px; }
.exercise-help-menu { display:grid; gap:12px; }
.exercise-help-menu[hidden],.exercise-help-content[hidden],.exercise-help-close[hidden],.exercise-solution-outlet[hidden] { display:none !important; }
.exercise-help-option { min-width:0; }
.exercise-help-action { display:flex; align-items:center; gap:12px; width:100%; min-height:72px; padding:15px 18px; border:1px solid #D4E3FC; border-radius:18px; color:var(--exercise-navy); background:#fff; font:inherit; font-size:19px; font-weight:650; line-height:1.4; text-align:start; cursor:pointer; }
.exercise-help-action-icon { width:28px; flex:0 0 28px; color:var(--exercise-blue); font-size:27px; font-weight:500; text-align:center; }
.exercise-help-chevron { margin-inline-start:auto; color:var(--exercise-blue); font-size:22px; }
.exercise-help-action:disabled { opacity:.5; cursor:not-allowed; }
.exercise-help-action:focus-visible,.exercise-help-close:focus-visible { outline:3px solid var(--exercise-blue); outline-offset:3px; }
.exercise-help-option.is-selected > .exercise-help-action { color:white; background:var(--exercise-blue); border-color:var(--exercise-blue); }
.exercise-help-option.is-selected > .exercise-help-action .exercise-help-action-icon,
.exercise-help-option.is-selected > .exercise-help-action .exercise-help-chevron { color:inherit; }
.exercise-help-option.is-selected > .exercise-help-action .exercise-help-chevron { transform:rotate(180deg); }
.exercise-help-content { margin-top:10px; }
.exercise-help-content .tutor-panel { padding:0; border:0; box-shadow:none; background:transparent; }
.exercise-help-content .tutor-panel > [hidden] { display:none !important; }
.exercise-help-content .tutor-heading { display:none; }
.exercise-help-content .gradual-hints { display:grid; gap:12px; padding:17px; background:var(--exercise-wash); border-radius:18px; }
.exercise-help-content .gradual-hints .notice { display:block; border:0; padding:0; margin:0; background:transparent; color:var(--exercise-navy); font-size:18px; line-height:1.75; }
.exercise-help-content .gradual-hints .notice strong { display:block; margin-bottom:7px; }
.exercise-help-content .gradual-hints > .btn { min-height:44px; border:1px solid #C6D8FC; border-radius:11px; color:var(--exercise-blue); background:white; }
.exercise-help-content .tutor-final-answer { margin:0; border:1px solid #D4E3FC; border-radius:17px; background:var(--exercise-wash); padding:16px; }
.exercise-help-content .tutor-final-answer > summary { display:none; }
.exercise-help-content .tutor-final-answer-text { margin:0; color:var(--exercise-navy); font-size:19px; line-height:1.85; overflow-wrap:anywhere; }
.exercise-help-close { display:block; width:100%; margin-top:16px; padding:10px; border:0; background:transparent; color:var(--exercise-blue); font:inherit; font-size:15px; cursor:pointer; }
.exercise-help-unavailable { padding:12px; font-size:15px; line-height:1.65; color:#637594; }
.exercise-solution-outlet { grid-area:detail; min-width:0; padding:28px; margin-top:12px; border:1px solid #DDE7F3; border-radius:23px; background:white; }
.exercise-solution-outlet .exercise-help-content { margin:0; }
.exercise-solution-outlet .tutor-solution > .h3 { color:var(--exercise-blue); font-size:30px; text-align:center; margin:0 0 24px; }
.exercise-solution-outlet .sol { width:100%; max-width:none; }
.exercise-solution-outlet .sol-step { border:1px solid #D4E3FC; border-radius:18px; overflow:hidden; }
.exercise-solution-outlet .sol-step-head { color:var(--exercise-navy); background:#F2F7FF; font-size:23px; }
.exercise-solution-outlet .sol-title { font-size:23px; font-weight:700; }
.exercise-solution-outlet .sol-what { font-size:19px; line-height:1.7; }
.exercise-solution-outlet .sol-slab { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:24px; background:#F8FAFF; border-radius:16px; padding:22px; }
.exercise-solution-outlet .sol-slab .mathblock { font-size:clamp(21px,2.2vw,32px); line-height:1.8; overflow-wrap:anywhere; }
.exercise-solution-outlet .learning-figure { max-width:100%; margin:0; }
.exercise-solution-outlet .learning-figure img,.exercise-solution-outlet .learning-figure svg { width:100%; max-height:520px; object-fit:contain; }
.exercise-solution-outlet .tutor-solution > .btn { margin-top:14px; min-height:48px; }
.pad-work-overlay:has(.drawing-pad-workbench) { padding:0; background:#F8FAFC; }
.pad-work-dialog.drawing-pad-workbench { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border:0; border-radius:0; box-shadow:none; background:#F8FAFC; }
.pad-work-dialog.drawing-pad-workbench .pad-work-header { background:white; border-color:#DDE7F3; }
.pad-work-dialog.drawing-pad-workbench .pad-question-pane { background:white; border-radius:20px; }
.pad-work-dialog.drawing-pad-workbench .exercise-source-reading { max-height:none; overflow:visible; }
.pad-work-dialog.drawing-pad-workbench .exercise-question { border:0; box-shadow:none; }
@media (max-width:1100px) and (min-width:800px) {
 .exercise-question-first,.exercise-question-first.exercise-workbench { grid-template-columns:minmax(0,1fr) 250px; gap:16px; }
 .exercise-question-first .exercise-groto .groto-fig { width:250px; height:270px; }
 .exercise-help-action { padding:13px; font-size:17px; }
}
@media (max-width:799px) {
 .exercise-question-first,.exercise-question-first.exercise-workbench,.exercise-question-first.exercise-workbench:has(> .exam-toolstrip) { grid-template-columns:minmax(0,1fr); grid-template-areas:'question' 'scratch' 'solution' 'detail'; gap:16px; }
 .exercise-page .exercise-context { margin-bottom:20px; }
 .exercise-page .exam-focus-head .exercise-welcome-title { font-size:clamp(32px,7.5vw,48px); }
 .exercise-question-first .exercise-question-heading h2 { font-size:25px; }
 .exercise-question-meta { font-size:14px; }
 .exercise-question-first .qcard,.exercise-question-first .exam-question { padding:18px 16px; border-radius:19px; }
 .exercise-question-first .answer-check-panel { grid-template-columns:minmax(0,1fr); padding:17px 14px; }
 .exercise-question-first .answer-check-fields,.exercise-question-first .answer-check-panel > .btn,.exercise-question-first .answer-check-part { grid-column:1; grid-row:auto; width:100%; }
 .exercise-question-first .answer-check-panel > h3 { font-size:22px; }
 .exercise-question-first .answer-check-panel > .btn { margin:0; min-height:54px; }
 .exercise-question-first .exercise-scratch-entry { font-size:21px; min-height:56px; }
 .exercise-question-first .exercise-groto { flex-direction:row-reverse; justify-content:center; gap:14px; padding:10px 0 16px; transform:translateY(0); }
 .exercise-question-first .exercise-groto .groto-fig { width:min(44vw,230px); height:min(44vw,230px); flex-basis:auto; }
 .exercise-question-first .exercise-groto-invitation { max-width:48%; font-size:clamp(17px,4.5vw,25px); padding:16px; }
 .exercise-question-first .is-help-open .exercise-groto .groto-fig { width:min(38vw,190px); height:min(38vw,190px); }
 .exercise-help-action { min-height:64px; font-size:19px; }
 .exercise-help-content .gradual-hints .notice { font-size:18px; }
 .exercise-solution-outlet { padding:18px 12px; border-radius:19px; }
 .exercise-solution-outlet .tutor-solution > .h3 { font-size:26px; }
 .exercise-solution-outlet .sol-slab { grid-template-columns:minmax(0,1fr); padding:14px; gap:16px; }
 .exercise-solution-outlet .sol-slab .mathblock { font-size:22px; }
 .exercise-question-first .exercise-sections { display:none; }
 body[data-focus] .page.exercise-page,.page.exercise-page { padding-bottom:36px; }
 .exercise-page .exercise-masthead .brand .word { font-size:32px; }
 .exercise-page .exercise-masthead > .btn { font-size:14px; }
}
@media (prefers-reduced-motion:reduce) {
 .exercise-question-first .exercise-groto,.exercise-question-first .exercise-groto .groto-fig { transition:none; transform:none; }
}
.exercise-question-first .answer-check-fields[data-answer-kind='tuple']::before { content:'('; align-self:center; font-size:32px; color:var(--exercise-navy); }
.exercise-question-first .answer-check-fields[data-answer-kind='tuple']::after { content:')'; align-self:center; font-size:32px; color:var(--exercise-navy); }
.exercise-question-first .answer-check-fields[data-answer-kind='tuple'] .field + .field { position:relative; }
.exercise-question-first .answer-check-fields[data-answer-kind='tuple'] .field + .field::before { content:','; position:absolute; left:-10px; bottom:8px; font-size:25px; }
.exercise-question-first .answer-check-fields .label { direction:rtl; text-align:start; }
.exercise-question-first .answer-check-fields[data-answer-kind='tuple'] .label { direction:ltr; text-align:center; }
.exercise-solution-outlet .teaching-panel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; padding:20px; background:#F8FAFF; border-radius:16px; }
.exercise-solution-outlet .teaching-section { min-width:0; padding:16px; border:1px solid #DFE9F9; border-radius:14px; background:white; }
.exercise-solution-outlet .teaching-label { color:var(--exercise-blue); font-size:18px; }
.exercise-solution-outlet .teaching-panel .mathblock { font-size:24px; line-height:1.8; }
.exercise-solution-outlet .teaching-panel > .learning-figure { grid-column:1/-1; justify-self:center; width:min(100%,660px); }
.exercise-solution-outlet .teaching-caveat { grid-column:1/-1; margin:0; }
@media(max-width:799px){.exercise-solution-outlet .teaching-panel { grid-template-columns:minmax(0,1fr); padding:10px; gap:12px; }.exercise-solution-outlet .teaching-panel .mathblock { font-size:21px; }}
/* Formula and reason share a reusable, data-bound presentation. */
.equation-reason { min-width:0; }
.equation-reason-row { display:flex; align-items:center; gap:14px; }
.equation-reason-row > .mathblock { flex:1 1 auto; min-width:0; margin:0; overflow-x:auto; }
.equation-why-button { flex:0 0 auto; min-width:64px; min-height:44px; padding:10px 14px; border:1px solid #BFD2FA; border-radius:12px; color:#2A5BE0; background:#E9F1FE; font:inherit; font-weight:700; cursor:pointer; }
.equation-why-button[aria-expanded='true'] { color:white; background:#2A5BE0; }
.equation-why-button:disabled { opacity:.5; cursor:not-allowed; }
.equation-why-button:focus-visible { outline:3px solid #2A5BE0; outline-offset:3px; }
.equation-reason-body { margin-top:14px; padding:18px; border:1px solid #D4E2FA; border-radius:14px; background:#F5F8FF; color:#142B42; font-size:17px; line-height:1.75; direction:rtl; }
.equation-reason-body[hidden] { display:none; }
.equation-reason-body h4 { font-size:17px; margin:0 0 6px; color:#2A5BE0; }
.equation-reason-body p { margin:0 0 14px; }
.equation-reason-body section:last-child p:last-child { margin:0; }
.learning-demo { width:100%; margin-top:16px; border:1px solid #D4E2FA; border-radius:14px; background:#F5F8FF; padding:12px 16px; }
.learning-demo > summary { min-height:44px; cursor:pointer; font-weight:700; color:#2A5BE0; }
.learning-demo-slider { display:block; width:100%; min-height:44px; accent-color:#2A5BE0; }
.learning-demo-value { display:block; padding:12px; font-size:22px; text-align:center; color:#142B42; }
@media(max-width:520px){.equation-reason-row { gap:8px; }.equation-why-button { min-width:56px; padding:10px; }.equation-reason-body { padding:14px; font-size:16px; }}
/* Existing source-diagram enlargement keeps its readable intrinsic width. */
.exercise-solution-outlet .learning-figure.is-enlarged img { max-height:none; max-width:none; object-fit:contain; }


/* General-rule prose keeps its natural Hebrew direction and font. */
.equation-reason-row > .teaching-statement { flex:1 1 auto; min-width:0; margin:0; font-family:inherit; unicode-bidi:plaintext; white-space:pre-wrap; overflow-wrap:anywhere; }


/* Source and resource actions retain the shared minimum touch target. */
.exercise-question-first .exercise-question-heading .btn { min-height:44px; }
.exercise-question-first .exercise-resources > * { min-height:44px; }
.exercise-help-close { min-height:44px; }

/* === practice fixes === */
/* Owner: practice-ui. Copy this file VERBATIM into the end of app.css under the
   marker above. Screens: question (#/session), results, progress, empty subject.
   spec.md §1, §4, §5, §7. Tokens only; no new colours. */

/* ---- §1 question screen ------------------------------------------------- */
/* Head: topic title, the counter, and (not on the last question) a quiet link on. */
.exercise-page .sessionstage-head .q-count { display: inline-flex; align-items: center; gap: 12px; }
.q-next { font-size: .875rem; }

/* The answer block is a column that hugs the inline-start (right) edge. */
.exercise-answer .answerblock { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.exercise-answer .answer-label { margin: 0; display: block; }
.ans-field { width: min(100%, 300px); }
.exercise-answer .answer-hint { margin: 2px 0 0; font-size: .875rem; color: var(--ink-3); }

/* A field with its unit inside it, at the inline-end (left in RTL): the unit is
   shown once, attached to the number it describes (N11). */
.input-affix {
  display: flex; align-items: stretch; width: 100%; min-height: 52px;
  background: var(--surface); border: 1px solid var(--control-line); border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input-affix:hover { border-color: var(--ink-3); }
.input-affix:focus-within { border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(var(--cobalt-rgb), .16); }
.input-affix > .input {
  flex: 1 1 auto; min-width: 0; border: 0; box-shadow: none; background: transparent;
  font-size: 1.1875rem; font-weight: 700; text-align: center; letter-spacing: .01em;
}
.input-affix > .input:focus { box-shadow: none; }
.input-unit {
  flex: 0 0 auto; display: grid; place-items: center; padding: 0 16px;
  border-inline-start: 1px solid var(--line); background: var(--surface-2);
  border-start-end-radius: calc(var(--r-md) - 1px); border-end-end-radius: calc(var(--r-md) - 1px);
  color: var(--ink-2); font-size: .9375rem; font-weight: 700;
}
/* A maths label ("x =", "a₁₀ =") sits before the box in LTR order. */
.ans-math { display: flex; align-items: center; gap: 10px; direction: ltr; unicode-bidi: isolate; width: min(100%, 340px); }
.ans-math > .math { font-size: 1.3rem; color: var(--ink); white-space: nowrap; }
.ans-math > .input-affix { flex: 1 1 auto; }

/* Invalid / wrong field: the edge says it, the text below explains it. */
.input-affix:has(> .input[aria-invalid="true"]) { border-color: var(--alert); box-shadow: 0 0 0 3px rgba(165,39,28,.10); }
.input-affix.is-right { border-color: var(--good); }

/* Pair answer (N4): RTL. "ערך ראשון" on the right, labels ABOVE their boxes,
   no floating comma. Two columns on every width (≥150px each at 390). */
.pairgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; width: min(100%, 460px); margin: 0; padding: 0; border: 0; }
.pairgrid > legend { float: inline-start; width: 100%; grid-column: 1 / -1; padding: 0; margin: 0 0 2px; } /* a floated legend is laid out as a grid item */
.pairgrid .pairslot { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pairgrid .pairslot > label { font-size: .875rem; font-weight: 700; color: var(--ink-2); }
.pair-order { margin: 0; font-size: .875rem; color: var(--ink-3); }

/* Unparseable text: an inline note under the field, not a verdict (N14). */
.answer-error.q-unreadable {
  display: flex; gap: 8px; align-items: flex-start; margin: 2px 0 0; padding: 0;
  background: none; border: 0; color: var(--alert); font-size: .9375rem; font-weight: 700; line-height: 1.5;
}
.answer-error.q-unreadable svg { flex: 0 0 auto; margin-top: 2px; }
.answer-error.q-unreadable .m { color: var(--ink); }

/* The verdict: one row, badge + one sentence. No second button inside it. */
.exercise-answer .qfeedback { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 20px 0 0; padding: 12px 16px; }
.exercise-answer .qfeedback p { margin: 0; flex: 1 1 260px; font-size: .9375rem; color: var(--ink); line-height: 1.55; }

/* ONE primary action, with the paper option as a quiet tertiary next to it. */
.q-actions { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.q-primary { min-width: 220px; }
.q-primary[aria-disabled="true"] { opacity: .82; box-shadow: none; cursor: pointer; }
.q-primary .arrow { display: inline-flex; }
.q-paper { --btn-bg: transparent; --btn-line: transparent; color: var(--ink-2); font-weight: 400; }
.q-paper:hover { color: var(--ink); }

/* Side column: the ONE Groto (help) and, under him, the draft as a secondary. */
.exercise-workspace.exercise-question-first .practice-help.q-side { display: flex; flex-direction: column; align-items: center; gap: 18px; grid-area: solution; align-self: start; }
/* Draft closed: two areas only, so no empty "scratch"/"detail" rows stretch the
   grid. Draft open (.is-drafting): the pad takes the side column above Groto. */
.exercise-workspace:has(> .q-side) { grid-template-areas: "question solution"; grid-template-rows: auto; }
.exercise-workspace.is-drafting:has(> .q-side) { grid-template-areas: "question scratch" "question solution"; grid-template-rows: max-content 1fr; }
.q-scratch { min-width: 200px; gap: 8px; }
.q-save { margin: 18px 0 0; color: var(--good); }
.q-bar { display: none; }

@media (max-width: 600px) {
  .exercise-workspace:has(> .q-side) { grid-template-areas: "question"; }
  /* the fixed bottom bar must never cover the last line of the page */
  body[data-focus] .page.exercise-page, .page.exercise-page { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .exercise-page .sessionstage-head { gap: 4px 12px; }
  .exercise-page .sessionstage-head .q-count { width: 100%; justify-content: space-between; }
  .ans-field, .ans-math { width: 100%; }
  .q-actions { flex-direction: column; align-items: stretch; gap: 6px; }
  .q-primary { width: 100%; min-width: 0; }
  .q-paper { align-self: center; }
  /* app.css:3694 (.exercise-question-first .practice-help.exercise-solution{display:block})
     beats the phone rule at 3318, which is why v77 shows a second Groto at the
     bottom of the phone page. This selector out-ranks 3694. */
  .exercise-workspace.exercise-question-first .practice-help.q-side { display: none; }
  /* The bottom bar (existing .exercise-sections rules) carries draft + Groto. */
  .q-bar { display: flex; }
  .q-bar > button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; }
  /* Keyboard focus scrolls to clear the fixed bar, never under it (WCAG 2.4.11). */
  html:has(.exercise-question-first > .q-bar) { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .q-save { justify-content: center; width: 100%; }
}

/* ---- §4 results ----------------------------------------------------------- */
/* Summary: a count, never a score. Groto sits beside the line he speaks. */
.rsum {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 32px;
  padding: clamp(20px, 3vw, 32px); border-radius: var(--r-xl); margin-bottom: 24px;
}
.rsum-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.rsum h1 { margin: 0; font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.6rem); }
.rsum-line { margin: 8px 0 0; font-size: 1.125rem; color: var(--ink); }
.rsum-line b { font-weight: 700; }
.rsum-groto { display: flex; align-items: center; gap: 4px; }
.rsum-groto .groto-fig { width: clamp(96px, 10vw, 140px); height: auto; }
.rsum-groto .groto-speech { max-width: 230px; font-size: .9375rem; line-height: 1.5; margin: 0; }

.rgrid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.rsteps-wrap h2 { font-size: 1rem; margin: 0 0 10px; color: var(--ink-2); }
.rsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rstep {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; min-height: 56px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md);
  font: inherit; color: var(--ink); text-align: start; cursor: pointer;
}
@media (hover: hover) { .rstep:hover { border-color: var(--ink-3); background: var(--surface-2); } }
.rstep[aria-current="true"] { border-color: var(--cobalt); background: var(--cobalt-tint); box-shadow: inset 0 0 0 1px var(--cobalt); }
.rstep .n { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .875rem; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--ink-2); }
.rstep[aria-current="true"] .n { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.rstep .t { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rstep .badge { flex: 0 0 auto; }

.rpanel { padding: clamp(18px, 2.4vw, 28px); }
.rpanel .tiny { margin: 0 0 6px; }
.rpanel .rq { margin: 0 0 14px; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.6; }
.ryour { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); margin-bottom: 20px; }
.ryour .tiny { margin: 0; font-size: .9375rem; color: var(--ink-2); }
.ryour b { color: var(--ink); }
.ryour .attempts { display: inline-flex; align-items: center; gap: 6px; }
.ryour .attempts svg { color: var(--ink-3); }
.rpanel h3 { font-size: 1.125rem; margin: 0 0 10px; }
.rpanel .sol-what { margin: 6px 0 0; }
.rpanel .results-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }

/* N6: what next — honest labels that do what they say. */
.rnext { margin-top: 24px; padding: 20px 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.rnext h2 { font-size: 1.125rem; margin: 0 0 12px; }
.rnext-row { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.rnext-note { margin: 10px 0 0; font-size: .875rem; color: var(--ink-3); }
.rfoot { margin-top: 16px; font-size: .875rem; color: var(--ink-3); }

@media (max-width: 960px) {
  .rgrid { grid-template-columns: minmax(0, 1fr); }
  .rsteps { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; }
  .rstep { flex-direction: column; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 4px; }
  .rstep .t { display: none; }
  .rstep .badge .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rstep .badge { padding: 2px 6px; }
}
@media (max-width: 600px) {
  .rsum { grid-template-columns: minmax(0, 1fr); }
  .rsum-groto { justify-self: start; }
  .rsum-groto .groto-fig { width: 88px; }
  .rnext-row .btn { width: 100%; }
  .rnext { padding: 16px; }
}

/* ---- §5 progress ------------------------------------------------------------
   Counts, never ratios. No band, slider, knob or meter. The featured topic is
   the one the student actually practised last (store: lastPractisedTopic). */
.prog-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding-block: 8px 20px; }
.prog-head .h1 { margin: 0; font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.6rem); }
.prog-head .lead { margin: 8px 0 0; font-size: 1.0625rem; }
.prog-head .groto-fig { width: clamp(96px, 10vw, 140px); height: auto; }

.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fact { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; display: flex; align-items: center; gap: 12px; }
.fact .icon-tile { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; }
.fact .icon-tile.t-good { background: var(--good-tint); color: var(--good); }
.fact .icon-tile.t-warn { background: var(--warn-tint); color: var(--warn); }
.fact .icon-tile.t-info { background: var(--cobalt-tint); color: var(--cobalt-800); }
.fact-n { display: block; font-size: 1.75rem; font-weight: 700; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.fact-l { display: block; font-size: .9375rem; color: var(--ink-2); margin-top: 4px; }

.pfeature {
  margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 24px;
  padding: 20px 24px; background: var(--cobalt-tint); border: 1px solid var(--cobalt-line); border-radius: var(--r-lg);
}
.pfeature .eyebrow { margin: 0; color: var(--cobalt-800); font-size: .8125rem; font-weight: 700; letter-spacing: 0; }
.pfeature h2 { margin: 2px 0 4px; font-size: 1.375rem; color: var(--heading-ink); }
.pfeature p { margin: 0; color: var(--ink-2); }
.pfeature-actions { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }

.ptopics { margin-top: 32px; }
.ptopics-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ptopics-head h2 { margin: 0; font-size: 1.25rem; }
.plist { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.plist li + li { border-top: 1px solid var(--line); }
.plist .plist-sep { padding: 8px 16px; background: var(--surface-2); font-size: .8125rem; font-weight: 700; color: var(--ink-3); }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px 16px; padding: 12px 16px; min-height: 64px; color: var(--ink); text-decoration: none; }
@media (hover: hover) { a.prow:hover { background: var(--surface-2); } }
.prow-name { display: block; font-weight: 700; }
.prow-note { display: block; font-size: .875rem; color: var(--ink-3); margin-top: 2px; }
.prow > svg { color: var(--ink-3); }
.prog-foot { margin-top: 16px; font-size: .875rem; color: var(--ink-3); }

@media (max-width: 860px) {
  .prog-head .groto-fig { width: 84px; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fact { padding: 12px 16px; }
  .fact-n { font-size: 1.5rem; }
  .pfeature { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .pfeature-actions .btn { width: 100%; }
  .pfeature-actions .golink { margin-inline: auto; }
  .prow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t c" "b c"; row-gap: 6px; }
  .prow > .grow { grid-area: t; } .prow > .badge { grid-area: b; justify-self: start; } .prow > svg { grid-area: c; }
}
/* Untouched topics: no badge (the heading already says it), two columns on desktop. */
.ptopics-sub { margin: 28px 0 12px; font-size: 1.0625rem; color: var(--heading-secondary); }
.plist-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plist-grid li + li { border-top: 0; }
.plist-grid li { border-bottom: 1px solid var(--line); }
.plist-grid li:nth-child(odd) { border-inline-end: 1px solid var(--line); }
.plist-grid .prow { grid-template-columns: minmax(0, 1fr) auto; min-height: 60px; }
@media (max-width: 860px) {
  .plist-grid { grid-template-columns: minmax(0, 1fr); }
  .plist-grid li:nth-child(odd) { border-inline-end: 0; }
  .plist-grid .prow { grid-template-areas: none; }
  .plist-grid .prow > .grow, .plist-grid .prow > svg { grid-area: auto; }
}

/* ---- §7 empty subject (N8) -------------------------------------------------- */
.emptysubj { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 24px 32px; padding: clamp(20px, 3vw, 36px); border-radius: var(--r-xl); margin-top: 8px; }
.emptysubj .groto-fig { width: clamp(120px, 14vw, 190px); height: auto; }
.emptysubj h2 { margin: 0 0 8px; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); color: var(--heading-ink); }
.emptysubj p { margin: 0; color: var(--ink-2); max-width: 52ch; }
.emptysubj-actions { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-top: 20px; }
.emptysubj-have { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: .875rem; color: var(--ink-3); }
.emptysubj-have .chip { text-decoration: none; }
@media (max-width: 600px) {
  .emptysubj { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .emptysubj .groto-fig { width: 104px; }
  .emptysubj-actions .btn { width: 100%; }
}

/* ---- practice-ui: implementation overrides (after the verbatim spec CSS) ----
   Selectors here only adapt the spec CSS to the live components; tokens only. */
/* G7: the masthead back link carries its chevron before the text. */
.exercise-masthead > .btn { gap: 4px; }
/* `golink` actions that are buttons (skip on, open the solution). */
button.golink { background: none; border: 0; padding: 4px 0; font: inherit; font-weight: 700; color: var(--cobalt-800); cursor: pointer; text-align: start; }
button.golink:hover { text-decoration: underline; text-underline-offset: 3px; }
.exercise-page .sessionstage-head .q-count .q-next { font-size: .875rem; min-height: 32px; }

/* The grid keeps the full-solution outlet ("detail") under both columns. */
.exercise-workspace.exercise-question-first:has(> .q-side) { grid-template-areas: "question solution" "detail detail"; grid-template-rows: auto auto; }
@media (max-width: 799px) {
  .exercise-workspace.exercise-question-first:has(> .q-side) { grid-template-areas: "question" "solution" "detail"; grid-template-columns: minmax(0, 1fr); }
}
/* Side column: help menu and content use the column's full width. */
.exercise-question-first .q-side > :not(.exercise-groto):not(.q-scratch) { align-self: stretch; width: 100%; }
.exercise-question-first .q-side > .q-scratch { min-height: 48px; padding-inline: 28px; font-weight: 700; color: var(--ink); }
.exercise-question-first .q-side > .q-scratch svg { color: var(--ink-2); }
.exercise-question-first .q-side.is-help-open > .q-scratch { margin-top: 4px; }

/* Keyboard focus rings the whole field (box + unit), as the states mockup draws it. */
.input-affix > .input:focus-visible { outline: none; }
.input-affix:has(> .input:focus-visible) { outline: 3px solid var(--cobalt); outline-offset: 2px; }

/* The answer block lives inside the question card. */
.exercise-answer .answerblock .answer-label { font-size: .875rem; font-weight: 700; color: var(--cobalt-800); }
.exercise-answer .pairgrid.is-ordered { width: min(100%, 460px); }
.ans-point { width: 100%; gap: 10px; }
.ans-point > .math { font-size: 1.15rem; }
.ans-point > .input-affix { flex: 1 1 0; min-width: 0; }
.exercise-answer .answerblock.is-choice { align-items: stretch; }
.exercise-answer .answerblock.is-open { align-items: stretch; }
.exercise-answer .answer-hint[hidden], .q-paper[hidden] { display: none; }
.exercise-answer .qfeedback .q-solution { flex: 0 0 auto; }
.exercise-answer .q-actions > .guided-action { display: block; }

/* 3b: the previous round was kept — one quiet line with its two actions. */
.round-saved-notice {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 16px; padding: 12px 16px;
  background: var(--cobalt-tint); border: 1px solid var(--cobalt-line); border-radius: var(--r-md); color: var(--ink);
}
.round-saved-icon { display: inline-flex; color: var(--cobalt-800); }
.round-saved-text { margin: 0; flex: 1 1 280px; font-size: .9375rem; line-height: 1.55; }
.round-saved-actions { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 600px) {
  /* Phone: help opens in place under the question (the bar is the only Groto
     until then), with a compact Groto row heading the menu. */
  .exercise-workspace.exercise-question-first .practice-help.q-side.is-help-open { display: flex; gap: 12px; }
  .exercise-question-first .q-side.is-help-open .exercise-groto { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0; transform: none; }
  .exercise-question-first .q-side.is-help-open .exercise-groto .groto-fig { width: 72px; height: 72px; }
  .exercise-question-first .q-side.is-help-open .exercise-groto-invitation { max-width: none; font-size: 1rem; padding: 10px 14px; }
  .exercise-question-first .q-side > .q-scratch { display: none; }
  .exercise-question-first > .exercise-sections.q-bar { display: flex; }
  .exercise-workspace.is-editing > .exercise-sections.q-bar { display: none; }
  .exercise-sections.q-bar > .q-bar-answer { display: none; }
  .round-saved-actions { width: 100%; }
}

/* ---- results / progress / empty subject: live-markup adaptations -------- */
.rgrid.is-single { grid-template-columns: minmax(0, 1fr); }
.rpanel-host, .rnext-host { min-width: 0; }
.ryour .tiny b { font-weight: 700; color: var(--ink); }
.ryour .attempts { flex-wrap: wrap; }
.rpanel .results-actions .btn { min-height: 48px; }
.rpanel .selfreport { margin-top: 20px; }
.rnext-row .golink { padding-inline: 4px; min-height: 44px; } /* a full 44px tap target (WCAG 2.5.5) */
.prog-stale { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 10px 14px; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-2); font-size: .9375rem; }
.prog-stale svg { flex: 0 0 auto; color: var(--ink-3); }
.ptopics-sub.is-first { margin-top: 0; }
.pfeature.is-empty { background: var(--surface); border-color: var(--line); }
.prow .badge svg, .rstep .badge svg { flex: 0 0 auto; }
.emptysubj-note { margin-top: 20px; }
.qtext-auto { display: block; }
/* A pair with one value missing: only the empty box carries the alert edge. */
.input-affix.is-filled:has(> .input[aria-invalid="true"]) { border-color: var(--control-line); box-shadow: none; }

/* ---- wave D1: paper mode, final-answer parts, mixed maths, glued prefixes ---- */
/* Paper mode (prefs.solveOn = notebook): no inputs, one dashed panel. */
.paperpanel { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-start; margin-top: 16px; padding: 16px; border-radius: var(--r-md); background: var(--surface-2); border: 1.5px dashed var(--line-strong); }
.paperpanel .paperpanel-icon { flex: 0 0 auto; background: var(--surface); border: 1px solid var(--line); color: var(--cobalt-800); }
.paperpanel .grow { flex: 1 1 200px; min-width: 0; }
.paperpanel b { display: block; font-weight: 700; color: var(--ink); }
.paperpanel span.small { display: block; margin-top: 2px; color: var(--ink-2); }
.paperpanel .paperpanel-type { flex-basis: 100%; justify-content: flex-start; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: .9375rem; font-weight: 700; color: var(--cobalt-800); cursor: pointer; text-align: start; }
.paperpanel .paperpanel-type:hover { text-decoration: underline; text-underline-offset: 3px; }
.paperdone { display: grid; gap: 12px; margin-top: 16px; justify-items: start; }
.paperdone .paperdone-note { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink-2); }
.paperdone .paperdone-note svg { flex: 0 0 auto; color: var(--cobalt); }
.paperdone .selfreport { width: 100%; }
/* A final answer with sub-parts: one line per part (א / ב / ג), maths isolated. */
.final-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.final-parts > li { display: flex; align-items: baseline; gap: .5em; margin: 0; }
.final-parts .final-part-label { flex: 0 0 auto; min-width: 2.2em; font-weight: 800; color: var(--cobalt-800); }
.final-parts .final-part-body { min-width: 0; overflow-wrap: anywhere; }
.final-parts > li.final-parts-lead { color: var(--ink-2); }
.ryour .ryour-final { display: grid; gap: 4px; flex-basis: 100%; }
/* Display maths that is really a Hebrew sentence: RTL, maths runs isolated LTR. */
.mathblock.math-mixed { direction: rtl; unicode-bidi: isolate; }
span.math.math-mixed { direction: rtl; white-space: normal; }
/* "ל-scarce": a Hebrew prefix never stays alone at a line end. */
.nobr { white-space: nowrap; }

/* ---- review v77 fixer: paper label, final-answer breaks, paper report ---- */
/* Paper mode's primary: the full label on wide screens, a short one on phones
   (the full one stays the button's aria-label). */
.q-primary .q-label-short { display: none; }
@media (max-width: 520px) {
  .q-primary .q-label-full { display: none; }
  .q-primary .q-label-short { display: inline; }
}
/* A final answer breaks only between tokens, never inside a number; a maths
   run too long for the line scrolls inside its own isolate. */
.final-parts .final-part-body,
.exercise-help-content .tutor-final-answer-text,
.tutor-final-answer-text { overflow-wrap: normal; word-break: normal; min-width: 0; }
.final-parts { grid-template-columns: minmax(0, 1fr); }
.final-parts > li { min-width: 0; }
.final-parts .final-part-body { flex: 1 1 auto; }
.final-parts .m, .tutor-final-answer-text .m { display: inline-block; max-width: calc(100% - 1ch); overflow-x: auto; overflow-y: hidden; vertical-align: bottom; scrollbar-width: thin; }
/* An isolate that scrolls shows a soft shadow at its cut end (scroll shadow:
   the "local" cover hides it once the end is reached or nothing overflows). */
.exercise-help-content .tutor-final-answer-text .m {
  background:
    linear-gradient(to right, transparent, var(--exercise-wash, #E9F1FE) 60%) 100% 0 / 22px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, rgba(20, 43, 66, .28), transparent) 100% 0 / 12px 100% no-repeat scroll;
}
.ryour .rpaper-report { display: block; margin-top: 4px; color: var(--ink-2); }
.ryour .rpaper-report b { color: var(--ink); }

/* === exams fixes === */
/* Owner: exams-ui. Source exam page (#/practice/exam, #/exam), exam topic cards
   (#/subject?stage=exam). docs/design-v77/spec.md §2-§3, from mockups/exams.css,
   adapted to the live markup (crops come from question-source-page.js).
   This block sits ABOVE the "Full-question initial fit" block on purpose:
   tests/question-source-fit.mjs requires that block to be the last one in app.css. */

/* ---- §2 source exam page ------------------------------------------------- */
.srchead { display: grid; gap: 4px; margin: 0 0 18px; }
.srchead .small, .srchead .exercise-question-meta { margin: 0; font-size: .9375rem; color: var(--ink-2); }
/* Plain text, not a badge: header badges are hidden on purpose (§ exercise-question-heading). */
.exercise-question-meta .exam-newest { color: var(--cobalt-800); font-weight: 700; white-space: nowrap; }
.srchead .src-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .3em; }
.srchead .src-title > h1, .srchead .src-title > h2 { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1.25; }
.srchead .src-title > h2 { order: -1; font-weight: 800; color: var(--heading-ink); }
.srchead .src-title > h1 { font-weight: 400; color: var(--heading-secondary); }
.srchead .src-title > h1::before { content: "· "; }
.srchead .src-title > h1:focus { outline: none; }
.student-source .exercise-masthead .btn-quiet { gap: 6px; }

.exam-question.src-card { padding: 20px 24px 0; overflow: hidden; }
.src-status { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.src-status svg { flex: 0 0 auto; margin-top: 2px; color: var(--cobalt); }

/* The toolbar above the scan: enlarge/fit toggle at the start, full screen at the end. */
.srcbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.srcbar .btn-sm { gap: 6px; white-space: nowrap; }
/* "כל השאלה / הגדלה": a segmented radiogroup (spec §2, mockups/exams.css). */
.srcbar .seg, .hm-section-pick .seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); }
.srcbar .seg button, .hm-section-pick .seg button {
  position: relative; white-space: nowrap; border: 0; background: transparent; font: inherit; font-size: .875rem; font-weight: 700;
  color: var(--ink-2); padding: 6px 14px; border-radius: var(--r-pill); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
}
.srcbar .seg button::after, .hm-section-pick .seg button::after { content: ""; position: absolute; inset: -4px 0; }  /* 44px hit area */
.srcbar .seg button[aria-checked="true"], .hm-section-pick .seg button[aria-checked="true"] { background: var(--surface); color: var(--cobalt-800); box-shadow: 0 0 0 1.5px var(--cobalt), var(--shadow-sm); }
.srcbar .seg button:focus-visible, .hm-section-pick .seg button:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }

/* The scan. One frame bleeds to the card edges and is the only scroller, so a
   whole page scrolls INSIDE it and the card never becomes a tall sheet. Fit mode
   = card width; read mode = a fixed reading scale of the source pixels. */
.src-card .srcframe {
  position: relative; margin-inline: -24px; background: #fff;
  border-block: 1px solid var(--line); overflow: auto; overscroll-behavior: contain;
  touch-action: pan-x pan-y pinch-zoom; direction: rtl;
  max-height: min(78vh, 720px);
}
.src-card .srcframe:focus-visible { outline: 3px solid var(--cobalt); outline-offset: -3px; }
.src-card .srcframe .exercise-source-reading { max-height: none; overflow: visible; padding: 14px 20px; border-radius: 0; }
.src-card .srcframe .exercise-source-reading .exam-pages { max-width: none; margin: 0; }
.src-card .srcframe .exam-page { margin: 0 0 14px; }
.src-card .srcframe .exam-page:last-child { margin-bottom: 0; }
.src-card .srcframe .exam-page .exam-page-viewport,
.src-card .srcframe .exam-page[data-source-presentation='full-page'] .exam-page-viewport { overflow: visible; border: 0; border-radius: 0; background: transparent; }
.src-card .srcframe .exam-question-region + .exam-question-region { margin-top: 10px; }
/* One visible page: the card already names it, and "העמוד בקובץ המקור" sits under the frame. */
.src-card .srcframe .exam-pages[data-visible-pages='1'] figcaption,
.src-card .srcframe .exam-pages[data-visible-pages='1'] .exam-question-original-links { display: none; }
.src-card .srcframe .exam-page figcaption { margin: 0 0 8px; font-weight: 700; color: var(--ink-2); }
/* The card-level status line replaces the per-page notes; only a failed crop check stays visible. */
.src-card .srcframe .exam-question-crop-status:not([data-state='fallback']) { display: none; }
.src-card .srcframe .exam-question-crop-status[data-state='fallback'] { margin: 0 0 8px; font-size: .875rem; color: var(--warn); }
.src-card .srcframe .exam-pages:not(.is-zoomed) .exam-question-crop,
.src-card .srcframe .exam-pages:not(.is-zoomed) .exam-page[data-source-presentation='full-page'] .exam-source-image { width: 100%; min-width: 0; max-width: 100%; }
.src-card .srcframe .exam-pages.is-zoomed .exam-question-crop { width: calc(var(--crop-w, 1100) * .8px); min-width: 0; max-width: none; }
.src-card .srcframe .exam-pages.is-zoomed .exam-page[data-source-presentation='full-page'] .exam-source-image { width: calc(var(--src-w, 1100) * .8px); min-width: 0; max-width: none; }

.src-hint { display: none; align-items: center; gap: 6px; margin: 8px 0 0; font-size: .8125rem; color: var(--ink-3); }
.src-hint svg { flex: 0 0 auto; }
.src-card > .small[role="status"]:not(:empty) { margin: 8px 0 0; }

/* Full screen: the toolbar stays on top and the frame takes the rest. */
.src-viewer:fullscreen { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--surface); }
.src-viewer:fullscreen .srcframe { flex: 1 1 auto; margin-inline: 0; max-height: none; border: 1px solid var(--line); }

.src-card .src-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; padding: 2px 0 0; }
.src-card .src-links > * { min-height: 44px; }
.src-links .golink, .src-links .linkish { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: .9375rem; font-weight: 700; color: var(--cobalt-800); text-decoration: none; cursor: pointer; }
.src-links .golink:hover, .src-links .linkish:hover { text-decoration: underline; text-underline-offset: 3px; }
.src-links svg { flex: 0 0 auto; }

/* Checking a part is SECONDARY here (tinted); finishing is the page's primary. */
.src-card .answer-check-panel { margin-top: 14px; }
.src-card .answer-check-panel > h3 { font-size: 1.125rem; }
.src-card .answer-check-panel > .btn-primary { --btn-bg: var(--cobalt-tint); --btn-line: var(--cobalt-line); --btn-fg: var(--cobalt-800); background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-line); box-shadow: none; }
.src-card .answer-check-panel > .btn-primary:hover:not(:disabled) { background: #DCE7FD; }

/* The finish bar: the page's ONE primary action, at the foot of the card. */
.src-card .src-done {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
  margin: 20px -24px 0; padding: 16px 24px; background: var(--track-exam-tint); border-top: 1px solid var(--track-exam-line);
}
.src-done > p { margin: 0; font-size: .9375rem; color: var(--ink-2); }
.src-done > p b { color: var(--ink); }
.src-done > p:empty { display: none; }
.src-done > p.small { flex-basis: 100%; }
.src-done .guided-action { display: block; }
.src-done .action-cue { display: none; }
.src-done .exam-primary-buttons > .btn { min-width: 250px; }
.src-done .exam-primary-buttons > .btn[hidden] { display: none; }
.src-done .btn .arrow { display: inline-flex; }
.src-done .exam-primary-buttons > .btn.is-done { justify-content: flex-start; opacity: 1; background: transparent; border-color: transparent; box-shadow: none; color: var(--good); min-width: 0; padding-inline: 0; }
.src-done .exam-primary-buttons > .btn.is-done .arrow { display: none; }

.src-below { display: grid; gap: 12px; margin-top: 18px; justify-items: start; }
.learning-page .insights-in-context { margin: 12px 0 0; padding: 0; border: 0; background: none; box-shadow: none; }
.src-below .insights-in-context { margin: 0; }
.src-below .learning-save-status { margin: 0; }

/* Draft work mode borrows the question card: no bleed inside the narrow pane. */
.pad-question-pane .src-card .srcframe { margin-inline: 0; max-height: none; }
.pad-question-pane .src-card .src-done { margin-inline: 0; }

@media (max-width: 600px) {
  .exam-question.src-card { padding: 16px 13px 0; }
  .src-card .srcframe { margin-inline: -13px; max-height: min(62vh, 480px); }
  .src-card .srcframe .exercise-source-reading { padding: 10px 12px; }
  /* Phone opens at READING size: 0.42 x source px, scan body text ~14px. The
     frame scrolls both ways and starts at the right, where Hebrew lines begin. */
  .src-card .srcframe .exam-pages.is-zoomed .exam-question-crop { width: calc(var(--crop-w, 1100) * .42px); }
  .src-card .srcframe .exam-pages.is-zoomed .exam-page[data-source-presentation='full-page'] .exam-source-image { width: calc(var(--src-w, 1100) * .42px); }
  .srcframe[data-zoom="read"] + .src-hint { display: flex; }
  .srcbar .seg button, .hm-section-pick .seg button { padding: 6px 12px; }
  .srcbar .src-full span:not(.src-full-glyph) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .src-card .src-done { margin-inline: -13px; padding: 14px 13px; }
  .src-done .guided-action, .src-done .exam-primary-buttons, .src-done .exam-primary-buttons > .btn { width: 100%; min-width: 0; }
}

/* ---- §3 exam topic cards -------------------------------------------------- */
.learning-heading .src-kicker { margin: 0 0 4px; font-size: .9375rem; font-weight: 700; color: var(--cobalt-800); }
.student-topic .src-avail { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 700; }
.student-topic .src-avail.is-ready { color: var(--good); }
.student-topic .src-avail.is-soon { color: var(--neutral); flex-wrap: wrap; }
.student-topic .src-avail.is-checking { color: var(--ink-3); font-weight: 400; }
.student-topic-go { display: inline-flex; align-items: center; gap: 6px; }
.student-topic.is-soon { background: var(--surface-2); border-style: dashed; border-color: var(--line-strong); box-shadow: none; cursor: default; }
.student-topic.is-soon .topic-art { filter: grayscale(.85); opacity: .55; }
.student-topic.is-soon h2 { color: var(--ink-2); }
.student-topic.is-soon:hover { transform: none; box-shadow: none; }
.student-topic .soon-alt { font-size: .875rem; font-weight: 700; color: var(--cobalt-800); text-decoration: underline; text-underline-offset: 3px; }
.student-topic-foot { margin: 18px 0 0; }
.src-insights { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; box-shadow: none; font: inherit; font-size: .9375rem; font-weight: 700; color: var(--cobalt-800); cursor: pointer; }
.src-insights:hover { text-decoration: underline; text-underline-offset: 3px; }
.src-insights[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }

/* ---- picker: "לא יודעים מה מספר השאלון?" (32/N15, markup in onboarding.js) ---- */
.shealon-help { margin: 14px 0 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.shealon-help > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; font-weight: 700; color: var(--cobalt-800); cursor: pointer; list-style: none; }
.shealon-help > summary::-webkit-details-marker { display: none; }
.shealon-help > summary::after { content: ""; margin-inline-start: auto; width: 7px; height: 7px; margin-block-end: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.shealon-help[open] > summary::after { margin-block: 4px 0; transform: rotate(-135deg); }
.shealon-help > summary:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; border-radius: 12px; }
.shealon-help-list { margin: 0; padding: 0 14px 14px; padding-inline-start: 36px; color: var(--ink-2); }
.shealon-help-list li { margin: 0; list-style: disc; }
@media (prefers-reduced-motion: reduce) { .shealon-help > summary::after { transition: none; } }

/* ---- Question page: one balanced screen (21.10) --------------------------
   The whole question fits the first screen: a slim header, the question card
   and, beside it, a side card of the same look (Groto + draft). Both cards
   start on one line and share one height. Markup: .q-layout is added by
   exercise-workspace.js; the source scan is fitted by question-source-fit.js
   (data-source-fit="height", never narrower than a readable width). */
body .exercise-page:has(.q-layout) .wrap { width: 100%; max-width: 1264px; margin-inline: auto; padding-inline: 32px; box-sizing: border-box; }
.exercise-page:has(.q-layout) .exercise-masthead { height: 60px; margin-bottom: 0; }
.exercise-page:has(.q-layout) .exercise-masthead .brand .word { font-size: 32px; }
.exercise-page:has(.q-layout) .exercise-masthead > .btn { font-size: 15px; min-height: 40px; }

/* Heading: question number and topic on one line, the exam line above it, small. */
.student-source .srchead.exercise-question-heading { gap: 2px; margin: 0 0 12px; padding: 0; border: 0; min-height: 0; }
.student-source .srchead .exercise-question-meta { font-size: .875rem; }
.student-source .srchead .src-title > h1, .student-source .srchead .src-title > h2 { font-size: 1.5rem; }
.exercise-page:has(.q-layout) .sessionstage-head { margin-bottom: 12px; }
.exercise-page:has(.q-layout) .sessionstage-body { margin-top: 0; }

/* The two cards. */
.exercise-workspace.q-layout.exercise-question-first:has(> .q-side) { gap: 16px 24px; align-items: stretch; }
@media (min-width: 900px) {
  .exercise-workspace.q-layout.exercise-question-first:has(> .q-side) { grid-template-columns: minmax(0, 1fr) 320px; }
  /* As tall as the question card, never taller than the screen; it stays in
     view while a long question scrolls. */
  .exercise-workspace.q-layout.exercise-question-first .practice-help.q-side { position: sticky; top: 16px; min-height: min(100%, calc(100dvh - 32px)); }
}
.exercise-workspace.q-layout.exercise-question-first .practice-help.q-side {
  align-self: start; justify-content: center; gap: 16px;
  padding: 22px 18px; background: var(--surface, #fff); border: 1px solid #e3e9f1; border-radius: 18px;
}
.exercise-workspace.q-layout.exercise-question-first .practice-help.q-side.is-help-open { justify-content: flex-start; }
/* Groto: one clear invitation over a smaller figure, no drift animation. */
.q-layout.exercise-question-first .q-side .exercise-groto { gap: 10px; padding: 0; transform: none; min-height: 0; }
.q-layout.exercise-question-first .q-side .exercise-groto .groto-fig { width: 224px; height: 224px; transition: transform .2s ease; }
.q-layout.exercise-question-first .q-side .exercise-groto:hover .groto-fig { transform: translateY(-4px) scale(1.03); }
.exercise-groto-cta { display: none; }
.q-layout.exercise-question-first .q-side:not(.is-help-open) .exercise-groto-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 10px 18px;
  /* Tinted, not solid: the page keeps one solid primary (finish / check). */
  border-radius: var(--r-pill, 999px); background: var(--cobalt-tint); border: 1.5px solid var(--cobalt-line); color: var(--cobalt-800);
  font-size: 1rem; font-weight: 800; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.q-layout.exercise-question-first .q-side .exercise-groto:hover .exercise-groto-cta { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.q-layout.exercise-question-first .q-side .exercise-groto:focus-visible { outline: none; }
.q-layout.exercise-question-first .q-side .exercise-groto:focus-visible .exercise-groto-cta { outline: 3px solid var(--cobalt); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .q-layout.exercise-question-first .q-side .exercise-groto .groto-fig { transition: none; } .q-layout.exercise-question-first .q-side .exercise-groto:hover .groto-fig { transform: none; } }
.q-layout.exercise-question-first .q-side .exercise-groto-invitation {
  position: relative; padding: 10px 16px; border-radius: 16px; font-size: 1rem; line-height: 1.4; font-weight: 750;
}
.q-layout.exercise-question-first .q-side .exercise-groto-invitation::after {
  content: ""; display: block; position: absolute; inset-block-end: -7px; inset-inline-start: calc(50% - 7px);
  width: 12px; height: 12px; background: inherit; border: inherit; border-block-start: 0; border-inline-start: 0;
  transform: rotate(45deg);
}
.q-layout.exercise-question-first .q-side .exercise-groto:hover .exercise-groto-invitation { border-color: var(--cobalt); }
.q-layout.exercise-question-first .q-side.is-help-open .exercise-groto { flex-direction: row; justify-content: center; gap: 10px; }
.q-layout.exercise-question-first .q-side.is-help-open .exercise-groto .groto-fig { width: 84px; height: 84px; }
.q-layout.exercise-question-first .q-side.is-help-open .exercise-groto-invitation::after { display: none; }
/* Draft: a full-width tile under Groto that says what it is for. */
.q-layout.exercise-question-first .q-side > .q-scratch {
  width: 100%; min-width: 0; min-height: 64px; justify-content: flex-start; gap: 12px; padding: 10px 14px;
  border: 1.5px solid var(--cobalt-line); border-radius: 14px; background: var(--surface, #fff);
  text-align: start; white-space: normal; box-shadow: none;
}
.q-layout.exercise-question-first .q-side > .q-scratch:hover { border-color: var(--cobalt); background: var(--cobalt-tint); }
.q-layout .q-scratch-icon { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; background: var(--cobalt-tint); color: var(--cobalt-800); }
.q-layout .q-scratch-text { display: grid; gap: 2px; min-width: 0; }
.q-layout .q-scratch-label { font-size: 1rem; font-weight: 800; color: var(--ink); }
.q-layout .q-scratch-sub { font-size: .8125rem; font-weight: 400; color: var(--ink-3); line-height: 1.35; }
/* "גרוטו בודק את המחברת" entry tile (Pro page check), same look as the draft tile. */
.q-layout.exercise-question-first .q-side > .q-photo {
  width: 100%; min-width: 0; min-height: 64px; justify-content: flex-start; gap: 12px; padding: 10px 14px;
  border: 1.5px solid var(--cobalt-line); border-radius: 14px; background: var(--surface);
  text-align: start; white-space: normal; box-shadow: none;
}
.q-layout.exercise-question-first .q-side > .q-photo[hidden] { display: none; }
.q-layout.exercise-question-first .q-side > .q-photo:hover { border-color: var(--cobalt); background: var(--cobalt-tint); }
.q-layout .q-photo .q-scratch-icon { background: var(--cobalt); color: #fff; }
.src-done .pc-nudge { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-basis: 100%; margin: 0; font-size: .9375rem; color: var(--ink); }
.src-done .pc-nudge .linkish { font-weight: 700; }
.src-done .pc-nudge-x { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-3); cursor: pointer; }
/* Between phone and desktop the side card sits under the question, in a row. */
@media (min-width: 601px) and (max-width: 899px) {
  .exercise-workspace.q-layout.exercise-question-first .practice-help.q-side:not(.is-help-open) { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .q-layout.exercise-question-first .q-side:not(.is-help-open) .exercise-groto { flex-direction: row; width: auto; }
  .q-layout.exercise-question-first .q-side:not(.is-help-open) .exercise-groto .groto-fig { width: 130px; height: 130px; }
  .q-layout.exercise-question-first .q-side:not(.is-help-open) .exercise-groto-cta { width: auto; }
  .q-layout.exercise-question-first .q-side:not(.is-help-open) .exercise-groto-invitation::after { display: none; }
  .q-layout.exercise-question-first .q-side:not(.is-help-open) > .q-scratch { width: auto; flex: 0 1 300px; }
}

/* Source exam card: tighter chrome around the scan. */
.q-layout .exam-question.src-card { padding: 14px 20px 0; }
.q-layout .src-card .src-status { margin: 0 0 6px; font-size: .875rem; }
.q-layout .src-card .srcbar { flex-wrap: wrap; justify-content: flex-start; gap: 6px 16px; margin: 0 0 8px; }
.q-layout .src-card .srcbar .src-links { margin-inline-start: auto; gap: 0 16px; padding: 0; }
.q-layout .src-card .srcbar .src-links > * { min-height: 40px; font-size: .875rem; }
.q-layout .src-card .srcframe { margin-inline: -20px; }
.q-layout .src-card .srcframe .exercise-source-reading { padding: 10px 16px; }
@media (min-width: 601px) {
  /* The fitted scan never needs a scroller of its own; a tall one scrolls with the page. */
  .q-layout .src-card .srcframe[data-zoom="fit"] { max-height: none; }
}
/* Fit mode: the scan takes the fitted width (see question-source-fit.js), centred. */
.q-layout .src-card .srcframe .exam-pages:not(.is-zoomed) .exam-question-crop,
.q-layout .src-card .srcframe .exam-pages:not(.is-zoomed) .exam-page[data-source-presentation='full-page'] .exam-source-image {
  width: min(100%, var(--source-fit-width, 100%)); margin-inline: auto;
}
/* Chapter instructions of the exam: closed by default, one tap away. */
.exam-shared-instructions > details > summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin: 0; cursor: pointer; list-style: none;
  font-size: .875rem; font-weight: 700; color: var(--cobalt-800);
}
.exam-shared-instructions > details > summary::-webkit-details-marker { display: none; }
.exam-shared-instructions > details > summary::before {
  content: ""; width: 7px; height: 7px; margin-block-end: 3px; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s;
}
.exam-shared-instructions > details[open] > summary { margin-bottom: 6px; }
.exam-shared-instructions > details[open] > summary::before { margin-block: 3px 0; transform: rotate(-135deg); }
.exam-shared-instructions > details > summary:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .exam-shared-instructions > details > summary::before { transition: none; } }

/* Checking a part: field and button on one row. */
.q-layout .src-card .answer-check-panel { margin-top: 10px; padding: 14px 16px; gap: 8px 12px; }
.q-layout .src-card .answer-check-panel > h3 { margin: 0; font-size: 1rem; }
.q-layout .src-card .answer-check-panel .textarea { min-height: 48px; height: 48px; resize: vertical; }
@media (min-width: 601px) {
  .q-layout .src-card .answer-check-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .q-layout .src-card .answer-check-panel > * { grid-column: 1 / -1; }
  .q-layout .src-card .answer-check-panel > h3 { grid-column: 1; grid-row: 1; align-self: center; }
  .q-layout .src-card .answer-check-panel > .answer-check-part { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 8px; margin: 0; }
  .q-layout .src-card .answer-check-panel > .answer-check-part .input { min-height: 40px; }
  .q-layout .src-card .answer-check-panel > .answer-check-part .label { margin: 0; }
  .q-layout .src-card .answer-check-panel > .answer-check-fields { grid-column: 1; grid-row: 2; }
  .q-layout .src-card .answer-check-panel > .btn { grid-column: 2; grid-row: 2; min-width: 170px; min-height: 48px; }
  .q-layout .src-card .answer-check-panel > .answer-check-help { grid-row: 3; }
  .q-layout .src-card .answer-check-panel > .answer-check-feedback { grid-row: 4; }
  .q-layout .src-card .answer-check-panel > p.small:not(.answer-check-help) { grid-row: 5; }
}
/* The finish bar: same role, less height. */
.q-layout .src-card .src-done { margin: 12px -20px 0; padding: 12px 20px; }
@media (max-width: 600px) {
  body .exercise-page:has(.q-layout) .wrap { padding-inline: 16px; }
  .exercise-page:has(.q-layout) .exercise-masthead { height: 52px; }
  .exercise-page:has(.q-layout) .exercise-masthead .brand .word { font-size: 28px; }
  .student-source .srchead .src-title > h1, .student-source .srchead .src-title > h2 { font-size: 1.25rem; }
  .q-layout .exam-question.src-card { padding: 12px 13px 0; }
  .q-layout .src-card .srcframe { margin-inline: -13px; }
  .q-layout .src-card .src-done { margin-inline: -13px; padding: 12px 13px; }
  .q-layout .src-card .srcbar .src-links { order: 3; width: 100%; margin: 0; justify-content: flex-start; }
}

/* === UX 2026-10-22 · learning === */
/* A hidden button stays hidden: .btn's display used to beat the [hidden] attribute
   (the draft pad's "retry background" showed although nothing had failed). */
.btn[hidden] { display: none !important; }
.pad-esc-hint { white-space: nowrap; }
@media (hover: none) and (pointer: coarse) { .pad-esc-hint { display: none; } }

/* Groto reacting to a verdict, the start-here card and the "hard topic" reply: in-line size. */
.groto-fig.qfeedback-groto, .groto-fig.start-here-groto, .tutor-help-start .groto-fig { width: var(--groto-inline); height: auto; flex: 0 0 auto; }
.exercise-answer .qfeedback { flex-wrap: nowrap; align-items: center; }
.qfeedback-copy { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.qfeedback-copy p { flex: 1 1 220px; }
.q-actions .q-skip { min-height: 44px; }

/* Math keys under a numeric answer: the symbols the phone keypad hides. */
.math-keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; direction: ltr; justify-content: flex-end; }
.math-key { min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); font: 600 1.125rem/1 var(--font, inherit); cursor: pointer; touch-action: manipulation; }
.math-key:hover { border-color: var(--cobalt); color: var(--cobalt-800); }
.math-key:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.math-key:active { background: var(--cobalt-tint); }
.answer-note { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; color: var(--cobalt-800); font-size: 1rem; line-height: 1.5; }
.answer-note svg { flex: 0 0 auto; margin-top: 3px; }

/* The "hard topic" reply: Groto, the first hint, the first step. */
.tutor-help-start { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tutor-help-start .body { margin: 0; font-weight: 600; }
.tutor-help-response .notice { margin-block: 10px; }
.selfreport .chip { min-height: 44px; }

/* Start here: one recommended next step, with Groto. */
.start-here { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 24px; padding: 20px 24px; margin-block: 8px 28px; border: 2px solid var(--cobalt-line); background: var(--cobalt-tint); }
.start-here-copy .h2 { margin: 2px 0 6px; font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.start-here-copy .body { margin: 0; }
.start-here-kicker { margin: 0; font-weight: 700; color: var(--cobalt-800); font-size: 1rem; }
.start-here-go { white-space: nowrap; }
.topic-list-title { margin: 0 0 4px; }
.learning-change { margin: 0 0 8px; }
.learning-change > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--cobalt-800); }
.learning-change .learning-controls { margin-top: 8px; }

/* Practised topics look different from untouched ones. */
.topic-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 1rem; }
.topic-status.is-practised { color: var(--good); }
.topic-status.is-revisit { color: var(--warn); }
.student-topic.is-practised { border-color: #BEE2D1; box-shadow: inset 0 4px 0 var(--good); }
.student-topic.is-revisit { border-color: #F0D9B4; box-shadow: inset 0 4px 0 var(--warn); }

@media (max-width: 620px) {
  .start-here { grid-template-columns: auto minmax(0, 1fr); padding: 16px; gap: 12px 14px; margin-block: 4px 20px; }
  .start-here-go { grid-column: 1 / -1; width: 100%; justify-content: center; }
  /* The topic wall becomes a compact list, so the next step stays above the fold. */
  .student-topic-grid.is-practice { gap: 8px; margin-block: 12px; }
  .student-topic-grid.is-practice .student-topic { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 12px 16px; min-height: 56px; }
  .student-topic-grid.is-practice .student-topic .topic-art,
  .student-topic-grid.is-practice .student-topic p.body { display: none; }
  .student-topic-grid.is-practice .student-topic h2 { grid-column: 1; font-size: 1.0625rem; }
  .student-topic-grid.is-practice .student-topic .topic-status,
  .student-topic-grid.is-practice .student-topic .topic-count { grid-column: 1; font-size: 1rem; }
  .student-topic-grid.is-practice .student-topic-go { grid-column: 2; grid-row: 1 / span 3; margin: 0; font-size: 0; }
  .student-topic-grid.is-practice .student-topic.is-practised,
  .student-topic-grid.is-practice .student-topic.is-revisit { box-shadow: inset -4px 0 0 var(--good); }
  .student-topic-grid.is-practice .student-topic.is-revisit { box-shadow: inset -4px 0 0 var(--warn); }
}

/* Phone session: body text at least 16px. */
@media (max-width: 600px) {
  .exercise-answer .answerblock .answer-label, .exercise-page .question-label, .exercise-answer .answer-hint, .exercise-answer .qfeedback p,
  .exercise-page .sessionstage-head .q-count, .exercise-page .sessionstage-head > .small { font-size: 1rem; }
  .exercise-answer .qfeedback { padding: 12px; gap: 10px; }
}
@media (max-width: 600px) {
  .math-keys { gap: 4px; flex-wrap: nowrap; }
  .math-key { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0; }
}
/* Scrolled-to feedback clears the phone's fixed bar and the sticky header. */
.exercise-help-content, .exercise-solution-outlet, .exercise-workspace .q-side, .qfeedback, .answer-note, .answer-error { scroll-margin-block: 16px 104px; }
@media (min-width: 900px) {
  /* The full solution sits under the question, beside the sticky help column —
     spanning both, it slid under that column as the page scrolled. */
  .exercise-workspace.q-layout.exercise-question-first:has(> .q-side) > .exercise-solution-outlet { grid-column: 1 / 2; }
}
@media (max-width: 600px) { .math-keys { width: 100%; } }
/* === end UX 2026-10-22 · learning (kept above the "Full-question initial fit" block: tests/question-source-fit.mjs reads that block to EOF) === */

/* === UX 2026-10-22 · landing === */
/* The entrance (#/), one screen as on the owner's board of 2026-11-08: a dark
   bar, the library band, and the subjects on a light-blue band. Sizes are the
   board's pixels at its 1585px width, carried in --u so the screen scales as one
   picture, with floors for small screens. */
.landing-page {
  --lp-navy: #071A30; --lp-lime: #DCF64C; --lp-sky: #AAE7FA; --lp-blue: #0A58FE; --lp-mark: #0A28F5;
  --lp-band: #D3EAFD; --lp-band-ink: #0A1A33;
  /* One board pixel per 15.85 of these: the width unit, unless the window is
     shorter than the board's 1585×992 proportion, so the screen still fits. */
  --u: min(1vw, 1.595svh);
  min-height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  /* One column that can never grow past the screen: an auto track takes the
     widest row's min-content, and the three cards below once made it 776px wide
     on a 390px phone, so the phone zoomed the whole entrance out to half size. */
  grid-template-columns: minmax(0, 1fr);
  background: var(--lp-band); color: var(--lp-band-ink);
}

/* --- the bar --------------------------------------------------------------- */
.lp-bar {
  display: flex; align-items: center; gap: clamp(20px, calc(3.8 * var(--u)), 60px);
  min-height: 68px; padding: 0 clamp(16px, calc(2.7 * var(--u)), 43px) 0 clamp(16px, calc(2.9 * var(--u)), 46px);
  background: var(--lp-navy); color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.62);
}
.lp-bar .brand .word { font-size: clamp(1.8rem, calc(2.78 * var(--u)), 2.9rem); }
.lp-bar .brand.on-dark .tet { color: #4386F8; }
.lp-nav { display: flex; align-items: center; gap: clamp(20px, calc(3.6 * var(--u)), 57px); margin-inline-start: clamp(8px, calc(2.2 * var(--u)), 36px); }
.lp-nav a, .lp-bar-start {
  display: inline-flex; align-items: center; min-height: 44px;
  color: #fff; font-weight: 700; font-size: clamp(1rem, calc(1.45 * var(--u)), 1.5rem); text-decoration: none; white-space: nowrap;
}
.lp-nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.lp-bar-start {
  margin-inline-start: auto; min-height: 41px; padding: 0 24px;
  border: 2px solid #F7F8FA; border-radius: var(--r-pill);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lp-bar-start:hover { background: #fff; color: var(--lp-navy); }

/* --- the library band ------------------------------------------------------ */
.lp-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: start center;
  min-height: 520px;
  background: #0E2440; color: #fff; text-align: center;
}
.lp-hero-photo {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  /* Pinned at Groto (76.8% across), so any crop keeps him over his shadow on
     the band, and the drift grows from his feet. */
  object-fit: cover; object-position: 76.8% 88%;
  transform-origin: 76.8% 98%;
  animation: lp-drift 26s ease-in-out infinite alternate;
}
.lp-hero[data-still] .lp-hero-photo { animation-play-state: paused; }
@keyframes lp-drift { from { transform: scale(1.0); } to { transform: scale(1.045) translateX(-0.8%); } }
/* The board's dark centre: deep behind the words, clear over the people. */
.lp-hero-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 36% 62% at 50% 40%, rgba(6,18,36,.55), rgba(6,18,36,0) 100%),
    linear-gradient(to bottom, rgba(6,18,36,.35), rgba(6,18,36,0) 22%);
}
.lp-hero-copy {
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(24px, calc(2.1 * var(--u)), 34px) 20px clamp(110px, calc(10 * var(--u)), 180px);
  max-width: 100%;
}
.lp-eyebrow {
  display: flex; align-items: center; gap: clamp(14px, calc(1.55 * var(--u)), 25px); margin: 0;
  font-size: clamp(1.125rem, calc(1.82 * var(--u)), 1.9rem); font-weight: 700; line-height: 1.2;
}
.lp-eyebrow::before, .lp-eyebrow::after {
  content: ""; width: clamp(28px, calc(3.8 * var(--u)), 62px); height: 4px; border-radius: 2px; background: var(--lp-lime);
}
.lp-title {
  margin: clamp(6px, calc(.5 * var(--u)), 8px) 0 0; color: #fff;
  font-size: clamp(2.4rem, calc(5.55 * var(--u)), 5.8rem); font-weight: 700; line-height: .9; letter-spacing: -.02em;
  -webkit-text-stroke: .018em currentColor; paint-order: stroke fill;
  text-shadow: 0 3px 18px rgba(0,0,0,.35);
}
.lp-title-accent { color: var(--lp-sky); letter-spacing: .03em; }
.lp-lead {
  margin: clamp(8px, calc(.15 * var(--u)), 4px) 0 0; color: #fff;
  font-size: clamp(1.0625rem, calc(1.68 * var(--u)), 1.75rem); line-height: 1.28;
  text-shadow: 0 1px 10px rgba(0,0,0,.45);
}
.lp-hero .lp-cta {
  margin-top: clamp(15px, calc(1.2 * var(--u)), 19px);
  min-width: min(100%, clamp(320px, calc(40.25 * var(--u)), 680px)); min-height: clamp(60px, calc(6.05 * var(--u)), 100px);
  padding-inline: clamp(20px, calc(2.5 * var(--u)), 40px); gap: clamp(8px, calc(.95 * var(--u)), 15px);
  border: 0; border-radius: var(--r-pill);
  --btn-bg: var(--lp-blue); --btn-line: var(--lp-blue);
  font-size: clamp(1.3rem, calc(2.87 * var(--u)), 3rem); font-weight: 700; -webkit-text-stroke: .015em currentColor;
  box-shadow: 0 10px 30px rgba(10,88,254,.35);
}
.lp-hero .lp-cta:hover:not(:disabled) { --btn-bg: #0047E6; --btn-line: #0047E6; }
.lp-hero .lp-cta .arrow { display: inline-flex; }
/* The arrow path spans 14 of its 24 units, so the box is drawn larger than the board's 45px stroke. */
.lp-hero .lp-cta .arrow svg { width: clamp(40px, calc(4.5 * var(--u)), 74px); height: auto; margin-block: -12px; }
.lp-hero .lp-cta .arrow path { stroke-width: 1.8; }
.lp-how {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: clamp(6px, calc(.5 * var(--u)), 8px);
  color: #fff; font-size: clamp(1.0625rem, calc(1.53 * var(--u)), 1.6rem); font-weight: 700; text-decoration: none;
}
.lp-how:hover { text-decoration: underline; text-underline-offset: 5px; }
.lp-how-ico {
  width: clamp(28px, calc(1.96 * var(--u)), 33px); height: clamp(28px, calc(1.96 * var(--u)), 33px); border-radius: 50%;
  display: grid; place-items: center; border: 2.5px solid #fff;
}
.lp-how-ico svg { margin-inline-end: -2px; }
.lp-trust {
  list-style: none; margin: clamp(6px, calc(.85 * var(--u)), 13px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 0;
  color: #fff; font-size: clamp(1rem, calc(1.44 * var(--u)), 1.5rem); font-weight: 700;
}
.lp-trust li { display: inline-flex; align-items: center; gap: 8px; }
.lp-trust li + li::before { content: "·"; margin-inline: 16px; font-weight: 700; }
.lp-trust li svg { color: var(--lp-lime); flex: 0 0 auto; }
.lp-trust li svg path { stroke-width: 3.4; }
.lp-trust span + a { margin-inline-start: 14px; }
.lp-trust a { color: #fff; display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }
.lp-hero-pause {
  position: absolute; bottom: clamp(14px, calc(2.1 * var(--u)), 33px); inset-inline-end: clamp(14px, calc(2.2 * var(--u)), 35px);
  width: 44px; height: 44px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  color: #fff; background: rgba(6,18,36,.35); border: 2px solid rgba(255,255,255,.85);
  transition: background var(--dur) var(--ease);
}
.lp-hero-pause:hover { background: rgba(6,18,36,.7); }

/* --- the subjects ---------------------------------------------------------- */
.lp-band { position: relative; padding: clamp(10px, calc(.6 * var(--u)), 12px) 16px clamp(18px, calc(1.7 * var(--u)), 30px); }
/* Groto sits on the table's edge, so his feet cast onto the band below. The
   photograph is pinned at his place (see .lp-hero-photo), so it is a fixed share. */
.lp-band::before {
  content: ""; position: absolute; top: 0; left: 76.8%; translate: -50% 0;
  width: 6.6vw; height: 1.6vw; pointer-events: none;
  background: radial-gradient(ellipse 50% 100% at 50% 0, rgba(8,22,44,.9), rgba(8,22,44,.3) 55%, rgba(8,22,44,0));
}
.lp-band-title {
  display: flex; align-items: center; justify-content: center; gap: clamp(16px, calc(2.8 * var(--u)), 45px);
  margin: 0; color: var(--lp-band-ink);
  font-size: clamp(1.6rem, calc(2.8 * var(--u)), 2.9rem); font-weight: 700; line-height: 1.15;
  -webkit-text-stroke: .02em currentColor;
}
.lp-band-title::before, .lp-band-title::after {
  content: ""; width: clamp(40px, calc(11.1 * var(--u)), 176px); height: 4px; border-radius: 2px;
  background: linear-gradient(to left, #8AC4FD, #669CFE);
}
.lp-band-title::after { background: linear-gradient(to right, #8AC4FD, #669CFE); }
.lp-subjects {
  list-style: none; margin: clamp(4px, calc(.25 * var(--u)), 6px) auto 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); max-width: min(100%, calc(94 * var(--u)), 1500px);
}
.lp-subjects li { position: relative; display: flex; justify-content: center; }
/* The rule between subjects is shorter than the subject, as on the board. */
.lp-subjects li + li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 24%; height: 58%;
  border-inline-start: 1px solid #9BB3CB;
}
.lp-subject {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 4px 18px; border-radius: 16px;
  color: var(--lp-band-ink); text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.lp-subject:hover { background: rgba(255,255,255,.55); }
.lp-subject.is-mine { background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 2px var(--lp-mark); }
.lp-mark { display: grid; place-items: center; height: clamp(40px, calc(3.25 * var(--u)), 52px); color: var(--lp-mark); }
.lp-mark svg { width: clamp(40px, calc(3.25 * var(--u)), 52px); height: clamp(40px, calc(3.25 * var(--u)), 52px); }
.lp-mark-type { font-size: clamp(1.75rem, calc(2.2 * var(--u)), 2.3rem); font-weight: 700; line-height: 1; direction: ltr; }
.lp-subject-name { font-size: clamp(1.25rem, calc(2.1 * var(--u)), 2.2rem); font-weight: 700; line-height: 1.25; white-space: nowrap; -webkit-text-stroke: .02em currentColor; }

/* The returning student's Bagrut in the bar, and the way to change it. */
.lp-bar-mine { gap: 10px; padding-inline: 18px 6px; }
.lp-bar-change { font-size: .8125rem; padding: 4px 12px; border-radius: var(--r-pill); background: var(--lp-lime); color: var(--lp-navy); }
.lp-bar-mine:hover .lp-bar-change { background: var(--lp-navy); color: #fff; }
.lp-trust a.lp-trust-change {
  min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); text-decoration: none; font-weight: 700;
  border: 1.5px solid rgba(255,255,255,.75);
}
.lp-trust a.lp-trust-change:hover { background: #fff; color: var(--lp-navy); }

/* --- what there is to do here: three ways, one address each --------------- */
.lp-ways { padding: clamp(28px, 4vw, 56px) 16px clamp(36px, 5vw, 72px); background: #fff; }
.lp-ways-title { margin: 0 0 clamp(16px, 2vw, 28px); text-align: center; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); color: var(--lp-band-ink); }
.lp-ways-list { list-style: none; margin: 0 auto; padding: 0; max-width: 1180px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.lp-way {
  position: relative; height: 100%; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 4px; align-items: center;
  padding: 20px 22px 20px 52px; border-radius: 20px; text-decoration: none; color: var(--lp-band-ink);
  background: #F3F8FF; border: 1.5px solid #D7E5FA;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lp-way:hover { border-color: var(--lp-blue); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10,40,120,.12); }
.lp-way:focus-visible { outline: 3px solid rgba(10,88,254,.5); outline-offset: 3px; }
.lp-way-ico { grid-row: span 2; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--lp-blue); color: #fff; }
.lp-way-name { font-size: 1.25rem; font-weight: 800; }
.lp-way-line { font-size: .9375rem; color: #3A4D66; line-height: 1.45; }
.lp-way-go { position: absolute; inset-inline-end: 18px; top: 50%; translate: 0 -50%; color: var(--lp-blue); }
.lp-ways-how { display: flex; width: fit-content; align-items: center; gap: 8px; margin: clamp(16px, 2vw, 24px) auto 0; min-height: 44px; font-weight: 700; color: var(--lp-blue); text-underline-offset: 4px; }

/* --- #/how: a way home when the app bar is hidden ------------------------ */
.how-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: clamp(16px, 2.4vw, 28px); }
.how-top .brand { min-height: 44px; }
.how-top .brand .word { font-size: 1.6rem; }
.how-home { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #fff; font-weight: 700; text-decoration: none; }
.how-home:hover { text-decoration: underline; text-underline-offset: 4px; }
.how-demo { font-size: .9375rem; }
.how-promise-body { font-size: 1rem; }
.how-or { margin-inline: .45em; }

@media (max-width: 860px) {
  /* Phone: the destinations take a row of their own under the wordmark. */
  .lp-bar { flex-wrap: wrap; row-gap: 0; padding-block: 10px 4px; }
  .lp-nav { order: 3; width: 100%; justify-content: center; gap: 4px 22px; margin: 0; }
  .lp-nav a { font-size: 1rem; }
  .lp-bar-start { padding: 0 18px; font-size: 1rem; }
  /* The crop moves right, onto Groto and the students beside him. */
  .lp-hero-photo { object-position: 80% 100%; transform-origin: 80% 100%; }
  .lp-hero-shade { background: linear-gradient(to bottom, rgba(6,18,36,.72) 0%, rgba(6,18,36,.6) 55%, rgba(6,18,36,0) 80%); }
  .lp-hero-copy { padding-bottom: clamp(170px, 46vw, 240px); }
  .lp-hero .lp-cta { width: 100%; }
  .lp-subjects { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; }
  .lp-subjects li:nth-child(3n + 1)::before { content: none; }
  .lp-band::before { content: none; }
  .lp-subject { padding-inline: 8px; }
}
@media (max-width: 380px) {
  .lp-nav { gap: 4px 14px; }
  .lp-subject-name { font-size: 1.125rem; }
}

/* === UX 2026-10-22 · onboarding === */
/* Questionnaire number: secondary text under the human description. */
.selection-option .opt-code { display: block; margin-top: 4px; font-size: .9375rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* Papers from the previous programme, folded away under this year's list. */
.shealon-legacy { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.shealon-legacy > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 16px; cursor: pointer; font-weight: 700; font-size: 1rem; }
.shealon-legacy-note { font-weight: 400; color: var(--ink-3); }
.shealon-legacy > summary { list-style: none; }
.shealon-legacy > summary::-webkit-details-marker { display: none; }
.shealon-legacy > summary::after { content: ""; margin-inline-start: auto; width: 7px; height: 7px; margin-block-end: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.shealon-legacy[open] > summary::after { margin-block: 4px 0; transform: rotate(-135deg); }
.onboarding-state .recovery .brand { min-height: 44px; padding-inline: 6px; }
.shealon-legacy > .body { padding: 0 16px; color: var(--ink-2); }
.shealon-legacy > .choicegroup { padding: 12px; }

/* "לא בטוחים?" — Groto, small, at the moment of doubt; real bullets. */
.notsure-head { display: flex; align-items: center; gap: 14px; }
.notsure .notsure-fig { width: var(--groto-inline); }
.notsure-list { margin: 0; padding-inline-start: 1.25em; list-style: disc; display: grid; gap: 9px; }
.notsure-list li::marker { color: var(--cobalt); }

/* Intake: what happens next, said where the choice is. */
.intake-noexam { margin-top: 14px; padding: 12px 16px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); }
.intake-next { margin-top: 16px; color: var(--ink-2); }
.onboarding-page .intake-skip { min-height: 44px; font-size: 1rem; text-decoration: underline; }

/* App bar wordmark: a real tap target. */
.appbar .brand { min-height: 44px; padding-block: 6px; }

/* Settings: a way out before a bagrut exists, whole-row switches, readable text. */
.prefs-top { padding-top: var(--s4); }
.prefs-home { min-height: 44px; font-size: 1rem; padding-inline: 8px; }
.prefrow-start { flex-wrap: wrap; }
.prefrow-start .btn { min-height: 48px; }
.prefs .switch-row.is-tappable { cursor: pointer; min-height: 64px; }
.prefs .switch-row .grow .note, .prefs .switch-state, .prefs .opt-note,
.prefs .prefrow-title, .prefs .prefrow-note, .prefs .prefnote-title, .prefs .prefnote-body { font-size: 1rem; }

@media (max-width: 760px) {
  .modal-box:has(.notsure) .notsure-ok { width: 100%; min-height: 48px; }
  .prefrow-start .btn { width: 100%; justify-content: center; }
  /* The description gets the full line; the switch sits under it, at the start. */
  .prefs .switch-row.is-tappable { flex-wrap: wrap; row-gap: 10px; }
  .prefs .switch-row.is-tappable > .grow { flex: 1 1 100%; }
}

/* === UX 2026-10-22 · exams === */
/* Compare one part: the student's answer beside ONLY that part's final answer. */
.answer-check-feedback:empty { display: none; }
.answer-check-feedback { display: grid; gap: 10px; justify-items: start; }
.answer-check-feedback > p { margin: 0; }
.answer-check-feedback[data-answer-check-status='empty'] { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
/* "כתבו תשובה כדי להשוות": a calm note under the field, never an error colour. */
.answer-check-fields > .answer-empty-note { flex: 1 0 100%; margin: 0; font-size: .9375rem; font-weight: 600; color: var(--cobalt-800); }
.answer-check-fields > .answer-empty-note:empty { display: none; }
/* A value and its unit stay one unbroken, isolated run inside the RTL line. */
.answer-compare .answer-value { unicode-bidi: isolate; white-space: nowrap; }
.answer-compare { display: grid; gap: 8px; width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--cobalt-tint); border: 1px solid var(--cobalt-line); }
.answer-compare-row { display: grid; gap: 2px; }
.answer-compare-row > p { margin: 0; font-size: 1rem; }
.answer-compare-label { font-size: .875rem; font-weight: 700; color: var(--ink-2); }
.answer-compare-rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 1rem; }
.answer-compare-rows .final-part-label { font-weight: 700; }
.answer-compare-verdict { font-weight: 700; }
.answer-check-feedback .btn { min-height: 44px; }
.exercise-workspace .answer-check-help, .exercise-question-first .answer-check-panel > .answer-check-help { font-size: .9375rem; color: var(--ink-2); }

/* Scanned exam page. Every device opens fitted to the printed text's width
   (question-source-page.js measures the ink columns; the blank print margins
   are dropped), so no line is cut and nothing needs a sideways drag. */
.srcbar .seg button, .hm-section-pick .seg button { min-height: 44px; }
.srcbar .src-full { min-height: 44px; min-width: 44px; }
.q-layout .src-card .srcbar .src-links > * { min-height: 44px; }
.exam-secondary .chip { min-height: 44px; }
.src-hint-fit, .src-hint-full { display: none; }
@media (max-width: 600px) {
  .src-card .srcframe[data-zoom="fit"], .q-layout .src-card .srcframe[data-zoom="fit"] { max-height: none; overflow: visible; }
  .src-card .srcframe[data-zoom="fit"] .exercise-source-reading { padding: 8px 4px; }
  .src-card .srcframe[data-zoom="fit"] .exam-page-viewport { overflow: hidden; direction: ltr; }
  .src-card .srcframe[data-zoom="fit"] .exam-pages:not(.is-zoomed) [data-ink="trimmed"] {
    width: calc(100% / var(--ink-w, 1)) !important; max-width: none !important; min-width: 0 !important;
    margin-left: calc(-100% * var(--ink-l, 0) / var(--ink-w, 1)) !important; margin-right: 0 !important;
  }
  .srcframe[data-zoom="fit"] ~ .src-hint-fit { display: flex; }
  .src-card .src-status, .q-layout .src-card .src-status { font-size: 1rem; }
  .student-source .exercise-question-meta { font-size: .9375rem; }
}
.src-viewer:fullscreen .src-hint { display: none !important; }
/* Full screen (a phone turned sideways): the printed text fills the whole width. */
.src-viewer:fullscreen .srcframe[data-zoom="fit"] .exam-page-viewport { overflow: hidden; direction: ltr; }
.src-viewer:fullscreen .srcframe[data-zoom="fit"] .exam-pages:not(.is-zoomed) [data-ink="trimmed"] {
  width: calc(100% / var(--ink-w, 1)) !important; max-width: none !important; min-width: 0 !important;
  margin-left: calc(-100% * var(--ink-l, 0) / var(--ink-w, 1)) !important; margin-right: 0 !important;
}
@media (max-width: 600px) and (orientation: portrait) {
  .src-viewer:fullscreen .src-hint-full { display: flex !important; }
}
@media (min-width: 601px) {
  /* Desktop "הגדלה": a third larger than the fitted width, not a fixed pixel scale. */
  .src-card .srcframe .exam-pages.is-zoomed .exam-question-crop,
  .src-card .srcframe .exam-pages.is-zoomed .exam-page[data-source-presentation='full-page'] .exam-source-image { width: 130%; max-width: none; }
}
/* Notebook photo check on a phone: a full-width button in the question card. */
.q-photo-phone { display: none; }
@media (max-width: 600px) {
  .q-photo-phone:not([hidden]) { display: flex; width: 100%; min-height: 48px; margin-top: 12px; gap: 8px; justify-content: center; }
}
/* A formula step on a phone: the formula takes the full width, "למה?" sits under it. */
@media (max-width: 600px) {
  .equation-reason-row { flex-direction: column; align-items: stretch; }
  .equation-reason-row > .equation-why-button { align-self: flex-start; min-height: 44px; }
}
/* Exams topic list: Groto greets once; "continue" first; compact rows on phones. */
.exam-hello { display: flex; align-items: center; gap: 14px; margin: 18px 0 0; }
.exam-hello .exam-hello-groto { width: var(--groto-size, var(--groto-inline)); height: auto; flex: 0 0 auto; }
.exam-hello-line { margin: 0; padding: 12px 16px; border-radius: 18px; background: var(--cobalt-tint); border: 1px solid var(--cobalt-line); font-size: 1.0625rem; font-weight: 700; color: var(--cobalt-800); }
.exam-resume { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; padding: 14px 18px; min-height: 64px; text-decoration: none; color: var(--ink); border-color: var(--cobalt-line); }
.exam-resume > svg { color: var(--cobalt); flex: 0 0 auto; }
.exam-resume-text { display: grid; flex: 1 1 auto; }
.exam-resume-text strong { color: var(--cobalt-800); }
.learning-page .exam-hello ~ .insights-in-context { margin: 12px 0 0; }
.student-topic .soon-alt { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 620px) {
  .student-topic-grid.is-exam-list { gap: 8px; }
  .student-topic-grid.is-exam-list .student-topic {
    display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "art name go" "art avail go";
    align-items: center; gap: 2px 12px; padding: 10px 12px; min-height: 72px;
  }
  .student-topic-grid.is-exam-list .student-topic .topic-art { grid-area: art; width: 56px; height: 56px; aspect-ratio: 1; max-height: none; margin: 0; border-radius: 12px; object-fit: cover; }
  .student-topic-grid.is-exam-list .student-topic h2 { grid-area: name; font-size: 1.0625rem; line-height: 1.35; }
  .student-topic-grid.is-exam-list .student-topic > p.body { display: none; }
  .student-topic-grid.is-exam-list .student-topic .src-avail { grid-area: avail; font-size: .875rem; }
  .student-topic-grid.is-exam-list .student-topic .student-topic-go { grid-area: go; padding: 0; font-size: 0; }
  .student-topic-grid.is-exam-list .student-topic .student-topic-go svg { width: 20px; height: 20px; }
  .student-topic-grid.is-exam-list .student-topic.is-soon { grid-template-areas: "art name name" "art avail avail" "art alt alt"; }
  .student-topic-grid.is-exam-list .student-topic .soon-alt { grid-area: alt; }
  .student-topic-grid.is-exam-list .student-topic .src-avail.is-soon .badge { font-size: .75rem; }
}
/* Exam states (wrong link, nothing ready yet): Groto thinks, one way on. */
.exam-state { display: grid; justify-items: start; gap: 12px; }
.exam-state .exam-state-groto { width: var(--groto-size, var(--groto-state)); height: auto; }
.exam-state > .h1, .exam-state > .lead { margin: 0; }
/* The success moment after "סיימתי": Groto celebrates beside the line. */
.src-done > p.is-done { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.src-done .exam-success-groto { width: var(--groto-size, var(--groto-inline)); height: auto; flex: 0 0 auto; }

/* An empty "להשוות לפתרון": Groto points at the next real step instead of the answer. */
.answer-guide { display: flex; align-items: center; gap: 12px; }
.answer-guide .body { margin: 0; flex: 1 1 auto; min-width: 0; }
.answer-guide-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.answer-guide-actions .btn { min-height: 44px; }

/* Entering a topic: how to start — a bagrut question or Groto's warm-up. */
.learning-page .wrap.start-choice-page { max-width: 760px; margin-inline: auto; display: grid; gap: 20px; }
.start-choice-page > .linkish { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; justify-self: start; }
.start-choice-head { display: flex; align-items: center; gap: 16px; }
.start-choice-head .groto-fig { width: var(--groto-state); flex: 0 0 auto; }
.start-choice-head .groto-speech { flex: 1 1 auto; min-width: 0; }
.start-choice-head .h2 { margin: 0 0 4px; }
.start-choice-head .body { margin: 0; }
.start-choice-list { display: grid; gap: 14px; }
.start-choice { display: flex; align-items: center; gap: 16px; padding: 20px 22px; min-height: 96px; color: inherit; text-decoration: none; border: 2px solid var(--line); transition: border-color .15s, transform .15s; }
@media (hover: hover) { a.start-choice:hover { border-color: var(--cobalt); transform: translateY(-1px); } }
a.start-choice:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.start-choice-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--cobalt-tint); color: var(--cobalt-800); flex: 0 0 auto; }
.start-choice-copy { display: grid; gap: 4px; flex: 1 1 auto; min-width: 0; }
.start-choice-copy .h3 { margin: 0; }
.start-choice-copy .body { margin: 0; color: var(--ink-2); }
.start-choice-tag { justify-self: start; margin-top: 4px; background: var(--cobalt-tint); color: var(--cobalt-800); }
.start-choice.is-soon { opacity: .8; border-style: dashed; }
.start-choice.is-soon .badge { justify-self: start; margin-top: 4px; }
@media (max-width: 600px) {
  .start-choice-head { flex-direction: column; text-align: center; }
  .start-choice-head .groto-speech::after { display: none; }
  .start-choice { padding: 16px; gap: 12px; }
  .start-choice-icon { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) { a.start-choice:hover { transform: none; } }
/* לומדים עם גרוטו: from a hard question back to the lesson that teaches it. */
.practice-help .learn-link { display: inline-flex; gap: 6px; align-items: center; margin-top: var(--s3); }

/* "מחפשים שאלה מסוימת?" — the Bagrut-question search shared by every subject (src/question-search.js). */
.qsearch { display: grid; gap: 10px; margin: 4px 0 18px; }
.qsearch-bar { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 0 16px; color: var(--ink-3); }
.qsearch-bar:focus-within { border-color: var(--ink-2); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.qsearch-input.input { border: 0; background: transparent; box-shadow: none; padding-inline: 0; min-height: 48px; flex: 1; }
.qsearch-input.input:focus { outline: none; box-shadow: none; }
.qsearch-tools { align-items: center; gap: 10px; flex-wrap: wrap; }
.qsearch-filters { margin: 0; }
.qsearch-selects { gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.qsearch-selects .select { width: auto; min-width: 150px; }
.qsearch-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.qsearch-card { display: grid; gap: 4px; height: 100%; padding: 16px 18px; }
.qsearch-meta { color: var(--ink-3); }
.qsearch-title { color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* While a search is active its results replace the topic grid (and Groto's line); these blocks set their own display. */
.student-topic-grid[hidden], .exam-hello[hidden], .learning-resume[hidden] { display: none; }

/* The section picker of a humanities Bagrut question: "סעיף" and the segmented control, on one line. */
.hm-section-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }

/* === the "correct" moment (src/celebrate.js) === */
/* One card for every right answer. The base rule is doubled (.cheer.cheer) to
   outrank .qfeedback.is-right and .exercise-answer .qfeedback above it. Every
   animation fills backwards only, so no transform outlives the entrance. */
.cheer.cheer {
  position: relative; isolation: isolate;
  display: flex; flex-wrap: nowrap; align-items: center; gap: 18px;
  margin: var(--s4) 0 0; padding: 16px 26px 16px 20px;
  border: 1.5px solid #A8E0C4; border-radius: 22px;
  background: radial-gradient(120% 140% at 100% 0%, #FFFFFF 0%, #ECF9F2 45%, #D7F2E4 100%);
  box-shadow: 0 12px 32px rgba(11,107,70,.16), inset 0 1px 0 #fff;
  color: var(--ink);
  animation: cheer-in 560ms cubic-bezier(.2,1.35,.4,1) backwards;
}
/* a light sweep across the card, once */
.cheer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.85) 48%, transparent 61%) -60% 0 / 250% 100% no-repeat;
  animation: cheer-shine 1100ms 260ms ease-out backwards;
}
.cheer-origin { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 120px; height: 120px; }
.cheer-origin::before {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(220,246,76,.9), rgba(220,246,76,0) 70%);
  animation: cheer-halo 950ms 100ms ease-out backwards;
}
.cheer .cheer-groto {
  position: relative; width: 120px; height: 120px; object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(20,43,66,.22));
  animation: cheer-jump 900ms 80ms cubic-bezier(.3,1.5,.5,1) backwards;
}
/* (0,3,1): outranks .exercise-answer .qfeedback p above, and .lx-lesson .lx-article p in learn.css, which loads later */
.cheer-copy { min-width: 0; display: grid; gap: 2px; }
.cheer.cheer p.cheer-title { flex: none; margin: 0; display: flex; align-items: center; gap: 12px; font-size: 2.25rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--good); }
.cheer.cheer p.cheer-praise { flex: none; margin: 0 0 0 0; padding-inline-start: 56px; font-size: 1.25rem; font-weight: 700; line-height: 1.35; color: var(--ink); }
.cheer-mark {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--good); color: #fff; box-shadow: 0 0 0 5px rgba(11,107,70,.14);
  animation: cheer-pop 420ms 150ms cubic-bezier(.2,1.6,.4,1) backwards;
}
.cheer-mark svg { width: 26px; height: 26px; }
.cheer-mark path { stroke-dasharray: 1; animation: cheer-draw 380ms 400ms ease-out backwards; }
.cheer.cheer p.cheer-text { flex: none; margin: 6px 0 0; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.cheer-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 400; pointer-events: none; }
@keyframes cheer-in { from { opacity: 0; transform: translateY(14px) scale(.94); } }
@keyframes cheer-shine { from { background-position: 140% 0; } to { background-position: -60% 0; } }
@keyframes cheer-halo { 0% { opacity: 0; transform: scale(.3); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes cheer-jump { 0% { opacity: 0; transform: translateY(18px) scale(.6); } 45% { opacity: 1; transform: translateY(-14px) scale(1.06); } 72% { transform: translateY(2px) scale(.98); } }
@keyframes cheer-pop { from { transform: scale(0); } }
@keyframes cheer-draw { from { stroke-dashoffset: 1; } }
/* A rebuilt or restored verdict, or reduced motion: the card, standing still. */
.cheer.is-settled, .cheer.is-settled::before, .cheer.is-settled *, .cheer.is-settled *::before { animation: none; }
@media (max-width: 600px) {
  .cheer.cheer { gap: 12px; padding: 12px 14px; }
  .cheer-origin, .cheer .cheer-groto { width: 84px; height: 84px; }
  .cheer.cheer p.cheer-title { font-size: 1.75rem; gap: 8px; }
  .cheer.cheer p.cheer-praise { font-size: 1.0625rem; padding-inline-start: 42px; }
  .cheer-mark { width: 34px; height: 34px; }
  .cheer-mark svg { width: 20px; height: 20px; }
}

/* Full-question initial fit: size every source region/page together, preserving
   original aspect ratios and all continuation parts. Enlarging is opt-in. */
.exercise-question-first .exam-pages:not(.is-zoomed) .exam-question-crop,
.exercise-question-first .exam-pages:not(.is-zoomed) .exam-page[data-source-presentation='full-page'] .exam-source-image {
 width:min(100%,var(--source-fit-width,100%)); min-width:0; max-width:100%;
 margin-inline:auto;
}

/* ---- review v77 fixer: the part jumped to by "להשוות לפתרון" ---- */
.final-parts > li.is-target { margin-inline: -8px; padding: 4px 8px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--cobalt); }
.final-parts > li.is-target:focus { outline: none; }
.final-parts > li.is-target:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }