/* Quant90 design system
   Neutral palette, one confident indigo brand colour (used with restraint: the wordmark, primary buttons, the
   current page, the score badge, links, progress, active chips and the focus ring), one muted ink-blue accent and
   one soft ink-blue wash for secondary parts (charts, rules, highlights), one typeface (the system UI font, so no
   font is fetched from another site), 8px spacing steps.
   Green and red are reserved for right and wrong answers; nothing else on the site is green or red. Light theme only. */

:root {
  color-scheme: light;

  /* Palette */
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --surface-2: #F4F2EE;
  --surface-3: #ECE8E1;
  --ink: #1C1A17;
  --ink-2: #3A3631;
  --muted: #6B655C;
  --faint: #857E74;          /* numbers and separators only, never body text (3.8:1) */
  --line: #E7E3DC;
  --line-strong: #D3CCC1;
  /* Brand: deep indigo, clearly apart from the right-answer green and the wrong-answer red. */
  --brand: #4338CA;          /* text and fills: 7.9:1 on white, 7.6:1 on --bg, 7.0:1 on --brand-tint; white on it 7.9:1 */
  --brand-strong: #3730A3;   /* hover and pressed (white on it 9.9:1) */
  --brand-tint: #EEF0FE;     /* soft fills: the score badge, a selected choice */
  --brand-line: #C9CEF6;     /* borders on tints; as text on --brand, 5.0:1 */
  --accent: #3E5266;         /* muted ink-blue, for secondary parts */
  --accent-strong: #2F4052;
  --accent-tint: #EEF1F4;
  --right: #2F7D4F;          /* right answers only: fills, borders, dots */
  --right-ink: #2B7449;      /* right-answer text on --right-tint (5.0:1) */
  --right-tint: #EAF3ED;
  --wrong: #B4443A;          /* wrong answers only (4.75:1 on --wrong-tint) */
  --wrong-tint: #F8ECEA;

  /* Soft: the one soft highlight, in the ink-blue family. Signal lines, formula card, section tints, progress.
     Kept clearly apart from the right/wrong tints (deltaE 5.5 from --right-tint, 6.5 from --wrong-tint). */
  --soft: #4F6478;           /* bars, rules, icons (6.1:1 on white) */
  --soft-ink: #34495C;       /* text on a soft tint (8.2:1 on --soft-tint) */
  --soft-tint: #EDF1F5;
  --soft-tint-2: #F5F7F9;    /* lighter section wash */
  --soft-line: #D5DEE7;

  /* Type */
  /* The platform's own UI font (San Francisco, Segoe UI, Roboto): nothing to download, nothing sent to a font host. */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.8125rem;   /* 13 */
  --fs-sm: 0.875rem;    /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md: 1.125rem;    /* 18 */
  --fs-lg: 1.375rem;    /* 22 */
  --fs-xl: 1.75rem;     /* 28 */
  --fs-2xl: 2.25rem;    /* 36 */
  --lh-tight: 1.25;
  --lh: 1.6;

  /* Spacing: 8px steps (4px half-step for tight UI) */
  --s-h: 4px;
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 40px;
  --s6: 48px;
  --s8: 64px;
  --s10: 80px;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --maxw: 1040px;
  --readw: 700px;
  --tap: 44px;
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand);   /* the ring as a shadow, for places that cannot take an outline */
  --header-h: 65px;          /* the sticky header: a 64px bar and its 1px rule (phones too) */

  /* Rhythm: one gap between page sections, one inside them */
  --section-gap: var(--s6);
  --shadow-sm: 0 1px 2px rgba(28, 26, 23, .04);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

/* Anchor jumps land below the sticky header, with a little room. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--s2)); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; }

h1, h2, h3, h4 { line-height: var(--lh-tight); margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-xl); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
h4 { font-size: var(--fs-base); }
p { margin: 0 0 var(--s2); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--s2); padding-left: 1.25em; }
li + li { margin-top: var(--s-h); }
strong { font-weight: 600; }
small { font-size: var(--fs-sm); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s4) 0; }

a { color: var(--brand); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-strong); }

:focus { outline: none; }
/* The keyboard focus ring is an outline, not a box-shadow, so the shadows that mark states (a selected or
   checked choice, the primary button, the current nav link or question dot) can never replace it. */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-sm); }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

.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-link {
  position: absolute; left: var(--s2); top: -100px; z-index: 40;   /* above the sticky header */
  background: var(--surface); color: var(--ink); padding: var(--s1) var(--s2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.skip-link:focus { top: var(--s1); }

/* Layout */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s2); }
.narrow { max-width: 780px; }
main { display: block; padding: var(--s4) 0 var(--s8); }
.stack > * + * { margin-top: var(--s2); }
.stack-lg > * + * { margin-top: var(--s4); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.xsmall { font-size: var(--fs-xs); }
.center { text-align: center; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
.spacer { flex: 1 1 auto; }

@media (min-width: 768px) {
  .wrap { padding: 0 var(--s4); }
  main { padding: var(--s6) 0 var(--s10); }
  h1 { font-size: var(--fs-2xl); }
}

/* Header: the ribbon. Sticky at the top of every page, on the page background with a 1px rule below.
   Desktop: three columns, the wordmark left, the links at the true centre of the page (the two side columns are
   always equal, whatever the badge says) and the estimate badge right; thin rules divide the links. */
.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); background: var(--bg); }
.site-header .wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  min-height: 64px; column-gap: var(--s2);
}
.wordmark {
  justify-self: start; grid-column: 1; grid-row: 1;
  font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.03em; color: var(--ink);
  text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap);
}
.wordmark span { color: var(--brand); }
.wordmark .logo-mark { flex: none; width: 24px; height: 24px; margin-right: 8px; }   /* the rising-chart mark, also the favicon */
@media (max-width: 399px) { .wordmark .logo-mark { width: 22px; height: 22px; margin-right: 6px; } }   /* a little more room beside the score badge */
.wordmark:hover { color: var(--ink); }
.nav { grid-column: 2; grid-row: 1; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0; }
.nav li { display: flex; align-items: center; }
.nav li + li { margin-top: 0; }
.nav a {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s2);
  color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
}
.nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); border-radius: 0; }
.nav-toggle { display: none; }
@media (hover: hover) { .nav a:hover { background: var(--surface-2); color: var(--ink); } }

/* The estimate badge (site.js): the projected Quant score once the readiness goals are met, progress toward
   them before. Indigo text on the indigo tint, a pill like the chips; the hint shows on hover and focus. */
.est-badge {
  grid-column: 3; grid-row: 1; justify-self: end; position: relative;
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; white-space: nowrap;
  border: 1px solid var(--brand-line); border-radius: 999px; background: var(--brand-tint); color: var(--brand);
  font-size: var(--fs-xs); font-weight: 500; line-height: 1; text-decoration: none; font-variant-numeric: tabular-nums;
  transition: border-color .12s ease, color .12s ease;
}
.est-badge:hover { color: var(--brand-strong); border-color: var(--brand); }
.est-badge:focus-visible { border-radius: 999px; }
.est-v { font-size: var(--fs-sm); font-weight: 700; letter-spacing: -0.01em; }
.est-badge[data-state="ready"] .est-v { font-size: var(--fs-base); }
.est-r { padding-left: 7px; border-left: 1px solid var(--brand-line); font-size: 0.75rem; font-weight: 600; }
.est-tip {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1; width: max-content; max-width: 264px;
  padding: 8px 12px; border-radius: var(--radius-sm); background: var(--ink); color: #fff;
  font-size: var(--fs-xs); font-weight: 400; line-height: 1.45; letter-spacing: 0; white-space: normal; text-align: left;
  box-shadow: 0 6px 20px rgba(28, 26, 23, .16); visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .12s ease, visibility 0s linear .12s;
}
.est-badge:focus-visible .est-tip { visibility: visible; opacity: 1; transition: opacity .12s ease; }
@media (hover: hover) { .est-badge:hover .est-tip { visibility: visible; opacity: 1; transition: opacity .12s ease .15s; } }
.est-badge.tip-off .est-tip { visibility: hidden; opacity: 0; }
/* Up to 900px the badge says "Est." rather than "Est. score", so it always fits its column. */
@media (max-width: 899px) { .est-k2 { display: none; } }

