/* quiz.css — the study phase. Two screens that share one chrome:
   the exercise session (header · stage · pinned action bar) and the
   Lernverlauf record (header · filter strip · scrolling list).

   Both are laid out as a `.frame` (see base.css): a capped, centred column that
   fills the viewport height, so the phase looks composed on a phone and doesn't
   stretch into a wall of full-width rows on a desktop. Colours and radii come
   from the tokens — nothing here invents a shade. */

  /* Both study screens sit on the same faint dome of light, so the reading
     column reads as lit rather than as text on flat black. */
  .quiz-screen, .history-screen {
    justify-content: flex-start; align-items: stretch;
    background: radial-gradient(130% 75% at 50% 0%, #1a1425 0%, var(--bg) 58%);
  }

  /* Past a tablet's width the capped column would float in a void; hairlines
     down its sides make it read as a deliberate panel instead. */
  @media (min-width: 760px) {
    .quiz-frame, .hist-frame {
      border-left: 1px solid var(--edge-soft);
      border-right: 1px solid var(--edge-soft);
      background: linear-gradient(180deg, rgba(127, 240, 237, 0.02), transparent 45%);
    }
  }

  /* ===========================================================================
     Exercise session
     =========================================================================== */
  .quiz-frame { text-align: center; }

  /* --- Header: step bar + round meta, fixed at the top --- */
  .quiz-header { flex: 0 0 auto; }

  /* One cell per question, so the round's shape is legible at a glance: what is
     already answered, how it went, and where you are in it. */
  .quiz-steps { display: flex; gap: 4px; height: 5px; }
  .qstep {
    flex: 1 1 0; border-radius: var(--r-pill); background: var(--edge-soft);
    transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .qstep.now   { background: var(--arcane); box-shadow: 0 0 10px var(--arcane-3); }
  .qstep.right { background: var(--good); }
  .qstep.wrong { background: var(--bad); }
  .qstep.shown { background: var(--gold); }   /* solution revealed — resolved, unearned */
  /* A lecture can be stepped back onto a question already answered, so a cell
     can carry a verdict AND be the one you are standing on. The verdict keeps
     the colour — it is the thing worth reading — and "here" is a ring round it,
     which reads on any of the three. */
  .qstep.right.now, .qstep.wrong.now, .qstep.shown.now {
    box-shadow: 0 0 0 1.5px var(--arcane), 0 0 10px var(--arcane-3);
  }
  /* A lecture page is a step of the same bar with no verdict to give: narrower,
     so the reading and the answering are visibly different halves of the run,
     and quietly filled once it has been turned. */
  .qstep.page  { flex: 0 0 14px; }
  .qstep.read  { background: var(--edge-hi); }

  .quiz-meta {
    display: flex; align-items: center; gap: 9px;
    margin-top: 10px; min-height: 30px;
  }
  /* The meta row is one line on a 360 px phone and stays one line: everything
     in it is a fixed-width chip, so nothing wraps the counter onto a second row
     and pushes the stage down between steps. */
  .quiz-count, .quiz-purse, .quiz-mult { white-space: nowrap; }
  .quiz-count { font-size: 12.5px; color: var(--ink-4); letter-spacing: 0.3px; }
  .quiz-count b { color: var(--ink-2); font-weight: 700; }
  .quiz-purse {
    font-size: 12.5px; font-weight: 700; color: var(--gold); letter-spacing: 0.3px;
    background: var(--gold-1); border: 1px solid var(--gold-2);
    border-radius: var(--r-pill); padding: 3px 10px;
  }
  /* Banked reward multiplier — what the run's fighting bought. Sits next to the
     purse it multiplies, and glows once it has hit its ceiling. */
  .quiz-mult {
    font-size: 12.5px; font-weight: 700; color: var(--gold-lt); letter-spacing: 0.5px;
    background: var(--gold-1); border: 1px solid var(--gold-3);
    border-radius: var(--r-pill); padding: 3px 9px;
  }
  .quiz-mult.capped {
    color: #1a1526; background: var(--gold); border-color: var(--gold-lt);
    box-shadow: 0 0 12px rgba(242, 193, 78, 0.4);
  }
  .quiz-history-btn { margin-left: auto; }
  /* One step back through a lecture. It sits at the HEAD of this row, where the
     shelf's and the history's back buttons also sit — the foot bar is not
     allowed a second button, since the primary one down there must never move
     under the thumb. Kept to a glyph and tight padding because the row's whole
     budget is one line at 360 px: back 36 + counter 86 + purse 64 + Verlassen 89
     with three 9 px gaps comes to exactly the 346 px available, and a fifth item
     — or a word instead of the arrow — would wrap the counter onto a second row
     and push the stage down between one step and the next. */
  .quiz-step-back { padding: 5px 11px; font-size: 14px; line-height: 1; }
  /* The caption's right-hand half holds the lecture's name, which is longer than
     a direction label; it truncates rather than wrapping the caption in two. */
  .quiz-task .quiz-dir { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* The purse counts gems while a lecture runs. Same pill, other currency. */
  .quiz-purse:has(.gem) { color: var(--gem); background: var(--gem-1); border-color: var(--gem-2); }

  /* --- Stage: the exercise itself, in whatever room is left ---
     The flexible spacers hold it a little above the true centre (where the eye
     looks first) and collapse when an exercise is tall enough to need scrolling. */
  .quiz-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .quiz-body::before { content: ""; flex: 4 1 0; }
  .quiz-body::after  { content: ""; flex: 6 1 0; }
  .quiz-stage { flex: 0 0 auto; width: 100%; padding: 18px 0 20px; }

  /* Which exercise this is, as a caption rather than two pills that read like
     buttons you could press. */
  .quiz-task {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; justify-content: center;
    margin-bottom: 18px;
  }
  .quiz-kind {
    font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--arcane-dim);
  }
  .quiz-dir { font-size: 11.5px; letter-spacing: 0.3px; color: var(--ink-4); }
  .quiz-dir::before { content: "·"; color: var(--edge-hi); margin-right: 8px; }

  .quiz-prompt {
    font-size: clamp(17px, 4.8vw, 21px); color: var(--ink-2); line-height: 1.45;
    margin: 0 0 22px;
  }
  .quiz-word { font-family: var(--display-font); color: var(--gold); font-weight: 700; letter-spacing: 1px; }
  .quiz-hint { font-size: 14px; color: var(--ink-3); margin: 6px 0 22px; }

  /* Multiple choice */
  .quiz-opts { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 380px; margin: 0 auto; }
  .quiz-opt {
    position: relative; width: 100%;
    font-size: 17px; padding: 14px 40px; border-radius: var(--r-2);
    background: var(--raised); border: 1px solid var(--edge); color: var(--ink);
    box-shadow: var(--shadow-1); cursor: pointer;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
                transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .quiz-opt:hover:not(:disabled) { border-color: var(--arcane-3); }
  .quiz-opt:active:not(:disabled) { transform: translateY(1px); background: var(--panel); }
  .quiz-opt:disabled { cursor: default; }
  /* Outcome is carried by a glyph as well as a colour, so it still reads
     without colour vision. */
  .opt-mark { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 15px; font-weight: 700; }
  .quiz-opt.correct {
    border-color: var(--good); color: var(--good-ink);
    background: linear-gradient(160deg, rgba(94, 207, 143, 0.18), rgba(94, 207, 143, 0.06));
  }
  .quiz-opt.wrong {
    border-color: var(--bad); color: var(--bad-ink);
    background: linear-gradient(160deg, rgba(229, 84, 95, 0.18), rgba(229, 84, 95, 0.06));
  }
  .quiz-opt.faded { opacity: 0.32; border-color: var(--edge-soft); box-shadow: none; }

  /* Sentence with a blank */
  .quiz-sentence {
    font-size: clamp(18px, 5.2vw, 23px); color: var(--ink); line-height: 1.8;
    max-width: 100%; margin: 0 auto 4px;
  }
  .quiz-sentence .blank {
    display: inline-block; min-width: 84px; text-align: center;
    color: var(--gold); font-weight: 700; border-bottom: 2px dashed var(--gold-3); padding: 0 6px;
  }
  .quiz-sentence .blank.filled { min-width: 0; border-bottom-style: solid; border-bottom-color: var(--gold); }

  /* Typed exercises */
  .quiz-input {
    font-family: inherit; font-size: 19px; padding: 14px 16px;
    width: 100%; max-width: 380px; margin: 0 auto; display: block;
    text-align: center; color: var(--ink);
    background: var(--sunk); border: 1px solid var(--edge); border-radius: var(--r-2);
    outline: none; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .quiz-input::placeholder { color: var(--ink-4); }
  .quiz-input:focus { border-color: var(--arcane); box-shadow: 0 0 0 3px var(--arcane-1); }
  .quiz-input:disabled { opacity: 0.7; }

  /* Conjugation drills — a ladder of exercises over one verb's present tense
     (see CONFIG.conjugation). The lower rungs borrow the sentence-with-a-blank
     look above; the top two are a table the learner writes into, which at the
     hardest rung is six empty lines and nothing else. */

  /* What this question pays, next to the rung that earns it. Reads as a stake,
     not as a button — the same treatment as the banked multiplier chip. */
  .quiz-stake {
    font-size: 11px; font-weight: 700; color: var(--gold-lt); letter-spacing: 0.4px;
    background: var(--gold-1); border: 1px solid var(--gold-2);
    border-radius: var(--r-pill); padding: 2px 8px;
  }

  /* On the single-row rungs the pronoun is part of the line being written, so it
     wears the sentence's own type; in the table it is a column label, so there
     it takes the display face like every other label in the game. */
  .conj-person { color: var(--ink-2); letter-spacing: 0.4px; }
  .conj-row .conj-person { font-family: var(--display-font); letter-spacing: 0.6px; }

  .conj-table {
    display: flex; flex-direction: column; gap: 7px;
    width: 100%; max-width: 380px; margin: 0 auto;
  }
  /* Pronoun · German gloss · the form. The two label columns are fixed so every
     row's answer starts on the same line down the table. */
  .conj-row {
    display: grid; grid-template-columns: 66px 46px 1fr; align-items: center;
    gap: 4px 8px; text-align: left; min-height: 40px;
  }
  .conj-row .conj-person { text-align: right; font-size: 14.5px; word-spacing: -1px; }
  .conj-de { font-size: 10.5px; color: var(--ink-4); letter-spacing: 0.2px; }

  .conj-input {
    font-family: inherit; font-size: 16.5px; width: 100%; padding: 9px 12px;
    color: var(--ink); background: var(--sunk);
    border: 1px solid var(--edge); border-radius: var(--r-1);
    outline: none; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .conj-input::placeholder { color: var(--ink-4); }
  .conj-input:focus { border-color: var(--arcane); box-shadow: 0 0 0 3px var(--arcane-1); }

  .conj-form { font-size: 16.5px; padding: 9px 2px; color: var(--ink); }
  /* A row the exercise handed the learner: present, but visibly not theirs. */
  .conj-form.given { color: var(--ink-4); border-bottom: 1px dashed var(--edge-soft); }
  .conj-form.ok    { color: var(--good-ink); }
  .conj-form.no    { color: var(--bad-ink); text-decoration: line-through; text-decoration-color: var(--bad-2); }
  .conj-form.shown { color: var(--gold-lt); }
  .conj-mark { font-size: 13px; font-weight: 700; text-decoration: none; display: inline-block; }
  /* The form that was wanted, on the line under the one that was written. */
  .conj-fix {
    grid-column: 3; font-size: 15px; color: var(--good-ink); padding-bottom: 4px;
  }
  .conj-fix::before { content: "→ "; color: var(--ink-4); }

  .conj-note { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-4); }

  /* Match-pairs board */
  .match-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    width: 100%; max-width: 420px; margin: 0 auto 10px; padding: 0 2px;
    font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-4);
  }
  .match-count { text-transform: none; letter-spacing: 0.3px; font-size: 12px; color: var(--arcane-dim); }
  .match-cols { display: flex; gap: 10px; justify-content: center; width: 100%; max-width: 420px; margin: 0 auto; }
  .match-col { display: flex; flex-direction: column; gap: 8px; flex: 1 1 0; min-width: 0; }
  .match-tile {
    font-size: 16px; padding: 13px 8px; border-radius: var(--r-1);
    background: var(--raised); border: 1px solid var(--edge); color: var(--ink);
    box-shadow: var(--shadow-1); cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
                opacity 200ms var(--ease), transform var(--dur) var(--ease);
  }
  .match-tile:hover:not(.done) { border-color: var(--arcane-3); }
  .match-tile.sel { border-color: var(--gold); background: var(--gold-1); box-shadow: var(--glow-gold); }
  .match-tile.done { opacity: 0.24; border-color: var(--good); background: none; box-shadow: none; cursor: default; }
  .match-tile.wrong { border-color: var(--bad); background: rgba(229, 84, 95, 0.16); color: var(--bad-ink); }

  /* Build-the-sentence word bank */
  .build-line {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center;
    min-height: 56px; width: 100%; max-width: 440px; margin: 0 auto 16px; padding: 8px;
    border-bottom: 2px solid var(--edge);
  }
  .build-placeholder { color: var(--ink-4); font-size: 14px; }
  .build-bank { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; max-width: 440px; margin: 0 auto; }
  .tile {
    font-size: 16px; padding: 10px 14px; border-radius: var(--r-1);
    background: var(--raised); border: 1px solid var(--edge); color: var(--ink);
    box-shadow: var(--shadow-1); cursor: pointer;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .tile:hover:not(:disabled) { border-color: var(--arcane-3); }
  .tile:active:not(:disabled) { transform: translateY(1px); }
  .tile.built { border-color: var(--gold-3); background: var(--gold-1); }
  .tile.spent { visibility: hidden; } /* keeps the bank from reflowing as tiles are used */

  /* --- Action bar, pinned to the foot of the frame ---
     The primary row is always last, so the button sits in the same place for
     every exercise and before/after checking; the feedback banner grows upward
     into the stage instead of pushing the button down. */
  .quiz-foot {
    flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px;
    padding: 12px 0 14px; border-top: 1px solid var(--edge-soft);
  }
  /* Row one of the bar. The banner and the reveal link are the two things that
     can occupy it, and they share a height so the stage above doesn't jump when
     a question settles. */
  .quiz-feedback, .quiz-reveal { min-height: 44px; }
  .quiz-feedback {
    display: flex; align-items: center; gap: 10px; text-align: left;
    font-size: 14.5px; line-height: 1.4; padding: 10px 13px; border-radius: var(--r-2);
  }
  .fb-mark { flex: 0 0 16px; text-align: center; font-weight: 700; }
  .fb-text { flex: 1 1 auto; min-width: 0; }
  .fb-gain { flex: 0 0 auto; font-weight: 700; white-space: nowrap; }
  .quiz-feedback strong { color: var(--ink); font-weight: 700; }
  .quiz-feedback.good   { background: var(--good-1); border: 1px solid var(--good-2); color: var(--good-ink); }
  .quiz-feedback.bad    { background: var(--bad-1);  border: 1px solid var(--bad-2);  color: var(--bad-ink); }
  .quiz-feedback.reveal { background: var(--gold-1); border: 1px solid var(--gold-2); color: var(--gold-lt); }

  /* Stands in for the primary button on the exercises that settle on tap, so
     the row keeps its height and says what to do. */
  .quiz-cue {
    display: flex; align-items: center; justify-content: center;
    min-height: 51px; margin: 0; font-size: 14px; color: var(--ink-4);
  }
  .quiz-reveal {
    display: flex; align-items: center; justify-content: center;
    width: 100%; padding: 4px 8px;
    background: none; border: none; color: var(--ink-4); cursor: pointer;
    font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px;
    transition: color var(--dur) var(--ease);
  }
  .quiz-reveal:hover { color: var(--ink-2); }

  /* ===========================================================================
     Lernverlauf — one row per word in the pool: how often it has been met, how
     often it went right, and where it went wrong. Fixed header + tab strip with
     the list scrolling underneath, so the filters stay reachable on a phone.
     =========================================================================== */
  .hist-frame { text-align: left; }
  .hist-header { flex: 0 0 auto; }

  .hist-top { display: flex; align-items: center; gap: 10px; }
  .hist-back { font-size: 15px; line-height: 1; padding: 7px 12px; }
  .hist-title {
    flex: 1 1 auto; text-align: center; margin: 0;
    font-family: var(--display-font); font-weight: 400;
    font-size: 20px; letter-spacing: 2.5px; color: var(--ink);
  }
  /* Balances the back button so the title sits in the true centre. */
  .hist-top-pad { flex: 0 0 39px; }

  .hist-summary { display: flex; gap: 8px; margin: 14px 0 12px; }
  .hist-sum {
    flex: 1 1 0; min-width: 0; text-align: center; padding: 9px 6px 8px;
    border-radius: var(--r-2); background: var(--panel); border: 1px solid var(--edge-soft);
  }
  .hist-sum b { display: block; font-size: 20px; font-weight: 700; color: var(--arcane-lt); line-height: 1.15; }
  .hist-sum b.warn { color: var(--gold); }
  .hist-sum b.none { color: var(--ink-4); }
  /* Two lines of room whatever the label, so the three tiles stay level. */
  .hist-sum span { display: block; min-height: 2.5em; margin-top: 3px; font-size: 10.5px; line-height: 1.25; color: var(--ink-4); }
  .hist-sum-bar { height: 3px; border-radius: var(--r-pill); background: var(--edge-soft); overflow: hidden; }
  .hist-sum-fill { height: 100%; background: var(--arcane); border-radius: var(--r-pill); }

  .hist-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .hist-tabs::-webkit-scrollbar { display: none; }
  .hist-tab {
    flex: 0 0 auto; font-size: 13px; padding: 6px 12px; border-radius: var(--r-pill); cursor: pointer;
    background: transparent; border: 1px solid var(--edge-soft); color: var(--ink-3);
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  .hist-tab:hover { color: var(--ink-2); border-color: var(--edge); }
  .hist-tab.active { border-color: var(--arcane-3); color: var(--ink); background: var(--arcane-2); }
  .hist-tab-n { color: var(--ink-4); font-size: 11px; }
  .hist-tab.active .hist-tab-n { color: var(--arcane-dim); }

  .hist-legend {
    display: flex; align-items: center; gap: 6px;
    margin: 10px 0 0; font-size: 11px; color: var(--ink-4);
  }

  .hist-list {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; gap: 7px;
    padding: 12px 0 16px;
    /* Fade the last row out against the nav instead of guillotining it — the
       list then reads as "more below" rather than as a clipping bug. */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
  }
  .hist-empty { text-align: center; margin: 40px auto 0; color: var(--ink-4); }
  .hist-empty-mark { font-size: 30px; color: var(--edge-hi); margin-bottom: 10px; }
  .hist-empty p { margin: 0; font-size: 14px; }

  .hist-row {
    background: var(--panel); border: 1px solid var(--edge-soft);
    border-radius: var(--r-2); padding: 9px 12px 10px;
  }
  /* A word the circle is currently boosting is marked on its leading edge —
     enough to find while scanning, without every such row shouting. */
  .hist-row.boosted { border-color: var(--edge); box-shadow: inset 3px 0 0 var(--gold); }
  .hist-head { display: flex; align-items: baseline; gap: 8px; }
  .hist-it { font-family: var(--display-font); font-size: 17px; color: var(--gold); letter-spacing: 0.5px; }
  .hist-de { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--ink-2); }
  .hist-acc { flex: 0 0 auto; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .hist-acc.good { color: var(--good); }
  .hist-acc.mid  { color: var(--gold); }
  .hist-acc.bad  { color: var(--bad); }
  .hist-acc.none { color: var(--ink-4); }
  .hist-bar { height: 3px; border-radius: var(--r-pill); background: var(--edge-soft); margin: 8px 0 7px; overflow: hidden; }
  .hist-bar-fill { height: 100%; border-radius: var(--r-pill); }
  .hist-bar-fill.good { background: var(--good); }
  .hist-bar-fill.mid  { background: var(--gold); }
  .hist-bar-fill.bad  { background: var(--bad); }
  .hist-detail { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 11.5px; color: var(--ink-4); }
  .hist-stat b { color: var(--ink-2); font-weight: 700; font-variant-numeric: tabular-nums; }
  .hist-stat b.bad { color: #d98a92; }
  .hist-stat.dim { color: var(--ink-4); opacity: 0.8; }
  .hist-badge {
    flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--gold);
    border: 1px solid var(--gold-2); background: var(--gold-1);
    border-radius: var(--r-pill); padding: 1px 7px; line-height: 1.4;
  }

  /* ===========================================================================
     Lecture pages — the half of a lecture that is READ.

     They sit inside the very same .quiz-frame the exercises do, on purpose: a
     page and the drill that follows it are steps of one session, and giving the
     reading its own chrome would make it look like a screen you could leave.
     What does change is the alignment. The exercises are centred, because a
     prompt and four options are a composition; prose is not, and centred body
     text is unreadable past two lines.
     =========================================================================== */
  .lec-page { text-align: left; }
  /* The exercises are held above the true centre by the stage's flex spacers,
     which is right for a prompt and four options and wrong for prose: a page of
     text that starts halfway down the screen has thrown away the half above it.
     A page pins itself to the top and lets the stage scroll. */
  .quiz-body:has(.lec-page)::before { flex: 0 0 0; }
  .quiz-body:has(.lec-page)::after  { flex: 0 0 8px; }
  .quiz-body:has(.lec-page) .quiz-stage { padding-top: 12px; }

  .lec-p {
    margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: var(--ink-2);
  }

  /* An example: the Italian in the vocabulary's own gold, its gloss under it,
     and an optional aside for the reason it is here at all. */
  .lec-ex {
    display: flex; flex-direction: column; gap: 1px;
    margin: 0 0 8px; padding: 8px 12px;
    background: var(--sunk); border-left: 2px solid var(--gold-3);
    border-radius: 0 var(--r-1) var(--r-1) 0;
  }
  .lec-it { font-family: var(--display-font); font-size: 17px; color: var(--gold); }
  .lec-de { font-size: 13px; color: var(--ink-3); }
  .lec-note { font-size: 11.5px; color: var(--ink-4); font-style: italic; margin-top: 2px; }

  /* The wrong form beside the right one. Grammar books all do this, and they do
     it because the mistake is easier to unlearn when you have seen it named. */
  .lec-bad {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin: 0 0 8px; padding: 7px 12px;
    background: var(--bad-1); border: 1px solid var(--bad-2); border-radius: var(--r-1);
    font-family: var(--display-font); font-size: 15px;
  }
  .lec-wrong { color: var(--bad); text-decoration: line-through; text-decoration-thickness: 1.5px; }
  .lec-arrow { color: var(--ink-4); font-size: 13px; }
  .lec-right { color: var(--good); }

  /* The takeaway, boxed so it can be found again by flicking back through. */
  .lec-rule {
    margin: 10px 0 12px; padding: 10px 13px;
    background: var(--arcane-1); border: 1px solid var(--arcane-2);
    border-radius: var(--r-1);
    font-size: 14px; line-height: 1.5; color: var(--arcane-pale);
  }

  .lec-list { margin: 0 0 12px; padding-left: 20px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

  /* A paradigm or a declension. Scrolls inside its own box rather than pushing
     the page sideways — a five-column table and a 320px phone do not otherwise
     agree. */
  .lec-table-wrap { margin: 0 0 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lec-table {
    width: 100%; border-collapse: collapse; font-size: 13.5px;
    background: var(--sunk); border-radius: var(--r-1); overflow: hidden;
  }
  .lec-table th {
    padding: 7px 10px; text-align: left; white-space: nowrap;
    font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
    color: var(--ink-4); background: var(--panel-lo);
    border-bottom: 1px solid var(--edge-soft);
  }
  .lec-table td {
    padding: 7px 10px; white-space: nowrap;
    font-family: var(--display-font); font-size: 15px; color: var(--gold);
    border-bottom: 1px solid var(--edge-soft);
  }
  /* A cell is painted for WHAT IT HOLDS. `.lec-th` is the column that names the
     row — the person, the ending — and is muted because it is scaffolding;
     `.lec-gloss` is a German translation and gets the interface face, brighter
     than a label but plainly not the Italian; anything else is Italian and
     keeps the gold above. Muting by POSITION instead (column one, whatever it
     held) told a learner that `il figlio` was a caption for `la figlia`.
     Both wrap; the Italian columns never do. That is what keeps a three-column
     table on a 360 px screen without a sideways scroll, while a genuinely wide
     one still scrolls rather than squashing the forms. */
  .lec-table td.lec-th {
    font-family: var(--ui-font); font-size: 12.5px; color: var(--ink-3);
    white-space: normal; min-width: 9ch;
  }
  .lec-table td.lec-gloss {
    font-family: var(--ui-font); font-size: 12.5px; color: var(--ink-2);
    white-space: normal;
  }
  .lec-table th:first-child { white-space: normal; }
  .lec-table tr:last-child td { border-bottom: none; }