/* site.css — Course Design Contract component sheet (tokens.css is the vocabulary).
   Lifted from the Dom-sighted mocks under design/mocks/ (page-landing,
   page-catalogue, page-legals): same class idioms, same values, merged into one
   sheet and de-duplicated. Colour/type is expressed only as var(--token). */

/* ── base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-2xl); margin-top: var(--space-12); }
h3 { font-size: var(--text-xl); margin-top: var(--space-8); }
p { color: var(--fg-2); }
a { color: var(--fg); text-decoration: underline; text-underline-offset: 0.15em; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid transparent; box-shadow: var(--focus-ring); border-radius: var(--radius-sm);
}
code { font-family: var(--font-mono); font-size: var(--text-sm); }
hr { border: none; border-top: 1px solid var(--border); margin: var(--space-8) 0; }
.meta { color: var(--muted); font-size: var(--text-sm); }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mono { font-family: var(--font-mono); font-size: 0.92em; color: var(--fg-2); }

/* Public-page margin reset: every .page rule below states its own spacing
   (the mocks were authored over a `* { margin: 0 }` reset). */
.page h1, .page h2, .page h3, .page h4, .page p,
.page ul, .page ol, .page dl, .page table, .page figure { margin: 0; }

/* ── gated lesson fragment (served by the app, same contract) ─────────── */
.container { max-width: var(--container-max); margin: 0 auto;
  padding: var(--section-y-phone) var(--container-gutter-phone); }
@media (min-width: 768px) {
  .container { padding: var(--section-y-desktop) var(--container-gutter-desktop); }
}

/* ── lesson shell (design/mocks/lesson-shell.html, Dom-sighted) ────────── */
/* The component sheet of the mock, carried over rule for rule and SCOPED under
   `.shell`: public pages and lesson fragments load the one site.css, so the
   shell's `.btn`/`.wordmark`/`progress` idioms must not overwrite the public
   page components above. Colour and type stay token-only. */
.shell { background: var(--bg); color: var(--fg); position: relative; }
.shell .topbar { display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-soft); }
.shell .topbar-div { width: 1px; height: 24px; background: var(--border); flex: none; }
.shell .crumb { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.shell .crumb .mod { font-size: var(--text-base); font-weight: 500; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell .crumb .pos { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); }
.shell .topbar-spacer, .shell .foot-spacer { margin-left: auto; }
.shell .done-flag { display: none; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 500; color: var(--fg); background: var(--surface-warm);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3); }
.shell .icon { width: 16px; height: 16px; flex: none; vertical-align: middle; }
.shell .learner { display: inline-flex; align-items: center; gap: var(--space-2); background: none;
  border: none; cursor: pointer; padding: var(--space-1); border-radius: var(--radius-pill); }
.shell .learner-name { font-size: var(--text-sm); color: var(--fg-2); }
.shell .topbar-signin, .shell .pos-preview { display: none; }
.shell .signout { display: inline-flex; margin: 0; }

.shell .progress-strip { display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--border-soft); }
.shell .progress-strip label { font-size: var(--text-sm); color: var(--muted); white-space: nowrap; }
.shell progress { -webkit-appearance: none; appearance: none; flex: 1; height: 6px; border: none;
  border-radius: var(--radius-pill); background: var(--surface); }
.shell progress::-webkit-progress-bar { background: var(--surface); border-radius: var(--radius-pill); }
.shell progress::-webkit-progress-value { background: var(--accent); border-radius: var(--radius-pill); }
.shell progress::-moz-progress-bar { background: var(--accent); border-radius: var(--radius-pill); }
.shell .progress-pct { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg);
  white-space: nowrap; }

/* Reading region — the shell imposes NO styling inside `.fragment` beyond the
   contract's own reading rhythm (mock, Implementation notes). */
.shell .reading { padding: var(--space-8) var(--space-6); max-width: 760px; margin: 0 auto; }
.shell .fragment > h1 { font-family: var(--font-display); font-weight: 300;
  font-size: var(--text-3xl); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display); margin-bottom: var(--space-3); }
.shell .fragment > h2 { font-family: var(--font-display); font-weight: 300;
  font-size: var(--text-xl); margin: var(--space-8) 0 var(--space-3); }
.shell .fragment p { font-size: var(--text-lg); line-height: 1.6; color: var(--fg-2);
  margin-bottom: var(--space-4); }
.shell .fragment ul, .shell .fragment ol { margin: 0 0 var(--space-4) var(--space-6);
  color: var(--fg-2); font-size: var(--text-base); }
.shell .fragment li { margin-bottom: var(--space-2); }
.shell .fragment table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0;
  font-size: var(--text-base); }
.shell .fragment th, .shell .fragment td { text-align: left; padding: var(--space-3);
  border-bottom: 1px solid var(--border); }
.shell .fragment thead th { font-weight: 500; color: var(--fg); border-bottom: 1px solid var(--fg); }
.shell .fragment td { color: var(--fg-2); }
/* CR-18: the DRAFT outcomes block rides with the lesson, ruled off from the
   teaching prose and otherwise unstyled. */
.shell .outcomes { margin-top: var(--space-12); border-top: 1px solid var(--border);
  padding-top: var(--space-8); }

.shell .lesson-foot { border-top: 1px solid var(--border-soft); padding: var(--space-6);
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.shell .lesson-nav { display: inline-flex; gap: var(--space-5); }
.shell .navlink { display: inline-flex; flex-direction: column; font-size: var(--text-base);
  color: var(--fg-2); text-decoration: none; border-radius: var(--radius-sm); padding: var(--space-2); }
.shell .navlink:hover { color: var(--fg); }
.shell .navlink .np { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); }
.shell .btn { font-family: var(--font-body); font-size: 15px; font-weight: 500; height: auto;
  border-radius: var(--radius-pill); padding: var(--space-3) var(--space-5);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard); }
.shell .btn-cta { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: 14px; padding: var(--space-3) var(--space-6); }
.shell .cta-review, .shell .cta-next { display: none; }

/* Gate surfaces. The veil is opacity + blur, never a colour scrim (mock, a11y
   notes), so it stays achromatic. */
.shell .veiled { filter: blur(3px); opacity: .4; pointer-events: none; user-select: none; }
.shell .gate-panel { display: none; border-top: 1px solid var(--border);
  padding: var(--space-8) var(--space-6); text-align: center; }
