/* Hablox learn.css: the learning screens (roadmap, lesson, the practice / mock / test runners, answers, feedback,
   results, review items, progress). Built on tokens.css (primitives are laid out here, never restyled); styles.css owns
   the page frame. Load order: tokens -> styles -> learn -> models. v14 motion: one-shot classes, all inside
   prefers-reduced-motion: no-preference (§17). Sections: 1 shared · 2 runner · 3 question · 4 answers · 5 feedback ·
   6 exam · 7 results · 8 review · 9 subject · 10 lesson · 11 next step · 12 progress · 13 toggles · 14 breakpoints ·
   15 a11y · 16 v6 · 17 motion. */

/* local tokens (built from tokens.css) */
:root {
  --learn-gap: var(--sp-4);            /* between blocks inside a learning column (styles.css: 16 → 20px) */
  --learn-bleed: var(--gutter);        /* how far a docked bar reaches past the column on phones */
  --opt-h: 56px;                       /* answer rows: 56px (spec 5.6) */
  --let-size: 28px;                    /* the letter square in an answer row */
}
@media (min-width: 900px) { :root { --learn-gap: var(--sp-5); } }

/* ==== 1. Shared bits on learning screens (<main class="wrap learn …">) ==== */
/* One quiet draft notice per screen */
.draftline { color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.45; }
.card > .draftline { margin: var(--sp-3) 0 0; }
.finishrow, .resetrow { text-align: center; }
/* v14: a bank failed to load: the subjects that still open without internet */
.card > .wait-av { margin: var(--sp-4) 0 var(--sp-2); }
.wait-here { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }

/* ==== 2. Runner frame (practice, diagnostic, mock): one column and a docked (sticky) action bar ==== */
.runner.focusmode { display: flex; flex-direction: column; gap: var(--learn-gap); }
.runner.focusmode > * { flex: none; margin: 0; }

.actionbar {
  position: sticky; bottom: 0; z-index: var(--z-sticky);
  padding: var(--sp-3) var(--learn-bleed) calc(var(--sp-3) + var(--safe-b));
  border-top: 1px solid var(--border-hairline);
  background: var(--page);
}
/* at the bottom of the screen when the question is short; full bleed on phones */
.runner.focusmode > .actionbar { margin: auto calc(-1 * var(--learn-bleed)) 0; }
.actionbar-in { display: flex; flex-direction: column; gap: var(--sp-2); max-width: var(--w-narrow); margin: 0 auto; }
/* v14 pair bar (practice before Check): the quiet "don't know" first, Check takes the rest, in one row whenever both
   labels fit (360px in tj and ru; 320px too). When they do not (page zoom, larger text, a narrow phone), the row wraps:
   "don't know" spans the first row and Check the second, so the bar never runs off the screen (fix A11Y-1: without the
   wrap the page grew wider than the phone and the docked bar slid below it). Check grows 999:1, so in one row "don't
   know" keeps its own width; the slimmer side padding keeps the one-row bar down to a 305px-wide screen in tj */
.actionbar.pair { padding-top: var(--sp-2); padding-bottom: calc(var(--sp-2) + var(--safe-b)); }
.actionbar.pair .actionbar-in { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
.actionbar.pair .actionbar-in > .btn { flex: 1 1 auto; width: auto; min-height: var(--control-h-lg); padding-inline: var(--sp-3); }
.actionbar.pair .actionbar-in > .btn.primary { flex: 999 1 auto; padding-inline: var(--sp-4); }
/* keyboard focus is never scrolled in under the docked bar (its full height on phones) */
.runner.focusmode button, .runner.focusmode a, .runner.focusmode input, .runner.focusmode summary {
  scroll-margin-bottom: calc(var(--control-h-lg) + var(--control-h) + var(--sp-12));
}

/* above the question: which round this is; on the first question the round note and the desktop keys */
.run-ctx { color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.runner.focusmode > .run-ctx + .qcard { margin-top: calc(-1 * var(--sp-2)); }
.run-note { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.5; max-width: var(--w-text); }
.run-keys { display: none; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.45; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) { .run-keys { display: block; } }
.runner.focusmode > .run-note + .draftline, .runner.focusmode > .draftline + .run-keys { margin-top: calc(-1 * var(--sp-2)); }

/* Exam timer chip (sits at the right of the focus app bar) */
.timer {
  display: inline-flex; align-items: center; gap: var(--sp-1); flex: none;
  min-height: 32px;
  padding: 0 var(--sp-2);
  border: 2px solid var(--ink-line);
  border-radius: var(--r-sm);
  background: var(--raised);
  color: var(--text-strong);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  white-space: nowrap;
}
.timer b { color: var(--text-strong); font: var(--fw-semibold) var(--fs-sm)/var(--lh-snug) var(--font-sans); font-variant-numeric: tabular-nums; }
.timer.low { border-color: var(--warn-fg); background: var(--warn-bg); color: var(--warn-fg); }
.timer.over { border-color: var(--bad-fg); background: var(--bad-bg); color: var(--bad-fg); }
.timer.low b { color: var(--warn-fg); }
.timer.over b { color: var(--bad-fg); }

/* the round in the focus bar: a 6px segment per question (ink now, green right, amber partly, red wrong). v14 fix
   (VIS-1): a 64px start, so beside the "1 / 10" square it still fits the 160px a 360px phone leaves next to the
   language switch (square 54 + gap 12 + 64) and keeps one row there; it grows into the rest. 320px wraps, as before */
.run-segs { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 3px; flex: 1 1 64px; min-width: 64px; }
.run-segs i { height: 6px; border-radius: 1px; background: var(--border-hairline); }
.run-segs i.now { background: var(--ink-line); }
.run-segs i.ok { background: var(--ok-fg); }
.run-segs i.part { background: var(--warn-fg); }
.run-segs i.bad { background: var(--bad-fg); }

/* Test and exam: the question number "3 / 21" in an orange square with an ink edge */
.qnum {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 48px; height: 32px;
  padding: 0 var(--sp-2);
  border: 2px solid var(--ink-line);
  border-radius: var(--r-xs);
  background: var(--brand);
  color: var(--text-on-brand);
  font: var(--fw-bold) var(--fs-sm)/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ==== 3. Question: header chips, topic, instruction, text at reading size ==== */
.qcard { min-width: 0; }
.qhead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1-5) var(--sp-2); }
.qid {
  color: var(--text-muted);
  font: var(--fw-medium) var(--fs-xs)/var(--lh-snug) var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.qtopic { margin: var(--sp-1) 0 0; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.45; }
.qhint { margin: var(--sp-2) 0 0; color: var(--text); font-size: var(--fs-sm); line-height: 1.5; }

/* "?" toggle with the instruction, pinned right in the header row; open, the text takes the next row */
.qhead.hashelp { position: relative; padding-inline-end: var(--sp-8); }
.qhelp > summary {
  position: absolute; top: -10px; right: -10px;   /* a 44px target centred on the 24px row */
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  cursor: pointer;
  list-style: none;
}
.qhelp > summary::-webkit-details-marker { display: none; }
.qmark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-xs);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
}
.qhelp[open] { flex: 1 0 100%; }
.qhelp[open] .qmark { border-color: var(--ink-line); background: var(--ink-line); color: var(--text-on-ink); }
@media (hover: hover) { .qhelp > summary:hover .qmark { border-color: var(--border-strong-hover); color: var(--text-strong); } }
.qhelp > p { margin: var(--sp-1) 0 0; color: var(--text); font-size: var(--fs-sm); line-height: 1.5; }

/* The question itself (an <h1> for focus): v14 Onest 600 at 19-21px, so it outranks its 16px answers */
.qcard .qtext {
  margin: var(--sp-3) 0 var(--sp-4);
  color: var(--text-strong);
  font: var(--fw-semibold) var(--fs-question)/1.42 var(--font-sans);
  letter-spacing: var(--ls-normal);
  text-wrap: pretty;
}
/* the fit gate (m3) at 360x640: 79 % / 89 % at 19px, so short screens cap the question at 18px and tighten its margins */
@media (max-height: 700px) { .qcard .qtext { margin: var(--sp-2) 0 var(--sp-3); font-size: 1.125rem; } .qcard .opts { gap: 6px; } }
/* v14 (L11): sub/superscripts (sciHtml) as small text-font digits, so a formula reads like maths */
#main sub, #main sup { position: relative; font-size: .68em; line-height: 0; vertical-align: baseline; }
#main sub { bottom: -.28em; } #main sup { top: -.52em; }
/* Question text quoted inside a review item or on the report page */
.qtext.small { margin: 0; color: var(--text-strong); font-size: var(--fs-base); font-weight: var(--fw-medium); line-height: 1.5; }

