/* ============================================================
   THE ANNOTATED NOTEBOOK — Multiple-Choice study surface
   (Phase 3 Wave 1, Task 5).

   Page-scoped: it legitimately styles the FROZEN mcq.js /
   tab-indicator.js DOM classes (question-card, mcq-*,
   .questions-mode-tab*, .qmt-indicator, .esa-dots …) — restyle,
   never rename. nb pages load ONLY the nb layers (no mcq.css /
   tab-indicator.css / lazy-loading.css / noteviewer.css), so
   every rule those legacy sheets owned is reproduced here in ink:
   the segmented-control base skin + indicator, the loading dots,
   the whole exam-paper card + option grammar.

   The lazily-injected /page/ fragments carry the SAME
   question-card / mcq-* classes as the first window (they are
   rendered from the same _mcq_card.html), so styling these
   classes reaches offset>0 cards identically.

   Discipline (test-enforced by pages/tests_notebook.py):
   · zero raw colors — every color enters as var(--nb-*)/color-mix.
   (NOT on the nb-prefix ratchet: a page layer may style frozen
    foreign classes.)

   Design voice (DESIGN.md three-ink rule + the SEMANTIC callout
   admonition palette, §2):
   · Student BLUE = interaction at rest (option hover/focus, the
     sliding tab indicator, links).
   · The verdict is a judgment moment, so it reads in the CALLOUT
     colours — a documented relaxation of the three-ink rule that
     applies to callouts ONLY: --nb-adm-tip (green) = correct,
     --nb-adm-warn (red) = incorrect, exactly the notebook's
     exam-tip / misconception hues. Never candy — these two hues
     mean "right" and "wrong" and nothing else here.

   Contents
     1 · Column
     2 · Content-type switcher (mode tabs + indicator)
     3 · MCQ list + question paper card
     4 · Question head (number margin + sans question, matches Topic Questions)
     5 · Options (selectable rows, A/B/C badge counter)
     6 · Answered states (correct green / incorrect red / dimmed)
     7 · Feedback (verdict / answer ref / explanations)
     8 · Loading dots (.esa-dots) + empty state + prev/next
     9 · Mobile
    10 · Reduced motion
   ============================================================ */

/* ---------- 1 · Column --------------------------------------- */
/* The MCQ sheet keeps a comfortable exam measure. */
.nb-mcq-column {
  max-width: 760px;
}
/* Wide desktops: center the sheet in the track beside the docked rail — the
   notes column's left bias is for prose, not a question sheet (item-5 sizing
   pass, 2026-07-03). */
@media (min-width: 1440px) {
  .nb-mcq-column {
    margin-inline: auto;
  }
}

.nb-mcq-agg {
  display: inline-block;
  margin-left: var(--nb-s2);
  padding: var(--nb-s1) var(--nb-s3);
  vertical-align: middle;
  background: var(--nb-paper-sunken);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-pill);
  font: var(--nb-type-label);
  letter-spacing: 0.02em;
  color: var(--nb-ink-2);
}

.nb-notes-header .nb-mcq-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nb-s3);
  margin-top: var(--nb-s5);
}
.nb-mcq-back {
  padding-left: var(--nb-s2);
  padding-right: var(--nb-s2);
}
.nb-mcq-whole {
  margin-left: auto; /* flush right */
}

.nb-mcq-body {
  margin-top: var(--nb-s6);
}

/* ---------- 2 · Content-type switcher ------------------------- */
/* nb pages don't load noteviewer.css (base skin) or tab-indicator.css
   (indicator), so BOTH are reproduced here — mirror of the grader's switcher
   so MCQ and Topic Questions share one control that never visually drifts.
   A segmented control seated in a sunken paper well; the active tab reads
   through the sliding pen wash the indicator paints (tab-indicator.js injects
   .qmt-indicator as first child). */
.questions-mode-tabs {
  position: relative;
  display: inline-flex;
  gap: var(--nb-s1);
  margin: 0 0 var(--nb-s6);
  padding: var(--nb-s1);
  background: var(--nb-paper-sunken);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-md);
}
.questions-mode-tab {
  position: relative;
  z-index: 1;
  padding: var(--nb-s2) var(--nb-s4);
  border-radius: var(--nb-r-sm);
  font: var(--nb-type-control);
  text-decoration: none;
  white-space: nowrap;
  color: var(--nb-ink-2);
  transition:
    color var(--nb-dur-1) var(--nb-ease),
    background-color var(--nb-dur-1) var(--nb-ease);
}
.questions-mode-tab:hover {
  color: var(--nb-ink);
}
.questions-mode-tab.is-active {
  background: var(--nb-selection-wash);
  box-shadow: inset 0 -2px 0 var(--nb-selection-soft-border);
  color: var(--nb-selection-soft-ink);
}
.questions-mode-tab:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 2px;
}
/* The sliding indicator (tab-indicator.js writes left/width) carries the
   persistent selection; hover and focus remain interaction blue. */
