/* TrainingForge design system
   ---------------------------------------------------------------------------
   One accent (ember), one structural colour (steel navy), a neutral ramp, and
   two semantic colours for right/wrong. Everything else is spacing and weight.
   Dark mode is a redefinition of the same tokens, never a second stylesheet. */

:root {
  --steel-50:#f4f6fa;  --steel-100:#e7ebf2; --steel-200:#ccd4e2; --steel-300:#a3b0c6;
  --steel-400:#6f80a0; --steel-500:#4a5b7d; --steel-600:#33415d; --steel-700:#243049;
  --steel-800:#1a2338; --steel-900:#121a2b; --steel-950:#0b1120;

  --ember-300:#ffc08a; --ember-400:#ff9a4d; --ember-500:#f2760f; --ember-600:#d75f06;
  --ember-700:#ad4b07;

  --bg:var(--steel-50);
  --bg-deep:#eef1f7;
  --surface:#ffffff;
  --surface-2:var(--steel-50);
  --ink:var(--steel-900);
  --ink-soft:var(--steel-600);
  --muted:var(--steel-500);
  --line:var(--steel-200);
  --line-soft:var(--steel-100);

  --brand:var(--ember-500);
  --brand-ink:#ffffff;
  --brand-soft:#fff1e3;

  --good:#0f7a46; --good-bg:#e4f5ec; --good-line:#9ed7bb;
  --bad:#b32318;  --bad-bg:#fdeceb;  --bad-line:#f0b3ae;
  --warn:#9a6700;

  --shadow-1:0 1px 2px rgba(18,26,43,.06), 0 1px 3px rgba(18,26,43,.05);
  --shadow-2:0 2px 4px rgba(18,26,43,.05), 0 8px 24px rgba(18,26,43,.08);
  --shadow-3:0 4px 8px rgba(18,26,43,.06), 0 18px 48px rgba(18,26,43,.12);

  --r-sm:6px; --r:10px; --r-lg:16px; --r-xl:24px;
  --pad:clamp(16px, 4vw, 28px);
  --wrap:1120px;
  --font:"Inter var","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
  :root:not([data-theme="light"]) {
    --bg:var(--steel-950); --bg-deep:#070c16;
    --surface:#111a2c; --surface-2:#0e1626;
    --ink:#e9eef7; --ink-soft:#b6c2d6; --muted:#8494ae;
    --line:#22304a; --line-soft:#1a2539;
    --brand:var(--ember-400); --brand-ink:#20130a; --brand-soft:#2a1c10;
    --good:#4ddb96; --good-bg:#0e2b1e; --good-line:#1d5f41;
    --bad:#ff9f96;  --bad-bg:#2e1614;  --bad-line:#6b2b25;
    --warn:#e0b341;
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 2px 4px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.4);
    --shadow-3:0 4px 8px rgba(0,0,0,.4), 0 18px 48px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:var(--steel-950); --bg-deep:#070c16;
  --surface:#111a2c; --surface-2:#0e1626;
  --ink:#e9eef7; --ink-soft:#b6c2d6; --muted:#8494ae;
  --line:#22304a; --line-soft:#1a2539;
  --brand:var(--ember-400); --brand-ink:#20130a; --brand-soft:#2a1c10;
  --good:#4ddb96; --good-bg:#0e2b1e; --good-line:#1d5f41;
  --bad:#ff9f96;  --bad-bg:#2e1614;  --bad-line:#6b2b25;
  --warn:#e0b341;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 2px 4px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.4);
  --shadow-3:0 4px 8px rgba(0,0,0,.4), 0 18px 48px rgba(0,0,0,.5);
}

