/* Standards — site styles.
   WCAG 2.1 AA: every text color below was checked at 4.5:1 or better against the surface it
   sits on (UI boundaries and the focus ring at 3:1), in both schemes. The layout reflows to
   320px without horizontal scrolling (1.4.10); motion is off for prefers-reduced-motion. */

/* IBM Plex, served from this site (no third-party font requests). SIL Open Font License,
   see static/fonts/LICENSE-OFL.txt. */
@font-face { font-family: "Plex Sans"; src: url("fonts/plex-sans-var.b2c9031d9fd6.woff2") format("woff2");
  font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("fonts/plex-sans-var-italic.ed273b4064f8.woff2") format("woff2");
  font-weight: 100 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-400.79936b18df9f.woff2") format("woff2");
  font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-500.b1c8a895f5fd.woff2") format("woff2");
  font-weight: 500; font-display: swap; }

:root {
  color-scheme: light dark;
  --sans: "Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --paper: #f3f5f4;
  --surface: #ffffff;
  --ink: #10181f;
  --ink-2: #2b363e;
  --muted: #4d5a63;
  --rule: #d5dbd9;
  --rule-strong: #7d8a91;
  --navy: #10181f;
  --navy-2: #1f2c37;
  --signal: #ffc629;
  --on-navy: #ffffff;
  --on-navy-muted: #b9c4cb;
  --link: #10181f;
  --accent: #8a5a00;
  --accent-soft: #fff5d6;
  --code-bg: #e6ebe9;
  --code-ink: #10181f;
  --th-bg: #e9eeec;
  --focus: #10181f;
  --button: #10181f;
  --on-button: #ffffff;
  --gen: #1d5fa8; --af: #10181f; --pp: #a8500a; --on-section: #ffffff;
  --ok: #10181f; --ok-soft: #e6ebe9; --bad: #c23b22; --bad-soft: #fbe9e5;
  --shadow: 0 1px 2px rgb(16 24 31 / 6%);
  --radius: 4px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e1419;
    --surface: #151e25;
    --ink: #e8eceb;
    --ink-2: #bcc6cb;
    --muted: #97a4ab;
    --rule: #26323b;
    --rule-strong: #5f6f7a;
    --navy: #0a0f13;
    --navy-2: #1f2c37;
    --on-navy: #ffffff;
    --on-navy-muted: #b9c4cb;
    --link: #e8eceb;
    --accent: #ffc629;
    --accent-soft: #2b2410;
    --code-bg: #1c262e;
    --code-ink: #e8eceb;
    --th-bg: #1c262e;
    --focus: #ffc629;
    --button: #ffc629;
    --on-button: #10181f;
    --gen: #7fb3f0; --af: #e8eceb; --pp: #f2ad55; --on-section: #10181f;
    --ok: #e8eceb; --ok-soft: #1c262e; --bad: #ff8a73; --bad-soft: #3a1a14;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%);
  }
}
/* The learner's own choice (Profile), whatever the device says. */
:root[data-theme="dark"] {
  --paper: #0e1419;
  --surface: #151e25;
  --ink: #e8eceb;
  --ink-2: #bcc6cb;
  --muted: #97a4ab;
  --rule: #26323b;
  --rule-strong: #5f6f7a;
  --navy: #0a0f13;
  --navy-2: #1f2c37;
  --on-navy: #ffffff;
  --on-navy-muted: #b9c4cb;
  --link: #e8eceb;
  --accent: #ffc629;
  --accent-soft: #2b2410;
  --code-bg: #1c262e;
  --code-ink: #e8eceb;
  --th-bg: #1c262e;
  --focus: #ffc629;
  --button: #ffc629;
  --on-button: #10181f;
  --gen: #7fb3f0; --af: #e8eceb; --pp: #f2ad55; --on-section: #10181f;
  --ok: #e8eceb; --ok-soft: #1c262e; --bad: #ff8a73; --bad-soft: #3a1a14;
  --shadow: 0 1px 2px rgb(0 0 0 / 30%);
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
/* Text size (Profile): the whole page scales, as with the browser's own zoom. */
:root[data-text="s"] { font-size: 93.75%; }
:root[data-text="l"] { font-size: 112.5%; }
:root[data-text="xl"] { font-size: 125%; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
main { width: 100%; max-width: 64rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; min-width: 0; }
main:focus { outline: none; }
h1, h2, h3 { font-family: var(--sans); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
h1 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem); margin: 0 0 0.75rem; }
h2 { font-size: 1.5rem; margin: 2rem 0 0.75rem; }
h3 { font-size: 1.2rem; margin: 1.5rem 0 0.5rem; }
p { margin: 0 0 1rem; }
a { color: var(--link); text-decoration-color: var(--signal); text-underline-offset: 0.2em; text-decoration-thickness: 0.14em; }
a:hover { text-decoration-color: currentColor; }
main :is(p, li, td, dd, blockquote, figcaption) a:not([class]) { font-weight: 500; }
strong { font-weight: 600; }
code, .code { font-family: var(--mono); font-size: 0.88em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--surface); color: var(--link); padding: 0.6rem 1rem; border-radius: 3px;
  box-shadow: var(--shadow); font-weight: 600;
}
.skip-link:focus { top: 1rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- header ---------- */
.site-header { background: var(--navy); color: var(--on-navy); border-bottom: 3px solid var(--signal); }
.header-inner {
  padding: 0.55rem 1.25rem;
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0.5rem 1rem;
}
.site-header a { color: var(--on-navy); text-decoration: none; }
.site-header :focus-visible { outline-color: var(--signal); }
.site-header a:hover { text-decoration: underline; }
.brand { display: flex; align-items: center; gap: 0.7rem; margin-right: auto; }
/* The mark: a maintenance tag, signed off. Its hole shows the header through it. */
.brand-mark { width: 2.1rem; height: 2.1rem; flex: none; display: grid; place-items: center; }
.brand-mark svg { width: 2.1rem; height: 2.1rem; }
.brand-name { font-weight: 500; font-size: 1.2rem; letter-spacing: -0.02em; line-height: 1.1; display: block; }
.brand-amt { font-weight: 700; color: var(--signal); }
.brand-tld { font-family: var(--mono); font-weight: 500; font-size: 0.95rem; letter-spacing: 0; color: var(--on-navy-muted); }
.brand-sub { font-family: var(--mono); font-size: 0.68rem; color: var(--on-navy-muted); letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--mono); display: block; margin-top: 0.15rem; }

/* Signed out: the units, the glossary, search and a way in, in the header. */
.guest-nav { display: flex; align-items: center; gap: 0.25rem 1rem; font-size: 0.95rem; }
.guest-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.3em; }
.site-header .guest-signin { border: 1px solid var(--on-navy); border-radius: 4px; padding: 0.35rem 0.8rem; font-weight: 600; }
.site-header .guest-signin:hover { background: var(--navy-2); text-decoration: none; }
@media (max-width: 40rem) { .guest-nav { gap: 0.75rem; font-size: 0.9rem; } }

/* Search: the header's button, the dialog (static/js/search.js), and /search/. */
.search-open {
  display: flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.6rem 0.35rem 0.55rem;
  border: 1px solid var(--on-navy-muted); border-radius: 4px; color: var(--on-navy-muted); font-size: 0.93rem;
}
.site-header .search-open { color: var(--on-navy-muted); }
.site-header .search-open:hover { background: var(--navy-2); color: var(--on-navy); text-decoration: none; }
.search-open svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.search-open kbd { font-family: var(--mono); font-size: 0.75rem; border: 1px solid var(--on-navy-muted); border-radius: 4px; padding: 0 0.35rem; }
@media (max-width: 40rem) { .search-open .search-label, .search-open kbd { display: none; } .search-open { padding: 0.4rem; } }
.search-dialog {
  width: min(42rem, calc(100vw - 2rem)); max-height: min(36rem, calc(100dvh - 4rem)); margin: 8vh auto auto; padding: 0;
  border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); color: var(--ink);
  box-shadow: 0 4px 12px rgb(16 24 31 / 18%), 0 24px 60px rgb(16 24 31 / 28%);
}
.search-dialog[open] { display: flex; flex-direction: column; }
.search-dialog::backdrop { background: rgb(10 15 19 / 55%); }
.search-bar { display: flex; gap: 0.5rem; align-items: center; padding: 0.75rem; border-bottom: 1px solid var(--rule); margin: 0; }
.search-bar input { flex: 1; font: inherit; font-size: 1.05rem; color: var(--ink); background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 4px; padding: 0.55rem 0.75rem; }
.search-close { font: inherit; font-size: 0.8rem; font-family: var(--mono); color: var(--muted); background: transparent; border: 1px solid var(--rule); border-radius: 3px; padding: 0.3rem 0.5rem; filter: none; }
.search-status { margin: 0; padding: 0.5rem 1rem 0; font-size: 0.85rem; color: var(--muted); }
.search-list { list-style: none; margin: 0; padding: 0.4rem; overflow-y: auto; flex: 1; }
.search-option { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 0.75rem; padding: 0.45rem 0.6rem; border-radius: 3px; cursor: pointer; }
.search-option[aria-selected="true"] { background: var(--paper); box-shadow: inset 3px 0 0 var(--signal); }
.search-option .search-sub { grid-column: 2; }
.search-kind { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--mono); color: var(--muted); padding-top: 0.2rem; }
.search-title { font-weight: 600; }
.search-sub { font-size: 0.85rem; color: var(--muted); }
.search-foot { margin: 0; padding: 0.5rem 1rem 0.7rem; border-top: 1px solid var(--rule); font-size: 0.8rem; color: var(--muted); }
.search-form { display: flex; gap: 0.5rem; margin: 0 0 1.5rem; max-width: 40rem; }
.search-form input { flex: 1; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 4px; padding: 0.5rem 0.75rem; }
/* The search page: results by kind, the rest of a long kind folded. */
.search-group + .search-group { margin-top: 1.5rem; }
.search-group-title { font-size: 1.05rem; margin: 0 0 0.4rem; }
.search-group-title .count { color: var(--muted); font-family: var(--sans); font-size: 0.85rem; font-weight: 400; margin-left: 0.3rem; }
.search-more summary { cursor: pointer; color: var(--link); font-size: 0.93rem; padding: 0.4rem 0; }
.search-group .search-results a { grid-template-columns: minmax(0, 1fr); }
.search-group .search-results .search-sub { grid-column: 1; }

.search-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; max-width: 48rem; }
.search-results a { display: grid; grid-template-columns: 6rem minmax(0, 1fr); column-gap: 0.75rem; padding: 0.5rem 0.6rem; border-radius: 3px; text-decoration: none; color: var(--ink); }
.search-results a:hover { background: var(--surface); }
.search-results .search-title { color: var(--link); }
.search-results .search-sub { grid-column: 2; }

