/* QBank: Light/dark follows the device, with a manual override (data-theme). */
/* Atkinson Hyperlegible (SIL OFL 1.1, assets/fonts/OFL.txt), self-hosted: Latin subset, 400 and 700. */
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/atkinson-hyperlegible-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/atkinson-hyperlegible-700-latin.woff2') format('woff2'); }
:root {
  /* Color */
  --bg: #f3f6fa; --surface: #ffffff; --ink: #13233a; --muted: #5a6a80;
  --line: #d9e1eb; --edge: #7d8ca1;   /* line: hairlines. edge: control boundaries, 3:1 */
  --blue: #1f5fbf; --on-blue: #ffffff; --blue-soft: #e6eefb;
  --ok: #17693a; --ok-soft: #e3f4ea; --bad: #b5352a; --bad-soft: #fbe7e4;
  --warn: #9a6400; --honey: #7d5400; --honey-soft: #fdf4dc;
  --shadow: 0 10px 30px rgba(19, 35, 58, .12);
  /* Type: five sizes, two weights (400, 700) */
  --t-s: .875rem; --t-m: 1.0625rem; --t-l: 1.25rem; --t-xl: 1.625rem; --t-2xl: 2.25rem;
  /* Space: seven steps */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  /* Shape and motion */
  --r-s: 8px; --r-m: 12px; --tap: 44px; --ease: 150ms ease-out;
  color-scheme: light;
  box-sizing: border-box;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1826; --surface: #172336; --ink: #e7eef8; --muted: #9aabc2;
    --line: #2a3a52; --edge: #64768f;
    --blue: #6ea3f5; --on-blue: #0f1826; --blue-soft: #1c2f4d;
    --ok: #4cc27f; --ok-soft: #16362a; --bad: #f07a6c; --bad-soft: #3d1f1d;
    --warn: #f2b84b; --honey: #f2c14e; --honey-soft: #2e2a1c;
    --shadow: 0 10px 30px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1826; --surface: #172336; --ink: #e7eef8; --muted: #9aabc2;
  --line: #2a3a52; --edge: #64768f;
  --blue: #6ea3f5; --on-blue: #0f1826; --blue-soft: #1c2f4d;
  --ok: #4cc27f; --ok-soft: #16362a; --bad: #f07a6c; --bad-soft: #3d1f1d;
  --warn: #f2b84b; --honey: #f2c14e; --honey-soft: #2e2a1c;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: 64px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--t-m); line-height: 1.45; -webkit-text-size-adjust: 100%;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
a { color: var(--blue); }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 var(--s4); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--blue); color: var(--on-blue); padding: var(--s2) var(--s3); border-radius: var(--r-s); }
.skip:focus { left: 8px; }
.muted { color: var(--muted); }
.good { color: var(--ok); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }
.small { font-size: var(--t-s); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---------- Header: brand, search, category menus ---------- */
.site-top { position: relative; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.brandrow { display: flex; align-items: center; gap: var(--s3); min-height: 58px; }
.brand { flex: none; display: flex; align-items: center; gap: var(--s2); font-weight: 700; font-size: var(--t-m); color: var(--ink); text-decoration: none; }
/* Logo: a seven-cell honeycomb, then a lowercase wordmark. */
.brand { font-size: var(--t-xl); gap: .12em; line-height: 1; }
.brand .qmark { width: .92em; height: .89em; flex: none; }
.brand-t { letter-spacing: -0.045em; }
.site-search { flex: 1; min-width: 0; }
.site-search input {
  width: 100%; min-width: 0; min-height: 42px; padding: var(--s2) var(--s3); font: inherit; font-size: var(--t-m); color: var(--ink);
  background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-s);
}
.site-search input::placeholder { color: var(--muted); }
.icon-btn { flex: none; display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#qb-theme .i-sun { display: none; }
.is-dark #qb-theme .i-sun { display: block; }
.is-dark #qb-theme .i-moon { display: none; }

.cat > summary {
  list-style: none; display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: var(--s2) var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); color: var(--ink);
  font-weight: 700; font-size: var(--t-s); white-space: nowrap; cursor: pointer; user-select: none;
}
.cat > summary::-webkit-details-marker { display: none; }
.cat > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .6; }
.cat[open] > summary { background: var(--blue-soft); border-color: var(--blue); }
.cat[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
/* The panel is positioned against the header so it spans the full width. */
.cat-panel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 70px); max-height: calc(100dvh - 70px); overflow-y: auto; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: var(--s4) 0 var(--s4); }
.cat-panel .wrap { box-sizing: border-box; }
.exams-menu { flex: none; }
.exams-menu > summary, .chapters-menu > summary { height: 42px; min-height: 0; padding: 0 var(--s3); border-radius: var(--r-s); line-height: 1; }
.chapters-menu > summary { height: var(--tap); padding: 0 var(--s2); border: 0; background: none; font-weight: 400; }
/* The Exams menu sits on its own row, under the search bar. */
.catrow { display: flex; flex-wrap: wrap; gap: var(--s2); padding-bottom: var(--s3); }
.cat-h { margin: 0 0 var(--s2); font-size: var(--t-s); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.exams-menu .cat-h { display: none; }
.cat-list { display: grid; margin: 0 calc(var(--s3) * -1); }
@media (min-width: 600px) { .cat-list { grid-template-columns: 1fr 1fr; } }
.cat-item { display: flex; flex-direction: column; min-height: var(--tap); padding: var(--s2) var(--s3); border-radius: var(--r-s); color: var(--ink); text-decoration: none; }
a.cat-item:hover { background: var(--blue-soft); }
.cat-item:focus-visible { outline-offset: -3px; }
.exams-menu .cat-item { display: block; }
.exams-menu .cat-item b { display: block; }
.exams-menu .cat-item span { font-size: var(--t-s); color: var(--muted); }
.exams-menu .cat-item span::after { content: " · "; }
.exams-menu .cat-item em { white-space: nowrap; }
.chapters-menu .cat-item { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s3); }
.cat-item em { font-style: normal; font-size: var(--t-s); color: var(--muted); }
.cat-item.cur { background: var(--blue-soft); font-weight: 700; }
/* Flat, non-interactive "Coming soon" label (menus and the homepage list). */
.badge-soon, .cat-item em.badge-soon { display: inline-block; padding: var(--s1) var(--s2); border: 0; border-radius: var(--r-s); background: var(--bg); color: var(--muted); font-size: var(--t-s); font-weight: 700; white-space: nowrap; cursor: default; }

