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

/* --- 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. At 0.5 the correct answer's ink lands
 * at 2.34:1 on its own fill. Post-reveal the strike survives on the button
 * (.mc-choice.is-eliminated) and the dim comes from .is-dimmed, which is a
 * compliant ink pair rather than an opacity. */
.mc-choice-row.is-eliminated { opacity: 0.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);
  padding: 12px;
  cursor: pointer;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: all 0.15s;
  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); }
.mc-choice:disabled { cursor: default; }

/* 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). */
.mc-choice.is-eliminated { cursor: default; }
.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.
 * `:has()` is supported by WKWebView (Safari 15.4+) and every browser this
 * ships to; a browser without it simply keeps the shipped top alignment. */
.mc-choice:has(> .mc-choice-main > .mc-choice-text > .katex:only-child) {
  align-items: center;
}
.mc-choice:has(> .mc-choice-main > .mc-choice-text > .katex:only-child) .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: all 0.15s;
  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); }
.mc-elim.is-on {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}

/* --- 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;
}
.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 rendered stem figure + a plain MC
 * list + every option ≤ 8 characters + at least four of them + a shell at
 * least 360pt wide. A fifth option flows onto a third row on its own.
 * 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. */
.mc-choices.is-compact {
  grid-template-columns: 1fr 1fr;
}
.mc-choices.is-compact .mc-choice {
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  min-height: 44px;
}
.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). */
.mc-choices.is-compact .mc-choice-row { --mc-elim-inset: 12px; }

/* 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. Both two-column layouts get the symmetric 44px box
 * back. */
.mc-choices.has-figs .mc-elim::after,
.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 (matches .pi-why / .pei-why) --------- */
.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));
}
.mc-why-block.is-correct {
  background: var(--accent-sage-tint);
}
/* A MISS gets its own ground (study C2/C7). Before this the panel after a wrong
 * answer was indistinguishable from the panel after a right one — the verdict
 * was carried by the choice fill alone, three scroll-lines up and often already
 * past the fold. */
.mc-why-block.is-wrong {
  background: var(--danger-bg);
}
.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);
}
/* --ink-soft is calibrated on cream and lands at 4.31:1 on the danger fill —
   the tint-safe soft ink (6.35:1) is exactly the case themes.js documents. */
.mc-why-block.is-wrong .mc-why-label,
.mc-why-block.is-wrong .mc-insight {
  color: var(--ink-soft-tint, 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 (miss only) -------------------------------------------
 * "Yanlış" / "Doğru cevap: B" 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 two 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 {
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--ink-10);
  /* 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); }
/* An item with no explanation (every past-paper anchor) makes the verdict the
   panel's only content — then it needs no rule under it. */
.mc-why-verdict:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.mc-why-verdict-word {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  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: 13px;
  line-height: 1;
}
.mc-why-key {
  margin-top: 3px;
  font-family: var(--font-ui, inherit);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.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;
  max-width: 62ch;
  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. */
.mc-why-tldr {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius-inset, 4px);
  background: var(--bg-card, #fff);
  border-left: 3px solid var(--accent-sage);
  font-family: var(--font-serif-body, Georgia, serif);
  font-size: 15px;
  line-height: 1.55;
  max-width: 62ch;
  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(--accent-sage);
}