/* The account menu: a <details> disclosure (static/js/menu.js adds Escape and click-outside). */
.user-menu { position: relative; }
.user-menu summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem;
  padding: 0.25rem 0.5rem 0.25rem 0.3rem; border-radius: 2px; border: 1px solid transparent;
  color: var(--on-navy); font-size: 0.95rem;
}
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover, .user-menu[open] summary { background: var(--navy-2); border-color: var(--on-navy-muted); }
.user-menu .avatar {
  width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--navy-2); box-shadow: inset 0 -2px 0 var(--signal); font-weight: 700;
}
.user-menu .email { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--on-navy-muted); }
.user-menu .caret { width: 0.75rem; height: 0.75rem; transition: transform 120ms; }
.user-menu[open] .caret { transform: rotate(180deg); }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 50; min-width: 15rem;
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: 0 2px 4px rgb(16 24 31 / 10%), 0 12px 32px rgb(16 24 31 / 18%); padding: 0.4rem;
}
.menu-who { margin: 0; padding: 0.5rem 0.75rem 0.6rem; font-size: 0.85rem; color: var(--muted); border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.menu-who strong { color: var(--ink); font-weight: 600; }
.menu-panel ul { list-style: none; margin: 0.3rem 0; padding: 0; }
.site-header .menu-panel a {
  display: block; padding: 0.45rem 0.75rem; border-radius: 3px; color: var(--ink); text-decoration: none; font-size: 0.95rem;
}
.site-header .menu-panel a:hover { background: var(--paper); text-decoration: none; }
.site-header .menu-panel a[aria-current="page"] { font-weight: 600; box-shadow: inset 3px 0 0 var(--signal); }
.menu-panel form { margin: 0; padding-top: 0.3rem; border-top: 1px solid var(--rule); }
.menu-panel button {
  width: 100%; text-align: left; font: inherit; font-size: 0.95rem; font-weight: 400; color: var(--ink);
  background: transparent; border: 0; border-radius: 3px; padding: 0.45rem 0.75rem; filter: none;
}
.menu-panel button:hover { background: var(--paper); }
@media (max-width: 40rem) {
  .user-menu .email { display: none; }
  /* One row on a phone: the menu, the mark, the account. The name stays for screen readers,
     so the home link keeps its label. */
  .header-inner { gap: 0.75rem; padding: 0.5rem 1rem; }
  .brand { margin-right: auto; gap: 0; }
  .brand-name, .brand-sub {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) { .user-menu .caret { transition: none; } }

/* ---------- the shell: site nav | page | context ----------
   Three panes on a wide screen: the site's navigation on the left (every unit, with where the
   learner stands), the page, and what belongs to the page on the right (practice, contents,
   terms). Narrower, the right panel moves above the page; narrower still, the left one becomes a
   drawer behind the menu button (a :target link, which static/js/shell.js enhances). */
.shell { flex: 1 0 auto; width: 100%; display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; }
@media (min-width: 64rem) {
  .shell:has(> .site-nav) { grid-template-columns: 16.5rem minmax(0, 1fr); }
  body:not(.drill-page) .shell > .site-nav { grid-column: 1; grid-row: 1 / span 2; }
  :root:not([data-nav="hidden"]) .shell:has(> .site-nav) > main,
  :root:not([data-nav="hidden"]) .shell:has(> .site-nav) > .site-footer { grid-column: 2; }
  /* The panel's column, surface and rule, all the way down beside the footer. */
  :root:not([data-nav="hidden"]) body:not(.drill-page) .shell:has(> .site-nav) {
    background: linear-gradient(to right, var(--surface) calc(16.5rem - 1px), var(--rule) calc(16.5rem - 1px) 16.5rem, transparent 16.5rem);
  }
  body:not(.drill-page) .site-nav { position: sticky; top: 0; align-self: start; max-height: 100dvh; overflow-y: auto; }
  body:not(.drill-page) .nav-close { display: none; }
  /* Folded away (the menu button, or \): the page has the width. */
  :root[data-nav="hidden"] body:not(.drill-page) .site-nav { display: none; }
  :root[data-nav="hidden"] .shell:has(> .site-nav) { grid-template-columns: minmax(0, 1fr); }
}

main.with-context { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "msg" "top" "ctx" "body"; }
.with-context > .messages { grid-area: msg; }
.with-context > .page-top { grid-area: top; }
.with-context > .context { grid-area: ctx; }
.with-context > .page-body { grid-area: body; }
@media (min-width: 80rem) {
  main.with-context {
    max-width: 84rem; column-gap: 2.5rem; grid-template-columns: minmax(0, 1fr) 17rem;
    grid-template-areas: "msg msg" "top ctx" "body ctx"; grid-template-rows: auto auto 1fr;
  }
  .with-context > .context { position: sticky; top: 1.25rem; align-self: start; max-height: calc(100dvh - 2.5rem); overflow-y: auto; }
}

.nav-toggle {
  display: grid; place-items: center; flex: none; width: 2.3rem; height: 2.3rem; border-radius: 4px;
  border: 1px solid var(--on-navy-muted); color: var(--on-navy);
}
.nav-toggle:hover, .nav-toggle[aria-expanded="true"] { background: var(--navy-2); }
.nav-toggle svg { width: 1.2rem; height: 1.2rem; }

.site-nav { background: var(--surface); border-right: 1px solid var(--rule); font-size: 0.93rem; }
.nav-inner { padding: 1rem 0.75rem 2.5rem; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a { color: var(--ink-2); text-decoration: none; border-radius: 3px; }
.site-nav a:hover { background: var(--paper); color: var(--ink); }
/* The four places, side by side: Today, Units, Review, Progress. */
/* The unit being looked at: its tabs and pages, under it. */
.nav-sub { list-style: none; margin: 0.15rem 0 0.4rem 1.5rem; padding: 0 0 0 0.6rem; border-left: 2px solid var(--rule); }
.nav-sub a { display: block; padding: 0.2rem 0.5rem; font-size: 0.85rem; }
.nav-sub .nav-sub-page a { padding-left: 1.2rem; font-size: 0.82rem; }
.site-nav .nav-sub a[aria-current="page"] { background: var(--paper); box-shadow: inset 3px 0 0 var(--signal); }
.site-nav a[aria-current="page"], .site-nav a[aria-current="location"] { color: var(--ink); font-weight: 600; background: var(--paper); box-shadow: inset 3px 0 0 var(--signal); }
/* The current unit's map (30 September 2026, from the right panel): one row per page, reading
   and step (content/_nav_item.html), each mark in one column: done (filled, ✓), started (half),
   open (empty ring), locked (dashed, a lock); the next one ringed in the accent. Practice and
   Drill sit under Concepts, their marks under its label. Every row is at least 2rem to tap. */
.nav-map { margin-left: 1.3rem; padding-left: 0.45rem; border-left: 0; }  /* the marks are its column */
.nav-item { display: grid; grid-template-columns: 1rem minmax(0, 1fr); column-gap: 0.4rem; align-items: start; }
.nav-mark { width: 1rem; height: 1rem; margin-top: 0.5rem; border: 1.5px solid var(--rule); border-radius: 50%; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.6rem; line-height: 1; color: var(--muted); }
.nav-mark svg { width: 0.6rem; height: 0.6rem; fill: none; stroke: currentColor; stroke-width: 1.4; }
.nav-item:not(.is-done):not(.is-started):not(.is-open):not(.is-locked) > .nav-mark { border-color: transparent; }
.is-done > .nav-mark { border-color: var(--ok); background: var(--ok); color: var(--surface); }
.is-started > .nav-mark { border-color: var(--ok); background: linear-gradient(90deg, var(--ok) 50%, transparent 50%); }
.is-locked > .nav-mark { border-style: dashed; }
.is-next > .nav-mark { border-color: var(--accent); border-width: 2px; }
.site-nav .nav-map .nav-item-body { display: block; min-height: 2rem; box-sizing: border-box; padding: 0.4rem 0.45rem; font-size: 0.85rem; line-height: 1.3; }
.nav-item-detail { display: block; font-size: 0.74rem; color: var(--muted); }
.is-locked .nav-item-label { color: var(--muted); }
.nav-now { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--mono); color: var(--accent); margin-left: 0.25rem; }
.nav-steps { grid-column: 2; list-style: none; margin: 0 0 0.1rem; padding: 0; }
.nav-signin { font-size: 0.8rem; color: var(--muted); padding: 0.45rem 0 0.2rem 1.4rem; }
.site-nav .nav-signin a { display: inline-block; padding: 0.3rem 0; text-decoration: underline; }
/* The current unit's own bars would repeat its map. */
.nav-section li.is-current > .unit-nav .meter { display: none; }
/* The one next thing in the unit, under a page's title (content/_continue.html). */
.page-next { margin: 0.6rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.75rem; }
.page-next .hint { font-size: 0.85rem; color: var(--muted); }
.nav-close { display: block; margin-bottom: 0.5rem; padding: 0.4rem 0.7rem; font-weight: 600; }
.nav-filter { margin: 0.25rem 0 0.25rem; }
.nav-filter input {
  width: 100%; font: inherit; font-size: 0.9rem; padding: 0.4rem 0.65rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 3px;
}
.nav-section { margin-top: 0.75rem; }
.nav-section summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.7rem; border-radius: 3px;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--mono); color: var(--muted);
}
.nav-section summary::-webkit-details-marker { display: none; }
.nav-section summary::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 2px; background: var(--section); flex: none; }
.nav-section summary:hover { background: var(--paper); }
.nav-section-name { flex: 1; }
.nav-count { font-family: var(--mono); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 0.78rem; color: var(--muted); }
/* ---------- a unit, the same everywhere (templates/units/_unit.html, learning.standing) ----------
   Its code, its name, and one bar in three parts: read, practiced, tested. The section's color
   is on the code and the bar, and nowhere else. */