/* Search results */
.search-panel { position: absolute; left: 0; right: 0; top: calc(58px + env(safe-area-inset-top, 0px)); height: calc(100vh - 58px - env(safe-area-inset-top, 0px)); height: calc(100dvh - 58px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; background: var(--bg); padding: var(--s2) 0 var(--s6); z-index: 20; }
html:has(.search-panel:not([hidden])) { overflow: hidden; scrollbar-gutter: stable; }   /* the page behind stays put */
.sr-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--tap); }
.sr-status { color: var(--muted); margin: 0; overflow-wrap: anywhere; }
.sr-close { flex: none; min-height: var(--tap); margin-right: calc(var(--s2) * -1); padding: 0 var(--s2); font: inherit; font-size: var(--t-m); color: var(--ink); background: none; border: 0; border-radius: var(--r-s); cursor: pointer; }
.sr-empty { margin: var(--s2) 0 0; }
.sr-list { list-style: none; padding: 0; margin: var(--s1) 0 0; }
.sr { padding: var(--s4) 0 var(--s2); border-top: 1px solid var(--line); }
.sr-badges { margin: 0 0 var(--s2); font-size: var(--t-s); color: var(--muted); }
.sr-badges .badge { padding: 0; background: none; border: 0; color: inherit; font-weight: 400; }
.sr-badges .badge + .badge::before { content: " · "; content: " · " / ""; }
.badge { font-size: var(--t-s); font-weight: 700; padding: var(--s1) var(--s2); border-radius: var(--r-s); background: var(--blue-soft); color: var(--blue); }
.badge-soft { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.sr-q { margin: 0 0 var(--s2); }
.sr-a { margin: 0 0 var(--s2); }
.sr-a b { color: var(--ink); }
.sr-x { margin: 0; font-size: var(--t-m); color: var(--muted); }
.sr-link { display: flex; align-items: center; width: fit-content; min-height: var(--tap); font-size: var(--t-s); }

/* ---------- Home ---------- */
.hero { padding: var(--s5) 0 var(--s3); }
h1 { font-size: var(--t-xl); line-height: 1.1; margin: var(--s3) 0 var(--s2); }
.lead { font-size: var(--t-m); color: var(--muted); margin: 0 0 var(--s4); max-width: 34em; }
h2 { font-size: var(--t-l); margin: var(--s6) 0 var(--s1); }
.book { color: var(--muted); font-size: var(--t-s); margin: 0 0 var(--s2); }
h3 { font-size: var(--t-m); color: var(--muted); margin: var(--s5) 0 var(--s2); padding-bottom: var(--s2); border-bottom: 2px solid var(--blue); }
.list { display: grid; gap: var(--s2); }
.home-cat { margin: var(--s5) 0 var(--s2); padding: 0; border: 0; font-size: var(--t-s); font-weight: 700; color: var(--muted); }
.cat-more { margin-top: var(--s4); }
.ch { display: flex; align-items: center; gap: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--s3) var(--s4); color: var(--ink); text-decoration: none; min-height: 54px; }
.ch .num { flex: none; width: 34px; font-weight: 700; color: var(--muted); }
.ch .name { flex: 1; }
.ch .name small { display: block; color: var(--muted); font-size: var(--t-s); }
.ch .tag { flex: none; font-size: var(--t-s); color: var(--muted); }
a.ch { border-color: var(--blue); }
a.ch .num { color: var(--blue); }
a.ch .tag { color: var(--ok); background: var(--ok-soft); padding: var(--s1) var(--s2); border-radius: var(--r-s); font-weight: 700; }
div.ch { opacity: .75; }

