/* 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; }
/* WP-M7-05 round 2: the mock's `.shell-body` wrapper and the two Dom-placed
   motifs. Each motif is positioned against the shell body exactly as the mock
   places it, and shown only on the state it was ruled for — the same
   one-attribute state mechanism as everything else on this surface. */
.shell .shell-body { position: relative; }
.shell .motif-head-leaf, .shell .motif-margin-sprig { display: none; }
.shell .motif-head-leaf { position: absolute; top: 118px; right: 469px; width: 47px;
  height: auto; }
.shell .motif-margin-sprig { position: absolute; top: 300px; right: 95px; width: 160px;
  height: auto; }
[data-state="unlocked"] .motif-head-leaf { display: block; }
[data-state="locked-preview"] .motif-margin-sprig { display: block; }
/* The mock's lock card and pager idioms land on the existing gate/nav elements
   (the state CSS and the served templates pin those names). */
.shell .lock-mark { display: block; }
.shell .pager { align-items: center; }
@media (max-width: 640px) {
  .shell .topbar { flex-wrap: wrap; }
  .shell .motif-head-leaf, .shell .motif-margin-sprig { display: none; }
  .shell .learner-name { display: none; }
  .shell .reading { padding: var(--space-6) var(--space-4); }
}

/* ── shared site surface (v2.1 mocks: design/mocks/page-*.html) ────────── */
/* The public pages speak the mocks' vocabulary — masthead/band/card/step/fork/
   teaser/summary/faq/footer.site on the landing, hero/summary/branch-mini/band/
   modrow on the catalogue, doc-shell/doc-index/doc-layout/doc-body on the
   legals. The older generator class names ride alongside on the same elements
   where a served template or a test pins them, so nothing downstream breaks. */
.page { background: var(--bg); color: var(--fg); }
.wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-gutter-phone); }
.cat-wrap { padding-top: var(--space-8); padding-bottom: var(--space-12); }
.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-8); }
.lede { font-size: var(--text-lg); color: var(--fg-2); max-width: 60ch; }
.meta { font-size: var(--text-sm); color: var(--muted); }
.eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); }

/* masthead — the deep ultramarine bar, the one deep surface above the fold */
.site-head.masthead { position: relative; background: var(--surface-deep); border-bottom: 0; }
.masthead .bar { display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--container-gutter-phone); }
.head-inner { display: flex; align-items: center; gap: var(--space-4); width: 100%; flex-wrap: wrap; }
.masthead .spacer { flex: 1; }
.wordmark { font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-lg); letter-spacing: var(--tracking-display); white-space: nowrap; }
.masthead .wordmark { color: var(--accent-on); }
.site-nav { display: none; gap: var(--space-5); }
.masthead .navlink { color: var(--accent-on); opacity: .82; font-size: var(--text-sm);
  text-decoration: none; border-radius: var(--radius-sm); }
.masthead .navlink:hover { opacity: 1; }
.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(--accent-on); }
.signed-in .who { font-weight: 500; }
/* 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: var(--text-lg); font-weight: 500;
  letter-spacing: -0.005em; line-height: 1.2; cursor: pointer; border: 0; text-decoration: none;
  border-radius: var(--radius-pill); padding: var(--space-2) var(--space-6); min-height: 44px;
  transition: background-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard); }
.btn-sm { min-height: 36px; padding: var(--space-1) var(--space-4); font-size: var(--text-sm); }
.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-ring); }
.btn-secondary:hover { background: var(--surface); }
/* The ONE accent glow of the v2.1 contract: the landing hero's enrol button. */
.btn-glow { box-shadow: var(--elev-glow); }
.btn-block { display: flex; width: 100%; }
.btn-warm { background: var(--surface-warm); color: var(--fg);
  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); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.link { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--muted); }