.unit { display: grid; column-gap: 0.6rem; align-items: center; color: var(--ink); text-decoration: none; min-width: 0; }
a.unit:hover .unit-name { text-decoration: underline; text-underline-offset: 0.18em; }
.unit-code { font-family: var(--mono); font-size: 0.8rem; font-weight: 600; color: var(--section); white-space: nowrap; }
.unit-name { min-width: 0; }
.meter { display: flex; gap: 3px; }
.meter-part { flex: 1; height: 0.4rem; border-radius: 2px; background: var(--rule); overflow: hidden; }
.meter-fill { display: block; height: 100%; background: var(--section); }
.f-0 { width: 0%; }
.f-5 { width: 5%; }
.f-10 { width: 10%; }
.f-15 { width: 15%; }
.f-20 { width: 20%; }
.f-25 { width: 25%; }
.f-30 { width: 30%; }
.f-35 { width: 35%; }
.f-40 { width: 40%; }
.f-45 { width: 45%; }
.f-50 { width: 50%; }
.f-55 { width: 55%; }
.f-60 { width: 60%; }
.f-65 { width: 65%; }
.f-70 { width: 70%; }
.f-75 { width: 75%; }
.f-80 { width: 80%; }
.f-85 { width: 85%; }
.f-90 { width: 90%; }
.f-95 { width: 95%; }
.f-100 { width: 100%; }
.unit-line { color: var(--muted); font-size: 0.85rem; }
.unit-due { color: var(--ok); font-weight: 600; }
/* The left panel: one line each, the full name and standing on hover and for screen readers. */
.unit-nav { grid-template-columns: 3.1rem minmax(0, 1fr); grid-template-areas: "code name" ". meter"; row-gap: 0.2rem; padding: 0.3rem 0.7rem 0.35rem; font-size: 0.88rem; border-radius: 3px; }
.unit-nav .unit-code { grid-area: code; }
.unit-nav .unit-name { grid-area: name; }
.unit-nav .meter { grid-area: meter; gap: 2px; }
.unit-nav .unit-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.unit-nav .meter-part { height: 3px; }
.unit-nav.is-new .meter { opacity: 0.6; }
.unit-nav:hover { background: var(--paper); }
.unit-nav[aria-current] { background: var(--paper); box-shadow: inset 3px 0 0 var(--signal); }
.unit-nav[aria-current] .unit-name { color: var(--ink); font-weight: 600; }
/* A list row: code and name, then the bar and its words. */
.unit-row { grid-template-columns: 3.4rem minmax(0, 1fr) minmax(6rem, 10rem); grid-template-areas: "code name meter" ". line line"; row-gap: 0.15rem; padding: 0.65rem 0.9rem; }
.unit-row .unit-code { grid-area: code; }
.unit-row .unit-name { grid-area: name; font-weight: 600; }
.unit-row .meter { grid-area: meter; }
.unit-row .unit-line { grid-area: line; }
@media (max-width: 40rem) {
  .unit-row { grid-template-columns: 3.4rem minmax(0, 1fr); grid-template-areas: "code name" ". meter" ". line"; }
}
/* The unit's own page: a bigger bar, the words under it. */
.unit-hero { grid-template-columns: minmax(0, 40rem); row-gap: 0.35rem; margin: 0.5rem 0 0; }
.unit-hero .meter-part { height: 0.55rem; }
.unit-hero .unit-line { font-size: 0.95rem; color: var(--ink-2); }
/* The meter's three parts, named under them (the hero, and the Units page's legend). */
.meter-labels { display: flex; gap: 3px; font-size: 0.78rem; color: var(--muted); margin-top: -0.15rem; }
.meter-labels > span { flex: 1; }
.meter-legend { display: grid; row-gap: 0.3rem; max-width: 16rem; margin-top: 0.6rem; --section: var(--ink-2); }
.meter-legend .meter-part { height: 0.4rem; }
/* A unit's Overview: what to read, and what the test asks. */
.unit-head h1 .unit-code { font-size: 0.6em; vertical-align: 0.25em; margin-right: 0.3rem; }
.in-unit { display: grid; gap: 1rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); margin-top: 0.5rem; }
.in-unit h2 { font-size: 1.15rem; margin: 0 0 0.6rem; }
.unit-pages, .unit-kinds { list-style: none; margin: 0 0 1rem; padding: 0; }
.unit-pages > li { padding: 0.6rem 0; border-bottom: 1px solid var(--rule); }
.unit-page { font-weight: 600; text-decoration: none; color: var(--ink); }
.unit-page:hover { text-decoration: underline; }
.unit-page-kind { color: var(--section); margin-right: 0.3rem; }
.unit-page-state { display: block; color: var(--muted); font-size: 0.88rem; }
.unit-page-sections summary { cursor: pointer; color: var(--link); font-size: 0.88rem; margin-top: 0.2rem; }
.unit-page-sections ol { margin: 0.3rem 0 0; padding-left: 1.2rem; font-size: 0.9rem; }
.unit-page-sections li.read::after { content: " \2713"; color: var(--ok); }
.unit-kinds a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.unit-kinds a:hover .unit-kind-name { text-decoration: underline; }
.unit-kind-name { font-weight: 600; }
.unit-kind-state { color: var(--muted); font-size: 0.9rem; }
/* An exam's misses, by unit, folded. */
.missed-unit { margin: 0 0 0.75rem; }
.missed-unit > summary { cursor: pointer; font-weight: 600; padding: 0.55rem 0; border-bottom: 1px solid var(--rule); }
.missed-unit[open] > summary { margin-bottom: 0.75rem; }

/* Today's first steps: the note under them stands apart from the list. */
.steps-after { margin-top: 1rem; }

/* Progress: the record's detail, folded. */
.progress-page { display: grid; gap: 1.25rem; }
.progress-details > summary { cursor: pointer; font-weight: 600; }
.progress-details .details-body { display: grid; gap: 1.75rem; margin-top: 1rem; }
.progress-details h3 { font-size: 1.05rem; margin: 0 0 0.5rem; }

/* An unsaved mock exam's result says so. */
.unsaved-note { background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--signal); border-radius: 3px; padding: 0.7rem 1rem; margin: 0.75rem 0 0; }

/* Identity: the facts kept, the consent text. */
.identity-facts { display: grid; gap: 0.4rem; margin: 0 0 0.75rem; }
.identity-facts div { display: flex; gap: 1rem; }
.identity-facts dt { min-width: 8rem; color: var(--muted); }
.identity-facts dd { margin: 0; }
.consent-text { border: 1px solid var(--rule); border-radius: 3px; padding: 0.9rem 1.1rem; background: var(--paper); margin: 0 0 1rem; font-size: 0.95rem; }
.identity-page .error { color: var(--bad); }

/* A locked step, reached by its address; the error pages. */
.locked-step, .error-page { max-width: 44rem; }
main.error-page { margin: 0 auto; padding: 2rem 1.25rem; }
.locked-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* Progress: readiness, one row per section. */
.readiness-list { list-style: none; margin: 0; padding: 0; }
.readiness-list > li { display: grid; grid-template-columns: 8rem minmax(6rem, 1fr) auto auto; gap: 0.3rem 1rem; align-items: center; padding: 0.7rem 0; border-top: 1px solid var(--rule); }
.rd-name { font-weight: 600; }
.rd-count { color: var(--ink-2); font-size: 0.93rem; }
.rd-state { font-size: 0.9rem; color: var(--muted); }
.rd-state.is-ready { color: var(--ok); font-weight: 600; }
.rd-predict { grid-column: 1 / -1; }
.rd-predict summary { cursor: pointer; color: var(--link); font-size: 0.9rem; }
@media (max-width: 40rem) { .readiness-list > li { grid-template-columns: 1fr auto; } .readiness-list .sp-bar { grid-column: 1 / -1; } }

/* A weak element's text, beside its code (Review, Progress). */
.weak-list .weak-text { display: block; color: var(--ink-2); font-size: 0.88rem; font-weight: 400; margin-top: 0.1rem; }
.weak-list li { align-items: flex-start; }

/* A glossary term's other definitions, folded (they often repeat the first). */
.gl-more { margin: 0.4rem 0 0; }
.gl-more summary { cursor: pointer; color: var(--link); font-size: 0.9rem; }
.gl-more[open] summary { margin-bottom: 0.4rem; }

/* The mock FAA exams, on Progress and their result (diagnostic.exam). */
.exam-list { list-style: none; margin: 0; padding: 0; }
.exam-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name button" "last button"; gap: 0.15rem 1rem; align-items: center; padding: 0.7rem 0; border-top: 1px solid var(--rule); }
.exam-list .exam-name { grid-area: name; font-weight: 600; }
.exam-list .exam-last { grid-area: last; color: var(--muted); font-size: 0.9rem; }
.exam-list .button { grid-area: button; }
/* A phone: the exam's name and last result, then its button, one under the other. */
@media (max-width: 40rem) {
  .exam-list li { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "last" "button"; }
  .exam-list .button { justify-self: start; margin-top: 0.4rem; }
}
/* A phone: each test a small card (unit; date and score; result and answers), not five squeezed columns. */
@media (max-width: 40rem) {
  .stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .stack-table, .stack-table tbody { display: block; }
  .stack-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "unit unit" "date score" "result link"; gap: 0.2rem 1rem; padding: 0.7rem 0.9rem; border-top: 1px solid var(--rule); }
  .stack-table td { display: block; padding: 0; border: 0; }
  .stack-table td:nth-child(1) { grid-area: date; color: var(--muted); font-size: 0.88rem; }
  .stack-table td:nth-child(2) { grid-area: unit; font-weight: 600; }
  .stack-table td:nth-child(3) { grid-area: score; text-align: right; }
  .stack-table td:nth-child(4) { grid-area: result; }
  .stack-table td:nth-child(5) { grid-area: link; text-align: right; }
}
.exam-breakdown { list-style: none; margin: 0; padding: 0; columns: 2 18rem; column-gap: 2rem; }
.exam-breakdown li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; border-bottom: 1px solid var(--rule); break-inside: avoid; }
.exam-breakdown a { color: var(--ink); text-decoration: none; }
.exam-breakdown a:hover { text-decoration: underline; }
.exam-score { font-family: var(--mono); font-size: 0.9rem; white-space: nowrap; }
.exam-score.is-miss { color: var(--bad); }
.drill-clock { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.drill-clock.is-low { color: var(--bad); }

/* A unit's steps: Practice, Drill, Test (diagnostic.ladder). */
.button.is-disabled { background: var(--rule); color: var(--muted); border-color: var(--rule); cursor: not-allowed; }
.steps-extra { align-items: center; color: var(--ink-2); font-size: 0.93rem; }

/* A unit's Practice: its elements by kind. */
.element-kind { font-family: var(--sans); font-size: 1rem; margin: 1.25rem 0 0.4rem; }
.element-kind .count { color: var(--muted); font-weight: 400; margin-left: 0.3rem; }
.element-list { list-style: none; margin: 0; padding: 0; }
.element-list li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto auto; gap: 0.3rem 0.9rem; align-items: baseline; padding: 0.45rem 0; border-bottom: 1px solid var(--rule); }
.element-code { font-weight: 600; }
.element-state { color: var(--muted); font-size: 0.88rem; white-space: nowrap; }
@media (max-width: 40rem) { .element-list li { grid-template-columns: 3rem minmax(0, 1fr); } .element-state, .element-drill { grid-column: 2; } .element-state { white-space: normal; } }
.filters ul { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filters a { display: inline-block; padding: 0.3rem 0.8rem; border: 1px solid var(--rule-strong); border-radius: 2px; color: var(--ink-2); text-decoration: none; font-size: 0.93rem; }
.filters a:hover { background: var(--surface); }
.filters a[aria-current="page"] { background: var(--button); border-color: var(--button); color: var(--on-button); }
.filter-count { font-family: var(--mono); font-size: 0.8rem; margin-left: 0.2rem; opacity: 0.8; }
.unit-section { margin: 0 0 2rem; }
.unit-section h2 { margin: 0 0 0.6rem; font-size: 1.3rem; }
.unit-section h2 .count { font-family: var(--sans); font-size: 0.9rem; font-weight: 400; color: var(--muted); margin-left: 0.4rem; }
.unit-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.unit-list > li + li { border-top: 1px solid var(--rule); }
.unit-list .unit-row:hover { background: var(--paper); }
.nav-section li[hidden] { display: none; }
.nav-empty { margin: 0.5rem 0.7rem; color: var(--muted); font-size: 0.88rem; }

/* The drawer: a narrow screen, and the drill and test screens at any width. */
@media (max-width: 63.99rem) {
  .site-nav {
    position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(20rem, 86vw); overflow-y: auto;
    transform: translateX(-105%); visibility: hidden; transition: transform 160ms ease-out, visibility 0s 160ms;
  }
  .site-nav:target, .site-nav.open { transform: none; visibility: visible; transition: transform 160ms ease-out; box-shadow: 0 0 0 100vmax rgb(10 15 19 / 55%); }
}
.drill-page .site-nav {
  position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(20rem, 86vw); overflow-y: auto;
  transform: translateX(-105%); visibility: hidden; transition: transform 160ms ease-out, visibility 0s 160ms;
}
.drill-page .site-nav:target, .drill-page .site-nav.open { transform: none; visibility: visible; transition: transform 160ms ease-out; box-shadow: 0 0 0 100vmax rgb(10 15 19 / 55%); }
@media (prefers-reduced-motion: reduce) { .site-nav, .site-nav:target, .site-nav.open { transition: none; } }

/* The right panel. Above the page until there is room beside it. */
.context { min-width: 0; display: grid; gap: 1rem; align-content: start; font-size: 0.93rem; }
@media (max-width: 79.99rem) {
  .context { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); align-items: start; margin-bottom: 2rem; }
  .ctx-block { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.25rem 1rem; }
  .ctx-practice { padding-block: 0.85rem; }
}
.ctx-title { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--mono); color: var(--muted); margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.ctx-title .badge { letter-spacing: 0; }
.ctx-practice { border-top: 3px solid var(--section, var(--accent)); }
@media (min-width: 80rem) {
  .ctx-practice { background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--section, var(--accent)); border-radius: var(--radius); padding: 0.85rem 1rem; }
}
.ctx-practice .hint { margin: 0.4rem 0 0.7rem; font-size: 0.88rem; }
.ctx-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin: 0; }
.ctx-actions .button { display: flex; align-items: center; justify-content: center; text-align: center; padding: 0.4rem 0.5rem; font-size: 0.88rem; line-height: 1.25; }
.ctx-actions .button:first-child { grid-column: 1 / -1; }
.ctx-terms ul { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; }