.shell .gate-card { max-width: 460px; margin: 0 auto; background: var(--surface-warm);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-ring);
  padding: var(--space-8) var(--space-6); }
.shell .gate-card .lock { display: block; width: 28px; height: 28px; color: var(--fg);
  margin: 0 auto var(--space-3); }
.shell .gate-card h3 { font-family: var(--font-display); font-weight: 300;
  font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.shell .gate-card p { font-size: var(--text-base); color: var(--fg-2); max-width: 38ch;
  margin: 0 auto var(--space-5); }
.shell .gate-card .fine { font-size: var(--text-sm); color: var(--muted);
  margin: var(--space-4) auto 0; }
.shell .expired-wrap { position: relative; }
.shell .expired-scrim { display: none; position: absolute; inset: 0; align-items: center;
  justify-content: center; padding: var(--space-6); }
.shell .expired-scrim .gate-card { box-shadow: var(--elev-raised); }
.shell .field { text-align: left; margin-bottom: var(--space-4); }
.shell .field label { display: block; font-size: var(--text-sm); color: var(--fg-2);
  margin-bottom: var(--space-1); }
.shell .field input { width: 100%; font-family: var(--font-body); font-size: var(--text-base);
  color: var(--fg); background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--space-3); }
.shell .field input:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring);
  border-color: var(--fg); }

/* State selector (mock, Implementation notes): ONE attribute drives the render —
   data-state on the shell root, one of {unlocked, locked-preview, completed,
   session-expired}. `unlocked` is the base render above; the three rules below
   are the deltas. (The mock hand-rendered each state as its own markup; a single
   served template needs the state expressed as selectors — see fragment_shell.)
   `reading-focus` is not a server state: the ring is on :focus-visible always. */
[data-state="completed"] .done-flag { display: inline-flex; }
[data-state="completed"] .cta-complete { display: none; }
[data-state="completed"] .cta-review, [data-state="completed"] .cta-next { display: inline-flex; }
[data-state="locked-preview"] .gate-panel { display: block; }
[data-state="locked-preview"] .learner, [data-state="locked-preview"] .lesson-foot,
[data-state="locked-preview"] .signout { display: none; }
[data-state="locked-preview"] .topbar-signin { display: inline-flex; }
[data-state="locked-preview"] .pos-preview { display: inline; }
[data-state="session-expired"] .expired-scrim { display: flex; }
[data-state="session-expired"] .progress-strip,
[data-state="session-expired"] .lesson-foot { display: none; }
[data-state="session-expired"] .learner,
[data-state="session-expired"] .signout { opacity: .4; pointer-events: none; }
[data-state="session-expired"] .reading { filter: blur(3px); opacity: .4; pointer-events: none;
  user-select: none; }
@media (max-width: 640px) {
  .shell .topbar { flex-wrap: wrap; }
  .shell .learner-name { display: none; }
  .shell .reading { padding: var(--space-6) var(--space-4); }
}

/* ── shared site surface ──────────────────────────────────────────────── */
.page { background: var(--bg); color: var(--fg); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-6); }
.cat-wrap { max-width: 960px; padding-top: var(--space-8); padding-bottom: var(--space-12); }

.site-head { position: relative; background: var(--bg); border-bottom: 1px solid var(--border-soft); }
.head-inner { display: flex; align-items: center; gap: var(--space-6); min-height: 64px; flex-wrap: wrap; }
.wordmark { font-family: var(--font-display); font-weight: 300; font-size: var(--text-lg);
  letter-spacing: var(--tracking-display); white-space: nowrap; }
.site-nav { display: flex; gap: var(--space-6); margin-left: auto; }
.site-nav a { color: var(--fg-2); text-decoration: none; font-size: 15px; font-weight: 500;
  letter-spacing: .15px; border-radius: var(--radius-sm); }
.site-nav a:hover { color: var(--fg); }
.head-cta { display: flex; align-items: center; gap: var(--space-3); }
.signed-in { display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--fg-2); }
.signed-in .who { font-weight: 500; color: var(--fg); }
/* F-5 sign-out control: a form, so it must sit in the header row like the chip
   and the buttons beside it — layout only, no new colour or type idiom. */
.signout { display: inline-flex; margin: 0; }
.avatar { width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--surface-warm);
  border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-sm); font-weight: 500; color: var(--fg); }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: 15px; font-weight: 500; line-height: 1.47;
  cursor: pointer; border: none; text-decoration: none; border-radius: var(--radius-pill);
  padding: 0 20px; height: 44px;
  transition: background-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn-primary { background: var(--accent); color: var(--accent-on); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-active); }
.btn-secondary { background: var(--bg); color: var(--fg); box-shadow: var(--elev-raised); }
.btn-secondary:hover { background: var(--surface); }
.btn-warm { background: var(--surface-warm); color: var(--fg); border-radius: 30px;
  padding: 0 22px 0 18px; box-shadow: var(--elev-warm); font-weight: 500; }
.btn-warm:hover { box-shadow: var(--elev-warm), var(--elev-raised); }
.btn:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.link { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--muted); }

/* ── unresolved placeholder (draft renders only; strict refuses) ───────── */
.ph { font-family: var(--font-mono); font-size: .94em; color: var(--fg); background: var(--surface-warm);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 var(--space-1);
  letter-spacing: 0; }

/* ── landing ──────────────────────────────────────────────────────────── */
.hero { padding: var(--space-12) 0; }
.eyebrow { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; font-size: var(--text-sm); color: var(--muted); margin-bottom: var(--space-4); }
.hero h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(36px, 5vw, 48px);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-display); max-width: 16ch; margin: 0; }
.hero .prop { font-size: var(--text-lg); line-height: 1.6; color: var(--fg-2); max-width: 60ch;
  margin: var(--space-5) 0 var(--space-6); }
.hero-ctas { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.hero-continue { display: flex; flex-direction: column; gap: var(--space-4); max-width: 620px; }
.sec { padding: var(--space-12) 0; border-top: 1px solid var(--border-soft); }
.sec.alt { background: var(--surface); }
.sec h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--text-3xl);
  line-height: 1.17; letter-spacing: var(--tracking-display); margin: 0 0 var(--space-3); }
.sec .lede { color: var(--fg-2); font-size: var(--text-lg); line-height: 1.5; max-width: 64ch;
  margin: 0 0 var(--space-8); }
