/* ====
   reading.css — shared stylesheet for every Full Reading Test page
   (base + cosmos-registration + mono-skin, in the original cascade order) ====*/

/* ---------- 1. base ---------- */
/* ====
   REAL-EXAM SKIN  —  fonts/colours/layout copied from the
   official computer-delivered IELTS interface.
   All functions + content come from the CDI engine below. ====*/
:root{
  --sans: Arial, Helvetica, sans-serif;
  --mono: Arial, Helvetica, sans-serif;
  --serif: Arial, Helvetica, sans-serif;

  --bg:      #f2f2f2;
  --paper:   #ffffff;
  --bg-elev: #f7f7f7;
  --panel:   #ebebeb;
  --panel2:  #e4e4e4;

  --ink:     #0d0d0d;
  --ink-soft:#1f1f1f;
  --ink-mute:#666666;

  --line:    #d0d0d0;
  --line-2:  #cccccc;
  --line-3:  #bbbbbb;
  --line-4:  #aaaaaa;

  --primary: #c41230;   /* IELTS red */
  --primary-2:#a50f28;
  --crimson: #c41230;
  --emerald: #2e7d32;
  --amber:   #e65100;
  --gold:    #e65100;
  --gold-soft:#ffe066;

  --hl-y: #FFE066;
  --tg:   #229ed9;

  --radius:    3px;
  --radius-lg: 5px;
  --shadow-sm: none;
  --shadow-md: 0 4px 16px rgba(0,0,0,.12);
  --shadow-lg: 0 6px 36px rgba(0,0,0,.30);
  --ease: ease;
  --text-zoom: 0px;
}

/* themes (kept as functions; default = real-exam light) */
body.dark-mode{
  --bg:#1c1c1c; --paper:#1f1f1f; --bg-elev:#262626; --panel:#262626; --panel2:#2e2e2e;
  --ink:#eaeaea; --ink-soft:#cfcfcf; --ink-mute:#9a9a9a;
  --line:#3a3a3a; --line-2:#4a4a4a; --line-3:#555; --line-4:#666;
  --primary:#ff5a72; --primary-2:#ff8094; --crimson:#ff5a72; --emerald:#5fd17a; --amber:#ffae5c;
  --gold-soft:rgba(255,224,102,.18);
}
body.theme-sepia{
  --bg:#f5f0e8; --paper:#faf6ef; --bg-elev:#f1e9da; --panel:#efe7d8; --panel2:#e8ddc8;
  --ink:#3a2c1a; --ink-soft:#5a4632; --ink-mute:#9a8670;
  --line:#dccaa9; --line-2:#cbb691; --line-3:#cbb691; --line-4:#bba585;
  --primary:#b03521; --primary-2:#8f2a19; --crimson:#b03521;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans);
  font-size:16px;
  background:var(--bg);
  color:var(--ink);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
body.no-select{user-select:auto;-webkit-user-select:auto}
body.no-select input,body.no-select textarea{user-select:text;-webkit-user-select:text}
/* No custom ::selection — the real player uses Chrome's native blue. Forcing
   yellow made every drag look like a highlight had already been applied. */

::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--panel)}
::-webkit-scrollbar-thumb{background:#b8b8b8;border-radius:0}
body.dark-mode ::-webkit-scrollbar-thumb{background:#555}
/* reading panes use the thick gray real-exam scrollbar (middle + far-right) */
/* 17px and full-length — the transparent end caps made ours a short floating
   pill, which the real player does not have. */
#passage-pane::-webkit-scrollbar,#questions-pane::-webkit-scrollbar{width:17px}
#passage-pane::-webkit-scrollbar-track,#questions-pane::-webkit-scrollbar-track{background:transparent}
#passage-pane::-webkit-scrollbar-thumb,#questions-pane::-webkit-scrollbar-thumb{background:#9a9a9a;border-radius:0;
  background-clip:padding-box}
#passage-pane::-webkit-scrollbar-thumb:hover,#questions-pane::-webkit-scrollbar-thumb:hover{background:#7d7d7d;background-clip:padding-box}
body.dark-mode #passage-pane::-webkit-scrollbar-thumb,body.dark-mode #questions-pane::-webkit-scrollbar-thumb{background:#666;background-clip:padding-box}

.hidden{display:none !important}

/* === STAGES === */
.stage{position:fixed;inset:0;display:none;flex-direction:column}
.stage.active{display:flex}

/* text zoom (A-/A+) — applies to all exam content */
.passage-text p,.q-text,.task-text,.option,.gap-input,.pass-body p,.qrow span,.notes-li,.sum-text,
.instruction,.section-head h2,.section-head .num,
h2.passage-title,
.q-card h4,.section-block h4,
.heading-tile,.heading-bank-label,.bank-label,
.word-tile,.word-drop,.word-bank-list,
.prose-summary,.gap-num,
.drop-zone,.drop-zone *,
.para-heading-slot,.slot-text,
.subhead,.q-pill,
.bnav-plabel,.bnav-plabel2,.bnav-pscore,
.multi-opts .option span,
.explain-panel .ep-text,.pb-row{
  font-size:calc(var(--base-size,16px) + var(--text-zoom)) !important;
  transition:font-size .15s ease;
}
/* Measured off the live IELTS Inspera player: every piece of exam copy is
   Arial 16px / 24px / weight 400. Do not "improve" these numbers — matching
   them is the product. */
/* NOTE: the block above sets font-size with !important on every selector it
   lists. A `font-size` written later for any of them is DEAD — `--base-size`
   is the only lever. Measured values from the live player: */
.passage-text p{--base-size:16px}
.q-text{--base-size:16px}
.gap-input{--base-size:16px}
.option{--base-size:16px}
h2.passage-title{--base-size:17.6px}
.instruction{--base-size:16px}
.section-head h2{--base-size:16px}
.heading-tile{--base-size:17.6px}
.para-heading-slot,.slot-text{--base-size:16px}
.bnav-plabel,.bnav-plabel2{--base-size:16px}

/* ====
   HEADER (real-exam top bar) ====*/
/* Measured on the live Inspera Reading player at 1440x900 DPR2: the header is
   1440 x 56 of pure #fff with NO border and NO box-shadow. The rule under it is
   header::after — a 1px #C1C1C1 hairline sitting on the 55px row. Both the
   Reading recon and the Writing build measured this independently. */
#hdr{
  position:relative;z-index:500;flex:0 0 auto;height:56px;min-height:56px;
  display:flex;align-items:center;justify-content:space-between;
  margin:0;padding:0;border:0;box-shadow:none;overflow:hidden;
  background:#fff;color:#000;font-family:Arial,sans-serif;
  transition:background-color .4s ease-in-out .2s;
}
#hdr::after{content:"";position:absolute;left:0;right:0;top:55px;height:1px;background:#C1C1C1}
/* the official player warms the whole bar inside the last ten minutes */
#stage-reading.ex-time-low #hdr{background:#f2f2eb}
.topbar{
  height:56px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;background:var(--paper);
  border-bottom:1px solid var(--line);
}
#hdr-left,#hdr-right{display:flex;align-items:center;height:100%;gap:0}

/* --- logo: the real ielts-logo.svg, 92.5 x 27.19 at x=16 y=14.39 --------- */
#hdr .ex-logo{display:flex;align-items:center;padding:14.4px 16px}
#hdr .ex-logo svg{display:block;width:92.5px;height:27.19px}

/* --- test-taker block: x=140.5 y=8, 600 16px/18px #000 ------------------- */
#hdr .ex-status{display:flex;flex-direction:column;justify-content:flex-start;height:40px;padding-left:16px}
#hdr .ex-name{font:600 16px/18px Arial,sans-serif;color:#000;white-space:nowrap}
#hdr .ttid-name{display:none}

/* --- right icon cluster: 56px flex buttons, FontAwesome-4 glyph shapes,
       colour #333, icon margin 0 16px, last button 16px off the edge ------ */
#hdr .ex-icbtn{height:56px;display:flex;align-items:center;padding:0;margin:0;
  background:transparent;border:0;border-radius:0;color:#333;cursor:pointer;
  transition:background-color .1s linear}
#hdr .ex-icbtn:hover{background:rgba(0,0,0,.055)}
#hdr .ex-icbtn>svg{display:block;margin:0 16px}
#hdr-right>*:last-child{margin-right:16px}
#hdr .ex-icbtn.is-offline{color:#c41230}

.ielts-badge{
  background:var(--primary);color:#fff;
  font-family:'Arial Black',Arial,sans-serif;font-weight:900;font-size:19px;
  padding:3px 10px 4px;letter-spacing:.5px;border-radius:2px;
  user-select:none;line-height:1.3;
}

#tg-link,.tg-pill{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  color:var(--ink);font-size:13px;font-weight:600;font-family:var(--sans);
  background:var(--paper);border:1.5px solid var(--line);border-radius:22px;
  padding:5px 14px 5px 6px;transition:border-color .15s,box-shadow .15s;
}
#tg-link:hover,.tg-pill:hover{border-color:var(--tg);box-shadow:0 0 0 2px rgba(0,136,204,.12);color:var(--tg)}
.tg-circle{width:28px;height:28px;border-radius:50%;background:linear-gradient(to bottom,#2aabee,#229ed9);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tg-circle svg{width:16px;height:16px}

/* The small hamburger dropdown is gone — the official player opens a
   full-screen Options page instead (see the OPTIONS / MESSAGES block). Only the
   theme-dot rule survives, because setTheme() still syncs any dots that other
   stages render. */
.theme-dot{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:.15s;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.theme-dot:hover{transform:scale(1.12)}
.theme-dot.active{border-color:var(--primary)}

/* Timer. The real player shows a plain clock — no pill, no border, and
   crucially no "live" status dot. It FLASHES at 10 and 5 minutes remaining
   rather than turning amber/red, so the warning states are blinks. */
/* The clock is styled exactly like .header__name — 600 16px/18px Arial, #000 —
   and reads "NN minutes left". The official player shows no mm:ss and no eye
   toggle; the warning states are a flash of the same black text. */
#hdr .timer{
  display:flex;align-items:center;align-self:flex-start;gap:0;
  margin:8px 0 0 32px;padding:0;border:0;background:none;border-radius:0;
  font:600 16px/18px Arial,sans-serif;color:#000;letter-spacing:0;
}
#hdr .timer.warn{color:#000;animation:timerFlash 1s step-end 6}
#hdr .timer.crit{color:#000;animation:timerFlash .7s step-end 10}
@keyframes timerFlash{0%,100%{opacity:1}50%{opacity:.15}}
@media (prefers-reduced-motion:reduce){#hdr .timer.warn,#hdr .timer.crit{animation:none}}
#hdr .timer-text{min-width:0;text-align:left;display:inline-block;white-space:nowrap}
#hdr .timer-text.hidden{visibility:hidden}

/* ====
   PASSAGE INFO BAR  (rounded card, real-exam style) ====*/
/* Measured: warm off-white #F1F2EC, 1px #D5D5D5, 16px margin, and BOTH lines
   at 16px — the title is only distinguished by weight, not by size. */
/* There is NO grey band behind the rubric card — the area around it is plain
   white. The card itself is 1407 x 72 at x=16 y=72: 1373 x 46 of content
   inside 12px/16px padding and a 1px #D5D5D5 border. It is display:block, not
   flex: an h2 of 700 16px/normal (18px tall) with a 4px bottom margin, then a
   16px/24px paragraph. A flex column with a gap made the card 74.59 tall and
   pushed both panes 2.59px down the page. */
#pbar{background:transparent;padding:0;flex:0 0 auto;color:#000;line-height:normal}
#pbar-inner{background:#F1F2EC;border:1px solid #D5D5D5;border-radius:4px;padding:12px 16px;
  margin:16px 17px 16px 16px;display:block}
#pbar-title{display:block;font:700 16px/normal Arial,sans-serif;color:#000;margin:0 0 4px}
#pbar-desc{display:block;font:400 16px/24px Arial,sans-serif;color:#000;margin:0}
body.dark-mode #pbar-inner{background:var(--panel);border-color:var(--line-2)}

/* ====
   MAIN SPLIT ====*/
/* Arial only inside the exam region — the official player never falls back
   through Helvetica, and the global --sans stack does. */
#stage-reading{flex-direction:column;background:#fff;font-family:Arial,sans-serif;color:#000}
/* The exam region is measured at y=160, height 687. Both panes scroll
   independently; the page itself never scrolls. */
.exam-main{flex:1;display:flex;overflow:hidden;min-height:0;position:relative;background:#fff}
.split-pane{background:#fff;min-width:0;color:#000}
/* LEFT: 720 wide, padding 0 16px -> a 688px passage column starting at x=16 */
#passage-pane{width:50%;flex:0 0 auto;padding:0 16px;overflow-y:auto;overflow-x:hidden;user-select:text}
/* RIGHT: padding 16px 0 48px; the 17/56 side padding on .section-block puts the
   question column at x=739 with the 40px flag gutter reserved on the right. */
#questions-pane{flex:1 1 0%;padding:16px 0 48px;overflow-y:scroll;overflow-x:auto;user-select:text;background:#fff}

/* The 2px rgba(0,0,0,.5) rule IS the boundary at x=720-722. The 16px
   ew-resize strip lies to its RIGHT (x=722-738), transparent, overlapping the
   question pane — it is not a filled 16px gutter with a centred hairline. */
.split-divider{width:2px;flex:0 0 2px;background:rgba(0,0,0,.5);position:relative;z-index:100;cursor:default}
.split-divider .resizeBar{position:absolute;top:0;bottom:0;left:2px;width:16px;background:transparent;
  cursor:ew-resize;z-index:1;transition:opacity .3s ease-out}
/* 36px square (32 content + 2px border), 2px #535353 on #F9F9F9, centred on the
   hairline: left:-19px from the drag strip puts its box at x=703-739. */
.split-divider #div-btn{position:absolute;left:-19px;top:50%;margin-top:-16px;width:36px;height:36px;
  background:#F9F9F9;border:2px solid #535353;border-radius:0;color:#535353;padding:0;
  display:flex;align-items:center;justify-content:center;cursor:ew-resize;user-select:none;z-index:2}
.split-divider #div-btn svg{display:block;width:16px;height:16px;fill:currentColor}
.split-divider #div-btn:hover{border-color:#333;color:#333}
body.dark-mode .split-divider #div-btn{background:var(--ex-panel-2);border-color:var(--ex-line-2);color:var(--ex-ink-2)}
body.dark-mode .split-divider #div-btn:hover{border-color:var(--ex-ink-3);color:var(--ex-ink)}

/* prev / next arrows — position:absolute, right:32px, bottom:88px, 55.89 x
   55.19, 3px radius, 2.4px gap, NO shadow. Glyphs are FontAwesome \f060 /
   \f061 at 22.30 x 26 with a 10.4px bottom margin. */
#qnav-arrows{position:absolute;right:32px;bottom:88px;display:flex;z-index:100}
/* the official player moves the arrows to right:332px while the notes
   sidebar is docked, so they stay 32px from the exam's own right edge */
body.notes-open #qnav-arrows{right:332px}
.qnav-btn{width:55.89px;height:55.19px;margin-left:2.4px;border:none;border-radius:3px;padding:0;
  display:flex;align-items:flex-end;justify-content:center;cursor:pointer;
  transition:background .15s;box-shadow:none;color:#fff}
.qnav-btn svg{display:block;width:22.3px;height:26px;fill:currentColor;margin:0 0 10.4px}
.qnav-btn.prev{background:#4C4C4C}
.qnav-btn.prev:hover{background:#434343}
.qnav-btn.next{background:#000}
.qnav-btn.next:hover{background:#262626}
.qnav-btn:disabled{background:#DDDDDD;cursor:default}
.qnav-btn:disabled svg{fill:#fff}

/* passage text — .sectionStimulus is a 688px column at x=16 with margin 16px 0,
   so the title's top edge lands at y=192, level with the first question. */
#passage-pane .sectionStimulus{margin:16px 0;padding-top:16px;background:transparent;min-width:300px;max-width:1000px}
#passage-pane .passage-num{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);text-align:center}
/* Part 1 uses h2 700 17.6px/21.12px with a 14.608px bottom margin. */
#passage-pane h2.passage-title{font-weight:700;line-height:21.12px;text-align:left;margin:0 0 14.608px;color:#000}
/* ── Matching Headings: passage slot ── */
@keyframes slotPulse{0%,100%{box-shadow:0 0 0 0 rgba(90,131,194,.35)}50%{box-shadow:0 0 0 5px rgba(90,131,194,.08)}}
/* .gapMatchInteraction__dropZone.gap — measured: inline-flex, 534 x 24,
   1px dashed #333, radius 5px, #fff, margin 1px, min-width 10 / min-height 16,
   text centred at 16px/24px, and 2px dashed #418EC8 while it is the current
   question. The populated appearance could not be measured (no drag was
   performed against the live player), so it keeps the same box with a solid
   border — consistent with the states that WERE measured. */
.para-heading-slot{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:534px;max-width:100%;height:24px;min-width:10px;min-height:16px;
  border:1px dashed #333;border-radius:5px;padding:0;margin:1px;
  line-height:24px;font-weight:400;color:#000;background:#fff;box-sizing:border-box;cursor:pointer;
  transition:border-color .2s,background .2s;text-align:center;overflow:hidden}
.para-heading-slot.is-current{border:2px dashed #418EC8}
.para-heading-slot:hover{border-color:#0E98F0}
.para-heading-slot.drag-over{border:1px solid #FA5101;background:rgba(0,0,0,.1)}
.para-heading-slot.filled{border-style:solid;border-color:#333;background:#fff;color:#000}
.para-heading-slot .slot-plus{display:none}
.para-heading-slot .gapOrderNumber{display:block;width:17.8px;line-height:24px;font-weight:700;
  text-align:center;color:#000}
.para-heading-slot .slot-text{font-weight:700;color:#000;text-align:center;line-height:24px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px}
/* The keyboard-help affordance the official drag-and-drop screen carries:
   87.2 x 27, padding 3px 12px, radius 2px, colour #1B4D6B, 16px Arial,
   right-aligned inside a 30px wrapper at the top of the passage pane. */
.keyboardHelpWrapper{display:flex;height:30px;margin:0 0 6px}
.keyboard-help-button{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  height:27px;padding:3px 12px;border:none;border-radius:2px;background:transparent;
  color:#1B4D6B;font-family:Arial,sans-serif;font-size:16px;line-height:normal;cursor:pointer}
.keyboard-help-button:hover{background:#eef3f7}
.keyboard-help-button svg{width:18px;height:14px;fill:currentColor}
body.dark-mode .para-heading-slot{border-color:#888;color:#ccc}
body.dark-mode .para-heading-slot:hover{border-color:#ccc;background:#2a2a2a}
body.dark-mode .para-heading-slot.drag-over{background:#2a2a2a;border-color:#eee}
body.dark-mode .para-heading-slot.filled{background:#282828;color:#eee;border-color:#ccc}
body.dark-mode .para-heading-slot .slot-text{color:#eee}
/* ── Matching Headings: per-paragraph explanation (review mode, passage pane) ── */
.heading-explain-wrap{margin:0 0 6px}
.heading-explain-wrap .explain-btn{margin-top:0}
.heading-explain-wrap .explain-panel{margin-top:6px}
/* ── Matching Headings: question pane bank ── */
/* h4.tokenHeader "List of Headings": 700 16px, margin 0 0 8px, 18 tall.
   .gapChoiceContainer: min-height 34px, margin 0 0 16px, radius 5px, no border.
   .gapChoice: height 24, 1px #919191, radius 4px, margin 3px 3px 8px, and the
   inner .textNode is 700 17.6px Arial padded 0 8.8px. No letter prefix. */
.heading-bank-wrap{margin:0 0 16px}
.heading-bank-label{font-weight:700;line-height:18px;color:#000;margin:0 0 8px}
.heading-bank-list{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-height:34px;border-radius:5px}
.heading-tile{display:flex;align-items:center;height:24px;padding:0 8.8px;margin:3px 3px 8px;
  border:1px solid #919191;border-radius:4px;font-weight:700;color:#000;cursor:move;user-select:none;
  background:#fff;transition:border-color .15s,background .15s;line-height:normal;white-space:nowrap}
.heading-tile:hover{border-color:#0E98F0;background:#fff}
.heading-tile.selected{border-color:#0E98F0;background:#EAF4FC}
.heading-tile.used{display:none}
.heading-tile.dragging{opacity:.3}
.heading-tile-id{flex-shrink:0;color:#444;font-weight:700;min-width:16px}
body.dark-mode .heading-tile{border-color:#444;background:var(--paper)}
body.dark-mode .heading-tile:hover{border-color:#aaa;background:#2a2a2a}
body.dark-mode .heading-tile.selected{background:#2a2a2a;border-color:#ccc}
#passage-pane .passage-text{margin-top:0}
/* p { margin:16px 0 } — the margins collapse, so the visible gap between two
   paragraphs is 16px, and so is the gap from the title to the first one. */
#passage-pane .passage-text p{line-height:24px;color:#000;margin:16px 0;text-align:left;font-weight:400}
#passage-pane .passage-text p:first-child{margin-top:0}
#passage-pane .passage-text strong.para-letter,.para-letter{font-weight:700;margin-right:6px;color:#000}

/* Highlight. The real player (Hypothes.is) applies ONE colour: solid #820240
   with white text. The old yellow/green/pink set was a nice study tool but it
   is the loudest non-exam element on the passage pane, so the exam stage gets
   the real thing. The three class names are kept so stored annotations from an
   earlier attempt still restore — they simply all render as the exam colour. */
.hl{border-radius:1px}
.hl-y,.hl-g,.hl-p{background:#820240;color:#fff}
body.dark-mode .hl-y,body.dark-mode .hl-g,body.dark-mode .hl-p{background:#820240;color:#fff}
.hl-note{background:#820240;color:#fff;border-bottom:2px dashed #d4a017;cursor:pointer}

/* ====
   QUESTIONS  (re-styling the CDI engine output, flat exam look) ====*/
/* Each question GROUP is one .QuestionDisplay__questionDisplayWrapper:
   padding 16px 16px 0 17px inside a 718px pane, and inside that a 645px text
   column with a 40px flag gutter reserved on the right. 17 + 645 + 56 = 718,
   so the column lands at x=739 and ends at x=1384. */
.section-block{padding:16px 56px 0 17px;margin:0}
.section-block+.section-block{margin-bottom:80px}
/* The real player has no bold "type name" line: the headline is the question
   range and nothing else, followed straight by the instruction paragraph. */
.section-head{margin:0;padding:0;border-bottom:none}
.section-head .num{display:block;font:700 16px/normal Arial,sans-serif;color:#000;margin:0 0 8px}
.section-head h2{display:none}
.section-head .instruction{color:#000;line-height:24px;font-weight:400;margin:0 0 16px}
.section-head .instruction em,.section-head .instruction strong{font-style:normal;background:none;padding:0;color:#000;font-weight:700}

/* No divider of any kind between questions, and no card padding: the pitch
   comes entirely from the option list's 24px bottom margin. */
.q-card{background:transparent;border:none;border-radius:0;padding:0;margin:0}
.q-card:hover{border-color:transparent}
.q-card.flagged{box-shadow:none;padding-left:0}
body.dark-mode .q-card,body.dark-mode .q-card:hover{border-color:transparent}

/* p.interaction-prompt — flex, baseline-aligned, 4px bottom margin, 27 tall */
/* .choiceInteraction__promptAndButtonRow is a 31-tall FLEX row, so the
   prompt's 4px bottom margin is contained and does not collapse into the
   option list's 4.8px top margin. Written as padding here for the same effect:
   collapse the two and the question-to-question pitch comes out 3px short. */
.q-row{display:flex;align-items:baseline;gap:0;margin:0;padding:0 0 4px;font:400 16px/24px Arial,sans-serif}
/* span.order-number: min-width 20.8, padding 4px 2px 3px, 2px border, radius 3,
   700 16px/16px, margin-right 4px -> a 28.8 x 27 box that is invisible unless
   this is the current item. It is an inert span in the real player: no cursor
   change, no click target, no flag behaviour. */
.q-pill{display:block;box-sizing:content-box;min-width:20.8px;width:auto;height:16px;
  background:transparent;color:#000;font:700 16px/16px Arial,sans-serif;text-align:center;white-space:nowrap;
  border:2px solid rgba(0,0,0,0);border-radius:3px;padding:4px 2px 3px;margin:0 4px 0 0;flex:0 0 auto;
  cursor:auto;user-select:none;transition:border-color .16s var(--ease)}
.q-pill:hover{border-color:rgba(0,0,0,0)}
/* #418EC8 is the real player's current-item blue, measured, not chosen. */
.q-pill.active,.q-pill.is-current{border-color:#418EC8}
.q-card.flagged .q-pill{border-color:rgba(0,0,0,0);background:transparent}
.q-text{flex:1 1 0%;display:block;line-height:24px;font-weight:400;color:#000;padding-top:0}

.subhead{font-size:13px;font-weight:700;margin:10px 0 5px;padding-bottom:0;border:none;color:var(--ink)}

/* T/F/NG + Y/N/NG + MCQ option rows.
   Measured on the live player: each row is 43px tall — label padding
   9.6px 8px 9.6px 32px, weight 400, 1px between rows. The indent lives on
   the ROW, not on the container, which is why .options has no padding-left. */
.options{display:block;padding-left:0;margin:4.8px 0 24px}
.options::before{content:'';display:table}
/* li: 645 x 43.19, radius 3px 3px 0 0, 1px margin-bottom, overflow hidden.
   label: NO border and NO radius, padding 9.6px 8px 9.6px 32px, weight 400.
   The whole 645px row takes the hover / selected colour, not just the text. */
.option{position:relative;display:block;padding:9.6px 8px 9.6px 32px;border-radius:3px 3px 0 0;background:#fff;
  border:none;overflow:hidden;margin:0 0 1px;cursor:pointer;transition:background-color .2s ease-in;
  font-weight:400;color:#000;line-height:24px}
.option:hover{background:#E4E4E4}
/* the real exam uses raw native radios/checkboxes, absolutely positioned so
   the label's 32px left padding — not a flex gap — sets the text indent */
.option input[type=radio],.option input[type=checkbox]{position:absolute;left:8px;top:11.6px;
  display:inline-block;flex-shrink:0;cursor:pointer;margin:3px 8px 0 5px}
.option>span{display:block;font:400 16px/24px Arial,sans-serif;color:#000}
/* MCQ + choose-TWO use the lettered circle as the indicator, so hide the native control */
.option:has(.opt-letter) input[type=radio],.option:has(.opt-letter) input[type=checkbox]{display:none}
.option .opt-letter{flex:0 0 20px;height:20px;border-radius:50%;background:var(--paper);border:1px solid var(--line-3);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;color:var(--ink-soft);transition:.12s}
.option.selected{background:#BBD8F0}
.option.selected .opt-letter{background:#2c5aa0;color:#fff;border-color:#2c5aa0}
.option.correct{background:#f1fff4}
.option.correct .opt-letter{background:var(--emerald);color:#fff;border-color:var(--emerald)}
.option.wrong{background:#fff5f5}
.option.wrong .opt-letter{background:var(--crimson);color:#fff;border-color:var(--crimson)}
body.dark-mode .option.selected{background:#1d3a63}
body.dark-mode .option.correct{background:rgba(46,125,50,.18)}
body.dark-mode .option.wrong{background:rgba(196,18,48,.18)}
.option.disabled{pointer-events:none}

/* Choose-TWO multi-select rows — identical markup to the radio group, only the
   control differs (checkbox metrics put it 1px left of the radio). */
.multi-opts{padding-left:0;gap:0;margin:4.8px 0 24px}
.multi-opts .option{padding:9.6px 8px 9.6px 32px;font-weight:400}
.multi-opts .option input[type=checkbox]{position:absolute;left:8px;top:11.6px;
  display:inline-block;flex-shrink:0;cursor:pointer;margin:3px 8px 0 4px}
.multi-opts .option.selected{background:#BBD8F0}
.multi-opts .option.maxed{opacity:.4;pointer-events:none}
body.dark-mode .multi-opts .option.selected{background:#1d3a63}
body.dark-mode .multi-opts .option:hover{background:#1a2535}
/* TRUE / FALSE / NOT GIVEN + YES / NO / NOT GIVEN — stacked, full-width rows */
.tfn-opts{padding-left:0;gap:0}
.tfn-opts .option{padding:9.6px 8px 9.6px 32px;font-weight:400}
.tfn-opts .option.selected{background:#BBD8F0}
body.dark-mode .tfn-opts .option.selected{background:#1d3a63}

/* gap-fill */
.gap-line{display:block;padding:0;line-height:24px;color:#000;font-weight:400}
.gap-line .q-pill{margin:0 6px 0 0}
/* real-exam gap box: question number sits centered inside until the student types */
.gap-field{position:relative;display:inline;vertical-align:baseline;margin:0}
.gap-input{display:inline-block;width:144px;min-width:144px;max-width:100%;height:22.39px;padding:0 8px;
  margin:.8px 4px -1.6px;font-family:Arial,sans-serif;font-weight:400;
  color:#000;background:#fff;border:1px solid #535353;border-radius:3px;outline:none;text-align:start;
  vertical-align:baseline;transition:border .2s linear}
.gap-field .gap-input{width:20px;min-width:144px}
.gap-input:focus,.gap-input.is-current{border:1px solid #418EC8;box-shadow:0 0 0 1px #418EC8}
.gap-num{display:none;position:absolute;inset:0;align-items:center;justify-content:center;
  color:#555;font-weight:700;font-size:14px;pointer-events:none}
body.dark-mode .gap-num{color:#bbb}
.gap-field .gap-input:not(:placeholder-shown) + .gap-num,
.prose-gap .gap-input:not(:placeholder-shown) + .gap-num{display:none}
/* ── Prose-style summary completion ── */
.prose-summary{line-height:24px;color:#000;font-weight:400;padding:0}
/* note completion: one disc bullet per gap, matching the real exam's <ul>
   (list-style disc outside, padding-left 40px, margin 16px 0; li 16px/24px) */
.notes-list ul{list-style:disc outside;padding:0 0 0 40px;margin:16px 0}
.notes-list li{line-height:24px;color:#000;font-weight:400}
/* The note-completion / summary title is 700 17.6px/21.12px with a 14.608px
   bottom margin — the same step the passage title uses. Rendered as an h4 so it
   keeps the --base-size hook the text-size control drives. */
.note-title{--base-size:17.6px;font-weight:700;line-height:21.12px;color:#000;margin:0 0 14.608px}
/* Measured off the live Inspera player: input.textEntryInteractionValue is
   144x22, 1px #535353, radius 3px, padding 0 8px, Arial 16px. Typed text is
   left-aligned (text-align:start); only the number placeholder is centred,
   and it is solid black at weight 700. Focus is a 1px #418EC8 border plus a
   1px #418EC8 ring, no glow. */
/* input.textEntryInteractionValue: 144 x 22.39, 1px #535353, radius 3px,
   padding 0 8px, Arial 16px weight 400, margin 0.8px 4px -1.6px. The inline
   width is 20px with min-width 144px, so the box GROWS past 144 for a long
   answer instead of scrolling inside a fixed track. */
.prose-gap{display:inline;position:relative;vertical-align:baseline;margin:0}
.prose-gap .gap-input{width:20px;min-width:144px;max-width:100%;height:22.39px;padding:0 8px;
  margin:.8px 4px -1.6px;border:1px solid #535353;border-radius:3px;font-weight:400;
  box-shadow:none;background:#fff;color:#000;overflow:clip;transition:border .2s linear}
/* The question number is the input's own placeholder — bold, solid black and
   CENTRED — while the typed value is regular weight and left-aligned. The
   placeholder is not hidden on focus: it disappears only when text is typed,
   exactly as an ordinary placeholder does. */
.gap-input{display:inline-block;box-sizing:border-box;text-align:start;line-height:normal;cursor:text}
.gap-input::placeholder{color:#000;font-family:Arial,sans-serif;font-weight:700;text-align:center;opacity:1}
/* The blue ring means "this is the current scorable item", NOT "focused" — it
   is painted on focus and stays after blur until another question is current. */
.prose-gap .gap-input:focus,
.prose-gap .gap-input.is-current{border:1px solid #418EC8;box-shadow:0 0 0 1px #418EC8;outline:none}
body.dark-mode .prose-gap .gap-input{border-color:#999}
body.dark-mode .prose-gap .gap-num{color:#ccc}
/* ── Word-bank summary (Q37-40 style) ── */
/* .gapChoiceContainer is a plain wrapping flex row — no border, no fill, 5px
   radius, 16px bottom margin. The tokens themselves are the only boxes. */
.word-bank-list{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0;padding:0;border:none;
  border-radius:5px;margin:0 0 16px;background:transparent;min-height:34px}
/* .gapChoice.draggable.gapText: height 24, 1px #919191, radius 4px,
   margin 3px 3px 8px, cursor move, hover border #0E98F0; the inner .textNode
   is 700 17.6px Arial with 8.8px of horizontal padding. */
.word-tile{display:inline-flex;align-items:center;height:24px;padding:0;margin:3px 3px 8px;
  border:1px solid #919191;border-radius:4px;font-weight:700;color:#000;cursor:move;user-select:none;
  background:#fff;transition:border-color .13s,background .13s}
.word-tile>*,.word-tile{line-height:normal}
.word-tile{padding:0 8.8px;gap:6px}
/* sentence endings are whole sentences: let a tile wrap instead of a 24px box cutting through its text */
.word-tile{height:auto;min-height:24px;white-space:normal;max-width:100%;line-height:1.3;padding:2px 8.8px;text-align:left}
.word-tile-id{flex:0 0 auto}
.word-tile:hover{border-color:#0E98F0;background:#fff}
.word-tile.selected{border-color:#0E98F0;background:#EAF4FC}
.word-tile.used{display:none}
.word-tile-id{color:#000;font-weight:700}
/* A drop slot sits inline in prose exactly where a typed gap does, so it takes
   the measured text-entry metrics: 144 x 22.39, 1px #535353, radius 3px,
   margin .8px 4px -1.6px, with the question number bold-black-centred inside. */
.word-drop{display:inline-flex;align-items:center;justify-content:center;vertical-align:baseline;
  min-width:144px;height:22.39px;padding:0 8px;border:1px solid #535353;border-radius:3px;
  margin:.8px 4px -1.6px;cursor:pointer;font-weight:400;color:#000;
  transition:border .2s linear,background .13s;background:#fff}
.word-drop:not(.filled)::before{content:attr(data-qnum);font-weight:700;color:#000;pointer-events:none}
.word-drop:hover{border-color:#418EC8}
.word-drop.is-current{border:1px solid #418EC8;box-shadow:0 0 0 1px #418EC8}
.word-drop.drag-over{border:1px solid #FA5101;background:rgba(0,0,0,.06)}
.word-drop.filled{border-color:#535353;background:#fff;color:#000;font-weight:400}
body.dark-mode .word-drop{border-color:#555}
body.dark-mode .word-drop.filled{background:#2a2a2a;color:#eee}
.gap-input.correct{color:var(--emerald);border-color:var(--emerald)}
.gap-input.incorrect{color:var(--crimson);border-color:var(--crimson)}
.gap-input.over-limit,.gap-input.limit-warn,.gap-input.word-limit-warning{border-color:var(--amber) !important;color:var(--amber) !important;background:#fff7ee}

/* dropdown (paragraph matching) */
.dropdown{appearance:none;-webkit-appearance:none;
  background:var(--paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 8px center;
  border:1px solid var(--line-4);border-radius:2px;padding:3px 26px 3px 8px;font-family:var(--sans);font-size:12.5px;font-weight:400;
  color:var(--ink);cursor:pointer;outline:none;min-width:62px;transition:border-color .15s}
.dropdown:focus{border-color:#444}
.dropdown.correct{border-color:var(--emerald);color:var(--emerald)}
.dropdown.incorrect{border-color:var(--crimson);color:var(--crimson)}

/* word bank box */
/* Reference list of the lettered options. Red is reserved for the logo and
   the submit button in the real player, so the accent here is neutral. */
/* No legend box appears in the official Reading demo, so this reuses the one
   card treatment the player does define — the rubric card: #F1F2EC on a 1px
   #D5D5D5 border at 4px radius, 12px/16px padding, everything 16px/24px. */
.option-list-box{background:#F1F2EC;border:1px solid #D5D5D5;
  border-radius:4px;padding:12px 16px;margin:0 0 16px}
.option-list-box .olb-title{font-size:16px;font-weight:700;color:#000;margin:0 0 4px;line-height:normal}
.option-list-box ul{list-style:none}
.option-list-box li{font-size:16px;line-height:24px;padding:0;color:#000;font-weight:400;display:flex;align-items:baseline;gap:8px}
.option-list-box li .pl-letter{font-weight:700;color:#000;width:20px;flex-shrink:0}

/* ── Heading / Paragraph match bank (real-exam style) ── */
.heading-bank{margin:10px 0 14px;padding:14px 16px;background:var(--paper);border:1px solid var(--line-3);border-radius:6px}
.bank-label{font-weight:700;font-size:13.5px;color:var(--ink);margin-bottom:10px}
.bank-items{display:flex;flex-direction:column;gap:5px}
.drag-item{padding:9px 14px;border:1.5px solid #1a1a1a;border-radius:5px;font-weight:700;font-size:14px;
  background:var(--paper);cursor:grab;user-select:none;color:var(--ink);
  transition:border-color .12s,background .12s;line-height:1.35}
.drag-item:hover{border-color:#4a90d9;background:#f4f8ff}
.drag-item.selected{border:2px solid #3a7bd5;background:#e8f0fd;color:#1a4fb3}
.drag-item.used{opacity:.42;pointer-events:none}
/* drop zone slot beside each question */
.drop-zone{min-width:46px;height:34px;flex-shrink:0;
  border:1.5px dashed #aaa;border-radius:4px;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;cursor:pointer;
  transition:border-color .12s,background .12s;color:var(--ink)}
.drop-zone:hover{border-color:#4a90d9;background:#f4f8ff}
.drop-zone.drag-over{border-color:#3a7bd5;border-style:solid;background:#e8f0fd}
.drop-zone.has-val{border-style:solid;border-color:#3a7bd5;background:#e8f0fd;color:#1a4fb3}

/* feedback pill (review mode) */
.feedback-pill{display:none;margin-left:10px;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 8px;border-radius:10px}
.feedback-pill.show{display:inline-flex}





/* shared inner spans for slot / drop reveal */
.wd-correct{color:var(--emerald);font-weight:700}
.wd-wrong{color:var(--crimson);text-decoration:line-through;font-weight:600;opacity:.8}
/* word-bank drop (Q37-40 style) review states */
.word-drop.correct{border-color:var(--emerald);background:#f1fff4;color:var(--emerald)}
.word-drop.wrong{border-color:var(--crimson);background:#fff5f5;min-width:auto;width:auto;padding:0 9px;gap:6px}
body.dark-mode .word-drop.correct{background:rgba(46,125,50,.18)}
body.dark-mode .word-drop.wrong{background:rgba(196,18,48,.18)}
/* matching-info drop-zone review states */
.drop-zone.correct{border-style:solid;border-color:var(--emerald);background:#f1fff4;color:var(--emerald)}
.drop-zone.wrong{border-style:solid;border-color:var(--crimson);background:#fff5f5;min-width:auto;width:auto;padding:0 9px;gap:6px}
/* matching-headings passage-slot review states */
.para-heading-slot.correct{border-style:solid;border-color:var(--emerald);background:#f1fff4}
.para-heading-slot.wrong{border-style:solid;border-color:var(--crimson);background:#fff5f5}
.para-heading-slot .slot-correct{color:var(--emerald);font-weight:700;font-size:12px;line-height:1.3;text-align:center}
.para-heading-slot .slot-tick{color:var(--emerald);margin-left:4px}
body.dark-mode .para-heading-slot.correct{background:rgba(46,125,50,.16)}
body.dark-mode .para-heading-slot.wrong{background:rgba(196,18,48,.16)}

/* explanation panel (review mode) */
.explain-btn{display:inline-flex;align-items:center;gap:5px;margin-top:7px;padding:4px 10px;border-radius:2px;
  font-size:.68em;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:.12s;
  background:transparent;border:1px solid #418EC8;color:#1F4782;font-family:var(--sans)}
.explain-btn:hover,.explain-btn.open{background:#1F4782;border-color:#1F4782;color:#fff}
.explain-trigger-row{display:flex;flex-wrap:wrap;gap:3px;padding:6px 0 2px;border-top:1px solid var(--line-2);margin-top:6px}
.explain-btn-sm{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:2px;font-size:.68em;font-weight:700;
  cursor:pointer;transition:.12s;background:transparent;border:1px solid #418EC8;color:#1F4782;font-family:var(--sans);margin:0}
.explain-btn-sm:hover,.explain-btn-sm.open{background:#1F4782;border-color:#1F4782;color:#fff}
.explain-panel{display:none;margin-top:8px;padding:8px 11px;background:var(--bg-elev);border-radius:0;
  border-left:3px solid #418EC8;font-size:calc(1em - 3px);line-height:1.48;width:100%}
.explain-panel.show{display:block}
.explain-panel .ep-title{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#1F4782;margin-bottom:6px}
.explain-panel .ep-text{--base-size:13.5px;color:var(--ink);font-weight:500;margin-bottom:8px}
body.dark-mode .explain-panel{background:#242424;border-left-color:#418EC8}
.ep-highlight-src{background:#FFE066;border-radius:1px;padding:0 2px}
body.dark-mode .ep-highlight-src{background:rgba(255,224,102,.28);color:var(--ink)}
.syn-hl-applied{border-radius:2px;padding:0 2px;font-weight:600}
.syn-hl-applied.syn-hl-1{background:rgba(126,217,159,0.60)}
.syn-hl-applied.syn-hl-2{background:rgba(244,154,176,0.55)}
.syn-hl-applied.syn-hl-3{background:rgba(147,197,253,0.60)}
.syn-hl-applied.syn-hl-4{background:rgba(253,186,116,0.60)}
body.dark-mode .syn-hl-applied.syn-hl-1{background:rgba(126,217,159,0.28)}
body.dark-mode .syn-hl-applied.syn-hl-2{background:rgba(244,154,176,0.25)}
body.dark-mode .syn-hl-applied.syn-hl-3{background:rgba(147,197,253,0.28)}
body.dark-mode .syn-hl-applied.syn-hl-4{background:rgba(253,186,116,0.25)}

/* ====
   HIGHLIGHTER + DICTIONARY POPUPS ====*/
/* Real player's adder: white card, 1px #737373, 4px radius, icon-above-label
   buttons with 12px #737373 labels, and a small arrow pointing at the text. */
.hl-popup{position:absolute;z-index:9999;background:#fff;padding:0;border:1px solid #737373;border-radius:4px;
  display:flex;gap:0;align-items:stretch;transform:translateX(-50%);
  transition:opacity .15s ease,transform .15s ease;opacity:0;pointer-events:none;
  box-shadow:0 2px 10px rgba(0,0,0,.25)}
.hl-popup.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(8px)}
/* the pointer sits on the TOP edge, facing the selection above it */
.hl-popup::after{content:'';position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-bottom-color:#fff;margin-bottom:-1px}
.hl-popup::before{content:'';position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  border:7px solid transparent;border-bottom-color:#737373}
/* Measured: the adder is 114.1 x 55 with just two buttons — Note 45.4 x 53 and
   Highlight 66.7 x 53. Clear is ours, and it only appears when the selection
   already sits on a highlight, so the resting toolbar matches the official one. */
.hl-popup .tool-btn{min-width:45.4px;height:53px;border:none;background:transparent;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:6px 7px;color:#737373;transition:background .12s}
.hl-popup .tool-btn.erase{display:none;border-left:1px solid #e0e0e0}
.hl-popup.has-hl .tool-btn.erase{display:flex}
.hl-popup .tool-btn:hover{background:#f0f0f0}
/* The official adder's glyphs are Hypothesis's quote bubble (Note) and a
   downward highlighter marker (Highlight). The toolbar markup is shared, so the
   shapes are swapped in with a mask rather than by editing the SVG. */
.hl-popup .tool-btn>svg{display:none}
.hl-popup .tool-btn::before{content:'';display:block;width:17px;height:17px;flex-shrink:0;
  background:currentColor;-webkit-mask:center/contain no-repeat var(--tb-ic);mask:center/contain no-repeat var(--tb-ic)}
.hl-popup .tool-btn.note{--tb-ic:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201664%201792%22%3E%3Cpath%20d%3D%22M832%20960v-64q0-106-75-181t-181-75h-64q-14%200-23%209t-9%2023v128q0%2014%209%2023t23%209h64q26%200%2045%2019t19%2045v32q0%2026-19%2045t-45%2019H384q-26%200-45-19t-19-45V576q0-106%2075-181t181-75h384q14%200%2023-9t9-23V160q0-14-9-23t-23-9H576q-93%200-178%2036t-146%2098-98%20146-36%20178v576q0%2093%2036%20178t98%20146%20146%2098%20178%2036h192q40%200%2068-28t28-68zm768%200v-64q0-106-75-181t-181-75h-64q-14%200-23%209t-9%2023v128q0%2014%209%2023t23%209h64q26%200%2045%2019t19%2045v32q0%2026-19%2045t-45%2019h-192q-26%200-45-19t-19-45V576q0-106%2075-181t181-75h384q14%200%2023-9t9-23V160q0-14-9-23t-23-9h-384q-93%200-178%2036t-146%2098-98%20146-36%20178v576q0%2093%2036%20178t98%20146%20146%2098%20178%2036h192q40%200%2068-28t28-68z%22%2F%3E%3C%2Fsvg%3E")}
.hl-popup .tool-btn.hilite{--tb-ic:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M7%201h6v9l-3%204-3-4V1zM4%2016h12v2H4v-2z%22%2F%3E%3C%2Fsvg%3E")}
.hl-popup .tool-btn.erase>svg{display:block;width:17px;height:17px;flex-shrink:0}
.hl-popup .tool-btn.erase::before{display:none}
.hl-popup .tool-btn span{font-family:var(--sans);font-size:12px;line-height:1;color:#737373;white-space:nowrap}

/* COSMOS: the consoles' glass, not a flat slab. It stays dark on purpose —
   the exam beneath it may be light, dark or sepia, and one dark card reads on
   all three without being restyled for each. */
.dict-popup{position:absolute;z-index:9999;
  background:linear-gradient(180deg,rgba(16,26,46,.94),rgba(9,15,28,.96));
  color:#eaf1fb;padding:12px 15px 13px;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 12px 32px -10px rgba(2,6,20,.7);
  -webkit-backdrop-filter:blur(12px) saturate(1.05);backdrop-filter:blur(12px) saturate(1.05);
  width:max-content;max-width:340px;font-family:var(--sans);font-size:13px;
  pointer-events:none;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s}
.dict-popup.show{opacity:1;transform:translateY(0);pointer-events:auto}
.dict-word{font-weight:700;color:#e8d5b7;margin-bottom:6px;font-size:15px;text-transform:capitalize;
  border-bottom:1px solid rgba(255,255,255,.10);padding-bottom:5px;letter-spacing:-.005em}
.dict-pos{font-size:10px;color:#8494ae;font-weight:600;text-transform:uppercase;margin-left:6px;letter-spacing:.08em}
.dict-cefr{font-size:10px;color:#08101f;font-weight:700;background:#7fb2ff;border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:1px}
/* a word the glossary does not carry is an absence, not a fault — muted ink */
.dict-miss{color:#8fa0bb;font-style:italic}
.dict-def{line-height:1.55;color:#dfe8f6}
.dict-example{line-height:1.55;color:#8fa0bb;font-style:italic;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.09)}

/* ====
   BOTTOM NAVIGATOR (real-exam) ====*/
/* Measured on the live player: footer 1440 x 53 at y=847 — 50px of content
   under a 3px top border. Three part cells (flex:1 1 0%, min-width:auto, 1px
   side margins) plus a 76.8px deliver button, so the SELECTED cell grows past
   a third of the bar whenever its own content needs more room:
     Part 1  452.39 / 452.41 / 452.41      Part 3  415.80 / 415.80 / 525.60
   The 3px progress strip is a ::before painted INSIDE the cell's top band,
   segmented one dash per number box plus a 98.48px dash over "Part N", and it
   exists only on the selected cell. */
#bnav{background:#fff;border-top:none;flex:0 0 auto;height:53px;min-height:53px;display:flex;align-items:stretch}
#reading-nav{display:flex;align-items:stretch;width:100%;height:53px;overflow:visible}
body.dark-mode #bnav{background:var(--paper)}

/* ── the cell ───────────────────────────────────────────────────────────── */
.bnav-part{position:relative;display:flex;flex:1 1 0%;min-width:auto;margin:0 1px;
  height:53px;border-top:3px solid #fff;background:#fff;text-align:center;overflow:visible}
.bnav-part.cur{justify-content:flex-start}
.bnav-part.other{justify-content:center;cursor:pointer}
body.dark-mode .bnav-part{background:var(--paper);border-top-color:var(--paper)}

/* ── the "Part N" button ────────────────────────────────────────────────── */
.bnav-plabel{position:relative;display:block;box-sizing:border-box;height:50px;padding:16px 20px;
  color:#333;text-align:center;cursor:default;border:none;background:transparent;white-space:nowrap;
  font-family:Arial,sans-serif;font-weight:400;line-height:normal}
.bnav-part.cur .bnav-plabel{flex:0 1 0%;font-weight:600}
.bnav-part.other .bnav-plabel{flex:1 1 0%}
.bnav-part.other .bnav-plabel:hover{background:#efefef;color:#262626}
/* the 98.48 x 3 grey dash over "Part N" — selected cell only */
.bnav-part.cur .bnav-plabel::before{content:'';position:absolute;top:-3px;left:1px;right:1px;height:3px;
  background:#D7D7D7;transition:background .2s ease-in}
.bnav-part.cur.done .bnav-plabel::before{background:#358E14}
.bnav-pnum{margin-right:16px}
.bnav-pscore{display:inline-block;font-family:Arial,sans-serif;font-weight:400;color:#757575}
.bnav-check{display:none}

/* ── the number boxes: contiguous, no gap, content-driven width ─────────── */
.bnav-pills{display:flex;align-items:stretch}
.qpill{position:relative;display:block;box-sizing:border-box;height:26.78px;margin:11.61px 0;
  padding:2.4px 4px;border:2px solid transparent;border-radius:3px;background:transparent;
  color:#333;font-family:Arial,sans-serif;font-size:16px;font-weight:400;line-height:16px;text-align:center;
  white-space:pre;cursor:default}
.qpill:hover,.qpill.current{border-color:#418FC6;background:#fff;font-weight:700}
/* the per-question 3px dash, painted in the cell's own top band */
/* The ::before is positioned against the box's PADDING box, which starts 2px
   inside the border: left:0 / right:-1px therefore measures box-width minus 3
   (17.91 over a 20.91 box, 26.8 over a 29.8 one) and top:-16.61px lifts it into
   the cell's 3px top band at y 847-850. */
.qpill::before{content:'';position:absolute;top:-16.61px;left:0;right:-1px;height:3px;
  background:#D7D7D7;transition:background .2s ease-in}
.qpill.on::before{background:#358E14}
.qpill.flagged{color:var(--primary)}
body.dark-mode .qpill{color:var(--ex-ink-2)}
body.dark-mode .qpill.current{background:var(--ex-panel-2);border-color:var(--ex-focus)}
body.dark-mode .qpill::before{background:#4a4a4a}

/* ── deliver button: 76.8 x 53, #efefef / #535353, 19.2px tick ──────────── */
#sub-btn{flex:0 0 76.8px;width:76.8px;max-width:76.8px;height:53px;padding:16px;
  background:#efefef;border:none;border-radius:0;color:#535353;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:19.2px}
#sub-btn svg{display:block;width:19.2px;height:19.2px;fill:currentColor}
#sub-btn:hover{background:#262626;color:#fff}
#sub-btn.active{background:#333;color:#fff}
#sub-btn.active:hover{background:#262626}
body.dark-mode #sub-btn{background:var(--ex-panel-2);color:var(--ex-ink-2)}

/* generic buttons (registration / intro / completion / results) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 16px;border-radius:2px;
  font-family:var(--sans);font-size:12.5px;font-weight:700;border:1px solid transparent;cursor:pointer;transition:.12s}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-2)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-ghost{background:var(--paper);color:var(--ink-soft);border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:#999;color:var(--ink)}
.btn-gold{background:var(--amber);color:#fff}
.btn-gold:hover{background:#cf4900}
.btn-danger{background:var(--crimson);color:#fff}
.btn-danger:hover{background:var(--primary-2)}
.btn-sm{padding:7px 14px;font-size:12px}
.btn-lg{width:100%;padding:13px 24px;font-size:14px}
.btn-get-key{border-color:var(--primary);color:var(--primary);background:var(--paper)}
.btn-get-key:hover{background:var(--primary);color:#fff !important}

/* ════════ ENTRY TYPOGRAPHY (start page + briefing only) ════════
   No webfonts are possible here — the file runs from file:// with no network,
   so a @font-face would silently fall back and look broken. These are all
   OS-bundled faces, each with a chain down to a guaranteed generic. Warmer and
   more humanist than the Georgia/system-sans pairing used elsewhere. */
:root{
  --entry-display:var(--pw-serif);
  --entry-ui:var(--pw-serif);
}
:is(#stage-registration,#stage-reading-intro){font-family:var(--entry-ui)}
:is(#stage-registration,#stage-reading-intro) :is(.reg-title,.ri-title){
  font-family:var(--entry-display);font-weight:500;letter-spacing:-.005em}
:is(#stage-registration,#stage-reading-intro) :is(.reg-brand,.ri-kicker,
  .reg-field-label,.ri-h4,.reg-fine,.ri-foot,.reg-facts,.ri-sub,
  .reg-input::placeholder,.reg-cta,.ri-cta,.ri-tips li){font-family:var(--entry-ui)}
/* the name a student types should feel like handwriting on a form, not UI */
#stage-registration .reg-input{font-family:var(--entry-display);font-weight:500}
#stage-reading-intro .ri-tips li b{font-family:var(--serif-data);font-weight:400}
/* Avenir/Optima run small and light — nudge weights so nothing looks anaemic */
:is(#stage-registration,#stage-reading-intro) .reg-brand,
:is(#stage-registration,#stage-reading-intro) .ri-kicker{font-weight:600;letter-spacing:.22em}
:is(#stage-registration,#stage-reading-intro) .reg-cta,
:is(#stage-registration,#stage-reading-intro) .ri-cta{font-weight:600;letter-spacing:.01em}

/* ════════ A4 CERTIFICATE + SCHEDULE OF ANSWERS ════════
   Two sheets, as awarding bodies actually issue results. Sheet 1 is ceremonial
   and shareable; sheet 2 carries all forty answers. Classical devices only —
   an Oxford (thick-thin) rule frame, real small caps, hairline table, the score
   written in words. No gradient bar, no KPI strip, no tinted callout, no ticks.
   Bottom margin is deliberately larger than the top so the block sits above the
   geometric centre, where the eye reads it as centred. */
#stage-results{background:#E7ECF1}
#stage-results .results-content{padding:28px 20px 56px;max-width:none;display:flex;
  flex-direction:column;align-items:center;gap:24px}

.cert-sheet{width:210mm;max-width:100%;min-height:296mm;background:#fff;position:relative;
  padding:14mm;box-sizing:border-box;
  box-shadow:0 0 0 1px rgba(31,71,130,.08),
             0 1px 1px rgba(16,24,40,.06),
             0 18px 40px -20px rgba(16,24,40,.22);
  background-image:repeating-linear-gradient(0deg,rgba(31,71,130,.014) 0 1px,transparent 1px 3px);
  animation:pwRise .52s cubic-bezier(.2,.8,.25,1) both}
/* Oxford rule: a heavier inner line with a hairline set just outside it */
/* content sits above the geometric centre, where the eye reads it as centred */
.cert-frame{justify-content:flex-start;border:1.5px solid #1F4782;outline:.5px solid #1F4782;outline-offset:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(16,24,40,.05);
  min-height:calc(296mm - 28mm);padding:20mm 18mm 26mm;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;text-align:center}
.cert-sheet{font-family:var(--serif-text)}  /* inherited, so .sc-tbl/.band-num can override */
.cert-logo{width:46px;height:46px;border-radius:11px;display:block;margin:0 auto 10px}
.cert-issuer{font-size:11px;letter-spacing:.16em;color:#1F4782;margin-bottom:34px;
  text-transform:uppercase}
.cert-award{font-size:13px;font-style:italic;color:#4A4A4A;margin-bottom:12px}
.cert-name{font-size:40px;font-weight:400;line-height:1.15;color:#111;margin:0 0 16px;
  letter-spacing:.005em}
.cert-for{font-size:12.5px;font-style:italic;line-height:2.0;color:#4A4A4A;
  max-width:34em;margin:0 auto 8px}
.cert-band{margin:14px 0 6px}
#stage-results .band-num{font-family:var(--serif-data);font-size:60px;line-height:1;color:#1F4782;font-weight:400;
  font-variant-numeric:lining-nums tabular-nums;
  }
.cert-band-words{font-family:var(--serif-data);font-size:13px;letter-spacing:.12em;color:#1F4782;margin-top:10px;
  text-transform:uppercase}
.cert-band-desc{font-size:11.5px;color:#4A4A4A;margin-top:6px;font-style:italic}
.cert-date{font-size:12px;font-style:italic;color:#4A4A4A;margin:26px 0 0}
.cert-foot{margin-top:56px;padding-top:30px;width:100%;display:flex;
  align-items:flex-end;justify-content:space-between;gap:20px;text-align:left}
.cf-mark{font-size:21px;font-style:italic;color:#1F4782;margin-bottom:-4px;padding-left:6px}
.cf-line{width:160px;height:1px;background:#111;margin-bottom:6px}
.cf-who{font-size:12.5px;color:#111}
.cf-role{font-size:10.5px;color:#4A4A4A;margin-top:2px;font-style:italic}
.cf-seal{width:74px;height:74px;flex-shrink:0;opacity:.9}
.cf-seal svg{width:100%;height:100%}
.cert-ref{font-family:var(--serif-data);margin-top:16px;font-size:9.5px;letter-spacing:.16em;color:#4A4A4A;
  text-transform:uppercase}

/* ── sheet 2 ── */
.cert-sheet--schedule .cert-frame{padding:16mm 16mm 20mm;align-items:stretch;text-align:left}
.sc-head{text-align:center;margin-bottom:4px}
.sc-title{display:block;font-size:19px;letter-spacing:.1em;color:#111;
  text-transform:uppercase}
.sc-sub{display:block;font-size:10px;font-style:italic;color:#4A4A4A;margin-top:4px}
.sc-name{text-align:center;font-size:11.5px;color:#4A4A4A;font-style:italic;
  padding-bottom:12px;border-bottom:1px solid #111;margin-bottom:14px}
/* explicit placement: a ::before participates in grid auto-placement and was
   stealing column 1, which swapped the two halves and threw off their tops */
.sc-cols{display:grid;grid-template-columns:1fr 1px 1fr;gap:0 14px;align-items:start}
.sc-cols .sc-col:first-of-type{grid-column:1;grid-row:1}
.sc-cols .sc-rule{grid-column:2;grid-row:1;background:#DDD;align-self:stretch}
.sc-cols .sc-col:last-of-type{grid-column:3;grid-row:1}
.sc-tbl{font-family:var(--serif-data);width:100%;border-collapse:collapse}
.sc-tbl th{font-size:9px;letter-spacing:.07em;color:#111;font-weight:400;
  text-transform:uppercase;
  padding:0 4px 5px;border-bottom:1px solid #111;text-align:left}
.sc-tbl td{font-size:9.5px;line-height:1.5;padding:3.1px 4px;border-bottom:.25px solid #DDD;
  color:#111;vertical-align:baseline}
.sc-tbl tr:last-child td{border-bottom:1px solid #111}
.sc-tbl .sc-n{font-family:var(--serif-data);width:9%;text-align:right;font-variant-numeric:lining-nums tabular-nums;color:#4A4A4A}
.sc-tbl .sc-a{width:44%}
.sc-tbl .sc-k{width:35%;font-style:italic;color:#4A4A4A}
.sc-tbl .sc-m{font-family:var(--serif-data);width:12%;text-align:right;font-variant-numeric:lining-nums tabular-nums}
/* the deviation is italic; a clean row is itself the signal */
.sc-tbl tr.is-wrong .sc-a{font-style:italic}
.sc-tbl tr.is-blank .sc-a{color:#4A4A4A;text-align:center}
.sc-caption{font-size:9.5px;font-style:italic;line-height:1.6;color:#4A4A4A;
  margin:12px 0 0;max-width:40em}
.sc-tally{font-family:var(--serif-data);display:flex;gap:26px;margin-top:14px;padding-top:10px;border-top:1px solid #111;
  font-size:10.5px;color:#4A4A4A;text-transform:uppercase;letter-spacing:.06em}
.sc-tally b{color:#111;font-variant-numeric:lining-nums tabular-nums;margin-left:5px}

.cert-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:210mm;max-width:100%}
.ca-btn{flex:1 1 auto;min-width:200px;padding:14px 20px;border-radius:var(--r-ctl);cursor:pointer;
  font-family:var(--pw-ui);font-weight:600;font-size:13.5px;transition:background .14s,border-color .14s,color .14s}
.ca-btn.primary{background:#1F4782;color:#fff;border:none}
.ca-btn.primary:hover{background:#24528F}
.ca-btn.ghost{background:#fff;color:var(--pw-ink-2);border:1px solid #DCE6F0}
.ca-btn.ghost:hover{border-color:#418EC8;color:#1F4782}
@media (max-width:820px){
  .cert-sheet{width:100%;min-height:0;padding:8mm}
  .cert-frame{padding:22px 18px 26px;min-height:0}
  .cert-name{font-size:29px}
  #stage-results .band-num{font-size:48px}
  .sc-cols{grid-template-columns:1fr}
  .sc-cols::before{display:none}
  .cert-actions{width:100%}
}
body.cosmos-cert #stage-results{background:transparent}
body.dark-mode .cert-sheet{background:#fff}

/* ── resume sheet ── */
.resume-sheet{position:fixed;inset:0;z-index:11000;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(12,16,24,.72);-webkit-backdrop-filter:saturate(.6) blur(2px);backdrop-filter:saturate(.6) blur(2px);
  opacity:0;pointer-events:none;transition:opacity .18s ease}
.resume-sheet.show{opacity:1;pointer-events:auto}
.resume-sheet .rsm-card{width:100%;max-width:380px;background:#fff;border-radius:2px;font-family:var(--serif-text);
  padding:34px 32px 26px;text-align:center;box-shadow:var(--e2);
  transform:translateY(10px) scale(.98);transition:transform .22s cubic-bezier(.2,.75,.2,1)}
.resume-sheet.show .rsm-card{transform:none}
.resume-sheet .rsm-title{font-family:var(--pw-serif);font-size:22px;font-weight:600;
  color:var(--pw-ink);margin:0 0 8px;line-height:1.25}
.resume-sheet .rsm-sub{font-family:var(--pw-ui);font-size:13.5px;color:var(--pw-ink-3);margin:0 0 4px}
.resume-sheet .rsm-meta{font-family:var(--pw-ui);font-size:12.5px;font-weight:600;color:#1F4782;margin:0 0 22px}
.resume-sheet .rsm-actions{display:flex;flex-direction:column;gap:9px}
.resume-sheet .rsm-btn{width:100%;padding:13px 18px;border-radius:2px;font-family:var(--pw-ui);
  font-weight:700;font-size:14px;cursor:pointer;transition:background .14s,border-color .14s,color .14s}
.resume-sheet .rsm-btn.primary{background:#1F4782;color:#fff;border:none}
.resume-sheet .rsm-btn.primary:hover{background:#24528F}
.resume-sheet .rsm-btn.ghost{background:#fff;color:var(--pw-ink-2);border:1.5px solid #DCE6F0}
.resume-sheet .rsm-btn.ghost:hover{border-color:#8C2F2F;color:#8C2F2F}
.resume-sheet .rsm-warn{margin:14px 0 0;font-family:var(--pw-ui);font-size:11px;color:#5B7FA6}
body.dark-mode .resume-sheet .rsm-card{background:#201b17}
body.dark-mode .resume-sheet .rsm-title{color:#f3ede5}
@media (prefers-reduced-motion:reduce){
  .resume-sheet,.resume-sheet .rsm-card{transition:none}
}

/* ====
   START / REGISTRATION
   The registration screen is the CDI cosmic shell's — every rule
   that draws it lives in the COSMIC SHELL block at the foot of
   this stylesheet, id-scoped to #stage-registration so it wins
   against the wrapper-theme layer in between.

   What used to sit here was the pre-port .reg-wrap / .reg-rail /
   .reg-input editorial card. Its markup is gone (the stage now
   carries Listening/Writing's .start-card), so the rules were
   dead weight and are deleted rather than layered over.
   Only the stage box itself is kept, as the no-WebGL floor. ====*/
#stage-registration{
  align-items:center;justify-content:center;overflow-y:auto;padding:24px;
  background:var(--panel);
}
/* ====
   TRANSITION / INSTRUCTIONS ====*/
.transition-stage{background:var(--panel);align-items:center;justify-content:center;padding:30px}
.trans-card{width:100%;max-width:720px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:44px 48px 40px;box-shadow:var(--shadow-md);text-align:center}
.trans-icon{font-size:44px;margin-bottom:6px}
.trans-eyebrow{font-size:11px;font-weight:800;letter-spacing:.25em;text-transform:uppercase;color:var(--primary);margin-bottom:10px}
.trans-title{font-size:32px;font-weight:800;line-height:1.15;margin-bottom:10px;color:var(--ink)}
.trans-sub{font-size:15px;color:var(--ink-soft);line-height:1.6;max-width:540px;margin:0 auto 26px}
.trans-rules{text-align:left;background:var(--panel);border-radius:var(--radius);padding:20px 24px;margin-bottom:24px;border:1px solid var(--line)}
.trans-rules h4{font-size:14px;font-weight:700;margin-bottom:10px;color:var(--ink)}
.trans-rules ul{list-style:none}
.trans-rules li{font-size:14px;color:var(--ink-soft);margin:6px 0;padding-left:22px;position:relative;line-height:1.5}
.trans-rules li::before{content:'✓';position:absolute;left:0;color:var(--emerald);font-weight:800}

/* ====
   COMPLETION ====*/
#stage-completion{background:var(--panel);align-items:center;justify-content:center;padding:30px;overflow-y:auto}
.complete-card{width:100%;max-width:600px;background:var(--paper);border-radius:var(--radius-lg);padding:48px 44px 40px;text-align:center;box-shadow:var(--shadow-md);border:1px solid var(--line)}
.complete-icon{font-size:56px;margin-bottom:14px}
.complete-title{font-size:34px;font-weight:800;margin-bottom:10px;line-height:1.1;color:var(--ink)}
.complete-sub{color:var(--ink-soft);font-size:15px;line-height:1.6;margin-bottom:28px}
.password-wrap{margin:18px auto 0;max-width:380px}

/* ====
   RESULTS  (CDI certificate, recoloured flat/red)
   Owner: R3.  Only the stage shell lives here.  The certificate
   itself is typeset further down this sheet, under
   "CERTIFICATE — the CDI document", because it has to sit after
   every other #stage-results rule the wrapper skins left behind. ====*/
#stage-results{background:var(--panel);flex-direction:column}
#stage-results .results-content{margin:0;padding:44px 24px 80px;overflow-y:auto;overscroll-behavior:contain;flex:1;width:100%}

/* ====
   WARNING OVERLAY (anti-cheat) + TOAST
   [PORTED FROM: the Writing master.]  Both are CDI chrome, not
   exam chrome. Selectors are id-scoped so no later block in
   this stylesheet can flip them back to a half-styled state —
   and the toast itself is styled with the shell, at the foot
   of the file, because a later `.toast` rule exists down there. ====*/
.warning-overlay{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:24px}
.warning-overlay.show{display:flex}
#warning-overlay{--crimson:#ff5e78;background:radial-gradient(900px 600px at 50% 36%,rgba(24,8,14,.72),rgba(4,6,12,.90));
  -webkit-backdrop-filter:blur(9px) saturate(.85);backdrop-filter:blur(9px) saturate(.85);
  animation:wFade .18s ease both;overflow-y:auto;font-family:var(--ch-ui)}
@keyframes wFade{from{opacity:0}to{opacity:1}}
#warning-overlay .warning-card{width:100%;max-width:540px;margin:auto;padding:0;overflow:hidden;text-align:left;border-radius:20px;
  background:linear-gradient(180deg,rgba(30,22,28,.97),rgba(12,10,16,.98));
  border:1px solid rgba(255,255,255,.11);border-top:1px solid rgba(255,255,255,.11);
  box-shadow:0 2px 6px rgba(0,0,0,.45),0 30px 70px -20px rgba(0,0,0,.8),0 80px 140px -60px rgba(160,20,40,.55);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  animation:wIn .4s cubic-bezier(.2,.75,.2,1) both}
@keyframes wIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
#warning-overlay .warning-card::before{content:"";display:block;height:3px;
  background:linear-gradient(90deg,#8f1023,#e11d3c 45%,#ff6b7f)}
#warning-overlay .wc-body{padding:28px 32px 24px}
#warning-overlay .wc-top{display:flex;align-items:flex-start;gap:15px;margin-bottom:18px}
#warning-overlay .warning-card .ic{width:48px;height:48px;border-radius:15px;flex:0 0 auto;display:grid;place-items:center;
  font-size:0;margin:0;background:linear-gradient(160deg,rgba(225,29,60,.24),rgba(225,29,60,.06));
  border:1px solid rgba(225,29,60,.36);color:#ff8095;box-shadow:0 8px 20px -10px rgba(225,29,60,.85)}
#warning-overlay .warning-card .ic svg{width:23px;height:23px}
#warning-overlay .wc-heads{min-width:0;padding-top:1px}
#warning-overlay .wc-eyebrow{font-size:9.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#ff8095}
#warning-overlay .warning-card h2{font-family:var(--ch-display);font-size:23px;font-weight:700;letter-spacing:-.02em;
  line-height:1.14;color:#fff;margin:6px 0 0}
#warning-overlay .warning-card p{margin:0;color:#c3cad8;font-size:13.5px;line-height:1.62}
#warning-overlay .wc-reason{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-radius:13px;
  background:rgba(225,29,60,.07);border:1px solid rgba(225,29,60,.20);border-left:3px solid #e11d3c;margin-bottom:20px}
#warning-overlay .wc-reason svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px;color:#ff8095}
#warning-overlay .wc-reason p{color:#e4e9f2;font-size:13.5px}
#warning-overlay .wc-meter{margin-bottom:18px}
#warning-overlay .wc-meter-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
#warning-overlay .wc-meter-head span{font-size:9.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#8f9bb0}
#warning-overlay .warning-card .strike-counter{display:flex;gap:7px;margin:0}
#warning-overlay .warning-card .strike-counter .strike{flex:1;height:7px;width:auto;border-radius:99px;
  background:rgba(255,255,255,.09);border:none;transition:background .35s,box-shadow .35s}
#warning-overlay .warning-card .strike-counter .strike.on{background:linear-gradient(90deg,#e11d3c,#ff5e78);
  border:none;box-shadow:0 0 14px rgba(225,29,60,.7)}
#warning-overlay #warning-strikes-text{font-size:12px;line-height:1.55;color:#8f9bb0!important;margin-top:10px}
#warning-overlay #warning-strikes-text strong{color:#e4e9f2;font-weight:700}
#warning-overlay .wc-foot{display:flex;align-items:center;gap:14px;padding:15px 32px;
  background:rgba(255,255,255,.035);border-top:1px solid rgba(255,255,255,.08)}
#warning-overlay .wc-note{font-size:11.5px;color:#7c889c;line-height:1.5;min-width:0}
#warning-overlay .wc-btn{margin-left:auto;flex:0 0 auto;padding:12px 20px;border:none;border-radius:11px;cursor:pointer;
  font-family:var(--ch-ui);font-size:13px;font-weight:700;color:#fff;
  background:linear-gradient(180deg,#f4425f,#d4102f);box-shadow:0 10px 24px -12px rgba(225,29,60,.9),inset 0 1px 0 rgba(255,255,255,.22);
  transition:.16s}
#warning-overlay .wc-btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
#warning-overlay .wc-btn:active{transform:translateY(0)}
@media (max-width:560px){
  #warning-overlay .wc-body{padding:24px 20px 20px}
  #warning-overlay .wc-foot{flex-direction:column;align-items:stretch;gap:11px;padding:14px 20px}
  #warning-overlay .wc-btn{margin-left:0;width:100%}
  #warning-overlay .warning-card h2{font-size:20px}
}

/* review-mode locks */
body.review-mode .gap-input,body.review-mode .dropdown,body.review-mode .option{pointer-events:none}
body.review-mode .q-pill{cursor:default;opacity:.8}
body.review-mode .timer{display:none}
/* Full screen is a REVIEW affordance only — the real player has no such button,
   so it must never show while the exam is running. It sits beside the wifi
   glyph, first in the icon rail. */
/* Scoped to #hdr on purpose: `#hdr .ex-icbtn{display:flex}` at the top of this
   sheet is (0,1,1,0) and outranks a bare `#fs-btn` (0,1,0,0), so the plain
   selector loses on specificity and the button leaks into the live exam. */
#hdr #fs-btn{display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer;color:inherit}
body.is-fullscreen #hdr #fs-btn .fs-in{display:none}
body.is-fullscreen #hdr #fs-btn .fs-out{display:inline !important}
.fs-review-btn{display:none}

/* ====
   VOCAB PDF (off-screen, white) ====*/
#vocab-print{position:absolute;left:-10000px;top:0;width:794px;background:#fff;color:#0f172a;font-family:var(--sans)}
.vp-page{width:794px;min-height:1122px;padding:48px 52px;box-sizing:border-box;background:#fff}
.vp-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:2px solid #16305c;margin-bottom:22px}
.vp-logo-block{display:flex;align-items:center;gap:12px}
.vp-logo-mark{width:42px;height:42px;border-radius:2px;background:#c41230;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Arial Black',Arial,sans-serif;font-weight:900;font-size:16px}
.vp-meta{text-align:right}
.vp-meta .passage-label{font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#64748b}
.vp-meta .passage-title-text{font-size:14px;font-weight:800;color:#0f172a;margin-top:2px}
.vp-footer{margin-top:32px;padding-top:14px;border-top:1px solid #e2e8f0;display:flex;justify-content:space-between;font-size:10px;color:#94a3b8;font-weight:600}

/* Printing is owned by the certificate block further down the sheet: the
   screen report is hidden and #print-report — a typeset two-page ink
   version — is what actually reaches the paper. Nothing to do here. */

@media (max-width:880px){
  #hdr,.topbar{padding:0 12px}
  .exam-main{flex-direction:column}
  .split-divider{display:none}
  #passage-pane{width:100%;height:46%;padding:16px 18px}
  #questions-pane{height:54%;padding:14px 16px}
  #tg-link span:not(.tg-circle){display:none}
}

/* ── IELTS Authentic Header ── */
/* #E31837 is the red in the official ielts.svg the real player serves — not
   the #C41230 used elsewhere. There is also no divider rule after the logo. */
.ielts-wordmark{
  font-family:'Arial Black',Arial,sans-serif;font-weight:900;font-size:28px;
  color:#E31837;letter-spacing:.02em;user-select:none;line-height:1;
  padding-right:16px;margin-right:2px;
  display:flex;align-items:center;gap:1px;
}
.ielts-tm{font-size:13px;font-family:Arial,sans-serif;font-weight:400;vertical-align:super;margin-top:-8px}
.test-taker-block{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.ttid-label{font-size:16px;font-weight:600;color:#000}
.ttid-name{font-size:14px;font-weight:400;color:var(--ink-soft);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr-icon-btn{background:none;border:none;cursor:default;padding:6px 5px;display:flex;align-items:center;
  justify-content:center;color:#111;opacity:1;transition:opacity .15s;flex-shrink:0}
.hdr-icon-btn:hover{opacity:.75}
.hdr-icon-btn.offline{color:#c41230;opacity:1}
.notif-popup{position:absolute;top:calc(100% + 6px);right:0;background:var(--paper);
  border:1px solid var(--line);border-radius:3px;box-shadow:0 4px 18px rgba(0,0,0,.14);
  width:210px;z-index:2000;display:none}
.notif-popup.open{display:block}
.notif-popup-hdr{font-size:12px;font-weight:700;color:var(--ink);padding:8px 13px;
  border-bottom:1px solid var(--line);background:var(--panel)}
.notif-popup-body{font-size:13px;color:var(--ink-mute);padding:16px 13px;text-align:center}
body.dark-mode .notif-popup{background:var(--paper);border-color:var(--line)}

/* ── Paraphrase Bridge (Synonym Map) ── */
.paraphrase-bridge{margin-top:12px;background:rgba(255,255,255,.65);border-radius:8px;overflow:hidden;border:1px solid var(--primary);padding:2px}
body.dark-mode .paraphrase-bridge{background:rgba(0,0,0,.2)}
.pb-row{--base-size:13.5px;display:grid;grid-template-columns:1fr 28px 1fr;align-items:center;padding:5px 10px;border-bottom:1px solid rgba(196,18,48,.18);font-size:inherit}
.pb-row:last-child{border-bottom:none}
.pb-q{font-weight:600;color:var(--ink-soft);text-align:right}
.pb-icon{color:var(--primary);text-align:center;font-weight:800}
.pb-p{font-weight:700;color:var(--emerald)}
.pb-header{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--primary);margin:10px 0 5px}
body.dark-mode .pb-p{color:var(--emerald)}
body.dark-mode .pb-q{color:var(--ink-mute)}
body.dark-mode .pb-row{border-bottom-color:rgba(255,90,114,.28)}
body.dark-mode .pb-header{color:var(--primary)}

/* ════════════════════════════════════════════════════════════════════
   WRAPPER THEME  —  applies ONLY to the non-test screens
   (registration · reading-intro · completion · results).
   The live exam (#stage-reading) is deliberately left as the plain
   Arial IELTS clone and is never touched here.

   V3 palette: white, near-white elevations, one red accent. No beige,
   no cream, no gradients-as-decoration, no paper grain. Fonts are a
   system stack because this file runs from file:// with no network —
   a webfont here renders as an unstyled fallback, not as a design.
   ════════════════════════════════════════════════════════════════════ */
:root{
  --pw-display:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,'Helvetica Neue',Arial,sans-serif;
  --pw-ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,'Helvetica Neue',Arial,sans-serif;
  /* system serif — no network fonts (file runs from file://); Georgia/Times
     ship on every OS and give the wrapper its own editorial voice, distinct
     from the exam's Arial-only skin. */
  /* One serif for the whole wrapper. Hoefler Text (macOS) / Constantia (Windows)
     are transitional faces with LINING figures — Georgia's old-style figures made
     the band score render as "3·5" at display size, the period reading as an
     interpunct between two descending glyphs. Georgia stays only as a floor. */
  --serif-text:Athelas,"Iowan Old Style",Charter,Constantia,Georgia,serif;
  /* numerals ONLY: Palatino is lining + tabular out of the box, both OSes */
  --serif-data:Palatino,"Palatino Linotype","Iowan Old Style",Charter,Cambria,
               Constantia,Georgia,serif;
  --pw-serif:var(--serif-text);

  /* surfaces — white and near-white only */
  --pw-paper:#ffffff;
  --pw-surface:#ffffff;
  --pw-surface-2:#FAFAFA;
  --pw-surface-3:#F6F7F9;
  --pw-canvas:#FBFBFC;

  /* ink */
  --pw-ink:#0A0A0A;
  --pw-ink-2:#525252;
  --pw-ink-3:#8A8A8A;

  /* hairlines */
  --pw-line:#E8E8E8;
  --pw-line-2:#DEDEDE;

  /* one accent: IELTS red, the brand tie to the exam.
     #418EC8 is reserved for the exam screen and never appears here. */
  --pw-red:#C41230;
  --pw-red-2:#A50F28;
  --pw-red-wash:#FDF2F4;
  --pw-status-red:#C41230;
  --pw-emerald:#1F7A43;
  --pw-emerald-wash:#F1F8F3;
  --pw-amber:#B45309;
  --pw-gold:#B45309;
  --pw-burgundy:#8C0D22;

  /* barely-there elevation */
  --pw-shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --pw-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);
  --pw-shadow-lg:0 1px 2px rgba(0,0,0,.04),0 16px 48px rgba(0,0,0,.08);

  /* radii */
  --pw-r-card:14px;
  --pw-r-ctl:8px;

  --pw-ease:cubic-bezier(.2,.7,.2,1);
  /* Exactly two elevations, neutral not blue-tinted. Replaces eight unrelated
     shadow recipes that shared no light source. */
  --e1:0 1px 2px rgba(16,24,40,.06);
  --e2:0 12px 32px -12px rgba(16,24,40,.14);
  --r-ctl:6px;
}
:is(#stage-registration,#stage-reading-intro,#stage-completion,#stage-results){
  font-family:var(--pw-ui);
  color:var(--pw-ink);
  background:var(--pw-canvas);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
:is(#stage-registration,#stage-reading-intro,#stage-completion,#stage-results) > *{position:relative;z-index:1}

/* ── premium display headings ── */
:is(#stage-registration,#stage-reading-intro,#stage-completion) :is(.start-title,.trans-title,.complete-title){
  font-family:var(--pw-display);font-weight:600;letter-spacing:-.015em;color:var(--pw-ink);
  font-optical-sizing:auto;
}

/* ── eyebrows ── */
:is(#stage-reading-intro,#stage-completion) .trans-eyebrow{
  font-family:var(--pw-ui);font-weight:800;font-size:11px;letter-spacing:.28em;color:var(--pw-red);
}

/* ════════ ENTRANCE / REGISTRATION — see base rules above for the
   full-bleed split layout (.reg-shell / .reg-cover / .reg-panel).
   Nothing here: the new layout doesn't reuse the card system the
   other wrapper stages share, by design. ════════ */

/* ════════ READING INTRO — the SAME composition as the entrance.
   Same rail grid, same left edge, same label device, same text-link
   action. The rail carries one more thing than it did on screen 1
   ("Part 1 of 3") so the sequence escalates rather than restarts. ════════ */
#stage-reading-intro{
  padding:0;align-items:center;justify-content:center;overflow-y:auto;
  background:#FBFBFC}
.ri-wrap{
  width:100%;max-width:720px;margin:auto;padding:56px 48px;
  display:grid;grid-template-columns:132px minmax(0,1fr);gap:0;align-items:start;
  text-align:left}
.ri-rail{display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding-top:5px;padding-right:36px;border-right:1px solid #DCE6F0;height:100%}
.ri-kicker{font-family:var(--serif-text);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:#4A6E93;margin:0}
.ri-part{font-family:var(--serif-data);font-size:12px;color:#4A6E93;font-style:italic}
.ri-main{min-width:0;padding-left:44px}
.ri-title{font-family:var(--serif-text);font-weight:400;font-size:26px;line-height:1.2;
  color:var(--pw-ink);margin:0 0 6px;letter-spacing:.005em}
.ri-sub{font-family:var(--serif-text);font-size:13px;line-height:1.7;color:#4A6E93;
  margin:0 0 40px;font-style:italic;max-width:34em}
.ri-h4{font-family:var(--serif-text);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:#4A6E93;margin:0 0 14px}
/* hanging figures: the numerals sit in the margin so the TEXT keeps the
   same left edge as the title — Palatino's tabular figures make that edge
   straight, which Athelas's proportional ones could not. */
.ri-tips{list-style:none;margin:0 0 40px;padding:0}
.ri-tips li{position:relative;padding:11px 0 11px 34px;font-family:var(--serif-text);
  font-size:14px;line-height:1.6;color:var(--pw-ink-2);border-bottom:1px solid #DCE6F0}
.ri-tips li:last-child{border-bottom:none}
.ri-tips li b{position:absolute;left:0;top:11px;font-family:var(--serif-data);
  font-size:12px;font-weight:400;color:#8FAFCC;font-variant-numeric:lining-nums tabular-nums}
/* the two rules that actually change a score lead */
.ri-tips li.key{color:var(--pw-ink)}
.ri-tips li.key b{color:#1F4782}
.ri-cta{display:inline-flex;align-items:center;gap:12px;background:transparent;color:#1F4782;
  border:none;border-bottom:1px solid transparent;padding:8px 0;cursor:pointer;
  font-family:var(--serif-text);font-size:15px;letter-spacing:.02em;transition:border-color .18s}
.ri-cta:hover{border-color:#1F4782}
.ri-cta svg{transition:transform .2s cubic-bezier(.2,.8,.25,1)}
.ri-cta:hover svg{transform:translateX(2px)}
.ri-foot{margin-top:40px;padding-top:16px;border-top:1px solid #DCE6F0;
  font-family:var(--serif-text);font-size:11.5px;color:#4A6E93;font-style:italic}
@media (max-width:620px){
  .ri-wrap{grid-template-columns:1fr;gap:24px;padding:40px 26px}
  .ri-rail{border-right:none;padding-right:0;flex-direction:row;align-items:baseline;gap:16px}
  .ri-main{padding-left:0}
}
body.dark-mode #stage-reading-intro{background:#15171c}
body.dark-mode .ri-title{color:#f3ede5}

/* ════════ COMPLETION ════════ */
/* Surfacing back into the light after the dark exam hour. No card, no
   emoji — a signed note, which is the thing competitors cannot copy. */
#stage-completion{padding:0;overflow-y:auto;background:var(--pw-canvas)}
.rc-wrap{margin:auto;width:100%;max-width:560px;padding:56px 40px;text-align:center;
  animation:pwRise .6s cubic-bezier(.2,.75,.2,1) both}
.rc-seal{width:54px;height:54px;margin:0 auto 22px;border-radius:50%;
  border:1.5px solid var(--pw-emerald);background:var(--pw-emerald-wash);
  display:flex;align-items:center;justify-content:center}
.rc-seal svg{width:24px;height:24px;stroke:var(--pw-emerald)}
.rc-kicker{font-family:var(--pw-ui);font-size:10.5px;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:var(--pw-ink-3);margin-bottom:14px}
.rc-title{font-family:var(--pw-serif);font-weight:600;font-size:46px;line-height:1.05;
  letter-spacing:-.02em;color:var(--pw-ink);margin:0 0 12px}
.rc-sub{font-family:var(--pw-ui);font-size:15px;line-height:1.6;color:var(--pw-ink-2);margin:0 0 34px}
.rc-note{text-align:left;border-top:1px solid var(--pw-line);border-bottom:1px solid var(--pw-line);
  padding:26px 0;margin-bottom:32px}
.rc-note p{font-family:var(--pw-serif);font-size:16px;line-height:1.75;color:var(--pw-ink-2);margin:0 0 14px}
.rc-note p:last-of-type{margin-bottom:0}
.rc-sign{display:flex;align-items:baseline;gap:9px;margin-top:20px;
  font-family:var(--pw-ui);font-size:12.5px;color:var(--pw-ink-3)}
.rc-sign b{font-family:var(--pw-serif);font-size:16px;font-weight:600;color:var(--pw-ink)}
.rc-cta{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:#1F4782;color:#fff;border:none;border-radius:11px;
  padding:16px 30px;font-family:var(--pw-ui);font-weight:700;font-size:14px;cursor:pointer;
  box-shadow:var(--e2);
  transition:transform .14s cubic-bezier(.2,.7,.2,1),box-shadow .14s,filter .14s}
.rc-cta:hover{transform:translateY(-1px);filter:brightness(1.14);box-shadow:var(--e2)}
.rc-cta:active{transform:translateY(0)}
.rc-cta svg{transition:transform .18s}
.rc-cta:hover svg{transform:translateX(3px)}
@media (max-width:560px){.rc-wrap{padding:40px 24px}.rc-title{font-size:36px}}
body.dark-mode #stage-completion{background:#15171c}
body.dark-mode .rc-title{color:#f3ede5}
body.dark-mode .rc-note p{color:#cfcfcf}
body.dark-mode .rc-sign b{color:#f3ede5}

/* ════════ PREMIUM BUTTONS (wrapper only) ════════ */
:is(#stage-registration,#stage-reading-intro,#stage-completion) .btn-primary,
#stage-results .topbar .btn-primary{
  background:#1F4782;
  border:none;border-radius:var(--r-ctl);font-family:var(--pw-ui);font-weight:700;letter-spacing:.01em;
  box-shadow:var(--e1);
  transition:transform .14s cubic-bezier(.2,.7,.2,1),box-shadow .14s,filter .14s;
}
:is(#stage-registration,#stage-reading-intro,#stage-completion) .btn-primary{padding:13px 26px;font-size:13.5px}
:is(#stage-registration,#stage-reading-intro,#stage-completion) .btn-primary:hover,
#stage-results .topbar .btn-primary:hover{
  transform:translateY(-1px);filter:brightness(1.05);
  box-shadow:var(--e2)}
:is(#stage-registration,#stage-reading-intro,#stage-completion) .btn-primary:active{transform:translateY(0)}
:is(#stage-registration,#stage-reading-intro,#stage-completion) .btn-lg{padding:15px 28px;font-size:14.5px;border-radius:12px}

/* channel promo polish (registration + completion) */
:is(#stage-registration,#stage-completion) .channel-promo{
  border-radius:14px;padding:14px 18px;box-shadow:var(--e2);
  background:#1F4782}

/* ════════ RESULTS — premium score report ════════ */
#stage-results .topbar{
  background:rgba(255,253,251,.85);backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--pw-line);padding:0 22px}
#stage-results .topbar > div > span{font-family:var(--pw-display);font-weight:600;letter-spacing:0}
#stage-results .topbar .btn-ghost{border-radius:10px;border-color:var(--pw-line-2);color:var(--pw-ink-2);font-family:var(--pw-ui);font-weight:600}
#stage-results .topbar .btn-ghost:hover{border-color:var(--pw-red);color:var(--pw-red)}
#stage-results .topbar .btn-gold{border-radius:var(--r-ctl);background:#fff;border:1px solid #DCE6F0;color:var(--pw-ink-2);font-family:var(--pw-ui)}
#stage-results{background:var(--pw-canvas)}
#stage-results .results-content{padding:0 0 60px;max-width:none}

/* ── the score is the hero, on the same navy as the cover screens ── */
.rs-hero{
  color:var(--pw-ink);padding:26px 0 0;
  background:radial-gradient(880px 460px at 72% -18%, rgba(65,142,200,.13), transparent 62%),
             #FCFDFE;
  border-bottom:1px solid #E6EDF5;
  animation:pwFade .5s both}
.rs-hero > *{max-width:1000px;margin-left:auto;margin-right:auto;padding-left:40px;padding-right:40px}
.rs-hero-top{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:22px;border-bottom:1px solid #E6EDF5}
#stage-results .rs-hero .logo{display:flex;align-items:center;gap:11px}
#stage-results .rs-hero .logo img{width:36px!important;height:36px!important;border-radius:10px!important;object-fit:cover}
#stage-results .rs-hero .logo-name{font-family:var(--pw-serif);font-size:15px;font-weight:600;color:var(--pw-ink)}
#stage-results .rs-hero .logo-sub{font-size:9.5px;font-weight:700;letter-spacing:.14em;color:#5B7FA6;margin-top:2px}
.rs-hero-date{font-family:var(--pw-ui);font-size:12px;color:#5B7FA6}
.rs-hero-main{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;padding-top:32px;padding-bottom:28px}
.rs-kicker{font-family:var(--pw-ui);font-size:10.5px;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:#5B7FA6;margin-bottom:12px}
.rs-testname{font-family:var(--pw-serif);font-size:38px;font-weight:600;line-height:1.05;
  letter-spacing:-.02em;color:var(--pw-ink);margin:0 0 22px}
.rs-meta{display:flex;gap:34px;flex-wrap:wrap}
.rs-meta > div{display:flex;flex-direction:column;gap:5px}
.rs-meta span{font-family:var(--pw-ui);font-size:9.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:#5B7FA6}
.rs-meta b{font-family:var(--pw-ui);font-size:14px;font-weight:600;color:var(--pw-ink)}
.rs-hero-r{text-align:right;flex-shrink:0}
.rs-band-lbl{font-family:var(--pw-ui);font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#5B7FA6;margin-bottom:4px}
.rs-band-level{font-family:var(--pw-ui);font-size:13.5px;font-weight:600;color:#5B7FA6;margin-top:8px}
.rs-band-raw{font-family:var(--pw-ui);font-size:12px;color:#5B7FA6;margin-top:4px}

.rs-scale{padding-bottom:28px}
.rs-scale-track{position:relative;height:3px;background:#E1E9F2;border-radius:2px}
.rs-scale-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,rgba(31,71,130,.35),#1F4782);
  animation:rsGrow .8s .2s cubic-bezier(.2,.75,.2,1) both}
.rs-scale-pin{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%);background:#1F4782;box-shadow:0 0 0 4px rgba(31,71,130,.18);animation:pwFade .4s .6s both}
.rs-scale-ticks{display:flex;justify-content:space-between;margin-top:11px}
.rs-scale-ticks span{font-family:var(--pw-ui);font-size:11px;color:#5B7FA6;font-variant-numeric:tabular-nums}
@keyframes rsGrow{from{width:0!important}}

/* ── the light analysis body ── */
.rs-body{max-width:1000px;margin:0 auto;padding:32px 40px 0;animation:pwFade .5s .1s both}
.rs-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px}
.rs-panel{border:1px solid var(--pw-line);border-radius:14px;padding:20px 22px;background:var(--pw-paper)}
.rs-panel-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-family:var(--pw-ui);font-size:10.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--pw-ink-3);margin:0 0 16px}
.rs-panel-h em{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--pw-ink-3)}

.rs-time-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.rs-time-row:last-child{margin-bottom:0}
.rs-time-name{flex:0 0 72px;font-family:var(--pw-ui);font-size:12px;font-weight:600;color:var(--pw-ink-2)}
.rs-time-track{flex:1;height:6px;background:var(--pw-line);border-radius:99px;overflow:hidden}
.rs-time-fill{height:100%;border-radius:99px;background:var(--pw-emerald);transition:width .6s var(--pw-ease)}
.rs-time-fill.over{background:var(--pw-amber)}
.rs-time-val{flex:0 0 56px;text-align:right;font-family:var(--pw-ui);font-size:12px;font-weight:700;
  color:var(--pw-ink);font-variant-numeric:tabular-nums}
.rs-time-val.over{color:var(--pw-amber)}

.rs-sec-head{display:flex;align-items:center;gap:14px;margin:26px 0 14px}
.rs-sec-head span{font-family:var(--pw-ui);font-size:10.5px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--pw-ink-3);white-space:nowrap}
.rs-sec-head::after{content:"";flex:1;height:1px;background:var(--pw-line)}

.rs-foot{display:flex;justify-content:space-between;gap:16px;margin-top:36px;padding-top:16px;
  border-top:1px solid var(--pw-line);font-family:var(--pw-ui);font-size:11.5px;color:var(--pw-ink-3)}

#stage-results .q-bubble{border-radius:7px;font-weight:700;font-family:var(--pw-ui);transition:transform .12s}
#stage-results .q-bubble:hover{transform:translateY(-2px)}
#stage-results .q-bubble.correct{background:#e3f6e9;color:var(--pw-emerald)}
#stage-results .q-bubble.wrong{background:#fde7eb;color:var(--pw-status-red)}
#stage-results .stats-title{color:var(--pw-ink-3);letter-spacing:.14em}
#stage-results .stat-track{background:var(--pw-line)}
#stage-results .answer-table th{background:transparent;border-bottom:1.5px solid var(--pw-line-2);color:var(--pw-ink-3)}
#stage-results .answer-table tr.alt td{background:var(--pw-surface-3)}
#stage-results .td-correct{color:var(--pw-emerald);font-weight:600}
@media (max-width:820px){
  .rs-hero > *{padding-left:24px;padding-right:24px}
  .rs-hero-main{flex-direction:column;align-items:flex-start;gap:24px}
  .rs-hero-r{text-align:left}
  .rs-testname{font-size:30px}
  .rs-body{padding:26px 24px 0}
  .rs-grid{grid-template-columns:1fr}
}

/* ════════ EXPLANATION BUTTONS + PANEL (review layer) ════════ */
body.review-mode .explain-btn,body.review-mode .explain-btn-sm{
  border:1px solid rgba(65,142,200,.35);border-radius:999px;background:rgba(65,142,200,.07);
  color:#1F4782;font-weight:700;box-shadow:0 1px 2px rgba(31,71,130,.06);
  transition:transform .12s cubic-bezier(.2,.7,.2,1),background .14s,box-shadow .14s,color .14s}
body.review-mode .explain-btn{padding:6px 14px;gap:6px}
body.review-mode .explain-btn:hover,body.review-mode .explain-btn.open,
body.review-mode .explain-btn-sm:hover,body.review-mode .explain-btn-sm.open{
  background:linear-gradient(165deg,#2A5B96,#1F4782);color:#fff;border-color:transparent;
  transform:translateY(-1px);box-shadow:var(--e2)}
body.review-mode .explain-trigger-row{border-top:1px dashed var(--line-2)}
body.review-mode .explain-panel{
  border-radius:12px;border-left:3px solid #418EC8;
  box-shadow:var(--e2);background:#F7FAFD}
body.dark-mode.review-mode .explain-panel{background:#242424}
body.review-mode .explain-panel .ep-title{letter-spacing:.14em}

/* ════════ load-stagger for entrance children ════════ */
#stage-registration.active .reg-field{animation:pwFade .5s .30s both}
#stage-registration.active .reg-cta{animation:pwFade .5s .36s both}

@keyframes pwRise{from{opacity:0;transform:translateY(16px) scale(.992)}to{opacity:1;transform:none}}
@keyframes pwFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pwPop{from{opacity:0;transform:translateY(6px) scale(.9)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  #stage-registration *,#stage-reading-intro *,#stage-completion *,#stage-results *{animation:none!important}
}

/* ════════ dark-mode adaptation for wrapper ════════ */
body.dark-mode :is(#stage-registration,#stage-reading-intro,#stage-completion,#stage-results){
  background:
    radial-gradient(1100px 560px at 50% -12%,rgba(90,140,210,.14),transparent 60%),
    radial-gradient(820px 520px at 108% 116%,rgba(19,49,95,.30),transparent 55%),
    linear-gradient(180deg,#15171c,#101218);
  color:#ece6df}
body.dark-mode :is(#stage-reading-intro,#stage-completion) :is(.trans-title,.complete-title){color:#f3ede5}
/* Removed: Reading's own dark card rule (#201b17, warm brown, opaque).
   It was dead code until Listening's markup was transplanted in — .trans-card
   did not exist here before — at which point it came alive and, at 1 id +
   2 classes, outranked the chamber rule's 1 id + 1 class. Result: the card
   rendered as an opaque brown slab instead of the navy translucent glass the
   Listening engine uses. The chamber skin owns these cards now. */

body.dark-mode :is(#stage-reading-intro,#stage-completion) .start-meta,
body.dark-mode #stage-reading-intro .trans-rules{background:linear-gradient(180deg,#241e1a,#1d1814)}
/* results: the navy hero already reads as dark, so only the analysis body flips */
body.cosmos-cert #stage-results{background:transparent}
body.cosmos-cert #stage-results .rs-panel{background:#201b17;border-color:rgba(255,255,255,.08)}
body.cosmos-cert #stage-results .rs-foot{border-color:rgba(255,255,255,.08)}
body.cosmos-cert #stage-results .answer-table tr.alt td{background:rgba(255,255,255,.03)}
body.dark-mode :is(#stage-reading-intro,#stage-completion) .input-field{background:#1d1814;color:#ece6df}
/* registration keeps its own dark treatment: the cover panel is always
   navy by design, only the light-panel side needs to flip */
body.dark-mode .reg-panel{background:#15171c}
body.dark-mode .reg-eyebrow{color:#ff5a72}
body.dark-mode .reg-checklist li{color:#cfcfcf}
body.dark-mode .reg-field-label{color:#8f8f8f}
body.dark-mode .reg-input{color:#ece6df;border-bottom-color:#3a3a3a}
body.dark-mode .reg-input::placeholder{color:#7d7d7d}
body.dark-mode .reg-foot{color:#7d7d7d}
body.dark-mode .reg-cta{color:#8FB8E4}

/* ════════ print: flatten premium effects for clean report ════════ */
/* SUPERSEDED — kept only so nothing that still targets these selectors is
   surprised. The sheet that actually prints is #print-report, typeset by
   buildPrintReport(); the print block that owns the page geometry lives with
   it (search "@page{size:A4;margin:14mm 15mm 12mm}") and hides #stage-results
   with !important, so every rule below acts on a display:none element.
   This block used to declare a SECOND, conflicting @page — size:A4 portrait
   with a flat 12mm margin — while the live block declares 14mm/15mm/12mm and
   measurePrintPages() computes its 265mm fit limit from THAT pair. Two @page
   rules in one stylesheet do not merge predictably per-descriptor across
   engines: whichever won, one of the two layouts was wrong, which is how the
   report came to clip. The geometry is now declared in exactly one place. */
@media print{
  #stage-results{background:#fff!important}
  #stage-results .results-content{padding:0!important;gap:0!important;display:block!important}
  .cert-sheet{width:auto!important;min-height:0!important;padding:0!important;
    box-shadow:none!important;animation:none!important;break-inside:avoid}
  .cert-sheet--schedule{break-before:page}
  .cert-frame{min-height:0!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #stage-results .band-num{animation:none!important}
  .cf-seal{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .no-print,.cert-actions,#stage-results .topbar{display:none!important}
}

/* ====
   UNIVERSAL ENGINE — extra question types
   (map / plan / diagram · table · flow-chart)
   Added, never editing the rules above. ====*/
/* ── Map / plan / diagram labelling — measured on the official demo player 2026-09-02 ──
   The image sits bare (no frame). A gap is placed ON the image at its coordinates: a typed
   box (mode:'input'), or a drop zone with the word list beside the image (mode:'drag'). The
   old mode:'select' dropdown is kept for files that use it, but the real player has none. */
.map-wrap{position:relative;display:inline-block;max-width:100%;margin:8px 0}
.map-img{display:block;max-width:100%;height:auto}
.map-label{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:5px;padding:1px}
.map-label .map-num{display:none}
.map-label .gap-num{display:none}
.map-label .prose-gap{margin:0}
.map-label .prose-gap .gap-input{width:98px;height:22.4px}
.map-label .dropdown{min-width:54px}
.map-label .word-drop{min-width:98px;margin:0}
.map-layout{display:flex;align-items:flex-start;gap:0}
.map-layout .word-bank-list{flex-direction:column;flex-wrap:nowrap;margin:0 0 16px 32px;flex:0 0 auto}
.map-layout .word-bank-list .word-tile{margin:3px}

/* ── Matching features: the real tableMatchInteraction grid ── */
.mg-wrap{overflow-x:auto;margin:4px 0 12px}
.match-grid{width:100%;border-collapse:collapse;table-layout:auto}
.match-grid th,.match-grid td{border:1px solid #D5D5D5;padding:0}
.match-grid thead th{background:#F1F2EC;font-weight:700;text-align:center;padding:6px 4px;
  font-size:15px;color:var(--ink);min-width:38px;white-space:nowrap}
.match-grid thead th.mg-corner{background:transparent;border:none;min-width:0}
.match-grid .mg-q{text-align:left;font-weight:400;padding:8px 10px;vertical-align:middle;
  display:table-cell;background:var(--paper)}
.match-grid .mg-q .q-pill{display:inline-flex;vertical-align:middle;margin-right:8px}
.match-grid .mg-label{font-size:16px;line-height:1.4;color:var(--ink);font-weight:400}
.match-grid .mg-cell{cursor:pointer;text-align:center;vertical-align:middle;
  min-width:38px;height:40px;background:var(--paper);transition:background .1s}
.match-grid .mg-cell:hover{background:#E4E4E4}
.match-grid .mg-cell:focus-visible{outline:2px solid #418EC8;outline-offset:-2px}
.match-grid .mg-cell input{display:none}
/* the checked state paints the cell, so setReadingInput's plain r.checked=true
   restore path repaints the grid with no extra wiring */
.match-grid .mg-cell:has(input:checked){background:#BBD8F0}
.match-grid .mg-cell:has(input:checked)::after{content:"";display:inline-block;
  width:11px;height:11px;border-radius:50%;background:#1c4b7a}
body.dark-mode .match-grid thead th{background:#26405e;color:#eaeaea}
body.dark-mode .match-grid .mg-cell:has(input:checked){background:#1d3a63}
body.dark-mode .match-grid .mg-cell:hover{background:#243447}
/* review mode marks the row, and the cells that matter */
.match-grid tr.row-correct .mg-q{box-shadow:inset 3px 0 0 var(--emerald)}
.match-grid tr.row-wrong .mg-q{box-shadow:inset 3px 0 0 var(--crimson)}
/* Scoped to review-mode so these outrank .mg-cell:has(input:checked), which
   is (0,3,2) and would otherwise keep painting the blue "your pick" dot. */
/* the answer key cell: green + tick, whether or not the student hit it */
body.review-mode .match-grid .mg-cell.cell-correct{background:#f1fff4}
body.review-mode .match-grid .mg-cell.cell-correct::after{content:"✓";width:auto;height:auto;
  border-radius:0;background:none;color:var(--emerald);font-weight:700;font-size:15px;line-height:1}
/* the student's incorrect pick */
body.review-mode .match-grid .mg-cell.cell-wrong{background:#fff5f5}
body.review-mode .match-grid .mg-cell.cell-wrong::after{content:"✕";width:auto;height:auto;
  border-radius:0;background:none;color:var(--crimson);font-weight:700;font-size:15px;line-height:1}
body.review-mode.dark-mode .match-grid .mg-cell.cell-correct{background:rgba(46,125,50,.18)}
body.review-mode.dark-mode .match-grid .mg-cell.cell-wrong{background:rgba(196,18,48,.18)}

/* ── Table completion — official: 1px #000 grid, cells 4.8px 8px, 16px/24px ── */
.rt-table{width:100%;border-collapse:collapse;font-size:16px;line-height:24px;margin:16px 0;border:1px solid #000;color:#000}
.rt-table th,.rt-table td{border:1px solid #000;padding:4.8px 8px;text-align:left;vertical-align:top;color:#000;background:#fff}
.rt-table th{font-weight:700}
.rt-table .tbl-title{text-align:center;padding:12px 8px}
.rt-table .prose-gap{margin:0 2px}
body.dark-mode .rt-table,body.dark-mode .rt-table th,body.dark-mode .rt-table td{background:transparent;color:var(--ex-ink-2,#e6e6e6);border-color:var(--ex-ink-2,#e6e6e6)}
body.theme-sepia .rt-table,body.theme-sepia .rt-table th,body.theme-sepia .rt-table td{background:transparent;color:var(--sp-ink-2,#3a2f22);border-color:var(--sp-ink-2,#3a2f22)}

/* ── Flow-chart completion — official: Cambridge ships the chart as a picture (boxes 1px #000,
   13.6px/19px text, solid black arrows). This is that picture in CSS. Gaps are typed boxes, or
   drop zones when the section carries a bank. ── */
.flow-title{font-size:17.6px;line-height:21.12px;font-weight:700;color:#000;margin:0 0 12px}
.flow-chart{display:flex;flex-direction:column;align-items:stretch;width:432px;max-width:100%;margin:0 0 16px}
.flow-box{border:1px solid #000;background:#fff;color:#000;font-size:13.6px;line-height:19.04px;padding:6px 4px 8px;box-sizing:border-box;text-align:left}
.flow-box .prose-gap .gap-input{width:104px;vertical-align:middle}
.flow-box .word-drop{min-width:104px;vertical-align:middle}
.flow-arrow{height:30px;display:flex;align-items:center;justify-content:center}
.flow-arrow svg{width:22px;height:28px;display:block}
.flow-layout{display:flex;align-items:flex-start}
.flow-layout .word-bank-list{flex-direction:column;flex-wrap:nowrap;margin:0 0 16px 32px;flex:0 0 auto}
body.dark-mode .flow-box,body.dark-mode .flow-title{background:transparent;color:var(--ex-ink-2,#e6e6e6);border-color:var(--ex-ink-2,#e6e6e6)}
body.dark-mode .flow-arrow svg path{fill:var(--ex-ink-2,#e6e6e6)}
body.theme-sepia .flow-box,body.theme-sepia .flow-title{background:transparent;color:var(--sp-ink-2,#3a2f22);border-color:var(--sp-ink-2,#3a2f22)}
/* ═══════════════════════════════════════════════════════════════════
   V3 ADDITIONS
   Motion lives on the wrapper screens. The test screen (#stage-reading)
   keeps the flat real-exam skin deliberately — see the research brief:
   authenticity is the gate, and animating the exam chrome breaks it.
   ═══════════════════════════════════════════════════════════════════ */

/* (the note button is styled with the rest of the adder card above) */

.hl.hl-note{position:relative}
.hl.hl-note::after{
  content:"";position:absolute;top:-3px;right:-3px;width:6px;height:6px;
  border-radius:50%;background:#d4a017;box-shadow:0 0 0 1.5px var(--paper)}

.note-modal{
  position:absolute;z-index:10000;width:290px;background:var(--paper);
  border:1px solid var(--line-2);border-radius:10px;
  box-shadow:0 12px 34px rgba(0,0,0,.20),0 2px 6px rgba(0,0,0,.08);
  padding:0;opacity:0;transform:translateY(6px) scale(.97);pointer-events:none;
  transition:opacity .18s cubic-bezier(.2,.75,.2,1),transform .18s cubic-bezier(.2,.75,.2,1)}
.note-modal.show{opacity:1;transform:none;pointer-events:auto}
.note-modal .nm-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 12px 7px;border-bottom:1px solid var(--line)}
.note-modal .nm-title{
  font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.note-modal .nm-x{
  border:none;background:transparent;font-size:17px;line-height:1;color:var(--ink-mute);
  cursor:pointer;padding:0 2px;transition:color .12s}
.note-modal .nm-x:hover{color:var(--ink)}
.note-modal .nm-text{
  width:100%;border:none;outline:none;resize:vertical;padding:11px 12px;
  font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--ink);
  background:transparent;min-height:74px}
.note-modal .nm-foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 10px 9px;border-top:1px solid var(--line);background:var(--bg-elev);
  border-radius:0 0 10px 10px}
.note-modal .nm-hint{font-size:10px;color:var(--ink-mute)}
.note-modal .nm-actions{display:flex;gap:6px}
.note-modal .nm-btn{
  border-radius:5px;padding:5px 11px;font-family:var(--sans);font-size:11.5px;font-weight:700;
  cursor:pointer;transition:transform .12s cubic-bezier(.2,.7,.2,1),background .12s,border-color .12s}
.note-modal .nm-btn:active{transform:scale(.96)}
.note-modal .nm-btn.ghost{background:transparent;border:1px solid var(--line-2);color:var(--ink-mute)}
.note-modal .nm-btn.ghost:hover{border-color:var(--primary);color:var(--primary)}
.note-modal .nm-btn.solid{background:var(--primary);border:1px solid var(--primary);color:#fff}
.note-modal .nm-btn.solid:hover{background:var(--primary-2)}

/* ── pacing marker ── */
.pace-note{
  position:fixed;right:18px;bottom:78px;z-index:9998;display:flex;align-items:stretch;gap:0;
  max-width:330px;background:var(--paper);border:1px solid var(--line-2);border-radius:9px;
  box-shadow:0 10px 30px rgba(0,0,0,.16);overflow:hidden;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .3s cubic-bezier(.2,.75,.2,1),transform .3s cubic-bezier(.2,.75,.2,1)}
.pace-note.show{opacity:1;transform:none;pointer-events:auto}
.pace-note .pn-bar{width:4px;background:linear-gradient(180deg,var(--primary),#e0724a);flex-shrink:0}
.pace-note .pn-body{padding:10px 6px 11px 12px;display:flex;flex-direction:column;gap:2px}
.pace-note .pn-body strong{font-size:12.5px;font-weight:800;color:var(--ink)}
.pace-note .pn-body span{font-size:11.5px;line-height:1.45;color:var(--ink-mute)}
.pace-note .pn-x{
  border:none;background:transparent;font-size:16px;color:var(--ink-mute);cursor:pointer;
  padding:0 10px 0 6px;transition:color .12s}
.pace-note .pn-x:hover{color:var(--ink)}

/* ── results: mark-loss analysis + attempt history ── */
#stage-results .v3-insight{
  border:1px solid var(--pw-line);border-radius:12px;padding:15px 17px 16px;margin:0 0 18px;
  background:linear-gradient(180deg,rgba(36,75,142,.035),transparent)}
#stage-results .v3-insight h5{
  margin:0 0 3px;font-family:var(--pw-ui);font-size:10.5px;font-weight:800;
  letter-spacing:.17em;text-transform:uppercase;color:var(--pw-red)}
#stage-results .v3-insight .v3-lead{
  font-family:var(--pw-display);font-size:15.5px;font-weight:600;color:var(--pw-ink);
  letter-spacing:-.01em;margin-bottom:9px;line-height:1.4}
#stage-results .v3-causes{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
#stage-results .v3-cause{
  display:flex;align-items:baseline;gap:6px;border:1px solid var(--pw-line);
  border-radius:7px;padding:6px 11px;background:var(--pw-paper);
  animation:pwFade .45s both}
#stage-results .v3-cause b{font-size:15px;font-weight:800;font-family:var(--pw-ui)}
#stage-results .v3-cause span{font-size:11px;color:var(--ink-mute);font-weight:600}
#stage-results .v3-cause.fixable b{color:var(--pw-emerald)}
#stage-results .v3-cause.real b{color:var(--pw-status-red)}
#stage-results .v3-cause.blank b{color:var(--pw-amber)}
#stage-results .v3-note{
  margin-top:10px;font-size:12px;line-height:1.5;color:var(--ink-soft);
  padding-top:9px;border-top:1px dashed var(--pw-line)}

#stage-results .v3-hist{display:flex;align-items:flex-end;gap:9px;margin-top:9px;min-height:56px}
#stage-results .v3-hbar{
  flex:0 0 34px;display:flex;flex-direction:column;align-items:center;gap:4px;
  animation:pwRise .5s both}
#stage-results .v3-hbar i{
  display:block;width:100%;border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg,#7f9fd0,var(--pw-red));font-style:normal;
  transition:height .5s cubic-bezier(.2,.75,.2,1)}
#stage-results .v3-hbar.now i{background:linear-gradient(180deg,var(--pw-red),var(--pw-burgundy))}
#stage-results .v3-hbar em{font-style:normal;font-size:10.5px;font-weight:800;color:var(--ink-soft);font-family:var(--pw-ui)}
#stage-results .v3-hbar small{font-size:9px;color:var(--ink-mute)}

/* cause tag inside the answer table */
#stage-results .cause-tag{
  display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;
  font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}
#stage-results .cause-tag.plural{background:#fff3d6;color:#8a5a1e}
#stage-results .cause-tag.spelling{background:#e0f0fb;color:#1c5e8a}
#stage-results .cause-tag.limit{background:#fde8d6;color:#8a4a1e}

/* ── stage transitions ── */
@keyframes pwStageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pwStageOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px)}}
@keyframes pwSoftIn{from{opacity:0}to{opacity:1}}
#stage-registration.active,#stage-reading-intro.active,
#stage-completion.active,#stage-results.active{
  animation:pwStageIn .44s cubic-bezier(.2,.75,.2,1) both}
/* the exam screen fades only — no movement, nothing to distract */
#stage-reading.active{animation:pwSoftIn .22s ease both}
.stage.stage-leaving{
  display:flex!important;animation:pwStageOut .24s cubic-bezier(.4,0,1,1) both;pointer-events:none}

/* band count-up sits on its own layer so the digits don't reflow the card */

@media (prefers-reduced-motion:reduce){
  .note-modal,.pace-note{transition:none!important}
  #stage-registration.active,#stage-reading-intro.active,#stage-completion.active,
  #stage-results.active,#stage-reading.active,.stage.stage-leaving,
  #stage-results .v3-cause,#stage-results .v3-hbar{animation:none!important}
  #stage-results .v3-hbar i{transition:none!important}
}

/* ── V3 pass 2: filters, timing, trap notes ── */
#stage-results .v3-filters{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}
#stage-results .v3-fchip{
  border:1px solid var(--pw-line);background:var(--pw-paper);border-radius:8px;
  padding:6px 12px;font-family:var(--pw-ui);font-size:11.5px;font-weight:700;color:var(--ink-soft);
  cursor:pointer;display:flex;align-items:center;gap:6px;
  transition:transform .13s cubic-bezier(.2,.7,.2,1),border-color .13s,background .13s,color .13s}
#stage-results .v3-fchip:hover{transform:translateY(-1px);border-color:var(--pw-red)}
#stage-results .v3-fchip b{font-size:12px;color:var(--pw-red)}
#stage-results .v3-fchip.on{background:var(--pw-red);border-color:var(--pw-red);color:#fff}
#stage-results .v3-fchip.on b{color:#fff}
#stage-results .v3-fchip.slip{border-color:#bfe0cb}
#stage-results .v3-fchip.slip b{color:var(--pw-emerald)}
#stage-results .v3-fchip.slow{border-color:#f0d9bf}

#stage-results .td-secs{
  display:block;font-size:9px;font-weight:700;color:var(--ink-mute);
  font-family:var(--pw-ui);letter-spacing:.02em;margin-top:1px}
#stage-results .td-secs.slow{color:#b06a1e}

#stage-results .q-bubble{transition:transform .12s,opacity .2s}

/* ═══════════════════════════════════════════════════════════════════
   V3 — POLISH ON THE REPLICA
   Everything here is additive: motion, focus and feedback. No colour,
   size, position or wording that a student meets on exam day changes.
   The rule for anything in this block: if it would make someone
   surprised on the day, it does not belong here.
   ═══════════════════════════════════════════════════════════════════ */

/* Options gain a hover and a press, which the real player lacks and which
   nobody could be surprised by — it only ever confirms where the cursor is. */
.option{transition:background .13s ease, box-shadow .13s ease}
.option:hover{background:rgba(65,142,200,.07)}
.option:active{background:rgba(65,142,200,.13)}

/* Keyboard focus. Invisible to mouse users, essential for everyone else —
   the real player's focus states are close to unusable. */
.option:focus-within{box-shadow:inset 0 0 0 2px rgba(65,142,200,.55);border-radius:3px}
.gap-input:focus-visible,.dropdown:focus-visible,.q-pill:focus-visible,
.heading-tile:focus-visible,.word-tile:focus-visible,.qnav-btn:focus-visible{
  outline:2px solid #418EC8;outline-offset:2px}

/* A single quiet pulse when an answer lands, so a student on a slow phone
   knows the tap registered without having to look at the navigation bar. */
@keyframes answerLanded{
  0%{box-shadow:0 0 0 0 rgba(65,142,200,.34)}
  100%{box-shadow:0 0 0 7px rgba(65,142,200,0)}}
.q-pill.just-answered{animation:answerLanded .5s ease-out}

/* Passage scrolling gets a hair of smoothing; jump-to-question no longer
   teleports. Same destination, less disorientation. */
#passage-pane,#questions-pane{scroll-behavior:smooth}

@media (prefers-reduced-motion:reduce){
  .option,.q-pill{transition:none!important}
  .q-pill.just-answered{animation:none!important}
  #passage-pane,#questions-pane{scroll-behavior:auto}
}

/* ── notes drawer (mirrors the real player's Notes panel) ── */
.notes-drawer{
  position:fixed;top:0;right:0;bottom:0;width:300px;max-width:86vw;z-index:9997;
  background:var(--panel);border-left:1px solid var(--line-2);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.75,.2,1);
  box-shadow:-8px 0 28px rgba(0,0,0,.10)}
.notes-drawer.open{transform:none}
/* Opening the sidebar RE-LAYS OUT the exam, it does not overlay it: measured
   at 1140px of content with the 300px panel beside it, the divider moving to
   x=570 and the nav arrows to right:332px. */
body.notes-open #stage-reading{padding-right:300px;transition:padding-right .28s cubic-bezier(.2,.75,.2,1)}
@media (max-width:900px){ body.notes-open #stage-reading{padding-right:0} }
.notes-drawer .nd-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;height:56px;flex:0 0 auto;
  background:var(--paper);border-bottom:1px solid var(--line-2)}
.notes-drawer .nd-title{font-family:var(--sans);font-size:16px;font-weight:400;color:var(--ink)}
.notes-drawer .nd-x{
  border:none;background:transparent;font-size:22px;line-height:1;color:var(--ink);
  cursor:pointer;padding:0 4px;transition:opacity .12s}
.notes-drawer .nd-x:hover{opacity:.6}
.notes-drawer .nd-body{flex:1;overflow-y:auto;padding:14px}
.notes-drawer .nd-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;text-align:center;padding:0 26px;gap:12px}
.notes-drawer .nd-empty b{font-family:var(--sans);font-size:19px;font-weight:400;color:var(--ink);line-height:1.35}
.notes-drawer .nd-empty span{font-family:var(--sans);font-size:13px;color:var(--ink-mute);line-height:1.5}
.notes-drawer .nd-group{
  font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-mute);margin:10px 2px 7px}
.notes-drawer .nd-item{
  background:var(--paper);border:1px solid var(--line-2);border-radius:5px;
  padding:10px 11px;margin-bottom:9px;cursor:pointer;
  transition:border-color .14s,transform .12s cubic-bezier(.2,.7,.2,1)}
.notes-drawer .nd-item:hover{border-color:#418EC8;transform:translateY(-1px)}
.notes-drawer .nd-quote{
  font-family:var(--sans);font-size:11.5px;color:var(--ink-mute);line-height:1.45;
  padding-left:8px;border-left:3px solid var(--hl-y);margin-bottom:6px}
.notes-drawer .nd-text{font-family:var(--sans);font-size:13.5px;color:var(--ink);line-height:1.5;white-space:pre-wrap}
.notes-drawer .nd-del{
  float:right;border:none;background:transparent;color:var(--ink-mute);cursor:pointer;
  font-size:13px;padding:0 0 0 8px}
.notes-drawer .nd-del:hover{color:var(--crimson)}
.hdr-notes-btn{position:relative;margin-right:16px}
/* The real header carries no count badge on the notes pencil. Kept in the DOM
   so the existing counter code has a target, but never shown on the exam. */
.hdr-notes-btn .nd-count{display:none}
.hl.note-flash{animation:noteFlash 1.1s ease-out}
@keyframes noteFlash{0%,100%{box-shadow:0 0 0 0 rgba(65,142,200,0)}
  25%{box-shadow:0 0 0 6px rgba(65,142,200,.32)}}
@media (prefers-reduced-motion:reduce){
  .notes-drawer{transition:none!important}
  body.notes-open #stage-reading{transition:none!important}
  .hl.note-flash{animation:none!important}
}



/* --- stage layering for the WebGL chamber --------------------------------
   The scene layer parks its canvas at z-index:2 and relies on the active
   stage sitting above it (Listening does this with a blanket
   .stage.active{z-index:25}). Reading's .stage.active has no z-index, so the
   canvas painted OVER the registration card.
   This is deliberately scoped to the four WRAPPER stages: giving #stage-reading
   a z-index would turn it into a stacking context and trap the exam's own
   position:fixed popups (#hl-popup, #menu-dropdown, #notif-popup) inside it.
   The exam stage keeps z-index:auto and its existing stacking behaviour. */
:is(#stage-registration,#stage-reading-intro,#stage-completion,#stage-results).stage.active{
  z-index:25;
}

/* ---- transplanted wrapper-stage CSS (source: the Listening engine) ----
   Excludes Listening's inlined scene.css (that lives in the banner-delimited
   block below and is managed by sync_scene.py — duplicating it here would
   silently diverge). Also excludes .btn*, .stage, .results-content and
   .theme-dot: Reading defines its own and they are shared with the exam
   surface, which must stay pixel-identical. ---- */
/* ── WARNING OVERLAY + TOAST ── */
.warning-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:100;display:none;align-items:center;justify-content:center;padding:24px}
.warning-overlay.show{display:flex}
.warning-card{background:var(--paper);border-radius:5px;padding:36px 40px;max-width:520px;text-align:center;box-shadow:var(--shadow-lg);border-top:5px solid var(--crimson)}
.warning-card .ic{font-size:48px;margin-bottom:10px}
.warning-card h2{font-size:24px;font-weight:800;margin-bottom:10px;line-height:1.15;color:var(--ink)}
.warning-card p{color:var(--ink-soft);font-size:14px;line-height:1.6;margin-bottom:16px}
.warning-card .strike-counter{display:inline-flex;gap:6px;margin:6px 0 16px}
.warning-card .strike-counter .strike{width:14px;height:14px;border-radius:50%;border:2px solid var(--line-2);transition:.3s}
.warning-card .strike-counter .strike.on{background:var(--crimson);border-color:var(--crimson)}
.btn-lg{width:100%;padding:13px 24px;font-size:14px}
:is(#stage-registration,#stage-reading-intro,#stage-completion,#stage-results){
  font-family:var(--pw-ui);color:var(--pw-ink);
  background:radial-gradient(1100px 560px at 50% -12%,rgba(36,75,142,.13),transparent 60%),radial-gradient(820px 520px at 108% 116%,rgba(19,49,95,.10),transparent 55%),radial-gradient(700px 460px at -10% 100%,rgba(193,154,75,.12),transparent 55%),linear-gradient(180deg,var(--pw-ivory),var(--pw-ivory-2));
}
:is(#stage-registration,#stage-reading-intro,#stage-completion,#stage-results)::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");}
:is(#stage-registration,#stage-reading-intro,#stage-completion,#stage-results)>*{position:relative;z-index:1}
:is(#stage-registration,#stage-reading-intro,#stage-completion) :is(.start-title,.trans-title,.complete-title){font-family:var(--pw-display);font-weight:600;letter-spacing:-.015em;color:var(--pw-ink);}
:is(#stage-reading-intro,#stage-completion) .trans-eyebrow{font-family:var(--pw-ui);font-weight:800;font-size:11px;letter-spacing:.28em;color:var(--pw-red);}
/* Registration */
#stage-registration{background:var(--bg);align-items:center;justify-content:center;padding:32px 24px;overflow-y:auto}
.start-card{width:100%;max-width:540px;background:var(--pw-paper);border:1px solid var(--pw-line);border-radius:18px;padding:0;overflow:hidden;box-shadow:var(--pw-shadow);animation:pwRise .65s cubic-bezier(.2,.75,.2,1) both;}
.start-card::before{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--pw-red),var(--pw-burgundy) 55%,var(--pw-gold));}
.brand-block{margin:0;padding:24px 38px 20px;border-bottom:1px solid var(--pw-line);background:linear-gradient(180deg,rgba(36,75,142,.05),transparent);}
.brand-logo{width:54px;height:54px;border-radius:14px;display:block;flex-shrink:0;box-shadow:0 7px 18px -6px rgba(20,48,95,.5);}
.brand-text .brand-eyebrow{font-weight:800;font-size:16px;letter-spacing:-.01em;color:var(--pw-ink)}
.brand-text .brand-tagline{font-weight:500;font-size:12px;color:var(--pw-ink-3);margin-top:2px}
.start-title{font-size:28px;line-height:1.08;padding:0 38px;margin:22px 0 0 !important}
.start-meta{margin:20px 38px 4px;padding:18px 14px;border:1px solid var(--pw-line);border-radius:14px;background:linear-gradient(180deg,#fffdfb,#fbf6ee);box-shadow:inset 0 1px 0 #fff;display:flex;align-items:center;justify-content:space-evenly;}
.start-meta-item{text-align:center;flex:1}
.start-meta-item .n{font-family:var(--pw-display);font-weight:700;font-size:32px;color:var(--pw-red)}
.start-meta-item .l{font-size:10px;font-weight:700;color:var(--pw-ink-3);letter-spacing:.14em;margin-top:7px;text-transform:uppercase}
.start-meta-divider{width:1px;height:38px;background:var(--pw-line-2)}
.start-rules{margin:20px 0 4px;padding:0 38px;list-style:none;}
.start-rules li{font-size:13.5px;color:var(--pw-ink-2);line-height:1.55;padding:6px 0 6px 26px;position:relative}
.start-rules li::before{content:"";left:2px;top:11px;width:14px;height:14px;border-radius:50%;background:transparent;position:absolute;border:1.5px solid var(--pw-red);box-shadow:inset 0 0 0 3px rgba(36,75,142,.14)}
.input-label{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--pw-ink-3);margin-bottom:8px}
.input-field{width:100%;padding:12px 15px;font-family:var(--pw-ui);font-size:15px;font-weight:600;color:var(--pw-ink);background:#fffdfb;border:1.5px solid var(--pw-line-2);border-radius:11px;outline:none;transition:.18s}
.input-field:focus{border-color:var(--pw-red);box-shadow:0 0 0 4px rgba(36,75,142,.16)}
.input-field::placeholder{color:var(--pw-ink-3);font-weight:500}
#stage-registration .start-card > div[style*="margin-bottom:18px"]{padding:6px 38px 0}
#stage-registration #start-btn{margin:14px 38px 30px;width:calc(100% - 76px)}
/* Transition/Intro */
.transition-stage{background:var(--bg);align-items:center;justify-content:center;padding:34px}
.trans-card{width:100%;max-width:680px;background:var(--pw-paper);border:1px solid var(--pw-line);border-radius:20px;padding:48px 52px 42px;box-shadow:var(--pw-shadow);position:relative;overflow:hidden;animation:pwRise .65s cubic-bezier(.2,.75,.2,1) both;}
.trans-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--pw-red),var(--pw-burgundy) 55%,var(--pw-gold))}
.trans-icon{font-size:0;margin:0 auto 14px;width:62px;height:62px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(155deg,rgba(36,75,142,.14),rgba(19,49,95,.07));border:1px solid var(--pw-line)}
#stage-reading-intro .trans-icon::after{content:"🎧";font-size:30px}
.trans-eyebrow{font-family:var(--pw-ui);font-weight:800;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--pw-red);margin-bottom:12px}
.trans-title{font-size:40px;margin:6px 0 12px}
.trans-sub{color:var(--pw-ink-2);font-size:15px;max-width:520px;line-height:1.6;margin:0 auto 28px}
.trans-rules{background:linear-gradient(180deg,#fffdfb,#fbf6ee);border:1px solid var(--pw-line);border-radius:14px;padding:22px 26px;text-align:left;margin-bottom:24px}
.trans-rules h4{font-family:var(--pw-ui);font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--pw-red);margin-bottom:14px}
.trans-rules ul{list-style:none}
.trans-rules li{color:var(--pw-ink-2);font-size:14px;margin:9px 0;padding-left:28px;position:relative;line-height:1.5}
.trans-rules li::before{content:"✓";color:var(--pw-emerald);font-weight:800;font-size:13px;top:1px;position:absolute;left:0}
/* Completion */
#stage-completion{padding:34px;align-items:center;justify-content:center;overflow-y:auto}
.complete-card{width:100%;max-width:620px;background:var(--pw-paper);border:1px solid var(--pw-line);border-radius:20px;padding:50px 48px 42px;box-shadow:var(--pw-shadow);position:relative;overflow:hidden;animation:pwRise .65s cubic-bezier(.2,.75,.2,1) both;text-align:center;}
.complete-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--pw-red),var(--pw-burgundy) 55%,var(--pw-gold))}
.complete-icon{font-size:0;margin:0 auto 16px;width:66px;height:66px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(155deg,rgba(193,154,75,.20),rgba(36,75,142,.10));border:1px solid var(--pw-line)}
.complete-icon::after{content:"🎓";font-size:34px}
.complete-title{font-size:38px;margin-bottom:12px}
.complete-sub{color:var(--pw-ink-2);font-size:15px}
/* Results */
#stage-results{background:var(--bg);flex-direction:column}
#stage-results .cert{background:var(--pw-paper);border:1px solid var(--pw-line);border-radius:18px;border-top:none;box-shadow:var(--pw-shadow);max-width:880px;margin:0 auto;overflow:hidden;animation:pwRise .7s cubic-bezier(.2,.75,.2,1) both;}
#stage-results .cert::before{content:"";display:block;height:5px;background:linear-gradient(90deg,var(--pw-red),var(--pw-burgundy) 55%,var(--pw-gold))}
#stage-results .topbar{background:rgba(255,253,251,.85);-webkit-backdrop-filter:saturate(1.4) blur(8px);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--pw-line);padding:0 22px;height:56px;display:flex;align-items:center;justify-content:space-between;flex:0 0 auto}
#stage-results .topbar>div>span{font-family:var(--pw-display);font-weight:600;}
#stage-results .topbar .btn-ghost{border-radius:10px;border-color:var(--pw-line-2);color:var(--pw-ink-2);font-family:var(--pw-ui);font-weight:600}
#stage-results .topbar .btn-ghost:hover{border-color:var(--pw-red);color:var(--pw-red)}
#stage-results .topbar .btn-gold{border-radius:10px;background:linear-gradient(165deg,#caa052,#a87e2f);border:none;font-family:var(--pw-ui)}
/* Certificate */
#stage-results .cert-header{display:flex;align-items:flex-start;justify-content:space-between;padding:22px 36px 16px}
#stage-results .logo{display:flex;align-items:center;gap:10px}
#stage-results .logo-mark{width:46px;height:42px;border-radius:11px;background:linear-gradient(155deg,var(--pw-red),var(--pw-burgundy));display:flex;align-items:center;justify-content:center;font-family:'Arial Black',Arial,sans-serif;font-weight:900;font-size:15px;color:#fff;letter-spacing:.5px;box-shadow:0 5px 14px -6px rgba(20,48,95,.55)}
#stage-results .logo-name{font-family:var(--pw-display);font-weight:600;font-size:16px;color:var(--pw-ink)}
#stage-results .logo-sub{color:var(--pw-ink-3);letter-spacing:.12em;font-size:9.5px;font-weight:600;margin-top:2px}
#stage-results .cert-title-block{text-align:right}
#stage-results .cert-type-tag{font-size:9.5px;font-weight:700;color:var(--pw-red);letter-spacing:.18em;text-transform:uppercase;margin-bottom:3px}
#stage-results .cert-title-main{font-family:var(--pw-display);font-weight:600;font-size:22px;color:var(--pw-ink)}
#stage-results .cert-date-val{font-size:11px;color:var(--pw-ink-3);margin-top:4px}
#stage-results .divider{height:1px;background:var(--pw-line)}
#stage-results .student-row{padding:14px 36px;display:flex;gap:32px;align-items:flex-start}
#stage-results .field-label{font-size:9.5px;font-weight:700;color:var(--pw-ink-3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px}
#stage-results .field-value{font-size:15px;font-weight:700;color:var(--pw-ink)}
#stage-results .field-sep{width:1px;background:var(--pw-line);align-self:stretch}
#stage-results .score-section{padding:22px 36px;display:flex;align-items:flex-start;gap:26px;background:linear-gradient(180deg,#fbf6ee,#f6efe4);border-top:1px solid var(--pw-line);border-bottom:1px solid var(--pw-line)}
#stage-results .band-card{flex-shrink:0;border:1px solid var(--pw-line);border-radius:16px;padding:18px 30px;text-align:center;background:linear-gradient(180deg,#fffdfb,#fdf8f0);box-shadow:0 1px 2px rgba(34,25,15,.05),0 6px 18px -8px rgba(34,25,15,.16)}
#stage-results .band-lbl{font-size:10px;font-weight:700;color:var(--pw-red);letter-spacing:.16em;text-transform:uppercase;margin-bottom:5px}
#stage-results .band-num{font-family:var(--pw-display);font-weight:600;font-size:60px;color:var(--pw-red);line-height:1;letter-spacing:-.03em}
#stage-results .band-level{font-size:12px;font-weight:600;color:var(--pw-ink-2);margin-top:6px}
#stage-results .band-raw{font-size:11px;color:var(--pw-ink-3);margin-top:3px}
#stage-results .band-scale{display:flex;flex-direction:column;gap:3px}
#stage-results .scale-row{display:flex;align-items:center;gap:8px}
#stage-results .scale-n{width:28px;text-align:right;font-size:10px;color:var(--pw-ink-3)}
#stage-results .scale-n.active{font-weight:800;color:var(--pw-red)}
#stage-results .scale-bar{height:6px;border-radius:99px;background:var(--pw-line-2)}
#stage-results .scale-bar.active{background:linear-gradient(90deg,var(--pw-red),var(--pw-burgundy))}
#stage-results .scale-you{font-size:9px;font-weight:700;color:var(--pw-red);white-space:nowrap}
#stage-results .score-stats{flex:1;padding-left:4px}
#stage-results .stats-title{font-size:10px;font-weight:700;color:var(--pw-ink-3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
#stage-results .stat-row{margin-bottom:8px}
#stage-results .stat-top{display:flex;justify-content:space-between;margin-bottom:3px}
#stage-results .stat-name{font-size:11px;font-weight:600;color:var(--pw-ink-2)}
#stage-results .stat-val{font-size:11px;font-weight:700}
#stage-results .stat-val .pct{font-weight:400;color:var(--pw-ink-3)}
#stage-results .stat-track{height:5px;background:var(--pw-line-2);border-radius:99px;overflow:hidden}
#stage-results .stat-fill{height:100%;border-radius:99px}
#stage-results .section-heading{display:flex;align-items:center;gap:10px;margin-bottom:10px}
#stage-results .section-heading::before,#stage-results .section-heading::after{content:'';flex:1;height:1px;background:var(--pw-line)}
#stage-results .section-heading span{font-size:10px;font-weight:700;color:var(--pw-red);letter-spacing:.12em;text-transform:uppercase}
#stage-results .answer-section{padding:0 36px 18px}
#stage-results .q-grid{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px}
#stage-results .q-bubble{width:27px;height:27px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;transition:transform .12s}
#stage-results .q-bubble:hover{transform:translateY(-2px)}
#stage-results .q-bubble.correct{background:#e3f6e9;color:var(--pw-emerald)}
#stage-results .q-bubble.wrong{background:#fde7eb;color:var(--pw-status-red)}
#stage-results .q-bubble.skipped{background:var(--panel2);color:var(--ink-mute)}
#stage-results .answer-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#stage-results .answer-table{width:100%;border-collapse:collapse;font-size:10.5px}
#stage-results .answer-table th{padding:4px 7px;text-align:left;font-weight:700;color:var(--pw-ink-3);font-size:10px;border-bottom:1.5px solid var(--pw-line-2);background:transparent}
#stage-results .answer-table td{padding:2.5px 7px;border-bottom:1px solid var(--panel)}
#stage-results .answer-table tr.alt td{background:#fbf6ee}
#stage-results .td-num{font-size:10px;font-weight:700;color:var(--pw-ink-3)}
#stage-results .td-user.wrong{color:var(--pw-status-red);font-weight:700}
#stage-results .td-user .empty{color:var(--line-3);font-style:italic}
#stage-results .td-correct{color:var(--pw-emerald)}
#stage-results .td-correct .dash{color:var(--pw-line)}
#stage-results .td-status{text-align:center;font-size:13px;font-weight:700}
#stage-results .td-status.correct{color:var(--pw-emerald)}
#stage-results .td-status.wrong{color:var(--pw-status-red)}
#stage-results .td-status.skipped{color:var(--ink-mute)}
#stage-results .cert-footer{padding:12px 36px;border-top:1px solid var(--pw-line);background:linear-gradient(180deg,#fbf6ee,#f6efe4);display:flex;align-items:center;justify-content:space-between}
#stage-results .cert-footer span{font-size:10px;color:var(--pw-ink-3);font-weight:600;letter-spacing:.05em}
/* Channel promo */
.channel-promo{display:flex;align-items:center;gap:14px;padding:14px 18px;background:linear-gradient(135deg,#229ED9,#1E88C7);border-radius:14px;margin-top:18px;text-decoration:none;color:#fff;transition:.15s;cursor:pointer}
.channel-promo:hover{filter:brightness(1.05)}
.channel-promo .tg-icon{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.channel-promo .channel-text{flex:1}
.channel-promo .channel-name{font-weight:800;font-size:14px}
.channel-promo .channel-desc{font-size:11.5px;opacity:.9;font-weight:500;margin-top:1px}
.channel-promo .channel-cta{font-size:12px;font-weight:800;padding:6px 12px;background:rgba(255,255,255,.18);border-radius:999px;flex-shrink:0}
/* ── DARK MODE PREMIUM WRAPPER ── */
body.dark-mode :is(#stage-registration,#stage-reading-intro,#stage-completion,#stage-results){
  background:radial-gradient(1100px 560px at 50% -12%,rgba(90,140,210,.14),transparent 60%),radial-gradient(820px 520px at 108% 116%,rgba(19,49,95,.30),transparent 55%),linear-gradient(180deg,#15171c,#101218);color:#ece6df
}

@media print{

  #stage-results .topbar,.warning-overlay{display:none !important}

  #stage-results{position:static;display:block;overflow:visible;height:auto}

  #stage-results .cert{box-shadow:none !important;border-radius:0}
}
/* --- the ground, for the no-WebGL path: the same chamber, done in CSS ------ */
:is(#stage-registration,#stage-reading-intro,#stage-completion){
  background:
    radial-gradient(1650px 1000px at 50% 108%,rgba(27,61,118,.90),transparent 62%),
    radial-gradient(760px 600px at 14% 10%,rgba(79,38,43,.28),transparent 60%),
    linear-gradient(180deg,#0a1020,#05080f);
}
/* the paper-grain multiply overlay is wrong on a dark ground */
:is(#stage-registration,#stage-reading-intro,#stage-completion)::before{display:none}
/* --- token scoping: re-skins every existing rule and inline var() style ---- */
:is(#stage-registration,#stage-reading-intro,#stage-completion){
  color:var(--ch-ink-2);
  --ink:var(--ch-ink); --ink-soft:var(--ch-ink-2); --ink-mute:var(--ch-ink-3);
  --line:var(--ch-line); --line-2:var(--ch-line-2); --line-3:var(--ch-line-2);
  --paper:transparent;
  --pw-ink:var(--ch-ink); --pw-ink-2:var(--ch-ink-2); --pw-ink-3:var(--ch-ink-3);
  --pw-line:var(--ch-line); --pw-line-2:var(--ch-line-2);
  --pw-red:var(--ch-blue); --pw-red-2:var(--ch-blue);
  --pw-emerald:#5fd48c;
  --primary:var(--ch-red); --primary-2:var(--ch-red-2);
  --pw-shadow:var(--ch-shadow);
}
/* --- the cards --------------------------------------------------------- */
:is(#stage-registration,#stage-reading-intro,#stage-completion)
  :is(.start-card,.trans-card,.complete-card){
  background:var(--ch-glass);
  border:1px solid var(--ch-line);
  box-shadow:var(--ch-shadow),inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(22px) saturate(1.25);
  backdrop-filter:blur(22px) saturate(1.25);
}
:is(#stage-registration,#stage-reading-intro,#stage-completion)
  :is(.start-card,.trans-card,.complete-card)::before{
  background:linear-gradient(90deg,var(--ch-red),#8f2f63 48%,var(--ch-gold));
  opacity:.92;
}
/* --- inset panels (stat strip, rules box, icon tiles) ------------------- */
#stage-registration .start-meta,
#stage-reading-intro .trans-rules{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--ch-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
#stage-registration .start-meta-item .n{color:var(--ch-blue)}
#stage-registration .start-meta-divider{background:var(--ch-line-2)}
:is(#stage-reading-intro,#stage-completion) :is(.trans-icon,.complete-icon){
  background:linear-gradient(155deg,rgba(132,180,255,.16),rgba(255,255,255,.04));
  border:1px solid var(--ch-line);
}
/* --- the rule lists ------------------------------------------------------ */
#stage-registration .start-rules li::before{
  border-color:var(--ch-blue);
  box-shadow:inset 0 0 0 3px rgba(132,180,255,.22);
}
/* --- the name field ------------------------------------------------------ */
#stage-registration .input-field{
  background:rgba(255,255,255,.05);
  border:1.5px solid var(--ch-line-2);
  color:var(--ch-ink);
}
#stage-registration .input-field::placeholder{color:var(--ch-ink-3)}
#stage-registration .input-field:focus{
  border-color:var(--ch-blue);
  background:rgba(255,255,255,.07);
  box-shadow:0 0 0 4px rgba(132,180,255,.18);
}
/* --- primary action ------------------------------------------------------ */
:is(#stage-registration,#stage-reading-intro,#stage-completion) .btn-primary{
  background:linear-gradient(180deg,var(--ch-red-2),var(--ch-red));
  border-radius:10px;
  box-shadow:0 10px 26px -10px rgba(225,29,60,.65),inset 0 1px 0 rgba(255,255,255,.20);
}
:is(#stage-registration,#stage-reading-intro,#stage-completion) .btn-primary:hover{
  background:linear-gradient(180deg,#ff5570,var(--ch-red-2));
}
/* --- the Telegram promo sits calmer against the chamber ------------------ */
#stage-completion .channel-promo{
  background:linear-gradient(135deg,rgba(34,158,217,.90),rgba(24,110,160,.90));
  border:1px solid rgba(255,255,255,.14);
}
/* --- integrity warning: dark glass with a crimson edge ------------------- */
.warning-overlay{background:rgba(4,7,14,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.warning-card{
  background:var(--ch-glass);
  border:1px solid var(--ch-line);
  border-top:3px solid var(--ch-red);
  border-radius:16px;
  box-shadow:var(--ch-shadow),inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(225,29,60,.10);
  -webkit-backdrop-filter:blur(22px) saturate(1.25);
  backdrop-filter:blur(22px) saturate(1.25);
}
.warning-card h2{color:var(--ch-ink)}
.warning-card p{color:var(--ch-ink-2)}
.warning-card #warning-strikes-text{color:var(--ch-ink-3) !important}
.warning-card .strike-counter .strike{border-color:var(--ch-line-2)}
.warning-card .strike-counter .strike.on{background:var(--ch-red);border-color:var(--ch-red)}
.warning-card .btn-primary{
  background:linear-gradient(180deg,var(--ch-red-2),var(--ch-red));
  border-radius:10px;
  box-shadow:0 10px 26px -10px rgba(225,29,60,.65),inset 0 1px 0 rgba(255,255,255,.20);
}
/* --- the brown card override predates the chamber skin ------------------- */
body.dark-mode .start-card,
body.dark-mode .trans-card,
body.dark-mode .complete-card{background:var(--ch-glass)}
/* ── RESULTS TOPBAR — chamber glass ──────────────────────────────────────
   The certificate below stays paper on purpose; only the bar is re-skinned. */
#stage-results .topbar{
  /* the brand span pins `color:var(--ink)` INLINE, which beats any rule here —
     so re-point the token instead of trying to out-specify the attribute */
  --ink:var(--ch-ink);
  background:linear-gradient(180deg,rgba(20,32,56,.88),rgba(11,19,36,.92));
  -webkit-backdrop-filter:saturate(1.2) blur(18px);
  backdrop-filter:saturate(1.2) blur(18px);
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 10px 30px -12px rgba(0,0,0,.6);
}
#stage-results .topbar>div>span{color:var(--ch-ink)}
#stage-results .topbar .logo-mark{
  box-shadow:0 6px 16px -6px rgba(0,0,0,.7);
}
#stage-results .topbar .btn{
  height:34px;
  padding:0 16px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.01em;
  transition:background .14s,border-color .14s,color .14s;
}
/* primary action */
#stage-results .topbar .btn-primary{
  background:linear-gradient(180deg,var(--ch-red-2),var(--ch-red));
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  box-shadow:0 8px 22px -10px rgba(225,29,60,.75),inset 0 1px 0 rgba(255,255,255,.20);
}
#stage-results .topbar .btn-primary:hover{background:linear-gradient(180deg,#ff5570,var(--ch-red-2))}
/* secondary: glass outline */
#stage-results .topbar .btn-ghost{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  color:var(--ch-ink-2);
  border-radius:999px;
  font-weight:600;
}
#stage-results .topbar .btn-ghost:hover{
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.30);
  color:var(--ch-ink);
}
/* tertiary: gold hairline, no gradient slab */
#stage-results .topbar .btn-gold{
  background:transparent;
  border:1px solid rgba(217,176,99,.55);
  color:var(--ch-gold);
  border-radius:999px;
}
#stage-results .topbar .btn-gold:hover{
  background:rgba(217,176,99,.14);
  border-color:var(--ch-gold);
  color:#f0d49a;
}
/* ── RESULTS CERTIFICATE — DARK ──────────────────────────────────────────
   The certificate is almost entirely built on --pw-* tokens, so re-pointing
   them inside this scope re-skins it. Only the literal cream backgrounds
   below need explicit overrides. */
body.cosmos-cert #stage-results{
  --pw-paper:#0d1424;
  --pw-ink:#eaf1fb;
  --pw-ink-2:#b9c7dd;
  --pw-ink-3:#8494ae;
  --pw-line:rgba(255,255,255,.10);
  --pw-line-2:rgba(255,255,255,.20);
  --pw-red:#7fb2ff;
  --pw-red-2:#a5c9ff;
  --pw-burgundy:#3a6ab0;
  --pw-emerald:#5fd48c;
  --pw-status-red:#ff6b81;
  --pw-gold:#e8d5b7;
}
/* the old rule painted this brown; it clashes with the chamber */
body.cosmos-cert #stage-results .cert{
  background:linear-gradient(180deg,rgba(16,26,46,.90),rgba(9,15,28,.94));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 2px 8px rgba(0,0,0,.40),0 30px 70px -22px rgba(0,0,0,.75);
}
body.cosmos-cert #stage-results .score-section{
  background:rgba(255,255,255,.045);
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
}
body.cosmos-cert #stage-results .band-card{
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
body.cosmos-cert #stage-results .cert-footer{
  background:rgba(255,255,255,.035);
  border-top:1px solid rgba(255,255,255,.10);
}
body.cosmos-cert #stage-results .answer-table tr.alt td{background:rgba(255,255,255,.045)}
body.cosmos-cert #stage-results .answer-table td{border-bottom:1px solid rgba(255,255,255,.07)}
body.cosmos-cert #stage-results .answer-table th{border-bottom:1.5px solid rgba(255,255,255,.20)}
body.cosmos-cert #stage-results .td-user .empty{color:#6c7a8d}
body.cosmos-cert #stage-results .td-correct .dash{color:rgba(255,255,255,.18)}
body.cosmos-cert #stage-results .q-bubble.correct{background:rgba(95,212,140,.18);color:#7ee0a4}
body.cosmos-cert #stage-results .q-bubble.wrong{background:rgba(255,107,129,.18);color:#ff8fa1}
body.cosmos-cert #stage-results .q-bubble.skipped{background:rgba(255,255,255,.07);color:#8797b0}
body.cosmos-cert #stage-results .stat-track,
body.cosmos-cert #stage-results .scale-bar{background:rgba(255,255,255,.14)}
body.cosmos-cert #stage-results .logo-mark{box-shadow:0 5px 14px -6px rgba(0,0,0,.8)}
/* sepia keeps the paper certificate — only the ground shifts warm */

@media print{

  body.cosmos-cert #stage-results{
    --pw-paper:#fffdfb; --pw-ink:#22190f; --pw-ink-2:#5c5044; --pw-ink-3:#8a7d6d;
    --pw-line:rgba(34,25,15,.10); --pw-line-2:rgba(34,25,15,.16);
    --pw-red:#244b8e; --pw-red-2:#1a3a72; --pw-burgundy:#13315f;
    --pw-emerald:#1f7a43; --pw-status-red:#c41230; --pw-gold:#c19a4b;
  }

  body.cosmos-cert #stage-results .cert{
    background:#fffdfb !important; border-color:rgba(34,25,15,.10) !important;
  }

  body.cosmos-cert #stage-results .score-section,
  body.cosmos-cert #stage-results .cert-footer{background:linear-gradient(180deg,#fbf6ee,#f6efe4) !important}

  body.cosmos-cert #stage-results .band-card{background:linear-gradient(180deg,#fffdfb,#fdf8f0) !important}

  body.cosmos-cert #stage-results .answer-table tr.alt td{background:#fbf6ee !important}

  body.cosmos-cert #stage-results .q-bubble.correct{background:#e3f6e9 !important;color:#1f7a43 !important}

  body.cosmos-cert #stage-results .q-bubble.wrong{background:#fde7eb !important;color:#c41230 !important}
}


/* --- the boot owns the reveal ------------------------------------------------
   Reading ships its own stage-entrance fade (pwStageIn) on the four wrapper
   stages. Listening has no such animation: the registration screen stays hidden
   under body.cdi-booting while the mark forms, and is then revealed with the
   card's children animating in via cdiRise. With pwStageIn left on, Reading's
   registration faded itself in on its own 0.44s timeline regardless of the boot,
   so the intro and the card arrived together instead of one after the other.
   Suppressed only when the WebGL layer is live; the no-WebGL path keeps it,
   because there is no boot to hand over from. #stage-reading is not involved. */
body.cdi-3d-on :is(#stage-registration,#stage-reading-intro,#stage-completion,#stage-results).active{
  animation:none;
}

/* ======
   CHAMBER SKIN — superseded by the CDI V3 COSMIC SHELL at the foot of this
   stylesheet, which is the Writing master's shell ported whole. What stood
   here was the previous generation of the same idea (a --ch-* token set plus
   a per-element re-skin of the wrapper stages); keeping both meant two rule
   sets fighting over one card, so the older one is deleted rather than
   layered under. The --ch-* tokens the certificate and dark-mode blocks below
   still reference are declared by the shell. ====*/
/* ======
   RESULTS TOPBAR — chamber glass with the pill buttons
   crimson (primary) / glass (ghost) / gold hairline (new test) ====*/
#stage-results .topbar{
  background:linear-gradient(180deg,rgba(18,30,54,.86),rgba(9,16,30,.92));
  border-bottom:1px solid var(--ch-line);
  box-shadow:0 10px 34px -18px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  backdrop-filter:blur(18px) saturate(1.2);
}
#stage-results .topbar span{color:var(--ch-ink) !important}
#stage-results .topbar .btn-sm{
  border-radius:999px;
  padding:8px 16px;
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.01em;
  border:1px solid transparent;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
#stage-results .topbar .btn-primary{
  background:linear-gradient(180deg,var(--ch-red-2),var(--ch-red));
  color:#fff;
  box-shadow:0 8px 22px -10px rgba(225,29,60,.7),inset 0 1px 0 rgba(255,255,255,.2);
}
#stage-results .topbar .btn-primary:hover{background:linear-gradient(180deg,#ff5570,var(--ch-red-2))}
#stage-results .topbar .btn-ghost{
  background:rgba(255,255,255,.07);
  border-color:var(--ch-line-2);
  color:var(--ch-ink);
}
#stage-results .topbar .btn-ghost:hover{background:rgba(255,255,255,.13)}
#stage-results .topbar .btn-gold{
  background:transparent;
  border-color:var(--ch-gold);
  color:var(--ch-gold);
}
#stage-results .topbar .btn-gold:hover{background:rgba(217,176,99,.12)}
/* the brand mark, painted by applyBrandLogo() */
#stage-results .logo-mark{
  width:36px;height:36px;border-radius:8px;
  background-size:contain;background-repeat:no-repeat;background-position:center;
}

/* ======
   CERTIFICATE — dark layer + sepia + print reset
   Moved. The document, its dark and sepia palettes and the print reset are
   now typeset together at the end of this sheet, under "CERTIFICATE — the CDI
   document", where they sit after every other #stage-results rule and no
   longer need to fight the cascade. Nothing is defined here. ====*/

/* ======
   SEPIA — the chamber stays navy (it is a lit room, not paper), but every
   surface Reading paints warm needs its counterpart here. Same root cause as
   dark mode: the fidelity work hard-codes literals a var flip cannot reach. ====*/
body.theme-sepia{
  --sp-ground:#f5f0e8; --sp-panel:#ece3d3; --sp-panel-2:#fffdf8;
  --sp-line:#d9cbb0; --sp-line-2:#b9a685;
  --sp-ink:#3a2c1a; --sp-ink-2:#5a4632; --sp-ink-3:#8d7a5f;
}
/* the wrapper stages keep the chamber in sepia too — only the accents warm */
body.theme-sepia :is(#stage-registration,#stage-reading-intro,#stage-completion){
  --ch-blue:#e0b877;
  --ch-gold:#e6c489;
}
body.theme-sepia .warning-card .ic{color:var(--ch-red-2)}


/* Kept from the block this section replaces: the wrapper cards outside the
   results screen used to share the certificate's brown dark-mode fill. The
   certificate no longer takes that fill, but the cards still expect it. */
body.dark-mode .start-card,body.dark-mode .trans-card,body.dark-mode .complete-card{background:#201b17;border-color:rgba(255,255,255,.08)}

/* ======
   CERTIFICATE — the CDI document        [ported from the CDI Writing test]
   ----------------------------------------------------------------------------
   Same press as Writing's Test Report Form: the same paper, the same ink, the
   same band-tier chrome, the same rhythm down the page. What changes is what
   the document reports. Writing grades four examiner criteria against an AI
   band; Reading counts forty objective marks, so the criteria table becomes a
   per-passage breakdown — raw score and band equivalent, one row per passage,
   with the overall as the closing row — inside exactly the same table.

   Everything is scoped to #stage-results .cert (or to #print-report, built by
   buildPrintReport()) so it never reaches the exam screen, and the whole block
   sits last in the sheet so it beats the older #stage-results rules the
   wrapper skins left behind. ====*/

/* ── Document tokens + band-tier chrome ───────────────────────
   data-tier is set from the overall band in renderResults(). Only the chrome
   (rule, glow, accent metal) changes; the paper, the ink and the layout stay
   constant, so a 4.0 and a 9.0 are recognisably the same document — just lit
   differently.  Unlike Writing, every surface colour here is a token: Reading
   has a dark mode and a sepia mode, and both are one token flip below.       */
#stage-results .cert,#print-report{
  --c-paper:#fffdfa;--c-paper-2:#f9f4ea;--c-paper-3:#fbf7ef;--c-paper-4:#f6f0e4;
  --c-ink:#1b1610;--c-ink-2:#5a5045;--c-ink-3:#8d8173;
  --c-line:rgba(27,22,16,.10);--c-line-2:rgba(27,22,16,.17);--c-track:rgba(27,22,16,.08);
  --cv-strong:#1f7a43;--cv-mid:#a97f34;--cv-low:#78818f;--cv-none:#b3ada4;
  --cv-blank:#8d8173;
  --cert-display:'Bricolage Grotesque',system-ui,'Segoe UI',sans-serif;
  --cert-ui:'Be Vietnam Pro',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
}
#stage-results .cert{
  --acc:#7fb0e8;--acc-2:#d3e6fb;--acc-ink:#2c5fa8;
  --hero-a:#0d2044;--hero-b:#1b3a6d;--hero-c:#27507f;
  --glow:rgba(122,172,232,.30);
  --rule:linear-gradient(90deg,#17356a,#2c5fa8 58%,#7fb0e8);
}
#stage-results .cert[data-tier="high"]{
  --acc:#dcbe7c;--acc-2:#f8ecc9;--acc-ink:#9c7526;
  --hero-a:#0b1c39;--hero-b:#1d3a68;--hero-c:#33578a;
  --glow:rgba(224,192,120,.30);
  --glow-pos:22% 34%;
  --rule:linear-gradient(90deg,#17356a,#3767ad 34%,#c9a24f 74%,#f2dfae);
}
#stage-results .cert[data-tier="mid"]{
  --acc:#d8b479;--acc-2:#f3e3c3;--acc-ink:#8f6f2c;
  --hero-a:#132a4e;--hero-b:#20406e;--hero-c:#2d5382;
  --glow:rgba(199,163,98,.24);
  --rule:linear-gradient(90deg,#1c3f77,#3a5f92 46%,#b58c45)}
#stage-results .cert[data-tier="low"]{
  --acc:#a9bcd2;--acc-2:#dae4ef;--acc-ink:#4c5f78;
  --hero-a:#141c29;--hero-b:#242f42;--hero-c:#33415a;
  --glow:rgba(150,175,205,.17);
  --rule:linear-gradient(90deg,#2a3648,#47566d 58%,#8095ad)}

/* The scroll shell. Two older results designs further up the sheet still lay
   .results-content out as a centred flex column — which silently shrank the
   certificate to the viewport instead of letting it scroll — and reset the
   padding after it. Both are settled here, last. */
#stage-results .results-content{display:block;flex:1 1 auto;width:100%;max-width:none;min-height:0;
  margin:0;padding:44px 24px 80px;gap:0;overflow-y:auto;overscroll-behavior:contain}

/* ── The document ── */
#stage-results .cert{
  font-family:var(--cert-ui);
  width:auto;min-height:0;max-width:948px;margin:0 auto;display:block;
  background:var(--c-paper);color:var(--c-ink);
  border:1px solid var(--c-line);border-top:none;border-radius:16px;overflow:hidden;box-sizing:border-box;
  box-shadow:0 1px 2px rgba(27,22,16,.05),0 14px 34px -14px rgba(27,22,16,.20),0 44px 90px -40px rgba(13,32,68,.30);
  animation:certRise .72s cubic-bezier(.16,.86,.24,1) both}
#stage-results .cert::before{content:"";display:block;height:5px;background:var(--rule)}

/* header */
#stage-results .cert-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:24px 38px 18px;animation:certPart .5s .10s both}
/* .cert-logo is also a bare class on the completion card, where it is a 46px
   centred badge. Reset the box before styling it as a lockup here. */
#stage-results .cert-logo{display:flex;align-items:center;gap:13px;width:auto;height:auto;margin:0;border-radius:0}
#stage-results .cert-logo .logo-mark{width:46px;height:46px;border-radius:13px;flex:0 0 auto;background:none;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  box-shadow:0 6px 16px -7px rgba(13,32,68,.6)}
#stage-results .cert-logo-name{font-family:var(--cert-display);font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--c-ink)}
#stage-results .cert-logo-sub{font-weight:700;font-size:9.5px;color:var(--c-ink-3);letter-spacing:.16em;text-transform:uppercase;margin-top:3px}
#stage-results .cert-title-block{text-align:right}
#stage-results .cert-type-tag{font-size:9.5px;font-weight:800;color:var(--acc-ink);letter-spacing:.2em;text-transform:uppercase;margin-bottom:5px}
#stage-results .cert-title-main{font-family:var(--cert-display);font-size:27px;font-weight:700;color:var(--c-ink);letter-spacing:-.028em;line-height:1.05}
#stage-results .cert-date-val{font-size:11px;color:var(--c-ink-3);margin-top:5px;letter-spacing:.01em}

/* candidate strip */
#stage-results .student-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0;
  border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);
  background:linear-gradient(180deg,var(--c-paper),var(--c-paper-3));animation:certPart .5s .16s both}
#stage-results .student-row > div{padding:13px 22px;border-left:1px solid var(--c-line)}
#stage-results .student-row > div:first-child{border-left:none;padding-left:38px}
#stage-results .student-row > div:last-child{padding-right:38px}
#stage-results .field-label{font-size:9px;font-weight:800;color:var(--c-ink-3);letter-spacing:.17em;text-transform:uppercase;margin-bottom:5px}
#stage-results .field-value{font-size:14.5px;font-weight:700;color:var(--c-ink);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── The score panel: the one thing they screenshot ── */
#stage-results .score-section{position:relative;display:grid;grid-template-columns:266px 1fr;gap:0;padding:0;border:none;
  background:linear-gradient(150deg,var(--hero-a),var(--hero-b) 52%,var(--hero-c));color:#fff;isolation:isolate;
  animation:certPart .55s .22s both}
#stage-results .score-section::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(560px 360px at var(--glow-pos,18% 2%),var(--glow),transparent 68%),
    radial-gradient(420px 260px at 104% 118%,rgba(255,255,255,.09),transparent 62%),
    repeating-linear-gradient(114deg,rgba(255,255,255,.05) 0 1px,transparent 1px 10px)}
#stage-results .score-section > *{position:relative;z-index:1}

#stage-results .band-card{padding:30px 26px 30px 38px;border:none;border-right:1px solid rgba(255,255,255,.15);text-align:left;
  display:flex;flex-direction:column;justify-content:center;background:none;border-radius:0;box-shadow:none;overflow:visible;flex-shrink:1}
#stage-results .band-card::after{content:none}
#stage-results .band-lbl{font-size:9.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:2px}
#stage-results .band-fig{display:flex;align-items:baseline;gap:9px}
#stage-results .band-num{font-family:var(--cert-display);font-weight:700;font-size:94px;line-height:.92;letter-spacing:-.048em;
  font-variant-numeric:tabular-nums;background:linear-gradient(172deg,#fff 4%,var(--acc-2) 34%,var(--acc) 88%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.28));animation:none}
#stage-results .band-of{font-size:16px;font-weight:600;color:rgba(255,255,255,.36);letter-spacing:-.01em}
#stage-results .band-level{font-family:var(--cert-display);font-size:17px;font-weight:600;color:#fff;margin-top:8px;letter-spacing:-.012em}
#stage-results .band-formula{font-size:10.5px;color:rgba(255,255,255,.52);margin-top:7px;line-height:1.5;letter-spacing:.005em}
#stage-results .band-formula b{color:rgba(255,255,255,.78);font-weight:700}

#stage-results .band-side{padding:26px 38px 28px 30px;display:flex;flex-direction:column;gap:15px;min-width:0}

/* 0–9 ruler */
#stage-results .band-scale{position:relative;display:block;flex-direction:row;gap:0}
#stage-results .band-scale-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
#stage-results .band-scale-cap{font-size:9px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;color:rgba(255,255,255,.5)}
#stage-results .band-scale-note{font-size:11px;color:rgba(255,255,255,.62)}
#stage-results .band-scale-note b{color:#fff;font-weight:700}
#stage-results .band-scale-track{position:relative;height:9px;border-radius:99px;background:rgba(255,255,255,.11);box-shadow:inset 0 1px 2px rgba(0,0,0,.24)}
#stage-results .band-scale-track::after{content:"";position:absolute;inset:0;border-radius:99px;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 calc(11.111% - 1px),rgba(255,255,255,.20) calc(11.111% - 1px) 11.111%)}
#stage-results .band-scale-fill{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:99px;
  background:linear-gradient(90deg,rgba(255,255,255,.30),var(--acc));box-shadow:0 0 18px -2px var(--glow);
  transition:width 1.05s .35s cubic-bezier(.16,.86,.24,1)}
#stage-results .band-scale-dot{position:absolute;top:50%;left:0;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.20),0 3px 10px rgba(0,0,0,.35);opacity:0;
  transition:left 1.05s .35s cubic-bezier(.16,.86,.24,1),opacity .3s .9s}
#stage-results .band-scale.on .band-scale-dot{opacity:1}
#stage-results .band-scale-ticks{display:flex;justify-content:space-between;margin-top:7px}
#stage-results .band-scale-ticks span{font-size:9px;font-weight:600;color:rgba(255,255,255,.34);font-variant-numeric:tabular-nums}
#stage-results .band-scale-ticks span.hit{color:#fff;font-weight:800}

/* the one honest sentence about what this band is worth */
#stage-results .band-verdict{font-size:12px;line-height:1.5;color:rgba(255,255,255,.66);letter-spacing:.005em;
  padding:10px 14px;border-radius:11px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11)}
#stage-results .band-verdict b{color:#fff;font-weight:700}

/* where the forty marks landed — Writing's two task cards, three-up */
#stage-results .task-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
#stage-results .task-mini{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:13px;
  padding:12px 15px 13px;transition:background .18s ease,border-color .18s ease;min-width:0}
#stage-results .task-mini:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22)}
#stage-results .task-mini-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:9px}
#stage-results .task-mini-title{font-size:9.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.62)}
#stage-results .task-mini-band{font-family:var(--cert-display);font-size:30px;font-weight:700;line-height:1;color:#fff;
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;margin-left:auto}
#stage-results .task-mini-row{display:flex;align-items:baseline;gap:10px}
#stage-results .task-mini-track{flex:1;height:5px;border-radius:99px;background:rgba(255,255,255,.13);overflow:hidden;align-self:center}
#stage-results .task-mini-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,rgba(255,255,255,.34),var(--acc));
  transition:width .95s .5s cubic-bezier(.16,.86,.24,1)}
#stage-results .task-mini-words{font-size:10.5px;color:rgba(255,255,255,.52);margin-top:9px;letter-spacing:.005em}
#stage-results .task-mini-words b{color:rgba(255,255,255,.8);font-weight:700}
#stage-results .task-mini-words .short{color:#f0c98a;font-weight:700}
#stage-results .task-mini.warn .task-mini-fill{background:linear-gradient(90deg,rgba(255,255,255,.28),#f0c98a)}
#stage-results .task-mini.mute .task-mini-fill{background:rgba(255,255,255,.34)}
#stage-results .task-mini.mute .task-mini-band{color:rgba(255,255,255,.72)}

/* ── Section rhythm ── */
#stage-results .section-heading{display:flex;align-items:center;gap:12px;margin:26px 38px 15px;animation:certPart .5s .3s both}
#stage-results .section-heading::before,#stage-results .section-heading::after{content:'';flex:1;height:1px;background:var(--c-line)}
#stage-results .section-heading span{font-family:var(--cert-ui);font-size:9.5px;font-weight:800;color:var(--acc-ink);letter-spacing:.2em;text-transform:uppercase}

/* ── Per-passage breakdown — Writing's criteria table, re-scored ──
   Rows are the three passages, closed by the whole test. Column one is the
   raw mark out of that passage's question count; column two is what that
   score is worth on the official Academic Reading conversion table.        */
#stage-results .cc-grid{display:block;padding:0 38px;animation:certPart .5s .34s both}
#stage-results .cc-table{border:1px solid var(--c-line);border-radius:14px;overflow:hidden;background:var(--c-paper)}
#stage-results .cc-head,#stage-results .cc-row{display:grid;grid-template-columns:minmax(150px,1.15fr) 1fr 1fr;align-items:center}
#stage-results .cc-head{background:linear-gradient(180deg,var(--c-paper-3),var(--c-paper-4));border-bottom:1px solid var(--c-line)}
#stage-results .cc-head > div{padding:11px 18px}
#stage-results .cc-head-name{font-size:9px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--c-ink-3)}
#stage-results .cc-head-task{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-left:1px solid var(--c-line)}
#stage-results .cc-head-task span{font-size:9.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--c-ink-2)}
#stage-results .cc-col-band{font-family:var(--cert-display);font-size:21px;font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
#stage-results .cc-row{border-top:1px solid var(--c-line)}
#stage-results .cc-row:first-child{border-top:none}
#stage-results .cc-name{padding:13px 18px;font-size:12.5px;font-weight:600;color:var(--c-ink-2);line-height:1.35;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#stage-results .cc-name em{font-style:normal;font-size:10.5px;font-weight:600;color:var(--c-ink-3);letter-spacing:.01em}
#stage-results .cc-tag{font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:2px 6px;border-radius:5px;white-space:nowrap}
#stage-results .cc-tag.best{color:#1f7a43;background:rgba(31,122,67,.10)}
#stage-results .cc-tag.focus{color:#8f6f2c;background:rgba(169,127,52,.13)}
#stage-results .cc-cell{padding:13px 18px;border-left:1px solid var(--c-line);display:flex;align-items:center;gap:12px}
#stage-results .cc-track{flex:1;height:7px;border-radius:99px;background:var(--c-track);position:relative;overflow:hidden;min-width:40px}
#stage-results .cc-track::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 calc(11.111% - 1px),var(--c-line) calc(11.111% - 1px) 11.111%)}
#stage-results .cc-track.raw::after{background:none}
#stage-results .cc-fill{height:100%;width:0;border-radius:99px;transition:width .8s cubic-bezier(.16,.86,.24,1)}
#stage-results .cc-val{font-family:var(--cert-display);font-size:15px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;min-width:44px;text-align:right}
#stage-results .cc-val small{font-family:var(--cert-ui);font-size:10.5px;font-weight:600;color:var(--c-ink-3);letter-spacing:0}
/* the closing row is the whole test, so it is set like a total, not a part */
#stage-results .cc-row.cc-total{background:linear-gradient(180deg,var(--c-paper-3),var(--c-paper-4));border-top:1px solid var(--c-line-2)}
#stage-results .cc-row.cc-total .cc-name{font-weight:800;color:var(--c-ink);font-size:12.5px;letter-spacing:.01em}
#stage-results .cc-row.cc-total .cc-val{font-size:17px}

#stage-results .cc-legend{margin:13px 38px 0;padding:0;background:none;border-radius:0;font-size:11px;color:var(--c-ink-3);line-height:1.6;
  display:flex;gap:10px 22px;flex-wrap:wrap;align-items:baseline;justify-content:space-between;animation:certPart .5s .4s both}
#stage-results .cc-legend .keys{display:flex;gap:16px;flex-wrap:wrap;align-items:baseline;flex:0 0 auto}
#stage-results .cc-legend .note{flex:1 1 320px;min-width:280px;max-width:620px}
#stage-results .cc-legend b{color:var(--c-ink-2);font-weight:700}
#stage-results .cc-legend .key{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
#stage-results .cc-legend .key i{width:9px;height:9px;border-radius:3px;display:inline-block}

/* what the band officially means — public descriptor, changes with the score */
#stage-results .band-desc{margin:18px 38px 0;padding:2px 0 2px 16px;border-left:3px solid var(--acc-ink);
  background:none;border-radius:0;animation:certPart .5s .43s both}
#stage-results .band-desc-h{font-family:var(--cert-display);font-size:14px;font-weight:600;letter-spacing:-.012em;color:var(--c-ink)}
#stage-results .band-desc p{margin:5px 0 0;font-size:12.5px;line-height:1.6;color:var(--c-ink-2);max-width:78ch}

/* ── Where the marks went ──────────────────────────────────────
   The diagnosis Reading can make and Writing cannot: a lost mark that was a
   plural, a spelling or a word-limit slip is a different problem from one
   that was a misread, and a blank is a clock problem. Same paper, same type
   scale — it reads as another paragraph of the report, not as a dashboard. */
#stage-results .ins-grid{padding:0 38px;animation:certPart .5s .46s both}
#stage-results .ins-lead{font-family:var(--cert-display);font-size:16px;font-weight:600;letter-spacing:-.015em;
  color:var(--c-ink);line-height:1.45;margin:0 0 14px;max-width:74ch}
#stage-results .cause-grid{display:flex;flex-wrap:wrap;gap:10px}
#stage-results .cause-card{flex:1 1 132px;max-width:196px;min-width:132px;
  border:1px solid var(--c-line);border-radius:12px;padding:12px 14px 13px;background:var(--c-paper);
  animation:certPart .45s both}
#stage-results .cause-card b{display:block;font-family:var(--cert-display);font-size:26px;font-weight:700;line-height:1;
  letter-spacing:-.035em;font-variant-numeric:tabular-nums}
#stage-results .cause-card span{display:block;margin-top:6px;font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--c-ink-3);line-height:1.35}
#stage-results .cause-card.fixable b{color:var(--cv-strong)}
#stage-results .cause-card.real b{color:var(--acc-ink)}
#stage-results .cause-card.blank b{color:var(--cv-mid)}
#stage-results .ins-note{margin-top:13px;padding-top:12px;border-top:1px solid var(--c-line);
  font-size:12.5px;line-height:1.6;color:var(--c-ink-2);max-width:82ch}
#stage-results .ins-note + .ins-note{margin-top:8px;padding-top:8px;border-top:none}

/* pacing: three passages against the twenty-minute budget */
#stage-results .pace-grid{margin-top:16px;padding-top:14px;border-top:1px solid var(--c-line)}
#stage-results .pace-cap{font-size:9px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--c-ink-3);margin-bottom:10px}
#stage-results .pace-row{display:flex;align-items:center;gap:14px;margin-bottom:9px}
#stage-results .pace-row:last-child{margin-bottom:0}
#stage-results .pace-name{flex:0 0 82px;font-size:12px;font-weight:600;color:var(--c-ink-2)}
#stage-results .pace-track{flex:1;height:7px;border-radius:99px;background:var(--c-track);position:relative;overflow:hidden;min-width:60px}
#stage-results .pace-track::after{content:"";position:absolute;top:-3px;bottom:-3px;left:100%;width:1px;background:var(--c-line-2)}
#stage-results .pace-fill{height:100%;width:0;border-radius:99px;background:var(--cv-strong);transition:width .8s .45s cubic-bezier(.16,.86,.24,1)}
#stage-results .pace-fill.over{background:var(--cv-mid)}
#stage-results .pace-val{flex:0 0 92px;text-align:right;font-size:12px;font-weight:700;color:var(--c-ink);font-variant-numeric:tabular-nums}
#stage-results .pace-val.over{color:var(--cv-mid)}
#stage-results .pace-foot{margin-top:10px;font-size:11.5px;line-height:1.55;color:var(--c-ink-3)}

/* ── Answer summary: filters, bubbles, the forty rows ── */
#stage-results .answer-section{padding:0 38px;animation:certPart .5s .5s both}
#stage-results .cert .v3-filters{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 15px}
#stage-results .cert .v3-fchip{
  border:1px solid var(--c-line-2);background:var(--c-paper);border-radius:99px;
  padding:6px 13px;font-family:var(--cert-ui);font-size:11.5px;font-weight:700;color:var(--c-ink-2);
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;letter-spacing:.01em;
  transition:background .15s ease,border-color .15s ease,color .15s ease}
#stage-results .cert .v3-fchip:hover{transform:none;border-color:var(--acc-ink);color:var(--c-ink)}
#stage-results .cert .v3-fchip b{font-size:11.5px;font-weight:800;color:var(--c-ink-3);font-variant-numeric:tabular-nums}
#stage-results .cert .v3-fchip.on{background:var(--acc-ink);border-color:var(--acc-ink);color:#fff}
#stage-results .cert .v3-fchip.on b{color:rgba(255,255,255,.72)}
#stage-results .cert .v3-fchip.slip b{color:var(--cv-strong)}
#stage-results .cert .v3-fchip.slow b{color:var(--cv-mid)}
#stage-results .cert .v3-fchip.on b{color:rgba(255,255,255,.72)}

#stage-results .q-grid{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:18px}
#stage-results .cert .q-bubble{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:800;font-variant-numeric:tabular-nums;border:1px solid transparent;
  transition:opacity .2s ease,transform .12s ease}
#stage-results .cert .q-bubble.correct{background:rgba(31,122,67,.11);border-color:rgba(31,122,67,.20);color:#1c6b3c}
#stage-results .cert .q-bubble.wrong{background:rgba(169,127,52,.13);border-color:rgba(169,127,52,.24);color:#8f6f2c}
#stage-results .cert .q-bubble.skipped{background:var(--c-track);border-color:var(--c-line);color:var(--c-ink-3)}

#stage-results .answer-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px 26px;align-items:start}
#stage-results .cert .answer-table{width:100%;border-collapse:collapse;font-size:11.5px;table-layout:fixed}
#stage-results .cert .answer-table th{padding:8px 9px;text-align:left;font-weight:800;color:var(--c-ink-3);font-size:8.5px;
  letter-spacing:.15em;text-transform:uppercase;border-bottom:1px solid var(--c-line-2);background:transparent}
#stage-results .cert .answer-table td{padding:6px 9px;border-bottom:1px solid var(--c-line);color:var(--c-ink);vertical-align:top;line-height:1.35}
#stage-results .cert .answer-table tr.alt td{background:var(--c-paper-3)}
/* The trap note spans the last three columns, so the fixed widths and the
   centred status column are held off that row. */
#stage-results .cert .answer-table th:first-child,
#stage-results .cert .answer-table tr td:first-child{width:42px}
#stage-results .cert .answer-table th:last-child,
#stage-results .cert .answer-table tr td:last-child{width:26px;text-align:center}
#stage-results .cert .answer-table td.td-num{font-size:11px;font-weight:800;color:var(--c-ink-3);font-variant-numeric:tabular-nums}
#stage-results .cert .answer-table .td-secs{display:block;font-size:8.5px;font-weight:700;color:var(--c-ink-3);
  font-family:var(--cert-ui);letter-spacing:.02em;margin-top:2px}
#stage-results .cert .answer-table .td-secs.slow{color:var(--cv-mid)}
#stage-results .cert .answer-table td.td-user{font-weight:600;overflow-wrap:anywhere}
#stage-results .cert .answer-table td.td-user.wrong{color:var(--cv-mid);font-weight:700}
#stage-results .cert .answer-table td.td-user .empty{color:var(--c-ink-3);font-style:italic;font-weight:500}
#stage-results .cert .answer-table td.td-correct{color:var(--cv-strong);font-weight:600;overflow-wrap:anywhere}
#stage-results .cert .answer-table td.td-correct .dash{color:var(--c-line-2)}
#stage-results .cert .answer-table td.td-status{text-align:center;font-size:12px;font-weight:800}
#stage-results .cert .answer-table td.td-status.correct{color:var(--cv-strong)}
#stage-results .cert .answer-table td.td-status.wrong{color:var(--cv-mid)}
#stage-results .cert .answer-table td.td-status.skipped{color:var(--c-ink-3)}
#stage-results .cert .cause-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:5px;
  font-size:8px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;vertical-align:middle;
  background:rgba(31,122,67,.10);color:#1c6b3c}

/* ── Closing CTA + footer ── */
#stage-results .review-cta{margin:26px 38px 0;padding:18px 22px;border:1px solid rgba(44,95,168,.16);border-radius:14px;text-align:left;
  background:linear-gradient(180deg,rgba(44,95,168,.055),rgba(44,95,168,.09));display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;animation:certPart .5s .54s both}
/* the panel takes the tier's metal too, so a gold document never ends on a
   blue note (the rgba pair above stays as the fallback) */
@supports (background:color-mix(in srgb,red 5%,transparent)){
  #stage-results .review-cta{
    border-color:color-mix(in srgb,var(--acc-ink) 20%,transparent);
    background:linear-gradient(180deg,color-mix(in srgb,var(--acc-ink) 5%,transparent),color-mix(in srgb,var(--acc-ink) 10%,transparent))}
}
#stage-results .review-cta-title{font-family:var(--cert-display);font-size:16px;font-weight:600;letter-spacing:-.015em;color:var(--c-ink)}
#stage-results .review-cta-sub{font-size:12px;color:var(--c-ink-3);margin-top:4px;line-height:1.5}
/* The chamber's crimson belongs to the topbar; inside the document the button
   takes the document's own accent, the way it does on the Writing report. */
#stage-results .review-cta .btn{font-family:var(--cert-ui);font-weight:700;letter-spacing:.01em}
#stage-results .review-cta .btn-primary{
  background:var(--acc-ink);border:none;border-radius:11px;color:#fff;
  box-shadow:0 6px 16px -6px rgba(20,48,95,.5),inset 0 1px 0 rgba(255,255,255,.2)}
#stage-results .review-cta .btn-primary:hover{filter:brightness(1.08);background:var(--acc-ink)}
body.cosmos-cert #stage-results .review-cta .btn-primary{color:#0f141c}
#stage-results .cert-footer{margin-top:24px;padding:13px 38px;border-top:1px solid var(--c-line);
  background:linear-gradient(180deg,var(--c-paper-3),var(--c-paper-4));
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
#stage-results .cert-footer span{font-size:10px;color:var(--c-ink-3);font-weight:600;letter-spacing:.05em}
#stage-results .cert-footer span:first-child{font-family:var(--cert-display);font-weight:600;letter-spacing:.02em;color:var(--c-ink-2);font-size:11px}
#stage-results .cert-footer .cert-id{font-variant-numeric:tabular-nums;letter-spacing:.09em}

/* ── Motion ── */
@keyframes certRise{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}
@keyframes certPart{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  #stage-results .band-scale-fill,#stage-results .band-scale-dot,
  #stage-results .task-mini-fill,#stage-results .cc-fill,#stage-results .pace-fill{transition:none!important}
  #stage-results .band-scale-dot{opacity:1}
  #stage-results .cert,#stage-results .cert *{animation:none!important}
}

/* ── Responsive ── */
@media (max-width:1000px){
  #stage-results .results-content{padding:28px 16px 60px}
  #stage-results .cert-header,#stage-results .band-side{padding-left:26px;padding-right:26px}
  #stage-results .band-card{padding-left:26px}
  #stage-results .student-row > div:first-child{padding-left:26px}
  #stage-results .student-row > div:last-child{padding-right:26px}
  #stage-results .section-heading,#stage-results .cc-legend,#stage-results .review-cta,
  #stage-results .band-desc{margin-left:26px;margin-right:26px}
  #stage-results .cc-grid,#stage-results .ins-grid,#stage-results .answer-section{padding-left:26px;padding-right:26px}
  #stage-results .cert-footer{padding-left:26px;padding-right:26px}
}
@media (max-width:880px){
  #stage-results .score-section{grid-template-columns:1fr}
  #stage-results .band-card{border-right:none;border-bottom:1px solid rgba(255,255,255,.14);padding:24px 26px 20px}
  #stage-results .band-side{padding:22px 26px}
  #stage-results .cert-title-main{font-size:22px}
  #stage-results .band-num{font-size:66px}
  #stage-results .student-row{grid-template-columns:1fr 1fr}
  #stage-results .student-row > div{border-left:none;border-top:1px solid var(--c-line);padding:11px 26px!important}
  #stage-results .student-row > div:nth-child(-n+2){border-top:none}
  #stage-results .student-row > div:nth-child(2n){border-left:1px solid var(--c-line)}
  #stage-results .field-value{white-space:normal;overflow-wrap:anywhere}
  #stage-results .answer-cols{grid-template-columns:1fr}
}
@media (max-width:640px){
  #stage-results .cert-header{flex-direction:column;gap:14px}
  #stage-results .cert-title-block{text-align:left}
  #stage-results .task-mini-grid{grid-template-columns:1fr}
  #stage-results .cc-head,#stage-results .cc-row{grid-template-columns:1fr 1fr}
  #stage-results .cc-name{grid-column:1/-1;padding-bottom:2px}
  #stage-results .cc-cell:first-of-type{border-left:none}
  #stage-results .cc-head-name{grid-column:1/-1}
  #stage-results .cc-head-task:first-of-type{border-left:none}
  #stage-results .section-heading,#stage-results .cc-legend,#stage-results .band-desc,
  #stage-results .review-cta{margin-left:18px;margin-right:18px}
  #stage-results .cc-grid,#stage-results .ins-grid,#stage-results .answer-section{padding-left:18px;padding-right:18px}
  #stage-results .cert-header,#stage-results .band-side,#stage-results .cert-footer{padding-left:20px;padding-right:20px}
  #stage-results .band-card{padding-left:20px;padding-right:20px}
  #stage-results .student-row > div:first-child{padding-left:20px!important}
  #stage-results .band-num{font-size:58px}
  #stage-results .cert-title-main{font-size:20px}
  #stage-results .field-value{font-size:13.5px}
  #stage-results .topbar{height:auto;min-height:56px;flex-wrap:wrap;gap:10px;padding:10px 16px}
}

/* ── DARK MODE ────────────────────────────────────────────────
   The chamber behind the document is already night; the document itself
   becomes warm ink on charcoal rather than a white slab burning a hole in
   it. Only the tokens move — every rule above is written against them, so
   the layout, the tier chrome and the navy score panel are untouched.     */
body.cosmos-cert #stage-results .cert{
  --c-paper:#1c1815;--c-paper-2:#241e19;--c-paper-3:#221c18;--c-paper-4:#1e1915;
  --c-ink:#f3ede5;--c-ink-2:#cfc4b6;--c-ink-3:#9d9081;
  --c-line:rgba(255,255,255,.10);--c-line-2:rgba(255,255,255,.17);--c-track:rgba(255,255,255,.09);
  --cv-strong:#5fd48c;--cv-mid:#e0b877;--cv-low:#9db0c6;--cv-blank:#9d9081;
  background:var(--c-paper);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 2px 8px rgba(0,0,0,.40),0 30px 70px -22px rgba(0,0,0,.75)}
/* An earlier dark pass painted the certificate's panels as chamber glass, and
   those rules carry a body class, so they outrank the untinted ones above.
   They are put back to the document here rather than edited in place. */
body.cosmos-cert #stage-results .score-section{
  background:linear-gradient(150deg,var(--hero-a),var(--hero-b) 52%,var(--hero-c));
  border-top:none;border-bottom:none}
body.cosmos-cert #stage-results .band-card{
  background:none;border:none;border-right:1px solid rgba(255,255,255,.15);box-shadow:none}
body.cosmos-cert #stage-results .cert-footer{
  background:linear-gradient(180deg,var(--c-paper-3),var(--c-paper-4));
  border-top:1px solid var(--c-line)}
body.cosmos-cert #stage-results .student-row{
  background:linear-gradient(180deg,var(--c-paper),var(--c-paper-3))}
body.cosmos-cert #stage-results .cert .answer-table td{border-bottom:1px solid var(--c-line)}
body.cosmos-cert #stage-results .cert .answer-table th{border-bottom:1px solid var(--c-line-2)}
body.cosmos-cert #stage-results .cert .answer-table tr.alt td{background:var(--c-paper-3)}
body.cosmos-cert #stage-results .cert .answer-table td.td-user .empty{color:var(--c-ink-3)}
body.cosmos-cert #stage-results .cert .answer-table td.td-correct .dash{color:var(--c-line-2)}
body.cosmos-cert #stage-results .cert .q-bubble.correct{background:rgba(95,212,140,.16);border-color:rgba(95,212,140,.26);color:#7ee0a4}
body.cosmos-cert #stage-results .cert .q-bubble.wrong{background:rgba(224,184,119,.16);border-color:rgba(224,184,119,.26);color:#e8c68d}
body.cosmos-cert #stage-results .cert .cause-tag{background:rgba(95,212,140,.14);color:#7ee0a4}
body.cosmos-cert #stage-results .cert-logo .logo-mark{box-shadow:0 5px 14px -6px rgba(0,0,0,.8)}
body.cosmos-cert #stage-results .review-cta{border-color:rgba(160,196,246,.20);
  background:linear-gradient(180deg,rgba(160,196,246,.06),rgba(160,196,246,.10))}
body.cosmos-cert #stage-results .cert{--acc-ink:#9dc2f0}
body.cosmos-cert #stage-results .cc-tag.best{color:#7ee0a4;background:rgba(95,212,140,.14)}
body.cosmos-cert #stage-results .cc-tag.focus{color:#e8c68d;background:rgba(224,184,119,.14)}
body.cosmos-cert #stage-results .cert[data-tier="high"]{--acc-ink:#e2c48a}
body.cosmos-cert #stage-results .cert[data-tier="mid"]{--acc-ink:#dcb87f}

/* ── SEPIA ── the document warms to the same paper the reader is on */
body.theme-sepia #stage-results .cert{
  --c-paper:#fffdf6;--c-paper-2:#f6eedb;--c-paper-3:#f9f2e2;--c-paper-4:#f3ead6;
  --c-ink:#31251a;--c-ink-2:#5c4c38;--c-ink-3:#8b7a62;
  --c-line:rgba(49,37,26,.12);--c-line-2:rgba(49,37,26,.20);--c-track:rgba(49,37,26,.09);
  background:var(--c-paper);border-color:#e0d3ba}

/* ── The printable report ─────────────────────────────────────
   Paper is the second product, and the screen certificate is never what gets
   printed: buildPrintReport() typesets a two-page ink version in #print-report
   (page 1 the Test Report Form, page 2 the Schedule of Answers) and this block
   makes sure nothing else reaches the sheet — no dark panel, no chamber, no
   overlay — whatever theme the screen happened to be in.                     */
#print-report{display:none}
@media print{
  @page{size:A4;margin:14mm 15mm 12mm}
  html,body{background:#fff!important}
  body::before,body::after{display:none!important}
  #cdi-webgl,#cdi-stars-host,.warning-overlay,.toast,.no-print{display:none!important}
  .stage,#stage-results,#stage-reading,#stage-registration,#stage-reading-intro,#stage-completion{display:none!important}
  #vocab-print{display:none!important}
  #print-report{display:block!important;position:static!important;background:#fff!important;box-shadow:none!important;color:#151310}
  #print-report *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;
    box-shadow:none!important;text-shadow:none!important;filter:none!important;animation:none!important;transition:none!important}
  #print-report .print-page{break-after:page;page-break-after:always;background:#fff!important}
  #print-report .print-page:last-child{break-after:auto;page-break-after:auto}
  #print-report .pr-id,#print-report .pr-score,#print-report .pr-task,#print-report .pr-desc,
  #print-report .pr-notes,#print-report .pr-cause,#print-report table.pr-crit tr{break-inside:avoid;page-break-inside:avoid}
  #print-report table.pr-crit thead,#print-report table.pr-sched thead{display:table-header-group}
  #print-report a{color:inherit!important;text-decoration:none!important}
}
/* Off-screen measuring pass: buildPrintReport() lays the pages out at true A4
   content width, measures them, and tightens the schedule until each fits its
   sheet — so the report is two pages for any real attempt. */
#print-report.pr-measuring{display:block!important;position:fixed!important;left:-20000px!important;top:0!important;
  width:180mm!important;visibility:hidden!important;pointer-events:none!important;z-index:-1!important;background:#fff!important}
#print-report.pr-measuring .print-page{min-height:0!important;height:auto!important;break-after:auto!important}
#print-report.pr-measuring .pr-notes-lines{min-height:22mm!important}



/* --- ANSWER FEEDBACK CHIP — ported from the Listening engine --------------
   The badge states the verdict; the field beside it is green because it holds
   the CORRECT answer. A wrong answer therefore reads as a crimson badge next
   to a green field, not as a red block. */
.feedback-pill{
  display:none; margin-left:10px; padding:0; border-radius:999px;
  border:1px solid transparent; background:transparent;
  font-size:11px; font-weight:700; letter-spacing:.04em;
}
.feedback-pill.show{display:inline-flex; align-items:center}
.feedback-pill .fb-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  font-size:11px; font-weight:900; line-height:1; color:#fff; flex:0 0 auto;
}
.feedback-pill .fb-ok{background:var(--emerald)}
.feedback-pill .fb-no{background:var(--crimson)}
.feedback-pill .fb-ans{
  padding:0 10px 0 7px;
  font-size:13px; font-weight:700; letter-spacing:0;
  color:var(--emerald); white-space:nowrap;
}
.feedback-pill.correct{background:rgba(46,125,50,.10);border-color:rgba(46,125,50,.28)}
.feedback-pill.wrong{background:rgba(46,125,50,.08);border-color:rgba(46,125,50,.22)}

body.dark-mode .feedback-pill.correct,
body.dark-mode .feedback-pill.wrong{background:rgba(95,209,122,.12);border-color:rgba(95,209,122,.28)}
body.dark-mode .feedback-pill .fb-ans{color:#6fd992}
body.dark-mode .feedback-pill .fb-ok{background:#3fa85f}
body.dark-mode .feedback-pill .fb-no{background:#e1344f}

body.theme-sepia .feedback-pill.correct,
body.theme-sepia .feedback-pill.wrong{background:rgba(31,122,67,.10);border-color:rgba(31,122,67,.26)}
body.theme-sepia .feedback-pill .fb-ans{color:#1f7a43}
body.theme-sepia .feedback-pill .fb-ok{background:#1f7a43}
body.theme-sepia .feedback-pill .fb-no{background:#b03521}


/* --- submit confirmation: armed state + the toast ------------------------
   The ✓ button previously set inline background/colour, which no theme layer
   could reach. It now carries .sub-armed, and the toast picks up the chamber
   glass so the warning reads as part of the same system. */
#sub-btn.sub-armed{
  background:linear-gradient(180deg,#f4425f,#e11d3c) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 0 0 4px rgba(225,29,60,.18), 0 8px 20px -10px rgba(225,29,60,.65);
  animation:subPulse 1.1s ease-in-out infinite;
}
@keyframes subPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(225,29,60,.18), 0 8px 20px -10px rgba(225,29,60,.65)}
  50%    {box-shadow:0 0 0 7px rgba(225,29,60,.10), 0 8px 20px -10px rgba(225,29,60,.45)}
}
.toast{
  padding:12px 20px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(24,38,66,.94),rgba(10,18,34,.96));
  border:1px solid rgba(255,255,255,.12);
  color:#eef3fb;
  font-size:13px; font-weight:600; letter-spacing:.01em;
  box-shadow:0 2px 6px rgba(0,0,0,.35), 0 22px 48px -20px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  backdrop-filter:blur(18px) saturate(1.2);
}
.toast.warn{border-color:rgba(225,29,60,.45);box-shadow:0 2px 6px rgba(0,0,0,.35),0 0 0 1px rgba(225,29,60,.18),0 22px 48px -20px rgba(0,0,0,.7)}
.toast.success{border-color:rgba(95,209,122,.45)}
.toast.error{border-color:rgba(225,29,60,.6)}
body.theme-sepia .toast{background:linear-gradient(180deg,#3a2c1a,#2b2013);border-color:rgba(255,255,255,.14);color:#f5efe4}

/* ======
   DARK MODE + SEPIA — the exam screen        [PORTED VERBATIM: Listening]
   ----------------------------------------------------------------------------
   The Inspera-fidelity work hard-codes literal colours (#fff, #000, rgb(241,
   242,236)...) which a variable flip cannot reach. This is Listening's matching
   layer, retargeted onto Reading's element names:
     #stage-listening -> #stage-reading     #listening-area -> .exam-main
     .listening-content -> .passage-text    .ms-option -> .multi-opts .option
     .drag-chip -> .word-tile               .drag-drop -> .drop-zone
   Placed last so it wins over Reading's own dark rules at equal specificity. ====*/
/* ======
   DARK MODE — the exam screen
   ----------------------------------------------------------------------------
   The Inspera-fidelity work hard-codes literal colours (#fff, #000,
   rgb(241,242,236) ...) which a variable flip cannot reach. This is the
   matching dark layer for those literals. Light mode is untouched: every rule
   below is scoped under body.dark-mode. ====*/
body.dark-mode{
  --ex-ground:#121417;
  --ex-panel:#1c1f24;
  --ex-panel-2:#23272d;
  --ex-line:#3a4048;
  --ex-line-2:#4a525c;
  --ex-ink:#e8ecf1;
  --ex-ink-2:#c3cad3;
  --ex-ink-3:#95a0ac;
  --ex-focus:#5a9de0;
}

/* --- ground + rubric card ------------------------------------------------ */
body.dark-mode #stage-reading{background:var(--ex-ground)}
body.dark-mode .exam-main{background:var(--ex-ground)}
body.dark-mode #pbar-inner{
  background:var(--ex-panel);
  border:1px solid var(--ex-line);
}
body.dark-mode #pbar-title{color:var(--ex-ink)}
body.dark-mode #pbar-desc{color:var(--ex-ink-2)}

/* --- question body ------------------------------------------------------- */
body.dark-mode .section-head .num{color:var(--ex-ink)}
body.dark-mode .section-head .instruction{color:var(--ex-ink-2)}
body.dark-mode .section-head .instruction em{color:var(--ex-ink)}
body.dark-mode .gap-line{color:var(--ex-ink-2)}
body.dark-mode .subhead{color:var(--ex-ink)}

/* --- gap inputs ---------------------------------------------------------- */
body.dark-mode .gap-input{
  background:var(--ex-panel-2);
  border:1px solid var(--ex-line-2);
  color:var(--ex-ink);
}
body.dark-mode .gap-input::placeholder{color:var(--ex-ink);opacity:1}
body.dark-mode .gap-input:focus{
  border-color:var(--ex-focus);
  box-shadow:var(--ex-focus) 0 0 0 1px;
}

/* --- multiple choice ----------------------------------------------------- */
body.dark-mode .option{color:var(--ex-ink-2)}
body.dark-mode .option .opt-letter{
  background:var(--ex-panel-2);
  border:1px solid var(--ex-line-2);
  color:var(--ex-ink);
}
body.dark-mode .multi-opts .option{color:var(--ex-ink-2)}
body.dark-mode .multi-opts .option.selected{background:#1d3a63}

/* --- drag & drop --------------------------------------------------------- */
body.dark-mode .word-tile{
  background:var(--ex-panel-2);
  border:1px solid var(--ex-line-2);
  color:var(--ex-ink);
}
body.dark-mode .word-tile:hover{border-color:var(--ex-line-2)}
body.dark-mode .drop-zone{border:1px dashed var(--ex-line-2)}
body.dark-mode .drop-zone .word-tile-id{color:var(--ex-ink-3)}

/* --- footer -------------------------------------------------------------- */
body.dark-mode #bnav{background:var(--ex-panel)}
body.dark-mode .bnav-section{background:var(--ex-panel)}
body.dark-mode .bnav-plabel,
body.dark-mode .bnav-plabel2{color:var(--ex-ink)}
body.dark-mode .bnav-pscore{color:var(--ex-ink-3)}
body.dark-mode .qpill{color:var(--ex-ink-2)}
body.dark-mode .qpill.current{background:var(--ex-panel-2);border-color:var(--ex-focus)}
body.dark-mode .qpill-wrap::before,
body.dark-mode .bnav-part.cur .bnav-plabel::before{background:var(--ex-line)}
body.dark-mode #sub-btn{background:var(--ex-panel-2);color:var(--ex-ink-2)}

/* --- audio gate ---------------------------------------------------------- */
body.dark-mode #ag-play-btn{background:var(--ex-panel-2)}

/* the question body is flat in the real exam — no panel edge */
body.dark-mode .q-card{background:transparent;border-color:var(--ex-line)}
body.dark-mode .passage-text{background:transparent}


/* ======
   SEPIA — same root cause as dark mode.
   It is one click away in the same Options menu, so it needs the same layer for
   the hard-coded Inspera literals, in a warm palette. ====*/
body.theme-sepia{
  --sp-ground:#f5f0e8; --sp-panel:#ece3d3; --sp-panel-2:#fffdf8;
  --sp-line:#d9cbb0; --sp-line-2:#b9a685;
  --sp-ink:#3a2c1a; --sp-ink-2:#5a4632; --sp-ink-3:#8d7a5f;
}
body.theme-sepia #stage-reading,
body.theme-sepia .exam-main{background:var(--sp-ground)}
body.theme-sepia .q-card,
body.theme-sepia .passage-text{background:transparent}
body.theme-sepia #pbar-inner{background:var(--sp-panel);border:1px solid var(--sp-line)}
body.theme-sepia #pbar-title{color:var(--sp-ink)}
body.theme-sepia #pbar-desc{color:var(--sp-ink-2)}
body.theme-sepia .section-head .num,
body.theme-sepia .subhead,
body.theme-sepia .section-head .instruction em{color:var(--sp-ink)}
body.theme-sepia .section-head .instruction,
body.theme-sepia .gap-line{color:var(--sp-ink-2)}
body.theme-sepia .gap-input{background:var(--sp-panel-2);border:1px solid var(--sp-line-2);color:var(--sp-ink)}
body.theme-sepia .gap-input::placeholder{color:var(--sp-ink);opacity:1}
body.theme-sepia .option{color:var(--sp-ink-2)}
body.theme-sepia .option .opt-letter{background:var(--sp-panel-2);border:1px solid var(--sp-line-2);color:var(--sp-ink)}
body.theme-sepia .word-tile{background:var(--sp-panel-2);border:1px solid var(--sp-line-2);color:var(--sp-ink)}
body.theme-sepia .drop-zone{border:1px dashed var(--sp-line-2)}
body.theme-sepia #bnav,
body.theme-sepia .bnav-section{background:var(--sp-panel-2)}
body.theme-sepia .bnav-plabel,
body.theme-sepia .bnav-plabel2,
body.theme-sepia .qpill{color:var(--sp-ink)}
body.theme-sepia .bnav-pscore{color:var(--sp-ink-3)}
body.theme-sepia .qpill.current{background:var(--sp-panel-2)}
body.theme-sepia .qpill-wrap::before,
body.theme-sepia .bnav-part.cur .bnav-plabel::before{background:var(--sp-line)}
body.theme-sepia #sub-btn{background:var(--sp-panel);color:var(--sp-ink-2)}

/* --- the brown card override predates the chamber skin ------------------- */
body.dark-mode .start-card,
body.dark-mode .trans-card,
body.dark-mode .complete-card{background:var(--ch-glass)}



/* --- Reading-only exam surfaces: same dark/sepia treatment ---------------- */
body.dark-mode #passage-pane,
body.dark-mode #questions-pane{background:var(--ex-ground);color:var(--ex-ink-2)}
body.dark-mode .passage-title,body.dark-mode .passage-title-text{color:var(--ex-ink)}
body.dark-mode .passage-label{color:var(--ex-ink-3)}
body.dark-mode .split-divider,body.dark-mode #resizer{background:var(--ex-line)}
body.dark-mode .heading-tile,body.dark-mode .heading-bank-list,
body.dark-mode .word-bank-list,body.dark-mode .option-list-box{
  background:var(--ex-panel);border-color:var(--ex-line);color:var(--ex-ink-2)}
body.dark-mode .slot-text,body.dark-mode .para-heading-slot{
  background:var(--ex-panel-2);border-color:var(--ex-line-2);color:var(--ex-ink)}
body.dark-mode .mg-cell,body.dark-mode .mg-label,body.dark-mode .mg-q,
body.dark-mode .rt-table td,body.dark-mode .rt-table th{
  border-color:var(--ex-line);color:var(--ex-ink-2)}
body.dark-mode .prose-summary,body.dark-mode .prose-gap{color:var(--ex-ink-2)}
body.dark-mode .flow-box{background:var(--ex-panel);border-color:var(--ex-line);color:var(--ex-ink-2)}
/* hover states need a dark counterpart or they flash near-white */
body.dark-mode .option:hover,body.dark-mode .multi-opts .option:hover,
body.dark-mode .heading-tile:hover,body.dark-mode .word-tile:hover{
  background:var(--ex-panel-2)}
body.theme-sepia #passage-pane,body.theme-sepia #questions-pane{background:var(--sp-ground);color:var(--sp-ink-2)}
body.theme-sepia .passage-title,body.theme-sepia .passage-title-text{color:var(--sp-ink)}
body.theme-sepia .heading-tile,body.theme-sepia .heading-bank-list,
body.theme-sepia .word-bank-list,body.theme-sepia .option-list-box{
  background:var(--sp-panel);border-color:var(--sp-line);color:var(--sp-ink-2)}
body.theme-sepia .slot-text,body.theme-sepia .para-heading-slot{
  background:var(--sp-panel-2);border-color:var(--sp-line-2);color:var(--sp-ink)}
body.theme-sepia .split-divider,body.theme-sepia #resizer{background:var(--sp-line)}
body.theme-sepia .option:hover,body.theme-sepia .multi-opts .option:hover,
body.theme-sepia .heading-tile:hover,body.theme-sepia .word-tile:hover{background:var(--sp-panel)}



/* ======
   READING-ONLY UI — brought onto the Listening design language
   ----------------------------------------------------------------------------
   Listening has no notes drawer, note modal or vocab button, so there is no
   markup to transplant: what is shared is the vocabulary — chamber glass for
   floating surfaces, and the crimson / glass / gold-hairline pill set for
   actions. Every literal here carries a dark-mode and a theme-sepia counterpart. ====*/

/* --- the pill set: crimson (primary) / glass (ghost) / gold hairline ------- */
:is(.ca-btn,.nm-btn,.rsm-btn,.wc-btn){
  border-radius:999px; border:1px solid transparent; font-weight:700;
  letter-spacing:.01em; cursor:pointer;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease;
}
:is(.ca-btn,.nm-btn,.rsm-btn).primary,.wc-btn{
  background:linear-gradient(180deg,#f4425f,#e11d3c); color:#fff; border-color:transparent;
  box-shadow:0 8px 22px -10px rgba(225,29,60,.7),inset 0 1px 0 rgba(255,255,255,.2);
}
:is(.ca-btn,.nm-btn,.rsm-btn).primary:hover,.wc-btn:hover{background:linear-gradient(180deg,#ff5570,#f4425f)}
:is(.ca-btn,.nm-btn,.rsm-btn).ghost{
  background:rgba(15,23,42,.05); border-color:rgba(15,23,42,.18); color:#243b58;
}
:is(.ca-btn,.nm-btn,.rsm-btn).ghost:hover{background:rgba(15,23,42,.10)}
.ca-btn.gold,.nm-btn.gold{background:transparent;border-color:#c19a4b;color:#8a6a2b}
.ca-btn.gold:hover,.nm-btn.gold:hover{background:rgba(193,154,75,.12)}

/* Header controls are deliberately NOT restyled here. Reading's exam header is
   dark navy by design (Inspera fidelity), and its own .hdr-icon-btn rules
   already render the buttons light-on-dark. The pill treatment written here
   earlier assumed a light header and painted dark-blue text on a near-white
   fill — invisible against the real header. Reverted. */
/* --- notes drawer + note modal: floating surfaces read as glass ----------- */
/* Measured: #annotations-sidebar is 300 x 900 at x=1140 on a flat #e8e8e8.
   The shadow must not be painted while the drawer is parked off-screen — a
   52px blur on a fixed element bleeds a grey gradient down the whole right
   edge of the exam, which the official player does not have. */
.notes-drawer{
  background:#e8e8e8;
  border-left:1px solid #d5d5d5;
  box-shadow:none;
}
.notes-drawer.open{box-shadow:-18px 0 52px rgba(20,35,65,.10)}
.nd-head,.nd-title{color:#16233a}
.nd-item{border-color:#e6ebf3}
.nd-quote{color:#5c6b82;border-left:2px solid #d6deea}
.nd-empty,.nd-count{color:#7c8aa0}
.note-modal > div,.rsm-card{
  background:linear-gradient(180deg,#ffffff,#f7f9fc);
  border:1px solid #e2e8f1; border-radius:16px;
  box-shadow:0 30px 70px -28px rgba(15,25,45,.45);
}
.nm-title,.rsm-title{color:#16233a}
.nm-hint,.rsm-sub,.rsm-meta{color:#7c8aa0}
#note-textarea{background:#fff;border:1.5px solid #dbe3ee;color:#16233a;border-radius:10px}
#note-textarea:focus{border-color:#244b8e;outline:none;box-shadow:0 0 0 4px rgba(36,75,142,.14)}

/* --- DARK ----------------------------------------------------------------- */
body.dark-mode :is(.ca-btn,.nm-btn,.rsm-btn).ghost{
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.20); color:#e8ecf1;
}
body.dark-mode :is(.ca-btn,.nm-btn,.rsm-btn).ghost:hover{background:rgba(255,255,255,.13)}
body.dark-mode .ca-btn.gold,body.dark-mode .nm-btn.gold{border-color:#d9b063;color:#d9b063}
body.dark-mode .ca-btn.gold:hover,body.dark-mode .nm-btn.gold:hover{background:rgba(217,176,99,.14)}


body.dark-mode .notes-drawer{
  background:linear-gradient(180deg,#1c1f24,#16191d);
  border-left:1px solid #3a4048; box-shadow:none;
}
body.dark-mode .notes-drawer.open{box-shadow:-18px 0 52px rgba(0,0,0,.55)}
body.dark-mode :is(.nd-head,.nd-title,.nm-title,.rsm-title){color:#e8ecf1}
body.dark-mode .nd-item{border-color:#3a4048}
body.dark-mode .nd-quote{color:#95a0ac;border-left-color:#4a525c}
body.dark-mode :is(.nd-empty,.nd-count,.nm-hint,.rsm-sub,.rsm-meta){color:#95a0ac}
body.dark-mode :is(.note-modal > div,.rsm-card){
  background:linear-gradient(180deg,#1c1f24,#16191d); border-color:#3a4048;
}
body.dark-mode #note-textarea{background:#23272d;border-color:#4a525c;color:#e8ecf1}
body.dark-mode #note-textarea::placeholder{color:#95a0ac}
body.dark-mode #note-textarea:focus{border-color:#5a9de0;box-shadow:0 0 0 4px rgba(90,157,224,.20)}

/* --- SEPIA ---------------------------------------------------------------- */
body.theme-sepia :is(.ca-btn,.nm-btn,.rsm-btn).ghost{
  background:#ece3d3; border-color:#d9cbb0; color:#3a2c1a;
}
body.theme-sepia :is(.ca-btn,.nm-btn,.rsm-btn).ghost:hover{background:#e3d8c4}


body.theme-sepia .notes-drawer{
  background:linear-gradient(180deg,#fffdf8,#f5f0e8); border-left:1px solid #d9cbb0;
}
body.theme-sepia :is(.nd-head,.nd-title,.nm-title,.rsm-title){color:#3a2c1a}
body.theme-sepia .nd-item{border-color:#d9cbb0}
body.theme-sepia .nd-quote{color:#5a4632;border-left-color:#b9a685}
body.theme-sepia :is(.nd-empty,.nd-count,.nm-hint,.rsm-sub,.rsm-meta){color:#8d7a5f}
body.theme-sepia :is(.note-modal > div,.rsm-card){
  background:linear-gradient(180deg,#fffdf8,#f5f0e8); border-color:#d9cbb0;
}
body.theme-sepia #note-textarea{background:#fffdf8;border-color:#b9a685;color:#3a2c1a}


/* --- .option: the base fill is a hard-coded #fff with no themed counterpart,
   so in dark mode the answer rows stayed white slabs and :hover flashed
   #e8e8e8 — a near-white bar on a black page. Both need a themed pair. ----- */
/* Literal colours, not var() references. NOTE: do not write the token family
   names with a star-slash between them in a comment here — that sequence ends
   the comment early, which is exactly what silently killed these rules once:
   everything after it became stray CSS and the next rules were swallowed as
   the body of a bogus selector. Values match the dark/sepia token sets. */
body.dark-mode .option{background:#1c1f24 !important;color:#c3cad3;border-color:#3a4048}
body.dark-mode .option:hover{background:#23272d !important}
body.dark-mode .option .opt-letter{background:#23272d;color:#e8ecf1;border-color:#4a525c}
body.theme-sepia .option{background:#fffdf8 !important;color:#5a4632;border-color:#d9cbb0}
body.theme-sepia .option:hover{background:#ece3d3 !important}
body.theme-sepia .option .opt-letter{background:#ece3d3;color:#3a2c1a;border-color:#b9a685}
/* sepia tokens were only defined for the exam block; declare them globally so
   any rule that still uses var(--sp-*) resolves instead of silently dropping. */
body.theme-sepia{--sp-ground:#f5f0e8;--sp-panel:#ece3d3;--sp-panel-2:#fffdf8;
  --sp-line:#d9cbb0;--sp-line-2:#b9a685;--sp-ink:#3a2c1a;--sp-ink-2:#5a4632;--sp-ink-3:#8d7a5f}



/* ----------------------------------------------------------------------------
   DARK + SEPIA for the Inspera-fidelity literals introduced by the exam-screen
   rebuild. Every colour in the header, panes, question body, footer and the
   drag-and-drop widgets above is a measured literal (#fff / #000 / #333 /
   #535353 / #E4E4E4 ...), which no variable flip can reach, so each one needs
   an explicit counterpart here. Scoped one class deeper than the light rule it
   overrides so specificity, not source order, decides.
   -------------------------------------------------------------------------- */
body.dark-mode #hdr{background:var(--ex-panel);color:var(--ex-ink)}
body.dark-mode #hdr::after{background:var(--ex-line)}
body.dark-mode #stage-reading.ex-time-low #hdr{background:#2a2620}
body.dark-mode #hdr .ex-name,body.dark-mode #hdr .timer{color:var(--ex-ink)}
body.dark-mode #hdr .ex-icbtn{color:var(--ex-ink-2)}
body.dark-mode #hdr .ex-icbtn:hover{background:rgba(255,255,255,.08)}
body.dark-mode #stage-reading,body.dark-mode .exam-main,
body.dark-mode .split-pane,body.dark-mode #questions-pane{background:var(--ex-ground);color:var(--ex-ink-2)}
body.dark-mode #pbar{color:var(--ex-ink)}
body.dark-mode #pbar-title{color:var(--ex-ink)}
body.dark-mode #passage-pane h2.passage-title{color:var(--ex-ink)}
body.dark-mode #passage-pane .passage-text p,
body.dark-mode #passage-pane .passage-text strong.para-letter{color:var(--ex-ink-2)}
body.dark-mode .split-divider{background:rgba(255,255,255,.45)}
body.dark-mode .section-head .num{color:var(--ex-ink)}
body.dark-mode .section-head .instruction,
body.dark-mode .section-head .instruction strong,
body.dark-mode .section-head .instruction em{color:var(--ex-ink-2)}
body.dark-mode .q-pill{color:var(--ex-ink)}
body.dark-mode .q-text{color:var(--ex-ink-2)}
body.dark-mode .option>span{color:var(--ex-ink-2)}
body.dark-mode .prose-summary,body.dark-mode .notes-list li,
body.dark-mode .note-title,body.dark-mode .gap-line{color:var(--ex-ink-2)}
body.dark-mode .note-title{color:var(--ex-ink)}
body.dark-mode .prose-gap .gap-input,body.dark-mode .word-drop{
  background:var(--ex-panel-2);border:1px solid var(--ex-line-2);color:var(--ex-ink)}
body.dark-mode .word-drop:not(.filled)::before{color:var(--ex-ink)}
body.dark-mode .prose-gap .gap-input:focus,body.dark-mode .prose-gap .gap-input.is-current,
body.dark-mode .word-drop.is-current{border:1px solid var(--ex-focus);box-shadow:0 0 0 1px var(--ex-focus)}
body.dark-mode .word-tile,body.dark-mode .heading-tile{
  background:var(--ex-panel-2);border:1px solid var(--ex-line-2);color:var(--ex-ink)}
body.dark-mode .word-tile-id{color:var(--ex-ink)}
body.dark-mode .heading-bank-label{color:var(--ex-ink)}
body.dark-mode .para-heading-slot{background:var(--ex-panel);border:1px dashed var(--ex-line-2);color:var(--ex-ink)}
body.dark-mode .para-heading-slot.is-current{border:2px dashed var(--ex-focus)}
body.dark-mode .para-heading-slot .gapOrderNumber,
body.dark-mode .para-heading-slot .slot-text{color:var(--ex-ink)}
body.dark-mode .option-list-box{background:var(--ex-panel);border-color:var(--ex-line)}
body.dark-mode .option-list-box .olb-title,body.dark-mode .option-list-box li,
body.dark-mode .option-list-box li .pl-letter{color:var(--ex-ink)}
body.dark-mode .match-grid thead th{background:var(--ex-panel-2);color:var(--ex-ink)}
body.dark-mode .match-grid th,body.dark-mode .match-grid td{border-color:var(--ex-line)}
body.dark-mode .keyboard-help-button{color:#9CC3E0}
body.dark-mode .keyboard-help-button:hover{background:var(--ex-panel-2)}
body.dark-mode #bnav,body.dark-mode .bnav-part{background:var(--ex-panel);border-top-color:var(--ex-panel)}
body.dark-mode .bnav-plabel{color:var(--ex-ink)}
body.dark-mode .bnav-part.other .bnav-plabel:hover{background:var(--ex-panel-2);color:var(--ex-ink)}
body.dark-mode .bnav-pscore{color:var(--ex-ink-3)}
body.dark-mode .hl-popup{background:var(--ex-panel-2);border-color:var(--ex-line-2)}
body.dark-mode .hl-popup::after{border-bottom-color:var(--ex-panel-2)}
body.dark-mode .hl-popup::before{border-bottom-color:var(--ex-line-2)}
body.dark-mode .hl-popup .tool-btn,body.dark-mode .hl-popup .tool-btn span{color:var(--ex-ink-2)}
body.dark-mode .hl-popup .tool-btn:hover{background:var(--ex-line)}

body.theme-sepia #hdr{background:var(--sp-panel-2);color:var(--sp-ink)}
body.theme-sepia #hdr::after{background:var(--sp-line)}
body.theme-sepia #hdr .ex-name,body.theme-sepia #hdr .timer{color:var(--sp-ink)}
body.theme-sepia #hdr .ex-icbtn{color:var(--sp-ink-2)}
body.theme-sepia #stage-reading,body.theme-sepia .exam-main,
body.theme-sepia .split-pane,body.theme-sepia #questions-pane{background:var(--sp-ground);color:var(--sp-ink-2)}
body.theme-sepia #pbar,body.theme-sepia #pbar-title{color:var(--sp-ink)}
body.theme-sepia #passage-pane h2.passage-title{color:var(--sp-ink)}
body.theme-sepia #passage-pane .passage-text p,
body.theme-sepia #passage-pane .passage-text strong.para-letter{color:var(--sp-ink-2)}
body.theme-sepia .split-divider{background:rgba(58,44,26,.5)}
body.theme-sepia .section-head .num{color:var(--sp-ink)}
body.theme-sepia .section-head .instruction,
body.theme-sepia .section-head .instruction strong,
body.theme-sepia .section-head .instruction em{color:var(--sp-ink-2)}
body.theme-sepia .q-pill,body.theme-sepia .note-title{color:var(--sp-ink)}
body.theme-sepia .q-text,body.theme-sepia .option>span,
body.theme-sepia .prose-summary,body.theme-sepia .notes-list li,
body.theme-sepia .gap-line{color:var(--sp-ink-2)}
body.theme-sepia .prose-gap .gap-input,body.theme-sepia .word-drop{
  background:var(--sp-panel-2);border:1px solid var(--sp-line-2);color:var(--sp-ink)}
body.theme-sepia .word-drop:not(.filled)::before{color:var(--sp-ink)}
body.theme-sepia .word-tile,body.theme-sepia .heading-tile{
  background:var(--sp-panel-2);border:1px solid var(--sp-line-2);color:var(--sp-ink)}
body.theme-sepia .word-tile-id,body.theme-sepia .heading-bank-label{color:var(--sp-ink)}
body.theme-sepia .para-heading-slot{background:var(--sp-panel-2);border:1px dashed var(--sp-line-2);color:var(--sp-ink)}
body.theme-sepia .para-heading-slot .gapOrderNumber,
body.theme-sepia .para-heading-slot .slot-text{color:var(--sp-ink)}
body.theme-sepia .option-list-box{background:var(--sp-panel);border-color:var(--sp-line)}
body.theme-sepia .option-list-box .olb-title,body.theme-sepia .option-list-box li,
body.theme-sepia .option-list-box li .pl-letter{color:var(--sp-ink)}
body.theme-sepia .match-grid thead th{background:var(--sp-panel);color:var(--sp-ink)}
body.theme-sepia .match-grid th,body.theme-sepia .match-grid td{border-color:var(--sp-line)}
body.theme-sepia #bnav,body.theme-sepia .bnav-part{background:var(--sp-panel-2);border-top-color:var(--sp-panel-2)}
body.theme-sepia .bnav-plabel,body.theme-sepia .qpill{color:var(--sp-ink)}
body.theme-sepia .bnav-part.other .bnav-plabel:hover{background:var(--sp-panel);color:var(--sp-ink)}
body.theme-sepia .bnav-pscore{color:var(--sp-ink-3)}
body.theme-sepia .hl-popup{background:var(--sp-panel-2);border-color:var(--sp-line-2)}
body.theme-sepia .hl-popup::after{border-bottom-color:var(--sp-panel-2)}
body.theme-sepia .hl-popup::before{border-bottom-color:var(--sp-line-2)}
body.theme-sepia .hl-popup .tool-btn,body.theme-sepia .hl-popup .tool-btn span{color:var(--sp-ink-2)}
body.theme-sepia #sub-btn{background:var(--sp-panel);color:var(--sp-ink-2)}

/* ======
   OPTIONS / MESSAGES — the official full-screen pages
   ----------------------------------------------------------------------------
   Measured on the live player: an 80px top bar with a 27.2px centred "Options"
   title and a 66.7px close button at x=1360; a 732px content area at x=354 with
   16px padding, so the card column is 700px wide at x=370; rows are 698 x 75.8
   with padding 26.4px 44px 26.4px 35.2px at 17.6px Arial. The first row is the
   red (#e31837) "Go to submission page"; Contrast and Text size open sub-pages.
   Ported from the shipped Writing build and re-scoped to #stage-reading. ====*/
#stage-reading .ex-sheet{
  position:fixed;inset:0;z-index:900;display:none;flex-direction:column;
  background:#fff;color:#000;font-family:Arial,sans-serif;overflow-y:auto}
#stage-reading .ex-sheet.is-open{display:flex}
#stage-reading .ex-sheet-top{position:relative;flex:0 0 80px;height:80px}
#stage-reading .ex-sheet-title{
  position:absolute;left:0;right:0;top:21px;margin:0;text-align:center;
  font:400 27.2px/32px Arial,sans-serif;color:#000}
#stage-reading .ex-sheet-close{
  position:absolute;right:13.3px;top:-3px;width:66.7px;height:66.7px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:0;color:#000;cursor:pointer}
#stage-reading .ex-sheet-back{
  position:absolute;left:-6px;top:6.5px;height:52px;display:none;align-items:center;gap:7.5px;
  padding:0 12px;background:none;border:0;color:#000;cursor:pointer;
  font:400 27.2px/32px Arial,sans-serif}
#stage-reading .ex-sheet.is-sub .ex-sheet-back{display:flex}
#stage-reading .ex-sheet-body{width:732px;margin:0 auto;padding:0 16px}
#stage-reading .ex-opt-page{display:none}
#stage-reading .ex-opt-page.is-on{display:block}
#stage-reading .ex-opt-page[data-page="contrast"],#stage-reading .ex-opt-page[data-page="text"]{padding-top:16px}
#stage-reading .ex-opt-page[data-page="contrast"] .ex-opt-item,#stage-reading .ex-opt-page[data-page="text"] .ex-opt-item{
  position:relative;height:auto;padding:26.4px 44px 26.4px 35.2px;line-height:19.7px}
#stage-reading .ex-opt-page[data-page="contrast"] .ex-opt-label,#stage-reading .ex-opt-page[data-page="text"] .ex-opt-label{top:-1.25px}
#stage-reading .ex-opt-group{
  width:700px;background:#fff;border:1px solid #C1C1C1;border-radius:5px;overflow:hidden}
#stage-reading .ex-opt-group+.ex-opt-group{margin-top:16px}
#stage-reading .ex-opt-group.is-red{border-color:#e31837}
#stage-reading .ex-opt-item{
  display:flex;align-items:center;width:100%;height:75.8px;
  padding:0 44px 0 35.2px;border:0;border-radius:0;
  background:#fff;color:#000;cursor:pointer;text-align:left;
  font:400 17.6px/23px Arial,sans-serif;transition:background-color .1s linear}
#stage-reading .ex-opt-item+.ex-opt-item{border-top:1px solid #C1C1C1}
#stage-reading .ex-opt-item:hover{background:#e8e8e8}
#stage-reading .ex-opt-item.is-red{background:#e31837;color:#fff}
#stage-reading .ex-opt-item.is-red:hover{background:#c2142e}
#stage-reading .ex-opt-ic{flex:0 0 48.2px;display:flex;align-items:center;justify-content:flex-start;padding-left:2.8px}
#stage-reading .ex-opt-ic.is-grey{color:#9b9b9b}
#stage-reading .ex-opt-ic.is-tick>svg{display:none}
#stage-reading .ex-opt-item.is-on .ex-opt-ic.is-tick>svg{display:block;margin:0 0 2.2px}
#stage-reading .ex-opt-label{flex:1 1 auto;min-width:0;position:relative;top:1.25px}
#stage-reading .ex-opt-chev{flex:0 0 auto;display:flex;align-items:center;margin:1.6px -8.85px 0 0}
#stage-reading .ex-opt-sw{position:absolute;right:26.5px;top:50%;transform:translateY(-50%);
  width:56px;height:37.5px;box-shadow:0 2px 5px rgba(0,0,0,.28)}
#stage-reading .ex-sheet-empty{flex:1}
body.dark-mode #stage-reading .ex-sheet,
body.dark-mode #stage-reading .ex-opt-group,
body.dark-mode #stage-reading .ex-opt-item{background:var(--ex-panel);color:var(--ex-ink)}
body.dark-mode #stage-reading .ex-sheet-title,
body.dark-mode #stage-reading .ex-sheet-close,
body.dark-mode #stage-reading .ex-sheet-back{color:var(--ex-ink)}
body.dark-mode #stage-reading .ex-opt-item:hover{background:var(--ex-panel-2)}
body.dark-mode #stage-reading .ex-opt-group{border-color:var(--ex-line)}
body.theme-sepia #stage-reading .ex-sheet,
body.theme-sepia #stage-reading .ex-opt-group,
body.theme-sepia #stage-reading .ex-opt-item{background:var(--sp-panel-2);color:var(--sp-ink)}
body.theme-sepia #stage-reading .ex-opt-item:hover{background:var(--sp-panel)}
body.theme-sepia #stage-reading .ex-opt-group{border-color:var(--sp-line)}

/* ======
   CDI V3 COSMIC SHELL — the CDI-branded wrapper that surrounds the live exam.
   [PORTED FROM: the Writing master. Same shell, Reading's content.]
   Owns #stage-registration, #stage-reading-intro, #stage-completion and the
   Three.js particle canvas. Nothing in here may leak into #stage-reading: the
   exam screen is 100% Arial and faithful to the Inspera measurements, and this
   block is the CDI half of that boundary (the reference spec is no longer in this folder).
   It is the LAST block in the stylesheet on purpose — the dark-mode and sepia
   rules further up still name .start-card / .trans-card / .complete-card, and
   the shell has to win against them. ====*/
:root{
  --ch-ink:#f4f7ff;--ch-ink-2:#b0bdd4;--ch-ink-3:#7e8da3;--ch-ink-4:#5f6c82;
  --ch-line:rgba(152,184,236,.13);--ch-line-2:rgba(152,184,236,.24);--ch-line-3:rgba(152,184,236,.34);
  --ch-red:#e11d3c;--ch-red-2:#ff4a66;--ch-blue:#8fb8ff;--ch-blue-2:#5b8de0;--ch-gold:#e0bb72;
  --ch-emerald:#63c8a0;
  --ch-display:'Bricolage Grotesque',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --ch-ui:'Be Vietnam Pro',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --ch-e:cubic-bezier(.16,.84,.24,1);
  --ch-glass:linear-gradient(168deg,rgba(27,41,70,.70),rgba(11,18,33,.85) 58%,rgba(7,12,22,.90));
  --ch-shadow:0 2px 8px rgba(0,0,0,.42),0 30px 70px -22px rgba(0,0,0,.72),0 90px 160px -60px rgba(18,48,108,.85);
}

/* ── stage shell ─────────────────────────────────────────────────────────── */
:is(#stage-registration,#stage-reading-intro,#stage-completion){
  font-family:var(--ch-ui);color:var(--ch-ink-2);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:
    transparent;
  --sans:var(--ch-ui);
  --ink:var(--ch-ink);--ink-soft:var(--ch-ink-2);--ink-mute:var(--ch-ink-3);
  --line:var(--ch-line);--line-2:var(--ch-line-2);--line-3:var(--ch-line-2);--paper:transparent;
  --pw-ink:var(--ch-ink);--pw-ink-2:var(--ch-ink-2);--pw-ink-3:var(--ch-ink-3);
  --pw-line:var(--ch-line);--pw-line-2:var(--ch-line-2);--pw-red:var(--ch-blue);--pw-red-2:var(--ch-blue);
  --pw-emerald:var(--ch-emerald);--primary:var(--ch-red);--primary-2:var(--ch-red-2);--pw-shadow:var(--ch-shadow);
}
/* fine grain, lifted off the flat gradient */
:is(#stage-registration,#stage-reading-intro,#stage-completion)::before{
  display:block;content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.42;mix-blend-mode:soft-light}
/* vignette — replaces the old decorative ring */
:is(#stage-registration,#stage-reading-intro,#stage-completion)::after{
  content:"";position:absolute;left:0;top:0;width:auto;height:auto;inset:0;z-index:0;pointer-events:none;
  border:0;border-radius:0;transform:none;box-shadow:none;
  background:radial-gradient(76% 60% at 50% 44%,transparent 38%,rgba(2,4,10,.30) 74%,rgba(1,2,6,.72) 100%)}
:is(#stage-registration,#stage-reading-intro,#stage-completion) > *{position:relative;z-index:2}

/* ── the glass card ──────────────────────────────────────────────────────── */
:is(#stage-registration,#stage-reading-intro,#stage-completion) :is(.start-card,.trans-card,.complete-card){
  position:relative;z-index:2;overflow:hidden;
  background:var(--ch-glass);
  border:1px solid var(--ch-line-2);
  border-radius:clamp(16px,1.6vw,24px);
  box-shadow:var(--ch-shadow);
  -webkit-backdrop-filter:blur(26px) saturate(1.35);backdrop-filter:blur(26px) saturate(1.35);
  animation:none}
/* edge light along the top of the glass */
:is(#stage-registration,#stage-reading-intro,#stage-completion) :is(.start-card,.trans-card,.complete-card)::before{
  content:"";display:block;position:absolute;left:0;right:0;top:0;height:1px;opacity:1;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 12%,rgba(255,255,255,.55) 34%,rgba(255,122,146,.75) 52%,rgba(224,187,114,.5) 70%,rgba(255,255,255,.12) 90%,transparent)}
/* soft interior bloom, top-left */
:is(#stage-registration,#stage-reading-intro,#stage-completion) :is(.start-card,.trans-card,.complete-card)::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 76% at 8% -6%,rgba(143,184,255,.10),transparent 58%),
             radial-gradient(90% 60% at 104% 108%,rgba(225,29,60,.07),transparent 62%)}

/* ── shared type ─────────────────────────────────────────────────────────── */
:is(#stage-registration,#stage-reading-intro,#stage-completion) :is(.start-title,.trans-title,.complete-title){
  font-family:var(--ch-display);font-weight:600;letter-spacing:-.024em;color:var(--ch-ink);
  font-optical-sizing:auto;text-wrap:balance}
:is(#stage-registration,#stage-reading-intro,#stage-completion) .ch-kicker{
  display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ch-ink-3)}
:is(#stage-registration,#stage-reading-intro,#stage-completion) .ch-dot{
  width:5px;height:5px;border-radius:50%;background:var(--ch-red-2);flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(225,29,60,.18),0 0 12px rgba(255,74,102,.7)}
:is(#stage-registration,#stage-reading-intro,#stage-completion) .ch-label{
  font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--ch-ink-3)}
:is(#stage-registration,#stage-reading-intro,#stage-completion) .ch-fineprint{
  font-size:11.5px;color:var(--ch-ink-4);text-align:center;margin-top:17px;letter-spacing:.01em}
:is(#stage-registration,#stage-reading-intro,#stage-completion) kbd{
  font-family:var(--ch-ui);font-size:10.5px;font-weight:700;color:var(--ch-ink-3);
  border:1px solid var(--ch-line-2);border-bottom-width:2px;border-radius:5px;padding:1px 5px;margin:0 1px}

/* ── buttons ─────────────────────────────────────────────────────────────── */
:is(#stage-registration,#stage-reading-intro,#stage-completion) .btn{
  font-family:var(--ch-ui);position:relative;overflow:hidden;isolation:isolate}
:is(#stage-registration,#stage-reading-intro,#stage-completion) .btn-primary{
  background:linear-gradient(180deg,#e02744,#b3122a);border:none;border-radius:13px;
  color:#fff;font-weight:700;letter-spacing:.006em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.26),
             0 1px 2px rgba(0,0,0,.4),0 14px 30px -20px rgba(225,29,60,.85);
  transition:transform .18s var(--ch-e),box-shadow .22s var(--ch-e),filter .18s,background .22s}
:is(#stage-registration,#stage-reading-intro,#stage-completion) .btn-primary::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .25s;
  background:linear-gradient(180deg,rgba(255,255,255,.20),transparent 62%)}
:is(#stage-registration,#stage-reading-intro,#stage-completion) .btn-primary:hover{
  transform:translateY(-2px);filter:none;background:linear-gradient(180deg,#f03150,#c4152f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(0,0,0,.24),
             0 2px 4px rgba(0,0,0,.38),0 20px 38px -20px rgba(225,29,60,.95)}
:is(#stage-registration,#stage-reading-intro,#stage-completion) .btn-primary:hover::after{opacity:1}
:is(#stage-registration,#stage-reading-intro,#stage-completion) .btn-primary:active{
  transform:translateY(0) scale(.994);filter:brightness(.93);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.34),0 1px 2px rgba(0,0,0,.3)}
:is(#stage-registration,#stage-reading-intro,#stage-completion) .btn-primary:focus-visible{
  outline:2px solid rgba(180,208,255,.9);outline-offset:3px}
/* Dormant = "not yet", never "danger". Neutral glass that ignites into the
   full red the instant the name is valid — the button itself is the reward. */
:is(#stage-registration,#stage-reading-intro,#stage-completion) .btn-primary:disabled,
:is(#stage-registration,#stage-reading-intro,#stage-completion) .btn-primary.is-dormant{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
  color:var(--ch-ink-3);
  box-shadow:inset 0 0 0 1px rgba(152,184,236,.20),inset 0 1px 0 rgba(255,255,255,.09);
  transform:none}
:is(#stage-registration,#stage-reading-intro,#stage-completion) .btn-primary.is-dormant:hover{
  color:var(--ch-ink-2);background:linear-gradient(180deg,rgba(255,255,255,.115),rgba(255,255,255,.045));
  box-shadow:inset 0 0 0 1px rgba(152,184,236,.32),inset 0 1px 0 rgba(255,255,255,.12);transform:none}
/* the ignition itself */
@keyframes chIgnite{
  0%{box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.26),
     0 1px 2px rgba(0,0,0,.4),0 0 0 0 rgba(255,74,102,.55),0 14px 30px -20px rgba(225,29,60,.85)}
  100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.26),
     0 1px 2px rgba(0,0,0,.4),0 0 0 12px rgba(255,74,102,0),0 14px 30px -20px rgba(225,29,60,.85)}}
:is(#stage-registration,#stage-reading-intro,#stage-completion) .btn-primary.is-live{
  animation:chIgnite .72s var(--ch-e) 1}
:is(#stage-registration,#stage-reading-intro,#stage-completion) .btn-primary:disabled{cursor:not-allowed}
:is(#stage-registration,#stage-reading-intro,#stage-completion) .btn-lg{
  width:100%;padding:15px 26px;font-size:14.5px;gap:10px}
.ch-arrow{width:15px;height:15px;flex:0 0 auto;transition:transform .24s var(--ch-e)}
:is(#stage-registration,#stage-reading-intro,#stage-completion) .btn:hover .ch-arrow{transform:translateX(4px)}
:is(#stage-registration,#stage-reading-intro,#stage-completion) .btn.is-dormant .ch-arrow{opacity:.55}

/* ── telegram strip ──────────────────────────────────────────────────────── */
:is(#stage-registration,#stage-completion) .channel-promo{
  display:flex;align-items:center;gap:14px;margin:0;border-radius:0;
  padding:14px clamp(20px,3.2vw,38px);
  background:linear-gradient(90deg,rgba(34,158,217,.16),rgba(34,158,217,.07) 55%,rgba(34,158,217,.13));
  border:0;border-top:1px solid var(--ch-line);box-shadow:none;color:var(--ch-ink);
  transition:background .25s var(--ch-e)}
:is(#stage-registration,#stage-completion) .channel-promo:hover{
  filter:none;background:linear-gradient(90deg,rgba(34,158,217,.28),rgba(34,158,217,.13) 55%,rgba(34,158,217,.22))}
:is(#stage-registration,#stage-completion) .channel-promo .tg-icon{
  width:30px;height:30px;border-radius:9px;background:linear-gradient(160deg,#39b3e8,#1d80c2);
  color:#fff;font-size:14px;box-shadow:0 4px 12px -4px rgba(34,158,217,.9)}
:is(#stage-registration,#stage-completion) .channel-promo .channel-name{
  font-size:12.5px;font-weight:700;letter-spacing:.01em;color:var(--ch-ink)}
:is(#stage-registration,#stage-completion) .channel-promo .channel-desc{
  font-size:11.5px;font-weight:400;color:var(--ch-ink-3);margin-top:1px}
:is(#stage-registration,#stage-completion) .channel-promo .channel-cta{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.07);
  border:1px solid var(--ch-line-2);color:var(--ch-ink-2);transition:.2s}
:is(#stage-registration,#stage-completion) .channel-promo:hover .channel-cta{
  background:rgba(255,255,255,.13);color:var(--ch-ink);border-color:var(--ch-line-3)}

/* ══════════════════ REGISTRATION ══════════════════ */
#stage-registration{padding:clamp(14px,3.4vh,36px) clamp(12px,3.2vw,40px);align-items:center;justify-content:center;overflow-y:auto}
#stage-registration .start-card{width:100%;max-width:940px;padding:0;margin:auto}
.ch-grid{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1fr);position:relative;z-index:1}
.ch-ident{padding:clamp(24px,2.6vw,34px) clamp(20px,2.4vw,32px) clamp(24px,2.6vw,32px) clamp(22px,3.2vw,38px);
  border-right:1px solid var(--ch-line);display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(143,184,255,.045),rgba(143,184,255,0) 55%)}
.ch-action{padding:clamp(24px,2.6vw,34px) clamp(22px,3.2vw,38px) clamp(24px,2.6vw,32px) clamp(20px,2.4vw,32px);
  display:flex;flex-direction:column}

#stage-registration .brand-block{display:flex;align-items:center;gap:12px;margin:0 0 clamp(20px,2.6vw,30px);
  padding:0;border:0;background:none}
#stage-registration .brand-logo{width:44px;height:44px;border-radius:12px;
  box-shadow:0 6px 18px -6px rgba(9,38,92,.9),0 0 0 1px rgba(255,255,255,.09)}
#stage-registration .brand-eyebrow{font-family:var(--ch-ui);font-weight:700;font-size:13.5px;letter-spacing:-.005em;color:var(--ch-ink)}
#stage-registration .brand-tagline{font-size:11px;font-weight:400;color:var(--ch-ink-3);margin-top:2px;letter-spacing:.005em}

#stage-registration .start-title{font-size:clamp(27px,2.5vw,34px);line-height:1.06;padding:0;
  margin:10px 0 0!important;max-width:11ch}
#stage-registration .ch-lede{font-size:13px;line-height:1.62;color:var(--ch-ink-3);margin:12px 0 0;max-width:32ch}

#stage-registration .start-meta{display:flex;align-items:stretch;justify-content:space-between;
  margin:clamp(18px,2.4vw,28px) 0 0;padding:18px 0 0;border:0;border-top:1px solid var(--ch-line);border-radius:0;
  background:none;box-shadow:none;gap:8px}
.ch-credit{margin:auto 0 0;padding-top:22px;font-size:11px;line-height:1.5;color:var(--ch-ink-4);letter-spacing:.01em}
.ch-credit strong{color:var(--ch-ink-2);font-weight:600}
.ch-credit span{display:block;margin-top:3px}
/* THE OPENING STRIKE.
   The first beat of the boot cannot depend on the network. three.js is a
   ~670KB module fetched from a CDN; on a cold cache it can be a full second
   away, which is most of the prelude. So beat one is plain CSS: a hairline of
   light struck across the centre of the screen at ~80ms, every time, offline
   included. When the particle field arrives it takes over the identical shape
   in the identical place and this cross-fades out under it; when it never
   arrives, this *is* the prelude and the card simply rises through it. */
#ch-strike{position:absolute;left:0;right:0;top:50%;height:0;z-index:1;pointer-events:none;
  display:flex;align-items:center;justify-content:center;opacity:0}
/* Width is derived, not guessed. The WebGL filament is 12.7 world units long,
   seen by a 50° camera at z=19.5 — which works out to exactly 0.699 × the
   viewport HEIGHT on screen, at any aspect ratio. Matching that here means the
   CSS stroke and the particle stroke are the same object, and the hand-off
   between them is invisible on a phone as well as on a 5K display. */
#ch-strike i{display:block;width:min(69.9vh,96vw);height:3px;border-radius:3px;
  transform:scaleX(0);transform-origin:50% 50%;
  background:linear-gradient(90deg,transparent,rgba(143,184,255,.10) 6%,rgba(186,214,255,.72) 26%,
    rgba(255,255,255,1) 50%,rgba(186,214,255,.72) 74%,rgba(143,184,255,.10) 94%,transparent);
  box-shadow:0 0 10px rgba(214,232,255,.85),0 0 34px rgba(140,182,255,.6),0 0 90px rgba(80,124,220,.42)}
body.cdi-booting #ch-strike{animation:chStrikeIn .30s .06s cubic-bezier(.14,.86,.28,1) both}
body.cdi-booting #ch-strike i{animation:chStrikeDraw .34s .06s cubic-bezier(.10,.90,.22,1) both}
body.cdi-atmo #ch-strike,body.cdi-reveal #ch-strike{animation:none;opacity:0;transition:opacity .26s ease}
@keyframes chStrikeIn{from{opacity:0}30%{opacity:1}to{opacity:1}}
@keyframes chStrikeDraw{from{transform:scaleX(.02)}to{transform:scaleX(1)}}

/* The boot's climax: the imploding core detonates and the light washes ACROSS
   the card that is materialising out of it — screen-blended, above everything,
   inert to the pointer. This is the single frame the whole prelude aims at. */
#ch-bloom{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:6;
  mix-blend-mode:screen;will-change:opacity,transform;
  background:
    radial-gradient(20% 17% at 50% 50%,rgba(255,255,255,.92),rgba(214,232,255,.55) 42%,transparent 72%),
    radial-gradient(46% 40% at 50% 50%,rgba(150,190,255,.34),rgba(90,130,225,.10) 46%,transparent 74%),
    radial-gradient(78% 5% at 50% 50%,rgba(198,222,255,.42),transparent 76%)}
#ch-bloom.on{animation:chBloom 1.15s cubic-bezier(.08,.75,.25,1) both}
@keyframes chBloom{
  0%{opacity:0;transform:scale(.42)}
  9%{opacity:1;transform:scale(.92)}
  26%{opacity:.62;transform:scale(1.28)}
  100%{opacity:0;transform:scale(2.4)}}
#stage-registration .start-meta-item{flex:1;text-align:left}
#stage-registration .start-meta-item .n{font-family:var(--ch-display);font-weight:600;font-size:clamp(21px,1.9vw,25px);
  line-height:1;letter-spacing:-.03em;color:var(--ch-ink);white-space:nowrap}
#stage-registration .start-meta-item .n span{color:var(--ch-ink-4);font-weight:400;margin:0 1px}
#stage-registration .start-meta-item .l{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ch-ink-4);margin-top:7px}
#stage-registration .start-meta-divider{width:1px;height:auto;align-self:stretch;background:var(--ch-line);flex:0 0 1px}

#stage-registration .start-rules{list-style:none;margin:14px 0 0;padding:0}
#stage-registration .start-rules li{position:relative;font-size:12.5px;line-height:1.5;color:var(--ch-ink-2);
  padding:0 0 0 24px;margin:0 0 11px}
#stage-registration .start-rules li:last-child{margin-bottom:0}
#stage-registration .start-rules li strong{color:var(--ch-ink);font-weight:700}
#stage-registration .start-rules li::before{content:"";position:absolute;left:2px;top:6px;width:6px;height:6px;
  border:0;border-radius:50%;background:rgba(143,184,255,.55);
  box-shadow:0 0 0 3px rgba(143,184,255,.10),0 0 10px rgba(143,184,255,.45)}
#stage-registration .start-rules li.is-strict::before{background:rgba(255,74,102,.8);
  box-shadow:0 0 0 3px rgba(225,29,60,.13),0 0 10px rgba(255,74,102,.55)}

.ch-field{margin:auto 0 0;padding-top:20px}
#stage-registration .input-label{display:block;font-size:10px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ch-ink-3);margin:0 0 9px;transition:color .2s}
.ch-field:focus-within .input-label{color:var(--ch-blue)}
.ch-input-wrap{position:relative;border-radius:13px}
.ch-input-wrap::after{content:"";position:absolute;inset:-1px;border-radius:14px;pointer-events:none;
  padding:1px;opacity:0;transition:opacity .28s var(--ch-e);
  background:linear-gradient(115deg,rgba(160,196,255,1),rgba(128,160,230,.42) 52%,rgba(255,110,140,.42));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.ch-input-wrap:focus-within::after{opacity:1}
#stage-registration .input-field{width:100%;padding:14px 16px;border-radius:13px;
  font-family:var(--ch-ui);font-size:14.5px;font-weight:500;letter-spacing:.005em;color:var(--ch-ink);
  background:rgba(255,255,255,.045);border:1px solid var(--ch-line-2);outline:none;
  transition:background .22s var(--ch-e),border-color .22s var(--ch-e),box-shadow .28s var(--ch-e)}
#stage-registration .input-field::placeholder{color:var(--ch-ink-4);font-weight:400}
#stage-registration .input-field:hover{background:rgba(255,255,255,.065);border-color:var(--ch-line-3)}
#stage-registration .input-field:focus{background:rgba(143,184,255,.075);border-color:transparent;
  box-shadow:0 0 0 5px rgba(143,184,255,.10),0 10px 30px -16px rgba(143,184,255,.7)}
.ch-hint{font-size:11.5px;line-height:1.45;color:var(--ch-ink-4);margin:9px 2px 0;
  display:flex;align-items:flex-start;gap:6px;min-height:17px;transition:color .2s}
.ch-hint svg{width:13px;height:13px;flex:0 0 auto;margin-top:1px;opacity:0;transition:opacity .2s}
/* ID-scoped and stated twice on purpose: validateStart re-focuses the field,
   and the :focus rule above is ID-weighted, so a plain class selector here
   would lose and the error would render as a normal focused field. */
#stage-registration .ch-field.is-invalid .input-field,
#stage-registration .ch-field.is-invalid .input-field:focus,
#stage-registration .ch-field.is-invalid .input-field:hover{
  background:rgba(255,74,102,.09);border-color:rgba(255,90,116,.75);
  box-shadow:0 0 0 4px rgba(225,29,60,.13),0 10px 26px -18px rgba(255,74,102,.9)}
.ch-field.is-invalid .ch-input-wrap::after{opacity:0}
.ch-field.is-invalid .ch-hint{color:var(--ch-red-2)}
.ch-field.is-invalid .ch-hint svg{opacity:1}
.ch-field.is-invalid .ch-input-wrap{animation:chShake .44s cubic-bezier(.36,.07,.19,.97)}
@keyframes chShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}
  30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}100%{transform:none}}
#stage-registration #start-btn{margin:18px 0 0;width:100%}

/* ══════════════════ INSTRUCTIONS ══════════════════ */
#stage-reading-intro{padding:clamp(14px,3.4vh,36px) clamp(12px,3.2vw,40px);align-items:center;justify-content:center;overflow-y:auto}
/* 800 rather than Writing's 720: the briefing carries three passage cards
   where Writing carries two tasks, and at 720 each one wrapped to five lines. */
#stage-reading-intro .trans-card{width:100%;max-width:800px;margin:auto;text-align:left;
  padding:clamp(26px,3.4vw,44px) clamp(22px,3.4vw,44px) clamp(24px,3vw,36px)}
#stage-reading-intro .trans-icon{display:none}
#stage-reading-intro .ch-head{display:flex;align-items:center;gap:14px;margin-bottom:clamp(18px,2.4vw,26px)}
.ch-mark{width:46px;height:46px;border-radius:14px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(158deg,rgba(143,184,255,.20),rgba(143,184,255,.04));
  border:1px solid var(--ch-line-2);color:var(--ch-blue);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px -12px rgba(91,141,224,.8)}
.ch-mark svg{width:22px;height:22px}
#stage-reading-intro .trans-eyebrow{font-family:var(--ch-ui);font-weight:700;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ch-ink-3);margin:0}
#stage-reading-intro .trans-title{font-size:clamp(28px,3.4vw,40px);line-height:1.04;margin:4px 0 0}
#stage-reading-intro .trans-sub{font-size:14.5px;line-height:1.62;color:var(--ch-ink-2);
  margin:0 0 clamp(20px,2.6vw,28px);max-width:52ch}
#stage-reading-intro .ch-greet{color:var(--ch-ink);font-weight:600;letter-spacing:-.002em}
.ch-tasks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.ch-task{position:relative;padding:18px 18px 16px;border-radius:14px;border:1px solid var(--ch-line);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.ch-task-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:9px}
.ch-task-n{font-family:var(--ch-display);font-weight:600;font-size:16px;letter-spacing:-.02em;color:var(--ch-ink)}
.ch-task-t{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ch-blue);
  padding:3px 8px;border-radius:999px;background:rgba(143,184,255,.10);border:1px solid rgba(143,184,255,.20)}
.ch-task p{font-size:13px;line-height:1.55;color:var(--ch-ink-2);margin:0 0 12px}
.ch-task-f{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--ch-ink-4);
  padding-top:10px;border-top:1px dashed var(--ch-line-2)}
.trans-notes{list-style:none;margin:0;padding:0;border-top:1px solid var(--ch-line);padding-top:16px}
.trans-notes li{position:relative;font-size:12.5px;line-height:1.55;color:var(--ch-ink-2);
  padding-left:22px;margin-bottom:9px}
.trans-notes li:last-child{margin-bottom:0}
.trans-notes li::before{content:"";position:absolute;left:3px;top:7px;width:5px;height:5px;border-radius:50%;
  background:rgba(143,184,255,.5);box-shadow:0 0 8px rgba(143,184,255,.5)}
#stage-reading-intro .btn-lg{margin-top:clamp(18px,2.4vw,26px)}

/* ══════════════════ COMPLETION ══════════════════ */
#stage-completion{padding:clamp(14px,3.4vh,36px) clamp(12px,3.2vw,40px);align-items:center;justify-content:center;overflow-y:auto}
#stage-completion .complete-card{width:100%;max-width:680px;margin:auto;padding:0;text-align:left}
.ch-comp-body{padding:clamp(26px,3.4vw,42px) clamp(22px,3.4vw,44px) clamp(22px,2.8vw,32px);position:relative;z-index:1}
#stage-completion .complete-icon{display:none}
.ch-comp-head{display:flex;align-items:center;gap:18px;margin-bottom:clamp(20px,2.6vw,28px)}
.ch-seal{position:relative;width:64px;height:64px;flex:0 0 auto}
.ch-seal svg{width:64px;height:64px;transform:rotate(-90deg)}
.ch-seal .ch-seal-track{fill:none;stroke:rgba(152,184,236,.16);stroke-width:3}
.ch-seal .ch-seal-arc{fill:none;stroke:url(#chSealGrad);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:176;stroke-dashoffset:176;filter:drop-shadow(0 0 6px rgba(143,184,255,.6));transition:stroke .5s var(--ch-e)}
#stage-completion.is-sealed .ch-seal-arc{stroke:url(#chSealDone);filter:drop-shadow(0 0 7px rgba(99,200,160,.6))}
.ch-seal-core{position:absolute;inset:9px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(158deg,rgba(143,184,255,.18),rgba(143,184,255,.03));
  border:1px solid var(--ch-line);color:var(--ch-blue);transition:all .5s var(--ch-e)}
.ch-seal-core svg{width:20px;height:20px;opacity:0;transform:scale(.5);
  transition:opacity .45s var(--ch-e),transform .55s cubic-bezier(.2,1.5,.4,1)}
.ch-seal-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--ch-display);font-size:14px;font-weight:600;color:var(--ch-ink-2);letter-spacing:-.02em;
  transition:opacity .3s}
#stage-completion.is-sealed .ch-seal-core{background:linear-gradient(158deg,rgba(79,211,152,.24),rgba(79,211,152,.06));
  border-color:rgba(79,211,152,.4);color:var(--ch-emerald);
  box-shadow:0 0 0 1px rgba(79,211,152,.18),0 0 28px -6px rgba(79,211,152,.6)}
#stage-completion.is-sealed .ch-seal-core svg{opacity:1;transform:scale(1)}
#stage-completion.is-sealed .ch-seal-pct{opacity:0}
#stage-completion .trans-eyebrow{font-family:var(--ch-ui);font-weight:700;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ch-ink-3);margin:0}
#stage-completion .complete-title{font-size:clamp(27px,3.2vw,36px);line-height:1.05;margin:5px 0 0}
#stage-completion .complete-sub{font-size:13.5px;line-height:1.5;color:var(--ch-ink-3);margin:8px 0 0;
  transition:color .3s}
#stage-completion.is-sealed .complete-sub{color:#8ed3b3}
.ch-steps{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--ch-line)}
.ch-steps li{display:flex;align-items:center;gap:11px;font-size:12.5px;line-height:1.5;
  color:var(--ch-ink-4);margin-bottom:11px;transition:color .5s var(--ch-e)}
.ch-steps li:last-child{margin-bottom:0}
.ch-steps li.on{color:var(--ch-ink-2)}
.ch-step-dot{width:16px;height:16px;border-radius:50%;flex:0 0 auto;position:relative;
  border:1px solid var(--ch-line-2);transition:all .5s var(--ch-e)}
.ch-step-dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--ch-blue);
  opacity:0;transform:scale(.3);transition:opacity .4s var(--ch-e),transform .5s cubic-bezier(.2,1.5,.4,1)}
.ch-step-dot::before{content:"";position:absolute;left:5px;top:2.8px;width:3.6px;height:7px;
  border:solid var(--ch-emerald);border-width:0 1.7px 1.7px 0;border-radius:.5px;
  opacity:0;transform:rotate(42deg) scale(.4);transform-origin:50% 50%;
  transition:opacity .3s var(--ch-e),transform .45s cubic-bezier(.2,1.6,.4,1)}
#stage-completion.is-sealed .ch-steps li{color:var(--ch-ink-2)}
#stage-completion.is-sealed .ch-step-dot{border-color:rgba(99,200,160,.5);
  box-shadow:0 0 13px -3px rgba(99,200,160,.85)}
#stage-completion.is-sealed .ch-step-dot::after{opacity:0;transform:scale(.3)}
#stage-completion.is-sealed .ch-step-dot::before{opacity:1;transform:rotate(42deg) scale(1)}
#stage-completion.is-sealed .ch-steps li:nth-child(1) .ch-step-dot::before{transition-delay:.04s}
#stage-completion.is-sealed .ch-steps li:nth-child(2) .ch-step-dot::before{transition-delay:.13s}
#stage-completion.is-sealed .ch-steps li:nth-child(3) .ch-step-dot::before{transition-delay:.22s}
.ch-steps li.on .ch-step-dot{border-color:rgba(143,184,255,.55);box-shadow:0 0 12px -2px rgba(143,184,255,.7)}
.ch-steps li.on .ch-step-dot::after{opacity:1;transform:scale(1)}
.ch-note{margin-top:20px;padding:18px 20px;border-radius:14px;border:1px solid var(--ch-line);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.016))}
#stage-completion .ch-note p{font-size:13px;line-height:1.68;color:var(--ch-ink-2);margin:0}
#stage-completion .ch-sign{margin-top:13px!important;padding-top:12px;border-top:1px solid var(--ch-line);
  font-size:11.5px;color:var(--ch-ink-4);letter-spacing:.01em}
#stage-completion .ch-sign strong{color:var(--ch-ink-2);font-weight:700}
/* The button's slot is reserved from the first frame — the card must not jump
   when marking finishes — and the space is *used* while it waits, rather than
   sitting there as a hole under the copy. */
.ch-cta-slot{position:relative;margin-top:20px;min-height:50px;display:flex;align-items:center}
.ch-wait{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:12.5px;line-height:1.5;color:var(--ch-ink-4);letter-spacing:.005em;
  transition:opacity .35s var(--ch-e)}
#stage-completion.is-sealed .ch-wait{opacity:0;pointer-events:none}
.ch-cta{width:100%;opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .6s .12s var(--ch-e),transform .7s .12s var(--ch-e)}
#stage-completion.is-sealed .ch-cta{opacity:1;transform:none;pointer-events:auto}
/* the step currently being worked breathes */
@keyframes chPulse{0%,100%{box-shadow:0 0 0 0 rgba(143,184,255,.30)}
  60%{box-shadow:0 0 0 5px rgba(143,184,255,0)}}
.ch-steps li.now{color:var(--ch-ink-3)}
.ch-steps li.now .ch-step-dot{border-color:rgba(143,184,255,.38);animation:chPulse 1.5s ease-out infinite}
#stage-completion.is-sealed .ch-steps li.now .ch-step-dot{animation:none}

/* ── boot & entrance choreography ────────────────────────────────────────── */
#cdi-webgl{transition:opacity .45s ease}
body.cdi-exit #stage-reading-intro .trans-card{
  opacity:0;transform:translate3d(0,-8px,0) scale(.992);filter:blur(5px);
  transition:opacity .24s ease,transform .26s var(--ch-e),filter .24s ease}
body.cdi-booting #stage-registration :is(.start-card){
  opacity:0;transform:translate3d(0,30px,0) scale(.962);filter:blur(16px);pointer-events:none}
body.cdi-booting #cdi-webgl{opacity:1}
@keyframes chRise{
  from{opacity:0;transform:translate3d(0,30px,0) scale(.962);filter:blur(16px)}
  55%{filter:blur(0)}
  to{opacity:1;transform:none;filter:blur(0)}}
@keyframes chFadeUp{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
@keyframes chWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
body.cdi-reveal #stage-registration .start-card{
  animation:chRise 1.05s var(--ch-e) both;will-change:transform,opacity,filter}
body.cdi-reveal #stage-registration .start-card::before{animation:chWipe .9s .35s var(--ch-e) both}
body.cdi-reveal #stage-registration :is(.brand-block,.ch-kicker,.start-title,.ch-lede,.start-meta,.ch-credit,
  .ch-label,.start-rules li,.ch-field,#start-btn,.ch-fineprint){
  animation:chFadeUp .62s var(--ch-e) both}
body.cdi-reveal #stage-registration .brand-block{animation-delay:.16s}
body.cdi-reveal #stage-registration .ch-kicker{animation-delay:.22s}
body.cdi-reveal #stage-registration .start-title{animation-delay:.26s}
body.cdi-reveal #stage-registration .ch-lede{animation-delay:.31s}
body.cdi-reveal #stage-registration .start-meta{animation-delay:.37s}
body.cdi-reveal #stage-registration .ch-credit{animation-delay:.43s}
body.cdi-reveal #stage-registration .ch-label{animation-delay:.24s}
body.cdi-reveal #stage-registration .start-rules li:nth-child(1){animation-delay:.29s}
body.cdi-reveal #stage-registration .start-rules li:nth-child(2){animation-delay:.33s}
body.cdi-reveal #stage-registration .start-rules li:nth-child(3){animation-delay:.37s}
body.cdi-reveal #stage-registration .start-rules li:nth-child(4){animation-delay:.41s}
body.cdi-reveal #stage-registration .start-rules li:nth-child(5){animation-delay:.45s}
body.cdi-reveal #stage-registration .ch-field{animation-delay:.5s}
body.cdi-reveal #stage-registration #start-btn{animation-delay:.56s}
body.cdi-reveal #stage-registration .ch-fineprint{animation-delay:.62s}
body.cdi-reveal #stage-registration .channel-promo{animation:chFadeUp .62s .66s var(--ch-e) both}
/* stage-to-stage entrances (intro / completion) */
body.cdi-3d-on .stage.cdi-enter :is(.trans-card,.complete-card){
  animation:chRise .85s var(--ch-e) both;will-change:transform,opacity,filter}
body.cdi-3d-on .stage.cdi-enter > *{animation:none}
body.cdi-3d-on #stage-reading-intro.cdi-enter :is(.ch-head,.trans-sub,.ch-task,.trans-notes,.btn-lg,.ch-fineprint),
body.cdi-3d-on #stage-completion.cdi-enter :is(.ch-comp-head,.ch-steps,.ch-note,.channel-promo){
  animation:chFadeUp .6s var(--ch-e) both}
body.cdi-3d-on #stage-reading-intro.cdi-enter .ch-head{animation-delay:.18s}
body.cdi-3d-on #stage-reading-intro.cdi-enter .trans-sub{animation-delay:.24s}
body.cdi-3d-on #stage-reading-intro.cdi-enter .ch-task:nth-child(1){animation-delay:.30s}
body.cdi-3d-on #stage-reading-intro.cdi-enter .ch-task:nth-child(2){animation-delay:.36s}
body.cdi-3d-on #stage-reading-intro.cdi-enter .trans-notes{animation-delay:.42s}
body.cdi-3d-on #stage-reading-intro.cdi-enter .btn-lg{animation-delay:.48s}
body.cdi-3d-on #stage-reading-intro.cdi-enter .ch-fineprint{animation-delay:.54s}
body.cdi-3d-on #stage-completion.cdi-enter .ch-comp-head{animation-delay:.18s}
body.cdi-3d-on #stage-completion.cdi-enter .ch-steps{animation-delay:.26s}
body.cdi-3d-on #stage-completion.cdi-enter .ch-note{animation-delay:.34s}
body.cdi-3d-on #stage-completion.cdi-enter .channel-promo{animation-delay:.42s}
body.cdi-3d-on :is(.start-card,.trans-card,.complete-card){box-shadow:var(--ch-shadow)}

/* ── warning overlay keeps the cosmic glass ──────────────────────────────── */
.warning-overlay{background:rgba(3,6,12,.74);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.warning-card{background:var(--ch-glass);border:1px solid var(--ch-line-2);border-top:3px solid var(--ch-red);border-radius:18px;box-shadow:var(--ch-shadow);-webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3)}
.warning-card h2{color:var(--ch-ink)}.warning-card p{color:var(--ch-ink-2)}.warning-card #warning-strikes-text{color:var(--ch-ink-3)!important}.warning-card .strike-counter .strike{border-color:var(--ch-line-2)}.warning-card .strike-counter .strike.on{background:var(--ch-red);border-color:var(--ch-red)}.warning-card .btn-primary{background:linear-gradient(180deg,#f4304f,#c9142f);border-radius:12px;border:none;color:#fff}
body.dark-mode :is(#stage-registration,#stage-reading-intro,#stage-completion){background:radial-gradient(128% 78% at 50% 122%,rgba(31,74,150,.62),transparent 62%),linear-gradient(180deg,#070b16,#03060c)}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .ch-grid{grid-template-columns:1fr}
  #stage-registration .start-card{max-width:540px}
  .ch-ident{border-right:0;border-bottom:1px solid var(--ch-line);padding-bottom:24px}
  #stage-registration .start-title{max-width:none}
  #stage-registration .ch-lede{max-width:none}
  .ch-field{margin-top:20px}
  .ch-tasks{grid-template-columns:1fr}
}
/* Phones. The single thing that matters here is that the *action* — the name
   field and the button, or Begin writing — is not pushed below the fold by
   the editorial half of the card. Everything above it gets compressed hard. */
@media (max-width:600px){
  #stage-registration{padding:10px}
  #stage-registration .start-meta{flex-wrap:nowrap;gap:6px;margin-top:16px;padding-top:14px}
  #stage-registration .start-meta-item .n{font-size:20px}
  #stage-registration .start-meta-item .l{font-size:8.5px;letter-spacing:.1em;margin-top:5px}
  #stage-registration .start-title{font-size:clamp(21px,6.6vw,26px);margin-top:8px!important}
  #stage-registration .ch-lede{font-size:12.5px;margin-top:9px}
  #stage-registration .brand-block{margin-bottom:16px}
  #stage-registration .brand-logo{width:38px;height:38px;border-radius:10px}
  .ch-ident,.ch-action{padding:18px 18px}
  .ch-ident{padding-bottom:18px}
  .ch-credit{padding-top:14px;font-size:10.5px}
  #stage-registration .start-rules li{font-size:12px;margin-bottom:8px;padding-left:21px}
  .ch-field{padding-top:16px}
  #stage-registration .input-field{padding:12px 14px;font-size:16px}   /* 16px = no iOS zoom */
  #stage-registration #start-btn{margin-top:14px}
  :is(#stage-registration,#stage-reading-intro,#stage-completion) .btn-lg{padding:13px 22px}
  #stage-reading-intro{padding:10px}
  #stage-reading-intro .trans-card{padding:20px 18px 20px}
  #stage-reading-intro .ch-head{gap:11px;margin-bottom:14px}
  .ch-mark{width:38px;height:38px;border-radius:11px}
  .ch-mark svg{width:19px;height:19px}
  #stage-reading-intro .trans-title{font-size:clamp(23px,7vw,28px)}
  #stage-reading-intro .trans-sub{font-size:13px;margin-bottom:16px}
  .ch-tasks{gap:9px;margin-bottom:14px}
  .ch-task{padding:13px 14px 12px;border-radius:12px}
  .ch-task p{font-size:12.5px;margin-bottom:9px}
  .ch-task-f{padding-top:8px;font-size:10.5px}
  .trans-notes{padding-top:13px}
  .trans-notes li{font-size:12px;margin-bottom:8px}
  #stage-completion{padding:10px}
  .ch-comp-body{padding:20px 18px 18px}
  .ch-comp-head{gap:14px;margin-bottom:16px}
  .ch-seal,.ch-seal svg{width:52px;height:52px}
  .ch-seal-core{inset:7px}
  #stage-completion .complete-title{font-size:clamp(23px,7vw,28px)}
  .ch-note{margin-top:16px;padding:14px 15px}
  #stage-completion .ch-note p{font-size:12.5px}
  :is(#stage-registration,#stage-completion) .channel-promo{padding:11px 16px}
  :is(#stage-registration,#stage-completion) .channel-promo .channel-desc{display:none}
  .ch-fineprint{margin-top:12px;font-size:11px}
}
@media (max-width:430px){
  #stage-registration .ch-lede{display:none}          /* the rules say it better */
  #stage-registration .start-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  #stage-registration .start-meta-divider{display:none}
  .ch-credit{display:none}
  .ch-comp-head{flex-direction:column;align-items:flex-start;gap:12px}
}
/* Short laptops — 1280×720 and the like. */
@media (max-height:640px) and (min-width:601px){
  #stage-registration .ch-lede{display:none}
  #stage-reading-intro .trans-card{padding-top:24px;padding-bottom:22px}
  .ch-task{padding:14px 15px 13px}
}
@media (min-width:1700px){
  #stage-registration .start-card{max-width:1020px}
  #stage-reading-intro .trans-card{max-width:860px}
  #stage-completion .complete-card{max-width:740px}
}
/* Ultra-wide / 5K. Almost every size in this shell is authored in px so it
   holds its proportions against the exam's fixed Arial metrics — which means
   nothing grows on a 3440px display unless it is told to. Rather than let the
   card sit marooned in the middle of the screen, the whole scale steps up one
   notch. Widths still stop well short of the viewport: this is a dialogue,
   not a page. */
@media (min-width:2000px){
  #stage-registration .start-card{max-width:1240px}
  #stage-reading-intro .trans-card{max-width:980px}
  #stage-completion .complete-card{max-width:860px}
  .ch-ident,.ch-action{padding:40px 38px}
  #stage-registration .brand-logo{width:54px;height:54px;border-radius:15px}
  #stage-registration .brand-eyebrow{font-size:16px}
  #stage-registration .brand-tagline{font-size:12.5px}
  #stage-registration .start-title{font-size:41px}
  #stage-registration .ch-lede{font-size:15.5px;max-width:34ch}
  #stage-registration .start-meta-item .n{font-size:31px}
  #stage-registration .start-meta-item .l{font-size:10.5px;letter-spacing:.18em}
  #stage-registration .start-rules li{font-size:14.5px;margin-bottom:14px;padding-left:28px}
  #stage-registration .start-rules li::before{width:7px;height:7px;top:7px}
  .ch-credit{font-size:12.5px}
  #stage-registration .input-field{font-size:16.5px;padding:17px 19px;border-radius:15px}
  .ch-input-wrap,.ch-input-wrap::after{border-radius:15px}
  .ch-hint{font-size:13px}
  :is(#stage-registration,#stage-reading-intro,#stage-completion) .ch-label,
  :is(#stage-registration,#stage-reading-intro,#stage-completion) .input-label{font-size:11.5px}
  :is(#stage-registration,#stage-reading-intro,#stage-completion) .btn-lg{padding:18px 28px;font-size:16.5px;border-radius:15px}
  .ch-fineprint{font-size:13px}
  :is(#stage-registration,#stage-completion) .channel-promo{padding:18px 38px}
  :is(#stage-registration,#stage-completion) .channel-promo .tg-icon{width:36px;height:36px;font-size:17px}
  :is(#stage-registration,#stage-completion) .channel-promo .channel-name{font-size:14.5px}
  :is(#stage-registration,#stage-completion) .channel-promo .channel-desc{font-size:13px}
  #stage-reading-intro .trans-card{padding:48px 46px 42px}
  .ch-mark{width:56px;height:56px;border-radius:17px}
  .ch-mark svg{width:27px;height:27px}
  #stage-reading-intro .trans-title{font-size:46px}
  #stage-reading-intro .trans-sub{font-size:17px;max-width:56ch}
  .ch-task{padding:22px 22px 20px;border-radius:16px}
  .ch-task-n{font-size:19px}
  .ch-task p{font-size:15px}
  .ch-task-f{font-size:12.5px}
  .trans-notes li{font-size:14.5px;margin-bottom:12px;padding-left:26px}
  .ch-comp-body{padding:46px 46px 38px}
  .ch-seal,.ch-seal svg{width:76px;height:76px}
  .ch-seal-core{inset:11px}
  .ch-seal-pct{font-size:16px}
  #stage-completion .complete-title{font-size:42px}
  #stage-completion .complete-sub{font-size:15.5px}
  .ch-steps li{font-size:14.5px;margin-bottom:14px;gap:13px}
  .ch-step-dot{width:19px;height:19px}
  .ch-step-dot::before{left:6px;top:3.4px;width:4.4px;height:8.4px}
  #stage-completion .ch-note p{font-size:15px}
  #stage-completion .ch-sign{font-size:13px}
  .ch-wait{font-size:14px}
  .ch-cta-slot{min-height:58px}
}
@media (max-height:720px){
  #stage-registration .start-title{font-size:clamp(23px,2vw,27px)}
  .ch-ident,.ch-action{padding-top:22px;padding-bottom:22px}
  #stage-registration .start-rules li{margin-bottom:8px}
}

/* ── reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  body.cdi-booting #stage-registration .start-card{opacity:1;transform:none;filter:none;pointer-events:auto}
  #cdi-webgl,#ch-strike,#ch-bloom{display:none!important}
  #stage-registration *,#stage-reading-intro *,#stage-completion *{animation:none!important}
  .ch-cta{opacity:1;transform:none;pointer-events:auto}
}

/* ── Reading's own adaptations of the shell ──────────────────────────────── */
/* Three passages, not two tasks: the briefing grid runs to three columns and
   the entrance stagger gains a third beat. Three cards also means three
   different body lengths, so the question-range footers are pushed to the
   bottom of each card — otherwise they step down the row like a staircase. */
.ch-tasks{grid-template-columns:repeat(3,minmax(0,1fr))}
.ch-task{display:flex;flex-direction:column}
.ch-task p{flex:1 1 auto}
.ch-task-f{margin-top:auto}
body.cdi-3d-on #stage-reading-intro.cdi-enter .ch-task:nth-child(3){animation-delay:.42s}
body.cdi-3d-on #stage-reading-intro.cdi-enter .trans-notes{animation-delay:.48s}
body.cdi-3d-on #stage-reading-intro.cdi-enter .btn-lg{animation-delay:.54s}
body.cdi-3d-on #stage-reading-intro.cdi-enter .ch-fineprint{animation-delay:.60s}
@media (max-width:900px){ .ch-tasks{grid-template-columns:1fr} }
/* Writing drops the stat strip to a 2x2 grid on the smallest phones because
   "150/250" is a wide figure. Reading's three figures are 60 / 40 / 3, so they
   stay on one line and the strip keeps its rhythm. */
@media (max-width:430px){
  #stage-registration .start-meta{display:flex;gap:8px}
  #stage-registration .start-meta-divider{display:block}
}
/* Phones. Writing's briefing has two task cards and its "Begin writing" button
   still lands above the fold; three passage cards push it under. So on a phone
   each card collapses to one line — the passage, its budget and its question
   range — and the strategy notes underneath carry what the descriptions said. */
@media (max-width:600px){
  .ch-task{flex-direction:row;align-items:baseline;justify-content:space-between;
    gap:10px;padding:12px 14px}
  .ch-task p{display:none}
  .ch-task-h{margin:0;gap:9px}
  .ch-task-f{border-top:0;padding-top:0;margin:0;white-space:nowrap}
}

/* ── the WebGL host, and how the three layers stack ──────────────────────── */
/* THE GROUND IS CSS, THE PARTICLES ARE GL, THE CARD IS ON TOP.
   The particle field is additive light on a transparent canvas — it carries no
   backdrop of its own — so the deep-space ground is painted by the stage's own
   gradient (see the stage shell above) and the canvas has to sit ABOVE that
   background and BELOW the card. That only works if the wrapper stages create
   no stacking context of their own, which is why the z-index:25 they are given
   further up (for the previous generation of this layer, whose canvas sat at
   z-index 2 *under* the stages, forcing every wrapper stage transparent and
   leaving the ground to a backdrop shader) is released here.
   Paint order becomes: stage background → #cdi-webgl (1) → stage children (2).
   #stage-reading is not involved: it has no z-index, and the canvas is
   display:none for the whole time it is on screen. */
#cdi-webgl{position:fixed;inset:0;z-index:1;pointer-events:none;user-select:none;
  overflow:hidden;contain:strict;opacity:0;transition:opacity .45s ease}
#cdi-webgl canvas{display:block;width:100%;height:100%;pointer-events:none}
/* ── COSMIC DUST ──────────────────────────────────────────────────────────────
   The field's own host, not a child of #cdi-webgl: that host is destroyed when
   THREE is missing, when WebGL is unavailable, and under prefers-reduced-motion,
   and the background has to survive all three. z-index 0 puts it under the
   wrapper stages (z-index:auto, now transparent) and so under their cards at
   z-index 2. Shown only while a wrapper stage is .active — the same hard
   cut-off the exam has always had. */
#cdi-stars-host{position:fixed;inset:0;z-index:0;display:none;pointer-events:none;
  overflow:hidden;contain:strict;
  background:
    radial-gradient(58% 46% at 26% 30%,rgba(17,60,92,.55),transparent 68%),
    radial-gradient(52% 44% at 74% 62%,rgba(17,60,92,.38),transparent 66%),
    radial-gradient(46% 40% at 58% 18%,rgba(86,52,38,.24),transparent 64%),
    radial-gradient(70% 55% at 62% 104%,rgba(120,78,44,.20),transparent 62%),
    linear-gradient(180deg,#0F111B 0%,#05070E 52%,#010006 100%)}
/* The fine dust is one seamless tile drifting on a GPU transform — 400,000-odd
   points that never cost a repaint. Oversized and offset so the translate never
   exposes an edge; it travels exactly one tile period, so the loop is seamless. */
#cdi-stars-host .cdi-dust{position:absolute;left:-512px;top:-512px;
  width:calc(100% + 1024px);height:calc(100% + 1024px);
  will-change:transform;animation:cdiDrift 96s linear infinite}
@keyframes cdiDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(512px,512px,0)}}
#cdi-stars-host #cdi-stars{position:absolute;inset:0}
/* the corners fall away, so a card in the middle always has darker ground
   behind its edges to sit against */
#cdi-stars-host::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(76% 62% at 50% 47%,transparent 34%,rgba(1,2,6,.34) 72%,rgba(0,0,3,.76) 100%)}
@media (prefers-reduced-motion: reduce){
  #cdi-stars-host .cdi-dust{animation:none}
}
/* The particle prelude is retired: the drifting field is the atmosphere now.
   These two carried its opening strike and its closing flash. */
#ch-strike,#ch-bloom{display:none!important}
body.cdi-3d-on :is(#stage-registration,#stage-reading-intro,#stage-completion,#stage-results).stage.active{
  z-index:auto;
}
/* the paper-grain multiply overlay is wrong on a dark ground */
body.cdi-3d-on :is(#stage-registration,#stage-reading-intro,#stage-completion,#stage-results)::before{
  display:none !important;
}
/* #stage-results is B3's certificate and is left alone — but the chamber floor
   it has always been printed on used to come from the old scene's backdrop
   shader, which this layer does not have. So the same ground is painted here
   in CSS, and the certificate lands on it unchanged. */
body.cdi-3d-on #stage-results{
  background:
    transparent;
}
body.cdi-3d-on #stage-results > *{position:relative;z-index:2}
/* Reading ships its own stage-entrance fade (pwStageIn) on the wrapper stages.
   With it left on, the registration screen faded itself in on its own 0.44s
   timeline regardless of the boot, so the prelude and the card arrived
   together instead of one after the other. */
body.cdi-3d-on :is(#stage-registration,#stage-reading-intro,#stage-completion,#stage-results).active{
  animation:none;
}
body.cdi-booting{overflow:hidden}
body.cdi-booting #stage-registration .start-card,
body.cdi-booting #ch-strike,body.cdi-booting #ch-bloom{pointer-events:none}

/* ── the toast, id-scoped ────────────────────────────────────────────────── */
/* A later block in this stylesheet (owned by the exam-screen pass) restyles
   `.toast`; these are id-weighted so the CDI toast stays one object across
   every screen it can appear on. */
#toast{position:fixed;top:80px;left:50%;z-index:110;display:flex;align-items:center;gap:10px;
  padding:11px 17px 11px 12px;max-width:min(520px,calc(100vw - 32px));
  background:linear-gradient(180deg,rgba(30,38,56,.97),rgba(12,17,29,.98));
  border:1px solid rgba(255,255,255,.12);border-radius:13px;
  color:#eef3fb;font-family:var(--ch-ui);font-size:13px;font-weight:600;line-height:1.4;
  box-shadow:0 2px 6px rgba(0,0,0,.32),0 18px 40px -16px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
  opacity:0;transform:translateX(-50%) translateY(-14px) scale(.97);pointer-events:none;
  transition:opacity .26s cubic-bezier(.2,.8,.2,1),transform .34s cubic-bezier(.2,.8,.2,1)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
#toast .t-ic{width:22px;height:22px;border-radius:7px;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(255,255,255,.10);color:#cdd8ea}
#toast .t-ic svg{width:12px;height:12px}
#toast.error{border-color:rgba(225,29,60,.42);
  box-shadow:0 2px 6px rgba(0,0,0,.32),0 18px 40px -16px rgba(0,0,0,.7),0 0 0 1px rgba(225,29,60,.14)}
#toast.error .t-ic{background:rgba(225,29,60,.20);color:#ff8095}
#toast.success{border-color:rgba(31,122,67,.40)}
#toast.success .t-ic{background:rgba(31,122,67,.26);color:#6fd898}
#toast.warn{border-color:rgba(193,154,75,.42)}
#toast.warn .t-ic{background:rgba(193,154,75,.24);color:#e8c88b}

/* ── the resume sheet ────────────────────────────────────────────────────── */
/* Dormant in this build (init() always starts fresh, exactly as Writing and
   Listening do), but it is DOM that can be shown again in one line, so it is
   dressed in the shell's language rather than left as the old white card. */
#resume-sheet{background:radial-gradient(900px 600px at 50% 40%,rgba(10,18,36,.72),rgba(3,6,12,.90));
  -webkit-backdrop-filter:blur(9px) saturate(.9);backdrop-filter:blur(9px) saturate(.9)}
#resume-sheet .rsm-card{max-width:420px;padding:30px 30px 26px;border-radius:18px;text-align:left;
  font-family:var(--ch-ui);background:var(--ch-glass);border:1px solid var(--ch-line-2);
  box-shadow:var(--ch-shadow);-webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3)}
#resume-sheet .rsm-title{font-family:var(--ch-display);font-weight:600;font-size:24px;
  letter-spacing:-.024em;color:var(--ch-ink);margin:0 0 8px}
#resume-sheet .rsm-sub{font-family:var(--ch-ui);font-size:13px;color:var(--ch-ink-3);margin:0 0 4px}
#resume-sheet .rsm-meta{font-family:var(--ch-ui);font-size:12.5px;font-weight:600;color:var(--ch-blue);margin:0 0 22px}
#resume-sheet .rsm-actions{display:flex;flex-direction:column;gap:9px}
#resume-sheet .rsm-btn{width:100%;padding:13px 18px;border-radius:12px;font-family:var(--ch-ui);
  font-weight:700;font-size:13.5px;cursor:pointer;border:none;transition:.16s}
#resume-sheet .rsm-btn.primary{background:linear-gradient(180deg,#e02744,#b3122a);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 14px 30px -20px rgba(225,29,60,.85)}
#resume-sheet .rsm-btn.primary:hover{filter:brightness(1.06)}
#resume-sheet .rsm-btn.ghost{background:rgba(255,255,255,.055);color:var(--ch-ink-2);
  border:1px solid var(--ch-line-2)}
#resume-sheet .rsm-btn.ghost:hover{background:rgba(255,255,255,.10);color:var(--ch-ink)}
#resume-sheet .rsm-warn{margin:14px 0 0;font-family:var(--ch-ui);font-size:11px;color:var(--ch-ink-4)}

/* ── print: the report prints as flat paper, never as the chamber ───────── */
@media print{
  #cdi-webgl,#cdi-stars-host,#ch-strike,#ch-bloom{display:none !important}
  body.cdi-3d-on :is(#stage-registration,#stage-reading-intro,#stage-completion,#stage-results){
    background:#fff !important;
  }
  body.cdi-3d-on :is(.start-card,.trans-card,.complete-card){
    box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  }
  body.cdi-3d-on .stage.cdi-enter > *{animation:none !important}
}


/* ════════════════════════════════════════════════════════════════════
   REVIEW LAYER — design pass
   ════════════════════════════════════════════════════════════════════
   Review mode is the exam screen, unlocked. Nothing here changes where
   anything sits: the passage is still on the left, the questions still on
   the right, the reveal is still inline on the question the student
   answered, and the explanation still opens under its own button. What
   changes is only the finish — the annotation furniture now speaks the
   language of the certificate and the wrapper screens instead of the
   half-dozen unrelated accents it had accumulated.

   Two things forced this to be a real block rather than a few tweaks:

   1. The exam screen's dark and sepia skins repaint every answer surface
      with `!important` (`body.dark-mode .option{background:#1c1f24!important}`,
      the sepia twin, and the same for gap inputs, drop zones, heading slots
      and the matching grid). Correct green and wrong crimson were therefore
      erased outright in both themes — a student reviewing in dark saw ticks
      and crosses floating over rows that all looked identical. Every reveal
      below is restated at a specificity and importance that survives those
      skins, and every colour comes from a token that has a value in all
      three themes.

   2. Colour alone is a weak signal at these tints, so each revealed row also
      carries a 3px inset rule in its verdict colour — the same device the
      matching grid already used for its rows. It reads at a glance and it
      survives a low-contrast screen.

   SCOPE: every selector starts with body.review-mode. The exam screen is
   pixel-matched to the official player and must not shift by a subpixel;
   nothing here can reach it, because the class is only ever added by
   reviewExam(). ═══════════════════════════════════════════════════════ */

body.review-mode{
  /* verdicts */
  --rvw-ok:#1F7A43;   --rvw-ok-wash:#F0F7F2;  --rvw-ok-line:rgba(31,122,67,.30);
  --rvw-no:#C41230;   --rvw-no-wash:#FDF3F4;  --rvw-no-line:rgba(196,18,48,.26);
  /* the explanatory voice — the certificate's navy, never the exam's #418EC8 */
  --rvw-key:#1F4782;  --rvw-key-wash:#F4F7FB;
  /* surfaces + ink, mirroring the wrapper's white / near-white / hairline set */
  --rvw-paper:#FFFFFF; --rvw-surface:#FAFAFA;
  --rvw-ink:#0A0A0A;   --rvw-ink-2:#3F3F3F;  --rvw-ink-3:#8A8A8A;
  --rvw-line:#E4E4E4;  --rvw-line-2:#D4D4D4;
  /* the evidence highlight, and the student's own highlighter it must not be
     confused with (the exam's --hl-y, same #FFE066) */
  --rvw-hl:rgba(255,224,102,.80);
  --rvw-e1:0 1px 2px rgba(16,24,40,.06);
  --rvw-e2:0 1px 2px rgba(16,24,40,.05),0 12px 30px -14px rgba(16,24,40,.24);
}
body.review-mode.dark-mode{
  --rvw-ok:#62CE8C;   --rvw-ok-wash:rgba(31,122,67,.26);  --rvw-ok-line:rgba(98,206,140,.40);
  --rvw-no:#F27C89;   --rvw-no-wash:rgba(196,18,48,.26);  --rvw-no-line:rgba(242,124,137,.38);
  --rvw-key:#8FB8E4;  --rvw-key-wash:rgba(65,142,200,.14);
  --rvw-paper:#22262C; --rvw-surface:#1C1F24;
  --rvw-ink:#E8ECF1;   --rvw-ink-2:#C3CAD3;  --rvw-ink-3:#8E9AA6;
  --rvw-line:#3A4048;  --rvw-line-2:#4A525C;
  --rvw-hl:rgba(255,224,102,.26);
  --rvw-e1:0 1px 2px rgba(0,0,0,.40);
  --rvw-e2:0 1px 2px rgba(0,0,0,.40),0 12px 30px -14px rgba(0,0,0,.70);
}
body.review-mode.theme-sepia{
  --rvw-ok:#1D6B3C;   --rvw-ok-wash:#E5F0E1;  --rvw-ok-line:rgba(29,107,60,.30);
  --rvw-no:#A32B1E;   --rvw-no-wash:#FAEBE4;  --rvw-no-line:rgba(163,43,30,.26);
  --rvw-key:#24507F;  --rvw-key-wash:#F1F2EC;
  --rvw-paper:#FFFDF8; --rvw-surface:#F7F1E4;
  --rvw-ink:#3A2C1A;   --rvw-ink-2:#5A4632;  --rvw-ink-3:#8D7A5F;
  --rvw-line:#D9CBB0;  --rvw-line-2:#B9A685;
  --rvw-hl:rgba(214,166,52,.34);
  --rvw-e1:0 1px 2px rgba(90,70,50,.10);
  --rvw-e2:0 1px 2px rgba(90,70,50,.08),0 12px 30px -14px rgba(90,70,50,.28);
}

/* ── the header, in review ─────────────────────────────────────────────
   The clock is meaningless once the paper is marked, and "60 minutes left"
   above a finished script is simply untrue. The original hid it; the merged
   header's #hdr .timer (1 id) outranked that rule, so it came back. It is
   hidden again, and the slot it occupied — same 8px/32px offsets, same
   baseline — now names the mode instead of leaving a gap. */
body.review-mode #hdr .timer{display:none !important}
/* The header warms to #f2f2eb inside the last ten minutes of the paper. A
   script submitted with nine minutes left carries .ex-time-low into review,
   where an "you are running out of time" cue is simply wrong. */
body.review-mode #stage-reading.ex-time-low #hdr{background:#fff}
body.review-mode.dark-mode #stage-reading.ex-time-low #hdr{background:var(--ex-panel)}
body.review-mode.theme-sepia #stage-reading.ex-time-low #hdr{background:var(--sp-panel-2)}
body.review-mode #hdr-left::after{
  content:"Answer review";
  align-self:flex-start;
  margin:8px 0 0 32px;
  font-family:var(--pw-ui,Arial,sans-serif);
  font-size:11px; line-height:18px; font-weight:800;
  letter-spacing:.20em; text-transform:uppercase;
  color:var(--rvw-key);
  white-space:nowrap;
}

/* ── the revealed answer rows ──────────────────────────────────────────
   The wash says which row is which; the inset rule says it again in a way
   that survives a dim screen and a colour-blind reader's green/red. Both
   are !important because the dark and sepia exam skins repaint .option
   with !important and would otherwise flatten every verdict to one grey. */
body.review-mode .option.correct{
  background:var(--rvw-ok-wash) !important;
  box-shadow:inset 3px 0 0 var(--rvw-ok);
}
body.review-mode .option.wrong{
  background:var(--rvw-no-wash) !important;
  box-shadow:inset 3px 0 0 var(--rvw-no);
}
body.review-mode .option.correct .opt-letter{
  background:var(--rvw-ok) !important; border-color:var(--rvw-ok) !important; color:#fff !important}
body.review-mode .option.wrong .opt-letter{
  background:var(--rvw-no) !important; border-color:var(--rvw-no) !important; color:#fff !important}
/* A correct pick keeps .selected as well, and the exam's own
   .tfn-opts/.multi-opts .selected fill is one class heavier than .correct —
   which is why a question the student got RIGHT used to stay exam-blue while
   a wrong one turned pink. Verdict outranks selection in review. */
body.review-mode .tfn-opts .option.correct,
body.review-mode .multi-opts .option.correct{background:var(--rvw-ok-wash) !important}
body.review-mode .tfn-opts .option.wrong,
body.review-mode .multi-opts .option.wrong{background:var(--rvw-no-wash) !important}

/* ── the verdict chip ──────────────────────────────────────────────────
   Was a green capsule carrying a crimson badge and green answer text: at a
   glance a wrong answer read as a right one, and the one genuinely coloured
   thing (the verdict) was the smallest. Now the verdict is the ONLY colour,
   and the key answer beside it is set in the certificate's data serif, in
   ink — the same pairing the score report uses for a status dot and a figure.
   A correct answer needs no key, so it is the bare tick with no chrome. */
body.review-mode .feedback-pill{
  margin-left:10px; padding:0; border-radius:999px;
  border:1px solid var(--rvw-line); background:var(--rvw-paper);
  box-shadow:var(--rvw-e1); vertical-align:middle; max-width:100%;
}
body.review-mode .feedback-pill.show{display:inline-flex; align-items:center}
body.review-mode .feedback-pill.correct{background:transparent; border-color:transparent; box-shadow:none}
body.review-mode .feedback-pill.wrong{background:var(--rvw-paper); border-color:var(--rvw-line)}
body.review-mode .feedback-pill .fb-badge{
  width:19px; height:19px; margin:2px; border-radius:50%;
  font-size:11px; font-weight:700; line-height:1; color:#fff;
}
body.review-mode .feedback-pill .fb-ok{background:var(--rvw-ok)}
body.review-mode .feedback-pill .fb-no{background:var(--rvw-no)}
body.review-mode .feedback-pill .fb-ans{
  /* the question beside it inherits the exam's sans; a Palatino answer set
     ten millimetres away was two faces on one line */
  font-family:inherit;
  font-size:14px; font-weight:400; letter-spacing:0;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--rvw-ink);
  padding:1px 12px 2px 8px;
  white-space:normal; overflow-wrap:anywhere; max-width:30ch; text-align:left;
}

/* ── the explanation button ────────────────────────────────────────────
   A control, so it takes the wrapper's control radius and its restrained
   white-on-hairline resting state; open, it fills with the certificate's
   navy. The label is the same letterspaced micro-caps the score report uses
   for CANDIDATE / MODULE / OVERALL BAND. The lightbulb is a drawn stroke
   icon rather than the 💡 emoji it used to be — an emoji renders as a
   different picture on every OS and belongs to no design. */
body.review-mode .explain-btn,
body.review-mode .explain-btn-sm{
  border:1px solid var(--rvw-line-2);
  border-radius:8px;
  background:var(--rvw-paper);
  color:var(--rvw-key);
  font-family:var(--pw-ui,Arial,sans-serif);
  font-weight:800; text-transform:uppercase;
  box-shadow:var(--rvw-e1);
  transition:background .16s cubic-bezier(.2,.7,.2,1),color .16s,border-color .16s,box-shadow .16s;
}
body.review-mode .explain-btn{padding:7px 13px; gap:7px; font-size:10px; letter-spacing:.16em}
body.review-mode .explain-btn-sm{padding:5px 10px; gap:5px; font-size:9.5px; letter-spacing:.10em}
body.review-mode .explain-btn .eb-ic,
body.review-mode .explain-btn-sm .eb-ic{
  width:12px; height:12px; flex:0 0 auto; display:block; color:currentColor}
body.review-mode .explain-btn-sm .eb-ic{width:11px; height:11px}
body.review-mode .explain-btn:hover, body.review-mode .explain-btn.open,
body.review-mode .explain-btn-sm:hover, body.review-mode .explain-btn-sm.open{
  background:var(--rvw-key); border-color:var(--rvw-key); color:#fff;
  box-shadow:var(--rvw-e2); transform:none;
}
body.review-mode.dark-mode .explain-btn:hover, body.review-mode.dark-mode .explain-btn.open,
body.review-mode.dark-mode .explain-btn-sm:hover, body.review-mode.dark-mode .explain-btn-sm.open{
  color:#10151C;
}
body.review-mode .explain-btn:focus-visible,
body.review-mode .explain-btn-sm:focus-visible{
  outline:2px solid var(--rvw-key); outline-offset:2px}
body.review-mode .explain-trigger-row{
  border-top:1px solid var(--rvw-line); margin-top:12px; padding:11px 0 2px; gap:5px}

/* ── the explanation panel ─────────────────────────────────────────────
   A card in the wrapper's idiom: white paper, hairline, card radius, the
   two-step elevation, and one navy edge to tie it to the button that opened
   it. The title is a micro-cap rule; the body is the wrapper's UI face at
   reading size. NB font-size for .ep-text and .pb-row is owned by the
   text-zoom block near the top of this stylesheet, which writes it with
   !important — --base-size is the only lever, so that is what is set here. */
body.review-mode .explain-panel{
  margin-top:10px;
  padding:14px 16px 15px;
  background:var(--rvw-paper);
  border:1px solid var(--rvw-line);
  border-left:2px solid var(--rvw-key);
  border-radius:14px;
  box-shadow:var(--rvw-e2);
}
body.review-mode.dark-mode .explain-panel{background:var(--rvw-paper)}
body.review-mode .explain-panel .ep-title{
  display:flex; align-items:center; gap:10px;
  font-family:var(--pw-ui,Arial,sans-serif);
  font-size:9.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--rvw-key); margin:0 0 10px;
}
body.review-mode .explain-panel .ep-title::after{
  content:""; flex:1 1 auto; height:1px; background:var(--rvw-line)}
body.review-mode .explain-panel .ep-text{
  --base-size:13.5px;
  font-family:var(--pw-ui,Arial,sans-serif);
  line-height:1.68; font-weight:400; color:var(--rvw-ink-2); margin:0}
body.review-mode .explain-panel .ep-text b,
body.review-mode .explain-panel .ep-text strong{color:var(--rvw-ink); font-weight:700}
body.review-mode .explain-panel .ep-text em,
body.review-mode .explain-panel .ep-text i{color:var(--rvw-ink); font-style:italic}

/* ── the synonym map ───────────────────────────────────────────────────
   Was outlined in IELTS red with red row rules — the accent this file
   reserves for the brand, spent on a table of word pairs. Now a plain
   hairline card: the question's wording on the left in ink, the passage's
   wording on the right in navy, one hairline between rows. */
body.review-mode .pb-header{
  font-family:var(--pw-ui,Arial,sans-serif);
  font-size:9.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--rvw-ink-3); margin:15px 0 7px}
body.review-mode .paraphrase-bridge{
  margin-top:0; padding:0; overflow:hidden;
  background:var(--rvw-surface);
  border:1px solid var(--rvw-line);
  border-radius:10px}
body.review-mode .pb-row{
  --base-size:12.5px;
  grid-template-columns:1fr 20px 1fr; gap:8px;
  padding:8px 12px; align-items:baseline;
  border-bottom:1px solid var(--rvw-line);
  font-family:var(--pw-ui,Arial,sans-serif); line-height:1.5}
body.review-mode .pb-row:last-child{border-bottom:none}
body.review-mode .pb-q{color:var(--rvw-ink-2); font-weight:600; text-align:right}
body.review-mode .pb-icon{color:var(--rvw-ink-3); font-weight:400; text-align:center}
body.review-mode .pb-p{color:var(--rvw-key); font-weight:700}

/* ── typed answers, dropdowns, drops and slots ─────────────────────────
   Same verdict pair everywhere, and a wrong entry is struck through: the
   student's word stays legible as the thing they wrote, while the key sits
   in the chip beside it. Written with !important for the same reason the
   option rows are — the themed exam skins repaint these too. */
body.review-mode .gap-input.correct,
body.review-mode .prose-gap .gap-input.correct{
  background:var(--rvw-ok-wash) !important; border-color:var(--rvw-ok) !important;
  color:var(--rvw-ok) !important; font-weight:700}
body.review-mode .gap-input.incorrect,
body.review-mode .prose-gap .gap-input.incorrect{
  background:var(--rvw-no-wash) !important; border-color:var(--rvw-no) !important;
  color:var(--rvw-no) !important;
  text-decoration:line-through; text-decoration-thickness:1px;
  text-decoration-color:var(--rvw-no-line)}
body.review-mode .dropdown.correct{
  background:var(--rvw-ok-wash) !important; border-color:var(--rvw-ok) !important; color:var(--rvw-ok) !important}
body.review-mode .dropdown.incorrect{
  background:var(--rvw-no-wash) !important; border-color:var(--rvw-no) !important; color:var(--rvw-no) !important}
body.review-mode .drop-zone.correct,
body.review-mode .word-drop.correct,
body.review-mode .para-heading-slot.correct{
  background:var(--rvw-ok-wash) !important; border-style:solid !important;
  border-color:var(--rvw-ok) !important; color:var(--rvw-ok) !important}
body.review-mode .drop-zone.wrong,
body.review-mode .word-drop.wrong,
body.review-mode .para-heading-slot.wrong{
  background:var(--rvw-no-wash) !important; border-style:solid !important;
  border-color:var(--rvw-no) !important}
body.review-mode .wd-correct{color:var(--rvw-ok); font-weight:700}
body.review-mode .wd-wrong{
  color:var(--rvw-no); font-weight:600; opacity:.85;
  text-decoration:line-through; text-decoration-thickness:1px;
  text-decoration-color:var(--rvw-no-line)}
body.review-mode .para-heading-slot .slot-correct{color:var(--rvw-ok); font-weight:700}
body.review-mode .para-heading-slot .slot-tick{color:var(--rvw-ok)}
body.review-mode .heading-explain-wrap{margin:0 0 8px}

/* ── the matching grid ─────────────────────────────────────────────────
   The key cell and the student's pick, in the same two colours as
   everything else. The dark and sepia skins had no counterpart at all, so
   the grid reviewed as a blank sheet in both. */
body.review-mode .match-grid .mg-cell.cell-correct{background:var(--rvw-ok-wash) !important}
body.review-mode .match-grid .mg-cell.cell-correct::after{color:var(--rvw-ok)}
body.review-mode .match-grid .mg-cell.cell-wrong{background:var(--rvw-no-wash) !important}
body.review-mode .match-grid .mg-cell.cell-wrong::after{color:var(--rvw-no)}
body.review-mode .match-grid tr.row-correct .mg-q{box-shadow:inset 3px 0 0 var(--rvw-ok)}
body.review-mode .match-grid tr.row-wrong .mg-q{box-shadow:inset 3px 0 0 var(--rvw-no)}

/* ── the highlights in the passage ─────────────────────────────────────
   The evidence highlight used the exact yellow of the student's own
   highlighter, so the two were indistinguishable in the one place it
   mattered. It keeps the yellow — the student is used to it — and gains a
   navy rule under it, the colour of the panel that put it there. */
body.review-mode .ep-highlight-src{
  background:var(--rvw-hl);
  color:var(--rvw-ink);
  border-radius:2px; padding:1px 2px;
  box-shadow:inset 0 -2px 0 var(--rvw-key);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
body.review-mode .syn-hl-applied{
  border-radius:2px; padding:0 2px; font-weight:600; color:var(--rvw-ink);
  -webkit-box-decoration-break:clone; box-decoration-break:clone}
body.review-mode.theme-sepia .syn-hl-applied.syn-hl-1{background:rgba(126,190,150,.45)}
body.review-mode.theme-sepia .syn-hl-applied.syn-hl-2{background:rgba(214,140,150,.40)}
body.review-mode.theme-sepia .syn-hl-applied.syn-hl-3{background:rgba(140,175,214,.45)}
body.review-mode.theme-sepia .syn-hl-applied.syn-hl-4{background:rgba(224,176,120,.48)}

/* The double-click dictionary is NOT restyled here. Its .dict-popup is a dark
   tooltip on purpose and is already theme-independent; more to the point, the
   dblclick never fired under automation in EITHER this file or the untouched
   original, so nothing about it could be seen and confirmed. Restyling a
   surface no one has looked at is how the last pass went wrong. Left alone. */

@media (prefers-reduced-motion:reduce){
  body.review-mode .explain-btn,body.review-mode .explain-btn-sm{transition:none}
}

.pass-img{display:block;max-width:100%;width:420px;margin:14px auto;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.pass-fig{display:block;margin:16px 0}
.pass-fig .pass-img{margin:0 auto 6px}
.pass-cap{display:block;text-align:center;font-size:12.5px;font-style:italic;color:#6b6b6b;max-width:460px;margin:0 auto;line-height:1.45}
.map-wrap{width:100%}
.map-wrap .map-label{padding:0}
.map-wrap .map-label .prose-gap{width:100%}
.map-wrap .map-label .prose-gap .gap-input{width:100%!important;min-width:0;height:auto;padding:2px 4px;font-size:12px;line-height:1.25;text-align:center;background:#fff;border:1.4px solid #1f4e9c;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.14)}
.map-wrap .map-label input::placeholder{color:transparent}
.syn-wrap{margin:30px 0 8px}
.syn-h{font-size:17px;font-weight:800;letter-spacing:-.01em;margin:0 0 4px}
.syn-note{font-size:12.5px;color:#6b6b6b;margin:0 0 14px;line-height:1.55;max-width:62ch}
.syn-card{border:1px solid rgba(60,60,67,.16);border-radius:12px;overflow:hidden;margin:0 0 14px;background:#fff}
.syn-ttl{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#8a8a8f;padding:10px 14px;border-bottom:1px solid rgba(60,60,67,.12);background:#fafafa}
.syn-tbl{width:100%;border-collapse:collapse;font-size:12.8px;line-height:1.5}
.syn-tbl th{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#9a9a9f;text-align:left;padding:8px 10px;border-bottom:1px solid rgba(60,60,67,.12)}
.syn-tbl td{padding:8px 10px;border-bottom:1px solid rgba(60,60,67,.08);vertical-align:top}
.syn-tbl tr:last-child td{border-bottom:none}
.sy-n{font-weight:800;color:#8a8a8f;width:34px;white-space:nowrap}
.sy-q{color:#3a3a3c;width:30%}
.sy-arr{color:#c41230;width:18px;text-align:center;font-weight:700}
.sy-p{color:#0a6b3d;font-weight:700;width:32%}
.sy-uz{color:#8a8a8f;font-size:12px}
body.dark-mode .syn-card{background:#141416;border-color:rgba(255,255,255,.14)}
body.dark-mode .syn-ttl{background:#1c1c1e;color:#a9a9ae;border-bottom-color:rgba(255,255,255,.1)}
body.dark-mode .syn-q,body.dark-mode .sy-q{color:#e6e6eb}
body.dark-mode .sy-p{color:#3ddc84}
body.dark-mode .syn-note,body.dark-mode .sy-uz,body.dark-mode .sy-n{color:#a9a9ae}
@media print{.syn-card{break-inside:avoid}}

/* ---------- 2. cosmos-registration ---------- */
/* ── COSMOS · the registration console ──────────────────────────────────────
   Two columns of copy became one small console, low on the frame, carrying
   only what a candidate needs in the ten seconds before they type their name.
   Everything cut from here is said again on the briefing screen that follows —
   except the strike rule, which is the one thing nobody may meet by surprise,
   so it stays, in the fine print.
   Nothing is removed from the DOM: every id, handler and class the engine
   binds to is still there, just not shown. Deleting this block restores the
   original screen exactly. */

/* low and narrow. `margin:auto auto <n>` is what moves it: the stage centres
   the card with auto margins, so leaving the top auto and pinning the bottom
   drops it without touching the stage's own flex layout. */
#stage-registration .start-card{
  max-width:600px;
  margin:auto auto clamp(22px,7vh,86px)}
#stage-registration .ch-grid{display:block}
#stage-registration .ch-ident{
  border-right:0;border-bottom:0;background:none;display:block;
  padding:clamp(17px,2vw,21px) clamp(19px,2.4vw,26px) 0}
#stage-registration .ch-action{
  padding:clamp(11px,1.4vw,14px) clamp(19px,2.4vw,26px) clamp(15px,1.8vw,19px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:start}

/* the words the sky, the briefing screen or the field itself says better */
#stage-registration :is(.brand-tagline,.ch-lede,.start-rules,.ch-label,.input-label,
  .ch-credit,.channel-promo .channel-desc,.channel-promo .channel-cta){display:none}
/* the hint is the field's error channel — hidden until it has something to say,
   which is the one thing that must not be lost by hiding copy here */
#stage-registration .ch-hint{display:none;margin:8px 2px 0}
#stage-registration .ch-field.is-invalid .ch-hint{display:flex}

/* identity, at a fraction of the weight */
#stage-registration .brand-block{gap:9px;margin:0 0 11px}
#stage-registration .brand-logo{width:29px;height:29px;border-radius:9px;
  box-shadow:0 4px 12px -5px rgba(9,38,92,.9),0 0 0 1px rgba(255,255,255,.09)}
#stage-registration .brand-eyebrow{font-size:12px;font-weight:600;letter-spacing:.01em}
#stage-registration .ch-kicker{font-size:9.5px;letter-spacing:.2em}
#stage-registration .start-title{font-size:clamp(20px,1.9vw,25px);margin:6px 0 0!important;max-width:none}

/* 60 · 40 · 3 as one line of reading, not a scoreboard */
#stage-registration .start-meta{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:5px 14px;
  margin:9px 0 0;padding:0;border:0;background:none;box-shadow:none}
#stage-registration .start-meta-item{display:flex;align-items:baseline;gap:5px;flex:0 0 auto;text-align:left}
#stage-registration .start-meta-item .n{font-size:14px;letter-spacing:-.01em;color:var(--ch-ink-2)}
#stage-registration .start-meta-item .l{font-size:9px;letter-spacing:.13em;margin:0}
#stage-registration .start-meta-divider{align-self:center;height:9px}

/* name and Begin on one row, matched heights so the pair reads as one control */
#stage-registration .ch-field{grid-column:1;grid-row:1;margin:0;padding:0}
#stage-registration .input-field{height:46px;padding:0 15px;font-size:14px;border-radius:12px}
#stage-registration .ch-input-wrap,
#stage-registration .ch-input-wrap::after{border-radius:12px}
#stage-registration #start-btn{grid-column:2;grid-row:1;width:auto;height:46px;
  padding:0 20px;font-size:13.5px;border-radius:12px;white-space:nowrap;margin:0}
#stage-registration .ch-fineprint{grid-column:1/-1;grid-row:2;text-align:left;
  margin:11px 2px 0;font-size:11px;line-height:1.5}

/* the completion screen's own credit — "Built from scratch by …" — is the
   third wording of a line the candidate has already read twice */
#stage-completion .ch-sign{display:none}

/* Print goes; Download PDF writes the same typeset sheet in one click, and
   saveReportPdf() stays bound so Cmd/Ctrl+P still works */
#results-print-btn{display:none}

/* ── review chrome ──────────────────────────────────────────────────────────
   the explanation chip keeps its shape — only its blue is brought into line */
body.review-mode .explain-btn-sm{border-color:#c9d6ea;color:#2c5fa8}

/* ── the certificate, staged for export ─────────────────────────────────────
   PDFX moves #results-content off-screen at the printed column width and reads
   computed styles off it. Two things have to be true at that moment.

   1 · Nothing may still be animating. The sheet arrives in parts on a certPart
       keyframe with `both` fill, so a section caught before its delay elapses
       is read at opacity 0 and exports blank — the band note was coming out a
       ghost. Killing the animations lets every part sit at its resting state.

   2 · The answer summary must keep its two columns. 180mm is narrow enough to
       trip the stacked rule, which doubles the sheet's height and forces PDFX's
       fit-to-page backstop to shrink the whole certificate to about half size. */
#results-content.pdfx-stage *,
#results-content.pdfx-stage *::before,
#results-content.pdfx-stage *::after{
  animation:none!important;transition:none!important}
#results-content.pdfx-stage .answer-cols{grid-template-columns:1fr 1fr!important}
/* and the review call-to-action does not survive the trip to paper: it is a
   button, and nobody can press it there */
#results-content.pdfx-stage .review-cta{display:none!important}

/* The review button was taking --acc-ink, which is the BAND TIER's accent —
   at band 0 that is a muted slate, so the only action on the page rendered as
   though it were disabled. The tier keeps the rules, the glow and the meta;
   the action takes the document's action blue at every band. */
#stage-results .review-cta .btn-primary{background:#2c5fa8;color:#fff}
#stage-results .review-cta .btn-primary:hover{background:#2a5899}

/* ── the hand-off into the exam ──────────────────────────────────────────────
   beginReading() already raises a curtain — body.cdi-exit, held for 380ms
   before the stage swap — but it was written for the three.js layer this build
   retires, so CDIAtmosphere.dim() fades nothing and the field stayed lit until
   the frame the exam replaced it. These hang the curtain on the field instead. */
#cdi-stars-host{transition:opacity .24s ease}
body.cdi-exit #cdi-stars-host{opacity:0}

/* and the ground it uncovers travels to the exam's own white, so the last
   thing the dissolve reveals is already the colour the test arrives on */
body{transition:background-color .24s ease}
body.cdi-exit{background:#fff}

/* the stage's vignette goes with them. It is painted over the field, not by
   it, so on its own it survived the dissolve and left the white reveal with
   grey corners — the ring of a room the exam is not in. */
#stage-reading-intro::after{transition:opacity .24s ease}
body.cdi-exit #stage-reading-intro::after{opacity:0}

/* the exam then fades up over that ground rather than appearing between two
   frames. Opacity only — no transform, nothing that moves type a student is
   about to read — and it ends at 1, so the exam looks exactly as it always did
   from the moment it has settled. */
@keyframes cdiExamIn{from{opacity:0}to{opacity:1}}
#stage-reading.active{animation:cdiExamIn .2s ease both}

@media (prefers-reduced-motion:reduce){
  #cdi-stars-host,body{transition:none}
  #stage-reading.active{animation:none}
}

/* ── the certificate, in Cosmos ──────────────────────────────────────────────
   Paper, not a black rectangle. What ties it to the field is the temperature
   and the light: the cream goes cool, the brown ink goes navy, and the sheet
   carries a deep wide shadow so it reads as lit paper held in front of the
   stars rather than a panel pasted over them. Appended last, so it wins over
   the base cert tokens on source order at equal specificity. */
#stage-results .cert{
  --c-paper:#fbfcff; --c-paper-2:#eef3fb; --c-paper-3:#f5f8fd; --c-paper-4:#e9f0fa;
  --c-ink:#101828;   --c-ink-2:#44506a;   --c-ink-3:#7c88a0;
  --c-line:rgba(16,24,40,.10); --c-line-2:rgba(16,24,40,.17);
  --c-track:rgba(16,24,40,.08);
  --pw-paper:#fbfcff; --pw-ink:#101828; --pw-ink-2:#44506a; --pw-ink-3:#7c88a0;
  --pw-line:rgba(16,24,40,.10); --pw-line-2:rgba(16,24,40,.17);
  background:#fbfcff;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 2px 10px rgba(2,6,20,.45),0 34px 80px -24px rgba(2,6,20,.78);
}


/* the channel, reduced to a mention */
#stage-registration .channel-promo{padding:9px clamp(19px,2.4vw,26px);gap:9px}
#stage-registration .channel-promo .tg-icon{width:22px;height:22px;border-radius:7px;font-size:11px}
#stage-registration .channel-promo .channel-name{font-size:11.5px;font-weight:600}

/* the card's own light was red and gold, which belonged to the old chamber.
   On this sky it reads as a warning; starlight is what belongs here. */
/* the focus ring reached for the same red; on this sky it looks like an error */
#stage-registration .ch-input-wrap::after{
  background:linear-gradient(115deg,rgba(176,212,255,1),rgba(128,168,235,.45) 52%,rgba(150,190,240,.40))}
#stage-registration .input-field:focus{
  background:rgba(130,180,240,.075);
  box-shadow:0 0 0 5px rgba(130,180,240,.10),0 10px 30px -16px rgba(150,195,245,.7)}
#stage-registration .start-card::before{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10) 12%,rgba(170,205,245,.5) 34%,
    rgba(255,255,255,.72) 52%,rgba(150,190,235,.42) 70%,rgba(255,255,255,.10) 90%,transparent)}
#stage-registration .start-card::after{
  background:radial-gradient(120% 76% at 8% -6%,rgba(120,180,240,.10),transparent 58%),
             radial-gradient(90% 60% at 104% 108%,rgba(86,138,206,.075),transparent 62%)}
/* a shade more transparent than the chamber card: the field has to be visible
   THROUGH it, or the console reads as a lid on the sky rather than a thing in it */
#stage-registration .start-card{
  background:linear-gradient(180deg,rgba(11,16,27,.70),rgba(5,8,16,.78));
  -webkit-backdrop-filter:blur(17px) saturate(1.2);backdrop-filter:blur(17px) saturate(1.2)}

@media (max-width:560px){
  #stage-registration .ch-action{grid-template-columns:1fr}
  #stage-registration #start-btn{grid-column:1;grid-row:2;width:100%;margin-top:9px}
  #stage-registration .ch-fineprint{grid-row:3}
  #stage-registration .start-card{margin-bottom:16px}
}
/* a short viewport has no room for a gap under the card */
@media (max-height:620px){#stage-registration .start-card{margin-bottom:16px}}

/* ── COSMOS · the briefing ──────────────────────────────────────────────────
   The screen between the name and the paper. Nobody reads three paragraphs of
   pacing advice with the clock about to start, so what survives is what they
   would actually look for: which passage holds which questions, and roughly
   how long each should take. Same width, same place on the frame as the
   registration console, so moving between the two screens the card stays put
   and only its contents change. */
#stage-reading-intro .trans-card{
  max-width:600px;margin:auto auto clamp(22px,7vh,86px);
  padding:clamp(17px,2vw,21px) clamp(19px,2.4vw,26px) clamp(16px,1.8vw,20px);
  background:linear-gradient(180deg,rgba(11,16,27,.70),rgba(5,8,16,.78));
  -webkit-backdrop-filter:blur(17px) saturate(1.2);backdrop-filter:blur(17px) saturate(1.2)}
#stage-reading-intro .trans-card::before{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10) 12%,rgba(170,205,245,.5) 34%,
    rgba(255,255,255,.72) 52%,rgba(150,190,235,.42) 70%,rgba(255,255,255,.10) 90%,transparent)}
#stage-reading-intro .trans-card::after{
  background:radial-gradient(120% 76% at 8% -6%,rgba(120,180,240,.10),transparent 58%),
             radial-gradient(90% 60% at 104% 108%,rgba(86,138,206,.075),transparent 62%)}

#stage-reading-intro .ch-head{gap:11px;margin-bottom:10px}
#stage-reading-intro .ch-mark{width:30px;height:30px;border-radius:9px}
#stage-reading-intro .ch-mark svg{width:15px;height:15px}
#stage-reading-intro .trans-eyebrow{font-size:9.5px;letter-spacing:.2em}
#stage-reading-intro .trans-title{font-size:clamp(20px,1.9vw,25px);margin:4px 0 0}
#stage-reading-intro .trans-sub{font-size:12.5px;line-height:1.5;margin:0 0 11px;max-width:none}

/* three passages, three chips: the name, the pacing, the question range */
#stage-reading-intro .ch-tasks{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 12px}
#stage-reading-intro .ch-task{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:9px 11px;border-radius:10px}
#stage-reading-intro .ch-task p{display:none}          /* the pacing prose */
#stage-reading-intro .trans-notes{display:none}        /* the five reading tips */
#stage-reading-intro .ch-task-h{width:100%;margin:0;gap:8px}
#stage-reading-intro .ch-task-n{font-size:12.5px}
#stage-reading-intro .ch-task-t{font-size:8.5px;padding:2px 6px;letter-spacing:.1em}
#stage-reading-intro .ch-task-f{border-top:0;padding:0;margin:0;font-size:10.5px;white-space:nowrap}

#stage-reading-intro .btn-lg{height:46px;padding:0 20px;font-size:13.5px;border-radius:12px;margin-top:0}
#stage-reading-intro .ch-fineprint{margin-top:10px;font-size:11px;line-height:1.5}

/* The action was the loudest red on a screen made of starlight — it read as a
   warning rather than an invitation. The warning card keeps its red, because
   there the colour is the message. */
:is(#stage-registration,#stage-reading-intro,#stage-completion) .btn-primary{
  background:linear-gradient(180deg,#2c82d4,#14538f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.26),
             0 1px 2px rgba(0,0,0,.4),0 14px 30px -20px rgba(80,160,240,.9)}
:is(#stage-registration,#stage-reading-intro,#stage-completion) .btn-primary:hover{
  background:linear-gradient(180deg,#3a93e4,#17609f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(0,0,0,.24),
             0 2px 4px rgba(0,0,0,.38),0 20px 38px -20px rgba(90,170,245,.95)}

@media (max-width:560px){
  #stage-reading-intro .ch-tasks{grid-template-columns:1fr;gap:6px}
  #stage-reading-intro .ch-task{flex-direction:row;align-items:baseline;justify-content:space-between}
  #stage-reading-intro .ch-task-h{width:auto}
  #stage-reading-intro .trans-card{margin-bottom:16px}
}
@media (max-height:620px){#stage-reading-intro .trans-card{margin-bottom:16px}}

/* ── COSMOS · the completion console ────────────────────────────────────────
   The third screen in the same frame: same 600px, same place, same glass. What
   goes is the paragraph of encouragement — nobody reads a pep talk with a band
   score two seconds away — and the box it sat in; the signature survives as a
   plain line. The three marking steps stay: they are not copy, they tick as the
   paper is actually marked, and they are the only thing on screen while it is. */
#stage-completion .complete-card{
  max-width:600px;margin:auto auto clamp(22px,7vh,86px);
  background:linear-gradient(180deg,rgba(11,16,27,.70),rgba(5,8,16,.78));
  -webkit-backdrop-filter:blur(17px) saturate(1.2);backdrop-filter:blur(17px) saturate(1.2)}
#stage-completion .complete-card::before{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10) 12%,rgba(170,205,245,.5) 34%,
    rgba(255,255,255,.72) 52%,rgba(150,190,235,.42) 70%,rgba(255,255,255,.10) 90%,transparent)}
#stage-completion .complete-card::after{
  background:radial-gradient(120% 76% at 8% -6%,rgba(120,180,240,.10),transparent 58%),
             radial-gradient(90% 60% at 104% 108%,rgba(86,138,206,.075),transparent 62%)}
#stage-completion .ch-comp-body{
  padding:clamp(17px,2vw,21px) clamp(19px,2.4vw,26px) clamp(16px,1.8vw,20px)}

#stage-completion .ch-comp-head{gap:12px}
#stage-completion .ch-seal,#stage-completion .ch-seal svg{width:38px;height:38px}
#stage-completion .ch-seal-core{inset:5px}
#stage-completion .ch-seal-core svg{width:14px;height:14px}
#stage-completion .ch-seal-pct{font-size:10px}
#stage-completion .trans-eyebrow{font-size:9.5px;letter-spacing:.2em}
#stage-completion .complete-title{font-size:clamp(20px,1.9vw,25px);margin:4px 0 0}
#stage-completion .complete-sub{font-size:12px;margin:5px 0 0}

#stage-completion .ch-steps{padding-top:12px;margin-top:12px}
#stage-completion .ch-steps li{font-size:11.5px;gap:9px;margin-bottom:7px}
#stage-completion .ch-step-dot{width:14px;height:14px}
#stage-completion .ch-step-dot::before{left:4.4px;top:2.4px;width:3.2px;height:6.2px}

/* the pep talk goes; the signature stays, without its box */
#stage-completion .ch-note{margin-top:11px;padding:0;border:0;background:none}
#stage-completion .ch-note p:not(.ch-sign){display:none}
#stage-completion .ch-sign{margin-top:0!important;padding-top:11px;font-size:10.5px}

#stage-completion .ch-cta-slot{margin-top:12px;min-height:46px}
#stage-completion .ch-wait{font-size:11px}
#stage-completion .btn-lg{height:46px;padding:0 20px;font-size:13.5px;border-radius:12px}

#stage-completion .channel-promo{padding:9px clamp(19px,2.4vw,26px);gap:9px}
#stage-completion .channel-promo .tg-icon{width:22px;height:22px;border-radius:7px;font-size:11px}
#stage-completion .channel-promo .channel-name{font-size:11.5px;font-weight:600}
#stage-completion :is(.channel-promo .channel-desc,.channel-promo .channel-cta){display:none}

/* The marking ring ran blue → blue → #ff5c78. That last stop was the only warm
   red left on any wrapper screen, and it sat inside the one element the eye is
   actually watching while it fills. SVG stops take CSS, so it retunes here. */
#stage-completion #chSealGrad stop:last-child{stop-color:#cfe6ff}

@media (max-height:620px){#stage-completion .complete-card{margin-bottom:16px}}

/* ── COSMOS · the results topbar ────────────────────────────────────────────
   The report itself is a paper document and stays paper — it is what the PDF
   export writes. Only the bar above it is chrome, and its primary action was
   the last red button in the shell. The gold "New test" hairline is left alone:
   a warm accent belongs on a field this warm, and it is the one control that
   should not look like the one beside it. */
#stage-results .topbar .btn-primary{
  background:linear-gradient(180deg,#2c82d4,#14538f);
  box-shadow:0 8px 22px -10px rgba(80,160,240,.75),inset 0 1px 0 rgba(255,255,255,.2)}
#stage-results .topbar .btn-primary:hover{
  background:linear-gradient(180deg,#3a93e4,#17609f)}

/* ── COSMOS · the integrity card ────────────────────────────────────────────
   The one screen here that is not on the sky: it opens over the live exam when
   someone leaves full-screen or switches tabs. So this matches the CONSOLES'
   material and rhythm — the same glass, the same radius, the same type sizes,
   the same 12px button — while every red on it stays exactly where it was. On
   this card the colour is the message: the alert mark, the strike meter, the
   reason rail and the button are the alarm, and turning them azure like every
   other primary in the shell would make a violation look like an invitation.
   What does change is the wash behind it, which was tinted red over the whole
   viewport — an alarm the size of the screen, for a first warning of three. */
#warning-overlay{
  background:radial-gradient(900px 600px at 50% 38%,rgba(10,18,36,.74),rgba(3,6,12,.92));
  -webkit-backdrop-filter:blur(10px) saturate(.9);backdrop-filter:blur(10px) saturate(.9)}
#warning-overlay .warning-card{
  max-width:600px;border-radius:clamp(16px,1.6vw,24px);border-top-width:1px;
  background:linear-gradient(180deg,rgba(11,16,27,.74),rgba(5,8,16,.82));
  -webkit-backdrop-filter:blur(17px) saturate(1.2);backdrop-filter:blur(17px) saturate(1.2);
  overflow:hidden}
/* the console edge light, in the alarm's colour rather than starlight */
#warning-overlay .warning-card::before{
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(225,29,60,.35) 14%,#ff5e78 50%,
    rgba(225,29,60,.35) 86%,transparent)}

#warning-overlay .wc-body{padding:clamp(17px,2vw,21px) clamp(19px,2.4vw,26px) clamp(15px,1.8vw,18px)}
#warning-overlay .wc-top{gap:12px;margin-bottom:13px}
#warning-overlay .warning-card .ic{width:34px;height:34px;border-radius:10px}
#warning-overlay .warning-card .ic svg{width:17px;height:17px}
#warning-overlay .wc-eyebrow{font-size:9.5px;letter-spacing:.2em}
#warning-overlay .warning-card h2{font-size:clamp(20px,1.9vw,25px);margin:4px 0 0}
#warning-overlay .warning-card p{font-size:12.5px;line-height:1.55}
#warning-overlay .wc-reason{padding:10px 13px;border-radius:11px;margin-bottom:14px}
#warning-overlay .wc-reason p{font-size:12.5px}
#warning-overlay .wc-meter{margin-bottom:14px}
#warning-overlay .warning-card .strike-counter .strike{height:6px}
#warning-overlay #warning-strikes-text{font-size:11px;margin-top:9px}
#warning-overlay .wc-foot{padding:12px clamp(19px,2.4vw,26px)}
#warning-overlay .wc-note{font-size:11px}
#warning-overlay .wc-btn{height:42px;padding:0 20px;border-radius:12px;font-size:13.5px}

.map-wrap .gap-input{width:96px;min-width:0;padding:2px 5px;text-align:center;font-size:.82rem;}

/* ---------- 3. mono-skin ---------- */
/* ══════════════════════════════════════════════════════════════════════════
   READING_CDI SHELL — the login card and the report sheet, built to match the
   reference paper ("All in the Family") exactly. Appended last on purpose: it
   wins over the wrapper skins further up without touching #stage-reading,
   which is the Arial exam screen and stays as it is.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --rcx-ink:#000; --rcx-paper:#fff; --rcx-panel:#f2f2f2;
  --rcx-line:#d7d7d7; --rcx-line2:#b9b9b9;
  --rcx-red:#E31837; --rcx-blue:rgb(65,142,200); --rcx-green:#358E14; --rcx-muted:#6b7078;
}

/* the wrapper's particle / vignette layers never paint */
#cdi-webgl,#cdi-stars-host,#ch-strike,#ch-bloom{display:none !important}
:is(#stage-registration,#stage-completion,#stage-results)::before,
:is(#stage-registration,#stage-completion,#stage-results)::after{
  display:none !important;content:none !important;background:none !important;
}
/* the interstitial "answer sheet is in" screen is not part of this paper */
#stage-completion{display:none !important}
/* the login card means there IS a name to show in the exam header again */
#hdr .ttid-name{display:block !important}

/* ───────────────────────────── LOGIN ───────────────────────────── */
#stage-registration.active{display:flex !important}
#stage-registration{
  align-items:center !important;justify-content:center !important;
  background:#f4f4f4 !important;padding:24px !important;overflow-y:auto !important;
  font-family:Arial,Helvetica,sans-serif !important;color:var(--rcx-ink) !important;
  animation:none !important;
}
.rcx-card{
  background:#fff;border:1px solid var(--rcx-line);border-radius:10px;padding:34px 38px;
  width:min(560px,100%);box-shadow:0 8px 30px rgba(0,0,0,.07);margin:auto;
  font-family:Arial,Helvetica,sans-serif;color:var(--rcx-ink);text-align:left;
}
.rcx-wordmark{color:var(--rcx-red);font-weight:900;letter-spacing:.5px;font-size:24px;display:inline-block}
.rcx-card h1{font-size:23px;margin:18px 0 4px;font-weight:700;color:var(--rcx-ink);line-height:1.25}
.rcx-lead{color:var(--rcx-muted);font-size:15px;margin:0 0 22px;line-height:1.5}
.rcx-field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--rcx-ink)}
.rcx-field input{
  width:100%;padding:12px 14px;font-size:16px;border:1px solid var(--rcx-line2);
  border-radius:6px;background:#fff;color:var(--rcx-ink);font-family:Arial,Helvetica,sans-serif;
}
.rcx-field input::placeholder{color:#9a9a9a}
.rcx-field input:focus{outline:none;border-color:var(--rcx-blue);box-shadow:0 0 0 2px rgba(65,142,200,.25)}
.rcx-field.is-invalid input{border-color:var(--rcx-red);box-shadow:0 0 0 2px rgba(227,24,55,.20)}
.rcx-err{color:var(--rcx-red);font-size:13px;margin-top:7px;min-height:17px}
.rcx-note{
  border-left:3px solid var(--rcx-red);background:#fdf3f5;padding:14px 16px;font-size:14px;
  border-radius:0 6px 6px 0;margin:18px 0 0;line-height:1.55;color:var(--rcx-ink);
}
.rcx-btn{
  background:var(--rcx-red);color:#fff;border:0;border-radius:6px;padding:12px 26px;
  font-size:15px;font-weight:700;cursor:pointer;margin-top:22px;
  font-family:Arial,Helvetica,sans-serif;
}
.rcx-btn:hover{background:#c2122f}
.rcx-fine{margin:20px 0 0;font-size:12px;color:var(--rcx-muted);line-height:1.5}

/* ───────────────────────────── REPORT ──────────────────────────── */
#stage-results.active{display:flex !important}
#stage-results{
  background:#fff !important;flex-direction:column !important;
  font-family:Arial,Helvetica,sans-serif !important;color:var(--rcx-ink) !important;
  animation:none !important;
}
.rcx-hdr{
  flex:0 0 auto;height:56px;display:flex;align-items:center;justify-content:space-between;
  background:#fff;position:relative;z-index:60;
}
.rcx-hdr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rcx-line)}
.rcx-hdr-left,.rcx-hdr-right{display:flex;align-items:center}
.rcx-mark{box-sizing:content-box;width:92.5px;height:27.2px;padding:14.4px 16px;display:flex}
.rcx-mark svg{display:block;width:92.5px;height:27.2px}
.rcx-ttblock{display:flex;align-items:center;padding:8px 32px 8px 16px;height:40px}
.rcx-ttid{font-size:16px;font-weight:700;color:var(--rcx-ink)}
.rcx-tglink{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--rcx-red);
  font-weight:900;font-size:15px;letter-spacing:.4px;padding:7px 13px;margin-right:22px;
  border:1.5px solid var(--rcx-red);border-radius:999px;white-space:nowrap;background:#fff;
}
.rcx-tglink:hover{background:var(--rcx-red);color:#fff}
.rcx-tglink svg{width:16px;height:16px;fill:currentColor}

#stage-results .results-content{
  flex:1 1 auto;min-height:0;overflow-y:auto;padding:0;background:#fff;display:block;
}
.rcx-res{padding:30px 40px 60px;max-width:1000px}
.rcx-res h1{font-size:25px;margin:0 0 4px;font-weight:700;color:var(--rcx-ink)}
.rcx-who{color:#555;font-size:14px;margin:0 0 22px}
.rcx-scorerow{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.rcx-sbox{
  border:1px solid var(--rcx-line);border-radius:6px;padding:16px 26px;text-align:center;min-width:130px;
}
.rcx-sbox .num{font-size:30px;font-weight:800;color:var(--rcx-ink);line-height:1.1}
.rcx-sbox .lbl{font-size:13px;color:#666;margin-top:4px}
.rcx-scale{font-size:14px;color:#555;max-width:760px;margin:-14px 0 22px;line-height:1.55}
/* ── ANSWER REVIEW + EXPLANATIONS ────────────────────────────────
   The review list is the READING_CDI one, brought over as it stands:
   number / your answer / the key / a badge, then the English "Why"
   panel and the Oʻzbekcha panel stacked underneath it. */
#stage-results{
  --panel:#fafafa; --panel-solid:#fff; --text:#1c1c1e; --text2:#6e6e73; --text3:#98989d;
  --border:rgba(60,60,67,.13); --hairline:rgba(60,60,67,.08);
  --accent:#e31837; --accent-dark:#c11530; --accent-light:rgba(227,24,55,.10);
  --green:#22a559; --green-bg:rgba(34,165,89,.14);
  --redx:#ff3b30; --red-bg:rgba(255,59,48,.12);
  --yellow:#ff9500; --yellow-bg:rgba(255,149,0,.15);
}
.res-filter-bar{
  display:flex;gap:6px;margin:0 0 14px;background:var(--border);padding:4px;
  border-radius:99px;width:fit-content;max-width:100%;flex-wrap:wrap;
}
.res-filter-btn{
  background:transparent;border:none;border-radius:99px;padding:6px 15px;font-size:12.5px;
  font-weight:600;cursor:pointer;color:var(--text2);transition:.2s;
  font-family:Arial,Helvetica,sans-serif;
}
.res-filter-btn.active{background:var(--panel-solid);color:var(--accent);box-shadow:0 2px 6px rgba(0,0,0,.08)}
#res-details{max-width:900px}
#res-details.f-wrong   .res-row:not(.is-wrong){display:none}
#res-details.f-skipped .res-row:not(.is-skipped){display:none}
#res-details:empty::after{content:'Nothing to show for this filter';color:var(--text3)}
.res-row{
  display:grid;grid-template-columns:44px 1fr 1fr 92px;gap:8px;padding:11px 6px;
  border-bottom:1px solid var(--hairline);font-size:13px;align-items:start;
}
.res-row.is-correct{background:rgba(34,165,89,.05)}
.res-row.is-wrong{background:rgba(255,59,48,.05)}
.res-row.is-skipped{background:rgba(255,149,0,.06)}
.res-num{
  font-weight:700;color:var(--text);background:var(--panel);border:1px solid var(--border);
  border-radius:8px;width:34px;height:27px;display:flex;align-items:center;justify-content:center;
}
.res-user{
  background:var(--panel);border:1px solid var(--border);padding:3px 7px;border-radius:7px;
  color:var(--text);font-size:12.5px;word-break:break-word;
}
.res-correct{
  color:var(--green);font-weight:600;background:var(--green-bg);border:1px solid rgba(34,165,89,.25);
  padding:3px 7px;border-radius:7px;font-size:12.5px;word-break:break-word;
}
.res-badge{
  justify-self:end;padding:3px 10px;border-radius:99px;font-size:10.5px;font-weight:700;
  white-space:nowrap;align-self:center;
}
.res-badge.ok{background:var(--green-bg);color:var(--green);border:1px solid rgba(34,165,89,.3)}
.res-badge.bad{background:var(--red-bg);color:var(--redx);border:1px solid rgba(255,59,48,.3)}
.res-badge.skip{background:var(--yellow-bg);color:var(--yellow);border:1px solid rgba(255,149,0,.3)}
.res-explain-en{
  font-size:12.5px;color:var(--text2);line-height:1.5;background:var(--panel);
  border-radius:8px;padding:9px 11px;margin-top:6px;grid-column:1/-1;
}
.res-explain-uz{
  font-size:12.5px;color:var(--text);line-height:1.5;background:var(--accent-light);
  border-radius:8px;padding:9px 11px;margin-top:4px;grid-column:1/-1;
  border-left:3px solid var(--accent);
}
.res-explain-en b,.res-explain-uz b{color:var(--accent);font-weight:700}
.res-explain-en em,.res-explain-uz em{font-style:italic}
@media (max-width:620px){
  .res-row{grid-template-columns:38px 1fr 84px;row-gap:6px}
  .res-correct{grid-column:2/-1}
}
.rcx-btnrow{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap}
.rcx-btnrow button{
  background:#111;color:#fff;border:none;padding:11px 22px;border-radius:4px;
  cursor:pointer;font-size:15px;font-family:Arial,Helvetica,sans-serif;
}
.rcx-btnrow button:hover{background:#000}
.rcx-btnrow button.ghost{background:#fff;color:#111;border:1px solid #111}
.rcx-btnrow button.ghost:hover{background:#f2f2f2}

@media (max-width:720px){
  .rcx-res{padding:22px 18px 48px}
  .rcx-scorerow{gap:12px}
  .rcx-sbox{min-width:0;flex:1 1 40%;padding:13px 10px}
  .rcx-tglink{margin-right:12px;font-size:13px;padding:6px 10px}
  .rcx-ttblock{padding:8px 12px}
  table.rcx-rev{font-size:14px}
}

/* ── results as a window over the passage ────────────────────────────
   Matches the Flower Power reference: the report opens as a card floating
   over a dimmed, blurred passage instead of replacing the screen. Sits last
   on purpose, so it outranks every earlier full-page #stage-results rule
   above (several of them carry !important from the old report design). */
#stage-results{
  background:rgba(10,10,14,.45) !important;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  align-items:center !important;
  justify-content:center !important;
  padding:24px;
  z-index:2000 !important;
}
.results-modal-box{
  position:relative;
  background:#fff;
  border-radius:18px;
  width:100%;
  max-width:1000px;
  max-height:88vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 24px 70px -20px rgba(0,0,0,.5);
}
.results-modal-box .rcx-hdr{flex:0 0 auto}
.results-modal-box .rcx-hdr-right{padding-right:34px}
.results-modal-box #results-content{flex:1 1 auto;min-height:0;overflow-y:auto}
.results-modal-close{
  position:absolute;top:14px;right:14px;z-index:100;
  width:32px;height:32px;border-radius:50%;
  border:none;background:rgba(0,0,0,.07);
  font-size:19px;line-height:1;color:#444;cursor:pointer;
}
.results-modal-close:hover{background:rgba(0,0,0,.14)}
body.dark-mode .results-modal-box{background:#1c1f26}
body.dark-mode .results-modal-close{background:rgba(255,255,255,.10);color:#eee}
body.dark-mode .results-modal-close:hover{background:rgba(255,255,255,.18)}
@media (max-width:620px){
  #stage-results{padding:0}
  .results-modal-box{max-width:100%;max-height:100vh;border-radius:0}
}

/* ═══════════════════════════════════════════════════════════════════
   FLOWER POWER explanation style — panels, yellow 💡 highlights
   with the note opening inline in the passage itself.
   The panels and buttons speak in the reading screen's own review key
   (the navy of the score report, light blue in dark mode), not in red:
   red is the exam's brand and its "wrong answer" colour, and a red
   explanation next to a red cross read as a second error.
   ═══════════════════════════════════════════════════════════════════ */
body.review-mode{
  --fp-accent:var(--rvw-key); --fp-accent-dark:var(--rvw-key);
  --fp-light:var(--rvw-key-wash); --fp-line:var(--rvw-line-2);
  --fp-ink:var(--rvw-ink); --fp-hl:#ffeb3b;
}
body.review-mode.dark-mode{
  --fp-accent:var(--rvw-key); --fp-accent-dark:var(--rvw-key);
  --fp-light:var(--rvw-key-wash); --fp-line:var(--rvw-line-2);
  --fp-ink:var(--rvw-ink); --fp-hl:#ffd426;
}
/* the Uzbek half of an explanation: a hairline in the panel's own colour (the pages
   write it with an inline black rule, invisible on the dark screen) */
.explain-panel .ep-text .ep-uz,.fp-note .ep-uz,
.explain-panel .ep-text div[style*="border-top"],.fp-note div[style*="border-top"]{
  margin-top:9px;padding-top:8px;border-top:1px solid var(--fp-line,rgba(0,0,0,.14)) !important}

/* ── the per-question panel in the question pane ── */
body.review-mode .explain-panel{
  background:var(--fp-light);
  border:0; border-left:3px solid var(--fp-accent);
  border-radius:8px; box-shadow:none;
  padding:10px 13px 12px; margin-top:9px;
}
body.review-mode.dark-mode .explain-panel{background:var(--fp-light)}
body.review-mode .explain-panel .ep-title{
  font-size:10px; letter-spacing:.14em; color:var(--fp-accent); margin:0 0 8px}
body.review-mode .explain-panel .ep-title::after{background:var(--fp-line)}
body.review-mode .explain-panel .ep-text{
  --base-size:13px; color:var(--fp-ink); line-height:1.6}
body.review-mode .explain-panel .ep-text b,
body.review-mode .explain-panel .ep-text strong{color:var(--fp-accent);font-weight:700}
body.review-mode .explain-panel .ep-text em,
body.review-mode .explain-panel .ep-text i{color:var(--fp-ink);font-style:italic}

/* ── the lightbulb buttons ── */
body.review-mode .explain-btn,
body.review-mode .explain-btn-sm{
  border-color:var(--fp-line); color:var(--fp-accent); box-shadow:none}
body.review-mode .explain-btn:hover, body.review-mode .explain-btn.open,
body.review-mode .explain-btn-sm:hover, body.review-mode .explain-btn-sm.open{
  background:var(--fp-accent); border-color:var(--fp-accent); color:#fff; box-shadow:none}
body.review-mode.dark-mode .explain-btn:hover, body.review-mode.dark-mode .explain-btn.open,
body.review-mode.dark-mode .explain-btn-sm:hover, body.review-mode.dark-mode .explain-btn-sm.open{color:#10151C}
body.review-mode .explain-btn:focus-visible,
body.review-mode .explain-btn-sm:focus-visible{outline-color:var(--fp-accent)}

/* ── the synonym map, in the same red key ── */
body.review-mode .pb-header{color:var(--fp-accent)}
body.review-mode .paraphrase-bridge{border-color:var(--fp-line)}
body.review-mode .pb-p{color:var(--fp-accent)}

/* ── evidence highlight raised by an explain button ── */
body.review-mode .ep-highlight-src{
  background:var(--fp-hl); color:#000;
  box-shadow:inset 0 -2px 0 var(--fp-accent-dark)}

/* ── FLOWER POWER: every answer sentence marked in the passage ── */
body.review-mode .fp-hl{
  background:var(--fp-hl); color:#000; padding:1px 3px; border-radius:3px;
  font-weight:600; cursor:pointer; border-bottom:2px dotted var(--fp-accent-dark);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
body.review-mode .fp-hl.fp-last::after{content:' \1F4A1';font-size:11px;font-weight:400}
body.review-mode .fp-hl:hover{background:#ffe14d}
body.review-mode .fp-note{
  display:none; background:var(--fp-light); border-left:3px solid var(--fp-accent);
  border-radius:8px; padding:9px 12px; margin:8px 0; font-size:13px;
  color:var(--fp-ink); line-height:1.55; cursor:auto; font-weight:400;
}
body.review-mode .fp-note.show{display:block}
body.review-mode .fp-note .fp-row{display:block}
body.review-mode .fp-note .fp-en{margin-bottom:5px}
body.review-mode .fp-note b{color:var(--fp-accent);font-weight:700}
body.review-mode .fp-note em,body.review-mode .fp-note i{font-style:italic}

/* ── Telegram button on the report ── */
.rcx-btnrow a.tgbtn{
  background:#0088cc;color:#fff;border:none;padding:11px 22px;border-radius:4px;
  cursor:pointer;font-size:15px;font-family:Arial,Helvetica,sans-serif;
  text-decoration:none;display:inline-flex;align-items:center;gap:7px;
}
.rcx-btnrow a.tgbtn:hover{background:#0077b3}



/* ---------- 4. header — compact title bar ----------
   [logo]  [Demo] Test 8 - P3: Passage title            wifi  fullscreen  menu  notes
           11 minutes remaining
   Appended last on purpose so it wins over the older header rules above. */
#hdr-left{flex:1 1 auto;min-width:0}
#hdr .ex-logo{padding:0 0 0 12px;flex:0 0 auto}
#hdr .ex-logo svg,#hdr .ex-logo img{display:block;width:32px;height:32px;object-fit:contain}
#hdr .ex-status{height:auto;justify-content:center;padding-left:12px;min-width:0}
#hdr .ex-status .ex-title{
  font:700 16px/20px Arial,sans-serif;color:#10122b;
  max-width:calc(100vw - 330px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#hdr .ex-status .timer{margin:0;align-self:flex-start;font:400 13px/17px Arial,sans-serif;color:#000}
#hdr .ex-status .ttid-name{display:none !important}


/* ---------- 5. matching grids (which paragraph / match each item) ----------
   "Questions 14–17", the instruction, then a thin-bordered white box holding the
   table: bold letters over dark vertical rules, a dark rule under the header,
   grey rules between rows, number + statement on the left, hollow circles.
   Applies to matching-info AND matching-features (same widget, same look). */
.section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .section-head .num{font:700 17px/22px Arial,Helvetica,sans-serif;margin:0 0 12px}
.section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .section-head .instruction{font-size:16px;line-height:24px;margin:0 0 20px}
.section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .option-list-box{background:transparent;border:1px solid #9a9ea6;border-radius:0;box-shadow:none;padding:14px 16px;margin-bottom:16px !important}
.section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .mg-wrap{margin:0 0 16px;padding:22px 16px 16px;background:transparent;border:1px solid #9a9ea6;overflow-x:auto}
.section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid{width:100%;border-collapse:collapse;table-layout:auto}
.section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid th,.section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid td{border:0;padding:0;background:transparent}
.section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid thead th{font:700 16px/20px Arial,Helvetica,sans-serif;color:#0a0c19;text-align:center;
  padding:14px 0;width:45px;min-width:45px;border-left:1px solid #131a2b;border-bottom:1px solid #131a2b}
.section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid thead th.mg-corner{width:auto;min-width:0;border-left:0}
.section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid tbody tr>*{border-bottom:1px solid #77767a}
.section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid .mg-q{display:table-cell;padding:7px 12px;text-align:left;background:transparent}
.section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid .mg-q .q-pill{display:inline-block;vertical-align:middle;min-width:26px;margin:0 6px 0 0;
  text-align:left;font:700 16px/16px Arial,Helvetica,sans-serif;color:#0a0c19}
.section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid .mg-label{display:inline-block;vertical-align:middle;max-width:calc(100% - 44px);
  font-size:16px;line-height:25px;color:#0a0c19}
.section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid .mg-cell{position:relative;width:45px;min-width:45px;height:auto;padding:0;
  border-left:1px solid #131a2b;background:transparent;text-align:center;vertical-align:middle}
.section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid .mg-cell:hover{background:#f1f1f3}
.section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid .mg-cell::before{content:"";display:inline-block;box-sizing:border-box;vertical-align:middle;
  width:14px;height:14px;border:1px solid #6f6f75;border-radius:50%;background:#fff}
/* picked: the ring darkens and the existing dot sits in its middle (no blue wash) */
.section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid .mg-cell:has(input:checked){background:transparent}
.section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid .mg-cell:has(input:checked)::before{border-color:#1c4b7a}
.section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid .mg-cell:has(input:checked)::after{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:8px;height:8px}
/* review: the tick / cross replaces the circle */
body.review-mode .section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid .mg-cell.cell-correct::before,
body.review-mode .section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid .mg-cell.cell-wrong::before{display:none}
body.review-mode .section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid .mg-cell.cell-correct::after,
body.review-mode .section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid .mg-cell.cell-wrong::after{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:auto;height:auto}
/* dark + sepia */
body.dark-mode .section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .mg-wrap,body.dark-mode .section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .option-list-box{background:transparent;border-color:var(--ex-line)}
body.dark-mode .section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid thead th{color:var(--ex-ink);border-color:var(--ex-ink-2)}
body.dark-mode .section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid thead th.mg-corner{border-left:0}
body.dark-mode .section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid tbody tr>*{border-bottom-color:var(--ex-line)}
body.dark-mode .section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid .mg-cell{border-left-color:var(--ex-ink-2)}
body.dark-mode .section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid .mg-cell::before{border-color:var(--ex-ink-2);background:transparent}
body.dark-mode .section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid .mg-label,body.dark-mode .section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid .mg-q .q-pill{color:var(--ex-ink)}
body.dark-mode .section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid .mg-cell:hover{background:rgba(255,255,255,.06)}
body.dark-mode .section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid .mg-cell:has(input:checked)::before{border-color:#8ab8ea}
body.dark-mode .section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid .mg-cell:has(input:checked)::after{background:#8ab8ea}
body.review-mode.dark-mode .section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid .mg-cell.cell-correct::after,
body.review-mode.dark-mode .section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid .mg-cell.cell-wrong::after{background:none}
body.theme-sepia .section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .mg-wrap,body.theme-sepia .section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .option-list-box{background:transparent;border-color:var(--sp-line)}
body.theme-sepia .section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid thead th{color:var(--sp-ink);border-color:var(--sp-ink-2)}
body.theme-sepia .section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid thead th.mg-corner{border-left:0}
body.theme-sepia .section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid tbody tr>*{border-bottom-color:var(--sp-line)}
body.theme-sepia .section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid .mg-cell{border-left-color:var(--sp-ink-2)}
body.theme-sepia .section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid .mg-cell::before{background:transparent}
body.theme-sepia .section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid .mg-label,body.theme-sepia .section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .match-grid .mg-q .q-pill{color:var(--sp-ink)}
/* ====
   PASSAGE IMAGES — text wraps around the picture (real-exam look)
   Appended last on purpose. CSS only: no passage text, markup,
   question or answer logic is touched. ====*/
#passage-pane .passage-text{container-type:inline-size}

#passage-pane .passage-text .pass-img,
#passage-pane .passage-text .pass-fig{
  float:right;
  clear:right;
  width:44%;
  max-width:340px;
  min-width:200px;
  margin:4px 0 12px 20px;
}
#passage-pane .passage-text .pass-fig .pass-img{
  float:none;width:100%;max-width:100%;min-width:0;margin:0 0 6px;
}
#passage-pane .passage-text .pass-img{
  height:auto;
  border-radius:0;
  box-shadow:none;
  border:1px solid var(--line-2,#ccc);
}
#passage-pane .passage-text .pass-cap{
  max-width:100%;margin:0;text-align:center;
}
/* keep the paragraph letter + first line tidy next to the float */
#passage-pane .passage-text p{overflow:visible}

/* very narrow passage pane (after dragging the divider): stack instead of wrap */
@container (max-width:460px){
  #passage-pane .passage-text .pass-img,
  #passage-pane .passage-text .pass-fig{
    float:none;clear:both;display:block;width:100%;max-width:340px;
    margin:12px auto;
  }
}

/* ====
   EXAM SETTINGS panel (hamburger button) — Theme / Text Size /
   Report Issue / Leave Test. Appended last; the old full-screen
   Options page markup is untouched but no longer opened. ====*/
.xs-overlay{
  position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;
  background:rgba(15,23,42,.45);padding:16px;
  font-family:Inter,"Segoe UI",system-ui,-apple-system,Arial,sans-serif}
.xs-overlay.is-open{display:flex}
.xs-card{
  position:relative;width:513px;max-width:100%;max-height:100%;overflow-y:auto;
  background:#fff;color:#0f172a;border-radius:12px;padding:24px 25px 24px;
  box-shadow:0 20px 50px rgba(15,23,42,.28);box-sizing:border-box}
.xs-card *{box-sizing:border-box;font-family:inherit}
.xs-close{position:absolute;top:14px;right:14px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:#475569;border-radius:6px;cursor:pointer}
.xs-close:hover{background:#f1f5f9}
.xs-title{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:20px;line-height:28px;font-weight:600;color:#0f172a}
.xs-sec{margin:0 0 22px}
.xs-sec-h{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:14px;line-height:20px;font-weight:600;color:#0f172a}
.xs-opt{
  display:flex;align-items:center;gap:8px;width:100%;margin:0 0 8px;padding:0 10px;
  background:#fff;border:1px solid #e2e8f0;border-radius:6px;color:#64748b;
  font-size:14px;font-weight:400;text-align:left;cursor:pointer}
.xs-opt:last-child{margin-bottom:0}
.xs-opt:hover{background:#f8fafc}
.xs-theme{height:38px}
.xs-opt.is-on{background:#f1f5f9;border-color:#f1f5f9;color:#0f172a}
.xs-opt.is-on:hover{background:#eaeff6}
.xs-size{padding:0 10px}
.xs-s1{height:38px;font-size:14px}
.xs-s2{height:42px;font-size:16px}
.xs-s3{height:46px;font-size:18px}
.xs-report,.xs-leave{
  display:block;width:100%;text-align:left;border-radius:8px;padding:12px 16px 12px 16px;cursor:pointer;margin:0}
.xs-report{background:#fefce8;border:1px solid #fde68a;color:#0f172a;margin-bottom:22px}
.xs-report:hover{background:#fdf9d8}
.xs-report .xs-row-h svg{color:#d97706}
.xs-leave{background:#fff;border:1px solid #e2e8f0;color:#0f172a}
.xs-leave:hover{background:#f8fafc}
.xs-leave .xs-row-h svg{color:#64748b}
.xs-leave.is-confirm{background:#fef2f2;border-color:#fecaca}
.xs-leave.is-confirm .xs-row-h svg,.xs-leave.is-confirm .xs-row-h b{color:#b91c1c}
.xs-row-h{display:flex;align-items:center;gap:8px;font-size:14px;line-height:20px}
.xs-row-h b{font-weight:600}
.xs-row-s{display:block;margin-top:4px;font-size:12px;line-height:16px;color:#64748b}
.xs-report .xs-row-s{color:#6b6540}
.xs-leave .xs-row-s{padding-left:0}
@media (max-width:420px){.xs-card{padding:20px 16px}}

/* dark */
body.dark-mode .xs-overlay{background:rgba(0,0,0,.6)}
body.dark-mode .xs-card{background:var(--ex-panel);color:var(--ex-ink);box-shadow:0 20px 50px rgba(0,0,0,.6)}
body.dark-mode .xs-title,body.dark-mode .xs-sec-h,body.dark-mode .xs-row-h,body.dark-mode .xs-report,body.dark-mode .xs-leave{color:var(--ex-ink)}
body.dark-mode .xs-close{color:var(--ex-ink-3)}
body.dark-mode .xs-close:hover{background:var(--ex-panel-2)}
body.dark-mode .xs-opt{background:var(--ex-panel);border-color:var(--ex-line);color:var(--ex-ink-3)}
body.dark-mode .xs-opt:hover{background:var(--ex-panel-2)}
body.dark-mode .xs-opt.is-on{background:var(--ex-panel-2);border-color:var(--ex-line-2);color:var(--ex-ink)}
body.dark-mode .xs-report{background:#2b2616;border-color:#5b4d1a}
body.dark-mode .xs-report:hover{background:#322c19}
body.dark-mode .xs-report .xs-row-s{color:#cdbf84}
body.dark-mode .xs-leave{background:var(--ex-panel);border-color:var(--ex-line)}
body.dark-mode .xs-leave:hover{background:var(--ex-panel-2)}
body.dark-mode .xs-row-s{color:var(--ex-ink-3)}
body.dark-mode .xs-leave.is-confirm{background:#2a1717;border-color:#6b2a2a}
body.dark-mode .xs-leave.is-confirm .xs-row-h svg,body.dark-mode .xs-leave.is-confirm .xs-row-h b{color:#f87171}

/* sepia */
body.theme-sepia .xs-card{background:var(--sp-panel-2);color:var(--sp-ink)}
body.theme-sepia .xs-title,body.theme-sepia .xs-sec-h,body.theme-sepia .xs-row-h,body.theme-sepia .xs-leave{color:var(--sp-ink)}
body.theme-sepia .xs-opt{background:var(--sp-panel-2);border-color:var(--sp-line);color:var(--sp-ink-3)}
body.theme-sepia .xs-opt.is-on{background:var(--sp-panel);border-color:var(--sp-line);color:var(--sp-ink)}
body.theme-sepia .xs-leave{background:var(--sp-panel-2);border-color:var(--sp-line)}

/* ====
   HIGHLIGHT POPUP — new icons / labels (markup rebuilt by
   exUpgradeHlPopup in reading.js). Appended last.
     resting      : Note | Highlight
     on a highlight: Remove | Add Note ====*/
.hl-popup .tool-btn{min-width:62px;height:auto;min-height:62px;padding:8px 12px;gap:6px;color:#1b2234}
.hl-popup .tool-btn::before{display:none !important}
.hl-popup .tool-btn>svg.hp-ic{display:block;width:22px;height:22px;flex-shrink:0;color:#1b2234}
.hl-popup .tool-btn span.hp-t{font-size:13px;font-weight:600;line-height:1.15;text-align:center;color:#1b2234;white-space:nowrap}
.hl-popup .tool-btn .hp-dot{fill:#fff}
.hl-popup .tool-btn.erase{border-left:0}
.hl-popup .tool-btn.erase>svg.hp-ic{display:block;width:22px;height:22px;color:#ef4444}
.hl-popup .hp-book,.hl-popup .hp-t-a{display:none !important}
/* selection sits on an existing highlight */
.hl-popup.has-hl .tool-btn.hilite{display:none}
.hl-popup.has-hl .tool-btn.erase{order:-1}
.hl-popup.has-hl .hp-bubble,.hl-popup.has-hl .hp-t-n{display:none !important}
.hl-popup.has-hl .tool-btn>svg.hp-book{display:block !important}
.hl-popup.has-hl .tool-btn span.hp-t-a{display:block !important}

body.dark-mode .hl-popup .tool-btn>svg.hp-ic{color:var(--ex-ink)}
body.dark-mode .hl-popup .tool-btn.erase>svg.hp-ic{color:#f87171}
body.dark-mode .hl-popup .tool-btn .hp-dot{fill:var(--ex-panel-2)}
body.theme-sepia .hl-popup .tool-btn>svg.hp-ic{color:var(--sp-ink)}
body.theme-sepia .hl-popup .tool-btn.erase>svg.hp-ic{color:#c0392b}
body.theme-sepia .hl-popup .tool-btn .hp-dot{fill:var(--sp-panel-2)}
/* ── text size: Large / Extra Large fixes ───────────────────────────────
   1) .option span (TRUE / FALSE / NOT GIVEN / YES / NO and single-choice
      answers) was missing from the text-zoom list, so those labels stayed 16px
      while everything around them grew.
   2) every line-height was a fixed 24px, so at 22.4px the lines were nearly
      touching. Each one now grows by the same 1.5 ratio the 16px/24px original
      uses. At Regular --text-zoom is 0px, so every value below equals the
      original — nothing changes at the default size. */
.option span{
  font-size:calc(var(--base-size,16px) + var(--text-zoom)) !important;
  transition:font-size .15s ease;
}
#passage-pane .passage-text p,
.section-head .instruction,
.section-block:is([data-sectype="matching-info"],[data-sectype="matching-features"]) .section-head .instruction,
.q-text,
.option,.option span,
.gap-line,.prose-summary,.notes-list li,
.para-heading-slot .gapOrderNumber,.para-heading-slot .slot-text{
  line-height:calc(24px + var(--text-zoom) * 1.5) !important;
}
h2.passage-title,
.note-title{
  line-height:calc(21.12px + var(--text-zoom) * 1.2) !important;
}
.heading-bank-label{
  line-height:calc(18px + var(--text-zoom) * 1.125) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   EXAM RESULTS — full-page report shown after Submit
   Header (logo, passage title, clock) → grey "Exam Results" bar → band
   score, incorrect questions, mistakes by passage / question type →
   Report Issue · Review Mistakes · Finish. Sits last so it outranks the
   older #stage-results rules above.
   ═══════════════════════════════════════════════════════════════════ */
#stage-results{
  background:#fff !important;padding:0 !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  align-items:stretch !important;justify-content:flex-start !important;
}
#stage-results .results-modal-box{
  max-width:none;width:100%;max-height:none;height:100%;border-radius:0;box-shadow:none;background:#fff;
}
#stage-results .results-content{overflow:hidden !important;padding:0 !important;background:#fff}

.rx-page{
  --rx-bg:#fff; --rx-ink:#0f172a; --rx-sub:#64748b; --rx-line:#e2e8f0; --rx-soft:#f1f5f9;
  --rx-band:#f1f5f9; --rx-blue:#2563eb; --rx-pill:#eef3fb; --rx-red:#dc2626; --rx-chip:#fee2e2; --rx-chip-ink:#b91c1c;
  --rx-bar:#f0f0eb; --rx-btn:#fff; --rx-dark:#0f172a;
  height:100%;display:flex;flex-direction:column;background:var(--rx-bg);color:var(--rx-ink);
  font-family:Inter,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
.rx-top{flex:0 0 auto;display:flex;align-items:center;height:50px;border-bottom:1px solid #d9d9d9;background:var(--rx-bg)}
.rx-logo{flex:0 0 auto;width:40px;height:40px;margin:0 24px 0 18px;display:flex}
.rx-logo svg,.rx-logo img{width:100%;height:100%;display:block}
.rx-title{flex:0 1 614px;min-width:0;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rx-time{flex:0 0 auto;margin-left:20px;font-size:15px;font-weight:500;color:#ef4444;white-space:nowrap}
.rx-bar{flex:0 0 auto;margin:16px 18px 0;height:56px;display:flex;align-items:center;padding:0 14px;
  background:var(--rx-bar);border:1px solid #dcdcd6;border-radius:4px;font-size:17px;font-weight:700}
.rx-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding:36px clamp(16px,4.2vw,64px) 40px}
.rx-head{text-align:center;margin-bottom:28px}
.rx-head h1{margin:0 0 12px;font-size:30px;line-height:1.2;font-weight:700}
.rx-pill{display:inline-block;padding:8px 16px;border-radius:999px;background:var(--rx-pill);color:var(--rx-blue);font-size:15px;font-weight:600}
.rx-card{background:var(--rx-bg);border:1px solid var(--rx-line);border-radius:12px;padding:28px 28px 30px;margin:0 0 24px}
.rx-card h3{margin:0 0 18px;font-size:20px;font-weight:600}
.rx-band{background:var(--rx-band);text-align:center;padding:34px 24px}
.rx-band h2{margin:0 0 10px;font-size:20px;font-weight:600}
.rx-band-num{font-size:48px;line-height:1.1;font-weight:700;color:var(--rx-blue)}
.rx-band-of{margin-top:4px;font-size:14px;color:var(--rx-ink)}
.rx-band-pct{margin-top:8px;font-size:14px;color:var(--rx-sub)}
.rx-chips{display:flex;flex-wrap:wrap;gap:12px}
.rx-chip{border:0;cursor:pointer;font:inherit;padding:6px 14px;border-radius:999px;background:var(--rx-chip);color:var(--rx-chip-ink);font-size:15px;font-weight:500}
.rx-chip:hover{filter:brightness(.96)}
.rx-perfect{margin:0;font-size:15px;color:var(--rx-sub)}
.rx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
.rx-list{display:flex;flex-direction:column;gap:12px}
.rx-row{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--rx-soft);border-radius:8px;padding:14px 16px;font-size:15px}
.rx-row-l{font-weight:600}
.rx-row-r{white-space:nowrap}
.rx-n{color:var(--rx-red);font-weight:600}
.rx-n.is-zero{color:#16a34a}
.rx-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin-top:8px;padding-top:30px;border-top:1px solid var(--rx-line)}
.rx-btn{cursor:pointer;font:inherit;font-size:15px;font-weight:500;padding:11px 24px;border-radius:6px;background:var(--rx-btn);color:var(--rx-ink);border:1px solid var(--rx-line)}
.rx-btn:hover{background:var(--rx-soft)}
.rx-primary{background:var(--rx-dark);color:#fff;border-color:var(--rx-dark)}
.rx-primary:hover{background:#1e293b}
.rx-foot{flex:0 0 auto;height:60px;border-top:1px solid #d9d9d9}
@media (max-width:700px){
  .rx-title{flex:1 1 auto;font-size:13px} .rx-time{display:none}
  .rx-grid{grid-template-columns:1fr} .rx-card{padding:20px 16px}
  .rx-head h1{font-size:26px} .rx-foot{height:24px}
}
body.dark-mode .rx-page{
  --rx-bg:#1c1c1c; --rx-ink:#eaeaea; --rx-sub:#a3a3a3; --rx-line:#3a3a3a; --rx-soft:#262626;
  --rx-band:#232a36; --rx-blue:#7aa7ff; --rx-pill:#25324a; --rx-red:#ff6b6b; --rx-chip:#4a2226; --rx-chip-ink:#ff9b9b;
  --rx-bar:#262626; --rx-btn:#262626; --rx-dark:#eaeaea;
}
body.dark-mode .rx-primary{color:#111}
body.dark-mode .rx-primary:hover{background:#fff}
body.dark-mode .rx-bar,body.dark-mode .rx-top,body.dark-mode .rx-foot{border-color:#3a3a3a}
body.dark-mode #stage-results .results-modal-box,body.dark-mode #stage-results .results-content{background:#1c1c1c}
body.theme-sepia .rx-page{--rx-bg:#f6efdc;--rx-soft:#ece3cb;--rx-band:#ece3cb;--rx-btn:#fbf6e8;--rx-line:#d9ccaa;--rx-bar:#ece3cb}
body.theme-sepia #stage-results .results-modal-box,body.theme-sepia #stage-results .results-content{background:#f6efdc}

/* the old IELTS / "Test taker ID" / READING_CDI strip and the round close
   button are gone from the results screen, even if an older HTML still has them */
#stage-results .rcx-hdr,#stage-results .results-modal-close{display:none !important}

/* ═══════════════════════════════════════════════════════════════════
   ENTRY SCREEN — instructions, notes and the (free) Real Exam Mode card
   Header → dotted page → white card (scrolls) with Start Test pinned at the
   bottom. Sits last so it outranks the older #stage-registration rules.
   ═══════════════════════════════════════════════════════════════════ */
#stage-registration{
  --ei-ink:#111827; --ei-sub:#6b7280; --ei-line:#e5e7eb; --ei-card:#fff; --ei-page:#fafafa; --ei-dot:#d9dce1;
  padding:0 !important;align-items:stretch !important;justify-content:flex-start !important;overflow:hidden !important;
  background:var(--ei-page) !important;color:var(--ei-ink);
  font-family:Inter,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif !important;
}
#stage-registration::before,#stage-registration::after{display:none !important}
#stage-registration .ei-top{flex:0 0 auto;display:flex;align-items:center;height:50px;background:#fff;border-bottom:1px solid #d9d9d9}
#stage-registration .ei-logo{flex:0 0 auto;width:40px;height:40px;margin:0 24px 0 18px;display:flex}
#stage-registration .ei-logo svg{width:100%;height:100%;display:block}
#stage-registration .ei-title{font-size:15px;font-weight:600;color:var(--ei-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#stage-registration .ei-body{
  flex:1 1 auto;min-height:0;display:flex;justify-content:center;padding:16px 16px 14px;
  background-color:var(--ei-page);
  background-image:radial-gradient(var(--ei-dot) 1px,transparent 1.3px);background-size:22px 22px;
}
#stage-registration .ei-card{
  width:100%;max-width:880px;display:flex;flex-direction:column;min-height:0;
  background:var(--ei-card);border-radius:20px;border:1px solid var(--ei-line);
  box-shadow:0 10px 30px -12px rgba(15,23,42,.18);overflow:hidden;
}
#stage-registration .ei-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding:20px 28px 22px}
#stage-registration .ei-h{margin:0 0 6px;font-size:14px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:var(--ei-sub)}
#stage-registration .ei-list{margin:0 0 22px;padding-left:20px;font-size:16px;line-height:1.55;color:var(--ei-ink)}
#stage-registration .ei-list li{padding-left:4px}
#stage-registration .ei-rule{border:0;border-top:1px solid var(--ei-line);margin:0 0 18px}
#stage-registration .ei-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#stage-registration .ei-mode{border:2px solid #f87171;background:#fef2f2;border-radius:14px;padding:6px 6px 10px}
#stage-registration .ei-shot{position:relative;border-radius:9px;overflow:hidden;border:1px solid var(--ei-line);background:#fff}
#stage-registration .ei-shot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left}
#stage-registration .ei-badge{
  position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:7px;background:#ef4444;color:#fff;font-size:13px;font-weight:800;letter-spacing:.01em;
  box-shadow:0 4px 10px rgba(239,68,68,.35);white-space:nowrap;
}
#stage-registration .ei-badge svg{width:18px;height:18px}
#stage-registration .ei-mode-name{display:flex;align-items:center;gap:10px;margin:12px 6px 0;font-size:16px;font-weight:700;color:var(--ei-ink)}
#stage-registration .ei-radio{width:22px;height:22px;border-radius:50%;background:#ef4444;color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
#stage-registration .ei-radio svg{width:14px;height:14px}
#stage-registration .ei-foot{flex:0 0 auto;display:flex;justify-content:center;padding:14px 28px 16px;border-top:1px solid var(--ei-line);background:var(--ei-card)}
#stage-registration .ei-start{
  cursor:pointer;font:inherit;font-size:16px;font-weight:600;color:#fff;background:#0f172a;border:0;border-radius:6px;
  padding:13px 54px;min-width:220px;
}
#stage-registration .ei-start:hover{background:#1e293b}
#stage-registration .ei-start:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
@media (max-width:700px){
  #stage-registration .ei-modes{grid-template-columns:1fr}
  #stage-registration .ei-body{padding:10px}
  #stage-registration .ei-scroll{padding:16px 16px 18px}
  #stage-registration .ei-title{font-size:13px}
}
body.dark-mode #stage-registration{--ei-ink:#eaeaea;--ei-sub:#a3a3a3;--ei-line:#3a3a3a;--ei-card:#232323;--ei-page:#161616;--ei-dot:#2b2b2b}
body.dark-mode #stage-registration .ei-top{background:#1c1c1c;border-color:#3a3a3a}
body.dark-mode #stage-registration .ei-mode{background:#3a2226}
body.dark-mode #stage-registration .ei-start{background:#eaeaea;color:#111}
body.theme-sepia #stage-registration{--ei-card:#fbf6e8;--ei-page:#f1e9d2;--ei-line:#d9ccaa}

/* ── dark mode fixes ── */
/* native radios, checkboxes, selects, inputs and scrollbars follow the theme (unticked radios were white discs) */
body.dark-mode{color-scheme:dark}
body.dark-mode .qnav-btn:disabled{background:#2f343b}
body.dark-mode .qnav-btn:disabled svg{fill:#6b7280}
body.dark-mode #stage-results{background:#1c1c1c}
/* the ✓ / ✗ of the answer review are pale in dark mode: dark mark on them */
body.dark-mode.review-mode .feedback-pill .fb-badge{color:#0d1117}
/* the "verify your email" pill of site-access.js: the test pages do not load ix-unified.css; it floats above the question bar */
#ix-verify-banner{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);z-index:9998;max-width:calc(100vw - 2rem);display:flex;gap:.75rem;align-items:center;justify-content:center;flex-wrap:wrap;padding:.5rem .75rem .5rem 1rem;border-radius:9999px;border:1px solid #f5c26b;background:#fff8e6;color:#7a4a00;box-shadow:0 10px 30px -8px rgba(0,0,0,.35);font:500 13px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
#ix-verify-banner button{border:1px solid currentColor;background:transparent;color:inherit;border-radius:9999px;padding:.2rem .7rem;font:inherit;cursor:pointer}
body.dark-mode #ix-verify-banner{background:#2a2112;border-color:#6b4f1d;color:#f5d48b}

/* =====================================================================
   COMPACT QUESTION SPACING (Oct 2026)
   The question pane had long empty stretches: every block after the first
   carried an 80px bottom margin, option rows were 43px tall with 24px under
   each list, and notes lists had 16px margins on every single bullet.
   ===================================================================== */
.section-block{padding-bottom:0}
.section-block+.section-block{margin-bottom:0}
.section-block+.section-block{margin-top:22px}
#questions-pane .section-block:last-child{padding-bottom:72px}
.options{margin:2px 0 14px}
.option,.tfn-opts .option,.multi-opts .option{padding:6px 8px 6px 32px}
.option input[type=radio],.option input[type=checkbox]{top:8px}
.q-card+.q-card{margin-top:2px}
.notes-list ul{margin:6px 0}
.notes-list ul:first-child{margin-top:0}
.section-head .num{margin:0 0 6px}
.section-head .instruction{margin:0 0 12px}

/* TRUE / FALSE / NOT GIVEN key under the instruction */
.tfng-legend{border-collapse:collapse;margin:-4px 0 14px;font:400 16px/24px Arial,sans-serif;color:#000}
.tfng-legend th{font-weight:700;text-align:left;padding:0 22px 0 0;white-space:nowrap;vertical-align:top}
.tfng-legend td{padding:0}
body.dark-mode .tfng-legend{color:var(--ex-ink-2)}
body.dark-mode .tfng-legend th{color:var(--ex-ink)}
body.theme-sepia .tfng-legend{color:var(--sp-ink-2)}

/* free-form notes (sec.lines) and one-line-per-question sentences */
.note-lines .note-sub{font-weight:700;margin:12px 0 4px}
.note-lines .note-sub:first-child{margin-top:0}
.note-lines .note-line{margin:4px 0}
.note-lines .note-ul{list-style:disc outside;padding-left:28px;margin:2px 0 6px}
.note-lines .note-ul.lvl-2{list-style:circle outside;margin:2px 0}
.note-lines li{line-height:24px;margin:4px 0}
.sent-lines .sent-line{margin:0 0 14px;line-height:30px}
.sent-lines .sent-line:last-child{margin-bottom:4px}
body.dark-mode .note-lines .note-sub{color:var(--ex-ink)}

/* review: the per-question Explanation button sits under its own question,
   with clear air before the next one (it used to read as the next question's) */
body.review-mode .q-card > .explain-btn{margin:-6px 0 22px}
body.review-mode .q-card > .explain-panel.show{margin:0 0 22px}

/* passage sub-headings and footnotes written by scripts/build-reading.js */
.passage-text .pass-sub{margin:18px 0 6px}
.passage-text .pass-foot{font-size:.85em;color:#555;margin-top:14px}
body.dark-mode .passage-text .pass-foot{color:var(--ex-ink-2)}

/* wide completion tables (4–5 columns) fit the question pane instead of running off its edge */
.rt-table{width:100%;max-width:100%;table-layout:fixed;word-wrap:break-word}
.rt-table td{overflow-wrap:anywhere}
.rt-table th{overflow-wrap:normal;hyphens:auto;-webkit-hyphens:auto}
.rt-table .prose-gap{display:inline-flex;max-width:100%}
.rt-table .gap-input{width:100%;max-width:150px;min-width:56px;box-sizing:border-box}

/* the Uzbek half of an explanation written by scripts/build-reading.js */
.ep-uz{margin-top:9px;padding-top:8px;border-top:1px solid rgba(0,0,0,.14)}
body.dark-mode .ep-uz{border-top-color:rgba(255,255,255,.16)}

/* ── Selecting text: only the passage and the questions ──
   Everything else on the exam screen (header, part bar, footer, arrows, buttons) cannot be
   selected, so neither the browser's selection nor the Highlight / Note popup appears there. */
#stage-reading,#stage-reading #passage-pane{-webkit-user-select:none;user-select:none}
#stage-reading #passage-pane .passage-text,#stage-reading #questions-pane{-webkit-user-select:text;user-select:text}
#stage-reading #questions-pane button,#stage-reading #passage-pane .passage-text button{-webkit-user-select:none;user-select:none}
#stage-reading input,#stage-reading textarea{-webkit-user-select:text;user-select:text}

/* ── Summary with a list of words (tests made in the admin panel): title, the summary with its gaps, the words under it ──
   As in the computer-delivered test: a dashed, wide box for each empty gap with its number, plain word chips without letters. */
.wb-below .prose-summary{line-height:2.15}
.wb-below .word-drop{min-width:200px;border-style:dashed;border-color:#8a8a8a}
.wb-below .word-drop.filled{border-style:solid}
.wb-below .word-bank-list{margin:20px 0 4px;gap:8px 10px}
.wb-below .word-tile{margin:0;padding:5px 12px;font-weight:400;border-radius:6px}
.wb-below .word-tile-id{display:none}
body.dark-mode .wb-below .word-drop{border-color:#666}

/* ── Tables of tests made in the admin panel: the title in the first row, bullets and several gaps in a cell ── */
.rt-table .tbl-title{text-align:left}
.rt-table .tc-ul{margin:0;padding:0 0 0 22px}
.rt-table .tc-ul li{margin:4px 0}
.rt-table .tc-line+.tc-line,.rt-table .tc-line+.tc-ul,.rt-table .tc-ul+.tc-line{margin-top:6px}
.rt-table td,.rt-table th{padding:8px 12px}

/* admin-made tables size their columns to their text (the details column is the widest, as on the paper) */
.rt-table:has(.tc-line,.tc-ul){table-layout:auto}
.rt-table:has(.tc-line,.tc-ul) .gap-input{width:120px;max-width:100%}

/* ── Dark mode: a black page and no grey patches behind the questions ── */
body.dark-mode{--ex-ground:#000;--ex-panel:#121417;--ex-panel-2:#1b1e23;--ex-line:#30353c;--ex-line-2:#454b54}
body.dark-mode,body.dark-mode #stage-reading,body.dark-mode .exam-main,body.dark-mode #passage-pane,body.dark-mode #questions-pane{background:#000}
body.dark-mode .option,body.dark-mode .multi-opts .option,body.dark-mode .tfn-opts .option{background:transparent !important}
body.dark-mode .option:hover,body.dark-mode .multi-opts .option:hover{background:#15181c !important}
body.dark-mode .option.selected,body.dark-mode .multi-opts .option.selected,body.dark-mode .tfn-opts .option.selected{background:#132741 !important}
body.dark-mode .option.correct{background:rgba(46,125,50,.20) !important}
body.dark-mode .option.wrong{background:rgba(196,18,48,.20) !important}
body.dark-mode .heading-bank-list,body.dark-mode .word-bank-list,body.dark-mode .option-list-box{background:transparent}
body.dark-mode .para-heading-slot{background:transparent}
body.dark-mode .para-heading-slot.filled{background:var(--ex-panel-2)}
body.dark-mode .flow-box{background:transparent}