/* =============================================================
   style.css — Russian Practice platform
   Ported verbatim from DESIGN.md. The colour values here are
   NOT decorative choices: green/amber/purple encode Russian case
   roles and match the classroom slides exactly. Changing them
   breaks the one consistent signal the student gets across the
   app and the lesson. Every accent below was contrast-measured
   (see DESIGN.md §2) — do not "brighten" them.
   ============================================================= */

:root {
  /* ground & structure */
  --paper:      #FBFAF7;   /* never pure white — glares at night */
  --card:       #FFFFFF;
  --mist:       #F1F4F9;   /* inset wells: answer field, progress track */
  --line:       #E2E8F2;

  /* type */
  --ink:        #1C2534;   /* 14.75:1 on paper */
  --graphite:   #5B6B84;   /* 5.18:1 */
  --whisper:    #64748B;   /* 4.56:1 */

  /* meaning accents — load-bearing */
  --green:      #0C8259;   /* case 1 — DOER, success, primary go */
  --amber:      #96590A;   /* case 4 — TARGET, listen/speak */
  --purple:     #7C4DBF;   /* case 3 — RECEIVER */
  --coral:      #B93850;   /* errors only, never decorative */
  --sky:        #1E6FD9;   /* neutral info, progress */

  --radius-btn: 13px;
  --radius-card: 16px;
  --radius-token: 11px;
  --shadow: 0 1px 3px rgba(28,37,52,.06);
  --tap: 52px;             /* comfortably past the 44px minimum */
  --maxw: 880px;
  --font-lat: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-lao: "NotoLao", var(--font-lat);
}

/* The dark theme is a RE-DERIVATION, not an inversion (DESIGN.md §2): the
   light accents were darkened to clear 4.5:1 on paper, so on navy they must be
   LIGHTENED again rather than reused. Same meanings, different luminance. */
[data-theme="dark"] {
  --paper:    #131A26;
  --card:     #1B2433;
  --mist:     #222C3D;
  --line:     #2D394C;
  --ink:      #EAF0F8;
  --graphite: #A8B6CC;
  --whisper:  #8798B2;
  --green:    #3ECF96;
  --amber:    #E8AE5A;
  --purple:   #B999F0;
  --coral:    #F2879B;
  --sky:      #6FAAF5;
  --shadow:   0 1px 3px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-lat);
  font-size: 17px;
  line-height: 1.5;
  padding-bottom: calc(68px + env(safe-area-inset-bottom));
  overscroll-behavior-y: none;
}

/* Lao stacks vowels and tone marks above AND below the baseline; Latin
   leading clips them against neighbouring lines. */
.lo, [lang="lo"] { font-family: var(--font-lao); line-height: 1.95; }

h1, h2, h3 { line-height: 1.3; margin: 0 0 8px; font-weight: 700; }
h1 { font-size: 22px; }
h2 { font-size: 19px; }
p  { margin: 0 0 12px; color: var(--graphite); }

/* font-size control for older eyes (3 steps) */
html[data-fs="s"] body { font-size: 15px; }
html[data-fs="l"] body { font-size: 21px; }

/* ---------- accessibility primitives (AUDIT.md C1/H1) ---------- */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--green); color: #fff; padding: 12px 18px;
  border-radius: 0 0 var(--radius-btn) 0; font-weight: 700;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
  border-radius: 4px;
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- layout ---------- */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }

header.bar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  padding-top: calc(10px + env(safe-area-inset-top));
}
.bar .row { display: flex; align-items: center; gap: 10px; }
.brand { font-weight: 700; font-size: 17px; margin-right: auto; }

.screen { display: none; padding: 18px 0 24px; }
.screen.is-active { display: block; }
/* [hidden] must win over .is-active — the login gate relies on it. */
[hidden] { display: none !important; }

/* ---------- bottom tab bar ---------- */

nav.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--card) 94%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
nav.tabs button {
  appearance: none; border: 0; background: none; cursor: pointer;
  min-height: var(--tap); padding: 7px 2px 9px;
  color: var(--whisper); font-size: 11px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-family: inherit;
}
nav.tabs button .ic { font-size: 19px; line-height: 1; }
nav.tabs button[aria-current="page"] { color: var(--green); }

