/* THEMES — the arms of experiment "visual" (story #54, brief v7, 2026-09-28; design review 2026-10-01).

   book.css is the control and stays untouched; each arm is a TOKEN override on <html data-theme>,
   set in <head> by experiments.js before the first paint. Since the design review (review1, commit 1)
   an arm names no component: every button, row, disc, bar, plate and verdict colour it changes is a
   token book.css declares in :root, so a component's own states (ghost, disabled, hover, correct,
   tier tint) are never out-ranked by a theme selector. The only element rules left here are the
   arms' ART and LAYOUT: page gradient, cover backdrop, heroes, posters, the hidden DEV chip.

   prugna — today's figures on plum: a plain dusk gradient, violet buttons, amber Italian words,
            Fraunces for titles and Italian, Figtree for the rest.
   aria   — the modern figures on white: sky-tinted tiles, Mediterranean-blue buttons and progress,
            terracotta Italian, Instrument Sans, pill buttons, no borders. */

/* The arms' faces, self-hosted Latin subsets (SIL OFL), fetched only when an arm references them. */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("fonts/figtree-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/instrument-sans-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/fraunces-latin-wght-normal.woff2") format("woff2"); }

/* ─────────────────────────────── PRUGNA ─────────────────────────────── */
html[data-theme="prugna"] {
  color-scheme: dark;
  /* review1/03: plum is atmosphere, lilac is action, amber is teaching emphasis — one role each */
  --paper: #24162a; --paper-deep: #1b1020; --card: #302137; --line: #4c3958;
  --ink: #f4eff6; --ink-soft: #c0b1ca; --ink-mid: #cdbfd9; --text-3: #c0b1ca; --en: #c8bedb;
  --terra: #e9b76e; --terra-deep: #e9b76e;
  --gold: #e7b56e; --slate: #a9a0c4;
  --sage: #7fa07a; --sage-deep: #b7dda9; --sage-bg: #253422;
  --amber: #e6b872; --amber-deep: #efd096; --amber-bg: #3a2d18;
  --bad: #f3a69e; --red-bg: #3d2026;
  --shadow-rgb: 0, 0, 0;
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Fraunces", "Georgia", serif;
  /* components */
  --btn-face: linear-gradient(180deg, #c1a5ef, #a78ad9); --btn-face-hover: linear-gradient(180deg, #cbb3f3, #b398e0);
  --btn-ink: #25182f; --btn-edge: #745591;
  --ok-edge: #86a97a; --mid-edge: #b89a5c; --bad-edge: #c07a73;
  --btn-off-face: #3b2d45; --btn-off-ink: #b6a6c2;
  --ghost-ink: var(--terra); --ghost-line: var(--terra); --ghost-hover: var(--paper-deep);
  --row-edge: #1b1020;
  --chrome-bg: var(--card); --chrome-bg-2: var(--card); --chrome-line: var(--line); --chrome-hover: var(--paper-deep);
  --tip-bg: #f4eff6; --tip-ink: #24162a; --tip-accent: #8a4a1c;   /* a light bubble on plum */
  --seg-on-bg: #4c3958; --seg-on-ink: var(--ink); --pick-on-bg: #3b2d45;
  --chip-ink: var(--ink); --icon: var(--terra);
  --disc-bg: var(--card); --disc-line: var(--line); --disc-hover: var(--paper-deep);
  /* review1/07 (Daniel: the ? and ⚑ "didn't show"): the deepest tone vanished into the plum; the
     raised surface with the line keeps them quiet and present */
  --help-bg: var(--card); --help-line: var(--line); --help-ink: var(--ink); --flag-ink: var(--ink);
  --help-shadow: 0 6px 18px rgba(0, 0, 0, .35); --help-hover-bg: var(--paper-deep); --help-hover-ink: var(--ink);
  --pill-bg: var(--card); --pill-line: var(--line); --pill-ink: var(--ink); --pill-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  --bar-bg: transparent; --bar-line: rgba(255, 255, 255, .08);
  --progress: #a78ad9;
  --plate: var(--card);
  --scrim: rgba(8, 4, 12, .6);
  /* verdict icons: the light semantic ink on a dark tint, never a white glyph on a pale disc */
  --ic-ok: #1a2a18; --ic-mid: #2a2010; --ic-bad: #2e171b;
  --ic-ok-ink: #b7dda9; --ic-mid-ink: #efd096; --ic-bad-ink: #f3a69e;
  --select-bg: var(--card); --select-bg-cover: var(--card);
  --input-bg: #1b1020; --input-line: #4c3958;
}
html[data-theme="prugna"] body { background: #120b18; }
html[data-theme="prugna"] #page { background: linear-gradient(180deg, #24162a 0%, #1a1020 100%); box-shadow: none; }
/* review1/04 — the serif rule: Fraunces (optical sizing on) for titles and SHORT taught words; Figtree
   for prompts, long lines, cloze lines, instructions, answers, inputs and navigation */
html[data-theme="prugna"] .cover h1, html[data-theme="prugna"] .card .card-title, html[data-theme="prugna"] .bigword,
html[data-theme="prugna"] .mcq-word, html[data-theme="prugna"] .flip-word, html[data-theme="prugna"] .taste-end h3 {
  font-family: var(--display); font-optical-sizing: auto; }
/* the figure's decode bridge is the page, not cream */
html[data-theme="prugna"] .fig-ph, html[data-theme="prugna"] body.figstage .fig-ph.fig-live:not(.fig-shown) { background: transparent; }

/* ──────────────────────────────── ARIA ──────────────────────────────── */
html[data-theme="aria"] {
  /* review1/03: ordinary surfaces nearer white, a denser cleaner blue for the action, a little terracotta */
  --paper: #ffffff; --paper-deep: #eef2f6; --card: #f3f6fa; --line: #d9e3ec;
  --ink: #16222d; --ink-soft: #5f6f7e; --ink-mid: #4a5968; --text-3: #6a7682; --en: #3f5a78;
  --terra: #b54e2c; --terra-deep: #b54e2c;
  --slate: #5b7ca0; --gold: #e0a84a;
  --sage: #12b886; --sage-deep: #0b654c; --sage-bg: #e4f3eb;
  --amber: #f0a31a; --amber-deep: #845714; --amber-bg: #fff0d5;
  --bad: #a83934; --red-bg: #fae7e4;
  --shadow-rgb: 25, 54, 85;
  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fw-bold: 600;
  /* components */
  --btn-face: linear-gradient(180deg, #2866a8, #1e518a); --btn-face-hover: linear-gradient(180deg, #2f70b4, #235a97);
  --btn-ink: #ffffff; --btn-radius: 999px; --btn-edge: #163e6b;
  --ok-edge: #07453a; --mid-edge: #5a3b0d; --bad-edge: #772624;
  --btn-off-face: #e4ebf2; --btn-off-ink: #617083;
  --ghost-ink: var(--terra-deep); --ghost-line: var(--terra); --ghost-hover: var(--paper-deep);
  --row-line: transparent; --row-edge: #d9e3ec;
  --chrome-bg: var(--card); --chrome-bg-2: var(--card); --chrome-line: var(--line); --chrome-hover: var(--paper-deep);
  --tip-bg: var(--ink); --tip-ink: #f3f6fa; --tip-accent: #ffd27a;
  --seg-on-bg: #ffffff; --seg-on-ink: var(--terra-deep); --pick-on-bg: #eef3f8;
  --chip-ink: var(--ink); --icon: #1e518a;   /* blue for audio and action controls; terracotta is for Italian */
  --disc-bg: var(--card); --disc-line: var(--line); --disc-hover: var(--paper-deep);
  --help-bg: #ffffff; --help-line: #cfdbe7; --help-ink: var(--ink); --flag-ink: #1e518a;
  --help-shadow: 0 6px 18px rgba(30, 50, 80, .14); --help-hover-bg: var(--paper-deep); --help-hover-ink: var(--help-ink);
  --pill-bg: #ffffff; --pill-line: #cfdbe7; --pill-ink: var(--ink); --pill-shadow: 0 6px 18px rgba(30, 50, 80, .14);
  --bar-bg: var(--paper); --bar-line: transparent;
  --progress: #1e518a;
  --plate: var(--card);
  --select-bg: var(--card); --select-bg-cover: var(--card);
  --input-bg: #ffffff; --input-line: #d9e3ec;
}
html[data-theme="aria"] body { background: #eef2f6; }
html[data-theme="aria"] #page { box-shadow: 0 0 24px rgba(30, 50, 80, .10); }
html[data-theme="aria"] .fig-ph, html[data-theme="aria"] body.figstage .fig-ph.fig-live:not(.fig-shown) { background: transparent; }

/* ──────────────── the two surfaces that gain a hero in the arms (brief v7) ────────────────
   The cover is figure-led with half the copy; the end gate puts Sofia right under the ask, no dead
   headroom. Both are empty <div>s in the control arm — the markup is the same everywhere, only
   these rules give them a body. Posters: the arm's own Sofia, cut out (assets/, added r251). */
.cover-fig, .te-fig { display: none; }
html[data-theme] .cover-fig, html[data-theme] .te-fig {
  display: block; background: no-repeat center 6px / auto 120%;
  -webkit-mask-image: linear-gradient(#000 68%, transparent 100%); mask-image: linear-gradient(#000 68%, transparent 100%);
}
html[data-theme] .cover-fig { height: 272px; margin: 0 auto 4px; }   /* 300 → 272 with the card's top padding: Start above the fold (10-04) */
html[data-theme] .cover-card { padding-top: 12px; }
html[data-theme] .te-fig { height: 236px; margin: 6px auto 10px; }
html[data-theme="prugna"] .cover-fig, html[data-theme="prugna"] .te-fig { background-image: url("assets/sofia_poster_prugna.png"); }
html[data-theme="aria"] .cover-fig, html[data-theme="aria"] .te-fig { background-image: url("assets/sofia_poster_aria.png"); }
/* The lesson-loading screen (lesson_lifecycle.js) carries the control Sofia as an inline JPEG on cream;
   in an arm she is that arm's own cut-out — the cover already fetched it, so it is in cache (10-04). */
html[data-theme="prugna"] .lesson-loading .ll-hero { background-image: url("assets/sofia_poster_prugna.png"); }
html[data-theme="aria"] .lesson-loading .ll-hero { background-image: url("assets/sofia_poster_aria.png"); }
html[data-theme] .cover .claim .sub, html[data-theme] .cover .cover-note { display: none; }
html[data-theme] .cover .claim { border: 0; background: transparent; padding: 4px 0 0; margin: 10px auto; }
html[data-theme] .cover h1 { margin-top: 6px; }
html[data-theme="prugna"] .cover-card { background: transparent; box-shadow: none; }
html[data-theme="prugna"] .cover-card .claim { background: transparent; }
/* the cover's backdrop: the village art stays, dimmed into the arm's ground */
html[data-theme="prugna"] #page.view-cover #stage {
  background-image:
    linear-gradient(180deg, #24162a 0%, rgba(36, 22, 42, .82) 24%, rgba(36, 22, 42, .9) 66%, #1a1020 100%),
    url("cover-bg.jpg?v=r54");
}
html[data-theme="prugna"] .cover-card { border-color: rgba(255, 255, 255, .08); }
html[data-theme="aria"] #page.view-cover #stage {
  background-image:
    linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, .6) 24%, rgba(255, 255, 255, .6) 66%, #ffffff 100%),
    url("cover-bg.jpg?v=r54");
}
html[data-theme="aria"] .cover-card { background: rgba(255, 255, 255, .55); border-color: rgba(30, 60, 90, .12); box-shadow: 0 6px 28px rgba(30, 50, 80, .08); }
html[data-theme="aria"] .cover-card .claim { background: transparent; }

/* buttons and selects inherit the arm's face (book.css leaves them on the browser default) */

/* ── the figure POSTER per arm: the first frame of the arm's own clip, so the control's cream Sofia never flashes
   before the plum one, and Sofia 2 never appears behind the original (Daniel, phone test 2026-09-28). ── */
html[data-theme="prugna"] .fig-ph.pf-sofia_sitting { --poster: url("assets/poster_prugna_sofia_sitting.jpg"); }
html[data-theme="prugna"] .fig-ph.pf-marco_sitting { --poster: url("assets/poster_prugna_marco_sitting.jpg"); }
html[data-theme="aria"] .fig-ph.pf-sofia_sitting { --poster: url("assets/poster_aria_sofia_sitting.jpg"); }
html[data-theme="aria"] .fig-ph.pf-marco_sitting { --poster: url("assets/poster_aria_marco_sitting.jpg"); }
/* Nonna packaged for both arms (Daniel, 2026-10-03: her cream plate showed in Prugna and Aria) */
html[data-theme="prugna"] .fig-ph.pf-nonna_sitting { --poster: url("assets/poster_prugna_nonna_sitting.jpg"); }
/* Sofia's mark on plum: a COIN (the ink drawing on a cream disc), not light lines on the dark ground
   (Daniel 10-04). The PNG's own pixels are the Carta ink, so it is drawn as an image here, no mask. */
html[data-theme="prugna"] .brand-mark { -webkit-mask: none; mask: none; border-radius: 50%;
  background: #faf6ee url("assets/sofia_mark.png") center / contain no-repeat; }
html[data-theme="aria"] .fig-ph.pf-nonna_sitting { --poster: url("assets/poster_aria_nonna_sitting.jpg"); }