/* ─────────────────────────────────────────────────────────────────────────────
   LENGUA — app.css
   The approved visual language, lifted from design/mocks/lengua-v6-assets.html
   (finalist B refined, after 4 adversarial reviews). Emi is the DEFAULT theme.

   THE TOKENS BELOW ARE NOT DECORATIVE CHOICES. They are the exact hex values
   scripts/contrast-gate.mjs asserts, 14 binding checks per theme. Changing one
   here without changing it there breaks the only WCAG evidence this repo has.

   TWO RULES THAT LOOK LIKE CRUFT AND ARE NOT:
     1. Every gold fill carries a 2px --accent2 border. Bright gold cannot reach
        3:1 on white; the border IS the boundary WCAG 1.4.11 requires.
     2. The kitten watermark lives ONLY on the page background. Every text block
        sits on an opaque --surface, so measured contrast is untouched by it.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── tokens ─────────────────────────────────────────────────────────────── */
.lg {
  --bg:#FFF5F8; --surface:#FFFFFF; --sunken:#FDEDF2; --line:#F2C9DB;
  --ink:#2A121C; --muted:#7C4F63; --accent:#BE2E68; --accentInk:#FFFFFF;
  --accent2:#8A5A08; --accent2Fill:#F5C451; --accent2FillInk:#2A1A02;
  --sans:ui-rounded,'Hiragino Maru Gothic ProN',Quicksand,Comfortaa,Manjari,'Arial Rounded MT Bold',Calibri,source-sans-pro,sans-serif;
  --mono:ui-monospace,'Cascadia Code','Source Code Pro',Menlo,Consolas,monospace;
  color-scheme: light;
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
  background-color: var(--bg);
  min-height: 100dvh;
  margin: 0;
  padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
  position: relative;
  isolation: isolate;
}
.lg[data-theme="claro"] {
  --bg:#FFFBF4; --surface:#FFFFFF; --sunken:#FFF4E2; --line:#EFD9B4;
  --ink:#241A08; --muted:#6B573A; --accent:#B4471F; --accentInk:#FFFFFF;
  --accent2:#7A5A12; --accent2Fill:#F2C14E; --accent2FillInk:#241A08;
}
.lg[data-theme="escuro"] {
  --bg:#15110A; --surface:#1E1910; --sunken:#241E14; --line:#3D3423;
  --ink:#F4EEE2; --muted:#B7A88C; --accent:#FF9A62; --accentInk:#2A1405;
  --accent2:#F5C451; --accent2Fill:#F5C451; --accent2FillInk:#241A02;
  color-scheme: dark;
}

/* FOTO DE FUNDO — atrás de tudo, opacidade baixa. A foto é detalhada; sem
   desfoque ela vira sujeira visual em vez de textura. Todo texto fica em
   cartões OPACOS, então o contraste medido não é afetado por ela. */
.lg::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("assets/kittens-bg.webp");
  background-size: cover; background-position: center; background-attachment: fixed;
  opacity: .16; filter: blur(1.5px) saturate(.85);
}
.lg[data-theme="claro"]::before { opacity: .07 }
.lg[data-theme="escuro"]::before { opacity: .10; filter: blur(1.5px) saturate(.7) brightness(.6) }

.lg *, .lg *::before, .lg *::after { box-sizing: border-box }
[hidden] { display: none !important }
/* the runner is full-screen; the page behind it must not scroll under her thumb */
body.running { overflow: hidden }
/* `color: inherit` used to live here and it was a WCAG failure hiding in plain sight:
   `.lg button` (0,0,1,1) outranks `.btn` (0,0,1,0), so every primary button rendered its
   label in --ink on --accent — 3.14:1, measured by axe on the running page. The contrast
   gate could not catch it, because the gate checks TOKEN PAIRS and the tokens were right;
   what was wrong was which pair actually reached the pixel. Buttons now carry their own
   colour, always. */