/* ==== 4. Answers ==== */

/* 4a. One answer: a 56px row with a 2px edge, the letter in a 28px square with an ink edge (spec 5.6) */
.opts { display: flex; flex-direction: column; gap: var(--sp-2); }
.opt {
  -webkit-appearance: none; appearance: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3);
  width: 100%;
  min-height: var(--opt-h);
  padding: var(--sp-2) var(--sp-3);
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  background: var(--raised);
  color: var(--text-strong);
  font: var(--fw-medium) var(--fs-base)/1.4 var(--font-sans);
  text-align: start;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
@media (hover: hover) and (pointer: fine) { .opt:not([disabled]):hover { border-color: var(--ink-line); background: var(--raised); } }
.opt:not([disabled]):active { background: var(--brand-tint-2); }
.let {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--let-size); height: var(--let-size);
  border: 1.5px solid var(--ink-line);
  border-radius: var(--r-sm);
  background: var(--raised);
  color: var(--text-strong);
  font: var(--fw-bold) var(--fs-sm)/1 var(--font-sans);
}
.otext { flex: 1 1 0; min-width: 0; padding-block: 3px; }
/* after Check: a glyph and a word on the right ("Right" / "Your answer"), so the state never rests on colour */
.ostate { display: inline-flex; align-items: center; gap: var(--sp-1); flex: none; margin-inline-start: auto; font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.2; }
.opt .mark { flex: none; width: 18px; height: 18px; }

/* chosen (before Check): ink edge on the light orange tint, the letter filled ink */
.opt.on { border-color: var(--ink-line); background: var(--brand-tint-2); }
@media (hover: hover) and (pointer: fine) { .opt.on:not([disabled]):hover { border-color: var(--ink-line); background: var(--brand-tint); } }
.opt.on .let { border-color: var(--ink-line); background: var(--ink-line); color: var(--text-on-ink); }

/* after Check: green = the right one, red = yours if wrong; the rest dim */
.opt[disabled] { cursor: default; }
.opt[disabled]:not(.on):not(.right) { color: var(--text-muted); }
.opt[disabled]:not(.on):not(.right) .let { border-color: var(--border); color: var(--text-muted); }
.opt.right { border-color: var(--ok-fg); background: var(--ok-bg); }
.opt.right .let { border-color: var(--ok-fg); background: var(--ok-fg); color: var(--text-on-ink); }
.opt.wrong { border-color: var(--bad-fg); background: var(--bad-bg); }
.opt.wrong .let { border-color: var(--bad-fg); background: var(--bad-fg); color: var(--text-on-ink); }
.opt.right .ostate { color: var(--ok-fg); }
.opt.wrong .ostate { color: var(--bad-fg); }

/* 4b. Match: the right-hand list as one lettered box, then a letter group per row */
.rightlist {
  margin: 0 0 var(--sp-3);
  padding: 0;
  list-style: none;
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-sm);
  background: var(--raised);
}
.rightlist li {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  color: var(--text-strong);
  line-height: 1.45;
}
.rightlist li + li { border-top: 1px solid var(--border-hairline); }
.rightlist.small li { padding: var(--sp-1-5) var(--sp-3); font-size: var(--fs-sm); }
.rl, .mn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 24px; height: 24px;
  padding: 0 var(--sp-1);
  border: 1.5px solid var(--ink-line);
  border-radius: var(--r-xs);
  background: var(--raised);
  color: var(--text-strong);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.mrows { display: flex; flex-direction: column; gap: var(--sp-2); }
.mrow {
  padding: var(--sp-3);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-md);
  background: var(--raised);
}
.mleft { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-3); color: var(--text-strong); line-height: 1.45; }
.mbtns { display: flex; gap: var(--sp-1-5); }
.mb {
  -webkit-appearance: none; appearance: none;
  flex: 1 1 0; min-width: 44px; max-width: 64px;
  min-height: var(--control-h);
  padding: 0;
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  background: var(--raised);
  color: var(--text-strong);
  font: var(--fw-bold) var(--fs-base)/1 var(--font-sans);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
@media (hover: hover) and (pointer: fine) { .mb:not([disabled]):hover { border-color: var(--ink-line); } }
.mb:not([disabled]):active { background: var(--brand-tint-2); }
.mb.on { border-color: var(--ink-line); background: var(--ink-line); color: var(--text-on-ink); }
@media (hover: hover) and (pointer: fine) { .mb.on:not([disabled]):hover { background: var(--ink-line); } }
.mb[disabled] { cursor: default; }
.mb[disabled]:not(.on):not(.should) { border-color: var(--border); color: var(--text-faint); }
.mb.right { border-color: var(--ok-fg); background: var(--ok-fg); color: var(--text-on-ink); }
.mb.wrong { border-color: var(--bad-fg); background: var(--bad-fg); color: var(--text-on-ink); }
.mb.should { border: 2px dashed var(--ok-fg); background: var(--ok-bg); color: var(--ok-fg); }
/* v14: once chosen, the row says in words what it was matched with */
.mpick { margin: var(--sp-2) 0 0; color: var(--text); line-height: 1.4; }
.mpick b { color: var(--text-strong); }
@media (min-width: 600px) { .mrow { flex-wrap: wrap; } .mpick { flex: 1 0 100%; } }

/* 4c. Number answer: a big mono field sized by --d (max digits) */
.numwrap { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1-5); max-width: 100%; }
.numlabel { color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
input.num {
  -webkit-appearance: none; appearance: none;
  width: calc(var(--d, 4) * 1.25ch + 2 * var(--sp-4) + 2px);
  min-width: 7.5ch;
  max-width: 100%;
  height: 60px;
  padding: 0 var(--sp-4);
  border: 2px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--raised);
  color: var(--text-strong);
  font: var(--fw-semibold) 1.75rem/1 var(--font-sans);
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease-std);
}
@media (hover: hover) and (pointer: fine) { input.num:not([disabled]):hover { border-color: var(--ink-line); } }
input.num:focus { border-color: var(--ink-line); }
input.num[disabled] { opacity: 1; -webkit-text-fill-color: var(--text-strong); }
input.num.right { border-color: var(--ok-fg); background: var(--ok-bg); }
input.num.wrong { border-color: var(--bad-fg); background: var(--bad-bg); }

/* ==== 5. Feedback strip, "saved for review", explanation ==== */
.fb {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-md);
  background: var(--sunken);
  color: var(--text-strong);
}
.fb .ic { flex: none; width: 22px; height: 22px; }
.fb b { flex: 1 1 0; min-width: 0; color: inherit; font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.fbpts { flex: none; font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.fb.ok   { border-color: var(--ok-bd);   background: var(--ok-bg);   color: var(--ok-fg); }
.fb.part { border-color: var(--warn-bd); background: var(--warn-bg); color: var(--warn-fg); }
.fb.bad  { border-color: var(--bad-bd);  background: var(--bad-bg);  color: var(--bad-fg); }
.fb.dk .ic { color: var(--text-muted); }

/* "Saved for review" under an answer that was not fully right: neutral, the rule behind a toggle */
.saved { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.45; }
.runner.focusmode > .saved { margin-top: calc(-1 * var(--sp-2)); }
.saved > summary .ic { width: 18px; height: 18px; color: var(--text-muted); }
.saved > p { margin: 0; padding: 0 0 var(--sp-2) 26px; color: var(--text); }
p.saved { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; margin: 0; }
p.saved .ic { flex: none; width: 18px; height: 18px; }

.explain {
  padding: var(--sp-4);
  border-left: 4px solid var(--ink-line);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--sunken);
}
.explain > * { margin: 0; }
.explain > * + * { margin-top: var(--sp-3); }
.explain-h { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-strong); font-weight: var(--fw-bold); }
.explain-h .ic { color: var(--text-strong); }
.rightans { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-hairline); border-radius: var(--r-sm); background: var(--raised); }
.rightans b { color: var(--text-strong); }
.explain .etext { color: var(--text); line-height: var(--lh-body); }
.explain > .btn { margin-top: var(--sp-4); }
.mbox:not(:empty) { margin-top: var(--sp-3); }
.reportrow a {
  display: inline-flex; align-items: center; gap: var(--sp-1-5);
  min-height: 44px;
  color: var(--text-muted);
  text-decoration-color: var(--border-strong);
}
@media (hover: hover) and (pointer: fine) { .reportrow a:hover { color: var(--text-link-hover); } }
.explain > .reportrow { margin-top: var(--sp-1); margin-bottom: calc(-1 * var(--sp-2)); }

