/* ============================================================================
   mcq-pictures.css — multiple-choice questions whose four answers are pictures.
   ============================================================================
   WHAT. The owner's guide "MCQs Image Options format" (27 Sep 2026, 6 pages,
   sha256 4069fb46…) drawn as a component: a 2x2 grid of equal white cards
   A B / C D, or four stacked rows A to D when every picture file is at least
   2.5 times as wide as tall (ruling R2); one scale for the set; the caption
   once, under the set; an enlarge button on every card; choose, then
   Check answer; the full-screen enlarged view. Contract:
   docs/superpowers/specs/2026-09-29-mcq-image-options.md (sections 3 to 5).

   WHY IT LOOKS LIKE THIS. The owner ruled (R1, 2026-09-29) that the guide's
   rules, its words and the look measured from its figures are binding for
   this component, and only for it. The guide, p1: "So on every screen the
   four answers are seen together, at one scale, right under their question,
   and each one is shown whole, exactly as drawn." Every value below comes
   from tools/audit/corpus28/mcq_image_options/look/look_tokens.json (the
   119 measured tokens, renamed --mcqp-* -> --nb-pset-*, spec 5.1) or is one
   of the three values spec 5.2 adds (fit reserve, mark line, grid mark
   reserve). The site's font is kept (--nb-sans).

   TWO PARTS.
   1. Tokens. In production they move into notebook-tokens.css, in the same
      three scopes the site uses there (:root for values that do not change
      with the theme, html.theme-light for day, html.theme-dark and
      html:not(.theme-light) for night; notebook-tokens.css:9, :347-348,
      :544). Every themed name is declared in both theme scopes
      (pages/tests_notebook.py:81). Phone values sit under the phone query of
      spec 4.10, on :root; the theme scopes hold colours only, so their higher
      specificity (0,1,1) never outranks a phone size.
   2. The component. It uses only the tokens: no raw colour, radius or size.
      It loads after notebook-mcq.css and neutralises every rule of that sheet
      that reaches its elements (the card root .question-card, the stem
      .mcq-question, the choose control .mcq-option-btn and the explanation
      zone .mcq-reasoning keep their site classes because mcq.js, P2 and P6
      read them).

   PICTURES ARE NEVER ALTERED (guide p4, "Never crop, stretch, squash or
   rotate a picture." and "Never recolour it: no inverting, tinting, dimming
   or filters, not for dark mode and not to show a state."). No rule here
   filters, dims, blends, transforms or crops a picture, and no :hover,
   :focus or :active rule changes the size or position of a picture or a
   card. The only zoom is the student's own, inside the enlarged view.

   NO LAYOUT SHIFT. The server writes each set's largest print size
   (--pset-mw, --pset-mh) on div.mcq-pset and each picture's print size
   (--pset-w, --pset-h) on its img, as unitless CSS px at 300 dpi. Everything
   else is computed here, so every picture box has its final size before a
   byte of it arrives (spec 4.9). No script sizes a picture of the set.
   ========================================================================== */


/* ── 1 · Tokens (move to notebook-tokens.css) ───────────────────────────── */

:root {
  /* ground and question */
  --nb-pset-label-size: 13px;
  --nb-pset-label-weight: 700;
  --nb-pset-label-tracking: 0.3px;
  --nb-pset-label-leading: 1.4;
  --nb-pset-label-gap: 5px;
  --nb-pset-stem-size: 17px;
  /* the text MCQ question's own weight and leading (notebook-mcq.css
     .mcq-question): one question voice for every MCQ (owner 2026-09-30) */
  --nb-pset-stem-weight: 600;
  --nb-pset-stem-leading: 1.5;
  --nb-pset-stem-gap: 17px;
  --nb-pset-column-max: 46rem;            /* the text options' measure (owner 2026-10-05: "the mcq options are toooo long"); was the full width since 2026-09-29 "fix the image small" */
  /* answer card (owner mock-up 2026-10-05: a card on the sheet's tone, the
     letter at its top left, the mark at its top right, the picture on its
     own white plate in the middle) */
  --nb-pset-card-edge-width: 1px;
  --nb-pset-card-radius: 8px;
  --nb-pset-card-shadow: none;
  --nb-pset-gap: 16px;
  --nb-pset-card-pad-x: 12px;
  --nb-pset-card-pad-top: 12px;
  --nb-pset-card-pad-bottom: 16px;
  --nb-pset-picture-gap: 10px;
  /* the white plate the picture is drawn on, inside the card */
  --nb-pset-plate-pad: 8px;
  --nb-pset-plate-radius: 6px;
  /* stacked rows */
  --nb-pset-row-gap: 10px;
  --nb-pset-row-pad-x: 10px;
  --nb-pset-row-pad-y: 8px;
  --nb-pset-row-badge-gap: 10px;
  /* letter badge */
  --nb-pset-badge-size: 32px;
  --nb-pset-badge-bg: var(--nb-pset-card-bg);
  --nb-pset-badge-ring: #8A93A3;
  --nb-pset-badge-ring-width: 1px;
  --nb-pset-badge-ink: #1D2330;
  --nb-pset-badge-letter-size: 14px;
  --nb-pset-badge-letter-weight: 600;
  /* enlarge button */
  --nb-pset-enlarge-size: 28px;
  --nb-pset-enlarge-bg: #F1F3F5;
  --nb-pset-enlarge-radius: 7px;
  --nb-pset-enlarge-icon: #5B6475;
  --nb-pset-enlarge-icon-size: 16px;
  --nb-pset-enlarge-icon-stroke: 2.2;
  /* states */
  --nb-pset-chosen: #3355D1;
  --nb-pset-wrong: #C92A2A;
  --nb-pset-correct: #1E8A3E;
  --nb-pset-on-state: var(--nb-pset-card-bg);
  --nb-pset-state-ring: 1px;
  --nb-pset-pill-height: 26px;
  --nb-pset-pill-radius: 6px;
  --nb-pset-pill-pad-x: 10px;
  --nb-pset-pill-size: 13px;
  --nb-pset-pill-weight: 500;
  --nb-pset-pill-gap: 8px;
  /* focus ring */
  --nb-pset-focus-width: 2px;
  --nb-pset-focus-style: dashed;
  --nb-pset-focus-offset: 4px;
  /* caption and hint */
  --nb-pset-caption-size: 13px;
  --nb-pset-caption-style: italic;
  --nb-pset-caption-weight: 400;
  --nb-pset-caption-leading: 1.4;
  --nb-pset-caption-gap: 12px;
  --nb-pset-hint-size: 12.5px;
  --nb-pset-hint-weight: 400;
  /* Check answer */
  --nb-pset-check-size: 15px;
  --nb-pset-check-weight: 700;
  --nb-pset-check-radius: 9px;
  --nb-pset-check-pad-x: 20px;
  --nb-pset-check-height: 40px;
  --nb-pset-check-gap: 10px;
  /* explanation box */
  --nb-pset-expl-rule: #1E8A3E;
  --nb-pset-expl-rule-width: 4px;
  --nb-pset-expl-radius: 8px;
  --nb-pset-expl-pad-left: 10px;
  --nb-pset-expl-pad-right: 10px;
  --nb-pset-expl-pad-y: 8px;
  --nb-pset-expl-size: 16px;
  --nb-pset-expl-leading: 1.35;
  --nb-pset-expl-para-gap: 0px;
  --nb-pset-expl-gap: 10px;
  /* question picture card */
  --nb-pset-qcard-bg: var(--nb-pset-card-bg);
  --nb-pset-qcard-pad-bottom: 11px;
  --nb-pset-qcard-gap: 16px;
  --nb-pset-qcaption-ink: #4B5563;
  --nb-pset-qcaption-size: 13px;
  --nb-pset-qcaption-gap: 0px;
  /* enlarged view (always dark, in both themes: guide Figure 3) */
  --nb-pset-view-bg: #0E1014;
  --nb-pset-view-ink: var(--nb-pset-card-bg);
  --nb-pset-view-close-size: 20px;
  --nb-pset-view-title-size: 17px;
  --nb-pset-view-counter-ink: #C9CFD8;
  --nb-pset-view-counter-size: 15px;
  --nb-pset-view-pad-x: 18px;
  --nb-pset-view-card-bg: var(--nb-pset-card-bg);
  --nb-pset-view-card-inset: 2px;
  --nb-pset-view-card-pad: 10px;
  /* Figure 3 (p2), measured (look_vector.json enlarged_view.picture_card, zoom 0.57): 38.6
     design px from the card's top to the picture = 10 padding + the 23px letter row + 5.6, and
     19.3 under the picture (must-fix V2-01; spec 5.2, 5.7). Upright only: a phone held
     sideways keeps 10px all round (spec 6.6). */
  --nb-pset-view-picture-gap: 6px;
  --nb-pset-view-card-pad-bottom: 19px;
  --nb-pset-view-hint-ink: #9AA3B2;
  --nb-pset-view-hint-size: 13px;
  --nb-pset-view-hint-gap: 12px;
  --nb-pset-chip-size: 42px;
  --nb-pset-chip-gap: 12px;
  --nb-pset-chip-ring: #59606C;
  --nb-pset-chip-ink: #C9CFD8;
  --nb-pset-chip-letter-size: 16px;
  --nb-pset-chip-current-bg: var(--nb-pset-card-bg);
  --nb-pset-chip-current-ink: #0E1014;
  --nb-pset-choose-height: 42px;
  --nb-pset-choose-margin-x: 16px;
  --nb-pset-choose-gap: 12px;
  --nb-pset-view-pad-bottom: 33px;
  /* spec-added (spec 5.2): the guide gives no value for these five */
  --nb-pset-fit-reserve: 24px;              /* 12px of paper above and below the set in the fit budget (4.4) */
  --nb-pset-mark-line: calc(var(--nb-pset-pill-height) + 4px);   /* 24px: the line a pill takes on its own (3.3, 3.4) */
  --nb-pset-grid-mark-reserve: 0px;         /* desktop and tablet: the pill fits in the header row */
  /* verify round 1, now spec 5.2 (--nb-pset-pill-max, --nb-pset-card-min): a card is never
     narrower than its header needs. The widest pill, "✕ Your answer", is
     98.8px in the site font; 108px leaves room for a fallback glyph. On a
     desktop or tablet the header holds letter, pill and enlarge button on one
     line, so the pill never wraps and the fit holds after a choice (guide p2
     "all four fit on the screen together"); the picture area keeps its one
     scale and is centred in the wider card (p4 "Centre each picture in its
     cell"). */
  --nb-pset-pill-max: 128px;
  --nb-pset-card-min: calc(2 * var(--nb-pset-card-pad-x) + 2 * var(--nb-pset-card-edge-width) + var(--nb-pset-badge-size)
                           + 2 * var(--nb-pset-pill-gap) + var(--nb-pset-pill-max) + var(--nb-pset-enlarge-size));
  /* The two day values the R4-10 switch needs that no token above holds (fix round 1, spec
     2.13 PSET_NIGHT_VERSIONS): with the owner's night versions switched off, the night page
     keeps the figures' day colours for Check answer (disabled) and the explanation box's
     edge. Every other day value of that switch is already a token of one value (badge ink,
     on-state white, card white). */
  --nb-pset-day-check-bg-disabled: #C9CDD4;
  --nb-pset-day-edge: #D9DDE3;
}