/* ---------- Test pages ---------- */
header.hero-sm { padding: var(--s4) 0 var(--s2); }
header.hero-sm h1 { font-size: var(--t-xl); line-height: 1.15; margin: var(--s2) 0 var(--s1); }
.sub { color: var(--muted); margin: 0 0 var(--s3); font-size: var(--t-m); }
.note { font-size: var(--t-s); color: var(--muted); margin: var(--s4) 0 var(--s1); }
.crumbs { color: var(--muted); font-size: var(--t-s); margin: var(--s4) 0 var(--s3); }
.crumbs a { color: var(--muted); }
.crumbs .btn { min-height: var(--tap); }
.bar { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); padding: var(--s3) 0; padding-top: calc(var(--s3) + env(safe-area-inset-top, 0px)); }
.bar[hidden] { display: none; }
.row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.stats { font-size: var(--t-s); color: var(--muted); flex: 1; min-width: 160px; }
.stats b { color: var(--ink); }
.prog { height: 5px; background: var(--line); border-radius: var(--r-s); overflow: hidden; margin-top: var(--s2); }
.prog i { display: block; height: 100%; width: 0; background: var(--blue); transition: width var(--ease); }
select, .btn { font: inherit; font-size: var(--t-s); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); padding: var(--s2) var(--s3); min-height: 38px; }
select { max-width: 100%; }
.btn { cursor: pointer; }
.btn[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.btn-primary { background: var(--blue); border-color: var(--blue); color: var(--on-blue); font-weight: 700; }
.btn-ghost { background: transparent; }
.filters { display: flex; gap: var(--s2); margin-top: var(--s2); }
.filters .btn { flex: 1; }
main h2.sec { font-size: var(--t-m); margin: var(--s6) 0 var(--s3); padding-bottom: var(--s2); border-bottom: 2px solid var(--blue); }
main h2.sec small { font-weight: 400; color: var(--muted); font-size: var(--t-s); margin-left: var(--s2); }

.modes { display: grid; gap: var(--s2); margin: 0 0 var(--s2); }
.mode { display: block; width: 100%; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--s4); cursor: pointer; min-height: 62px; }
@media (hover: hover) { .mode:not(.go):not(.rescue):hover { border-color: var(--blue); } }
.mode:disabled { opacity: .6; cursor: progress; }
.mode b { display: block; font-size: var(--t-m); margin-bottom: var(--s1); }
.mode span { color: var(--muted); font-size: var(--t-s); display: block; }
.mode.go { border-color: var(--blue); background: var(--blue); color: var(--on-blue); }
.mode.go span, .mode.go .tag { color: var(--on-blue); }
.mode .tag { float: right; color: var(--muted); font-size: var(--t-s); margin-left: var(--s3); }
.record { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--s3) var(--s4); margin: var(--s4) 0; font-size: var(--t-m); }
.record b { color: var(--ink); }

.q { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--s4) var(--s4) var(--s3); margin: 0 0 var(--s3); transition: box-shadow var(--ease); }
.q.flash { box-shadow: 0 0 0 3px var(--blue); }
.q p.stem { margin: 0 0 var(--s3); font-weight: 700; }
.q .n { color: var(--blue); margin-right: var(--s1); }
.opts { display: grid; gap: var(--s2); }
.opt { display: flex; gap: var(--s3); align-items: flex-start; text-align: left; width: 100%; font: inherit; font-size: var(--t-m); color: var(--ink); background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-s); padding: var(--s3) var(--s3); cursor: pointer; min-height: var(--tap); touch-action: manipulation; }
.opt .l { font-weight: 700; color: var(--muted); min-width: 1.1em; }
.q.done .opt { cursor: default; }
.opt.right { background: var(--ok-soft); border-color: var(--ok); }
.opt.right .l { color: var(--ok); }
.opt.wrong { background: var(--bad-soft); border-color: var(--bad); }
.opt.wrong .l { color: var(--bad); }
/* Right and wrong are never told by color alone. The text after the slash is what a screen reader says. */
.opt.right::after, .opt.wrong::after { flex: none; width: 18px; height: 18px; margin: 3px 0 0 auto; -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.opt.right::after { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.5l3.7 3.7 7.3-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); content: ""; content: "" / "Correct answer"; background: var(--ok); }
.opt.wrong::after { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 4.5l9 9m0-9l-9 9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); content: ""; content: "" / "Your answer, incorrect"; background: var(--bad); }
.opts.figs.n5 .opt::after { margin: 0 auto; }
.reveal { margin-top: var(--s3); background: none; border: 0; color: var(--blue); font: inherit; font-size: var(--t-s); padding: var(--s1) 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.exp { display: none; margin-top: var(--s3); padding: var(--s3) var(--s3); border-radius: var(--r-s); background: var(--blue-soft); font-size: var(--t-m); }
.q.done .exp { display: block; }
/* Timed practice test */
.mhead { display: flex; gap: var(--s2); align-items: baseline; flex-wrap: wrap; margin: 0 0 var(--s2); color: var(--muted); font-size: var(--t-s); }
.mhead b { color: var(--ink); font-size: var(--t-m); }
.mtop { display: flex; justify-content: space-between; align-items: center; margin: 0 0 var(--s2); font-size: var(--t-s); color: var(--muted); }
.mclock { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); background: var(--blue-soft); border-radius: var(--r-s); padding: var(--s1) var(--s2); }
.mclock.low { color: var(--bad); background: var(--bad-soft); }
.opt.mopt.sel { background: var(--blue-soft); border-color: var(--blue); }
.opt.mopt.sel .l { color: var(--blue); }
.mnav { display: flex; gap: var(--s2); justify-content: space-between; margin: var(--s3) 0; }
.mnav .btn { flex: 1; }
.btn.marked { border-color: var(--warn); color: var(--warn); }
.mpal { margin: var(--s2) 0 var(--s4); }
.mpal summary { cursor: pointer; color: var(--blue); font-weight: 700; margin-bottom: var(--s2); }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: var(--s2); margin-bottom: var(--s3); }
.mp { font: inherit; min-height: 38px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.mp.a { background: var(--blue-soft); border-color: var(--blue); }
.mp.m { box-shadow: inset 0 -3px 0 var(--warn); }
.mp.cur { outline: 2px solid var(--ink); outline-offset: 1px; }
/* Reading passages and figures (TACHS and other exams with stimulus material) */
.passage { margin: 0 0 var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: var(--r-s); background: var(--bg); font-size: var(--t-m); line-height: 1.55; }
.passage summary { cursor: pointer; font-weight: 700; color: var(--blue); }
.passage[open] summary { margin-bottom: var(--s2); }
.passage p, .sample .passage p { margin: 0 0 var(--s2); font-weight: 400; }
.passage p:last-child { margin-bottom: 0; }
.passage .ptitle { font-weight: 700; }
.fig { margin: 0 0 var(--s3); color: var(--ink); }
.fig svg { display: block; max-width: 100%; height: auto; max-height: 260px; }
.opts.figs, .focus .opts.figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opts.figs.n5, .focus .opts.figs.n5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* TACHS Ability: 5 picture choices */
.opts.figs.n5 .opt { flex-direction: column; align-items: center; gap: var(--s1); padding: var(--s2) var(--s2); }
.opts.figs .opt { align-items: center; }
.ofig { flex: 1; display: flex; justify-content: center; color: var(--ink); }
.ofig svg { width: 100%; max-width: 120px; height: auto; }
.sample .so.figs li svg { width: 90px; height: auto; vertical-align: middle; color: var(--ink); }
.q.done .reveal { display: none; }
.verdict { font-weight: 700; display: block; margin-bottom: var(--s1); }
.verdict.ok { color: var(--ok); }
.verdict.bad { color: var(--bad); }
.verdict.seen { color: var(--blue); }
.qfoot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s2); font-size: var(--t-s); color: var(--muted); }
.qstat { font-weight: 700; color: var(--ink); }
.vote { display: inline-flex; align-items: center; gap: var(--s2); margin-left: auto; }
.vote-btn { width: 36px; height: 36px; border-radius: var(--r-s); background: var(--surface); }
.vote-btn svg { fill: currentColor; stroke: none; width: 16px; height: 16px; }
.vote-btn:hover { border-color: var(--blue); color: var(--blue); }
.reasons { border: 0; padding: 0; margin: var(--s3) 0 0; width: 100%; }
.reasons legend { font-weight: 700; color: var(--ink); padding: 0; margin-bottom: var(--s2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip-radio input { position: absolute; opacity: 0; pointer-events: none; }
.chip-radio span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 var(--s3); border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font-size: var(--t-s); }
.chip-radio input:checked + span { border-color: var(--blue); background: var(--blue); color: var(--on-blue); }
.chip-radio input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.reasons textarea { width: 100%; margin-top: var(--s2); padding: var(--s2) var(--s3); font: inherit; font-size: var(--t-m); color: var(--ink); background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-s); resize: vertical; }
.reasons .row { margin-top: var(--s2); }