/* ==== 6. Exam pieces: prev/next, palette, confirm, intro facts ==== */
.navrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.navrow .btn { width: 100%; }

.palette {
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-lg);
  background: var(--raised);
}
.palette > summary {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 48px;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-lg);
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  list-style: none;
}
.palette .grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: var(--sp-1-5);
  padding: 0 var(--sp-3) var(--sp-3);
}
.pq {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 44px; min-height: 48px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--raised);
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
@media (hover: hover) and (pointer: fine) { .pq:hover { border-color: var(--ink-line); } }
.pqn { color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.pqa { color: var(--text-faint); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.pq.done { border-color: var(--ink-line); background: var(--sunken); }
.pq.done .pqa { color: var(--text-strong); }
/* the question on screen: the orange square with an ink edge */
.pq.cur { padding: 1px; border-width: 2px; border-color: var(--ink-line); background: var(--brand); }
.pq.cur .pqn, .pq.cur .pqa { color: var(--text-on-brand); }

.blanks { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-1-5); margin: var(--sp-3) 0; }
.blanks .pq { min-height: 44px; }
.card.center > .stack { margin-top: var(--sp-4); }
.timeup > .ic.big { display: block; margin: 0 auto var(--sp-3); color: var(--text-muted); }

/* mock intro: facts, settings and Start in one card (Start on the first 360x640 screen), then the rules */
.facts { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: 0 0 var(--sp-4); color: var(--text-strong); font-weight: var(--fw-semibold); }
.facts span { display: inline-flex; align-items: center; gap: var(--sp-1-5); }
.facts .ic { color: var(--text-muted); }
.setrow { display: flex; flex-direction: column; gap: var(--sp-1-5); }
.setrow + .setrow { margin-top: var(--sp-3); }
.setlabel { color: var(--text-strong); font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.mockstart > .stack { margin-top: var(--sp-5); }
/* Restart in progress: the confirm step sits under Continue, inside the same card */
.mockstart > .confirm { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border-hairline); }.mockinfo { margin-top: var(--sp-8); }
.mockinfo > * { margin: 0; }
.mockinfo > .h3 { margin-bottom: var(--sp-3); }
.mockinfo > p { margin-top: var(--sp-3); }
.mockinfo > .plain + p { margin-top: var(--sp-5); }
.learn .card > .h3 + .segctl { margin-bottom: var(--sp-2); }
.learn .card > .small:last-child { margin-bottom: 0; }

/* ==== 7. Scores and results ==== */
.score { text-align: center; }
.score > * { margin: 0; }
.score > * + * { margin-top: var(--sp-2); }
.score > .eyebrow + * { margin-top: var(--sp-1); }
.bignum {
  color: var(--text-strong);
  font: var(--fw-display) var(--fs-display)/var(--lh-tight) var(--font-display);
  letter-spacing: var(--ls-tight);
  font-variant-numeric: lining-nums tabular-nums;
  overflow-wrap: normal;
}
.bignum small {
  margin-inline-start: .25em;
  color: var(--text-muted);
  font: var(--fw-medium) var(--fs-md)/1.2 var(--font-sans);
  letter-spacing: 0;
  white-space: nowrap;   /* "/ 500" never splits */
}
/* phones: a range such as "≈ 440–495 / 500" stays on one line, so the first button stays on the 640 px screen */
@media (max-width: 599px) { .mres-score .bignum { font-size: 2.25rem; } }
.score .h3 { margin-top: var(--sp-3); }
.score .est { margin-top: var(--sp-4); color: var(--text-strong); font-size: var(--fs-md); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.score .estlabel { margin-top: 0; color: var(--text-muted); font-size: var(--fs-sm); }
.score > .small { max-width: 52ch; margin-inline: auto; }
.score .note { margin-top: var(--sp-4); text-align: start; }
/* key score cards (summary, mock result): left-aligned, a sticker on the corner, the first lines clear of it */
.sum-score, .mres-score { text-align: start; }
.sum-score > .small, .mres-score > .small { margin-inline: 0; }
.score > .sticker + * { margin-top: 0; }
.score.has-sticker > .eyebrow, .score.has-sticker > .pageh { padding-inline-end: 56px; }
.sum-score .sticker.tr, .mres-score .sticker.tr { top: -22px; right: 6px; }
.mres-score .sticker { width: 52px; }
/* room above the card for the sticker's overhang, so it never touches the app bar */
.learn .score.has-sticker { margin-top: var(--sp-6); }

.srow { display: block; padding: var(--sp-3) 0; color: inherit; text-decoration: none; }
.srow + .srow { border-top: 1px solid var(--border-hairline); }
.card > .h3 + .srow { padding-top: var(--sp-1); }
.card > .srow:last-child { padding-bottom: 0; }
.slabel {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-3);
  margin-bottom: var(--sp-2);
  color: var(--text);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

/* v14 results (L4): the title in Geologica at every width, a 64px calculator; the subjects as 2x2 tinted tiles */
.wrap.results .res-score .pageh { padding-inline-end: 64px; font: var(--fw-display) var(--fs-lg)/var(--lh-heading) var(--font-display); letter-spacing: var(--ls-snug); }
.wrap.results .res-score > .sticker { width: 64px; }
.res-subj > .res-wt { margin-top: var(--sp-1); color: var(--text-muted); }
.res-wt b { color: var(--text-strong); }
.res-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
.res-tile { display: flex; flex-direction: column; gap: var(--sp-1-5); min-width: 0; padding: var(--sp-3); border: 1px solid rgb(var(--ink-rgb) / .12); border-radius: var(--r-md); }
.res-tile.taj { background: var(--taj-bg); } .res-tile.bio { background: var(--bio-bg); }
.res-tile.chem { background: var(--chem-bg); } .res-tile.phys { background: var(--phys-bg); }
.res-tile > * { margin: 0; }
.res-tn { display: flex; align-items: center; gap: var(--sp-1-5); min-width: 0; color: var(--text-strong); font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.25; overflow-wrap: anywhere; }
.res-tv { color: var(--text-muted); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.res-tv b { color: var(--text-strong); font: var(--fw-display) var(--fs-pair)/1.1 var(--font-display); }
.res-tile > .bar { margin-top: auto; background: rgb(var(--ink-rgb) / .08); }
.res-tno { color: var(--text-muted); }

.weak { margin: 0; padding: 0; list-style: none; }
.weak li + li { border-top: 1px solid var(--border-hairline); }
@media (hover: hover) and (pointer: fine) { .weak .row:hover .rowmain { color: var(--text-link-hover); text-decoration: underline; text-decoration-color: var(--link-underline); } }

/* 2025 cutoffs: bands, not "≈ d points to go" */
.tablewrap { overflow-x: auto; }
table.cut { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.4; }
.cut th, .cut td { padding: var(--sp-2); border-bottom: 1px solid var(--border-hairline); text-align: start; vertical-align: top; }
.cut th:first-child, .cut td:first-child { padding-inline-start: 0; }
.cut th:last-child, .cut td:last-child { padding-inline-end: 0; }
.cut th { color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.cut tbody tr:last-child td { border-bottom: 0; }
.cut td b { color: var(--text-strong); font-variant-numeric: tabular-nums; }
.cut .band { display: inline-block; margin-top: 2px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.cut .band.ok  { color: var(--ok-fg); }
.cut .band.mid { color: var(--warn-fg); }
.cut .band.far { color: var(--text-muted); }
.card > .tablewrap + .small { margin-top: var(--sp-3); }

/* Round summary: the score, then what the round changed; a mixed round adds a line per subject */
/* compact, so the next-step card below it stays on the first screen at 360x640 */
.sum-score .bignum { font-size: var(--fs-display); line-height: 1; letter-spacing: -.035em; }
.score.sum-score .h3 { margin-top: var(--sp-1); font-size: var(--fs-base); line-height: var(--lh-snug); }
/* quiet tables: the summary's lines per subject (.sum-table) and the mock result by type and subject (.mres-table) */
.sum-table, .mres-table { width: 100%; margin-top: var(--sp-3); border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.4; font-variant-numeric: tabular-nums; }
.sum-table th, .sum-table td, .mres-table th, .mres-table td { padding: var(--sp-2) 0 var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border-hairline); text-align: start; vertical-align: middle; }
.sum-table th:first-child, .mres-table th:first-child { padding-inline-start: 0; }
.sum-table thead th, .mres-table thead th { color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.sum-table tbody th, .mres-table tbody th { color: var(--text); font-weight: var(--fw-regular); }
.sum-table thead th + th, .sum-table td, .mres-table thead th + th, .mres-table td { text-align: end; }
.sum-table td, .mres-table td { color: var(--text-strong); font-weight: var(--fw-semibold); white-space: nowrap; }
.sum-table tbody tr:last-child > *, .mres-table tbody tr:last-child > * { border-bottom: 0; }
.mres-table + .small, .mres-wrap + .small { margin-top: var(--sp-3); }
/* a subject's range "≈ x–y" with "of W" under it on phones (beside it from 600px); close columns fit Russian */
.mres-table th, .mres-table td { padding-inline-start: var(--sp-2); }
.mres-table thead th { hyphens: auto; }
.mres-est > span, .mres-est > small { white-space: nowrap; }
.mres-est > small { display: block; color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-regular); }
/* mock result, where points were lost: "Practise" sits at the top of its row, next to the topic name */
.mres-lost .trow { align-items: flex-start; }
.mres-lost .btn.small { min-height: 44px; }
/* a wide table (200% text) scrolls inside its card instead of widening the page */
.mres-wrap { max-width: 100%; overflow-x: auto; }
.score .sum-facts { margin: var(--sp-3) 0 0; padding: var(--sp-3) 0 0; border-top: 1px solid var(--border-hairline); list-style: none; text-align: start; }
.sum-facts li { display: flex; align-items: flex-start; gap: var(--sp-2); color: var(--text); font-size: var(--fs-sm); line-height: 1.45; }
.sum-facts li + li { margin-top: var(--sp-2); }
.sum-facts .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--text-muted); }
/* #/mix and #/mix/review with nothing to do yet: one sentence, then the next step */
.mix-empty > * { margin: 0; }
.mix-empty > * + * { margin-top: var(--sp-2); }

/* Retake: a confirm card in place of the button */
.card.confirm { border-color: var(--border); }
.confirmcard .blanks .pq { min-width: 48px; }
.confirm > p { margin: 0 0 var(--sp-3); color: var(--text-strong); }

/* ==== 8. Review items (<details class="rev ok|part|bad">): the state colours only the badge ==== */
.rev {
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-md);
  background: var(--raised);
  color: var(--text);                  /* never inherit a feedback colour from a bare .ok/.bad rule */
  font-weight: var(--fw-regular);
}
.rev + .rev, .h3 + .rev { margin-top: var(--sp-2); }
.learn .segctl + .rev { margin-top: var(--sp-3); }
.learn .card > .segctl { margin-bottom: var(--sp-1); }
.rev > summary {
  display: flex; align-items: center; gap: var(--sp-2) var(--sp-3);
  min-height: 48px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  cursor: pointer;
  list-style: none;
}
.revt { flex: 1 1 auto; min-width: 0; color: var(--text); line-height: 1.4; }
.rev .pts { flex: none; color: var(--text-muted); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.revbody { padding: var(--sp-3); border-top: 1px solid var(--border-hairline); }
.revbody > * { margin: 0; }
.revbody > * + * { margin-top: var(--sp-3); }
.revbody .explain { padding: 0 0 0 var(--sp-3); border-radius: 0; background: none; }
.revbody .rightlist { margin: 0; }

/* ==== 9. Subject page: actions, topic rows, group headers ==== */
.actions, .topiclist {
  overflow: hidden;
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-lg);
  background: var(--raised);
}
.arow, .trow {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 60px;
  padding: var(--sp-3) var(--sp-4);
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-std);
}
.arow + .arow, .trow + .trow { border-top: 1px solid var(--border-hairline); }
@media (hover: hover) and (pointer: fine) { a.arow:hover, a.trow:hover { background: var(--raised-hover); color: var(--text); } }
a.arow:active, a.trow:active { background: var(--raised-active); }
.arow:focus-visible, .trow:focus-visible { outline-offset: -2px; }