/* ---------- buttons ---------- */

button, .btn {
  font-family: inherit; font-size: 16px; font-weight: 700;
  min-height: var(--tap); padding: 14px 20px;
  border-radius: var(--radius-btn); border: 0; cursor: pointer;
  transition: transform .08s ease;
}
button:active, .btn:active { transform: scale(.98); }

.btn-primary { background: var(--green); color: #fff; box-shadow: 0 2px 10px rgba(12,130,89,.22); }
.btn-amber   { background: var(--amber); color: #fff; box-shadow: 0 2px 10px rgba(150,89,10,.22); }
.btn-ghost   { background: var(--card); color: var(--graphite); border: 1px solid var(--line); }
.btn-block   { display: block; width: 100%; }
button[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- cards ---------- */

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow);
  padding: 16px; margin-bottom: 12px;
}
/* Family identity bar. AUDIT M2 flagged a one-sided accent as an anti-pattern
   when it is purely decorative — here it encodes the drill family and is
   always paired with a text label, so it carries real information. */
.card.fam { border-left: 3px solid var(--sky); }
.card.fam-green  { border-left-color: var(--green); }
.card.fam-amber  { border-left-color: var(--amber); }
.card.fam-purple { border-left-color: var(--purple); }

/* ---------- case roles: colour is never the only signal (AUDIT H4) ---------- */

.role { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.role::before { font-size: 13px; }
.role-1 { color: var(--green);  } .role-1::before { content: "🧍"; }
.role-4 { color: var(--amber);  } .role-4::before { content: "🎯"; }
.role-3 { color: var(--purple); } .role-3::before { content: "🎁"; }

.token {
  display: inline-block; border-radius: var(--radius-token);
  border: 2px solid var(--line); background: var(--mist);
  padding: 10px 13px; margin: 4px; font-size: 17px; font-weight: 700;
  min-height: var(--tap); cursor: pointer; font-family: inherit; color: var(--ink);
}
.token.used { opacity: .25; }           /* drop, never vanish — no reflow mid-tap */
.token.c1 { border-color: var(--green);  background: color-mix(in srgb, var(--green) 10%, var(--card)); }
.token.c4 { border-color: var(--amber);  background: color-mix(in srgb, var(--amber) 10%, var(--card)); }
.token.c3 { border-color: var(--purple); background: color-mix(in srgb, var(--purple) 10%, var(--card)); }

/* ---------- answer wells ---------- */

.well {
  background: var(--mist); border: 2px solid var(--line);
  border-radius: var(--radius-btn); padding: 14px;
}
input.ans {
  width: 100%; border: 0; background: none; color: var(--ink);
  font-size: 30px; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums; font-family: inherit;
}
input.ans:focus { outline: none; }
.well:focus-within { border-color: var(--sky); }

/* ---------- feedback (AUDIT C3 — must be announced, not just coloured) ---- */

.fb { border-radius: var(--radius-btn); padding: 14px; margin-top: 12px; font-weight: 700; }
.fb-ok   { background: color-mix(in srgb, var(--green) 10%, var(--card)); border: 1px solid var(--green); color: var(--green); }
.fb-bad  { background: color-mix(in srgb, var(--coral) 10%, var(--card)); border: 1px solid var(--coral); color: var(--coral); }
.fb .why { display: block; margin-top: 6px; font-weight: 400; color: var(--graphite); }

.warn {
  background: color-mix(in srgb, var(--amber) 10%, var(--card));
  border: 1px solid var(--amber); color: var(--amber);
  border-radius: var(--radius-btn); padding: 12px; margin-bottom: 12px; font-size: 15px;
}

/* ---------- progress ---------- */

.track { height: 8px; background: var(--mist); border-radius: 99px; overflow: hidden; }
.fill  { height: 100%; background: var(--green); border-radius: 99px; transition: width .25s ease; }

.meta { color: var(--whisper); font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---------- the big Russian word ---------- */

.target {
  font-size: clamp(38px, 11vw, 58px); font-weight: 700;
  letter-spacing: -.02em; text-align: center; margin: 18px 0;
}

/* ---------- sync badge: quiet, never blocking ---------- */

.sync {
  position: fixed; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom));
  background: var(--card); border: 1px solid var(--line); color: var(--whisper);
  border-radius: 99px; padding: 6px 12px; font-size: 12px; box-shadow: var(--shadow);
  z-index: 25; display: none;
}
.sync.show { display: block; }

/* ---------- presenter mode: screen-share in class ---------- */

body.present nav.tabs, body.present header.bar { display: none; }
body.present { padding-bottom: 0; font-size: 26px; }
body.present .target { font-size: clamp(64px, 13vw, 132px); }
body.present .wrap { max-width: 1400px; }
body.present .card { padding: 28px; }

/* ---------- desktop: a reading column, not a stretched phone ---------- */

@media (min-width: 900px) {
  body { padding-bottom: 24px; }

  /* The nav sits AFTER <main> in the DOM so that a screen reader and a
     keyboard reach the content first. On desktop we want it visually at the
     top instead — reorder with flex rather than moving it in the markup, so
     the accessible reading order is preserved. */
  #app { display: flex; flex-direction: column; align-items: stretch; }
  header.bar { order: -2; }
  nav.tabs   { order: -1; }
  /* width:100% is load-bearing: as a flex item, <main> would otherwise
     shrink-wrap its content and stop matching the nav above it. */
  main       { order: 0; width: 100%; }

  nav.tabs {
    position: static; max-width: var(--maxw); margin: 0 auto; width: 100%;
    border-top: 0; border-bottom: 1px solid var(--line);
    background: none; backdrop-filter: none; padding-bottom: 0;
    grid-template-columns: repeat(5, max-content); gap: 4px;
    padding-left: 24px;
  }
  nav.tabs button { flex-direction: row; gap: 7px; font-size: 14px; padding: 10px 14px; }
  nav.tabs button .ic { font-size: 16px; }
  nav.tabs button[aria-current="page"] {
    border-bottom: 2px solid var(--green); border-radius: 0;
  }
  .wrap { padding: 0 24px; }
}


/* =============================================================
   LESSON RAIL
   Replaces the 17-identical-cards grid. Two named anti-patterns
   from AUDIT.md were reintroduced in the rebuild and are removed
   here: the identical card grid, and the 3px one-sided colour bar.

   The list''s real job is answering "where was I, what''s next?" in
   one glance, so it is a PROGRESSION, not a grid: one continuous
   rail, one promoted row, finished rows visibly spent. A grid
   cannot do that — every row looks equally urgent.
   ============================================================= */

.unit { margin: 0 0 30px; }
.unit:first-child { margin-top: 4px; }

.unit-head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 0 0 10px 34px;            /* aligns with the rail''s text column */
}
.unit-head h2 {
  margin: 0; font-size: 13px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--whisper);
}
/* Lao has no capitals; letter-spacing a Lao string just breaks it apart. */
.unit-head h2.lo { text-transform: none; letter-spacing: 0; font-size: 15px; }
.unit-count {
  margin-left: auto; font-size: 12px; font-weight: 700;
  color: var(--whisper); font-variant-numeric: tabular-nums;
}