.qmt-indicator {
  position: absolute;
  top: var(--nb-s1);
  bottom: var(--nb-s1);
  left: 0;
  width: 0;
  border-radius: var(--nb-r-sm);
  background: var(--nb-selection-wash);
  border: 1px solid var(--nb-selection-soft-border);
  box-shadow: inset 0 -3px 0 var(--nb-selection-marker);
  pointer-events: none;
  z-index: 0;
  will-change: left, width; /* hint for the one-shot entrance glide */
}
/* When the indicator is wired, the active tab shows through it (no double fill). */
.questions-mode-tabs.has-indicator .questions-mode-tab.is-active {
  background: transparent;
  box-shadow: none;
}

/* Tactile press — CSS-only, matching the legacy behaviour (transform-only). */
@media (prefers-reduced-motion: no-preference) {
  .questions-mode-tab {
    transition:
      color var(--nb-dur-1) var(--nb-ease),
      background-color var(--nb-dur-1) var(--nb-ease),
      transform var(--nb-dur-1) var(--nb-ease);
  }
  .questions-mode-tab:active {
    transform: scale(0.97);
  }
}

/* ---------- 3 · MCQ list + question paper card --------------- */
/* The list stacks its question cards; the loader + sentinel are pinned last
   (mcq.js inserts new cards before them). */
.mcq-list {
  display: flex;
  flex-direction: column;
  gap: var(--nb-s7);
}

/* Each question is a raised paper leaf — the exam sheet in the notebook's
   hand. The frozen .question-card wrapper is the state root mcq.js flips. */
.question-card {
  position: relative;
  padding: var(--nb-s6) var(--nb-s6) var(--nb-s5);
  background: var(--nb-paper-raised);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-lg);
  box-shadow: var(--nb-shadow-1);
}

/* ---------- 4 · Question head -------------------------------- */
/* Number in the margin (quiet, tabular), sans question set beside it. */
.mcq-q-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--nb-s4);
}
.mcq-q-no {
  font: var(--nb-type-label);
  letter-spacing: 0.02em;
  color: var(--nb-ink-2);
  white-space: nowrap;
}
.mcq-q-main {
  min-width: 0;
}
/* .mcq-question is a div[role=heading] (escapes .noteviewer-body h2). The
   question body is the UI/body voice, so it takes --nb-sans (IBM Plex Sans) —
   NOT the examiner serif. This MUST match .tq-question in notebook-grader.css
   exactly (same size/weight/line-height/tracking): the questions switcher
   toggles Topic Questions <-> Multiple Choice on the same chapter, so the
   question text has to read identically across both. DESIGN.md: "IBM Plex Sans
   for UI/body; Vollkorn for the examiner and editorial accents only." */
.mcq-question {
  font-family: var(--nb-sans);
  font-size: var(--nb-text-md);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--nb-ink);
}
.mcq-question > :first-child { margin-top: 0; }
.mcq-question > :last-child  { margin-bottom: 0; }
.mcq-question p {
  margin: 0 0 var(--nb-s3);
}
.mcq-question p:last-child { margin-bottom: 0; }

/* The rule under the question — the notebook's margin hairline. */
.mcq-rule {
  height: 1px;
  margin: var(--nb-s4) 0 var(--nb-s5);
  background: var(--nb-border);
}

/* ---------- 5 · Options -------------------------------------- */
/* Selectable rows. The A/B/C badge is a CSS counter (mcq.js derives its
   feedback letters from the SAME rendered order — never reorder in template). */
