/* @qiri-tokens:start */
/* GENERATED by design-system/sync-tokens.mjs from qiri-tokens.css. Do not edit here. */
:root {
  /* ---- Surfaces ---- */
  --color-bg:        #F2F0EB;           /* Snow White (Pantone 11-0602 TCX) — page cream */
  --color-soft:      #ECEAE4;           /* alt sections, gutters, header rows */
  --color-surface:   #FFFFFF;           /* cards, panels, inputs */
  --color-ink:       #272F38;           /* Carbon (Pantone 19-4012 TCX) — primary text + primary button fill */
  --color-ink-muted: rgba(39, 47, 56, 0.65);
  --color-divider:   rgba(39, 47, 56, 0.10);

  /* ---- Brand ---- */
  --color-accent:       #497AB7;        /* Regatta (Pantone 18-4039 TCX) — accents, borders, focus, icons, LARGE text. For normal-size TEXT use --color-accent-text (Regatta is only 4.4:1 on white, under WCAG-AA 4.5). */
  --color-accent-hover: #3A68A0;
  --color-accent-text:  #3A68A0;        /* deeper Regatta for normal-size link/eyebrow/accent TEXT — WCAG-AA on white (5.7), cream (5.0) and soft (4.8). Same hue family; do not use for fills/borders (that stays --color-accent). */
  --color-accent-soft:  #6DA9D2;        /* Alaskan Blue (Pantone 15-4225 TCX) — logo mark, aura, secondary links. Exact Pantone sRGB; do not drift. */
  --color-taupe:        #BDAB9B;        /* Doeskin (Pantone 15-1308 TCX) — warm neutral, brand-mark circles */
  --color-wash-warm:    #C9BDA6;        /* state-bloom ambient wash — warm sand (39°/24%): as warm as taupe but hue-rotated off rose, so it reads clearly warm (not grey) and offsets Alaskan Blue's cyan lean when it glows over dark */
  --color-stone:        #CAC2BA;        /* Pumice Stone (Pantone 14-0002 TCX) — KEPT per Jon 2026-07-12, reserved warm neutral; earmarked for Counter terminal surfaces/dividers. No usages yet — decorative/UI only, never small text on light. */
  --color-castle:       #C8C1AB;        /* Castle Wall (Pantone 14-0108 TCX) — KEPT per Jon 2026-07-12, reserved warm khaki neutral; earmarked for Counter. Close to --color-wash-warm but exact Pantone — don't substitute one for the other. Decorative/UI only. */

  /* ---- Warm zone (patient / human-facing surfaces; cool charcoal stays clinical) ---- */
  --color-warm:        #F4EEE7;         /* taupe-tinted surface — counselling, kiosk, consult */
  --color-warm-border: rgba(189, 171, 155, 0.45);
  --color-warm-ink:    #8A6F58;         /* taupe-toned icon / eyebrow on warm surfaces */

  /* ---- CTA (primary buttons) ---- */
  --color-cta:        #272F38;          /* Carbon (Pantone 19-4012 TCX) — primary button fill (= --color-ink) */
  --color-cta-hover:  #3D434C;          /* lifted charcoal on hover */
  --color-cta-text:   #FFFFFF;          /* primary button label */

  /* ---- Semantic (use these for status; never raw rgba) ---- */
  --color-success: #3A8B6A;             /* clinical green */
  --color-success-text: #32775B;        /* AA success TEXT on success-wash (4.64:1). Text only; fills/borders/large stay --color-success. Mirrors --color-danger-text. */
  --color-warning: #C9861F;             /* true amber / caution (hue ~38deg, retuned 2026-07-15 from copper #C4884A; matches the console amber) */
  --color-warning-text: #965A0C;        /* AA warning TEXT on warning-wash (4.85:1); deep amber. Text only; fills/borders/large stay --color-warning. */
  --color-danger:  #9A2A2A;             /* hard stop (refuse / do-not-dispense) — deepened to out-pop copper caution */
  --color-danger-text: #A23D30;         /* AA danger TEXT on danger-wash chips (5.46:1) — plain #9A2A2A fails as small button text over the tint. Mirrors --color-accent-text. Text only; fills/borders stay --color-danger. */
  --color-info:    #497AB7;             /* = accent (Regatta). For info TEXT use --color-accent-text — same AA caveat as the accent. */

  --success-bg: rgba(58, 139, 106, 0.12);  --success-border: rgba(58, 139, 106, 0.30);
  --warning-bg: rgba(201, 134, 31, 0.14);  --warning-border: rgba(201, 134, 31, 0.30);
  --danger-bg:  rgba(154, 42, 42, 0.12);   --danger-border:  rgba(154, 42, 42, 0.40);
  --info-bg:    rgba(73, 122, 183, 0.10);  --info-border:    rgba(73, 122, 183, 0.30);
  --accent-bg:  rgba(73, 122, 183, 0.10);  --accent-border:  rgba(73, 122, 183, 0.30);

  /* ---- Type families ----
     Playfair = display / hero / big stat numbers.
     Plus Jakarta Sans = body, headings, labels, all UI text.
     JetBrains Mono = IDs, timestamps, code, keycaps. NO Montserrat. */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Spacing (4px rhythm; --space-N == N * 4px) ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 28px;  --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;

  /* ---- Radius ---- */
  --radius-sm:   8px;    /* inputs, small controls (buttons are --radius-pill, the house shape) */
  --radius-md:   12px;   /* cards, chips */
  --radius-lg:   16px;   /* modals, hero surfaces */
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
  --elevation-2: 0 12px 32px -8px rgba(0, 0, 0, 0.12);
  --elevation-3: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* ---- Motion ---- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;  --dur-base: 200ms;  --dur-slow: 320ms;

  /* ---- Compatibility aliases (so existing product CSS keeps resolving) ---- */
  --success: var(--color-success);
  --warning: var(--color-warning);
  --danger:  var(--color-danger);
  --info:    var(--color-info);
  --color-halt:     var(--color-danger);   /* marketing */
  --color-warn:     #C4884A;               /* marketing: decorative copper, pinned when warning went amber (Jon, 2026-07-15) */
  --color-accent-2: #C4884A;               /* marketing + outreach: decorative copper, pinned likewise; warning itself is amber */
  --color-accent-3: var(--color-success);  /* marketing + outreach (green) */
  /* Literal values (NOT var(--*-bg)) — the console's bridge maps the other way
     (--danger-bg: var(--color-danger-bg)), so an alias here would form a cycle
     and the tint would resolve to nothing (pills lose their background). */
  --color-danger-bg:  rgba(154, 42, 42, 0.12);
  --color-success-bg: rgba(58, 139, 106, 0.12);
  --color-info-bg:    rgba(73, 122, 183, 0.10);
  --color-warning-bg: rgba(201, 134, 31, 0.14);
  --shadow:  var(--elevation-1);           /* legacy outreach alias */
  --ease:    var(--ease-standard);
  --dur:     var(--dur-base);
}