.grouph {
  margin: var(--sp-6) 0 var(--sp-2);
  color: var(--text-muted);
  font: var(--fw-semibold) var(--fs-sm)/var(--lh-snug) var(--font-sans);
  letter-spacing: var(--ls-label);
}
.block > .h2 + .grouph { margin-top: var(--sp-2); }
.trow-main { display: flex; flex-direction: column; gap: var(--sp-1-5); flex: 1 1 auto; min-width: 0; }
.trow-main b { color: var(--text-strong); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.trow-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.trow-meta .ic { color: var(--text-muted); }
.trow-main .bar { margin-top: 2px; }
.trow .btn.small { flex: none; }
/* inside a card (mock result: where points were lost): plain rows */
.topiclist.flat { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
.topiclist.flat .trow { min-height: 56px; padding-inline: 0; }

/* 9b. Subject roadmap (#/s/<s>): phones one column (ready, actions, roadmap, exam part; .road-side has no box);
   from 1024px the roadmap left and a sticky rail (styles.css .layout-2 / .rail) with the actions and the exam part */
.wrap.road-page { max-width: calc(var(--w-narrow) + 2 * var(--gutter)); }

/* the header: a band in the subject's tint, the code square, the name, the facts, the sticker on the corner */
.road-head { margin-bottom: var(--sp-8); }
.road-head > .backlink + .road-band { margin-top: var(--sp-2); }
.road-band {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  border: 1px solid rgb(var(--ink-rgb) / .1);
  border-radius: var(--r-sm);
  background: var(--sunken);
}
.road-band.taj { background: var(--taj-bg); }
.road-band.bio { background: var(--bio-bg); }
.road-band.chem { background: var(--chem-bg); }
.road-band.phys { background: var(--phys-bg); }
.road-code {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px;
  border: 1.5px solid var(--ink-line);
  border-radius: var(--r-xs);
  background: var(--raised);
  color: var(--text-strong);
  font: var(--fw-display) var(--fs-base)/1 var(--font-display);
}
.road-band.taj .road-code { background: var(--taj-fill); }
.road-band.bio .road-code { background: var(--bio-fill); }
.road-band.chem .road-code { background: var(--chem-fill); }
.road-band.phys .road-code { background: var(--phys-fill); }
.road-title { flex: 1 1 auto; min-width: 0; }
.road-title .pageh { margin: 0; overflow-wrap: normal; hyphens: auto; }
@media (max-width: 599px) { .road-title .pageh { font-size: var(--fs-xl); } }
.road-band .road-meta { margin: var(--sp-1-5) 0 0; padding-inline-end: 72px; color: var(--text); }   /* clear of the sticker */
/* every sticker fits one square box (tall flask, wide piyola), kept in the band's empty right column */
.road-band .sticker { width: 76px; height: 76px; object-fit: contain; object-position: center bottom; bottom: -20px; right: 6px; }
.road-meta { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.45; font-variant-numeric: tabular-nums; }
/* v14: the band's facts as number pairs (a big Geologica number over a 13px grey label) */
.road-pairs { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: var(--sp-2) 0 0; }
.road-pairs .pair { display: flex; flex-direction: column; min-width: 0; }
.road-pairs b { color: var(--text-strong); font: var(--fw-display) var(--fs-pair)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.road-pairs .pair > span { max-width: 10ch; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.25; }

.road-grid { gap: var(--learn-gap); }
.road-grid > *, .road-side > * { margin: 0; }
.road-side { display: contents; }
.road-ready { order: 0; }
.road-act { order: 1; }
.road-map { order: 2; margin-top: var(--sp-2); }
.road-exam { order: 3; }

/* "Know well n of N": one square segment per topic in the subject's fill with an ink edge; half-filled = almost */
.road-ready { display: flex; flex-direction: column; gap: var(--sp-2); }
.road-rl { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); margin: 0; }
.road-rl b { color: var(--text-strong); font-weight: var(--fw-bold); }
.road-segs { display: flex; gap: 3px; }
.road-segs i { flex: 1 1 0; height: 10px; border: 1px solid var(--border); border-radius: var(--r-xs); background: var(--track); }
.road-segs i.s2, .road-segs i.s3 { border-color: var(--ink-line); }
.road-segs.taj i.s3 { background: var(--taj-fill); }
.road-segs.bio i.s3 { background: var(--bio-fill); }
.road-segs.chem i.s3 { background: var(--chem-fill); }
.road-segs.phys i.s3 { background: var(--phys-fill); }
/* v14: "almost" is a half-filled square (shape carries the state; forced colours: §15) */
.road-segs i.s2 { background: var(--raised); }
.road-segs.taj i.s2 { box-shadow: inset 0 -4px 0 var(--taj-fill); } .road-segs.bio i.s2 { box-shadow: inset 0 -4px 0 var(--bio-fill); }
.road-segs.chem i.s2 { box-shadow: inset 0 -4px 0 var(--chem-fill); } .road-segs.phys i.s2 { box-shadow: inset 0 -4px 0 var(--phys-fill); }

.road-act { display: flex; flex-direction: column; gap: var(--sp-3); }
.road-act > * { margin: 0; }
.road-act > .why { margin-top: calc(-1 * var(--sp-2)); }
/* a one-line verb label and the arrow; the topic and "n questions · ≈m min" in .btn-meta above */
.road-cta > .ic { flex: none; }
.road-act > .btn-meta + .road-cta { margin-top: calc(-1 * var(--sp-2)); }
.road-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.road-chips > li { display: flex; min-width: 0; }
.road-chip .badge { min-height: 20px; padding-block: 0; }

.road-map > .h3 { margin: 0 0 var(--sp-3); }
.road-group + .road-group { margin-top: var(--sp-6); }
.road-gh {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-3);
  margin: 0 0 var(--sp-1);
  color: var(--text-muted);
  font: var(--fw-semibold) var(--fs-sm)/var(--lh-snug) var(--font-sans);
  letter-spacing: var(--ls-label);
}
.road-gn { color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: 0; white-space: nowrap; }
/* topic rows: plain hairline rows on the page (no box), an ink status square at the start */
.road-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); }
.road-list > li + li { border-top: 1px solid var(--border-hairline); }
.road-row {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 60px;
  padding: var(--sp-3) var(--sp-1);
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-std);
}
@media (hover: hover) and (pointer: fine) { .road-row:hover { background: var(--raised-hover); color: var(--text); } }
.road-row:active { background: var(--raised-active); }
.road-row:focus-visible { outline-offset: -2px; }
/* "you are here": the row of the next step, on the light orange tint with an ink rule at the start */
.road-row.is-next { padding-inline-start: calc(var(--sp-1) + var(--sp-2)); border-left: 3px solid var(--ink-line); background: var(--brand-tint-2); }
@media (hover: hover) and (pointer: fine) { .road-row.is-next:hover { background: var(--brand-tint); } }
.road-glyph { flex: none; width: 24px; height: 24px; color: var(--ink-line); }
.road-glyph .rg-tick { stroke: var(--text-on-ink); }
/* v14: a secured topic in the subject's own fill, with an ink edge and an ink tick */
.road-page .road-glyph.secured rect { stroke: var(--ink-line); stroke-width: 1.5px; }
.road-page .road-glyph.secured .rg-tick { stroke: var(--ink-line); }
.road-page.taj .road-glyph.secured rect { fill: var(--taj-fill); } .road-page.bio .road-glyph.secured rect { fill: var(--bio-fill); }
.road-page.chem .road-glyph.secured rect { fill: var(--chem-fill); } .road-page.phys .road-glyph.secured rect { fill: var(--phys-fill); }
.road-glyph.new { color: var(--border-strong); }
.road-glyph.soon { color: var(--text-faint); }
.road-main { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.road-main b { color: var(--text-strong); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.road-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.4; font-variant-numeric: tabular-nums; }
.road-tag { flex: none; padding: 1px var(--sp-2); border: 1px solid var(--border-hairline); border-radius: var(--r-sm); background: var(--sunken); color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: var(--lh-snug); max-width: 100%; overflow-wrap: anywhere; }
.road-tag.next, .road-tag.check { border-color: var(--brand-bd); background: var(--brand-tint); color: var(--text-strong); }
.road-legend { display: flex; flex-wrap: wrap; gap: var(--sp-1-5) var(--sp-4); margin: var(--sp-4) 0 0; padding: 0; list-style: none; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.35; }
.road-legend li { display: inline-flex; align-items: center; gap: var(--sp-1-5); }
.road-legend .road-glyph { width: 16px; height: 16px; }
.road-map > .why { margin-top: var(--sp-2); }
.road-exam > .h3 { margin: 0 0 var(--sp-2); }
.road-exam > .plainlist + .small { margin-top: var(--sp-3); }

@media (min-width: 600px) {
  .road-band { padding: var(--sp-5) var(--sp-5) var(--sp-6); }
  .road-band .road-meta { padding-inline-end: 112px; }
  .road-band .sticker { width: 104px; height: 104px; right: 16px; }
}
@media (min-width: 1024px) {
  .wrap.road-page { max-width: calc(var(--w-page) + 2 * var(--gutter)); }
  .road-grid { row-gap: var(--sp-6); }
  .road-ready { grid-column: 1; grid-row: 1; }
  .road-map { grid-column: 1; grid-row: 2; margin-top: 0; }
  .road-side { display: flex; grid-column: 2; grid-row: 1 / span 2; }
  .road-act { padding: var(--card-pad); border: 2px solid var(--ink-line); border-radius: var(--r-lg); background: var(--raised); }
  /* in the rail the secondary links stack, one per line */
  .road-chips { flex-direction: column; }
  .road-chip { flex: 1 1 auto; justify-content: flex-start; }
  .road-chip .badge { margin-inline-start: auto; }
}

/* ==== 10. Topic lesson: a document column + the rail (on phones the rail is a sticky CTA bar) ==== */
.lessoncol > * { margin: 0; }
.lessoncol > * + * { margin-top: var(--learn-gap); }
.lessoncol > .why { margin-top: var(--sp-1); }
.topicmeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1-5) var(--sp-3); }
.topicmeta .small { color: var(--text-muted); }

