/* Road to 800 - one stylesheet for every page, in the "Clean App" design: a near-white page, white
   cards with very light shadows and 16px corners, spacing instead of borders, one accent (deep teal)
   used only for progress, the main button and the chosen answer, red only for a wrong answer, and
   one typeface (Figtree, served from this site). Colours are tokens on :root; dark mode (the
   device's setting, no switch) redefines only the tokens, on the navy of the Road to 800 videos.

   Contents: fonts, tokens, base, app frame (header, tab bar, footer), shared parts (cards, buttons,
   bars, rings, rows, chips), home, skill pages, practice page, 404, then the chapter page, practice
   sets, figures, flashcards and print. */

@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/figtree-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/figtree-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/figtree-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/figtree-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/figtree-latin-800-normal.woff2) format("woff2"); }
/* The minus sign: Figtree's own is shorter than its plus, so "t − 3" can read as a hyphen (a risk for a
   student with dyscalculia), and KaTeX's, used before, was half as thick as the digits, a pale hairline on
   small figure numbers. figtree-minus-*.woff2 (tools/make-minus-font.py) is the horizontal bar of
   Figtree's own plus, at each weight. The script ℓ (line names) is not in Figtree; it comes from KaTeX's
   font, as in the typeset maths, instead of each phone's own fallback. A face declared later is tried
   first for the characters it covers. */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/figtree-minus-400.woff2) format("woff2"); unicode-range: U+2212; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/figtree-minus-500.woff2) format("woff2"); unicode-range: U+2212; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/figtree-minus-600.woff2) format("woff2"); unicode-range: U+2212; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/figtree-minus-700.woff2) format("woff2"); unicode-range: U+2212; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/figtree-minus-800.woff2) format("woff2"); unicode-range: U+2212; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(katex/fonts/KaTeX_Main-Regular.woff2) format("woff2"); unicode-range: U+2113; }
/* the headings' typeface (the road look, 2026-11-04: Shrey, "the front webpage and UI looks so boring and AI ish ... more
   humane"): Bricolage Grotesque (SIL Open Font License, BRICOLAGE-LICENSE.txt), warmer and more hand-made than Figtree; for
   titles and names only, never for reading (body text, questions and solutions stay Figtree) */
@font-face { font-family: "Bricolage"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Bricolage"; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600 800; font-display: swap; src: url(katex/fonts/KaTeX_Main-Bold.woff2) format("woff2"); unicode-range: U+2113; }

:root {
  color-scheme: light;
  --bg: #fbf6ec;            /* warm paper (the road look) */
  --surface: #fffdf8;
  --surface-2: #f4ede0;
  --surface-3: #ebe2d1;
  --inset: #f7f1e6;
  --ink: #1f2b2a;
  --ink-2: #4a5654;
  --ink-3: #5f6a67;
  --hairline: rgba(70, 52, 20, .1);
  --line: #e6dccb;          /* a divider that must be seen (tables, inputs); cards use spacing */
  --line-strong: #c3b59c;
  --accent: #0b6e66;
  --accent-press: #08574f;
  --accent-hover: #08574f;
  --on-accent: #ffffff;
  --accent-soft: #e2f2ef;
  --accent-ink: #075750;    /* accent-coloured text */
  --track: #ebe2d1;         /* the empty part of a bar or ring */
  --bad: #b42318;
  --bad-soft: #fdecea;
  --bad-line: #eab1aa;
  /* the Continue / Start card */
  --hero: #1f5f58;
  --on-hero: #ffffff;
  --hero-sub: rgba(255, 255, 255, .88);
  --hero-track: rgba(255, 255, 255, .28);
  --hero-fill: #ffffff;
  --hero-press: #163f3b;
  /* older names, kept so every page keeps working: a right answer is the accent (no green), and
     there is no second accent colour (no amber) */
  --good: var(--accent);
  --good-soft: var(--accent-soft);
  --good-line: #8fcfc6;
  --warn: var(--ink-2);
  --warn-soft: var(--inset);
  --warn-line: var(--line);
  --mark: var(--ink-3);
  --tag: var(--accent-ink);
  --code-bg: var(--inset);
  --focus: var(--accent);
  --fig-grid: #d3dad8;
  --fig-shade: rgba(11, 110, 102, .16);
  --shadow-1: 0 1px 0 rgba(90, 66, 24, .07), 0 2px 12px rgba(90, 66, 24, .05);
  --shadow-2: 0 1px 3px rgba(90, 66, 24, .08), 0 10px 28px rgba(90, 66, 24, .08);
  --shadow: var(--shadow-1);
  /* each skill's own hue (the redesign, 2026-10-03): marks of identity only (tile icons, rings, the
     chapter badges, the part strip); every action stays in the one accent. Text in a hue uses its
     -ink, which reads at 4.5:1 or better on the page and on a card. */
  --alg: #0b6e66;  --alg-ink: #075750;  --alg-soft: #e2f2ef;
  --adv: #4f46e5;  --adv-ink: #3f37c9;  --adv-soft: #e9e8fb;
  --psda: #b45309; --psda-ink: #9a4607; --psda-soft: #fdeedd;
  --geo: #be2a5e;  --geo-ink: #a8244f;  --geo-soft: #fbe5ec;
  --radius: 16px;
  --radius-sm: 12px;
  --gutter: 20px;
  --column: 720px;          /* the content column on a wide screen */
  --tabbar-h: 68px;
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-sans: var(--font);
  --font-serif: var(--font);
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-head: "Bricolage", var(--font);
  /* the road on Home: its asphalt, edge and dashes; the marigold of "you are here" and the hero's underline (a
     highlight only: no text is ever set in it) */
  --road: #e9dfcc; --road-edge: #d6c8ae; --road-dash: #fbf6ec;
  --marigold: #f2b233; --here-ink: #a8461b; --flag: #c8372d; --pole: #6b5a45;
  --lip: 0 3px 0 rgba(22, 63, 59, .9);   /* the Start card's pressed-paper edge */
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0b1020;
    --surface: #141b31;
    --surface-2: #1b2440;
    --surface-3: #27314f;
    --inset: #0f152a;
    --ink: #e8edf6;
    --ink-2: #b7c0d4;
    --ink-3: #8e99b3;
    --hairline: rgba(255, 255, 255, .07);
    --line: #28324f;
    --line-strong: #46537a;
    --accent: #4cc9b8;
    --accent-press: #74d8ca;
    --accent-hover: #74d8ca;
    --on-accent: #06231f;
    --accent-soft: #113139;
    --accent-ink: #7fddd0;
    --track: #2a3454;
    --bad: #ff8a7a;
    --bad-soft: #3b1a26;
    --bad-line: #7a3a44;
    --hero: #0f4b4b;
    --on-hero: #eef8f6;
    --hero-sub: rgba(238, 248, 246, .84);
    --hero-track: rgba(255, 255, 255, .16);
    --hero-fill: #4cc9b8;
    --hero-press: #145a5a;
    --good-line: #2c6d69;
    --fig-grid: #2f3a5c;
    --fig-shade: rgba(76, 201, 184, .2);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 1px 3px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .3);
    --alg: #4cc9b8;  --alg-ink: #7fddd0;  --alg-soft: #113139;
    --adv: #a5b4fc;  --adv-ink: #b8c3ff;  --adv-soft: #262c58;
    --psda: #f5b94a; --psda-ink: #f8c866; --psda-soft: #3b2c12;
    --geo: #f48fb1;  --geo-ink: #f9a8c4;  --geo-soft: #3d1c2d;
    --road: #1d2642; --road-edge: #2a3454; --road-dash: #0b1020;
    --marigold: #f2b233; --here-ink: #f6c56a; --flag: #ff8a7a; --pole: #8e99b3;
    --lip: 0 3px 0 rgba(0, 0, 0, .45);
  }
}
/* the hue in use inside a skill's tile, page, chapter or list group */
[data-dom="alg"] { --dom: var(--alg); --dom-ink: var(--alg-ink); --dom-soft: var(--alg-soft); }
[data-dom="adv"] { --dom: var(--adv); --dom-ink: var(--adv-ink); --dom-soft: var(--adv-soft); }
[data-dom="psda"] { --dom: var(--psda); --dom-ink: var(--psda-ink); --dom-soft: var(--psda-soft); }
[data-dom="geo"] { --dom: var(--geo); --dom-ink: var(--geo-ink); --dom-soft: var(--geo-soft); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* the bottom padding keeps what focus lands on clear of the tab bar and the pinned buttons */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 64px; scroll-padding-bottom: 120px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--font);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; }
a { color: var(--accent-ink); text-underline-offset: .18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--font); line-height: 1.25; margin: 0 0 .5em; }
/* the page's own name and the big names a student scans for: the warmer heading face */
h1, .title, .hero-title, .go-card .n, .brand-name { font-family: var(--font-head); }
h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: 1.375rem; font-weight: 800; letter-spacing: -.01em; }
h3 { font-size: 1.1875rem; font-weight: 700; }
h4 { font-size: 1.0625rem; font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; margin: 0 0 1em; }
li + li { margin-top: .3em; }
code, kbd { font-family: var(--font-mono); font-size: .92em; }
code { background: var(--code-bg); border-radius: 6px; padding: .05em .35em; }
kbd {
  display: inline-block; min-width: 1.6em; text-align: center; padding: 0 .35em;
  border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px;
  background: var(--surface); color: var(--ink); line-height: 1.5;
}
button { font: inherit; }
.muted { color: var(--ink-3); }
.small { font-size: .9375rem; }
.visually-hidden {
  position: absolute !important; 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: 12px; top: 12px; z-index: 50; background: var(--accent); color: var(--on-accent);
  padding: .6em 1em; border-radius: 10px; text-decoration: none; font-weight: 700; transform: translateY(-200%);
}
.skip:focus { transform: none; color: var(--on-accent); }
/* one centred column; on a phone, the gutters (and an iPhone's rounded corners in landscape) */
.wrap {
  width: 100%; max-width: calc(var(--column) + 2 * var(--gutter)); margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
[hidden] { display: none !important; }
svg.i { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.i.sm { width: 20px; height: 20px; }
svg.i.xs { width: 16px; height: 16px; stroke-width: 2.2; }

/* KaTeX: stop long formulas from widening the page */
.katex { font-size: 1.06em; }
.katex-display { overflow-x: auto; overflow-y: hidden; }
/* a fraction up in a power (x to the 3 over 4) is drawn at half size by default, too small to read on
   a phone; everywhere on the site it is set a quarter larger (Shrey, 2026-10-04: maths must be easy to read) */
.katex .msupsub .mfrac { font-size: 1.25em; }
.m { white-space: nowrap; }
/* A tall piece of maths (a full-size fraction) is taller than the line, so its line box has no
 * leading and it touches the maths on the next line: the denominator of one line met the
 * numerator of the next when a long formula wrapped on a phone, and in two stacked equations.
 * A little margin keeps them apart; ordinary maths is shorter than the line and is unaffected. */
.katex .katex-base { margin-block: .12em; }

/* ---------- app frame: header, tab bar, footer ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; max-width: calc(var(--column) + 2 * var(--gutter)); min-height: 64px; margin: 0 auto;
  padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) 0 max(var(--gutter), env(safe-area-inset-left, 0px));
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 1.125rem; letter-spacing: -.01em; }
.brand svg { width: 32px; height: 32px; flex: none; }
.brand-name { white-space: nowrap; }
.topnav { display: none; gap: 4px; }
.topnav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  font-weight: 600; font-size: 1rem; color: var(--ink-2); text-decoration: none;
}
.topnav a[aria-current] { background: var(--accent-soft); color: var(--accent-ink); }

/* the tab bar, pinned to the bottom of a phone; the page ends above it. Fully opaque: text
   scrolled under it must not show through behind the labels. */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: space-around;
  padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  background: var(--surface);
  box-shadow: 0 -1px 0 var(--hairline);
}
.tabbar a {
  flex: 1; max-width: 140px; min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: .8125rem; font-weight: 600; line-height: 1.2; color: var(--ink-3); text-decoration: none; border-radius: 12px;
}
.tabbar .tab-ic { display: grid; place-items: center; width: 60px; height: 30px; border-radius: 999px; }
/* the current page ("page"), or on a chapter page the section it belongs to ("true") */
.tabbar a[aria-current] { color: var(--accent-ink); }
.tabbar a[aria-current] .tab-ic { background: var(--accent-soft); }
body.has-tabbar { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
/* inside a practice set the page is the question alone: no tab bar (the set's own bar leads out) */
[data-pr="set"] .tabbar { display: none; }
[data-pr="set"] body.has-tabbar { padding-bottom: 0; }

.site-footer {
  width: 100%; max-width: calc(var(--column) + 2 * var(--gutter)); margin: 48px auto 0; padding: 0 var(--gutter) 20px;
  text-align: center; font-size: .9375rem; line-height: 1.5; color: var(--ink-3);
}
.site-footer p { margin: 0 0 4px; }
.tm { font-size: .8125rem; line-height: 1.5; color: var(--ink-3); }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 18px; margin-bottom: 4px !important; }
.foot-links a { color: var(--ink-2); font-weight: 600; text-decoration: none; padding: 6px 0; }
.foot-links a:hover { color: var(--accent-ink); text-decoration: underline; }
/* inside a set, and on its summary, the screen is the set alone */
[data-pr="set"] .site-footer, [data-pr="sum"] .site-footer { display: none; }

/* About and Privacy: plain reading pages */
/* the Privacy page's switch: "Do not count my visits on this device" */
.nocount {
  display: block; margin: 10px 0 2px; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--surface-2); color: var(--ink); font: inherit; font-size: 1rem; font-weight: 700; text-align: left;
}
.nocount[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.page-text { padding-top: 28px; }
.page-text .lede { margin: 10px 0 8px; }
.page-text h2 { font-size: 1.1875rem; font-weight: 800; margin: 32px 0 10px; color: var(--ink); }
.page-text p, .page-text li { color: var(--ink-2); line-height: 1.6; }
.page-text p { margin: 0 0 12px; }
.page-text ul { margin: 0 0 12px; padding-left: 1.25em; display: grid; gap: 8px; }
.page-text a { color: var(--accent-ink); }
.page-text .small { font-size: .875rem; color: var(--ink-3); margin-top: 24px; }
.page-text .dz-star { vertical-align: -2px; }

/* the email sign-up (Home and About) */
.signup { margin: 36px 0 8px; padding: 18px 20px 14px; }
.signup .signup-h { font-size: 1.0625rem; font-weight: 800; margin: 0 0 2px; color: var(--ink); }
.signup-p { margin: 0 0 12px; font-size: .9375rem; color: var(--ink-3); line-height: 1.5; }
.signup-label { display: block; font-weight: 700; font-size: .9375rem; margin: 0 0 6px; color: var(--ink); }
.signup-row { display: flex; flex-wrap: wrap; gap: 10px; }
.signup-input {
  flex: 1 1 220px; min-width: 0; min-height: 48px; padding: .4em .75em; border: 2px solid var(--line-strong); border-radius: 12px;
  background: var(--surface); color: var(--ink); font: 500 1rem/1.3 var(--font);
}
.signup-input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--accent); }
.signup-input[aria-invalid="true"] { border-color: var(--bad); }
.signup-row .btn { flex: 0 0 auto; }
.signup-msg { margin: 10px 0 0; min-height: 1.5em; font-weight: 600; color: var(--ink-2); }
.signup-msg.is-ok { color: var(--good); }
.signup-msg.is-error { color: var(--bad); }
.signup-note { margin: 2px 0 0; font-size: .8125rem; color: var(--ink-3); }
.signup-msg:empty { display: none; }
.signup-note a { color: var(--accent-ink); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* a wide screen: the three links move up into the header, the tab bar goes */
@media (min-width: 900px) {
  .tabbar { display: none; }
  .topnav { display: flex; }
  body.has-tabbar { padding-bottom: 0; }
  .site-header { min-height: 72px; }
}

/* ---------- shared parts ---------- */
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.title { font-size: 1.75rem; line-height: 1.18; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.meta { font-size: .9375rem; color: var(--ink-3); margin: 0; }
.lede { font-size: 1.125rem; color: var(--ink-2); }
.backlink {
  display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: 0 0 4px -6px; padding-right: 10px;
  font-size: 1rem; font-weight: 600; color: var(--ink-2); text-decoration: none;
}
/* "You are here" (a skill page, a chapter): Home > Algebra > Chapter 1; the last part is this page */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 2px; padding: 0; list-style: none; font-size: .9375rem; font-weight: 600; }
.crumbs li { display: flex; align-items: center; min-height: 44px; }
.crumbs li + li::before { content: "\203A"; margin: 0 8px; color: var(--ink-3); font-weight: 400; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration-color: currentColor; }
.crumbs [aria-current] { color: var(--ink-3); }
/* a chapter's two views, Learn and Practice: one switch under its name, the view shown marked */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 16px 0 0; padding: 4px; border-radius: 16px; background: var(--surface-2); }
.ch-head .official + .seg { margin-top: 14px; }
.seg a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 12px; font-weight: 700; color: var(--ink-2); text-decoration: none; }
.seg a:hover { color: var(--ink); }
.js[data-tab="learn"] .seg a[data-seg="learn"], .js[data-tab="practice"] .seg a[data-seg="practice"] { background: var(--surface); color: var(--accent-ink); box-shadow: inset 0 0 0 2px var(--accent), var(--shadow-1); }