/* ---------- account pages: profile, progress ---------- */
.account-page { max-width: 52rem; }
.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem 1.5rem; margin: 0 0 1.25rem; }
.panel h2 { margin: 0 0 0.75rem; font-size: 1.25rem; }
.panel > p:last-child { margin-bottom: 0; }
.hint { color: var(--muted); font-size: 0.9rem; }
.facts { margin: 0; display: grid; gap: 0; }
.facts > div { display: grid; grid-template-columns: 10rem 1fr; gap: 0.25rem 1rem; padding: 0.6rem 0; border-top: 1px solid var(--rule); }
.facts > div:first-child { border-top: 0; padding-top: 0; }
.facts dt { color: var(--muted); font-size: 0.93rem; }
.facts dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.9rem; }
.fact-value { font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 36rem) { .facts > div { grid-template-columns: 1fr; } }
.manage-card .facts { margin: 0 0 1.25rem; }
.manage-card label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.manage-card form + .hint { margin: 1rem 0 0; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; }
.inline-actions button { width: auto; }
.prefs fieldset { border: 0; margin: 0 0 0.75rem; padding: 0; }
.prefs legend { font-weight: 600; margin-bottom: 0.35rem; }
.prefs label { display: block; margin: 0.25rem 0; cursor: pointer; }
.prefs input { accent-color: var(--button); margin-right: 0.35rem; }
.prefs .hint { margin-left: 0.25rem; }
.prefs .choices label { display: inline-block; margin: 0.25rem 1.25rem 0.25rem 0; }
.tiles { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.tiles li { background: var(--surface); padding: 0.85rem 1rem; color: var(--muted); font-size: 0.88rem; }
.tiles strong { display: block; font-family: var(--mono); font-weight: 500; font-size: 1.7rem; color: var(--ink); line-height: 1.15; }
.tiles .of { font-size: 1rem; color: var(--muted); font-weight: 500; }
.section-progress { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.6rem; }
.section-progress li { display: grid; grid-template-columns: 7rem minmax(6rem, 1fr) auto; gap: 0.25rem 1rem; align-items: center; }
.sp-name { font-weight: 600; }
.sp-bar { width: 100%; height: 0.6rem; appearance: none; border: 0; border-radius: 2px; background: var(--rule); overflow: hidden; accent-color: var(--section); }
.sp-bar::-webkit-progress-bar { background: var(--rule); border-radius: 2px; }
.sp-bar::-webkit-progress-value { background: var(--section); border-radius: 2px; }
.sp-bar::-moz-progress-bar { background: var(--section); border-radius: 2px; }
.sp-count { font-size: 0.93rem; }
.sp-ready { grid-column: 2 / -1; font-size: 0.88rem; color: var(--muted); }
@media (max-width: 36rem) { .section-progress li { grid-template-columns: 1fr auto; } .sp-bar { grid-column: 1 / -1; } .sp-ready { grid-column: 1 / -1; } }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.9rem; }
.site-footer > div {
  max-width: 76rem; margin: 0 auto; padding: 1.5rem 1.25rem 2rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem;
}
.site-footer p { margin: 0; }
.site-footer a { color: var(--muted); }

/* ---------- shared pieces ---------- */
.eyebrow {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--mono);
  color: var(--accent); margin: 0 0 0.5rem;
}
.lede { font-size: 1.15rem; color: var(--ink-2); max-width: 44rem; }
.badge {
  display: inline-block; font-family: var(--mono); font-weight: 500; font-size: 0.8rem;
  letter-spacing: 0.02em; padding: 0.1rem 0.5rem; border-radius: 3px;
  /* Outside a section the badge is navy with white text in both schemes. */
  background: var(--section, var(--navy-2)); color: var(--section-ink, #ffffff);
}
.section-gen { --section: var(--gen); --section-ink: var(--on-section); }
.section-af { --section: var(--af); --section-ink: var(--on-section); }
.section-pp { --section: var(--pp); --section-ink: var(--on-section); }
.pill {
  display: inline-block; font-size: 0.78rem; font-weight: 600; padding: 0.05rem 0.55rem;
  border-radius: 2px; border: 1px solid var(--rule-strong); color: var(--muted);
}
.provenance { margin-top: 3rem; color: var(--muted); font-size: 0.88rem; }
.messages {
  border-left: 4px solid var(--signal); background: var(--accent-soft); color: var(--ink);
  padding: 0.75rem 1rem; border-radius: 3px; margin: 0 0 1.5rem;
}
.messages ul { margin: 0; padding: 0; list-style: none; }

.page-head { margin-bottom: 2rem; }

.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 0 0 1.25rem; padding: 0; font-size: 0.92rem; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; color: var(--rule-strong); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--link); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--ink); }

/* ---------- unit index ---------- */
.hero { padding: 1rem 0 1.5rem; border-bottom: 1px solid var(--rule); margin-bottom: 2rem; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: 1.25rem 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 0.95rem; }
.hero-stats strong { color: var(--ink); font-size: 1.25rem; font-family: var(--mono); font-weight: 500; }
.section-block { margin: 0 0 3rem; }
.section-block > h2 {
  display: flex; align-items: baseline; gap: 0.75rem; margin: 0 0 1rem;
  padding-bottom: 0.5rem; border-bottom: 3px solid var(--section);
}
.section-block > h2 .count { font-family: var(--sans); font-size: 0.9rem; font-weight: 400; color: var(--muted); }
.unit-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.unit-card {
  position: relative; height: 100%; display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1rem 1.1rem 1.1rem; box-shadow: var(--shadow);
  border-top: 4px solid var(--section);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.unit-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgb(16 24 31 / 8%), 0 10px 28px rgb(16 24 31 / 12%); }
@media (prefers-reduced-motion: reduce) { .unit-card, .unit-card:hover { transition: none; transform: none; } }
.unit-card .badge { align-self: flex-start; }
.unit-card h3 { margin: 0; font-size: 1.1rem; line-height: 1.3; }
.unit-card h3 a { color: var(--ink); text-decoration: none; }
/* The whole card is the link's click area; the link text stays the unit name. */
.unit-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.unit-card h3 a:focus-visible { outline: none; }
.unit-card:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.unit-card .meta { margin: auto 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 0.8rem; }
/* The page links sit above the card-wide unit link, so each opens its own page. */
.unit-card .meta a {
  position: relative; z-index: 1; display: block; background: var(--paper); color: var(--ink-2);
  border-radius: 4px; padding: 0.05rem 0.45rem; text-decoration: none;
}
.unit-card .meta a:hover { background: var(--code-bg); color: var(--link); text-decoration: underline; }
.unit-card .standing { margin: 0; font-size: 0.82rem; color: var(--muted); }
.unit-card .standing.is-mastered { color: var(--ok); font-weight: 600; }

/* ---------- unit page ---------- */
.unit-head h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }
.unit-head h1 .badge { font-size: 1rem; padding: 0.2rem 0.6rem; }
/* A unit's hub (content/hub.py): its standing in one line, its tabs, and the Overview's cards. */
.unit-head { margin-bottom: 1rem; }
.state-mastered { color: var(--ok); }
.unit-tabs { margin: 0 0 2rem; }
/* A phone, any text size: the four tabs on one row, evenly. */
@media (max-width: 40rem) {
  .unit-tabs .tabs { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; }
  .unit-tabs .tabs a { text-align: center; padding-inline: 0.5rem; font-size: 0.9rem; }
}
.hub-actions { border-left: 4px solid var(--section, var(--accent)); }
.hub-actions h2 { margin-top: 0; }
.recent-list { margin: 0; padding-left: 1.2rem; }

