/* ============================================================================
   SAT Freshman -- the question workspace and the runner (spec/rebuild-v2.md R21, R23,
   the runner.css row of 2.4; QBank 2.5-2.9, Tests 1 and 4.3-4.8)

   Tokens and the shared question classes (.q-skill .q-fig .q-table .q-stem .opts .opt
   .grid-in .verdict .mistake .why .calc) are ui.css's; this file adds what the workspace,
   the runner and the calculator draw. Colours are ui.css tokens only, so dark follows.
   question.js links this file itself on pages that did not.

   Groups, in order:
     workspace   .ws .ws-headline .ws-rule .span-* .blank .ws-watch .ws-hintbox .ws-stage
                 .opts-wrap .opt-row .strike .undo .opt-why .opt-crowd .ws-cover
                 .spr .spr-preview .frac .spr-rule .spr-dirs .pad .ws-under .ws-err .ws-local
     verdict     .v-head .v-mastery .abox .v-fixed .v-note .v-line .v-cause .trap-chip
                 .x-card .steps .step .x-desmos .q-actions .split .split-check .ws-bar
     tools       .tools-row .tool
     calculator  .calc.floating .calc.docked .calc.sheet .calc-bar .calc-walk .calc-grip .sci
     twin sheet  .twin-sheet .twin-recall
     runner      .rn .rn-top .rn-tool .timer .rn-rail .rn-seg .rn-qstrip .rn-qhead .rn-why .rn-nudge
                 .rn-body .rn-col .rn-dock .rn-slot .rn-foot .rn-navb .rn-next .rn-toolsrow .rn-paused
     navigator   .rn-navpop .navp (views, legend chips, .cell-grid, .c-sub .c-corner .c-glyph)
     check work  .cyw .cyw-tiles .cyw-queue .cyw-grid .cyw-lines .cyw-foot
     marks       mark.hl .hl-ask .hl-given .hl-ignore .hl-strong .hl-under .hl-dashed .hl-dotted
                 [data-hl] .hl-bar .hl-pop
     scratch     .scratch .scratch-c .scratch-bar .scratch-typed
     reference   .refd .refd-g .refd-e (.lit) .dirs
   The runner page is the whole page: a sticky 64px top bar (56 on a phone), the column
   (560-700px, centred in what the calculator dock and the right slot leave), and a fixed
   68px footer (64 plus the safe area on a phone).
   ========================================================================== */

/* ------------------------------------------------------------------ workspace */

.ws { position: relative; }
.ws > .q-figure, .ws > .q-fig { margin: 4px 0 18px; }
figure.q-figure { margin: 4px 0 18px; }

/* decision 7: one quiet line above the question, sentence case, muted, no icon */
.ws-headline { flex-wrap: wrap; gap: 6px 10px; margin-bottom: 14px; font: 500 13.5px var(--font); text-transform: none; letter-spacing: 0; color: var(--soft); }
.ws-headline .ws-skill { display: inline-flex; align-items: center; gap: 8px; color: var(--soft); }
.ws-headline .ws-diff::before { content: "·"; margin-right: 4px; color: var(--faint); }
.ws-headline .dbars { font-size: 13px; color: var(--soft); }
.ws-headline .ws-type { color: var(--soft); letter-spacing: .08em; }
.ws-headline .ws-type::before { content: "·"; margin-right: 10px; color: var(--faint); }
.ws-headline .ws-diff { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; }
.ws-headline .ws-level { font: 500 11px var(--mono); color: var(--soft); }
.ws-headline .ws-fmt { padding: 2px 7px; border-radius: 6px; background: var(--tile); color: var(--ink); letter-spacing: .08em; }

/* your rule for this type (P21) */
.ws-rule { margin: 0 0 14px; padding: 8px 12px; border-radius: var(--radius); background: var(--wash); font: 400 14px/1.45 var(--font); color: var(--ink); }
.ws-rule summary { cursor: pointer; list-style: none; }
.ws-rule summary::-webkit-details-marker { display: none; }
.ws-rule summary::after { content: " ▸"; color: var(--soft); }
.ws-rule[open] summary::after { content: " ▾"; }
.ws-rule-q { margin-top: 6px; color: var(--soft); font-size: 13px; }
.ws-rule-q .quiet { font-size: 13px; }

/* ranges in the stem: Read the ask (P8), a quiz's clue and ideas (W1, W2), a drawn blank */
.q-stem .span-ask { text-decoration: underline dashed var(--soft) 1.5px; text-underline-offset: 4px; }
.q-stem .span-clue { background: var(--wash); box-shadow: inset 0 -2px 0 var(--amber); border-radius: 2px; }
.q-stem .span-idea { background: var(--wash-2); border-radius: 2px; }
.q-stem .span-idea[data-label]::after { content: " " attr(data-label); font: 500 11px var(--mono); color: var(--soft); }
.q-stem .blank { display: inline-block; min-width: 4em; color: transparent; border-bottom: 1.5px solid var(--ink); line-height: 1; vertical-align: baseline; }

.ws-watch { margin-top: 14px; font: 400 14px/1.45 var(--font); color: var(--ink); }
.ws-hintbox { margin-top: 16px; display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); }
.ws-hint-l { font: 400 15px/1.5 var(--serif); color: var(--ink); }
.ws-hint-l b { font: 600 13.5px var(--font); }

/* a staged item: the options wait under a prompt */
.ws-stage { margin-top: 22px; padding: 16px 18px; border-radius: var(--radius-card); background: var(--tile); display: grid; gap: 10px; justify-items: start; }
.stage-q { font: 600 15px/1.4 var(--font); color: var(--ink); }
.stage-opts { display: grid; gap: 8px; width: 100%; list-style: none; padding: 0; }
.stage-opts .btn { width: 100%; justify-content: flex-start; gap: 10px; }
.opts.staged { display: none; }