a:focus-visible, summary:focus-visible, details:focus-visible {
  outline: 2px solid transparent; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

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

/* ── landing ──────────────────────────────────────────────────────────── */
section.band { padding: var(--section-y-phone) 0; }
.hero { padding: var(--section-y-phone) 0 var(--space-8); }
.hero h1 { font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-4xl); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display); max-width: 18ch; margin: 0; }
.hero-head { display: flex; flex-direction: column; align-items: flex-start; }
.hero .flourish { width: 220px; max-width: 70%; height: auto; margin-top: var(--space-2); }
.hero .prop { margin-top: var(--space-4); }
/* ── signed-in home (design/mocks/page-home-enrolled.html) ─────────────── */
/* WP-M7-05 round 2: the enrolled `/` is the mock's `main.home` — a head, the
   promoted `.card.continue`, a `.home-grid` of progress + certificate cards and
   the `details.modsum` disclosure. */
.home-head { display: flex; flex-direction: column; gap: var(--space-1); }
.home-head .hi { font-size: var(--text-lg); color: var(--fg-2); margin: 0; }
.home-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.card .k-eyebrow { font-family: var(--font-mono); font-size: var(--text-base);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.card h2 { margin-top: var(--space-2); }
.card hr { border: 0; border-top: 1px solid var(--border-soft); margin: var(--space-5) 0; }
.continue { display: flex; flex-direction: column; gap: var(--space-4); }
.continue .band { display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-base); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); }
.continue .mid { display: flex; flex-direction: column; gap: var(--space-3); }
.modline { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.modcode { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 700;
  color: var(--accent); background: var(--surface-warm); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm); letter-spacing: 0; }
.modtitle { font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-xl); color: var(--fg); }
.lessons { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap;
  gap: var(--space-2) var(--space-4); font-size: var(--text-base); color: var(--fg-2); }
.lessons li { display: inline-flex; align-items: center; gap: var(--space-2); }
.lessons .dot { color: var(--muted); }
.meta-row { font-size: var(--text-sm); color: var(--muted); margin: 0; }
details.modsum { background: var(--bg); border-radius: var(--radius-lg);
  box-shadow: var(--elev-ring); padding: var(--space-2) var(--space-6); }
details.modsum > summary { cursor: pointer; list-style: none; padding: var(--space-4) 0;
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-lg); color: var(--fg); display: flex; align-items: center;
  gap: var(--space-3); }
details.modsum > summary::-webkit-details-marker { display: none; }
details.modsum > summary .chev { margin-left: auto; color: var(--muted);
  transition: transform var(--motion-fast) var(--ease-standard); }
details.modsum[open] > summary .chev { transform: rotate(90deg); }
details.modsum .body { padding: 0 0 var(--space-5); }
/* The Dom-placed flower motif in the continue card (page-home-enrolled,
   mid-course). Geometry is the mock's own. */
.motif-continue-flower { width: 48px; height: auto; margin-left: auto;
  margin-right: calc(var(--space-4) + 60px); align-self: center; position: relative;
  top: -22px; transform: rotate(20deg); }
.sec h2 { font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-3xl); line-height: 1.17; letter-spacing: var(--tracking-display); margin: 0; }
.sec .lede { margin: 0; }
/* cards + grid */
.card { position: relative; background: var(--bg); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--elev-ring); }
.card p { margin: 0; color: var(--fg-2); }
.grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.leaf-sprig { position: absolute; top: calc(-1 * var(--space-3)); right: var(--space-5);
  width: 40px; height: auto; pointer-events: none; }
/* how it works — the wash colour block */
.block { border-radius: var(--radius-lg); padding: var(--space-12); box-shadow: var(--elev-flat); }
.block-wash { background: var(--surface-warm); color: var(--fg); }
.caplist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3);
  grid-template-columns: 1fr; }