/* :where() is load-bearing, not style. This existed as `.lg button` (0,0,1,1), which outranks
   every single-class button rule in this sheet — so `.opt{font-size:18px}` rendered at 16px
   and `.btn{font-size:14px}` rendered at 16px, measured, on the live page. It is the SAME
   trap the comment above describes for `color`, left unfixed for `font`. :where() contributes
   zero specificity, so this becomes (0,0,1,0): still strips the UA's non-inherited button
   font for any button with no rule of its own, but no longer silently beats the rules that
   do. Every button font-size in this file was dead code until this line changed. */
.lg :where(button) { font: inherit }
.lg img { max-width: 100% }

/* ── the avatar ─────────────────────────────────────────────────────────── */
.mimo {
  border-radius: 50%; object-fit: cover; object-position: 50% 28%;
  border: 3px solid var(--surface);
  box-shadow: 0 3px 10px -4px rgba(0,0,0,.4);
  background: var(--sunken);
}
.m-sm { width: 52px; height: 52px; flex: none }
.m-md { width: 78px; height: 78px }
.m-lg { width: 104px; height: 104px }

/* ── accessibility furniture ────────────────────────────────────────────── */
.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 {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accentInk);
  padding: 12px 18px; border-radius: 0 0 12px 0; font-weight: 800; text-decoration: none;
}
.skip:focus { left: 0 }
.lg :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px }

/* ── shell ──────────────────────────────────────────────────────────────── */
.shell {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: 224px 1fr; gap: 22px; align-items: start;
}
.side {
  position: sticky; top: 22px;
  background: var(--surface); border: 2px solid var(--line); border-radius: 18px;
  padding: 18px 14px;
}
.brand {
  display: flex; align-items: center; gap: 9px;
  font-size: 19px; font-weight: 800; letter-spacing: -.03em; margin: 0; padding: 0 6px 14px;
}
.brand img { width: 30px; height: 30px }
.nav { display: flex; flex-direction: column; gap: 3px }
.nav button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 11px 12px; border-radius: 11px; border: 2px solid transparent;
  background: none; color: var(--muted); font-size: 14px; font-weight: 800;
  cursor: pointer; min-height: 44px;
}
.nav button:hover { background: var(--sunken) }
.nav button[aria-current="page"] { background: var(--accent); color: var(--accentInk) }
.sidefoot { margin-top: 16px; padding-top: 14px; border-top: 2px dotted var(--line) }
.themes { display: flex; gap: 4px; flex-wrap: wrap }
.themes button {
  font-size: 11px; font-weight: 800; padding: 8px 11px; border-radius: 999px;
  cursor: pointer; border: 2px solid var(--line); background: var(--surface);
  color: var(--muted); min-height: 34px;
}
.themes button[aria-pressed="true"] { background: var(--accent); color: var(--accentInk); border-color: var(--accent) }

/* ── type ───────────────────────────────────────────────────────────────── */
.display { font-size: 32px; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; margin: 0 }
.h { font-size: 20px; font-weight: 800; letter-spacing: -.022em; margin: 0 }
.eyebrow {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .15em; color: var(--muted); margin: 0 0 11px;
}
.small { font-size: 12.5px; color: var(--muted) }
.nums { font-variant-numeric: tabular-nums; font-family: var(--mono); letter-spacing: -.02em }
.en { font-style: normal }