.who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.who-card { background: var(--bg); border-radius: var(--radius-lg); box-shadow: var(--elev-ring);
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.who-card h3 { font-family: var(--font-display); font-weight: 300; font-size: var(--text-xl);
  letter-spacing: var(--tracking-display); margin: 0; }
.who-card p { margin: 0; font-size: var(--text-base); color: var(--fg-2); }
.build-list { margin: 0; padding: 0; list-style: none; counter-reset: b; display: flex;
  flex-direction: column; gap: var(--space-5); }
.build-list li { position: relative; padding-left: var(--space-8); counter-increment: b; }
.build-list li::before { content: counter(b); position: absolute; left: 0; top: 0; width: 28px;
  height: 28px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-on);
  font-family: var(--font-mono); font-size: var(--text-sm); display: inline-flex;
  align-items: center; justify-content: center; }
.build-list h4 { font-family: var(--font-display); font-weight: 300; font-size: var(--text-xl);
  letter-spacing: var(--tracking-display); margin: 0 0 var(--space-2); }
.build-list p { margin: 0; color: var(--fg-2); max-width: 78ch; }
.works-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.work { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5);
  border-radius: var(--radius-md); background: var(--bg); box-shadow: var(--elev-ring); }
.work h4 { font-family: var(--font-display); font-weight: 300; font-size: var(--text-lg);
  letter-spacing: var(--tracking-display); margin: 0; }
.work p { margin: 0; font-size: var(--text-base); color: var(--fg-2); }
.teaser-copy p { margin: 0 0 var(--space-4); color: var(--fg-2); font-size: var(--text-lg); line-height: 1.5; }
.price-card { background: var(--bg); border-radius: var(--radius-lg); box-shadow: var(--elev-ring);
  padding: var(--space-8); max-width: 620px; display: flex; flex-direction: column; gap: var(--space-5); }
.price-card p { margin: 0; font-size: var(--text-lg); line-height: 1.6; color: var(--fg-2); }
.plain-note { border-left: 4px solid var(--fg); background: var(--surface); border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6); max-width: 80ch; }
.plain-note p { margin: 0; color: var(--fg-2); font-size: var(--text-base); line-height: 1.55; }
.indep { background: var(--surface-warm); border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft); }
.indep p { margin: 0 auto; max-width: 80ch; color: var(--fg-2); font-size: var(--text-base);
  line-height: 1.6; padding: var(--space-8) 0; }
.faq { display: flex; flex-direction: column; gap: 0; max-width: 80ch; }
.faq details { border-bottom: 1px solid var(--border); padding: var(--space-4) 0; }
.faq summary { font-family: var(--font-body); font-weight: 500; font-size: var(--text-base);
  color: var(--fg); cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  gap: var(--space-4); align-items: baseline; border-radius: var(--radius-sm); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--muted); flex: 0 0 auto; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: var(--space-3) 0 0; color: var(--fg-2); font-size: var(--text-base);
  line-height: 1.55; max-width: 74ch; }

/* ── footer (independence SHORT form + legal links, every page) ────────── */
.site-foot { border-top: 1px solid var(--border-soft); background: var(--bg); padding: var(--space-8) 0; }
.foot-coi { max-width: 72ch; margin: 0 0 var(--space-4); color: var(--fg-2); font-size: var(--text-base);
  line-height: 1.6; }
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); font-size: var(--text-sm);
  color: var(--fg-2); margin-bottom: var(--space-4); align-items: baseline; }
.foot-nav a { color: var(--fg-2); text-decoration: none; }
.foot-nav a:hover { color: var(--fg); }
.foot-sep { color: var(--muted); }
.foot-legal { font-size: var(--text-sm); color: var(--muted); max-width: 80ch; line-height: 1.55; }

/* ── progress indicator (D-13: the countable path is 21 modules) ───────── */
.pi-linear { max-width: 560px; display: flex; flex-direction: column; gap: var(--space-3); }
.pi-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.pi-pct { font-family: var(--font-display); font-weight: 300; font-size: var(--text-2xl);
  letter-spacing: var(--tracking-display); line-height: 1; font-variant-numeric: tabular-nums; }
.pi-count { font-size: var(--text-base); color: var(--fg-2); }
.pi-track { position: relative; height: 12px; border-radius: var(--radius-pill); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.pi-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-pill);
  background: var(--fg); }
/* The fill WIDTH is a class, never an inline style: the app serves this sheet
   under CSP `style-src 'self'`, which drops `style="width:…"` and leaves the
   bar invisible (WP-M2-03b residual). The server picks `pi-n-<completed>`;
   one step per countable module is appended below the sheet (see
   `_progress_step_css`), each width = n / 21 (D-13). */

/* ── quiz surface (design/mocks/quiz-item.html, Dom-sighted) ───────────── */
/* The mock hand-renders one item per state; the SERVED template is one item
   block the server repeats, so each state is an attribute selector instead:
   `data-state` on the quiz root (active | locked | review), on each `.qi`
   (unanswered | selected | correct | incorrect), on each `.qi-opt` (the same
   four) and on the summary card (pass | fail | exhausted). Achromatic
   throughout (delta 4, mock a11y notes): correctness is carried by glyph,
   border-style, weight and words — never by hue. */
.quiz .qi-list { display: flex; flex-direction: column; gap: var(--space-6); margin: 0; padding: 0; }
.quiz .qi { background: var(--bg); border-radius: var(--radius-lg); box-shadow: var(--elev-ring);
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.quiz .qi-stem { font-size: var(--text-lg); line-height: 1.4; letter-spacing: 0.01em; margin: 0; }
.quiz .qi-opts { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: var(--space-2); }
.quiz .qi-legend { padding: 0; font-size: var(--text-sm); font-weight: 500; color: var(--muted);
  margin-block-end: var(--space-2); }
.quiz .qi-opt { display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border: 1px solid var(--border);
  border-radius: var(--radius-md); cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard); }
