/* Queens Quizzing: app shell, shared components and the play flow (home, setup, generating, play, results).
   BurbzTech design system: every colour is a token from vendor/design-system/tokens.css (light and dark), and the
   page wears the coolant colourway (bt-paint-coolant). Patterns follow Long Tail, the other BT-A quiz on the system:
   hull header, livery band once, one column of opaque chamfered cards, bt-btn keys, lamps for switches. */

/* ---------- category colours ----------
   One hue per broad category, slot = position in Topics.BROAD (Science & Nature, History & Politics, Arts & Culture,
   Geography & Places, Sport & Games, Technology & Industry, Language & Ideas, Life & Everyday). Specific and custom
   categories map onto these slots (components.js categorySlot). Validated with the dataviz checker (31 Oct 2026)
   against the cards and the page in each theme: lightness band, chroma floor, all >= 3:1, and neighbours in the
   Setup list (which stays one per row for that reason) apart by CVD dE 13.1 light / 12.5 dark (target 8) and
   normal-vision dE 24.3 / 23.8 (floor 15). One hue family per slot, OKLCH chroma capped at 0.17 (paint, not neon),
   no reds, oranges or ambers (danger, copper, warning, livery), and every slot dE >= 14 from copper, success and
   danger, >= 12 from warning and >= 9 from the livery's coolant and amber. Each slot keeps its hue in both themes,
   and its dark step is at most 0.02 OKLCH L darker than its light one, so a category looks the same in both.
   The marks only identify: the category's name always sits beside them, and text stays in ink. */
:root, [data-theme="light"] {
  --cat-1: #1497d2; --cat-2: #a29012; --cat-3: #ca4b83; --cat-4: #3c6ad3;
  --cat-5: #689313; --cat-6: #7658cb; --cat-7: #1c9f81; --cat-8: #79268b;
}
[data-theme="dark"] {
  --cat-1: #1497d2; --cat-2: #9b8a14; --cat-3: #c74880; --cat-4: #4a7ae4;
  --cat-5: #638d11; --cat-6: #886bdf; --cat-7: #169c7e; --cat-8: #9f4cb1;
}
[data-cat="1"] { --cat: var(--cat-1); } [data-cat="2"] { --cat: var(--cat-2); }
[data-cat="3"] { --cat: var(--cat-3); } [data-cat="4"] { --cat: var(--cat-4); }
[data-cat="5"] { --cat: var(--cat-5); } [data-cat="6"] { --cat: var(--cat-6); }
[data-cat="7"] { --cat: var(--cat-7); } [data-cat="8"] { --cat: var(--cat-8); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light; scroll-padding-bottom: 120px; }
html[data-theme="dark"] { color-scheme: dark; }
body { margin: 0; min-height: 100vh; background: var(--surface); color: var(--ink); font: 400 16px/24px var(--font-sans); }
button, input, select, textarea { font: inherit; color: inherit; }
p, h1, h2, h3, h4, ol, ul, dl, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
[tabindex="-1"]:focus { outline: none; }
.bt-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.qq-skip { position: absolute; left: var(--space-4); top: -100px; z-index: 100; padding: var(--space-2) var(--space-4); background: var(--surface-raised); color: var(--ink); }
.qq-skip:focus { top: var(--space-2); }

/* The contour backdrop: a fixed canvas behind everything. Content sits above it, text always on opaque cards. */
.qq-backdrop { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }
#app { position: relative; z-index: 1; min-height: 100vh; }

/* ---------- screens and the 700 ms cross-fade (navigation-compose's default; none with reduced motion) ---------- */
.qq-views { display: grid; grid-template-columns: minmax(0, 1fr); }
.qq-views > .qq-screen { grid-area: 1 / 1; min-width: 0; }
.qq-screen.is-leaving { pointer-events: none; }
.qq-fade-in { animation: qq-fade-in 700ms cubic-bezier(.4, 0, .2, 1) both; }
.qq-fade-out { animation: qq-fade-out 700ms cubic-bezier(.4, 0, .2, 1) both; }
@keyframes qq-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes qq-fade-out { from { opacity: 1; } to { opacity: 0; } }