/* Day: the figures' own colours (Figures 1, 2, 4, 5, 7). */
html.theme-light {
  --nb-pset-ground: #F3F4F6;
  /* One ink (owner 2026-09-26, and again for these sets 2026-09-30: "it has
     grey text for the question number ... even for caption its grey, make it
     bright white"): the label, the stem, the caption and the hint wear the
     site's ink, not the guide's greys. */
  --nb-pset-label-ink: var(--nb-ink);
  --nb-pset-stem-ink: var(--nb-ink);
  --nb-pset-card-edge: #D9DDE3;
  --nb-pset-focus-ink: #1D2330;
  --nb-pset-caption-ink: var(--nb-ink);
  --nb-pset-hint-ink: var(--nb-ink);
  --nb-pset-check-bg: #1D2330;
  --nb-pset-check-ink: var(--nb-pset-card-bg);
  --nb-pset-check-bg-disabled: #C9CDD4;
  --nb-pset-check-ink-disabled: var(--nb-pset-card-bg);
  --nb-pset-expl-bg: var(--nb-pset-card-bg);
  --nb-pset-expl-edge: #D9DDE3;
  --nb-pset-expl-ink: #1D2330;
  --nb-pset-qcard-edge: #D9DDE3;
}

/* Night: Figure 6's DO panel where it draws a value, and ruling R4-10's night
   versions where it does not (the focus ring, Check answer and the
   explanation box; #1D2330 would vanish on the dark page). The picture
   cards, badges, enlarge buttons and state colours keep one value in both
   themes, because they sit on the white card (guide p5: "The page goes dark;
   the card stays white."). */
html.theme-dark,
html:not(.theme-light) {
  --nb-pset-ground: #121418;
  --nb-pset-label-ink: var(--nb-ink);
  --nb-pset-stem-ink: var(--nb-ink);
  --nb-pset-card-edge: #2B3038;
  --nb-pset-focus-ink: #E7E9EE;
  --nb-pset-caption-ink: var(--nb-ink);
  --nb-pset-hint-ink: var(--nb-ink);
  --nb-pset-check-bg: #E7E9EE;
  --nb-pset-check-ink: #121418;
  --nb-pset-check-bg-disabled: #2B3038;
  --nb-pset-check-ink-disabled: #8A93A3;
  --nb-pset-expl-bg: #1B1E24;
  --nb-pset-expl-edge: #2B3038;
  --nb-pset-expl-ink: #E7E9EE;
  --nb-pset-qcard-edge: #2B3038;
}

/* Phones: the device's short side is under 600 CSS px (spec 4.10). The guide
   separates devices, not widths ("A tablet follows the desktop rules, in
   either orientation.", p2): the same test holds both ways up, so a phone on
   its side keeps phone values and a portrait iPad keeps desktop values. The
   values differ only in size; the layout rules are the same everywhere. */
@media (max-width: 599.98px), (max-height: 599.98px) and (pointer: coarse) {
  :root {
    --nb-pset-stem-size: 15.5px;
    --nb-pset-stem-gap: 11px;
    --nb-pset-column-max: 100%;
    --nb-pset-gap: 10px;
    --nb-pset-card-pad-x: 8px;
    --nb-pset-card-pad-top: 8px;
    --nb-pset-card-pad-bottom: 10px;
    --nb-pset-picture-gap: 6px;
    --nb-pset-plate-pad: 4px;
    --nb-pset-row-gap: 8px;
    --nb-pset-badge-size: 26px;
    --nb-pset-badge-letter-size: 13px;
    --nb-pset-enlarge-size: 26px;
    --nb-pset-hint-gap: 2px;
    /* a phone card's mark is the round icon alone (the phone mock-up), so the
       letter, the mark and the enlarge button share the head row */
    --nb-pset-pill-height: 24px;
    --nb-pset-mark-line: 0px;
    --nb-pset-grid-mark-reserve: 0px;
    --nb-pset-card-min: 0px;
  }
}