.mcq-options {
  counter-reset: mcq-letter;
  display: flex;
  flex-direction: column;
  gap: var(--nb-s3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mcq-option {
  margin: 0;
  padding: 0;
}
.mcq-option-btn {
  counter-increment: mcq-letter;
  display: flex;
  align-items: flex-start;
  gap: var(--nb-s3);
  width: 100%;
  padding: var(--nb-s3) var(--nb-s4);
  background: var(--nb-paper);
  border: 1px solid var(--nb-control-border);
  border-radius: var(--nb-r-md);
  font: var(--nb-type-prose);
  text-align: left;
  color: var(--nb-ink);
  cursor: pointer;
  transition:
    border-color var(--nb-dur-1) var(--nb-ease),
    background-color var(--nb-dur-1) var(--nb-ease),
    transform var(--nb-dur-1) var(--nb-ease);
}
.mcq-option-btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--nb-blue) 42%, var(--nb-border));
  background: var(--nb-blue-wash);
}
html.theme-light .mcq-option-btn:hover:not(:disabled) {
  border-color: var(--nb-control-border);
}
.mcq-option-btn:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .mcq-option-btn:active:not(:disabled) {
    transform: translateY(1px);
  }
}

/* The letter chip. ::before renders counter(mcq-letter) = A/B/C. */
.mcq-opt-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nb-s6);
  height: var(--nb-s6);
  border: 1px solid var(--nb-border-strong);
  border-radius: var(--nb-r-pill);
  font: var(--nb-type-label);
  line-height: 1;
  color: var(--nb-ink-2);
  transition:
    border-color var(--nb-dur-1) var(--nb-ease),
    background-color var(--nb-dur-1) var(--nb-ease),
    color var(--nb-dur-1) var(--nb-ease);
}
.mcq-opt-badge::before {
  content: counter(mcq-letter, upper-alpha);
}
.mcq-option-btn:hover:not(:disabled) .mcq-opt-badge {
  border-color: color-mix(in srgb, var(--nb-blue) 55%, transparent);
  color: var(--nb-blue-strong);
}
.mcq-opt-text {
  min-width: 0;
  padding-top: 1px; /* optical baseline against the round badge */
}

/* ---------- 6 · Answered states ------------------------------ */
/* mcq.js disables all buttons and tags each: is-correct / is-incorrect on the
   picked one (and the correct one), is-dimmed on the rest. Verdict colours are
   the semantic callout hues (tip=green correct, warn=red incorrect). */
.mcq-option-btn:disabled {
  cursor: default;
}

/* Correct choice — green (exam-tip family). */
.mcq-option-btn.is-correct {
  border-color: color-mix(in srgb, var(--nb-adm-tip) 55%, transparent);
  background: color-mix(in srgb, var(--nb-adm-tip) var(--nb-adm-tint), var(--nb-paper));
  color: var(--nb-ink);
}
.mcq-option-btn.is-correct .mcq-opt-badge {
  border-color: transparent;
  background: var(--nb-adm-tip);
  color: var(--nb-on-blue);
}

/* Wrongly-picked choice — red (misconception family). */
.mcq-option-btn.is-incorrect {
  border-color: color-mix(in srgb, var(--nb-adm-warn) 55%, transparent);
  background: color-mix(in srgb, var(--nb-adm-warn) var(--nb-adm-tint), var(--nb-paper));
  color: var(--nb-ink);
}
.mcq-option-btn.is-incorrect .mcq-opt-badge {
  border-color: transparent;
  background: var(--nb-adm-warn);
  color: var(--nb-on-blue);
}

/* Everything not chosen (and not the answer) — quieted identically by theme. */
.mcq-option-btn.is-dimmed {
  opacity: 0.52;
}

/* A tiny confirm pop on the correct choice (interaction feedback). */
@media (prefers-reduced-motion: no-preference) {
  .question-card.is-answered-correct .mcq-option-btn.is-correct {
    animation: nb-mcq-pop var(--nb-dur-2) var(--nb-ease);
  }
}
@keyframes nb-mcq-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.015); }
  100% { transform: scale(1); }
}

/* ---------- 7 · Feedback ------------------------------------- */
/* mcq.js builds this into .mcq-reasoning after answering, then adds .is-visible.
   All the inner classes below are JS-created — style them, never emit them. */
.mcq-reasoning {
  overflow: hidden;
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  transition:
    max-height var(--nb-dur-3) var(--nb-ease),
    opacity var(--nb-dur-2) var(--nb-ease),
    margin-top var(--nb-dur-2) var(--nb-ease);
}
.mcq-reasoning.is-visible {
  max-height: 1200px;
  margin-top: var(--nb-s5);
  opacity: 1;
}