.qq-wrap { width: 100%; max-width: calc(720px + 2 * var(--space-4)); margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 720px) { .qq-wrap { max-width: calc(720px + 2 * var(--space-6)); padding-inline: var(--space-6); } }
.qq-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-5) var(--space-7); }
@media (min-width: 720px) { .qq-body { gap: var(--space-5); padding-block: var(--space-6) var(--space-8); } }

/* ---------- header: hull panel with the contour rings and the stencil hero line, then the livery band ---------- */
.qq-head__hull { position: relative; overflow: hidden; }
.qq-head__rings { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.qq-head__inner { position: relative; z-index: 1; display: grid; gap: var(--space-2); justify-items: start; padding-block: var(--space-6) var(--space-5); }
.qq-head__code { background: var(--panel); }
.qq-hero { font: 400 44px/44px var(--font-stencil); letter-spacing: .01em; text-transform: uppercase; color: var(--on-graphite); overflow-wrap: anywhere; }
.qq-head__sub { font: 600 12px/16px var(--font-condensed); letter-spacing: .16em; text-transform: uppercase; color: var(--on-graphite-muted); }
@media (min-width: 560px) {
  .qq-hero { font-size: 72px; line-height: 68px; }
  .qq-head__inner { padding-block: var(--space-7) var(--space-6); }
  .qq-head__sub { font-size: 14px; line-height: 20px; }
}
/* Livery: graphite 14, gap 3, paint 8, gap 3, trim 4, under a 2 px surface gap. The gaps are painted surface,
   since the contour backdrop is behind the page. */
.qq-head .bt-livery { box-sizing: content-box; border-top: 2px solid var(--surface);
  background: linear-gradient(var(--graphite) 0 14px, var(--surface) 14px 17px, var(--paint, var(--livery-copper)) 17px 25px, var(--surface) 25px 28px, var(--paint-trim, var(--livery-amber)) 28px 32px); }

/* ---------- card (Panel) ---------- */
.qq-card { --c: var(--chamfer-lg); --_edge: var(--line); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); align-content: start;
  min-width: 0; padding: var(--space-4); background: var(--surface-raised); color: var(--ink);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.qq-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: var(--_edge);
  clip-path: polygon(evenodd, var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c), var(--c) 0,
    calc(var(--c) + 0.41px) 1px, 1px calc(var(--c) + 0.41px), 1px calc(100% - 1px), calc(100% - var(--c) - 0.41px) calc(100% - 1px), calc(100% - 1px) calc(100% - var(--c) - 0.41px), calc(100% - 1px) 1px, calc(var(--c) + 0.41px) 1px); }
@media (min-width: 720px) { .qq-card { padding: var(--space-5); gap: var(--space-4); } }
.qq-card > * { min-width: 0; }