.quiz .qi-opt:hover { background: var(--surface); }
.quiz .qi-opt:focus-within { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.quiz .qi-opt input { margin: 2px 0 0; width: 18px; height: 18px; flex: 0 0 auto;
  accent-color: var(--accent); }
.quiz .qi-opt input:disabled { cursor: not-allowed; }
.quiz .qi-marker { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500;
  color: var(--muted); min-width: 1.25em; }
.quiz .qi-opt-text { font-size: var(--text-base); line-height: 1.45; flex: 1; }
.quiz .qi-opt-badge { display: none; font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.04em; color: var(--fg); white-space: nowrap; align-self: center; }
.quiz .qi-opt[data-state="selected"] { border-color: var(--accent); background: var(--surface); }
.quiz .qi-opt[data-state="selected"] .qi-marker { color: var(--fg); font-weight: 700; }
.quiz .qi-opt[data-state="correct"] { border-color: var(--accent); border-left-width: 4px; }
.quiz .qi-opt[data-state="correct"] .qi-opt-text { font-weight: 500; }
.quiz .qi-opt[data-state="incorrect"] { border-left: 4px dashed var(--muted); }
.quiz .qi-opt[data-state="incorrect"] .qi-opt-text { text-decoration: line-through;
  text-decoration-thickness: 1px; }
.quiz .qi-opt[data-state="correct"] .qi-badge-key,
.quiz .qi-opt[data-state="incorrect"] .qi-badge-yours { display: inline; }
/* An answered or read-only item. The server ALSO sets the radios `disabled`
   (mock, Implementation notes) — this is the look, not the lock. */
.quiz .qi[data-state="correct"] .qi-opt, .quiz .qi[data-state="incorrect"] .qi-opt,
.quiz[data-state="locked"] .qi-opt, .quiz[data-state="review"] .qi-opt {
  cursor: not-allowed; opacity: 0.75; background: var(--surface); }
/* An element that belongs to some item states only NAMES them in `data-when`;
   a state it does not name hides it. */
.quiz .qi[data-state="unanswered"] [data-when]:not([data-when~="unanswered"]),
.quiz .qi[data-state="selected"] [data-when]:not([data-when~="selected"]),
.quiz .qi[data-state="correct"] [data-when]:not([data-when~="correct"]),
.quiz .qi[data-state="incorrect"] [data-when]:not([data-when~="incorrect"]) { display: none; }
.quiz .qi-feedback { display: none; padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md); background: var(--surface); border-left: 4px solid var(--accent); }
.quiz .qi[data-state="correct"] .qi-feedback,
.quiz .qi[data-state="incorrect"] .qi-feedback { display: block; }
.quiz .qi[data-state="incorrect"] .qi-feedback { border-left: 4px dashed var(--muted); }
.quiz .qi-result { display: flex; align-items: center; gap: var(--space-3); font-weight: 500;
  font-size: var(--text-base); margin: 0; }
.quiz .qi-mark { font-family: var(--font-mono); font-size: var(--text-base); line-height: 1;
  width: 1.7em; height: 1.7em; flex: 0 0 auto; display: inline-flex; align-items: center;
  justify-content: center; border: 1.5px solid var(--fg); border-radius: var(--radius-pill); }
.quiz .qi[data-state="incorrect"] .qi-mark { border-style: dashed; border-color: var(--muted);
  color: var(--muted); }
.quiz .qi-rationale { margin: var(--space-3) 0 0; font-size: var(--text-base); line-height: 1.55;
  color: var(--fg-2); }
.quiz .qi-actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  margin-block-start: var(--space-6); }
.quiz .qi-policy { font-size: var(--text-sm); color: var(--muted); }
.quiz[data-state="locked"] .qi-actions, .quiz[data-state="review"] .qi-actions { display: none; }
.quiz .qi-lock { display: none; margin-block-start: var(--space-6); }
.quiz[data-state="locked"] .qi-lock { display: block; }
.quiz .qi-lock-note { display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); border: 1px dashed var(--muted);
  border-radius: var(--radius-pill); padding: 2px var(--space-3); }
.quiz .qi-summary { display: none; flex-direction: column; align-items: center; gap: var(--space-3);
  background: var(--bg); border-radius: var(--radius-lg); box-shadow: var(--elev-ring);
  border-top: 4px solid var(--accent); padding: var(--space-8) var(--space-6); text-align: center;
  margin-block-start: var(--space-6); }
.quiz .qi-summary[data-state="pass"], .quiz .qi-summary[data-state="fail"],
.quiz .qi-summary[data-state="exhausted"] { display: flex; }
.quiz .qi-summary[data-state="fail"], .quiz .qi-summary[data-state="exhausted"] {
  border-top: 4px dashed var(--muted); }
.quiz .qi-summary[data-state="pass"] [data-sum]:not([data-sum~="pass"]),
.quiz .qi-summary[data-state="fail"] [data-sum]:not([data-sum~="fail"]),
.quiz .qi-summary[data-state="exhausted"] [data-sum]:not([data-sum~="exhausted"]) { display: none; }
.quiz .qi-status { display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); }
.quiz .qi-status .qi-mark { width: 1.9em; height: 1.9em; font-size: var(--text-lg); color: var(--fg); }
.quiz .qi-summary[data-state="fail"] .qi-status .qi-mark,
.quiz .qi-summary[data-state="exhausted"] .qi-status .qi-mark { border-style: dashed;
  border-color: var(--muted); color: var(--muted); }
.quiz .qi-score { font-family: var(--font-display); font-weight: 300; font-size: var(--text-4xl);
  letter-spacing: var(--tracking-display); }
.quiz .qi-score .pct { color: var(--muted); }
.quiz .qi-meter-wrap { width: 100%; max-width: 380px; display: flex; flex-direction: column;
  align-items: center; gap: var(--space-2); }
.quiz .qi-meter { width: 100%; height: 10px; flex: none; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--border); overflow: hidden;
  appearance: none; -webkit-appearance: none; }