.caplist li { display: flex; gap: var(--space-3); margin: 0; color: var(--fg-2); }
.caplist .glyph { color: var(--success); flex: 0 0 auto; margin-top: 3px; }
/* how the course is built — three steps, the middle one forking */
.build { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.step { position: relative; background: var(--bg); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--elev-ring); }
.step p { margin: 0; color: var(--fg-2); }
.step strong { color: var(--fg); font-weight: 600; }
.step .num { display: inline-flex; align-items: center; justify-content: center; width: 32px;
  height: 32px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-on);
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; }
.fork { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.fork .rc { position: relative; }
.fork .branch-card { background: var(--surface); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--elev-ring); height: 100%; }
.fork .branch-card h3 { display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xl); font-weight: 700; line-height: 1.3; letter-spacing: 0; margin: 0; }
.fork .branch-card p { margin: 0; color: var(--fg-2); font-size: var(--text-sm); }
.fork .branch-card .glyph { flex: 0 0 auto; }
/* sample lesson — the lesson-shell teaser frame */
.teaser { position: relative; border-radius: var(--radius-lg); box-shadow: var(--elev-ring);
  overflow: hidden; background: var(--bg); }
.teaser .t-mast { background: var(--surface-deep); padding: var(--space-3) var(--space-5);
  display: flex; align-items: center; gap: var(--space-3); }
.teaser .t-mast .wordmark { font-size: var(--text-sm); color: var(--accent-on); }
.teaser .t-body { padding: var(--space-6); height: 200px; overflow: hidden; position: relative;
  background: var(--surface);
  -webkit-mask-image: linear-gradient(var(--fg), transparent);
  mask-image: linear-gradient(var(--fg), transparent); }
/* price — the enrol summary card */
.pricewrap { max-width: 460px; }
.summary.price-card { background: var(--bg); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--elev-raised); }
.summary.price-card p { margin: 0; color: var(--fg-2); }
.plain-note p { margin: 0; color: var(--fg-2); }
.card.provider { display: flex; gap: var(--space-4); align-items: flex-start; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { cursor: pointer; padding: var(--space-4) 0; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  color: var(--fg); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .caret { font-family: var(--font-mono); color: var(--muted);
  transition: transform var(--motion-fast) var(--ease-standard); }
.faq details[open] summary .caret { transform: rotate(90deg); }
.faq .ans { margin: 0; padding: 0 0 var(--space-4); color: var(--fg-2); font-size: var(--text-sm);
  max-width: 74ch; }

/* ── footer (independence SHORT form + legal links, every page) ────────── */
.site-foot { background: var(--surface-deep); color: var(--accent-on);
  padding: var(--space-12) 0 var(--space-8); border-top: 0; }
.site-foot a { color: var(--accent-on); }
.site-foot .cols { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.site-foot .wordmark { color: var(--accent-on); }
.foot-coi { max-width: 62ch; margin: 0; font-size: var(--text-xs); color: var(--border);
  line-height: 1.55; }
.foot-nav { font-size: var(--text-sm); }
.foot-links { list-style: none; padding: 0; margin: 0; font-size: var(--text-sm); }
.foot-links li { padding: var(--space-1) 0; }
.foot-links a { text-decoration: none; opacity: .82; }
.foot-links a:hover { opacity: 1; }
.foot-legal { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted);
  margin-top: var(--space-6); }

/* ── progress indicator (D-13: the countable path is 21 modules) ───────── */
/* WP-M7-05 round 2: re-skinned to design/mocks/progress-indicator.html — the
   `.linear` block (percentage + count row over a native `<progress class="bar">`)
   and the `.bands` band rows. The `.pi-*` names survive UNDER the mock's
   structure because the CSP-safe width class (`pi-fill pi-n-<n>`) is a contract,
   not a cosmetic: see `_progress_step_css`. */
.linear { display: flex; flex-direction: column; gap: var(--space-2); }
.linear .row { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; }
.linear .pct { font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-2xl); color: var(--fg); line-height: 1;
  font-variant-numeric: tabular-nums; }
.linear .count { font-size: var(--text-base); color: var(--fg-2); }
.pi-track { position: relative; display: block; width: 100%; height: 12px;
  border-radius: var(--radius-pill); background: var(--surface);
  box-shadow: var(--elev-ring); overflow: hidden; }
.pi-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-pill);
  background: var(--accent); }