/* ---------- text ---------- */
.qq-label { font: 600 12px/16px var(--font-condensed); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.qq-label[data-tone="amber"] { color: var(--warning); }
.qq-label[data-tone="error"] { color: var(--danger); }
.qq-fine { font: 400 14px/20px var(--font-sans); color: var(--ink-muted); overflow-wrap: anywhere; }
.qq-fine[data-tone="amber"] { color: var(--warning); }
.qq-fine[data-tone="error"] { color: var(--danger); }
.qq-text { overflow-wrap: anywhere; }
.qq-title { font: 600 20px/26px var(--font-condensed); overflow-wrap: anywhere; }

/* ---------- buttons and keys ---------- */
.qq-btn { height: auto; min-height: var(--control-lg); padding-block: var(--space-2); white-space: normal; text-align: center; }
/* Plain keys darken on hover. Zero specificity (:where), so selected and revealed states keep their faces. */
:where(.bt-btn:not(.bt-btn--primary, .bt-btn--secondary, .bt-btn--ghost)):hover { --_face: var(--control-hover); }
.qq-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.qq-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.qq-grid2 > .bt-btn--lg { padding-inline: var(--space-3); }
@media (max-width: 359px) { .qq-grid2--keys { grid-template-columns: minmax(0, 1fr); } }

/* A key in a one-of-several group lights up copper (the selected colour). Radios sit invisibly over the key. */
.qq-key { min-width: 48px; padding: 0 var(--space-3); }
.qq-key.is-on { --_face: var(--copper); --_ink: var(--on-copper); }
.qq-key.is-on:hover { --_face: var(--copper-strong); }
.qq-key > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.qq-key:has(> input:focus-visible)::after { opacity: 1; }
.qq-seg { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: var(--space-2); }
.qq-seg > .qq-key { min-width: 0; padding-inline: 6px; }
.qq-seg > .qq-key > span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 419px) {
  .qq-seg[data-long="true"]:is([data-n="4"], [data-n="5"], [data-n="6"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Switches keep their face and show state with a lamp: filled copper when on, an empty ring when off. */
.lamp { width: 10px; height: 10px; flex: none; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1.5px var(--ink-muted); }
.sw[aria-pressed="true"] .lamp, .sw[aria-checked="true"] .lamp { background: var(--copper); box-shadow: none; }
.bt-panel .bt-btn--ghost { --_ink: var(--on-graphite); }
.bt-panel .bt-btn--ghost:hover { --_face: var(--panel-edge); }
.bt-panel .lamp { box-shadow: inset 0 0 0 1.5px var(--on-graphite-muted); }
.bt-panel .sw[aria-pressed="true"] .lamp { box-shadow: none; }

/* Category switch: a 4 px paint stripe along its foot under a 2 px gap, as the livery's bands sit. */
.qq-topics { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.qq-topics[data-per-row="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Broad stays one per row at every width: the 8 hues are validated for neighbours in that list order.
   Specific subjects share their broad category's hue, so their grid can widen. */
@media (min-width: 560px) { .qq-topics[data-per-row="2"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 359px) { .qq-topics[data-per-row="2"] { grid-template-columns: minmax(0, 1fr); } }
.qq-catchip, .qq-rmchip__toggle { width: 100%; height: auto; min-height: 46px; justify-content: flex-start; gap: var(--space-2);
  padding: 9px var(--space-3) 13px; white-space: normal; text-align: left; font-size: 15px; line-height: 20px; }
.sw[data-cat]::before { background: linear-gradient(var(--cat), var(--cat)) left bottom / 100% 4px no-repeat,
  linear-gradient(var(--surface-raised), var(--surface-raised)) left bottom / 100% 6px no-repeat, var(--_face); }
.qq-catchip__name, .qq-rmchip__name { min-width: 0; overflow-wrap: anywhere; }

.qq-rmchip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: stretch; }
.qq-rmchip__remove { height: auto; min-height: 46px; }

/* Colour marks */
.qq-catmark { display: inline-block; flex: none; width: 8px; height: 8px; background: var(--cat, var(--ink-muted)); }
.qq-cattag { gap: var(--space-2); max-width: 100%; height: auto; min-height: 24px; padding-block: 4px; white-space: normal; line-height: 16px; }
.qq-cattag > span:last-child { min-width: 0; overflow-wrap: anywhere; }

/* Switch row */
.qq-switchrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); }
.qq-switchrow__text { min-width: 0; }
.qq-switchrow__title { font: 600 16px/24px var(--font-sans); overflow-wrap: anywhere; }
.qq-switchrow__blurb { margin-top: var(--space-1); font: 400 14px/20px var(--font-sans); color: var(--ink-muted); overflow-wrap: anywhere; }
.qq-switch { flex: none; min-width: 76px; justify-content: flex-start; gap: var(--space-2); padding: 0 var(--space-3); }
.qq-switch__state { font: 500 14px/20px var(--font-mono); }

/* Text field: sunken well, chamfered, line-strong edge, chamfered copper focus ring 2 px outside. */
.field { --c: var(--chamfer-md); position: relative; isolation: isolate; display: block; min-width: 0; }
.field > input { display: block; width: 100%; height: var(--control-lg); padding: 0 var(--space-3); border: 0; border-radius: 0; background: var(--surface-sunken); color: var(--ink);
  font: 400 16px/24px var(--font-sans);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.field > input::placeholder { color: var(--ink-muted); opacity: 1; }
.field > input:focus { outline: none; }
.field::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--line-strong);
  clip-path: polygon(evenodd, var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c), var(--c) 0,
    calc(var(--c) + 0.41px) 1px, 1px calc(var(--c) + 0.41px), 1px calc(100% - 1px), calc(100% - var(--c) - 0.41px) calc(100% - 1px), calc(100% - 1px) calc(100% - var(--c) - 0.41px), calc(100% - 1px) 1px, calc(var(--c) + 0.41px) 1px); }
.field::after { content: ""; position: absolute; inset: -4px; z-index: -1; background: var(--focus); opacity: 0; pointer-events: none;
  clip-path: polygon(evenodd, calc(var(--c) + 2.34px) 0, 100% 0, 100% calc(100% - var(--c) - 2.34px), calc(100% - var(--c) - 2.34px) 100%, 0 100%, 0 calc(var(--c) + 2.34px), calc(var(--c) + 2.34px) 0,
    calc(var(--c) + 3.17px) 2px, 2px calc(var(--c) + 3.17px), 2px calc(100% - 2px), calc(100% - var(--c) - 3.17px) calc(100% - 2px), calc(100% - 2px) calc(100% - var(--c) - 3.17px), calc(100% - 2px) 2px, calc(var(--c) + 3.17px) 2px); }
.field:focus-within::after { opacity: 1; }

/* Stat tile (readout style) */
.qq-stat { --c: var(--chamfer-md); display: grid; gap: var(--space-1); align-content: start; padding: var(--space-3) var(--space-4); background: var(--surface-sunken);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.qq-stat__value { font: 700 34px/40px var(--font-condensed); font-variant-numeric: tabular-nums; color: var(--ink); }
.qq-stat__label { font: 600 12px/16px var(--font-condensed); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); overflow-wrap: anywhere; }

/* Two-tap confirmation */
.qq-confirm--small { padding-inline: var(--space-3); font-size: 14px; line-height: 20px; }
.qq-confirm.is-armed { --_face: var(--danger-soft); --_ink: var(--danger); }
.qq-confirm.is-armed:hover { --_face: var(--danger-soft); }

/* Empty state */
.qq-empty { display: grid; gap: var(--space-2); justify-items: center; text-align: center; padding: var(--space-6) var(--space-4); }
.qq-empty__title { font: 600 20px/26px var(--font-condensed); }
.qq-empty__body { color: var(--ink-muted); max-width: 46ch; }

/* Fact-check verdict (status colours always paired with their word) */
.qq-flag { --c: var(--chamfer-md); display: grid; gap: var(--space-1); padding: 10px var(--space-3); background: var(--surface-sunken);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.qq-flag__label { font: 700 12px/16px var(--font-condensed); letter-spacing: .14em; text-transform: uppercase; }
.qq-flag__note { font: 400 14px/20px var(--font-sans); color: var(--ink-muted); overflow-wrap: anywhere; }
.qq-flag__fix { font: 600 14px/20px var(--font-sans); overflow-wrap: anywhere; }
.qq-flag[data-tone="success"] { background: var(--success-soft); }
.qq-flag[data-tone="success"] .qq-flag__label, .qq-flag[data-tone="success"] .qq-flag__fix { color: var(--success); }
.qq-flag[data-tone="warning"] { background: var(--warning-soft); }
.qq-flag[data-tone="warning"] .qq-flag__label, .qq-flag[data-tone="warning"] .qq-flag__fix { color: var(--warning); }
.qq-flag[data-tone="danger"] { background: var(--danger-soft); }
.qq-flag[data-tone="danger"] .qq-flag__label, .qq-flag[data-tone="danger"] .qq-flag__fix { color: var(--danger); }

.qq-more { justify-self: start; text-decoration: none; }
.ext::after { content: " \2197"; }

/* A bank question's source (REV B): beside More on this, wrapping under it on narrow screens. */
.qq-review__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); min-width: 0; }
.qq-source { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); min-width: 0; max-width: 100%; padding-block: var(--space-2); font: 500 14px/20px var(--font-sans); }
.qq-source__label { font: 600 12px/16px var(--font-condensed); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); text-decoration: none; }
.qq-source__title { min-width: 0; overflow-wrap: anywhere; }
.qq-source__title::after { content: " \2197"; }