/* ── 2 · The page behind the enlarged view does not scroll ──────────────── */
/* The same lock the site's figure zoom uses (notebook-notes.css:1388);
   mcq-pictures.js also stops Lenis while the view is open, as the login and
   Premium dialogs do. */
html.mcq-pset-view-open body {
  overflow: hidden;
}


/* ── 3 · The question: on the ground, no raised card (spec 5.8) ─────────── */
/* In every figure the label, the question, the set, the caption and
   Check answer sit on the page ground; only the pictures get white cards.
   The site's raised question card (notebook-mcq.css:225-232) is not drawn,
   and neither is its side padding or its rounded corner: the figures draw
   no panel round the question, and the site card's 24px (16px on a phone)
   each side would narrow the column the set is measured against. With it,
   a 390px phone gave a 318px column and 141px pictures; Figure 2's set and
   Figure 4's phone rows are 350px wide, the page's own content width
   (fix round 1, LOOK-03). */
/* Owner, 2026-09-29: "open on the right side like the rest of the mcqs". The
   picture question keeps the site's normal question card, so after Check it
   splits into the same two columns with the same right-hand result panel
   (notebook-mcq.css, .question-card.is-answered). */

/* R4-10 is a switch, one place (spec 2.13, PSET_NIGHT_VERSIONS): with the
   owner's night versions off, the night page keeps the figures' day values
   for the focus ring, Check answer and the explanation box, as drawn. On by
   default: #1D2330 would vanish on the dark page (R4-10). */
html:not(.theme-light) #mcq-list:not([data-pset-flags~="night-versions"]) {
  --nb-pset-focus-ink: var(--nb-pset-badge-ink);
  --nb-pset-check-bg: var(--nb-pset-badge-ink);
  --nb-pset-check-ink: var(--nb-pset-on-state);
  --nb-pset-check-bg-disabled: var(--nb-pset-day-check-bg-disabled);
  --nb-pset-check-ink-disabled: var(--nb-pset-on-state);
  --nb-pset-expl-bg: var(--nb-pset-card-bg);
  --nb-pset-expl-edge: var(--nb-pset-day-edge);
  --nb-pset-expl-ink: var(--nb-pset-badge-ink);
}

/* The answers' column: under the question, beside the number, exactly where
   a text question's options sit (notebook-mcq.css sections 3 to 5); on a
   phone the full width. It is the size container every picture is measured
   against (100cqw below). */
.mcq-pset-item .mcq-pset-col {
  grid-column: 2;
  grid-row: 2;
  container-type: inline-size;
  box-sizing: border-box;
  inline-size: min(100%, var(--nb-pset-column-max));
  min-inline-size: 0;
  margin-top: var(--nb-s6);
}
@media (max-width: 640px) {
  .mcq-pset-item .mcq-pset-col {
    grid-column: 1 / -1;
    margin-top: var(--nb-s5);
  }
}

/* "QUESTION n": literal upper-case text, not text-transform (spec 3.2). */
.mcq-pset-item .mcq-pset-label {
  margin: 0 0 var(--nb-pset-label-gap);
  font-family: var(--nb-sans);
  font-size: var(--nb-pset-label-size);
  font-weight: var(--nb-pset-label-weight);
  font-style: normal;
  line-height: var(--nb-pset-label-leading);
  letter-spacing: var(--nb-pset-label-tracking);
  color: var(--nb-pset-label-ink);
}

/* The question text keeps the site's .mcq-question role and class, drawn at
   the guide's regular weight (notebook-mcq.css:263 draws it at 600). */
.mcq-pset-item .mcq-question.mcq-pset-stem {
  margin: 0;
  font-family: var(--nb-sans);
  font-size: var(--nb-pset-stem-size);
  font-weight: var(--nb-pset-stem-weight);
  line-height: var(--nb-pset-stem-leading);
  letter-spacing: normal;
  color: var(--nb-pset-stem-ink);
}
/* "No calculator." is bold, as authored and as Figure 1 draws it. */
.mcq-pset-item .mcq-pset-stem .nb-calc {
  font-weight: 700;
}


/* ── 4 · The question's own picture (spec 3.2, 4.8) ─────────────────────── */
/* "on its own white card with its caption underneath, at its own size. It
   is not squeezed into the grid." (p4). The card spans the column; the
   picture is drawn at its print size or the card's inner width, whichever is
   smaller, and never at the answers' factor. */
.mcq-pset-item .mcq-pset-qcard {
  display: grid;
  box-sizing: border-box;
  margin: 0 0 var(--nb-pset-qcard-gap);
  padding: 0 var(--nb-pset-card-pad-x) var(--nb-pset-qcard-pad-bottom);
  background: var(--nb-pset-qcard-bg);
  border: var(--nb-pset-card-edge-width) solid var(--nb-pset-qcard-edge);
  border-radius: var(--nb-pset-card-radius);
  box-shadow: var(--nb-pset-card-shadow);
}
.mcq-pset-item .mcq-pset-qhead {
  display: flex;
  justify-content: flex-end;
  padding-block-start: var(--nb-pset-card-pad-top);
}
.mcq-pset-item .mcq-pset-qpic {
  display: grid;
  place-items: center;
}
.mcq-pset-item .mcq-pset-qpic > img {
  display: block;
  inline-size: min(calc(var(--pset-w) * 1px),
                   calc(100cqw - 2 * var(--nb-pset-card-pad-x) - 2 * var(--nb-pset-card-edge-width)));
  block-size: auto;
}
.mcq-pset-item .mcq-pset-qcaption {
  margin: var(--nb-pset-qcaption-gap) 0 0;
  font-family: var(--nb-sans);
  font-size: var(--nb-pset-qcaption-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--nb-pset-caption-leading);
  text-align: center;
  color: var(--nb-pset-qcaption-ink);
}


/* ── 5 · The set: one scale, fitted to the screen (spec 4.2 to 4.6) ─────── */
/* "Size the set so all four fit on the screen together." (p2) The budget is
   the visible height under the site's own bars; the fit covers the four
   answers only, not the question text (spec 4.4). */
.mcq-pset-item .mcq-pset {
  --pset-fit-h: calc(100vh - var(--nb-chrome-h, 0px) - var(--nb-tb-h, 0px) - var(--nb-pset-fit-reserve));
  --pset-edge: var(--nb-pset-card-edge-width);
  display: grid;
  /* the cards take the column's width, two equal halves (the mock-up); each
     picture keeps the set's one scale and sits in the middle of its card */
  inline-size: 100%;
}
/* The small viewport height, so the size never changes when a phone's
   address bar hides. A custom property is never dropped at parse time, so a
   second declaration cannot serve as a fallback; @supports does. */
@supports (height: 100svh) {
  .mcq-pset-item .mcq-pset {
    --pset-fit-h: calc(100svh - var(--nb-chrome-h, 0px) - var(--nb-tb-h, 0px) - var(--nb-pset-fit-reserve));
  }
}

/* "One scale for the whole set. Work out one factor from the largest of the
   four pictures and use it for all four." (p2) The factor is taken from the
   largest width and the largest height separately, so a cell holds the
   widest picture and the tallest one (spec 4.2); it never exceeds 1 (print
   size, "the grid stops growing at about the pictures' full print size").
   --pset-pw is the picture area's width: min(print size, what a cell offers
   across, what a cell offers down). */