/* Phones: the wordmark left, then the badge and the Menu button on the right. The menu slides down under the
   bar (grid rows 0fr to 1fr), its links divided by 1px lines, and the two bars of the icon turn into a cross. */
@media (max-width: 639px) {
  .site-header .wrap { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: var(--s1); min-height: 0; padding-top: 10px; padding-bottom: 10px; row-gap: 0; }
  .est-badge { grid-column: 2; min-height: var(--tap); padding: 0 12px; }
  /* The hint hangs from the bar, not the badge (which sits near the middle here), so it never runs off the screen. */
  .site-header .wrap { position: relative; }
  .est-badge { position: static; }
  .est-tip { left: var(--s2); right: var(--s2); width: auto; max-width: none; }
  .nav-toggle {
    grid-column: 3; grid-row: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: var(--tap); min-width: var(--tap); padding: 0 14px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
    font: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--ink); cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
  }
  .nav-toggle[aria-expanded="true"] { border-color: var(--line-strong); background: var(--surface-2); }
  .nav-icon { position: relative; width: 14px; height: 10px; flex: none; }
  .nav-icon i {
    position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 1px; background: currentColor;
    transition: transform .22s var(--ease), top .22s var(--ease);
  }
  .nav-icon i:first-child { top: 1.5px; }
  .nav-icon i:last-child { top: 7px; }
  .nav-toggle[aria-expanded="true"] .nav-icon i { top: 4.25px; }
  .nav-toggle[aria-expanded="true"] .nav-icon i:first-child { transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-icon i:last-child { transform: rotate(-45deg); }

  .nav {
    grid-column: 1 / -1; grid-row: 2;
    display: grid; grid-template-rows: 0fr; width: 100%; margin: 0;
    visibility: hidden; opacity: 0;
    transition: grid-template-rows .24s var(--ease), opacity .18s ease, visibility 0s linear .24s;
  }
  .nav.is-open {
    grid-template-rows: 1fr; visibility: visible; opacity: 1;
    transition: grid-template-rows .24s var(--ease), opacity .18s ease .04s, visibility 0s;
  }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; min-height: 0; overflow: hidden; }
  .nav li { display: block; }
  .nav li:first-child { margin-top: 10px; padding-top: var(--s1); border-top: 1px solid var(--line); }
  .nav li + li { border-top: 1px solid var(--line); }
  .nav li:last-child { padding-bottom: var(--s1); }
  .nav a { width: 100%; padding: 0 var(--s2); font-size: var(--fs-base); border-radius: var(--radius-sm); }
  .nav li + li a { border-radius: 0; }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--brand); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface-2); }
  .nav a:focus-visible { outline-offset: -2px; }   /* the open menu clips anything outside the links */
}
/* The narrowest phones (under 360px): the Menu button shows its icon only (the word stays its name), and the
   badge drops the range, so the bar never scrolls sideways. */
@media (max-width: 359px) {
  .nav-toggle { padding: 0; width: var(--tap); }
  .nav-toggle .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .est-r { display: none; }
}
/* Desktop: links fill the header height, so the current-page underline sits on the header rule; a thin
   vertical rule divides the links, as in a tabbed ribbon. Hover: indigo text over a light indigo underline,
   so it reads clearly and stays apart from the current page (ink text, full indigo underline). */
@media (min-width: 640px) {
  .nav a { min-height: 64px; }
  .nav li + li::before { content: ""; flex: none; width: 1px; height: 14px; margin: 0 2px; background: var(--line-strong); }
  .nav a:hover { background: transparent; color: var(--ink); }
  .nav a:not([aria-current="page"]):hover { color: var(--brand); box-shadow: inset 0 -2px 0 var(--brand-line); border-radius: 0; }
}
@media (min-width: 640px) and (max-width: 767px) { .nav a { padding: 0 12px; } }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: var(--s4) 0 var(--s5); color: var(--muted); font-size: var(--fs-sm); }
.site-footer p { margin: 0 0 var(--s1); max-width: 720px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }
.site-footer .footer-links { display: flex; flex-wrap: wrap; gap: 0 var(--s3); margin-top: var(--s2); }
.footer-links a { display: inline-flex; align-items: center; min-height: 32px; }
@media (max-width: 639px) { .footer-links a { min-height: var(--tap); } }

/* Breadcrumb */
.crumbs { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s2); }
.crumbs a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs .sep { margin: 0 var(--s1); color: var(--faint); }

/* Eyebrow / kicker */
.eyebrow { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s1); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  min-height: var(--tap); padding: 0 var(--s3); border-radius: var(--radius-sm);
  border: 1px solid transparent; font: inherit; font-weight: 500; font-size: var(--fs-base);
  line-height: 1.2; text-decoration: none; cursor: pointer; user-select: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 1px 0 rgba(28, 26, 23, .12); }