/* Cost readout */
.qq-cost { display: grid; gap: var(--space-2); }
.qq-cost .bt-readout__head { margin-bottom: 0; }
.qq-cost .bt-readout__code { overflow-wrap: anywhere; text-align: right; }
.qq-cost .bt-readout__row:last-child { border-bottom: 0; }
.qq-cost .bt-readout__row dt { min-width: 0; overflow-wrap: anywhere; }
.qq-cost .bt-readout__row dd { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qq-cost__sub dt { padding-left: var(--space-4); }
.qq-cost__total .bt-readout__row { border-bottom: 0; }
.qq-cost__total dt { color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 600; }
.qq-cost__label { margin-top: var(--space-2); font: 600 12px/16px var(--font-condensed); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.qq-cost__note { margin-top: var(--space-1); }

/* ---------- home ---------- */
.qq-home__resume-title { font: 600 22px/28px var(--font-condensed); overflow-wrap: anywhere; }
.qq-home__msg { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.qq-home__msg p { flex: 1 1 220px; }
.qq-home__drop { outline: 2px dashed var(--line-strong); outline-offset: -8px; }
.qq-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------- setup ---------- */
.qq-group { display: grid; gap: var(--space-2); }
.qq-group + .qq-group { margin-top: var(--space-3); }
.qq-disclosure { display: flex; width: 100%; height: auto; min-height: var(--control-md); justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); text-align: left; white-space: normal; }
.qq-disclosure .qq-label { color: inherit; }
.qq-disclosure[data-on="true"] .qq-label { color: var(--warning); }
.qq-disclosure__state { font: 500 14px/20px var(--font-mono); color: var(--ink-muted); flex: none; }
.qq-addrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
.qq-addrow .bt-btn { height: var(--control-lg); min-width: 72px; }
.qq-custom-list { display: grid; gap: var(--space-2); }
.qq-generate { display: grid; gap: var(--space-2); }

/* ---------- generating ---------- */
.qq-steps { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.qq-step { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: baseline; gap: var(--space-3); overflow-wrap: anywhere; }
.qq-step .lamp { align-self: center; justify-self: center; }
.qq-step.is-done { color: var(--ink-muted); }
.qq-step.is-done .lamp { background: var(--ink-muted); box-shadow: none; }
.qq-step:not(.is-done) .lamp { background: var(--copper); box-shadow: none; animation: qq-pulse 750ms linear infinite alternate; }
@keyframes qq-pulse { from { opacity: .25; } to { opacity: 1; } }
.qq-aside { color: var(--ink-muted); min-height: 48px; }

/* ---------- play ---------- */
.qq-strip { display: grid; gap: var(--space-3); padding-block: var(--space-4) var(--space-3); }
.qq-strip__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.qq-strip__left, .qq-strip__right { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.qq-strip .bt-placard { font-variant-numeric: tabular-nums; }
.qq-strip__note { font: 600 12px/16px var(--font-condensed); letter-spacing: .16em; text-transform: uppercase; color: var(--on-graphite-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.qq-strip__score { font: 600 12px/16px var(--font-condensed); letter-spacing: .16em; text-transform: uppercase; color: var(--on-graphite); white-space: nowrap; font-variant-numeric: tabular-nums; }
.qq-strip__score.is-none { color: var(--on-graphite-muted); }
.qq-voice { height: var(--control-md); gap: var(--space-2); padding: 0 var(--space-3); font-size: 14px; }
.qq-track { position: relative; height: 4px; background: var(--panel-edge); overflow: hidden; }
.qq-track > i { position: absolute; left: 0; top: 0; bottom: 0; transition: width .3s ease; }
.qq-track__written { background: var(--on-graphite-muted); opacity: .45; }
.qq-track__done { background: var(--cat, var(--edge-coolant)); }

.qq-qcard[data-cat]::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--cat); z-index: 3; pointer-events: none; }
.qq-qcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding-top: var(--space-1); }
.qq-qcard__num { font: 700 20px/26px var(--font-condensed); font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.qq-question { font: 600 22px/28px var(--font-condensed); overflow-wrap: anywhere; }
@media (min-width: 560px) { .qq-question { font-size: 28px; line-height: 34px; } }
.qq-options { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
/* Option keys: bt-btn faces (chamfered), so the copper focus ring and states come from the system. */
.qq-option { --c: var(--chamfer-md); width: 100%; height: auto; min-height: 56px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto;
  justify-content: stretch; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  text-align: left; white-space: normal; font: 400 18px/26px var(--font-sans); }
.qq-option:hover { --_face: var(--control-hover); }
.qq-option__key { font: 600 16px/24px var(--font-mono); color: var(--ink-muted); text-align: center; }
.qq-option__text { min-width: 0; overflow-wrap: anywhere; }
.qq-option__mark { justify-self: end; }
.qq-option__bar { position: absolute; left: 0; top: var(--c); bottom: 0; width: 4px; background: transparent; }
/* Answered: the options stay at full strength (the system's aria-disabled fade is for unavailable keys). */
.qq-option[data-state] { cursor: default; }
.qq-option[aria-disabled="true"] { opacity: 1; pointer-events: none; }
.qq-option[data-state="correct"] { --_face: var(--success-soft); }
.qq-option[data-state="correct"] .qq-option__key { color: var(--success); }
.qq-option[data-state="correct"] .qq-option__bar { background: var(--success); }
.qq-option[data-state="wrong"] { --_face: var(--danger-soft); }
.qq-option[data-state="wrong"] .qq-option__key { color: var(--danger); }
.qq-option[data-state="wrong"] .qq-option__bar { background: var(--danger); }
.qq-option[data-state="dimmed"] { --_face: var(--surface-sunken); --_ink: var(--ink-muted); }
.qq-option[data-state="correct"]:hover { --_face: var(--success-soft); }
.qq-option[data-state="wrong"]:hover { --_face: var(--danger-soft); }
.qq-option[data-state="dimmed"]:hover { --_face: var(--surface-sunken); }
.qq-reveal { display: grid; gap: var(--space-3); }
@media (prefers-reduced-motion: no-preference) { .qq-reveal { animation: qq-fade-in 250ms ease-out both; } }
.qq-playbar { position: sticky; bottom: 0; z-index: 3; }
@media (min-width: 720px) { .qq-playbar { position: static; } }
.qq-wait { justify-items: center; text-align: center; padding-block: var(--space-6); }
.qq-wait__title { font: 700 26px/32px var(--font-condensed); }
.qq-wait__body { color: var(--ink-muted); max-width: 42ch; }
.qq-spin { width: 22px; height: 22px; border-radius: var(--radius-full); border: 2px solid var(--line); border-top-color: var(--copper); animation: qq-spin .9s linear infinite; }
@keyframes qq-spin { to { transform: rotate(360deg); } }

/* ---------- results ---------- */
.qq-bycat { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.qq-bycat__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(64px, 1fr) auto; align-items: center; gap: var(--space-3); }
.qq-bycat__name { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font: 400 14px/20px var(--font-sans); overflow-wrap: anywhere; }
.qq-bar { position: relative; height: 8px; background: var(--surface-sunken); border-radius: var(--radius-sm); overflow: hidden; }
.qq-bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--cat, var(--ink-muted)); border-radius: var(--radius-sm); }
.qq-bycat__n { font: 500 14px/20px var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qq-review-list { list-style: none; padding: 0; display: grid; }
.qq-review { display: grid; gap: var(--space-2); padding-block: var(--space-4); border-top: 1px solid var(--line); }
.qq-review:first-child { border-top: 0; padding-top: 0; }
.qq-review:last-child { padding-bottom: 0; }
.qq-review__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.qq-review__num { font: 700 18px/24px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.qq-review[data-result="right"] .qq-review__num { color: var(--success); }
.qq-review[data-result="wrong"] .qq-review__num { color: var(--danger); }
.qq-review__q { overflow-wrap: anywhere; }
.qq-review__a { font: 600 14px/20px var(--font-sans); color: var(--success); overflow-wrap: anywhere; }
.qq-review__you { font: 600 14px/20px var(--font-sans); color: var(--danger); overflow-wrap: anywhere; }

/* ---------- storage state: Caution banners above every screen, and the "Waiting for storage" card ---------- */
.qq-banners { display: grid; gap: var(--space-2); }
.qq-banners:not(:empty) { padding-block: var(--space-3); }
.qq-banner__box { display: grid; gap: var(--space-2); justify-items: start; padding: 18px var(--space-4); }
.qq-banner__box .bt-caution__body { margin: 0; overflow-wrap: anywhere; }
.qq-banner__btn { min-height: var(--control-md); }
.qq-storage-wait .qq-actions:has(> [hidden]:only-child) { display: none; }

@media (prefers-reduced-motion: reduce) {
  .qq-fade-in, .qq-fade-out, .qq-reveal { animation: none; }
  .qq-step:not(.is-done) .lamp { animation: none; }
  .qq-spin { animation: none; border-top-color: var(--line-strong); }
  .qq-track > i { transition: none; }
  .bt-btn::before { transition: none; }
}