/* ---------------------------------------------------------------- base --- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.55;
  font-feature-settings:"cv05" 1,"ss01" 1;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}
h1,h2,h3,h4 { margin:0; line-height:1.2; letter-spacing:-.02em; font-weight:700; text-wrap:balance; }
h1 { font-size:clamp(28px,5vw,44px); letter-spacing:-.03em; }
h2 { font-size:clamp(21px,3vw,28px); }
h3 { font-size:18px; }
p { margin:0; text-wrap:pretty; }
a { color:inherit; }
img,svg { max-width:100%; }
button { font:inherit; color:inherit; }
:focus-visible { outline:3px solid var(--brand); outline-offset:2px; border-radius:4px; }
.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.stack { display:flex; flex-direction:column; }
.muted { color:var(--muted); }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.eyebrow {
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:500;
}
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip {
  position:absolute; left:8px; top:-60px; z-index:100; background:var(--brand);
  color:var(--brand-ink); padding:10px 16px; border-radius:var(--r-sm); font-weight:600;
  transition:top .15s;
}
.skip:focus { top:8px; }

/* -------------------------------------------------------------- chrome --- */
.topbar {
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.topbar .wrap { display:flex; align-items:center; gap:18px; height:62px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; letter-spacing:-.02em; }
.brand svg { width:30px; height:30px; flex:none; }
.brand b { font-size:17px; }
.brand b i { font-style:normal; color:var(--brand); }
.topnav { display:flex; gap:4px; margin-left:auto; align-items:center; }
.topnav a {
  text-decoration:none; font-size:14.5px; font-weight:550; color:var(--ink-soft);
  padding:8px 12px; border-radius:var(--r-sm);
}
.topnav a:hover { background:var(--surface); color:var(--ink); }
.topnav a[aria-current] { color:var(--brand); background:var(--brand-soft); }
.icon-btn {
  display:grid; place-items:center; width:36px; height:36px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--surface); cursor:pointer;
}
.icon-btn:hover { border-color:var(--steel-400); }
.icon-btn svg { width:17px; height:17px; }

main { flex:1 0 auto; }
footer.site {
  margin-top:72px; border-top:1px solid var(--line-soft); background:var(--surface-2);
  padding-block:32px; font-size:14px; color:var(--muted);
}
footer.site .wrap { display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; }
footer.site a { color:var(--ink-soft); }
footer.site .spacer { margin-left:auto; }