.pi-track[aria-valuenow="21"] .pi-fill { background: var(--success); }
/* The Dom-placed confetti on the complete state only (WP-M7-05 round 2). The
   mock hangs it off the right edge of the progress block, bottom-aligned; the
   card clips it so the bleed can never open a horizontal scrollbar. */
.progress-card { position: relative; overflow: hidden; }
.motif-complete-confetti { position: absolute; right: -203px; bottom: 25px; width: 392px;
  height: auto; pointer-events: none; }
.bands { list-style: none; margin: var(--space-5) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-3); }
.band-row { display: flex; align-items: center; gap: var(--space-3); }
.band-row .b-ic { width: 28px; height: 28px; flex: none; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); color: var(--muted); background: var(--bg); }
.band-row .b-ic svg { width: 16px; height: 16px; display: block; }
.band-row.done .b-ic { background: var(--success); color: var(--accent-on);
  border-color: var(--success); }
.band-row.active .b-ic { border: 3px solid var(--accent); color: var(--accent); }
.band-row .b-name { font-weight: 600; color: var(--fg); font-size: var(--text-base); }
.band-row .b-count { margin-left: auto; font-size: var(--text-base); color: var(--fg-2);
  font-variant-numeric: tabular-nums; }
.band-row.locked .b-name, .band-row.locked .b-count { color: var(--muted); }
/* 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; position: relative; }
/* The Dom-placed flower on selected-pending. The mock's geometry is absolute
   against its gallery wrapper; anchored here to the selector root, mirrored to
   the right edge so it keeps the same margin relationship at any width. */
.motif-branch-flower { position: absolute; top: 170px; right: 12px; width: 36px;
  height: auto; transform: rotate(355deg); }
.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; }
/* WP-M7-05 round 2: the mock's `dl.details` row model — each fact is a row of
   label + value, so the divider row can sit between two of them. */
.verify .cert { margin: 0; padding-block-start: var(--space-5);
  border-top: 1px solid var(--border); }
.verify .cert > div { display: grid; grid-template-columns: auto 1fr;
  gap: var(--space-3) var(--space-6); padding-block: var(--space-3);
  border-top: 1px solid var(--border-soft); }
.verify .cert > div:first-child { border-top: 0; }
.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); }
/* The Dom-placed divider straddles the certificate ID: a zero-height in-flow row
   that adds no flow space, exactly as the mock defines it. */
.verify .cert > .motif-divider-row { border-top: 0; padding: 0; height: 0;
  overflow: visible; display: block; margin-left: 197px; }
.verify .cert > .motif-divider-row + div { border-top: 0; }
.verify .motif-id-divider { display: block; width: 300px; height: auto;
  position: relative; top: -14px; }
.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 > div { grid-template-columns: 1fr; gap: var(--space-1) 0; }
  /* The divider is wider than a narrow viewport's content column; it is
     decorative, so it goes rather than forcing a scrollbar. */
  .verify .cert > .motif-divider-row { display: none; }
}
/* 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-holder { font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-lg); color: var(--fg); margin: 0; }
.cert-locked { display: flex; align-items: center; gap: var(--space-3);
  background: var(--surface); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); color: var(--fg-2); font-size: var(--text-base); }
.cert-locked .ic { color: var(--muted); flex: none; }
.cert-locked .ic svg { width: 22px; height: 22px; display: block; }
.cert-id-row { display: flex; flex-direction: column; gap: var(--space-1);
  background: var(--surface); border-radius: var(--radius-md); padding: var(--space-4); }
.cert-id-row .lbl { font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.cert-id-row .val { font-family: var(--font-mono); font-size: var(--text-base);
  color: var(--fg-2); word-break: break-all; }
/* The certificate card carries the mock's card idiom on its own selector: the
   backend and its tests locate the panel by `class="cert-panel"` alone, so the
   `.card cert` classes of the mock are folded in here rather than added. */