/* choices */
.opts-wrap { position: relative; }
.ws .opts { list-style: none; padding: 0; }
/* letter | text (and its caption under it) | the ✓ or ✕: the text column never gives way to a label */
.ws .opt { grid-template-columns: 30px minmax(0, 1fr) auto; row-gap: 2px; }
.ws .opt .l { grid-row: 1 / span 2; }
.ws .opt .t { grid-column: 2; grid-row: 1; min-width: 0; overflow-wrap: anywhere; }
/* the scroll sits inside the text cell: a scroll container as the grid item has no height floor, and the letter's span then pads a second row */
.ws .opt .t.tex > .katex { display: block; overflow-x: auto; overflow-y: hidden; }
.ws .opt .mk { grid-column: 3; grid-row: 1 / span 2; width: auto; height: auto; border-radius: 0; box-shadow: none; background: none; font: 700 18px var(--font); color: var(--ink); }   /* a bare mark: Today's round .mk badge must not ring it */
.ws .opt.ok .mk { color: var(--amber-deep); }
.ws .opt .opt-cap { grid-column: 2; grid-row: 2; font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.ws .opt .opt-cap:empty, .ws .opt .mk:empty { display: none; }
.ws .opt.ok .opt-cap { color: var(--ink); }
.ws .opt.picked .l { background: var(--amber); box-shadow: none; color: var(--ink-deep); }
.ws .opt.picked.saved::after { content: "Saved"; font: 500 11px var(--mono); color: var(--soft); }
.ws .opt[aria-disabled="true"] { cursor: default; }
.ws .opts.done .opt.tried { opacity: .6; }
.ws .opts.busy .opt, .ws.is-busy .opt { cursor: progress; }
@media (min-width: 640px) {
  /* top-aligned: a tried option's line under it never drops its neighbour to its middle */
  .ws .opts.two { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* the gap is the strike's own margin, so a row with no strike or Undo showing keeps the full width */
.opt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.opt-row > .opt { grid-column: 1; }
.opt-row > .strike, .opt-row > .undo { grid-column: 2; grid-row: 1; margin-left: 8px; }
.opt-row > .opt-why, .opt-row > .opt-crowd { grid-column: 1 / -1; }
.strike {
  appearance: none; border: 0; background: none; cursor: pointer; padding: 0;
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--ink);
}
.strike span {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1.5px var(--ink); font: 600 13px var(--font); position: relative;
}
.strike span::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 1.5px; background: currentColor; transform: rotate(-35deg); }
@media (hover: hover) and (pointer: fine) { .strike:hover span { background: var(--tile-2); } }
.opt-row > .undo { min-height: 40px; padding: 0 8px; }
.opt-row.out > .opt { opacity: .42; }
.opt-row.out > .opt .t { text-decoration: line-through; text-decoration-thickness: 1px; }
.opt-row.out > .opt .l { box-shadow: none; outline: 1.5px dashed var(--soft); outline-offset: -1.5px; color: var(--soft); background: none; }
.opt-row.tried > .opt { opacity: .55; }
.opt-row.tried > .opt .t { text-decoration: line-through; text-decoration-thickness: 1px; }
/* an inline-grid fraction doesn't inherit its parent's line-through, so it carries its own */
.opt-row.out > .opt .t .frac, .opt-row.tried > .opt .t .frac { text-decoration: line-through; text-decoration-thickness: 1px; }
/* X6: a hold strikes on touch; the ring fills while it counts */
.opt-row.pressing > .opt { box-shadow: inset 0 0 0 1.5px var(--soft); }
.opt-row.pressing > .opt .l { background: conic-gradient(var(--tile-2) var(--p, 0%), transparent 0); animation: hold .45s linear forwards; }
@property --p { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@keyframes hold { to { --p: 100%; } }
.ws .opt { -webkit-touch-callout: none; }

/* every option's reason after the reveal (P1, W1), and the crowd */
.opt-why { margin: 6px 0 2px 46px; display: grid; gap: 4px; }
.opt-why-l { font: 500 13.5px/1.45 var(--font); color: var(--soft); }
.opt-why-l b { font-weight: 700; color: var(--ink); margin-right: 1px; }
.opt-why-l.mine { color: var(--ink); font-weight: 600; }
.opt-why-l.key { color: var(--ink); }
.opt-why-acts { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.opt-why-acts .quiet { font-size: 12.5px; min-height: 32px; }
.ws.why-off .opt-why { display: none; }
.ws-whyhead { margin-top: 18px; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.ws-whyhead[aria-expanded="false"] svg { transform: rotate(-90deg); }
.ws-whyhead + .opts-wrap .opts { margin-top: 10px; }
.opt-crowd { margin: 4px 0 2px 46px; display: flex; align-items: center; gap: 10px; }
.opt-crowd .bar { flex: 0 1 160px; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.opt-crowd .bar i { display: block; height: 100%; background: var(--ink); }
.opt-crowd .meta { font-size: 11.5px; white-space: nowrap; }

/* a link inside a line of text: no pull-out margins */
.qlink {
  appearance: none; border: 0; background: none; cursor: pointer; padding: 0; margin: 0;
  font: inherit; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--faint);
  text-underline-offset: 3px; vertical-align: baseline;
}
.qlink:hover { text-decoration-color: currentColor; }

/* P5: the choices under a paper panel until you have your own answer. The panel shares the
   options' grid cell, so the wrap grows to whichever is taller: a 2x2 grid is shorter than the field */
.opts.covered .opt-row { visibility: hidden; }
.opts-wrap:has(> .ws-cover:not([hidden])) { display: grid; }
.opts-wrap > .opts, .opts-wrap > .ws-cover { grid-area: 1 / 1; }
.ws-cover {
  z-index: 1; margin-top: 26px;
  display: grid; align-content: start; gap: 8px; padding: 18px 20px; border-radius: var(--radius-card);
  background: var(--tile-2);
}
.ws-cover .cover-lead { font: 400 14.5px/1.4 var(--font); color: var(--ink); }
.ws-cover .field { max-width: 320px; }
.cover-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 4px; }
.cover-acts .btn { background: var(--paper); }   /* a button on the panel, not the panel's colour */

/* grid-in */
.spr { margin-top: 26px; }
.spr .label { margin-bottom: 8px; }
.spr .grid-in { margin-top: 0; }
.spr .grid-in .field { max-width: 360px; }
.spr .grid-in.saved .field { box-shadow: inset 0 0 0 1.5px var(--ink); }
.spr .field.tried { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--soft); }
.spr-preview { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 28px; margin-top: 10px; }
.spr-preview .k-pre { font: 500 12px var(--mono); color: var(--soft); }
.spr-preview .pv { display: inline-flex; align-items: center; gap: 4px; font: 400 19px var(--serif); color: var(--ink); }
.frac { display: inline-grid; justify-items: center; line-height: 1.05; vertical-align: middle; font: 400 16px var(--serif); }
.frac .fn { padding: 0 3px 1px; border-bottom: 1.3px solid currentColor; }
.frac .fd { padding: 1px 3px 0; }
.spr-preview .approx { margin-left: 6px; font: 500 13px var(--mono); color: var(--soft); }
.spr-rule { margin-top: 8px; max-width: 60ch; }
.spr-hint { color: var(--ink); }
.spr-nudge { margin-top: 8px; padding: 8px 12px; border-radius: var(--radius); background: var(--wash); font: 500 13px/1.45 var(--font); color: var(--ink); }
.spr-dirs { max-width: 440px; display: grid; gap: 10px; }
.spr-dirs-h { font: 700 15px var(--font); }
.spr-dirs ul { padding-left: 18px; display: grid; gap: 4px; font: 400 13.5px/1.45 var(--font); }
.spr-dirs .table { font-size: 12.5px; }

/* the answer pad (X6): 15 keys, pinned by the runner above its footer */
.pad { margin-top: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 360px; }
.pad-k {
  appearance: none; border: 0; cursor: pointer; height: var(--touch); border-radius: var(--radius);
  background: var(--tile); color: var(--ink); font: 500 18px var(--mono); touch-action: manipulation;
}
.pad-k.wide { grid-column: span 2; font: 600 14px var(--font); }
.pad-k:active { background: var(--tile-2); }

/* under the choices: Hint, tries left, Skip, the tap hint, Check anyway */
.ws-under { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.ws-under .quiet { display: inline-flex; align-items: center; gap: 6px; }
.ws-tries { font: 500 13px var(--mono); color: var(--ink); }
.ws-taphint, .ws-fast { font: 500 12.5px var(--font); color: var(--soft); }
.ws-fast { color: var(--ink); }
.ws-slip { margin-top: 14px; font: 500 13px/1.4 var(--font); color: var(--soft); }
.ws-err { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.ws-local { margin-top: 12px; font: 600 14.5px var(--font); color: var(--ink); }
.ws-local:empty { display: none; }

/* review with answers hidden: nothing of the verdict shows until a pick */
.ws.answers-hidden .opt.ok, .ws.answers-hidden .opt.no { background: var(--tile); box-shadow: none; }
.ws.answers-hidden .opt .l { background: none; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.ws.answers-hidden .opt.picked { background: var(--wash); box-shadow: inset 0 0 0 1.5px var(--amber); }
.ws.answers-hidden .opt.picked .l { background: var(--amber); box-shadow: none; color: var(--ink-deep); }
.ws.answers-hidden .opt .mk, .ws.answers-hidden .opt .opt-cap, .ws.answers-hidden .opt-why,
.ws.answers-hidden .opt-crowd, .ws.answers-hidden .ws-verdict, .ws.answers-hidden .ws-whyhead { display: none; }
.ws.answers-hidden .opts.done .opt { opacity: 1; cursor: pointer; }
.ws.answers-hidden .grid-in.ok .field, .ws.answers-hidden .grid-in.no .field { background: var(--tile); box-shadow: none; text-decoration: none; color: var(--ink); }

/* ------------------------------------------------------------------ verdict slot (G4) */

.ws-verdict { gap: 12px; }
.v-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font: 600 16px var(--font); color: var(--ink); }
.v-head b { font-weight: 700; margin-right: 2px; }
.v-glyph { width: 24px; height: 24px; margin-right: 10px; display: inline-grid; place-items: center; font: 700 18px var(--font); }
.v-head.ok .v-glyph { color: var(--amber-deep); }
.v-head.no .v-glyph { color: var(--ink); }
.v-head.blank .v-glyph { color: var(--soft); }
.v-bit { font: 500 13px var(--mono); color: var(--soft); font-variant-numeric: tabular-nums; white-space: pre-wrap; }   /* a flex item drops its leading space */
.v-mastery { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font: 500 13.5px var(--font); color: var(--ink); }
.v-mastery .glyph { width: 18px; height: 18px; }
.v-mastery .mbar { width: 120px; flex: none; }
.v-mword { font-weight: 600; }

.abox-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.abox { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--radius); background: var(--tile); }
.abox .k { margin: 0; }
.abox-v { font: 400 17px/1.4 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.abox.ok { background: var(--wash); box-shadow: inset 0 0 0 1.5px var(--amber); }
.abox.no { box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--paper); }
.abox.blank { outline: 1.5px dashed var(--faint); outline-offset: -1.5px; background: var(--paper); }

/* inline, so the trap and its counts run on after "Fixed" and wrap as a sentence */
.v-fixed { font: 500 14.5px/1.4 var(--font); color: var(--ink); }
.v-fixed svg { color: var(--amber-deep); vertical-align: -3px; margin-right: 6px; }
.v-fixed b { font-weight: 700; }
.v-fixed.pop { animation: fixedin .2s var(--ease) both; }
@keyframes fixedin { from { transform: scale(.96); opacity: 0; } }
.v-note { padding: 10px 14px; border-radius: var(--radius); box-shadow: inset 0 0 0 1.5px var(--ink); font: 400 14px/1.5 var(--font); color: var(--ink); }
.v-line { font: 400 14px/1.5 var(--font); color: var(--ink); }
.v-ladder { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.v-line b { font-weight: 600; }
.v-soft, .v-crowd, .v-then { color: var(--soft); }
.v-ok { font-weight: 600; }
.v-new a { font-size: 13px; }
.v-struck-key { font-weight: 600; }
.v-formula .v-f { font-family: var(--serif); font-size: 15px; }
.check-inline { display: inline-flex; align-items: center; gap: 6px; font: 500 13.5px var(--font); cursor: pointer; }
.trap-chip { display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 6px; background: var(--tile-2); font: 500 11px var(--mono); letter-spacing: .08em; color: var(--ink); }
.mistake-check { display: block; margin-top: 2px; font: 400 13px/1.45 var(--font); color: var(--soft); }
.v-cause { display: grid; gap: 6px; }
.v-cause .k { margin: 0; }
.v-habit { height: 32px; }
.habit-pop { display: grid; gap: 6px; max-width: 300px; }
.v-rule { display: grid; gap: 6px; }
.v-rule-row { display: flex; gap: 8px; flex-wrap: wrap; }
.v-rule-row .field { flex: 1 1 220px; }
.v-queued { color: var(--soft); font-size: 13px; }

/* the explanation card (P1): Steps or Method, Short, Desmos way */
.x-toggle { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; justify-self: start; }
.x-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.x-card { padding: 16px 18px 18px; border-radius: var(--radius-card); background: var(--tile); display: grid; gap: 10px; }
.x-head { display: grid; gap: 2px; }
.x-title { font: 700 15px var(--font); color: var(--ink); }
.x-type { font: 400 13.5px/1.45 var(--font); color: var(--soft); }
.x-type b { color: var(--ink); font-weight: 600; }
.x-tabs .tablist { margin: 0; }
.x-panel { display: grid; gap: 10px; }
.x-panel .why { font-size: 16.5px; }
.steps { list-style: none; padding: 0; display: grid; gap: 6px; counter-reset: none; }
.step { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 10px; padding: 8px 10px; border-radius: var(--radius); font: 400 17px/1.5 var(--serif); color: var(--ink); }
.step:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.step-n { font: 500 12px var(--mono); color: var(--soft); padding-top: 4px; }
.step-t { min-width: 0; overflow-wrap: anywhere; }
.step-had { grid-column: 2; font: 500 12px var(--font); color: var(--soft); }
.step.diverge, .step.see { box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--paper); }
.step-cmp { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 6px; font: 400 15px/1.45 var(--serif); }
.step-cmp b { font: 600 13px var(--font); }
.step-why { color: var(--soft); font-family: var(--font); font-size: 13px; }
.x-exprs { display: grid; gap: 4px; padding-left: 22px; font: 400 16px var(--serif); }
.x-desmos .btn { justify-self: start; }
.x-typed { display: grid; gap: 4px; }
.x-typed ol { padding-left: 22px; font: 400 15px var(--serif); }

/* the action row (G4): wraps on a phone, never a menu */
.ws-actions { margin-top: 2px; }
.q-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.q-actions .btn svg { width: 16px; height: 16px; }
.split { display: inline-flex; align-items: stretch; }
.split > :first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split > .split-caret { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 0 8px; margin-left: 1px; min-width: 32px; justify-content: center; height: auto; }   /* as tall as a verb with its second line */
.split.primary > .split-caret { box-shadow: inset 1px 0 0 rgba(30, 30, 30, .18); margin-left: 0; }

/* the split Check (P7) */
.split-check { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.split-check .kbd { margin-left: 4px; }
/* D: Sure, Not sure, Guessing share one height and one radius; only the fill differs */
.split-check .sc-part { height: var(--ctl); min-height: 0; padding: 0 16px; border-radius: var(--radius); font: 600 14.5px/1 var(--font); letter-spacing: 0; gap: 6px; white-space: nowrap; }
@media (hover: none) { .split-check .kbd, .ws-bar .kbd { display: none; } }
@media (max-width: 759px) {
  .split-check.split { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; gap: 6px; }
  .split-check.split > * { min-width: 0; padding-left: 6px; padding-right: 6px; justify-content: center; }
}

.ws-bar { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ws-bar:empty { display: none; }
.ws-inline .ws-bar, .ws-quiz .ws-bar { margin-top: 18px; }

/* ------------------------------------------------------------------ tools (R50) */

.tools-row { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.tools-row:empty { display: none; }
.tool {
  appearance: none; border: 0; cursor: pointer; min-height: var(--touch); min-width: 56px; padding: 4px 10px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: var(--radius); background: none; color: var(--ink); font: 600 11.5px var(--font);
}
.tools-row .tool { flex-direction: row; gap: 8px; font-size: 13.5px; background: var(--tile); padding: 0 14px; }
.tool svg { width: 20px; height: 20px; flex: none; }
.tool[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--amber); }
.tool[aria-pressed="true"] svg { color: var(--amber-deep); }
@media (hover: hover) and (pointer: fine) { .tool:hover { background: var(--tile-2); } }

/* ------------------------------------------------------------------ calculator (QBank 2.9, Tests 4.8) */

.calc { z-index: 45; }
.calc[hidden] { display: none; }
.calc.floating { min-width: 320px; min-height: 360px; }
.calc.floating.big { left: 20px !important; right: 20px !important; top: 72px !important; width: auto !important; height: calc(100dvh - 96px) !important; }
.calc.docked { position: relative; inset: auto; z-index: auto; width: 100%; height: 100%; min-height: 360px; border-radius: 0; box-shadow: none; border-left: 1px solid var(--line); }
.calc.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; height: 62dvh; border-radius: 16px 16px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.calc-bar { gap: 8px; user-select: none; }
.calc.docked .calc-bar { cursor: default; }
.calc-title { flex: 1; min-width: 0; }
.calc-acts { display: flex; align-items: center; gap: 2px; }
.calc-btn {
  appearance: none; border: 0; background: none; cursor: pointer; height: 32px; padding: 0 8px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 5px; color: var(--ink); font: 600 12px var(--font); letter-spacing: 0; text-transform: none;
}
.calc-btn:hover { background: var(--tile-2); }
.calc-grab { display: none; }
.calc.sheet .calc-bar { cursor: ns-resize; justify-content: flex-start; position: relative; padding-top: 8px; height: 50px; }
.calc.sheet .calc-grab { display: block; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--faint); }
.calc-walk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px; background: var(--wash); font: 500 13px/1.4 var(--font); color: var(--ink); }
.calc-walk-note { flex: 1 1 180px; }
.calc-grip {
  position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 50%, var(--faint) 50%, var(--faint) 60%, transparent 60%, transparent 70%, var(--faint) 70%, var(--faint) 80%, transparent 80%);
}
html.calc-sheet-open body { padding-bottom: var(--calc-sheet-h, 62dvh); }

/* the scientific engine, when Desmos is unavailable (tests.md item 74) */
.sci { height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; overflow: auto; }
.sci-why { font: 400 12.5px/1.4 var(--font); color: var(--soft); }
.sci-why b { color: var(--ink); font-weight: 600; }
.sci-hist { list-style: none; padding: 0; margin: 0; flex: 1 1 60px; min-height: 60px; overflow: auto; display: grid; align-content: end; gap: 2px; }
.sci-hist li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sci-line { appearance: none; border: 0; background: none; cursor: pointer; text-align: left; padding: 4px 6px; border-radius: 6px; font: 400 14px var(--mono); color: var(--ink); display: flex; gap: 10px; min-width: 0; }
.sci-line:hover { background: var(--tile); }
.sci-e { color: var(--soft); overflow-wrap: anywhere; }
.sci-row { display: flex; gap: 6px; align-items: center; }
.sci-in { flex: 1; min-width: 0; height: var(--ctl); font: 400 16px var(--mono); }
.sci-out { min-height: 20px; font: 500 14px var(--mono); color: var(--ink); }
.sci-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.sci-k { appearance: none; border: 0; cursor: pointer; height: 36px; border-radius: 8px; background: var(--tile-2); color: var(--ink); font: 500 14px var(--mono); }
.sci-k.d { background: var(--tile); }
.sci-k.eq { background: var(--amber); color: var(--ink-deep); font-weight: 700; }
.sci-k:active { transform: scale(.97); }

/* ------------------------------------------------------------------ twin sheet (T5) */

.twin-sheet .sheet-body { display: grid; gap: 14px; }
.twin-recall { border-radius: var(--radius); background: var(--tile); padding: 10px 14px; font: 500 14px/1.45 var(--font); }
.twin-recall summary { cursor: pointer; }
.twin-recall-q { margin-top: 12px; }
.twin-k { margin: 0; }
.twin-msg:empty { display: none; }
.twin-foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* ------------------------------------------------------------------ the runner shell (R21; QBank 2.1-2.4, 2.15; Tests 1, 4.3, 4.12) */

html.has-runner, html.has-runner body { background: var(--paper); }
.rn { --rn-top: 64px; --rn-foot: 68px; --rn-pad: 20px; position: relative; min-height: 100dvh; background: var(--paper); color: var(--ink); }
.rn [hidden] { display: none !important; }

/* the top bar: Exit, the title; the clock; the tools */
.rn-top {
  position: sticky; top: 0; z-index: 30; height: var(--rn-top);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 0 var(--rn-pad); background: var(--paper); box-shadow: inset 0 -1px 0 var(--line);
}
.rn-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rn-exit {
  appearance: none; border: 0; background: none; cursor: pointer; flex: none;
  height: 40px; min-width: 40px; padding: 0 12px 0 8px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 14px var(--font); color: var(--ink);
}
@media (hover: hover) and (pointer: fine) { .rn-exit:hover { background: var(--tile); } }
.rn-exam .rn-exit-l { display: none; }
@media (min-width: 1180px) { .rn-exam .rn-exit-l { display: inline; } }
.rn-titles { display: flex; align-items: baseline; gap: 4px 12px; min-width: 0; }
.rn-title { min-width: 0; font: 600 14px/1.25 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-exam .rn-title { font: 700 15px/1.25 var(--font); }
.rn-dirs { display: inline-flex; align-items: center; gap: 2px; font-size: 13.5px; white-space: nowrap; min-height: 32px; }
.rn-cond { flex: none; padding: 3px 8px; border-radius: 6px; background: var(--tile); font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.rn-mid { display: flex; align-items: center; justify-content: center; gap: 6px; }
.rn-tools { display: flex; align-items: center; justify-content: flex-end; gap: 2px; min-width: 0; }

/* a tool: a 20px icon over an 11.5px label; pressed is an ink label, an amber icon and a 2px amber underline */
.rn-tool { min-width: 56px; padding: 4px 8px; font: 600 11.5px/1.1 var(--font); white-space: nowrap; }
.rn-tool:disabled { opacity: .45; cursor: default; }
.rn-tool[aria-pressed="true"] { color: var(--ink); }
.rn-tool[aria-pressed="true"] svg { color: var(--amber-deep); }

/* the clock (UI.timer) */
.timer { display: grid; justify-items: center; }
.t-row { display: flex; align-items: center; gap: 6px; }
.t-read { display: inline-grid; justify-items: center; line-height: 1; min-width: 5.2ch; }
.t-k { margin: 0 0 3px; font-size: 10.5px; }
.t-digits { font: 500 18px/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--ink); }
.rn-exam .t-digits { font-size: 22px; }
.t-cap { margin-top: 3px; font: 500 10.5px/1 var(--font); color: var(--soft); }
.rn-exam .timer:not(.untimed) .t-cap { display: none; }
.t-hide {
  appearance: none; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px; border-radius: 8px;
  font: 500 12px var(--font); color: var(--soft);
}
.rn-exam .t-hide { flex-direction: column; gap: 1px; height: 40px; padding: 0 6px; font-size: 11.5px; }
@media (hover: hover) and (pointer: fine) { .t-hide:hover { background: var(--tile); color: var(--ink); } }
.timer.t-hidden .t-digits { color: var(--soft); letter-spacing: .08em; }
.timer.t-low .t-digits { color: var(--ink-deep); font-weight: 600; }
.timer.t-last .t-digits { font-weight: 700; }
.timer.t-pulse .t-digits { animation: tpulse .9s var(--ease) 1; }
@keyframes tpulse { 40% { transform: scale(1.14); } }
.timer.t-paused .t-digits { color: var(--soft); }
.t-delta { margin: 3px 0 0; font: 500 12px/1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.t-extra { margin: 2px 0 0; font: 500 11px/1 var(--mono); color: var(--soft); }

/* the body: the calculator dock on the left, the column, one slot on the right (X9) */
.rn-body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
.rn-col { grid-column: 2; width: 100%; max-width: calc(700px + 2 * var(--rn-pad)); justify-self: center; padding: clamp(14px, 3vh, 32px) var(--rn-pad) calc(var(--rn-foot) + 72px); outline: none; }
.rn.has-dock .rn-col, .rn.has-slot .rn-col { min-width: calc(560px + 2 * 16px); padding-left: 16px; padding-right: 16px; }
.rn-dock {
  grid-column: 1; position: sticky; top: var(--rn-top); width: var(--dock-w, 420px);
  height: calc(100dvh - var(--rn-top) - var(--rn-foot)); display: flex;
}
.rn-dock > .calc.docked { flex: 1; min-width: 0; height: 100%; border-left: 0; border-right: 1px solid var(--line); }
.rn-dock-grip { position: absolute; top: 0; bottom: 0; right: -5px; width: 10px; z-index: 2; cursor: ew-resize; touch-action: none; }
.rn-dock-grip::after { content: ""; position: absolute; top: 50%; left: 3px; width: 4px; height: 36px; margin-top: -18px; border-radius: 2px; background: var(--faint); opacity: 0; transition: opacity .16s var(--ease); }
.rn-dock:hover .rn-dock-grip::after, .rn-dock-grip:focus-visible::after { opacity: 1; }
.rn-passage { grid-column: 1 / -1; }
.rn-slot {
  grid-column: 3; position: sticky; top: calc(var(--rn-top) + 12px); width: 300px; margin: 12px 16px 0 0;
  max-height: calc(100dvh - var(--rn-top) - var(--rn-foot) - 24px); display: flex; flex-direction: column;
  border-radius: var(--radius-card); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line);
}
.rn-slot.float { position: fixed; right: 16px; top: calc(var(--rn-top) + 8px); z-index: 35; margin: 0; box-shadow: 0 0 0 1px var(--line), var(--shadow-pop); }
.rn-slot-head { flex: none; display: flex; align-items: center; gap: 2px; padding: 4px 4px 0 6px; box-shadow: inset 0 -1px 0 var(--line); }
.rn-slot-head .x { width: 32px; height: 32px; margin-left: auto; }
.rn-slot-tabs { display: flex; gap: 0; min-width: 0; }
.rn-slot-tabs [role="tab"] {
  appearance: none; border: 0; background: none; cursor: pointer; position: relative;
  min-height: 40px; padding: 0 6px; font: 600 12px var(--font); color: var(--soft); white-space: nowrap;
}
.rn-slot-tabs [aria-selected="true"] { color: var(--ink); }
.rn-slot-tabs [aria-selected="true"]::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 2px; border-radius: 2px; background: var(--amber); }
.rn-slot-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 18px; }
.rn-slot-body .spr-dirs { max-width: none; }

/* the progress rail (practice) and strip (exam): 4px segments in a 16px hit area */
.rn-rail { margin-bottom: 14px; }
.rn-segs { position: relative; display: flex; align-items: center; gap: 4px; height: 16px; }
.rn-seg { position: relative; flex: 1 1 0; height: 16px; padding: 0; border: 0; background: none; cursor: pointer; }
.rn-exam .rn-segs { justify-content: center; }
.rn-exam .rn-seg { max-width: 28px; }
.rn-tool .ts { display: none; }
.rn-seg::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 4px; border-radius: 2px; background: var(--st-fill, var(--line)); }
.rn-seg:is([data-status="unanswered"], [data-status="future"], [data-status="not_reached"])::before { background: var(--line); }
.rn-seg[data-status="skipped"]::before { background: repeating-linear-gradient(90deg, var(--soft) 0 3px, transparent 3px 5px); }
.rn-seg[data-status="mixed"]::before { background: linear-gradient(90deg, var(--amber) 50%, var(--ink) 50%); }
.rn-seg[data-status="voided"]::before { background: var(--faint); }
.rn-seg[aria-current="true"]::before { box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3px var(--ink); }
.rn-seg[data-flag]::after { content: ""; position: absolute; left: 50%; top: -1px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--amber); }
.rn-seg[data-queued]::before { box-shadow: 0 0 0 1.5px var(--amber-deep); }
.rn-seg[data-queued][aria-current="true"]::before { box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3px var(--ink); }
.rn-seg:disabled { cursor: default; }
.rn-seg.add::before { animation: segadd .32s var(--ease) both; transform-origin: left center; }
@keyframes segadd { from { transform: scaleX(0); } }
.rn-seg:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-radius: 3px; }
.rn-segs.bar { height: 16px; }
.rn-segs.bar::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 4px; border-radius: 2px; background: var(--line); }
.rn-fill { position: absolute; left: 0; top: 6px; height: 4px; border-radius: 2px; background: var(--ink); }
.rn-tick { position: absolute; top: 3px; left: -3px; width: 2px; height: 10px; border-radius: 1px; background: var(--amber-deep); }
.rn-tick.end { left: auto; right: -3px; }
.rn-tick.cp { background: var(--faint); height: 8px; top: 4px; }
.rn-railtext { margin: 6px 0 0; font: 500 12px/1.3 var(--mono); color: var(--soft); font-variant-numeric: tabular-nums; }