.mcq-pset-item .mcq-pset--grid {
  --pset-aw: calc((100cqw - var(--nb-pset-gap)) / 2 - 2 * var(--nb-pset-card-pad-x) - 2 * var(--pset-edge)
                  - 2 * var(--nb-pset-plate-pad));
  --pset-ah: calc((var(--pset-fit-h) - var(--nb-pset-gap) - 2 * var(--nb-pset-grid-mark-reserve)) / 2
                  - var(--nb-pset-card-pad-top) - var(--nb-pset-badge-size) - var(--nb-pset-picture-gap)
                  - var(--nb-pset-card-pad-bottom) - 2 * var(--pset-edge));
  /* Owner, 2026-09-29: "fix the image small for now". The grid no longer
     shrinks to fit all four on one screen height (--pset-ah is kept for the
     rows); each cell takes the column's half-width, up to 1.5 times the
     largest picture's print size. Still one scale for all four. */
  --pset-pw: max(0px, min(calc(var(--pset-mw) * 1.5px), var(--pset-aw)));
  /* "Four equal cells: two across, two down, A B / C D." (p1) */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--nb-pset-gap);
}

/* "stack the four answers as rows, one under another, A to D, with the letter
   at the left of each row. Each row is as wide as the screen allows, up to
   about full size." (p3) A row is [pad][badge][gap][picture][gap][enlarge][pad]. */
.mcq-pset-item .mcq-pset--rows {
  --pset-aw: calc(100cqw - 2 * var(--pset-edge) - 2 * var(--nb-pset-row-pad-x) - var(--nb-pset-badge-size)
                  - 2 * var(--nb-pset-row-badge-gap) - var(--nb-pset-enlarge-size) - 2 * var(--nb-pset-plate-pad));
  --pset-ah: calc((var(--pset-fit-h) - 3 * var(--nb-pset-row-gap) - 2 * var(--nb-pset-mark-line)) / 4
                  - 2 * var(--nb-pset-row-pad-y) - 2 * var(--pset-edge) - 2 * var(--nb-pset-plate-pad));
  --pset-pw: max(0px, min(calc(var(--pset-mw) * 1px), var(--pset-aw),
                          calc(var(--pset-ah) * var(--pset-mw) / var(--pset-mh))));
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--nb-pset-row-gap);
}


/* ── 6 · One answer card ────────────────────────────────────────────────── */
/* Two sibling buttons in one grid cell: the choose control is the visible
   card and covers all of it (a tap anywhere on the card, the picture
   included, chooses it); the enlarge button sits over the card's top right,
   in the header row and never over the picture. Grid-area overlap, never
   position: absolute (spec 3.3; DESIGN.md No-Corner-Stamp exception 8.5). */
.mcq-pset-item .mcq-pset-card {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  min-inline-size: 0;
  /* A marked card may grow by its pill's line (spec 3.3, 3.4). Without this
     the browser anchors the scroll on the focused card's picture and pushes
     the new pill line up, under the site's sticky bar when the set sits at
     its fit position (verify round 1). Excluded, the page does not scroll and
     the rows below move down, as spec 3.4 says. */
  overflow-anchor: none;
}
.mcq-pset-item .mcq-pset-card > * {
  grid-area: 1 / 1;
}

/* The choose control. `html` and four classes give (0,4,1): equal to the
   strongest notebook-mcq.css rule that targets .mcq-option-btn
   (html.theme-light .mcq-option-btn:hover:not(:disabled), :329) and later in
   the cascade, so no site hover, focus, press, tint, dim or counter reaches
   a picture card. "No heavy frames: a white card and a hairline edge are
   enough to show each answer can be clicked" (p2). */
html .mcq-pset-item .mcq-pset-card > .mcq-option-btn.mcq-pset-choose {
  counter-increment: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--nb-pset-picture-gap);
  box-sizing: border-box;
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 0;
  margin: 0;
  padding: var(--nb-pset-card-pad-top) var(--nb-pset-card-pad-x) var(--nb-pset-card-pad-bottom);
  /* the card wears the sheet's tone like a text option's row; only the
     picture's plate is white (section 6, .mcq-pset-pic) */
  background: var(--nb-paper-raised);
  border: var(--nb-pset-card-edge-width) solid var(--nb-border);
  border-radius: var(--nb-pset-card-radius);
  box-shadow: var(--nb-pset-card-shadow);
  outline: none;
  font: inherit;
  color: var(--nb-ink);
  text-align: start;
  cursor: pointer;
  opacity: 1;
  filter: none;
  transform: none;
  transition: none;
  user-select: none;
  /* the browser's grey tap flash would tint the picture for a moment */
  -webkit-tap-highlight-color: transparent;
}

/* The header row: the letter badge, then the pill, the end kept clear for the
   enlarge button. It wraps: on a phone card too narrow for all three on one
   line, the pill takes a second line (one --nb-pset-mark-line) inside the
   marked card. The pill never covers the picture or the button (spec 3.3). */
.mcq-pset-item .mcq-pset-card .mcq-pset-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: stretch;
  column-gap: var(--nb-pset-pill-gap);
  row-gap: calc(var(--nb-pset-mark-line) - var(--nb-pset-pill-height));
  min-block-size: var(--nb-pset-badge-size);
  padding-inline-end: calc(var(--nb-pset-enlarge-size) + var(--nb-pset-pill-gap));
}

/* The letter: real text in a circle ("The letter is real text, kept with its
   picture.", p1). A minimum size, not a fixed one, so it grows with the text. */
.mcq-pset-item .mcq-pset-letter,
.mcq-pset-view .mcq-pset-letter {
  display: inline-grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  min-inline-size: var(--nb-pset-badge-size);
  min-block-size: var(--nb-pset-badge-size);
  padding: 0 0.2em;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--nb-ink) 10%, var(--nb-paper-raised));
  color: var(--nb-ink);
  font-family: var(--nb-sans);
  font-size: var(--nb-pset-badge-letter-size);
  font-weight: var(--nb-pset-badge-letter-weight);
  font-style: normal;
  line-height: 1;
}
/* The enlarged view's card stays white in both themes (Figure 3), so its
   letter keeps the guide's ringed white badge and dark ink. */
.mcq-pset-view .mcq-pset-letter {
  border: var(--nb-pset-badge-ring-width) solid var(--nb-pset-badge-ring);
  background: var(--nb-pset-badge-bg);
  color: var(--nb-pset-badge-ink);
}

/* The picture area: one per card, all four equal (s x the largest print
   size); the picture centred in it at s x its own print size, so "a smaller
   one sits in white space instead of being enlarged" (p4). */
.mcq-pset-item .mcq-pset-pic {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--pset-pw);
  block-size: calc(var(--pset-pw) * var(--pset-mh) / var(--pset-mw));
  /* the white plate: the pictures are drawn for white paper (ink lines on a
     see-through ground), so they keep it in both themes, inside the card.
     content-box: the plate's margin is added round the picture area, never
     taken out of it (border-box clipped the picture's foot) */
  box-sizing: content-box;
  padding: var(--nb-pset-plate-pad);
  background: var(--nb-pset-card-bg);
  border-radius: var(--nb-pset-plate-radius);
  margin-block: auto;
}
.mcq-pset-item .mcq-pset-pic > img {
  display: block;
  inline-size: calc(var(--pset-pw) * var(--pset-w) / var(--pset-mw));   /* s x print_w */
  block-size: auto;                                                     /* aspect from width/height = file px */
}