/* ---------- reading page ---------- */
/* The header: the unit it belongs to, the page's title, then the unit's pages as tabs. */
.page-head { margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule); }
.page-unit { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; margin-bottom: 0.6rem; font-size: 0.92rem; }
.page-unit a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted); text-decoration: none; }
.page-unit a:hover { color: var(--link); text-decoration: underline; }
.page-head h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); max-width: 34ch; margin: 0 0 1.1rem; }
/* A phone: the tabs on one row, evenly, and sideways rather than onto a second row. */
@media (max-width: 40rem) {
  .page-head .page-tabs { display: grid; grid-auto-flow: column; justify-content: space-between; width: 100%; overflow-x: auto; }
  .page-head .page-tabs a { text-align: center; padding-inline: 0.55rem; font-size: 0.9rem; white-space: nowrap; }
}
.tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0.25rem; list-style: none;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; width: fit-content; max-width: 100%; }
.tabs a { display: block; padding: 0.35rem 0.9rem; border-radius: 3px; color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.tabs a:hover { background: var(--paper); color: var(--ink); }
.tabs a[aria-current="page"] { background: var(--button); color: var(--on-button); }

.reading { min-width: 0; }
.toc { font-size: 0.92rem; }
.toc summary, .ctx-terms summary { cursor: pointer; list-style: none; padding: 0.6rem 0; display: flex; align-items: center; gap: 0.5rem; }
.toc summary::-webkit-details-marker, .ctx-terms summary::-webkit-details-marker { display: none; }
.toc summary::after, .ctx-terms summary::after { content: "▾"; color: var(--muted); font-size: 0.8rem; transition: transform 120ms; }
.toc details:not([open]) summary::after, .ctx-terms details:not([open]) summary::after { transform: rotate(-90deg); }
@media (min-width: 80rem) { .toc summary { pointer-events: none; padding-top: 0; } .toc summary::after { content: none; } }
.toc ol { margin-top: 0.5rem; }
.prose math { font-size: 1.1em; font-family: "STIX Two Math", "Cambria Math", "Latin Modern Math", math; }
.math-block { overflow-x: auto; margin: 1.25rem 0; padding: 0.75rem 1rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; }
.toc ol { list-style: none; margin: 0 0 0.75rem; padding: 0; border-left: 2px solid var(--rule); }
.toc li a {
  display: grid; grid-template-columns: 3.9rem 1fr; gap: 0.25rem; align-items: baseline;
  padding: 0.3rem 0.5rem 0.3rem 0.75rem; margin-left: -2px; border-left: 2px solid transparent;
  color: var(--ink-2); text-decoration: none; line-height: 1.35;
}
.toc li a:hover { color: var(--ink); border-left-color: var(--rule-strong); }
.toc li a[aria-current="location"] { color: var(--ink); font-weight: 600; border-left-color: var(--signal); }
/* A section read: a tick after its number (static/js/reading.js adds them as the reader goes). */
.toc li.read .num::after { content: " ✓"; color: var(--ok); font-family: var(--sans); }
.pill-read { color: var(--ok); font-weight: 600; }
.toc .num { font-family: var(--mono); font-size: 0.8rem; color: var(--accent); white-space: nowrap; }

.prose { max-width: 44rem; overflow-wrap: break-word; font-size: 1.0625rem; }
.prose > h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); margin-bottom: 1.25rem; }
.prose > h1 + p { font-size: 1.15rem; color: var(--ink-2); }
.prose h2 { font-size: 1.55rem; margin-top: 2.75rem; padding-top: 0.25rem; scroll-margin-top: 1.25rem; }
.prose h3 { scroll-margin-top: 1.25rem; }
.prose p, .prose li { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.4rem; margin: 0 0 1rem; }
.prose li { margin: 0.35rem 0; }
.prose li::marker { color: var(--rule-strong); }
.prose hr { border: 0; height: 1px; background: var(--rule); margin: 2.5rem 0; }
.prose blockquote {
  margin: 1.5rem 0; padding: 0.75rem 1.1rem; border-left: 4px solid var(--signal);
  background: var(--accent-soft); border-radius: 0 4px 4px 0; color: var(--ink);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code {
  background: var(--code-bg); color: var(--code-ink); border-radius: 4px;
  padding: 0.08em 0.38em; font-weight: 500; white-space: nowrap;
}
.prose a code { color: inherit; }
.prose a { font-weight: 500; }
.prose pre { background: var(--code-bg); padding: 1rem; border-radius: 4px; overflow-x: auto; }
.prose pre code { white-space: pre; padding: 0; }
/* Positioned, so a visually hidden label in a cell stays inside the scroll box, not the page. */
.table-wrap { position: relative; overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); }
.prose table, .table-wrap table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.table-wrap th, .table-wrap td { padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.table-wrap thead th { background: var(--th-bg); font-weight: 600; font-size: 0.88rem; }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
/* A markdown table whose header row is blank: no empty bar above it. */
.table-wrap thead:not(:has(th:not(:empty))) { display: none; }
.table-wrap caption { text-align: left; padding: 0.75rem 0.8rem 0.25rem; font-weight: 600; }
/* The license section closes every page: set apart, smaller. */
.prose h2#license, .prose h2#licence { font-size: 1.1rem; font-family: var(--sans); margin-top: 3.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); color: var(--muted); }
.prose h2#license ~ *, .prose h2#licence ~ * { color: var(--muted); font-size: 0.95rem; }

.pager { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 3rem 0 0; padding: 0; list-style: none; max-width: 44rem; }
.pager a {
  display: block; height: 100%; padding: 0.9rem 1.1rem; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); text-decoration: none; color: var(--ink);
}
.pager a:hover { border-color: var(--rule-strong); }
.pager .dir { display: block; font-size: 0.8rem; color: var(--muted); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--mono); }
.pager .next { text-align: right; }
.pager .title { font-weight: 600; color: var(--link); }

.page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; color: var(--muted); font-size: 0.9rem; margin-top: 0.75rem; }

/* ---------- sign-in and account pages ---------- */
.entrance { max-width: 30rem; margin: 2rem auto; }
.entrance-card, .manage-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; box-shadow: var(--shadow);
  padding: 2rem 1.75rem;
}
@media (max-width: 30rem) { .entrance-card, .manage-card { padding: 1.5rem 1.1rem; } }
.entrance h1, .manage-card h1 { font-size: 1.9rem; }
.manage { max-width: 44rem; margin: 1rem auto; }
.entrance form p, .manage-card form p { margin: 0 0 1rem; }
.entrance label, .manage-card label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
input[type=email], input[type=text], input[type=search] {
  font: inherit; width: 100%; padding: 0.6rem 0.75rem; border-radius: 4px;
  border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink);
}
input[type=email]:focus, input[type=text]:focus { border-color: var(--link); }
input::placeholder { color: var(--muted); opacity: 1; }
.helptext, .entrance form span { color: var(--muted); font-size: 0.9rem; }
.errorlist { color: var(--bad); list-style: none; padding: 0; margin: 0 0 0.5rem; font-weight: 600; }
button, input[type=submit], .button {
  font: inherit; font-weight: 600; cursor: pointer; display: inline-block; text-decoration: none;
  padding: 0.6rem 1.2rem; border-radius: 4px; border: 1px solid var(--button);
  background: var(--button); color: var(--on-button);
}
button:hover, .button:hover { filter: brightness(1.12); }
.entrance form button, .manage-card form button[type=submit] { width: 100%; }
.button-secondary, .passkey-login button, .entrance button[form="logout-from-stage"], .entrance button[form="resend"] {
  background: transparent; color: var(--ink); border-color: var(--rule-strong);
}
.or { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); font-size: 0.85rem; text-transform: uppercase; font-family: var(--mono); letter-spacing: 0.08em; margin: 1.5rem 0 1rem; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.passkey-login h2 { font-family: var(--sans); font-size: 1rem; margin: 0 0 0.25rem; }
.passkey-login p { color: var(--muted); font-size: 0.93rem; }
.passkey-login button { width: 100%; }
.entrance-foot { margin: 1.5rem 0 0; text-align: center; color: var(--muted); font-size: 0.95rem; }

/* ---------- diagnostic ---------- */
.readiness { margin: -0.25rem 0 1rem; color: var(--muted); }
.readiness.is-ready { color: var(--ok); font-weight: 600; }
.prediction { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 0 0 1rem; }
.prediction h3 { font-size: 1.05rem; margin: 0 0 0.5rem; }
.prediction-scores { display: grid; gap: 0.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin: 0 0 0.5rem; }
.prediction-scores dt { font-weight: 600; }
.prediction-scores dd { margin: 0; }
.prediction-scores strong { font-family: var(--mono); font-weight: 500; font-size: 1.4rem; }
.prediction-note { color: var(--muted); font-size: 0.9rem; font-weight: 400; }
.module-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.module-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem;
  background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--section);
  border-radius: var(--radius); padding: 0.9rem 1.1rem; box-shadow: var(--shadow);
}
.module-main { flex: 1 1 22rem; min-width: 0; }
.module-name { margin: 0 0 0.2rem; font-weight: 600; font-size: 1.05rem; }
.module-name .badge { margin-right: 0.35rem; }
.module-status, .module-advice { margin: 0; color: var(--muted); font-size: 0.93rem; }
.module-action { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: flex-end; }
.module-action form { margin: 0; flex-basis: 100%; text-align: right; }
.module-action a.module-alt { flex-basis: 100%; text-align: right; }
.module-alt, button.link-button.module-alt {
  font-size: 0.85rem; font-weight: 400; color: var(--link); background: none; border: 0; padding: 0;
  text-decoration: underline; filter: none;
}
.state { color: var(--ink); }
.state-mastered { color: var(--ok); }
.state-lapsed { color: var(--bad); }
.state-progress { color: var(--accent); }

.error-summary {
  border: 2px solid var(--bad); background: var(--bad-soft); border-radius: var(--radius);
  padding: 1rem 1.25rem; margin: 0 0 2rem;
}
.error-summary h2 { margin-top: 0; font-size: 1.2rem; }
.error-summary a { color: var(--bad); font-weight: 600; }
.attempt-form { max-width: 48rem; }
.question {
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface);
  padding: 1.25rem 1.25rem 1rem; margin: 0 0 1.25rem; box-shadow: var(--shadow); min-width: 0;
}
.question.is-unanswered { border: 2px solid var(--bad); }
.question legend { float: left; width: 100%; padding: 0; margin-bottom: 1rem; font-size: 1.08rem; font-weight: 500; line-height: 1.5; }
.question legend + * { clear: left; }
.qnum { display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--mono); color: var(--accent); margin-bottom: 0.25rem; }
.options { clear: left; display: grid; gap: 0.5rem; }
.option { position: relative; }
.option input { position: absolute; left: 0.9rem; top: 1.05rem; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--button); }
.option label {
  display: block; padding: 0.75rem 1rem 0.75rem 2.75rem; border: 1px solid var(--rule-strong); border-radius: 4px;
  cursor: pointer; background: var(--surface);
}
.option label:hover { border-color: var(--link); }
.option input:checked + label { border: 2px solid var(--button); padding: calc(0.75rem - 1px) calc(1rem - 1px) calc(0.75rem - 1px) calc(2.75rem - 1px); font-weight: 600; }
.option input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.attempt-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 0; }
.button-secondary { background: transparent; color: var(--ink); border-color: var(--rule-strong); }

.stimulus { clear: left; border-left: 4px solid var(--rule-strong); background: var(--paper); padding: 0.75rem 1rem; margin: 0 0 1rem; border-radius: 0 4px 4px 0; }
.stimulus-title { font-weight: 600; margin: 0 0 0.25rem; }
.stimulus-banner { font-family: var(--mono); font-size: 0.8rem; font-weight: 500; color: var(--accent); margin: 0 0 0.5rem; }
.stimulus-body { font-family: var(--mono); font-size: 0.88rem; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0.5rem 0; }
.stimulus-provenance { color: var(--muted); font-size: 0.85rem; margin: 0; }
.question-figure { clear: left; margin: 0 0 1rem; }
.question-figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 3px; background: #fff; }
.question-figure figcaption { font-size: 0.88rem; margin-top: 0.35rem; }

.verdict { border-radius: var(--radius); padding: 0.9rem 1.2rem; margin: 1rem 0; border: 1px solid var(--rule); }
.verdict p { margin: 0; }
.verdict.is-pass { background: var(--ok-soft); border-color: var(--ok); }
.verdict.is-fail { background: var(--bad-soft); border-color: var(--bad); }
.review { list-style: none; padding: 0; margin: 2rem 0 0; max-width: 48rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.review-item { min-width: 0; overflow-wrap: anywhere; background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--ok); border-radius: var(--radius); padding: 1rem 1.25rem; }
.review-item.is-wrong { border-left-color: var(--bad); }
.review-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0 0 0.5rem; font-family: var(--sans); font-size: 1rem; }
.review-head .mark { font-size: 0.9rem; }
.review-item.is-correct .mark { color: var(--ok); }
.review-item.is-wrong .mark { color: var(--bad); }
.review-stem { font-weight: 500; }
.review-options { padding-left: 1.6rem; list-style: upper-alpha; }
.review-options li { margin: 0.25rem 0; }
.review-options .is-key { font-weight: 600; }
.review-options .tag { display: inline-block; margin-left: 0.4rem; font-size: 0.75rem; font-weight: 600; padding: 0 0.45rem; border-radius: 2px; border: 1px solid var(--rule-strong); color: var(--muted); }
.review-options .is-key .tag { color: var(--ok); border-color: var(--ok); }
.review-item.is-wrong .is-chosen:not(.is-key) { color: var(--bad); }
.review-item.is-wrong .is-chosen:not(.is-key) .tag { color: var(--bad); border-color: var(--bad); }
.rationale { border-top: 1px solid var(--rule); padding-top: 0.75rem; margin-top: 0.75rem; font-size: 0.97rem; }
.rationale p { margin: 0 0 0.4rem; }