/* Results sit on the page like the question did. The score leads; everything else is a quiet list. */
.results { margin: var(--s4) 0 var(--s3); }
.q + .results { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); }
.results h2 { margin: 0 0 var(--s2); font-size: var(--t-l); }
.score { font-size: var(--t-2xl); font-weight: 700; line-height: 1.1; }
.score small { font-size: var(--t-m); color: var(--muted); font-weight: 400; margin-left: var(--s2); }
.brk { margin-top: var(--s4); }
.brk .r { display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); font-size: var(--t-m); }
.brk .r b { font-weight: 400; font-variant-numeric: tabular-nums; }
.brk .meter { grid-column: 1/-1; height: var(--s1); border-radius: var(--r-s); background: var(--line); overflow: hidden; }
.brk .meter i { display: block; height: 100%; background: var(--muted); }
.tagx { font-size: var(--t-s); white-space: nowrap; }
.tagx.good { color: var(--ok); }
.tagx.mid { color: var(--ink); }
.tagx.weak { color: var(--bad); }
.next { display: grid; gap: var(--s2); margin-top: var(--s4); }
.next .btn { width: 100%; min-height: 46px; text-align: left; font-size: var(--t-m); }
.next .btn.go { background: var(--blue); border-color: var(--blue); color: var(--on-blue); font-weight: 700; }
.tagx.new { color: var(--muted); }

/* ---------- Weak-spot map ---------- */
.wmap { margin: var(--s5) 0 var(--s2); }
.wmap-empty { margin: var(--s5) 0 0; color: var(--muted); }
.wmap .btn, #units .btn { min-height: var(--tap); }
#wmap-slot { margin-top: var(--s6); }
#wmap-slot .wmap, #wmap-slot .wmap-empty { margin-top: 0; }
#hero[hidden] ~ #wmap-slot, .focus #wmap-slot { display: none; }
.wmap h2 { font-size: var(--t-l); margin: 0 0 var(--s1); }
.wmap .sub b { color: var(--ink); }
.tps { display: grid; gap: var(--s2); }
.tp { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.tp { padding: var(--s3) var(--s3); }
.um-body .tp { border-radius: var(--r-s); background: var(--bg); }
.tp-h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.tp-h > span:first-child { font-weight: 700; }
.tp-f { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s2); font-size: var(--t-s); color: var(--muted); }
.tp-f b, .ch .tag b { color: var(--bad); }
.wmap .meter, .um-body .meter, .chw > .meter { height: 6px; border-radius: var(--r-s); background: var(--line); overflow: hidden; margin-top: var(--s2); }
.wmap .meter i, .um-body .meter i, .chw > .meter i { display: block; height: 100%; background: var(--muted); }
.lv-weak > .meter i { background: var(--bad); }
.lv-mid > .meter i { background: var(--warn); }
.lv-good > .meter i { background: var(--ok); }
.um-sub { margin: 0; font-size: var(--t-s); color: var(--muted); }
.um-body { display: grid; gap: var(--s2); padding: 0 var(--s3) var(--s3); }
.um-body > .btn { justify-self: start; margin-top: var(--s1); }
.btn-sm { min-height: var(--tap); padding: var(--s1) var(--s4); font-weight: 700; }