.lesson > * { max-width: var(--w-text); }
.lesson .h3 .ic, .modelcard .h3 .ic { color: var(--text-muted); }
.ideas { margin: 0; padding-inline-start: 1.25em; color: var(--text); font-size: var(--fs-reading); line-height: var(--lh-body); }
.ideas li + li { margin-top: var(--sp-2); }
.ideas li::marker { color: var(--text-faint); }
.lesson .h4 { margin: var(--sp-6) 0 var(--sp-3); }
.formulas { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.formulas li { max-width: 100%; }
.formulas code {
  display: inline-block;
  max-width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid rgb(var(--ink-rgb) / .1);
  border-radius: var(--r-sm);
  background: var(--sunken);
  color: var(--text-strong);
  font: var(--fw-medium) var(--fs-reading)/1.4 var(--font-sans);
  font-variant-numeric: tabular-nums;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Common mistakes: a quiet warn tint */
.card.warnbox { border-color: var(--warn-bd); background: var(--warn-bg); box-shadow: none; }
.warnbox .h3, .warnbox .h3 .ic { color: var(--warn-fg); }
.warnbox .ideas li::marker { color: var(--warn-fg); }
.modelcard > .btn { margin-top: var(--sp-1); }
/* the lesson reads as a document: text on the page, mistakes a quiet tinted note, the model framed */
.les-doc { padding-top: var(--sp-2); }
.les-doc > .h3 { margin: 0 0 var(--sp-3); }
/* key ideas: a numbered list with ink number squares, the text at reading size in a 68ch column */
.lesson.les-doc > * { max-width: 68ch; }
.les-ideas { padding: 0; list-style: none; counter-reset: idea; }
.les-ideas > li { position: relative; padding-inline-start: 40px; counter-increment: idea; }
.les-ideas > li::before {
  content: counter(idea);
  position: absolute; top: .2em; left: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: var(--r-xs);
  background: var(--ink-line);
  color: var(--text-on-ink);
  font: var(--fw-bold) var(--fs-xs)/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.les-ideas > li + li { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border-hairline); }
.les-ideas > li + li::before { top: calc(var(--sp-3) + .2em); }
/* v14: the facts about the lesson (NTC share, the Russian-exam note, how levels work) close the reading */
.les-about { max-width: var(--w-text); padding-top: var(--sp-4); border-top: 1px solid var(--border-hairline); }
.les-about > * { margin: 0; }
.les-about > * + * { margin-top: var(--sp-2); }
@media (max-width: 599.98px) { .topic .subjhead .pageh { font-size: var(--fs-xl); } }
.les-note { max-width: 68ch; padding: var(--sp-4); border: 1px solid rgb(var(--ink-rgb) / .1); border-radius: var(--r-md); background: var(--warn-bg); }
.les-note > .h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-base); }
.les-note .ideas { font-size: var(--fs-base); }
.lessoncol > .modelcard, .lessoncol > .readrow, .lessoncol > .pn { max-width: var(--w-text); }

.readrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.readdone { display: inline-flex; align-items: center; gap: var(--sp-1-5); min-height: var(--control-h); margin: 0; color: var(--ok-fg); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.readdone .ic { width: 20px; height: 20px; }

/* previous / next topic: stacked full rows on phones (whole names fit), side by side from 600px */
.pn { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
.pn .btn { min-width: 0; justify-content: flex-start; min-height: 60px; padding-block: var(--sp-2); text-align: start; }
.pn .btn.pnext { justify-content: space-between; }
.pn .btn2 { display: block; min-width: 0; }
.pn .btn2 small { display: block; }
.pn .btn2 > span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--fs-sm); }
.pn .btn2 small { color: var(--text-muted); opacity: 1; }
@media (min-width: 600px) {
  .pn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn .btn.pnext { justify-content: flex-end; }
  .pn .pnext .btn2 { text-align: end; }
  /* the first or last topic: the lone link takes the full row */
  .pn > .btn:only-child { grid-column: 1 / -1; }
  .pn > .pnext:only-child { justify-content: space-between; }
  .pn > .pnext:only-child .btn2 { text-align: start; }
}

/* Phones and tablets: the rail is one docked bar above the tab bar, part of the flow (sticky) */
.topic .rail {
  position: sticky; bottom: calc(var(--tabbar-h) + 1px + var(--safe-b)); z-index: var(--z-sticky);   /* 1px = the tab bar's top hairline */
  margin-inline: calc(-1 * var(--learn-bleed));
  padding: var(--sp-2) var(--learn-bleed);
  border-top: 1px solid var(--border-hairline);
  background: var(--page);
}
.railmeta { display: none; margin: 0; }
/* v14: below 1024px the count sits inside the button (.rail-n); from 1024px .btn-meta above it */
.topic .rail > .btn-meta { display: none; }
.rail-l { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.rail-n { font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1.2; font-variant-numeric: tabular-nums; }
.rail-cta > .ic { flex: none; }
/* keyboard focus in the lesson is never scrolled in under the CTA bar and the tab bar */
.topic .lessoncol button, .topic .lessoncol a, .topic .lessoncol summary {
  scroll-margin-bottom: calc(var(--tabbar-h) + var(--control-h-lg) + var(--sp-10));
}
/* v14: a lesson with practice has no tab bar (notabs): the docked bar sits on the bottom edge */
@media (max-width: 899.98px) {
  .topic.notabs .rail { bottom: var(--safe-b); }
  .topic.notabs .lessoncol button, .topic.notabs .lessoncol a, .topic.notabs .lessoncol summary {
    scroll-margin-bottom: calc(var(--control-h-lg) + var(--sp-10));
  }
}

/* ==== 11. Next-step card (stepCard: Home, subject page, summaries, results, progress) ==== */
.today { display: flex; flex-direction: column; gap: var(--sp-3); }
.today > * { margin: 0; }
.today-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
.today-h .eyebrow { margin: 0; }
.today .h3 { margin: 0; }
.today .why { margin-top: calc(-1 * var(--sp-1)); }
.activeline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1-5) var(--sp-3); color: var(--text-muted); font-size: var(--fs-sm); }
.today .activeline { padding-top: var(--sp-3); border-top: 1px solid var(--border-hairline); }
.dots { display: inline-flex; flex: none; align-items: center; gap: 4px; }
.dots i { display: block; width: 10px; height: 10px; border: 1.5px solid var(--border-strong); border-radius: var(--r-xs); background: var(--raised); }
.dots i.on { border-color: var(--ink-line); background: var(--brand); }

/* ==== 12. Progress ==== */
.statgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.statgrid > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.stat {
  display: flex; flex-direction: column; gap: var(--sp-1);
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-lg);
  background: var(--raised);
}
.static { display: inline-flex; color: var(--text-muted); }
.stat b {
  color: var(--text-strong);
  font: var(--fw-display) var(--fs-xl)/1.1 var(--font-display);
  letter-spacing: var(--ls-snug);
  font-variant-numeric: lining-nums tabular-nums;
}
.stat > span:not(.static):not(.dots) { color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.35; }
.stat .bar, .stat .dots { margin-top: var(--sp-1); }

.linkrow { display: block; padding: var(--sp-3) 0; color: inherit; text-decoration: none; }
.linkrow + .linkrow { border-top: 1px solid var(--border-hairline); }
.card > .h3 + .linkrow { padding-top: var(--sp-1); }
.card > .linkrow:last-child { padding-bottom: 0; }
.linkrow > .small { display: block; margin-top: var(--sp-1-5); }
.linkrow:focus-visible { outline-offset: 2px; }

.plainlist { margin: 0; padding: 0; list-style: none; }
.plainlist li {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-2) 0;
  font-variant-numeric: tabular-nums;
}
.plainlist li + li { border-top: 1px solid var(--border-hairline); }
.plainlist li > span:first-child { flex: 1 1 auto; min-width: 0; }
.plainlist b { color: var(--text-strong); }
.card > .plainlist + .small { margin-top: var(--sp-3); }

/* #/progress: stat tiles (the week tile links to the plan; on phones its link is the chevron, the words stay for
   screen readers), then a row per subject with "Ready n of N" and the practice estimate or what it still needs */
/* v14: 2x2 tiles on phones, a Geologica number over a short label; today's squares (meter) and the day squares show */
.prog-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.prog-stats > .stat:last-child:nth-child(odd) { grid-column: auto; }
.prog-stats .stat { position: relative; gap: var(--sp-1); padding: var(--sp-3); }
.prog-stats .stat b { font-size: var(--fs-lg); }
.prog-stats .meter { --meter-sq: 10px; margin-top: var(--sp-1); }
a.prog-week { color: var(--text); text-decoration: none; transition: border-color var(--dur-ctl) var(--ease-std), background-color var(--dur-ctl) var(--ease-std); }
@media (hover: hover) and (pointer: fine) { a.prog-week:hover { border-color: var(--ink-line); } }
a.prog-week:active { background: var(--raised-hover); }
.prog-stats .stat > span.prog-planlink {
  position: absolute; top: var(--sp-2); inset-inline-end: var(--sp-1);
  display: inline-flex; align-items: center; gap: 2px; color: var(--text-strong); font-weight: var(--fw-semibold);
}
.prog-pl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.prog-planlink .chev { width: 16px; height: 16px; color: currentColor; }
.prog-subj .nw { white-space: nowrap; }
.prog-subj > .prog-est { color: var(--text-muted); }
.prog-subj > .prog-est.ok { color: var(--text-strong); font-weight: var(--fw-semibold); }
/* a subject row: two number pairs (a big number over a grey label), the estimate line under them */
.prog-pairs { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); margin: var(--sp-3) 0 var(--sp-1); }
.prog-pairs > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prog-pairs b { color: var(--text-strong); font: var(--fw-display) var(--fs-lg)/1.1 var(--font-display); font-variant-numeric: lining-nums tabular-nums; }
.prog-pairs small { color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.3; }
/* the grey callout: how the estimate is made, with the link to Academy */
.note.prog-callout { margin-top: var(--sp-4); background: var(--sunken); font-size: var(--fs-sm); line-height: 1.5; }
.prog-callout a { color: var(--text-link); font-weight: var(--fw-semibold); }
.card > .srow + .small { margin-top: var(--sp-3); }
.prog-review .plainlist li { padding-block: var(--sp-1-5); }
.prog-review .plainlist + * { margin-top: var(--sp-3); }
.prog-review > .btn + .small { margin-top: var(--sp-3); }

/* v14: empty states in the 404 pattern: one sticker on the corner, the text and the buttons left-aligned */
.learn .card.empty-st { margin-top: var(--sp-6); }
.empty-st > * { margin: 0; }
.empty-st > * + * { margin-top: var(--sp-2); }
.empty-st > :nth-child(2) { padding-inline-end: 56px; }
.empty-st > p { max-width: 42ch; }
.empty-st > .stack { margin-top: var(--sp-4); }