/* buttons: .btn is the one main button (filled accent); .btn-block fills the column */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700; font-size: 1.0625rem; line-height: 1.2; letter-spacing: .005em;
  padding: .7em 1.2em; min-height: 48px; border-radius: 14px; cursor: pointer; text-decoration: none;
  border: 0; background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 2px rgba(11, 110, 102, .25);
}
.btn-block { display: flex; width: 100%; min-height: 56px; border-radius: var(--radius); }
.btn-soft { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* a thin progress bar */
.bar { display: block; height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
.bar > span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); }

/* a progress ring, and a chapter's progress dot (empty, a pie wedge, or a tick when done) */
.ring { display: block; flex: none; }
.ring .t { stroke: var(--track); }
.ring .f { stroke: var(--accent); }
.ring .rt { fill: var(--ink); font: 700 13.5px/1 var(--font); }
.ring .rt.zero { fill: var(--ink-3); font-weight: 600; }
.pie { display: block; flex: none; }
.pie .t { stroke: var(--line-strong); }
.pie .o { stroke: var(--accent); }
.pie .w { fill: var(--accent); }
.dot { display: grid; place-items: center; flex: none; width: 24px; height: 24px; }
.dot-done { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--accent); color: var(--on-accent); }

/* a list of rows in one card, divided by hairlines: a dot, a name with a status line, a chevron */
.rows { list-style: none; margin: 0; padding: 4px 0; }
.rows > li { margin: 0; position: relative; }
.rows > li + li::before { content: ""; position: absolute; top: 0; left: 58px; right: 0; height: 1px; background: var(--hairline); }
.row {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 14px 12px 18px;
  color: var(--ink); text-decoration: none; border-radius: var(--radius);
}
.row .nm { flex: 1; min-width: 0; font-size: 1.0625rem; line-height: 1.3; font-weight: 600; }
.row .cn { display: block; margin-bottom: 2px; font-size: .8125rem; font-weight: 700; color: var(--dom-ink, var(--ink-3)); }
.row .st { display: block; margin-top: 3px; font-size: .9375rem; font-weight: 500; color: var(--ink-3); }
.row .st:empty { display: none; }
.row .st.now { color: var(--accent-ink); font-weight: 700; }
.row .chev { display: grid; color: var(--ink-3); }

/* a row of choices, one picked (the level: Easy / Medium / Hard) */
.chips { display: flex; gap: 8px; margin: 16px 0 14px; }
.chip {
  display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0;
  min-height: 48px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--surface); box-shadow: var(--shadow-1); color: var(--ink-2); font-size: 1rem; font-weight: 600;
}
.chip[aria-pressed="true"], .chip[aria-pressed="true"]:hover { background: var(--accent); color: var(--on-accent); box-shadow: none; }

/* a button pinned to the bottom of the screen (above the tab bar when there is one) */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 20px var(--gutter) calc(16px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg) 72%, transparent);
}
.dock > * { max-width: var(--column); margin-left: auto; margin-right: auto; }

/* ---------- home ---------- */
.hero-title { font-size: 2.125rem; line-height: 1.12; font-weight: 800; letter-spacing: -.03em; margin: 12px 0 24px; text-wrap: balance; }
.hero-title .nw { white-space: nowrap; }
/* the Continue card (Start on a first visit): what, where, how far, and a round arrow */
.go-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k k" "n n" "s go" "bar go";
  align-items: center; column-gap: 18px; padding: 22px 22px 20px; border-radius: 20px; text-decoration: none;
  background: var(--hero); color: var(--on-hero); box-shadow: var(--shadow-2);
}
.go-card .k { grid-area: k; font-size: .9375rem; font-weight: 700; color: var(--hero-sub); }
.go-card .n { grid-area: n; margin: 6px 0 4px; font-size: 1.3125rem; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
.go-card .s { grid-area: s; font-size: 1rem; color: var(--hero-sub); }
.go-card .bar { grid-area: bar; height: 6px; margin-top: 12px; background: var(--hero-track); }
.go-card .bar > span { background: var(--hero-fill); }
.go-card .go {
  grid-area: go; display: grid; place-items: center; align-self: end;
  width: 44px; height: 44px; border-radius: 999px; background: var(--hero-fill); color: var(--hero);
}
.section-label { font-size: 1rem; font-weight: 700; color: var(--ink-2); margin: 36px 0 12px; letter-spacing: 0; }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tiles > li { margin: 0; display: flex; }
.tile { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 16px 16px 18px; min-height: 144px; color: var(--ink); text-decoration: none; }
.tile-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tile-ic, .dom-ic { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--dom-soft, var(--accent-soft)); color: var(--dom-ink, var(--accent-ink)); }
.tile .ring .f, .dom-head .ring .f { stroke: var(--dom, var(--accent)); }
.tile .txt { margin-top: auto; }
.tile .nm { display: block; font-size: 1.0625rem; line-height: 1.25; font-weight: 700; letter-spacing: -.005em; }
.tile .ct { display: block; margin-top: 3px; font-size: .9375rem; color: var(--ink-3); }
/* the road look (2026-11-04): the hero says where the road goes, a marigold stroke under the 800; the Start card has a
   pressed-paper edge */