.btn-primary:hover, .btn-primary:active { background: var(--brand-strong); color: #fff; }
.btn:active:not([disabled]) { transform: translateY(1px); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
@media (hover: hover) { .btn-secondary:hover { background: var(--surface-2); color: var(--ink); } }
.btn-ghost { background: transparent; color: var(--ink-2); }
@media (hover: hover) { .btn-ghost:hover { background: var(--surface-2); color: var(--ink); } }
.btn-sm { min-height: 36px; padding: 0 var(--s2); font-size: var(--fs-sm); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn-block { width: 100%; }
@media (max-width: 479px) { .btn-sm { min-height: var(--tap); } }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s3); box-shadow: var(--shadow-sm); }
.card-quiet { background: var(--surface-2); border-color: transparent; box-shadow: none; }
.card.is-muted { background: var(--surface-2); border-color: transparent; box-shadow: none; }
.card.is-muted h3 { color: var(--ink-2); }
.card-table { padding-top: var(--s1); padding-bottom: var(--s1); }
.card h2 + p, .card h3 + p { margin-top: var(--s1); }
@media (max-width: 479px) { .card { padding: var(--s2) var(--s2) var(--s3); } }

a.card-link { display: block; color: inherit; text-decoration: none; transition: border-color .12s ease, background-color .12s ease; }
a.card-link:hover { border-color: var(--line-strong); color: inherit; }
a.card-link:focus-visible { border-radius: var(--radius-lg); }

/* Status labels */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.status-open { color: var(--accent); }
.status-done { color: var(--ink-2); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }

/* Level badges: neutral tints plus a 4-step meter and a text label, never color alone */
.badge {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1; letter-spacing: 0.01em;
  padding: 5px 9px 5px 8px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-2);
}
.badge .meter { display: inline-flex; gap: 2px; align-items: flex-end; }
.badge .meter i { display: block; width: 3px; border-radius: 1px; background: var(--line-strong); }
.badge .meter i:nth-child(1) { height: 5px; }
.badge .meter i:nth-child(2) { height: 7px; }
.badge .meter i:nth-child(3) { height: 9px; }
.badge .meter i:nth-child(4) { height: 11px; }
.badge .meter i.on { background: currentColor; }
.badge-core { background: #F5F3EF; }
.badge-hard { background: #ECE8E1; border-color: #E0DAD0; }
.badge-very_hard { background: #DDD7CC; border-color: #D0C9BD; color: var(--ink); }
.badge-beyond { background: var(--ink); border-color: var(--ink); color: #F4F2EE; }
.badge-beyond .meter i { background: #6B655C; }
.badge-beyond .meter i.on { background: #F4F2EE; }

.chip-plain {
  display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: 500; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; background: var(--surface);
}

/* Progress bar */
.progress { display: flex; align-items: center; gap: var(--s1); }
.progress-track { flex: 1 1 auto; height: 6px; background: var(--brand-tint); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--brand); border-radius: 3px; width: 0; transition: width .4s var(--ease); }
.progress-label { font-size: var(--fs-xs); color: var(--muted); min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }

/* Grid helpers */
.grid { display: grid; gap: var(--s2); }
.grid-cards {
  grid-template-columns: 1fr; gap: 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}

/* Home */
.hero { padding: var(--s2) 0 var(--s5); border-bottom: 1px solid var(--line); margin-bottom: var(--s5); }
.hero .eyebrow { color: var(--brand); }
.hero h1 .hl { color: var(--brand); }   /* the key phrase */
.hero h1 { max-width: 18em; }
.hero .lede { font-size: var(--fs-md); color: var(--ink-2); max-width: 36em; margin-top: var(--s2); }
.hero .cta { margin-top: var(--s3); }
/* Separator dots sit in the gap to the left of each fact; overflow clips the dot of a fact that wraps to a new line. */
.hero-facts { display: flex; flex-wrap: wrap; gap: var(--s-h) var(--s3); margin: var(--s3) 0 0; font-size: var(--fs-sm); color: var(--muted); overflow: hidden; }
.hero-facts b { color: var(--ink); font-weight: 600; }
.hero-facts span { position: relative; }
.hero-facts span + span::before { content: ""; position: absolute; left: -13px; top: 50%; width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%; background: var(--faint); }
.area { margin-top: var(--section-gap); }
.area:first-of-type { margin-top: 0; }
.area-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); flex-wrap: wrap; }
.area-head h2 { font-size: var(--fs-md); }
.area-count { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.topic-card { display: flex; flex-direction: column; gap: var(--s1); min-height: 152px; }
.topic-card h3 { font-size: var(--fs-base); }
.topic-card .meta { font-size: var(--fs-sm); color: var(--muted); }
.topic-card .foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--s1); }
.topic-card.is-closed h3 { color: var(--ink-2); }
/* Each area is one divided list: name and facts on the left, status on the right. */
.grid-cards > .topic-card {
  border: 0; border-radius: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto 16px;
  align-items: center; gap: 4px var(--s3); padding: var(--s2) var(--s3); box-shadow: none;
}
.topic-card .chev { grid-column: 3; grid-row: 1 / span 2; width: 16px; height: 16px; color: var(--faint); transition: transform .15s var(--ease), color .15s ease; }
.topic-card .chev svg { display: block; width: 16px; height: 16px; }
@media (hover: hover) { a.topic-card:hover .chev { color: var(--ink); transform: translateX(2px); } }
.grid-cards > .topic-card + .topic-card { border-top: 1px solid var(--line); }
.grid-cards > .topic-card .meta { margin: 0; }
.topic-card h3, .topic-card .meta { grid-column: 1; }
.topic-card .foot { grid-column: 2; grid-row: 1 / span 2; margin: 0; min-width: 160px; }
@media (hover: hover) { a.card-link.topic-card:hover { background: var(--surface-2); } }
.grid-cards > a.topic-card:focus-visible { border-radius: 0; outline-offset: -2px; }   /* inside the card: the list clips its edges */
.nw { white-space: nowrap; }
@media (max-width: 559px) {
  .grid-cards > .topic-card { grid-template-columns: minmax(0, 1fr) 16px; gap: 6px var(--s2); padding: var(--s2); }
  .topic-card .foot { grid-column: 1; grid-row: auto; min-width: 0; }
  .topic-card .chev { grid-column: 2; grid-row: 1 / span 3; }
}

/* Topic page */
.topic-head { margin-bottom: var(--s5); }
.head-progress { max-width: 380px; margin-top: var(--s3); }
.hp-label { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.topic-head p.lede { font-size: var(--fs-md); color: var(--ink-2); max-width: 40em; margin-top: var(--s2); }
.facts { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin-top: var(--s2); color: var(--muted); font-size: var(--fs-sm); }
.facts b { color: var(--ink); font-weight: 600; }
.lesson-list {
  list-style: none; padding: 0; margin: 0; display: grid; gap: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.lesson-list li + li { margin-top: 0; }
.lesson-list > li.card { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.lesson-list > li.card + li.card { border-top: 1px solid var(--line); }
.lesson-item { display: grid; grid-template-columns: 32px 1fr; gap: var(--s2); align-items: start; }
.lesson-no {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.lesson-item.is-live .lesson-no { background: var(--brand); color: #fff; border-color: var(--brand); }
.lesson-item.is-done .lesson-no { background: var(--surface-3); color: var(--ink); border-color: var(--line-strong); }
.lesson-item:not(.is-live) h3 { color: var(--ink-2); font-weight: 500; }
.lesson-main { min-width: 0; }
.lesson-actions { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s1); }
@media (max-width: 479px) {
  .lesson-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); }
  .lesson-actions .btn { width: 100%; padding: 0 var(--s1); text-align: center; }
  .lesson-actions .btn-ghost { border-color: var(--line); }
}
.lesson-item .title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); min-height: 36px; }
.lesson-item h3 { font-size: var(--fs-base); }
details.more { margin-top: var(--s1); }
details.more > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap); color: var(--muted); font-size: var(--fs-sm); font-weight: 500;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "+"; display: inline-block; width: 1em; text-align: center; font-weight: 600; }
details.more[open] > summary::before { content: "\2212"; }
details.more > summary:hover { color: var(--ink); }
details.more ul { color: var(--ink-2); font-size: var(--fs-sm); margin-top: var(--s-h); list-style: disc; max-width: 68ch; }
.section-title { margin: var(--section-gap) 0 var(--s2); }

/* Learn page */
.learn-layout { display: grid; gap: var(--s4); }
@media (min-width: 960px) {
  .learn-layout { grid-template-columns: 208px minmax(0, 1fr); gap: var(--s6); }
  .toc { position: sticky; top: calc(var(--header-h) + var(--s3)); align-self: start; }
}
.learn-body { max-width: var(--readw); min-width: 0; }
.learn-head { margin-bottom: var(--s5); }
.learn-head .lede { font-size: var(--fs-md); color: var(--ink-2); margin-top: var(--s2); }
.toc { font-size: var(--fs-sm); }
.toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.toc li { margin: 0; counter-increment: toc; }
.toc a {
  display: flex; gap: var(--s1); align-items: flex-start; min-height: 36px; padding: 8px var(--s1); line-height: 1.35;
  color: var(--muted); text-decoration: none; border-left: 2px solid var(--line);
}
.toc a::before { content: counter(toc); font-variant-numeric: tabular-nums; color: var(--faint); width: 1.1em; flex: none; }
.toc a:hover { color: var(--ink); border-left-color: var(--line-strong); }
.toc a.is-current { color: var(--ink); border-left-color: var(--brand); font-weight: 500; background: linear-gradient(90deg, var(--soft-tint-2), transparent); }
.toc-mobile { display: block; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 0 var(--s2); margin-bottom: var(--s5); }
.toc-mobile > summary { min-height: var(--tap); display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 500; font-size: var(--fs-sm); list-style: none; }
.toc-mobile > summary::-webkit-details-marker { display: none; }
.toc-mobile > summary::after { content: "+"; font-weight: 600; color: var(--muted); }
.toc-mobile[open] > summary::after { content: "\2212"; }
.toc-mobile ol { padding-bottom: var(--s1); }
.toc-desktop { display: none; }
@media (min-width: 960px) {
  .toc-mobile { display: none; }
  .toc-desktop { display: block; }
}

.part { padding-top: var(--section-gap); }   /* a jump to a part lands below the header (scroll-padding-top on html) */
.part:first-of-type { padding-top: 0; }
.part-head { display: flex; align-items: baseline; gap: var(--s2); margin-bottom: var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.part-head { align-items: center; }
.part-no {
  flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.part h3 { margin: var(--s4) 0 var(--s1); }
.part h3:first-child { margin-top: 0; }

.display-eq { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s2) var(--s2); margin: var(--s2) 0; overflow-x: auto; overflow-y: hidden; }
/* Phones: a little less padding and the default display size, so most display equations fit without a scrollbar. */
@media (max-width: 479px) {
  .display-eq { padding: var(--s2) var(--s1); }
  .display-eq .katex-display > .katex { font-size: 1em; }
}
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; margin: var(--s1) 0; }
.katex { font-size: 1.06em; text-transform: none; letter-spacing: normal; }
/* Keep inline formulas on one line from 480px up; below that, allow breaks to avoid overflow.
   Keep each inline formula under about 270px (route boxes are about 280px wide at 720px); write a long chain as
   several formulas, \(a = b\) \(= c\), so the line can break between them. Where one is still too wide for
   its box (routes, shortcut cards, formula-card rows), Q90.fitMath in site.js adds .is-wrap, which lets it
   break after = and + (rules next to each box below). */