:root[data-theme="dark"] {
  /* --------------------------------------------------------------------------
     DARK THEME — designed, not inverted. Same Pantone anchors, recast:
     Carbon (19-4012 TCX) becomes the card ground, Snow White (11-0602 TCX)
     becomes the ink, Alaskan Blue (15-4225 TCX) takes the accent seat
     (Regatta #497AB7 is only 3.07:1 on Carbon — UI/large only, fails as text).
     Every ratio in the comments is recomputed on the dark grounds by
     design-system/check-design-system.mjs — fix the stated value, never
     loosen the check. Type, spacing, radius and motion are colour-independent
     and inherit from :root. OPT-IN per surface via data-theme="dark" on
     <html>; no surface flips on prefers-color-scheme alone.
     -------------------------------------------------------------------------- */

  /* ---- Surfaces ---- */
  --color-bg:        #171C23;           /* deepened Carbon — the page at night; ink on it 15.03:1 */
  --color-soft:      #1F252D;           /* alt sections, gutters, header rows — one step up from the page */
  --color-surface:   #272F38;           /* Carbon (Pantone 19-4012 TCX) — cards/panels ARE the anchor; elevation lightens the surface ladder instead of relying on shadow alone */
  --color-ink:       #F2F0EB;           /* Snow White (Pantone 11-0602 TCX) — the light page becomes the ink; 11.9:1 on surface (AAA — the exact mirror of light's ink-on-page) */
  --color-ink-muted: rgba(242, 240, 235, 0.65);  /* same 65% discipline as light; dark grounds are kinder: 5.95:1 on surface, 7.01:1 on page — AA outright (light's muted is AA-large only) */
  --color-divider:   rgba(242, 240, 235, 0.12);

  /* ---- Brand ---- */
  --color-accent:       #6DA9D2;        /* Alaskan Blue (Pantone 15-4225 TCX) is the dark accent — 5.33:1 on surface / 6.73:1 on page, AA as normal-size text, so accent and accent-text converge on dark. */
  --color-accent-hover: #8FBFDF;        /* hover lifts LIGHTER on dark (6.89:1) — the mirror of light's darkening hover */
  --color-accent-text:  #6DA9D2;        /* = accent: the dark base is already AA, no derived hue needed. Token kept so product CSS referencing --color-accent-text resolves unchanged. 4.56:1 on the accent wash. */
  --color-accent-soft:  #6DA9D2;        /* logo mark, aura — Alaskan Blue is its own soft self on dark */
  --color-taupe:        #BDAB9B;        /* Doeskin (Pantone 15-1308 TCX) — unchanged; 6.1:1 on surface */
  --color-wash-warm:    #CBA980;        /* dark wash: warmer, more saturated doeskin — the light sand token goes grey over near-black (the patient app's shipped dark wash) */
  --color-stone:        #CAC2BA;        /* reserved warm neutrals ride along unchanged — decorative/UI only, same as light */
  --color-castle:       #C8C1AB;

  /* ---- Warm zone (patient / human-facing; dark warm is charcoal, never blue-grey) ---- */
  --color-warm:        #2A2620;         /* warm charcoal — the patient app's shipped dark warm surface ("the pharmacy at night") */
  --color-warm-border: rgba(189, 171, 155, 0.30);
  --color-warm-ink:    #BDAB9B;         /* Doeskin itself is the warm ink on dark — 6.78:1 on the warm surface (AA; light needs the darkened #8A6F58 instead) */

  /* ---- CTA (primary buttons) ---- */
  --color-cta:        #F2F0EB;          /* the CTA inverts: Snow White fill on dark */
  --color-cta-hover:  #E2DED2;          /* hover dims a light button (the mirror of light's lift) */
  --color-cta-text:   #272F38;          /* Carbon label — 11.9:1 (AAA) */

  /* ---- Semantic — bases recomputed for the dark grounds (the deep light bases
     sink into Carbon: danger #9A2A2A reads 1.77:1, illegible). Fills, borders
     Fills and borders use the lifted base; small TEXT on a wash lifts further where
     the base misses AA-normal there (success, warning), and converges to the base
     where it already clears (danger, info). ---- */
  --color-success: #4EA37C;             /* lifted clinical green — 4.42:1 on surface (the light base is 3.28:1 there) */
  --color-success-text: #7CC1A1;        /* AA success TEXT on the dark success-wash over Carbon (4.61:1); the base reads only 3.16:1 on that wash. */
  --color-warning: #DA9A36;             /* lifted true amber, 5.58:1 on surface (the light base reads 4.46:1 there); matches the console dark amber */
  --color-warning-text: #DDA63F;        /* AA warning TEXT on the dark warning-wash over Carbon (4.69:1); the base reads 4.22:1 there. */
  --color-danger:  #F28B82;             /* lifted coral — 5.67:1 on surface, AA as normal text (the patient app's shipped dark danger) */
  --color-danger-text: #F28B82;         /* = danger: the dark base is already AA, so the derived token converges. 5.19:1 on the danger wash over a Carbon card. Kept so --color-danger-text references resolve unchanged. */
  --color-info:    #6DA9D2;             /* = accent (Alaskan Blue on dark). */

  /* Washes keep the DEEP light-theme hues (a light tint goes chalky over Carbon)
     at raised alpha; the lifted text tokens above sit on them at AA / AA-large. */
  --success-bg: rgba(58, 139, 106, 0.22);  --success-border: rgba(58, 139, 106, 0.45);
  --warning-bg: rgba(201, 134, 31, 0.20);  --warning-border: rgba(201, 134, 31, 0.45);
  --danger-bg:  rgba(154, 42, 42, 0.26);   --danger-border:  rgba(154, 42, 42, 0.55);
  --info-bg:    rgba(73, 122, 183, 0.14);  --info-border:    rgba(73, 122, 183, 0.45);
  --accent-bg:  rgba(73, 122, 183, 0.14);  --accent-border:  rgba(73, 122, 183, 0.45);

  /* ---- Elevation — shadows barely read on dark, so they carry more weight;
     the real height cue is the lightening surface ladder above. ---- */
  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.30);
  --elevation-2: 0 12px 32px -8px rgba(0, 0, 0, 0.55);
  --elevation-3: 0 25px 50px -12px rgba(0, 0, 0, 0.75);

  /* ---- Literal *-bg aliases (same no-cycle rule as the light block) ---- */
  --color-danger-bg:  rgba(154, 42, 42, 0.26);
  --color-success-bg: rgba(58, 139, 106, 0.22);
  --color-info-bg:    rgba(73, 122, 183, 0.14);
  --color-warning-bg: rgba(201, 134, 31, 0.20);

  /* Native form controls, scrollbars and UA chrome follow the theme. */
  color-scheme: dark;
}
/* @qiri-tokens:end */

  /* Site short-hands are ALIASES into the canonical token set above — this file
     is a consumer of design-system/qiri-tokens.css, never a second palette.
     (--success/--warning/--danger resolve via the canonical compatibility aliases.) */
  :root{
    --bg:var(--color-bg); --soft:var(--color-soft); --surface:var(--color-surface); --ink:var(--color-ink);
    --muted:var(--color-ink-muted); --divider:var(--color-divider);
    --accent:var(--color-accent); --accent-soft:var(--color-accent-soft); --taupe:var(--color-taupe);
    --display:var(--font-display);
    --body:var(--font-body);
    --mono:var(--font-mono);
  }
  *{box-sizing:border-box}
  /* Keyboard focus gets the house solid ring (same treatment the console ships);
     mouse-only focus stays quiet. Never an alpha wash — that is invisible. */
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
  :focus:not(:focus-visible){outline:none}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.55;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1180px;margin:0 auto;padding:48px 32px 96px}
  /* keep flowing prose at a comfortable measure; diagrams/tables/cards stay full width */
  .wrap>p,.wrap>ul,.wrap>ol{max-width:72ch}
  .brandbar{display:flex;align-items:center;margin-bottom:28px}
  .brandbar img{height:34px;width:auto;display:block}
  header.masthead{border-bottom:1px solid var(--divider);padding-bottom:28px;margin-bottom:40px}
  .eyebrow{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:12px}
  h1{font-family:var(--display);font-weight:500;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.02em;margin:0 0 8px;line-height:1.1}
  .sub{font-size:1.05rem;color:var(--muted)}
  .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
  .pill{font-size:.7rem;font-family:var(--mono);background:var(--surface);border:1px solid var(--divider);border-radius:999px;padding:5px 12px;color:var(--muted)}
  .pill.b{color:var(--accent);border-color:var(--accent)}
  h2{font-family:var(--display);font-weight:500;font-size:1.7rem;letter-spacing:-.015em;margin:64px 0 6px}
  h3{font-size:1.22rem;font-weight: 600;letter-spacing:-.01em;margin:44px 0 8px}
  p.lead{color:var(--muted);margin:0 0 8px}
  .card{background:var(--surface);border:1px solid var(--divider);border-radius:12px;padding:22px 26px;margin:20px 0}
  .diagram{background:var(--surface);border:1px solid var(--divider);border-radius:12px;padding:24px;margin:18px 0;overflow-x:auto}
  .mermaid{font-family:var(--body)!important}
  /* let Mermaid SVGs size from their viewBox so the last note box isn't clipped */
  .diagram svg{display:block;max-width:100%;height:auto!important}
  .callout{border-left:3px solid var(--accent);background:rgba(73,122,183,0.06);border-radius:0 10px 10px 0;padding:16px 20px;margin:18px 0}
  .callout.warn{border-color:var(--danger);background:rgba(154,42,42,0.06)}
  .callout.ok{border-color:var(--success);background:rgba(58,139,106,0.08)}
  /* .callout h3 = same visual rank as .callout h4; the h3 tag is used where the
     callout sits directly under an h2, so heading levels never skip (WCAG). */
  .callout h4,.callout h3{margin:0 0 6px;font-size:.95rem;letter-spacing:0}
  table{width:100%;border-collapse:collapse;margin:14px 0;font-size:.86rem}
  th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--divider);vertical-align:top}
  th{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
  /* mono diet: ALL inline machine data (token names, hexes, paths) wears the mono
     face, not just table cells — the rule the design-system page itself teaches */
  code{font-family:var(--mono);font-size:.78rem;background:var(--soft);padding:2px 6px;border-radius:5px}
  pre code{background:none;padding:0}
  /* component-reference tables: consistent column widths across all three + bold first col */
  table.comp-table{table-layout:fixed}
  table.comp-table th:nth-child(1),table.comp-table td:nth-child(1){width:24%}
  table.comp-table th:nth-child(2),table.comp-table td:nth-child(2){width:26%}
  table.comp-table th:nth-child(3),table.comp-table td:nth-child(3){width:auto}
  table.comp-table th:nth-child(4),table.comp-table td:nth-child(4){width:88px}
  table.comp-table td:nth-child(1){font-weight: 600;color:var(--ink)}
  table.firstcol-bold td:nth-child(1){font-weight: 600;color:var(--ink)}
  table.comp-table td code{word-break:break-word}
  .tag{display:inline-block;font-family:var(--mono);font-size:.62rem;padding:2px 7px;border-radius:5px;font-weight:500;white-space:nowrap}
  .t-p1{background:rgba(58,139,106,0.14);color:var(--success)}
  .t-p2{background:rgba(73,122,183,0.12);color:var(--accent)}
  .t-p3{background:rgba(201,134,31,0.14);color:var(--warning)}
  .t-ph{background:var(--soft);color:var(--muted);border:1px dashed var(--taupe)}
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:18px 0}
  .gcard{background:var(--surface);border:1px solid var(--divider);border-radius:12px;padding:18px 20px}
  .gcard h4{margin:0 0 10px;font-size:.95rem;display:flex;align-items:center;gap:8px}
  .gcard ul{margin:0;padding-left:18px}
  .gcard li{margin:6px 0;font-size:.85rem}
  .gcard.ph{border-style:dashed;border-color:var(--taupe);background:var(--soft)}
  ul.legend{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:18px;font-size:.78rem;color:var(--muted);margin:6px 0 0}
  ul.legend li{display:flex;align-items:center;gap:7px}
  .dot{width:11px;height:11px;border-radius:3px;display:inline-block}
  footer{margin-top:72px;padding-top:24px;border-top:1px solid var(--divider);color:var(--muted);font-size:.8rem}
  a{color:var(--accent)}

  /* ---- overview: phase strip ---- */
  .ov-phases{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:32px 0 20px}
  .ov-phase{background:var(--surface);border:1px solid var(--divider);border-radius:12px;padding:18px 20px}
  .ov-phase--active{border-color:var(--success);background:rgba(58,139,106,0.05)}
  .ov-phase__label{font-size:.7rem;font-family:var(--mono);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:8px;margin-bottom:6px}
  .ov-phase__status{font-family:var(--mono);font-size:.65rem;padding:2px 7px;border-radius:5px;background:rgba(58,139,106,0.14);color:var(--success)}
  .ov-phase__status--planned{background:rgba(73,122,183,0.12);color:var(--accent)}
  .ov-phase__status--future{background:var(--soft);color:var(--muted)}
  .ov-phase__title{font-family:var(--display);font-size:1.15rem;font-weight:500;margin-bottom:5px}
  .ov-phase__desc{font-size:.83rem;color:var(--muted);line-height:1.5}
  /* ---- overview: architecture bets grid ---- */
  .ov-bets{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0 0 40px}
  .ov-bet{background:var(--surface);border:1px solid var(--divider);border-radius:12px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start}
  .ov-bet__icon{flex-shrink:0;width:36px;height:36px;background:var(--soft);border-radius:8px;display:flex;align-items:center;justify-content:center}
  .ov-bet__icon svg{width:18px;height:18px;stroke:var(--accent)}
  .ov-bet strong{display:block;font-size:.9rem;margin-bottom:3px}
  .ov-bet p{margin:0;font-size:.82rem;color:var(--muted);line-height:1.5}
  .ov-bet p code{font-family:var(--mono);font-size:.75rem;background:var(--soft);padding:1px 5px;border-radius:4px}
  @media(max-width:680px){.ov-phases,.ov-bets{grid-template-columns:1fr}}

  /* ---- doc side-nav (matches outreach / console app shell) ---- */
  html{scroll-behavior:smooth}
  /* Reduce Motion is a contract (see the design-system Motion section): the docs
     site honours it too — anchor jumps go instant, the drawer stops sliding. */
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    .docnav,.drawer-backdrop{transition:none!important}
  }
  .app-shell{display:flex;align-items:flex-start}
  .app-shell .wrap{flex:1;min-width:0}
  header.masthead,h2[id]{scroll-margin-top:22px}
  .docnav{position:sticky;top:0;height:100vh;width:260px;flex:0 0 260px;background:var(--surface);border-right:1px solid var(--divider);display:flex;flex-direction:column;padding:22px 12px 16px;overflow-y:auto}
  .docnav-brand{padding:2px 8px 14px}
  .docnav-brand img{height:30px;width:auto;display:block}
  .docnav-eyebrow{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:0 8px 13px;border-bottom:1px solid var(--divider);margin-bottom:8px}
  .docnav-list{display:flex;flex-direction:column;gap:1px;flex:1}
  .docnav-item{position:relative;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:7px;font-family:var(--body);font-size:.84rem;font-weight:500;color:var(--muted);text-decoration:none;line-height:1.25;transition:background .12s,color .12s;cursor:pointer;border:none;background:none;width:100%;text-align:left;box-sizing:border-box}
  .docnav-item:hover{background:var(--soft);color:var(--ink)}
  .docnav-item.active{background:rgba(73,122,183,0.10);color:var(--accent)}
  .docnav-item.active::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:17px;background:var(--accent);border-radius:0 999px 999px 0}
  .docnav-item-label{flex:1;min-width:0}
  .docnav-chevron{flex-shrink:0;width:14px;height:14px;opacity:.45;transition:transform .18s;margin-left:auto}
  .docnav-group.open > .docnav-item .docnav-chevron{transform:rotate(90deg)}
  .docnav-children{display:none;flex-direction:column;gap:1px;padding-left:6px;margin-top:1px}
  .docnav-group.open > .docnav-children{display:flex}
  .docnav-child{position:relative;display:flex;align-items:center;gap:8px;padding:5px 10px 5px 22px;border-radius:6px;font-size:.78rem;font-weight:400;color:var(--muted);text-decoration:none;line-height:1.3;transition:background .12s,color .12s}
  .docnav-child:hover{background:var(--soft);color:var(--ink)}
  .docnav-child.active{color:var(--accent);font-weight:500}
  /* active child is indicated by accent text only — the left tick was removed 2026-06-05 */
  .docnav-child-icon{font-size:.7rem;opacity:.6;flex-shrink:0}
  .docnav-section-label{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:10px 10px 4px;margin-top:4px;border-top:1px solid var(--divider)}
  .docnav-section-label:first-child{border-top:none;margin-top:0}
  .docnav-foot{font-family:var(--mono);font-size:.62rem;color:var(--muted);padding:13px 10px 2px;border-top:1px solid var(--divider);margin-top:8px}
  @media print{ .docnav{display:none} }
  /* ---- Google auth gate ---- */
  #gate{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px}
  .gate-card{background:var(--surface);border:1px solid var(--divider);border-radius:16px;padding:38px 40px;max-width:430px;width:100%;box-shadow:0 20px 60px rgba(39,47,56,0.12);text-align:center}
  .gate-logo{height:46px;width:auto;display:block;margin:0 auto 22px}
  .gate-h{font-family:var(--display);font-weight:500;font-size:1.7rem;margin:8px 0 6px}
  .gate-p{color:var(--muted);font-size:.9rem;margin:0 0 22px;line-height:1.5}
  .gbtn{font-family:var(--body);font-weight:600;font-size:.92rem;display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:999px;border:1px solid var(--divider);background:#fff;color:var(--ink);cursor:pointer}
  .gbtn:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(39,47,56,0.08)}
  .gbtn svg{width:18px;height:18px}
  .gate-err{display:none;color:var(--danger);font-size:.82rem;margin:16px auto 0;max-width:340px;line-height:1.45}
  /* signed-in account + sign-out, pinned to the bottom of the side-nav (outreach style) */
  #userbar{display:none;flex-direction:column;gap:2px;border-top:1px solid var(--divider);padding-top:10px;margin-top:10px}
  .docnav-account{display:flex;align-items:center;padding:4px 12px 8px;font-size:.72rem;color:var(--muted);font-family:var(--mono);min-width:0}
  .docnav-account .account-email{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .docnav-signout{background:none;border:none;cursor:pointer}
  .docnav-signout svg{flex-shrink:0}
  #corner-signout:hover{color:var(--danger)}
  /* ---- diagram zoom ---- */
  .zoom-btn{position:absolute;top:12px;right:12px;font-family:var(--body);font-size:.8rem;font-weight:600;background:var(--accent);color:#fff;border:none;border-radius:8px;padding:8px 15px;cursor:pointer;z-index:5;box-shadow:0 2px 10px rgba(39,47,56,0.20);display:inline-flex;align-items:center;gap:6px}
  .zoom-btn:hover{background:var(--accent-hover,#3A68A0);box-shadow:0 4px 14px rgba(39,47,56,0.28)}
  .diagram-hint{font-size:.74rem;color:var(--muted);font-family:var(--mono);margin:8px 2px 0;display:flex;align-items:center;gap:6px}
  #zoom-modal{display:none;position:fixed;inset:0;z-index:100000;background:rgba(39,47,56,0.985);align-items:center;justify-content:center;flex-direction:column}
  #zoom-stage{width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:grab}
  #zoom-stage > svg{max-width:none!important;max-height:none!important;background:var(--surface);border-radius:14px;padding:24px}
  #zoom-stage .arch,#zoom-stage .kio{background:var(--surface);border-radius:14px;padding:24px}
  .zoom-controls{position:fixed;top:18px;right:18px;display:flex;gap:8px;z-index:10000}
  .zoom-controls button{font-family:var(--body);font-weight:600;font-size:.85rem;background:var(--surface);color:var(--ink);border:1px solid var(--divider);border-radius:8px;padding:8px 13px;cursor:pointer}
  .zoom-hint{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);color:rgba(245,245,240,0.85);font-size:.78rem;font-family:var(--mono);z-index:10000}

  /* ===== platform-style hero architecture ===== */
  .arch{--g:#3A8B6A;--gb:#2f7459;--bcore:#2E517E;--bcore2:#3A68A0;--cop:#C4884A;--cop2:#a9713a;margin:18px 0 6px;font-family:var(--body)}
  .arch *{box-sizing:border-box}
  .arch .ic{width:22px;height:22px;flex:0 0 auto}
  .arch-surfaces{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:10px}
  .scard{background:var(--surface);border:1px solid var(--divider);border-radius:14px;padding:14px 16px;display:flex;gap:11px;align-items:center;box-shadow:0 1px 3px rgba(39,47,56,0.06)}
  .scard .ic{color:var(--accent)}
  .scard.s-green .ic{color:var(--g)}
  .scard b{font-size:.92rem;font-weight: 600;display:block;line-height:1.2}
  .scard small{font-size:.7rem;color:var(--muted);font-family:var(--mono)}
  .arch-down{display:flex;justify-content:center;color:var(--muted);font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;margin:4px 0 12px}
  .arch-platforms{display:grid;grid-template-columns:1fr 1.55fr 1fr;gap:16px;align-items:start}
  .platform{border-radius:18px;padding:14px;color:#fff;box-shadow:0 6px 20px rgba(39,47,56,0.12)}
  .pf-edge{background:linear-gradient(160deg,var(--g),var(--gb))}
  .pf-core{background:linear-gradient(160deg,var(--bcore2),var(--bcore))}
  .pf-ext{background:linear-gradient(160deg,var(--cop),var(--cop2))}
  .platform__hd{display:flex;align-items:center;gap:10px;padding:4px 6px 12px}
  .platform__hd .ic{width:26px;height:26px;color:#fff}
  .platform__hd h4{margin:0;font-size:1rem;font-weight: 600;letter-spacing:.01em;color:#fff}
  .platform__hd .region{display:block;font-size:.64rem;font-weight:500;font-family:var(--mono);color:rgba(255,255,255,0.82);margin-top:2px}
  .pf-sub{font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,0.85);font-weight:700;margin:8px 6px 7px}
  .tiles{display:grid;grid-template-columns:1fr;gap:9px}
  .tiles-2{grid-template-columns:1fr 1fr}
  .tile{background:#fff;border-radius:11px;padding:10px 12px;display:flex;gap:10px;align-items:center;min-height:48px;box-shadow:0 1px 2px rgba(0,0,0,0.10)}
  .tile .ic{color:var(--ink)}
  .tile span{color:var(--ink);font-size:.82rem;font-weight:600;line-height:1.18}
  .tile small{display:block;font-size:.66rem;color:var(--muted);font-weight:500;font-family:var(--mono);margin-top:1px}
  .tile.is-ph{background:rgba(255,255,255,0.55);border:1px dashed rgba(255,255,255,0.85)}
  .tile.is-ph span{color:#43463f}
  .gatebar{margin-top:11px;background:linear-gradient(135deg,#C4584A,#B53A3A);border:1.5px solid #7a2727;border-radius:12px;padding:12px 14px;display:flex;gap:11px;align-items:center;box-shadow:0 3px 12px rgba(181,58,58,0.4)}
  .gatebar .ic{width:26px;height:26px;color:#fff}
  .gatebar b{color:#fff;font-size:.9rem;font-weight: 700;letter-spacing:.02em;display:block}
  .gatebar small{color:rgba(255,255,255,0.92);font-size:.68rem;font-family:var(--mono);display:block;margin-top:2px}
  .bus{margin:16px 0 4px;background:linear-gradient(160deg,#34598a,#243b5a);border-radius:16px;padding:14px 18px;display:flex;align-items:center;justify-content:center;gap:14px;position:relative;box-shadow:0 6px 20px rgba(39,47,56,0.16)}
  .bus__center{display:flex;align-items:center;gap:11px;color:#fff;font-weight: 600;font-size:.92rem;text-align:center}
  .bus__center .ic{width:28px;height:28px;color:#fff}
  .bus .chip{position:static;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.30);color:#fff;font-family:var(--mono);font-size:.64rem;padding:4px 9px;border-radius:999px;white-space:nowrap}
  .arch-updown{display:flex;justify-content:center;color:var(--muted);font-size:1rem;margin:2px 0}
  .data-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:8px}
  .dcard{background:var(--surface);border:1px solid var(--divider);border-radius:14px;padding:14px 12px;text-align:center;box-shadow:0 1px 3px rgba(39,47,56,0.06)}
  .dcard .ic{width:30px;height:30px;color:var(--accent);margin:0 auto 7px;display:block}
  .dcard.is-moat{position:relative;background:rgba(189,171,155,0.16);border-color:var(--taupe)}
  .dcard.is-moat .ic{color:#a98a6c}
  .dcard.is-moat .moat-tag{position:absolute;top:7px;right:8px;font-family:var(--mono);font-size:.5rem;letter-spacing:.1em;font-weight:600;color:#8a6f56;background:rgba(189,171,155,0.30);padding:1px 5px;border-radius:4px}
  .dcard b{font-size:.8rem;font-weight: 600;display:block;line-height:1.18}
  .dcard small{font-size:.66rem;color:var(--muted);font-family:var(--mono)}
  /* in-diagram legend / key — lives inside .arch so it zooms with the diagram */
  .arch-key{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding:0 150px 14px 2px;margin:2px 0 16px;border-bottom:1px solid var(--divider)}
  .ak-group{display:flex;flex-wrap:wrap;align-items:center;gap:9px 15px}
  .ak-label{font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.15em;font-weight:700;color:var(--muted)}
  .ak-item{display:inline-flex;align-items:center;gap:7px;font-size:.75rem;font-weight:500;color:var(--ink);white-space:nowrap}
  .ak-sw{width:18px;height:12px;border-radius:4px;flex:0 0 auto;box-shadow:0 1px 2px rgba(39,47,56,0.12)}
  .ak-sw.sw-p1{background:linear-gradient(160deg,var(--accent),var(--bcore))}
  .ak-sw.sw-p2{background:linear-gradient(160deg,var(--g),var(--gb))}
  .ak-sw.sw-ext{background:linear-gradient(160deg,var(--cop),var(--cop2))}
  .ak-sw.sw-gate{background:linear-gradient(135deg,#C4584A,#B53A3A)}
  .ak-sw.sw-ph{background:var(--soft);border:1px dashed var(--taupe);box-shadow:none}
  .ak-sw.sw-trust{background:rgba(73,122,183,0.16);border:1px solid rgba(73,122,183,0.45);box-shadow:none}
  .ak-gl{display:inline-flex;justify-content:center;width:18px;font-size:1rem;line-height:1;font-weight: 600;color:var(--ink)}
  .ak-gl.ak-star{color:var(--danger);font-size:.9rem}
  .ak-div{width:1px;align-self:stretch;min-height:20px;background:var(--divider)}
  @media (max-width:920px){
    .arch-surfaces{grid-template-columns:1fr 1fr}
    .arch-platforms{grid-template-columns:1fr}
    .data-row{grid-template-columns:1fr 1fr}
    .tiles-2{grid-template-columns:1fr}
    .arch-key{padding-right:2px}
    .arch-key .ak-div{display:none}
  }


  /* ===== kiosk hero ===== */
  .kio{margin:18px 0 6px;font-family:var(--body)}
  .kio *{box-sizing:border-box}
  .kio .ic{width:22px;height:22px;flex:0 0 auto}
  .kio-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:stretch}
  .kio-cab{background:linear-gradient(160deg,#3A68A0,#2E517E);border-radius:18px;padding:14px;color:#fff;box-shadow:0 6px 20px rgba(39,47,56,0.14)}
  .kio-cab__hd{display:flex;align-items:center;gap:10px;padding:4px 6px 12px}
  .kio-cab__hd .ic{width:26px;height:26px;color:#fff}
  .kio-cab__hd h4{margin:0;font-size:1rem;font-weight: 600;color:#fff}
  .kio-cab__hd .region{display:block;font-size:.64rem;font-family:var(--mono);color:rgba(255,255,255,0.82);margin-top:2px}
  .kio-sub{font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,0.85);font-weight:700;margin:6px 6px 7px}
  .kio-tiles{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .kio-tile{background:#fff;border-radius:11px;padding:10px 12px;display:flex;gap:10px;align-items:center;min-height:46px;box-shadow:0 1px 2px rgba(0,0,0,0.10)}
  .kio-tile .ic{color:var(--ink)}
  .kio-tile span{color:var(--ink);font-size:.8rem;font-weight:600;line-height:1.16}
  .kio-tile small{display:block;font-size:.64rem;color:var(--muted);font-weight:500;font-family:var(--mono);margin-top:1px}
  .kio-tile.is-ph{background:rgba(255,255,255,0.55);border:1px dashed rgba(255,255,255,0.85)}
  .kio-tile.is-ph span{color:#272F38}
  .kio-edge{margin-top:10px;background:rgba(255,255,255,0.16);border:1px solid rgba(255,255,255,0.32);border-radius:11px;padding:11px 13px;display:flex;gap:10px;align-items:center}
  .kio-edge .ic{width:24px;height:24px;color:#fff}
  .kio-edge b{color:#fff;font-size:.86rem;font-weight: 600;display:block}
  .kio-edge small{color:rgba(255,255,255,0.88);font-size:.66rem;font-family:var(--mono);display:block;margin-top:1px}
  .kio-side{display:flex;flex-direction:column;gap:12px}
  .kio-node{border-radius:14px;padding:13px 15px;box-shadow:0 1px 3px rgba(39,47,56,0.07)}
  .kio-node .ic{width:24px;height:24px;flex:0 0 auto}
  .kio-node b{font-size:.86rem;font-weight: 600;display:block;line-height:1.18}
  .kio-node small{font-size:.66rem;color:var(--muted);font-family:var(--mono)}
  .kio-node .hd{display:flex;align-items:center;gap:10px}
  .kio-cloud{background:#EEF3FA;border:1px solid #272F38}
  .kio-cloud .ic{color:#272F38}
  .kio-cc{background:#fff;border:1px solid var(--accent)}
  .kio-cc .ic{color:var(--accent)}
  .kio-degrade{background:#FBF1E6;border:1.5px solid var(--warning)}
  .kio-degrade .ic{color:var(--warning)}
  .kio-flow{font-size:.7rem;color:var(--muted);font-family:var(--mono);margin:7px 2px 0;line-height:1.5}
  .kio-flow .ar{color:var(--accent);font-weight: 600}
  .kio-flow .av{color:#B53A3A;font-weight: 600}
  @media (max-width:920px){ .kio-grid{grid-template-columns:1fr} .kio-tiles{grid-template-columns:1fr} }


  /* ===== sequence diagram polish — boxes + fonts only (structure unchanged) ===== */
  .diagram .actor,#zoom-stage .actor{rx:12px;ry:12px;stroke:#497AB7!important;stroke-width:1.4px!important;fill:#FFFFFF!important;filter:drop-shadow(0 1px 2px rgba(39,47,56,0.10));}
  .diagram text.actor,.diagram text.actor>tspan,.diagram .actor-box+text,.diagram g.actor text,#zoom-stage text.actor,#zoom-stage text.actor>tspan,#zoom-stage .actor-box+text,#zoom-stage g.actor text{font-family:'Plus Jakarta Sans',system-ui,sans-serif!important;font-weight:700!important;fill:#272F38!important;}
  .diagram .actor-line,#zoom-stage .actor-line{stroke:#C8C2B8!important;stroke-width:1px!important;}
  .diagram rect.note,#zoom-stage rect.note{rx:10px;ry:10px;fill:#FBF6EF!important;stroke:#D6BD9C!important;stroke-width:1px!important;}
  .diagram .noteText,.diagram .noteText>tspan,.diagram text.noteText,#zoom-stage .noteText,#zoom-stage .noteText>tspan,#zoom-stage text.noteText{font-family:'Plus Jakarta Sans',system-ui,sans-serif!important;font-weight:600!important;fill:#7a5a2e!important;}
  .diagram .messageText,#zoom-stage .messageText{font-family:'JetBrains Mono',ui-monospace,monospace!important;font-size:11px!important;fill:#43484f!important;}
  .diagram .messageLine0,.diagram .messageLine1,#zoom-stage .messageLine0,#zoom-stage .messageLine1{stroke:#8A8F98!important;stroke-width:1.3px!important;}
  .diagram #arrowhead path,.diagram marker path,#zoom-stage #arrowhead path,#zoom-stage marker path{fill:#8A8F98!important;}
  .diagram .loopLine,#zoom-stage .loopLine{stroke:#BDAB9B!important;stroke-width:1.1px!important;}
  .diagram .labelBox,#zoom-stage .labelBox{rx:7px;ry:7px;fill:#F2EDE5!important;stroke:#BDAB9B!important;}
  .diagram .labelText,.diagram .labelText>tspan,.diagram .loopText,.diagram .loopText>tspan,#zoom-stage .labelText,#zoom-stage .labelText>tspan,#zoom-stage .loopText,#zoom-stage .loopText>tspan{font-family:'Plus Jakarta Sans',system-ui,sans-serif!important;font-weight:600!important;fill:#272F38!important;}
  .diagram .sequenceNumber,#zoom-stage .sequenceNumber{fill:#FFFFFF!important;font-family:'JetBrains Mono',monospace!important;}
  .diagram line[class^="actor"],#zoom-stage line[class^="actor"]{stroke:#C8C2B8!important;}

  /* ===== mobile: hamburger + slide-in drawer (matches the outreach tool) ===== */
  .mobile-topbar{display:none}
  .drawer-backdrop{display:none}
  .drawer-close{display:none}
  @media (max-width:900px){
    .app-shell{flex-direction:column;align-items:stretch}
    /* persistent top bar: brand + hamburger */
    .mobile-topbar{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--divider)}
    .mobile-topbar img{height:26px;width:auto;display:block}
    .hamburger{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:none;border-radius:8px;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
    .hamburger:active{background:var(--soft)}
    /* the side-nav becomes an off-canvas drawer sliding in from the left */
    .docnav{display:flex;position:fixed;top:0;left:0;bottom:0;height:100%;width:min(86vw,300px);transform:translateX(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1);box-shadow:0 20px 60px rgba(39,47,56,0.25);z-index:60}
    .app-shell.drawer-open .docnav{transform:translateX(0)}
    /* dim + dismiss layer behind the drawer */
    .drawer-backdrop{display:block;position:fixed;inset:0;background:rgba(39,47,56,0.45);opacity:0;visibility:hidden;transition:opacity .26s ease,visibility .26s ease;z-index:55}
    .app-shell.drawer-open .drawer-backdrop{opacity:1;visibility:visible}
    body.drawer-locked{overflow:hidden}
    /* drawer header: wordmark + close button */
    .docnav-brand{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 14px}
    .drawer-close{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:none;border-radius:8px;color:var(--muted);cursor:pointer;flex-shrink:0}
    .drawer-close:active{background:var(--soft)}
    /* roomier touch targets in the drawer */
    .docnav-item{padding:10px 12px;font-size:.92rem}
    .docnav-child{padding:8px 10px 8px 24px;font-size:.86rem}
    /* offset anchor jumps so headings clear the sticky top bar */
    header.masthead,h2[id]{scroll-margin-top:72px}
  }

  /* ===== phone layout tightening ===== */
  @media (max-width:640px){
    .wrap{padding:22px 15px 56px}
    h2{margin:42px 0 6px}
    h3{margin:28px 0 8px}
    .card{padding:16px 16px}
    .diagram{padding:14px}
    .callout{padding:14px 16px}
    .meta{gap:6px}
    /* let reference tables reflow instead of forcing fixed column widths */
    table{font-size:.8rem}
    th,td{padding:7px 9px}
    td,td code{overflow-wrap:anywhere}
    table.comp-table{table-layout:auto}
    table.comp-table th,table.comp-table td{width:auto!important}
    .bus{flex-wrap:wrap;gap:9px;padding:13px 15px}
    .gate-card{padding:30px 22px}
    .gate-h{font-size:1.5rem}
  }

  /* ===== ecosystem stack diagram (§01) ===== */
  .stack{display:flex;flex-direction:column;gap:7px;margin:18px 0 6px;font-family:var(--body)}
  .stack .layer{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--divider);border-radius:11px;padding:13px 17px;box-shadow:0 1px 3px rgba(39,47,56,0.06)}
  .stack .layer b{font-size:.9rem;font-weight: 600;line-height:1.2;display:block}
  .stack .layer small{display:block;font-size:.66rem;color:var(--muted);font-family:var(--mono);margin-top:2px}
  .stack .layer .who{font-size:.82rem;color:var(--muted);line-height:1.4}
  .stack .layer .who strong{color:var(--ink);font-weight:600}
  .stack .layer.is-qiri{background:linear-gradient(160deg,#3A68A0,#2E517E);border-color:#2E517E;box-shadow:0 6px 20px rgba(39,47,56,0.14)}
  .stack .layer.is-qiri b,.stack .layer.is-qiri .who strong{color:#fff}
  .stack .layer.is-qiri small,.stack .layer.is-qiri .who{color:rgba(255,255,255,0.88)}
  @media (max-width:640px){ .stack .layer{grid-template-columns:1fr;gap:5px;padding:12px 14px} }

  /* ===== Mono diet (per design-system DESIGN.md): JetBrains Mono is a scalpel, not wallpaper.
     Mono stays only on real machine data (code/IDs/URLs in <code>). All label / caption /
     region / pill / tag / chip / hint chrome uses the sans body face. ===== */
  .pill, .tag, .ov-phase__label, .ov-phase__status, .docnav-foot, .docnav-account,
  .diagram-hint, .zoom-hint, .arch-down, .scard small, .platform__hd .region,
  .tile small, .gatebar small, .bus .chip, .dcard small, .dcard.is-moat .moat-tag,
  .ak-label, .kio-cab__hd .region, .kio-tile small, .kio-edge small, .kio-node small,
  .kio-flow, .stack .layer small {
    font-family: var(--body);
  }

/* ---- markdown-doc pages (api / data-model / infrastructure) ---- */
  #sec-backend-api{scroll-margin-top:20px}
  .api-actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 22px}
  .api-actions a{display:inline-flex;align-items:center;gap:7px;font-family:var(--body);font-size:.82rem;font-weight:600;text-decoration:none;color:var(--accent);background:var(--soft);border:1px solid var(--divider);border-radius:8px;padding:8px 13px}
  .api-actions a:hover{background:rgba(73,122,183,0.10)}
  .api-md{font-family:var(--body);color:var(--ink);font-size:.9rem;line-height:1.6;max-width:880px}
  .api-md h1{display:none}  /* the page <h2> already titles each appendix; the markdown's own H1 is a duplicate */
  .api-md h2{font-family:var(--display);font-weight:500;font-size:1.22rem;margin:34px 0 8px;padding-top:16px;border-top:1px solid var(--divider)}
  .api-md h3{font-weight: 600;font-size:1rem;margin:20px 0 6px}
  .api-md h4{font-weight: 600;font-size:.9rem;margin:16px 0 4px;color:var(--muted)}
  .api-md p{margin:0 0 11px}
  .api-md ul,.api-md ol{margin:0 0 11px;padding-left:20px}
  .api-md li{margin:3px 0}
  .api-md a{color:var(--accent)}
  .api-md code{font-family:var(--mono);font-size:.82em;background:var(--soft);border:1px solid var(--divider);border-radius:4px;padding:1px 5px}
  .api-md pre{background:var(--soft);border:1px solid var(--divider);border-radius:10px;padding:14px 16px;overflow:auto;margin:0 0 14px}
  .api-md pre code{background:none;border:none;padding:0;font-size:.78rem;line-height:1.5}
  .api-md table{border-collapse:collapse;width:100%;margin:0 0 16px;font-size:.82rem}
  .api-md th,.api-md td{border:1px solid var(--divider);padding:6px 10px;text-align:left;vertical-align:top}
  .api-md th{background:var(--soft);font-weight: 600}
  .api-md blockquote{margin:0 0 14px;padding:10px 14px;background:var(--soft);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;color:var(--muted)}
  .api-md blockquote p{margin:0 0 6px}
  #sec-data-model{scroll-margin-top:20px}
  /* mermaid diagrams rendered from the fetched markdown get the same card frame as the hero diagrams */
  .api-md .diagram{background:var(--surface);border:1px solid var(--divider);border-radius:12px;padding:20px;margin:18px 0;overflow-x:auto}
  .api-md .mermaid{font-family:var(--body)!important}
  .api-md .mermaid svg{display:block;max-width:100%;height:auto!important}

/* ---- multi-page nav: marker for the page you are on ---- */
.docnav-item.current{color:var(--accent);font-weight:600}
/* status pill inside a section heading */
h1 .tag,h2 .tag{vertical-align:4px;margin-left:10px}

/* ===== Dark theme adoption (2026-07-13) =====
   The tokens flip via the synced :root[data-theme="dark"] block above; a boot
   script in <head> sets data-theme from the OS preference or the stored toggle
   choice. Everything var()-driven follows for free. The rules here are the
   DESIGN decisions the flip alone can't make: UA chrome, the wordmark, the
   theme toggle, and the diagram/gallery "specimen plates" that deliberately
   stay light (their contents are light-theme artwork, not themed UI). */
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
/* toggle button (docnav + mobile topbar); shows the theme you would switch TO */
.theme-toggle{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:none;background:none;border-radius:8px;color:var(--muted);cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.theme-toggle:hover{background:var(--soft);color:var(--ink)}
.theme-toggle .i-sun{display:none}
.theme-toggle .i-moon{display:block}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
/* the desktop side-nav brand row gains the toggle, so it lays out as a row */
.docnav-brand{display:flex;align-items:center;justify-content:space-between}
/* the wordmark's "Qiri" text is Carbon; swap to the Snow-White-text variant */
:root[data-theme="dark"] img[src="/images/qiri-wordmark.svg"]{content:url("/images/qiri-wordmark-dark.svg")}
:root[data-theme="dark"]{
  /* callout washes: the deep hues at raised alpha (the light 0.06 tints vanish on Carbon) */
  & .callout{background:rgba(73,122,183,0.14)}
  & .callout.warn{background:rgba(154,42,42,0.18)}
  & .callout.ok{background:rgba(58,139,106,0.16)}
  /* tag chips ride the semantic wash tokens instead of the hand-tuned light alphas */
  & .t-p1{background:var(--success-bg)}
  & .t-p2{background:var(--accent-bg)}
  & .t-p3{background:var(--warning-bg)}
  /* hero-diagram tiles are WHITE plates by design: pin their text/icons to Carbon
     (var(--ink) flips to Snow White and would vanish on them) */
  & .tile span,& .kio-tile span,& .kio-cloud,& .kio-cc,& .kio-degrade{color:#272F38}
  & .tile .ic,& .kio-tile .ic{color:#272F38}
  & .tile small,& .kio-tile small,& .kio-cloud small,& .kio-cc small,& .kio-degrade small{color:rgba(39,47,56,0.65)}
  & .dcard.is-moat .ic,& .dcard.is-moat .moat-tag{color:var(--taupe)}
  /* mermaid signal/message text sits outside the light actor plates, on the card */
  & .diagram .messageText,& #zoom-stage .messageText{fill:#C9CDD3!important}
  /* the zoom affordance keeps the Alaskan accent fill; Carbon label reads on it */
  & .zoom-btn{color:#272F38;box-shadow:0 2px 10px rgba(0,0,0,0.45)}
  /* the Google sign-in button is a fixed white control in both themes, so its
     label stays Carbon (var(--ink) would flip it to Snow White on white) */
  & .gbtn{color:#272F38;border-color:rgba(39,47,56,0.35)}
}