/* ==== 13. Toggles: "Why this?", "How is this decided?", "Saved for review", palette, review ==== */
.why > summary, .saved > summary {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.why > summary { color: var(--text-link); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
@media (hover: hover) and (pointer: fine) { .why > summary:hover { color: var(--text-link-hover); text-decoration: underline; text-decoration-color: var(--link-underline); } }
.why > summary::-webkit-details-marker, .saved > summary::-webkit-details-marker, .fold > summary::-webkit-details-marker,
.palette > summary::-webkit-details-marker, .rev > summary::-webkit-details-marker { display: none; }
/* a small caret drawn in CSS. Text toggles ("Why this?", "Saved for review"): right when closed, down when open.
   v14 fix (VIS-2): a row that opens in place (a fold, a review item, the exam palette) points down when closed and up
   when open, so it never reads as a link card, whose chevron points right (that one goes to another page) */
.why > summary::before, .saved > summary::after, .palette > summary::after, .rev > summary::after, .fold > summary::after {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  border-right: 1.75px solid currentColor;
  border-bottom: 1.75px solid currentColor;
  transform: translateX(-1px) rotate(-45deg);
  transition: transform var(--dur-fast) var(--ease-std);
}
.palette > summary::after, .rev > summary::after { margin-inline-start: auto; color: var(--text-faint); }
.saved > summary::after { color: var(--text-faint); }
.why[open] > summary::before, .saved[open] > summary::after { transform: translateY(-2px) rotate(45deg); }
.palette > summary::after, .rev > summary::after, .fold > summary::after { transform: translateY(-2px) rotate(45deg); }
.palette[open] > summary::after, .rev[open] > summary::after, .fold[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.why > p { margin: 0 0 var(--sp-2); color: var(--text); }
/* v14 folds (results, mock result): a 48px row that remembers being open; a 2nd summary line stays visible. Its title
   is set like a link card's title (fix VIS-2); the caret, not the type, says "opens here" */
.card.fold { padding-block: var(--sp-1); }
.card.fold[open] { padding-bottom: var(--card-pad); }
.fold > summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-3);
  min-height: var(--control-h); color: var(--text-strong); font: var(--fw-semibold) var(--fs-base)/1.3 var(--font-sans);
  cursor: pointer; list-style: none;
}
.fold > summary::after { grid-area: 1 / 2; margin-inline-end: var(--sp-1); }
.fold > summary > :not(.fold-t) { grid-column: 1 / -1; margin: 0 0 var(--sp-3); font-size: var(--fs-sm); font-weight: var(--fw-regular); line-height: 1.45; }
.fold > summary + *, .sum-rev > summary + * { margin-top: var(--sp-2); }
.fold > p + .form { margin-top: var(--sp-4); }

/* ==== 14. Breakpoints: 600 · 900 · 1024 (the two-column lesson) · 1200 ==== */
@media (min-width: 600px) {
  /* the bar lines up with the column; "I don't know" keeps its own width, Check takes the rest */
  :root { --learn-bleed: 0px; }
  .actionbar-in { flex-direction: row-reverse; }
  .actionbar-in > .btn { flex: 0 1 auto; width: auto; }
  .actionbar-in > .btn.primary { flex: 1 1 auto; }
  .mrow { display: flex; align-items: center; gap: var(--sp-4); }
  .mleft { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
  .mbtns { flex: none; }
  .mb { flex: none; width: 44px; }
  .statgrid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .statgrid > .stat:last-child:nth-child(odd) { grid-column: auto; }
  /* progress tiles: the plan link in words */
  .prog-stats .stat { padding: var(--sp-3) var(--sp-4); }
  .prog-stats .stat > span.prog-planlink { position: static; margin-top: auto; }
  .prog-pl { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .mres-est > small { display: inline; }
  /* mock intro settings: label | control */
  .setrow { display: grid; grid-template-columns: 10rem minmax(0, 1fr); align-items: center; gap: var(--sp-4); }
}

@media (min-width: 900px) {
  /* the tab bar is gone: the lesson CTA docks to the screen bottom */
  .topic .rail { bottom: var(--safe-b); }
  /* a mouse needs no thumb zone: the action bar follows the answers (still sticky on long pages) */
  .runner.focusmode > .actionbar { margin-top: var(--sp-2); }
}

/* styles.css makes .layout-2 two columns and the .rail sticky from 1024px; here the rail becomes a card */
@media (min-width: 1024px) {
  .topic .rail {
    top: calc(var(--appbar-h) + var(--sp-6)); bottom: auto;
    margin: 0;
    padding: var(--card-pad);
    border: 2px solid var(--ink-line);
    border-radius: var(--r-lg);
    background: var(--raised);
  }
  .railmeta { display: block; color: var(--text-muted); font-size: var(--fs-sm); }
  .topic .rail > .btn-meta { display: flex; }
  .topic .rail > .btn-meta + .rail-cta { margin-top: calc(-1 * var(--sp-2)); }
  .rail-n { display: none; }
}

/* ==== 15. Motion (one-shot, added by celebrate() after "Check") and accessibility ==== */
/* the feedback motion is in §17 (v14) */

@media (prefers-reduced-motion: reduce) {
  .fb.reveal, .reveal + .saved, .reveal ~ .explain { animation: none; }
  .opt, .mb, .pq, input.num, .arow, .trow, .road-row, a.prog-week { transition: none; }
}

/* Windows high contrast: keep the chosen / current state visible without colour */
@media (forced-colors: active) {
  .opt.on, .mb.on, .pq.cur, .pq.done { outline: 2px solid Highlight; outline-offset: -2px; }
  .opt.right, .mb.right, .mb.should { outline: 2px solid CanvasText; outline-offset: -2px; }
  .opt.wrong, .mb.wrong { outline: 2px dashed CanvasText; outline-offset: -2px; }
  .dots i.on { background: Highlight; }
  .actionbar, .topic .rail { border-top: 1px solid CanvasText; }
  /* the roadmap marks and the ready bar keep their shapes in system colours */
  .road-glyph { color: CanvasText; }
  .road-glyph .rg-tick, .road-page .road-glyph.secured .rg-tick { stroke: Canvas; }
  .road-page.road-page .road-glyph.secured rect { fill: CanvasText; }
  .run-segs i { border: 1px solid CanvasText; }
  .run-segs i.now, .qnum { background: Highlight; }
  .road-code { border-color: CanvasText; }
  .road-segs i { background: Canvas; border: 1px solid CanvasText; }
  .road-segs i.s3 { background: Highlight; }
  .road-segs i.s2 { background: Canvas; border: 2px solid Highlight; }
  .road-row.is-next { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* ==== 16. v6: teacher badge, help after a wrong answer (Spec D), backup (Spec B) ==== */
/* "Checked by a teacher · name, date" under the question header (drafts keep .draftline) */
.qcheck { display: flex; align-items: center; gap: var(--sp-1-5); margin: var(--sp-2) 0 0; color: var(--ok-fg); font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.45; }
.qcheck .ic { flex: none; width: 16px; height: 16px; }

/* "You chose B: ..." (checked items only), also in the review lists of mocks and the free test */
.whynote { margin: 0; color: var(--text); line-height: var(--lh-body); }
.whynote b { color: var(--text-strong); font-weight: var(--fw-semibold); }
.revbody .whynote { font-size: var(--fs-sm); }

/* "What tripped you?": one tap, outline chips; the chosen one keeps a tick, never colour alone */
.trips { display: flex; flex-direction: column; gap: var(--sp-2); }
.trip-q { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.trip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.trip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: 44px; padding: var(--sp-1-5) var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--raised); color: var(--text);
  font: inherit; font-size: var(--fs-sm); line-height: var(--lh-snug); text-align: start;
  cursor: pointer;
}
.trip .ic { flex: none; width: 16px; height: 16px; }
.trip.on { border-color: var(--ink-line); background: var(--sunken); color: var(--text-strong); font-weight: var(--fw-semibold); }
@media (hover: hover) and (pointer: fine) { .trip:hover { border-color: var(--border-hover); } }
.trip:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* The hint ladder: hints as plain text blocks, the next rung as an outline button, the retry as a text link */
.ladder { display: flex; flex-direction: column; gap: var(--sp-3); }
.ladder:empty { display: none; }
.hint { margin: 0; padding: var(--sp-3) var(--sp-4); border-left: 4px solid var(--border-strong); background: var(--sunken); color: var(--text); line-height: var(--lh-body); }
.hint b { color: var(--text-strong); }
.ladder-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.linkbtn {
  display: inline-flex; align-items: center; gap: var(--sp-1-5);
  min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--text-link); font: inherit; font-weight: var(--fw-semibold);
  text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: 3px;
  cursor: pointer;
}
.linkbtn .ic { flex: none; width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .linkbtn:hover { color: var(--text-link-hover); } }
.linkbtn:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-xs); }
.retry-q { margin: var(--sp-3) 0 var(--sp-2); color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.45; }
.qcard .rt-check { margin-top: var(--sp-3); }
.retry-res { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-weight: var(--fw-semibold); }
.retry-res .ic { flex: none; width: 20px; height: 20px; }
.retry-res.ok { color: var(--ok-fg); }
.retry-res.bad { color: var(--bad-fg); }
.lessonlink { margin: 0; }
.lessonlink a { display: inline-flex; align-items: center; gap: var(--sp-1-5); min-height: 44px; color: var(--text-link); font-weight: var(--fw-semibold); }
.lessonlink .ic { flex: none; width: 16px; height: 16px; }
.hints-truth { margin: 0; }

/* #/progress: "Prepare for no internet" and the link to the backup screen */
.prog-off > * { margin: 0; }
.prog-off > * + * { margin-top: var(--sp-3); }
.prog-off .bk-link { padding-bottom: 0; }
.prog-off > .bk-link:first-child { margin-top: calc(-1 * var(--sp-3)); }
.bk-link .rowmain > b { color: var(--text-strong); }
.bk-link .chev { flex: none; color: var(--text-faint); }
@media (hover: hover) and (pointer: fine) { .bk-link:hover b { color: var(--text-link-hover); text-decoration: underline; text-decoration-color: var(--link-underline); } }
.bk-done { display: flex; align-items: center; gap: var(--sp-2); color: var(--ok-fg); font-weight: var(--fw-semibold); }
.bk-done .ic { flex: none; width: 20px; height: 20px; }

/* #/progress/backup */
.backup .card > * { margin: 0; }
.backup .card > * + * { margin-top: var(--sp-3); }
.bk-preview { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border-hairline); border-radius: var(--r-sm); background: var(--sunken); color: var(--text-strong); line-height: var(--lh-body); }
.bk-warn, .bk-error { display: flex; align-items: flex-start; gap: var(--sp-2); line-height: 1.45; }
.bk-warn .ic, .bk-error .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.bk-warn { color: var(--warn-fg); }
.bk-error { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--bad-bd); border-radius: var(--r-sm); background: var(--bad-bg); color: var(--bad-fg); }
.bk-pick { position: relative; cursor: pointer; }
.bk-pick:focus-within { box-shadow: var(--shadow-focus); }
.bk-file { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
@media (forced-colors: active) {
  .trip.on { outline: 2px solid Highlight; outline-offset: -2px; }
  .hint { border-left-color: CanvasText; }
}

/* v6 build 2: the specialty label (N7b), the official NTC group shares (N7), the Russian-exam note */
.road-band .road-spec { margin-top: var(--sp-0-5); color: var(--text-muted); }
.road-map > .ntc-line { margin: 0 0 var(--sp-0-5); max-width: 60ch; }
.road-map > .ntc-src { margin: 0 0 var(--sp-4); max-width: 60ch; }
.lessoncol > .ntc-line { margin: var(--sp-2) 0 0; max-width: 60ch; }
.lessoncol > .ntc-src { margin: var(--sp-0-5) 0 0; max-width: 60ch; }
.ntc-src, .spec-line { line-height: 1.45; }
.spec-line { margin: var(--sp-2) 0 0; }
.ru-exam { margin-top: var(--sp-2); }

/* ==== 17. Motion (v14): choosing, Check, the next question, the bank skeleton, the timer ==== */
@media (prefers-reduced-motion: no-preference) {
  /* press on an answer row: it dips 1px while held */
  .opt, .mb {
    transition: background-color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std),
      color var(--dur-fast) var(--ease-std), transform var(--dur-press) var(--ease-out);
  }
  .opt:not([disabled]):active, .mb:not([disabled]):active { transform: translate3d(0, 1px, 0) scale(.99); }
  /* chosen: the letter square stamps in; the first choice of a question lights up Check */
  .let.fx-stamp, .mb.fx-stamp { animation: hb-stamp 170ms var(--ease-pop) backwards; }
  .btn.fx-ready { animation: hb-ready 260ms var(--ease-out) backwards; }
  /* after Check: the strip rises, then "saved for review", then the help; the right mark pops (never a shake) */
  .fb.reveal { animation: hb-rise var(--dur-emph) var(--ease-out) backwards; }
  .reveal + .saved { animation: hb-rise var(--dur-emph) var(--ease-out) 60ms backwards; }
  .reveal ~ .explain, .reveal ~ .whynote, .reveal ~ .trips, .reveal ~ .ladder { animation: hb-rise var(--dur-emph) var(--ease-out) 120ms backwards; }
  .fb.pulse > .ic { animation: hb-pop 360ms var(--ease-pop) 60ms backwards; }
  .fx-pop { animation: hb-pop 300ms var(--ease-pop) backwards; }
  /* the segment of the question just checked fills from the left */
  .run-segs i.fx-seg { transform-origin: 0 50%; animation: hb-grow 280ms var(--ease-out) backwards; }
  /* Next / Previous: the question slides in from that side, its answers 35 ms apart */
  .fx-qnext > .run-ctx, .fx-qnext > .qcard > :not(.opts):not(.mrows),
  .fx-qnext .opts > *, .fx-qnext .mrows > * { animation: hb-in-r var(--dur-enter) var(--ease-out) backwards; }
  .fx-qprev > .qcard > :not(.opts):not(.mrows),
  .fx-qprev .opts > *, .fx-qprev .mrows > * { animation: hb-in-l var(--dur-enter) var(--ease-out) backwards; }
  :is(.fx-qnext, .fx-qprev) :is(.opts, .mrows) > :nth-child(1) { animation-delay: 40ms; }
  :is(.fx-qnext, .fx-qprev) :is(.opts, .mrows) > :nth-child(2) { animation-delay: 75ms; }
  :is(.fx-qnext, .fx-qprev) :is(.opts, .mrows) > :nth-child(3) { animation-delay: 110ms; }
  :is(.fx-qnext, .fx-qprev) :is(.opts, .mrows) > :nth-child(n+4) { animation-delay: 145ms; }
  /* today's activity dot stamps in when the day starts counting (5 answers) */
  .dots i.fx-stamp { animation: hb-stamp 260ms var(--ease-pop) backwards; }
  /* the exam timer changes colour slowly at 5 minutes left; it never pulses, shakes or grows */
  .timer { transition: background-color 600ms var(--ease-std), border-color 600ms var(--ease-std), color 600ms var(--ease-std); }
  /* the skeleton's grey blocks breathe (opacity only, no gradient shimmer) */
  .skel .sk-card i { animation: hb-breathe 1.4s var(--ease-in-out) infinite alternate; }
}
@keyframes hb-ready { from { background-color: var(--sunken); border-color: var(--border); color: var(--text-faint); transform: scale(.98); } }

