/* Interactive-Book POC — design system.
   Book ritual look: paper tones + terracotta, echoing the P01 companion PDF
   (cream page, #c96f4a headers, slate accents). Mobile-first portrait; desktop = centered page.

   Type (round 20, Daniel — "replace the sans, industry best-practice"): the UI/label sans is now
   INTER, self-hosted (app/fonts/*.woff2) — bundled bytes, NOT a CDN request, so the "no external
   fonts at runtime" contract still holds and it renders identically on every device (the old
   "Avenir Next" only existed on Apple; Android fell back to Roboto). Inter is the de-facto product
   sans and is engineered for exactly this job — labels/chrome/hints at small sizes. The reading
   SERIF stays on the classic system old-style stack (that's the book voice; Daniel only flagged the
   sans). A retro reading serif (Fraunces) is downloaded and one line away if we ever want it too. */

/* Inter variable (latin subset) — one file covers every weight we use (400–800). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
}

:root {
  /* the topbar's height IS the sticky threshold for a pinned card head — ONE number, or the
     head starts below its stop and the gap is visible travel when you scroll. */
  --stick-top: 81px;
  --paper: #faf6ee;
  --paper-deep: #f3ecdd;
  /* the raised surface (chips, cards, popovers) and the hairline that separates them. Both were being
     REFERENCED (--card in .wa-chip/.dbg-pop, --line in the which_am columns) without ever being
     declared — so those backgrounds resolved to transparent and `border: … solid var(--line)` was an
     invalid shorthand that dropped the border entirely. Declaring them fixes all five call sites. */
  --card: #fffdf7;
  --line: #e6dcc8;
  --ink: #3d3428;
  /* round 29 (Daniel): ONE consistent colour for English / translations, so the eye can tell the two
     languages apart at a glance. Italian keeps terracotta + reading-ink; English is navy. */
  --en: #2c4a6e;
  --ink-soft: #8a7f6c;
  /* round 34 (Daniel: "make the grey fonts a little more black"). --ink-soft is right for captions on
     bare paper, but on the cover it now sits over a picture, where it reads washed out. */
  --ink-mid: #6a6153;
  --terra: #c96f4a;
  --terra-deep: #a8512f;
  --slate: #7a8ca3;
  --sage: #8fa383;
  --gold: #d9a441;
  --bad: #b3524a;
  --new-word: #c9652f;
  --learning-word: #d9a441;
  /* round 25 (Daniel): result-sheet + streak semantics — success / partial / miss, separate
     from the terracotta accent. Tints are paper-warm so the sheet reads as part of the book. */
  --sage-deep: #557038;
  --amber: #c1892a; --amber-deep: #8f6412;
  --sage-bg: #eaf0df; --amber-bg: #f6ead0; --red-bg: #f4ddd6;

  /* ── Type system (round 21, Daniel: "look like a native phone app — one guiding design
     language"). ONE family (Inter) across the whole app; hierarchy comes from SIZE + WEIGHT +
     COLOUR, never from a second typeface. --serif is kept only as a legacy alias so the ~40 rules
     that still say var(--serif) resolve to the one font — swap --font once to reskin everything. */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  --sans: var(--font);
  --serif: var(--font);

  /* modular type scale (native-mobile, ~1.2 ratio; iOS/Material-inspired named tiers) */
  --fs-hero: 30px;     /* cover / unit-complete celebration */
  --fs-display: 26px;  /* the taught word — the hero of a vocab card */
  --fs-title: 21px;    /* card title · question · stimulus · cloze · drill cue */
  --fs-lg: 18px;       /* prominent content */
  --fs-body: 16px;     /* the BASE — options, chips, list rows, reader */
  --fs-sub: 14px;      /* instructions, secondary content, glosses */
  --fs-label: 13px;    /* EN hints, captions, helper text */
  --fs-caption: 11px;  /* kickers, meta, micro-labels (UPPERCASE) */

  /* weights — Inter reads best at these steps */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* 4-pt spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;

  /* corner radii */
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-pill: 999px;

  /* elevation — WARM-tinted shadows (biased toward the ink brown, never neutral grey) so a raised
     surface reads as "lit on cream", not "floating on white". The whole bolder-refresh depth system
     hangs off these three rungs: rest → hover/lift → press. (Daniel 2026-07-24: bolder visual refresh.) */
  --sh-1: 0 1px 2px rgba(74, 58, 38, .05), 0 3px 8px -2px rgba(74, 58, 38, .07);
  --sh-2: 0 2px 4px rgba(74, 58, 38, .06), 0 12px 24px -8px rgba(74, 58, 38, .16);
  --sh-press: inset 0 1px 2px rgba(74, 58, 38, .10);
  --sh-btn: 0 2px 4px rgba(168, 81, 47, .18), 0 10px 20px -8px rgba(168, 81, 47, .42);
  --sh-btn-press: inset 0 2px 5px rgba(120, 52, 26, .34);

  /* semantic text tiers */
  --text: var(--ink); --text-2: var(--ink-soft); --text-3: #a99c85;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow-x: clip; }   /* belt-and-braces against sideways drift */

/* Respect a reduced-motion preference — the depth/press micro-interactions and celebratory
   animations calm down; state is still legible via colour + shadow. (Bolder refresh, 2026-07-24.) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
body {
  background: #e8e0cf;
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv05" 1, "ss01" 1;   /* Inter: friendlier lowercase l / single-storey */
  letter-spacing: -0.006em;
}
/* Inter wants a touch of negative tracking as text gets bigger, and none once it's tiny — this
   one rule gives every display/title element that polish instead of setting it ad-hoc per class. */
h1, h2, h3, .card-title, .bigword, .flip-word, .mcq-word, .prompt, .cloze-line, .drill-cue,
.reveal-line, .cover h1, .fb-it { letter-spacing: -0.018em; }

/* Casing (round 22, Daniel). Best practice: a prompt/phrase/hero is presented as language-in-use,
   so it reads sentence-cased — a LEADING capital, natural punctuation, no ALL-CAPS. `::first-letter`
   does this at the display layer only (the underlying data + grading are untouched, and words that
   are already capitalised stay put). Answer options / word tiles keep their natural case; kickers &
   speaker labels are the only ALL-CAPS, as eyebrow labels. */
.bigword::first-letter, .card-title::first-letter, .prompt::first-letter, .mcq-word::first-letter,
.cloze-line::first-letter, .drill-cue::first-letter, .flip-word::first-letter,
.reveal-line::first-letter, .scala-txt::first-letter,
.gloss::first-letter, .repeat-en::first-letter, .vf-claim::first-letter { text-transform: uppercase; }

#page {
  max-width: 520px;
  /* APP-SHELL (round 98, Daniel — iPhone Safari NON-full-screen): the shell is pinned to the VISIBLE
     viewport (100dvh = what's left between Safari's address bar + bottom toolbar), and only #stage
     scrolls INSIDE it. So the topbar and the Continua footer are always on-screen — nothing hides
     behind Safari's chrome, which is the whole of "parts of the screen were out of view". Before, the
     DOCUMENT scrolled with a sticky top/bottom, which iOS Safari tucks behind its toolbars. `svh`
     fallback = the always-toolbars-shown height for engines without dvh. */
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  margin: 0 auto;
  background: var(--paper);
  box-shadow: 0 0 24px rgba(61, 52, 40, .18);
  display: flex;
  flex-direction: column;
  position: relative;
  /* The shell itself never scrolls (only #stage does), and nothing inside may widen it — a stray
     sliver would otherwise widen the LAYOUT VIEWPORT and every position:fixed sheet with it. */
  overflow: hidden;
}

/* ---------- top bar — ONE unified app bar across cover / course-map / lesson ----------
   Three slots (left / center / right) filled contextually by the Topbar module; every
   control shares one round-token visual language, so the map, fullscreen, avatar, back
   and brand all read as siblings (was three disjoint bars before). */
/* round 29 (Daniel): the header strip is 50% taller (54 → 81px) and everything inside scales up with
   it — the old 34px controls and 12px chips floated in the middle of the new band. */
#topbar {
  display: flex; align-items: center; gap: 10px;
  height: var(--stick-top); padding: 0 14px;
  border-bottom: 1px solid var(--paper-deep);
  background: var(--paper); z-index: 5;
  /* app-shell: a fixed top row (flex:none) — no longer sticky, since #page is now viewport-height and
     #stage scrolls inside it. */
  flex: none;
}
#topbar .tb-l, #topbar .tb-r { display: flex; align-items: center; gap: 7px; flex: none; }
#topbar .tb-c { flex: 1; display: flex; align-items: center; min-width: 0; }

/* the one token: a round 44px control — back · map · fullscreen · avatar all use it (round 29: 34→44) */
.tb-btn {
  flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--paper-deep); background: #fffdf7; color: var(--terra-deep);
  cursor: pointer; transition: transform .1s, background .15s;
}
.tb-btn:hover { background: #fff; }
.tb-btn:active { transform: scale(.9); }
.tb-btn.ghost { border-color: transparent; background: transparent; }
.tb-btn.ghost:hover { background: var(--paper-deep); }
.tb-btn.av { background: #f4efe2; font-family: var(--sans); font-weight: 700; font-size: 17px; }
.tb-btn svg { width: 21px; height: 21px; }
/* round 29 (Daniel): the "S" monogram is replaced by Sofia's real channel logo. */
.tb-brand {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: var(--terra); overflow: hidden;
  display: grid; place-items: center;
}
.tb-brand img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tb-cap { font-family: var(--sans); font-size: 17px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.tb-chips { display: flex; align-items: center; gap: 7px; }
.tb-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink-soft);
  background: #fffdf7; border: 1px solid var(--paper-deep); border-radius: 999px; padding: 6px 12px;
}
.tb-chip .s { color: var(--gold); font-size: 16px; }

/* round 11: the iOS "Aggiungi a Home" hint (no Fullscreen API on iPhone) */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  max-width: 320px; width: calc(100% - 40px); z-index: 60;
  background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 13px;
  line-height: 1.4; padding: 11px 15px; border-radius: 12px; text-align: center;
  box-shadow: 0 8px 26px rgba(0,0,0,.3); opacity: 0; transition: opacity .35s, transform .35s;
  pointer-events: none;
}
.toast.in { opacity: 1; transform: translate(-50%, 0); }
#progress { flex: 1; height: 10px; background: var(--paper-deep); border-radius: 5px; overflow: hidden; }
#progress > div { height: 100%; width: 0; border-radius: 5px; transition: width .35s ease;
  background: linear-gradient(90deg, var(--terra), var(--gold)); }

/* bottom padding trimmed 100px→28px: the feedback footer is sticky+in-flow (it reserves its own
   space), so the old 100px was pure dead scroll under short cards (Daniel: "no reason to scroll
   to nothing"). #stage still flex:1-fills the page, keeping the footer pinned to the bottom. */
/* app-shell: #stage is the ONLY scroll surface. flex:1 fills the space between the fixed topbar and
   footer; min-height:0 lets it actually shrink+scroll inside the flex column (without it a tall card
   would push the footer off-screen — the old bug); overflow-y:auto scrolls the card, never the page,
   so Safari's toolbars stay put and the footer never hides behind them. */
#stage { flex: 1 1 0; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; padding: 20px 22px 28px; }

/* ---------- cover ---------- */
.cover { text-align: center; padding-top: 7dvh; }
.cover .show { font-family: var(--sans); letter-spacing: .14em; text-transform: uppercase; font-size: 12px;
  color: var(--ink-mid); font-weight: var(--fw-medium); }