/* ── surfaces ───────────────────────────────────────────────────────────── */
.view { display: none }
.view.on { display: block }
.panel {
  background: var(--surface); border: 2px solid var(--line); border-radius: 18px;
  padding: 24px; position: relative; margin-bottom: 18px;
}
.sticker {
  position: absolute; top: -2px; right: 22px;
  background: var(--accent2Fill); color: var(--accent2FillInk);
  border: 2px solid var(--accent2); border-top: none; border-radius: 0 0 9px 9px;
  padding: 5px 11px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; transform: rotate(-1.2deg);
}
.card2 { border: 2px solid var(--line); border-radius: 14px; padding: 16px; background: var(--sunken) }
.warn {
  background: var(--sunken); border: 2px dashed var(--accent2); border-radius: 12px;
  padding: 13px; font-size: 12.5px; margin-top: 14px;
}
.empty { text-align: center; padding: 30px 18px }
.restore { border: 3px dashed var(--accent); border-radius: 18px; padding: 22px; text-align: center }
.kv {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0; border-top: 2px dotted var(--line); font-size: 13.5px; flex-wrap: wrap;
}
.kv:first-of-type { border-top: none }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--accent); color: var(--accentInk);
  border: 2px solid var(--accent); border-radius: 999px;
  padding: 12px 22px; font-size: 14px; font-weight: 800; cursor: pointer;
  min-height: 46px; /* WCAG 2.5.5 — thumb-sized, not pointer-sized */
}
.btn.ghost { background: var(--surface); color: var(--accent) }
.btn.gold { background: var(--accent2Fill); color: var(--accent2FillInk); border-color: var(--accent2) }
.btn.sm { padding: 9px 15px; font-size: 12.5px; min-height: 44px }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .42; cursor: not-allowed }
.btn.danger { background: var(--surface); color: var(--accent); border-style: dashed }
.linkish {
  background: none; border: none; color: var(--accent); font-size: 13px; font-weight: 800;
  text-decoration: underline; cursor: pointer; padding: 11px 4px; min-height: 44px;
}

/* ── HOJE: exactly one primary call to action ───────────────────────────── */
.cta-single {
  display: block; width: 100%; text-align: left;
  background: var(--accent); color: var(--accentInk);
  border: 3px solid var(--accent); border-radius: 18px;
  padding: 22px; cursor: pointer; font: inherit; min-height: 46px;
}
.cta-single .lead { font-size: 22px; font-weight: 800; letter-spacing: -.025em; display: block }
.cta-single .sub { font-size: 13px; font-weight: 700; opacity: .88; display: block; margin-top: 5px }
.cta-single:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px }

/* ── badges ─────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent2Fill); color: var(--accent2FillInk);
  border: 2px solid var(--accent2); border-radius: 999px;
  padding: 5px 12px; font-size: 12px; font-weight: 800;
}
.badge.quiet { background: var(--sunken); color: var(--muted); border: 2px solid var(--line) }

/* ── LIÇÃO ──────────────────────────────────────────────────────────────── */
.licao-body p { font-size: 15.5px; margin: 0 0 12px }
.licao-body b { color: var(--accent) }
.trap { border-left: 4px solid var(--accent2); padding-left: 14px; margin: 6px 0 0 }
.strike { text-decoration: line-through; color: var(--muted) }
.strong { font-weight: 800 }