.rail { list-style: none; margin: 0; padding: 0; position: relative; }

/* The connecting line. This is the whole point of the rail: it reads as ONE
   journey rather than N separate objects. */
.rail::before {
  content: ""; position: absolute; left: 13px; top: 6px; bottom: 6px;
  width: 2px; background: var(--line); border-radius: 2px;
}

.lrow { position: relative; display: flex; align-items: flex-start; gap: 12px; }
.lrow + .lrow { margin-top: 2px; }

.lmark {
  flex: 0 0 28px; height: 28px; margin-top: 11px;
  display: grid; place-items: center;
  background: var(--paper);          /* punches a hole in the rail line */
  border-radius: 50%; font-size: 13px; line-height: 1;
  color: var(--whisper); position: relative; z-index: 1;
}

.lbtn {
  flex: 1 1 auto; min-width: 0;
  display: block; text-align: left;
  background: none; border: 0; border-radius: 12px;
  padding: 11px 12px; min-height: 52px;
  font-family: inherit; color: var(--ink); cursor: pointer;
}
.lbtn:hover { background: var(--mist); }

.ltitle { display: block; font-size: 17px; font-weight: 600; line-height: 1.35; }
.ltitle.lo { line-height: 1.9; }
.lmeta {
  display: block; margin-top: 1px;
  font-size: 12.5px; color: var(--whisper);
}