/* ------------------------------------------------------------ elements --- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius:var(--r); cursor:pointer;
  padding:11px 18px; font-size:15px; font-weight:600; letter-spacing:-.01em;
  text-decoration:none; background:var(--surface); color:var(--ink);
  border-color:var(--line); box-shadow:var(--shadow-1);
  transition:transform .08s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn:hover { border-color:var(--steel-400); }
.btn:active { transform:translateY(1px); }
.btn.primary {
  background:linear-gradient(180deg, var(--ember-400), var(--ember-500));
  color:#fff; border-color:var(--ember-600); box-shadow:var(--shadow-2);
}
:root[data-theme="dark"] .btn.primary, :root:not([data-theme="light"]) .btn.primary {
  color:var(--brand-ink);
}
.btn.primary:hover { filter:brightness(1.05); border-color:var(--ember-600); }
.btn.ghost { background:transparent; border-color:var(--line); box-shadow:none; }
.btn.lg { padding:14px 26px; font-size:16.5px; border-radius:var(--r); }
.btn.sm { padding:7px 13px; font-size:13.5px; }
.btn svg { width:17px; height:17px; flex:none; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }

.card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
}
.pad { padding:clamp(16px,3vw,24px); }

.tag {
  display:inline-flex; align-items:center; gap:5px; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:500;
  padding:3px 8px; border-radius:99px; background:var(--surface-2);
  border:1px solid var(--line); color:var(--muted); white-space:nowrap;
}
.tag.on { background:var(--brand-soft); border-color:var(--ember-300); color:var(--ember-700); }
:root[data-theme="dark"] .tag.on, :root:not([data-theme="light"]) .tag.on { color:var(--ember-300); }
.tag.good { background:var(--good-bg); border-color:var(--good-line); color:var(--good); }
.tag.bad  { background:var(--bad-bg);  border-color:var(--bad-line);  color:var(--bad); }

.bar { height:6px; border-radius:99px; background:var(--line); overflow:hidden; }
.bar > i { display:block; height:100%; border-radius:99px; background:var(--brand); transition:width .4s cubic-bezier(.2,.8,.2,1); }
.bar.thin { height:4px; }
.bar > i.grad { background:linear-gradient(90deg, var(--ember-400), var(--ember-500)); }

/* ------------------------------------------------------------- layouts --- */
.grid { display:grid; gap:18px; }
.cols-2 { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.cols-3 { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.section { padding-block:clamp(36px,6vw,64px); }
.section-head { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.section-head p { color:var(--muted); max-width:60ch; }

/* ---------------------------------------------------------------- hero --- */
.hero { position:relative; overflow:hidden; background:var(--bg-deep); border-bottom:1px solid var(--line-soft); }
.hero-art { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hero .wrap { position:relative; padding-block:clamp(48px,9vw,96px); }
.hero-grid { display:grid; gap:clamp(28px,5vw,56px); grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; }
@media (max-width:860px) { .hero-grid { grid-template-columns:1fr; } .hero-figure { order:-1; } }
.hero h1 { margin-bottom:16px; }
.hero h1 em { font-style:normal; color:var(--brand); }
.hero .lede { font-size:clamp(16.5px,2vw,19px); color:var(--ink-soft); max-width:52ch; }
/* Four tracks, four buttons. As flex items they took their natural widths,
   so "Aviation" was half the size of "Driver's Education" and the row read
   as a ranking rather than a set. Equal columns say they are peers. */
.hero-cta { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px; margin-top:28px; max-width:520px; }
.hero-cta .btn { justify-content:center; }
.hero-stats { display:flex; flex-wrap:wrap; gap:26px; margin-top:34px; }
.hero-stats div b { display:block; font-size:25px; font-weight:750; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.hero-stats div span { font-size:13px; color:var(--muted); }

/* --------------------------------------------------------- course card --- */
.course-card {
  display:flex; flex-direction:column; text-decoration:none; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-1); transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.course-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-3); border-color:var(--steel-300); }
.course-card .art { aspect-ratio:16/8; background:var(--bg-deep); border-bottom:1px solid var(--line-soft); position:relative; }
.course-card .art svg { position:absolute; inset:0; width:100%; height:100%; }
.course-card .body { padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.course-card .body h3 { letter-spacing:-.02em; }
.course-card .body p { font-size:14.5px; color:var(--muted); }
.course-card .foot { margin-top:auto; padding-top:14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* -------------------------------------------------------------- modes  --- */
.mode-card {
  display:flex; gap:16px; text-decoration:none; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px; box-shadow:var(--shadow-1); transition:border-color .16s, transform .12s, box-shadow .2s;
}
.mode-card:hover { border-color:var(--brand); transform:translateY(-2px); box-shadow:var(--shadow-2); }
.mode-card .ico { flex:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand); border:1px solid var(--ember-300); }
:root[data-theme="dark"] .mode-card .ico, :root:not([data-theme="light"]) .mode-card .ico { border-color:var(--ember-700); }
.mode-card .ico svg { width:22px; height:22px; }
.mode-card h3 { margin-bottom:3px; }
.mode-card p { font-size:14.5px; color:var(--muted); }

/* ------------------------------------------------------------ question --- */
.quiz { max-width:820px; margin-inline:auto; }
.quiz-bar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.quiz-bar .spacer { margin-left:auto; }
.qtext { font-size:clamp(18px,2.4vw,22px); font-weight:650; letter-spacing:-.02em; margin:18px 0 4px; }
.qid { font-family:var(--mono); font-size:12.5px; color:var(--muted); }
.figure {
  margin:16px 0; padding:16px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); display:grid; place-items:center;
}
.figure svg, .figure img { max-height:300px; width:auto; }
/* An image that has not loaded yet has no intrinsic size, so it lays out as a
   zero-sized box. Reserving height on .figure was not enough, because the
   deadlock was in the image itself: it sat at 1px wide and 0px high, the
   lazy loader saw a box with no height, judged it nowhere near the viewport,
   and never fetched it -- which kept it zero-sized. Not one figure on the
   site ever loaded, so every sign question rendered as text in an empty
   frame.
   Loading no longer depends on layout at all: figures are fetched eagerly.
   A pool holds a few dozen small SVG and WebP files and only one group is on
   screen at a time, so there is nothing here worth deferring. The reserved
   height stays, now doing only the job it can actually do -- holding the
   space so the page does not jump when the picture arrives. */
.figure { min-height:172px; }
.opts { display:grid; gap:10px; margin-top:16px; }
.opt {
  display:flex; gap:13px; align-items:flex-start; text-align:left; width:100%;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r);
  padding:14px 16px; cursor:pointer; font-size:16px; line-height:1.45;
  transition:border-color .12s, background .12s, transform .08s;
}
.opt:hover:not(:disabled) { border-color:var(--steel-400); }
.opt:active:not(:disabled) { transform:translateY(1px); }
.opt:disabled { cursor:default; }
.opt kbd {
  font-family:var(--mono); font-size:12.5px; font-weight:600; flex:none;
  width:22px; height:22px; display:grid; place-items:center; border-radius:5px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--muted); margin-top:1px;
}
.opt.right { border-color:var(--good-line); background:var(--good-bg); }
.opt.right kbd { background:var(--good); border-color:var(--good); color:#fff; }
.opt.wrong { border-color:var(--bad-line); background:var(--bad-bg); }
.opt.wrong kbd { background:var(--bad); border-color:var(--bad); color:#fff; }
.opt.picked { border-width:2px; }
.verdict { display:flex; align-items:center; gap:9px; margin-top:16px; font-weight:650; }
.verdict.ok { color:var(--good); } .verdict.no { color:var(--bad); }
.explain {
  margin-top:10px; padding:14px 16px; border-radius:var(--r); font-size:15px;
  background:var(--surface-2); border:1px solid var(--line-soft); color:var(--ink-soft);
}
.explain b { color:var(--ink); }
.quiz-foot { display:flex; align-items:center; gap:12px; margin-top:20px; flex-wrap:wrap; }
.quiz-foot .spacer { margin-left:auto; }
.hint { font-size:13px; color:var(--muted); }
kbd.key {
  font-family:var(--mono); font-size:11.5px; padding:1px 5px; border-radius:4px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--muted);
}

/* ------------------------------------------------------------- mastery --- */
.mastery { display:grid; gap:10px; }
.mrow { display:grid; grid-template-columns:52px 1fr 52px; gap:12px; align-items:center; font-size:14px; }
.mrow .id { font-family:var(--mono); font-size:12.5px; color:var(--muted); }
.mrow .pct { text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-soft); font-weight:600; }
.mrow .nm { font-size:13.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mrow .track { grid-column:1/-1; }

.ring { --p:0; width:120px; height:120px; flex:none; position:relative; display:grid; place-items:center; }
.ring svg { position:absolute; inset:0; transform:rotate(-90deg); }
.ring .val { font-size:26px; font-weight:750; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.ring .lbl { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; font-family:var(--mono); }

/* --------------------------------------------------------------- read  --- */
.read-nav { position:sticky; top:62px; z-index:20; background:var(--bg); padding-block:12px; border-bottom:1px solid var(--line-soft); }
.chips { display:flex; gap:7px; flex-wrap:wrap; }
.chip {
  border:1px solid var(--line); background:var(--surface); border-radius:99px;
  padding:6px 13px; font-size:13.5px; font-weight:550; cursor:pointer; color:var(--ink-soft);
  font-family:var(--mono); letter-spacing:.02em;
}
.chip:hover { border-color:var(--steel-400); }
.chip[aria-pressed="true"] { background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }
.qcard { border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:18px 20px; }
.qcard + .qcard { margin-top:12px; }
.qcard .head { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; margin-bottom:8px; }
.qcard h4 { font-size:16.5px; font-weight:650; margin:6px 0 12px; letter-spacing:-.01em; }
.qcard ol { margin:0; padding:0; list-style:none; display:grid; gap:6px; }
.qcard li { display:flex; gap:11px; font-size:15px; padding:8px 12px; border-radius:var(--r-sm); border:1px solid transparent; }
.qcard li b { font-family:var(--mono); font-size:12.5px; color:var(--muted); min-width:14px; }
.qcard li.is-answer { background:var(--good-bg); border-color:var(--good-line); }
.qcard li.is-answer b { color:var(--good); }

/* ------------------------------------------------------------- results --- */
.result-head { display:flex; gap:clamp(20px,4vw,40px); align-items:center; flex-wrap:wrap; }
.big-score { font-size:clamp(46px,9vw,72px); font-weight:780; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; }
.pill { display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:14px; letter-spacing:.02em;
  padding:6px 14px; border-radius:99px; }
.pill.pass { background:var(--good-bg); color:var(--good); border:1px solid var(--good-line); }
.pill.fail { background:var(--bad-bg);  color:var(--bad);  border:1px solid var(--bad-line); }

/* -------------------------------------------------------------- states --- */
.state-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:10px; }
.state {
  display:flex; align-items:center; gap:10px; text-decoration:none; padding:11px 13px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface); font-size:14.5px;
  transition:border-color .12s, transform .1s, box-shadow .15s;
}
/* The long names are what set the width of this grid. Without a min-width of
   zero a flex item refuses to shrink below its content, so "New Hampshire"
   pushed the count badge past the edge of its own card. The name is the part
   that gives way; the abbreviation and the count keep their size. */
.state .nm { flex:1 1 auto; min-width:0; line-height:1.25; }
.state .tag { flex:none; margin-left:auto; }
.state:hover { border-color:var(--brand); transform:translateY(-1px); box-shadow:var(--shadow-1); }
.state .ab {
  font-family:var(--mono); font-size:12px; font-weight:600; width:30px; height:24px;
  display:grid; place-items:center; border-radius:5px; background:var(--surface-2);
  border:1px solid var(--line); color:var(--muted); flex:none;
}
.state.full .ab { background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }

/* --------------------------------------------------------------- misc  --- */
.crumbs { display:flex; gap:7px; align-items:center; font-size:13.5px; color:var(--muted); padding-top:20px; flex-wrap:wrap; }
.crumbs a { text-decoration:none; }
.crumbs a:hover { color:var(--brand); }
.crumbs svg { width:13px; height:13px; opacity:.5; }
.note {
  border-left:3px solid var(--brand); background:var(--brand-soft); padding:12px 16px;
  border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:14.5px; color:var(--ink-soft);
}
.spin { width:22px; height:22px; border:2.5px solid var(--line); border-top-color:var(--brand);
  border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading { display:grid; place-items:center; gap:14px; padding:80px 0; color:var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
@media print { .topbar, footer.site, .quiz-foot, .read-nav { display:none !important; } }

/* ------------------------------------------------- accounts and pricing --- */
.acct { display:contents; }

/* The box had a margin above and none below, so on the read page the first
   group heading sat straight against its bottom edge and read as part of the
   notice rather than as the start of the questions. It is an interruption in
   the page, and an interruption needs air on both sides. */
.upsell { display:flex; gap:20px; align-items:center; flex-wrap:wrap;
  margin:26px 0 30px;
  border-color:var(--ember-300); background:linear-gradient(180deg, var(--brand-soft), var(--surface)); }
:root[data-theme="dark"] .upsell, :root:not([data-theme="light"]) .upsell { border-color:var(--ember-700); }
.upsell > div:first-child { flex:1 1 300px; }
.upsell-cta { display:flex; gap:10px; flex-wrap:wrap; }

.plan { display:flex; flex-direction:column; gap:10px; position:relative; }
.plan.featured { border-color:var(--brand); box-shadow:var(--shadow-2); }
.plan .ribbon { position:absolute; top:-11px; right:16px; background:var(--brand); color:var(--brand-ink);
  font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:99px; }
.plan-price { display:flex; align-items:baseline; gap:4px; }
.plan-price b { font-size:38px; font-weight:780; letter-spacing:-.04em; }
.plan-price span { color:var(--muted); font-size:15px; }
.plan-note { font-size:14px; margin-top:-4px; }
.plan .btn { margin-top:auto; }
.ticks { list-style:none; margin:6px 0 14px; padding:0; display:grid; gap:9px; font-size:14.5px; }
.ticks li { display:flex; gap:9px; align-items:flex-start; color:var(--ink-soft); }
.ticks li svg { color:var(--good); margin-top:2px; }
.ticks li.off { color:var(--muted); }
.ticks li.off svg { color:var(--muted); }
.pickcourse { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted);
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.pickcourse select { font:inherit; font-family:var(--font); font-size:15px; text-transform:none;
  letter-spacing:0; color:var(--ink); background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:9px 11px; }

.authwrap { max-width:420px; }
.authform { display:grid; gap:14px; margin-top:22px; }
.authform label { display:grid; gap:6px; font-size:13px; color:var(--muted);
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.authform input, .authform select, .authform textarea { font:inherit; font-family:var(--font); font-size:16px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px;
  text-transform:none; letter-spacing:0; }
.authform textarea { resize:vertical; min-height:120px; line-height:1.5; }
.authform select { appearance:none; background-image:none; cursor:pointer; }
.authform input:focus, .authform select:focus, .authform textarea:focus { border-color:var(--brand); }
.authform .hint { margin:-6px 0 0; font-size:13px; color:var(--muted); }
.formerr { color:var(--bad); background:var(--bad-bg); border:1px solid var(--bad-line);
  border-radius:var(--r-sm); padding:10px 13px; font-size:14.5px; }

.acct-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.acct-actions { display:flex; gap:10px; flex-wrap:wrap; margin-left:auto; }
.sublist { list-style:none; margin:16px 0 0; padding:0; display:grid; gap:8px; }
.sublist li { display:flex; gap:12px; justify-content:space-between; align-items:center;
  padding:11px 14px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface-2); font-size:14.5px; }
.chip.locked { opacity:.62; }

/* ------------------------------------------------------------- narrower --- */
@media (max-width:760px) {
  .topbar .wrap { height:56px; gap:10px; }
  .topnav { gap:2px; }
  .topnav a { padding:7px 9px; font-size:14px; }
  .brand b { font-size:16px; }
  .hero-stats { gap:18px; }
  .hero-stats div b { font-size:21px; }
  .quiz-bar { gap:8px; }
  .result-head { gap:18px; }
  .acct-actions { margin-left:0; width:100%; }
  .acct-actions .btn { flex:1; }
}

@media (max-width:560px) {
  :root { --pad:16px; }
  /* The brand mark alone at phone width; the nav needs the room more. */
  .brand b { display:none; }
  .topnav a { padding:7px 8px; font-size:13.5px; }
  .topnav .btn.sm { padding:6px 10px; font-size:13px; }
  h1 { font-size:27px; }
  .hero .wrap { padding-block:34px 40px; }
  .hero-cta { grid-template-columns:1fr; }
  .opt { padding:13px 14px; font-size:15.5px; }
  .qtext { font-size:19px; }
  .quiz-foot { gap:8px; }
  .quiz-foot .btn { flex:1 1 auto; justify-content:center; }
  .state-grid { grid-template-columns:repeat(auto-fill,minmax(146px,1fr)); }
  .mrow { grid-template-columns:44px 1fr 44px; font-size:13px; }
  .mrow .nm { display:none; }
  .mrow .id { grid-column:1; }
  .mrow .pct { grid-column:3; }
  .section { padding-block:30px; }
  .pad { padding:16px; }
  .big-score { font-size:44px; }
  .figure { padding:12px; }
  .figure img, .figure svg { max-height:200px; }
  .read-nav { top:56px; }
  .plan-price b { font-size:32px; }
  .upsell { flex-direction:column; align-items:flex-start; }
  .upsell-cta { width:100%; }
  .upsell-cta .btn { flex:1; justify-content:center; }
  footer.site .wrap { flex-direction:column; align-items:flex-start; gap:8px; }
  footer.site .spacer { display:none; }
}

/* A phone in landscape, and small tablets: keep the sticky bars from eating
   the screen. */
@media (max-height:520px) {
  .topbar { position:static; }
  .read-nav { position:static; }
}

/* Two labels per nav link: the full one, and a short one for a phone. Only
   ever one is in the layout, so the bar cannot wrap to a second line. */
.topnav .narrow { display:none; }
.topnav a { white-space:nowrap; }
@media (max-width:620px) {
  .topnav .wide { display:none; }
  .topnav .narrow { display:inline; }
}

/* A phone has no A-D keys to press. */
@media (max-width:620px) { .hint { display:none; } }

/* The sentence a state-law answer came from, quoted so a learner can check the
   site rather than trust it. */
.src {
  margin:10px 0 0; padding:11px 14px; font-size:14px; line-height:1.55;
  color:var(--ink-soft); background:var(--surface-2);
  border-left:3px solid var(--steel-300); border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.src b { color:var(--muted); font-weight:600; font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; font-family:var(--mono); display:block; margin-bottom:4px; }

/* ------------------------------------------------- about this test --- */

.about h3 {
  display:flex; align-items:center; gap:8px;
  font-size:15px; letter-spacing:.01em; margin:26px 0 8px; color:var(--ink);
}
.about h3 svg { color:var(--ember-500); }
.about p { font-size:15px; line-height:1.65; color:var(--ink-soft); margin:0 0 10px; max-width:70ch; }
.about p b { color:var(--ink); }
.about a { color:var(--ember-600); text-decoration:underline; text-underline-offset:2px; }
:root[data-theme="dark"] .about a, :root:not([data-theme="light"]) .about a { color:var(--ember-300); }

.srclist { list-style:none; padding:0; margin:6px 0 0; display:grid; gap:8px; }
.srclist li {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
  padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2);
}
.srclist .muted { font-size:13px; }

/* ----------------------------------------------------- readiness --- */

.ready { border-left:3px solid var(--line); }
.ready.good { border-left-color:var(--good); }
.ready.fair { border-left-color:var(--ember-500); }
.ready.low  { border-left-color:var(--line); }

.rhead { display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap; justify-content:space-between; }
.rbig { font-size:52px; line-height:1; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.rbig span { font-size:22px; font-weight:600; color:var(--muted); margin-left:2px; }
.ready.good .rbig { color:var(--good); }
.ready.fair .rbig { color:var(--ember-600); }
:root[data-theme="dark"] .ready.fair .rbig, :root:not([data-theme="light"]) .ready.fair .rbig { color:var(--ember-300); }
.rverdict { font-size:14px; font-weight:600; color:var(--ink-soft); margin-top:6px; }

.rstats { display:flex; gap:26px; flex-wrap:wrap; }
.rstats div { display:flex; flex-direction:column; gap:2px; }
.rstats b { font-size:18px; font-variant-numeric:tabular-nums; }
.rstats span { font-size:12.5px; color:var(--muted); }

.rsecs { display:grid; gap:14px; margin-top:20px; }
.rsec { display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center; }
.rsec .nm { font-size:13.5px; color:var(--ink-soft); }
.rsec .pct { font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.rsec .track { grid-column:1/-1; }
.rsec .foot { grid-column:1/-1; font-size:12px; }

.rnote { margin-top:16px; font-size:12.5px; max-width:78ch; }

@media (max-width:640px) {
  .rhead { gap:18px; }
  .rbig { font-size:44px; }
  .rstats { gap:18px; }
  .about p { font-size:14.5px; }
}

/* ------------------------------------------------------------- admin --- */

.tabs { display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--line); }
.tab {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px; border:0; background:none; cursor:pointer;
  font:600 14px/1 var(--font); color:var(--muted);
  border-bottom:2px solid transparent; margin-bottom:-1px; border-radius:8px 8px 0 0;
}
.tab:hover { color:var(--ink); background:var(--surface-2); }
.tab.on { color:var(--ember-600); border-bottom-color:var(--ember-500); }
:root[data-theme="dark"] .tab.on, :root:not([data-theme="light"]) .tab.on { color:var(--ember-300); }

.cols-4 { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.statcard { display:flex; flex-direction:column; gap:4px; }
.statbig { font-size:30px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }

.field {
  padding:9px 12px; border:1px solid var(--line); border-radius:9px;
  background:var(--surface); color:var(--ink); font:400 14px/1.3 var(--font); width:100%;
}
.field:focus-visible { outline:2px solid var(--ember-400); outline-offset:1px; }

.atable { width:100%; border-collapse:collapse; font-size:13.5px; }
.atable th {
  text-align:left; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); font-weight:600; padding:0 10px 8px 0; border-bottom:1px solid var(--line);
}
.atable td { padding:9px 10px 9px 0; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.atable tr:last-child td { border-bottom:0; }
.atable .em { font-weight:600; display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.atable .tag { font-size:10.5px; padding:1px 7px; }
.users td:last-child { text-align:right; }

.spark { display:flex; align-items:flex-end; gap:3px; height:76px; }
.sbar { flex:1; display:flex; align-items:flex-end; min-width:3px; height:100%; }
.sbar i { display:block; width:100%; border-radius:2px 2px 0 0; background:var(--ember-400); }

.ahead {
  font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted);
  margin:26px 0 10px; padding-top:16px; border-top:1px solid var(--line-soft);
}
.note.bad { background:var(--bad-bg); border-color:var(--bad-line); }

@media (max-width:640px) {
  .statbig { font-size:25px; }
  /* A table of accounts cannot shrink usefully, so it scrolls rather than
     wrapping every cell into an unreadable stack. */
  #rows, #detail .atable { overflow-x:auto; }
  .atable { min-width:460px; }
}

/* ------------------------------------------- practical requirements --- */

.reqs { display:grid; gap:12px; margin:8px 0 0; }
.req {
  border:1px solid var(--line); border-radius:11px; padding:12px 14px;
  background:var(--surface-2);
}
.req dt {
  font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:4px;
}
.req dd { margin:0; font-size:15px; line-height:1.55; color:var(--ink); }

/* The citation is present but quiet. A reader who wants to check us can, in
   one click; a reader who just wants the answer is not made to read a
   regulation to find it. */
.prov { margin-top:9px; }
.prov summary {
  font-size:12.5px; color:var(--muted); cursor:pointer; list-style:none;
  display:inline-flex; align-items:center; gap:5px; user-select:none;
}
.prov summary::-webkit-details-marker { display:none; }
.prov summary::before { content:"▸"; font-size:10px; }
.prov[open] summary::before { content:"▾"; }
.prov summary:hover { color:var(--ink-soft); }
.prov .src { margin:8px 0 4px; }
.prov .foot { font-size:12px; }

@media (max-width:640px) {
  .req dd { font-size:14.5px; }
}

/* A rule with several branches: one heading, each branch its own line. */
.req dt { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.branches {
  font-size:10.5px; letter-spacing:.04em; text-transform:none; font-weight:600;
  color:var(--ember-600); background:var(--brand-soft);
  border-radius:99px; padding:1px 8px;
}
:root[data-theme="dark"] .branches, :root:not([data-theme="light"]) .branches {
  color:var(--ember-300); background:transparent; border:1px solid var(--line);
}
.req dd + dd { margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }
.req dd .bullet {
  display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--ember-500); margin:0 8px 3px 0; vertical-align:middle;
}

/* Naming an agency as a source can read as a claim of endorsement, and every
   DMV is explicit that it endorses no third-party test preparation. Small,
   but present on every page that names one. */
.disclaim { font-size:13px; line-height:1.55; margin-top:14px;
  padding-top:12px; border-top:1px solid var(--line); max-width:70ch; }

/* The two offers under a sign-in form are separate errands -- one for a new
   reader, one for a reader who cannot get back in -- so they get a line each
   rather than running together in a paragraph. */
.authlinks { margin-top:18px; font-size:14.5px; }
.authlinks p { margin:0 0 6px; }
.authlinks p:last-child { margin-bottom:0; }

/* Why a state has no course.
   It used to sit under the card as 13px grey prose, which is smaller than the
   card it is explaining and easy to skim past -- and the browser's own
   title="" tooltip would have been smaller still, and unreadable on the one
   state where the answer genuinely matters: Rhode Island gives no motorcycle
   knowledge test at all, so a rider who reads "No course yet" as "not ready
   yet" would go looking for an exam that does not exist.
   So it is a bubble of its own, at 15px, opened by hover OR by keyboard focus
   -- hover alone would hide it from anyone tabbing through. */
.whytag {
  position:relative; display:inline-flex; align-items:center; gap:6px;
  font:600 12.5px/1 var(--mono); letter-spacing:.02em; cursor:help;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--line); color:var(--muted);
  border-bottom-style:dashed;
}
.whytag::after { content:"?"; font-weight:700; opacity:.65; }
.whytag:hover, .whytag:focus-visible { color:var(--ink); border-color:var(--ember-300); }
.whytag:focus-visible { outline:2px solid var(--ember-300); outline-offset:2px; }

.whybub {
  position:absolute; left:0; bottom:calc(100% + 10px); z-index:40;
  width:max-content; max-width:min(340px, 78vw);
  padding:13px 15px; border-radius:12px;
  background:var(--surface); border:1px solid var(--line);
  box-shadow:0 14px 34px rgb(0 0 0 / .28);
  font-family:var(--font); font-size:15px; font-weight:400; line-height:1.5;
  letter-spacing:0; text-transform:none;
  color:var(--ink); text-align:left; white-space:normal;
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .13s ease, transform .13s ease, visibility .13s;
}
.whytag:hover .whybub, .whytag:focus-visible .whybub, .whytag:focus .whybub {
  opacity:1; visibility:visible; transform:translateY(0);
}
/* A card near the right edge would push the bubble off screen. */
.grid.cols-3 > *:last-child .whybub,
.grid.cols-3 > *:nth-child(3n) .whybub { left:auto; right:0; }

@media (max-width:560px) {
  /* No hover on a phone, so it is always open rather than unreachable. */
  .whybub {
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; max-width:none; margin-top:10px; font-size:14.5px;
  }
  .whytag { display:block; border-radius:12px; }
}