/* Verdict line — the judgment moment. Green when right, red when wrong. */
.mcq-verdict {
  display: flex;
  align-items: center;
  gap: var(--nb-s2);
  font-family: var(--nb-sans);
  font-size: var(--nb-text-md);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.mcq-verdict.is-correct {
  color: var(--nb-adm-tip);
}
.mcq-verdict.is-incorrect {
  color: var(--nb-adm-warn);
}
.mcq-verdict-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nb-s5);
  height: var(--nb-s5);
  border-radius: var(--nb-r-pill);
  color: var(--nb-on-blue);
}
.mcq-verdict.is-correct .mcq-verdict-icon {
  background: var(--nb-adm-tip);
}
.mcq-verdict.is-incorrect .mcq-verdict-icon {
  background: var(--nb-adm-warn);
}
.mcq-verdict-text {
  line-height: 1;
}

/* Correct-answer reference (shown only when the pick was wrong). */
.mcq-answer-ref,
.nb-mcq-empty .nb-empty-note {
  font: var(--nb-type-ui);
}
.mcq-answer-ref {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--nb-s2);
  margin-top: var(--nb-s3);
  padding: var(--nb-s3) var(--nb-s4);
  background: color-mix(in srgb, var(--nb-adm-tip) var(--nb-adm-tint), var(--nb-paper));
  border: 1px solid color-mix(in srgb, var(--nb-adm-tip) 35%, transparent);
  border-radius: var(--nb-r-md);
}
.mcq-answer-ref-label {
  font: var(--nb-type-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nb-adm-tip);
}
.mcq-answer-ref-value {
  min-width: 0;
  font-weight: 600;
  color: var(--nb-ink);
}

/* Explanations — plain reading voice (why the pick / the answer holds). */
.mcq-explanation {
  margin-top: var(--nb-s4);
}
.mcq-explanation-label {
  display: block;
  margin-bottom: var(--nb-s1);
  font: var(--nb-type-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nb-ink-2);
}
.mcq-explanation--correct .mcq-explanation-label {
  color: var(--nb-adm-tip);
}
.mcq-explanation-text {
  margin: 0;
  font: var(--nb-type-prose);
  color: var(--nb-ink-2);
}

/* ---------- 8 · Loading dots + empty + prev/next ------------- */
/* mcq.js unhides .mcq-loading during a lazy fetch. nb doesn't load
   lazy-loading.css, so the loader is defined here in ink. */
.esa-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}
.esa-loading[hidden] {
  display: none;
}
.esa-dots {
  display: inline-flex;
  gap: var(--nb-s1);
  align-items: center;
  line-height: 0;
  color: var(--nb-ink-3);
}
.esa-dots > span {
  width: var(--nb-s2);
  height: var(--nb-s2);
  border-radius: var(--nb-r-pill);
  background: currentColor;
  opacity: 0.35;
  animation: nb-mcq-dots 1.1s infinite ease-in-out both;
}
.esa-dots > span:nth-child(2) { animation-delay: 0.16s; }
.esa-dots > span:nth-child(3) { animation-delay: 0.32s; }
@keyframes nb-mcq-dots {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0) scale(0.8); }
  40%           { opacity: 1;   transform: translateY(-4px) scale(1); }
}

/* The invisible IntersectionObserver target — MUST stay last child. */
.mcq-sentinel {
  height: 1px;
}

.nb-mcq-empty {
  margin-top: var(--nb-s4);
}

/* Prev/next topic nav. */
.nb-mcq-pagination {
  display: flex;
  justify-content: space-between;
  gap: var(--nb-s4);
  margin-top: var(--nb-s8);
  padding-top: var(--nb-s5);
  border-top: 1px solid var(--nb-border);
}
.nb-pagenav {
  display: flex;
  flex-direction: column;
  gap: var(--nb-s1);
  max-width: 46%;
  text-align: left;
}
.nb-pagenav--next {
  text-align: right;
  align-items: flex-end;
}
.nb-pagenav-dir {
  font: var(--nb-type-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nb-ink-2);
}
.nb-pagenav-title {
  font: var(--nb-type-label);
  color: var(--nb-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ---------- 9 · Mobile --------------------------------------- */
@media (max-width: 860px) {
  .question-card {
    padding: var(--nb-s5) var(--nb-s4) var(--nb-s4);
  }
  .mcq-q-head {
    gap: var(--nb-s3);
  }
  .nb-notes-header .nb-mcq-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .nb-mcq-whole {
    margin-left: 0;
  }
}

/* ---------- 10 · Reduced motion ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .mcq-reasoning {
    transition: none;
  }
  .esa-dots > span { animation: none; opacity: 0.55; }
}

/* Route-local touch target; fine-pointer sizing remains unchanged. */
@media (pointer: coarse) {
  .questions-mode-tab {
    min-block-size: 44px;
  }
}