/* ---------- print: the curriculum must be printable ---------- */
@media print {
  :root { --paper: #fff; --surface: #fff; --ink: #000; --ink-2: #222; --muted: #444; --link: #000; --code-bg: #f1f1f1; --code-ink: #000; }
  .site-header, .site-footer, .toc, .tabs, .breadcrumb, .pager, .skip-link { display: none !important; }
  main { padding: 0; max-width: none; }
  .reading { display: block; }
  .prose { max-width: none; font-size: 11pt; }
  .prose a { text-decoration: none; }
  .prose h2 { break-after: avoid; }
  .table-wrap { overflow: visible; border: 0; }
  .unit-card { box-shadow: none; break-inside: avoid; }
}

/* ---------- UX review, 24 September 2026 ---------- */
/* Jump between sections on the long Drill and Test lists. */
.jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2rem; }
.jump a {
  display: inline-flex; gap: 0.45rem; align-items: baseline; padding: 0.35rem 0.85rem; border-radius: 2px;
  border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink); text-decoration: none;
  font-weight: 600; font-size: 0.95rem; box-shadow: inset 0 -3px 0 var(--section);
}
.jump a span { font-weight: 400; color: var(--muted); font-size: 0.85rem; }
.jump a:hover { border-color: var(--section); }
/* Tests in progress, pinned above everything. */
/* The review queue on the Drill page, and its count in the nav. */
.due-today { background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--ok); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 0 0 2rem; }
.due-today h2 { margin: 0 0 0.35rem; font-size: 1.15rem; }
.due-today ul { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.due-today li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; font-weight: 600; }
.due-today .badge { background: var(--section); }
.due-today .button { padding: 0.35rem 1rem; }
.nav-badge {
  display: inline-block; min-width: 1.5rem; margin-left: 0.35rem; padding: 0 0.4rem; border-radius: 2px;
  background: var(--ok); color: var(--surface); font-size: 0.75rem; font-weight: 700; text-align: center; line-height: 1.35rem;
}

/* The study plan (learning/plan.html). */
.plan-status { border-left: 4px solid var(--link); }
.plan-on-track, .plan-done { border-left-color: var(--ok); }
.plan-behind, .plan-past { border-left-color: var(--signal); }
.plan-numbers { font-size: 1.05rem; }
.plan-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.plan-next a { font-weight: 600; text-decoration: none; }
.plan-next .badge { background: var(--section); }
.plan-next .hint { margin-left: 0.5rem; }
.field-label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.prefs input[type="date"] {
  font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: 3px; padding: 0.35rem 0.6rem;
}
.error-text { color: var(--bad); font-weight: 600; }
.home-plan { margin: 0 0 2rem; }
.home-plan p { margin: 0; }

/* Today (home): a few lines under the next step, and the units under way. */
.today-lines { list-style: none; margin: -0.75rem 0 2rem; padding: 0; display: grid; gap: 0.35rem; color: var(--ink-2); }
.today-lines:empty { display: none; }
.section-label { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--mono); color: var(--muted); margin: 0 0 0.6rem; }
.under-way { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.under-way a {
  display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.6rem; align-items: baseline; padding: 0.8rem 1rem;
  background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--section); border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
}
.under-way a:hover { box-shadow: var(--shadow); }
.under-way .badge { background: var(--section); }
.uw-name { font-weight: 600; }
.uw-state { grid-column: 2; font-size: 0.85rem; color: var(--muted); }

/* Home's one next step (learning.reading.pick_up). */
.continue { background: var(--accent-soft); border: 1px solid var(--rule); border-left: 4px solid var(--signal);
  border-radius: var(--radius); padding: 1rem 1.25rem; margin: 0 0 1.5rem; }