/* ---- done: spent, not shouting. Colour is NOT the only signal — the marker
        glyph changes to a tick and the meta text says so. ---- */
.lrow.is-done .lmark { background: var(--green); color: #fff; font-weight: 700; }
.lrow.is-done .ltitle { color: var(--graphite); font-weight: 500; }

/* ---- next: the single promoted row. This is the one thing the eye should
        land on, so it gets weight, a tint, and a real edge — earned emphasis
        on ONE row, not a decorative bar repeated on all 17. ---- */
.lrow.is-next .lbtn {
  background: color-mix(in srgb, var(--green) 7%, var(--card));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--green) 38%, transparent);
}
.lrow.is-next .ltitle { font-size: 19px; font-weight: 700; }
.lrow.is-next .lmeta { color: var(--green); font-weight: 700; }
.lrow.is-next .lmark {
  background: var(--card); color: var(--green);
  box-shadow: inset 0 0 0 2px var(--green);
}

.lrow.is-untaught .ltitle { color: var(--graphite); }
.lrow.is-untaught .lmeta { color: var(--amber); }

/* Desktop: cap the TEXT column, not the page. Long Lao lines with stacked
   vowels are hard to track; ~48 characters is the comfortable limit. */
@media (min-width: 760px) {
  .unit { max-width: 560px; }
}



/* =============================================================
   HOME — one decision per screen

   The old home was six equal cards (the audit''s strongest AI-slop
   tell). This is a hierarchy instead: one hero action, then
   reference information that is deliberately quieter. Nothing
   here competes with the green button.
   ============================================================= */

.hero { padding: 6px 0 22px; }
.hero-kicker {
  margin: 0 0 6px; font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--whisper);
}
.hero-kicker.lo { text-transform: none; letter-spacing: 0; font-size: 14px; }

/* Fluid, and genuinely large: this is the one thing to read first. */
.hero-title {
  margin: 0 0 18px;
  font-size: clamp(26px, 6.4vw, 38px);
  line-height: 1.22; font-weight: 700; letter-spacing: -.015em;
  max-width: 17ch;
}
.hero-title.lo { line-height: 1.6; letter-spacing: 0; }

.hero-go { width: 100%; max-width: 420px; font-size: 17px; }

/* ---- teacher note: a margin annotation, not a card ---- */
.note {
  border-left: 2px solid var(--purple);
  padding: 2px 0 2px 14px; margin: 4px 0 22px;
}
.note-k {
  display: block; font-size: 12px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--purple);
}
.note-k.lo { text-transform: none; letter-spacing: 0; font-size: 13px; }
.note p { margin: 3px 0 0; color: var(--ink); }

/* ---- progress: a rule with a number, not a boxed metric ---- */
.strip { padding: 16px 0; border-top: 1px solid var(--line); max-width: 420px; }
.strip .track { height: 5px; }
.strip-meta {
  margin: 8px 0 0; font-size: 13px; color: var(--whisper);
  font-variant-numeric: tabular-nums;
}
.strip-meta strong { color: var(--ink); font-size: 15px; }

/* ---- weak items ---- */
.weak { padding: 16px 0 0; border-top: 1px solid var(--line); max-width: 480px; }
.weak h3 {
  margin: 0 0 9px; font-size: 13px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--whisper);
}
.weak h3.lo { text-transform: none; letter-spacing: 0; font-size: 14px; }
.weak-items { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  display: inline-block; padding: 5px 11px; border-radius: 7px;
  background: color-mix(in srgb, var(--amber) 11%, var(--card));
  color: var(--amber); font-size: 15px; font-weight: 600;
}

/* A text action, so it cannot compete with the hero button. */
.btn-link {
  background: none; border: 0; padding: 8px 0; min-height: 44px;
  color: var(--green); font-weight: 700; font-size: 15px;
  font-family: inherit; cursor: pointer;
}
.btn-link:hover { text-decoration: underline; }