@media (min-width: 480px) { .katex-html { white-space: nowrap; } }

.fact-list { list-style: none; padding: 0; counter-reset: fact; }
.fact-list > li { counter-increment: fact; position: relative; padding-left: 36px; }
.fact-list > li + li { margin-top: var(--s2); }
.fact-list > li::before {
  content: counter(fact); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-3); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

.note { border-left: 2px solid var(--accent); padding: var(--s1) 0 var(--s1) var(--s2); color: var(--ink-2); margin: var(--s2) 0; }
.note .label, .signal .label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-right: var(--s1); }
.signal .label { color: var(--soft-ink); }

table.simple { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: var(--s2) 0; }
.card-table table.simple, table.simple.summary-table { margin-top: 0; }
table.simple th, table.simple td { text-align: left; padding: 10px var(--s1); border-bottom: 1px solid var(--line); vertical-align: top; }
table.simple th { font-weight: 600; color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; }
table.simple td.num, table.simple th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-scroll { overflow-x: auto; overflow-y: hidden; }

/* Routine box */
.routine { background: var(--soft-tint-2); border: 1px solid var(--soft-line); border-radius: var(--radius-lg); padding: var(--s3); margin: var(--s3) 0 0; }
.routine h3 { margin: 0 0 var(--s2); font-size: var(--fs-base); }
.routine-grid { display: grid; gap: var(--s2); grid-template-columns: 1fr; }
@media (min-width: 560px) { .routine-grid { grid-template-columns: 1fr 1fr; } }
.routine-step { background: var(--surface); border-radius: var(--radius); padding: var(--s2); }
.routine-step b { display: block; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--s-h); color: var(--soft-ink); }
@media (max-width: 479px) { .routine { padding: var(--s2); } }
.routine-step p { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }

/* Worked examples */
.example { margin-top: var(--s3); }
.example + .example { margin-top: var(--s3); }
.example-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin-bottom: var(--s1); }
.example-head .ex-no { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.example h3 { margin: 0 0 var(--s2); }
.signal { background: var(--soft-tint); border-left: 3px solid var(--soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 10px var(--s2); font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: var(--s2); }
.stem { font-size: var(--fs-md); line-height: 1.55; }
.stem p { margin-bottom: var(--s1); }
.roman { list-style: none; padding-left: 0; margin: var(--s1) 0 var(--s2); }
.roman li { display: flex; gap: var(--s1); }
.roman .rn { flex: none; width: 2.4em; font-weight: 500; }
.choices-static { list-style: none; padding: 0; margin: var(--s2) 0 0; display: grid; gap: 6px; }
.choices-static li { margin: 0; display: flex; gap: var(--s2); align-items: baseline; padding: 6px var(--s1); border-radius: var(--radius-sm); }
.choices-static li .ltr { font-weight: 600; color: var(--muted); width: 1.2em; flex: none; }
.choices-static li.is-answer { background: var(--right-tint); }
.choices-static li.is-answer .ltr { color: var(--right-ink); }
.answer-tag { margin-left: auto; font-size: var(--fs-xs); font-weight: 600; color: var(--right-ink); white-space: nowrap; }
.solution { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.solution-wrap { margin-top: var(--s3); }
.solution-wrap > summary { list-style: none; }
.solution-wrap > summary::-webkit-details-marker { display: none; }
.solution-wrap[open] > summary { margin-bottom: var(--s2); }
.solution-wrap > .solution { margin-top: 0; }
.solution h4 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: var(--s3) 0 var(--s1); }
.solution h4:first-child { margin-top: 0; }
.solution .answer-line { font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: normal; margin: 0 0 var(--s1); }
.solution .answer-line b { font-weight: 700; }
.steps { padding-left: 1.4em; }
.steps li { padding-left: 4px; }
.steps li + li { margin-top: var(--s1); }
.routes { display: grid; gap: var(--s2); margin-top: var(--s2); }
@media (min-width: 720px) { .routes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* Set by Q90.fitMath (site.js): when a formula in either route is wider than its half, the pair stacks;
   if a formula is still too wide once stacked, inline maths in the routes may break after = and +. */
.routes.is-stacked { grid-template-columns: minmax(0, 1fr); }
.routes.is-wrap .katex-html { white-space: normal; }
.route { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s2); background: var(--bg); }
/* A grid track must never grow to fit a long formula and push the page sideways: the last resort is a sideways scroll inside the route. */
.routes > .route { min-width: 0; overflow-x: auto; overflow-y: hidden; }
.route .route-title { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); margin-bottom: var(--s1); }
.route .route-title .kind { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; }
.route.is-fast .route-title .kind { color: var(--accent); }
.route ol { font-size: var(--fs-sm); margin: 0; padding-left: 1.3em; }
.route p { font-size: var(--fs-sm); }
.switch { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--ink-2); }
.switch b { font-weight: 600; }
/* One shared table, so every explanation starts at the same x. */
.why-wrong { list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); display: table; width: 100%; }
.why-wrong li { display: table-row; }
.why-wrong li + li { margin-top: 0; }
.why-wrong li > span { display: table-cell; padding: 8px 16px 8px 0; border-bottom: 1px dashed var(--line); vertical-align: top; }
.why-wrong li > span:last-child { padding-right: 0; }
.why-wrong li:last-child > span { border-bottom: 0; }
.why-wrong .ltr { font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.why-wrong .tag { display: block; margin: 2px 0 0; font-size: var(--fs-xs); color: var(--muted); }
/* Phones: the choice sits on its own line above its note. A long choice such as an ordering of five powers
   in a no-wrap first column would otherwise leave the note a sliver, or push the table past the screen. */
@media (max-width: 479px) {
  .why-wrong, .why-wrong li, .why-wrong li > span { display: block; }
  .why-wrong li { padding: 8px 0; border-bottom: 1px dashed var(--line); }
  .why-wrong li:last-child { border-bottom: 0; }
  .why-wrong li > span { padding: 0; border-bottom: 0; }
  .why-wrong .ltr { white-space: normal; margin-bottom: 2px; }
}
.check-line { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--ink-2); }

/* Traps and shortcuts */
.trap-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.trap-list li + li { margin-top: 0; }
.trap { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s2) var(--s2) 12px; background: var(--surface); }
.trap h3 { font-size: var(--fs-base); margin: 0 0 var(--s1); }
.trap p { font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: var(--s1); }
.trap p.leads-to { font-size: var(--fs-sm); color: var(--muted); margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); }
.leads-to b { color: var(--ink); }
.shortcut-grid { display: grid; gap: var(--s2); }
/* Two equal columns: a long formula wraps inside its card (.is-wrap, set by Q90.fitMath) instead of widening
   one column and squeezing the other. A formula that still does not fit scrolls inside the card. */
@media (min-width: 640px) { .shortcut-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.shortcut { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s2); min-width: 0; overflow-x: auto; overflow-y: hidden; }
.shortcut.is-wrap .katex-html { white-space: normal; }
.shortcut h3 { font-size: var(--fs-base); margin: 0 0 var(--s1); }
.shortcut p { font-size: var(--fs-sm); color: var(--ink-2); }