/* ── RUNNER — full screen, no nav, no side exits ────────────────────────── */
.runner {
  position: fixed; inset: 0; z-index: 70; background: var(--bg);
  display: none; flex-direction: column;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
           calc(14px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
.runner.on { display: flex }
.rtop { display: flex; align-items: center; gap: 10px; flex: none }
.rprog {
  flex: 1; display: flex; gap: 4px; height: 8px;
}
/* State classes here are PREFIXED on purpose. `.done` alone once collided with the
   full-screen done-sheet rule below: the progress segment inherited position:fixed;
   inset:0; z-index:71 and became an invisible overlay that swallowed every click in the
   app from step 2 onward. Generic state names in a flat, unscoped sheet are a trap. */
.rprog i {
  flex: 1; display: block; height: 100%; border-radius: 99px;
  background: var(--sunken); border: 1.5px solid var(--line);
}
.rprog i.is-done { background: var(--accent); border-color: var(--accent) }
.rprog i.is-now { background: var(--accent2Fill); border-color: var(--accent2) }
/* min-WIDTH matters as much as min-height, and only the height was set. "Parar" at 12.5px with
   6px side padding measured 39px wide — under WCAG 2.5.5's 44x44 floor, on the one control that
   lets her leave a session. A target you cannot reliably hit is a trap, and it is worst on the
   escape hatch. 46px is this project's own floor (R12), not the bare minimum. */
.rquit {
  background: none; border: none; color: var(--muted); font-size: 12.5px;
  font-weight: 800; cursor: pointer; text-decoration: underline; padding: 10px 6px;
  min-height: 46px; min-width: 46px;
}
/* min-height:0 is load-bearing, not tidying: a flex item defaults to min-height:auto,
   so without it .rbody grows past the viewport, overflow-y never engages, and the answer
   buttons slide UNDER the progress bar on a 375px phone. Caught by driving a real
   session on an iPhone SE viewport, not by reading the CSS.
   The auto margins centre the question+answers as ONE group when there is room, and
   degrade to a normal scroll from the top when there is not — which `justify-content:
   center` alone does not do (it clips the top and makes it unreachable). */
.rbody {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden; text-align: center;
  padding: 12px 0; max-width: 620px; width: 100%; margin: 0 auto;
}
.rbody > :first-child { margin-top: auto }
.rbody > :last-child { margin-bottom: auto }
.rstep { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .15em; color: var(--muted); margin: 0 0 10px }
.prompt {
  font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.3;
  margin: 0; overflow-wrap: anywhere;
}
.prompt .blank { border-bottom: 4px solid var(--accent); padding: 0 22px }
.gloss { font-size: 14px; color: var(--muted); margin-top: 12px }
.cue {
  font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0;
  overflow-wrap: anywhere;
}

/* answer grids — real buttons, keyboard-native, ≥46px */
.options { display: grid; gap: 10px; margin-top: 20px; grid-template-columns: 1fr 1fr }
.options.one-col { grid-template-columns: 1fr }
.opt {
  padding: 18px 12px; border-radius: 14px; border: 3px solid var(--line);
  background: var(--sunken); color: var(--ink);
  font-size: 18px; font-weight: 800; cursor: pointer; min-height: 60px;
  overflow-wrap: anywhere;
}
.opt:hover:not([disabled]) { border-color: var(--accent) }
.opt[disabled] { cursor: default }
.opt .mark { display: block; font-size: 13px; font-weight: 800; margin-top: 4px }
.opt.right { border-color: var(--accent); background: var(--accent); color: var(--accentInk) }
.opt.wrong { border-color: var(--accent2); background: var(--accent2Fill); color: var(--accent2FillInk) }
/* .55 looked right and measured 3.79:1 on Emi and 3.77:1 on Claro — a 1.4.3 failure on
   the un-chosen option after an answer, on a screen axe never reaches because it only
   exists post-click. .75 measures 7.25 / 7.16 / 8.56 across the three themes. */
.opt.faded { opacity: .75 }
.verdict { margin-top: 14px; font-size: 14px; font-weight: 800; min-height: 22px }
.row { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; margin: 10px 0 }
.ractions { flex: none; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding-top: 12px }

/* attribution — a licence obligation, rendered at the point of playback */
.attrib {
  font-size: 11.5px; color: var(--muted); margin-top: 14px; line-height: 1.45;
  border-top: 2px dotted var(--line); padding-top: 10px;
}
.attrib a { color: var(--accent) }

/* the play affordance + Mimo pulse */
.stage { display: flex; flex-direction: column; align-items: center; gap: 12px }
.pulse { position: relative; width: 104px; height: 104px }
.pulse img { width: 100%; height: 100% }
.pulse::after {
  content: ''; position: absolute; inset: -9px; border-radius: 50%;
  border: 3px solid var(--accent); opacity: 0;
}
.pulse.playing::after { animation: ring 1.1s ease-out infinite }
@keyframes ring {
  0% { opacity: .8; transform: scale(.96) }
  100% { opacity: 0; transform: scale(1.16) }
}

/* drill countdown — 3s of silence, and she must SEE it running */
.count { font-size: 46px; font-weight: 800; font-family: var(--mono); margin: 10px 0 0; color: var(--accent) }
.countbar { height: 10px; border-radius: 99px; background: var(--sunken); border: 1.5px solid var(--line); overflow: hidden; margin-top: 10px }
.countbar i { display: block; height: 100%; background: var(--accent); width: 100% }
.countbar.run i { transition: width 3s linear; width: 0 }
.reveal {
  margin-top: 16px; background: var(--sunken); border: 2px solid var(--line);
  border-radius: 12px; padding: 14px; font-size: 20px; font-weight: 800;
}

/* recording */
.wave {
  min-height: 54px; background: var(--sunken); border: 2px solid var(--line);
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  padding: 8px 10px; margin: 14px 0;
}
.btn.recording { border-style: dashed }

/* ── DONE SHEET — the only place the day is won ─────────────────────────── */
.donesheet {
  position: fixed; inset: 0; z-index: 71; background: var(--bg);
  display: none; place-items: center; overflow-y: auto; text-align: center;
  padding: max(20px, env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
}
.donesheet.on { display: grid }
.donesheet .win { font-size: 30px; font-weight: 800; letter-spacing: -.035em; margin: 16px 0 6px }
.donesheet .meta { font-size: 14px; color: var(--muted); font-weight: 700; margin: 0 }

/* ── in-page confirm — never a native confirm() ─────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 90; display: none; place-items: center;
  padding: 20px; background: rgba(22,6,13,.66);
}
.modal.on { display: grid }
.modal .box {
  background: var(--surface); border: 3px solid var(--accent); border-radius: 20px;
  padding: 22px; max-width: 440px; width: 100%; text-align: left;
  max-height: 86dvh; overflow-y: auto;
}
.modal .acts { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap }

/* ── file input (restore) ───────────────────────────────────────────────── */
.file {
  display: block; width: 100%; margin-top: 8px; font-size: 13px;
  border: 2px dashed var(--line); border-radius: 12px; padding: 12px;
  background: var(--sunken); color: var(--ink); min-height: 46px;
}

/* ── boot / storage failure — honest, never a white screen ──────────────── */
.fatal { border: 3px solid var(--accent); border-radius: 18px; padding: 22px; background: var(--surface) }

/* ── MOBILE FIRST — the device she actually uses ────────────────────────────
   dvh not vh: mobile browser chrome shrinks vh and clips the bottom bar.
   env(safe-area-inset-*): iPhone home indicator and notch.
   Touch targets stay ≥44px per WCAG 2.5.5. */
@media (max-width: 820px) {
  .lg { padding: 14px 12px calc(14px + env(safe-area-inset-bottom)) }
  .shell { grid-template-columns: 1fr; gap: 14px }
  .side {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    border-radius: 18px 18px 0 0; border-bottom: none; z-index: 9;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    padding-left: calc(6px + env(safe-area-inset-left));
    padding-right: calc(6px + env(safe-area-inset-right));
  }
  .brand, .sidefoot { display: none }
  .nav { flex-direction: row; justify-content: space-around }
  .nav button {
    flex-direction: column; gap: 3px; font-size: 11px; padding: 7px 4px;
    text-align: center; min-height: 48px; justify-content: center;
  }
  .main { padding-bottom: calc(78px + env(safe-area-inset-bottom)) }
  .display { font-size: 26px }
  .panel { padding: 18px 16px; border-radius: 16px }
  .sticker { right: 14px }
  .prompt { font-size: 22px }
  .cue { font-size: 20px }
  .opt { font-size: 17px; padding: 16px 10px }
}
@media (max-width: 380px) {
  .display { font-size: 23px }
  .prompt { font-size: 20px }
  .opt { font-size: 15.5px }
  .nav button { font-size: 10px }
}

/* ── prefers-reduced-motion — honoured, not decorated ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lg::before { background-attachment: scroll }
  .pulse.playing::after { animation: none; opacity: .8 }
  .countbar.run i { transition: none }
  .lg *, .lg *::before, .lg *::after { scroll-behavior: auto !important }
}

/* ══ PRATICAR + PERCURSO (D36/D37) ═══════════════════════════════════════════
   Bound to the same tokens as every other surface — no surface invents a colour, which
   is the anti-drift rule in PLAN §5. Touch targets stay >=46px (R12, WCAG 2.5.5).
   Nothing here draws a progress bar: RS-C1 forbids any visual that reads as a level
   being awarded, and a bar is exactly that claim in one glyph. */

.tabs { display: flex; gap: 8px; margin: 14px 0 18px; flex-wrap: wrap }
.tabs button {
  cursor: pointer; border: 2px solid var(--line); background: var(--surface);
  color: var(--muted); font-weight: 800; font-size: 14px;
  padding: 11px 18px; min-height: 46px; border-radius: 12px;
}
/* aria-pressed, not aria-selected: these are toggle buttons in a named group, not ARIA tabs.
   See the comment above renderModeToggle() in praticar.js. */
.tabs button[aria-pressed="true"] {
  background: var(--accent); color: var(--accentInk); border-color: var(--accent);
}

.rungs { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px }
.rung {
  background: var(--surface); border: 2px solid var(--line);
  border-radius: 18px; padding: 16px 18px;
}
.rung-heading { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px }
.rung-heading strong { font-size: 20px; color: var(--ink) }
.rung-heading span { font-size: 13px; color: var(--muted); font-weight: 700 }
/* The open rung is marked by a border, never by a fill: a filled "current level" card is
   the visual grammar of an achievement badge, which is the claim we do not make. */
.rung.open { border-color: var(--accent); background: var(--sunken) }
/* "Locked" is signalled by a DASHED BORDER, never by opacity. `opacity:.72` here composited
   --muted over --bg and measured 3.36:1 (emi) / 3.48:1 (claro) / 4.70:1 (escuro) on 12.5px
   .small text — a WCAG 1.4.3 failure in two of three themes. At full strength the same text
   measures 6.23 / 6.68 / 8.06. Opacity is invisible to the token-pair contrast gate, so this
   failure shipped under a green check; the tokens were right, the composite was not. */
.rung.locked { background: none; border-style: dashed }
.rung.locked .rung-heading strong { color: var(--muted) }

.vocab { list-style: none; margin: 6px 0 0; padding: 0 }
.vocab li { padding: 9px 0; border-bottom: 1px dotted var(--line) }
.vocab li.vocab-unit { border-bottom: none; padding-top: 18px }
.vocab li [lang="en"] { display: block; font-weight: 700; color: var(--ink) }
.vocab .gloss { display: block; font-size: 13px; color: var(--muted) }

/* These are the REVIEW DRILL's answer buttons and they are prefixed on purpose. They were
   once called `.opt`/`.options` — the same names the session runner uses at line 269-285 —
   in a flat, unscoped sheet, so they matched every session-runner button too and, coming
   later at equal specificity, WON. Measured on the running page: the session runner's
   answer buttons rendered at min-height 46px (spec: 60px), font-size 16px (spec: 18px),
   border 2px (spec: 3px) and background --surface (spec: --sunken); `.opt:disabled`
   opacity .65 defeated the MEASURED .75 of `.opt.faded`; and both phone media queries for
   `.opt` became unreachable dead code. Never name a rule here after a shared component. */
.review-opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  margin: 9px 0; padding: 14px 16px; min-height: 46px;
  border: 2px solid var(--line); border-radius: 14px;
  background: var(--surface); color: var(--ink); font-size: 16px; font-weight: 700;
}
.review-opt:disabled { cursor: default; opacity: .65 }

/* the review drill (D37b) — reuses .prompt/.gloss/.verdict/.btn from the session runner */
.progress { font-size: 12.5px; color: var(--muted); font-weight: 800; letter-spacing: .08em }
.review-options { margin: 16px 0 }
.review-done { margin-bottom: 16px }