.cover h1 { font-size: 40px; color: var(--terra-deep); margin: 18px 0 4px; line-height: 1.1; }
.cover .level { font-family: var(--sans); font-size: 15px; color: #5b6d86; margin-bottom: 26px; }
.cover .claim {
  margin: 20px auto; max-width: 320px; padding: 16px 20px;
  border: 1.5px solid var(--terra); border-radius: 10px; background: #fff9ef;
}
.cover .claim .big { font-size: 26px; color: var(--terra-deep); font-weight: 700; line-height: 1.2; }
.cover .claim .sub { font-size: 14px; color: var(--ink-mid); line-height: 1.45; margin-top: 7px; }
/* round 28 (Daniel): the €26 price block is GONE from the cover — pricing is TBD (one-time vs
   subscription) and the app is no longer sold as "a book you own" (the book = the free PDF). */
.cover .cover-note { font-family: var(--sans); font-size: 12.5px; color: var(--ink-mid);
  margin-top: 16px; max-width: 300px; margin-left: auto; margin-right: auto; line-height: 1.4; }
/* ---------- table of contents ---------- */
.toc h2 { color: var(--terra-deep); font-size: 24px; margin-bottom: 14px; }
.toc .chapter {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 12px; margin-bottom: 10px;
  border: 1px solid var(--paper-deep); border-radius: 10px; background: #fffdf7;
  cursor: pointer;
}
.toc .chapter:hover { border-color: var(--terra); }
.toc .num {
  font-family: var(--sans); font-size: 20px; font-weight: 700; color: var(--terra);
  width: 34px; text-align: center;
}
.toc .t { flex: 1; }
.toc .t .title { font-weight: 600; }
.toc .t .meta { font-family: var(--sans); font-size: 12px; color: var(--ink-soft); }
.toc .done { color: var(--sage); font-size: 18px; }

/* ---------- cards ---------- */
/* flex:0 0 auto (was flex:1) — the card sizes to its CONTENT, not stretching to fill the stage;
   that stretch left a tall empty tail under short cards and made them scroll to nothing (Daniel,
   across ~a dozen cards). #stage still fills the page, so the footer stays pinned. min-width:0 is
   load-bearing: without it a flex child keeps its content's min-width and a long line (e.g. mined
   options / dialogue) pushes the whole card past the viewport's right edge. */
.card { display: flex; flex-direction: column; flex: 0 0 auto; min-width: 0; }
.card .kicker {
  font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 12px;
}
/* THE PROMPT (round 22, Daniel: "realign to one methodology"). Every textual prompt across every
   card — the taught word, a question, a story title, a stimulus — is ONE colour (terracotta accent)
   and one weight; only the SIZE tier changes by role. This rule also fixes a specificity bug: the
   old `.card h3.prompt{color:ink}` silently overrode `.big-q{color:terra}`, which is why Ripeti tu /
   Come si dice / Rispondi tu read a different colour from every other card. */
.card h3.prompt { font-size: var(--fs-title); font-weight: var(--fw-semibold); color: var(--terra-deep);
  margin-bottom: 18px; line-height: 1.3; }
.card .prompt-it { color: var(--terra-deep); }
.card .card-title { font-size: var(--fs-title); font-weight: var(--fw-bold);
  color: var(--terra-deep); margin-bottom: 12px; line-height: 1.2; }

/* Canonical card HEADER (Daniel's methodology): the block that MAY hold a textual prompt and MAY
   hold the listen button. Figure cards already express it as .cardfig-headtext (beside/above the
   figura); non-figure prompt cards use .card-header so every prompt-bearing card reads the same and
   "Show parts" labels it identically. */
.card-header { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.card-header > * { margin-bottom: 0; }
.card-header .audio-btn { align-self: flex-start; }

/* figure layout matrix (Daniel) — the image is NEVER on top of the content. Only the 21 marked
   cards get a figure. Two layouts; the slot only sets the image aspect ratio.
     STACK — image centred on top, content below.
     SPLIT — image floats top-left; title/prompt + Ascolta wrap beside it; the interactive body
             (options / dialogue / build) clears the float → full width below the image. */
.cardfig.stack { display: flex; flex-direction: column; align-items: center; min-width: 0; }
/* the figure size — same rule whether centred (stack) or top-left (split), no per-card widths
   (Daniel: "make figura smaller, like Costruisci la frase, but keep centered"). */
.cardfig.stack > .cardfig-img { width: 40%; margin-bottom: 6px; }
.cardfig.size-small.stack > .cardfig-img { width: 26%; }
.cardfig.stack > .cardfig-body { width: 100%; min-width: 0; display: flex; flex-direction: column;
  margin-top: 14px; }   /* a little space above the question (Daniel) — same gap as split's head */
.cardfig.stack .prompt { text-align: center; }   /* speaking prompt centred under the image (Daniel) */

/* SPLIT — header row (figure top-left, header text in the RIGHT half) over a full-width body.
   Daniel 2026-07-11 (round 3):
     • figure is TOP-stuck (align-items:flex-start) and its size is aspect-fixed, so it never moves
       with the length of the right-hand text.
     • header text STARTS at the card's horizontal centre (50%), left-aligned → justify-content:
       space-between + a 50%-wide text column pins its left edge to the middle.
     • the text block is vertically centred against the figure (align-self:center on the column).
     • the Ascolta button is centred within that right-hand space (align-self:center), not on the image.
   .cardfig-head margin-bottom = the "little space before the answers". */
.cardfig.split { display: block; }
/* t020 (Daniel, u07 #45 word_bank): "the card is too tall, tighten up a little above the help pill".
   The head text is vertically centred against a 312px figure, so a 2-line prompt ends well above the
   figure's foot and the paper between it and the first body row reads as dead. 18 → 10 here, and the
   pill's own 8px top margin goes when it LEADS the body (below) — 16px off every split card. */
.cardfig-head { display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 10px; }
.cardfig-body > .hint-ladder:first-child { margin-top: 0; }
.cardfig-head > .cardfig-img { align-self: flex-start; }   /* top-stuck, aspect-fixed */
/* THE SIZE AXIS (Daniel 2026-08-05) — exactly two, set once here, never per-card. `large` is the
   default; `small` is derived from sticky-head, i.e. the cards whose text scrolls under a pinned
   figure, where the avatar would otherwise eat the strip. What this replaces: a slot-keyed pair of
   flex-bases (33%/40%) sold as two CROPS, 4:5 and 2:3, that both rendered 3:4. */
.cardfig.size-large .cardfig-head > .cardfig-img { flex: 0 0 40%; }
.cardfig.size-small .cardfig-head > .cardfig-img { flex: 0 0 26%; }
.cardfig-headtext { flex: 0 0 50%; align-self: center; min-width: 0;      /* right half, left edge = card centre */
  display: flex; flex-direction: column; gap: 8px; text-align: left; }
.cardfig-headtext > * { margin-bottom: 0; text-align: left; }   /* flex gap spaces them; keep left-aligned */
.cardfig-headtext .mcq-stim { justify-content: center; text-align: center; }  /* gate review (Daniel 2026-07-17): the mcq prompt is card-centered, figure or not */
.cardfig-headtext .mcq-word { text-align: center; width: 100%; }
/* Ascolta centred in the RH space (Daniel) — margin:auto + fit-content works whether the button is a
   direct child of the text column OR nested in a card's own wrapper div (mic_buildup's goal, word_bank's row). */
/* the button is a fixed-size circle now — it only needs centring, not sizing (`width: fit-content`
   here would fight the 46px and collapse the circle to an oval) */
.cardfig-headtext .audio-btn { display: grid; margin-left: auto; margin-right: auto; align-self: center; }
.cardfig-body { min-width: 0; }
.cardfig-body > *:last-child { margin-bottom: 0; }   /* no dead tail under the last answer */

.fig-ph { position: relative; width: 100%; display: grid; place-items: center; align-content: center;
  gap: 5px; border: 1.5px dashed var(--gold); border-radius: 14px; background: #fbf3df; }
/* ONE crop, 3:4, carried by .cardfig-img for every figure card. The two slot-keyed ratios that
   used to sit here (4/5 and 2/3) never applied — .fig-ph has no sized parent of its own, so both
   computed to `auto` and every card measured 3:4 anyway. The distinction that survives is SIZE,
   set on .cardfig-img above. */
.fig-glyph { font-size: 30px; opacity: .55; line-height: 1; }
.fig-cap { font-family: var(--sans); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); }
/* the figura ID badge — pinned top-left of the placeholder so Daniel can recognise which of the two
   figura types a card uses at a glance (portrait / figure) */
/* what the figure is DOING right now (engine.js Figure). Visible before a single frame of video
   exists, which is the point: the state machine is legible on the phone. */
.fig-state { position: absolute; bottom: 6px; right: 6px; font-family: var(--sans); font-size: 9px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
  background: #fffdf7; border: 1px solid var(--gold); border-radius: 6px; padding: 1px 6px; }
.fig-ph[data-state="speak"]   .fig-state { background: var(--terra-deep); border-color: var(--terra-deep); color: #fff; }
.fig-ph[data-state="prompt"]  .fig-state { background: #3f6fb0; border-color: #3f6fb0; color: #fff; }
.fig-ph[data-state="bravo"]   .fig-state { background: #4f9d69; border-color: #4f9d69; color: #fff; }
.fig-ph[data-state="quasi"]   .fig-state { background: #c98a3f; border-color: #c98a3f; color: #fff; }
.fig-ph[data-state="riprova"] .fig-state { background: #c05a4a; border-color: #c05a4a; color: #fff; }
.fig-cap { text-transform: capitalize; }

/* ── the figure is ALIVE (engine.js FigurePlayer) ──────────────────────────────────────────────
   Two stacked <video>s crossfade between clips, so both must occupy the same box. The clips are
   3:4 (834x1112) while the slots are 4:5 / 2:3, so `cover` + a TOP anchor: crop the feet, never
   the head. The baked warm-cream background is the same family as the placeholder's, so the seam
   between "figure" and "card" doesn't read. */
/* NO FRAME (Daniel 2026-07-13). The dashed box is scaffolding for an EMPTY slot — it says "art goes
   here". Once the art is playing, a border around it just boxes the character in; her baked
   warm-cream background is already the card's own colour, so with the frame gone she sits in the
   page instead of in a widget. */
/* The dashed border AND the 🧍 glyph go the moment the player mounts — but the warm-cream FILL stays
   until the first real frame is on screen (`.fig-shown`, added by FigurePlayer.swap). Going transparent
   at mount — as this once did — left the slot empty until the first clip decoded, so the hero blinked
   out at card open and only reappeared when it spoke; leaving the GLYPH up instead showed a hero-emoji
   flash before the figure loaded (Daniel, phone test 2026-07-22 #5). So the bridge is a plain cream box
   — the clip's own baked background — into which the figure simply appears. No hole, no emoji. */
.fig-ph.fig-live { border: none; overflow: hidden; }
.fig-ph.fig-live.fig-shown { background: transparent; }
.fig-live .fig-glyph { display: none; }               /* hidden from mount — the cream fill is the bridge, not the 🧍 */
/* FIG-1 (PRD §4) in FIGSTAGE, where the base rule forces the slot transparent: the 🧍 is NEVER shown
   (not even in the mount→attach frame), and the decode window is a quiet paper-deep wash — the figure
   "settling in", masked+faded like the figure itself — instead of a hole or an emoji. Rare under CC-0
   preload; this is the safety-net visual, not a common state. */
body.figstage .fig-glyph { display: none; }
body.figstage .fig-ph.fig-live:not(.fig-shown) { background: var(--paper-deep); }
.fig-vid { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0%; border-radius: 12px; }
.fig-live .fig-cap, .fig-live .fig-id, .fig-live .fig-state { position: absolute; z-index: 2; }
.fig-live .fig-cap { bottom: 6px; left: 6px; background: #fffdf7cc; border-radius: 6px;
  padding: 1px 6px; backdrop-filter: blur(2px); }
/* NO CLIP for this state: the machine ran, the art doesn't exist, and the figure just kept resting
   (poses.py, NO INVENTED TRANSITIONS). Marked, not hidden — the point of running the machine early
   is to SEE where it is thin, and this dotted chip is the render module's to-do list on the phone. */
.fig-ph[data-degraded="1"] .fig-state { outline: 2px dotted #c05a4a; outline-offset: 1px; }
.fig-id { position: absolute; top: 6px; left: 6px; font-family: var(--sans); font-size: 10px;
  font-weight: 700; letter-spacing: .06em; color: var(--terra-deep); background: #fffdf7;
  border: 1px solid var(--gold); border-radius: 6px; padding: 1px 6px; }

/* operating instructions — quiet helper voice, one step above the caption tier */
.instruction {
  font-size: var(--fs-sub); font-weight: var(--fw-medium); color: var(--text-2);
  border-left: 3px solid var(--paper-deep); padding: 2px 0 2px 10px;
  margin-bottom: 14px; line-height: 1.4;
}

/* EN hint pill + speaker affordance */
.hint-btn {
  font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .06em;
  color: var(--slate); background: none; border: 1px solid var(--slate);
  border-radius: 9px; padding: 1px 7px; cursor: pointer; vertical-align: 2px;
}
.hint-btn.inline { margin-left: 8px; }
.hint-btn:hover { color: #fff; background: var(--slate); }
/* round 7: the sound affordance is the speaker SVG (not a 🔊 emoji) */
.spk { display: inline-flex; align-items: center; vertical-align: middle; color: var(--terra);
  opacity: .75; margin-left: 6px; pointer-events: none; }
.spk svg { width: 15px; height: 15px; }

.scene-img {
  width: 100%; border-radius: 12px; margin-bottom: 14px;
  border: 1px solid var(--paper-deep); background: var(--paper-deep);
  aspect-ratio: 16/9; object-fit: cover;
}
/* #71 (Daniel): image-card placeholder when a picture hasn't been supplied yet */
.img-ph { display: grid; place-items: center; gap: 4px; aspect-ratio: 16/9; width: 100%;
  margin: 4px auto 14px; border: 2px dashed var(--gold); border-radius: 12px;
  background: var(--paper-deep); color: var(--ink-soft); }
.img-ph-ic { font-size: 36px; opacity: .7; line-height: 1; }
.img-ph-cap { font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.portrait { width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--paper-deep); margin: 0 auto 10px; display: block; }

/* ▶ — a triangle in a circle, and nothing else (Daniel, 2026-07-14). The word "Ascolta" was a wide
   pill of text in the row the figure now wants, and the triangle already said it. The label lives on
   as the button's accessible name (engine.js Api.audioButton), so nothing is lost but the ink.
   The triangle is drawn with borders rather than set as a glyph: ▶ renders at a different size,
   baseline and weight in every font, and a play button that wobbles between cards looks broken. */
.audio-btn {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; padding: 0; gap: 0;
  border: 1.5px solid var(--terra); color: var(--terra-deep); background: #fff9ef;
  border-radius: 50%; cursor: pointer; margin-bottom: 16px;
  transition: transform .1s, background .15s;
}
.ab-play {
  width: 0; height: 0; margin-left: 3px;                 /* optical centre: a triangle is left-heavy */
  border-left: 14px solid currentColor;
  border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.audio-btn:hover { background: #fff3e2; }
.audio-btn:hover .ab-play { border-left-color: currentColor; }
.audio-btn.small { width: 34px; height: 34px; margin: 0; }
.audio-btn.small .ab-play { margin-left: 2px; border-left-width: 10px;
  border-top-width: 6.5px; border-bottom-width: 6.5px; }
.audio-btn:active { transform: scale(.94); }

.bigword { font-size: var(--fs-hero); font-weight: var(--fw-semibold); color: var(--terra-deep);
  text-align: center; margin: 8px 0 2px; line-height: 1.15; }
.gloss { text-align: center; color: var(--text-2); font-size: var(--fs-sub); font-style: italic; margin-bottom: 14px; }

.options { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.options.grid2 { display: grid; grid-template-columns: 1fr 1fr; }
.opt {
  border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--card);
  padding: 15px 17px; font-size: var(--fs-lg); font-weight: var(--fw-medium); cursor: pointer;
  text-align: left; box-shadow: var(--sh-1); color: var(--ink);
  transition: border-color .15s, background .15s, box-shadow .18s, transform .12s;
}
/* hover ONLY where a real pointer exists — on touch, :hover sticks after a tap (Daniel's ghost-button
   bug). Phones get their feedback from :active instead. */
@media (hover: hover) {
  .opt:hover:not(:disabled) { border-color: var(--terra); box-shadow: var(--sh-2); transform: translateY(-1px); }
}
.opt:active:not(:disabled) { transform: translateY(1px) scale(.994); box-shadow: var(--sh-press); border-color: var(--terra); }
.opt.img { padding: 11px 6px 7px; text-align: center; }
.opt.img img { width: 58%; max-width: 110px; border-radius: 50%; aspect-ratio: 1/1;
  object-fit: cover; border: 2px solid var(--line); }
/* answered states are terminal — kill the press transform, swap to a filled tint + inner ring so a
   right/wrong answer reads as a solid state, not just a recoloured border. */
.opt.correct { border-color: var(--sage-deep); background: var(--sage-bg);
  box-shadow: inset 0 0 0 1.5px rgba(85, 112, 56, .22); transform: none; }
.opt.wrong { border-color: var(--bad); background: var(--red-bg); opacity: .92;
  box-shadow: var(--sh-1); transform: none; }
.opt:disabled { cursor: default; }

/* word-bank / chips */
/* #56 (Daniel, U4): reserve a full chip row up front so the first pick never grows the
   answer area and shifts the Check button. #34: ghost twins hold the bank layout. */
.bank, .built { display: flex; flex-wrap: wrap; gap: 8px;
  padding: 8px; border-radius: 10px; }
/* t018 (Daniel #16, 2nd ask): the boxes must NOT grow when the first chip lands. A pixel
   min-height drifts with font metrics, so instead an invisible zero-width chip twin sits in each
   box — the row is ALWAYS exactly one chip tall, and only a genuine wrap to a second line adds
   height. Same vertical metrics as .chip (padding/border/font), no width, no interaction. */
/* t033: the twin holds the row's HEIGHT and must not hold any of its WIDTH. As a flex item it held
   both — a 2px border box plus the 8px gap — so the first row's chips began ~10px right of every
   wrapped row below them, which is the misalignment Daniel circled.
   The first fix took it out of flow, and that broke the thing it was there for: an absolutely
   positioned twin contributes no height either, so the EMPTY bank collapsed to its padding
   (Daniel, same day: "the WordBank when it's empty is too narrow, return it to the original
   size"). It stays in flow — it has to, that is the whole mechanism — with its side border and the
   flex gap cancelled instead. Height kept, ten pixels returned. */
.bank::before, .built::before { content: "\200b"; padding: 9px 0; border: 1px solid transparent;
  border-left-width: 0; border-right-width: 0; margin-right: -8px;   /* zero width, and no gap after it */
  font-size: var(--fs-lg); line-height: normal;   /* the container's 1.5 would out-grow a real chip */
  align-self: flex-start; pointer-events: none; }
.built { border: 1.5px dashed var(--slate); background: #fffdf7; margin-bottom: 12px; }
.bank { background: var(--paper-deep); }
.chip {
  /* #33 (Daniel): larger chip text — fs-body read too small in the word-bank build (and the
     which_am source pool reuses .chip, so #30 benefits too). */
  font-size: var(--fs-lg); font-weight: var(--fw-medium); border: 1px solid var(--line);
  line-height: normal;   /* t018: buttons default to this, but the ghost twin is a <span> — without
                            pinning it, the hidden twin inherits 1.5 and silently grows its row */
  background: var(--card); border-radius: var(--r-sm); padding: 9px 15px; cursor: pointer;
  text-align: left; color: var(--ink); box-shadow: var(--sh-1);
  transition: transform .12s, box-shadow .15s, border-color .15s;
}
@media (hover: hover) { .chip:hover { border-color: var(--terra); box-shadow: var(--sh-2); } }
.chip:active { transform: scale(.96); box-shadow: var(--sh-press); }
.built .chip { cursor: grab; }
.chip.dragging { opacity: .45; cursor: grabbing; }
.check-btn { width: auto; align-self: flex-start; padding: 9px 26px; margin-top: 4px; }

/* ───────── phone test 2026-07-29 (Daniel: card design / behaviour) ───────── */
/* #1: the story ▶ becomes a ⏸ while the scene plays — two SYMMETRIC bars (left+right borders on a
   transparent box), so the pair is centred in the button (a single bar + right-only shadow sat off-centre). */
.audio-btn.playing .ab-play {
  box-sizing: border-box; width: 15px; height: 17px; margin-left: 0; background: transparent;
  border-width: 0 5px; border-style: solid; border-color: currentColor; box-shadow: none;
}
.audio-btn.small.playing .ab-play { width: 12px; height: 12px; border-width: 0 4px; }

/* #30: larger text across which_am — hints, placed lines, placeholder (source chips inherit the .chip bump). */
.wa-head span { font-size: 13px; }
.wa-full { font-size: var(--fs-lg); font-weight: var(--fw-medium); }
.wa-zone .wa-ph { font-size: 12px; }

/* #18: dillo is hard for beginners — space each sentence apart, enlarge the English prompt, and make
   room for a per-sentence Aiuto row + the no-mic study fallback. */
/* the trial already carries a solid border-bottom (.sprint-trial) — just widen the gap; a second
   (dashed) rule made the "double separation lines" Daniel saw. Selectors are .sprint-trial-qualified
   so they win over the later .sprint-trial base rules (equal-class specificity, source order). */
/* #16 (Daniel 2026-07-30): tighter dillo trials so 3 items fit without scrolling (was 14/14 — too airy).
   t024 (2026-08-11): "when the questions are multiple lines, the card is a little too tall. Reduce
   gaps around horizontal lines a little." The line IS `.sprint-trial`'s border-bottom, so the gaps
   around it are this padding (above) and this margin (below) — 8/4 → 5/2, ~8px per trial, and a
   mic_set runs three of them. The trial gets taller when the English cue wraps, which is the case he
   was looking at; the cue itself is not touched (it was enlarged deliberately in round 16). */
.sprint-trial.dillo-trial { margin-bottom: 2px; padding: 5px 0; }
.sprint-trial.dillo-trial .dillo-en { font-size: 17px; }
.dillo-aiuto { grid-column: 1 / -1; justify-self: start; margin-top: 2px; }
.dillo-study { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; }
.dillo-study .dillo-answer { font-size: var(--fs-lg); color: var(--terra-deep); font-weight: var(--fw-medium); }

/* No-mic TYPED fallback for the multi-item speaking cards (dillo / mic_conjugation_set): the mic's 3-column
   grid can't hold a text input + Check, so each row STACKS — English cue, then a full-width input with
   an inline Check — tightly spaced, no scroll (Daniel 2026-07-30: "no mic mode doesn't look good").
   :has() scopes it to the rows that actually swapped to typing; mic rows keep their grid. */
.sprint-trial:has(.typed-trial) { display: block; padding: 8px 0; margin-bottom: 0; }
.sprint-trial:has(.typed-trial) .st-left { margin-bottom: 6px; }
.sprint-trial:has(.typed-trial) .st-mid { display: block; min-width: 0; }
.sprint-trial:has(.typed-trial) .st-right { display: none; }   /* the typed input IS the answer surface */
.sprint-trial:has(.typed-trial) .typed-trial { margin: 0; flex-wrap: nowrap; }

/* #6: a persistent "tap to flip" tip in the flashcard's top-right corner. */
.flip-tip { position: absolute; top: 6px; right: 8px; z-index: 3; font-family: var(--sans);
  font-size: 11px; color: var(--ink-soft); background: rgba(255, 253, 247, .85);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; pointer-events: none; }

/* cloze */
.cloze-line { font-size: var(--fs-title); line-height: 1.8; margin-bottom: 14px; }
.cloze-blank {
  display: inline-block; min-width: 84px; border-bottom: 2px solid var(--terra);
  text-align: center; color: var(--terra-deep); font-weight: 600;
}
.person-hint { font-size: var(--fs-sub); color: var(--ink-soft); }
.built.reject { border-color: var(--bad); animation: reject .45s; }
@keyframes reject {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); } 75% { transform: translateX(5px); }
}

/* dialogue bubbles */
.dialogue { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.bubble {
  max-width: 85%; padding: 10px 14px; border-radius: 14px; position: relative;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-1);
}
/* THE RIGHT-HAND RAIL IS REVERTED (Daniel asked for it 2026-08-07, then saw it: "the microphone on
   the right hand side and the speaker on the right hand side ruined the layout, and it creates too
   much empty space and incorrect overflows"). The two-column grid gave the rail a column of its
   own, and on a `.mine` bubble that column holds TU *and* the Help chip — so the cue was squeezed
   into a five-word-tall ribbon ("You're / not / Marco. / Say / no:") beside a mostly empty rail.
   The stacked layout wastes a row on short turns; the rail wasted a whole column on long ones,
   which is worse. Left as it was, deliberately, and the reason is written down so it is not
   re-attempted from the same reasoning. */
.bubble .who { font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 3px; }
.bubble.right { align-self: flex-end; background: #f4efe2; }
.bubble.gap { border-style: dashed; border-color: var(--terra); color: var(--ink-soft); }
/* Daniel 2026-08-05: "tighten the dotted prompt to save space and ensure the content fits without
   scroll." The gapped bubble holds two characters («… ?») in a box padded for a full turn, and once
   the card gained its hero the whole thing ran 16px past the stage. It is a slot, not a speech
   bubble — so it gets slot padding and a tighter dialogue gap on this card only. */
[data-type="dialogue_completion"] .dialogue { gap: 7px; margin-bottom: 10px; }
[data-type="dialogue_completion"] .bubble { padding: 7px 12px; }
[data-type="dialogue_completion"] .bubble.gap { padding: 5px 12px; }

/* matching pairs */
.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* round 34 (Daniel): every tile is the SAME size — two lines tall — because on a phone the long
   English ("good morning / day") wraps and used to make its row taller than the rest. Tighter vertical
   padding buys the second line without growing the card. */
.pairs .opt {
  min-height: 62px; padding: 8px 12px;
  display: flex; align-items: center;
  line-height: 1.25; overflow-wrap: anywhere;
}
.pairs .opt.sel { border-color: var(--gold); background: #fdf6e6; }
.pairs .opt.matched { border-color: var(--sage); background: #f2f6ee; opacity: .55; cursor: default; }

/* «Which I am?» sorter — 3 verb columns + a pool of gapped phrases */
/* "Ripeti tu" — the English gloss under the Italian line you repeat. */
.repeat-en { font-family: var(--sans); font-size: var(--fs-sub); color: var(--ink-soft); text-align: center; margin: 2px 0 4px; }
/* #16b (Daniel 2026-07-28): the "Repeat this line" cue is a SPEECH BUBBLE with a tail pointing down at
   the line to repeat — no longer a flat label that read as sitting on the figure. Terracotta so it
   reads as an instruction, not content. */
.repeat-bubble { font-family: var(--sans); font-size: var(--fs-sub); color: var(--terra-deep);
  text-align: center; letter-spacing: .01em; position: relative;
  display: block; width: fit-content; max-width: 88%; margin: 4px auto 14px;
  background: var(--paper-deep); border: 1.5px solid var(--terra); border-radius: 14px;
  padding: 6px 14px; box-shadow: 0 1px 3px rgba(42, 39, 35, .07); }
.repeat-bubble b { font-weight: 700; }
.repeat-bubble::after, .repeat-bubble::before { content: ""; position: absolute; left: 50%;
  transform: translateX(-50%); width: 0; height: 0;
  border-left: 8px solid transparent; border-right: 8px solid transparent; }
.repeat-bubble::after { bottom: -8px; border-top: 8px solid var(--terra); }           /* the border edge of the tail */
.repeat-bubble::before { bottom: -6px; border-top: 7px solid var(--paper-deep); z-index: 1; }  /* the fill, laid over it */

/* #23 (Daniel): a two-turn exchange to judge, shown as a mini-script (one em-dashed line per turn). */
.yn-dialog { margin: 8px auto 14px; max-width: 90%; padding: 10px 14px; background: var(--paper-deep);
  border-radius: 12px; }
.yn-line { font-size: var(--fs-lg); color: var(--ink); line-height: 1.5; padding: 3px 0; }

.wa-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 6px 0 4px; }
.wa-col { min-width: 0; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper-deep);
  padding: 6px 5px 8px; display: flex; flex-direction: column; transition: border-color .12s, background .12s; }
/* round 27 (Daniel): columns are DROP targets now, not tap targets — highlight the one under the finger. */
.wa-col.hot { border-color: var(--gold); background: #fdf6e6; }
.wa-head { text-align: center; padding: 2px 0 6px; border-bottom: 1px dashed var(--line); margin-bottom: 6px; }
.wa-head b { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--terra-deep); display: block; }
.wa-head span { font-size: 11px; color: var(--ink-soft); line-height: 1.25; display: block; margin-top: 2px; overflow-wrap: anywhere; }
.wa-zone { display: flex; flex-direction: column; gap: 5px; min-height: 54px; flex: 1; }
.wa-zone .wa-ph { margin: auto; width: 100%; text-align: center; font-size: 10px; font-style: italic;
  color: var(--ink-soft); border: 1px dashed var(--line); border-radius: 8px; padding: 9px 4px; }
.wa-pool { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; justify-content: center; }
.wa-chip { border: 1.5px solid var(--line); background: var(--card); border-radius: 11px;
  padding: 6px 11px; cursor: grab; text-align: center; line-height: 1.15; min-width: 76px; user-select: none; }
.wa-chip .wa-gap { display: block; font-size: 16.5px; color: var(--ink); }
.wa-chip .wa-gap i { color: var(--gold); font-style: normal; }
.wa-chip .wa-en { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 1px; }
/* round 27 (Daniel): the lifted chip follows the finger (transform) and paints above the columns. */
.wa-chip.dragging { position: relative; z-index: 60; cursor: grabbing; border-color: var(--gold);
  background: #fdf6e6; box-shadow: 0 8px 20px rgba(0,0,0,.16); }
.wa-chip.nudge { animation: wa-nudge .42s; }
.wa-chip.wrong { border-color: var(--bad); background: #f9efee; animation: wa-shake .4s; }
.wa-chip.done { border-color: var(--sage); background: #f2f6ee; cursor: default; padding: 5px 8px; min-width: 0; }
.wa-chip.done .wa-full { font-size: 15px; color: var(--ink); }
@keyframes wa-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes wa-nudge { 20% { transform: translateY(-3px) rotate(-2deg); } 60% { transform: translateY(-1px) rotate(2deg); } }

/* debug locator + per-card feedback — collapsed by default (a "dev" toggle expands it) so it
   never eats card space or distorts the production layout */
/* BOTTOM-RIGHT, not top-left (Daniel, 2026-07-14: "move the dev card ... so nothing obstructs your
   ability to stick the figures to the top of the card with minimal head space"). It was the first
   thing in the card, so it owned the exact strip of headroom the figure now wants. It is dev
   furniture: it belongs out of the way, and out of the flow entirely — `position: fixed` means it
   costs the card no height at all, collapsed or expanded. */
.dbg { position: fixed; right: 12px; bottom: 134px; z-index: 58;   /* above the ✎ (fb-btn), which took the corner */
  display: flex; align-items: center; gap: 8px; flex-direction: row-reverse;
  font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; color: var(--ink-soft);
  margin: 0; opacity: .75; }
.dbg:hover { opacity: 1; }
.dbg-detail { max-width: 62vw; }
.dbg-toggle { flex: 0 0 auto; font-family: var(--sans); font-size: 9px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
  background: var(--paper-deep); border: 1px solid var(--line); border-radius: 6px;
  padding: 1px 6px; cursor: pointer; opacity: .5; }
.dbg-toggle:hover { opacity: 1; }
.dbg-detail { display: flex; align-items: center; gap: 8px; background: var(--paper-deep);
  border: 1px solid var(--line); border-radius: 8px; padding: 3px 6px 3px 9px; }
.dbg.collapsed .dbg-detail { display: none; }
.dbg-kicker { font-family: var(--sans); text-transform: uppercase; letter-spacing: .08em;
  font-size: 10px; color: var(--slate); }
.dbg-kicker:empty { display: none; }
.dbg-loc { overflow-wrap: anywhere; letter-spacing: .02em; }
.dbg-fb { flex: 0 0 auto; font-family: var(--sans); font-size: 11px; border: 1px solid var(--line);
  background: #fff; border-radius: 7px; padding: 2px 8px; cursor: pointer; color: var(--ink-soft); }
.dbg-fb.has { background: #fdf6e6; border-color: var(--gold); color: var(--terra-deep); }
.dbg-pop { position: fixed; z-index: 90; width: 262px; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(50,35,20,.22); padding: 8px; }
.dbg-pop-h { font-family: ui-monospace, monospace; font-size: 10px; color: var(--ink-soft);
  margin-bottom: 6px; overflow-wrap: anywhere; }
.dbg-pop textarea { width: 100%; min-height: 70px; border: 1px solid var(--line); border-radius: 8px;
  padding: 7px; font: 13px var(--sans); resize: vertical; }
.dbg-pop-row { display: flex; gap: 6px; margin-top: 6px; }
.dbg-pop-row button { flex: 1; border: 1px solid var(--line); border-radius: 7px; padding: 6px;
  font-size: 12.5px; cursor: pointer; background: #fff; }
.dbg-pop-row .dbg-save { background: var(--terra); color: #fff; border: 0; }
/* top-left, under the topbar — it was bottom-left, colliding with the "?" (Daniel, round 3) */
.dbg-export { position: fixed; left: 10px; top: calc(var(--stick-top) + 10px); z-index: 70; display: none;
  background: var(--ink); color: #fff; border: 0; border-radius: 10px; padding: 7px 12px;
  font-size: 12.5px; cursor: pointer; box-shadow: 0 3px 10px rgba(50,35,20,.25); }

/* "how to do this card" affordance — bottom-left ? that pops the explanation (Daniel).
   z-index sits ABOVE the hint ribbon (61 > 60) so the ribbon slides UNDER the circle and vanishes
   behind it — the "?" is opaque and covers the ribbon's left edge / its exit. */
.help-btn { position: fixed; left: 16px; bottom: 90px; z-index: 61; width: 36px; height: 36px;
  border-radius: 50%; border: 1.5px solid var(--terra); background: #fff;
  color: var(--terra-deep); font-family: var(--sans); font-weight: 800; font-size: 18px;
  line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgba(50,35,20,.20);
  display: none; place-items: center; }
.help-btn:hover { background: var(--terra); color: #fff; }
.help-en { color: var(--slate); }

/* The ⚑ learner-feedback affordance — the ?'s bottom-right mirror (engine.js Fb). Same style
   and size as the ? (Daniel 2026-08-02: the gray outline read smaller — match it exactly). */
.fb-btn { position: fixed; right: 16px; bottom: 90px; z-index: 61; width: 36px; height: 36px;
  border-radius: 50%; border: 1.5px solid var(--terra); background: #fff;
  color: var(--terra-deep); font-family: var(--sans); font-weight: 800; font-size: 18px;
  line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgba(50,35,20,.20);
  display: none; place-items: center; }
.fb-btn:hover { background: var(--terra); color: #fff; }
.fb-btn.sent { border-color: var(--gold); background: #fdf6e6; color: var(--terra-deep); }
.fb-too-hard { display: block; width: 100%; margin-bottom: 6px; border: 1px solid var(--terra);
  border-radius: 8px; background: #fff; color: var(--terra-deep); font-family: var(--sans);
  font-size: 13px; font-weight: 600; padding: 7px; cursor: pointer; }
.fb-too-hard:hover { background: var(--terra); color: #fff; }
.fb-pop { position: fixed; right: 12px; bottom: 136px; z-index: 90;
  width: min(300px, calc(100vw - 24px)); background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; padding: 10px;
  box-shadow: 0 10px 28px rgba(50,35,20,.25); }
.fb-pop-h { font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--ink-soft);
  margin-bottom: 6px; }
.fb-pop textarea { width: 100%; min-height: 84px; border: 1px solid var(--line); border-radius: 8px;
  padding: 7px; font-family: var(--sans); font-size: 13px; resize: vertical; box-sizing: border-box; }
.fb-pop-row { display: flex; gap: 6px; margin-top: 6px; }
.fb-pop-row button { flex: 1; border: 1px solid var(--line); border-radius: 7px; padding: 7px;
  font-family: var(--sans); font-size: 12px; cursor: pointer; background: #fff; }
.fb-pop-row .fb-send { background: var(--terra); color: #fff; border: 0; font-weight: 700; }

/* reader */
.reader { font-size: var(--fs-lg); line-height: 1.9; }
/* round 13 (Daniel): the line's speaker icon leads the line — flex row [🔊][speaker+text] */
.reader .turn { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 14px; }
.reader .turn-content { flex: 1; min-width: 0; }
.reader .who { font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3); }
/* round 9 (Daniel): ALL tappable words look identical — one underline, NO highlight (target
   words are no longer singled out; every segment teaches many, so highlighting one felt off). */
/* tappable word affordance — shared by the reader AND the story bubbles (La storia) */
.reader .w, .bubble .w { cursor: pointer; border-radius: 4px; padding: 0 1px;
  border-bottom: 1.5px solid rgba(201, 111, 74, .45); }
.reader .w.active, .bubble .w.active { background: var(--gold); color: #fff; }
/* round 8 (Daniel): the SAME bare speaker graphic as everywhere else — no circle/border. */
.reader-play { display: inline-flex; align-items: center; justify-content: center;
  margin-left: 8px; vertical-align: middle; border: none; background: none;
  color: var(--terra); cursor: pointer; padding: 2px; }
.reader-play.lead { flex: none; margin-left: 0; margin-top: 5px; }   /* round 13: at the line start */
.reader-play svg { display: block; width: 16px; height: 16px; }
.reader-play:active { transform: scale(.9); }
.glosspop {
  position: fixed; transform: translate(-50%, -110%);
  background: var(--ink); color: var(--paper); font-family: var(--sans);
  font-size: 14px; border-radius: 8px; padding: 7px 12px; z-index: 30;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); pointer-events: none; max-width: 240px;
  text-align: center;
}
.glosspop small { opacity: .7; }

/* conjugation table callout */
.conj { border: 1px solid var(--paper-deep); border-radius: 10px; background: #fffdf7;
  padding: 12px 16px; margin: 10px 0; }
.conj .inf { font-weight: 700; color: var(--terra-deep); }
.conj .infen { color: var(--ink-soft); font-style: italic; font-size: 14px; margin-bottom: 6px; }
.conj .row { display: grid; grid-template-columns: 1fr 1fr; font-size: 16px; padding: 1px 0; }
.conj .row .f.used { color: var(--terra-deep); font-weight: 700; }
.conj .row .e { color: var(--ink-soft); font-size: 14px; }

/* word_set_review & checklists */
.deca { counter-reset: d; }
.deca .item { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--paper-deep); }
.deca .item::before { counter-increment: d; content: counter(d); font-family: var(--sans);
  font-weight: 700; color: var(--terra); width: 22px; text-align: right; }
/* #64 (Daniel): the checkbox sits centred against its section (IT + EN block), not top-aligned. */
.cando .item { display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px dashed var(--paper-deep); cursor: pointer; }
.cando input { width: 20px; height: 20px; accent-color: var(--sage); flex: none; }
/* IT on its own line, EN dropped to a new line beneath it (Daniel) */
.cando-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; align-items: flex-start; }  /* #64 (Daniel 2026-07-24): left-align the statements so the lines don't read as ragged/centred */
/* round 23 (Daniel): both checklists (word_set_review + can-do) share the type scale — IT on the
   --fs-lg content tier, EN on the --fs-sub gloss tier — so neither reads as a typographic outlier. */
.cando-it { font-size: var(--fs-lg); font-weight: var(--fw-medium); }
.cando-en { font-family: var(--font); font-size: var(--fs-sub); font-style: italic; color: var(--ink-soft); }

/* speech */
.mic-btn {
  display: block; margin: 18px auto; width: 84px; height: 84px; border-radius: 50%;
  border: 2px solid var(--terra); background: #fff9ef; font-size: 34px; cursor: pointer;
}
.mic-btn.rec { background: var(--terra); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 14px rgba(201, 111, 74, .15); } }
.stt-out { text-align: center; min-height: 28px; font-size: var(--fs-lg); color: var(--ink); }
.stt-hint { text-align: center; font-size: var(--fs-label); color: var(--ink-soft); }

/* speaking suite (wave 5) */
.hint-ladder { display: flex; align-items: baseline; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.hint-shown { font-size: var(--fs-body); color: var(--terra-deep); }
.cannot-speak { text-align: center; margin-top: 10px; }
.ghost-link { background: none; border: none; color: var(--ink-soft); text-decoration: underline;
  font-size: var(--fs-label); font-weight: var(--fw-medium); cursor: pointer; padding: 4px; }
/* the green/gray "explain my mistake" word diff */
.wdiff .d-match { color: var(--sage); }
.wdiff .d-sub { color: var(--bad); text-decoration: line-through; }
.wdiff .d-del { color: var(--bad); opacity: .55; border-bottom: 2px dotted var(--bad); }
.wdiff .d-ins { color: var(--terra); font-style: italic; }
/* round 5: Sprint / Scala / Dillo share one 3-column grid — English cue on the LEFT,
   persona+mic centered, Italian result on the RIGHT (above the dividing line). */
/* round 6: Sprint / Dillo share a 3-column grid — English cue LEFT, mic centered, Italian
   result RIGHT — and the side text vertically CENTRES ON THE MIC. Trick: take everything
   but the mic out of the middle column's flow (persona chip absolute above, transcript
   absolute below), so the column's flow-height = the mic and align-items:center lands the
   side text on the mic's centre line. */
.sprint-trial { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--paper-deep); }
.sprint-trial.has-persona { padding-top: 34px; }   /* room for the persona chip above the mic */
/* round 7: English cue LEFT-aligned (Daniel); round 16: bumped 13px→16px to match the Italian
   result size (Daniel — the cue was too small to read comfortably against the answer). */
.sprint-trial .st-left { text-align: left; font-family: var(--sans); font-size: 16px; color: var(--ink-soft); line-height: 1.3; }
.sprint-trial .st-mid { position: relative; display: flex; align-items: center;
  justify-content: center; min-width: 72px; }
.sprint-trial .st-mid .mic-btn { width: 48px; height: 48px; font-size: 22px; margin: 0; }
.sprint-trial .st-mid .stt-out { position: absolute; top: calc(100% + 7px); left: 50%;
  transform: translateX(-50%); width: 130px; min-height: 0; font-size: 12px; color: var(--ink-soft); }
.sprint-trial .st-mid .stt-hint { display: none; }   /* the compact grid hides the long hint */
.sprint-trial .persona-chip { position: absolute; bottom: calc(100% + 2px); left: 50%;
  transform: translateX(-50%); white-space: nowrap; }
.sprint-trial .st-right { text-align: left; font-size: 16px; min-height: 24px;
  min-width: 0; overflow-wrap: anywhere; }   /* round 27: let the 1fr answer column shrink so the reveal WRAPS, never overflows */
.st-right .ok, .st-right.ok { color: var(--sage); }
/* phone test 2026-07-20 (Daniel): the per-trial retry cue (#44 — a missed trial was silent, so the
   learner didn't know to try again) sits below the mic like the transcript readout used to; a landed
   trial tints its answer sage so success has a VISUAL, not just the ding (#18). */
.sprint-trial .st-mid .trial-cue { position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%); white-space: nowrap; font-family: var(--sans); font-size: 11px;
  color: var(--terra-deep); line-height: 1.2; pointer-events: none; }
.sprint-trial.trial-ok .st-right { color: var(--sage-deep); font-weight: var(--fw-semibold); }
.st-right .ko, .st-right.ko { color: var(--terra-deep); }
/* round 7: two clean result lines — what was HEARD (ear) then the CORRECT form; no quotes,
   no strike-through diff. Shared by Sprint, Dillo and Come si dice (in .stt-result). */
.sr-heard { display: flex; align-items: center; gap: 4px; font-family: var(--sans);
  font-size: 12px; color: var(--ink-soft); }
.sr-heard .ear { display: inline-flex; opacity: .7; }
.sr-heard.miss { color: var(--bad); font-weight: 600; }   /* what you said, when it was wrong */
.sr-heard.ok { color: var(--sage); }
.sr-target { font-size: var(--fs-lg); color: var(--terra-deep); margin-top: 1px; }
.sr-target.ok { color: var(--sage); font-weight: 600; }   /* the correct answer, in green */
.stt-result .sr-heard { justify-content: center; }
.stt-result .sr-target { text-align: center; }
.dillo-trial .st-left.dillo-en { display: flex; align-items: center; gap: 8px; justify-content: flex-start; }
.dillo-en img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; }
/* round 26 (Daniel): Sprint's pronoun hint on the cue side + the underlined answer slot on the right */
.st-pron { flex: 0 0 auto; display: inline-flex; align-items: center; }
.sr-slot { display: inline-block; min-width: 62px; height: 1.15em; border-bottom: 2px solid var(--slate);
  vertical-align: text-bottom; }

/* Scala all'indietro — round 6: no English column; left-aligned rows, mic fixed on the
   left, text wraps; unfinished rows carry a dotted underline. */
.scala-row { display: flex; align-items: center; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--paper-deep); }
.scala-row .scala-mic { flex: none; }
.scala-row .scala-mic .mic-btn { width: 44px; height: 44px; font-size: 20px; margin: 0; }
.scala-row .scala-mic .stt-out, .scala-row .scala-mic .stt-hint { display: none; }
.scala-row .scala-txt { flex: 1; font-size: var(--fs-lg); text-align: left; }
.scala-row .scala-txt.unfinished { color: var(--ink-soft); border-bottom: 2px dotted var(--slate); }
.scala-row .scala-txt.done { color: var(--sage); }
.scala-row .scala-txt.miss { color: var(--terra-deep); }
/* in-card diff surface (never the footer — Footer uses textContent) */
.stt-result { text-align: center; font-family: var(--sans); font-size: 14px; margin: 6px 0; min-height: 18px; }

/* progressive fill-in reveal (Daniel's mic-mistake design) — the target sentence as underlined
   word-slots; got = you said it (green underline), blank = not yet, blink = flash the still-missing
   words red, shown = revealed after the 3rd attempt. */
.reveal-line { font-size: var(--fs-title); line-height: 1.55; text-align: center; margin: 10px 0 2px; }  /* round 26 (Daniel): underline closer to the word */
.reveal-line.reveal-left { text-align: left; }   /* round 24 (Daniel): mic_rebuild_line rebuilds a full sentence — left-aligned reads better than centred */
/* vertical-align: bottom so every underline sits on ONE line even when a slot label is a smaller font
   (the "your city" free-slot is .72em — on the default baseline align its border-bottom rode higher
   than the full-size blanks, the "underline misaligned" phone-test note, Daniel 2026-07-30). */
.reveal-line .rw { display: inline-block; vertical-align: bottom; margin: 0 4px; padding: 0 3px; border-bottom: 2px solid var(--slate); }
.reveal-line .rw.blank { color: transparent; }                                   /* just the underline (width hints length) */
.reveal-line .rw.punct { border-bottom: none; color: var(--ink-soft); }          /* a lone "—" etc: shown plain, no slot */
.reveal-line .rw.anchor { color: var(--ink-soft); border-bottom-color: var(--paper-deep); }  /* given hint word */
.reveal-line .rw.got   { color: var(--ink); border-bottom-color: var(--sage); }  /* said correctly */
.reveal-line .rw.shown { color: var(--terra-deep); border-bottom-color: var(--terra); }  /* given after 3 tries */
.reveal-line .rw.blink { color: var(--bad); border-bottom-color: var(--bad); animation: rw-blink .85s ease; }
.reveal-line .rw.slot.blank { color: var(--ink-soft); min-width: 3.2em; text-align: center;
  font-style: italic; font-size: .72em; }   /* "your name" reads as a label, not literal words */  /* free "*" slot (your own name): visible "…" */
.reveal-line .rw.slot.shown { color: var(--ink-soft); }   /* a missed free slot has no canonical word to reveal */
/* round 27 (Daniel): compact reveal for the Sprint / Dillo answer column (a narrow grid cell) */
.reveal-inline { font-size: var(--fs-body); line-height: 1.5; margin: 0; }
.reveal-inline .rw { margin: 0 2px; padding: 0 2px; }
@keyframes rw-blink { 0%,100% { opacity: 1 } 20% { opacity: .12 } 40% { opacity: 1 } 60% { opacity: .12 } 80% { opacity: 1 } }
.bubble.mine .cue { color: var(--ink-soft); font-style: italic; }
.bubble.mine .mic-btn { width: 44px; height: 44px; font-size: 20px; margin: 6px 0 0; }
/* u03 t007 (Daniel): "the host's prompt should have a speaker icon in a similar style and size as
   the microphone icons below". The icon was there but as a 15px inline glyph beside the text, while
   the learner's mic right underneath is a 44px circle — they read as different kinds of thing. Same
   circle, same size, same border, so the pair reads as "he speaks / you speak". It keeps
   pointer-events:none from the base .spk rule, so tapping it still triggers the bubble's own play. */
.bubble:not(.mine) .spk {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--terra); background: #fff9ef;
  opacity: 1; margin: 6px 0 0;
}
.bubble:not(.mine) .spk svg { width: 20px; height: 20px; }
/* round 23 (Daniel): halve the gap between the mic and its Aiuto. In a botta bubble the
   transcript shows in .cue (not .stt-out), so the reserved 28px box + the ladder's 8px was
   dead space — collapse the empty box and pull Aiuto up tight under the mic. */
.bubble.mine .stt-out { min-height: 0; }
.bubble.mine .stt-hint { display: none; }
.bubble.mine .hint-ladder { margin: 3px 0 0; justify-content: center; }
.bubble.active-turn { animation: turnpulse 1.5s infinite; }
@keyframes turnpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 111, 74, 0); }
  50% { box-shadow: 0 0 0 4px rgba(201, 111, 74, .18); } }
/* Il drill — one step at a time */
.drill-step { border: 1px solid var(--paper-deep); border-radius: 12px; padding: 14px 16px; background: #fffdf7; }
/* round 18 (Daniel): "Passo x/N" is a small caption ON the step card (top-right); the mic sits
   directly under the cue with no dead space (empty hint hidden, tight result). */
.drill-step .drill-prog { font-family: var(--sans); font-size: 11px; letter-spacing: .06em;
  color: var(--ink-soft); text-align: right; margin-bottom: 6px; }
.drill-step .drill-cue { font-size: var(--fs-title); font-weight: var(--fw-semibold); color: var(--terra-deep); text-align: center; margin-bottom: 4px; }
.drill-step .drill-en { font-size: var(--fs-label); color: var(--ink-soft); text-align: center; margin-bottom: 8px; }
.drill-step .mic-btn { margin: 8px auto 4px; }
.drill-step .stt-hint { display: none; }
.drill-step .stt-result { margin: 2px 0 0; min-height: 0; }
/* mic_reply — a visible EN reminder next to Aiuto that this is a reply, not an echo (Daniel) */
/* #22 (Daniel, U4): the English reply cue is the card's main instruction — readable, not a footnote */
.reply-hint { font-family: var(--sans); font-size: 15.5px; font-style: italic; color: var(--ink);
  text-align: center; margin-top: 4px; }
/* Ricostruisci — the masked skeleton. round 6: a SINGLE underline for blanks (the old
   "____" text under a border read as a double underline), punctuation stays visible, and
   the hidden words highlight when revealed on success. */
.cloze-line.skeleton { font-size: var(--fs-title); line-height: 1.9; }
.skeleton .anchor-word { color: var(--terra-deep); font-weight: 600; }
.skeleton .anchor-blank { display: inline-block; min-width: 30px; border-bottom: 2px solid var(--slate); }
.skeleton .anchor-punct { color: var(--ink-soft); }
.skeleton .anchor-revealed { color: var(--terra-deep); font-weight: 600;
  background: rgba(217, 164, 65, .18); border-radius: 4px; padding: 0 2px; }

/* ---------- round-5 additions ---------- */
/* phrase card aligned to the New-word card (just a touch smaller for longer text) */
.bigword.phrase { font-size: var(--fs-display); }

/* structured word popup (the flagship reader) + shared conjugation table */
.glosspop.rich { pointer-events: auto; text-align: left; max-width: 270px; padding: 12px 14px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--paper-deep);
  box-shadow: 0 8px 26px rgba(61, 52, 40, .3); }
.wordpop .wp-head { font-size: 17px; margin-bottom: 8px; }
.wordpop .wp-head b { color: var(--terra-deep); }
.wp-gloss { color: var(--ink-soft); font-style: italic; font-size: 14px; }
/* round 6: the popup listen is a small inline ▶ following the Italian word (not a wide
   "▶ Ascolta" block on its own line). */
.wp-listen { font-size: 11px; border: 1.5px solid var(--terra); color: var(--terra-deep);
  background: #fff9ef; border-radius: 50%; width: 22px; height: 22px; line-height: 1; padding: 0;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; margin-left: 4px; }
.conjtable { margin-top: 8px; border-top: 1px solid var(--paper-deep); padding-top: 6px; }
.conjtable .chead { font-family: var(--sans); font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; }
.conjtable .crow { display: grid; grid-template-columns: 66px 1fr; font-size: 14px; padding: 2px 4px; border-radius: 5px; }
.conjtable .crow .cp { color: var(--ink-soft); }
.conjtable .crow.on { background: rgba(217, 164, 65, .22); }
.conjtable .crow.on .cf { color: var(--terra-deep); font-weight: 700; }

/* flip flashcard — round 6: FIT the stage (was max-width:340px, wider than the padded
   phone frame → clipped on the right), auto-height via grid-STACKING (both faces share one
   cell) so a long real example never overflows a fixed 210px box, and text wraps. */
.flip { perspective: 1000px; position: relative; margin: 8px auto 14px; max-width: 100%; width: 320px; cursor: pointer; }
.flip-inner { display: grid; transition: transform .55s; transform-style: preserve-3d; }
.flip.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face { grid-area: 1 / 1; min-height: 190px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 1.5px solid var(--paper-deep); border-radius: 16px; background: #fffdf7; padding: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 4px 14px rgba(61, 52, 40, .12); overflow-wrap: anywhere; }
.flip-face.back { transform: rotateY(180deg); }
.lang-badge { position: absolute; top: 12px; left: 14px; font-family: var(--sans); font-size: 12px;
  font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.lang-badge.it { background: #eef3ea; color: var(--sage); }
.lang-badge.en { background: #eef1f6; color: var(--slate); }
/* round 15: mcq is flag-driven — inline flags (not the absolute flip-card badge). */
.mcq-stim { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 16px; }
.mcq-stim .lang-badge, .mcq-ansflag .lang-badge { position: static; top: auto; left: auto; flex: 0 0 auto; }
/* min-width:0 lets a long EN gloss ("to be (state/health)") wrap instead of overflowing the card */
.mcq-word { font-size: var(--fs-display); font-weight: var(--fw-semibold); color: var(--terra-deep); line-height: 1.2;
  min-width: 0; text-align: center; overflow-wrap: anywhere; }
.mcq-ansflag { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; }
.mcq-af-t { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); }
.flip-word { font-size: var(--fs-display); font-weight: var(--fw-semibold); color: var(--terra-deep); text-align: center; }
.flip-word.en { color: var(--ink); font-size: var(--fs-title); }
.flip-ex { font-size: var(--fs-sub); color: var(--ink-soft); font-style: italic; text-align: center; }
.grade-row { display: flex; gap: 12px; margin-top: 6px; }
.grade-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: 15px; font-weight: 600; padding: 12px; border-radius: 12px;
  border: 1.5px solid; cursor: pointer; background: #fff; }
.grade-btn.yes { color: var(--sage); border-color: var(--sage); }
.grade-btn.no { color: var(--terra-deep); border-color: var(--terra); }
.grade-btn:disabled { opacity: .5; cursor: default; }
.grade-btn svg { flex: none; }

/* mistake-explanation reveal + retry note + free-text dictation */
.explain { display: none; font-family: var(--sans); font-size: 14px; color: var(--ink);
  background: #fff9ef; border: 1px solid var(--paper-deep); border-radius: 10px; padding: 10px 12px; margin-top: 12px; }
.explain.show { display: block; }
.explain .conjtable { border-top: none; padding-top: 0; }
.retry-note { font-family: var(--sans); font-size: 13px; color: var(--terra-deep); margin-top: 8px; min-height: 18px; }
.dictation-input { width: 100%; font-family: var(--font); font-size: var(--fs-lg); padding: 12px 14px;
  border: 1.5px solid var(--paper-deep); border-radius: var(--r-md); background: #fff; color: var(--ink);
  resize: vertical; margin: 6px 0 10px; }
.dictation-input:focus { outline: none; border-color: var(--terra); }
/* u03 t004: a written_translation may GIVE the throwaway pronoun («tu, ___»), so the learner types
   only the part being taught. The given fragment reads as a hint, not as an editable field. */
.written-row { display: flex; align-items: center; gap: 8px; }
.written-row .dictation-input { flex: 1 1 auto; min-width: 0; }
.written-given { font-family: var(--font); font-size: var(--fs-lg); color: var(--muted);
  white-space: nowrap; flex: 0 0 auto; }

/* typed fallback for the speaking cards (Store.micOff — "type instead of speaking"). A text input +
   Check, sized to sit in ANY mount: a full-width prompt card OR a narrow sprint/dillo trial column.
   Graded by the same grade.js path as the microphone. */
.typed-trial { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 4px; }
.typed-input { flex: 1 1 150px; min-width: 0; font-family: var(--font); font-size: var(--fs-lg);
  padding: 10px 12px; border: 1.5px solid var(--paper-deep); border-radius: var(--r-md);
  background: #fff; color: var(--ink); }
.typed-input:focus { outline: none; border-color: var(--terra); }
.typed-input:disabled { opacity: .7; }
/* .typed-trial-qualified so width:auto beats the later `.btn { width:100% }` (equal single-class
   specificity → source order was making the Check button full-width and shoving the input off-screen,
   Daniel 2026-07-30 no-mic note). */
.typed-trial .typed-check { flex: none; width: auto; margin: 0; align-self: center; }

/* word_set_review — borderless two-column table with push-to-reveal English */
.deca-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px dashed var(--paper-deep); }
/* #78 (Daniel 2026-07-30): a long word_set_review entry wraps to a 2nd line — left-align it (the card's
   default is centered, which stranded the wrapped 2nd row in the middle). align-items:start keeps
   the speaker button by the FIRST line, not floated to the vertical centre of a 2-line word. */
.deca-it { display: flex; align-items: start; gap: 8px; text-align: left; }
.deca-it b { text-align: left; }
/* round 22 (Daniel): the word_set_review word sits on the same content tier as every other Italian
   word (options, chips, list rows) — --fs-lg / semibold — so the checklist isn't an outlier. */
.deca-it b { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.deca-spk { border: none; background: none; cursor: pointer; font-size: 15px; opacity: .65; padding: 0; }
.deca-en { font-family: var(--font); font-size: 13px; color: var(--ink-soft); background: none;
  border: 1px dashed var(--paper-deep); border-radius: 8px; padding: 4px 10px; cursor: pointer; font-style: italic; white-space: nowrap; }
/* round 23 (Daniel): once revealed, the English is plain text — no box, no border, no pill.
   It becomes a gloss on the same tier as every other EN translation (see .deca-en.shown below).
   t005 (U4 phone review, "too many words ruin the layout"): the revealed gloss takes its OWN
   full-width line under the Italian instead of squeezing beside a long entry. */
.deca-en.shown { border: none; background: none; padding: 0; cursor: default; white-space: normal;
  grid-column: 1 / -1; text-align: left; }

/* payoff — embedded YouTube player */
.yt-wrap { margin-top: 12px; text-align: center; }
.yt-embed { width: 100%; aspect-ratio: 16 / 9; border: none; border-radius: 12px; background: #000; }
.yt-link { display: inline-block; margin-top: 6px; font-family: var(--sans); font-size: 13px; color: var(--slate); }

/* app chrome (adopted from sofia-app) */
.app-bar { display: flex; align-items: center; gap: 7px; padding: 4px 2px 8px; }
.app-bar .brand { width: 34px; height: 34px; border-radius: 50%; background: var(--terra); color: #fff;
  font-weight: 700; display: grid; place-items: center; font-family: var(--sans); flex: none; }
.app-bar .chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--sans);
  font-size: 12px; font-weight: 600; color: var(--ink-soft); background: #fffdf7;
  border: 1px solid var(--paper-deep); border-radius: 999px; padding: 4px 9px; }
.app-bar .chip .s { color: var(--gold); }
.app-bar .chip.tier { text-transform: capitalize; }
.app-bar .av { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; background: #f4efe2;
  border: 1px solid var(--paper-deep); color: var(--terra-deep); font-weight: 700;
  display: grid; place-items: center; cursor: pointer; font-family: var(--sans); flex: none; }

/* serpentine course map */
.cm-head { margin-bottom: 2px; }
.cm-head h2 { color: var(--terra-deep); font-size: 21px; }
.cm-head .sub { font-family: var(--sans); font-size: 12px; color: var(--ink-soft); }
/* round 11 (Daniel): the whole A1 map fits ONE phone screen — the SVG scales down to the
   space it's given (preserveAspectRatio keeps it undistorted) and the toc trims its padding. */
.coursemap { margin: 2px -6px; text-align: center; }
.coursemap svg { display: inline-block; width: 100%; height: auto; }
.cm-note { font-family: var(--sans); font-size: 11px; color: var(--ink-soft); margin-top: 6px; }
#page.view-toc #stage { padding-top: 12px; padding-bottom: 16px; }

/* chapter lesson list — the ~5-min sessions of one chapter */
.les-list { display: flex; flex-direction: column; gap: 9px; margin: 12px 0; }
.les-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: #fffdf7; border: 1px solid var(--paper-deep); border-radius: 14px;
  padding: 12px 14px; cursor: pointer; box-shadow: 0 1px 3px rgba(61,52,40,.07); }
.les-row:hover:not([disabled]) { border-color: var(--gold); }
.les-row[disabled] { opacity: .5; cursor: default; box-shadow: none; }
.les-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid;
  place-items: center; color: #fff; font-family: var(--serif); font-weight: 700; font-size: 15px; }
.les-row.locked .les-n { border: 1.5px dashed var(--paper-deep); color: var(--ink-soft); }
.les-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.les-goal { font-family: var(--serif); font-size: 15px; color: var(--ink); line-height: 1.25; }
.les-meta { font-family: var(--sans); font-size: 11.5px; color: var(--ink-soft); }
.les-meta b { font-family: var(--serif); }
.les-go { flex: none; font-family: var(--sans); font-size: 13px; color: var(--terra); }
.les-row.done .les-goal { color: var(--ink-soft); }
.les-row.done .les-go { color: var(--sage); }

/* ── DIRECTION A · the lesson path (Daniel 2026-07-24) ──────────────────────────────────────────
   Nodes are LESSONS (the ~5-min thing you do); Units are non-clickable banners describing the theme.
   Replaces the unit-snake + lessons-table with ONE path, one metaphor. */
.path { display: flex; flex-direction: column; margin: 10px 0 2px; }
.path-unit { margin-bottom: 6px; }
/* The map used to stop at the last authored unit with everything ticked, which reads as "you
   have finished the course" rather than "the book is still being written". */
.path-unit.soon .pu-banner { background: transparent; border-style: dashed; opacity: .75; }
/* THE PAGE BLOCK — how the path ends while chapters are still out of sight (Daniel 2026-08-13,
   design C of four). The edge of a physical book: leaves stacked under the last visible unit,
   each narrower and fainter than the one above, thinning to nothing. Its whole job is to say
   "there is more of this book" without a title, a number or anything countable — the leaf count is
   FIXED at four whether three chapters remain or forty, which is what stops it being a slow
   counter. It is a real button: a tap on it is a want-signal (locked_unit_tapped) and opens the
   offer, the same as the greyed banners it replaces. */
.path-unit.block { margin: -2px 0 6px; }
.pu-block {
  display: block; width: 100%; padding: 0 0 2px; border: none; background: none;
  cursor: pointer; font: inherit; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.pb-leaf {
  display: block; height: 9px; margin: 0 auto;
  background: var(--paper-deep); border: 1px solid #eaddc4; border-top: none;
  border-radius: 0 0 10px 10px; transition: transform .14s ease, opacity .14s ease;
}
.pb-leaf:nth-child(1) { width: 96%; }
.pb-leaf:nth-child(2) { width: 90%; opacity: .8; }
.pb-leaf:nth-child(3) { width: 83%; opacity: .6; }
.pb-leaf:nth-child(4) { width: 76%; opacity: .4; }
.pb-cap {
  display: block; margin-top: 11px; text-align: center;
  font-family: var(--sans); font-size: 12px; color: var(--ink-soft);
}
/* The leaves fan very slightly on press, the way a page-block does under a thumb. Nothing moves on
   hover: this is a phone control first, and a map that twitches under a passing cursor reads as
   restless. */
.pu-block:active .pb-leaf:nth-child(2) { transform: translateY(1px); }
.pu-block:active .pb-leaf:nth-child(3) { transform: translateY(2px); }
.pu-block:active .pb-leaf:nth-child(4) { transform: translateY(3px); }
.pu-block:hover .pb-cap { color: var(--terra-deep); }
@media (prefers-reduced-motion: reduce) { .pb-leaf { transition: none; } }
/* The UNIT banner is now the FOLD CONTROL (Daniel 2026-08-03), so it has to read as pressable —
   it used to be deliberately inert (`cursor: default`, no hover), which is the opposite signal.
   Full-width button, left-aligned text so it still reads as a section header, and a caret that
   rotates: the caret is the part that says "there is more of me". */
.pu-banner { display: block; width: 100%; text-align: left; position: relative;
  background: var(--paper-deep); border: 1px solid #eaddc4; border-radius: 16px;
  padding: 11px 42px 11px 16px; cursor: pointer; font: inherit; color: inherit;
  -webkit-tap-highlight-color: transparent; transition: background .12s, border-color .12s; }
.pu-banner:hover { border-color: #ddcaa6; background: #f7efdd; }
.pu-banner:active { transform: scale(.995); }
.pu-caret { position: absolute; right: 13px; top: 50%; margin-top: -9px; color: var(--terra-deep);
  opacity: .75; transition: transform .18s ease; display: block; }
.path-unit.folded .pu-caret { transform: rotate(-90deg); }
/* The fold itself. `display:none` (not height:0) because the lessons box carries an inline pixel
   height from the node layout, which would otherwise win over any collapsed height. */
.path-unit.folded .pu-lessons { display: none; }
.path-unit.folded { margin-bottom: 8px; }
/* the "being written" row is not foldable — it has no lessons, so it keeps the old inert look */
.path-unit.soon .pu-banner { cursor: default; padding-right: 16px; }
.path-unit.soon .pu-banner:hover { border-color: #eaddc4; background: transparent; }
.pu-tag { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--terra-deep); }
.pu-desc { font-family: var(--serif); font-size: 15.5px; color: var(--ink); line-height: 1.3; margin-top: 1px; }
.pu-prog { font-family: var(--sans); font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; }
/* the lesson nodes — a winding snake: circles at varied offsets, joined by ONE smooth curve (drawn as
   an SVG spine behind them). Fixed 320px logical width, centred, so the px node positions line up with
   the SVG's coordinate space. */
.pu-lessons { position: relative; width: 320px; max-width: 100%; margin: 0 auto; }
.pu-spine { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
.pu-spine path { fill: none; stroke: #e4d8bd; stroke-width: 7; stroke-linecap: round; }
.path-node { position: absolute; transform: translate(-50%, -50%); width: 58px; height: 58px;
  border-radius: 50%; display: grid; place-items: center; border: none; padding: 0; cursor: pointer;
  font-family: var(--serif); font-weight: 800; font-size: 21px; line-height: 1; z-index: 1;
  box-shadow: 0 3px 0 rgba(61,52,40,.16), 0 4px 10px rgba(61,52,40,.12); transition: filter .1s; }
.path-node.done   { background: var(--sage); color: #fff; }
.path-node.cur    { width: 66px; height: 66px; background: var(--gold); color: #3b2e25;
  box-shadow: 0 0 0 6px rgba(233,180,76,.28), 0 4px 10px rgba(61,52,40,.18); font-size: 23px; }
.path-node.locked { background: var(--paper); color: var(--ink-soft); border: 2px dashed #d8c9ab; box-shadow: none; cursor: default; }
.path-node:active:not([disabled]) { filter: brightness(.93); }
/* the lesson's brief goal, beside its circle on the open side */
.pn-desc { position: absolute; transform: translateY(-50%); z-index: 1;
  font-family: var(--serif); font-size: 12.5px; color: var(--ink-soft); line-height: 1.24;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pn-desc.cur { color: var(--ink); font-weight: 600; }
.pn-start { display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--terra); margin-top: 3px; }
/* the bookend nodes — chapter (📖) head and scena (🎬) tail — read as squircles, not lesson circles,
   so "input / payoff" is legibly not "a drill". State colours (done/cur/locked) still apply. */
.path-node.pn-chapter, .path-node.pn-scena { border-radius: 20px; }
.pn-ic { font-size: 26px; line-height: 1; filter: saturate(1.05); }
.path-node.cur .pn-ic { font-size: 28px; }

/* ---------- round-6 additions ---------- */
/* clear-explanation lead sentence above a conjugation table (conjugation_cloze,
   complete_the_rule) */
.explain .ex-lead { font-weight: 600; color: var(--ink); margin-bottom: 6px; }

/* dictation — on pass, reveal the correct sentence + its translation */
.dict-reveal { display: none; margin-top: 8px; font-size: var(--fs-lg); color: var(--terra-deep); }
.dict-reveal.show { display: block; }
/* #34 (Daniel): the spelling-hint echo — words that landed vs the ones to look at again */
.dict-reveal.dict-check { color: var(--ink); font-weight: var(--fw-medium); }
.dict-reveal.dict-check .dw-ok { color: var(--sage-deep); }
.dict-reveal.dict-check .dw-near { color: var(--amber-deep); text-decoration: underline dotted var(--amber-deep); }
.dict-reveal.dict-check .dw-bad { color: var(--bad); text-decoration: underline wavy var(--bad); }
.dict-reveal .dict-en { display: block; font-family: var(--sans); font-size: 14px;
  font-style: italic; color: var(--ink-soft); margin-top: 2px; }

/* Aiuto (speaking cards): one button, help shown in a POPUP, used/total counter */
.aiuto-btn { font-size: 12px; }
.aiuto-pop { min-width: 150px; }
/* round 19 (Daniel): every help level shares ONE typographic register — the same font & size as
   the conjugation-table level (#1), so a text hint and the table read as one consistent ladder. */
.aiuto-pop .aiuto-hint { font-family: var(--sans); font-size: 14px; color: var(--ink); font-weight: 600; line-height: 1.4; padding: 2px 0; }
.aiuto-pop .aiuto-hint b { font-weight: 800; }
.aiuto-pop .conjtable { border-top: none; padding-top: 0; }
/* round 19: a working "hear the answer" control living inside a help level (mic_translate) */
.aiuto-pop .aiuto-listen { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans);
  font-size: 13px; color: var(--terra-deep); background: none; border: 1.5px solid var(--terra);
  border-radius: 8px; padding: 5px 10px; cursor: pointer; }
.aiuto-pop .aiuto-listen:hover { background: rgba(217, 164, 65, .14); }
.aiuto-pop .aiuto-listen svg { width: 16px; height: 16px; }
/* round 19: shown on a speaking card once the learner opted out of the mic for this lesson */
.mic-paused { text-align: center; color: var(--ink-soft); font-size: 13px; margin: 14px 0 4px; font-style: italic; }

/* two-line instruction (Italian above English) */
.instruction.two span { display: block; }
.instruction.two .ins-en { color: var(--slate); }

/* word_set_review — clickable Italian word + reveal (eye) icon */
.deca-word { cursor: pointer; border-bottom: 1px dotted transparent; }
.deca-word:hover { border-bottom-color: var(--terra); }
.deca-en.icon { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 28px; color: var(--slate); padding: 0; }
.deca-en.icon svg { display: block; }

/* ---------- round-7 additions ---------- */
/* large question text (Rispondi tu, Come si dice?) */
.prompt.big-q { font-size: var(--fs-display); font-weight: var(--fw-semibold); color: var(--terra-deep); line-height: 1.25; }

/* two-line feedback: Italian (green/red) with the English smaller below */
#footer .fb .fb-it { display: block; }
#footer .fb .fb-en { display: block; font-size: 13px; font-style: italic; opacity: .82; margin-top: 1px; }

/* small English translation lines (payoff) */
.sub-en { display: block; font-family: var(--sans); font-size: 13px; font-style: italic;
  color: var(--ink-soft); margin-top: 2px; }
.payoff .sub-en { text-align: center; }

/* flashcard: once-per-lesson hand-tap hint (pointer-events:none so a tap still flips).
   round 8: near the bottom-right corner, not the centre. */
.tap-hint { position: absolute; right: 16px; bottom: 14px;
  pointer-events: none; z-index: 3; animation: taphint 1.6s ease-in-out infinite;
  filter: drop-shadow(0 2px 3px rgba(61, 52, 40, .28)); }
@keyframes taphint {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-8px) scale(.86); }
  55% { transform: translateY(0) scale(1); }
}

/* word_set_review: revealed English = the shared EN-gloss tier (matches the can-do checklist and
   every inline translation) — round 23 (Daniel): "checklist fonts still different" + no box. */
/* #57 (Daniel 2026-07-28): the word_set_review is a keep-these reference — its revealed English reads bigger
   (body tier, not the small gloss tier) and upright, not italic. */
.deca-en.shown { font-family: var(--font); font-size: var(--fs-body); color: var(--ink-soft); font-style: normal; }

/* round 25 (Daniel): "Scorri" — each new card slides in from the right. overflow-x:hidden during
   the slide clips the incoming card's edge so the page never scrolls sideways. */
@keyframes card-slide-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
#stage.slide-in { animation: card-slide-in .26s cubic-bezier(.3,.72,.2,1); overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { #stage.slide-in { animation: none; } }

/* feedback footer */
#footer {
  /* app-shell: a fixed bottom row (flex:none) at the base of the viewport-height #page — always on
     screen, never behind Safari's bottom toolbar (was position:sticky, which iOS tucked away). */
  flex: none; background: var(--paper);
  border-top: 1px solid var(--paper-deep); z-index: 6;
  /* round 11: clear the iPhone home indicator when running full-screen / installed */
  padding: 14px 22px calc(14px + env(safe-area-inset-bottom));
}
#footer .fb { font-size: var(--fs-sub); font-weight: var(--fw-medium); margin-bottom: 10px; display: none; }
#footer .fb.ok { color: #4c7a43; display: block; }
#footer .fb.ko { color: var(--bad); display: block; }

/* round 25 (Daniel): the result SHEET — the verdict is no longer a thin band behind the "?"
   button, it colours the whole footer (feedback + Continua on one unmissable surface, the way
   Duolingo/Busuu do it). Tier drives the colour; the explanation reads in English. */
#footer.result { transition: background .22s ease, border-color .22s ease; }
#footer.result .fb { display: block; margin-bottom: 12px; }
.rs { display: flex; align-items: center; gap: 11px; animation: rs-rise .3s cubic-bezier(.2,.8,.2,1); }
.rs-ic { width: 30px; height: 30px; border-radius: 999px; flex: 0 0 auto; display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 16px; }
.rs-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rs-title { font-family: var(--font); font-weight: 700; font-size: var(--fs-lg); letter-spacing: -.01em; }
.rs-en { font-size: var(--fs-label); color: var(--ink-soft); line-height: 1.35; }
@keyframes rs-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
#footer.tier-perfetto, #footer.tier-bene { background: var(--sage-bg); border-top-color: var(--sage); }
#footer.tier-quasi { background: var(--amber-bg); border-top-color: var(--amber); }
#footer.tier-riprova { background: var(--red-bg); border-top-color: var(--bad); }
#footer.tier-perfetto .rs-ic, #footer.tier-bene .rs-ic { background: var(--sage-deep); }
#footer.tier-quasi .rs-ic { background: var(--amber); }
#footer.tier-riprova .rs-ic { background: var(--bad); }
#footer.tier-perfetto .rs-title, #footer.tier-bene .rs-title { color: var(--sage-deep); }
#footer.tier-quasi .rs-title { color: var(--amber-deep); }
#footer.tier-riprova .rs-title { color: var(--bad); }
/* the sheet's Continua/Ho capito takes the tier colour so the whole surface reads as one */
#footer.tier-perfetto .btn:not(:disabled), #footer.tier-bene .btn:not(:disabled) { background: var(--sage-deep); }
#footer.tier-quasi .btn:not(:disabled) { background: var(--amber-deep); }
#footer.tier-riprova .btn:not(:disabled) { background: var(--bad); }

/* streak pip — small, floating, top-right; counts consecutive first-try wins (Daniel). It sits
   just under the topbar and never overlaps card content. Hidden at 0. */
#streak-pip { position: fixed; top: 96px; right: 14px; z-index: 55; display: none; align-items: center;
  gap: 5px; padding: 4px 11px 4px 8px; border-radius: 999px; background: #fffdf7;
  border: 1px solid var(--paper-deep); box-shadow: 0 4px 14px -8px rgba(61,52,40,.5);
  font-family: var(--font); font-weight: 800; font-size: 14px; color: var(--terra-deep); }
#streak-pip.on { display: inline-flex; }
#streak-pip .flame { font-size: 16px; line-height: 1; }
#streak-pip .n { font-variant-numeric: tabular-nums; min-width: 10px; text-align: center; }
#streak-pip.bump { animation: pip-bump .5s cubic-bezier(.2,1.5,.4,1); }
@keyframes pip-bump { 0% { transform: scale(1); } 42% { transform: scale(1.34); } 100% { transform: scale(1); } }
/* round 32 (Daniel): losing the streak is a BALLOON POP, not a shake — it swells, then bursts and is
   gone. A shake said "error"; a pop says "you had something and it's not there any more", which is
   what actually happened. The ring is the burst. */
#streak-pip.pop { animation: pip-pop .45s cubic-bezier(.3,.9,.3,1) forwards; }
#streak-pip.pop::after {
  content: ""; position: absolute; inset: -6px; border-radius: 999px;
  border: 2px solid var(--bad); opacity: .9;
  animation: pip-burst .45s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes pip-pop {
  0% { transform: scale(1); opacity: 1; }
  38% { transform: scale(1.3) rotate(-2deg); opacity: 1; }
  100% { transform: scale(.25); opacity: 0; }
}
@keyframes pip-burst {
  0% { transform: scale(.9); opacity: .9; }
  100% { transform: scale(1.9); opacity: 0; }
}
/* repair-round divider card */
.repair { text-align: center; padding: 30px 10px; }
.repair h3 { font-size: var(--fs-display); color: var(--terra-deep); margin: 0 0 8px; }
/* phone test 2026-07-18 (Daniel): bigger English line, and the figure slot holds Sofia's
   so-so-then-idle video (see Registry.repair_divider) */
.repair .r-it { font-size: var(--fs-title); color: var(--ink-soft); font-style: italic; }
.repair .fig-ph video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
@media (prefers-reduced-motion: reduce) {
  .rs, #streak-pip.bump, #streak-pip.pop, #streak-pip.pop::after, .tipbub { animation: none; }
}
.btn {
  width: 100%; font-family: var(--font); font-size: var(--fs-lg); font-weight: var(--fw-semibold);
  padding: 15px; border-radius: var(--r-md); border: none; cursor: pointer;
  background: var(--terra); color: #fff; letter-spacing: -0.01em; box-shadow: var(--sh-btn);
  transition: transform .1s, background .15s, box-shadow .18s;
}
.btn:not(:disabled):hover { background: var(--terra-deep); }
.btn:not(:disabled):active { transform: translateY(1px) scale(.99); box-shadow: var(--sh-btn-press); }
.btn:disabled { background: var(--paper-deep); color: var(--ink-soft); cursor: default; box-shadow: none; }
.btn.ghost { background: none; color: var(--terra-deep); border: 1.5px solid var(--terra); }
/* phone test 2026-07-20 (Daniel, #33/#34): the generic .btn hover fills terracotta — on the ghost
   Check button that paints terracotta text on a terracotta fill (unreadable), and mobile sticky
   :hover / :focus leaves it stuck filled. Keep the ghost button an outline in EVERY interactive
   state so it never gets stuck unreadable. */
.btn.ghost:not(:disabled):hover, .btn.ghost:not(:disabled):active, .btn.ghost:not(:disabled):focus {
  background: #fdf0ea; color: var(--terra-deep); }
/* two-line audio-button label — the parenthetical drops under the main label (Daniel, mic_rebuild_line) */
.audio-btn .btn-sub { display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 400;
  opacity: .7; margin-top: 1px; }

/* payoff */
.payoff .medal { font-size: 52px; text-align: center; margin: 12px 0; }
.payoff h3 { text-align: center; color: var(--terra-deep); font-size: 24px; }
.payoff p.sub { text-align: center; color: var(--ink-soft); font-style: italic; margin-bottom: 16px; }

@media (min-width: 700px) {
  body { padding: 24px 0; }
  #page { border-radius: 6px; min-height: calc(100dvh - 48px); overflow: hidden; }
}

/* ================= round 11 (Daniel — phone maturity pass) ================= */

/* every English tip is now this well-styled panel (like the conjugation popup), not a
   light auto-hiding tooltip */
.enpop { min-width: 150px; max-width: 240px; }
.enpop .enpop-head { font-family: var(--sans); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--slate); margin-bottom: 4px; }
.enpop .enpop-body { font-family: var(--serif); font-size: 16px; color: var(--ink); font-style: italic; }

/* conjugation_cloze — the English translation revealed once solved (below the paradigm) */
.explain .ex-en { font-family: var(--serif); font-style: italic; font-size: 15px;
  color: var(--ink-soft); margin-top: 8px; }

/* complete_the_rule — evidence lines: Italian, then English on its OWN line (not inline) */
.evidence { margin-bottom: 10px; }
.evidence .ev-it { display: block; font-size: 18px; color: var(--ink); }
.evidence .ev-en { display: block; font-family: var(--sans); font-size: 13px; font-style: italic;
  color: var(--ink-soft); margin-top: 1px; }

/* in-lesson map overlay: where you are + tap-to-jump-back */
.lm-scrim { position: fixed; inset: 0; background: rgba(43,36,28,.42); z-index: 48;
  opacity: 0; transition: opacity .25s; pointer-events: none; }
.lm-scrim.in { opacity: 1; pointer-events: auto; }
.lm-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(84vw, 340px); z-index: 49;
  background: var(--paper); box-shadow: -8px 0 26px rgba(61,52,40,.28);
  transform: translateX(100%); transition: transform .28s ease; display: flex; flex-direction: column; }
.lm-panel.in { transform: translateX(0); }
.lm-head { padding: 16px 16px 10px; border-bottom: 1px solid var(--paper-deep); }
.lm-title { font-family: var(--serif); font-size: 19px; color: var(--terra-deep); }
.lm-sub { font-family: var(--sans); font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.lm-list { flex: 1; overflow-y: auto; padding: 8px 10px 20px; }
.lm-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 8px; border: none; background: none; border-radius: 8px; cursor: pointer;
  font-family: var(--sans); font-size: 14px; color: var(--ink); }
.lm-row .lm-n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  background: var(--paper-deep); color: var(--ink-soft); }
.lm-row .lm-t { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.lm-row .lm-brief { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-row .lm-type { flex: none; font-family: var(--sans); font-size: 11px; font-weight: 400; color: var(--ink-soft); }
.lm-row.cur .lm-type { color: var(--terra); }
.lm-row .lm-q { font-family: var(--sans); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--gold); border-radius: 8px; padding: 1px 6px; margin-left: 6px; }
.lm-row.done { color: var(--ink-soft); }
.lm-row.done .lm-n { background: var(--sage); color: #fff; }
.lm-row.done:hover, .lm-row.cur:hover { background: #fff9ef; }
.lm-row.cur { background: #fff3e6; }
.lm-row.cur .lm-n { background: var(--terra); color: #fff; }
.lm-row.cur .lm-t { font-weight: 700; color: var(--terra-deep); }
.lm-row.ahead { color: #c3b8a4; cursor: default; }
.lm-row.ahead .lm-n { background: transparent; border: 1px dashed var(--paper-deep); }
.lm-row[disabled] { pointer-events: none; }

/* round 13 — true_false: the claimed English meaning, quoted, straight (non-italic).
   round 23 (Daniel): onto the type scale (--fs-lg) — part of the "sentence" tier, not a
   one-off 19px. */
.vf-claim { font-family: var(--font); font-size: var(--fs-lg); color: var(--ink);
  text-align: center; margin: 10px 0 14px; }
/* choice buttons that carry an icon (thumbs on Vero/Falso) */
.opt.icon-opt { display: flex; align-items: center; justify-content: center; gap: 9px; }
.opt.icon-opt svg { flex: none; }
.opt.correct.icon-opt { color: var(--sage); }
.opt.wrong.icon-opt { color: var(--bad); }
/* round 13 — flashcard: the sample sentence is tappable, with a trailing speaker icon */
.flip-ex.clickable { cursor: pointer; }
.flip-ex .spk { color: var(--terra); }

/* unit-complete timing summary (the baked-in benchmark) */
/* Timings are DEV-ONLY now (Daniel 2026-07-25): they fed card_durations.yaml but cluttered the
   completion slide for learners. Hidden by default; ?dev=1 (body.dev) brings them back. */
.timing-card { display: none; margin: 4px auto 6px; max-width: 340px; width: 100%;
  border: 1px solid var(--paper-deep); border-radius: 12px; background: #fffdf7; padding: 12px 14px; }
body.dev .timing-card { display: block; }
.timing-card .tm-total { font-family: var(--sans); font-size: 15px; font-weight: 700;
  color: var(--terra-deep); text-align: center; margin-bottom: 8px; }
.timing-card .tm-list { font-family: var(--sans); font-size: 12px; color: var(--ink-soft);
  max-height: 168px; overflow-y: auto; }
.timing-card .tm-row { display: flex; justify-content: space-between; padding: 2px 0; }
.timing-card .tm-row em { color: #b7ab95; font-style: normal; }
.timing-card #tm-copy { display: block; margin: 10px auto 0; }

/* ---------------- guide character (POC wire-in, Daniel 2026-07-09) ----------------
   Sofia in a corner, reacting to the flow. pointer-events:none so she NEVER eats a tap;
   anchored above the footer; idle = slow vertical drift (no shake); success = gentle scale. */
.guide-slot { position: fixed; pointer-events: none; z-index: 12; opacity: 1;
  transition: opacity .28s ease; filter: drop-shadow(0 6px 10px rgba(70,50,30,.16));
  right: 8px; bottom: calc(76px + env(safe-area-inset-bottom)); }
.guide-slot.hide { opacity: 0; }
.guide-slot .pose { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: top center; opacity: 0; transition: opacity .22s ease; }
.guide-slot[data-state="idle"]     .pose[data-pose="idle"],
.guide-slot[data-state="prompt"]   .pose[data-pose="prompt"],
.guide-slot[data-state="correct"]  .pose[data-pose="correct"],
.guide-slot[data-state="wrong"]    .pose[data-pose="wrong"],
.guide-slot[data-state="thinking"] .pose[data-pose="thinking"] { opacity: 1; }
.guide-slot.bob[data-state="idle"] { animation: gbreathe 4.6s ease-in-out infinite; }
@keyframes gbreathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.guide-slot.pop { animation: gpop .36s ease; }
@keyframes gpop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
.guide-slot.pos-corner-r { right: 8px; left: auto; }
.guide-slot.pos-corner-l { left: 8px; right: auto; }
.guide-slot.pos-lower { left: 50%; right: auto; margin-left: -100px; }   /* margin-centred so the
  breathe/scale transforms don't fight a translateX centre (hero is always sz-l = 200px wide) */
.guide-slot.pos-top { right: 8px; left: auto; top: calc(58px + env(safe-area-inset-top)); bottom: auto; }
.guide-slot.sz-s { width: 104px; height: 142px; }
.guide-slot.sz-m { width: 140px; height: 190px; }
.guide-slot.sz-l { width: 200px; height: 272px; }
.guide-slot.crop-head .pose { object-fit: cover; object-position: top center; }
.guide-slot.crop-head.sz-s { height: 104px; }
.guide-slot.crop-head.sz-m { height: 128px; }
.guide-slot.crop-head.sz-l { height: 168px; }
@media (prefers-reduced-motion: reduce) {
  .guide-slot, .guide-slot.pop { animation: none !important; }
  .guide-slot .pose { transition: none; }
}

/* ===================== round 28 (Daniel's mobile-test batch) ===================== */

/* 1 — the English TASK LINE at the top of every card. Until now the only task text was
   api.instruction2(), which merely fed the "?" popup — so a first-timer saw no instructions at all.
   Muted and small: it explains, it never competes with the prompt (the Italian is the content). */
.task-en {
  font-family: var(--sans); font-size: var(--fs-body); font-weight: var(--fw-semibold);
  color: var(--ink-soft);
  text-align: left; line-height: 1.35; margin: -6px 0 12px; padding: 0;
  letter-spacing: .005em;
}

/* 2 — first-encounter explainer sheet (once per card type, ever). */
.howto-ov {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end;
  justify-content: center; background: rgba(38, 32, 26, .42);
  opacity: 0; transition: opacity .18s ease;
}
.howto-ov.in { opacity: 1; }
.howto {
  /* NB: --card is not defined in :root — var(--card) resolves to transparent and the dim overlay
     bleeds through, which is exactly what it did on the first render. Use the real paper token.
     round 31 (Daniel: "the popup is too wide"): it no longer spans the full screen edge-to-edge —
     it's a floating card inset from the sides, which also gives the rows a sane measure. */
  width: calc(100% - 30px); max-width: 400px; background: var(--paper);
  border-radius: 18px; padding: 22px 20px;
  margin: 0 0 calc(15px + env(safe-area-inset-bottom));
  /* A sheet taller than the screen used to grow off the TOP of the viewport, silently: the
     overlay is bottom-aligned, so the account panel's first rows sat above the visible area with
     no way to reach them and no scrollbar to suggest they existed (Daniel, phone 2026-08-03 —
     the sheet appeared to begin mid-sentence). Cap it and let it scroll inside itself. */
  max-height: calc(100vh - 30px - env(safe-area-inset-bottom));
  max-height: calc(100dvh - 30px - env(safe-area-inset-bottom));   /* dvh: mobile URL bar */
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  box-shadow: 0 10px 44px rgba(0,0,0,.26); text-align: center;
  transform: translateY(14px); transition: transform .22s cubic-bezier(.3,.72,.2,1);
}
.howto-ov.in .howto { transform: translateY(0); }
/* The held-back sheet (Sheet.open({delay})): starts fully below the fold and rises, rather than
   landing on the screen the moment it is created. Inert until it has arrived, so a tap meant for
   the screen underneath cannot be swallowed by an invisible overlay. */
.howto-ov.late { pointer-events: none; transition: opacity .4s ease; }
.howto-ov.late.in { pointer-events: auto; }
.howto-ov.late .howto { transform: translateY(105%); transition: transform .44s cubic-bezier(.2,.85,.25,1); }
.howto-ov.late.in .howto { transform: translateY(0); }
.howto .h-ic { font-size: 34px; line-height: 1; margin-bottom: 10px; }
.howto .h-title {
  font-family: var(--sans); font-size: var(--fs-title); font-weight: var(--fw-semibold);
  color: var(--terra-deep); margin-bottom: 8px;
}
.howto .h-body {
  font-family: var(--sans); font-size: var(--fs-body); color: var(--ink); line-height: 1.5;
  max-width: 340px; margin: 0 auto 20px;
}
.howto .h-body b { color: var(--terra-deep); font-weight: var(--fw-semibold); }
.howto .h-ok { max-width: 260px; margin: 0 auto; }
@media (prefers-reduced-motion: reduce) {
  .howto-ov, .howto-ov .howto { transition: none; }
}

/* 3 — the mic-off panel. Loud on purpose: Daniel denied permission by mistake on a fresh phone and was
   stuck for the whole session because the old state was a one-line whisper he never saw. */
.mic-off {
  border: 1.5px solid var(--terra); border-radius: 12px; background: #fff6ef;
  padding: 13px 15px; margin: 10px 0 14px; text-align: left;
}
.mic-off .mo-head {
  font-family: var(--sans); font-size: var(--fs-body); font-weight: var(--fw-semibold);
  color: var(--terra-deep); margin-bottom: 5px;
}
.mic-off .mo-body {
  font-family: var(--sans); font-size: var(--fs-sub); color: var(--ink); line-height: 1.45;
}
.mic-off .mo-body b { color: var(--terra-deep); font-weight: var(--fw-semibold); }
.mic-off .mo-row { margin-top: 10px; }
.mic-off .mo-note {
  font-family: var(--sans); font-size: var(--fs-caption); color: var(--ink-soft);
  margin-top: 9px; font-style: italic;
}

/* 4 — the "try again" footer band: a wrong answer that still has retries. Deliberately NOT a result
   sheet — the Continue button stays disabled, so the card gets resolved before you advance. */
#footer.tier-retry { background: var(--red-bg); border-top-color: var(--bad); }
#footer.tier-retry .rs-ic { color: var(--bad); }
#footer.tier-retry .rs-title { color: var(--bad); }

/* ===================== round 29 (Daniel) ===================== */

/* English / translation surfaces — ONE colour everywhere (navy), so a learner never has to work out
   which language they're reading. Italian content keeps terracotta / reading-ink. */
.lang-en, .gloss, .flip-word.en, .wa-chip .wa-en, .cando-en,
.drill-step .drill-en, .bubble.mine .cue, .repeat-en, .enpop .enpop-body {
  color: var(--en);
}
.opt.lang-en { color: var(--en); }
.opt.lang-it { color: var(--terra-deep); }
/* the "EN" reveal badge belongs to the English system — but ONLY that badge. Aiuto / "Non posso
   parlare adesso" / the mic-off actions all share .hint-btn and must keep the neutral helper voice. */
.hint-btn.en-badge { color: var(--en); border-color: #c6d2e0; }
.hint-btn.en-badge:hover { color: #fff; background: var(--en); border-color: var(--en); }

/* new_word / new_phrase: the English translation is a headline, not a footnote — Daniel wanted it
   bumped up "to match the Prompt". No longer italic (it was reading as an aside). */
.gloss {
  text-align: center; font-family: var(--sans); font-size: var(--fs-title);
  font-weight: var(--fw-semibold); font-style: normal; margin: 16px 0 14px;
}
/* the Italian example line (was an inline style on a bare <p>) */
.example-it {
  text-align: center; color: var(--ink); cursor: pointer;
  font-size: var(--fs-lg); line-height: 1.45; margin: 6px 0 2px;
}
.flip-word.en { font-weight: var(--fw-semibold); }
.vf-claim.lang-en { font-weight: var(--fw-semibold); }

/* (removed 2026-07-31: the first-use map coach-hand + coach-ring. The app-shell refactor made #stage
   the scroll surface, not the window, so a body-fixed ring could not track the page — Daniel asked to
   remove it. The one-time "This is your path" sheet + the glowing node now carry the "start here" cue.) */

/* map: bigger type + a touch more air now that the nodes are r=26 */
.cm-head h2 { font-size: var(--fs-display); }
.cm-head .sub { font-size: var(--fs-sub); }

/* ===== round 30: the free unit booklet (PDF) ===== */
/* map header becomes a row: titles left, booklet button opposite (Daniel's placement) */
.cm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cm-head .cm-titles { min-width: 0; }
/* The label is "Downloadable Booklets" since 2026-08-13 (Daniel): "Booklet" alone read as a section
   of the app rather than as a thing to take away, and the booklets are the free half of the whole
   free-book / paid-app split. It is twice the width, so the pill WRAPS to two lines inside a capped
   text column instead of pushing the map's title into a squeeze on a 390px phone. */
.cm-pdf {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 999px; cursor: pointer;
  background: #fffdf7; border: 1.5px solid var(--paper-deep);
  font-family: var(--sans); font-size: 12px; font-weight: var(--fw-semibold);
  color: var(--terra-deep); text-align: left; line-height: 1.2;
}
.cm-pdf:hover { border-color: var(--terra); background: #fff; }
.cm-pdf:active { transform: scale(.95); }
.cm-pdf .cp-ic { font-size: 15px; line-height: 1; }
.cm-pdf .cp-t { max-width: 84px; }

/* the unit picker inside the sheet */
.pdf-list { display: flex; flex-direction: column; gap: 7px; margin: 4px 0 18px; text-align: left; }
.pdf-row {
  display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer;
  padding: 10px 12px; border-radius: 12px;
  background: #fffdf7; border: 1.5px solid var(--paper-deep);
  font-family: var(--sans); text-align: left;
}
.pdf-row:hover { border-color: var(--terra); }
.pdf-row .pr-n {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--paper-deep);
  font-size: 13px; font-weight: 700; color: var(--terra-deep);
}
.pdf-row .pr-t {
  flex: 1; min-width: 0; font-size: 13px; color: var(--ink); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pdf-row .pr-go {
  flex: none; font-size: 12px; font-weight: 700; color: var(--terra);
  white-space: nowrap; min-width: 58px; text-align: right;
}

/* the offer on the unit-complete screen — the "take it with you" beat */
.pdf-offer {
  display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer;
  margin: 16px 0 4px; padding: 13px 15px; border-radius: 14px; text-align: left;
  background: #fff9ef; border: 1.5px solid var(--terra);
}
.pdf-offer:hover { background: #fff; }
.pdf-offer .po-ic { flex: none; font-size: 24px; line-height: 1; }
.pdf-offer .po-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  font-family: var(--sans); }
.pdf-offer .po-t b { font-size: 14px; color: var(--terra-deep); font-weight: var(--fw-semibold); }
.pdf-offer .po-t span { font-size: 12px; color: var(--ink-soft); line-height: 1.35; }
.pdf-offer .po-go { flex: none; font-size: 12px; font-weight: 700; color: var(--terra);
  white-space: nowrap; min-width: 58px; text-align: right; }

/* ===== round 31 (Daniel): the chrome opens up — Sofia's channels, the streak, the account ===== */

/* the topbar logo is a door now, and so is the streak chip */
.tb-brand { cursor: pointer; transition: transform .1s; }
.tb-brand:active { transform: scale(.92); }
.tb-chip.live {
  cursor: pointer; font: inherit; font-family: var(--sans); font-size: 15px;
  font-weight: var(--fw-semibold); transition: transform .1s, border-color .15s;
}
.tb-chip.live:hover { border-color: var(--terra); background: #fff; }
.tb-chip.live:active { transform: scale(.94); }
#tb-av { cursor: pointer; }

/* a sheet icon can be Sofia's logo or the guest initial, not just an emoji */
.howto .h-ic img {
  width: 58px; height: 58px; border-radius: 50%; object-fit: cover; display: inline-block;
  border: 2px solid var(--paper-deep);
}
.howto .h-ic .av-big {
  display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: #f4efe2; border: 1.5px solid var(--paper-deep);
  font-family: var(--sans); font-size: 24px; font-weight: 700; color: var(--terra-deep);
}
/* the guest glyph is a drawn person, not a letter — give it room and a lighter weight */
.howto .h-ic .av-big.guest svg { width: 30px; height: 30px; }
#tb-av svg { display: block; }

/* Sofia's channels + the booklet door */
.link-list { display: flex; flex-direction: column; gap: 7px; margin: 4px 0 7px; }
.link-row {
  display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer;
  padding: 9px 11px; border-radius: 12px; text-align: left; text-decoration: none;
  background: #fffdf7; border: 1.5px solid var(--paper-deep);
  font-family: var(--sans); transition: border-color .15s, background .15s;
}
.link-row:hover { border-color: var(--terra); background: #fff; }
.link-row.pdf { margin-bottom: 18px; background: #fff9ef; border-color: var(--terra); }
.link-row .lr-ic {
  flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  font-size: 16px; font-weight: 700; color: #fff; line-height: 1;
}
.link-row .lr-ic svg { width: 20px; height: 20px; display: block; }
/* each platform in its own colour — recognisable at a glance, no logo files to ship */
.link-row .lr-ic.yt { background: #d1332a; }
.link-row .lr-ic.ig { background: linear-gradient(135deg,#f9ce34 4%,#ee2a7b 52%,#6228d7 96%); }
.link-row .lr-ic.fb { background: #2d5faa; }
.link-row .lr-ic.tt { background: #010101; }
.link-row .lr-ic.pdf { background: var(--paper-deep); color: var(--terra-deep); }
.link-row .lr-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.link-row .lr-t b { font-size: 14px; color: var(--ink); font-weight: var(--fw-semibold); }
.link-row .lr-t span { font-size: 12px; color: var(--ink-soft); line-height: 1.35; }
.link-row .lr-go { flex: none; font-size: 14px; font-weight: 700; color: var(--terra); }

/* account preview — what sofia-app's avatar was always meant to open (identity → plan) */
.tier-list { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 12px; text-align: left; }
/* Buttons now, not inert divs: both rows go somewhere (the free one to the sign-in ask, the
   book to the pre-order screen). */
.tier-row {
  display: flex; align-items: baseline; gap: 9px; padding: 10px 13px; border-radius: 12px;
  width: 100%; text-align: left; cursor: pointer;
  background: #fffdf7; border: 1.5px solid var(--paper-deep); font-family: var(--sans);
}
.tier-row.on { background: #fff9ef; border-color: var(--terra); }
.tier-row .tr-n { flex: none; font-size: 14px; font-weight: 700; color: var(--terra-deep); }
.tier-row .tr-p { flex: none; font-size: 12px; font-weight: var(--fw-semibold); color: var(--ink); }
.tier-row .tr-s { flex: 1; min-width: 0; font-size: 12px; color: var(--ink-soft); line-height: 1.3;
  text-align: right; }
/* THE ROW THAT IS ALREADY YOURS. It is a <div>, not a button, so it neither invites nor accepts a
   tap: a plan you are on is a statement. The badge is what carries that, because "highlighted"
   alone was doing double duty as both "selected" and "current" and could only ever mean one. */
.tier-row.mine {
  background: #fff9ef; border-color: var(--terra); cursor: default;
  flex-wrap: wrap; row-gap: 4px;
}
.tier-row.mine .tr-mine {
  flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--terra); border-radius: 999px; padding: 2px 8px;
}
/* The badge shares the first line with the name and the price; the description takes the whole
   next one. Left over from the two-column layout, `text-align: right` on a full-width line would
   set a paragraph ragged-left against everything else in the panel. */
.tier-row.mine .tr-s { flex-basis: 100%; text-align: left; }
/* THE GUEST FORK — "I'm new here" / "I have an account" (Daniel 2026-08-13). A segmented control
   rather than two stacked buttons: they are two answers to ONE question, and stacking them is what
   made "Save my progress" and "Already have an account?" read as two unrelated offers. */
.acc-segs {
  display: flex; gap: 4px; padding: 4px; margin: 2px 0 14px;
  background: var(--paper-deep); border-radius: 999px;
}
.acc-seg {
  flex: 1; padding: 8px 10px; border-radius: 999px; cursor: pointer; border: none;
  background: transparent; color: var(--ink-soft);
  font-family: var(--sans); font-size: 13px; font-weight: var(--fw-semibold); line-height: 1.2;
}
.acc-seg.on { background: #fffdf7; color: var(--terra-deep); box-shadow: 0 1px 3px rgba(38, 32, 26, .12); }
.acc-kicker {
  font-family: var(--sans); font-size: 12px; color: var(--ink-soft); text-align: left;
  margin: 0 0 8px; line-height: 1.4;
}
/* In the register branch the rows are a CHOICE, so they show their state and keep their pointer. */
.tier-list.pick .tier-row.pick { cursor: pointer; }
.tier-list.pick .tier-row.pick.on { background: #fff9ef; border-color: var(--terra); }
.sheet-note {
  font-family: var(--sans); font-size: var(--fs-caption); color: var(--ink-soft);
  margin: 0 0 16px; line-height: 1.4;
}
/* section heading inside the account sheet (Privacy) */
.acc-sec {
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); margin: 18px 0 8px; text-align: left;
}
/* SIGN OUT, beside the line that names who is signed in (Daniel 2026-08-13). It lives inside
   .h-body now rather than at the foot of the panel, so it is styled as a small pill on its own
   line: close enough to the address to read as "stop being this person", small enough not to
   compete with the two price rows under it. */
/* block + fit-content, NOT inline-flex: .h-body is a paragraph of centred text, so an inline pill
   lands at the end of the last line ("…opens your link. [Sign out]") and reads as punctuation. */
.acc-out {
  display: block; width: fit-content; margin: 12px auto 0; cursor: pointer;
  padding: 6px 15px; border-radius: 999px;
  background: transparent; border: 1.5px solid var(--line);
  font-family: var(--sans); font-size: 12.5px; font-weight: var(--fw-semibold);
  color: var(--ink-soft); line-height: 1.2;
}
.acc-out:hover { color: #fff; background: var(--slate); border-color: var(--slate); }
.acc-out:active { transform: scale(.96); }

/* the settings rows in the Account sheet (the L1 picker; formerly the mic preference too) */
.acc-toggle {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  margin: 0 0 12px; padding: 11px 13px; border-radius: 12px;
  background: #fffdf7; border: 1.5px solid var(--paper-deep); font-family: var(--sans);
}
.acc-toggle .at-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acc-toggle .at-txt b { font-size: 14px; color: var(--ink); }
.acc-toggle .at-sub { font-size: 12px; font-weight: 400; color: var(--ink-soft); line-height: 1.35; }
.acc-toggle input[type="checkbox"] { flex: none; width: 20px; height: 20px; accent-color: var(--terra); cursor: pointer; }
/* THE NATIVE-LANGUAGE (L1) PICKER — a real <select> under a paper-coloured shell (Daniel
   2026-08-03, replacing the two-button toggle that had no room for a third language). The select
   itself is stripped of its platform chrome and given our caret; it keeps every native behaviour,
   including the OS picker on a phone. `appearance:none` needs the -webkit- prefix for iOS Safari,
   and the caret must not eat the tap, hence pointer-events:none on it. */
.l1-sel { position: relative; display: inline-block; flex: none; }
.l1-sel select {
  -webkit-appearance: none; appearance: none; font: inherit; font-family: var(--sans);
  font-size: 13.5px; font-weight: 600; color: var(--ink); background: var(--paper, #fffdf7);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 32px 8px 14px;
  cursor: pointer; line-height: 1.2; max-width: min(62vw, 158px); text-overflow: ellipsis;
}
/* A <select> takes its intrinsic width from its WIDEST OPTION, not from the selected one. With two
   options that was invisible; with thirteen ("Other language", "Українська") the control grew by
   half again and squeezed the label beside it into a two-word column. The cap is on the closed
   control only: the open list is the OS's own and is not constrained by it. */
.l1-sel select:focus-visible { outline: 2px solid var(--terra); outline-offset: 1px; }
.l1-caret { position: absolute; right: 9px; top: 50%; margin-top: -9px; color: var(--ink-soft);
  pointer-events: none; display: block; }
/* THE ANSWER TO AN UNWRITTEN LANGUAGE (2026-08-13). Hidden until there is something to say, so an
   empty live region never holds a gap open above the price rows. Not a Sheet: the account panel is
   itself a sheet, and Sheet.open never stacks, so a second one over it would be a silent no-op. */
.l1-say {
  display: none; margin: -4px 0 12px; padding: 10px 13px; border-radius: 12px;
  background: #f6f2e6; border: 1.5px dashed var(--paper-deep);
  font-family: var(--sans); font-size: 12.5px; line-height: 1.4; color: var(--ink-soft);
  text-align: left;
}
.l1-say.on { display: block; }
.l1-say b { color: var(--terra-deep); font-weight: var(--fw-semibold); }

/* the full-screen nudge, offered inside the map's first-visit sheet */
.fs-tip {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  margin: 0 0 18px; padding: 12px 14px; border-radius: 12px;
  background: #f4f2ea; border: 1.5px dashed var(--slate); font-family: var(--sans);
}
button.fs-tip { cursor: pointer; transition: background .15s; }
button.fs-tip:hover { background: #fff; border-style: solid; }
.fs-tip .ft-ic { flex: none; display: grid; place-items: center; color: var(--slate); }
.fs-tip .ft-ic svg { width: 22px; height: 22px; }
.fs-tip .ft-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fs-tip .ft-t b { font-size: 14px; color: var(--ink); font-weight: var(--fw-semibold); }
.fs-tip .ft-t span { font-size: 12px; color: var(--ink-soft); line-height: 1.35; }

/* the level moved off the topbar chip and onto the map, where it labels the whole path */
.cm-lv {
  display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 9px;
  border-radius: 999px; background: var(--terra); color: #fff;
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .04em;
}

/* ---------- cover: the channel's own terrace, bleached, behind a paper card ----------
   The art is pre-washed at build time (build/make_cover_bg.py), so no runtime filter and no
   contrast fight. Anchored LEFT (Daniel) — the house and roses hold the frame; centring it would
   put the empty middle sky behind the type. The overlay gradient lifts the very top and bottom back
   to paper so the topbar and the button don't sit on picture. */
#page.view-cover #stage {
  background-image:
    linear-gradient(180deg, var(--paper) 0%, rgba(250,246,238,.35) 22%,
      rgba(250,246,238,.35) 66%, var(--paper) 100%),
    url("cover-bg.jpg?v=r54");
  background-size: auto, cover;
  background-position: center, left center;
  background-repeat: no-repeat, no-repeat;
}
.cover-card {
  background: rgba(253, 251, 245, .5);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  border: 1px solid rgba(201, 111, 74, .28);
  border-radius: 16px;
  padding: 26px 22px 24px;
  box-shadow: 0 6px 28px rgba(61, 52, 40, .1);
  max-width: 400px; margin: 0 auto;
}
.cover-card .claim { background: rgba(255, 249, 239, .55); }
.cover-card .btn { max-width: 300px; margin: 22px auto 0; }
.cover-card .cover-note { margin-top: 14px; }
/* The language row: first contact is where a reader who doesn't read English needs to find
   their own. "Learning" is a label wearing the picker's clothes until a second course exists. */
.cover-lang { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(201, 111, 74, .22);
  display: flex; flex-direction: column; gap: 8px; font-family: var(--sans); }
.cl-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.cl-k { font-size: 12.5px; color: var(--ink-soft, #6e5c46); }
.cl-v { font-size: 13px; font-weight: var(--fw-semibold); color: var(--ink, #3d3428); }
/* the sign-in door on the cover — quiet, but present. A reader arriving in a browser we have never
   seen has no other way to know their account is reachable from here. */
.cover-signin {
  display: block; margin: 12px auto 0; background: none; border: 0; padding: 4px 8px;
  font: inherit; font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--terra-deep); text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.cover-signin:active { opacity: .7; }
.cover-lang .l1-sel select { font-size: 13px; padding: 6px 30px 6px 12px;
  background: rgba(255, 253, 247, .78); }
@media (prefers-reduced-motion: no-preference) {
  .cover-card { animation: cover-rise .5s cubic-bezier(.3,.72,.2,1) both; }
}
@keyframes cover-rise { from { opacity: 0; transform: translateY(10px); } }

/* ===== round 32 (Daniel) ===== */

/* Long-pressing a control (above all the MIC — people try to hold it like a walkie-talkie) put the
   browser into text-selection mode and popped the copy/paste callout. The app is a set of controls,
   not a document: nothing here is meant to be selected. Typed answers are the one exception. */
#page, .howto-ov, .tipbub {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
#page input, #page textarea, #page [contenteditable="true"] {
  -webkit-user-select: text; user-select: text;
}
.mic-btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* the mic after the card is graded — visibly done, not just unresponsive */
.mic-btn.spent, .mic-btn:disabled {
  opacity: .38; cursor: default; animation: none; filter: grayscale(.5);
}
/* a sibling mic held for the moment while another row is recording (Speak.mic mutex) — "wait your
   turn", not "spent": less faded, no grayscale, so it doesn't read as a finished row. */
.mic-btn.mux:disabled { opacity: .55; filter: none; }

/* a one-time coach bubble pinned to a live control (the streak pip, the mic) */
.tipbub {
  position: fixed; z-index: 95; max-width: 260px;
  background: var(--ink); color: #fff5e6;
  border-radius: 12px; padding: 10px 13px;
  font-family: var(--sans); font-size: 13px; line-height: 1.4;
  box-shadow: 0 10px 30px -10px rgba(38, 32, 26, .7);
  opacity: 0; transform: translateY(-5px); transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.tipbub.in { opacity: 1; transform: translateY(0); }
.tipbub b { color: var(--gold); font-weight: var(--fw-semibold); }
.tipbub::before {           /* the arrow — --arrow is set in JS after the bubble is clamped */
  content: ""; position: absolute; left: var(--arrow, 50%); margin-left: -6px;
  border: 6px solid transparent;
}
.tipbub.below::before { top: -12px; border-bottom-color: var(--ink); }
.tipbub.above::before { bottom: -12px; border-top-color: var(--ink); }
/* (An actionable variant with its own buttons lived here for a few hours on 2026-08-13 and was
   removed the same day: the bubble points AT the control that does the thing, so a button inside
   it is a second copy of that control one centimetre away. Every tip is a passing remark, which is
   what `pointer-events: none` above encodes.) */

/* the completion screens' figure — top-centred, same pending-art language as the in-card slots */
.fig-top { width: 120px; margin: 0 auto 16px; }
.repair .fig-top { margin-bottom: 18px; }
/* the LESSON-COMPLETE celebration hero (Daniel 2026-07-25): "relatively significant". A live figure
   (Sofia or Marco) that celebrates then settles to idle — bigger than the pending-art slot, framed
   like a New-word hero (3:4 clip ratio, head fit / feet cropped). */
.fig-top.celebrate { width: min(56vw, 220px); margin: 2px auto 14px; }
.fig-top.celebrate .fig-ph { aspect-ratio: 3 / 4; width: 100%; height: auto;
  border: none; overflow: hidden; border-radius: 16px; }
/* the REPAIR-DIVIDER hero (Daniel #23/24, 6th ask 2026-08-01): `body.figstage .fig-ph` sets
   height:100% / aspect-ratio:auto expecting a SIZED parent (.cardfig-img carries the ratio).
   This plain .fig-top has width only, so the slot computed to 0px tall — the hero mounted,
   welded and PLAYED, invisibly. Same self-sizing escape as celebrate, clip-native 3:4. */
.repair .fig-top .fig-ph { aspect-ratio: 3 / 4; width: 100%; height: auto;
  overflow: hidden; border-radius: 16px; }
/* u02 t004 (Daniel): celebrate-hero scale + the in-card bottom fade instead of a framed box —
   the divider hero reads like the mic_reply figure, not a thumbnail. */
.repair .fig-top { width: min(56vw, 220px); }
.repair .fig-top .fig-ph { border-radius: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 var(--figstage-fade, 56%), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0 var(--figstage-fade, 56%), transparent 100%); }
.fig-top.celebrate .fig-ph video, .fig-top.celebrate .fig-vid {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }

/* round 34 (Daniel): "tap a Unit to start" gets its own line — it's the instruction, not part of the
   inventory line above it, and burying it behind two middots made it read as trailing metadata. */
.cm-head .cm-cta {
  font-family: var(--sans); font-size: var(--fs-sub); font-weight: var(--fw-semibold);
  color: var(--terra-deep); margin-top: 3px;
}

/* ---------- unit hub header (round 35, Daniel: "the header isn't formatted well") ----------
   Its own stacked block — it used to borrow the map's `.cm-head`, which is a flex ROW, so the title
   and the meta sat side by side and the meta wrapped one word per line. Title first (the topbar already
   says "Unit N", so it isn't repeated here), then the facts as chips, then the progress bar. */
.unit-head { margin: 2px 0 16px; }
.unit-head h2 {
  font-family: var(--sans); font-size: var(--fs-title); font-weight: var(--fw-semibold);
  color: var(--terra-deep); line-height: 1.28; margin: 0 0 10px;
  text-wrap: balance;
}
.unit-head .uh-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.unit-head .uh-chip {
  font-family: var(--sans); font-size: var(--fs-label); color: var(--ink-mid);
  background: var(--card); border: 1px solid var(--paper-deep); border-radius: 999px;
  padding: 4px 10px; white-space: nowrap;
}
.unit-head .uh-bar {
  height: 6px; border-radius: 3px; background: var(--paper-deep); overflow: hidden;
}
.unit-head .uh-bar > div {
  height: 100%; border-radius: 3px; transition: width .35s ease;
  background: linear-gradient(90deg, var(--terra), var(--gold));
}


/* ---- the pinned head (scene_card / mic_roleplay) --------------------
   Daniel: "scroll the story while the header — figure + header — sticks to the top".

   `position: sticky` only pins once the element REACHES its threshold, so any slack above it is
   visible travel — the head "moved a bit" when you scrolled. The fix is that the head SWALLOWS what
   was above it: engine.js moves the dev chip and the task line INTO it as full-width rows, and the
   stage drops its top padding, so the head starts exactly at the topbar's edge and travel is zero. */
#stage.stuck { padding-top: 0; }
.cardfig.sticky-head .cardfig-head {
  position: sticky; top: 0; z-index: 3;   /* app-shell: #stage scrolls, topbar is outside it (was --stick-top) */
  flex-wrap: wrap;                 /* the dev chip and task line take full-width rows of their own */
  align-items: flex-start;         /* a STRETCHED flex child has nothing to stick to */
  justify-content: space-between;  /* keeps the gap between the figure and the prompt */
  background: var(--paper);
  padding: 14px 0 10px; margin-bottom: 8px;
  box-shadow: 0 10px 12px -10px rgba(61, 52, 40, .16);
}
.cardfig.sticky-head .cardfig-head > .dbg     { flex: 0 0 100%; margin-bottom: 6px; }
.cardfig.sticky-head .cardfig-head > .task-en { flex: 0 0 100%; margin: 0 0 12px; }
/* the 26% that used to live here is now `.cardfig.size-small` — the size axis, derived from exactly
   this set. It was the one place the SMALL figure was real, hiding under a slot axis that wasn't. */
.cardfig.sticky-head .fig-glyph { font-size: 22px; }

/* ---- the GUEST figure (Daniel, phone test 2026-07-18: "see both parties on top") ------------
   A dialogue card's second party. BOTH parties stand at FULL presence throughout — the listener is
   NOT dimmed (Daniel, 2026-07-24: "both can stay in full visibility... no need to highlight one and
   blur the other"). The .line-live / .speaking markers still toggle in the DOM as a who's-speaking
   hook, but nothing visual keys off them now. */
/* read-along (Daniel): the line currently playing lifts + scrolls into view. The per-word flash was
   removed 2026-07-28 (#1) — only the box-level highlight remains. */
.bubble.b-live { box-shadow: 0 0 0 2px rgba(201, 111, 74, .35); }

/* the first-exposure preface on the unit-head scene — a soft editorial note, not a bubble.
   u04 t020: brief + pinned (it sits in the sticky head above the ▶), styled as a readable
   callout instead of 13px afterthought text. */
.scene-preface {
  margin: 2px auto 10px; padding: 10px 14px; max-width: 92%;
  background: var(--paper-deep); border-radius: 12px; text-align: center;
  font-family: var(--sans); font-size: var(--fs-sub); line-height: 1.45;
  font-weight: var(--fw-semibold); color: var(--terra-deep);
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   THE LAYOUT EXPERIMENT (Daniel, 2026-07-14) — engine.js LAYOUT.{figstage,hintfold}

   Both live entirely under a <body> class, so turning them off (?figstage=0 / ?hintfold=0, or the
   default in engine.js) restores the old layout exactly: nothing below overwrites a base rule, it
   only overrides one while the class is on.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. the hint ribbon: the English task line, ON LEVEL with the "?", sliding behind it ─────────
   Anchored to the "?" (fixed, bottom-left) rather than to the card, because that is the thing it is
   teaching you about. It sits on the SAME row as the circle and extends to its RIGHT — its left edge
   tucks under the "?" (no left border, extra left padding) so it reads as emerging from behind it. It
   leaves by SLIDING LEFT, back behind the circle: the "?" has the higher z-index and covers it as it
   goes, so the motion reads as "this went in there". */
.hintpill {
  position: fixed; left: 46px; bottom: 90px; z-index: 60;   /* same row as the ? (bottom:90), just to its right */
  max-width: min(72vw, 320px); min-height: 36px;
  display: flex; align-items: center;
  padding: 8px 13px 8px 20px;   /* extra LEFT padding: the ribbon's left edge sits behind the ? circle */
  border-radius: 6px 16px 16px 6px;   /* flat-ish left (tucks behind the ?), rounded right */
  background: #fffdf7; border: 1.5px solid var(--terra); border-left: none;
  box-shadow: 0 6px 18px rgba(50, 35, 20, .18);
  font-family: var(--sans); font-size: 13px; font-weight: var(--fw-semibold);
  line-height: 1.35; color: var(--ink-soft); text-align: left;
  cursor: pointer;
  transform-origin: 0 50%;
  animation: pill-in .34s cubic-bezier(.2, 1, .4, 1) both;
}
/* enter: slide OUT to the right, from behind the ? */
@keyframes pill-in {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: none; }
}
/* the fold: slide LEFT, back behind the ? (higher z-index), fading as it tucks under */
.hintpill.folding {
  animation: none;
  transition: transform .40s cubic-bezier(.55, 0, .85, .35), opacity .40s ease-in;
  transform: translateX(-44px);
  opacity: 0;
}
/* ...and the ? twitches as it catches it, so the destination is unmistakable */
.help-btn.pinged { animation: ping .5s ease-out; }
@keyframes ping {
  0% { transform: scale(1); }
  38% { transform: scale(1.34); background: var(--terra); color: #fff; }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hintpill, .hintpill.folding, .help-btn.pinged { animation: none; transition: opacity .2s linear; }
  .hintpill.folding { transform: none; }
}

/* ── 2. the figure stage: the figure at the TOP, big, with the content flowing over it ──────────
   The figure stops being a column BESIDE the text and becomes a band BEHIND it: pinned to the top of
   the card, ~2/5 of the card's height, with the card's content starting two-thirds of the way down it
   and reading straight over the fade. The mask does the blending — the clip's baked warm-cream
   background dissolves into the page, so there is no edge to notice. */
/* dvh, not vh: on iOS Safari `vh` is the LARGE (toolbars-hidden) viewport, so a 40vh figure was sized
   for a screen taller than the one actually visible and ate the drill + footer below it. dvh tracks
   the real visible viewport, so the figure scales to what the learner can see. */
body.figstage { --figstage-h: 40dvh; --figstage-fade: 56%; }
body.figstage .cardfig,
body.figstage .cardfig.side,
body.figstage .cardfig.stack,
body.figstage .cardfig.split { display: block; position: relative; }

/* Content begins INSIDE the figure's lower third, so it reads over the fade rather than under a hard
   edge. There are TWO figure DOMs and both need the offset, on different elements:
     split/sticky — _reflowSplit builds  wrap > [head > img + headtext] + body   → the HEAD carries it
     stack        — the renderer builds  wrap > img + body                       → the BODY carries it
   Miss the second and every stacked card renders its content straight through her face. */
body.figstage .cardfig-head { display: block; position: static;
  padding-top: calc(var(--figstage-h) * .70); }
body.figstage .cardfig.stack > .cardfig-body { padding-top: calc(var(--figstage-h) * .70); }
body.figstage .cardfig-headtext,
body.figstage .cardfig-body { position: relative; z-index: 1; width: 100%; flex: none; }

/* THE HIGHLIGHT — it covers the TEXT, not the card (Daniel, 2026-07-14: "make it a bit less
   aggressive and make sure that it covers only the text and not as a box for the full screen").

   The first cut put a pane behind the whole text BLOCK, which is a block-level element, which is
   full-card-width — so a two-word prompt got a banner. The fix is to stop styling the container and
   start styling the text: `display: inline` + `box-decoration-break: clone` makes the background wrap
   each LINE of the text, hugging its actual width, like a highlighter. Two words get two words of
   background. And it is lighter now — enough to lift the type off her dress, not enough to be a slab.

   `.cardfig-body` in the split layout starts below the figure and needs nothing: a highlight there
   would just be marker-pen drawn over answers nobody is struggling to read. */
body.figstage .cardfig-headtext > .prompt,
body.figstage .cardfig-headtext > .big-q,
body.figstage .cardfig-headtext > .vf-claim,
body.figstage .cardfig-headtext > .kicker,
body.figstage .cardfig-headtext > .mcq-word,
body.figstage .cardfig.stack > .cardfig-body > .bigword,
body.figstage .cardfig.stack > .cardfig-body > .gloss,
body.figstage .cardfig.stack > .cardfig-body > .prompt {
  display: inline;                                  /* so the background follows the TEXT, per line */
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  background: rgba(252, 249, 243, .72);
  box-shadow: 0 0 0 5px rgba(252, 249, 243, .72);   /* the padding, without the inline-box reflow */
  border-radius: 4px;
}
/* an inline element cannot carry the block's own centring/margins — hand those to a wrapper line */
body.figstage .cardfig-headtext > .prompt,
body.figstage .cardfig-headtext > .big-q,
body.figstage .cardfig.stack > .cardfig-body > .bigword,
body.figstage .cardfig.stack > .cardfig-body > .gloss { line-height: 1.65; }
body.figstage .cardfig-headtext, body.figstage .cardfig.stack > .cardfig-body { text-align: left; }
body.figstage .cardfig.stack > .cardfig-body { text-align: center; }
/* …but a dialogue reads LEFT even inside that centred body: each hero's name sits at the top-left of
   its bubble and the lines flow left, like a real chat (Daniel 2026-07-25 — the scena/chapter drift).
   Covers both the stack scena (old) and the split/sticky scena + chapter dialogue. */
body.figstage .cardfig > .cardfig-body .dialogue { text-align: left; }

/* THE SIZE AXIS ON THE STAGE (Daniel 2026-08-05). The row-layout flex-bases up at .cardfig.size-*
   are overridden in figstage — this is where a live figure is actually sized, so the axis has to be
   expressed here too or it changes nothing anyone can see. One factor pair, consumed by every rule
   below that sizes a figure, instead of a width literal per rule.
     large — 60vw, the majority of cards, unchanged.
     small — 42vw, the scrolling-text cards. Not an invented number: it is the width each hero
             already has in the two-hero story and scena Daniel has approved (42% of the head), so
             a LONE hero on a scrolling card now matches the paired ones instead of doubling them. */
body.figstage .cardfig            { --fig-w: 60vw; --fig-hk: .75; --fig-pair: 42%; }
body.figstage .cardfig.size-small { --fig-w: 42vw; --fig-hk: .53; }
body.figstage .cardfig > .cardfig-img {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  /* WIDTH-driven (figure-model v2): height-driven sizing made a 3:4 column of 40vh wider
     than half a phone — two figures could not sit side by side without overlapping. The
     width is bounded first, the authored per-figure scale rides on top, the height follows
     the aspect. Top-anchored: fit the head, crop the feet. */
  width: calc(min(var(--fig-w), var(--figstage-h) * var(--fig-hk)) * var(--fig-scale, 1));
  height: auto; aspect-ratio: 3 / 4;   /* the clips' native ratio */
  margin: 0; flex: none; z-index: 0; pointer-events: none;
  /* the blend — opaque down to --figstage-fade, then gone by the bottom edge */
  -webkit-mask-image: linear-gradient(to bottom, #000 0 var(--figstage-fade), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0 var(--figstage-fade), transparent 100%);
}
body.figstage .fig-ph { width: 100%; height: 100%; aspect-ratio: auto; border: none;
  background: transparent; }
/* two parties on a NON-pinned card: each column is width-capped at 46% around its own centre
   (27% / 73%), so the pair spans 4%–50% and 50%–96% — side by side BY CONSTRUCTION, never
   overlapping, whatever the screen (Daniel, round 3). */
body.figstage .cardfig.has-guest > .cardfig-img {
  left: 27%;
  width: calc(min(46%, var(--figstage-h) * .75) * var(--fig-scale, 1));
}
body.figstage .cardfig.has-guest > .cardfig-img.guest { left: 73%; }
body.figstage .fig-vid { object-position: 50% 0%; }   /* fit the head, crop the feet */
/* the instrument chips are dev furniture — hidden for learners, back with ?dev=1 (Daniel,
   phone test 2026-07-18: "hide the idle and other tags from all videos") */
body.figstage .fig-cap, body.figstage .fig-id { display: none; }
body.figstage .fig-state { top: 6px; right: 6px; bottom: auto; }
.fig-state { display: none; }
body.dev .fig-state { display: block; }

/* THE PINNED CARDS (scene_card, mic_roleplay — card_types.STICKY_HEAD).
   These are the three long cards: a story to read, a story to answer questions about, a twelve-turn
   conversation. They are the ONLY cards where the content outruns the screen, and so the only ones
   where losing the figure off the top actually costs you something — mid-exchange, your partner
   vanishes. So here the figure and the header PIN, as one band, and the text scrolls beneath them.
   (This is why _reflowSplit keeps the figure inside the head for these cards: the head is what pins,
   and a figure that is a sibling of the head could only pin separately, on top of it.) */
body.figstage .cardfig.sticky-head > .cardfig-head {
  /* app-shell (Daniel 2026-07-30): #stage is now the SCROLL CONTAINER and the topbar is a flex sibling
     ABOVE it — so the head pins at top:0 of #stage, already below the topbar. The old top:81px (to
     clear a document-level topbar) pushed the whole hero band 81px too low ("heroes moved too low"). */
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 12px;
  flex-wrap: nowrap;                   /* SEE BELOW — this one line is three rounds of a bug */
  padding: 0 0 8px; min-height: 0;
  background: var(--paper);            /* the text scrolls UNDER it — it must be opaque */
  box-shadow: 0 10px 14px -10px var(--paper);
}
/* THE CAP — cover the strip ABOVE the pinned band (Daniel 2026-07-30 round 2: "text peeking from
   behind [the heroes]"). #stage is a scroll container with padding-top:20px, so `top:0` pins the band
   at its CONTENT box — 20px below #stage's border-top — and the body's text scrolls up THROUGH that
   20px strip, visible between the topbar and the heroes. This opaque paper cap sits directly on top of
   the band (bottom:100%) and runs up past the topbar; #stage's own overflow:auto clips it flush at the
   topbar edge, so it covers exactly the strip whatever its height. Painted in the band's stacking
   context (z-index:3) so it's over the z:0 scrolling body. */
body.figstage .cardfig.sticky-head > .cardfig-head::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 60px;
  background: var(--paper); pointer-events: none;
}
/* SIZED BY WIDTH, NOT HEIGHT. The figure was `height: var(--figstage-h)` — 40vh, which on a 430px
   phone is a 258px-WIDE figure (it is 3:4). Beside a headtext claiming `flex: 0 0 50%` (215px) that
   is 473px of content in a 430px card, so the head WRAPPED and the header fell underneath the figure.
   Daniel asked for it beside her three times; the stylesheet said it was beside her; the browser
   disagreed, and I never looked. A figure in a row must be bounded by the row's WIDTH. */
body.figstage .cardfig.sticky-head .cardfig-head > .cardfig-img {
  position: static; transform: none; left: auto;
  flex: 0 0 auto; width: calc(42% * var(--fig-scale, 1)); height: auto; aspect-ratio: 3 / 4;
  -webkit-mask-image: none; mask-image: none;    /* beside the text, on paper — nothing to blend into */
}
/* TWO PARTIES IN THE HEAD — one rule for all of them. This was three: a 30% base, then
   mic_roleplay bumped to 42% ("the heroes are too small", Daniel 2026-07-31), then scene_card and
   payoff bumped to the same 42% ("heroes were much smaller on the scena", 2026-07-25). Since the
   sticky-head set is exactly those three types, the 30% base applied to nothing and the two
   overrides agreed on the same number — three statements of one fact, patched one type at a time.
   That is the pattern the size axis exists to end, so it is now the axis's own --fig-pair.
   The authored per-figure scale keeps their relative proportions honest (v2 cast layout). */
body.figstage .cardfig.sticky-head.has-guest .cardfig-head > .cardfig-img {
  width: calc(var(--fig-pair) * var(--fig-scale, 1));
}
/* SINGLE-HERO pinned cards — u02 t007 (Daniel: "in single hero cards, hero must be centered").
   The figstage head is a COLUMN flex, so the horizontal axis is align-*; the base
   `.cardfig-head > .cardfig-img { align-self: flex-start }` (top-stuck for the row layout)
   reads as LEFT-stuck here and pinned a lone hero to the edge. With a guest the pair keeps
   its own two-column treatment; alone, the hero centres — and carries the card, so it gets
   the STACK-CARD FORMULA, not a two-column fraction. (u03 t003's 56% was still visibly
   smaller than the story/mic heroes; u05 t028, Daniel: "match opening story" — so the lone
   pinned hero now uses the exact same width expression as the stack rule above.) */
body.figstage .cardfig.sticky-head:not(.has-guest) .cardfig-head > .cardfig-img {
  align-self: center;
  width: calc(min(var(--fig-w), var(--figstage-h) * var(--fig-hk)) * var(--fig-scale, 1));
}
body.figstage .cardfig.sticky-head .cardfig-headtext {
  flex: 1 1 auto; min-width: 0; width: auto;     /* the other 58%, and it must not claim 50% of it */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center;                            /* "vertically in the middle of the figure" */
}
/* beside the figure the text sits on paper: it needs no highlight, and it keeps its own alignment */
body.figstage .cardfig.sticky-head .cardfig-headtext > *:not(.audio-btn) {
  display: block; background: none; box-shadow: none; }
body.figstage .cardfig.sticky-head > .cardfig-body { padding-top: 14px; }
body.figstage #stage.stuck { padding-top: 20px; }   /* == #stage's own padding */

/* short screens: the band would eat the card. Shrink it rather than scroll it. */
@media (max-height: 700px) { body.figstage { --figstage-h: 34dvh; } }

/* ── figure-stage: PER-CARD art direction ──────────────────────────────────────────────────────
   "Centred at the top, content over the fade" is the default, not a law. Three cards want something
   else, and each reason is about the CONTENT, not the family (Daniel's workbench notes, 2026-07-14). */

/* FLASHCARD — "bring down the flashcards a little", twice. The flip card was riding into her chin;
   it now starts below the figure entirely rather than over its fade. */
body.figstage .cardfig[data-type="flashcard"] > .cardfig-body {
  padding-top: calc(var(--figstage-h) + 8px); }

/* STORY CHECK — the four options must land below the pinned head AND fit without scrolling: a
   comprehension question you have to scroll to answer is a memory test with extra steps. */

/* IL DRILL — same: the drill sits lower, and the "can't talk now" escape must not push it to scroll. */
body.figstage .cardfig[data-type="mic_article_drill"] > .cardfig-body { padding-top: calc(var(--figstage-h) * .88); }
body.figstage .cardfig[data-type="mic_article_drill"] .cannot-speak { margin-top: 6px; margin-bottom: 0; }

/* SPEAK REPEAT — u02 t003 (Daniel: "too tall even in full screen"). The column carries ~60 px of
   pure margin between the prompt and the escape link; halve it so the whole ladder (bubble → line →
   EN → ▶ → mic → template → escape) fits a non-fullscreen phone viewport without scrolling. */
.cardfig[data-type="mic_repeat"] .repeat-bubble { margin-bottom: 8px; }
.cardfig[data-type="mic_repeat"] .prompt { margin-bottom: 8px; }
.cardfig[data-type="mic_repeat"] .mic-btn { margin: 10px auto; }
.cardfig[data-type="mic_repeat"] .reveal-line { margin-top: 6px; }
.cardfig[data-type="mic_repeat"] .cannot-speak { margin-top: 6px; }

/* STORY (scene_card) + SCENA (payoff) — Daniel 2026-07-24/25: give Sofia + Marco the Ciao word-card
   scale and float the ▶ centred BETWEEN them, not off to one side. The pinned head is a flex row;
   `order` drops the headtext (which carries the button — the label is null, so it holds only the ▶)
   into the centre gap, and the two figures grow from 30% to 42% to flank it. Still pinned
   (sticky-head), so the pair never scrolls away. The scena reuses the story's exact treatment so the
   two chapter frames read as one design (Daniel 2026-07-25: "heroes were much smaller on the scena"). */
body.figstage .cardfig:is([data-type="scene_card"],[data-type="payoff"]).sticky-head.has-guest .cardfig-head {
  gap: 2px; justify-content: center; flex-wrap: wrap;
}
body.figstage .cardfig:is([data-type="scene_card"],[data-type="payoff"]).sticky-head.has-guest .cardfig-head > .cardfig-img {
  order: 0;   /* width comes from --fig-pair above; this rule is ORDER only */
}
body.figstage .cardfig:is([data-type="scene_card"],[data-type="payoff"]).sticky-head.has-guest .cardfig-head > .cardfig-img.guest {
  order: 2;
}
/* The headtext dissolves into the row (display: contents) so its children become flex items:
   the ▶ keeps the centre gap between the two heroes (order 1); everything else — the t020
   scene-preface, a scene title — takes a full-width row of its own ABOVE the heroes (order -1,
   flex-basis 100% + wrap on the head). Before this, the preface sat IN the centre gap with
   flex: 0 0 auto: it sized the row to ~500px on a 390px phone and centred overflow shoved BOTH
   heroes fully offscreen — first ✎ beta note, 2026-08-02: "The heros aren't visible". */
body.figstage .cardfig:is([data-type="scene_card"],[data-type="payoff"]).sticky-head.has-guest .cardfig-headtext {
  display: contents;
}
body.figstage .cardfig:is([data-type="scene_card"],[data-type="payoff"]).sticky-head.has-guest .cardfig-headtext > * {
  order: -1; flex: 1 1 100%; min-width: 0;
}
body.figstage .cardfig:is([data-type="scene_card"],[data-type="payoff"]).sticky-head.has-guest .cardfig-headtext > :is(.audio-btn, .scene-play) {
  order: 1; flex: 0 0 auto;
}
/* HEROES TOP-ALIGNED (Daniel 2026-07-30: "heroes in the story cards are still not top aligned"). A
   bottom-anchored zoom pushes the head up and clips the empty headroom (the .fig-ph clips —
   overflow:hidden), keeping the torso anchored. The zoom must equal the clip's ACTUAL headroom: the
   packaged sitting clips carry only ~5% (measured — hair-top at ~5% of the 3:4 frame), NOT the ~20%
   first assumed, so scale(1.2) — which crops the top 1−1/1.2 ≈ 17% — ate into the hair and forehead
   (Daniel 2026-07-30 round 2: "heroes heads are cropped at the top"). scale(1.05) crops ~4.8%, taking
   the headroom and no more: heads sit flush at the top, never clipped. Applies to every live figure
   (scene heroes + the single-figure drill cards). */
body.figstage .fig-ph.fig-live .fig-vid {
  /* --fig-dy (t016): authored per-figure downshift (poses.py FIGURE_SHIFT via figures.json
     shift_y, stamped on the slot by setFigurePoster) — Nonna's source pins her bun to the top
     edge; the nudge buys her headroom, feet slide under the bottom fade. */
  transform: translateY(var(--fig-dy, 0%)) scale(1.05); transform-origin: 50% 100%;
}

/* ── the PROMPT, everywhere it appears ─────────────────────────────────────────────────────────
   Daniel, 2026-07-14, on true_false / article_choice / conjugation_cloze: "the prompt needs to be
   card-centered (and have a highlight). Why isn't it formatted as other prompts (in bold terracotta)?"

   Because it isn't a `.prompt`. Those three cards render their question as a `.cloze-line` — a
   sentence with a blank in it — and that class was only ever styled for SIZE. So the same job (here
   is the thing you must read and answer) looked like two different things depending on whether the
   card happened to have a gap in the middle. It is the same job. It gets the same clothes.
   The BLANK keeps its own underline: it is the one part that is not the question. */
.cloze-line {
  font-weight: var(--fw-semibold); color: var(--terra-deep);
  text-align: center;
}
.cloze-line .hint-btn, .cloze-line .en-badge { font-weight: 400; color: var(--ink-soft); }

/* card-centred: the prompt belongs to the CARD, not to the text column it happens to sit in */
body.figstage .cardfig:not(.sticky-head) .cardfig-headtext { text-align: center; }
body.figstage .cardfig:not(.sticky-head) .cardfig-headtext > .audio-btn { margin-left: auto; margin-right: auto; }

/* ...and the highlight follows the text on ALL of them. `.mcq-word` lives inside `.mcq-stim`, so it
   was never matched by the earlier child-selector — the one card Daniel asked for it on by name. */
body.figstage .cardfig-headtext .mcq-word,
body.figstage .cardfig-headtext > .cloze-line {
  display: inline;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  background: rgba(252, 249, 243, .72);
  box-shadow: 0 0 0 5px rgba(252, 249, 243, .72);
  border-radius: 4px;
  line-height: 1.75;
}
body.figstage .cardfig.sticky-head .cardfig-headtext .mcq-word { display: inline; background: none; box-shadow: none; }

/* THE MIC OPT-OUT — one control, one design, one underline (engine.js Speak.cannotSpeakButton).
   English and Italian are the same sentence in two languages, not a label and a footnote: same font,
   same weight, same colour, and the underline runs under the whole thing rather than under each half.
   (It had the Italian in italics at 85% opacity, which made it read as an afterthought.) */
/* A BORDER, NOT AN UNDERLINE. Daniel asked for "a single underline" and text-decoration would not
   give one: on a <button> Chrome paints it per inline child, so the separator punched a gap through
   the middle no matter what (opacity, skip-ink and margin-vs-padding were all red herrings — I tried
   each and screenshotted each). A border-bottom is one continuous line by construction. */
.hint-btn.ghost-link { text-decoration: none; padding-bottom: 3px;
  border-bottom: 1px solid currentColor; }
.cs-en, .cs-it { font: inherit; color: inherit; opacity: 1; font-style: normal; }
/* NO OPACITY. The separator carried opacity:.4, and opacity fades the element's SLICE OF THE
   UNDERLINE with it — so the one continuous rule Daniel asked for arrived as two dashes with a gap.
   A separator can be quiet without being translucent. */
/* PADDING, NOT MARGIN. An underline is not painted beneath an inline child's horizontal MARGINS —
   so the separator's margin punched the very gap that made the rule look like two dashes. Padding
   sits inside the inline box, and the underline runs straight through it. */
.cs-sep { padding: 0 8px; color: inherit; opacity: 1; font-weight: 400; }

/* ── prompts: horizontally CARD-centred ────────────────────────────────────────────────────────
   Daniel, on mcq and mic_reply: "prompt text needs to be horizontally card centered, not
   left-aligned." The headtext column was inheriting the card's left alignment; a prompt is the thing
   the whole card is about, so it belongs on the card's centre line, not on its text column's. */
body.figstage .cardfig:not(.sticky-head) .cardfig-headtext > .prompt,
body.figstage .cardfig:not(.sticky-head) .cardfig-headtext > .big-q,
body.figstage .cardfig:not(.sticky-head) .cardfig-headtext > .cloze-line,
body.figstage .cardfig:not(.sticky-head) .cardfig-headtext > .mcq-stim,
body.figstage .cardfig.stack > .cardfig-body > .prompt { text-align: center; }
body.figstage .cardfig:not(.sticky-head) .cardfig-headtext { align-items: center; }

/* IL DRILL — lower on the card, and the opt-out must not push it into a scroll. */
body.figstage .cardfig[data-type="mic_article_drill"] > .cardfig-body { padding-top: calc(var(--figstage-h) + 6px); }
body.figstage .cardfig[data-type="mic_article_drill"] .drill-step { margin-top: 0; }

/* ── the offer + the save-progress ask ────────────────────────────────────────────────────────
   Both are identity/money screens, so they borrow the cover's paper-card language: a single
   centred card, generous air, nothing else competing. The email inputs reuse .dictation-input
   (the app's one text-input voice); .bad marks a rejected address. */
.door { display: flex; justify-content: center; padding: 0 8px 12px; }
.door-card { background: var(--paper, #fffdf7); border: 1px solid #e5d9bf; border-radius: 16px;
  box-shadow: 0 10px 30px rgba(61, 52, 40, .10); padding: 14px 22px 16px; max-width: 400px;
  width: 100%; text-align: center; }
.door-ic { font-size: 34px; margin-bottom: 8px; }
.door-card h3 { font-family: var(--serif, Georgia, serif); font-size: 23px; margin: 0 0 8px;
  color: var(--ink, #3d3428); text-wrap: balance; }
.door-body { font-family: var(--sans); font-size: 15px; line-height: 1.42;
  color: var(--ink-soft, #6e5c46); margin: 0 0 12px; }
.door-card .btn { width: 100%; }
.door-card .ghost-link { margin-top: 12px; font-size: 15px; }
.door-card .dictation-input { width: 100%; margin: 4px 0 12px; text-align: center; }
.dictation-input.bad { border-color: var(--bad, #b0512e); outline-color: var(--bad, #b0512e); }

/* A SPEAKING CARD IN A SOCIAL APP'S BROWSER — shown, bleached, and locked (Daniel 2026-08-14:
   "disable them but show them, at 50%, with an overlay text… the user will be able to actually see
   the background of the card, understanding what he is missing").

   The card is left COMPLETELY INTACT underneath and covered rather than replaced. That is the whole
   argument: a reader who can read the prompt and see the target sentence knows exactly which
   exercise this browser is keeping them out of, and that is a better reason to open Safari than any
   sentence about permissions could be. Typing instead would have hidden that speaking exists at
   all; a warning would have pre-announced the friction without removing it.

   Everything EXCEPT the veil is bleached — bleaching the card wholesale would take the veil's own
   text down with it, which is the one thing that has to stay legible. */
.card.mic-locked { position: relative; }
.card.mic-locked > *:not(.mic-lock) {
  opacity: .5; filter: saturate(.55); pointer-events: none; user-select: none;
}
/* …except the microphone itself, which is the subject. Everything else on the card is context for
   what is being withheld; the mic IS what is being withheld, and at the same 50% as the background
   it read as part of the wash rather than as an object (Daniel: "I would like to see some sort of
   an outline of a microphone behind the blocking card"). */
.card.mic-locked .mic-btn { opacity: .85; filter: none; }
/* ANCHORED TO THE SCREEN, NOT TO THE CARD (Daniel 2026-08-14: "the alignment is not the same across
   the three different cards"). It was `position: absolute` inside `.card`, so it inherited the card's
   height — and the three speaking cards in lesson 1.2 are 375, 556 and 491px tall, which put the
   panel at 43%, 64% and 57% of the screen. Three different-looking lockouts for one state.
   `fixed`, low, clear of the footer: identical on every card, and it sits in the lower half so the
   card above it reads (Daniel: "so the user can actually see the card better").
   `pointer-events: none` on the veil, `auto` on the panel — the bleached card is already inert via
   the rule above, so the veil has nothing to intercept and should not swallow a scroll. */
.mic-lock {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  /* Clear of the bottom chrome, not just of the footer: the ? and the ✎ are fixed to the bottom
     corners and the card's instruction pill sits between them, so a panel that only cleared the
     Continue button landed on all three. */
  display: grid; align-items: end; justify-items: center; padding: 0 14px 152px;
}
.mic-lock .ml-in {
  pointer-events: auto;
  max-width: 320px; text-align: center; font-family: var(--sans);
  /* 70% (was 94%): the card behind is already bleached to half, so the panel can be much more
     transparent and still read — and the more of the exercise shows through it, the better it does
     its one job of showing what is being missed. */
  /* NO BACKDROP BLUR. It was here to keep the text crisp and it defeated the transparency: a
     blurred 70% panel reads as an opaque one, because there is nothing recognisable left behind it
     to see. Daniel, on a real phone: "I cannot see through them at all." Plain alpha instead — the
     microphone and the prompt stay legible through it, which is the point. */
  background: rgba(250, 246, 238, .7);
  border: 1.5px solid var(--paper-deep); border-radius: 16px;
  padding: 16px 16px 14px; box-shadow: 0 8px 26px -12px rgba(61, 52, 40, .3);
}
.mic-lock .ml-txt { font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.mic-lock .ml-txt b { color: var(--ink); font-weight: var(--fw-semibold); }
.mic-lock .ml-go {
  margin-top: 13px; padding: 9px 18px; border-radius: 999px; cursor: pointer; border: none;
  background: var(--terra); color: #fff;
  font-family: var(--sans); font-size: 14.5px; font-weight: var(--fw-semibold); line-height: 1.2;
}
.mic-lock .ml-go:hover { background: var(--terra-deep); }

/* THE TASTE'S LAST SCREEN — the door out of a social app's browser (Daniel 2026-08-14). It borrows
   the offer screen's proportions on purpose: a centred paper card, one primary action, one quiet
   link under it. What it must NOT look like is the debug ending it replaced, which handed a stranger
   a query string to edit. */
.taste-end {
  max-width: 420px; margin: 0 auto; padding: 2rem 1.25rem 2.5rem; text-align: center;
  font-family: var(--sans);
}
.taste-end .te-ic {
  width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%;
  display: grid; place-items: center; font-size: 22px;
  background: var(--paper-deep); color: var(--terra-deep);
}
.taste-end h3 {
  font-family: var(--serif); font-size: 23px; line-height: 1.2; margin: 0 0 10px; color: var(--ink);
}
.taste-end .te-body { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 14px; }
/* Why they should leave, stated as a fact about the browser rather than a complaint about it. */
.taste-end .te-why {
  font-size: 13px; line-height: 1.45; color: var(--ink-soft); text-align: left;
  background: #f6f2e6; border: 1.5px dashed var(--paper-deep); border-radius: 12px;
  padding: 11px 13px; margin: 0 0 16px;
}
.taste-end .btn { width: 100%; }
.taste-end .te-hint {
  font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); margin: 10px 0 2px; min-height: 1em;
}
.taste-end .ghost-link { margin-top: 10px; }

.ask-form { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; text-align: left; }
.ask-form .dictation-input { width: 100%; }
/* (`.ask-news` — the "email me when a new chapter opens" tick that sat under the address — was
   removed 2026-08-13. It asked a second question at the moment the reader was answering a first
   one. See Signup.formHtml for what the consent line says instead.) */

/* WHILE THE SIX DIGITS ARE BEING TYPED, the account panel is about one thing. Everything it was
   showing before the address was entered — which plan, which language, whether to share usage
   data — is now answering a question nobody is asking, and leaving it on screen under a code box
   is what made the old flow need a second popup to feel focused. Set by Signup.codeForm. */
.howto.coding .acc-segs,
.howto.coding .acc-kicker,
.howto.coding .tier-list,
.howto.coding .acc-toggle,
.howto.coding .l1-say { display: none; }
.ask-consent { font-family: var(--sans); font-size: 11.5px; color: var(--ink-soft, #6e5c46);
  opacity: .8; line-height: 1.45; margin-top: 2px; }
.ask-sent { font-family: var(--sans); font-size: 14.5px; line-height: 1.5;
  color: var(--ink-soft, #6e5c46); text-align: center; padding: 6px 0 2px; }

/* ---- the offer: the price box does the arguing ----
   €29 struck through against €19 in green is read before any sentence is, and it is the only
   reason to decide today rather than wait (door_wall_mockup.html r3). The "just let me know"
   box is deliberately quieter than the button: if yes and no both cost one tap, yes means
   nothing — so yes costs a typed address and no costs a typed address too, but the pre-order
   is the one wearing the price. */
.pricebox { background: #fff9ef; border: 1.5px solid var(--paper-deep, #e5d9bf);
  border-radius: 14px; padding: 11px 16px; margin: 2px 0 12px; }
.pricebox .nums { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.pricebox .old { font-family: var(--serif, Georgia, serif); font-size: 21px;
  color: var(--ink-soft, #6e5c46); text-decoration: line-through; opacity: .75; }
.pricebox .new { font-family: var(--serif, Georgia, serif); font-size: 33px; font-weight: 700;
  color: #2f7d4f; }
.pricebox .lab { font-family: var(--sans); font-size: 12.5px; line-height: 1.45;
  color: var(--ink-soft, #6e5c46); margin-top: 5px; }
.door-card .reassure { font-family: var(--sans); font-size: 12.5px; line-height: 1.38;
  color: var(--ink-soft, #6e5c46); margin: 8px 0 0; }
.orline { display: flex; align-items: center; gap: 10px; margin: 12px 0 10px;
  font-family: var(--sans); font-size: 12px; color: var(--ink-soft, #6e5c46); }
.orline::before, .orline::after { content: ""; flex: 1; height: 1px;
  background: var(--paper-deep, #e5d9bf); }
.subbox { background: #fffdf7; border: 1px solid var(--paper-deep, #e5d9bf); border-radius: 12px;
  padding: 10px 13px; text-align: left; }
.subbox .t { font-family: var(--sans); font-size: 13.5px; font-weight: var(--fw-semibold);
  color: var(--ink, #3d3428); margin-bottom: 6px; }
/* the six-digit sign-in code: wide-tracked and centred so a typo is visible at a glance */
.code-in {
  text-align: center; font-size: 26px; font-weight: 700; letter-spacing: .34em;
  text-indent: .34em;   /* the tracking is applied AFTER the last glyph too — this re-centres it */
  padding: 12px 8px;
}
.code-in.bad { border-color: #b3462f; }

/* what replaces the email field once we already know who this is */
.sub-known { font-family: var(--sans); font-size: 13px; color: var(--ink-soft);
  margin: 0 0 9px; line-height: 1.4; }
.sub-known b { color: var(--ink); font-weight: var(--fw-semibold); }
.door-card .sub-known { margin: 4px 0 14px; text-align: center; }
.subrow { display: flex; gap: 7px; }
.subrow input { flex: 1; min-width: 0; font-family: var(--sans); font-size: 14px; padding: 8px 10px;
  border: 1.5px solid var(--paper-deep, #e5d9bf); border-radius: 9px; background: #fff; }
.subrow input.bad { border-color: var(--bad, #b0512e); }
.subrow .go { flex: none; font-family: var(--sans); font-size: 13px;
  font-weight: var(--fw-semibold); padding: 8px 15px; border-radius: 9px;
  border: 1.5px solid var(--paper-deep, #e5d9bf); background: #fff9ef;
  color: var(--terra-deep, #8a4b2a); cursor: pointer; }
.lock-chip { display: inline-block; font-family: var(--sans); font-size: 12.5px;
  font-weight: var(--fw-semibold); color: #2f7d4f; background: #eef7f0;
  border: 1px solid #cfe6d6; border-radius: 999px; padding: 5px 12px; margin-bottom: 12px; }

/* ---- name-capture card (mic_reply capture_name; Daniel 2026-07-21) ---- */
.namecap { margin-top: 1rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; }
/* mic-first name capture (Daniel #17, 2026-07-22): say your name, with a standing "type instead" link. */
.namecap-mic { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.namecap-saylabel { font-family: var(--sans); font-size: var(--fs-sub); color: var(--ink-soft); }
.namecap-typelink { align-self: center; }
.namecap-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.namecap-pre { font-size: var(--fs-title); color: var(--ink); white-space: nowrap; }
.namecap-input { flex: 1 1 8rem; min-width: 7rem; font-size: var(--fs-title);
  padding: .45rem .7rem; border: 2px solid var(--line); border-radius: .55rem;
  background: var(--card); color: var(--ink); }
.namecap-input:focus { outline: none; border-color: var(--terra); }
.namecap-ok { flex: 0 0 auto; }
.namecap-out { align-self: stretch; }
.namecap-out:empty { display: none; }
.namecap-confirm { display: flex; flex-direction: column; gap: .6rem; align-items: stretch; }
.namecap-confirm p { margin: 0; font-size: var(--fs-body); color: var(--ink); text-align: center; }
.namecap-greet { font-size: var(--fs-display); text-align: center; color: var(--ink); margin: 0; }

/* ---- CC-0 lesson-loading overlay (lesson_lifecycle.js LoadingScreen) -------------------------
   Covers the whole lesson-loading state; card 1 mounts only once it is dismissed (LESS-2). Brand
   surface (--paper), terra progress fill — no spinner, a real determinate bar (the assets are
   countable). */
.lesson-loading {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
}
.lesson-loading .ll-card {
  width: min(78vw, 320px); text-align: center;
  display: flex; flex-direction: column; gap: var(--sp-4); align-items: center;
}
/* Sofia hero that "develops" grey→colour as the bar fills (opacity + filter set inline by
   LoadingScreen._develop; the transition smooths the per-asset progress ticks). */
.lesson-loading .ll-hero {
  width: min(52vw, 200px); aspect-ratio: 3 / 4; margin: 0 auto var(--sp-1);
  /* INLINE data URI (Daniel 2026-07-25): instantly whole, no network fetch, no top-to-bottom paint,
     never invisible. The whole sitting figure, contained so it's never cropped. */
  background-image: url(data:image/jpeg;base64,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);
  background-size: contain; background-position: center; background-repeat: no-repeat;
  opacity: 0; transition: opacity .2s linear;
}
@media (prefers-reduced-motion: reduce) { .lesson-loading .ll-hero { transition: none; } }
.lesson-loading .ll-head { display: flex; flex-direction: column; gap: var(--sp-1); }
.lesson-loading .ll-title { font-size: var(--fs-title); color: var(--ink); font-weight: 600; }
.lesson-loading .ll-sub { font-size: var(--fs-sub); color: var(--ink-soft); }
.lesson-loading .ll-track {
  height: 8px; border-radius: var(--r-pill); overflow: hidden;
  background: var(--paper-deep); box-shadow: inset var(--sh-1);
}
.lesson-loading .ll-bar {
  height: 100%; width: 0%; border-radius: var(--r-pill);
  background: var(--terra); transition: width .18s ease;
}
.lesson-loading .ll-pct {
  font-size: var(--fs-label); color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) { .lesson-loading .ll-bar { transition: none; } }

/* INLINE figure posters (Daniel 2026-07-25): the static first frame as a data URI, so a figure
   is whole THE INSTANT its card mounts — no network fetch, no top-to-bottom fill over the tunnel.
   setFigurePoster() adds .pf-<id> + inline `background-image: var(--poster)` (inline wins the
   figstage .fig-ph{background:transparent} cascade). The clip still lazy-loads and plays over. */
.fig-ph.pf-sofia_sitting { --poster: url(data:image/jpeg;base64,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); }
.fig-ph.pf-marco_sitting { --poster: url(data:image/jpeg;base64,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); }
.fig-ph.pf-nonna_sitting { --poster: url(data:image/jpeg;base64,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); }

/* #34 (Daniel, U4): the picked word's bank slot stays reserved — same size, invisible */
.chip.chip-ghost { visibility: hidden; pointer-events: none; }
/* #80 (Daniel, U4): a dialogue card with a SINGLE hero centers it above the task line
   (two heroes keep the host-left / guest-right band) */
.cardfig:has(.dialogue) .cardfig-head:not(:has(> .cardfig-img.guest)) { flex-direction: column; align-items: center; }
.cardfig:has(.dialogue) .cardfig-head:not(:has(> .cardfig-img.guest)) > .cardfig-img { flex: 0 0 auto; width: 33%; }

/* ---- BEHIND THE TRIAL WALL (Daniel 2026-08-04) --------------------------------------------
   The chapter stays on the map, greyed. Hiding it would say the book ends here, and the whole
   pitch is that it does not — a reader has to be able to see what they are being offered.
   Only the banner is live; it opens the offer, so the grey is an invitation, not a dead end. */
.path-unit.walled .pu-banner { cursor: pointer; }
.path-unit.walled .pu-tag,
.path-unit.walled .pu-desc { opacity: .48; }
.path-unit.walled .pu-prog { color: var(--terra); opacity: .85; font-weight: 600; }
.path-unit.walled .pu-caret { opacity: .6; transform: none; }
/* the nodes themselves never animate or respond — they are scenery until the wall lifts */
.path-unit.walled .path-node,
.path-unit.walled .pn-desc { opacity: .34; pointer-events: none; filter: grayscale(1); }
.path-unit.walled .pu-spine { opacity: .3; filter: grayscale(1); }

/* ---- Leggi ad alta voce (reading_aloud) — Daniel 2026-08-07 --------------------------------
   NO BOX (round 3, Daniel: "the text does not need its own page — between the spacing inside the
   box and outside it, the text does not take up a big enough part of the screen"). The scene is
   just the page. The only chrome is the mic, and it is pinned to the bottom of the scroller.

   WHY STICKY WORKS NOW AND DIDN'T IN ROUND 2: a sticky element floats ABOVE its natural flow
   position, and round 2 gave it `bottom: 6px` and a background that faded to transparent — so the
   6px gap and the fade both showed the tail of the text sliding underneath. `bottom: 0`, an opaque
   background, and a full-bleed out to the stage's own padding leave nowhere for anything to show
   through. Nothing follows it in the DOM either, so there is no content it can uncover. */
.ra-page {
  font-size: 1.12rem; line-height: 1.85;
  /* the last line has to be able to scroll clear of the pinned mic */
  padding-bottom: 8px;
}
.ra-line { padding: 5px 6px; border-radius: 9px; cursor: pointer; transition: background .18s ease; }
.ra-line + .ra-line { margin-top: 2px; }
.ra-spk {
  display: inline-block; margin-right: .45em;
  font-size: .74em; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); vertical-align: 1px;
}
/* the line being read — a quiet band, not a highlight that competes with the word colours */
.ra-line.now { background: rgba(0,0,0,.05); }
/* words land one at a time off the interim transcript, so the transition is per word, not per line */
.ra-w { transition: color .16s ease; }
.ra-w.hit { color: #2f7d4f; }
.ra-w.miss { color: #b4463c; text-decoration: underline; text-decoration-style: wavy; text-underline-offset: 3px; }

.ra-mic {
  position: sticky; z-index: 4;
  display: flex; flex-direction: column; align-items: center;
  /* FULL-BLEED, AND FLUSH. Both numbers are #stage's own padding (20px 22px 28px) inverted, and
     both are load-bearing. The side margins stop a strip of scrolling text showing beside the bar.
     The `bottom: -28px` is the subtle one: a sticky offset is measured from the scrollport's
     PADDING box, so `bottom: 0` parks the bar 28px up and leaves a paper-coloured band underneath
     that text scrolls through — the round-2 bug, in a new place. Measured, not assumed. */
  margin: 0 -22px -28px; padding: 18px 22px 16px;
  bottom: -28px;
  /* THE BAR FADES INTO THE PAGE INSTEAD OF CUTTING IT OFF (Daniel, 2026-08-09: "make the
     reading-aloud mic stripe with gradual opacity / blur, so users will see there's more text
     behind the mic"). A hard edge with solid paper under it says the text ENDS there; a gradient
     says it continues, which is true and is the only thing the reader needs to know.

     This is not the round-1 fade that was removed. That one faded the bar itself to transparent —
     the mic button dissolved and the text ran through it. Here the button stays fully opaque and
     only the bar's own BACKGROUND ramps, top to bottom, from nothing to solid paper: the words
     behind it dim away rather than being clipped. The blur is masked to match the ramp, so it is
     absent at the top edge and full where the button sits. */
     The ramp lives on a ::before BEHIND the content rather than on the element: a mask applies to
     the whole subtree, so masking .ra-mic would fade the mic button along with its background —
     which is precisely the round-1 bug, reintroduced by a different mechanism. */
  background: none;
  border-top: none;
}
.ra-mic::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--paper) 0%, transparent) 0%,
    color-mix(in srgb, var(--paper) 55%, transparent) 30%,
    color-mix(in srgb, var(--paper) 92%, transparent) 62%,
    var(--paper) 88%);
  backdrop-filter: blur(2.5px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
}
/* THE PAGE IS THE TRANSCRIPT. The mic's own heard-text line would repeat, in worse form, what the
   words above are already showing — Daniel: "don't type what the user is saying". */
.ra-mic .stt-out { display: none; }
.ra-done { text-align: center; margin: 14px 0 2px; color: var(--muted); font-size: .95rem; }

@media (prefers-color-scheme: dark) {
  .ra-line.now { background: rgba(255,255,255,.06); }
  .ra-w.hit { color: #6fce97; }
  .ra-w.miss { color: #e58b82; }
}

/* ---------------- THE REVIEW BUILD'S PANEL (dev.js) --------------------------------------------
   Never rendered in production: the element is only created when the boot probe finds the marker
   that app/serve.py synthesizes, and that file does not exist in the repo. Styled to look like a
   tool rather than part of the book, so it can never be mistaken for a reader-facing control. */
#devfab {
  position: fixed; left: 10px; bottom: 10px; z-index: 9998;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--paper-deep);
  background: #fffdf7; font-size: 18px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 8px #0002; opacity: .75;
}
#devfab:hover { opacity: 1; }
.devsheet {
  position: fixed; inset: 0; z-index: 9999; background: #0006;
  display: flex; align-items: flex-end; justify-content: center;
}
.devcard {
  background: #fffdf7; border-radius: 14px 14px 0 0; padding: 18px 18px 24px;
  width: min(560px, 100%); max-height: 86vh; overflow-y: auto;
  font-family: var(--sans); font-size: 14px; color: var(--ink);
}
.devcard h3 { margin: 0 0 6px; font-size: 16px; }
.devcard h4 { margin: 16px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim, #7a7268); }
.devnote { margin: 0 0 12px; color: var(--dim, #7a7268); font-size: 12.5px; line-height: 1.45; }
.devrow { display: flex; gap: 8px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.devrow input[type="email"] { flex: 1 1 160px; padding: 8px 10px; border: 1px solid var(--paper-deep); border-radius: 8px; font: inherit; }
.devrow button, .devclose { padding: 8px 14px; border: 1px solid var(--paper-deep); border-radius: 8px; background: #fff; font: inherit; cursor: pointer; }
.devrow button.ghost { background: transparent; color: var(--dim, #7a7268); }
.devflags { margin: 0; padding-left: 18px; line-height: 1.7; font-size: 12.5px; color: var(--dim, #7a7268); }
.devflags code { background: var(--paper-deep); border-radius: 4px; padding: 1px 5px; color: var(--ink); }
.devclose { display: block; width: 100%; margin-top: 16px; }

/* ── THE BEAT BACKGROUND (`?strip=1`, Daniel 2026-08-09) ─────────────────────────────────────────
   "instead of the two heroes at the top, use the full screen as a background with the sliding
    images. The overlay, the dialog screen, scrolls itself with all of its controls, the underlined
    words with buttons, etc., will remain as they currently are in the card."

   So: a fixed full-bleed layer under everything, and the card left exactly as it is on top of it.
   The reel holds every panel stacked; moving the beat translates the reel, not the layer, so the
   veil never moves and never re-fades.

   BLEACH IS FLAT — 25%, across the whole picture, no gradient (his call, after the first mock
   faded the foot of the image and read as hiding the art rather than quietening it). The bubbles
   were already opaque cards in the shipped design; they carry the contrast, so the picture only
   has to stop shouting. */
/* THE BACKDROP BELONGS TO THE APP SHELL, NOT TO THE WINDOW (Daniel 2026-08-13: on desktop "the
   opening scene is taking up the full width of the screen, which blows up the picture size and
   distorts the view").

   `inset: 0` on a fixed layer means the VIEWPORT, and #page is a 520px column centred in it. On a
   phone those are the same box, which is why this shipped and why every measurement of it looked
   right. On a 1600px window they are not: measured before the fix, the shell was 520px at x=540
   and this layer was 1600px at x=0 — so a 740x1568 portrait panel was covered into a 1600x1000
   box, scaled 2.2x and cropped through the middle. Sofia and Marco filled the window while the
   card sat in a narrow strip over their chests.

   Same geometry as #page (max-width, centred), so the picture is cropped to the frame the reader
   is actually reading in. It stays FIXED rather than moving inside #page: the shell's own
   `overflow: hidden` plus a stacking context under the topbar is a second thing to get right, and
   this needs no JavaScript change at all. */
.stripbg {
  position: fixed; top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 520px;
  z-index: 0; overflow: hidden; pointer-events: none; background: var(--paper);
}
.stripbg-reel { position: absolute; inset: 0; transition: transform .62s cubic-bezier(.4, 0, .2, 1); }
.stripbg-reel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stripbg-veil { position: absolute; inset: 0; background: var(--paper); opacity: .25; }
@media (prefers-reduced-motion: reduce) { .stripbg-reel { transition: none; } }

/* THE PLAY BUTTON MOVES TO THE MIDDLE AND GROWS (Daniel, 2026-08-09: "the play button that used to
   be between them is now left-aligned and looks a little too small… centered and maybe increased 50%
   in size"). It sat between the two heroes in the shipped head; with the heroes gone it had nothing
   to be centred against. 46px -> 69px is the 50% he asked for, and the glyph rides it. */
/* `display: grid`, NOT `block`. The base button is `inline-grid; place-items: center`, and the
   first cut of this rule overrode it with `block` to get the auto margins — which threw away the
   centring, so the border-triangle laid out at the top-left and its point ran off the circle
   (Daniel: "the triangle in the play area got cut"). Grid keeps place-items and still centres. */
body.has-stripbg .scene-play { display: block; }
body.has-stripbg .card > .audio-btn {
  display: grid; place-items: center; margin-inline: auto; width: 69px; height: 69px;
}
body.has-stripbg .card > .audio-btn .ab-play { border-left-width: 21px; border-top-width: 13px; border-bottom-width: 13px; }
body.has-stripbg .card > .audio-btn.playing .ab-play { width: 21px; height: 24px; border-width: 0 7px; }

/* BUBBLES LET THE PICTURE THROUGH (his call: "make the bubbles themselves, let's say, 30%
   transparent, and let's see how that works"). 70% opaque over a 25%-bleached panel still clears
   the contrast the Italian needs, and the scene stays visible behind its own dialogue. */
/* THE BUBBLES ARE SOLID. They were 70% for a while — Daniel's own suggestion, "make the bubbles
   themselves, let's say, 30% transparent, and let's see how that works" — and having seen it
   against the payoff, whose bubbles are opaque: "the payoff card is great, but the opacity on the
   comic-strip card … remain[s]". Reading Italian you do not yet know is hard enough without the
   letters sitting on a picture; the art is already carrying the situation from behind a 25% veil
   and does not need to show through the words as well. The blur stays: it keeps the edge clean
   where the panel behind is busy. */
/* 70% resting, 80% live — Daniel's numbers, 2026-08-09, after seeing both extremes. Solid killed
   the thing the fork exists for: with the bubbles opaque the picture only shows in the gaps, and
   the card stops being art with words on it. The live line does not need much of a step (70 → 80)
   because it also takes a solid terracotta ring, a real shadow and a 3% lift — four cues, of which
   opacity is the least of them. */
body.has-stripbg .dialogue .bubble {
  background: color-mix(in srgb, var(--card) 70%, transparent);
  backdrop-filter: blur(2px);           /* keeps 20px text crisp where the art is busy */
  border-color: color-mix(in srgb, var(--line) 70%, transparent);
  transition: background .25s, box-shadow .25s, transform .25s, border-color .25s;
}
/* THE LINE BEING READ HAS TO WIN (Daniel: "because now the background and the foreground are
   moving, you need to make the current played bubble a little bit more pronounced"). The shipped
   marker is a 2px ring at 35% — plenty against still paper, invisible against a travelling
   picture seen through a 70% bubble. So the live line stops being transparent at all, takes a
   solid ring and a real shadow, and lifts 3%: three cues that survive motion, where one did not. */
body.has-stripbg .dialogue .bubble.b-live {
  background: color-mix(in srgb, var(--card) 80%, transparent); border-color: transparent;
  box-shadow: 0 0 0 3px var(--terra), 0 8px 22px rgba(47, 42, 36, .18);
  transform: scale(1.03);
}

/* THE EN CHIP GOES TO THE CORNER (Daniel, 2026-08-09, with a screenshot). It used to sit on its own
   line under the speaker glyph, which cost every bubble a whole row for one badge. In the top-right
   it shares the row the speaker name already occupies — and that row had nothing in it on the right.
   `.bubble` is already `position: relative`, so this needs no new box. */
body.has-stripbg .dialogue .bubble { padding-top: 8px; padding-right: 52px; }
body.has-stripbg .dialogue .bubble > .hint-btn.en-badge {
  position: absolute; top: 7px; right: 9px; margin: 0;
}
/* the per-bubble speaker is gone from the DOM under ?strip=1; this catches any that slip through
   (the payoff's scena replay builds its own bubbles) so the corner stays clear */
body.has-stripbg .dialogue .bubble > .spk { display: none; }

/* the one-off tap hand: it points at the bubble it sits on, then leaves for good on first touch */
/* The one-off tap hint. Un-scoped from `body.has-stripbg` on 2026-08-09: the scena replay uses it
   too, and the scena has no background — Daniel asked for the payoff's per-bubble speaker icons to
   go the same way the opening's did, with a hand teaching the affordance once. `.bubble` is already
   position:relative in both places, so this needs no new box. */
.tap-hand {
  position: absolute; right: 10px; bottom: -6px; font-size: 22px; pointer-events: none;
  animation: tap-nudge 1.5s ease-in-out 3;
}
@keyframes tap-nudge { 0%,100% { transform: translateY(0); opacity: .85 } 50% { transform: translateY(-5px); opacity: 1 } }
@media (prefers-reduced-motion: reduce) { body.has-stripbg .tap-hand { animation: none } }

/* the card stops painting its own ground so the picture shows through, and rises above the layer */
body.has-stripbg #stage { position: relative; z-index: 1; background: transparent; }
body.has-stripbg .card { background: transparent; box-shadow: none; }
/* the dialogue keeps its bubbles — they are what makes the Italian readable over a picture — but
   the scene's own kicker/title would sit on the art with nothing behind them, so they get the
   same treatment the bubbles already have. */
body.has-stripbg .card > .kicker, body.has-stripbg .card > .content-title {
  background: color-mix(in srgb, var(--paper) 84%, transparent); border-radius: 8px;
  padding-inline: 8px; align-self: flex-start;
}