/* Quick check */
.qc { margin-top: var(--s2); padding: var(--s2) var(--s3) var(--s3); }
.qc + .qc { margin-top: var(--s2); }
@media (max-width: 479px) { .qc { padding: var(--s2); } }
.qc .qc-q { font-weight: 500; margin-bottom: var(--s2); }
.qc-options { display: grid; gap: var(--s1); grid-template-columns: 1fr 1fr; }
@media (min-width: 640px) {
  .qc-options { grid-template-columns: repeat(4, 1fr); }
  /* One row for 2, 3 or 5 options too, instead of empty slots or a lone option on a second row. */
  .qc-options[data-n="2"] { grid-template-columns: repeat(2, 1fr); }
  .qc-options[data-n="3"] { grid-template-columns: repeat(3, 1fr); }
  .qc-options[data-n="5"] { grid-template-columns: repeat(5, 1fr); }
}
/* Two columns on phones: an odd last option takes the full row rather than sitting alone in half of it. */
@media (max-width: 639px) { .qc-opt:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Sentence-length options (.is-long, set by learn.js) take one row each and read from the left,
   instead of wrapping to four or five lines in a quarter-width button. */
.qc-options.is-long, .qc-options.is-long[data-n] { grid-template-columns: minmax(0, 1fr); }
.qc-options.is-long .qc-opt { text-align: left; padding: 10px var(--s2); }
.qc-opt {
  min-height: var(--tap); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface);
  font: inherit; color: var(--ink); cursor: pointer; padding: 6px var(--s1);
}
@media (hover: hover) { .qc-opt:hover:not([aria-disabled="true"]) { border-color: var(--ink-2); } }
.qc-opt[aria-disabled="true"] { cursor: default; }
.qc-opt.is-right { border-color: var(--right); background: var(--right-tint); color: var(--right-ink); font-weight: 600; }
.qc-opt.is-wrong { border-color: var(--wrong); background: var(--wrong-tint); color: var(--wrong); }
/* A symbol as well as color, so right and wrong never rely on color alone. */
.qc-opt.is-right::before { content: "\2713\00a0"; }
.qc-opt.is-wrong::before { content: "\2715\00a0"; }
.qc-feedback { margin-top: var(--s2); font-size: var(--fs-sm); }
.qc-feedback .verdict { font-weight: 600; margin-right: 6px; }
.qc-feedback .verdict.right { color: var(--right-ink); }
.qc-feedback .verdict.wrong { color: var(--wrong); }
.qc-score { margin-top: var(--s2); }
/* Empty live regions take no space (kept in the page, not display:none, so screen readers still hear updates). */
.qc-feedback:empty, .qc-score:empty { margin-top: 0; }

/* Formula card */
.formula-card { background: var(--surface); border: 1px solid var(--soft-line); border-radius: var(--radius-lg); padding: 0 var(--s3) var(--s1); overflow: hidden; box-shadow: var(--shadow-sm); }
.fc-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-h) var(--s2);
  margin: 0 calc(-1 * var(--s3)); padding: 12px var(--s3); background: var(--soft-tint); border-bottom: 1px solid var(--soft-line);
}
.fc-title { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.fc-sub { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--soft-ink); }
.formula-row { display: grid; gap: var(--s-h) var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.formula-row:last-child { border-bottom: 0; }
.formula-row .f-label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
/* A \dfrac or \tfrac reaches a few px past its line box. Room above and below (padding, cancelled by the
   negative margin so the row keeps its rhythm) plus overflow-y: hidden mean no vertical scrollbar; the row
   scrolls sideways only when a formula is truly wider than the column. */
.formula-row .f-body {
  font-size: var(--fs-sm); line-height: 1.7; min-width: 0;
  overflow-x: auto; overflow-y: hidden; padding: 6px 0 8px; margin: -6px 0 -8px;
}
/* Set by Q90.fitMath when a formula is wider than the column: break it after = and + before scrolling. */
.formula-row .f-body.is-wrap .katex-html { white-space: normal; }
@media (min-width: 640px) { .formula-row { grid-template-columns: 190px minmax(0, 1fr); } }
@media (max-width: 479px) { .formula-card { padding: 0 var(--s2) var(--s1); } .fc-head { margin: 0 calc(-1 * var(--s2)); padding: 12px var(--s2); } }

.cta { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

/* Practice screen */
.q-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s2); margin-bottom: var(--s3); }
.q-count { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
h1.eyebrow { line-height: inherit; }   /* the set name is the screen's heading, set small like any eyebrow */
.q-dots { display: flex; gap: 8px; }
.q-dot { width: 36px; height: 6px; border-radius: 3px; background: var(--surface-3); border: 0; padding: 0; cursor: pointer; position: relative; }
.q-dot::after { content: ""; position: absolute; inset: -19px -4px; }
.q-dot.was-right { background: #BFD9C8; }   /* right on an earlier visit */
.q-dot.was-wrong { background: #E8C3BE; }   /* wrong on an earlier visit */
.q-dot.is-current { background: var(--brand); }
.q-dot.is-right { background: var(--right); }
.q-dot.is-wrong { background: var(--wrong); }
.q-dot.is-current.is-right, .q-dot.is-current.is-wrong { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--brand); }
.q-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin-bottom: var(--s3); font-size: var(--fs-sm); color: var(--muted); }
.timer { font-variant-numeric: tabular-nums; color: var(--muted); }
.timer.is-over { color: var(--ink-2); }
.timer-btn { background: none; border: 0; padding: 0 var(--s1); min-height: var(--tap); font: inherit; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-sm); }
.timer-btn:hover { color: var(--ink); }
.bookmark-btn { margin-left: auto; }
.bookmark-btn[aria-pressed="true"] { color: var(--ink); border-color: var(--ink-2); }
.bookmark-btn svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 479px) {
  .bookmark-btn { min-width: var(--tap); padding: 0 var(--s1); }
  .bookmark-btn .bm-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.bookmark-btn[aria-pressed="true"] svg path { fill: currentColor; }

.choices { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: var(--s1); }
.choices li { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--tap); gap: var(--s1); align-items: stretch; }
.choice {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--s2); align-items: center; text-align: left;
  min-height: 52px; padding: var(--s1) var(--s2); border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-md); cursor: pointer; width: 100%;
  transition: border-color .12s ease, background-color .12s ease;
}
@media (hover: hover) { .choice:hover:not([disabled]):not(.is-crossed) { border-color: var(--ink-2); } }
.choice .ltr {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
}
.choice .c-text { min-width: 0; }
.choice .c-flag { font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.choice[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-tint); box-shadow: inset 0 0 0 1px var(--brand); }
.choice[aria-pressed="true"] .ltr { background: var(--brand); border-color: var(--brand); color: #fff; }
.choice.is-crossed { color: var(--muted); background: var(--bg); border-style: dashed; cursor: not-allowed; }
.choice.is-crossed .c-text { text-decoration: line-through; text-decoration-color: var(--ink-2); text-decoration-thickness: 1px; opacity: .72; }
.choice.is-crossed .ltr { border-style: dashed; color: var(--muted); }
.choice.is-right { border-color: var(--right); background: var(--right-tint); box-shadow: inset 0 0 0 1px var(--right); }
.choice.is-right .ltr { background: var(--right); border-color: var(--right); color: #fff; }
.choice.is-right .c-flag { color: var(--right-ink); }
.choice.is-wrong { border-color: var(--wrong); background: var(--wrong-tint); box-shadow: inset 0 0 0 1px var(--wrong); }
.choice.is-wrong .ltr { background: var(--wrong); border-color: var(--wrong); color: #fff; }
.choice.is-wrong .c-flag { color: var(--wrong); }
.choice[disabled] { cursor: default; }
/* Phones: after Submit, the flag ("Your answer · correct", about 150px) sits under the choice text. Beside it,
   it would leave a 375px screen about 15px for the choice itself, so the choice ran into the flag. */
@media (max-width: 479px) {
  .choice { grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; }
  .choice .c-flag { grid-column: 2; }
  .choice .c-flag:empty { display: none; }
}
.xbtn {
  width: var(--tap); min-height: var(--tap); border: 1px solid transparent; border-radius: var(--radius); background: transparent;
  color: var(--muted); font: inherit; font-size: 1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
@media (hover: hover) { .xbtn:hover:not([disabled]) { color: var(--ink); background: var(--surface-2); } }
.xbtn[aria-pressed="true"] { color: var(--ink); border-color: var(--line-strong); background: var(--surface-2); }
.xbtn[disabled] { visibility: hidden; }

.q-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin-top: var(--s3); }
.q-actions .spacer { min-width: var(--s1); }
@media (max-width: 479px) {
  /* Submit full width; Previous and Next share the row below it. */
  .q-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .q-actions .spacer { display: none; }
  .q-actions #submit-btn { grid-column: 1 / -1; }
  .q-actions-end { grid-template-columns: 1fr; }
}
.cross-hint { font-size: var(--fs-sm); color: var(--ink-2); margin: var(--s1) 0 0; }
.cross-hint:empty { display: none; }
.keys-hint { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s2); }
.keys-hint kbd {
  font: inherit; font-size: 11px; font-weight: 600; border: 1px solid var(--line-strong); border-bottom-width: 2px;
  border-radius: 4px; padding: 0 5px; background: var(--surface); color: var(--ink-2);
}
@media (hover: none) { .keys-hint { display: none; } }

.result { margin-top: var(--s4); }
.verdict-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); padding: var(--s2); border-radius: var(--radius); margin-bottom: var(--s3); }
.verdict-bar.right { background: var(--right-tint); }
.verdict-bar.wrong { background: var(--wrong-tint); }
.verdict-bar .v-title { font-weight: 600; }
.verdict-bar.right .v-title { color: var(--right-ink); }
.verdict-bar.wrong .v-title { color: var(--wrong); }
.verdict-bar .v-time { margin-left: auto; font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
@media (max-width: 479px) { .verdict-bar .v-time { margin-left: 0; flex-basis: 100%; } }
.explain h3 { margin-bottom: var(--s2); }
.explain h4 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: var(--s3) 0 var(--s1); }
.crossed-note { font-size: var(--fs-sm); color: var(--ink-2); margin-top: var(--s3); }