.continue h2 { margin: 0 0 0.6rem; font-size: 1.15rem; }
.continue ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.continue li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; font-weight: 600; }
.continue .badge { background: var(--section); }
.continue-count { font-weight: 400; color: var(--muted); font-size: 0.93rem; margin-right: auto; }
.continue .button { padding: 0.4rem 1rem; }
/* Practice a unit's subject, on its unit page and after every reading page. */
.practice {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem;
  background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--section);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.25rem; margin: 0 0 2rem; max-width: 44rem;
}
.prose + .practice { margin-top: 2.5rem; }
@media (min-width: 80rem) { .with-context .page-body .practice { display: none; } }
.practice-title { margin: 0; font-weight: 600; font-size: 1.05rem; }
.practice-title .badge { margin-left: 0.35rem; vertical-align: 0.1em; }
.practice .hint { margin: 0.15rem 0 0; }
.practice-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* The check at the end of a reading section (learning/_check.html, static/js/check.js). */
.prose .check {
  margin: 2rem 0 0.5rem; padding: 1rem 1.2rem; background: var(--surface); border: 1px solid var(--rule);
  border-left: 4px solid var(--section, var(--accent)); border-radius: var(--radius); font-size: 0.97rem;
}
.prose .check p { margin: 0 0 0.6rem; }
.check-title { font-weight: 600; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--mono); color: var(--muted); }
.check-what code { font-size: 0.85em; }
.prose .check .check-actions { margin: 0; }
.check-count { font-size: 0.85rem; color: var(--muted); }
.prose .check .check-stem { font-weight: 600; font-size: 1.02rem; margin-bottom: 0.7rem; }
.check-options { display: grid; gap: 0.4rem; margin-bottom: 0.7rem; }
.check-opt {
  display: flex; gap: 0.7rem; align-items: baseline; text-align: left; width: 100%;
  font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--rule-strong);
  border-radius: 4px; padding: 0.5rem 0.8rem; cursor: pointer; filter: none;
}
.check-opt:hover:not(:disabled) { border-color: var(--link); }
.check-opt:disabled { cursor: default; opacity: 1; }
.check-letter { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); flex: none; }
.check-opt.right { border: 2px solid var(--ok); background: var(--ok-soft); }
.check-opt.wrong { border: 2px solid var(--bad); background: var(--bad-soft); }
.check-opt.right .check-letter::after { content: " ✓"; color: var(--ok); }
.check-opt.wrong .check-letter::after { content: " ✗"; color: var(--bad); }
.check-feedback { border-top: 1px solid var(--rule); padding-top: 0.7rem; }
.prose .check .check-verdict { font-weight: 600; }
.is-right .check-verdict { color: var(--ok); }
.is-wrong .check-verdict { color: var(--bad); }
.check-ref { font-size: 0.88rem; color: var(--muted); }
.check-figure img { max-width: 100%; height: auto; background: #fff; border-radius: 3px; }
.check-error { color: var(--bad); }
.check-next .button { font-size: 0.93rem; }
/* An element code in the reading, linked to a drill on it. */
.prose a.el-link { text-decoration: none; }
.prose a.el-link code { box-shadow: inset 0 -2px 0 var(--signal); }
.prose a.el-link:hover code { background: var(--link); color: var(--surface); }
/* Results: the misses first, the rest folded away. */
.review-title { margin: 2rem 0 0.75rem; font-size: 1.3rem; }
.review-rest { margin: 2rem 0 0; max-width: 48rem; }
.review-rest summary { cursor: pointer; font-weight: 600; color: var(--link); padding: 0.5rem 0; }
.review-rest .review { margin-top: 0.75rem; }
.review-head { font-size: 1rem; }
.review-item .question-figure img { max-height: 22rem; width: auto; }
.actions-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* Progress in two columns on a wide screen. */
.account-page.wide { max-width: 76rem; }
.account-page.wide .page-head, .account-page.wide .tiles { max-width: 52rem; }
@media (min-width: 64rem) {
  .progress-grid { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.25rem; align-items: start; }
}
.weak-list, .accuracy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.weak-list li { display: flex; align-items: baseline; gap: 0.5rem; }
.weak-list a { text-decoration: none; margin-right: auto; }
.weak-list .el-code { font-family: var(--mono); font-weight: 500; color: var(--link); text-decoration: underline; }
.weak-pct { font-family: var(--mono); font-weight: 500; color: var(--bad); }
.accuracy-list li { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: 0.75rem; align-items: center; font-size: 0.93rem; }
.accuracy-list .badge { background: var(--section); justify-self: start; }
/* The front door, signed out. */
.landing { max-width: 60rem; }
.landing-hero { padding: 1.5rem 0 2rem; border-bottom: 1px solid var(--rule); margin-bottom: 2rem; }
.landing-hero h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); max-width: 22ch; }
.landing-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 0.5rem; }
.landing-actions .button { font-size: 1.05rem; padding: 0.7rem 1.4rem; }
.landing-parts { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.landing-parts li { background: var(--surface); border: 1px solid var(--rule); border-top: 4px solid var(--navy-2); border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow); }
.landing-parts li:nth-child(2) { border-top-color: var(--af); }
.landing-parts li:nth-child(3) { border-top-color: var(--signal); }
.landing-parts h2 { margin: 0 0 0.4rem; font-size: 1.3rem; }
.landing-parts p { margin: 0; color: var(--ink-2); }
.landing-how { max-width: 44rem; margin: 0 0 2rem; }
.landing-how h2 { font-size: 1.3rem; margin: 0 0 0.75rem; }
.landing-how ol { padding-left: 1.25rem; margin: 0; display: grid; gap: 0.5rem; }
/* The front door, signed in: what to do next. */
.home { max-width: 60rem; }
.card-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.start-here .steps { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.quick-links { margin: 0.5rem 0 0; }
/* The long subject lists on a phone: name and status above, the buttons in one row below. */
@media (max-width: 40rem) {
  .module-row { padding: 0.75rem 0.9rem; gap: 0.5rem; }
  .module-main { flex-basis: 100%; }
  .module-action { justify-content: flex-start; width: 100%; }
  .module-action .button { padding: 0.45rem 0.9rem; font-size: 0.95rem; }
  .section-block { margin-bottom: 2rem; }
  .section-block .readiness { font-size: 0.93rem; }
}

/* ---------- glossary (content/glossary.py) ---------- */
/* A term on a reading page: a quiet dotted underline, never mistaken for an ordinary link. */
.prose a.gl-term { color: inherit; font-weight: inherit; text-decoration: underline dotted var(--rule-strong); text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; cursor: help; }
.prose a.gl-term:hover, .prose a.gl-term[aria-expanded="true"] { text-decoration-color: var(--link); color: var(--link); }
.ctx-hint { margin: 0 0 0.5rem; font-size: 0.82rem; color: var(--muted); }
.gl-pop {
  position: absolute; z-index: 60; width: min(28rem, calc(100vw - 16px)); max-height: 60vh; overflow-y: auto;
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-top: 3px solid var(--signal);
  border-radius: var(--radius); padding: 0.9rem 1.1rem 0.6rem; box-shadow: 0 2px 4px rgb(16 24 31 / 10%), 0 14px 36px rgb(16 24 31 / 22%);
  font-size: 0.95rem; line-height: 1.5;
}
.gl-pop:focus { outline: none; }
@media (max-width: 39.99rem) {
  .gl-pop { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; border-radius: 4px 14px 0 0; max-height: 70vh; }
}
.gl-close { position: absolute; top: 0.35rem; right: 0.4rem; width: 2rem; height: 2rem; padding: 0; border-radius: 50%; background: transparent; border: 0; color: var(--muted); font-size: 1.35rem; line-height: 1; filter: none; }
.gl-close:hover { background: var(--paper); color: var(--ink); }
.gl-entry .gl-name { font-family: var(--sans); font-weight: 600; font-size: 1.15rem; margin: 0 2rem 0.5rem 0; line-height: 1.3; }
.gl-entry .gl-name a { color: var(--ink); text-decoration: none; }
.gl-entry .gl-name a:hover { color: var(--link); text-decoration: underline; }
.gl-governs { margin-left: 0.4rem; vertical-align: 0.15em; border-color: var(--accent); color: var(--accent); font-family: var(--sans); }
.gl-reg { margin: 0 0 0.6rem; padding: 0.5rem 0.9rem; border-left: 4px solid var(--signal); background: var(--accent-soft); border-radius: 0 4px 4px 0; }
.gl-reg p { margin: 0 0 0.25rem; }
.gl-reg footer { font-size: 0.82rem; color: var(--muted); font-family: var(--mono); }
/* A handbook's wording: guidance, set plainly under the regulation, with where it is printed. */
.gl-hb { margin: 0 0 0.6rem; padding-left: 0.9rem; border-left: 2px solid var(--rule-strong); }
.gl-hb p { margin: 0 0 0.15rem; }
.gl-cite { font-size: 0.85rem; color: var(--muted); }
.gl-where { margin: 0 0 0.5rem; }
.gl-where a { font-family: var(--mono); font-size: 0.9em; }
.gl-stale { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--bad); }
.gl-taught { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--muted); }
.gl-more { font-size: 0.9rem; }
/* The glossary pages. */
.glossary-head { max-width: 52rem; }
.gl-search { display: flex; gap: 0.5rem; margin: 1.25rem 0 1rem; max-width: 34rem; }
.gl-search input { flex: 1; }
.gl-letters { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.gl-letters a { min-width: 1.75rem; text-align: center; padding: 0.2rem 0.3rem; border-radius: 3px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.gl-letters a:hover { border-color: var(--link); color: var(--link); }
.gl-letters a[aria-current="page"] { background: var(--button); border-color: var(--button); color: var(--on-button); }
.gl-results { max-width: 52rem; }
.gl-results-title { font-size: 1.6rem; margin: 1.5rem 0 1rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--rule); }
.gl-results .gl-entry { padding: 0.9rem 0 0.4rem; border-bottom: 1px solid var(--rule); }
/* The whole glossary is ~240 entries: the browser lays out only those near the screen (30
   September 2026). The placeholder is a typical entry's height (147 px wide screen, 227 px
   narrow), then each entry's own once drawn; find in page and links to an entry still work. */
.gl-results .gl-entry { content-visibility: auto; contain-intrinsic-size: auto 9rem; }
@media (max-width: 40rem) { .gl-results .gl-entry { contain-intrinsic-size: auto 14rem; } }
.gl-results .gl-entry .gl-name { font-size: 1.1rem; }
.gl-single { max-width: 44rem; }
.gl-single .gl-name { font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.4rem); }
.gl-sources { max-width: 52rem; margin: 2rem 0 0; }
.gl-sources summary { cursor: pointer; font-weight: 600; color: var(--link); }
.gl-sources dl { display: grid; gap: 0.3rem; margin: 0.75rem 0; }
.gl-sources dl div { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; }
.gl-sources dt { font-family: var(--mono); font-weight: 500; }
.gl-sources dd { margin: 0; }
/* The drill's glossary sheet. */
.gl-sheet { max-width: 38rem; }
.gl-sheet .gl-entry + .gl-entry { border-top: 1px solid var(--rule); padding-top: 0.75rem; margin-top: 0.25rem; }
.plan-remove { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
button.link-button { background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline var(--signal) 0.14em; text-underline-offset: 0.2em; font: inherit; font-weight: 400; cursor: pointer; filter: none; }
/* Glossary drills: the section deck beside its heading, and the glossary page's way in. */
.section-block > h2 .section-terms { margin-left: auto; font-family: var(--sans); font-size: 0.9rem; font-weight: 600; }
.gl-drill { margin: 0 0 0.75rem; font-size: 0.95rem; color: var(--ink-2); }
/* Records: a plain list, and the one destructive button on the site. */
.plain-list { margin: 0 0 0.75rem; padding-left: 1.2rem; }
.plain-list li { margin: 0.25rem 0; }
button.danger { background: var(--bad); border-color: var(--bad); color: var(--surface); }
.confirm-delete label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.confirm-delete input { max-width: 26rem; }

/* ---------- quiet labels ----------
   A page's small labels (its eyebrow, a card's kind, a panel's title) in sentence case: the
   letter-spaced capitals on every block read as noise. */
.eyebrow, .ctx-title, .pager .dir, .qnum, .section-label,
.check-title {
  text-transform: none; letter-spacing: 0; font-size: 0.9rem; font-family: var(--sans);
}
.eyebrow { color: var(--muted); }

/* A long path or identifier in running text breaks rather than pushing the page sideways. */
main .prose :not(pre) > code, main :not(pre) > code { white-space: normal; overflow-wrap: anywhere; }

/* Identity forms: a label above its field, a hint under it; a checkbox beside its words. */
.stack-form p { margin: 0 0 1rem; }
.stack-form label[for]:not(:has(input)) { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.stack-form input[type=date] { font: inherit; padding: 0.55rem 0.75rem; border-radius: 4px; border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink); }
.stack-form .hint { display: block; margin-top: 0.3rem; }
.stack-form label:has(input[type=checkbox]) { display: flex; gap: 0.6rem; align-items: flex-start; }
.stack-form label:has(input[type=checkbox]) input { margin-top: 0.35rem; flex: none; }

/* ---------- The path (home, signed in): one line through every unit, where you are, what is next. */
.path-page { display: grid; gap: 1.25rem; max-width: 52rem; }
.path-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: start; }
.path-head h1 { margin: 0.1rem 0 0; }
@media (max-width: 48rem) { .path-head { grid-template-columns: minmax(0, 1fr); } }
.habits { background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 0.8rem 1rem; display: grid; gap: 0.45rem; min-width: 15rem; }
.habits p { margin: 0; }
.week-dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.3rem; }
.week-dots li { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; font-weight: 600; color: var(--muted); border: 1.5px solid var(--rule-strong); }
.week-dots li.is-done { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.week-dots li.is-future { border-style: dashed; opacity: 0.6; }
.week-line { font-size: 0.88rem; color: var(--ink-2); }
.goal-form { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--muted); }
.goal-form select { font: inherit; padding: 0.15rem 0.3rem; border-radius: 3px; border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink); }
.celebrate { display: grid; gap: 0.4rem; }
.celebrate-item { margin: 0; padding: 0.7rem 1rem; border-radius: 4px; background: var(--surface); border: 1px solid var(--ok); border-left-width: 4px; font-weight: 600; animation: celebrate-in 600ms ease-out both; }
.celebrate-mark { color: var(--accent); margin-right: 0.3rem; }
@keyframes celebrate-in { from { transform: translateY(6px) scale(0.98); opacity: 0.4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .celebrate-item { animation: none; } }
.path-next { border-left: 4px solid var(--button); }
.path-next h2 { margin: 0.1rem 0 0.35rem; }
.path-next p { margin: 0 0 0.6rem; }
.path-due { margin: -0.4rem 0 0; }
.badges ul { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.badge-item { padding: 0.35rem 0.75rem; border-radius: 2px; background: var(--surface); border: 1px solid var(--rule-strong); font-size: 0.88rem; font-weight: 600; }
.badge-mark { color: var(--accent); }
.path-section { background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 0.4rem 1rem 0.6rem; }
.path-section > summary { cursor: pointer; display: grid; grid-template-columns: 7rem minmax(4rem, 1fr) auto auto; gap: 0.75rem; align-items: center; padding: 0.55rem 0; font-weight: 600; }
.ps-count { font-weight: 400; color: var(--ink-2); font-size: 0.92rem; }
@media (max-width: 40rem) { .path-section > summary { grid-template-columns: minmax(0, 1fr) auto; } .path-section > summary .sp-bar { grid-column: 1 / -1; } }
.path-units { list-style: none; margin: 0.4rem 0 0; padding: 0; position: relative; }
.path-units::before { content: ""; position: absolute; left: 0.85rem; top: 0.9rem; bottom: 0.9rem; width: 2px; background: var(--rule); }
.pu { position: relative; display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); gap: 0.75rem; padding: 0.45rem 0; }
.pu-node { width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--rule-strong); z-index: 1; font-size: 0.85rem; color: var(--surface); font-weight: 700; }
.pu-mastered .pu-node { background: var(--section); border-color: var(--section); }
.pu-here .pu-node { border-color: var(--section); box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--section); }
.pu-title { margin: 0.2rem 0 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: baseline; }
.pu-title a { color: var(--ink); text-decoration: none; }
.pu-title a:hover { text-decoration: underline; }
.pu-later .pu-title a { color: var(--ink-2); }
.pu-here .pu-title a { font-weight: 700; }
.pu-tag { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; color: var(--muted); }
.pu-tag.is-here { color: var(--section); }
.pu-steps { list-style: none; margin: 0.6rem 0 0.2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.5rem; }
.ps { border: 1px solid var(--rule); border-radius: 4px; padding: 0.5rem 0.6rem; display: grid; gap: 0.15rem; background: var(--paper); }
.ps a { display: flex; align-items: center; gap: 0.4rem; color: var(--ink); text-decoration: none; font-weight: 600; }
.ps-label { font-weight: 600; }
.ps-dot { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1.5px solid var(--rule-strong); display: inline-grid; place-items: center; font-size: 0.7rem; flex: none; }
.ps-done .ps-dot { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.ps-current { border-color: var(--section); box-shadow: inset 0 0 0 1px var(--section); background: var(--surface); }
.ps-current .ps-dot { border-color: var(--section); }
.ps-locked { opacity: 0.6; }
.ps-detail { font-size: 0.8rem; color: var(--muted); }

/* ---------- The right panel on the main pages: the page's one thing on the left, its context here. */
.with-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.with-panel-main { display: grid; gap: 1.25rem; min-width: 0; }
.side-panel { display: grid; gap: 1rem; align-content: start; min-width: 0; }
/* Beside the page whenever the page has the room, whatever the window's size, zoom or the left
   panel: the page (main) is the container, so the width that counts is the page's own. */
main { container: page / inline-size; }
@container page (min-width: 50rem) {
  .with-panel { grid-template-columns: minmax(0, 1fr) 18rem; column-gap: 1.75rem; }
  .side-panel { position: sticky; top: 1.25rem; max-height: calc(100dvh - 2.5rem); overflow-y: auto; }
}
.side-block { background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 0.85rem 1rem; margin: 0; }
.side-title { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--mono); color: var(--muted); font-family: var(--sans); margin: 0 0 0.5rem; }
.side-line { font-size: 0.93rem; }
.side-note { font-size: 0.85rem; color: var(--muted); margin: 0; }
.side-block .unit-hero { margin: 0; }
.side-block .unit-kinds { margin: 0; }
.side-block .table-wrap { overflow-x: auto; }
.side-block .card-actions { flex-wrap: wrap; }
.badge-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.habits { min-width: 0; }

/* In the panel: a unit row stacks (code and name, then the bar, then the words), a table is cards,
   and the steps beside it keep to one row. */
.side-block .unit-row { grid-template-columns: 3.1rem minmax(0, 1fr); grid-template-areas: "code name" ". meter" ". line"; padding: 0.5rem 0.2rem; }
.side-block .unit-list { margin: 0; }
:is(.side-panel, .context) .stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
:is(.side-panel, .context) .stack-table, :is(.side-panel, .context) .stack-table tbody { display: block; min-width: 0; }
:is(.side-panel, .context) .stack-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date score" "result link"; gap: 0.15rem 0.75rem; padding: 0.5rem 0.6rem; border-top: 1px solid var(--rule); }
:is(.side-panel, .context) .stack-table td { display: block; padding: 0; border: 0; }
:is(.side-panel, .context) .stack-table td:nth-child(1) { grid-area: date; color: var(--muted); font-size: 0.85rem; }
:is(.side-panel, .context) .stack-table td:nth-child(2) { grid-area: score; text-align: right; }
:is(.side-panel, .context) .stack-table td:nth-child(3) { grid-area: result; }
:is(.side-panel, .context) .stack-table td:nth-child(4) { grid-area: link; text-align: right; }
.side-panel .table-wrap { border: 0; }