.quiz .qi-meter::-webkit-progress-bar { background: var(--surface); }
.quiz .qi-meter::-webkit-progress-value { background: var(--accent); }
.quiz .qi-meter::-moz-progress-bar { background: var(--accent); }
.quiz .qi-passmark { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.quiz .qi-attempts { font-size: var(--text-sm); color: var(--muted); margin: 0; }
.quiz .qi-summary-actions { display: flex; gap: var(--space-3); flex-wrap: wrap;
  justify-content: center; margin-block-start: var(--space-3); }

/* ── branch selector (design/mocks/branch-selector.html, Dom-sighted) ──── */
/* One template, five states on the root `data-state` (locked | open |
   selected-pending | committed | switch-blocked), with `data-selected` naming
   the chosen branch. An element that belongs to some states only NAMES them in
   `data-for`; a state it does not name hides it. The choice is carried by
   three redundant achromatic channels (border, tick glyph, worded badge). */
.selector { max-width: 980px; }
.selector[data-state="locked"] [data-for]:not([data-for~="locked"]),
.selector[data-state="open"] [data-for]:not([data-for~="open"]),
.selector[data-state="selected-pending"] [data-for]:not([data-for~="selected-pending"]),
.selector[data-state="committed"] [data-for]:not([data-for~="committed"]),
.selector[data-state="switch-blocked"] [data-for]:not([data-for~="switch-blocked"]) { display: none; }
/* `open` is served with no choice known: the moment a card's radio is checked
   the browser IS in `selected-pending`, and CSS alone carries that transition
   (no script ships for this surface) — the confirm block appears, open-only
   elements hide, the checked card gets its tick. The name in the confirm
   block stays empty here: only the server can fill a slot. (seat, S13) */
.selector[data-state="open"]:has(.branch-grid input:checked) [data-for~="selected-pending"] { display: revert; }
.selector[data-state="open"]:has(.branch-grid input:checked) [data-for]:not([data-for~="selected-pending"]) { display: none; }
.selector[data-state="open"] .branch-card:has(input:checked) .tick { display: inline-flex; }
.selector .selector-head h2 { margin: 0 0 var(--space-3); }
.selector .selector-explain { color: var(--fg-2); max-width: 64ch; margin: 0; }
.selector .icon { width: 18px; height: 18px; flex: none; color: var(--fg); }
.selector .notice { display: flex; gap: var(--space-3); align-items: flex-start;
  background: var(--surface-warm); border-radius: var(--radius-md); box-shadow: var(--elev-warm);
  padding: var(--space-4) var(--space-5); margin-block: var(--space-6); }
.selector .notice p { font-size: var(--text-sm); color: var(--fg-2); margin: 0; }
.selector .notice strong { font-weight: 500; color: var(--fg); }
.selector .notice-actions { margin-block-start: var(--space-3); display: flex; gap: var(--space-3);
  flex-wrap: wrap; }
.selector .branch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5);
  margin-block: var(--space-6); border: 0; padding: 0; }
.selector .branch-card { position: relative; display: block; margin: 0; }
.selector .branch-card > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.selector .branch-card .surface { height: 100%; background: var(--bg); border: 2px solid transparent;
  border-radius: var(--radius-lg); box-shadow: var(--elev-ring); padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3); cursor: pointer;
  transition: box-shadow var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard); }
.selector .branch-card .surface:hover { box-shadow: var(--elev-raised); }
.selector .branch-card > input:focus-visible + .surface { box-shadow: var(--focus-ring), var(--elev-ring); }
.selector .branch-card > input:checked + .surface { border-color: var(--accent);
  background: var(--surface-warm); box-shadow: var(--elev-warm); }
.selector[data-state="locked"] .branch-card .surface { opacity: 0.55; cursor: not-allowed; }
.selector .branch-card .codes { font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--muted); letter-spacing: 0; }
.selector .branch-card h3 { font-family: var(--font-display); font-weight: 300;
  font-size: var(--text-xl); letter-spacing: var(--tracking-display); margin: 0; }
.selector .branch-card .desc { font-size: var(--text-sm); color: var(--fg-2); }
.selector .card-row { display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-3); }
.selector .facts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.selector .chip { display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); font-weight: 500; color: var(--fg-2); background: var(--surface);
  border-radius: var(--radius-pill); padding: 3px var(--space-3); }
.selector .mods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: var(--space-2); }
.selector .mods li { font-size: var(--text-sm); color: var(--fg-2); display: flex; gap: var(--space-2); }
.selector .mods li::before { content: "\2014"; color: var(--muted); }
.selector .branch-card .cta { margin-block-start: auto; padding-block-start: var(--space-2); }
.selector .select-cta { display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); font-family: var(--font-body); font-size: 15px; font-weight: 500;
  line-height: 1.47; background: var(--bg); color: var(--fg); border-radius: var(--radius-pill);
  padding: 8px 18px; box-shadow: var(--elev-raised); }
.selector .branch-card > input:checked + .surface .select-cta { background: var(--accent);
  color: var(--accent-on); box-shadow: none; }
.selector .tick { position: absolute; top: var(--space-4); right: var(--space-4); width: 26px;
  height: 26px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-on);
  display: none; align-items: center; justify-content: center; font-size: var(--text-sm);
  box-shadow: var(--elev-raised); }
.selector .badge { display: none; align-items: center; gap: var(--space-2); font-size: var(--text-xs);
  font-weight: 500; border-radius: var(--radius-pill); padding: 3px var(--space-3); }
.selector .badge-chosen { background: var(--accent); color: var(--accent-on); }
.selector .badge-ghost { background: var(--surface); color: var(--muted); box-shadow: var(--elev-ring); }
.selector .confirm { background: var(--surface-warm); border-radius: var(--radius-lg);
  box-shadow: var(--elev-warm); padding: var(--space-6); display: flex; flex-direction: column;
  gap: var(--space-4); margin-block: var(--space-6); }
.selector .confirm .row { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; }
.selector .chosen-name { font-family: var(--font-display); font-weight: 300;
  font-size: var(--text-xl); margin: 0; }
.selector .confirm .rule { font-size: var(--text-sm); color: var(--fg-2); margin: 0; }
.selector .actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.selector .progress-note { display: block; font-size: var(--text-sm); color: var(--muted);
  border-top: 1px solid var(--border); padding-block-start: var(--space-4);
  margin-block-start: var(--space-6); }
@media (max-width: 719px) { .selector .branch-grid { grid-template-columns: 1fr; } }

/* ── certificate verification (design/mocks/certificate-verification.html) ─ */
/* One template, five states on the root `data-state` (idle | valid | revoked |
   not-found | input-error; the mock's `superseded` is PARKED, D-17(4)). An
   element that belongs to some states only NAMES them in `data-for`; a state it
   does not name hides it — the branch selector's idiom exactly. Status is never
   colour: marker word + glyph + panel structure carry it (delta 4, WCAG 1.4.1). */