.tags { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.tags .t-head { font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--s1); }
.tag-chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.tag-chip {
  position: relative; min-height: var(--tap); padding: 0 24px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface); font: inherit; font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer;
}
@media (hover: hover) { .tag-chip:hover { border-color: var(--ink-2); color: var(--ink); } }
.tag-chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
/* The check sits in the chip's left padding, so the label stays centred and pressing a chip never shifts the row. */
.tag-chip::before { content: "\2713"; position: absolute; left: 9px; top: 50%; transform: translateY(-50%); line-height: 1; visibility: hidden; }
.tag-chip[aria-pressed="true"]::before { visibility: visible; }
/* Desktop: smaller pills in a 3 x 2 grid. Six in one row would need about 790px, so a balanced grid avoids a lone last chip. */
@media (min-width: 640px) {
  .tag-chip { min-height: 36px; padding: 0 22px; }
  .tag-chips { display: grid; grid-template-columns: repeat(3, max-content); }
}
.saved-note { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s1); min-height: 1.2em; }

.summary-table td .lvl { white-space: nowrap; }
.res-right { color: var(--right-ink); font-weight: 600; }
.res-wrong { color: var(--wrong); font-weight: 600; }
.res-none { color: var(--muted); }

/* Dashboard */
.readiness { display: grid; gap: var(--s3); }
.readiness .eyebrow { color: var(--brand); }   /* the card labels carry the accent, like the hero eyebrow */
@media (min-width: 800px) { .readiness { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--s5); } }
.score-box { display: flex; flex-direction: column; gap: var(--s1); }
.score-value { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.score-sub { font-size: var(--fs-sm); color: var(--muted); }
.gates { display: grid; gap: var(--s2); margin-top: var(--s2); }
.gate .gate-row { display: flex; justify-content: space-between; font-size: var(--fs-sm); margin-bottom: 6px; gap: var(--s1); }
.gate .gate-row span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.explain-score { font-size: var(--fs-sm); color: var(--ink-2); }
.tag-list { list-style: none; padding: 0; margin: 0; }
.tag-list > li { padding: var(--s2) 0; border-bottom: 1px solid var(--line); margin: 0; }
.tag-list > li:last-child { border-bottom: 0; }
.tag-list .tl-row { display: flex; justify-content: space-between; gap: var(--s2); align-items: baseline; }
.tag-list .tl-count { font-variant-numeric: tabular-nums; color: var(--muted); font-size: var(--fs-sm); }
.tag-list .tl-qs { margin: var(--s1) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s1); }
.tag-list .tl-qs li { margin: 0; }
.tl-qs a, .tag-list .tl-qs a { display: inline-flex; align-items: center; min-height: 36px; font-size: var(--fs-sm); }
.dash-table td:first-child { min-width: 9em; }
@media (max-width: 479px) {
  table.simple { font-size: var(--fs-xs); }
  table.simple th, table.simple td { padding: 8px 6px; }
  .dash-table td:first-child { min-width: 0; }
}

.empty { color: var(--muted); font-size: var(--fs-sm); }
.notice { font-size: var(--fs-sm); color: var(--ink-2); background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--s1) var(--s2); }
.notice-gap { margin-bottom: var(--s3); }
.table-note { margin-top: var(--s1); }
.reset-row { margin-top: var(--section-gap); }
.bm-list { list-style: none; padding: 0; margin: 0; }
.bm-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s2); padding: 10px 0; border-bottom: 1px solid var(--line); margin: 0; }
.bm-list li:first-child { padding-top: 0; }
.bm-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.bm-list a { display: inline-flex; align-items: center; min-height: 36px; font-size: var(--fs-sm); }