/* Every picture of the component, in every theme and state: drawn as the
   file is. The white behind it is the card's (#FFFFFF), never the image's.
   `html body` lifts this to (0,2,3), above the site's night inversion of a
   see-through figure (notebook-blocks.css, `html.theme-dark img.esa-img-clear
   { filter: invert(1) hue-rotate(180deg); mix-blend-mode: lighten }`, (0,2,2)),
   so a stray class can never recolour an answer or a question picture ("Never
   recolour it: no inverting, tinting, dimming or filters, not for dark mode",
   p4). The markup never carries that class (spec 3.10); this is the second
   lock (fix round 1, LOOK-01). The sheet loads after notebook-blocks.css. */
html body .mcq-pset-item :is(.mcq-pset-pic, .mcq-pset-qpic) > img,
html body .mcq-pset-view .mcq-pset-view-pic > img {
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  object-fit: contain;
  filter: none;
  opacity: 1;
  mix-blend-mode: normal;
  -webkit-user-drag: none;
  user-select: none;
}
.mcq-pset-item :is(.mcq-pset-pic, .mcq-pset-qpic) > img {
  transform: none;
}

/* ── 6.1 · Stacked rows ─────────────────────────────────────────────────── */
/* The letter at the left, centred on the picture; the enlarge button at the
   row's top right (Figure 4). A marked row's pill takes its own line above
   the picture, left-aligned with the picture's left edge, so every picture
   keeps its left edge and width and "their ticks line up" (p3). */
html .mcq-pset-item .mcq-pset-row > .mcq-option-btn.mcq-pset-choose {
  display: grid;
  grid-template-columns: var(--nb-pset-badge-size) auto;
  grid-template-areas:
    ".     pill"
    "badge pic";
  column-gap: var(--nb-pset-row-badge-gap);
  align-items: center;
  justify-content: start;
  padding: var(--nb-pset-row-pad-y)
           calc(var(--nb-pset-row-pad-x) + var(--nb-pset-row-badge-gap) + var(--nb-pset-enlarge-size))
           var(--nb-pset-row-pad-y)
           var(--nb-pset-row-pad-x);
}
.mcq-pset-item .mcq-pset-row .mcq-pset-head {
  display: contents;
}
.mcq-pset-item .mcq-pset-row .mcq-pset-letter {
  grid-area: badge;
}
.mcq-pset-item .mcq-pset-row .mcq-pset-pill {
  grid-area: pill;
  justify-self: start;
  margin-block-end: calc(var(--nb-pset-mark-line) - var(--nb-pset-pill-height));
}
.mcq-pset-item .mcq-pset-row .mcq-pset-pic {
  grid-area: pic;
}


/* ── 7 · The enlarge button ─────────────────────────────────────────────── */
/* "An enlarge button on every card." (p1) Square at every width: the
   squashed buttons of Figures 4 and 7 are drawing slips (spec 0.5). On the
   card's own tone, a quiet square in the head row's far corner. */
.mcq-pset-item .mcq-pset-enlarge {
  display: grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  inline-size: var(--nb-pset-enlarge-size);
  block-size: var(--nb-pset-enlarge-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--nb-pset-plate-radius);
  background: color-mix(in srgb, var(--nb-ink) 8%, var(--nb-paper-raised));
  color: var(--nb-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .mcq-pset-item .mcq-pset-enlarge:hover {
    background: color-mix(in srgb, var(--nb-blue) 18%, var(--nb-paper-raised));
    color: var(--nb-blue);
  }
}
.mcq-pset-item .mcq-pset-card > .mcq-pset-enlarge {
  justify-self: end;
  align-self: start;
  margin-block-start: calc(var(--pset-edge, var(--nb-pset-card-edge-width)) + var(--nb-pset-card-pad-top)
                           + (var(--nb-pset-badge-size) - var(--nb-pset-enlarge-size)) / 2);
  margin-inline-end: calc(var(--pset-edge, var(--nb-pset-card-edge-width)) + var(--nb-pset-card-pad-x));
}
.mcq-pset-item .mcq-pset-row > .mcq-pset-enlarge {
  margin-block-start: calc(var(--pset-edge) + var(--nb-pset-row-pad-y));
  margin-inline-end: calc(var(--pset-edge) + var(--nb-pset-row-pad-x));
}
.mcq-pset-icon {
  display: block;
  flex: none;
  inline-size: var(--nb-pset-enlarge-icon-size);
  block-size: var(--nb-pset-enlarge-icon-size);
  stroke-width: var(--nb-pset-enlarge-icon-stroke);
}


/* ── 8 · Marks: chosen, wrong, correct (spec 5.5) ───────────────────────── */
/* "Marks go on the card edge and the letter, never over the picture, ... and
   always with an icon and a word, never colour alone." (p5) In the owner's
   mock-up (2026-10-05) a marked card takes the state's colour on its edge and
   a wash of it on its face, its letter takes the colour, and the pill at the
   top right says "✓ Correct" or "✕ Your answer"; on a narrow card (a phone)
   the pill is the round icon alone. The picture's white plate is never
   tinted. Unmarked cards keep the resting look after Check. */
.mcq-pset-item .mcq-pset-card[data-pset-mark="chosen"] {
  --pset-state: var(--nb-blue);
}
.mcq-pset-item .mcq-pset-card[data-pset-mark="wrong"] {
  --pset-state: var(--nb-adm-warn);
}
.mcq-pset-item .mcq-pset-card[data-pset-mark="correct"] {
  --pset-state: var(--nb-adm-tip);
}
.mcq-pset-view .mcq-pset-view-card[data-pset-mark="chosen"] {
  --pset-state: var(--nb-pset-chosen);
}
.mcq-pset-view .mcq-pset-view-card[data-pset-mark="wrong"] {
  --pset-state: var(--nb-pset-wrong);
}
.mcq-pset-view .mcq-pset-view-card[data-pset-mark="correct"] {
  --pset-state: var(--nb-pset-correct);
}
html .mcq-pset-item .mcq-pset-card:is([data-pset-mark="chosen"], [data-pset-mark="wrong"], [data-pset-mark="correct"]) > .mcq-option-btn.mcq-pset-choose {
  border-color: color-mix(in srgb, var(--pset-state) 80%, transparent);
  box-shadow: 0 0 0 var(--nb-pset-state-ring) color-mix(in srgb, var(--pset-state) 80%, transparent);
  background: color-mix(in srgb, var(--pset-state) 10%, var(--nb-paper-raised));
}
.mcq-pset-item .mcq-pset-card:is([data-pset-mark="chosen"], [data-pset-mark="wrong"], [data-pset-mark="correct"]) .mcq-pset-letter {
  background: color-mix(in srgb, var(--pset-state) 24%, var(--nb-paper-raised));
  color: var(--pset-state);
}
.mcq-pset-view .mcq-pset-view-card:is([data-pset-mark="chosen"], [data-pset-mark="wrong"], [data-pset-mark="correct"]) .mcq-pset-letter {
  border-color: var(--pset-state);
  background: var(--pset-state);
  color: var(--nb-pset-on-state);
}
/* The pill: "● Your choice", "✕ Your answer", "✓ Correct" (guide p5). */
.mcq-pset-item .mcq-pset-pill:not([hidden]),
.mcq-pset-view .mcq-pset-pill:not([hidden]) {
  display: inline-flex;
  align-items: center;
  flex: none;
  box-sizing: border-box;
  block-size: var(--nb-pset-pill-height);
  padding: 0 var(--nb-pset-pill-pad-x);
  border-radius: var(--nb-pset-pill-radius);
  background: var(--pset-state);
  color: var(--nb-pset-on-state);
  font-family: var(--nb-sans);
  font-size: var(--nb-pset-pill-size);
  font-weight: var(--nb-pset-pill-weight);
  font-style: normal;
  line-height: 1;
  /* pre, not nowrap: in a flex container the word's text run starts its own
     line box, and nowrap would drop its leading U+0020, drawing "●Your
     choice". The guide draws the space (p5), and the code points keep it. */
  white-space: pre;
}
/* On the card: at the head row's right, the state's colour on a wash of it.
   The icon is drawn (the tick, cross and dot of the text MCQ's marks,
   notebook-mcq.css section 6) over its own character, which stays in the
   pill as written but takes no ink: the site font has no tick of its own
   and the fallback drew a radical sign. */
.mcq-pset-item .mcq-pset-card[data-pset-mark="chosen"] { --pset-mark-icon: var(--mcq-dot); }
.mcq-pset-item .mcq-pset-card[data-pset-mark="wrong"] { --pset-mark-icon: var(--mcq-cross); }
.mcq-pset-item .mcq-pset-card[data-pset-mark="correct"] { --pset-mark-icon: var(--mcq-tick); }
.mcq-pset-item .mcq-pset-pill:not([hidden]) {
  --pset-pill-ink: var(--pset-state);
  gap: var(--nb-s1);
  margin-inline-start: auto;
  border: 1px solid color-mix(in srgb, var(--pset-state) 45%, transparent);
  background: color-mix(in srgb, var(--pset-state) 14%, var(--nb-paper-raised));
  color: var(--pset-state);
}
.mcq-pset-item .mcq-pset-pill > span {
  position: relative;
  flex: none;
  inline-size: 1.15em;
  color: transparent;
  text-align: center;
}
.mcq-pset-item .mcq-pset-pill > span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pset-pill-ink);
  -webkit-mask: var(--pset-mark-icon) center / contain no-repeat;
  mask: var(--pset-mark-icon) center / contain no-repeat;
}
/* A narrow card (a phone, or a narrow column): the pill is the round icon
   alone, filled with the state's colour (the phone mock-up). The word still
   stands in the pill, past its clipped edge. */