/* =============================================================
   DESKTOP COMPOSITION

   The phone layout is a single column; on a wide screen that same
   column pinned to the left leaves a large dead field to the right
   and makes the app look unfinished. The reading column stays
   narrow (long Lao lines with stacked vowels are hard to track),
   but it is CENTRED, and the home screen gets a second column so
   the space is occupied by something useful rather than padding.
   ============================================================= */

@media (min-width: 900px) {
  /* The nav is the page''s only chrome — let it sit on the same optical
     centre line as the content beneath it. */
  nav.tabs { padding-left: 0; justify-content: center; }
  nav.tabs, main.wrap { max-width: 900px; }

  /* Tried a two-column home and reverted it: with only a progress rule to
     put beside the hero, the right column read as a stray element rather
     than a composition. A wide screen does not owe anyone two columns —
     one confident column, vertically centred, is the honest answer for a
     screen whose whole job is a single decision. */
  /* Centre the COLUMN, not just its contents. A narrow column left-pinned in a
     1480px window reads as a rendering failure; the same column on the optical
     centre line reads as a deliberate page. */
  /* MUST be scoped to .is-active. A bare "#s-home { display:flex }" outranks
     ".screen { display:none }" on specificity, so the home screen stayed
     painted underneath every other tab. */
  #s-home.is-active {
    padding-top: 0;
    min-height: calc(100vh - 210px);
    display: flex; flex-direction: column; justify-content: center;
  }
  #homeBody { max-width: 560px; margin-inline: auto; width: 100%; }

  /* The lesson rail gets the same treatment — it is the other screen that is
     mostly one narrow list in a wide window. */
  #lessonList, #sceneList, #drillList, #numBody, #wordList, #meBody {
    max-width: 620px; margin-inline: auto;
  }

  .hero { padding-top: 0; }
  .hero-title { font-size: clamp(30px, 3.1vw, 42px); }
}

/* Between phone and desktop the single column would otherwise stretch to the
   full 880px and undo the line-length work. */
@media (min-width: 620px) and (max-width: 899px) {
  main.wrap > .screen { max-width: 620px; }
}



/* ---- rail refinements -------------------------------------------------- */

/* Lao line-height 1.9 inside a 52px button made every row ~70px tall; 17 of
   those is a lot of scrolling for a list you are meant to scan. Tighten the
   row while keeping the 52px tap target. */
.lbtn { padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; }
.ltitle.lo { line-height: 1.55; }
.lmeta { font-size: 12px; margin-top: 2px; }
.lmeta.lo { line-height: 1.5; }

/* The rail is one journey: carry the line THROUGH the unit headings instead of
   restarting it per group, so the eye never loses the thread. */
.unit { margin-bottom: 0; padding-bottom: 18px; }
.unit-head { padding-top: 18px; }
.unit:first-child .unit-head { padding-top: 2px; }

/* Finished rows recede; the eye should skip them on the way to the next one. */
.lrow.is-done .lbtn { opacity: .62; }
.lrow.is-done:hover .lbtn { opacity: 1; }



/* ---- flat rail: drills / numbers have no sequence, so no connecting line --- */
.rail-flat::before { display: none; }
.rail-flat .lmark { background: none; }

/* =============================================================
   GLOSSARY — a reference table, not 52 cards
   ============================================================= */

.glossary { list-style: none; margin: 0; padding: 0; }

.gitem {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1.1fr) 44px;
  align-items: center; gap: 10px;
  min-height: 52px; padding: 5px 4px;
  border-bottom: 1px solid var(--line);
}
.gitem:last-child { border-bottom: 0; }

.gpic { font-size: 22px; line-height: 1; text-align: center; }
.gword { font-size: 17px; font-weight: 700; }
.ggender {
  display: inline-block; margin-left: 6px;
  font-size: 12px; font-weight: 600; color: var(--whisper);
}
.gmean { font-size: 14px; color: var(--graphite); }
.gmean.lo { line-height: 1.7; }