/* Empty states: a quiet dashed panel with a small mark, one title, one line and an optional action */
.empty-state {
  display: flex; gap: var(--s2); align-items: flex-start;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-2);
  padding: var(--s3); color: var(--ink-2);
}
.es-mark {
  flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--soft-tint); color: var(--soft-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.es-mark svg { width: 20px; height: 20px; }
.es-body { min-width: 0; }
.es-title { font-size: var(--fs-md); font-weight: 600; color: var(--ink); line-height: var(--lh-tight); margin: 6px 0 var(--s1); letter-spacing: -0.01em; }
h1.es-title { font-size: var(--fs-lg); }
.es-text { font-size: var(--fs-sm); color: var(--muted); margin: 0; max-width: 52ch; }
.es-actions { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
.empty-state.is-compact { padding: var(--s2); }
.empty-state.is-compact .es-mark { width: 32px; height: 32px; }
.empty-state.is-compact .es-mark svg { width: 16px; height: 16px; }
.empty-state.is-compact .es-title { font-size: var(--fs-base); margin-top: 4px; }
@media (max-width: 479px) { .empty-state { padding: var(--s2); } }

/* Lesson pager: previous and next lesson at the end of a lesson */
.lesson-pager { display: grid; gap: var(--s2); margin-top: var(--section-gap); padding-top: var(--s3); border-top: 1px solid var(--line); }
@media (min-width: 560px) { .lesson-pager { grid-template-columns: 1fr 1fr; } }
.pager-link {
  display: flex; flex-direction: column; gap: 2px; min-height: 72px; padding: 12px var(--s2);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none;
  transition: border-color .12s ease, background-color .12s ease;
}
.pager-link.is-next { text-align: right; align-items: flex-end; }
/* Stacked (phones): the next lesson comes first and reads from the left. */
@media (max-width: 559px) { .pager-link.is-next { order: -1; text-align: left; align-items: flex-start; } }
a.pager-link:hover { border-color: var(--line-strong); color: var(--ink); }
@media (hover: hover) { a.pager-link:hover { background: var(--surface-2); } }
.pager-dir { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pager-title { font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; }
.pager-link.is-closed { background: transparent; border-style: dashed; color: var(--muted); }
.pager-link.is-closed .pager-title { color: var(--ink-2); font-weight: 500; }
.pager-note { font-size: var(--fs-xs); color: var(--muted); }

/* Practice: switch between the whole topic and one lesson's set */
.set-switch { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 0 0 var(--s3); }
.set-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); text-decoration: none; font-size: var(--fs-sm); font-weight: 500;
}
.set-chip .n { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.set-chip:hover { color: var(--ink); border-color: var(--ink-2); }
.set-chip[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.set-chip[aria-current="page"] .n { color: var(--brand-line); }
@media (max-width: 479px) {
  .set-chip { min-height: var(--tap); }
  /* Phones: one row that scrolls sideways, so the chips never push the question below the fold. */
  .set-switch { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--s2)) var(--s2); padding: 0 var(--s2); }
  .set-switch::-webkit-scrollbar { display: none; }
  .set-chip { flex: none; }
}

/* Content problems on a local preview (from the registry checks) */
.dev-note { margin: 0 0 var(--s3); border: 1px solid #E0C9A6; background: #FBF5EA; border-radius: var(--radius); padding: 0 var(--s2); font-size: var(--fs-sm); color: var(--ink-2); }
.dev-note > summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; font-weight: 600; }
.dev-note ul { margin: 0 0 var(--s2); font-size: var(--fs-xs); font-family: ui-monospace, Menlo, monospace; }

/* Practice summary: question titles wrap left-aligned */
.q-link { padding: 4px 8px; margin-left: -8px; justify-content: flex-start; text-align: left; white-space: normal; height: auto; }
.link-row a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* Lesson done reads as a state, with a pressed look */
#mark-done[aria-pressed="true"] { background: var(--surface-2); border-color: var(--ink-2); color: var(--ink); }
#mark-done[aria-pressed="true"]::before { content: "\2713"; }

/* Line the reset (or leave-the-demo) label up with the content edge */
.reset-row > .btn-ghost:first-child { margin-left: calc(-1 * var(--s2)); }
.solution-wrap > summary.btn { width: auto; }

/* Phones: tables become stacked rows, and CTA buttons share one width */
@media (max-width: 479px) {
  .summary-table thead, .dash-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .summary-table, .summary-table tbody, .dash-table, .dash-table tbody { display: block; }
  .summary-table tr { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.simple.summary-table td { display: block; padding: 0; border: 0; }
  .summary-table td:first-child { grid-column: 1 / -1; }
  .dash-table tr { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 2px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .dash-table tr:last-child { border-bottom: 0; }
  table.simple.dash-table td { display: block; padding: 0; border: 0; text-align: left; color: var(--muted); font-size: var(--fs-xs); }
  table.simple.dash-table td:first-child { grid-column: 1 / -1; color: var(--ink); font-size: var(--fs-sm); }
  .dash-table td:first-child a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .dash-table td.num::before { content: attr(data-label) " "; }
  .cta > .btn { flex: 1 1 100%; }
}

/* Phones: 44px tap targets for small links */
@media (max-width: 639px) {
  .crumbs a { min-height: var(--tap); padding: 0 4px; margin: 0 -4px; }
  .toc a { min-height: var(--tap); padding-top: 12px; padding-bottom: 12px; }
  .tl-qs a, .tag-list .tl-qs a { min-height: var(--tap); }
}

/* Print: lesson formula card prints cleanly */
@media print {
  /* The footer stays, so a printed page keeps the trademark note; only its links are dropped. */
  .site-header, .footer-links, .toc, .cta, .qc-options, .lesson-pager, .dev-note, .skip-link { display: none !important; }
  .site-footer { padding: var(--s2) 0 0; font-size: var(--fs-xs); }
  body { background: #fff; }
}

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

/* Readiness estimate (assets/readiness.js) and quiz / timed sets.
   Bars use the ink-blue accent and neutrals only; green and red stay reserved for right and wrong. */
.score-big { display: flex; align-items: baseline; gap: var(--s1); margin: var(--s1) 0 0; }
.score-big .sv-num { font-size: 3.5rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--brand); }
.score-big .sv-unit { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.score-range { margin: 0; font-size: var(--fs-base); color: var(--ink-2); }
.score-range b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.scale-bar { margin: var(--s2) 0 var(--s1); }
.sb-track { position: relative; height: 10px; border-radius: 5px; background: var(--surface-3); }
.sb-band { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: rgba(67, 56, 202, .30); }   /* the likely range, in the brand indigo; the tick stays ink */
.sb-tick { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); }
.sb-axis { position: relative; height: 18px; margin-top: 6px; font-size: var(--fs-xs); color: var(--faint); font-variant-numeric: tabular-nums; }
.sb-label { position: absolute; top: 0; transform: translateX(-50%); }
.sb-label:first-child { transform: none; }
.sb-label:last-child { transform: translateX(-100%); }
.gates-done { margin: 0 0 var(--s2); }
.gate-link { margin: 6px 0 0; color: var(--muted); }

.th-sub { font-weight: 400; text-transform: none; letter-spacing: 0; }
.cell-bar { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--s1); white-space: nowrap; }
.cb-track { position: relative; flex: none; width: 64px; height: 6px; border-radius: 3px; background: var(--surface-3); }
.cb-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--accent); }
.cell-bar.is-thin .cb-fill { background: rgba(62, 82, 102, .38); }
.cb-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.cb-val { min-width: 3.4em; text-align: right; font-variant-numeric: tabular-nums; }