/* The question skeleton (static without motion): the frame of the real question, so nothing jumps when it arrives */
.loading.skel { display: block; min-height: 0; }
.sk-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.sk-card i { display: block; height: 12px; border-radius: var(--r-xs); background: var(--sunken-hover); }
.sk-head { display: flex; gap: var(--sp-2); }
.sk-head i { width: 88px; height: 24px; }
.sk-head i + i { width: 64px; }
.sk-lines { display: flex; flex-direction: column; gap: 10px; margin: var(--sp-2) 0 var(--sp-1); }
.sk-lines i { height: 16px; }
.sk-lines i:nth-child(2) { width: 92%; }
.sk-lines i:nth-child(3) { width: 58%; }
.sk-opts { display: flex; flex-direction: column; gap: var(--sp-2); }
.sk-opt { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--opt-h); padding: var(--sp-2) var(--sp-3); border: 2px solid var(--border-hairline); border-radius: var(--r-md); }
.sk-opt .let { border-color: var(--border); color: var(--text-faint); }
.sk-opt i { flex: 1 1 auto; height: 12px; max-width: 60%; }
.sk-note { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-4) 0 0; color: var(--text-muted); font-size: var(--fs-sm); }
.sk-note .spinner { width: 16px; height: 16px; }

/* v14 F2: the count-up's visible counter is as wide as the final number, so what follows never moves */
.bignum .cu { display: inline-block; text-align: end; }