.hero-title { font-size: 2.5rem; line-height: 1.04; letter-spacing: -.025em; margin: 14px 0 14px; }
.hero-title .u8 { position: relative; display: inline-block; }
.hero-title .u8 svg { position: absolute; left: -4%; bottom: -.16em; width: 108%; height: .34em; overflow: visible; }
.hero-title .u8 path { fill: none; stroke: var(--marigold); stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.home .lede { margin: 0 0 22px; font-size: 1.0625rem; color: var(--ink-2); max-width: 34em; }
.home .go-card { box-shadow: var(--lip), var(--shadow-1); }
.home .go-card .go { background: var(--marigold); color: #1d3b38; }
/* Home's chapters: stops on a winding road, in the book's order. The road is drawn once by the build (an SVG behind
   the list, its x in percent of the width, its y in px: stops are --stop tall), the stops alternate sides; each stop
   is the chapter's link, with its number on the road. Where practice was left is "You are here" (index.js marks that
   chapter's status .now), a finished chapter's number turns teal. The finish flag says 800. Nothing moves. */
.road-wrap { --stop: 124px; position: relative; margin: 28px 0 8px; }
.road-wrap > svg.road-line { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.road-line path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.road-line .edge { stroke: var(--road-edge); stroke-width: 36px; }
.road-line .asph { stroke: var(--road); stroke-width: 28px; }
.road-line .dash { stroke: var(--road-dash); stroke-width: 2.5px; stroke-dasharray: 10 12; }
ol.road { list-style: none; margin: 0; padding: 0; position: relative; }
ol.road > li { position: relative; height: var(--stop); margin: 0; }
ol.road .row { position: absolute; top: calc(var(--stop) / 2 - 22px); display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 0; background: none; text-decoration: none; color: var(--ink); width: 74%; }
ol.road .s-l .row { left: calc(16% - 22px); }
ol.road .s-r .row { right: calc(16% - 22px); flex-direction: row-reverse; text-align: right; }
ol.road .mark {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--ink); font: 800 1.0625rem/1 var(--font-head); color: var(--ink);
}
ol.road .nm { padding: 2px 8px 4px; margin: -2px -8px 0; border-radius: 10px; background: color-mix(in srgb, var(--bg) 82%, transparent); font-weight: 700; font-size: 1.0625rem; line-height: 1.25; }
ol.road .t { display: block; font-family: var(--font-head); font-size: 1.125rem; letter-spacing: -.005em; }
ol.road .sub { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: .875rem; font-weight: 500; color: var(--ink-3); }
ol.road .s-r .sub { justify-content: flex-end; }
ol.road .sub .dot { display: inline-grid; }
ol.road .sub .dot svg, ol.road .sub .dot .dot-done { width: 18px; height: 18px; }
ol.road .row .st { display: block; margin: 2px 0 0; font-size: .875rem; }
ol.road .row .chev { display: none; }
/* you are here: the chapter to carry on with */
ol.road li:has(.st.now) .mark { background: var(--marigold); border-color: var(--ink); color: #1d3b38; }
ol.road li:has(.st.now) .nm::before { content: "You are here"; display: block; margin-bottom: 2px; font-size: .75rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--here-ink); }
/* a finished chapter */
ol.road li:has(.dot-done) .mark { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
ol.road .row:hover .t, ol.road .row:focus-visible .t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
/* the finish: a flag, and the score it stands for */
.road-end { position: relative; height: 96px; }
.road-end .flag { position: absolute; top: 18px; display: flex; align-items: flex-end; gap: 8px; }
.road-end .flag svg { width: 40px; height: 56px; }
.road-end .flag b { font: 800 1.75rem/1 var(--font-head); color: var(--ink); letter-spacing: -.02em; padding-bottom: 4px; }
@media (min-width: 700px) {
  .hero-title { font-size: 3.25rem; margin-top: 28px; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  ol.road .row { width: 60%; }
}
@media (max-width: 370px) {
  :root { --gutter: 16px; }
  .hero-title { font-size: 2.125rem; }
  ol.road .row { width: 80%; }
  ol.road .t { font-size: 1.0625rem; }
  .tile { padding: 16px 14px; }
  .tabbar .tab-ic { width: 54px; }
}

/* each chapter's hand-drawn sketch (a line, a parabola, a V ...): drawn a little unevenly on purpose (the #rough filter
   in every page), in the chapter's hue; decoration only, hidden from screen readers */
.dd { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: url(#rough); }
.ch-dd { display: inline-grid; place-items: center; flex: none; color: var(--dom-ink, var(--ink-2)); }
.ch-dd svg { width: 100%; height: 100%; }
.row .ch-dd { width: 28px; height: 28px; margin-left: -4px; }
.ch-head .ch-dd { width: 46px; height: 46px; float: right; margin: 2px 0 0 12px; }

/* ---------- a skill's page ---------- */
.dom-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 4px 0 24px; }
.dom-head .meta { margin-top: 6px; }
.dom-head .ring .rt { font-size: 16px; }
.dom-head .title { display: flex; align-items: center; gap: 12px; }
.dom-head .dom-ic { width: 44px; height: 44px; border-radius: 14px; }
.pr-group .section-label { display: flex; align-items: center; gap: 8px; }
.pr-group .dom-ic { width: 28px; height: 28px; border-radius: 9px; }
.pr-group .section-label .lbl { min-width: 0; }

/* a picker card (the Cards page's "Which cards"): the real control is the phone's own list, laid
   over the whole card */
.picker { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 18px; min-height: 64px; }
.picker .txt { flex: 1; min-width: 0; }
.picker .k { display: block; font-size: .9375rem; color: var(--ink-3); font-weight: 600; }
.picker .n { display: block; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.picker .chev { display: grid; color: var(--ink-2); }
.picker-sel { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 1rem; }
.picker:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- the practice page: carry on, or pick a chapter (each opens its own practice) ---------- */
.hub .title { margin: 8px 0 6px; }
.hub .lede { margin: 0 0 18px; font-size: 1rem; }
.hub .go-card { margin-bottom: 4px; }
.pr-group .section-label { margin-top: 26px; }
.pr-group .range { font-weight: 600; color: var(--ink-3); }
/* the end of a chapter's practice: one card on to the next chapter in the numbered list */
.next-ch { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 14px 16px 14px 18px; min-height: 64px; color: inherit; text-decoration: none; }
.next-ch .txt { flex: 1; min-width: 0; }
.next-ch .k { display: block; font-size: .9375rem; font-weight: 600; color: var(--ink-3); }
.next-ch .n { display: block; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.next-ch .chev { display: grid; color: var(--ink-2); }
.next-card { padding: 22px 20px 20px; margin-top: 14px; }
.chips:not([hidden]) + .next-card { margin-top: 0; } /* (a hidden level picker leaves the usual gap) */
.next-card .k { font-size: .9375rem; font-weight: 700; color: var(--accent-ink); margin: 0; }
.next-card .n { margin: 4px 0 0; font-size: 1.4375rem; font-weight: 800; letter-spacing: -.015em; }
.next-card .s { margin: 2px 0 0; font-size: 1rem; color: var(--ink-3); }
.next-card .bar { margin: 16px 0 0; }
.next-card .btn { margin-top: 20px; }
.hub-sets { margin-top: 12px; }
.hub-sets > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 18px;
  font-weight: 700; font-size: 1.0625rem; cursor: pointer; list-style: none; border-radius: var(--radius);
}
.hub-sets > summary::-webkit-details-marker { display: none; }
.hub-sets > summary .chev { display: grid; color: var(--ink-3); }
.hub-sets[open] > summary .chev { transform: rotate(180deg); }
.hub-sets .rows { padding-top: 0; }
/* the line under "All ... sets": inset to its text and flush right, like the lines between the rows */
.hub-sets .rows > li:first-child::before { content: ""; position: absolute; top: 0; left: 18px; right: 0; height: 1px; background: var(--hairline); }

/* ---------- 404 ---------- */
.lost { padding-top: 48px; }
.lost .title { margin-bottom: 8px; }
.lost .btn { margin-top: 8px; }

/* ---------- chapter page ----------
   One flow: Learn (#learn), the chapter's practice (#practice), a set (one question at a time,
   full screen), the set's summary. theme.js and chapter.js set html[data-tab] (learn / practice)
   and html[data-pr] (home / set / sum) so the right view shows before the page paints. */
.ch-head { margin: 0 0 22px; }
.ch-head .title { margin-top: 4px; }
.ch-head .meta { margin-top: 8px; }
.ch-head .official { margin-top: 6px; font-size: .9375rem; line-height: 1.45; color: var(--ink-3); }
.ch-head h1:focus { outline: none; } /* focused by script when Learn comes back, not a control */
/* one back link per view: Learn leads back to its skill, the practice back to Learn */
.js .tab-panel { display: none; }
.js[data-tab="learn"] #panel-learn, .js[data-tab="practice"] #panel-practice, .js .tab-panel.is-solo { display: block; }
/* inside a set, and on its summary, the page is the set alone: no site header, no tab bar */
[data-pr="set"] .site-header, [data-pr="sum"] .site-header, [data-pr="set"] .ch-head, [data-pr="sum"] .ch-head,
[data-pr="sum"] .tabbar { display: none; }
[data-pr="sum"] body.has-tabbar { padding-bottom: 0; }

/* a note (a lesson's note, noscript) */
.note { margin: 0 0 16px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink); }
.note > :last-child { margin-bottom: 0; }

/* ---------- Learn ---------- */
/* One part at a time (chapter.js hides the rest; without JavaScript every part shows). The strip:
   "Part 2 of 7" and one round link per part, the one on screen filled in the skill's hue. */
.ch-head:has(+ .tab-panel .learn-nav) { margin-bottom: 18px; }
.learn-nav { margin: 0 0 22px; }
.learn-k { margin: 0 0 8px; font-size: .9375rem; line-height: 1.4; font-weight: 700; color: var(--ink-3); }
.learn-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.learn-steps > li { margin: 0; }
.learn-steps a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow-1); color: var(--ink-2); font-size: 1rem; font-weight: 700; text-decoration: none;
}
.learn-steps a:hover { color: var(--ink); }
.learn-steps a[aria-current="step"] { background: var(--dom, var(--accent)); color: var(--on-accent); box-shadow: none; }
/* (no JavaScript: every part shows, so the strip's links just jump down the page) */
html:not(.js) .learn-steps a[aria-current="step"] { background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-1); }
/* the lesson's own title and intro: a short lead, quieter than the chapter title above it */
.lesson-lede { margin: 0 0 22px; }
.lesson-title { margin: 0 0 2px; font-size: .9375rem; line-height: 1.4; font-weight: 700; color: var(--ink-3); }
.intro { margin: 0; color: var(--ink-2); }
.lesson-lede + .note { margin-top: -6px; }
.tips { margin: 24px 0 22px; }
.lesson-sec { margin: 0 0 30px; }
/* a part: its number and heading, the words, and an example in an inset; no box round it (the
   screen holds this one part, so the page is the card) */
.idea { padding: 2px 0 0; }
.idea h2 { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; font-size: 1.375rem; line-height: 1.25; font-weight: 800; letter-spacing: -.015em; }
.idea h2 .num { margin-top: 3px; }
.idea h2:focus { outline: none; } /* focused by script when the part changes, not a control */
.num {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-top: -1px; border-radius: 999px;
  background: var(--dom-soft, var(--accent-soft)); color: var(--dom-ink, var(--accent-ink)); font-size: .875rem; font-weight: 800; letter-spacing: 0;
}
.narr { margin-top: 0; color: var(--ink-2); }
.narr p { margin: 0 0 .75em; }
.narr p:last-child { margin-bottom: 0; }
.example { margin-top: 16px; padding: 16px 18px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); }
.ex-q > :last-child { margin-bottom: 0; }
/* the four choices of a multiple-choice example or Your turn (a unit) */
.ex-ch { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.ex-ch > li { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--bg); min-width: 0; }
.ex-ch > li > b { flex: none; width: 1.2em; font-weight: 700; color: var(--ink-2); }
.ex-ch > li > span { min-width: 0; overflow-x: auto; overflow-y: hidden; }
.example > .fig, .yt > .fig { margin: 12px auto 0; }
.ex-a { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; color: var(--ink-2); }
.ex-a > svg { color: var(--accent); margin-top: 5px; }
.ex-a > div { min-width: 0; }
.ex-k, .cy-k { margin: 0 0 4px; font-size: .9375rem; font-weight: 700; color: var(--accent-ink); }
.setup { margin-top: 12px; }
.setup ol { margin: 0; }
/* a long walkthrough, folded under the example */
.idea .narr-more { margin-top: 14px; }
.idea .narr-more > summary { padding: 0; min-height: 48px; font-size: 1rem; color: var(--ink-2); }
.idea .narr-more > .fold-body { padding: 0 0 4px; }
.idea .narr-more .narr { margin-top: 0; }

/* "Try it in Desmos": the steps, each a key chip to copy (or a thing to do) and what Desmos shows;
   a tinted panel, the only box on the part */
.try { margin-top: 20px; padding: 18px 18px 10px; border-radius: var(--radius); background: var(--accent-soft); }
.try h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1.0625rem; font-weight: 800; color: var(--accent-ink); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; counter-reset: step; }
.steps > li { margin: 0; }
.step { position: relative; min-width: 0; padding-left: 36px; counter-increment: step; }
.step::before {
  content: counter(step); position: absolute; left: 0; top: 10px; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 999px; background: var(--surface); color: var(--accent-ink); font-size: .8125rem; font-weight: 800;
}
.step-note::before { content: "!"; }
.typein { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.instr + .typein { margin-top: 8px; }
.key {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 44px; padding: 6px 12px 6px 14px;
  border: 0; border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-1); cursor: pointer;
  font: 500 1rem/1.35 var(--font-mono); color: var(--ink); text-align: left;
}
/* a chip's maths cannot wrap, so a long row scrolls inside its chip instead of widening the page (very large text) */
.key-t { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: auto; overflow-y: hidden; }
.key sub { font-size: .7em; }
.key svg { color: var(--ink-3); }
.key svg + svg, .key.is-copied svg:first-of-type { display: none; }
.key.is-copied svg + svg { display: block; color: var(--accent-ink); }
html:not(.js) .key svg { display: none; }
.key-sep { font-size: .9375rem; color: var(--ink-2); }
.typed {
  display: inline-block; max-width: 100%; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface);
  font: 500 1rem/1.4 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere;
}
/* a table to make in Desmos, drawn like Desmos's own */
.dtable { border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-1); font: 500 1rem/1.3 var(--font-mono); font-variant-numeric: tabular-nums; }
.dtable caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* read, not shown: the picture says "table" */
.dtable th, .dtable td { min-width: 3.4em; padding: 8px 14px; text-align: center; }
.dtable th { background: var(--surface-2); font-weight: 700; }
.dtable td { border-top: 1px solid var(--hairline); }
.dtable th + th, .dtable td + td { border-left: 1px solid var(--line); }
.dtable sub { font-size: .7em; }
.instr { margin: 0; padding-top: 9px; font-weight: 600; color: var(--ink); }
.instr::first-letter { text-transform: uppercase; }
.step-warn strong { font-weight: 800; }
.keys-line { margin: 8px 0 0; font-size: .9375rem; color: var(--ink-2); }
.keys-line code { background: var(--surface); }
.keys-line kbd { font-size: .85em; }
.step-see { margin: 6px 0 0; color: var(--ink-2); }
.try .open { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 8px; font-weight: 700; color: var(--accent-ink); text-decoration: none; }