.verify { max-width: 760px; margin-inline: auto; }
.verify[data-state="idle"] [data-for]:not([data-for~="idle"]),
.verify[data-state="valid"] [data-for]:not([data-for~="valid"]),
.verify[data-state="revoked"] [data-for]:not([data-for~="revoked"]),
.verify[data-state="not-found"] [data-for]:not([data-for~="not-found"]),
.verify[data-state="input-error"] [data-for]:not([data-for~="input-error"]) { display: none; }
.verify .verify-head h1 { font-size: var(--text-3xl); margin: var(--space-3) 0; }
.verify .verify-explain { color: var(--fg-2); max-width: 64ch; margin: 0; }
.verify .lookup { margin-block: var(--space-6); }
.verify .lookup-row { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; }
.verify .field { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 340px; }
.verify .field label { font-size: var(--text-sm); font-weight: 500; color: var(--fg); }
.verify .field input { width: 100%; font-family: var(--font-mono); font-size: var(--text-base);
  color: var(--fg); background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  transition: box-shadow var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard); }
.verify .field input::placeholder { color: var(--muted); }
.verify .field input:focus-visible { outline: 2px solid transparent; border-color: var(--fg);
  box-shadow: var(--focus-ring); }
.verify[data-state="input-error"] .field input { border-color: var(--fg); border-width: 2px; }
.verify .field-help { font-size: var(--text-sm); color: var(--muted);
  margin: var(--space-2) 0 0; }
.verify .field-error { display: flex; gap: var(--space-2); align-items: flex-start;
  font-size: var(--text-sm); color: var(--fg); margin: var(--space-3) 0 0; }
.verify .field-error .glyph { font-family: var(--font-mono); color: var(--fg); flex: none; }
.verify .result { display: flex; flex-direction: column; gap: var(--space-5);
  border-radius: var(--radius-lg); padding: var(--space-6); margin-block: var(--space-6);
  background: var(--bg); box-shadow: var(--elev-ring); }
.verify[data-state="valid"] .result { background: var(--surface-warm);
  box-shadow: var(--elev-warm); }
.verify .verdict { display: flex; gap: var(--space-4); align-items: flex-start; }
.verify .verdict-body { display: flex; flex-direction: column; gap: var(--space-2); }
.verify .verdict-body h2 { font-size: var(--text-xl); margin: 0; }
.verify .verdict-mark { display: inline-flex; align-items: center; gap: var(--space-2);
  align-self: flex-start; font-family: var(--font-mono); font-size: var(--text-xs);
  font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em;
  border-radius: var(--radius-pill); padding: 4px var(--space-3); }
.verify .verdict-mark .g { font-size: var(--text-sm); line-height: 1; }
.verify .mark--accent { background: var(--accent); color: var(--accent-on); }
.verify .mark--ghost { background: var(--surface); color: var(--fg); box-shadow: var(--elev-ring); }
.verify .mark--strong { background: var(--bg); color: var(--fg); border: 2px solid var(--fg); }
.verify .verdict-sub { font-size: var(--text-base); color: var(--fg-2); max-width: 60ch; margin: 0; }
.verify .cert { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-6);
  margin: 0; padding-block-start: var(--space-5); border-top: 1px solid var(--border); }
.verify .cert dt { font-size: var(--text-xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); }
.verify .cert dd { margin: 0; font-size: var(--text-base); color: var(--fg); }
.verify .cert dd.id { font-family: var(--font-mono); font-size: var(--text-sm); }
.verify .issuer { margin: 0; padding-block-start: var(--space-5);
  border-top: 1px solid var(--border); font-size: var(--text-base); color: var(--fg-2);
  max-width: 66ch; }
.verify .issuer strong { color: var(--fg); font-weight: 500; }
.verify .how { padding-block-start: var(--space-5); border-top: 1px solid var(--border); }
.verify .how h2 { font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  margin: 0 0 var(--space-2); }
.verify .how p { font-size: var(--text-sm); color: var(--fg-2); max-width: 68ch; margin: 0; }
.verify .how p + p { margin-block-start: var(--space-2); }
.verify .verify-footer { display: flex; gap: var(--space-4); justify-content: space-between;
  flex-wrap: wrap; align-items: baseline; margin-block-start: var(--space-6);
  padding-block-start: var(--space-5); border-top: 1px solid var(--border); }
.verify .verify-footer .coi { font-size: var(--text-sm); color: var(--muted); max-width: 58ch;
  margin: 0; }
.verify .verify-footer .links { display: flex; gap: var(--space-4); flex-wrap: wrap; }
@media (max-width: 559px) {
  .verify .cert { grid-template-columns: 1fr; gap: var(--space-1) 0; }
  .verify .cert dd { margin-block-end: var(--space-3); }
}
/* Print: the single active result, ink-frugal and chrome-free, token-only, so
   a holder can print or PDF this page as a plain, self-describing proof. */
@media print {
  .verify .lookup, .verify .verdict-mark .g, .verify .verify-footer .links { display: none; }
  .verify .result { box-shadow: none; border: 1px solid var(--border); background: var(--bg); }
}

/* ── certificate panel on the enrolled home (D-16(5), D-17(1)) ─────────── */
/* Two nested states, both server-decided. The `.home` root carries
   `data-state` (in-progress | complete) and the panel is a `data-for="complete"`
   element, so nothing about a certificate is shown before 21/21; the panel's own
   `data-state` (pending | issued) then selects the confirm-and-issue face or the
   issued face through `data-when`. Two attribute names, not one: an element
   inside the panel must not be filtered by the ROOT's rule as well. */
.home[data-state="in-progress"] [data-for]:not([data-for~="in-progress"]),
.home[data-state="complete"] [data-for]:not([data-for~="complete"]) { display: none; }
.cert-panel[data-state="pending"] [data-when]:not([data-when~="pending"]),
.cert-panel[data-state="issued"] [data-when]:not([data-when~="issued"]) { display: none; }
.cert-panel { display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--surface-warm); border-radius: var(--radius-lg); box-shadow: var(--elev-warm);
  padding: var(--space-6); margin-block-end: var(--space-8); }
.cert-panel h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--text-xl);
  letter-spacing: var(--tracking-display); margin: 0; }
.cert-panel .cert-facts { display: grid; grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-6); margin: 0; }
.cert-panel .cert-facts dt { font-size: var(--text-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.cert-panel .cert-facts dd { margin: 0; font-size: var(--text-base); color: var(--fg); }
.cert-panel .cert-code { font-family: var(--font-mono); font-size: var(--text-sm); }
.cert-panel .cert-note { font-size: var(--text-sm); color: var(--fg-2); max-width: 60ch; margin: 0; }
.cert-panel .cert-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin: 0; }
.cert-panel form { margin: 0; }
@media (max-width: 559px) { .cert-panel .cert-facts { grid-template-columns: 1fr; } }

/* ── catalogue ────────────────────────────────────────────────────────── */
.cat-header { margin-block-end: var(--space-8); }
.cat-title { font-family: var(--font-display); font-weight: 300;
  font-size: clamp(32px, 5vw, var(--text-4xl)); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display); margin-block-end: var(--space-5); }
