/* The assessment: a full-height stage with an arrow-pen progress track, act cards,
   tactile answer tiles, and Don's notebook in the margin. */
.quiz {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  background-color: var(--paper);
}
.quiz__announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Top bar and track ───────────────────────────────── */
/* Opaque paper on the page's ink rule: a translucent header let the page beneath drop its text
   contrast (docs/accessibility.md), and the blur printed nothing a book would. */
.quiz__bar {
  position: sticky; top: 0; z-index: 10;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(8px, 2vw, 40px);
  padding: 14px var(--gutter);
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
}
.quiz__exit { min-width: 44px; min-height: 44px; font: 500 0.85rem var(--font-label); letter-spacing: 0.04em; color: var(--ink-3); display: flex; gap: 8px; align-items: center; transition: color 0.2s; }
.quiz__exit:hover { color: var(--crimson); }
.quiz__count { font: 600 1.03rem var(--font-label); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }

.track__acts { display: flex; gap: 10px; }
.track__act { flex: var(--n) 1 0; min-width: 0; }
.track__label { display: block; font: 500 0.69rem var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track__pips { display: flex; gap: 3px; }
.pip { flex: 1; height: 6px; background: var(--stone-1); transition: background-color 0.3s; }
.pip--done { background: var(--ink); }
.pip--now { background: var(--crimson); animation: breathe 1.6s ease-in-out infinite; }
.track__rail { position: relative; height: 22px; margin-top: 4px; overflow: hidden; }
/* The nib tip travels from one pen length in to the rail's end as --p (0 to 1) grows, so the whole
   pen shows at every width; at 390 a plain var(--p) left put the first answers' pen off the rail. */
.track__arrow {
  --pen: 64px;
  position: absolute; top: 50%; width: var(--pen);
  left: calc(var(--pen) + (100% - var(--pen)) * var(--p, 0));
  transform: translate(-100%, -50%);
  transition: left 0.9s var(--ease), opacity 0.3s;
}
.track__arrow.is-start { opacity: 0; }
.track__arrow .arrow-icon { width: 100%; height: auto; }
@media (max-width: 640px) {
  .quiz__exit { font-size: 0; gap: 0; }
  .quiz__exit span { font-size: 1rem; }
  .quiz__exit { justify-content: center; }
  .track__label { display: none; }
}

/* ── Stage ───────────────────────────────────────────── */
.quiz__stage { display: grid; align-items: start; padding: clamp(28px, 7vh, 88px) var(--gutter) 64px; }
.enter > * { animation: rise 0.55s var(--ease) both; }
/* A tile fills backwards only: holding rise's end (`transform: none`) after the entrance beat the
   tile's own hover lift and press (gate 6dbe), and that end state is its resting transform anyway. */
.enter .opt { animation: rise 0.55s var(--ease) backwards; }

/* The question page (R14e): on a wide page the scene, the headline and the notebook stack in the
   headline's columns and the answers take the offset column; a narrow page stacks in DOM order. */
.q > .q__scene { font: italic 400 clamp(1.1rem, 1.6vw, 1.3rem)/1.4 var(--font-serif); color: var(--ink-3); }
.q > .q__prompt { font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1.02; letter-spacing: -0.005em; }
.q > .opts, .q > .q__nav { max-width: none; }
@media (min-width: 900px) {
  /* The answers span the scene, headline and note rows; the flexible note row takes their extra
     height, so the scene line stays on its headline. */
  .q { grid-template-rows: auto auto auto 1fr auto; }
  .q > .q__scene { grid-column: 1 / 6; grid-row: 2; }
  .q > .q__prompt { grid-column: 1 / 6; grid-row: 3; }
  .q > .notebook { grid-column: 1 / 6; grid-row: 4; }
  .q > .opts { grid-column: 6 / -1; grid-row: 2 / span 3; }
  .q > .q__nav { grid-column: 6 / -1; grid-row: 5; }
}

/* Answers are poster tiles: an ink rule and the hard S4 offset (--shadow-hard). A tile rises on
   hover and a press lands it on its own shadow; the chosen tile inks in on a crimson offset. */
.opts { display: grid; gap: 14px; }
.opt {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; align-items: start;
  width: 100%; padding: 18px 20px; text-align: left;
  font: 400 1.08rem/1.45 var(--font-serif); color: var(--ink);
  background: var(--marble);
  border: 1.5px solid var(--ink);
  box-shadow: var(--shadow-hard);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), background-color 0.2s, color 0.2s;
  animation-delay: calc(var(--i) * 55ms + 0.14s) !important;
}
/* As on the claim ladder, hover never restyles the chosen tile (gate 46c6), and a touch screen's
   sticky hover never inks a tile's key after a tap. */