@container (max-width: 460px) {
  .mcq-pset-item .mcq-pset-pill:not([hidden]) {
    --pset-pill-ink: var(--nb-pset-on-state);
    justify-content: flex-start;
    gap: 0;
    inline-size: var(--nb-pset-pill-height);
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    background: var(--pset-state);
  }
  .mcq-pset-item .mcq-pset-pill > span {
    flex: 0 0 100%;
    align-self: stretch;
  }
  .mcq-pset-item .mcq-pset-pill > span::after {
    inset: 24%;
  }
}
.mcq-pset-item .mcq-pset-pill[hidden],
.mcq-pset-view .mcq-pset-pill[hidden] {
  display: none;
}


/* ── 9 · Keyboard focus (spec 5.5) ──────────────────────────────────────── */
/* "The focus ring is always visible and differs from the "chosen" mark."
   (p4) and "① Before choosing. The dashed ring shows keyboard focus on A. It
   is not a choice." (p5) Dashed and dark, 4px outside the card, against the
   chosen mark's solid blue; a focused chosen card shows both. By night the
   ring is #E7E9EE (R4-10). Keyboard only: a click paints no ring. The other
   controls take the same ring 2px outside them (spec 5.5; the figures draw
   only the card's): the offset reuses --nb-pset-focus-width, that same 2px. */
html .mcq-pset-item .mcq-pset-card > .mcq-option-btn.mcq-pset-choose:focus-visible {
  outline: var(--nb-pset-focus-width) var(--nb-pset-focus-style) var(--nb-pset-focus-ink);
  outline-offset: var(--nb-pset-focus-offset);
}
.mcq-pset-item .mcq-pset-check:focus-visible {
  outline: var(--nb-pset-focus-width) var(--nb-pset-focus-style) var(--nb-pset-focus-ink);
  outline-offset: calc(var(--nb-pset-focus-width));
}
/* The enlarge buttons sit on the card's own tone, so their ring takes the
   interaction blue, which reads on it in both themes ("The focus ring is
   always visible", p4). */
.mcq-pset-item .mcq-pset-enlarge:focus-visible {
  outline: var(--nb-pset-focus-width) var(--nb-pset-focus-style) var(--nb-blue);
  outline-offset: calc(var(--nb-pset-focus-width));
}
.mcq-pset-item .mcq-pset-enlarge:focus:not(:focus-visible),
.mcq-pset-item .mcq-pset-check:focus:not(:focus-visible) {
  outline: none;
}


/* ── 10 · Caption, phone hint, Check answer (spec 3.5) ──────────────────── */
/* "Print it once, under the set, in small grey text, never four times" (p4). */
.mcq-pset-item .mcq-pset-caption {
  margin: var(--nb-pset-caption-gap) 0 0;
  font-family: var(--nb-sans);
  font-size: var(--nb-pset-caption-size);
  font-style: var(--nb-pset-caption-style);
  font-weight: var(--nb-pset-caption-weight);
  line-height: var(--nb-pset-caption-leading);
  text-align: center;
  color: var(--nb-pset-caption-ink);
}

/* "Tap [icon] on a card to see it full-screen." Figure 2 only: phones, under
   a grid (R4-7); never under stacked rows (Figure 4), never on a desktop.
   Where it is written is the template's choice (PSET_PHONE_HINT, spec 2.13:
   under a grid only by default); where it shows is the phone query's. */
.mcq-pset-item .mcq-pset-hint {
  display: none;
}
@media (max-width: 599.98px), (max-height: 599.98px) and (pointer: coarse) {
  .mcq-pset-item .mcq-pset-hint {
    display: block;
    margin: var(--nb-pset-hint-gap) 0 0;
    font-family: var(--nb-sans);
    font-size: var(--nb-pset-hint-size);
    font-style: normal;
    font-weight: var(--nb-pset-hint-weight);
    line-height: var(--nb-pset-caption-leading);
    text-align: center;
    color: var(--nb-pset-hint-ink);
  }
  /* the enlarge icon inline, in the hint colour, with no button fill */
  .mcq-pset-item .mcq-pset-hint .mcq-pset-icon {
    display: inline-block;
    vertical-align: middle;
  }
}

/* Check answer: right edge on the column's right edge; #C9CDD4 until an
   answer is chosen, then #1D2330 ("Check becomes active.", p5); gone after
   Check (Figure 7 (3)). Not an nb-btn (DESIGN.md exception 8.3): no lift. */