/* ---------- Drill ---------- */
.streak { display: flex; align-items: center; gap: var(--s1); margin-top: var(--s2); font-size: var(--t-s); color: var(--muted); }
.streak i { width: 22px; height: 6px; border-radius: var(--r-s); background: var(--line); transition: background var(--ease); }
.streak i.on { background: var(--ok); }
.streak span { margin-left: var(--s2); }
.qnum { margin: 0 0 var(--s2); font-size: var(--t-s); font-weight: 700; color: var(--muted); }
.again { margin: 0 0 var(--s2); font-size: var(--t-s); font-weight: 700; color: var(--warn); }
.q.drill .exp .verdict.bad { margin-bottom: var(--s1); }

/* ---------- Home ---------- */
.home-hero { padding: var(--s6) 0; text-align: center; }
.home-hero h1 { font-size: var(--t-xl); line-height: 1.15; letter-spacing: -.01em; margin: 0 0 var(--s3); text-wrap: balance; }
.home-hero .lead { margin: 0 auto var(--s5); line-height: 1.5; max-width: 30em; text-wrap: balance; }
.hero-bee { display: block; margin: 0 auto var(--s5); overflow: visible; }
.bee-out { stroke: var(--ink); }
.bee-tip { fill: var(--ink); }
.hero-bee .bob { animation: hover-bee 3.2s ease-in-out 1 forwards; transform-origin: center; transform-box: fill-box; }
@keyframes hover-bee { 0%, 100% { transform: translate(0, 0) rotate(-4deg); } 50% { transform: translate(2px, -5px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .hero-bee .bob { animation: none; } }
@media (min-width: 600px) { .home-hero { padding: var(--s7) 0 var(--s6); } .home-hero h1 { font-size: var(--t-2xl); } .home-hero .lead { font-size: var(--t-l); line-height: 1.4; } .hero-bee { width: 220px; height: 180px; } }
/* Why study here: three plain reasons. They sit in a row once there's room. */
.why { display: grid; gap: var(--s5); padding: var(--s6) 0 0; border-top: 1px solid var(--line); }
.why-item { display: grid; grid-template-columns: 48px 1fr; align-content: start; gap: var(--s3) var(--s4); }
.why h2 { margin: 0 0 var(--s1); font-size: var(--t-m); line-height: 1.25; text-wrap: balance; }
.why p { margin: 0; color: var(--muted); line-height: 1.5; text-wrap: pretty; }
.why p a { white-space: nowrap; }
/* How you get ready: the loop, step by step, with a thin line carrying you down. */
.ready { list-style: none; margin: 0; padding: 0; counter-reset: how; }
.ready > li { position: relative; padding: 0 0 var(--s5) calc(var(--s6) + var(--s3)); counter-increment: how; }
.ready > li:last-child { padding-bottom: 0; }
.ready > li::before { content: counter(how); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: var(--s6); height: var(--s6); border-radius: 50%; background: #f6c431; color: #2b2108; font-weight: 700; }
.ready > li:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--s6) / 2 - 1px); top: var(--s6); bottom: 0; width: 2px; background: var(--line); }
.ready h3 { margin: 0 0 var(--s1); padding: var(--s1) 0 0; padding-top: calc((var(--s6) - 1lh) / 2); border: 0; font-size: var(--t-m); line-height: 1.25; color: var(--ink); text-wrap: balance; }   /* first line centers on the 32px number */
.ready p { margin: 0; max-width: 34em; color: var(--muted); line-height: 1.5; text-wrap: pretty; }
.ready-map { margin-top: var(--s3); padding: var(--s1) var(--s4) var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.ready-map .brk .r:first-child { border-top: 0; }
.ready p.ready-note { margin-top: var(--s2); font-size: var(--t-s); line-height: 1.4; }
.ready-more { margin: var(--s6) 0 0; max-width: 34em; color: var(--muted); line-height: 1.5; text-wrap: pretty; }
.ready-more a { white-space: nowrap; }
/* The one thing to do next. */
.home-go { margin-top: var(--s7); padding: var(--s6) 0 var(--s4); border-top: 1px solid var(--line); text-align: center; }
.home-go h2 { margin: 0 0 var(--s3); font-size: var(--t-l); line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.home-go p { margin: 0 auto var(--s5); max-width: 30em; color: var(--muted); line-height: 1.5; text-wrap: balance; }
.home-cta { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 var(--s5); font-size: var(--t-m); text-decoration: none; }
.why-ico { display: block; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.why-ico .fill-honey { fill: #f6c431; }   /* the bee's own yellow, in both themes */
.why-ico .on-honey { stroke: #2b2108; }
@media (min-width: 760px) {   /* icon, heading and text each share a row, so the text starts level however the headings wrap */
  .why { grid-template-columns: repeat(3, 1fr); gap: 0 var(--s5); }
  .why-item { grid-template-columns: 1fr; grid-row: span 3; grid-template-rows: subgrid; gap: 0; }
  .why-item > div { display: contents; }
  .why-ico { margin-bottom: var(--s3); }
}
.home-sec { margin-top: var(--s7); }
.home-sec > h2 { font-size: var(--t-l); line-height: 1.2; letter-spacing: -.01em; margin: 0 0 var(--s4); text-wrap: balance; }
/* Tablet and up, home levels step up one size: section 26, step 20. The narrow reason columns stay at 17. */
@media (min-width: 600px) {
  .home-sec > h2, .home-go h2 { font-size: var(--t-xl); }
  .home-sec > h2 { margin-bottom: var(--s5); }
  .ready h3 { font-size: var(--t-l); }
}
/* Home: exams sit in one surface, divided by hairlines. .ch stays as it is on exam pages. */
#units .list { gap: 0; background: var(--surface); border-radius: var(--r-m); overflow: hidden; }
#units .ch { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--s2); align-items: start; min-height: var(--tap); border: 0; border-radius: 0; transition: background var(--ease); }   /* the count has its own line, with room for scores and the topics button */
#units .ch + .ch, .chw + .chw { box-shadow: inset 0 1px 0 var(--line); }
#units .ch:focus-visible { outline-offset: -3px; }
#units .ch:active { background: var(--blue-soft); }
#units .ch .tag { grid-column: 2; padding: 0; background: none; color: var(--muted); font-size: var(--t-s); font-weight: 400; white-space: nowrap; }
#units > h2 { font-size: var(--t-l); margin: var(--s6) 0 var(--s2); }
#units .book + .list, #units > h2 + .list { margin-top: var(--s3); }
#units .ch .num { width: auto; min-width: 1.5em; color: var(--muted); font-weight: 400; }
.chw { display: grid; }
.chw > .ch, .chw > .ch-open, .chw > .meter { grid-row: 1; grid-column: 1; }
#units .chw > .meter { align-self: end; height: var(--s1); margin: 0; border-radius: 0; pointer-events: none; }
#units .um-body { padding-top: var(--s3); }
.um-body[hidden] { display: none; }
.ch-open { justify-self: end; align-self: end; display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: var(--r-s); background: none; color: var(--muted); cursor: pointer; }
.ch-open::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--ease); }
.ch-open[aria-expanded="true"]::before { transform: translateY(2px) rotate(-135deg); }
.ch-open:focus-visible { outline-offset: -3px; }
@media (hover: hover) { .ch-open:hover { background: var(--blue-soft); } }
@media (hover: hover) {
  #units .ch:hover { background: var(--blue-soft); }
}

/* ---------- SEO / about sections ---------- */
.seo { margin: var(--s6) auto 0; padding-top: var(--s5); border-top: 1px solid var(--line); font-size: var(--t-m); }
.seo h2 { font-size: var(--t-l); margin: 0 0 var(--s3); }
.seo h3 { font-size: var(--t-m); color: var(--ink); margin: var(--s5) 0 var(--s2); padding: 0; border: 0; }
.seo p { margin: 0 0 var(--s3); }
.seo ul { padding-left: var(--s5); }
.seo .topics { margin: 0 0 var(--s3); padding: 0; list-style: none; color: var(--muted); }
.seo .topics li { margin: var(--s1) 0; }
.seo .topics strong { font-weight: 400; color: var(--ink); }
/* Study guides, comparisons and the practice exam: long reading, so space does the sorting. */
#guide { margin-top: var(--s4); padding-top: 0; border-top: 0; }
#guide > * + h2 { margin-top: var(--s6); }
#guide ul, #guide ol { margin: 0 0 var(--s4); padding-left: var(--s5); }
#guide li { margin: 0 0 var(--s2); }
#guide li::marker { color: var(--muted); }
#sources + ul { padding-left: 0; list-style: none; }
#sources + ul li { margin: 0; }
#sources + ul a { display: flex; align-items: center; min-height: var(--tap); padding: var(--s1) 0; }
#guide .fineprint { margin: var(--s4) 0 0; }
/* Samples read as a quiet list: same voice as the home sample question, no cards. */
.sample { padding: var(--s5) 0; border-top: 1px solid var(--line); }
h3 + .sample, h2 + .sample { padding-top: var(--s1); border-top: 0; }
.seo .sample + h2 { margin-top: var(--s6); }
/* Practice exam: answers wait behind the same quiet link the test screen uses. */
.sample > details > summary { display: flex; align-items: center; min-height: var(--tap); width: fit-content; list-style: none; font-size: var(--t-s); color: var(--blue); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sample > details > summary::-webkit-details-marker { display: none; }
.sample > details[open] > summary { color: var(--muted); }
.sample .sq { margin: 0 0 var(--s3); }
.sample .so { margin: 0 0 var(--s3); padding-left: var(--s5); }
.sample .so li { margin: var(--s1) 0; }
.sample .passage { border: 0; background: var(--surface); }
.sample .passage .ptitle { font-weight: 700; }
.sample .sa { margin: 0; color: var(--muted); }
.sample .sa strong { color: var(--ink); }
.allch { display: flex; flex-wrap: wrap; gap: 0 var(--s4); margin: 0 0 var(--s4); }
.allch a, .allch strong { display: flex; align-items: center; min-height: var(--tap); padding: var(--s2) 0; }
@media (max-width: 599px) { .allch { flex-direction: column; } }
.chnav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--s3); margin: var(--s4) 0; font-size: var(--t-m); }
.chnav a { display: flex; align-items: center; min-height: var(--tap); padding: var(--s2) 0; }
.chnav a:last-child:not(:first-child) { margin-left: auto; text-align: right; }
@media (max-width: 599px) { .chnav { flex-direction: column; } .chnav span:empty { display: none; } }
.fineprint { font-size: var(--t-s); color: var(--muted); }

footer.site-foot { color: var(--muted); font-size: var(--t-s); padding: var(--s6) var(--s4) var(--s7); border-top: 1px solid var(--line); margin-top: var(--s6); }
footer.site-foot p { margin: 0 0 var(--s2); }
footer.site-foot a { color: var(--blue); }

/* ---------- Admin ---------- */
.admin main { padding-top: var(--s4); padding-bottom: var(--s7); }
.admin-head { display: flex; align-items: center; justify-content: space-between; }
.admin-head h1 { margin: 0; font-size: var(--t-xl); }
.login { display: grid; gap: var(--s3); max-width: 360px; }
.login input, .filterbar select { min-height: 46px; padding: 0 var(--s3); font: inherit; font-size: var(--t-m); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); margin: var(--s4) 0; }
@media (min-width: 640px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--s3); display: flex; flex-direction: column; }
.kpi-n { font-size: var(--t-l); font-weight: 700; }
.kpi-l { font-size: var(--t-s); color: var(--muted); }
.kpi-warn { border-color: var(--warn); }
.kpi-warn .kpi-n { color: var(--warn); }
.tabs { display: flex; gap: var(--s1); overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: var(--s4); }
.tab { padding: var(--s3) var(--s4); white-space: nowrap; color: var(--muted); text-decoration: none; font-weight: 700; border-bottom: 3px solid transparent; }
.tab.on { color: var(--ink); border-bottom-color: var(--blue); }
.aq { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--s4); margin-bottom: var(--s3); }
.aq-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-bottom: var(--s2); font-size: var(--t-s); }
.aq-rate { font-size: var(--t-l); font-weight: 700; }
.aq-q { font-weight: 700; }
.aq-opts { padding-left: 1.4em; }
.aq-opts li.good { font-weight: 700; }
.chip { display: inline-block; font-size: var(--t-s); padding: var(--s1) var(--s3); border-radius: var(--r-s); background: var(--bad-soft); color: var(--bad); margin: 0 var(--s1) var(--s1) 0; }
.comment { margin: var(--s2) 0; padding: var(--s2) var(--s3); border-left: 3px solid var(--line); background: var(--bg); border-radius: 0 var(--r-s) var(--r-s) 0; font-size: var(--t-m); }
.pre { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); padding: var(--s4); overflow-x: auto; font-size: var(--t-s); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.actions .btn { min-height: 46px; padding: 0 var(--s4); }
.filterbar { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); flex-wrap: wrap; }
.table { width: 100%; border-collapse: collapse; margin: 0 0 var(--s4); font-size: var(--t-m); }
.table th, .table td { text-align: left; padding: var(--s3) var(--s3) var(--s3) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table th { padding-top: 0; font-size: var(--t-s); font-weight: 400; color: var(--muted); }
.table .num { text-align: right; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- 10 Question Blitz jars, Bee Rescue, results ---------- */
.nextq { margin: var(--s3) 0 var(--s1); }
.nextq .btn { width: 100%; padding: var(--s4); font-size: var(--t-m); font-weight: 700; background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.jarsvg { display: block; width: 100%; max-width: 400px; margin: 0 auto; overflow: visible; }
.jarsvg .mjar { fill: rgba(120, 180, 230, .18); stroke: #7fa8c9; stroke-width: 2; }
.jarsvg .mshine { stroke: rgba(255, 255, 255, .75); stroke-width: 2; stroke-linecap: round; }
.jarsvg .mlid { fill: #c9a36b; stroke: #8a5a2b; stroke-width: 1.2; }
.jarsvg .stuck .mjar { fill: var(--bad-soft); stroke: var(--bad); }
.jarsvg .free .mjar { fill: rgba(120, 180, 230, .08); stroke-dasharray: 3 3; }
.jarsvg .body { fill: #f6c431; stroke: #2b2108; stroke-width: 1.5; }
.jarsvg .stripe { stroke: #2b2108; stroke-width: 3.2; fill: none; }
.jarsvg .wing { fill: rgba(220, 240, 255, .85); stroke: #8fb3cf; stroke-width: 1; }
.jarsvg .sting { stroke: #2b2108; stroke-width: 2; stroke-linecap: round; }
.jarsvg .eye { fill: #2b2108; }
.jarsvg .mouth, .jarsvg .ant { fill: none; stroke: #2b2108; stroke-width: 1.3; stroke-linecap: round; }
.jarsvg .wait .bob { opacity: .9; }
.jarsvg .stuck .bob { transform: rotate(10deg); }
.jarsvg .just .fly { animation: flyout .8s ease-out both; }
@keyframes flyout { from { transform: translateY(66px); } to { transform: translateY(0); } }
.beeline { font-size: var(--t-m); margin: var(--s2) 0 0; }
.results .jarsvg { max-width: 440px; margin: var(--s3) auto var(--s1); }
@media (prefers-reduced-motion: reduce) { .jarsvg .just .fly { animation: none; } }
.rhead { display: flex; flex-direction: column; gap: var(--s1); margin: 0 0 var(--s2); }
.rhead .rk { font-size: var(--t-s); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--honey); }
.rhead b { font-size: var(--t-l); line-height: 1.25; }
.rhead small { color: var(--muted); font-size: var(--t-s); }
.rescuecard { border: 1px solid var(--honey); background: var(--honey-soft); border-radius: var(--r-m); padding: var(--s3); margin: var(--s3) 0 var(--s1); display: flex; flex-direction: column; gap: var(--s2); text-align: left; }
.rescuecard .rk { font-size: var(--t-s); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--honey); }
.rescuecard b { font-size: var(--t-m); }
.rescuecard span { color: var(--muted); font-size: var(--t-m); }
.rescuecard .btn { width: 100%; min-height: 50px; font-size: var(--t-m); font-weight: 700; background: var(--blue); border: 1px solid var(--blue); color: var(--on-blue); border-radius: var(--r-s); cursor: pointer; margin-top: var(--s1); }
.mode.rescue { border: 1px solid var(--honey); background: var(--honey-soft); }
.mode.rescue .tag { color: var(--honey); }
.resuming .mode.rescue { border-color: var(--line); background: var(--surface); }
.resuming .mode.rescue .tag { color: var(--muted); }
@media (hover: hover) { .resuming .mode.rescue:hover { border-color: var(--blue); } }
.minor { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); justify-content: center; margin-top: var(--s2); text-align: center; }
.lnk { background: none; border: 0; color: var(--blue); font: inherit; font-size: var(--t-s); text-decoration: underline; cursor: pointer; padding: var(--s2); }

/* ---------- Focus mode: a test or drill is on screen ---------- */
.focusbar { display: none; position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.focus-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s2); min-height: 48px; }
.focus-leave { justify-self: start; min-height: var(--tap); margin-left: calc(var(--s2) * -1); padding: 0 var(--s2); font: inherit; font-size: var(--t-m); color: var(--ink); background: none; border: 0; border-radius: var(--r-s); cursor: pointer; white-space: nowrap; }
.focus-count { font-size: var(--t-s); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chapters-menu { justify-self: end; margin-right: calc(var(--s2) * -1); }
[tabindex="-1"]:focus { outline: none; }
.focus .focusbar { display: block; }
.focus .site-top, .focus .bar, .focus .site-foot, .focus .seo, .focus #units, .focus #hero { display: none; }
.focus:has(#app .results) .site-foot { display: block; }   /* results, breaks and subtest intros are not the test itself */
.fprog { height: 2px; background: var(--line); }
.focus:has(#app > .beebox) .fprog { display: none; }   /* blitz: the jars are the progress */
.fprog i { display: block; height: 100%; width: 0; background: var(--blue); transition: width var(--ease); }
.chapters-menu .cat-item em { font-weight: 400; }
.focus #main { padding-top: var(--s2); }
.focus .beebox { margin: 0 0 var(--s2); padding: var(--s2) var(--s3); }
.focus #app > .beebox { margin: 0 0 var(--s4); padding: var(--s2) 0 0; background: none; border: 0; }
.focus .beebox .jarsvg { max-width: 100%; }
.focus #app > .beebox p { display: none; }   /* blitz: the jars say it already, and the svg label has the count */
.focus #bee .beebox svg { display: block; width: auto; max-width: 100%; max-height: 84px; margin: 0 auto; }
.focus #bee .beebox p { margin-top: var(--s1); font-size: var(--t-s); }
.focus .q { padding: 0; margin-bottom: var(--s5); background: none; border: 0; border-radius: 0; }
.focus #app > .q:only-of-type .n { display: none; }   /* the bar already says which question this is */
.focus .passage { border: 0; background: var(--surface); }
.focus .q p.stem { margin-bottom: var(--s4); font-size: var(--t-l); font-weight: 400; line-height: 1.35; }
.focus .opts { gap: var(--s2); grid-template-columns: minmax(0, 1fr); }
.focus .opt { padding: var(--s3); font-size: var(--t-m); line-height: 1.35; }
.focus .reveal { margin-top: var(--s2); min-height: var(--tap); }
/* Once answered, the other choices stay whole and readable, and step back in muted text. */
.focus .q.done .opt:not(.right):not(.wrong) { color: var(--muted); }
.focus .exp { scroll-margin-bottom: 72px; }
.focus .exp { margin-top: var(--s4); padding: var(--s3) 0 0; border-top: 1px solid var(--line); border-radius: 0; background: none; font-size: var(--t-m); line-height: 1.45; }
.focus .verdict.ok, .focus .verdict.bad, .focus .verdict.seen { color: var(--ink); }
.focus .exp { position: relative; }
.focus .qfoot { margin-top: 0; }
.focus .qstat { margin-top: var(--s1); font-size: var(--t-s); font-weight: 400; color: var(--muted); }
/* Thumbs sit on the verdict line instead of a row of their own. */
.focus .vote { position: absolute; top: 2px; right: calc(var(--s3) * -1); gap: 0; font-size: var(--t-s); }
.focus .vote:has(button) { font-size: 0; }
.focus .vote-btn { width: var(--tap); height: var(--tap); background: none; border: 0; color: var(--muted); }
.focus .q.done .verdict { padding-right: calc(var(--tap) * 2); min-height: var(--s6); }
.focus .rhead { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); margin-bottom: var(--s2); }
.focus .rhead b { font-size: var(--t-m); }
.focus .rhead small { display: none; }   /* the bee picture's caption says the same */
/* The Next button stays pinned to the bottom of the screen, so moving on never needs a scroll. */
.focus .nextq { position: sticky; bottom: 0; z-index: 4; margin: 0; padding: var(--s2) 0 calc(var(--s2) + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to bottom, transparent, var(--bg) 10px); }
.focus .nextq .btn { padding: var(--s3); min-height: 46px; }
.focus .mtop { position: sticky; top: calc(51px + env(safe-area-inset-top, 0px)); z-index: 5; padding: var(--s1) 0; background: var(--bg); }   /* 51px: the bar's own height */
.focus .results { margin-top: var(--s1); }
.focus .minor { margin-top: 0; font-size: var(--t-s); }
#guide .next a.btn { text-decoration: none; text-align: center; }