.cert-panel { display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--bg); border-radius: var(--radius-lg); box-shadow: var(--elev-ring);
  padding: var(--space-6); }
.cert-panel .k-eyebrow { font-family: var(--font-mono); font-size: var(--text-base);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.cert-panel hr { border: 0; border-top: 1px solid var(--border-soft); margin: var(--space-5) 0; }
.cert-panel h2 { font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-2xl); letter-spacing: var(--tracking-display);
  margin: var(--space-2) 0 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 { position: relative; }
.cat-header .inner { max-width: 68ch; }
.cat-title { font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-4xl); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display); margin: 0; }
.cat-frame { margin: 0; }
.cat-meta { margin: 0; }
/* The Dom-placed confetti motif, top-right of the catalogue hero. Its geometry
   is a CLASS, never an inline style — CSP `style-src 'self'` drops those. */
.motif-cat-confetti { position: absolute; top: calc(var(--space-4) + 43px); right: 16px;
  width: 269px; height: auto; pointer-events: none; }
.band-wrap { padding: var(--space-8) 0; }
.sec-head { max-width: 62ch; }
.sec-head h2 { font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-3xl); letter-spacing: var(--tracking-display); margin: 0; }
.summary { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.summary caption { text-align: left; font-size: var(--text-sm); color: var(--muted);
  margin-bottom: var(--space-3); }
.summary th, .summary td { text-align: left; padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-soft); color: var(--fg-2); vertical-align: baseline; }
.summary thead th { color: var(--fg); font-weight: 600; font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: .03em; }
.summary td.num, .summary th.num { font-variant-numeric: tabular-nums; }
.summary tr.total td, .summary tr.total th { border-top: 2px solid var(--border);
  border-bottom: 0; font-weight: 700; color: var(--fg); }
.branch-strip { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.branch-mini { display: block; background: var(--bg); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--elev-ring); }
.branch-mini h4 { font-size: var(--text-lg); font-weight: 600; margin: 0 0 var(--space-1); }
.branch-mini p { margin: 0; color: var(--fg-2); }
.branch-mini .metarow { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm); color: var(--muted); margin-top: var(--space-3); align-items: center; }
.branch-mini .metarow strong { color: var(--fg); font-weight: 600; }
.bs-codes { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.badge { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-mono);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); }
.badge-equal { background: var(--surface-warm); color: var(--fg-2); }
/* module lists — one expandable band per group */
details.band { border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg); overflow: hidden; padding: 0; }
details.band + details.band { margin-top: var(--space-4); }
details.band > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline;
  gap: var(--space-3); flex-wrap: wrap; padding: var(--space-5) var(--space-6); }
details.band > summary::-webkit-details-marker { display: none; }
details.band > summary .band-title { font-family: var(--font-body); font-size: var(--text-xl);
  font-weight: 700; color: var(--fg); }
details.band > summary .band-sub { font-size: var(--text-sm); color: var(--muted); }
details.band > summary .disc { margin-left: auto; font-family: var(--font-mono);
  font-size: var(--text-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
details.band[open] > summary { border-bottom: 1px solid var(--border-soft); }
.modrows { list-style: none; margin: 0; padding: 0; }
.modrows .mod-row { display: grid; grid-template-columns: 3.2rem 1fr auto;
  gap: var(--space-3) var(--space-4);
  align-items: baseline; padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--border-soft); text-decoration: none; color: inherit; }
.modrows li:first-child .mod-row { border-top: 0; }
.modrows a.mod-row { cursor: pointer; }
.modrows a.mod-row:hover { background: var(--surface); }
.modrows a.mod-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mod-id { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent);
  font-variant-numeric: tabular-nums; }
