/* The Exam Hub — question screens (v30, lane Q): ticks and crosses, typed answers, read-aloud, timer notices,
   the dyslexia font and larger text on every part of a question, headings, and thumb-sized controls.
   Colours come from edge.css's variables (or the few defined here), so the light theme can redefine them. */

:root {
  --markOk: #1F7A4F;            /* white on this: 5.3:1 — the tick reads as a tick for a colour-blind student */
  --markBad: #B93A2E;           /* white on this: 5.6:1 */
  --dysFont: Verdana, 'Trebuchet MS', 'Segoe UI', sans-serif;
}

/* ---------- read by a screen reader, not drawn ---------- */
.qsr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- headings that look exactly as the labels they replace ---------- */
.qhead h1.qt { font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: normal; margin: 0; font-weight: 700; }
/* a passage's title (an h2 beside a live question, an h3 in a review), "By skill" (an h2 now, under the results' h1)
   and the end of a test section (an h1 now): each keeps the look it had */
.passage .ptitle { font-family: var(--serif); color: #8A6F13; margin: 0 0 2px; font-size: calc(17px * var(--fs)); line-height: 1.3; }
.card > h2.qh3 { font-size: 17px; line-height: 1.55; margin: 0 0 8px; }
h1.qh-sec { font-size: 22px; line-height: 1.2; margin-bottom: 12px; }
.paper .qtop { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 6px; }
.paper .qtop .qnum { margin: 0; line-height: 1.5; position: static; }
.paper .qtop .qnum::after { display: none; }
.qtools { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- ✓ and ✗ on a marked answer: the shape carries the meaning, not only the colour ---------- */
.opt { position: relative; }
.opt > .ot { min-width: 0; overflow-wrap: anywhere; }
.paper.example:not(.longopts) .opt > .ot { white-space: nowrap; }
.qmark { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.qmark svg { width: 16px; height: 16px; display: block; }
.qmark.ok { background: var(--markOk); }
.qmark.bad { background: var(--markBad); }
.opt > .qmark { margin-left: auto; }
/* On a compact option (five one-word or number answers to a row, or a figure) the mark is a badge on the corner, so
   marking never takes room from the answer: inline, the tick pushed "adulthood" into "adultho / od" in a five-column
   row. The ring in the paper's colour keeps the badge clear of the option's own border. */
.opts.cols5 .opt > .qmark, .opt.fig > .qmark { position: absolute; top: -9px; right: -9px; margin: 0; width: 22px; height: 22px; box-shadow: 0 0 0 2.5px var(--paper), 0 1px 3px rgba(0, 0, 0, .25); }
.opts.cols5 .opt > .qmark svg, .opt.fig > .qmark svg { width: 14px; height: 14px; }
.opt.right { border-width: 2px; }
.opt.wrong { border-width: 2px; border-style: dashed; }
.chip.wlc { display: inline-flex; align-items: center; gap: 8px; }
.chip.wlc > .qmark { width: 20px; height: 20px; }
.chip.wlc > .qmark svg { width: 14px; height: 14px; }
.chip.wlc.right { border-width: 2px; }
.chip.wlc.wrong { border-width: 2px; border-style: dashed; }

/* ---------- the tools on a question: read aloud, type answers ---------- */
.qtool {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 12px; border-radius: 999px;
  background: #fff; color: var(--ink); border: 1.5px solid var(--paperLine); font-size: 13px; font-weight: 700; line-height: 1.2; cursor: pointer;
}
.qtool:hover { border-color: var(--gold); }
.qtool .qti { display: inline-grid; place-items: center; color: #8A6F13; }
.qtool[aria-pressed="true"] { background: #FFF6DA; border-color: var(--gold); }
.qtool-note { margin: 0 0 12px; font-size: 12.5px; color: var(--ink2); line-height: 1.45; padding-left: 10px; border-left: 3px solid var(--paperLine); }
.feedback:focus-visible { border-radius: 14px; outline-offset: 3px; }      /* the focus ring follows the box's own corners */
.opt > .ot { hyphens: auto; -webkit-hyphens: auto; }                      /* a long word breaks where English breaks it */
/* the Type answers switch: a real switch (role="switch"), its state drawn as a knob, not only a colour */
.qswitch .qsw { position: relative; width: 34px; height: 20px; border-radius: 999px; background: #D9D2BF; border: 1.5px solid #B9AF95; flex: none; transition: background .15s ease; }
.qswitch .qsw i { position: absolute; top: 1.5px; left: 1.5px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: left .15s ease; }
.qswitch[aria-checked="true"] .qsw { background: var(--markOk); border-color: var(--markOk); }
.qswitch[aria-checked="true"] .qsw i { left: 15.5px; }
.qswitch[aria-checked="true"] { border-color: var(--markOk); }

/* ---------- typed answers ----------
   The phone's own keypad is the decimal one (engine.js explains why), which has no "/", "−" or space, so the app adds
   those three as buttons. On a wide screen they sit to the right of the box. On a phone they sit ABOVE it: the keypad
   covers the bottom of the screen and the browser scrolls only the box itself into view, so buttons below the box
   could end up under the keypad at the moment they are needed. The source order stays box-then-buttons, so Tab and a
   screen reader meet the box first. */
.typed { margin-top: 20px; }
.typed:not(.done) { display: grid; grid-template-columns: minmax(0, 22em) auto; grid-template-areas: "lbl lbl" "in keys" "help help" "msg msg"; column-gap: 12px; align-items: center; justify-content: start; }
.typed:not(.done) > .typed-lbl { grid-area: lbl; }
.typed:not(.done) > .typed-in { grid-area: in; width: 100%; }
.typed:not(.done) > .typed-keys { grid-area: keys; margin-top: 0; flex-wrap: nowrap; }
.typed:not(.done) > .typed-help { grid-area: help; }
.typed:not(.done) > .typed-msg { grid-area: msg; }
@media (max-width: 640px) {
  .typed:not(.done) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lbl" "keys" "in" "help" "msg"; }
  .typed:not(.done) > .typed-keys { margin: 0 0 8px; flex-wrap: wrap; }
}
.typed-lbl { display: block; font-size: calc(12.5px * var(--fs)); font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink2); margin-bottom: 6px; }
.typed-in {
  width: min(100%, 22em); padding: 12px 14px; border-radius: 12px; border: 2px solid var(--paperLine); background: #fff; color: var(--ink);
  font-size: calc(20px * var(--fs)); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; outline: none;
}
.typed-in:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 163, 39, .25); }
.typed-keys { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tkey {
  min-width: 48px; min-height: 40px; padding: 6px 12px; border-radius: 10px; border: 1.5px solid var(--paperLine); background: #fff; color: var(--ink);
  font-size: calc(18px * var(--fs)); font-weight: 800; cursor: pointer; line-height: 1;
}
.tkey.wide { font-size: calc(13px * var(--fs)); font-weight: 700; letter-spacing: .3px; }
.tkey:hover { border-color: var(--gold); }
.typed-help { margin: 10px 0 0; font-size: calc(12.5px * var(--fs)); color: var(--ink2); line-height: 1.45; }
.typed-msg { margin: 6px 0 0; font-size: calc(13.5px * var(--fs)); font-weight: 700; color: var(--markBad); min-height: 0; }
.typed-msg:empty { display: none; }
.typed-note { margin: 16px 0 0; font-size: calc(12.5px * var(--fs)); color: var(--ink2); font-style: italic; }
.typed.done .typed-show { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; border-radius: 12px; background: #fff; border: 2px solid var(--paperLine); }
.typed.done.ok .typed-show { border-color: var(--markOk); }
.typed.done.bad .typed-show { border-color: var(--markBad); border-style: dashed; }
.typed-val { font-size: calc(20px * var(--fs)); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.typed-val i { font-weight: 500; color: var(--ink2); font-size: .8em; }

/* ---------- the clock, and its warnings: calm, no pulsing, nothing covering the question ---------- */
.tmr-wrap { position: relative; display: inline-flex; align-items: center; }
.timer.warn { animation: none; }                          /* the last minute is red, but it never flashes */
.timer.soon { color: var(--amberText, var(--amber)); border-color: rgba(231, 169, 59, .5); background: rgba(231, 169, 59, .12); }
/* Text in amber uses --amberText where the theme defines one (the light theme's --amber is too pale for text on
   its white header: about 3:1), else --amber. */
/* the notice is drawn twice (engine.js): beside the clock for a laptop or tablet, over the title for a phone. Only
   one is ever shown, it covers only the header, for ten seconds, and never the question or a button. */
.time-note {
  position: absolute; z-index: 2; pointer-events: none;
  font-size: 13px; font-weight: 700; color: var(--amberText, var(--amber)); background: var(--bg2); border: 1px solid rgba(231, 169, 59, .5);
  animation: tnIn .3s ease both;
}
.time-note.at-clock { right: calc(100% + 8px); top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 5px 11px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.time-note.at-title { display: none; }
.qhead h1.qt { position: relative; }
@keyframes tnIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .time-note { animation: none; } }

/* ---------- dyslexia-friendly: EVERY part of a question, not just some ----------
   The sentence under test in grammar (.exhibit), the question number, a passage's title, the method card and the
   method sheet all set their own font and used to stay in Playfair or Georgia. Figure labels keep Inter: they are
   placed by measuring Inter's own letter widths, and they are short (letters, numbers, units). */
body.dys :is(.paper, .passage, .feedback, .review-body, .sheet-in, .revtag, ol.steps, .watch, .examline, .typed-in),
body.dys :is(.paper, .passage, .feedback, .review-body, .sheet-in, .revtag, ol.steps, .watch, .examline) :not(svg, svg *) {
  font-family: var(--dysFont) !important;
}
body.dys .paper .exhibit, body.dys .paper .stem, body.dys .argument, body.dys .opt, body.dys .passage p, body.dys .feedback, body.dys ol.steps li, body.dys .watch li {
  letter-spacing: .02em; word-spacing: .09em;
}
body.dys .paper .exhibit, body.dys .paper .stem, body.dys .argument, body.dys .passage p { line-height: 1.75; }

/* ---------- larger text reaches everything read in a question ---------- */
.paper .qnum { font-size: calc(14px * var(--fs)); }
.paper.example .qnum { font-size: calc(11.5px * var(--fs)); }
.paper .exhibit { font-size: calc(19px * var(--fs)); }
.paper .stem .big { font-size: calc(26px * var(--fs)); }
.paper .chip { font-size: calc(18px * var(--fs)); }
.seq .n { font-size: calc(20px * var(--fs)); min-width: calc(58px * var(--fs)); }
.na .nb { font-size: calc(19px * var(--fs)); }
.paper .arrow { font-size: calc(20px * var(--fs)); }
.opt .ol { width: calc(28px * var(--fs)); height: calc(28px * var(--fs)); font-size: calc(13px * var(--fs)); }
.feedback .fbt { font-size: calc(13px * var(--fs)); }
.revtag { font-size: calc(12.5px * var(--fs)); }
.passage h3 { font-size: calc(17px * var(--fs)); }
.passage .src { font-size: calc(12px * var(--fs)); }
.passage .pair-note { font-size: calc(13px * var(--fs)); }
.qtool, .qtool-note { font-size: calc(13px * var(--fs)); }
/* the method sheet's own labels — its title, "The method", "Watch out for", "Example" — grow with its text */
.sheet-in h2 { font-size: calc(22px * var(--fs)); }
.sheet-in .eyebrow, .watch .wt { font-size: calc(11px * var(--fs)); }
/* a figure grows with the text: its labels are part of what a student reads (--fw is the width it was drawn at) */
.qfigure { max-width: calc(460px * var(--fs)); }
/* (no fallback on purpose: with no --fw, as for a picture, the rule is dropped and the drawing keeps its own width) */
.qfigure svg { width: calc(var(--fw) * var(--fs)); max-width: 100%; height: auto; }
.qfigure figcaption { font-size: calc(12.5px * var(--fs)); }
.paper.example .qfigure { max-width: calc(340px * var(--fs)); }
/* the example in the method card keeps its short answers on one line — until the text is larger or wider (the
   dyslexia font), when a one-line answer would run out of its box and under its tick */
.paper.example .opts:not(.figs):not(.nums) { grid-template-columns: repeat(auto-fill, minmax(calc(190px * var(--fs)), 1fr)); }
body.dys .paper.example .opts:not(.figs):not(.nums) { grid-template-columns: repeat(auto-fill, minmax(calc(230px * var(--fs)), 1fr)); }
body.ts1 .paper.example .opt > .ot, body.ts2 .paper.example .opt > .ot, body.dys .paper.example .opt > .ot { white-space: normal; }
/* sentence-length answers one to a line, as worked.js intends ("longopts"): edge.css's rule for this was outranked
   by the column rule above it, so they sat in narrow columns */
body .paper.example.longopts .opts:not(.figs):not(.nums), body.dys .paper.example.longopts .opts:not(.figs):not(.nums) { grid-template-columns: 1fr; }
.review-body .qfigure { max-width: calc(380px * var(--fs)); }
@media (max-width: 760px) {
  .seq .n { font-size: calc(18px * var(--fs)); min-width: calc(52px * var(--fs)); }
  body.ts1 .opts.cols5.nums, body.ts2 .opts.cols5.nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* one-word answers: as many to a row as fit WHOLE (engine.js sets --ow from the longest word), never a word broken
   in two; phones keep their single column (edge.css) */
@media (min-width: 761px) {
  .opts.cols5.words { grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--ow, 150px) * var(--fs))), 1fr)); }
  body.dys .opts.cols5.words { grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--ow, 150px) * var(--fs) * 1.18)), 1fr)); }
}