.next-intro { margin: 0 0 var(--s2); }
.next-list { list-style: none; margin: 0; padding: 0; }
.next-list > li { margin: 0; padding: var(--s2) 0; border-top: 1px solid var(--line); }
.next-list > li:first-child { border-top: 0; padding-top: 0; }
.next-list > li:last-child { padding-bottom: 0; }
.next-list p { margin: 0; }
.nl-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s2); }
.nl-name { font-weight: 600; }
.nl-gain { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nl-bar { height: 6px; margin: var(--s1) 0 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.nl-bar span { display: block; height: 100%; border-radius: 3px; background: var(--accent); }

.demo-banner { margin: 0 0 var(--s3); padding: var(--s1) var(--s2); font-size: var(--fs-sm); color: var(--ink-2); background: var(--accent-tint); border: 1px solid #D6DDE4; border-radius: var(--radius-sm); }

/* Long sets (a 15-question quiz, the 21 questions of a whole topic) must fit a phone: the dots shrink instead of
   widening the page. 21 dots at 4px with 4px gaps fit in 164px, so the row fits any phone from 320px up. */
.q-dots { min-width: 0; max-width: 100%; }
.q-dot { flex: 0 1 36px; min-width: 4px; }
@media (max-width: 559px) {
  .q-dots { gap: 4px; }
  .q-dot::after { inset: -19px -2px; }   /* tap areas meet in the gaps instead of overlapping */
}
.q-dot.is-answered { background: var(--accent); }
.q-dot.is-current.is-answered { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--brand); }
.choice.is-chosen { border-color: var(--ink-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--ink-2); }
.choice.is-chosen .ltr { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.choice.is-chosen .c-flag { color: var(--ink-2); }
.set-saved { margin: var(--s2) 0 0; padding: var(--s1) var(--s2); font-size: var(--fs-sm); color: var(--ink-2); background: var(--surface-2); border-radius: var(--radius-sm); }
.set-note { padding: var(--s1) var(--s2); font-size: var(--fs-sm); color: var(--ink-2); background: var(--accent-tint); border-radius: var(--radius-sm); }
.set-rules { margin: 0; padding-left: 1.2em; font-size: var(--fs-sm); color: var(--ink-2); }
.set-rules li + li { margin-top: 6px; }

/* The topic table with bars needs about 860px; below that each topic becomes a stacked row. */
@media (max-width: 859px) {
  .dash-table.has-bars thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dash-table.has-bars, .dash-table.has-bars tbody { display: block; }
  .dash-table.has-bars tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .dash-table.has-bars tr:last-child { border-bottom: 0; }
  table.simple.dash-table.has-bars td { display: block; padding: 0; border: 0; text-align: left; color: var(--muted); font-size: var(--fs-xs); }
  table.simple.dash-table.has-bars td:first-child { flex: 1 1 100%; min-width: 0; color: var(--ink); font-size: var(--fs-sm); }
  .dash-table.has-bars td.num::before { content: attr(data-label) " "; }
  .dash-table.has-bars .cell-bar { justify-content: flex-start; margin-left: 4px; }
  .dash-table.has-bars .cb-val { min-width: 0; text-align: left; color: var(--ink-2); }
}
@media (max-width: 479px) {
  .score-big .sv-num { font-size: 3rem; }
  .dash-table.has-bars tr { gap: 6px 16px; }
  .dash-table.has-bars .cb-track { width: 40px; }
}

/* Dashboard: the study-next line in the readiness card, and topics that open later */
.study-next-box { margin: 0 0 var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.study-next-box p { margin: 0 0 var(--s-h); }
.study-next-box p:last-child { margin-bottom: 0; }
.study-next-box a { font-weight: 600; }
.next-later { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--line); }
.later-list { list-style: none; margin: 0; padding: 0; }
.later-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--s2); margin: 0; padding: 6px 0; font-size: var(--fs-sm); color: var(--ink-2); }
.gates > .gate-link { margin-top: calc(-1 * var(--s1)); }

/* Lesson quick check: the part to review after each miss */
.qc-review { margin: 0 0 var(--s2); padding-left: 1.2em; font-size: var(--fs-sm); }
.qc-review a { display: inline-flex; align-items: center; min-height: 32px; }
@media (max-width: 639px) { .qc-review a { min-height: var(--tap); } }

/* Full Quant section (section.html, assets/section.js). Calm by design: no transitions or movement on this
   page, levels and right/wrong hidden until the results, the time-left text never turns red. */
.sec-page *, .sec-page *::before, .sec-page *::after { transition: none !important; animation: none !important; }
.sec-page .btn:active:not([disabled]) { transform: none; }
.sec-top { margin-bottom: var(--s1); }
.sec-edits { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sec-dots { display: flex; gap: 3px; width: 100%; margin: 0 0 var(--s3); }
.sec-dots .q-dot { flex: 1 1 0; min-width: 4px; height: 6px; cursor: default; }
.sec-dots .q-dot::after { content: none; }
.sec-final { color: var(--muted); }
.sec-status { margin: var(--s2) 0 0; color: var(--ink-2); }
.sec-facts { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin: 0; font-size: var(--fs-base); color: var(--ink-2); }
.sec-facts b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
button.set-chip { font: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
.set-chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.set-chip[aria-pressed="true"] .n { color: var(--brand-line); }
.review-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.review-list > li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) auto auto; align-items: center; gap: var(--s1) var(--s2); margin: 0; padding: 6px 0; border-bottom: 1px solid var(--line); }
.rl-no { font-weight: 600; font-variant-numeric: tabular-nums; }
.rl-ans { font-size: var(--fs-sm); color: var(--ink-2); }
.rl-bm { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--ink-2); min-width: 0; }
.rl-bm svg { width: 14px; height: 14px; flex: none; }
.rl-bm svg path { fill: currentColor; }
@media (max-width: 479px) {
  .review-list > li { grid-template-columns: minmax(0, 1fr) auto; }
  .rl-ans, .rl-bm { grid-column: 1; }
  .review-list > li .btn { grid-column: 2; grid-row: 1 / span 3; }
  .rl-bm:empty { display: none; }
}
.finish-ask { margin-top: var(--s3); padding: var(--s2); border-radius: var(--radius); background: var(--accent-tint); }
.finish-ask p { margin: 0; }
.finish-ask .cta { margin-top: var(--s2); }
.sec-score { margin-top: var(--s3); }
.sec-table td:first-child { min-width: 12em; }
.sec-table .badge { white-space: nowrap; }
.over-mark { color: var(--ink-2); font-weight: 600; }
.q-anchor { color: var(--ink); text-decoration: none; }
.q-anchor:hover { color: var(--brand); text-decoration: underline; }
@media (max-width: 479px) {
  .sec-table td:first-child { min-width: 0; }
  .summary-table.sec-table tr { grid-template-columns: auto auto 1fr; }
  table.simple.sec-table td:nth-child(2) { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-xs); }
  table.simple.sec-table td.num { text-align: right; }
}
.sec-exp-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s2); }
.sec-exp-head .section-title { margin-bottom: var(--s2); }
.sec-exp-list { border-top: 1px solid var(--line); }
details.sec-exp { border-bottom: 1px solid var(--line); }
details.sec-exp > summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; align-items: center;
  gap: var(--s1) var(--s2); min-height: var(--tap); padding: 10px 0; font-weight: 500;
}
details.sec-exp > summary::-webkit-details-marker { display: none; }
details.sec-exp > summary:hover .se-title { color: var(--brand); }
.se-no { color: var(--muted); font-variant-numeric: tabular-nums; }
.se-meta { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s1); font-size: var(--fs-sm); }
@media (max-width: 559px) {
  details.sec-exp > summary { grid-template-columns: 2em minmax(0, 1fr); }
  .se-meta { grid-column: 2; justify-content: flex-start; }
}
.sec-exp-body { padding: 0 0 var(--s4); }
.sec-exp-body > .stem { margin-top: var(--s1); }
.sec-exp-body .explain { margin-top: var(--s3); }
.sec-time { margin: var(--s2) 0 0; }
.choices-static li.is-picked { background: var(--wrong-tint); }
.choices-static li.is-picked .ltr { color: var(--wrong); }
.choices-static li.is-picked .answer-tag { color: var(--wrong); }
.sec-entry { margin-top: var(--s4); }

/* The way in: dashboard card with the latest sections, and the home page strip */
.sec-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); }
.sec-card-head > div { min-width: 0; flex: 1 1 22em; }
.sec-card-title { margin: 0 0 var(--s-h); font-weight: 600; }
.sec-card-title a { color: var(--ink); }
.sec-history { list-style: none; margin: var(--s2) 0 var(--s1); padding: 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.sec-history li { display: grid; grid-template-columns: minmax(7em, 1fr) auto minmax(9em, auto); gap: var(--s1) var(--s2); align-items: center; margin: 0; padding: 4px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.sec-history a { display: inline-flex; align-items: center; min-height: 36px; }
@media (max-width: 479px) { .sec-history li { grid-template-columns: 1fr auto; } .sec-history li > span:last-child { grid-column: 1 / -1; } .sec-history a { min-height: var(--tap); } }
.sec-promo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); margin: 0 0 var(--section-gap); }
.sec-promo > div { min-width: 0; flex: 1 1 24em; }
.sec-promo h2 { font-size: var(--fs-md); margin: 0 0 var(--s-h); }
.sec-promo p { margin: 0; }
@media (max-width: 479px) {
  .sec-page .q-actions #next-btn, .sec-page .q-actions > .sec-final { grid-column: 1 / -1; }
}

/* About, Privacy and the page-not-found page: one reading column, the same type as the lessons. */
.page-head { margin-bottom: var(--s5); }
.page-head .lede { font-size: var(--fs-md); color: var(--ink-2); max-width: 36em; margin-top: var(--s2); }
.prose { max-width: var(--readw); }
.prose h2 { font-size: var(--fs-lg); margin: var(--s5) 0 var(--s2); }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 6px; }
.prose .table-scroll { margin: 0 0 var(--s2); }
.prose table.simple { margin: 0; }
.prose .updated { margin-top: var(--s5); padding-top: var(--s2); border-top: 1px solid var(--line); }
.nf-head { padding: var(--s2) 0 var(--s3); }
.nf-head .lede { font-size: var(--fs-md); color: var(--ink-2); max-width: 36em; margin-top: var(--s2); }

/* Part of the page could not load (a content file failed twice): one calm line with a way to reload. */
.load-problem { margin: 0 0 var(--s3); }
.load-problem a { font-weight: 600; }

/* Topic outlines: exponents and subscripts written as sup and sub (topic.js) keep the line spacing even. */
.lesson-main sup, .lesson-main sub { font-size: .75em; line-height: 0; }