/* ===========================================================================
 * mc-item.css — canonical visual for McItem.
 * ===========================================================================
 * Single source of truth for .mc-choice / .mc-letter / .mc-elim / .mc-choices
 * / .mc-choice-main / .mc-choice-text / .mc-choice-annotation / .mc-stem
 * / state classes (.is-selected, .is-correct, .is-wrong, .is-eliminated,
 * .is-dimmed, .mc-choice-shake). Replaces the per-surface scoped duplicates
 * that previously lived in subjects/vocab/styles.css (.quiz-screen .mc-*),
 * subjects/math/styles.css (.math-screen .mc-*), and diagnostic-ui.css
 * (.diag-mc-region .mc-*).
 *
 * Surface stylesheets may still override individual properties for
 * surface-specific behavior (e.g. diagnostic uses a different selected-state
 * fill, hides elimination/annotations), but the bulk lives here so all
 * surfaces share the same canonical defaults.
 *
 * Loaded BEFORE surface stylesheets in index.html so per-surface overrides
 * (where they exist) win on specificity.
 *
 * It also holds the SHARED answer row every item component emits — the `.mcq-*`
 * block below. See its own header.
 * ========================================================================= */

/* NO SYSTEM CALLOUT ON A QUESTION (study S-06 / N1-09). A ~1s press on a
 * synonym headword, or on a choice, made iOS select the word and raise
 * "Copy | Look Up | Translate" — which on a VOCABULARY item hands the student
 * the dictionary entry for the word under test without leaving the question,
 * and covers the choice below it while it is up. A phone student also triggers
 * it by accident constantly: a slow scroll that starts on a word does it.
 * The stem and the answer rows are the two places where that is an answer key,
 * and neither is text anyone needs to select. Everything a student might
 * legitimately copy or mark is deliberately NOT in this list: the passage (the
 * highlighter's own selection depends on it), the scratchpad, and the
 * explanation panel after the reveal. */