.cat-frame { font-size: var(--text-lg); line-height: 1.5; color: var(--fg-2); max-width: 66ch; }
.cat-meta { font-size: var(--text-base); color: var(--fg-2); max-width: 66ch;
  margin-block-start: var(--space-4); }
.cat-ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
  margin-block-start: var(--space-6); }
.cat-sep { color: var(--muted); }
.sum { margin-block-end: var(--space-8); }
.sum table { width: 100%; border-collapse: collapse; }
.sum caption { text-align: left; font-family: var(--font-body); font-weight: 500;
  font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
  margin-block-end: var(--space-3); }
.sum th, .sum td { text-align: left; padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border); }
.sum thead th { font-family: var(--font-body); font-weight: 500; color: var(--muted);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.sum td { font-size: var(--text-base); color: var(--fg-2); }
.sum th[scope=row] { font-weight: 500; color: var(--fg); }
.sum td.num, .sum th.num { text-align: right; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; color: var(--fg-2); }
.sum tr.total th, .sum tr.total td { border-bottom: none; border-top: 2px solid var(--border);
  color: var(--fg); font-weight: 500; }
.branch-strip { margin-block-end: var(--space-8); }
.branch-strip h2, .mod-group h2 { font-family: var(--font-display); font-weight: 300;
  font-size: var(--text-xl); letter-spacing: var(--tracking-display); margin-block-end: var(--space-4); }
.bs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.bs-card { position: relative; height: 100%; background: var(--bg); border: 2px solid transparent;
  border-radius: var(--radius-lg); box-shadow: var(--elev-ring); padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-2); }
.bs-codes { font-family: var(--font-mono); font-size: var(--text-sm);
  font-variant-numeric: tabular-nums; color: var(--muted); letter-spacing: 0; }
.bs-title { font-family: var(--font-display); font-weight: 300; font-size: var(--text-xl);
  line-height: 1.15; letter-spacing: var(--tracking-display); }
.bs-desc { font-size: var(--text-base); color: var(--fg-2); }
.bs-facts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-1); }
.bs-facts .chip { font-family: var(--font-mono); font-size: var(--text-xs);
  font-variant-numeric: tabular-nums; color: var(--fg-2); background: var(--surface);
  border-radius: var(--radius-sm); padding: 2px var(--space-2); }
.mod-group { margin-block-end: var(--space-8); }
.mod-group-head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
  margin-block-end: var(--space-3); }
.mod-list { list-style: none; margin: 0; padding: 0; }
.mod-row { display: grid; grid-template-columns: 28px 3.25rem 1fr auto; column-gap: var(--space-4);
  row-gap: var(--space-1); align-items: start; padding: var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.mod-list li:last-child .mod-row { border-bottom: none; }
a.mod-row { cursor: pointer; }
a.mod-row:hover { background: var(--surface); }
a.mod-row:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.mod-row[data-status=locked] { color: var(--fg-2); }
.mod-mark { grid-row: span 2; width: 24px; height: 24px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center; margin-block-start: 2px; }
.mod-mark svg { width: 14px; height: 14px; display: block; }
.mark-done { background: var(--fg); color: var(--accent-on); }
.mark-current { background: var(--bg); color: var(--fg); box-shadow: inset 0 0 0 2px var(--fg); }
.mark-locked { color: var(--muted); box-shadow: inset 0 0 0 1px var(--border);
  background-color: var(--surface);
  background-image: repeating-linear-gradient(45deg, var(--border) 0, var(--border) 1px,
    transparent 1px, transparent 5px); }
.mod-id { grid-row: span 2; font-family: var(--font-mono); font-size: var(--text-sm);
  font-variant-numeric: tabular-nums; color: var(--fg-2); padding-block-start: var(--space-1); }
.mod-title { font-family: var(--font-body); font-weight: 500; font-size: var(--text-base); color: var(--fg); }
.mod-blurb { font-size: var(--text-base); color: var(--fg-2); grid-column: 3; max-width: 70ch; }
.mod-hours { grid-row: span 2; font-family: var(--font-mono); font-size: var(--text-sm);
  font-variant-numeric: tabular-nums; color: var(--fg-2); text-align: right;
  padding-block-start: var(--space-1); white-space: nowrap; }

/* ── legals (four long-form documents) ────────────────────────────────── */
.doc-index { border-bottom: 1px solid var(--border-soft); background: var(--surface-warm); }
.doc-index-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--space-3) var(--space-6);
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.doc-index nav { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.doc-index a { font-size: 15px; color: var(--fg-2); text-decoration: none;
  border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); border: 1px solid transparent; }
.doc-index a:hover { color: var(--fg); border-color: var(--border); }
.doc-index a.is-current { color: var(--fg); font-weight: 500; background: var(--bg);
  border-color: var(--border); box-shadow: var(--elev-ring); }
.legal-grid { max-width: var(--container-max); margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-12); display: grid;
  grid-template-columns: minmax(0, 720px) 220px; gap: var(--space-12); justify-content: center; }
.legal-main { min-width: 0; }
.legal-doc h1 { font-family: var(--font-display); font-weight: 300; font-size: var(--text-3xl);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-display);
  margin-bottom: var(--space-6); }
.legal-doc h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--text-xl);
  line-height: 1.2; letter-spacing: var(--tracking-display); margin: var(--space-8) 0 var(--space-3);
  scroll-margin-top: var(--space-8); }
.legal-doc h3 { font-family: var(--font-display); font-weight: 300; font-size: var(--text-lg);
  margin: var(--space-6) 0 var(--space-3); }
.legal-doc p { font-size: var(--text-lg); line-height: 1.6; color: var(--fg-2);
  margin-bottom: var(--space-4); }
.legal-doc p.intro { color: var(--fg); }
.legal-doc ul, .legal-doc ol { margin: 0 0 var(--space-4) var(--space-6); color: var(--fg-2);
  font-size: var(--text-lg); line-height: 1.6; }