/* the question strip (practice): number, skill, type, difficulty; the tools; the stopwatch */
.rn-qstrip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px;
  min-height: 48px; padding: 6px 6px 6px 8px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line);
}
.rn-qleft { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 100%; }
.rn-qleft > .rn-watch { margin-left: auto; }
.rn-num { flex: none; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--ink); color: var(--on-ink); font: 700 14px var(--font); font-variant-numeric: tabular-nums; }
.rn-qinfo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; font: 600 13px/1.3 var(--font); color: var(--ink); }
.rn-skill { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.rn-skill > svg, .rn-skill > .glyph { width: 18px; height: 18px; flex: none; }
.rn-type { color: var(--soft); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rn-type::before { content: "·"; margin-right: 8px; color: var(--faint); }
.rn-diff { display: inline-flex; align-items: center; gap: 6px; }
.rn-level { font: 500 11px var(--mono); color: var(--soft); }
.rn-fmt { padding: 2px 7px; border-radius: 6px; background: var(--tile); font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.rn-again { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px; background: var(--wash); font: 600 12px var(--font); }
.rn-again::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.rn-qtools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 2px; }
.rn-qstrip .rn-qtools { flex: 1 1 100%; padding-left: 34px; }
.rn-qtools .tool { flex-direction: row; gap: 5px; min-height: 36px; min-width: 0; padding: 0 6px; font: 600 12.5px var(--font); }   /* seven tools fit one row at 700 */
.rn-qtools .tool svg { width: 18px; height: 18px; }
.rn-qtools .tool.has svg { color: var(--amber-deep); }
.rn-qtools .rn-mark[aria-pressed="true"] { background: var(--wash); box-shadow: none; }
.rn-qtools .rn-mark[aria-pressed="true"] svg { color: var(--amber-deep); fill: var(--amber); }
.rn-watch { display: inline-grid; justify-items: end; gap: 3px; padding: 0 6px 0 8px; font: 500 13px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rn-watch-bar { display: block; width: 56px; height: 3px; border-radius: 2px; background: var(--track); overflow: hidden; }
.rn-watch-bar > i { display: block; height: 100%; background: var(--ink); }
.rn-watch.over { color: var(--amber-deep); }
.rn-watch.over .rn-watch-bar > i { background: var(--amber-deep); }
.rn-watch.over .rn-watch-t::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-radius: 50%; background: var(--amber-deep); vertical-align: 1px; }
@media (max-width: 999px) {
  .rn-qtools .tool { flex-direction: column; gap: 2px; min-height: 44px; padding: 2px 6px; font-size: 10.5px; }
}

/* the question header (exam): Q7, Mark for review, confidence, Save, Eliminate, Report */
.rn-qhead { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-height: 36px; }
.rn-qhead .rn-qleft { flex: none; }
.rn-qn { display: inline-grid; place-items: center; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--tile); font: 500 13px var(--mono); color: var(--ink); }
.rn-qhead .rn-qtools { flex: 1; justify-content: flex-start; }
.rn-qhead .tool { flex-direction: row; gap: 6px; min-height: 36px; min-width: 0; padding: 0 10px; font: 600 13.5px var(--font); }
.rn-qhead .tool svg { width: 18px; height: 18px; }
.rn-qhead .rn-mark[aria-pressed="true"] { background: var(--wash); box-shadow: none; }
.rn-qhead .rn-mark[aria-pressed="true"] svg { color: var(--amber-deep); fill: var(--amber); }
.rn-qhead [data-tool="report"] { font-weight: 500; font-size: 13px; color: var(--soft); }
.rn-spacer { flex: 1; }
.rn-conf button { font-size: 12.5px; height: 36px; }

.rn-why { margin: 10px 2px 0; font: 400 13px/1.45 var(--font); color: var(--soft); }
.rn-skipchip { margin-top: 10px; }
.rn-nudge {
  margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px;
  min-height: 40px; padding: 8px 12px; border-radius: var(--radius); background: var(--wash); font: 500 13.5px/1.4 var(--font); color: var(--ink);
}
.rn-nudge-acts { display: flex; gap: 6px; }
.rn-qarea { position: relative; }
.rn-q { margin-top: 22px; }
.rn-q .ws > .q-figure, .rn-q .ws > .q-fig { margin-top: 0; }
.rn-addnote { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; }
.rn-toolsrow { display: none; }
.rn-sprhelp { margin-top: 12px; padding: 8px 12px; border-radius: var(--radius); background: var(--tile); }
.rn-sprhelp summary { cursor: pointer; font: 600 13.5px var(--font); min-height: 32px; display: flex; align-items: center; }
.rn-sprhelp .spr-dirs { margin-top: 8px; }
.rn-skel { display: grid; gap: 12px; margin-top: 8px; }
.rn-skel-opts { display: grid; gap: 10px; margin-top: 14px; }
.rn-err { margin-top: 20px; display: grid; gap: 10px; justify-items: start; }
.rn-screen { min-height: 40vh; }
.rn-paused { margin: 12vh auto 0; max-width: 420px; display: grid; justify-items: center; gap: 10px; padding: 32px 28px; border-radius: var(--radius-card); background: var(--wash); text-align: center; }
.rn-paused-t { font: 500 32px var(--mono); }
.rn-q.rn-slide-l { animation: rnslide-l .16s var(--ease); }
.rn-q.rn-slide-r { animation: rnslide-r .16s var(--ease); }
@keyframes rnslide-l { from { transform: translateX(24px); opacity: .4; } }
@keyframes rnslide-r { from { transform: translateX(-24px); opacity: .4; } }

/* the footer: Back · "Question N of M ⌃" · Check / Next */
.rn-foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; min-height: var(--rn-foot);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px;
  padding: 10px var(--rn-pad) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--paper); box-shadow: inset 0 1px 0 var(--line);
}
.rn-fl, .rn-fr { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rn-fr { justify-content: flex-end; }
.rn-fm { display: flex; justify-content: center; }
.rn-falt { grid-column: 1 / -1; }
.rn-back { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.rn-back:disabled { opacity: .4; cursor: default; }
.rn-markfoot { display: none; }
.rn-navb {
  appearance: none; border: 0; cursor: pointer; height: 40px; padding: 0 14px; border-radius: 10px;
  display: inline-flex; align-items: center; gap: 8px; background: var(--tile); color: var(--ink); font: 600 14px var(--font); white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .rn-navb:hover { background: var(--tile-2); } }
.rn-navb[aria-expanded="true"] svg { transform: rotate(180deg); }
.rn-next { min-height: 44px; padding: 0 22px 0 26px; gap: 8px; }
.rn-next.quiet { padding: 0 10px; }
.rn-next .rn-enter { margin-left: 2px; }
@media (hover: none) { .rn-next .rn-enter { display: none; } }
.rn-check { display: flex; align-items: center; }
.rn-check .split-check { flex-wrap: nowrap; }
.rn-saved { font: 500 12px var(--mono); color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-saved[data-state="offline"], .rn-saved[data-state="error"] { color: var(--ink); }
.rn-who { font: 600 14px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
a.rn-who { font-weight: 500; font-size: 13px; }

/* the navigator (UI.navigator), in a popover over the footer or a bottom sheet */
.popover.rn-navpop { width: 440px; max-width: calc(100vw - 32px); max-height: 70dvh; padding: 18px 20px 20px; border-radius: 14px; }
/* :where keeps this under the phone sheet's width: 100% */
.rn-exam .popover.rn-navpop, .popover.rn-navpop:where(:has(.navp.exam)) { width: 560px; }
.navp { display: grid; gap: 12px; }
.navp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.navp-title { font: 700 15px/1.3 var(--font); }
/* the six views stay one row: it scrolls sideways before it wraps */
.navp-views .seg { max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.navp-views .seg > button { flex: none; padding: 0 9px; font-size: 13px; }
.navp-chips { gap: 8px 14px; }
.navp-chips .sw { flex: none; }
.navp-chips button > svg, .navp-chips button > .glyph { width: 16px; height: 16px; }
.navp-corner { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: var(--tile-2); font: 700 9px var(--font); color: var(--ink); }
.navp-cur { color: var(--soft); }
.navp-clear { appearance: none; border: 0; background: none; cursor: pointer; font: 600 12.5px var(--font); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.navp-grid { --cols: 8; --cell-gap: 6px; grid-template-columns: repeat(var(--cols), var(--cell, 40px)); }
.navp.exam .navp-grid { --cols: 10; --cell-gap: 8px; }
.navp-grid.timed .cell, .cyw-grid.timed .cell { height: 52px; grid-template-rows: auto auto; align-content: center; gap: 2px; }
.cell .c-sub { font: 500 10px/1 var(--mono); opacity: .85; }
.cell .c-glyph { width: 16px; height: 16px; }
.cell[data-status] > .c-corner { position: absolute; left: 3px; bottom: 2px; font: 700 9px/1 var(--font); color: var(--st-mark); }
.cell[data-queued] { box-shadow: 0 0 0 1.5px var(--amber-deep); }
.navp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding-top: 4px; }
.navp-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.navp-sum { margin: 0; }

/* Check your work (UI.checkYourWork) */
.cyw { display: grid; gap: 14px; }
.cyw-h { margin: 0; }
/* headings and screens that take focus on arrival: the focus moves for screen readers, no ring */
:is(.cyw-h, .rn-between, .rn-col, .rv-col)[tabindex="-1"]:focus { outline: none; }
.cyw-meta { margin: -8px 0 0; }
.cyw-lead { margin: 0; font: 400 15px/1.5 var(--font); color: var(--ink); }
.cyw-tiles .stat-v { font-size: 40px; }
.cyw-queue { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.cyw-queue:empty { display: none; }
.cyw-qchips button:disabled { opacity: .4; cursor: default; }
.cyw-order { display: inline-flex; align-items: center; gap: 8px; }
.cyw-show { display: flex; align-items: center; gap: 10px; }
.cyw-grid { --cols: 11; --cell: 44px; --cell-gap: 8px; grid-template-columns: repeat(var(--cols), var(--cell)); }
.cyw-lines { display: grid; gap: 10px; }
.cyw-lines:empty { display: none; }
.cyw-line { display: grid; gap: 8px; }
.cyw-line .mistake { font-size: 14.5px; font-weight: 500; }
.cyw-gos { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 19px; }
.cyw-pace { margin: 0; font: 500 13px var(--mono); color: var(--ink); }
.cyw-saving { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font: 500 14px var(--font); }
.cyw-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.cyw-status { margin: 0; font: 500 12px var(--mono); color: var(--soft); }
.cyw-acts { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.cyw-finish:disabled { opacity: .5; cursor: not-allowed; }

/* between modules (UI.between, X11) and the prediction grid */
.rn-between { display: grid; gap: 16px; max-width: 700px; outline: none; }
.rn-between-count { display: grid; gap: 12px; justify-items: start; padding: 18px 20px; border-radius: var(--radius-card); background: var(--wash); }
.rn-between-clock { font: 500 22px var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.rn-between-bar { display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.rn-between-bar > i { display: block; height: 100%; background: var(--amber); transition: width .25s linear; }
.rn-between-card { display: grid; gap: 6px; padding: 16px 18px; border-radius: var(--radius-card); background: var(--tile); }
.rn-between-next { margin: 0; font: 600 15px/1.4 var(--font); }
.rn-between-route { margin: 0; font: 500 14px var(--font); color: var(--ink); }
.rn-between-exit { justify-self: start; }
.rn-begin:disabled { opacity: .6; cursor: progress; }
.rn-predict { display: grid; gap: 10px; width: 100%; }
.rn-predict-h { margin: 0; font: 400 14.5px var(--font); }
.rn-predict-grid { --cell: 64px; --cell-gap: 8px; grid-template-columns: repeat(auto-fill, minmax(var(--cell), 1fr)); }
.rn-pcell {
  appearance: none; border: 0; cursor: pointer; min-height: 44px; padding: 4px 6px; border-radius: 8px;
  display: grid; justify-items: center; align-content: center; gap: 1px; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
  font: 600 14px var(--font);
}
.rn-pcell-l { font: 500 9.5px/1.15 var(--font); color: var(--soft); text-align: center; }
.rn-pcell[aria-pressed="true"] { outline: 2px dashed var(--ink); outline-offset: -3px; }
.rn-pcell:disabled { opacity: .4; cursor: default; }
.rn-predict-n { margin: 0; min-height: 18px; }

/* ------------------------------------------------------------------ highlights and notes (UI.annotate, X9) */

mark.hl { color: inherit; background: none; border-radius: 2px; }
mark.hl-given, [data-hl="given"], .hl-demo.hl-given { background: var(--wash); box-shadow: 0 0 0 1px var(--wash); }
mark.hl-strong, [data-hl="strong"], .hl-demo.hl-strong { background: var(--wash-2); text-decoration: underline 2px var(--amber); text-underline-offset: 3px; }
mark.hl-ask, [data-hl="ask"], .hl-demo.hl-ask { box-shadow: inset 0 0 0 1px var(--ink); border-radius: 3px; padding: 0 1px; }
mark.hl-ignore, [data-hl="ignore"], .hl-demo.hl-ignore { text-decoration: line-through 1.5px var(--ink); color: var(--soft); }
mark.hl-under, [data-hl="under"], .hl-demo.hl-under { text-decoration: underline 2px var(--amber); text-underline-offset: 3px; }
mark.hl-dashed, [data-hl="dashed"], .hl-demo.hl-dashed { text-decoration: underline dashed 1.5px var(--amber-deep); text-underline-offset: 4px; }
mark.hl-dotted, [data-hl="dotted"], .hl-demo.hl-dotted { text-decoration: underline dotted 2px var(--ink); text-underline-offset: 4px; }
mark.hl[data-note]::after, [data-hl][data-hl-note]::after {
  content: ""; display: inline-block; width: 7px; height: 6px; margin: 0 1px 0 3px; vertical-align: super; color: var(--amber-deep); background: var(--note-glyph);
}
.annotating mark.hl, .annotating [data-hl] { cursor: pointer; }
.annotating .q-stem, .annotating .q-table, .annotating .opt .t { cursor: text; }
.annotating .ws .opt, .annotating .ws .opt .t { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.popover.hl-bar { padding: 8px; max-width: min(700px, calc(100vw - 16px)); }
.hl-bar-in { display: grid; gap: 8px; }
.hl-sw { display: flex; flex-wrap: wrap; gap: 4px; }
.hl-b {
  appearance: none; border: 0; cursor: pointer; min-width: 32px; height: 36px; padding: 0 8px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 6px; background: var(--tile); color: var(--ink); font: 600 12px var(--font);
}
.hl-b[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--amber); background: var(--paper); }
@media (hover: hover) and (pointer: fine) { .hl-b:hover { background: var(--tile-2); } }
.hl-demo { font: 500 14px var(--serif); padding: 0 2px; }
.hl-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hl-pop { display: grid; gap: 10px; max-width: 320px; }
.hl-note { margin: 0; font: 400 14px/1.45 var(--font); white-space: pre-wrap; overflow-wrap: anywhere; }
.hl-note.none { color: var(--soft); }
.hl-ta { height: auto; min-height: 76px; padding: 10px 12px; resize: vertical; font: 400 14px/1.45 var(--font); }

/* notes: My note, and every note in the sitting */
.rn-notes { display: grid; gap: 12px; }
.rn-note-ed { display: grid; gap: 6px; }
.rn-note-ta { height: auto; min-height: 80px; padding: 10px 12px; resize: vertical; font: 400 14.5px/1.45 var(--font); }
.rn-note-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 18px; }
.rn-note-row {
  appearance: none; border: 0; cursor: pointer; text-align: left; width: 100%;
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; padding: 8px 10px; border-radius: var(--radius); background: var(--tile); color: var(--ink);
}
@media (hover: hover) and (pointer: fine) { .rn-note-row:hover { background: var(--tile-2); } }
.rn-note-n { font: 500 12.5px var(--mono); padding-top: 1px; }
.rn-note-t, .rn-note-ask { margin: 0; font: 400 13.5px/1.45 var(--font); overflow-wrap: anywhere; }
.rn-note-t + .rn-note-t, .rn-note-ask + .rn-note-t { margin-top: 4px; }
.rn-note-q { color: var(--soft); }
.rn-notepop { width: min(340px, calc(100vw - 48px)); }
.rn-detpop { max-width: 420px; }
.rn-details dd { overflow-wrap: anywhere; }
.rn-details dd > span:has(> .mono) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-bottom: 8px; }   /* room for Copy's padded target and its focus ring when it wraps */

/* ------------------------------------------------------------------ scratch (UI.scratch, X8) */

.has-scratch { position: relative; }
.scratch { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.scratch-c { position: absolute; left: 0; top: 0; }
.scratch.on .scratch-c { pointer-events: auto; touch-action: none; cursor: crosshair; }
.scratching .ws { -webkit-user-select: none; user-select: none; }
.rn-scratchtools { position: sticky; top: calc(var(--rn-top) + 6px); z-index: 6; margin-top: 10px; }
.scratch-bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 8px 24px -12px rgba(30, 30, 30, .35); width: fit-content; }
.scratch-bar .tool { flex-direction: row; gap: 6px; min-height: 40px; min-width: 0; padding: 0 10px; font: 600 12.5px var(--font); }
.scratch-typed { margin-top: 16px; display: grid; gap: 6px; position: relative; z-index: 5; }
.scratch-ta { height: auto; min-height: 76px; padding: 10px 12px; resize: vertical; font: 400 14px/1.45 var(--mono); }

/* ------------------------------------------------------------------ the reference, searchable (X9, P24), and Directions */

.refd { display: grid; gap: 10px; }
.refd-q { height: 40px; }
.refd-g summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.refd-e { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius); scroll-margin: 12px; }
.refd-e.lit { background: var(--wash); box-shadow: inset 0 0 0 1.5px var(--amber); }
.refd-art { flex: none; width: 60px; color: var(--ink); }
.refd-t { display: grid; gap: 2px; min-width: 0; }
.refd-t b { font: 600 12.5px var(--font); }
.refd-f { font: 400 15px/1.35 var(--serif); }
.refd-f i { font-style: italic; }
.refd-none { margin: 0; }
.dirs { display: grid; gap: 10px; font: 400 15px/1.55 var(--serif); }
.dirs ul { padding-left: 22px; display: grid; gap: 4px; list-style: disc; }
.dirs-sheet .table { margin-top: 6px; }
.dirs-skip { margin-top: 14px; }

/* ------------------------------------------------------------------ the review player (UI.review, R23; Report 1.13, Review 8) */

/* the frame: a full-viewport dialog in the practice session's layout (60px top bar, 700px column, bottom bar) */
dialog.rv-dlg { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--paper); color: var(--ink); }
dialog.rv-dlg[open] { display: block; }
dialog.rv-dlg::backdrop { background: var(--paper); }
html.rv-open { overflow: hidden; }
.rv { --rv-top: 60px; display: flex; flex-direction: column; min-height: 0; background: var(--paper); color: var(--ink); }
.rv [hidden] { display: none !important; }
.rv-dlg-in { height: 100dvh; }
.rv-top {
  flex: none; position: sticky; top: 0; z-index: 5; min-height: var(--rv-top);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 0 20px; background: var(--paper); box-shadow: inset 0 -1px 0 var(--line);
}
.rv-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rv-close {
  appearance: none; border: 0; background: none; cursor: pointer; flex: none; height: 40px; min-width: 40px; padding: 0 12px 0 8px; border-radius: 10px;
  display: inline-flex; align-items: center; gap: 6px; font: 600 14px var(--font); color: var(--ink);
}
@media (hover: hover) and (pointer: fine) { .rv-close:hover { background: var(--tile); } }
.rv-title { min-width: 0; font: 600 14px/1.25 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-nav { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
.rv-segs { width: min(440px, 100%); }
.rv-segs .rn-seg[data-filtered] { opacity: .3; }
.rv-navtext { font: 600 14px var(--font); white-space: nowrap; }
.rv-navpill {
  appearance: none; border: 0; cursor: pointer; height: 40px; padding: 0 14px; border-radius: 10px;
  display: inline-flex; align-items: center; gap: 8px; background: var(--tile); color: var(--ink); font: 600 14px var(--font); white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .rv-navpill:hover { background: var(--tile-2); } }
.rv-navpop { width: min(460px, calc(100vw - 32px)); max-height: 70dvh; overflow: auto; }
.rv-walkdots { display: inline-flex; gap: 5px; }
.rv-walkdots i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); }
.rv-walkdots i[data-done] { background: var(--amber); box-shadow: inset 0 0 0 1.5px var(--amber-deep); }
.rv-walkdots i[data-done="half"] { background: linear-gradient(90deg, var(--amber) 50%, transparent 50%); }
.rv-walkdots i[data-on] { outline: 2px solid var(--ink); outline-offset: 1px; }
.rv-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px; min-width: 0; }
.rv-tool { min-width: 56px; padding: 4px 8px; font: 600 11.5px/1.1 var(--font); white-space: nowrap; }
.rv-tool:disabled { opacity: .45; cursor: default; }
.rv-tools-col { justify-content: flex-start; gap: 6px; padding: 12px 16px 0; }
.rv-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.rv-col { width: 100%; max-width: calc(700px + 40px); margin: 0 auto; padding: clamp(14px, 3vh, 28px) 20px 28px; outline: none; }
.rv-foot {
  flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px;
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--paper); box-shadow: inset 0 1px 0 var(--line);
}
.rv-fl, .rv-fr { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rv-fr { justify-content: flex-end; }
.rv-fm { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.rv-prev { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.rv-prev:disabled, .rv-next:disabled { opacity: .4; cursor: default; }
.rv-next { gap: 6px; }
.rv-pos, .rv-miss { white-space: nowrap; }
.rv-postop .rv-pos { display: none; }
.rv-hint { margin: 26px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 16px; font: 500 13px var(--font); color: var(--ink); }
.rv-hk kbd { display: inline-block; min-width: 22px; min-height: 0; height: auto; padding: 3px 5px; margin-right: 4px; border-radius: 6px; background: var(--tile-2); box-shadow: inset 0 0 0 1px var(--line); font: 600 12px/1.3 var(--mono); text-align: center; }
@media (hover: none) { .rv-hint { display: none; } }

/* the pane: the same parts, in the page (Review 8) */
.rv-pane:not(.rv-dlg-in) { border: 1px solid var(--line); border-radius: var(--radius-card); overflow: clip; }
.rv-pane:not(.rv-dlg-in) .rv-top { position: static; grid-template-columns: minmax(0, 1fr) auto; min-height: 52px; padding: 0 14px; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.rv-pane:not(.rv-dlg-in) .rv-nav:empty, .rv-pane:not(.rv-dlg-in) .rv-left:empty { display: none; }
.rv-pane:not(.rv-dlg-in) .rv-tools { justify-content: flex-start; }
.rv-pane:not(.rv-dlg-in) .rv-scroll { overflow: visible; }
.rv-pane:not(.rv-dlg-in) .rv-col { padding: 16px 18px 20px; }
.rv-pane:not(.rv-dlg-in) .rv-foot { border-radius: 0 0 var(--radius-card) var(--radius-card); padding: 8px 14px; }

/* one question: the header */
.rv-item { display: grid; gap: 0; }
.rv-item.rv-slide-l { animation: rnslide-l .16s var(--ease); }
.rv-item.rv-slide-r { animation: rnslide-r .16s var(--ease); }
.rv-qhead { display: grid; gap: 6px; margin-bottom: 16px; }
.rv-h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rv-n { flex: none; display: inline-grid; place-items: center; height: 28px; padding: 0 9px; border-radius: 8px; background: var(--ink); color: var(--on-ink); font: 500 13px var(--mono); }
.rv-skill { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; font: 600 14px/1.3 var(--font); color: var(--ink); }
.rv-skill > svg, .rv-skill > .glyph { width: 18px; height: 18px; flex: none; }
.rv-dom { color: var(--soft); font-weight: 500; margin-right: -4px; }
.rv-type { color: var(--soft); font-weight: 500; }
.rv-type::before { content: "·"; margin-right: 8px; color: var(--faint); }
.rv-status { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 6px; border-radius: 8px; background: var(--tile); font: 600 13px var(--font); white-space: nowrap; }
.rv-status .rv-glyph { display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--st-fill, var(--st-fg, var(--ink))); font: 700 15px var(--font); }
.rv-pair-h .rv-status { margin-left: 8px; height: 24px; font-size: 12px; }
.rv-h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 500 13px var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
.rv-dot { color: var(--faint); }
.rv-worth { font: 600 13px var(--mono); }
.rv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-tags:empty { display: none; }
.rv-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px; background: var(--tile); font: 600 12px var(--font); color: var(--ink); }
.rv-tag.on { background: var(--wash); box-shadow: inset 0 0 0 1.5px var(--amber); }
.rv-tag.flag::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: var(--amber); }
.rv-hidechip { display: none; }
.rv-hide .rv-hidechip { display: inline-flex; background: var(--wash); box-shadow: inset 0 0 0 1.5px var(--amber); }
.rv-hide .rv-keyed, .rv-before .rv-keyed { display: none !important; }
.rv-hide .rv-tools [data-tool="hide"] { box-shadow: inset 0 -2px 0 var(--amber); }
.rv-odds, .rv-blind, .rv-rule { margin: 0; font: 400 13.5px/1.45 var(--font); color: var(--soft); }
.rv-blind { color: var(--ink); font-weight: 600; }
.rv-rule { color: var(--ink); }
.rv-causerow { display: flex; }
.rv-cause { height: 24px; padding: 0 8px; font-size: 13px; cursor: pointer; border: 0; }
.rv-cause svg { width: 14px; height: 14px; }
.rv-mistake { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font: 400 14px/1.45 var(--font); color: var(--ink); }
.rv-mistake svg { color: var(--amber-deep); }
.rv-mistake .pips { margin-right: 4px; }

/* the result strip (V14) and the story of a mistake (V8) */
.rv-rstrip { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rv-rstrip-w { display: grid; gap: 8px; }
.rv-rstrip-w .legend { font-size: 12px; }
.rv-lead { margin-bottom: 8px; }
.rv-rstrip .cell { --cell: 26px; }
.rv-rstrip .cell[data-seen]::before { content: ""; position: absolute; left: 50%; bottom: -5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--soft); }
.rv-rstrip .cell.has-pips .n { display: none; }
.rv-rstrip .cell.has-pips .pips { transform: scale(.75); }
.rv-rstrip .cell.has-pips .pips > i:not(.on) { box-shadow: inset 0 0 0 1.5px currentColor; }   /* the cell's ink, on either fill */
.rv-story { display: grid; gap: 6px; }
.rv-story-l { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 4px; }
.rv-story-n { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 10px; background: var(--tile); font: 500 12.5px var(--font); }
.rv-story-n + .rv-story-n::before { content: "→"; color: var(--faint); margin: 0 4px 0 -2px; }
.rv-story-n.relapse { background: var(--tile-2); }
.rv-story-b { appearance: none; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 0; font: inherit; color: inherit; }
.rv-sub { margin-bottom: 12px; }

/* before the key: What happened? (V2), held back (SR3), Second look (SR3), the walk (V2) */
.rv-pre { display: grid; gap: 10px; }
.rv-pre:empty { display: none; }
.rv-pre > .rv-tag { justify-self: start; }   /* a chip, not a bar */
.rv-pre + .qbody { margin-top: 16px; }
.rv-post:empty { display: none; }
.rv-post { margin-top: 20px; }
.rv-what { display: grid; gap: 10px; padding: 16px 18px; border-radius: var(--radius-card); background: var(--tile); }
.rv-what-h { margin: 0; font: 400 15px/1.45 var(--font); }
.rv-what-l { list-style: none; padding: 0; display: grid; gap: 8px; }
.rv-what-c {
  appearance: none; border: 0; cursor: pointer; width: 100%; min-height: 44px; padding: 8px 12px; border-radius: var(--radius);
  display: flex; align-items: center; gap: 12px; text-align: left; background: var(--paper); color: var(--ink); font: 500 14.5px/1.4 var(--font);
  box-shadow: inset 0 0 0 1px var(--line);
}
.rv-what-c .kbd { flex: none; }
@media (hover: hover) and (pointer: fine) { .rv-what-c:hover { box-shadow: inset 0 0 0 1.5px var(--ink); } }
.rv-what-c[aria-busy="true"] { box-shadow: inset 0 0 0 1.5px var(--amber); }
.rv-what-skip { justify-self: start; }
.rv-held { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--radius-card); background: var(--wash); font: 400 14px/1.45 var(--font); }
.rv-held-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.rv-2row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rv-watch { font-size: 12.5px; }
.rv-firstpick { margin: 0; font: 600 14px var(--font); }
.rv-conf { margin-top: 14px; }
.rv-conf button { height: 36px; font-size: 13px; }
.rv-2v { margin: 0; padding: 10px 14px; border-radius: var(--radius); box-shadow: inset 0 0 0 1.5px var(--ink); font: 400 14.5px/1.45 var(--font); }
.rv-2v.ok { background: var(--wash); box-shadow: inset 0 0 0 1.5px var(--amber); }
.rv-step { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 400 15px var(--font); }
.rv-step b { font: 700 17px var(--font); }
.rv-dim { opacity: .55; }
.rv-end { display: grid; gap: 12px; justify-items: start; max-width: 560px; margin: 8vh auto 0; padding: 28px; border-radius: var(--radius-card); background: var(--tile); }
.rv-end-sum { margin: 0; font: 400 16px/1.55 var(--font); }
.rv-end-acts { display: flex; flex-wrap: wrap; gap: 10px; }

/* under the explanation: your path, tries, the type over time, rules */
.rv-after { display: grid; gap: 14px; }
.rv-after:empty { display: none; }
.rv-after > p, .rv-path p { margin: 0; font: 400 14px/1.5 var(--font); color: var(--ink); }
.rv-called b { font-weight: 700; }
.rv-tries .rv-try.no { font-weight: 500; }
.rv-tries .rv-try.ok { font-weight: 600; }
.rv-path { display: grid; gap: 4px; }
.rv-path .k { margin: 0 0 2px; }
.rv-path-key { font-weight: 600; }
.rv-family { display: grid; gap: 8px; justify-items: start; padding: 14px 16px; border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--line); }
.rv-family .k { margin: 0; }
.rv-fam-sum { margin: 0; font: 500 13px var(--mono); color: var(--ink); }
.rv-fam-cells { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-fam-c { display: grid; justify-items: center; gap: 3px; }
.rv-fam-t { font: 500 10.5px var(--mono); color: var(--soft); }
.rv-fam-line { margin: 0; font: 400 13.5px/1.45 var(--font); }
.rv-rulebox { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--radius-card); background: var(--tile); }
.rv-rulebox > p { margin: 0; font: 400 14px/1.45 var(--font); }
.rv-rule-sug { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-rule-sug .chip { height: auto; min-height: 32px; padding: 6px 10px; white-space: normal; text-align: left; font-size: 13px; background: var(--paper); cursor: pointer; border: 0; }
.rv-else .btn { margin-left: 4px; }
.rv-extra { margin-top: 8px; }
.opt-notmine { margin-left: 2px; font-size: 12.5px; }
.opt-why-note, .opt-why-share { color: var(--soft); font-weight: 500; }
.v-diag { font-weight: 600; }

/* the twin, answered in the player (R23), and the numbers that changed (V14) */
.rv-twinhost:empty { display: none; }
.rv-twinhost { margin-top: 22px; }
.twin-tile { display: grid; gap: 12px; padding: 18px 20px 20px; border-radius: var(--radius-card); box-shadow: inset 0 0 0 1.5px var(--amber); background: var(--paper); scroll-margin-top: 16px; }
.qbody > .twin-tile { box-shadow: none; padding: 0; margin-bottom: 8px; }
.twin-tile .twin-foot { justify-content: flex-start; align-items: center; }
mark.chg { background: none; color: inherit; text-decoration: underline 2px var(--amber); text-underline-offset: 4px; animation: chg-in 1.42s var(--ease) both; }
@keyframes chg-in { 0% { opacity: .15; } 15% { opacity: 1; } 85% { text-decoration-color: var(--amber); } 100% { text-decoration-color: transparent; } }

/* See one solved (SR16, V11): your miss beside a worked twin */
.rv-solved { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.rv-solved-col { min-width: 0; padding: 16px 18px; border-radius: var(--radius-card); background: var(--tile); }
.rv-solved-col > .k { margin: 0 0 12px; }
.rv-trapout > .opt { box-shadow: inset 0 0 0 2px var(--ink) !important; }
.rv-trapline { margin: 12px 0 0; font: 400 14px/1.45 var(--font); }

/* Then vs now (SR7) */
.rv-pairgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.rv-pair-col { min-width: 0; }
.rv-pair-h { margin: 0 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font: 400 14px var(--font); }
.rv-pairwrap { max-width: none; }
.rv-pair .rv-col { max-width: 1240px; }
.rv-skel { display: grid; gap: 14px; }
.rv-err { display: grid; gap: 10px; justify-items: start; margin-top: 20px; }

/* the Save toast's why chips (UI.savedToast, Review V3) */
.saved-why { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.saved-why-t { margin-right: 4px; font-weight: 600; }
.saved-why .chip { min-height: 32px; }
@media (pointer: coarse) { .saved-why .chip { min-height: 44px; } }

/* ------------------------------------------------------------------ the attempt history (UI.history, Review 9) */

dialog.sheet.hist-sheet { max-width: min(560px, calc(100vw - 32px)); }
.hist-sub { margin: 0 0 12px; }
.hist-lock { margin: 0 0 12px; }
.hist-head { display: grid; gap: 8px; margin-bottom: 14px; }
.hist-head > p { margin: 0; }
.hist-trendline { font: 500 13px var(--mono); color: var(--ink); }
.hist-trend { display: inline-flex; gap: 3px; }
.hist-g { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font: 700 10px var(--font); }
.hist-g.ok { background: var(--amber); color: var(--ink-deep); }
.hist-g.no { background: var(--ink); color: var(--on-ink); }
.hist-open { display: flex; align-items: center; gap: 6px; font: 400 13.5px var(--font); }
.hist-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hist-verdict .chip.on { background: var(--wash); box-shadow: inset 0 0 0 1.5px var(--amber); height: 32px; font-size: 13px; }
.hist-only { font-size: 13.5px; }
.hist-wrap { max-width: 100%; overflow-x: auto; }
.hist-t td, .hist-t th { vertical-align: middle; }
.hist-t .hist-res1 { display: inline-flex; align-items: center; gap: 8px; }
.hist-mis { display: block; margin-top: 2px; color: var(--soft); font-size: 12.5px; }
.hist-when { display: block; white-space: nowrap; }
.hist-src { display: block; font-size: 12.5px; }
.hist-tg { display: block; margin-top: 2px; }
.hist-this td { background: var(--wash); }
.hist-tries ol { margin: 0; padding-left: 20px; font: 400 13px/1.5 var(--font); }
.hist-empty { margin: 12px 0; font: 400 14.5px/1.5 var(--font); color: var(--soft); }
.hist-more { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) { .rv-item.rv-slide-l, .rv-item.rv-slide-r, mark.chg { animation: none; } }
html[data-motion="reduce"] :is(.rv-item.rv-slide-l, .rv-item.rv-slide-r, mark.chg) { animation: none; }

@media (max-width: 1099px) { .rv-pairgrid, .rv-solved { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 759px) {
  .rv-top { grid-template-columns: auto minmax(0, 1fr); padding: 6px 12px; gap: 6px 8px; }
  .rv-close-l, .rv-title { display: none; }
  .rv-nav { justify-content: flex-end; }
  .rv-segs { width: 100%; }
  /* the tools in one row, icon over label, like the runner's strip */
  .rv-tools-col { flex-wrap: nowrap; gap: 0; padding: 6px 8px 0; box-shadow: inset 0 -1px 0 var(--line); padding-bottom: 4px; }
  .rv-tool { flex: 1 1 auto; min-width: 0; max-width: 96px; min-height: 48px; padding: 4px 2px; font-size: 11px; line-height: 1.15; white-space: normal; text-align: center; }
  .rv-col { padding: 14px 16px 24px; }
  .rv-foot { grid-template-columns: auto minmax(0, 1fr) auto; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 6px; }
  .rv-prev span { display: none; }
  .rv-pos { font-size: 11.5px; }
  .rv-prev { min-width: 44px; justify-content: center; }
  .rv-fm { gap: 6px; flex-wrap: nowrap; }
  .rv-fm .btn, .rv-fm .quiet { min-height: 44px; }
  .rv-status { margin-left: 0; }
  dialog.sheet.hist-sheet { max-width: none; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .hist-t thead { display: none; }
  /* Review 11: each attempt in two lines, when and where with Open, then the result, the difficulty and the time */
  .hist-t, .hist-t tbody { display: block; width: 100%; }
  .hist-t tr { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; grid-template-areas: "n w w o" "n r d t"; align-items: center; gap: 4px 10px; padding: 10px 0; box-shadow: inset 0 -1px 0 var(--line); }
  .hist-t tr.hist-tries { display: block; padding: 0 0 10px 32px; }
  .hist-t tr[hidden] { display: none; }
  .hist-t td { display: block; padding: 0; border: 0; min-width: 0; }
  .hist-t td:nth-child(1) { grid-area: n; align-self: start; }
  .hist-t td:nth-child(2) { grid-area: w; }
  .hist-t td:nth-child(3) { grid-area: d; }
  .hist-t td:nth-child(4) { grid-area: r; }
  .hist-t td:nth-child(5) { grid-area: t; text-align: right; }
  .hist-t td:nth-child(6) { grid-area: o; }
  .hist-t .hist-when, .hist-t .hist-src { display: inline; margin-right: 8px; }
  .hist-t .hist-when + .rv-tag { margin-right: 8px; }
  .hist-t td:nth-child(6) .quiet { min-height: 44px; }
  .hist-t tr.hist-this { background: var(--wash); }
  .hist-t tr.hist-this td { background: none; }
}
@media print { dialog.rv-dlg, .rv-pane { display: none !important; } }

/* ------------------------------------------------------------------ the runner on a phone (QBank 2.15, Tests 4.12, X6, R50) */

@media (max-width: 759px) {
  .rn { --rn-top: 56px; --rn-foot: 64px; --rn-pad: 16px; }
  .rn-top { gap: 6px; padding: 0 8px; }
  .rn-exit { flex-direction: column; gap: 1px; height: 44px; min-width: 44px; padding: 0 6px; font-size: 10px; }
  .rn-exam .rn-exit-l { display: inline; }
  .rn-titles { display: none; }
  .rn-cond { display: none; }
  .rn-tools .rn-tool { min-width: 40px; padding: 2px 4px; font-size: 10px; }
  .rn-tool:has(.ts) .tl { display: none; }
  .rn-tool .ts { display: inline; }
  .rn-tools .rn-t-calc, .rn-tools .rn-t-ref, .rn-tools .rn-t-notes { display: none; }
  .t-digits { font-size: 17px; }
  .rn-exam .t-digits { font-size: 19px; }
  .t-hide .t-hide-l { font-size: 10px; }
  .rn-practice .t-hide { flex-direction: column; gap: 0; height: 40px; }
  .rn-col, .rn.has-dock .rn-col, .rn.has-slot .rn-col { min-width: 0; padding: 12px var(--rn-pad) calc(var(--rn-foot) + 96px); }
  .rn-body { display: block; }
  .rn-dock, .rn-slot { display: none !important; }
  .rn-seg { max-width: none; }
  .rn-railtext { font-size: 11.5px; }
  .rn-qstrip { padding: 6px; }
  .rn-qleft { flex-basis: 100%; }
  .rn-type { max-width: 40vw; }
  .rn-qstrip .rn-qtools { padding-left: 0; justify-content: space-between; flex-wrap: nowrap; }
  /* seven tools in one row, icon over a label that may take two lines */
  .rn-qstrip .rn-qtools .tool { flex: 1 1 0; max-width: 72px; padding: 2px 1px; white-space: normal; text-align: center; line-height: 1.15; }
  .rn-qhead .rn-mark { display: none; }
  .rn-qhead .tool { min-height: 44px; min-width: 44px; padding: 0 8px; justify-content: center; }
  .rn-qhead .tool .tl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rn-conf button { height: 44px; padding: 0 7px; font-size: 12px; }
  .rn-toolsrow:not([hidden]) { display: flex; margin-top: 18px; }
  .rn-toolsrow .tool { min-height: var(--touch); }
  /* the footer: [‹ Back] [Mark] [7 / 10 ⌃] [Check / Next]; the split Check takes its own row */
  .rn-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .rn-fl, .rn-fm, .rn-fr { display: contents; }
  .rn-back { order: 1; width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .rn-back-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rn-markfoot {
    order: 2; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    appearance: none; border: 0; background: none; cursor: pointer; width: 44px; height: 44px; border-radius: 10px; color: var(--ink); font: 600 10px var(--font);
  }
  .rn-markfoot[aria-pressed="true"] { background: var(--wash); }
  .rn-markfoot[aria-pressed="true"] svg { color: var(--amber-deep); fill: var(--amber); }
  .rn-navb { order: 3; flex: 1 1 auto; justify-content: center; height: 44px; padding: 0 10px; min-width: 0; }
  .rn-navl { overflow: hidden; text-overflow: ellipsis; }
  .rn-check { order: 4; }
  .rn-check.split { order: 0; flex: 1 1 100%; }
  .rn-check.split .split-check { width: 100%; }
  .rn-next { order: 5; min-width: 128px; justify-content: center; }
  .rn-next.quiet { min-width: 0; }
  .rn-who { display: none; }
  .rn-saved { order: 6; flex: 1 1 100%; text-align: center; }
  .rn-saved:not([data-state="offline"]):not([data-state="error"]) { display: none; }
  .rn-falt { flex: 1 1 100%; }
  .popover.rn-navpop:not(.anchored) { width: 100%; max-width: none; padding: 22px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 16px 16px 0 0; }
  .rn-notepop { width: auto; }
  .navp-grid, .navp.exam .navp-grid { --cols: 6; --cell: 48px; --cell-gap: 8px; }
  .cyw-tiles .stat-v { font-size: 32px; }
  .cyw-grid { --cols: 6; --cell: 44px; }
  .cyw-foot { flex-direction: column-reverse; align-items: stretch; }
  .cyw-acts { flex-direction: column-reverse; align-items: stretch; margin: 0; }
  .cyw-acts .pill { width: 100%; justify-content: center; }
  .hl-b { min-width: 36px; height: 36px; padding: 0 6px; }
  .hl-b .hl-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* the five pen tools share one row */
  .scratch-bar { width: 100%; flex-wrap: nowrap; }
  .scratch-bar .tool { flex: 1 1 auto; justify-content: center; gap: 4px; padding: 0 4px; min-height: 44px; }
}
@media (max-width: 359px) { .hl-sw { max-width: 200px; } }
@media (prefers-reduced-motion: reduce) { .timer.t-pulse .t-digits, .rn-q.rn-slide-l, .rn-q.rn-slide-r, .rn-seg.add::before { animation: none; } }
html[data-motion="reduce"] :is(.timer.t-pulse .t-digits, .rn-q.rn-slide-l, .rn-q.rn-slide-r, .rn-seg.add::before) { animation: none; }

@media print {
  .rn-top, .rn-foot, .rn-rail, .rn-qtools, .rn-dock, .rn-slot, .rn-toolsrow, .rn-nudge, .scratch-bar, .rn-addnote { display: none !important; }
  .rn-col { max-width: none; padding: 0; }
}

/* ------------------------------------------------------------------ phone */

@media (max-width: 759px) {
  .ws .opts.two { grid-template-columns: 1fr; }
  .strike { width: 44px; height: 44px; }
  .strike span { width: 36px; height: 36px; }
  .opt-why, .opt-crowd { margin-left: 8px; }
  .step-cmp { grid-template-columns: 1fr; }
  .spr .grid-in .field, .ws-cover .field, .pad { max-width: none; }
  .q-actions > * { flex: 0 0 auto; }
  .ws-cover { padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .v-fixed.pop { animation: none; }
  .opt-row.pressing > .opt .l { animation-duration: .45s; }
}
html[data-motion="reduce"] .v-fixed.pop { animation: none; }

@media print {
  .strike, .undo, .ws-under, .ws-bar, .tools-row, .q-actions, .x-toggle, .pad, .calc { display: none !important; }
  .x-card[hidden] { display: grid !important; }
}

/* the review pane's question head: one panel for the mistake, its tags and the cause; a labelled history under it */
.rv-facts { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px 24px; align-items: start; margin: 14px 0; padding: 14px 16px; border-radius: 12px; background: var(--tile); }
.rv-fa:empty, .rv-fb:empty { display: none; }
.rv-thin { padding: 0; height: 1px; background: var(--line); border-radius: 0; }
.rv-thin > * { display: none; }
.rv-hide .rv-thin { height: auto; padding: 14px 16px; background: var(--tile); border-radius: 12px; }
.rv-hide .rv-thin > * { display: flex; }
.rv-fb { display: flex; flex-wrap: wrap; align-content: start; gap: 8px; }
.rv-facts .rv-mistake { display: grid; gap: 4px; margin: 0; }
.rv-mrow { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1.3 var(--font); }
.rv-msub { font: 400 13px/1.4 var(--font); color: var(--soft); }
.rv-mlabel { margin-top: 4px; font: 500 14px/1.4 var(--font); color: var(--ink); }
.rv-tlh { margin: 16px 0 6px; font: 600 11px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
@media (max-width: 720px) { .rv-facts { grid-template-columns: minmax(0, 1fr); } }

/* the review pane's actions: the two big verbs share the first line, the small tools follow, then the extras under a rule */
.rh-pane .q-actions:not(.rv-extra) { gap: 10px; }
.rh-pane .q-actions:not(.rv-extra) > * { order: 2; }
.rh-pane .q-actions:not(.rv-extra) > .split.twin { order: 0; flex: 1 1 calc(50% - 10px); display: flex; }
.rh-pane .q-actions:not(.rv-extra) > .split.twin > :first-child { flex: 1 1 auto; }
.rh-pane .q-actions:not(.rv-extra) > .verb { order: 1; flex: 1 1 calc(50% - 10px); justify-content: flex-start; }
.rh-pane .q-actions .btn.sm { min-height: 34px; }
.rh-pane .q-actions.rv-extra { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }