/* ══ THE DAILY LADDER AND THE TRACK ══════════════════════════════════════════
   js/11k-lexicon.js (#screen-daily, #screen-track).

   Numbered 30 after 29-lecture.css and set on the same broadsheet stock: ruled,
   agate mono labels, no cards-as-tiles.

   ONE CARD, ALONE ON THE PAGE. The ladder shows exactly one item at a time and
   nothing else competes with it. A list of twelve words invites scanning, and
   scanning is the opposite of retrieval — the entire mechanism depends on the
   student trying to remember before they see.

   TWO ANSWER MODES. Tiers 1-2 are multiple choice, marked the instant a choice
   is made. Tiers 3-4 are open, and there the answer appears below a rule on the
   second stock so the reveal reads as turning a card over rather than as a
   verdict — nothing is coloured until the student has marked themselves.

   NO COLOUR CARRIES MEANING ALONE. Right and wrong differ in border weight,
   strike-through and a word, not only in ink — the same rule the station board
   follows, and the reason neither uses --bs-camel, which measures 2.13:1 and is
   banned as a text colour by test_palette_contrast.py.

   NOTHING COUNTS DOWN. There is no timer element in this file, deliberately:
   Mark's 2026-08-28 ruling on the dailies extends here. `.lex-rail` reports
   WHERE THE STUDENT IS, filling with what is already behind them; it has no
   end state that arrives on its own and nothing on this surface fills toward a
   deadline. Same distinction `.trk-rail` already draws, same two declarations.

   ── THE EXPLANATION PANEL IS THE SCREEN ─────────────────────────────────────
   Mark, 2026-08-29: every option needs an explanation "so a student
   understands why the others fail". That sentence is the difference between a
   drill and a lesson, and it is what this surface is FOR — the four buttons
   are the question, the four panels under them are the teaching.

   The server hands over one flat string per option, index-aligned, in a fixed
   shape (lexicon_daily.explain_choices):

       ✓ 1st/2nd decl adj, "happy"
       ✗ 1st/2nd decl adj, "false" — same group, near-miss

   Four parts, and until now all four were set as one run of prose, so the
   line's structure was invisible and the tail — the only part that says why a
   wrong answer was TEMPTING — read as trailing punctuation. 11k-lexicon.js
   splits it (`_lexWhy`) and each part gets the register it belongs to:

       the mark    a STAMP, the lecture surface's signature device — solid and
                   inked when the option is right, dashed and grey when it is
                   not, exactly the SHARED/PRIVATE logic of .lec-box-mark;
       the label   agate mono small caps, because the declension group is
                   METADATA about the word, not part of its meaning;
       the gloss   the reading serif, because it is the one part a student is
                   meant to actually read and remember;
       the tail    a dashed bronze stamp reading SAME GROUP · NEAR MISS —
                   marginalia, the same bronze the devotional numerals use.
                   Loud enough that the eye stops on it, quiet enough that it
                   never outranks the option it is attached to.

   And ONE affirmative thing on the card after a pick: the correct option's
   panel is the only one lifted onto a ground with an ink in it. The other
   three are recessed wells on the second stock. A student who guessed wrong
   should be able to find the right answer without reading a word.

   ── SHARED LANGUAGE WITH 29-lecture.css ─────────────────────────────────────
   Same type ladder (agate mono eyebrow · serif display · serif read · sans
   UI), same reading measure (--read-measure, promoted to 01-tokens.css when
   this became the second surface to need it), same lifted-sheet/recessed-well
   split, same 2px bronze focus ring, same `gap`-not-margins card rhythm. No
   second palette is introduced here; every colour below is a token that was
   already in 01-tokens.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* `.gen` is the general tier's daily (#screen-general-daily,
   33-general-daily.css) and is the THIRD surface to need this block. It is
   added to the selector rather than redeclaring the four properties over there
   for the same reason --lex-read is not redeclared as 42rem below: two copies
   of a measure is how two surfaces start drifting, and that screen renders
   .lex-card / .lex-choices / .lex-sat verbatim. */
.bs .lex, .bs .trk, .bs .gen {
  --lex-measure: 760px;
  /* The reading measure, from the root. Not redeclared as 42rem here — that is
     how two surfaces start drifting. */
  --lex-read: var(--read-measure);
  --lex-fs-body: clamp(16px, 0.95rem + 0.2vw, 18px);
  /* ONE rhythm inside a card, set in one place so nothing added later has to
     be told about it. Same argument .lec-card makes. */
  --lex-gap: clamp(16px, 1.2vw + 10px, 24px);
  /* The card's horizontal padding is solved so that its CONTENT is exactly the
     reading measure at full width: 760 - 2×44 = 672 = 42rem. Everything inside
     the card therefore ends on the same right edge — prompt, buttons and
     panels alike — which is the ragged-edge failure --read-measure exists to
     prevent, one level up. */
  --lex-pad-x: clamp(18px, 3vw, 44px);
  max-width: var(--lex-measure);
}

/* ── strand switch ───────────────────────────────────────────────────────── */

.bs .lex-strand-row {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--bs-ink);
  margin-bottom: 20px;
}

.bs .lex-strand {
  font-family: var(--bs-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 8px 16px;
  cursor: pointer;
  margin-bottom: -2px;
}

.bs .lex-strand:hover { color: var(--bs-ink); }
.bs .lex-strand.on {
  color: var(--bs-ink);
  border-bottom-color: var(--bs-ink);
}

/* A Chromebook is a keyboard. Same ring the lecture surface and 02-chrome.css
   use; inset here because the tab's own edge is the 2px masthead rule. */
.bs .lex-strand:focus-visible {
  outline: 2px solid var(--bs-blue);
  outline-offset: -2px;
  color: var(--bs-ink);
}

/* ── the section eyebrow ─────────────────────────────────────────────────── */

/* The agate label that names what the block under it is — "CHOOSE ONE", then
   "WHY EACH ONE" after the pick. Same register as the lecture's YOUR ANSWER /
   THEIR ANSWERS, and the reason the card needs no headings in the reading
   serif competing with the prompt. */
.bs .lex-eyebrow {
  font-family: var(--bs-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
}

/* ── position bar ────────────────────────────────────────────────────────── */

.bs .lex-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.bs .lex-bar-count {
  font-family: var(--bs-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
  font-variant-numeric: tabular-nums;
}

/* A STAMP, not a pill — the lecture surface's device at the lecture surface's
   metrics (.lec-box-mark). Solid and inked, because "new" is a fact about this
   card that the student should catch without reading it. Camel reversed out on
   the ink is the ONE licensed way to set camel as type: 4.76:1 here, 2.13:1
   the other way round. See 01-tokens.css. */
.bs .lex-badge-new {
  font-family: var(--bs-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bs-camel-on-ink);
  background: var(--bs-ink);
  border: 1px solid var(--bs-ink);
  padding: 2px 7px 1px;
}

/* WHERE YOU ARE, not how long you have. The rail carries no target, no colour
   change as it fills and no end state of its own — it is the same two
   declarations as .trk-rail, written together with it so they cannot drift.
   See the header note on the clock. */
.bs .lex-rail, .bs .trk-rail {
  height: 3px;
  background: var(--bs-rule);
}

.bs .lex-fill, .bs .trk-fill { height: 3px; background: var(--bs-ink); }

.bs .lex-rail { margin-bottom: clamp(18px, 2.4vh, 26px); }

/* ── the card ────────────────────────────────────────────────────────────── */

/* THE ONE THING ON THE PAGE, so it is the one thing lifted off the stock: a
   heavy rule and the sheet, the treatment the lecture reserves for the
   devotional slide. Everything secondary on this screen — the settled options,
   the wrong answers' panels, the SAT section — stays on the stock below it.

   Rhythm is `gap`, so the spacing between prompt, choices, panels and hint is
   set once and cannot collapse, double, or drift per item kind. */
.bs .lex-card {
  display: flex;
  flex-direction: column;
  gap: var(--lex-gap);
  border-top: 3px solid var(--bs-ink);
  background: var(--bs-sheet);
  padding: clamp(20px, 2.4vw, 30px) var(--lex-pad-x) clamp(24px, 3vw, 34px);
}

/* The question carries the scale jump — 11px eyebrow, ~28px prompt, ~17px
   options — so nothing else on the card has to shout. */
.bs .lex-prompt {
  font-family: var(--bs-ed);
  font-size: clamp(21px, 1rem + 0.9vw, 28px);
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--bs-ink);
  max-width: var(--lex-read);
  margin: 0;
}

.bs .lex-prompt strong {
  font-weight: 600;
  /* The headword is the thing being recalled; it carries a rule beneath it
     rather than a colour, so it stays legible on both stocks. */
  border-bottom: 2px solid var(--bs-rule);
}

/* Spacing comes from the card's `gap`; a margin here would stack on top of it
   and give the hint a different rhythm from everything above it. */
.bs .lex-hint {
  font-family: var(--bs-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--bs-ink-3);
  max-width: var(--lex-read);
  margin: 0;
}

/* ── idle / done ─────────────────────────────────────────────────────────── */

.bs .lex-idle, .bs .lex-done {
  border-top: 1px solid var(--bs-rule);
  padding-top: 28px;
}

.bs .lex-idle-t, .bs .lex-done-t {
  font-family: var(--bs-ed);
  font-size: 22px;
  color: var(--bs-ink);
  margin-bottom: 8px;
}

.bs .lex-idle-d, .bs .lex-done-d {
  font-family: var(--bs-mono);
  font-size: 12px;
  color: var(--bs-ink-3);
  margin-bottom: 20px;
}

.bs .lex-loading {
  font-family: var(--bs-mono);
  font-size: 12px;
  color: var(--bs-ink-3);
  padding: 24px 0;
}

.bs .lex-fail {
  border-left: 3px solid var(--bs-pen);
  padding: 12px 16px;
  margin: 20px 0;
}

.bs .lex-fail-t {
  font-family: var(--bs-ed);
  font-size: 17px;
  color: var(--bs-ink);
}

.bs .lex-fail-d {
  font-family: var(--bs-mono);
  font-size: 12px;
  color: var(--bs-ink-3);
  margin-top: 4px;
}

/* ── the track ───────────────────────────────────────────────────────────── */

.bs .trk-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.bs .trk-title {
  font-family: var(--bs-ed);
  font-size: 20px;
  color: var(--bs-ink);
}

.bs .trk-pos {
  font-family: var(--bs-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
}

/* A position rail, NOT a countdown: it fills with what has been done and has
   no end state that arrives on its own. Its two paint declarations are shared
   with .lex-rail above; only the spacing under it differs. */
.bs .trk-rail { margin-bottom: 26px; }

.bs .trk-card { border-top: 1px solid var(--bs-rule); padding-top: 22px; }

.bs .trk-step-t {
  font-family: var(--bs-ed);
  font-size: 23px;
  color: var(--bs-ink);
  margin-bottom: 14px;
}

.bs .trk-body-text {
  font-family: var(--bs-ed);
  font-size: 16px;
  line-height: 1.6;
  color: var(--bs-ink-2);
  max-width: 34em;
  margin-bottom: 24px;
}

.bs .trk-ex-label {
  font-family: var(--bs-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
  border-bottom: 1px solid var(--bs-rule);
  padding-bottom: 5px;
  margin-bottom: 14px;
}

.bs .trk-ex { margin-bottom: 16px; }

.bs .trk-ex-q {
  font-family: var(--bs-ed);
  font-size: 18px;
  color: var(--bs-ink);
  margin-bottom: 4px;
}

.bs .trk-ex-a {
  width: 100%;
  max-width: 34em;
  font-family: var(--bs-ed);
  font-size: 16px;
  color: var(--bs-ink);
  background: var(--bs-sheet);
  border: 0;
  border-bottom: 1px solid var(--bs-rule);
  padding: 6px 0;
}

.bs .trk-ex-a:focus { outline: none; border-bottom-color: var(--bs-ink); }

/* …but a keyboard user gets a real ring, not a one-shade border change. */
.bs .trk-ex-a:focus-visible {
  outline: 2px solid var(--bs-blue);
  outline-offset: 2px;
  border-bottom-color: var(--bs-ink);
}

/* Marks carry a border weight as well as an ink, so they survive both a
   colour-blind reader and a greyscale screenshot. */
.bs .trk-ex-a.ok { border-bottom: 2px solid var(--bs-ok); }
.bs .trk-ex-a.no { border-bottom: 2px solid var(--bs-pen); }

.bs .trk-want {
  font-family: var(--bs-mono);
  font-size: 12px;
  color: var(--bs-pen);
  margin-top: 3px;
}

.bs .trk-submit, .bs .trk-next { margin-top: 18px; }

.bs .trk-seeded {
  font-family: var(--bs-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bs-blue);
  margin-top: 12px;
}

/* ── reduced motion ──────────────────────────────────────────────────────── */

/* The option hover/active transitions are the only motion on this surface and
   they come off for anyone who asked for that. The STATES stay: a student who
   cannot see where the keyboard is has a worse problem than one who sees it
   arrive instantly. Same ruling as 29-lecture.css. */
@media (prefers-reduced-motion: reduce) {
  .bs .lex-choice { transition: none; }
}

/* ── narrow ──────────────────────────────────────────────────────────────── */

/* Type is on clamp() now and needs no override here; what is left is the two
   layouts that genuinely change shape on a narrow screen. */
@media (max-width: 640px) {
  .bs .trk-bar { flex-direction: column; gap: 4px; }

  /* The tail is `white-space: nowrap` so it cannot break mid-stamp; on a phone
     it therefore has to drop to its own line rather than push the gloss out of
     the column. */
  .bs .lex-why-tail { display: block; width: max-content; margin: 6px 0 0; }
}

/* ── multiple choice ─────────────────────────────────────────────────────────
   Tiers 1-2 only. Marked the instant a choice is made, because the whole
   argument for MC here is instant feedback — a "check my answer" step would
   give the format's cost without its benefit.

   The verdict is carried by BORDER WEIGHT and a word, not by colour alone: a
   right/wrong pair distinguished only by green and red fails for a
   colour-blind reader and in a greyscale screenshot. */

.bs .lex-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: var(--lex-read);
}

/* Each option and its explanation travel together as one unit, so the
   per-row gap above still separates OPTIONS from each other, not an option
   from its own explanation. Flex column so the choice button still stretches
   full width the way it did as a direct flex child of .lex-choices. */
.bs .lex-choice-row { display: flex; flex-direction: column; }

/* BEFORE A PICK THESE ARE THE ONLY LIVE THING ON THE PAGE, and they have to
   look it at rest, not only on hover: a camel keyline down the left edge marks
   the four rows as the actionable ones without spending an ink on them. Camel
   is decorative here — a rule, never type — which is the only way it is
   allowed to be used (01-tokens.css). */
.bs .lex-choice {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--bs-ed);
  font-size: var(--lex-fs-body);
  line-height: 1.45;
  color: var(--bs-ink);
  background: var(--bs-sheet);
  border: 1px solid var(--bs-rule);
  border-left: 3px solid var(--bs-camel);
  border-radius: 0;
  padding: 12px 16px;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease,
              box-shadow 120ms ease, color 120ms ease;
}

/* Designed states, not the browser's. The inset bar is the same hover
   signature .lec-nbk-row uses, so a row that can be clicked reads the same way
   on both surfaces. */
.bs .lex-choice:hover:not(:disabled) {
  border-color: var(--bs-ink);
  background: var(--bs-stock-2);
  box-shadow: inset 3px 0 0 var(--bs-ink);
}

.bs .lex-choice:active:not(:disabled) {
  background: var(--bs-stock-2);
  box-shadow: inset 6px 0 0 var(--bs-ink);
}

.bs .lex-choice:focus-visible {
  outline: 2px solid var(--bs-blue);
  outline-offset: 2px;
  border-color: var(--bs-ink);
}

.bs .lex-choice:disabled { cursor: default; box-shadow: none; }

/* SETTLED, AND UNMARKED — the two options that were neither picked nor right.
   They go quiet by INK, not by ground: the camel keyline drops to a hairline
   and the text steps to the muted ramp, but the option stays on the sheet.
   Muting it onto the second stock instead was tried in a browser at 1440 and
   merged each button into the explanation panel directly beneath it — one grey
   slab where there had been an option and its reason. Nothing about which rows
   carry a mark changes here; this only stops the unmarked ones from still
   looking clickable. */
.bs .lex-choice:disabled:not(.right):not(.wrong) {
  border-color: var(--bs-rule);
  color: var(--bs-ink-3);
}

/* The chosen-and-correct, or the correct one after a miss. */
.bs .lex-choice.right {
  border: 2px solid var(--bs-ok);
  border-left-width: 3px;
  background: var(--green-bg);
  color: var(--bs-ok);
  font-weight: 600;
}

/* Only ever the option the student actually picked. */
.bs .lex-choice.wrong {
  border: 2px solid var(--bs-pen);
  border-left-width: 3px;
  color: var(--bs-pen);
  text-decoration: line-through;
}

/* ── THE EXPLANATION PANEL ───────────────────────────────────────────────────
   The lesson, not a footnote. See the header note for what each part is and
   why it is set the way it is. */

.bs .lex-why {
  display: flex;
  align-items: baseline;
  gap: 10px;
  max-width: var(--lex-read);
  background: var(--bs-stock-2);
  border-left: 2px solid var(--bs-rule);
  padding: 9px 14px 10px 12px;
  margin: 5px 0 3px;
}

/* THE ONLY AFFIRMATIVE THING ON THE CARD AFTER A PICK. The three wrong panels
   are recessed wells on the second stock; this one is the only panel with an
   ink in its ground, so a student who guessed wrong finds the right answer
   before they have read anything. */
.bs .lex-why.is-right {
  background: var(--green-bg);
  border-left: 3px solid var(--bs-ok);
  padding-left: 11px;
}

/* THE STAMP — .lec-box-mark's device and .lec-box-mark's metrics. Solid and
   inked when the option is right, dashed and grey when it is not: the same
   two-state logic the lecture's SHARED / PRIVATE pair uses, at a size you take
   in without reading. Sheet on --bs-ok measures 6.26:1. */
.bs .lex-why-mark {
  flex: 0 0 auto;
  font-family: var(--bs-mono);
  font-size: 11px;
  line-height: 1;
  padding: 4px 6px 3px;
  border: 1px dashed var(--bs-graphite);
  color: var(--bs-ink-3);
  background: none;
}

.bs .lex-why-mark.is-right {
  border: 1px solid var(--bs-ok);
  background: var(--bs-ok);
  color: var(--bs-sheet);
}

.bs .lex-why-body {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--bs-ed);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--bs-ink-2);
}

.bs .lex-why.is-right .lex-why-body { color: var(--bs-ink); }

/* METADATA ABOUT THE WORD, not part of its meaning — so it takes the agate
   mono the whole app uses for labels and never the reading serif. Set before
   the gloss because "which group is this in" is the question a near-miss is
   about, and small caps let it sit on the same line without competing. */
.bs .lex-why-label {
  font-family: var(--bs-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
  margin-right: 9px;
  white-space: nowrap;
}

.bs .lex-why.is-right .lex-why-gloss { font-weight: 600; color: var(--bs-ink); }

/* THE TAIL IS THE PEDAGOGY. "— same group, near-miss" is the only part of the
   line that says why a WRONG answer was tempting, and set as prose it read as
   trailing punctuation. As a dashed bronze stamp it is marginalia — the same
   bronze the devotional numerals use, the same dashed edge as the mark that is
   not affirmative — so the eye stops on it without it outranking the option it
   is attached to. --gold-dim rather than --bs-blue: 5.37:1 on the second stock
   against the accent's 4.50, and this is 9.5px type. Camel-deep is the BORDER
   only; it is banned as a text colour (test_palette_contrast.py). */
.bs .lex-why-tail {
  display: inline-block;
  margin-left: 10px;
  font-family: var(--bs-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-dim);
  border: 1px dashed var(--bs-camel-deep);
  padding: 2px 7px 1px;
  white-space: nowrap;
}

/* The closing line under the four rows. It says what happened; the panels say
   why, so it is agate and not a headline. */
.bs .lex-verdict {
  font-family: var(--bs-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-top: 1px solid var(--bs-rule);
  padding-top: 12px;
  margin-top: 6px;
}

.bs .lex-verdict.ok { color: var(--bs-ok); }
.bs .lex-verdict.no { color: var(--bs-pen); }

/* The app's primary is `width: 100%` (10-bs-ballot.css) because on a ballot it
   IS the page's one commit control. Here it follows four explanation panels
   inside a card, and full-bleed it read as a bronze bar closing the lesson
   off. Same box — same 16px rows, same 18px instrumentation face, same
   letterpress offset — sized to its own label, which is the concession
   .ltt-nav already makes on the lecture surface. */
.bs .lex-next {
  width: auto;
  min-width: 200px;
  padding-left: 26px;
  padding-right: 26px;
  margin-top: 4px;
  align-self: flex-start;
}

.bs .lex-next:focus-visible {
  outline: 2px solid var(--bs-blue);
  outline-offset: 3px;
}

/* A quoted argument or passage inside a prompt. Set as a block on the second
   stock so it reads as something being EXAMINED rather than as the question —
   the student has to be able to tell the instruction from the specimen. */
.bs .lex-quote {
  display: block;
  max-width: var(--lex-read);
  margin-top: 14px;
  padding: 12px 16px;
  border-left: 3px solid var(--bs-rule);
  background: var(--bs-stock-2);
  /* Relative to the prompt it sits inside, so the specimen steps DOWN from the
     instruction at every width rather than at one. */
  font-size: .72em;
  line-height: 1.55;
  color: var(--bs-ink-2);
}

/* ── the SAT section ─────────────────────────────────────────────────────────
   A DIFFERENT KIND OF THING, and it has to look like one. These are real
   released College Board items served on top of the day's quota — no lexicon
   item, no spacing, no ladder — and, by design, NO PER-OPTION EXPLANATIONS,
   because nothing here fabricates a reason the Board did not write.

   So the section states that in a lede rather than leaving a student to read
   the absence as a bug, and it stays DOWN on the stock: the spaced review
   above is the lifted sheet, this is a recessed appendix under a heavy rule.
   Nothing below restructures it — it renders itself (see _lexRenderSat). */

.bs .lex-sat {
  margin-top: clamp(34px, 5vh, 52px);
  border-top: 2px solid var(--bs-ink);
  padding-top: 14px;
}

.bs .lex-sat-t {
  font-family: var(--bs-ed);
  font-size: clamp(20px, .9rem + .7vw, 25px);
  line-height: 1.15;
  color: var(--bs-ink);
  margin: 4px 0 0;
}

.bs .lex-sat-lede {
  max-width: var(--lex-read);
  font-size: 14px;
  line-height: 1.55;
  color: var(--bs-ink-3);
  margin: 7px 0 0;
}

/* On the stock, under a hairline — the .lex-card treatment inverted, which is
   what makes the review above read as the main event. */
.bs .lex-sat .lex-card {
  background: none;
  border-top: 1px solid var(--bs-rule);
  padding: 16px 0 0;
  margin-top: clamp(20px, 3vh, 30px);
  gap: 14px;
}

/* An SAT stem is a paragraph to be read, not a four-word Latin prompt, so it
   sits a full register below the daily's question and takes the reading
   leading rather than the display leading. */
.bs .lex-sat .lex-prompt {
  font-size: clamp(16px, .9rem + .25vw, 18px);
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--bs-ink-2);
}

.bs .lex-sat .lex-choice {
  font-size: 15.5px;
  border-left-color: var(--bs-rule);
}

.bs .lex-sat .lex-choice:hover:not(:disabled) { border-color: var(--bs-ink); }

/* No panels follow these rows, so the verdict is the whole feedback and does
   not need a rule separating it from an explanation that is not there. */
.bs .lex-sat .lex-verdict { border-top: none; padding-top: 0; margin-top: 2px; }

/* The lesson's new word — the one thing a student must not be able to miss, so
   it is the largest type on the step and sits above the explanation. */
.bs .trk-word {
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-top: 1px solid var(--bs-rule);
  border-bottom: 1px solid var(--bs-rule);
  padding: 14px 0;
  margin-bottom: 20px;
}

.bs .trk-word-l {
  font-family: var(--bs-ed);
  font-size: 30px;
  color: var(--bs-ink);
}

.bs .trk-word-m {
  font-family: var(--bs-mono);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
}

@media (max-width: 640px) {
  .bs .trk-word { flex-direction: column; gap: 4px; }
  .bs .trk-word-l { font-size: 25px; }
}

/* A LaTeX itemize block converted to a real list by substituteProseTex
   (03-api.js). The Digital SAT "student notes" items ARE a bulleted list —
   four short research notes the question asks the student to synthesise — so
   they need to read as one, tight enough that four notes plus a stem still sit
   on a phone without scrolling. */
.lex-prompt .tex-list {
  margin: 0.6em 0 0;
  padding-left: 1.25em;
  list-style: disc;
}
.lex-prompt .tex-list li {
  margin: 0.3em 0;
  padding-left: 0.15em;
}
.lex-prompt .tex-list li::marker { color: var(--lex-accent, currentColor); opacity: 0.55; }

/* ── THE LESSON, BEFORE THE QUESTION ─────────────────────────────────────────
   Mark, 2026-09-02: "they cannot just be tested on something they have not seen
   correct??" A first meeting now opens on this card and the question does not
   exist on the page until it is dismissed — see 11k-lexicon.js on why it is not
   simply stacked above the options.

   It reads as a PAGE OF A BOOK rather than as a form: the headword in the
   editorial serif at display size, the meaning as running prose, and the detail
   as a definition list. The register is the difference between "here is
   something to learn" and "here is a field to fill in". */
.bs .lex-teach { display: flex; flex-direction: column; }

.bs .lex-teach-t {
  font-family: var(--bs-ed);
  font-size: clamp(28px, 1.4rem + 1.6vw, 42px);
  font-weight: 600;
  line-height: 1.05;
  color: var(--bs-ink);
  margin: 6px 0 0;
  text-wrap: balance;
}

/* The meaning is the one sentence that must land, so it is set as reading prose
   at a size above the body rather than as a caption under the headword. */
.bs .lex-teach-m {
  max-width: var(--lex-read);
  font-family: var(--bs-ed);
  font-size: clamp(17px, .95rem + .4vw, 20px);
  line-height: 1.5;
  color: var(--bs-ink-2);
  margin: 12px 0 0;
}

.bs .lex-teach-rows {
  margin: clamp(18px, 2.4vh, 26px) 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--bs-rule);
  display: grid;
  /* Label column sized to the longest label ("When it is not a fallacy") and
     then held: a two-column definition list whose gutter moves per row reads as
     two unrelated stacks. */
  grid-template-columns: minmax(0, 13em) minmax(0, 1fr);
  column-gap: clamp(14px, 2vw, 28px);
  row-gap: 12px;
  align-items: baseline;
}
@media (max-width: 620px) {
  .bs .lex-teach-rows { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .bs .lex-teach-v { margin-bottom: 10px; }
}

.bs .lex-teach-k {
  font-family: var(--bs-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
}

.bs .lex-teach-v {
  margin: 0;
  max-width: var(--lex-read);
  font-size: 15px;
  line-height: 1.55;
  color: var(--bs-ink);
  /* `logical_form` is two lines — "A lot of people believe X. / Therefore, X
     must be true." — and that line break IS the teaching. Preserve it without
     turning the prose rows into a monospace block. */
  white-space: pre-line;
}

.bs .lex-teach-go {
  width: auto;
  align-self: flex-start;
  margin-top: clamp(20px, 3vh, 30px);
  padding: 12px 28px;
}