.legal-doc li { margin-bottom: var(--space-2); }
.legal-doc strong { color: var(--fg); font-weight: 500; }
.legal-doc table { width: 100%; border-collapse: collapse; font-size: var(--text-base);
  margin-bottom: var(--space-4); }
.legal-doc thead th { text-align: left; font-weight: 500; color: var(--fg);
  border-bottom: 1px solid var(--fg); padding: var(--space-3); font-size: var(--text-base); }
.legal-doc tbody td { text-align: left; vertical-align: top; color: var(--fg-2);
  border-bottom: 1px solid var(--border); padding: var(--space-3); line-height: 1.5; }
.toc { align-self: start; position: sticky; top: var(--space-6); }
.toc h2 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: var(--space-3); }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.toc li { margin: 0; }
.toc a { display: block; font-size: var(--text-sm); color: var(--fg-2); text-decoration: none;
  padding: var(--space-1) var(--space-3); margin-left: -1px; border-left: 1px solid transparent;
  line-height: 1.4; }
.toc a:hover { color: var(--fg); }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .who-grid, .works-grid { grid-template-columns: 1fr; }
  .legal-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .toc { position: static; order: -1; border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--surface-warm); padding: var(--space-4) var(--space-5); }
  .toc ol { border-left: 0; }
  .toc a { border-left: 0; margin-left: 0; }
}
@media (max-width: 719px) {
  .bs-grid { grid-template-columns: 1fr; }
  .mod-row { grid-template-columns: 24px 2.75rem 1fr; row-gap: var(--space-1); }
  .mod-hours { grid-row: auto; grid-column: 2 / 4; text-align: left; padding-block-start: 0; }
  .mod-blurb { grid-column: 2 / 4; }
}
@media (max-width: 640px) {
  .site-nav { flex-direction: column; gap: var(--space-2); margin-left: 0; width: 100%; order: 3; }
  .head-cta { margin-left: auto; }
  .sec, .hero { padding: var(--section-y-phone) 0; }
}
@media print {
  .site-head, .doc-index, .toc { display: none; }
  .legal-grid { display: block; padding: 0; }
  .legal-doc p, .legal-doc li { color: var(--fg); }
}

/* ── progress fill steps (generated: width = n / 21, D-13) ──────────── */
.pi-fill.pi-n-0 { width: calc(100% * 0 / 21); }
.pi-fill.pi-n-1 { width: calc(100% * 1 / 21); }
.pi-fill.pi-n-2 { width: calc(100% * 2 / 21); }
.pi-fill.pi-n-3 { width: calc(100% * 3 / 21); }
.pi-fill.pi-n-4 { width: calc(100% * 4 / 21); }
.pi-fill.pi-n-5 { width: calc(100% * 5 / 21); }
.pi-fill.pi-n-6 { width: calc(100% * 6 / 21); }
.pi-fill.pi-n-7 { width: calc(100% * 7 / 21); }
.pi-fill.pi-n-8 { width: calc(100% * 8 / 21); }
.pi-fill.pi-n-9 { width: calc(100% * 9 / 21); }
.pi-fill.pi-n-10 { width: calc(100% * 10 / 21); }
.pi-fill.pi-n-11 { width: calc(100% * 11 / 21); }
.pi-fill.pi-n-12 { width: calc(100% * 12 / 21); }
.pi-fill.pi-n-13 { width: calc(100% * 13 / 21); }
.pi-fill.pi-n-14 { width: calc(100% * 14 / 21); }
.pi-fill.pi-n-15 { width: calc(100% * 15 / 21); }
.pi-fill.pi-n-16 { width: calc(100% * 16 / 21); }
.pi-fill.pi-n-17 { width: calc(100% * 17 / 21); }
.pi-fill.pi-n-18 { width: calc(100% * 18 / 21); }
.pi-fill.pi-n-19 { width: calc(100% * 19 / 21); }
.pi-fill.pi-n-20 { width: calc(100% * 20 / 21); }
.pi-fill.pi-n-21 { width: calc(100% * 21 / 21); }

/* ── branch chosen / not-taken (generated: one pair per branch) ── */
.selector[data-state="selected-pending"][data-selected="doctor"] .branch-card[data-branch="doctor"] .tick,
.selector[data-state="selected-pending"][data-selected="pharmacist"] .branch-card[data-branch="pharmacist"] .tick,
.selector[data-state="committed"][data-selected="doctor"] .branch-card[data-branch="doctor"] .tick,
.selector[data-state="committed"][data-selected="pharmacist"] .branch-card[data-branch="pharmacist"] .tick,
.selector[data-state="switch-blocked"][data-selected="doctor"] .branch-card[data-branch="doctor"] .tick,
.selector[data-state="switch-blocked"][data-selected="pharmacist"] .branch-card[data-branch="pharmacist"] .tick { display: inline-flex; }
.selector[data-state="committed"][data-selected="doctor"] .branch-card[data-branch="doctor"] .badge-chosen,
.selector[data-state="committed"][data-selected="doctor"] .branch-card[data-branch="pharmacist"] .badge-ghost,
.selector[data-state="committed"][data-selected="pharmacist"] .branch-card[data-branch="pharmacist"] .badge-chosen,
.selector[data-state="committed"][data-selected="pharmacist"] .branch-card[data-branch="doctor"] .badge-ghost,
.selector[data-state="switch-blocked"][data-selected="doctor"] .branch-card[data-branch="doctor"] .badge-chosen,
.selector[data-state="switch-blocked"][data-selected="doctor"] .branch-card[data-branch="pharmacist"] .badge-ghost,
.selector[data-state="switch-blocked"][data-selected="pharmacist"] .branch-card[data-branch="pharmacist"] .badge-chosen,
.selector[data-state="switch-blocked"][data-selected="pharmacist"] .branch-card[data-branch="doctor"] .badge-ghost { display: inline-flex; }
.selector[data-state="committed"][data-selected="doctor"] .branch-card[data-branch="pharmacist"] .surface,
.selector[data-state="committed"][data-selected="pharmacist"] .branch-card[data-branch="doctor"] .surface,
.selector[data-state="switch-blocked"][data-selected="doctor"] .branch-card[data-branch="pharmacist"] .surface,
.selector[data-state="switch-blocked"][data-selected="pharmacist"] .branch-card[data-branch="doctor"] .surface { opacity: 0.5; }