/* check yourself, and any answer that waits for a tap */
.cy { margin-top: 16px; padding: 18px 20px; }
.cy-q > :last-child { margin-bottom: 0; }
details.reveal > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; padding: 0 16px;
  border-radius: 999px; background: var(--surface-2); color: var(--ink); font-size: 1rem; font-weight: 700; cursor: pointer; list-style: none;
}
details.reveal > summary::-webkit-details-marker { display: none; }
details.reveal[open] > summary .when-shut, details.reveal:not([open]) > summary .when-open { display: none; }
.example details.reveal > summary { background: var(--surface); box-shadow: var(--shadow-1); }
.cy-a { margin-top: 10px; }
.cy-a > :last-child { margin-bottom: 0; }

/* the one button at the end of Learn, pinned above the tab bar; the page ends above both. "Next"
   names the part after this one on a second line; the last part's button is "Start practicing". */
.learn-dock { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: 12px; }
html:not(.js) .learn-dock [data-step] { display: none; }
.btn-next-part { justify-content: space-between; text-align: left; padding-left: 20px; }
.btn-next-part .bt { display: grid; min-width: 0; }
.btn-next-part .bk { font-size: .8125rem; font-weight: 700; opacity: .85; letter-spacing: .02em; text-transform: uppercase; }
.btn-next-part .bn { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 1.0625rem; }
.js[data-tab="learn"] body.has-dock { padding-bottom: calc(var(--tabbar-h) + 92px + env(safe-area-inset-bottom, 0px)); }
/* and what keyboard focus moves to is scrolled clear of both (the tab bar, 68px, and the pinned
   button above it, 88px) */
.js[data-tab="learn"]:has(body.has-dock) { scroll-padding-bottom: calc(var(--tabbar-h) + 104px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) {
  .learn-dock { bottom: 0; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  .js[data-tab="learn"] body.has-dock { padding-bottom: 100px; }
  .js[data-tab="learn"]:has(body.has-dock) { scroll-padding-bottom: 120px; }
}
/* a chapter with no questions yet: its flashcards, and a word that practice is coming */
.next-step { display: grid; gap: 10px; margin-top: 8px; }
.next-step p { margin: 0; text-align: center; }

/* ---------- Learn, in units (a chapter with a units file) ----------
   A short list of the chapter's units that jumps to each, then one card per unit and nothing else:
   the number, the title and the Key points; "See it solved" (Worked by hand, then the same example
   in Desmos) and Traps are folds; Your turn waits for a tap. The parts of a card are divided by
   hairlines, not boxes. */
/* the Desmos typing tips, folded, after unit 1 */
.unit-tips { margin: 0 0 20px; }
.unit-tips .fold-body ul { padding-left: 1.2em; display: grid; gap: 10px; }
/* a jump to a unit (#alg-linfn-u2) puts its card 16px from the top: the page's scroll-padding-top
   (64px, for keyboard focus) is taken back, since the site header does not stay on screen */
.unit { margin: 0 0 20px; }
.unit-top { padding: 22px 20px 20px; }
.unit h2 { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 1.25rem; line-height: 1.3; font-weight: 800; letter-spacing: -.012em; }
.unit h2:focus { outline: none; }
/* the name of a part: Key points, Your turn */
.part-k { margin: 18px 0 8px; font-size: .9375rem; line-height: 1.4; font-weight: 700; letter-spacing: 0; color: var(--accent-ink); }
/* one idea per line, each with a small dot */
.kp { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kp > li { position: relative; margin: 0; padding-left: 20px; }
.kp > li::before { content: ""; position: absolute; left: 3px; top: .68em; width: 7px; height: 7px; border-radius: 999px; background: var(--accent); }
/* the unit's video (build.mjs unitVideoHTML, src/js/video.js): a 16:9 frame in the video's own navy, with a play
   button until it is pressed; then the video. Under it: the theme's introduction (a pill), the copyright, YouTube */
.unit-video { margin: 18px 0 0; }
.uv-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: #0a1020; }
.uv-frame video { display: block; width: 100%; height: 100%; background: #000; }
.uv-start { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  width: 100%; margin: 0; padding: 0; border: 0; cursor: pointer; font: inherit; color: #fff; text-align: center;
  background: radial-gradient(120% 95% at 50% 0%, #1a2747 0%, #0a1020 72%); }
.uv-start:focus-visible { outline: 3px solid #4cc9b8; outline-offset: -5px; }
.uv-brand { position: absolute; top: 12px; left: 14px; font-size: .8125rem; font-weight: 700; color: rgba(255, 255, 255, .78); }
.uv-ring { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: #4cc9b8; color: #06231f;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35); transition: transform .15s ease; }
.uv-ring svg { width: 30px; height: 30px; margin-left: 4px; fill: currentColor; }
.uv-start:hover .uv-ring { transform: scale(1.06); }
.uv-l { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.uv-l .min { font-weight: 500; color: rgba(255, 255, 255, .78); white-space: nowrap; margin-left: 4px; }
.uv-msg { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 16px; color: #fff; text-align: center; }
.uv-msg a { color: #7fe0d2; }
.unit-video figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 12px 0 0; font-size: .875rem; color: var(--ink-2); }
.uv-intro { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border: 1px solid var(--hairline); border-radius: 999px;
  background: var(--surface-2); color: var(--accent-ink); font: inherit; font-size: .9375rem; line-height: 1.3; font-weight: 700; cursor: pointer; text-align: left; }
.uv-intro .min { font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.uv-intro:hover .txt { text-decoration: underline; }
.uv-foot { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.uv-yt { color: var(--accent-ink); font-weight: 600; }
/* the unit's videos on YouTube: plain links, never an embedded player (nothing loads from Google) */
.unit-yts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.unit-yt { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface-2); color: var(--accent-ink); font-size: .9375rem; line-height: 1.3; font-weight: 700; text-decoration: none; }
.unit-yt .min { font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.unit-yt:hover .txt { text-decoration: underline; }
/* the folds run the card's full width, a hairline above each */
.unit-fold > summary { min-height: 56px; padding: 0 20px; background: linear-gradient(var(--hairline), var(--hairline)) no-repeat top / calc(100% - 40px) 1px; }
/* a fold's title is a heading for screen readers, and looks like the other fold titles */
.unit-fold > summary h3.txt { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
.unit-body { padding: 2px 20px 22px; }
.unit-body .example { margin-top: 0; }
.unit-body .ex-a { margin-top: 14px; color: var(--ink); }
.part-h { margin: 22px 0 10px; font-size: 1.0625rem; line-height: 1.3; font-weight: 800; letter-spacing: -.005em; color: var(--ink); }
/* the plan: the step headings in order, and whether Desmos helps */
.plan { margin: 0 0 18px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--inset); }
.plan-steps { margin: 0; padding-left: 1.5em; display: grid; gap: 4px; color: var(--ink); }
.plan-steps > li::marker { color: var(--ink-3); font-weight: 700; }
.plan-dz { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; color: var(--ink-2); }
.plan-dz > svg { flex: none; margin-top: 4px; color: var(--accent); }
/* every arithmetic step on a line of its own */
.by-hand, .yt-steps { margin: 0; padding-left: 1.5em; display: grid; gap: 10px; }
.by-hand > li, .yt-steps > li { margin: 0; padding-left: 2px; }
.by-hand > li::marker, .yt-steps > li::marker { color: var(--ink-3); font-weight: 700; }
/* named steps: "Step 1: Determine the slope", then its lines */
.by-hand.named, .yt-steps.named { list-style: none; padding-left: 0; gap: 18px; }
.by-hand.named > li, .yt-steps.named > li { padding-left: 0; }
.step-h { margin: 0 0 8px; font-size: 1rem; line-height: 1.4; font-weight: 700; letter-spacing: 0; color: var(--ink); }
.step-lines { margin: 0; padding-left: 1.25em; display: grid; gap: 8px; }
.step-lines > li { margin: 0; }
.step-lines > li::marker { color: var(--ink-3); }
.unit-try { margin-top: 22px; }
.unit-try .sol-shot figcaption, .unit-try .sol-credit { color: var(--ink-2); }
/* on a very narrow screen (150% zoom on a phone) the pictures shrink rather than widen the page */
.sol-shots.unit-shots { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
/* Your turn: the question, and the answer (with its steps) a tap away */
.yt { padding: 18px 20px 20px; background: linear-gradient(var(--hairline), var(--hairline)) no-repeat top / calc(100% - 40px) 1px; }
.yt .part-k { margin-top: 0; }
.yt-q p { margin: 0 0 .6em; }
.yt-q > :last-child { margin-bottom: 0; }
.yt-a { margin-top: 12px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--inset); }
.yt-ans { margin: 0; color: var(--ink); }
.yt-steps { margin-top: 12px; color: var(--ink-2); }
.trap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.trap-list > li { margin: 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--inset); }
/* a formula too wide for a phone scrolls inside its own box, never the page */
.kp, .unit .ex-q, .by-hand, .unit-body .ex-a > div, .yt-q, .yt-a, .trap-list, .plan { max-width: 100%; overflow-x: auto; overflow-y: hidden; }

/* ---------- the chapter's practice (the Practice page's style) ---------- */
a.chip { text-decoration: none; }
.chip[aria-current="true"], .chip[aria-current="true"]:hover { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.lvl-pick { margin-top: 0; }
.js .sets:not(.is-on) { display: none; }
.set-row .st.now { color: var(--accent-ink); font-weight: 700; }

/* ---------- a set: one question on a screen of its own ---------- */
.pr-view { display: none; }
html:not(.js) #pr-home, [data-pr="home"] #pr-home, [data-pr="set"] #pr-set, [data-pr="sum"] #pr-sum { display: block; }
/* a question or a summary fills the screen (the footer is below it) */
[data-pr="set"] #pr-set { min-height: 100vh; min-height: 100dvh; }
/* the page ends above the pinned bar (chapter.js sets the exact height once it is drawn) */
[data-pr="set"] body.chapter-page { padding-bottom: 130px; }
[data-pr="sum"] #pr-sum { min-height: 100vh; min-height: 100dvh; }
.qbar { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.icon-btn {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: -10px; border-radius: 999px;
  color: var(--ink-2); text-decoration: none;
}
.qbar .bar { flex: 1; height: 10px; }
.desmos-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 44px; padding: 0 14px 0 12px; border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow-1); color: var(--ink-2); font-size: .9375rem; font-weight: 700; text-decoration: none;
}
.q-wrap { padding-left: 0; padding-right: 0; }
.qnum { margin: 10px 0 10px; font-size: .9375rem; line-height: 1.5; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
/* while a set's questions load (or if they could not): one quiet line, and Try again */
.set-load { margin: 32px 0; text-align: center; color: var(--ink-2); }
.set-load p { margin: 0 0 16px; }
.qpos:focus, .qpos:focus-visible { outline: none; } /* focused by script after Next, for screen readers; not a control */
.b800 {
  display: inline-block; margin-left: 4px; padding: 0 .5em; border-radius: 6px; background: var(--surface-2);
  color: var(--ink); font-size: .8125rem; font-weight: 800; letter-spacing: .03em; line-height: 1.6; vertical-align: 1px;
}
.q-stem { margin: 0 0 22px; font-size: 1.1875rem; line-height: 1.55; font-weight: 500; letter-spacing: -.003em; }
.q-stem p { margin: 0 0 .6em; }
.q-stem > :last-child, .q-eqs p:last-child { margin-bottom: 0; }
/* the equations of a system, one to a line and centred, as the SAT prints them */
.q-eqs { text-align: center; margin: 0 0 .75em; }
.q-eqs p { margin: 0 0 .3em; }
.q-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
/* a formula too wide for a phone scrolls inside its own box; the padding holds KaTeX's 2px overhang */
.q-stem, .choice .ctext, .fold-body ol, .fold-body p { max-width: 100%; overflow-x: auto; overflow-y: hidden; }

/* the answers: big rows with a letter chip */
.choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; }
.choice {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 8px 14px 8px 10px;
  border: 2px solid transparent; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1);
  font-size: 1.125rem; font-weight: 500; cursor: pointer;
}
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice .letter {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px;
  background: var(--surface-2); color: var(--ink-2); font-size: .9375rem; font-weight: 700;
}
.choice .letter svg { display: none; }
.choice .ctext { min-width: 0; padding-right: 4px; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice:has(input:checked) .letter { background: var(--accent); color: var(--on-accent); }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice input:focus-visible + .letter { outline: 3px solid var(--focus); outline-offset: 2px; } /* browsers without :has */
@supports selector(:has(a)) { .choice input:focus-visible + .letter { outline: none; } }
/* after Check: the answer in the accent, a wrong pick in red, the rest set back */
fieldset[disabled] .choice { cursor: default; }
/* (".choices .choice" outranks the checked style above) */
.choices .choice.is-right { border-color: var(--good); background: var(--good-soft); }
.choices .choice.is-right .letter { background: var(--good); color: var(--on-accent); }
.choice.is-right .letter .lt { display: none; }
.choice.is-right .letter svg { display: block; }
.choices .choice.is-wrong { border-color: var(--bad); background: var(--bad-soft); }
.choices .choice.is-wrong .letter { background: var(--bad); color: var(--surface); }
.choices .choice.is-dim { border-color: var(--line); background: transparent; box-shadow: none; color: var(--ink-3); }
/* "Answer" / "Your answer" sits to the right of a short choice. A long choice keeps its full
   width (the text is never squeezed after Check): the text may take all but the letter's column,
   so there is no room left on its line and the label wraps to a line of its own, under it. */
.choice { flex-wrap: wrap; row-gap: 2px; }
.choices .choice:not(.has-fig) .ctext { flex: 0 1 auto; max-width: calc(100% - 48px); }
.choice .verdict { margin-left: auto; font-size: .9375rem; font-weight: 700; white-space: nowrap; }
.choice:not(.is-right):not(.is-wrong) .verdict { display: none; }
.choice.is-right .verdict::after { content: "Answer"; color: var(--accent-ink); }
.choice.is-right.is-picked .verdict::after { content: "Your answer"; }
.choice.is-wrong .verdict::after { content: "Your answer"; color: var(--bad); }

/* a typed answer */
.spr-label { display: block; margin: 0 0 8px; font-size: .9375rem; font-weight: 700; color: var(--ink-2); }
.spr-input {
  width: 100%; max-width: 12ch; min-height: 60px; padding: .35em .6em; border: 2px solid var(--line-strong); border-radius: 14px;
  background: var(--surface); color: var(--ink); font: 600 1.5rem/1.2 var(--font-mono); letter-spacing: .04em;
}
.spr-input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--accent); }
.spr-input[readonly] { background: var(--inset); }
.spr-input[aria-invalid="true"] { border-color: var(--bad); }
.q.is-right .spr-input { border-color: var(--good); }
.q.is-wrong .spr-input { border-color: var(--bad); }
.spr-help { margin: 8px 0 0; font-size: .9375rem; color: var(--ink-3); }
.spr-help.is-slip { color: var(--bad); font-weight: 600; } /* an entry the box cannot take: why, right under it */
.q.is-right .spr-help, .q.is-wrong .spr-help { display: none; } /* once checked, the result sheet says it all */

/* Check, pinned to the bottom; after Check the same bar is the result sheet, with Next on it */
.q-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 20px max(var(--gutter), env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
  background: linear-gradient(to top, var(--bg) 72%, transparent);
}
.q-dock > * { max-width: var(--column); margin-left: auto; margin-right: auto; }
.q-feedback:empty { display: none; }
.q-feedback { border-radius: 12px; } /* its focus ring (after Check, for the keyboard) follows the corners */
.q-feedback:focus { outline: none; }
.q-feedback:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.fb-warn { margin-bottom: 10px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-1); color: var(--ink); font-weight: 600; }
.q.is-right .q-dock, .q.is-wrong .q-dock {
  background: var(--surface); border-radius: 22px 22px 0 0; box-shadow: 0 -1px 0 var(--hairline), 0 -12px 30px rgba(15, 40, 36, .08);
  padding-top: 18px; padding-bottom: calc(16px + 56px + 14px + env(safe-area-inset-bottom, 0px));
}
.fb-right, .fb-wrong { display: flex; align-items: center; gap: 12px; }
.fb-badge { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 999px; background: var(--good); color: var(--on-accent); }
.fb-wrong .fb-badge { background: var(--bad); color: var(--surface); }
.fb-txt { min-width: 0; }
.fb-txt strong { display: block; font-size: 1.1875rem; line-height: 1.25; font-weight: 800; color: var(--accent-ink); }
.fb-wrong .fb-txt strong { color: var(--bad); }
.fb-line { display: block; font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
.q-next {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; pointer-events: none;
  padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
}
.q-next > .btn { pointer-events: auto; max-width: var(--column); margin: 0 auto; }
/* a wide screen: Check sits just under the answers (and stays in view while they are long), and
   the result sheet with its Next is as wide as the column, not the window */
@media (min-width: 900px) {
  .q:not(.is-right):not(.is-wrong) .q-dock { position: sticky; left: auto; right: auto; padding-left: 0; padding-right: 0; }
  .q.is-right .q-dock, .q.is-wrong .q-dock, .q-next { margin-left: auto; margin-right: auto; max-width: calc(var(--column) + 2 * var(--gutter)); }
}

/* the solution: three folds in one card */
.q-solution { margin-top: 22px; }
.fold > summary {
  display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 18px; cursor: pointer; list-style: none;
  border-radius: var(--radius); font-size: 1.0625rem; font-weight: 700; color: var(--ink);
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary .ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); }
.fold > summary .txt { flex: 1; min-width: 0; }
.fold > summary .chev { display: grid; color: var(--ink-3); }
.fold[open] > summary .chev { transform: rotate(180deg); }
.fold + .fold > summary { background: linear-gradient(var(--hairline), var(--hairline)) no-repeat top / calc(100% - 36px) 1px; }
.fold-body { padding: 0 18px 18px; color: var(--ink-2); }
.fold-body ol { margin: 0; padding-left: 1.4em; display: grid; gap: 10px; }
.fold-body ol li { margin: 0; }
.fold-body ol li::marker { color: var(--ink-3); font-weight: 700; }
.fold-body p { margin: 0; }
.fold-body ul { margin: 0; }
.sol-trap .fold-body p { color: var(--ink); }
/* By hand, in the house style: each "Step N: Heading." bold on a line of its own, the step's lines
   under it (as a unit's Worked by hand), then the answer line */
.fold-body ol.sol-steps { list-style: none; padding-left: 0; gap: 16px; }
.sol-steps .step-h { margin: 0 0 6px; font-size: inherit; line-height: 1.45; }
.sol-steps .step-lines { gap: 6px; list-style: disc; }
.fold-body .sol-lead { margin: 0 0 12px; }
.fold-body .sol-ans { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; font-weight: 700; color: var(--ink); }
.sol-ans svg.i { position: relative; top: 2px; color: var(--accent-ink); }
/* the answer line is bold, so its maths is too ("The correct answer is 3/2" as a fraction) */
.sol-ans .katex { font-weight: 700; }
.sol-ans .katex .frac-line { border-bottom-width: .07em; }
/* the Desmos way's star: Desmos is the quicker route here (HOUSE-STYLE §7, the Manual's star) */
.dz-star {
  display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink); vertical-align: -2px;
}
.dz-star svg.i.xs { width: 14px; height: 14px; fill: currentColor; stroke-width: 1.4; }

/* the summary at the end of a set */
.sum-wrap { padding: 8px 0 0; }
#sum-h { margin: 2px 0 0; }
#sum-h:focus, #sum-h:focus-visible { outline: none; }
.score { margin: 14px 0 0; font-size: 1.0625rem; color: var(--ink-2); }
.score strong { margin-right: 6px; font-size: 3rem; line-height: 1; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.sum-actions { display: grid; gap: 10px; margin: 26px 0 0; }
.missed-list { list-style: none; padding: 4px 0; margin: 0; }
.missed-list > li { position: relative; margin: 0; }
.missed-list > li + li::before { content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 1px; background: var(--hairline); }
.missed-item { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.missed-body { flex: 1; min-width: 0; }
.missed-item .chev { display: grid; color: var(--ink-3); }
.missed-q { display: block; margin-bottom: 2px; font-size: .9375rem; font-weight: 700; color: var(--ink); }
/* the start of the question, one line */
.missed-stem { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; margin: 0; font-size: 1rem; color: var(--ink-2); }
.missed-stem p, .missed-stem .q-eqs { margin: 0; text-align: left; }

/* ---------- figures ----------
   Graphs, scatterplots, number lines and diagrams are inline SVG drawn by the build
   (src/figures.mjs); tables are HTML tables. Every colour is a token, so dark mode just works.
   Font sizes are set on each SVG text (in SVG units), never here. */
.fig {
  width: fit-content; max-width: 100%; margin: 0 auto 22px; padding: 10px;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1);
}
.fig-svg { display: block; max-width: 100%; height: auto; margin: 0 auto; font-family: var(--font-sans); }
.fig-cap { margin: 2px 4px 8px; font-weight: 700; font-size: .95rem; text-align: center; color: var(--ink); }
.fig-note { margin: 6px 4px 0; font-size: .88rem; color: var(--ink-2); text-align: center; }
.fig-grid { fill: none; stroke: var(--fig-grid); stroke-width: 1; }
.fig-axis { fill: none; stroke: var(--ink-2); stroke-width: 1.4; }
.fig-arrow { fill: var(--ink-2); }
.fig-arrow-ink { fill: var(--ink); }
.fig-num, .fig-label, .fig-axis-name, .fig-title-t { paint-order: stroke; stroke: var(--surface); stroke-width: 3.5px; stroke-linejoin: round; }
.fig-num { fill: var(--ink-2); }
.fig-label, .fig-axis-name, .fig-title-t { fill: var(--ink); }
.fig-label { font-weight: 600; }
.fig-fracbar { stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; } /* the bar of a label that is a fraction */
/* a patch of background behind a graph's numbers and labels (figures.mjs knockRect) */
.fig-svg .fig-knock { fill: var(--surface); }
.fig-curve { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fig-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fig-dash { stroke-dasharray: 7 5; stroke-linecap: butt; }
.fig-fit { stroke: var(--accent); }
.fig-shade { fill: var(--fig-shade); stroke: none; }
.fig-pt { fill: var(--ink); stroke: var(--surface); stroke-width: 1; }
.fig-pt.fig-open { fill: var(--surface); stroke: var(--ink); stroke-width: 1.8; }
.fig-arc { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.fig-mark { fill: none; stroke: var(--ink-2); stroke-width: 1.4; }
.fig-hl { fill: none; stroke: var(--accent); stroke-width: 5; }
.fig-hl-arrow { fill: var(--accent); }
.fig-box { fill: var(--surface); stroke: var(--ink); stroke-width: 1.8; }
/* bars: series 1 pale, 2 dark, 3 hatched (figures.mjs drawBars), so colour is never the only difference */
.fig-bar { stroke: var(--ink); stroke-width: 1.2; }
.fig-bar-bg { fill: var(--surface); stroke: none; }
.fig-bar-pale { fill: var(--fig-shade); }
.fig-bar-dark { fill: var(--ink-2); }
.fig-hatch { fill: none; stroke: var(--ink-2); stroke-width: 1.3; }
.fig-table-wrap { max-width: 100%; overflow-x: auto; }
/* a table: no grid of boxes inside the card, just the tinted headings and a hairline under each
   row, which is enough to follow a row across */
table.fig-table { border-collapse: separate; border-spacing: 0; margin: 0 auto; border-radius: 10px; overflow: hidden; font-variant-numeric: tabular-nums; }
.fig-table th, .fig-table td { padding: 8px 16px; text-align: center; min-width: 3.2em; border-bottom: 1px solid var(--line); }
.fig-table tr:last-child > td, .fig-table tbody tr:last-child > th { border-bottom: 0; }
.fig-table thead th, .fig-table tbody th { background: var(--surface-2); font-weight: 700; }
.fig-table thead th { border-bottom-color: var(--line-strong); }
/* on a phone, tighter cells so a 4-column two-way table (row names + 2 columns + Total) fits
   without scrolling sideways */
@media (max-width: 480px) { .fig-table th, .fig-table td { padding: 8px 9px; min-width: 2.4em; } }
/* answer choices that are pictures: the letter beside the picture, "Answer" / "Your pick" under
   it once checked; 2 x 2 on wider screens */
.choice.has-fig { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "letter fig" "letter verdict"; align-items: start; gap: 0 10px; }
.choice.has-fig .letter { grid-area: letter; }
.choice.has-fig .ctext { grid-area: fig; overflow: visible; padding: 0; }
.choice.has-fig .verdict { grid-area: verdict; justify-self: end; margin: 0; }
.choice.has-fig.is-right .verdict, .choice.has-fig.is-wrong .verdict { margin-top: 4px; }
.choice-fig { display: block; background: var(--surface); border-radius: 6px; }
.choice-fig .fig-svg { max-width: 100%; }
@media (min-width: 600px) { .choices.has-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (forced-colors: active) {
  .fig-curve, .fig-line, .fig-axis, .fig-mark, .fig-arc, .fig-box, .fig-hl { stroke: CanvasText; }
  .fig-grid { stroke: GrayText; }
  .fig-num, .fig-label, .fig-axis-name, .fig-title-t { fill: CanvasText; stroke: Canvas; }
  .fig-fracbar { stroke: CanvasText; }
  .fig-svg .fig-knock { fill: Canvas; }
  .fig-pt, .fig-arrow, .fig-arrow-ink, .fig-hl-arrow { fill: CanvasText; }
  .fig-pt.fig-open { fill: Canvas; stroke: CanvasText; }
  .fig-shade { fill: GrayText; fill-opacity: .35; }
  .fig-bar, .fig-hatch { stroke: CanvasText; }
  .fig-bar-bg { fill: Canvas; }
  .fig-bar-pale { fill: GrayText; fill-opacity: .35; }
  .fig-bar-dark { fill: CanvasText; }
}

/* ---------- flashcards ----------
   Which cards (a pill over the phone's own list) and how far through; one big card; one button
   under it ("Show answer", then Again / Know it). A flip is a quarter turn, a swap of faces, and a
   quarter turn back, so each face keeps its own height. The flip button (.fc-flip) is laid over the
   whole card; the key chips on the back sit above it.
   Decluttered 2026-10-03: the front is the question alone, in the middle; the back reads top to
   bottom in the order a student does it (answer, type, look, picture, tip), with one label each. */
.fc-page .title { margin: 8px 0 18px; }
.fc-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.deck {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: 48px; padding: 0 14px 0 18px;
  border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-1); font-size: 1rem; font-weight: 700; color: var(--ink);
}
.deck:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.deck-n { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck .chev { display: grid; color: var(--ink-3); }
.fc-count { flex: none; margin: 0; font-size: .9375rem; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.fc-count:empty { display: none; }
.fc-stage { display: flex; }
/* the button(s) under the card stay on screen: when a card's back is taller than a small phone's
   screen, they hold to the bottom (above the tab bar) over the end of the card, so the flip never
   has to scroll the answer away to show them; at the end of the card they sit in their own place
   under it. Before the flip there is one button, "Show answer"; after it, Again / Know it. */
.fc-actions {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 4px;
  position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); z-index: 3; padding: 12px 0;
  background: linear-gradient(to top, var(--bg) 80%, transparent);
}
@media (min-width: 900px) { .fc-actions { bottom: 0; padding-bottom: 16px; } }
.btn-show { grid-column: 1 / -1; }
.btn-again { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.btn-know { background: var(--accent); color: var(--on-accent); }
.fc-done { padding: 26px 22px 22px; text-align: center; }
.fc-done-h { margin: 0; font-size: 1.375rem; font-weight: 800; letter-spacing: -.01em; }
.fc-done-s { margin: 4px 0 0; color: var(--ink-2); }
.fc-done-s:empty { display: none; }
.fc-done .btn { margin-top: 20px; }
.fc-note { margin: 16px 0 0; font-size: .875rem; color: var(--ink-3); text-align: center; }
.fc-note span { display: inline-block; } /* on a phone the line breaks between the two sentences */
html:not(.js) .fc-bar, html:not(.js) .fc-actions { display: none; } /* without JavaScript: the noscript note alone */

.fc-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.fc-grid > li { margin: 0; display: flex; }
.fc { flex: 1; display: flex; min-width: 0; max-width: 100%; }
.fc-inner { position: relative; flex: 1; display: flex; min-width: 0; transition: transform .16s ease-in-out; transform: perspective(1200px) rotateY(0deg); }
.fc.is-turning .fc-inner { transform: perspective(1200px) rotateY(90deg); }
.face { flex: 1; min-width: 0; background: var(--surface); border-radius: 24px; box-shadow: var(--shadow-2); padding: 22px 22px 20px; }
.fc-front { display: flex; flex-direction: column; }
.fc .fc-back { display: none; }
.fc.is-flipped .fc-front { display: none; }
.fc.is-flipped .fc-back { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.fc-flip {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0;
  border: 0; border-radius: 24px; background: transparent; color: inherit; cursor: pointer;
}
.fc-flip:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* the front: the question and its maths, alone in the middle of the card. The chapter tag sits in
   the top corner and shows only when every chapter is mixed (the pill above names a single one) */
.fc-tag { margin: 0; font-size: .875rem; font-weight: 700; color: var(--accent-ink); }
.fc-qa { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fc-q { margin: 14px 0 0; font-size: 1.25rem; line-height: 1.35; font-weight: 700; letter-spacing: -.01em; text-wrap: pretty; }
.fc-math { margin: 0; padding: 16px 0 4px; font-size: 1.1875rem; line-height: 1.55; font-weight: 500; font-variant-numeric: lining-nums; }
.fc-math > span { display: block; white-space: pre; } /* one line each; keeps the wide gaps between answer choices */
.fc-math > span + span { margin-top: .3em; } /* room between two lines that hold fractions */
/* the cards' maths is typeset like a question's (KaTeX): real fractions, roots and powers */
.fc .katex { font-size: 1.1em; }
/* in the bold prompt and the bold answer the maths is bold too (KaTeX has bold faces), with a fraction bar to match */
.fc-q .katex, .fc-ans .katex { font-weight: 700; }
.fc-q .katex .frac-line, .fc-ans .katex .frac-line { border-bottom-width: .07em; }
.fc .nw { white-space: nowrap; }
.fc-foot { display: none; } /* the printed cards carry the name */
.fc-big .fc-front { position: relative; min-height: clamp(280px, 50vh, 440px); padding-top: 52px; padding-bottom: 52px; }
.fc-big .fc-tag { position: absolute; top: 20px; left: 22px; right: 22px; }
#flashcards[data-deck="one"] .fc-big .fc-tag { display: none; }
.fc-big .fc-qa { justify-content: center; text-align: center; }
.fc-big .fc-q { margin: 0; font-size: 1.375rem; text-wrap: balance; }
.fc-big .fc-q-long { font-size: 1.1875rem; line-height: 1.4; } /* a word problem: smaller, so it is not a wall of bold */
.fc-big .fc-math { padding: 20px 0 0; font-size: clamp(1.3125rem, 1rem + 1.6vw, 1.625rem); }
.fc-big .fc-math-long { font-size: clamp(1.1875rem, .95rem + 1.2vw, 1.5rem); } /* a long line still fits a 360px phone on one line */
/* the back, top to bottom: the answer in a tinted band, what to type (rows stacked in one box),
   where to look (one line), the Desmos picture, the tip. One quiet label over each part. */
.fc-lbl { margin: 0; font-size: .875rem; font-weight: 700; color: var(--ink-3); }
.fc-a { margin: -22px -22px 0; padding: 18px 22px 16px; border-radius: 24px 24px 0 0; background: var(--accent-soft); }
.fc-a .fc-lbl { color: var(--accent-ink); }
.fc-ans { margin: 2px 0 0; font-size: 1.625rem; line-height: 1.25; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.fc-how { margin-top: 18px; min-width: 0; }
.fc-how .fc-lbl { margin-bottom: 6px; }
.fc-type { display: grid; grid-template-columns: minmax(0, 1fr); border-radius: var(--radius-sm); background: var(--inset); overflow: hidden; } /* minmax(0, ...): a long row cannot widen the box */
.fc-type .key, .fc-type .typed {
  position: relative; z-index: 2; display: flex; align-items: center; width: 100%; max-width: none; min-height: 44px; padding: 6px 12px 6px 14px;
  border-radius: 0; background: transparent; box-shadow: none;
}
.fc-type > * + * { border-top: 1px solid var(--line); }
.fc-type .key-t { flex: 1; min-width: 0; white-space: nowrap; font-size: 1.125rem; } /* the row as Desmos shows it: one line (flashcards.js sets it smaller if it is too wide) */
/* a row that needs the right-arrow key: the maths, then its keystrokes */
.fc-type .typed { flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 10px; padding-bottom: 10px; }
.fc-type .typed .key-t { flex: none; align-self: stretch; }
/* (a fraction up in a power is set larger site-wide: see .katex .msupsub .mfrac) */
.fc-keyline { font: 400 .875rem/1.5 var(--font); color: var(--ink-3); white-space: normal; }
.fc-keyline code { padding: 1px 5px; border-radius: 6px; background: var(--surface); font-family: var(--font-mono); font-size: .9375em; color: var(--ink-2); }
.fc-type kbd { font-family: var(--font); font-size: .85em; }
.fc-type .key:focus-visible { outline-offset: -3px; }
.fc-type + .fc-lbl { margin-top: 16px; }
.fc-look { margin: 0; line-height: 1.5; color: var(--ink); }
.fc-media { width: fit-content; max-width: 100%; margin: 14px auto 0; min-width: 0; }
.fc-pic { margin: 0; }
.fc-pic .shot-frame { width: fit-content; max-width: 100%; }
/* short enough that on a small phone the answer, the picture and Again / Know it fit one screen */
.fc-pic img { max-height: 260px; max-height: min(260px, 28vh); width: auto; max-width: 100%; }
.fc-credit { margin: 6px 0 0; font-size: .8125rem; color: var(--ink-3); text-align: right; }
.fc-big .fc-credit { display: none; } /* on screen the line under the card credits every picture (.fc-note) */
.fc-tip { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.fc-tip .fc-lbl { margin-right: 6px; color: var(--accent-ink); }
.fc-tip kbd, .fc-look kbd { font-size: .85em; }
/* a wide screen: what to type, where to look and the tip on the left, the picture on the right */
@media (min-width: 600px) {
  .fc-big.is-flipped .fc-back:not(.no-pic) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 46%); grid-template-rows: auto auto 1fr;
    grid-template-areas: "a a" "how media" "tip media"; column-gap: 28px;
  }
  .fc-big .fc-back:not(.no-pic) .fc-a { grid-area: a; }
  .fc-big .fc-back:not(.no-pic) .fc-how { grid-area: how; }
  .fc-big .fc-back:not(.no-pic) .fc-tip { grid-area: tip; align-self: start; }
  .fc-big .fc-back:not(.no-pic) .fc-media { grid-area: media; margin: 18px 0 0 auto; align-self: start; }
  .fc-big .fc-pic img { max-height: 320px; }
}
.print-only { display: none; }

@media (forced-colors: active) {
  .choice:has(input:checked), .choice.is-right, .choice.is-wrong { outline: 3px solid Highlight; }
  .chip[aria-current="true"], .chip[aria-pressed="true"] { outline: 2px solid Highlight; }
  .q.is-right .q-dock, .q.is-wrong .q-dock { border-top: 2px solid CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .fc.is-turning .fc-inner { transform: none; }
}

/* ---------- print ---------- */
@media print {
  /* beats both dark-mode blocks: print is always black on white */
  html:root:not([data-r800-a]):not([data-r800-b]) {
    color-scheme: light;
    --bg: #fff; --surface: #fff; --surface-2: #f3f3f3; --ink: #000; --ink-2: #222; --ink-3: #444; --line: #bbb;
    --code-bg: #f4f4f4; --accent: #000; --mark: #777; --warn-soft: #f6f6f6; --warn-line: #bbb; --shadow: none;
    --tag: #0a4f49; --good: #0a4f49; --fig-grid: #c8c8c8; --fig-shade: rgba(0, 0, 0, .14);
    --shadow-1: none; --shadow-2: none; --accent-ink: #000; --inset: #f4f4f4; --hairline: #ccc; --track: #ddd;
  }
  body { font-size: 10.5pt; background: #fff; color: #000; }
  .site-header, .tabbar, .dock, .site-footer > :not(.tm), .skip, .qbar, .q-dock, .q-next, .fc-page .title, .fc-bar, #fc-study { display: none !important; }
  .site-footer { margin-top: 12pt; padding: 0; text-align: left; }
  body.has-tabbar { padding-bottom: 0; }
  .print-only { display: block; }
  #fc-browse { display: block !important; }
  .fc-grid { display: block; columns: 2; column-gap: 12pt; }
  .fc-grid > li:not([hidden]) { display: block !important; break-inside: avoid; margin: 0 0 8pt; }
  .fc, .fc-inner { display: block; transform: none !important; }
  .fc-flip { display: none !important; }
  .fc .face, .fc.is-flipped .face { display: block !important; transform: none !important;
    box-shadow: none; border: 1px solid #999; border-radius: 6pt; padding: 6pt 8pt; margin: 0; min-height: 0; }
  .fc .fc-front { border-bottom: 0; border-radius: 6pt 6pt 0 0; }
  .fc .fc-back { border-top: 1px dashed #999; border-radius: 0 0 6pt 6pt; }
  .fc-foot { display: flex; justify-content: flex-start; margin: 0; padding-top: 2pt; font-size: 7.5pt; font-weight: 400; color: #444; }
  .fc-brand { display: inline; }
  .fc-note { display: none !important; }
  .fc-tag { font-size: 8pt; }
  .fc-q { margin: 2pt 0 0; font-size: 11pt; }
  .fc-math { padding: 2pt 0 0; font-size: 11pt; text-align: left; }
  /* the back, in print: answer and what to type on the left, the picture on the right */
  .fc .fc-back:not(.no-pic) { display: grid !important; grid-template-columns: minmax(0, 1fr) 38%; grid-template-rows: auto auto 1fr; grid-template-areas: "a media" "how media" "tip media"; column-gap: 8pt; }
  .fc-a { grid-area: a; margin: 0; padding: 0; border-radius: 0; background: none; }
  .fc-how { grid-area: how; margin-top: 3pt; }
  .fc-tip { grid-area: tip; }
  .fc-media { grid-area: media; margin: 0; width: auto; }
  .fc-lbl, .fc-a .fc-lbl, .fc-tip .fc-lbl { font-size: 8pt; color: #333; }
  .fc-how .fc-lbl { margin-bottom: 1pt; }
  .fc-type + .fc-lbl { margin-top: 3pt; }
  .fc-ans { margin: 0; font-size: 11pt; }
  .fc-type { display: flex; flex-wrap: wrap; gap: 3pt; overflow: visible; border-radius: 0; background: none; }
  .fc-type .key, .fc-type .typed { display: inline-flex; width: auto; min-height: 0; padding: 1pt 4pt; border: 1px solid #bbb; border-radius: 3pt; background: #fff; font-size: 9pt; line-height: 1.35; }
  .fc-type .typed { gap: 1pt; }
  .fc-keyline { font-size: 7.5pt; }
  .fc-type .key svg { display: none !important; }
  .fc-look, .fc-tip { margin: 0; font-size: 9pt; line-height: 1.35; color: #222; }
  .fc-tip { margin-top: 3pt; padding: 0; border: 0; }
  .fc-pic .shot-frame { width: auto; padding: 0; border: 1px solid #ccc; border-radius: 3pt; box-shadow: none; }
  .fc-pic .shot-frame img { width: 100%; max-height: none; border-radius: 0; }
  .fc-credit { margin-top: 2pt; font-size: 7pt; }
  a { color: #000; text-decoration: none; }
}

/* Desmos pictures in a solution: Type (the list) beside Look (the graph); stacked on a phone. A
   picture is never recoloured (it must look like real Desmos), so it sits in a rounded frame; in
   dark mode the frame has a narrow mat of the card's colour, so the white picture does not glare. */
.sol-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 16px; align-items: start; }
.sol-shot { margin: 0; min-width: 0; }
.sol-shot figcaption { margin: 0 0 6px; font-size: .875rem; font-weight: 700; color: var(--ink-3); }
.shot-frame { overflow: hidden; border-radius: var(--radius-sm); background: #fff; box-shadow: 0 0 0 1px var(--hairline), var(--shadow-1); }
.shot-frame img { display: block; width: 100%; height: auto; }
.sol-shot-list .shot-frame { max-width: 380px; }
.sol-shot-graph .shot-frame { max-width: 420px; }
.sol-credit { margin: 8px 0 0; font-size: .8125rem; color: var(--ink-3); }
@media (prefers-color-scheme: dark) {
  .shot-frame { padding: 5px; background: var(--surface-2); border-radius: 15px; box-shadow: none; }
  .shot-frame img { border-radius: 10px; }
}

/* Hover: only where there is a real pointer. On a touch screen the browser keeps the last
   finger position as "hover", so a tapped row or fold would stay grey. */
@media (hover: hover) {
  a:hover { color: var(--accent-press); text-decoration-thickness: 2px; }
  .brand:hover { color: var(--ink); }
  .topnav a:hover { color: var(--ink); background: var(--surface-2); }
  .topnav a[aria-current]:hover { background: var(--accent-soft); color: var(--accent-ink); }
  .tabbar a:hover { color: var(--ink); }
  .tabbar a[aria-current]:hover { color: var(--accent-ink); }
  .backlink:hover { color: var(--ink); }
  .btn:hover { background: var(--accent-press); color: var(--on-accent); text-decoration: none; }
  .btn-soft:hover { background: var(--surface-2); color: var(--ink); }
  .row:hover { color: var(--ink); background: var(--inset); }
  .chip:hover { color: var(--ink); background: var(--surface-2); }
  .go-card:hover { color: var(--on-hero); background: var(--hero-press); }
  .tile:hover { color: var(--ink); box-shadow: var(--shadow-2); }
  .picker:hover { box-shadow: var(--shadow-2); }
  .hub-sets > summary:hover { color: var(--ink); background: var(--inset); }
  .key:hover { box-shadow: var(--shadow-2); }
  .try .open:hover { text-decoration: underline; }
  details.reveal > summary:hover { background: var(--surface-3); }
  .icon-btn:hover { color: var(--ink); background: var(--surface-2); }
  .desmos-btn:hover { color: var(--ink); box-shadow: var(--shadow-2); }
  .choice:hover { box-shadow: var(--shadow-2); }
  fieldset[disabled] .choice:hover { box-shadow: var(--shadow-1); }
  .fold > summary:hover .txt { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
  .missed-item:hover { color: var(--ink); background: var(--inset); }
  .deck:hover { box-shadow: var(--shadow-2); }
  .btn-again:hover { background: var(--surface-2); color: var(--ink); }
  .btn-know:hover { background: var(--accent-press); color: var(--on-accent); }
  .fc-type .key:hover { background: var(--surface-2); box-shadow: none; }
}

/* ---------- Progress, signing in and the teacher's page (2026-10-14/15) ---------- */
/* Progress: all questions in one card, then each chapter as a row with a bar */
.me { padding-top: 28px; }
.me .title { margin-bottom: 20px; }
.me-all { padding: 20px 20px 18px; margin-top: 16px; }
.me-k { margin: 0 0 4px; font-size: .9375rem; font-weight: 700; color: var(--ink-3); }
.me-n { margin: 0 0 12px; font-size: 1.5rem; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.me-big { height: 12px; }
.me-s { margin: 10px 0 0; color: var(--ink-2); font-weight: 600; }
.me-row .bar { margin-top: 8px; height: 6px; }
.me-row .bar > span { background: var(--dom, var(--accent)); }
/* the account: a card to sign in, or who is signed in */
.acct { padding: 20px; margin-top: 4px; }
.acct-h { margin: 0 0 6px; font-size: 1.1875rem; font-weight: 800; }
.acct-p { margin: 0 0 14px; color: var(--ink-2); }
.acct-note { margin: 12px 0 0; font-size: .875rem; color: var(--ink-3); }
.acct-note:empty { display: none; }
.acct-who { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; min-width: 0; }
.acct-av { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 1.25rem; }
.acct-id { display: grid; min-width: 0; }
.acct-name { font-weight: 800; overflow-wrap: anywhere; }
.acct-mail { font-size: .9375rem; color: var(--ink-3); overflow-wrap: anywhere; }
.acct-in .acct-p { margin-bottom: 6px; }
.acct-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin: 0; }
.acct-teach { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
/* a button that reads as a link */
.linkish { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--accent-ink); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.linkish.danger { color: var(--bad); }
.btn.danger { background: var(--bad); color: #fff; box-shadow: none; }
.acct-del { margin: 40px 0 0; text-align: center; }
.acct-confirm { padding: 18px 20px; text-align: left; }
.acct-confirm p { margin: 0 0 12px; color: var(--ink-2); }
.acct-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 !important; }
.acct-msg { margin: 10px 0 0; color: var(--ink-2); font-weight: 600; }
.acct-msg:empty { display: none; }
/* "Sign in with Google": Google's own look (a plain button with the four-colour G), light and dark */
.gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 20px 0 14px; border: 1px solid #747775; border-radius: 999px; background: #fff; color: #1f1f1f; font: 600 1rem/1 var(--font); cursor: pointer; }
.gbtn .gmark { width: 20px; height: 20px; flex: none; }
.gbtn:hover { background: #f8fafd; }
.gbtn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.gbtn[disabled] { opacity: .6; cursor: progress; }
@media (prefers-color-scheme: dark) {
  .gbtn { background: #131314; border-color: #8e918f; color: #e3e3e3; }
  .gbtn:hover { background: #1f1f20; }
}
/* the teacher's page: a search and a sort, then one card per student (opened: chapters, weakest units, this week) */
.teach { padding-top: 28px; }
.teach .lede { margin: 10px 0 16px; }
.t-msg { margin: 12px 0; color: var(--ink-2); font-weight: 600; }
.t-msg:empty { display: none; }
.t-tools { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 12px; }
.t-q { flex: 1 1 200px; min-width: 0; min-height: 48px; padding: .4em .75em; border: 2px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink); font: 500 1rem/1.3 var(--font); }
.t-sort { min-height: 48px; padding: 0 .75em; border: 2px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink); font: 600 1rem/1.3 var(--font); }
.t-q:focus-visible, .t-sort:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--accent); }
.t-sum { margin: 0 0 12px; font-size: .9375rem; color: var(--ink-3); font-weight: 600; }
.t-sum:empty { display: none; }
.t-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.t-item { overflow: hidden; }
.t-head { display: grid; gap: 8px; padding: 16px 18px; cursor: pointer; list-style: none; }
.t-head::-webkit-details-marker { display: none; }
.t-head:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: var(--radius); }
.t-who { display: grid; min-width: 0; }
.t-name { font-weight: 800; font-size: 1.0625rem; overflow-wrap: anywhere; }
.t-mail { font-size: .875rem; color: var(--ink-3); overflow-wrap: anywhere; }
.t-line { font-size: .9375rem; color: var(--ink-2); }
.t-body { padding: 0 18px 16px; border-top: 1px solid var(--hairline); }
.t-week { margin: 12px 0 0; font-weight: 700; }
.t-h { margin: 16px 0 8px; font-size: .9375rem; font-weight: 800; color: var(--ink-2); }
.t-chs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.t-ch { display: grid; gap: 4px; }
.t-ch .bar { height: 6px; }
.t-ch .bar > span { background: var(--dom, var(--accent)); }
.t-ch-name { font-weight: 600; }
.t-ch-st { font-size: .875rem; color: var(--ink-3); }
.t-weak { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; color: var(--ink-2); }
.t-note { margin: 12px 0 0; font-size: .9375rem; color: var(--ink-3); }
/* Quadratic equations (2026-11-04): the lessons in order, numbered; the link to it on Home and Practice */
.quad-link { margin-top: 16px; }
.quad-n { width: 28px; height: 28px; border-radius: 999px; background: var(--dom-soft, var(--accent-soft)); color: var(--dom-ink, var(--accent-ink)); font-weight: 800; font-size: .9375rem; }
.quad-list { padding-left: 0; }
.quad-page .lede { margin: 10px 0 16px; }
/* each lesson's own practice (2026-11-04): the button at the end of a unit, and the link under a row on Quadratic equations */
.unit-practice { margin: 16px 0 4px; }
.unit-practice .min { font-weight: 600; opacity: .85; }
.quad-pr { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -6px 0 6px 60px; font-weight: 700; color: var(--accent-ink); text-decoration: none; }
.quad-pr:hover { text-decoration: underline; }
/* the Practice tab: the chapter's lessons first (2026-11-04), then the mixed sets by level */
.by-lesson .section-label { margin-top: 20px; }
.mixed-h { margin-top: 32px; }