.mod-title { font-weight: 600; color: var(--fg); }
.mod-blurb { font-size: var(--text-sm); color: var(--fg-2); margin: var(--space-1) 0 0;
  max-width: 70ch; }
.mod-end { grid-column: 3; text-align: right; display: flex; flex-direction: column;
  align-items: flex-end; gap: var(--space-2); }
.mod-hours { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg-2);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Status: glyph + WORD, so the state survives greyscale and a colour-blind
   reader alike — never hue on its own. */
.status { display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: .05em; white-space: nowrap; }
.status .ic { width: 16px; height: 16px; flex: none; }
.status-locked { color: var(--muted); }
.status-preview { color: var(--accent); }
.status-done { color: var(--fg-2); }
.status-done .ic { color: var(--success); }
.status-current { color: var(--fg); }
.mod-mark { display: inline-flex; align-items: center; justify-content: center; }
.mod-mark svg { display: block; }
.mark-done { color: var(--success); }
.mark-current { color: var(--fg); }
.mark-locked { color: var(--muted); }
.list-foot { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border-soft);
  font-size: var(--text-sm); color: var(--muted); margin: 0; }

/* App surface (home-enrolled pathway list): the SERVED template emits
   `.mod-group`/`.mod-list`/`.mod-row` with mark + id + title only. Those
   selectors are its own — the public catalogue's `.modrows .mod-row` grid above
   is scoped to its list, so they keep their three-column idiom here. */
.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-group h2 { font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-xl); letter-spacing: var(--tracking-display); margin: 0; }
.mod-list { list-style: none; margin: 0; padding: 0; }
.mod-list .mod-row { display: grid; grid-template-columns: 28px 3.25rem 1fr;
  column-gap: var(--space-4); row-gap: var(--space-1); align-items: center;
  padding: var(--space-4) var(--space-2); border-bottom: 1px solid var(--border-soft);
  text-decoration: none; color: inherit; }
.mod-list li:last-child .mod-row { border-bottom: none; }
.mod-list a.mod-row { cursor: pointer; }
.mod-list a.mod-row:hover { background: var(--surface); }
.mod-list a.mod-row:focus-visible { outline: none; box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm); }
.mod-list .mod-row[data-status=locked] { color: var(--fg-2); }
.mod-list .mod-mark { width: 24px; height: 24px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center; }
.mod-list .mod-mark svg { width: 14px; height: 14px; display: block; }
.mod-list .mark-done { background: var(--fg); color: var(--accent-on); }
.mod-list .mark-current { background: var(--bg); color: var(--fg); box-shadow: inset 0 0 0 2px var(--fg); }
.mod-list .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-list .mod-id { color: var(--fg-2); }

/* ── legals (four long-form documents) ────────────────────────────────── */
.doc-shell { max-width: var(--container-max); margin: 0 auto;
  padding: 0 var(--container-gutter-phone); }
.doc-index { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  padding: var(--space-4) 0; border-bottom: 1px solid var(--border); }
.doc-index .idx-link { font-size: var(--text-sm); font-weight: 500; text-decoration: none;
  color: var(--fg-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); }
.doc-index .idx-link:hover { background: var(--surface); }
.doc-index .idx-link[aria-current="page"] { background: var(--accent); color: var(--accent-on); }
.doc-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-8);
  padding: var(--section-y-phone) 0; }
.legal-main { min-width: 0; }
.doc-body { max-width: 68ch; }
.doc-body h1 { font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-4xl); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display); margin: 0 0 var(--space-6); }
.doc-body h2 { font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-2xl); line-height: 1.2; letter-spacing: var(--tracking-display);
  margin: var(--space-12) 0 var(--space-4); scroll-margin-top: var(--space-8); }
