/* ===========================================================================
   Multiple-choice practice  (.mcq-list)
   ---------------------------------------------------------------------------
   Page-scoped (loaded only on mcq_index.html). Mirrors grader.css so the MCQ
   surface reads IDENTICALLY to the Topic-Questions exam paper: a serif question
   in the margin-numbered head, a hairline rule, then the choices as the answer
   area — no card box. Dark is the canonical base; light is colour-only overrides
   under html.theme-light. Royal blue is the only accent; teal/green = correct,
   red = wrong (the same --esa-* / global tokens grader.css uses).

   The choices flow down one continuous paper (15-ish per topic, vertical scroll,
   no pager). Tokens here pull from the same global --accent / --text-* values as
   grader.css, so the two pages share one palette with zero drift. The JS contract
   (.mcq-option-btn[data-correct|data-reasoning], .mcq-reasoning, the verdict /
   answer-ref / explanation DOM) is unchanged — this file only restyles it.
   =========================================================================== */

/* ── Tokens — mirror grader.css :root + .qg (dark base) ───────────────────── */
.mcq-list {
  --esa-success:        #34d399;
  --esa-success-bg:     rgba(52, 211, 153, 0.12);
  --esa-success-border: rgba(52, 211, 153, 0.34);
  --mcq-wrong:          var(--danger, #f87171);
  --mcq-wrong-bg:       rgba(248, 113, 113, 0.10);
  --mcq-wrong-border:   rgba(248, 113, 113, 0.32);

  --tq-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --tq-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --tq-ease:     cubic-bezier(0.40, 0, 0.20, 1);
  --tq-dur:      0.26s;
  --tq-dur-fast: 0.14s;

  --mcq-line:         rgba(255, 255, 255, 0.11);
  --mcq-ink:          var(--qc-text-strong, #eef4ff);
  --mcq-ink-2:        var(--qc-text, rgba(232, 238, 255, 0.92));
  --mcq-body:         rgba(214, 223, 242, 0.82);
  --mcq-muted:        var(--text-muted, rgba(220, 226, 245, 0.66));
  --mcq-faint:        var(--text-faint, rgba(220, 226, 245, 0.40));
  --mcq-accent:       var(--accent, #5b8cff);
  --mcq-accent-text:  var(--text-link, #84b6ff);
  --mcq-accent-soft:  var(--accent-soft, rgba(91, 140, 255, 0.16));
  --mcq-accent-border:var(--accent-border, rgba(169, 190, 255, 0.28));
  --mcq-opt-bg:       rgba(255, 255, 255, 0.022);
  --mcq-r-md:         12px;
}

/* ── Light theme — colour-only overrides (mirror grader.css html.theme-light) ─ */
html.theme-light .mcq-list {
  --esa-success:        #047857;
  --esa-success-bg:     #ecfdf5;
  --esa-success-border: rgba(5, 150, 105, 0.28);
  --mcq-wrong:          var(--danger, #d92d20);
  --mcq-wrong-bg:       rgba(217, 45, 32, 0.07);
  --mcq-wrong-border:   rgba(217, 45, 32, 0.26);

  --mcq-line:    rgba(21, 26, 45, 0.10);
  --mcq-ink:     #0f172a;
  --mcq-ink-2:   #1f2940;
  --mcq-body:    #3a455c;
  --mcq-muted:   var(--text-muted);
  --mcq-faint:   var(--text-faint);
  --mcq-opt-bg:  #f7f9fc;
}

/* ══════════════════════════════════════════════════════════════════════════
   Mode toggle — match Topic Questions: a royal-blue active tab (grader.css does
   the exact same normalisation on the TQ surface). Page-scoped; the theme-light
   selector is included so it out-specifies the legacy emerald light rule.
   ══════════════════════════════════════════════════════════════════════════ */
.questions-mode-tab:hover {
  background: var(--accent-soft, rgba(91, 140, 255, 0.10));
  color: var(--text, rgba(245, 248, 255, 0.96));
}
.questions-mode-tab--mcq.is-active,
.questions-mode-tab--mcq.is-active:hover,
html.theme-light .questions-mode-tab--mcq.is-active,
html.theme-light .questions-mode-tab--mcq.is-active:hover {
  color: var(--text-link, #84b6ff);
  background: var(--accent-soft, rgba(91, 140, 255, 0.14));
  border-color: var(--accent-border, rgba(132, 182, 255, 0.40));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 10px rgba(91, 140, 255, 0.12);
}
.questions-mode-tab:focus-visible {
  outline: 2px solid var(--focus-ring, #5b8cff);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   The paper — each question is a borderless exam sheet (overrides the legacy
   .question-card glass shell). One continuous paper: a hairline rule separates
   consecutive questions, 720px column centred like .tq-paper.
   ══════════════════════════════════════════════════════════════════════════ */
.mcq-list {
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 4.5vw, 46px);
}
.mcq-list .question-card[data-mcq] {
  position: relative;
  max-width: 720px;
  width: 100%;
  margin-inline: auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  cursor: default;
  transition: none;
}
.mcq-list .question-card[data-mcq] + .question-card[data-mcq] {
  border-top: 1px solid var(--mcq-line);
  padding-top: clamp(30px, 4.5vw, 46px);
}
/* Neutralise the legacy .question-card glass hover (lift / fill / shadow) — a
   sheet is never an interactive surface. (border-top on siblings out-specifies.) */
.mcq-list .question-card[data-mcq]:hover {
  background: none;
  box-shadow: none;
  transform: none;
}

/* Question line: [no.]  question — the margin number + serif stem of .tq-q-head. */
.mcq-q-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(14px, 2.4vw, 28px);
  align-items: baseline;
}
.mcq-q-no {
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--mcq-faint);
}
.mcq-q-main { min-width: 0; }

/* The question — serif, calm weight (exam-paper signature). div[role=heading]
   escapes .noteviewer-body h2; the resets keep any stray bar / margin leak out. */
.mcq-list .mcq-question {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--tq-serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.7rem);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--mcq-ink);
  text-wrap: pretty;
}
.mcq-list .mcq-question p { margin: 0; font: inherit; letter-spacing: inherit; }
.mcq-list .mcq-question p + p { margin-top: 0.6em; }

/* Rule between the question and the choices. */
.mcq-rule {
  height: 1px;
  margin: clamp(16px, 2.4vw, 24px) 0 clamp(18px, 2.6vw, 26px);
  background: var(--mcq-line);
}

/* ══════════════════════════════════════════════════════════════════════════
   Choices — the answer area. Lettered badge + serif option text on hairline
   rows; on answer, correct → teal/green, the picked-wrong → red, the rest fade.
   ══════════════════════════════════════════════════════════════════════════ */
.mcq-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  counter-reset: mcq-letter;
}
.mcq-option { counter-increment: mcq-letter; }
/* kill the inherited .noteviewer-body ul>li::before en-dash marker */
.mcq-list .mcq-option::before { content: none; }

.mcq-option-btn {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 16px;
  border-radius: var(--mcq-r-md);
  border: 1px solid var(--mcq-line);
  background: var(--mcq-opt-bg);
  color: var(--mcq-ink-2);
  font-family: var(--tq-serif);
  font-size: 1.02rem;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: background var(--tq-dur) var(--tq-ease),
              border-color var(--tq-dur) var(--tq-ease),
              color var(--tq-dur) var(--tq-ease),
              transform var(--tq-dur-fast) var(--tq-ease-out);
}
.mcq-option-btn:hover:not(:disabled) {
  border-color: var(--mcq-accent-border);
  background: var(--mcq-accent-soft);
  color: var(--mcq-ink);
  transform: translateY(-1px);
}
.mcq-option-btn:focus-visible {
  outline: 2px solid var(--focus-ring, #5b8cff);
  outline-offset: 2px;
}
.mcq-option-btn:disabled { cursor: default; }

/* Letter badge (CSS counter, A/B/C…) — sans for clean glyphs, like .tq-kp-status. */
.mcq-opt-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  border: 1px solid var(--mcq-line);
  background: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--mcq-muted);
  font-variant-numeric: tabular-nums;
  transition: background var(--tq-dur) var(--tq-ease),
              border-color var(--tq-dur) var(--tq-ease),
              color var(--tq-dur) var(--tq-ease);
}
.mcq-opt-badge::before { content: counter(mcq-letter, upper-alpha); }
.mcq-option-btn:hover:not(:disabled) .mcq-opt-badge {
  border-color: var(--mcq-accent-border);
  color: var(--mcq-accent-text);
}
.mcq-opt-text { flex: 1; min-width: 0; padding-top: 2px; }