/* ---------- thumb-sized controls on a phone (44px, the size a thumb can hit without looking) ---------- */
@media (max-width: 760px) {
  .navgrid { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; }
  .navgrid button { height: 44px; font-size: 14px; }
  .qhead .btn.sm, .qwrap .btn.sm, .passage-split .btn.sm { min-height: 44px; }
  /* the method sheet's Close, the "test in progress" banner above a question, and each row of a review list */
  .sheet-in .btn.sm, .resume-banner .btn { min-height: 44px; }
  .review-item > details > summary { min-height: 44px; }
  .qfoot .btn { min-height: 50px; }
  details.qmap > summary { min-height: 44px; display: flex; align-items: center; }
  .qtool { min-height: 44px; padding: 8px 14px; }
  .tkey { min-height: 44px; min-width: 52px; }
  .typed-in { width: 100%; }
  .paper .qtop { align-items: flex-start; }
  .qtools { margin-left: 0; justify-content: flex-start; width: 100%; }
  /* on a phone the notice covers the whole title (every line of it), in the header's own colour */
  .time-note.at-clock { display: none; }
  .time-note.at-title { display: flex; align-items: center; inset: -2px -4px; padding: 0 8px; border-radius: 8px; font-size: 13.5px; line-height: 1.25; }
  .qhead h1.qt { overflow-wrap: anywhere; }            /* a long word wraps inside the title instead of spilling past it */
}