/* ---------- Your progress in a unit: its four steps, where you are, and the one next thing. */
.unit-progress { display: grid; gap: 0.7rem; }
.up-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.1rem 0.75rem; margin: 0; }
.up-title { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--mono); color: var(--muted); }
.up-code { white-space: nowrap; }
.up-count { white-space: nowrap; font-size: 0.82rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.up-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.up-steps::before { content: ""; position: absolute; left: 0.7rem; top: 0.8rem; bottom: 0.8rem; width: 2px; background: var(--rule); }
.ups { display: grid; grid-template-columns: 1.45rem minmax(0, 1fr); gap: 0.6rem; align-items: start; padding: 0.35rem 0; position: relative; }
.ups-dot { width: 1.45rem; height: 1.45rem; border-radius: 50%; border: 2px solid var(--rule-strong); background: var(--surface); display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; z-index: 1; }
.ups-dot svg { width: 0.7rem; height: 0.7rem; fill: none; stroke: var(--muted); stroke-width: 1.4; }
.ups-done .ups-dot { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.ups-current .ups-dot { border: 5px solid var(--section); }
.ups-text { display: grid; gap: 0.05rem; min-width: 0; }
.ups-label { font-weight: 600; }
.ups-label a { color: var(--ink); text-decoration: none; }
.ups-label a:hover { text-decoration: underline; }
.ups-locked .ups-label { color: var(--muted); }
.ups-now { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-family: var(--mono); color: var(--section); margin-left: 0.3rem; }
.ups-detail { font-size: 0.82rem; color: var(--muted); }
.up-next { justify-self: stretch; text-align: center; }
.up-done { margin: 0; font-size: 0.9rem; color: var(--ok); font-weight: 600; }
.up-more { margin: 0; font-size: 0.85rem; }
.practice-progress { display: block; }
.practice-progress .unit-progress { max-width: 26rem; }

/* ---------- The learner's ticks: a page done, a reading in the sources read. */
.tick {
  flex: none; width: 1.6rem; height: 1.6rem; padding: 0; border-radius: 3px; cursor: pointer;
  border: 2px solid var(--rule-strong); background: var(--surface); display: grid; place-items: center;
}
.tick:hover { border-color: var(--ok); }
.tick[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); }
.tick[aria-pressed="true"]::after { content: "✓"; color: var(--surface); font-weight: 700; font-size: 0.95rem; line-height: 1; }
.tick:disabled { opacity: 0.6; }
.page-done {
  display: flex; align-items: flex-start; gap: 0.85rem; max-width: 44rem; margin: 2.5rem 0 1.5rem; padding: 1rem 1.25rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
}
.page-done.is-done { border-color: var(--ok); }
.page-done-title { margin: 0; font-weight: 600; }
.page-done .hint { margin: 0.15rem 0 0; font-size: 0.88rem; }
.sources { max-width: 44rem; margin: 0 0 2rem; padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--section, var(--accent)); border-radius: var(--radius); }
.sources-title { font-family: var(--sans); font-size: 1.05rem; margin: 0 0 0.25rem; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
.sources-count { font-size: 0.85rem; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.sources > .hint { margin: 0 0 0.75rem; font-size: 0.88rem; }
.source-list { list-style: none; margin: 0; padding: 0; }
.source { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.6rem 0; border-top: 1px solid var(--rule); }
.source form { margin: 0; }
.source-text { min-width: 0; }
.source-title { margin: 0.1rem 0 0; font-weight: 600; }
.source.is-done .source-title { color: var(--muted); }
.source-els { margin-left: 0.35rem; font-family: var(--mono, monospace); font-size: 0.75rem; font-weight: 500; color: var(--muted); white-space: nowrap; }
.source-asks { margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--ink-2); }
.source-parts { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.2rem; font-size: 0.88rem; color: var(--ink-2); }
.source-where { font-weight: 600; color: var(--ink); margin-right: 0.2rem; }
.source.is-done .source-parts, .source.is-done .source-asks { color: var(--muted); }
.source-docs { list-style: none; margin: 0 0 0.6rem; padding: 0; display: grid; gap: 0.15rem; font-size: 0.85rem; }
.source-docname { color: var(--muted); }

/* ---------- The unit map (content/_unit_map.html): the one way around a unit. Beside the text
   where there is room; otherwise one line above it that opens. */
.unit-map > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0; font-weight: 600; }
.unit-map > summary::-webkit-details-marker { display: none; }
.um-here { color: var(--ink); }
.um-count { font-size: 0.82rem; font-weight: 500; color: var(--muted); }
.um-open { margin-left: auto; font-size: 0.82rem; font-weight: 500; color: var(--link); }
.um-open::after { content: " ▾"; }
.unit-map[open] .um-open::after { content: " ▴"; }
.unit-map[open] > summary { margin-bottom: 0.75rem; }
/* Folded into one line, the summary already shows the code and the count; the head is the unit's name. */
.unit-map .um-unit .badge, .unit-map .up-head .up-count { display: none; }
@media (min-width: 80rem) {
  .with-context .unit-map > summary { display: none; }
  .with-context .unit-map .um-unit .badge, .with-context .unit-map .up-head .up-count { display: revert; }
}
@container page (min-width: 50rem) {
  .side-panel .unit-map > summary { display: none; }
  .side-panel .unit-map .um-unit .badge, .side-panel .unit-map .up-head .up-count { display: revert; }
}
.um-unit { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.um-unit:hover { text-decoration: underline; }
.unit-progress a[aria-current="page"] { font-weight: 700; color: var(--ink); text-decoration: none; }
.um-pages { list-style: none; margin: 0.35rem 0 0.1rem; padding: 0; display: grid; gap: 0.1rem; font-size: 0.9rem; }
.um-pages li { display: flex; align-items: baseline; gap: 0.4rem; padding: 0.1rem 0 0.1rem 0.6rem; border-left: 2px solid transparent; }
.um-pages li.is-here { border-left-color: var(--section, var(--accent)); }
.um-pages a { color: var(--ink-2); text-decoration: none; }
.um-pages a:hover { text-decoration: underline; }
.um-tick { color: var(--ok); font-size: 0.8rem; font-weight: 700; }
.um-n { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.um-account { margin: 0.25rem 0 0; font-size: 0.88rem; }
.unit-place { color: var(--muted); font-weight: 500; }
/* A unit's pages, narrow: the map above the page; the panel's other blocks after it. */
@container page (max-width: 49.99rem) {
  .with-panel > .side-panel { display: contents; }
  .with-panel > .side-panel > .side-map { order: -1; }
}

/* A unit's own pages on the reading pages' layout. Narrow: the map above the page, the panel's
   other blocks after it. */
.unit-context .side-block { margin: 0; }
.unit-side { display: grid; gap: 1rem; align-content: start; min-width: 0; }
@media (max-width: 79.99rem) {
  main.with-context { grid-template-areas: "msg" "top" "ctx" "body" "side"; }
  .with-context > .unit-context { display: contents; }
  .with-context > .unit-context > .ctx-map { grid-area: ctx; margin-bottom: 1.5rem; }
  .with-context > .unit-context > .unit-side { grid-area: side; margin-top: 1.5rem; }
}

/* ---------- The Path's mock exam: each section's last stop. */
.pu-exam .pu-node { font-size: 0.85rem; color: var(--muted); }
.pu-exam .pu-title a { font-weight: 600; }
.pu-exam-line { margin: 0.2rem 0 0.5rem; font-size: 0.9rem; color: var(--ink-2); }
.pu-exam .pu-body > p:last-child { margin: 0; }
.record-body > section + section { margin-top: 1.75rem; }
.record-body h2 { font-size: 1.3rem; margin: 0 0 0.6rem; }

/* The Path head links down to the unit you are on: leave a little room above it. */
.path-page .pu[id] { scroll-margin-top: 1rem; }
.path-step { color: var(--muted); }

/* ---------- The Path's review block: what is due, by unit (Review folded in, 28 September 2026). */
.review-total { margin: 0 0 0.5rem; }
.review-units { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.3rem; font-size: 0.9rem; }
.review-units li { display: flex; justify-content: space-between; gap: 0.75rem; }
.review-units a { text-decoration: none; color: var(--ink-2); }
.review-units a:hover { text-decoration: underline; }
.review-n { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent); }
.review-block .button { width: 100%; text-align: center; }
.review-decks { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--muted); }
/* Narrow: what is due comes before the path, not after all its units; the panel's other blocks follow it. */
@container page (max-width: 49.99rem) {
  .path-page .with-panel > .side-panel { display: contents; }
  .path-page .review-block.has-due { order: -1; }
}

/* ---------- Tap targets: at least 24px tall (WCAG 2.2, 2.5.8), found small on a phone in the site review. */
input[type="checkbox"], input[type="radio"] { width: 1.2rem; height: 1.2rem; accent-color: var(--button); }
.um-pages a, .review-units a { display: inline-block; padding-block: 0.25rem; }
button.link-button { padding-block: 0.3rem; }

/* ---------- Site review, 28 September 2026. */
/* A folded section says it opens. */
.path-section > summary .ps-name::before, .nav-section summary::after {
  content: "▸"; display: inline-block; color: var(--muted); font-size: 0.8em; transition: transform 120ms;
}
.path-section > summary .ps-name::before { margin-right: 0.45rem; }
.nav-section summary::after { margin-left: auto; }
.path-section[open] > summary .ps-name::before, .nav-section[open] summary::after { transform: rotate(90deg); }
/* The unit's four steps in one row, two by two on a phone: never three and one. */
.pu-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 40rem) { .pu-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A contents entry with no number takes no number's room. */
.toc .num:empty { display: none; }
.toc li a:has(.num:empty) { grid-template-columns: minmax(0, 1fr); }
/* An element code in a heading stays whole. */
.prose :is(h2, h3) .el-link { white-space: nowrap; }
/* A code badge: the monospace hyphen took a whole cell ("AF -A"). */
.badge, .unit-code { letter-spacing: -0.02em; }
/* The place's suffix in a unit's head ("· Study") stays with it. */
.unit-place { white-space: nowrap; }
/* The note under the sign-up button, and the landing's note as wide as its lede. */
.entrance .hint { margin-top: 1rem; }
.landing-hero .hint { max-width: 40rem; }

/* The unit map's footer, a line each; its signed-out buttons the same width. */
ul.up-more { list-style: none; padding: 0; display: grid; gap: 0.2rem; }
.unit-map .ctx-actions { grid-template-columns: minmax(0, 1fr); }
/* The consent text on a phone: no box inside the card, so it keeps its width. */
@media (max-width: 40rem) { .panel .consent-text { border: 0; padding: 0; background: none; } }
/* A result's verdict as wide as the answers under it. */
.verdict { max-width: 48rem; }

/* The Study page: the test's terms in a line, above the elements. */
.study-terms { margin: 0 0 1.25rem; color: var(--ink-2); max-width: 44rem; }