.doc-body h3 { font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-3); }
.doc-body p { margin: 0 0 var(--space-5); color: var(--fg-2); line-height: var(--leading-body); }
.doc-body p.intro { color: var(--fg); font-size: var(--text-lg); }
.doc-body ul, .doc-body ol { margin: 0 0 var(--space-5) var(--space-6); color: var(--fg-2);
  line-height: var(--leading-body); }
.doc-body li { margin-bottom: var(--space-2); }
.doc-body strong { color: var(--fg); font-weight: 600; }
.doc-body table { width: 100%; border-collapse: collapse; font-size: var(--text-base);
  margin-bottom: var(--space-5); }
.doc-body thead th { text-align: left; font-weight: 600; color: var(--fg);
  border-bottom: 1px solid var(--fg); padding: var(--space-3); font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: .03em; }
.doc-body tbody td { text-align: left; vertical-align: top; color: var(--fg-2);
  border-bottom: 1px solid var(--border-soft); padding: var(--space-3); line-height: 1.5; }
/* On-this-page: a disclosure on phones, a sticky rail from 1024px up. Open by
   default, so it is reachable and readable with no script at all. */
.onthispage summary { font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted); cursor: pointer;
  list-style: none; padding: var(--space-2) 0; }
.onthispage summary::-webkit-details-marker { display: none; }
.onthispage .box { background: var(--surface); border-radius: var(--radius-lg);
  padding: var(--space-6); }
.onthispage .otp-head { display: none; font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  margin: 0 0 var(--space-3); }
.onthispage ol { list-style: none; margin: 0; padding-left: 0; font-size: var(--text-sm); }
.onthispage li { margin: 0; }
.onthispage a { display: block; color: var(--fg-2); text-decoration: none;
  padding: var(--space-1) 0; line-height: 1.4; }
.onthispage a:hover { color: var(--fg); }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .masthead .bar { padding: var(--space-4) var(--container-gutter-tablet); }
  .wrap, .doc-shell { padding: 0 var(--container-gutter-tablet); }
  .site-nav { display: flex; }
  section.band { padding: var(--section-y-tablet) 0; }
  .hero { padding: var(--section-y-tablet) 0 var(--space-8); }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .caplist { grid-template-columns: repeat(2, 1fr); }
  .fork { grid-template-columns: repeat(2, 1fr); }
  .build { grid-template-columns: repeat(3, 1fr); }
  .branch-strip { grid-template-columns: 1fr 1fr; }
  .site-foot .cols { grid-template-columns: 2fr 1fr 1fr; }
}
@media (min-width: 1024px) {
  .wrap, .doc-shell { padding: 0 var(--container-gutter-desktop); }
  .masthead .bar { padding: var(--space-4) var(--container-gutter-desktop); }
  section.band { padding: var(--section-y-desktop) 0; }
  .doc-layout { grid-template-columns: 1fr 240px; }
  .onthispage { position: sticky; top: var(--space-6); align-self: start; order: 2; }
  .onthispage summary { display: none; }
  .onthispage .otp-head { display: block; }
  .legal-main { order: 1; }
}
@media (max-width: 719px) {
  .modrows .mod-row { grid-template-columns: 3.2rem 1fr; }
  .mod-end { grid-column: 1 / 3; flex-direction: row; align-items: baseline;
    justify-content: flex-start; gap: var(--space-4); text-align: left; }
  .motif-cat-confetti { display: none; }
}
@media (max-width: 640px) {
  .head-cta { margin-left: auto; }
  .mod-list .mod-row { grid-template-columns: 24px 2.75rem 1fr; }
}
/* Print: the legal documents are the surface anyone will actually print, so the
   chrome goes and the document flows full-width in ink-frugal black. */
@media print {
  .site-head, .doc-index, .onthispage, .site-foot, .motif-cat-confetti { display: none; }
  .doc-layout { display: block; padding: 0; }
  .doc-body { max-width: none; }
  .doc-body p, .doc-body 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; }