.mc-stem,
.an-stem,
.pi-stem,
.pei-stem,
.mcq-choice {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* --- Stem (prompt) ------------------------------------------------------ */
/* McItem renders item.stem only when the host passes a non-empty one
 * (diagnostic adaptive runner, verbal practice). Surfaces that show the
 * prompt in their own card/header pass stem='' and render no .mc-stem
 * element — so this spacing applies exactly where a prompt IS shown,
 * giving every McItem prompt the same clear separation from its choices
 * by construction. */
.mc-stem {
  margin-bottom: 14px;
  line-height: 1.45;
}

/* --- Quoted stimulus block --------------------------------------------
 * An indented blockquote for a passage snippet the question asks about
 * (vocab-in-context "As used in the text…", evidence prompts, etc.).
 * Emitted by Markdown `>` lines and by the {type:'quote'} stemBlock; the
 * inner prose is rendered as Markdown blocks, so paragraphs come from the
 * .md-p rule below (a blank line in `value` starts a new paragraph). */
/* FULL INK, NOT ink-soft (study A-26). The quoted block is the SENTENCE UNDER
 * TEST on an editing question — the text the student has to read most closely —
 * and it was rendering one step quieter than the stem above it and the four
 * choices below, so the hierarchy on the page was exactly inverted. The quote
 * BAR is what marks it as quoted; it does not need the ink to say so as well. */
.mc-quote {
  margin: 0 0 14px;
  padding: 4px 0 4px 14px;
  border-left: 3px solid var(--line-strong, var(--line));
  color: var(--ink);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Boxed paragraph stimulus (digital-ELA "read the paragraph in the box") — a full border,
 * distinct from the left-rule mc-quote. */
.mc-boxed {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1.5px solid var(--ink-30);
  border-radius: 6px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* --- Markdown block primitives (global) -------------------------------
 * Emitted by the shared renderer (renderMixed, block mode) for any stem /
 * why / quote / hint / passage shown via SharedMathText with as != "span".
 * Inline marks (**bold**, *italic*, <u>underline</u>) use native
 * <strong>/<em>/<u> and need no classes. Defined here (globally loaded);
 * not mc-specific. First/last-child margin resets keep a single-paragraph
 * stem visually identical to the old bare-text render. */
.md-p { margin: 0 0 0.7em; }
.md-p:first-child { margin-top: 0; }
.md-p:last-child  { margin-bottom: 0; }
/* A math-only paragraph (see renderBlocks in components/math-text.jsx): KaTeX sets an
 * \begin{array} at its natural width and never wraps, so a wide one has to scroll in its
 * own box instead of being clipped by the column. Prose paragraphs never get this. */
.md-mathblock { overflow-x: auto; overflow-y: hidden; max-width: 100%; }
.md-h { font-weight: 700; line-height: 1.3; margin: 0.8em 0 0.35em; }
.md-h:first-child { margin-top: 0; }
.md-h1 { font-size: 1.1em; }
.md-h2 { font-size: 1em; }
.md-h3 { font-size: 0.95em; }
/* A LIST IS READ FROM ITS BULLETS (study TUS-08). The disc is drawn by
   ::marker at the item's start edge and is not affected by `text-align`, so
   inside a CENTRED container — the lecture board — the bullets stayed pinned
   at the left while their text sat in the middle of the stage, up to ~210pt
   away, and a wrapped second line drifted further still. It read as a broken
   list rather than as a list. A list is always left-read; nothing in the app
   wants a centred one, so the rule is declared once here rather than fought
   per surface. */
.md-ul, .md-ol { margin: 0 0 0.7em; padding-left: 1.5em; text-align: left; }
.md-ul:last-child, .md-ol:last-child { margin-bottom: 0; }
.md-ul { list-style: disc; }
.md-ol { list-style: decimal; }
.md-ul > li, .md-ol > li { margin: 0.2em 0; }

/* Sentence-completion blank (P1.11). Authored as a hyphen/underscore run, which
   rendered as raw punctuation of varying length and — worse — could WRAP
   mid-run, so a stem ended a line on "-" and began the next on "-----.". One
   fixed-width rule instead: nowrap by construction (it holds no text), one
   length whatever the author typed, and it reads as "blank" to a screen reader
   (the run itself reads as nothing). */
.md-blank {
  display: inline-block;
  vertical-align: baseline;
  width: 5.5ch;
  height: 0.72em;
  margin: 0 0.12em;
  border-bottom: 1.5px solid var(--ink-30);
}

/* ===========================================================================
 * THE SHARED ANSWER ROW — `.mcq-*` (study S-04, 2026-09-19).
 * ===========================================================================
 * ONE MCQ, ONE ROW, WHICHEVER COMPONENT DREW IT. McItem, AnalogyItem,
 * PassageItem and PassageEditItem each used to carry a private copy of this
 * recipe (.mc-* / .an-* / .pi-* / .pei-*). Four copies drift, and the drift was
 * visible to a student mid-section: the L1-08 type fix reached `.mc-choice`
 * only, so one SSAT Verbal section set questions 1–30 at 16px and 31–60 at 14
 * (13 on a phone for SHSAT Editing B); the paper register in anchor-paper.css
 * scoped every selector to `.mc-*`, so at Verbal Q31 the booklet turned back
 * into an app card — serif to sans, flat print row to raised pill, circled
 * bubble to rounded chip — inside a sealed, timed section.
 *
 * So the recipe lives HERE, once, on class names all four components emit
 * ALONGSIDE their own. The per-component classes stay (surfaces override
 * through them, and they name which renderer drew a row for anyone reading the
 * DOM); what they no longer do is restate the recipe. A register — the paper,
 * the share report, a future one — targets `.mcq-*` and reaches every kind.
 *
 * Declared FIRST in this file so the `.mc-item--learn` and `.has-figs`
 * variants below, and every surface stylesheet loaded after it, still win.
 * ========================================================================= */

/* --- Choice list container --------------------------------------------- */
.mcq-choices {
  display: grid;
  gap: 8px;
}

/* --- Choice row wrapper -------------------------------------------------
 * Positioning context for the eliminate ×, which is a SIBLING of the choice
 * button (a button may not nest inside a button) overlaid on the slot the
 * button reserves for it. Also carries the states that must cover the whole
 * row — the eliminated dim and the shake — so the × moves and fades with its
 * choice exactly as it did when it was nested inside it.
 * `--mcq-elim-inset` = the button's right padding + border width; it tracks
 * every choice padding override through the same cascade the padding
 * itself resolves by. */
.mcq-choice-row {
  position: relative;
  /* Single-item grid so the button still stretches to the row height it used
     to get as a direct grid item of .mc-choices (matters in the two-column
     has-figs layout, where side-by-side choices must stay equal height). */
  display: grid;
  --mcq-elim-inset: 14px;
}
/* PRE-REVEAL only (McItem drops the class at reveal, study E10): a struck
 * choice must stay READABLE once it is graded — the whole lesson of striking
 * the key is seeing it struck AND green. Post-reveal the strike survives on the
 * button (.mc-choice.is-eliminated) and the dim comes from .is-dimmed.
 * D5 — the pre-reveal dim was `opacity: 0.5`, which put the struck choice's ink
 * at 2.98:1 at 14px, in the state the student actually works in. It now uses
 * the same compliant ink pair .is-dimmed does: ink-soft text (5.6:1), receded
 * border, lightened chip. Never `opacity` for de-emphasis. */
/* 2026-09-18 — AND IT HAS TO BE UNMISTAKABLE. On the phone the struck row still
 * read as a live raised card: same cream fill, same shadow, a 1.5px hairline
 * strike and text that barely moved. A student who had struck two choices could
 * not tell at a glance which two. The row now stands DOWN on all three raised
 * channels at once — inset fill, no shadow, receded border — which is the app's
 * own read-only language, plus the ink-soft pair it already used. */
/* 2026-09-21 (study SSAT-22) — "receded border" was `--ink-10`, which is
 * EXACTLY what every un-struck sibling wears, on the same 2px width and the
 * same 16px corners. So the struck row stood down on one channel (the shadow)
 * and then came back up on the other two: a darker fill inside the same drawn
 * frame reads as HEAVIER than its siblings, and the option the student had
 * just ruled out was the most prominent row in the list. It now takes the
 * app's read-only pair whole — inset fill, no shadow, no drawn border,
 * `radiusInset` — which is the same recipe the post-reveal rule further down
 * already gives a struck row, so the mark no longer changes shape at the
 * reveal either. The × beside it is the affordance that says it can be put
 * back; the row itself must not also claim to be live. */
.mcq-choice-row.is-eliminated .mcq-choice {
  color: var(--ink-soft);
  background: var(--bg-inset, var(--ink-5));
  border-color: transparent;
  border-radius: var(--radius-inset, 4px);
  box-shadow: none;
}
.mcq-choice-row.is-eliminated .mcq-letter { background: var(--ink-5); color: var(--ink-soft); }
.mcq-choice-row.mcq-choice-shake { animation: mc-shake 0.35s; }

/* --- Choice row --------------------------------------------------------- */
.mcq-choice {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: start;
  gap: 12px;
  background: var(--surface);
  border: 2px solid var(--ink-10);
  border-radius: var(--radius);
  /* RAISED = TAPPABLE (study P2.2). The row had the fill and the corners but
     not the lift — it was hand-rolling two thirds of window.__raised() and
     declaring `box-shadow: none` for the third. Same triple as every other
     tappable surface in the app, so a choice reads as one. */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 6px 18px rgba(0, 0, 0, 0.045);
  padding: 12px;
  cursor: pointer;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  /* Named, not `all`: `all` also animates layout properties, and a
     hardcoded duration skips the prefers-reduced-motion collapse the
     motion vars carry (study D5). */
  transition: background var(--dur-quick, 120ms) ease, border-color var(--dur-quick, 120ms) ease,
    color var(--dur-quick, 120ms) ease, box-shadow var(--dur-quick, 120ms) ease;
  /* NO font-size here (study L1-08). `font: inherit` two rules up is the whole
     rule: an answer choice is the most-read text in the product and it was
     rendering a step SMALLER than the stem it answers (14 against the 16 the
     item inherits). Inherited rather than pinned so the relationship holds on
     every host — a surface that sets its own reading size (the learn variant
     at 17, the anchor paper's 14.5 print register) moves stem and choices
     together. */
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}
/* Hover is keyed off the ROW, not the button: the eliminate × sits over the
 * button but is no longer inside it, so hovering the × must still light the
 * choice border the way it did when the × was a child. */
.mcq-choice-row:hover .mcq-choice:not(:disabled) { border-color: var(--ink-30); }
/* …and a graded row is not tappable any more, so it must not still look it.
   The fills below carry the verdict; the lift goes. */
.mcq-choice:disabled { cursor: default; box-shadow: none; }
/* READ-ONLY IS A REGISTER, NOT A CURSOR (study S-45). A finished sitting's
   browse renders every choice `disabled`, and a row with nothing to say — not
   the key, not the student's pick — still wore the tappable recipe: card fill
   lighter than the page and 16px corners, with `cursor: default` as the only
   tell, which a phone cannot show. It now takes the app's own read-only pair
   (CLAUDE.md surface language): inset fill, no border, hard corners. Shadow
   was already gone one rule up. Scoped so a verdict always wins — the key, the
   pick and a selected-but-ungraded row keep their fills and their shape — and
   so does the student's own strike, which is a mark they made and keeps the
   eliminated treatment above (PassageEditItem disables a struck choice, so
   without that clause an editing row would be the one row that squared off). */
/* The exclusions ride inside `:where()` so the whole rule still weighs one
   class: a register that owns the row — the sealed paper's print rows, a
   surface stylesheet — keeps overriding it on plain `.anchor-paper .mcq-choice`
   the way it overrides everything else here, instead of having to out-specify
   four negations. */
.mcq-choice:disabled:not(:where(.is-correct, .is-wrong, .is-selected, .is-eliminated)) {
  background: var(--bg-inset, var(--ink-5));
  border-color: transparent;
  border-radius: var(--radius-inset, 4px);
}

/* Pre-reveal selected state — used by surfaces with a Submit step
 * (selecting before commit). auto-reveal surfaces skip this and go
 * straight to is-correct/is-wrong on tap. */
.mcq-choice.is-selected:not(.is-correct):not(.is-wrong) {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.mcq-choice.is-selected:not(.is-correct):not(.is-wrong) .mcq-letter {
  background: var(--accent);
  color: #fff;
}

/* Post-reveal correctness states. */
.mcq-choice.is-correct {
  background: var(--accent-sage-tint);
  border-color: var(--accent-sage);
  color: var(--accent-sage-ink);
}
.mcq-choice.is-correct .mcq-letter { background: var(--accent-sage); color: #fff; }
.mcq-choice.is-wrong {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}
.mcq-choice.is-wrong .mcq-letter { background: var(--danger); color: #fff; }

/* De-emphasis WITHOUT opacity: fading text and background toward each
 * other landed the unselected choices at 3.77:1 at the exact moment the
 * student re-reads them (consultant-3). Mute via an explicit compliant
 * pair instead — ink-soft text (5.6:1), receded border, lightened chip. */
.mcq-choice.is-dimmed { color: var(--ink-soft); border-color: var(--ink-5); }
.mcq-choice.is-dimmed .mcq-letter { background: var(--ink-5); }

/* The eliminated dim lives on .mc-choice-row (it must take the × with it). */
/* Struck, but still tappable: the tap puts the choice back (see pickChoice),
   so the pointer must not say "dead". */
.mcq-choice.is-eliminated { cursor: pointer; }
/* The strike is the MARK, so it is drawn in the row's own ink rather than a
   pale tint two steps below it: 1.5px of --ink-30 over 14px text was a hairline
   a thumb covers. currentColor keeps it honest post-reveal too, where the row
   may be sage or danger and a fixed grey would float over it. */
.mcq-choice.is-eliminated .mcq-choice-text {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
}
/* …AND IT HAS TO REACH A FORMULA (study S-19 / N1-03). `text-decoration` is
   not drawn across an atomic inline-level box, and KaTeX wraps every formula
   in `.katex > .base`, both `display: inline-block` — so on a Quantitative
   item, where eliminating is most of the technique, striking a choice dimmed
   the row and drew no line at all, while the synonym beside it struck cleanly.
   A rule that only reaches prose is worse than none: it teaches the mark and
   then withholds it on half the paper.
   The line is therefore PAINTED rather than decorated on the rows that carry
   math — a 2px band across the text box, in the row's own ink, at the same
   weight the decoration draws — because a background is indifferent to what
   kind of boxes the text is made of. `mcq-choice--math` is stamped from the
   source string (McItem's `mcHasMath`, same delimiter rule as renderMixed), not
   asked in CSS: `:has(.katex)` would answer a different question on a mixed
   choice and needs a browser floor nothing else here needs. Prose-only choices
   keep the real `line-through` above, which follows their wrapping. */
/* …AND IT IS THE WIDTH OF THE FORMULA, NOT OF THE COLUMN (NEW-04).
   `.mcq-choice-text` is `display: block`, so `background-size: 100%` painted
   the band across the whole answer column — measured ~220pt past the end of
   "n + 2" — where the real `line-through` on the prose choice beside it stops
   at the last glyph. Two different marks for one gesture; and on a `\dfrac` a
   full-width rule sitting on the math axis read as a fraction bar stretched
   across the row rather than as a strike at all.
   `max-content` shrink-wraps the box to its own formula (capped at the column,
   so a long mixed choice still wraps), and the symmetric padding / negative
   margin pair lets the band overhang the glyphs by 3px the way a drawn strike
   does. That overhang is also what tells it apart from KaTeX's own fraction
   rule, which ends exactly at the wider of numerator and denominator. */
.mcq-choice--math.is-eliminated .mcq-choice-text {
  text-decoration: none;
  width: max-content;
  max-width: 100%;
  padding-inline: 3px;
  margin-inline: -3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 calc(50% + 1px);
}

/* NEW-05 — A ROW THE STUDENT RULED OUT DOES NOT COME BACK RAISED.
   `.mcq-choice-row.is-eliminated` (above) stands a struck row down while the
   item is live, but McItem DROPS that row class at the reveal and keeps
   `.is-eliminated` on the button — and the disabled read-only rule excludes
   `.is-eliminated` so the student's own mark survives. Between them, after a
   reveal the two rows the student most explicitly dismissed were the only dead
   rows still wearing the tappable recipe (card fill lighter than the page,
   16px corners) while the untouched also-ran went inset: three fills for three
   dead rows, and the most-dismissed looked the most alive.
   A struck row that can no longer be un-struck is read-only, so it takes the
   read-only pair. The strike itself is untouched — it is the mark, and it is
   the whole point of the affordance. A verdict still wins: the key and the
   student's pick keep their semantic fills whether or not they were struck,
   which is exactly the lesson of striking the key and seeing it green.
   Both the condition and the exclusions ride inside `:where()` for the same
   reason the rule above gives: the whole selector still weighs one class, so a
   register that owns the row (the sealed paper's print rows) keeps overriding
   it on plain `.anchor-paper .mcq-choice`. It sits after that rule, so order
   settles the two. */
.mcq-choice:disabled:where(.is-eliminated):not(:where(.is-correct, .is-wrong, .is-selected)) {
  background: var(--bg-inset, var(--ink-5));
  border-color: transparent;
  border-radius: var(--radius-inset, 4px);
  color: var(--ink-soft);
}

/* C22 — a choice whose whole content is ONE math atom (a \dfrac, a radical, a
 * matrix). `align-items: start` plus the line box's strut leaves the atom
 * sitting high in a row that is already much taller than its text siblings, so
 * the letter chip (which centres) reads as misaligned against it. When the main
 * column holds nothing but math: centre every column on one axis and drop the
 * text line box, so the row is exactly the atom's height + padding.
 *
 * The condition is stamped by McItem (`mcIsMathOnly`), not asked in CSS. It
 * used to be `:has(> .mc-choice-main > .mc-choice-text > .katex:only-child)`,
 * which is not the same question: `:only-child` ignores TEXT nodes, so a mixed
 * choice like "a translation $5$ units right" — one katex ELEMENT, prose around
 * it — matched too, and the `display: flex` below dropped its whitespace-only
 * text nodes ("a translation5units right"). */
.mc-choice.mc-choice--math-only {
  align-items: center;
}
.mc-choice.mc-choice--math-only .mc-choice-text {
  display: flex;
  align-items: center;
  /* Floor the row at a text choice's line box so a short atom ("$x$") doesn't
     make a visibly shorter row than its prose siblings. */
  min-height: 1.4em;
}
/* Defensive: nothing in the tree renders a choice through `block` today, but
 * KaTeX's own 1em display margins would double the row height if one did. */
.mcq-choice .katex-display { margin: 0.2em 0; }

/* --- Letter chip -------------------------------------------------------- */
.mcq-letter {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--ink-10);
  color: var(--ink-70);
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
  font-family: var(--font-mono);
  flex-shrink: 0;
}

/* --- Choice text + annotation slot ------------------------------------- */
.mcq-choice-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  text-wrap: pretty;
}
.mcq-choice-text { display: block; }
.mc-choice-annotation {
  font-size: 12px;
  color: var(--ink-70);
  line-height: 1.4;
}
.mc-choice-annotation .opt-src { color: var(--ink-soft); }
.mc-choice-annotation .opt-src em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-70);
}
/* Relation gloss (vocab Synonym/Antonym reveals, P0.2): "<choice> is a synonym
   of <deck word> (pos) — <that word's definition>". Both words are set in the
   display italic so the sentence reads as being ABOUT words, and the
   definition that follows is visibly attached to the second one. */
.mc-choice-annotation .opt-rel em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
}

/* --- Eliminate button ---------------------------------------------------
 * A real <button> (out of the tab order — see McItem.jsx), so it needs the UA
 * appearance/font reset to keep the shipped look. It is a SIBLING of the
 * choice button, absolutely positioned over the .mc-elim-spacer slot the
 * choice reserves for it in its right-edge grid column. */
.mcq-elim {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  line-height: 1;
  align-self: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* A CONTROL, NOT A WATERMARK (2026-09-18). A transparent disc behind a 1px
     --ink-30 ring and a grey glyph disappeared into the choice card on a phone
     screen — the eliminator is the second most-used control on an ISEE/SSAT
     question and nothing said it was there. A faint fill + a 1.5px ring give it
     an edge on the card without spending the accent. */
  background: var(--ink-5);
  border: 1.5px solid var(--ink-30);
  color: var(--ink-soft);
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--dur-quick, 120ms) ease, border-color var(--dur-quick, 120ms) ease,
    color var(--dur-quick, 120ms) ease;
  font-size: 15px;
  font-weight: 700;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* Overlay the slot the choice button reserves for it, landing on the exact
   pixels the old nested grid cell occupied. Also the containing block for the
   ::after hit box below. */
.mcq-choice-row > .mcq-elim {
  position: absolute;
  right: var(--mcq-elim-inset);
  top: 50%;
  transform: translateY(-50%);
}

/* 44px hit box for the eliminator: visual circle stays 28px, the touch
   area grows via an invisible overlay (hit-tests to the owner element).
   THROWN OUTWARD (study E9). The × sits at the row's right edge, so the extra
   area belongs on the OUTSIDE — out past the choice button's own padding,
   where there is nothing else to hit — rather than inward over the choice
   text, which is the row's primary target. `--mcq-elim-inset` is the button's
   own offset from the row edge, so this reaches exactly 2px past it whatever
   the padding override (the has-figs two-column layout runs tighter).
   2026-09-19 (study L2-05) — and ONLY outward. The inward -8px overhang put
   the eliminator on top of the last 50px of a 320px row with nothing to say so,
   which is exactly where a right thumb lands: the student meant to answer and
   struck the choice instead. The strip it owns drops to ~42px of the row, and
   the divider below draws the line it was missing.
   2026-09-19 (verification follow-up) — the offsets resolve against the
   PADDING box, so the 1.5px ring ate 1.5px on every side: -8px/-8px/-2px
   ray-probed 41.5 x 43.0, under the 44 floor on the app's second most-tapped
   control. The extra 2px below buys it back with margin — VERTICALLY and
   OUTWARD only, so the inward overhang L2-05 removed stays removed. Measured
   after: 45 x 44.5. The 8.5px vertical reach still clears the 36px gap between
   one row's × and the next, so it never steals from the row above or below. */
.mcq-elim::after {
  content: '';
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: 0;
  right: calc(-1 * var(--mcq-elim-inset, 14px) - 4px);
}

/* SAY WHERE THE × STARTS (study L2-05). A hairline in the grid gap between the
   text column and the ×'s reserved slot: the eliminator owns the strip to its
   right, and without a divider nothing on the card admits that. Drawn from the
   × itself (it is the positioned element over that slot) and only on text
   choices — in the has-figs layout the × sits over a drawing, where a stray
   vertical rule would read as part of it. */
.mcq-choices:not(.has-figs) .mcq-choice-row > .mcq-elim::before {
  content: '';
  position: absolute;
  left: -8px;
  top: -5px;
  bottom: -5px;
  width: 1px;
  background: var(--ink-10);
  /* Decoration, not target: a pseudo hit-tests to its owner, so without this
     the divider itself eliminates — the one pixel that is supposed to mean
     "the × starts here" would be the × . */
  pointer-events: none;
}

/* The reserved slot itself — the ×'s exact footprint, so row height and the
   text column are unchanged by the un-nesting. */
.mcq-elim-spacer {
  width: 28px;
  height: 28px;
  align-self: center;
  flex-shrink: 0;
}

/* --- Reveal adornment (✓ / ✗) ------------------------------------------
 * The right-edge slot after reveal, filled by the host's renderRightAdornment
 * (the practice runner passes one; see runner.jsx ItemDispatch). Occupies the
 * ×'s exact footprint so the text column does not reflow when the × unmounts,
 * and inherits `currentColor` — the row's own semantic ink (sage on the key,
 * danger on the student's wrong pick), so the glyph can never disagree with
 * the fill it sits on. Rendered EMPTY on unmarked rows to hold the column. */
.mc-verdict-adorn {
  width: 28px;
  height: 28px;
  align-self: center;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  color: currentColor;
}

.mcq-elim:hover { border-color: var(--ink-soft); color: var(--ink); }
/* D6 — the active × used to wear danger/danger-bg: the app's "you got this
 * wrong" pair, at 2.00:1 effective, on the student's OWN working mark. Striking
 * a choice is not a verdict, so it sits on the neutral ink ramp.
 * 2026-09-18 — still the neutral ramp, but FILLED. A struck row is a state the
 * student has to be able to read across four choices at arm's length, and an
 * --ink-10 disc with an --ink glyph was a tint apart from the idle one. Filled
 * ink with the card colour punched through is unambiguous, and it is also what
 * says "tap here to undo". */
.mcq-elim.is-on {
  background: var(--ink-70);
  border-color: var(--ink-70);
  color: var(--card, #fff);
}

/* --- Learn variant (.mc-item--learn) ------------------------------------
 * Opted into per host via McItem's `variant="learn"` prop; used by the
 * Vocabulary Builder's quiz surfaces. The exam-faithful default above is
 * untouched — practice runner and diagnostic never carry this class.
 *
 * The register is the Root Drill's: a lighter, roomier reading button rather
 * than an answer-sheet row. The letter chip, the eliminate × and the ✓/✗
 * adornment are not rendered at all (McItem.jsx), so this file only has to
 * restate the geometry that assumed them — the single choice column — and the
 * quieter frame. Correctness fills, the picked state, the disabled-after-
 * reveal behavior, the shake and the focus ring all inherit unchanged. */
.mc-item--learn .mc-choice {
  grid-template-columns: 1fr;
  gap: 0;
  align-items: center;
  /* Hairline frame, not the 2px exam rule; hit target is held by the padding
     (13 + 13 + ~23 line box ≈ 49px), not by the chip that used to set it.
     WIDTH only — the resting, selected, correct, wrong and dimmed border
     COLORS all keep coming from the shared state rules above (this selector
     ties them on specificity, so setting a colour here would silently win and
     flatten the reveal feedback). */
  border-width: 1px;
  border-radius: 14px;
  padding: 13px 14px;
  /* Reading type: these choices are definitions and sentences, not option
     labels — same serif the reveal card and the Root Drill use. */
  font-family: var(--font-serif-body, Georgia, serif);
  font-size: 17px;
  line-height: 1.35;
}
/* The focus ring's radius tracks the button's (focus-rings.css pins 10px for
   the default choice corners; this variant's are 14). */
.mc-item--learn .mc-choice:focus-visible { border-radius: 14px; }
/* Annotations (option definitions on reveal) sit under the choice text and
   stay UI-sans — they're apparatus, not the answer. */
.mc-item--learn .mc-choice-annotation { font-family: var(--font-ui, inherit); }

/* --- Learn variant: reveal feedback in words + at contrast (P0.7) --------
 * The learn variant renders no ✓/✗ adornment, which left right-vs-wrong
 * carried by fill colour alone. McItem now emits a text verdict label inside
 * the marked rows; this is its eyebrow treatment (same 11px uppercase track as
 * .mc-why-label and the app's other eyebrows).
 *
 * Ink: --accent-sage-ink is now bound to theme.successInk (#3F5732, 6.22:1 on
 * the #DDE6CF success fill) rather than the fill hue theme.success (#5B7A4A,
 * 3.77:1) — see themes.js. This variable stays as the local name the rules
 * below read, with the vocab stylesheet's own static fallback (#3D5630, 6.33:1)
 * behind it for a stylesheet loaded before the theme is applied.
 * The wrong state needs no change: --danger (#A0412E) on --danger-bg
 * (#EED7CF) already measures 4.64:1. */
.mc-item--learn { --mc-correct-ink: var(--accent-sage-ink, #3D5630); }
.mc-item--learn .mc-choice.is-correct { color: var(--mc-correct-ink); }
/* One class, three sentences (R2-9): "You got it" / "Fixed — you missed this
   one earlier" (redo) / "Correct answer" + "Your answer" (miss). The redo line
   is the long one, so the label may take two lines in a narrow column — it
   wraps inside this flex row and the mark stays with it; `text-wrap: pretty`
   keeps the break off a one-word last line. */
.mc-item--learn .mc-choice-verdict {
  display: flex;
  align-items: center;
  gap: 5px;
  text-wrap: pretty;
  margin-bottom: 2px;
  font-family: var(--font-ui, inherit);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}
.mc-item--learn .mc-choice.is-correct .mc-choice-verdict { color: var(--mc-correct-ink); }
.mc-item--learn .mc-choice.is-wrong .mc-choice-verdict { color: var(--danger); }
/* The glyph carries no tracking — the letter-spacing above would push it off
   its label. Slightly larger so ✓/✗ read at the label's optical weight. */
.mc-item--learn .mc-verdict-mark {
  letter-spacing: 0;
  font-size: 13px;
  line-height: 1;
}

/* --- Figure-as-answer-choice ------------------------------------------- *
 * When item.choiceFigures is present each choice renders a MathFigure
 * (e.g. "which net folds into this solid?", "which is the reflected image?").
 * Lay the four choices out as a 2-col grid of figure cards; flatten the inner
 * FigureCard chrome so the choice button is the only frame. */
.mc-choices.has-figs {
  grid-template-columns: 1fr 1fr;
}
/* …unless a choice figure would have to shrink below its native size to fit half the column
 * (McItem measures every choiceFigure through window.__figNatWidth and adds .is-figs-tall).
 * One across, full column, figure at its own size — see the note in McItem.jsx. */
.mc-choices.has-figs.is-figs-tall {
  grid-template-columns: 1fr;
}
.mc-choices.has-figs .mc-choice {
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  padding: 10px;
}
/* Tracks the tighter padding above (10px padding + 2px border). */
.mc-choices.has-figs .mc-choice-row { --mcq-elim-inset: 12px; }
.mc-choice-figure {
  display: flex;
  justify-content: center;
  width: 100%;
}
/* FigureCard uses inline styles (bg/border/padding/margin) — override so the
 * figure sits flush inside the choice button, no nested card. */
.mc-choice-figure > div {
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}
.mc-choice-figure svg {
  max-width: 100%;
  height: auto;
}

/* --- Short answers under a figure: two across (study E14) --------------- *
 * A geometry item's options are "12" "15" "18" "24" — four full-width rows of
 * mostly empty paper that push the figure they refer to off the top of the
 * screen, exactly when the student needs to look at both at once. Two columns
 * halve the list's height so figure and options stay on one screen. McItem
 * decides WHEN (see `compactChoices`): a plain MC list + every option ≤ 8
 * characters + an even count of at least four + a shell at least 360pt wide.
 * WHERE is here, and never the phone: below the tablet breakpoint the single
 * A→E ladder is what the eye scans, and 163pt cells shared with a 28pt
 * eliminator are not an answer row (study B7).
 * Metrics mirror .has-figs — 22px letter chip, 10px padding, 10px gaps — so
 * the text column still holds 8 characters without wrapping at 360pt (~66px
 * of column, against ~58px of text); min-height keeps the 44pt tap target the
 * tighter padding would otherwise lose. */
html[data-surface="tablet"] .mc-choices.is-compact,
html[data-surface="desktop"] .mc-choices.is-compact {
  grid-template-columns: 1fr 1fr;
}
/* An ODD count lets its last row span (study P2.3/A11). The grid was tuned on
 * four-choice content; every YKS and SAT item is five-choice, so E landed
 * alone in the left column with a hole beside it and read as the odd one out
 * — a shape difference where none of the meaning differs. Spanning gives the
 * fifth row the same weight as the two above it. Written as
 * :last-child:nth-child(odd) so it is the COUNT that decides, with no class to
 * pass down and no change for four- or six-choice content. */
.mc-choices.is-compact > .mc-choice-row:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
/* Metrics carry the same surface prefix as the column count above — on the
 * phone the list is a plain full-width ladder and must keep the default
 * padding and letter chip. */
html[data-surface="tablet"] .mc-choices.is-compact .mc-choice,
html[data-surface="desktop"] .mc-choices.is-compact .mc-choice {
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  min-height: 44px;
}
html[data-surface="tablet"] .mc-choices.is-compact .mc-letter,
html[data-surface="desktop"] .mc-choices.is-compact .mc-letter {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: 11px;
}
/* Tracks the tighter padding above (10px padding + 2px border). */
html[data-surface="tablet"] .mc-choices.is-compact .mc-choice-row,
html[data-surface="desktop"] .mc-choices.is-compact .mc-choice-row { --mcq-elim-inset: 12px; }
/* Same booklet-register exception .is-short carries below: a sealed past paper
 * prints one answer per line, so a year test's numeric options must not
 * re-flow into two columns on a wide surface. */
html[data-surface="tablet"] .anchor-paper .mc-choices.is-compact,
html[data-surface="desktop"] .anchor-paper .mc-choices.is-compact {
  grid-template-columns: 1fr;
}

/* --- Short plain-text answers on a wide column: two across --------------- *
 * "assist" / "delay" / "ignore" / "prove" — an ISEE synonym item's four
 * options, each holding a full 700–760px row at tablet/desktop. Two across
 * reads as one block instead of four near-empty cards. McItem decides WHEN
 * (`shortTextChoices`): plain string options, no math, no annotation slot, no
 * figure anywhere, ≤ 16 characters each, at least four of them.
 *
 * WHERE is decided here, and off `data-surface` rather than a media query:
 * surface.js measures `.shell`, which is the only honest width inside the dev
 * device frame and inside a packaged web view. The phone keeps the single
 * stack — half of a 560px column is not a comfortable answer row.
 *
 * Column count is the ONLY thing this changes — metrics, gap and every state
 * fill stay the defaults, the way .has-figs leaves them, so a half-width row
 * looks exactly like a full-width one (and the anchor paper keeps its own 2px
 * print gap). Equal row heights come free: .mc-choices is a grid (rows
 * stretch) and .mc-choice-row is itself a single-cell grid, so the button
 * fills its cell whatever the tallest option in that row does. */
html[data-surface="tablet"] .mc-choices.is-short,
html[data-surface="desktop"] .mc-choices.is-short {
  grid-template-columns: 1fr 1fr;
}
/* The booklet register prints one answer per line — that IS the paper (see
 * anchor-paper.css). Wide surfaces must not re-flow a sealed past paper into
 * two columns; the surface prefix is carried so this outweighs the rule above
 * rather than merely tying it. */
html[data-surface="tablet"] .anchor-paper .mc-choices.is-short,
html[data-surface="desktop"] .anchor-paper .mc-choices.is-short {
  grid-template-columns: 1fr;
}

/* THE OUTBOARD HIT BOX IS SINGLE-COLUMN ONLY. Thrown rightward it reaches out
 * past the choice's own padding — which on a full-width row is page margin
 * with nothing in it, and in a two-column grid is the gutter that belongs to
 * the cell next door. Every two-column layout gets the symmetric 44px box
 * back — .is-short only while it is actually two across.
 * This is the one place the inward overhang L2-05 removed from the full-width
 * row survives, and it has to: 28 + 8 outward is 36, under the floor, and there
 * is no outward room to make it up. The cost is 8px of a half-width cell whose
 * options are ≤16 characters, on tablet/desktop where the pointer is precise. */
.mc-choices.has-figs .mc-elim::after { inset: -8px; }
html[data-surface="tablet"] .mc-choices.is-short .mc-elim::after,
html[data-surface="desktop"] .mc-choices.is-short .mc-elim::after,
html[data-surface="tablet"] .mc-choices.is-compact .mc-elim::after,
html[data-surface="desktop"] .mc-choices.is-compact .mc-elim::after { inset: -8px; }

/* --- Shake keyframes (mc-choice-shake animation target) ---------------- */
@keyframes mc-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

/* --- Inline why panel after reveal ------------------------------------- *
 * EVERY item kind draws this one panel (study A17): flat McItem singles, the
 * passage testlets and the analogy reveal all emit .mc-why-block. */
.mc-why-block {
  margin-top: 14px;
  padding: 14px;
  /* Read-only explanation → inset surface, near-square, no border. */
  border-radius: var(--radius-inset, 4px);
  border: none;
  background: var(--bg-inset, var(--ink-5));
}
/* THE VERDICT WEARS THE SEMANTIC HUE, THE LESSON DOES NOT (study P2.13/P1.21).
 * A miss still gets its own ground (study C2/C7 — before that the panel after a
 * wrong answer was indistinguishable from the panel after a right one), but
 * that ground is now the VERDICT STRIP at the top of the panel, not the whole
 * panel. What follows it — the explanation, the KISACA band, the insight line —
 * is teaching content, and CLAUDE.md reserves the semantic pair for right/wrong
 * feedback alone; painted onto it, the lesson read as part of the punishment.
 * The panel keeps the read-only inset ground every other explanation surface
 * uses; the strip below carries the verdict. */
.mc-why-block.is-correct,
.mc-why-block.is-wrong {
  background: var(--bg-inset, var(--ink-5));
}
/* The strip bleeds to the panel's edges (the panel pads 14px all round) so it
 * reads as a band across the top rather than a chip floating on the inset.
 * `.mc-why-label:first-child` is the legacy right-answer arm, from before a hit
 * earned a verdict head of its own; it is harmless once one is rendered. */
.mc-why-block.is-wrong .mc-why-verdict,
.mc-why-block.is-correct .mc-why-verdict,
.mc-why-block.is-correct > .mc-why-label:first-child {
  margin: -14px -14px 12px;
  padding: 12px 14px 11px;
  border-bottom: none;
  border-radius: var(--radius-inset, 4px) var(--radius-inset, 4px) 0 0;
}
.mc-why-block.is-wrong .mc-why-verdict { background: var(--danger-bg); }
.mc-why-block.is-correct > .mc-why-label:first-child {
  background: var(--accent-sage-tint);
  margin-bottom: 12px;
}
.mc-why-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 5px;
  color: var(--ink-soft);
}
.mc-why-block.is-correct .mc-why-label {
  /* The eyebrow is 11px bold: it needs TEXT contrast, not the fill hue.
     --accent-sage on this fill is 3.77:1; --accent-sage-ink is 6.22:1. */
  color: var(--accent-sage-ink);
}
/* The eyebrow and the insight line now sit on the panel's INSET ground, not on
   the danger fill (study P2.13), so they take the ordinary soft ink again —
   --ink-soft is calibrated on exactly this surface. The tint-safe variant is
   still what the strip needs, and it is applied there. */
.mc-why-block.is-wrong .mc-why-label,
.mc-why-block.is-wrong .mc-insight {
  color: var(--ink-soft);
}
/* The grid-in "Answer:" label (mc-grid.css) is set in the sage FILL hue — the
   same text-vs-fill confusion the correct-choice ink had. It measured 3.77:1
   on the panel's old inset ground and 3.53:1 on the miss ground it now lands
   on; the ink token clears 5.82:1 there. .mc-grid-expected only ever renders
   inside this panel, so scoping the fix here covers every case. */
.mc-why-block .mc-grid-expected b { color: var(--accent-sage-ink); }

/* --- Verdict head (every graded reveal) ---------------------------------
 * "Wrong" + "Correct answer: B", or "You got it", in words, at the top of the
 * panel the reveal scroll lands on, before the explanation's eyebrow. Colour is
 * the SECOND channel here, never the first: the lines say it in words, so a
 * colour-blind reader and a student glancing at a phone in a metro car both
 * get the verdict without decoding a fill. --danger on --danger-bg = 4.64:1.
 * Practice/exam variant only — the learn variant already labels each marked
 * row in place (.mc-choice-verdict). */
.mc-why-verdict {
  /* Bled to the panel's edges: the head is a BAND, so the semantic fill has a
     shape of its own and the explanation under it keeps the inset ground
     (P1.21). Its inset matches .mc-why-block's own padding. */
  margin: -14px -14px 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--ink-10);
  border-radius: var(--radius-inset, 4px) var(--radius-inset, 4px) 0 0;
  /* Neutral by default: an UNANSWERED item revealed in a review screen prints
     the key's letter here with no verdict word, and must not wear the miss
     colour. The danger ink belongs to an actual miss. */
  color: var(--ink);
}
.mc-why-block.is-wrong .mc-why-verdict {
  color: var(--danger);
  background: var(--danger-bg);
  border-bottom-color: var(--danger);
}
/* A right answer earns the same head, in the success family (P1.3/"a right
   answer earns a WORD"). --accent-sage-ink on --accent-sage-tint = 6.22:1. */
.mc-why-block.is-correct .mc-why-verdict {
  color: var(--accent-sage-ink);
  background: var(--accent-sage-tint);
  border-bottom-color: var(--accent-sage);
}
/* An item with no explanation (every past-paper anchor) makes the verdict the
   panel's only content — then the band IS the panel. */
.mc-why-verdict:last-child {
  margin-bottom: -14px;
  border-bottom: none;
  border-radius: var(--radius-inset, 4px);
}
/* …and when it is the only content AND wears the strip, the strip is the whole
   panel: bleed it to every edge instead of leaving a bare inset gutter under
   it. */
.mc-why-block.is-wrong .mc-why-verdict:last-child {
  margin: -14px;
  padding: 12px 14px;
  border-radius: var(--radius-inset, 4px);
}
/* 13.5px, not the 11px eyebrow size it shipped at (study B18): this is the
   single most important string in the reveal and it was set smaller than the
   choice text it explains. */
.mc-why-verdict-word {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  line-height: 1.2;
}
/* The glyph carries no tracking — the letter-spacing above would push it off
   its word. It is decoration: the word beside it is what screen readers read. */
.mc-why-verdict-mark {
  letter-spacing: 0;
  font-size: 15px;
  line-height: 1;
}
/* "Doğru cevap: A" is the identity of the RIGHT answer and was inheriting the
   verdict's --danger from .mc-why-verdict — the right answer printed in the
   wrong-answer hue (study P2.1). The word beside it ("✗ Yanlış") carries the
   verdict and keeps the colour; this line is a fact and takes the ink. */
.mc-why-block.is-wrong .mc-why-key { color: var(--ink); }
.mc-why-key {
  margin-top: 3px;
  font-family: var(--font-ui, inherit);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
/* P2.1 — the key's TEXT after its letter. "Correct answer: A" beside a choice
   list of four single words teaches nothing, and on a long passage choice it is
   a scroll back up. Set lighter than the letter so the letter still leads. */
.mc-why-key-text {
  font-weight: 600;
  font-size: 14px;
}
.mc-why {
  /* Passage-grade reading: the explanation is read at the student's most
     frustrated moment, so it gets the passage serif, a real reading size and
     leading, and a capped measure — not UI-chrome type. */
  font-family: var(--font-serif-body, Georgia, serif);
  font-size: 15px;
  line-height: 1.6;
  /* The MEASURE is the panel's now (app-surface.css --content-measure): 62ch
     of this serif resolved 53px narrower than 62ch of the stem's UI face, and
     two caps on one question is exactly what study P2.8 measured. */
  color: var(--ink);
}

/* Posterior-driven note (slip / edge / hard win) at the foot of the panel.
   The APP's voice, not the content's — UI sans, set off by a hairline. */
.mc-insight {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line, rgba(0, 0, 0, 0.08));
  font-family: var(--font-ui, inherit);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* --- One-line summary band at the head of the why panel ----------------- */
/* Read-only content: no border, no shadow, no chevron. Reads one step
   lighter than the inset panel it sits inside. */
/* CREAM ONLY, AND NO SEMANTIC HUE (study P2.1). The band computed to pure
   #FFFFFF with a success-family green rule down its edge, on a product whose
   two rules here are "cream backdrop everywhere" and "the semantic pair means
   right/wrong and nothing else" — a summary of the explanation is neither a
   verdict nor a page of its own. Inset ground, accent rule (chrome family),
   soft-ink label. */
.mc-why-tldr {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius-inset, 4px);
  background: var(--bg-inset, var(--ink-5));
  border-left: 3px solid var(--accent);
  font-family: var(--font-serif-body, Georgia, serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
.mc-why-tldr-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--ink-soft);
}

/* --- whyBlocks: the explanation as an ordered block stream --------------- */
/* Same read-only inset language as the flat `.mc-why` — the blocks only give
   the note structure, they do not make it tappable. `.mc-why-blocks` carries
   the serif reading treatment from `.mc-why` (both classes are on the wrapper);
   the child text blocks are stem-classed, so they are re-set here to inherit
   it rather than fall back to UI chrome type. */
.mc-why-blocks > * + * { margin-top: 10px; }
.mc-why-blocks .mc-stem {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.mc-why-blocks .mc-why-tldr { margin: 0; }
/* Section label ("Neden diğerleri değil" / "Aklında kalsın") — an eyebrow, in
   UI sans, so the serif body under it reads as the content. */
.mc-why-heading {
  font-family: var(--font-ui, inherit);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 12px;
}
.mc-why-bullets {
  margin: 0;
  padding-left: 20px;
}
.mc-why-bullets > li { margin: 4px 0; }
/* A 4-column table does not fit the readable column at 390px, and the panel
   must never push the page into a horizontal scroll — the figure scrolls in
   its own box instead. */
.mc-why-blocks .mc-figure {
  max-width: 100%;
  overflow-x: auto;
}