.mcq-pset-item .mcq-pset-check:not([hidden]) {
  display: block;
  box-sizing: border-box;
  margin: var(--nb-s4) 0 0 auto;
  block-size: 44px;
  padding: 0 var(--nb-s6);
  border: 0;
  border-radius: var(--nb-r-md);
  /* the site's one primary action (owner mock-up 2026-10-05): the blue */
  background: var(--nb-blue);
  color: var(--nb-on-blue);
  font-family: var(--nb-sans);
  font-size: var(--nb-pset-check-size);
  font-weight: 600;
  font-style: normal;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mcq-pset-item .mcq-pset-check:disabled {
  background: color-mix(in srgb, var(--nb-ink) 10%, var(--nb-paper-raised));
  color: var(--nb-quiet-3);
  cursor: default;
}
.mcq-pset-item .mcq-pset-check[hidden] {
  display: none;
}


/* ── 11 · The explanation (spec 3.5, 5.6) ───────────────────────────────── */
/* Figure 7 (3): a white box under the caption spanning the column, a 1px
   hairline on three sides and a 4px green rule on the left, holding the
   authored "Answer: X — …" paragraph and, after a wrong choice, that card's
   "X is wrong …" paragraph, lead-ins bold as authored. It is the site's
   .mcq-reasoning zone (the aria-live region exists before it is filled), so
   the site's reveal (notebook-mcq.css:444-457, :899-906) is switched off. */
/* Owner, 2026-09-29: after Check the result reads exactly as every other MCQ's,
   drawn by mcq.js buildFeedback into this .mcq-reasoning zone and styled by
   notebook-mcq.css (verdict, correct answer, why wrong, why right). Only the
   gap under the caption is set here. */
/* The result zone is the card's own .mcq-reasoning, placed by notebook-mcq.css. */

/* The answered card's response stands beside the set at the same width as on
   every other MCQ (owner mock-up 2026-10-05; notebook-mcq.css section 11). */

/* Owner, 2026-09-29: a question's own picture in any MCQ sits centred under
   the question text, its caption centred under it. */
.question-card .mcq-question .note-figure {
  margin-inline: auto;
  text-align: center;
}
.question-card .mcq-question .note-figure-img-area {
  display: flex;
  justify-content: center;
}


/* ── 12 · The enlarged view (spec 3.6, 5.7, 6.6) ────────────────────────── */
/* "An enlarge button covers the detail. Every card has one, and it opens a
   full-screen view (Figure 3). There the student can pinch or double-tap to
   zoom, move between A, B, C and D (swipe, or tap a letter), choose that
   answer, and close back to the grid with nothing lost." (p2) One native
   modal dialog per page, in the top layer, covering the whole viewport; dark
   in both themes; the picture on a white card with no edge. */
.mcq-pset-view {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  inline-size: 100vw;
  block-size: 100vh;
  block-size: 100dvh;
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  padding: 0 0 calc(var(--nb-pset-view-pad-bottom) + env(safe-area-inset-bottom, 0px));
  border: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  background: var(--nb-pset-view-bg);
  color: var(--nb-pset-view-ink);
  color-scheme: dark;
  font-family: var(--nb-sans);
}
.mcq-pset-view[open] {
  display: flex;
  flex-direction: column;
}
.mcq-pset-view::backdrop {
  background: var(--nb-pset-view-bg);
}
/* `hidden` always wins inside the component: the title, count, hint, chips,
   Choose and letter are hidden per mode (spec 3.6), and a later display rule
   of equal weight must never bring one back. */
.mcq-pset-view [hidden],
.mcq-pset-item [hidden] {
  display: none !important;
}

/* Header: ✕ at the left, "Answer B" centred between it and "2 of 4" at the
   right (Figure 3). The ✕ and the count take a chip's width, so the title
   sits centred and the close button is a 42px target. */
.mcq-pset-view .mcq-pset-view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  gap: var(--nb-pset-chip-gap);
  padding: calc(var(--nb-pset-view-pad-x) + env(safe-area-inset-top, 0px))
           calc(var(--nb-pset-view-pad-x) + env(safe-area-inset-right, 0px))
           0
           calc(var(--nb-pset-view-pad-x) + env(safe-area-inset-left, 0px));
}
.mcq-pset-view .mcq-pset-view-close {
  flex: none;
  box-sizing: border-box;
  min-inline-size: var(--nb-pset-chip-size);
  block-size: var(--nb-pset-chip-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--nb-pset-check-radius);
  background: none;
  color: var(--nb-pset-view-ink);
  font-family: var(--nb-sans);
  font-size: var(--nb-pset-view-close-size);
  line-height: 1;
  text-align: start;
  cursor: pointer;
}
/* The title and the count are one live region (spec 3.6, 6.6; fix round 1,
   A9): moving to another answer by arrow, chip or swipe changes them, and a
   screen reader reads the pair ("Answer C, 3 of 4"). A flex box of its own,
   so the header's layout is Figure 3's: the title centred between the close
   button and the count. */
.mcq-pset-view .mcq-pset-view-status {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-inline-size: 0;
  gap: var(--nb-pset-chip-gap);
}
.mcq-pset-view .mcq-pset-view-title {
  flex: 1 1 auto;
  min-inline-size: 0;
  margin: 0;
  font-family: var(--nb-sans);
  font-size: var(--nb-pset-view-title-size);
  font-weight: 700;
  line-height: var(--nb-pset-caption-leading);
  text-align: center;
  color: var(--nb-pset-view-ink);
}
.mcq-pset-view .mcq-pset-view-count {
  flex: none;
  min-inline-size: var(--nb-pset-chip-size);
  margin: 0;
  font-family: var(--nb-sans);
  font-size: var(--nb-pset-view-counter-size);
  font-weight: 400;
  line-height: var(--nb-pset-caption-leading);
  text-align: end;
  color: var(--nb-pset-view-counter-ink);
}

/* The stage holds the picture card. Only here, and only while the view is
   open, does the page give its touches to the view's own zoom and swipe
   (spec 6.8): everywhere else the browser's pinch-zoom works. */
.mcq-pset-view .mcq-pset-view-stage {
  display: grid;
  place-items: center;
  flex: none;
  margin-block-start: auto;
  padding: 0 var(--nb-pset-view-card-inset);
  touch-action: none;
  user-select: none;
}
.mcq-pset-view .mcq-pset-view-card {
  box-sizing: border-box;
  /* Figure 3: 10px round the card, 19px under the picture (V2-01) */
  padding: var(--nb-pset-view-card-pad) var(--nb-pset-view-card-pad) var(--nb-pset-view-card-pad-bottom);
  border-radius: var(--nb-pset-card-radius);
  background: var(--nb-pset-view-card-bg);
}
.mcq-pset-view .mcq-pset-view-card .mcq-pset-head:not([hidden]) {
  display: flex;
  align-items: center;
  column-gap: var(--nb-pset-pill-gap);
  min-block-size: var(--nb-pset-badge-size);
  /* Figure 3: the picture starts 6px under the letter row (V2-01) */
  margin-block-end: var(--nb-pset-view-picture-gap);
}
/* The mark beside the header, used only on a phone held sideways (below):
   there the card's own pill line would cost the picture its height. */
.mcq-pset-view .mcq-pset-view-mark {
  display: none;
}
/* The question picture's printed caption in its view: only when the owner
   switches R4-5 to "close-zoom-caption" (spec 2.13 PSET_STEM_VIEW); the
   default view of the question's picture has only the close button and zoom. */
.mcq-pset-view .mcq-pset-view-caption {
  flex: none;
  margin: var(--nb-pset-view-hint-gap) var(--nb-pset-view-pad-x) auto;
  font-family: var(--nb-sans);
  font-size: var(--nb-pset-view-hint-size);
  font-weight: 400;
  line-height: var(--nb-pset-caption-leading);
  text-align: center;
  color: var(--nb-pset-view-hint-ink);
}
/* One factor for all four, from the largest (spec 6.6): the script sets
   --pset-v on the card and the four answers keep one card size. The picture
   area clips only the student's own zoom. */
.mcq-pset-view .mcq-pset-view-pic {
  display: grid;
  place-items: center;
  overflow: hidden;
  inline-size: calc(var(--pset-mw, 0) * var(--pset-v, 0) * 1px);
  block-size: calc(var(--pset-mh, 0) * var(--pset-v, 0) * 1px);
}
.mcq-pset-view .mcq-pset-view-pic > img {
  display: block;
  inline-size: calc(var(--pset-w, 0) * var(--pset-v, 0) * 1px);
  block-size: auto;
  transform-origin: 50% 50%;
  pointer-events: none;
}

