/* ===========================================================================
 * 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.
 * ========================================================================= */

/* --- 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). */
.mc-quote {
  margin: 0 0 14px;
  padding: 4px 0 4px 14px;
  border-left: 3px solid var(--line-strong, var(--line));
  color: var(--ink-soft);
  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; }
.md-ul, .md-ol { margin: 0 0 0.7em; padding-left: 1.5em; }
.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);
}

/* --- Choice list container --------------------------------------------- */
.mc-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.
 * `--mc-elim-inset` = the button's right padding + border width; it tracks
 * every .mc-choice padding override through the same cascade the padding
 * itself resolves by. */
.mc-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;
  --mc-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. */
.mc-choice-row.is-eliminated .mc-choice {
  color: var(--ink-soft);
  border-color: var(--ink-5);
}
.mc-choice-row.is-eliminated .mc-letter { background: var(--ink-5); }
.mc-choice-row.mc-choice-shake { animation: mc-shake 0.35s; }

/* --- Choice row --------------------------------------------------------- */
.mc-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;
  font-size: 14px;
  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. */
.mc-choice-row:hover .mc-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. */
.mc-choice:disabled { cursor: default; box-shadow: none; }

/* 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. */
.mc-choice.is-selected:not(.is-correct):not(.is-wrong) {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.mc-choice.is-selected:not(.is-correct):not(.is-wrong) .mc-letter {
  background: var(--accent);
  color: #fff;
}

/* Post-reveal correctness states. */
.mc-choice.is-correct {
  background: var(--accent-sage-tint);
  border-color: var(--accent-sage);
  color: var(--accent-sage-ink);
}
.mc-choice.is-correct .mc-letter { background: var(--accent-sage); color: #fff; }
.mc-choice.is-wrong {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}
.mc-choice.is-wrong .mc-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. */
.mc-choice.is-dimmed { color: var(--ink-soft); border-color: var(--ink-5); }
.mc-choice.is-dimmed .mc-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". */
.mc-choice.is-eliminated { cursor: pointer; }
.mc-choice.is-eliminated .mc-choice-text {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--ink-30);
}

/* 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. */
.mc-choice .katex-display { margin: 0.2em 0; }

/* --- Letter chip -------------------------------------------------------- */
.mc-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 ------------------------------------- */
.mc-choice-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  text-wrap: pretty;
}
.mc-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. */
.mc-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;
  background: transparent;
  border: 1px 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. */
.mc-choice-row > .mc-elim {
  position: absolute;
  right: var(--mc-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. `--mc-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).
   Height stays 44 (28 + 8 + 8): the choice rows are ≥48px tall and 8px apart,
   so it never reaches the row above or below. */
.mc-elim::after {
  content: '';
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: -8px;
  right: calc(-1 * var(--mc-elim-inset, 14px) - 2px);
}

/* The reserved slot itself — the ×'s exact footprint, so row height and the
   text column are unchanged by the un-nesting. */
.mc-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;
}

.mc-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. */
.mc-elim.is-on {
  background: var(--ink-10);
  border-color: var(--ink-soft);
  color: var(--ink);
}

/* --- 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 { --mc-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 { --mc-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. */
.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;
}