@media (hover: hover) {
  .opt:not(.opt--chosen):hover { transform: translate(-2px, -2px); }
  .opt:not(.opt--chosen):hover .opt__key { background: var(--ink); border-color: var(--ink); color: var(--marble); }
}
@media (prefers-reduced-motion: reduce) { .opt { animation-delay: 0s !important; } }
/* After the hover rule and as specific, so a press on a hovered tile lands rather than lifts. */
.opt:not(.opt--chosen):active { transform: translate(4px, 4px); box-shadow: none; transition-duration: 0.05s; }
.opt__key {
  display: grid; place-items: center; width: 30px; height: 30px;
  font: 600 0.85rem var(--font-label); border: 1.5px solid currentColor; color: var(--ink-3);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.opt--chosen { background: var(--ink); color: var(--marble); border-color: var(--ink); box-shadow: 4px 4px 0 var(--crimson); animation: pick 0.36s var(--ease-snap) both !important; }
.opt--chosen .opt__key { background: var(--crimson); border-color: var(--crimson); color: var(--marble); }
/* Tapping your own answer after Back lands it too (gate efc7); no hover rule covers the chosen tile. */
.opt--chosen:active { transform: translate(4px, 4px); box-shadow: none; }
@keyframes pick { 40% { transform: scale(0.985) translate(2px, 2px); } }

.q__nav { display: flex; align-items: center; gap: 24px; margin-top: 16px; min-height: 44px; }
/* A real target box: "← Back" is 43.17px of text, and 46px survives subpixel rounding (R7). */
.q__nav .link-btn { min-height: 44px; min-width: 46px; flex-shrink: 0; display: inline-flex; align-items: center; }
@media (hover: none) { .q__nav .hint { display: none; } }

/* ── Don's notebook ──────────────────────────────────── */
/* The page's marginal note: print.css's ruled note (ink-2, in the page's note column) on the
   notebook's own ruling, stone lines and a crimson margin mixed into the paper (14c, audit P5).
   Flat on the page: no card, tilt or soft shadow (S4). */
.q > .notebook {
  --notebook-margin: color-mix(in srgb, var(--crimson) 45%, var(--marble));
  --rule: 28px; /* the ruling's pitch, which is every line's height */
  --margin-x: 26px;
  align-self: start;
  padding: 0 0 1px calc(var(--margin-x) + 14px);
  background:
    linear-gradient(90deg, transparent var(--margin-x), var(--notebook-margin) var(--margin-x) calc(var(--margin-x) + 1px), transparent calc(var(--margin-x) + 1px)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--rule) - 1px), var(--stone-1) calc(var(--rule) - 1px) var(--rule));
  font-size: 1rem;
  line-height: var(--rule);
}
.notebook--fresh { animation: note-in 0.6s var(--ease) both; }
.notebook__title { font: 600 0.76rem/var(--rule) var(--font-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.notebook__you { font-size: 0.92rem; color: var(--ink-3); }
.notebook__you em { color: var(--ink-2); }
.notebook__note { font-size: 1.08rem; font-style: italic; color: var(--ink); margin-top: 0; }
.notebook--fresh .notebook__note { background: linear-gradient(transparent 62%, var(--crimson-3) 62% 88%, transparent 88%) no-repeat 0 0 / 0% 100%; animation: highlight 1s var(--ease) 0.35s forwards; }
.notebook__note--idle { color: var(--ink-3); }
@keyframes note-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes highlight { to { background-size: 100% 100%; } }

@media (max-width: 899px) {
  .q > .notebook { --rule: 24px; --margin-x: 22px; }
  .notebook__note { font-size: 0.98rem; }
  .notebook__note--idle, .notebook:not(.notebook--fresh) { display: none; }
}

/* ── Chapter openers: the claim and the act cards (R14d) ── */
/* Printed pages on print.css's editorial grid (.story__plain-inner; index.html links print.css
   before this sheet): the running head spans the page over its rule, the mixed-case headline sits
   left, the rest in the offset column. This sheet only sizes and places them for the quiz. */
.claim, .act-card, .q { width: 100%; max-width: 1160px; }
.claim__q, .act-card__q, .q__prompt { outline: none; }

.act-card { margin-top: clamp(0px, 9vh, 112px); }
.act-card > * { animation: rise 0.7s var(--ease) both; }
.act-card > :nth-child(2) { animation-delay: 0.1s; }
.act-card > :nth-child(3) { animation-delay: 0.2s; }
.act-card > :nth-child(4) { animation-delay: 0.3s; }
.act-card > .act-card__q { font-size: clamp(2.7rem, 5.6vw, 5.6rem); line-height: 0.94; letter-spacing: -0.01em; }
.act-card__text { display: grid; justify-items: start; gap: 14px; }
.act-card__line { font-size: 1.25rem; font-style: italic; color: var(--ink-3); max-width: 44ch; }
.act-card__text .btn { margin-top: 12px; }
.act-card__folio { margin-top: 18px; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; }
/* The figure, in its rest pose: its width sets its box through the viewBox, so nothing shifts when
   the sprite file paints. A narrow page stands it on the running head's rule (the head is the first
   child); a wide page is one row of three: the headline, the text, the figure. */
.act-card__figure { display: block; height: auto; }
@media (max-width: 899px) {
  .act-card { margin-top: 0; }
  .act-card > :first-child { grid-row: 1; align-self: end; }
  .act-card > .act-card__figure { grid-row: 1; grid-column: 1 / -1; align-self: end; justify-self: end; width: clamp(96px, 30vw, 150px); margin-right: 4px; }
}
@media (min-width: 900px) {
  .act-card > .act-card__q { grid-row: auto; }
  .act-card > .act-card__text { grid-column: 6 / 10; }
  .act-card > .act-card__figure { grid-column: 10 / -1; width: 100%; }
}

/* The claim: the nine stages as a ruled ladder, two columns in stage order, no boxes. On a wide
   page the headline takes the wider half, and the line sits at its foot beside it. */
.claim > .claim__q { font-size: clamp(2.3rem, 3.9vw, 3.6rem); }
@media (min-width: 900px) {
  .claim > .claim__q { grid-column: 1 / 8; }
  .claim > .claim__line { grid-column: 8 / -1; grid-row: 2 / span 3; align-self: end; }
}
.claim__line { font-size: 1.15rem; font-style: italic; color: var(--ink-3); }
.claim > .claim__grid, .claim > .q__nav { grid-column: 1 / -1; max-width: none; }
.claim > .q__nav, .q > .q__nav { margin-top: 0; }
.claim__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column;
  column-gap: clamp(28px, 4vw, 56px);
  border-top: 1px solid var(--ink);
}
.claim__opt {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: start;
  min-height: 44px; padding: 10px 14px 10px 6px; text-align: left;
  border-bottom: 1px solid var(--stone-2);
  transition: background-color 0.2s, color 0.2s, box-shadow 0.22s var(--ease);
}
.enter .claim__opt { animation: rise 0.55s var(--ease) both; animation-delay: calc(var(--i) * 40ms + 0.14s); }
.claim__num { grid-row: span 2; font: 400 2.2rem/0.9 var(--font-display); color: var(--crimson); transition: transform 0.22s var(--ease); }
.claim__name { font: 700 1.05rem/1.2 var(--font-label); letter-spacing: 0.01em; }
.claim__head { font-size: 0.92rem; font-style: italic; color: var(--ink-3); line-height: 1.35; }
/* Hover never restyles the checked rung: a class plus :hover outranks the one-class .opt--chosen
   ink, and paled it to 1.1:1 under the pointer (gate 46c6). */
@media (hover: hover) {
  .claim__opt:not(.opt--chosen):hover { background: var(--paper-2); }
  .claim__opt:not(.opt--chosen):hover .claim__num { transform: translateX(4px); }
}
/* The checked rung inks in, with the crimson rule of a pull quote; crimson on ink is --crimson-3 (P3). */
.claim__opt.opt--chosen { box-shadow: inset 4px 0 0 var(--crimson); }
.opt--chosen .claim__num { color: var(--crimson-3); }
.opt--chosen .claim__head { color: var(--paper-3); }

@media (max-width: 899px) {
  .claim__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
}