.mcq-pset-view .mcq-pset-view-hint {
  flex: none;
  margin: var(--nb-pset-view-hint-gap) var(--nb-pset-view-pad-x) auto;
  font-family: var(--nb-sans);
  font-size: var(--nb-pset-view-hint-size);
  font-weight: 400;
  line-height: var(--nb-pset-caption-leading);
  text-align: center;
  color: var(--nb-pset-view-hint-ink);
}
.mcq-pset-view .mcq-pset-view-hint[hidden] + .mcq-pset-view-chips {
  margin-block-start: auto;
}
.mcq-pset-view[data-pset-mode="stem"] .mcq-pset-view-stage {
  margin-block: auto;
}

/* Letter chips: 42px circles 12px apart; the answer shown is filled white. */
.mcq-pset-view .mcq-pset-view-chips:not([hidden]) {
  display: flex;
  justify-content: center;
  flex: none;
  gap: var(--nb-pset-chip-gap);
  margin: 0 var(--nb-pset-choose-margin-x);
}
.mcq-pset-view .mcq-pset-chip {
  display: grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  inline-size: var(--nb-pset-chip-size);
  block-size: var(--nb-pset-chip-size);
  margin: 0;
  padding: 0;
  border: var(--nb-pset-badge-ring-width) solid var(--nb-pset-chip-ring);
  border-radius: 50%;
  background: transparent;
  color: var(--nb-pset-chip-ink);
  font-family: var(--nb-sans);
  font-size: var(--nb-pset-chip-letter-size);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.mcq-pset-view .mcq-pset-chip[data-ui-current="true"] {
  border-color: var(--nb-pset-chip-current-bg);
  background: var(--nb-pset-chip-current-bg);
  color: var(--nb-pset-chip-current-ink);
}

/* "Choose B": the chosen blue, full width less 16px each side, 33px above
   the bottom of the screen (Figure 3). */
.mcq-pset-view .mcq-pset-view-choose:not([hidden]) {
  display: block;
  flex: none;
  box-sizing: border-box;
  block-size: var(--nb-pset-choose-height);
  margin: var(--nb-pset-choose-gap) var(--nb-pset-choose-margin-x) 0;
  padding: 0 var(--nb-pset-check-pad-x);
  border: 0;
  border-radius: var(--nb-pset-check-radius);
  background: var(--nb-pset-chosen);
  color: var(--nb-pset-on-state);
  font-family: var(--nb-sans);
  font-size: var(--nb-pset-check-size);
  font-weight: var(--nb-pset-check-weight);
  line-height: 1;
  cursor: pointer;
}

/* Keyboard focus in the view: the same dashed ring, in the view's white. */
.mcq-pset-view :is(.mcq-pset-view-close, .mcq-pset-chip, .mcq-pset-view-choose):focus-visible {
  outline: var(--nb-pset-focus-width) var(--nb-pset-focus-style) var(--nb-pset-view-ink);
  outline-offset: calc(var(--nb-pset-focus-width));
}
.mcq-pset-view :is(.mcq-pset-view-close, .mcq-pset-chip, .mcq-pset-view-choose):focus:not(:focus-visible) {
  outline: none;
}

/* "Turning the phone sideways simply gives a bigger picture." (p2) A phone
   held sideways, and only a phone (the phone query of spec 4.10 with the view
   wider than tall): the header, the mark, the hint, the chips and Choose move
   into one column at the right, and the picture card takes the whole height,
   its letter beside the picture instead of above it. The vertical chrome is
   then the card's own padding and inset, 24px, the same as the horizontal
   chrome upright, so every set whose picture box is wider than tall is drawn
   larger sideways on a phone of at least 360 x 640 (spec 6.6, PS-B-14; fix
   round 1, GF-04). A desktop or a tablet keeps Figure 3's order at every
   shape of window (LOOK-06; R4-6 "same dark view"). */
@media (orientation: landscape) and (max-height: 599.98px) and (pointer: coarse) {
  .mcq-pset-view {
    --pset-side: calc(4 * var(--nb-pset-chip-size) + 3 * var(--nb-pset-chip-gap));
  }
  .mcq-pset-view[open] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) repeat(6, auto) minmax(0, 1fr);
    grid-template-areas:
      "stage ."
      "stage head"
      "stage mark"
      "stage hint"
      "stage chips"
      "stage choose"
      "stage cap"
      "stage .";
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
             env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  }
  .mcq-pset-view .mcq-pset-view-head {
    grid-area: head;
    inline-size: var(--pset-side);
    margin: 0 var(--nb-pset-choose-margin-x) var(--nb-pset-choose-gap);
    padding: 0;
  }
  .mcq-pset-view[data-pset-mode="stem"] .mcq-pset-view-head {
    inline-size: auto;
  }
  .mcq-pset-view[data-pset-mode] .mcq-pset-view-stage {
    grid-area: stage;
    align-self: stretch;
    margin: 0;
    padding: var(--nb-pset-view-card-inset);
  }
  /* the letter beside the picture, at its top; the card 10px all round
     (Figure 3's extra 6px and 19px, V2-01, are drawn upright only) */
  .mcq-pset-view .mcq-pset-view-card {
    display: grid;
    grid-template-columns: auto auto;
    align-items: start;
    column-gap: var(--nb-pset-pill-gap);
    padding: var(--nb-pset-view-card-pad);
  }
  .mcq-pset-view .mcq-pset-view-card .mcq-pset-head:not([hidden]) {
    margin-block-end: 0;
  }
  /* the pill leaves the card for the column (the card's letter keeps its fill) */
  .mcq-pset-view .mcq-pset-view-card .mcq-pset-pill {
    display: none !important;
  }
  .mcq-pset-view .mcq-pset-view-mark:not([hidden]) {
    grid-area: mark;
    display: block;
    inline-size: var(--pset-side);
    min-block-size: var(--nb-pset-pill-height);
    margin: 0 var(--nb-pset-choose-margin-x) var(--nb-pset-choose-gap);
  }
  .mcq-pset-view .mcq-pset-view-hint {
    grid-area: hint;
    inline-size: var(--pset-side);
    margin: 0 var(--nb-pset-choose-margin-x) var(--nb-pset-choose-gap);
  }
  .mcq-pset-view .mcq-pset-view-caption {
    grid-area: cap;
    inline-size: var(--pset-side);
    margin: 0 var(--nb-pset-choose-margin-x);
  }
  .mcq-pset-view .mcq-pset-view-chips,
  .mcq-pset-view .mcq-pset-view-hint[hidden] + .mcq-pset-view-chips {
    grid-area: chips;
    margin: 0 var(--nb-pset-choose-margin-x);
  }
  .mcq-pset-view .mcq-pset-view-choose:not([hidden]) {
    grid-area: choose;
    inline-size: var(--pset-side);
    margin: var(--nb-pset-choose-gap) var(--nb-pset-choose-margin-x) 0;
  }
}


/* ── 13 · Forced colours (Windows High Contrast; spec 5.3) ────────────── */
/* In forced colours the browser repaints every background with the system
   colour, so the white card would go black and a transparent picture would
   sit "straight on a dark page" (p6 DON'T; p5: "the near-black ink
   vanishes"). The picture areas keep their own white: the card edge, the
   letters and the pills keep the system colours, and the state still reads
   from the pill's word (fix round 1, A3). */
@media (forced-colors: active) {
  .mcq-pset-item :is(.mcq-pset-pic, .mcq-pset-qpic),
  .mcq-pset-view .mcq-pset-view-pic {
    forced-color-adjust: none;
    background: var(--nb-pset-card-bg);
  }
}