.gsay {
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; border-radius: 10px;
  font-size: 17px; cursor: pointer; color: var(--graphite);
  min-height: 44px;
}
.gsay:hover { background: var(--mist); }

/* Narrow phones: the meaning drops under the word rather than being squeezed
   into an unreadable column. */
@media (max-width: 420px) {
  .gitem { grid-template-columns: 26px minmax(0, 1fr) 44px; row-gap: 0; }
  .gword { grid-column: 2; }
  .gmean { grid-column: 2; margin-top: -2px; }
  .gsay  { grid-column: 3; grid-row: 1 / span 2; }
  .gpic  { grid-row: 1 / span 2; }
}



/* =============================================================
   LESSON READER — a page, not a stack of boxes

   The old reader wrapped every paragraph in a bordered card with a
   coloured edge. That is the "nest cards inside cards" and
   "one-sided accent" pair from the anti-pattern list, and it made a
   two-sentence grammar rule look like a system alert. Here the
   TYPE does the work: a standfirst, then labelled passages.
   ============================================================= */

.btn-back {
  background: none; border: 0; padding: 8px 0; min-height: 44px;
  color: var(--graphite); font-family: inherit; font-size: 15px;
  font-weight: 600; cursor: pointer;
}
.btn-back:hover { color: var(--ink); }

/* 46ch is a Latin measure; Lao glyphs are wider, so cap in px as well or the
   column collapses to something much narrower than intended. */
.lesson { max-width: min(46ch, 620px); }
.lesson-title {
  margin: 6px 0 10px;
  font-size: clamp(24px, 5.4vw, 32px); font-weight: 700;
  line-height: 1.24; letter-spacing: -.015em;
}
.lesson-title.lo { line-height: 1.6; letter-spacing: 0; }

/* Standfirst: larger than body, lighter than the title. */
.lesson-why {
  margin: 0 0 26px; font-size: 17px; color: var(--graphite);
  border-left: 2px solid var(--line); padding-left: 14px;
}
.lesson-why.lo { line-height: 1.95; }

.blk { margin: 0 0 22px; }
.blk-tag {
  display: block; margin-bottom: 4px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.blk-tag.lo { text-transform: none; letter-spacing: 0; font-size: 13px; }
.blk-body { margin: 0; color: var(--ink); font-size: 17px; }
.blk-body.lo { line-height: 1.95; }

/* Rule vs trap differ by TYPE as well as colour (WCAG 1.4.1: colour is never
   the only carrier of meaning). A rule states how things are; a trap is a
   warning, so it is set in a tinted panel that stops the eye. */
.blk-rule .blk-tag { color: var(--green); }
.blk-trap .blk-tag { color: var(--amber); }
.blk-trap {
  background: color-mix(in srgb, var(--amber) 8%, var(--card));
  border-radius: 12px; padding: 14px 16px;
}
.blk-trap .blk-tag::before { content: "⚠ "; }

/* ---- word pairs: a two-column list, not a bordered card ---- */
.pairs { list-style: none; margin: 0 0 24px; padding: 0; }
.pair {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
  align-items: center; gap: 10px;
  min-height: 52px; padding: 4px 0;
  border-bottom: 1px solid var(--line);
}
.pair:last-child { border-bottom: 0; }
.pair-ru { font-size: 18px; font-weight: 700; }
.pair-lo { font-size: 14px; color: var(--graphite); }
.pair-lo.lo { line-height: 1.7; }

/* ---- say-aloud block keeps its weight: it is the one INSTRUCTION on the
        page, and the say-before-hearing gap is the app''s strongest pattern --- */
.say-blk {
  margin: 4px 0 24px; padding: 18px 16px 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--amber) 9%, var(--card));
  text-align: center;
}
.say-blk .blk-tag { color: var(--amber); text-align: center; }

.lesson-done { margin-top: 8px; max-width: 420px; }

@media (min-width: 900px) {
  /* Centre the STAGE and let its children fill it. Centring .lesson on its own
     left the 46ch article and the full-width back button on different axes,
     which reads as a misalignment rather than a margin. */
  #stage { max-width: 620px; margin-inline: auto; }
  .lesson { max-width: none; }
  .lesson-done { margin-inline: 0; }
}