/* ── Answered states ─────────────────────────────────────────────────────── */
.mcq-option-btn.is-correct {
  border-color: var(--esa-success-border);
  background: var(--esa-success-bg);
  color: var(--mcq-ink);
}
.mcq-option-btn.is-correct .mcq-opt-badge {
  border-color: var(--esa-success-border);
  background: var(--esa-success-bg);
  color: var(--esa-success);
}
.mcq-option-btn.is-incorrect {
  border-color: var(--mcq-wrong-border);
  background: var(--mcq-wrong-bg);
  color: var(--mcq-ink);
}
.mcq-option-btn.is-incorrect .mcq-opt-badge {
  border-color: var(--mcq-wrong-border);
  background: var(--mcq-wrong-bg);
  color: var(--mcq-wrong);
}
.mcq-option-btn.is-dimmed { opacity: 0.52; }

/* Whisper-subtle one-shot pop on the revealed correct answer — eye-guidance,
   most valuable when the student was wrong. (Matches the prior MCQ behaviour.) */
@keyframes mcq-correct-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.012); }
  100% { transform: scale(1); }
}
.mcq-list .question-card.is-answered .mcq-option-btn.is-correct {
  animation: mcq-correct-pop 0.34s var(--tq-ease-out) 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   Feedback — revealed under a hairline rule (mirrors .tq-feedback-band): faint
   uppercase labels + serif body, no box. JS animates the max-height reveal.
   ══════════════════════════════════════════════════════════════════════════ */
/* Reveal with transform + opacity only (no layout animation): the panel's space
   appears instantly on the click, the content fades + slides in as a second beat.
   The rule/spacing (margin/padding/border) apply on .is-visible un-transitioned. */
.mcq-reasoning {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(6px);
}
.mcq-reasoning.is-visible {
  margin-top: clamp(18px, 2.4vw, 24px);
  padding-top: clamp(16px, 2vw, 20px);
  border-top: 1px solid var(--mcq-line);
  opacity: 1;
  transform: translateY(0);
}
/* Must beat the global theme-transition clobber (html.theme-* body, 0,1,1);
   delayed so the option colour + pop play first, the panel as a second beat. */
html.theme-light body .mcq-reasoning,
html.theme-dark  body .mcq-reasoning {
  transition: opacity 0.30s ease, transform 0.30s var(--tq-ease);
  transition-delay: 0.16s;
}

/* Verdict — examiner mark: ✓/✕ icon + bold success/wrong text, no tinted bar. */
.mcq-verdict {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.mcq-verdict.is-correct   { color: var(--esa-success); }
.mcq-verdict.is-incorrect { color: var(--mcq-wrong); }
.mcq-verdict-icon { display: inline-flex; align-items: center; flex-shrink: 0; }
.mcq-verdict + * { margin-top: clamp(13px, 1.6vw, 16px); }

/* Correct-answer reference — quiet meta line: faint uppercase label + serif value. */
.mcq-answer-ref {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 10px;
}
.mcq-answer-ref-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mcq-faint);
  white-space: nowrap;
}
.mcq-answer-ref-value {
  font-family: var(--tq-serif);
  font-size: 1rem;
  color: var(--mcq-ink-2);
}
.mcq-answer-ref + * { margin-top: clamp(13px, 1.6vw, 16px); }

/* Explanation blocks — .tq-block-title label + .tq-block-body serif prose. */
.mcq-explanation {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mcq-explanation + .mcq-explanation {
  margin-top: clamp(13px, 1.6vw, 16px);
  padding-top: clamp(13px, 1.6vw, 16px);
  border-top: 1px solid var(--mcq-line);
}
.mcq-explanation-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mcq-faint);
}
.mcq-explanation--correct .mcq-explanation-label { color: var(--esa-success); }
.mcq-explanation-text {
  margin: 0;
  font-family: var(--tq-serif);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--mcq-ink-2);
  text-wrap: pretty;
}

/* ══════════════════════════════════════════════════════════════════════════
   Reduced motion
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .mcq-option-btn,
  .mcq-opt-badge,
  html.theme-light body .mcq-reasoning,
  html.theme-dark  body .mcq-reasoning { transition: none; }
  .mcq-option-btn:hover:not(:disabled) { transform: none; }
  .mcq-list .question-card.is-answered .mcq-option-btn.is-correct { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  .mcq-option-btn { padding: 12px 13px; gap: 11px; }
  .mcq-q-head { column-gap: 12px; }
}