/* ==========================================================================
   Storm Intelligence design system  (psi.css)  -  a Pax Equitas product
   Owner: Agent A. Contract: ARCHITECTURE.md section 4. No build step, no external fonts/assets.
   Sections: 1 tokens - 2 base - 3 layout - 4 text - 5 buttons - 6 containers - 7 data
             8 forms - 9 feedback - 10 navigation - 11 commerce - 12 developer - 13 storm
             14 global - 15 additions beyond section 4 - 16 responsive - 17 print
   ========================================================================== */

/* Self-hosted Inter (variable, SIL Open Font License 1.1: see static/fonts/Inter-OFL.txt). font-src 'self' only. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/InterVariable.woff2") format("woff2"); }

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  color-scheme: dark;
  /* surface */
  --bg: #08090A; --bg-elev: #0E1013; --bg-alt: #0B0D0F;
  --card: #16181C; --card-2: #1A1D22;
  --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16);
  /* text */
  --text: #F4F5F7; --muted: #A0A4AB; --faint: #8A8F97;
  /* brand + status (all AA on bg/card, see docs/DESIGN-SYSTEM.md) */
  --accent: #7F99FF; --accent-ink: #0A0C12; --accent-soft: rgba(127,153,255,.12);
  --accent-2: #2FD8AE;
  --ok: #2FD8AE;     --ok-soft: rgba(47,216,174,.12);
  --warn: #F5B544;   --warn-soft: rgba(245,181,68,.12);
  --danger: #FF7A7A; --danger-soft: rgba(255,122,122,.12);
  --info: #6CB6FF;   --info-soft: rgba(108,182,255,.12);
  --neutral: #B4B9C2; --neutral-soft: rgba(180,185,194,.10);
  --focus: #FFFFFF;
  --btn-danger-bg: #FF7A7A; --btn-danger-ink: #0A0C12;
  /* elevation */
  --shadow-sm: 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 1px 0 rgba(255,255,255,.04), 0 20px 50px -24px rgba(0,0,0,.7);
  --glow: radial-gradient(60% 60% at 50% 0%, rgba(127,153,255,.16), rgba(47,216,174,.05) 45%, transparent 70%);
  /* type */
  --font: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-base: 1rem; --fs-md: 1.125rem;
  --fs-lg: 1.375rem; --fs-xl: 1.75rem; --fs-2xl: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --fs-3xl: clamp(2.4rem, 1.4rem + 4.4vw, 4.25rem);
  --lh: 1.6; --lh-tight: 1.15;
  /* space (4px base) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 6.5rem;
  /* shape */
  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-pill: 999px;
  --maxw: 1200px; --maxw-text: 68ch; --tap: 44px; --topbar-h: 64px; --sidenav-w: 248px;
  /* motion */
  --ease: cubic-bezier(.2,.7,.2,1); --dur-1: 120ms; --dur-2: 220ms;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #F5F6F8; --bg-elev: #FFFFFF; --bg-alt: #EEF0F4;
    --card: #FFFFFF; --card-2: #EEF0F4;
    --line: rgba(17,20,26,.11); --line-2: rgba(17,20,26,.22);
    --text: #11141A; --muted: #4A505A; --faint: #5E6570;
    --accent: #2F4BC9; --accent-ink: #FFFFFF; --accent-soft: rgba(47,75,201,.08);
    --accent-2: #0B7A5E;
    --ok: #0A6F55; --ok-soft: rgba(11,122,94,.09);
    --warn: #8A5A00; --warn-soft: rgba(138,90,0,.10);
    --danger: #B42318; --danger-soft: rgba(180,35,24,.08);
    --info: #0A5FAE; --info-soft: rgba(10,95,174,.08);
    --neutral: #4A505A; --neutral-soft: rgba(74,80,90,.08);
    --focus: #11141A;
    --btn-danger-bg: #B42318; --btn-danger-ink: #FFFFFF;
    --shadow-sm: 0 1px 2px rgba(17,20,26,.08);
    --shadow: 0 1px 2px rgba(17,20,26,.06), 0 18px 40px -22px rgba(17,20,26,.25);
    --glow: radial-gradient(60% 60% at 50% 0%, rgba(47,75,201,.08), transparent 70%);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F5F6F8; --bg-elev: #FFFFFF; --bg-alt: #EEF0F4;
  --card: #FFFFFF; --card-2: #EEF0F4;
  --line: rgba(17,20,26,.11); --line-2: rgba(17,20,26,.22);
  --text: #11141A; --muted: #4A505A; --faint: #5E6570;
  --accent: #2F4BC9; --accent-ink: #FFFFFF; --accent-soft: rgba(47,75,201,.08);
  --accent-2: #0B7A5E;
  --ok: #0A6F55; --ok-soft: rgba(11,122,94,.09);
  --warn: #8A5A00; --warn-soft: rgba(138,90,0,.10);
  --danger: #B42318; --danger-soft: rgba(180,35,24,.08);
  --info: #0A5FAE; --info-soft: rgba(10,95,174,.08);
  --neutral: #4A505A; --neutral-soft: rgba(74,80,90,.08);
  --focus: #11141A;
  --btn-danger-bg: #B42318; --btn-danger-ink: #FFFFFF;
  --shadow-sm: 0 1px 2px rgba(17,20,26,.08);
  --shadow: 0 1px 2px rgba(17,20,26,.06), 0 18px 40px -22px rgba(17,20,26,.25);
  --glow: radial-gradient(60% 60% at 50% 0%, rgba(47,75,201,.08), transparent 70%);
}

/* 2. BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text); font-family: var(--font);
  font-size: var(--fs-base); line-height: var(--lh); -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; overflow-wrap: break-word;
}
body:has(.test-mode-ribbon) { padding-bottom: 3.25rem; }
h1, h2, h3, h4 { margin: 0 0 var(--s-3); line-height: var(--lh-tight); letter-spacing: -.015em; font-weight: 700; text-wrap: balance; }
h1 { font-size: var(--fs-2xl); letter-spacing: -.025em; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-md); }
h4 { font-size: var(--fs-base); }
p { margin: 0 0 var(--s-4); max-width: var(--maxw-text); }
ul, ol { margin: 0 0 var(--s-4); padding-left: 1.25rem; }
li + li { margin-top: var(--s-1); }
a { color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
img, svg { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 5px var(--accent-soft); }
::selection { background: var(--accent); color: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* 3. LAYOUT ---------------------------------------------------------------- */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.shell:has(> .sidenav) {
  display: grid; grid-template-columns: var(--sidenav-w) minmax(0, 1fr);
  grid-template-rows: auto 1fr; grid-template-areas: "top top" "side main";
}
.shell:has(> .sidenav) > .topbar { grid-area: top; }
.shell:has(> .sidenav) > .sidenav { grid-area: side; }
.shell:has(> .sidenav) > .main { grid-area: main; }
.topbar {
  position: sticky; top: 0; z-index: 40; min-height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--s-4); padding: 0 var(--s-5);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap);
  color: var(--text); text-decoration: none; font-weight: 700; font-size: var(--fs-sm); letter-spacing: .14em; text-transform: uppercase;
}
.brand:hover { text-decoration: none; }
.brand img, .brand svg { width: 22px; height: 22px; flex: none; }
.brand small { font-weight: 500; letter-spacing: .08em; color: var(--muted); font-size: var(--fs-xs); }
.sidenav {
  padding: var(--s-5) var(--s-3); border-right: 1px solid var(--line); background: var(--bg-alt);
  display: flex; flex-direction: column; gap: var(--s-1); overflow-y: auto;
}
.sidenav a {
  display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3);
  border-radius: var(--r-sm); color: var(--muted); text-decoration: none; font-size: var(--fs-sm); font-weight: 500;
  border-left: 3px solid transparent; transition: background var(--dur-1), color var(--dur-1);
}
.sidenav a:hover { background: var(--accent-soft); color: var(--text); }
.sidenav a[aria-current="page"], .sidenav a.active { color: var(--text); background: var(--accent-soft); border-left-color: var(--accent); font-weight: 600; }
.main { padding: var(--s-6) var(--s-5) var(--s-8); min-width: 0; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-5); }
.main > .container { padding: 0; }
.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }
.page-header h1 { margin: 0; }
.page-header p { margin: var(--s-2) 0 0; color: var(--muted); }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.stack { display: flex; flex-direction: column; gap: var(--s-5); }
.stack > * { margin-top: 0; margin-bottom: 0; }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--s-5); grid-template-columns: minmax(0,1fr); }
.split { display: grid; gap: var(--s-6); grid-template-columns: minmax(0,1fr); align-items: start; }
@media (min-width: 640px) { .grid-2, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .split { grid-template-columns: minmax(0,2fr) minmax(0,1fr); } }
@media (min-width: 1100px) { .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.grid-2 > *, .grid-3 > *, .grid-4 > *, .split > *, .stack > * { min-width: 0; }

/* 4. TEXT ------------------------------------------------------------------ */
.eyebrow { display: block; margin: 0 0 var(--s-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.lede { font-size: var(--fs-md); color: var(--muted); max-width: 60ch; line-height: 1.55; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.mono { font-family: var(--font-mono); font-size: .92em; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* 5. BUTTONS --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-5); font: inherit; font-size: var(--fs-sm); font-weight: 600;
  line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--r);
  background: var(--card-2); color: var(--text);
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-1), box-shadow var(--dur-2);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-secondary:hover { background: var(--accent-soft); border-color: var(--accent); }
.btn-ghost { background: transparent; color: var(--accent); padding: 0 var(--s-3); }
.btn-ghost:hover { background: var(--accent-soft); }
.btn-danger { background: var(--btn-danger-bg); color: var(--btn-danger-ink); }
.btn-danger:hover { background: color-mix(in srgb, var(--btn-danger-bg) 88%, #fff); }
.btn-sm { font-size: var(--fs-sm); padding: 0 var(--s-4); border-radius: var(--r-sm); }  /* still 44px tall */
.btn-block { display: flex; width: 100%; }

/* 6. CONTAINERS ------------------------------------------------------------ */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); min-width: 0; }
.card-header { padding: var(--s-5) var(--s-5) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.card-header h2, .card-header h3 { margin: 0; font-size: var(--fs-md); }
.card-body { padding: var(--s-5); }
.card-footer { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line); display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; color: var(--muted); font-size: var(--fs-sm); }
.panel { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-5); }
.divider { border: 0; border-top: 1px solid var(--line); margin: var(--s-5) 0; height: 0; }

/* 7. DATA ------------------------------------------------------------------ */
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.kpi-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.kpi-value { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-delta { font-size: var(--fs-sm); color: var(--muted); }
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.table-wrap:focus-visible { outline-offset: -3px; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 34rem; }
.table caption { text-align: left; padding: var(--s-4) var(--s-4) 0; color: var(--muted); font-size: var(--fs-sm); }
.table th, .table td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.table thead th { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--bg-alt); white-space: nowrap; }
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table tbody tr:hover { background: var(--accent-soft); }
.table .num-cell, .table th.num-cell { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.badge { display: inline-flex; align-items: center; gap: .4em; padding: .15rem .65rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; line-height: 1.5; border: 1px solid currentColor; color: var(--neutral); background: var(--neutral-soft); white-space: nowrap; }
.badge::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; flex: none; }
.badge-neutral { color: var(--neutral); background: var(--neutral-soft); }
.badge-live { color: var(--ok); background: var(--ok-soft); }
.badge-test { color: var(--warn); background: var(--warn-soft); }
.badge-test::before { border-radius: 1px; transform: rotate(45deg); }   /* diamond: not colour alone */
.badge-warn { color: var(--warn); background: var(--warn-soft); }
.badge-danger { color: var(--danger); background: var(--danger-soft); }
.badge-danger::before { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pill { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 var(--s-3); border-radius: var(--r-pill); background: var(--card-2); border: 1px solid var(--line); color: var(--text); font-size: var(--fs-sm); }

/* 8. FORMS ----------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: var(--s-5); max-width: 36rem; }
.field { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.field label, .field > .label { font-size: var(--fs-sm); font-weight: 600; }
.field-hint { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.field-error { font-size: var(--fs-sm); color: var(--danger); font-weight: 600; margin: 0; }
.field-error::before { content: "Error: "; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.input, .select, textarea.input {
  width: 100%; min-height: var(--tap); padding: 0 var(--s-4); font: inherit; font-size: 1rem; /* 16px: no iOS zoom */
  color: var(--text); background: var(--bg-elev); border: 1px solid var(--line-2); border-radius: var(--r);
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
textarea.input { padding: var(--s-3) var(--s-4); min-height: 7rem; resize: vertical; }
.select { appearance: none; padding-right: 2.5rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.input:hover, .select:hover { border-color: var(--muted); }
.input::placeholder { color: var(--faint); }
.input[aria-invalid="true"], .input.is-invalid, .select[aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 3px 0 0 var(--danger); }
.input[disabled], .select[disabled] { opacity: .55; cursor: not-allowed; }
.checkbox { display: flex; align-items: flex-start; gap: var(--s-3); min-height: var(--tap); padding: var(--s-2) 0; cursor: pointer; font-size: var(--fs-sm); }
.checkbox input { width: 1.375rem; height: 1.375rem; margin: 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; padding-top: var(--s-2); }

/* 9. FEEDBACK -------------------------------------------------------------- */
.notice { --n: var(--info); --n-bg: var(--info-soft);
  position: relative; padding: var(--s-4) var(--s-5) var(--s-4) calc(var(--s-5) + 1.5rem); border-radius: var(--r);
  background: var(--n-bg); border: 1px solid color-mix(in srgb, var(--n) 45%, transparent); border-left: 4px solid var(--n); color: var(--text); font-size: var(--fs-sm); }
.notice::before { position: absolute; left: var(--s-4); top: var(--s-4); width: 1.25rem; height: 1.25rem; display: grid; place-items: center; font-weight: 800; font-size: .8rem; line-height: 1; border-radius: 50%; background: var(--n); color: var(--bg); content: "i"; }
.notice-slim { padding: var(--s-2) var(--s-4) var(--s-2) calc(var(--s-4) + 1.75rem); border-left-width: 1px; border-color: var(--line-2); background: var(--card); }
.notice-slim::before { left: var(--s-3); top: 50%; transform: translateY(-50%); width: 1.1rem; height: 1.1rem; }
.notice-slim.notice-warn, .notice-slim.notice-danger { border-color: color-mix(in srgb, var(--n) 55%, transparent); background: var(--n-bg); }
.notice > :last-child { margin-bottom: 0; }
.notice strong { color: var(--text); }
.notice-info { --n: var(--info); --n-bg: var(--info-soft); }
.notice-success { --n: var(--ok); --n-bg: var(--ok-soft); }
.notice-success::before { content: "\2713"; }
.notice-warn { --n: var(--warn); --n-bg: var(--warn-soft); }
.notice-warn::before { content: "!"; border-radius: 3px; }
.notice-danger { --n: var(--danger); --n-bg: var(--danger-soft); }
.notice-danger::before { content: "\00d7"; font-size: 1rem; }
.empty-state { text-align: center; padding: var(--s-8) var(--s-5); border: 1px dashed var(--line-2); border-radius: var(--r-lg); background: var(--bg-alt); }
.empty-state > * { margin-left: auto; margin-right: auto; }
.empty-state img, .empty-state svg { width: 96px; height: 96px; margin-bottom: var(--s-4); opacity: .9; }
.empty-state h2, .empty-state h3 { font-size: var(--fs-lg); }
.empty-state p { color: var(--muted); }
.toast { position: fixed; top: calc(var(--topbar-h) + var(--s-3)); right: var(--s-4); z-index: 70; max-width: min(26rem, calc(100vw - 2rem));
  padding: var(--s-4) var(--s-5); border-radius: var(--r); background: var(--card-2); color: var(--text); border: 1px solid var(--line-2); border-left: 4px solid var(--ok);
  box-shadow: var(--shadow); font-size: var(--fs-sm); animation: psi-toast var(--dur-2) var(--ease); }
@keyframes psi-toast { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* 10. NAVIGATION ----------------------------------------------------------- */
.tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; margin-bottom: var(--s-5); scrollbar-width: none; }
.tab { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-4); color: var(--muted); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--text); text-decoration: none; }
.tab-active, .tab[aria-selected="true"], .tab[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin: 0 0 var(--s-4); font-size: var(--fs-sm); color: var(--muted); }
.breadcrumb li + li { margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: var(--s-2); color: var(--faint); }
.breadcrumb a { color: var(--muted); display: inline-flex; align-items: center; min-height: 1.75rem; }
.breadcrumb [aria-current="page"] { color: var(--text); }
.stepper { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); list-style: none; padding: 0; margin: 0 0 var(--s-6); counter-reset: step; }
.stepper li + li { margin: 0; }
.step { counter-increment: step; display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); color: var(--muted); min-height: var(--tap); }
.step::before { content: counter(step); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--line-2); font-weight: 700; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.step-done { color: var(--text); }
.step-done::before { content: "\2713"; background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.step-current { color: var(--text); font-weight: 600; }
.step-current::before { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* 11. COMMERCE ------------------------------------------------------------- */
.pricing { display: grid; gap: var(--s-5); grid-template-columns: minmax(0,1fr); align-items: stretch; }
@media (min-width: 760px) { .pricing { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.plan { position: relative; display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-6) var(--s-5); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.plan-featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); background: linear-gradient(180deg, var(--accent-soft), var(--card) 40%); }
.plan-name { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0; }
.plan-price { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; margin: 0; }
.plan-price small { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan-features { list-style: none; padding: 0; margin: 0; flex: 1; display: flex; flex-direction: column; gap: var(--s-3); font-size: var(--fs-sm); }
.plan-features li { margin: 0; padding-left: 1.6rem; position: relative; }
.plan-features li::before { content: "\2713"; position: absolute; left: 0; color: var(--ok); font-weight: 800; }

/* 12. DEVELOPER ------------------------------------------------------------ */
.code { font-family: var(--font-mono); font-size: .875em; padding: .15em .45em; border-radius: 6px; background: var(--card-2); border: 1px solid var(--line); overflow-wrap: anywhere; }
.codeblock { position: relative; margin: 0 0 var(--s-4); padding: var(--s-4) var(--s-5); background: var(--bg-elev); border: 1px solid var(--line-2); border-radius: var(--r);
  font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.6; overflow-x: auto; white-space: pre; tab-size: 2; color: var(--text); }
.codeblock .code { background: none; border: 0; padding: 0; }
.kbd { font-family: var(--font-mono); font-size: .8em; padding: .1em .5em; border-radius: 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; background: var(--card-2); }
.copy-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); padding: 0 var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--card-2); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.copy-btn:hover { border-color: var(--accent); }
.copy-btn[data-copied="true"] { color: var(--ok); border-color: var(--ok); }
.codeblock > .copy-btn { position: absolute; top: var(--s-2); right: var(--s-2); }
.endpoint { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-4); background: var(--bg-elev); border: 1px solid var(--line-2); border-radius: var(--r); font-family: var(--font-mono); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.method-get, .method-post, .method-delete { display: inline-block; min-width: 4.5rem; text-align: center; padding: .15rem .6rem; border-radius: 6px; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; border: 1px solid currentColor; }
.method-get { color: var(--info); background: var(--info-soft); }
.method-post { color: var(--ok); background: var(--ok-soft); }
.method-delete { color: var(--danger); background: var(--danger-soft); }

/* 13. STORM ---------------------------------------------------------------- */
/* Severity is never colour alone: every chip carries a text label (author) and a distinct shape glyph (here).
   Chips: <span class="sev-warning">Warning</span>. On .timeline-item / .card / tr the same classes colour the rail. */
.sev-warning   { --sev: var(--danger);  --sev-bg: var(--danger-soft); }
.sev-watch     { --sev: var(--warn);    --sev-bg: var(--warn-soft); }
.sev-advisory  { --sev: var(--info);    --sev-bg: var(--info-soft); }
.sev-statement { --sev: var(--neutral); --sev-bg: var(--neutral-soft); }
span.sev-warning, span.sev-watch, span.sev-advisory, span.sev-statement,
.badge.sev-warning, .badge.sev-watch, .badge.sev-advisory, .badge.sev-statement {
  display: inline-flex; align-items: center; gap: .45em; padding: .15rem .7rem; border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5;
  color: var(--sev); background: var(--sev-bg); border: 1px solid var(--sev); white-space: nowrap;
}
span.sev-warning::before, span.sev-watch::before, span.sev-advisory::before, span.sev-statement::before { content: ""; width: .75em; height: .75em; background: currentColor; flex: none; }
span.sev-warning::before  { clip-path: polygon(50% 0, 100% 100%, 0 100%); }                 /* triangle */
span.sev-watch::before    { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }          /* diamond */
span.sev-advisory::before { border-radius: 50%; }                                            /* circle */
span.sev-statement::before{ clip-path: inset(10%); }                                         /* square */
.timeline { list-style: none; margin: 0; padding: 0 0 0 var(--s-5); position: relative; }
.timeline::before { content: ""; position: absolute; left: 5px; top: .5rem; bottom: .5rem; width: 2px; background: var(--line-2); }
.timeline-item { position: relative; padding: 0 0 var(--s-5) var(--s-4); margin: 0; --sev: var(--accent); }
.timeline-item::before { content: ""; position: absolute; left: calc(-1 * var(--s-5) - 1px); top: .4rem; width: 12px; height: 12px; border-radius: 50%; background: var(--sev); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--sev); }
.timeline-item > time, .timeline-item .time { display: block; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; margin-bottom: var(--s-1); }
.card.sev-warning, .card.sev-watch, .card.sev-advisory, .card.sev-statement { border-left: 4px solid var(--sev); }
tr.sev-warning td:first-child, tr.sev-watch td:first-child, tr.sev-advisory td:first-child, tr.sev-statement td:first-child { box-shadow: inset 4px 0 0 var(--sev); }
.source-note { font-size: var(--fs-xs); color: var(--muted); border-top: 1px solid var(--line); padding-top: var(--s-3); margin-top: var(--s-5); max-width: 80ch; line-height: 1.55; }
.coverage-complete, .coverage-partial, .coverage-unavailable { display: inline-flex; align-items: center; gap: .45em; padding: .15rem .7rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; border: 1px solid currentColor; line-height: 1.5; }
.coverage-complete { color: var(--ok); background: var(--ok-soft); }
.coverage-complete::before { content: "\25CF"; }       /* full dot */
.coverage-partial { color: var(--warn); background: var(--warn-soft); }
.coverage-partial::before { content: "\25D0"; }        /* half dot */
.coverage-unavailable { color: var(--neutral); background: var(--neutral-soft); border-style: dashed; }
.coverage-unavailable::before { content: "\25CB"; }    /* empty dot */

/* 14. GLOBAL --------------------------------------------------------------- */
.test-mode-ribbon {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; display: flex; justify-content: center; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: .6rem var(--s-5) calc(.6rem + env(safe-area-inset-bottom)); text-align: center; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .02em;
  color: var(--text); background: color-mix(in srgb, var(--bg) 88%, var(--warn) 12%);
  border-top: 2px solid var(--warn); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 -10px 30px -12px rgba(0,0,0,.35);
}
.test-mode-ribbon::before { content: "TEST MODE"; padding: .1rem .6rem; border-radius: var(--r-sm); background: var(--warn); color: var(--bg); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em; }
.skip-link { position: absolute; left: var(--s-4); top: -4rem; z-index: 200; padding: var(--s-3) var(--s-5); background: var(--accent); color: var(--accent-ink); border-radius: var(--r); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: var(--s-3); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* 15. ADDITIONS BEYOND ARCHITECTURE section 4 (documented in DESIGN-SYSTEM.md) -- */
.topbar-nav { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; }
.topbar-nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3); color: var(--muted); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; border-radius: var(--r-sm); }
.topbar-nav a:hover, .topbar-nav a[aria-current="page"] { color: var(--text); }
.spacer { flex: 1 1 auto; }
.theme-toggle { min-width: var(--tap); }
.hero { position: relative; text-align: left; padding: var(--s-9) 0 var(--s-8); background: var(--glow); }
.hero h1 { font-size: var(--fs-3xl); letter-spacing: -.035em; max-width: 18ch; }
.hero .lede { margin: 0 0 var(--s-6); }
.hero .cluster { justify-content: flex-start; }
.hero .split { align-items: center; }
@media (min-width: 900px) { .hero .split { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: var(--s-8); } }
.hero .sample-digest { text-align: left; }
.section { padding: var(--s-8) 0; border-top: 1px solid var(--line); }
.section-alt { background: var(--bg-alt); }
.section > .container > h2 { font-size: var(--fs-2xl); letter-spacing: -.025em; }
.site-footer { margin-top: auto; padding: var(--s-7) 0; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm); background: var(--bg-alt); }
.site-footer a { color: var(--muted); }
.sidenav-heading { margin: var(--s-4) var(--s-3) var(--s-1); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.skeleton { display: block; min-height: 1em; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--card-2), var(--line-2), var(--card-2)); background-size: 200% 100%; animation: psi-shimmer 1.6s linear infinite; }
@keyframes psi-shimmer { to { background-position: -200% 0; } }
.spinner { display: inline-block; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: psi-spin .8s linear infinite; vertical-align: -.2em; }
@keyframes psi-spin { to { transform: rotate(360deg); } }
.list-plain { list-style: none; padding: 0; }
.card-link { text-decoration: none; color: inherit; display: block; transition: border-color var(--dur-2), transform var(--dur-2) var(--ease); }
.card-link:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
/* styleguide-only helpers */
.sg-section { padding: var(--s-6) 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s-5); }
.sg-section > * { margin-top: 0; margin-bottom: 0; }
.sg-swatches { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.sg-swatch { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--card); font-size: var(--fs-xs); }
.sg-chip { height: 3.5rem; border-bottom: 1px solid var(--line); }
.sg-swatch p { margin: 0; padding: var(--s-2) var(--s-3); }
.sg-chip-bg { background: var(--bg); } .sg-chip-card { background: var(--card); } .sg-chip-accent { background: var(--accent); }
.sg-chip-ok { background: var(--ok); } .sg-chip-warn { background: var(--warn); } .sg-chip-danger { background: var(--danger); }
.sg-chip-info { background: var(--info); } .sg-chip-neutral { background: var(--neutral); } .sg-chip-text { background: var(--text); } .sg-chip-muted { background: var(--muted); }
.sg-ribbon-demo .test-mode-ribbon { position: static; box-shadow: none; border-radius: var(--r); border: 1px solid var(--warn); }
.sg-toast-demo .toast { position: static; animation: none; }

/* 16. RESPONSIVE ----------------------------------------------------------- */
@media (max-width: 899px) {
  .shell:has(> .sidenav) { grid-template-columns: minmax(0,1fr); grid-template-areas: "top" "side" "main"; }
  .sidenav { flex-direction: row; overflow-x: auto; padding: var(--s-2) var(--s-3); border-right: 0; border-bottom: 1px solid var(--line); gap: var(--s-1); }
  .sidenav a { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; border-radius: var(--r-sm) var(--r-sm) 0 0; }
  .sidenav a[aria-current="page"], .sidenav a.active { border-left-color: transparent; border-bottom-color: var(--accent); }
  .sidenav-heading { display: none; }
}
@media (max-width: 640px) {
  .topbar { padding: 0 var(--s-4); flex-wrap: wrap; row-gap: 0; }
  .main { padding: var(--s-5) var(--s-4) var(--s-7); }
  .container { padding: 0 var(--s-4); }
  .card-body, .card-header, .kpi { padding-left: var(--s-4); padding-right: var(--s-4); }
  .btn-block-mobile, .form-actions .btn { flex: 1 1 100%; }
  .hero { padding: var(--s-8) 0 var(--s-7); }
  .section { padding: var(--s-7) 0; }
  .toast { left: var(--s-3); right: var(--s-3); max-width: none; }
  .page-header { align-items: flex-start; }
  .test-mode-ribbon { font-size: var(--fs-xs); }
}

/* 16b. UX REVIEW FIXES (round 1) ------------------------------------------- */
/* Page header pattern (every page): optional breadcrumb above; .page-header > div (eyebrow, title row or h1, lede) + .page-actions. */
.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.title-row h1 { margin: 0; }
.page-header .title-row + .lede, .page-header .title-row + p { margin-top: var(--s-2); }
.sample-chip { white-space: normal; }
/* Badge variants: roles and states stay distinguishable by text, dot shape and colour. */
.badge-accent { color: var(--accent); background: var(--accent-soft); }
.badge-info { color: var(--info); background: var(--info-soft); }
.badge-info::before { border-radius: 1px; }
.btn-danger-outline { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger-outline:hover { background: var(--danger-soft); }
.btn-wrap { white-space: normal; text-align: center; }
/* Empty states: compact, one sentence and one action. */
.empty-state { padding: var(--s-6) var(--s-5); }
.empty-state img, .empty-state svg { width: 64px; height: 64px; margin-bottom: var(--s-3); }
.empty-state h2, .empty-state h3 { margin-bottom: var(--s-2); }
.empty-state p { margin-bottom: var(--s-4); }
.empty-state .cluster { justify-content: center; }
.empty-state > :last-child { margin-bottom: 0; }
/* Onboarding card (dashboard with no territory yet) */
.onboarding .stepper { margin-bottom: var(--s-4); }
.step-todo { color: var(--muted); }
/* Notices carry at most one action link; the footer text under a title row stays calm. */
.details-tech { margin-top: var(--s-4); font-size: var(--fs-sm); }
.details-tech > summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; color: var(--muted); font-weight: 600; }
.details-tech[open] > summary { margin-bottom: var(--s-2); }
.gloss { font-size: var(--fs-sm); color: var(--muted); }
/* Collapsible filter panel */
.filter-panel > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); min-height: var(--tap); }
.filter-panel > summary::after { content: "Show"; margin-left: auto; color: var(--accent); font-size: var(--fs-sm); font-weight: 600; }
.filter-panel[open] > summary::after { content: "Hide"; }
.filter-panel[open] > summary { border-bottom: 1px solid var(--line); }
/* Error summary */
.error-summary ul { margin: var(--s-2) 0 0; padding-left: 1.25rem; }
.error-summary a { color: inherit; font-weight: 600; }
/* Test-mode ribbon: full wording on wide screens, one short line on phones. */
.test-mode-ribbon .ribbon-short { display: none; }
.test-mode-ribbon a { color: inherit; font-weight: 700; }
/* Top bar: tools cluster and the Menu button */
.topbar-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-left: auto; }
.topbar > .menu-toggle { margin-left: auto; }
.topbar-tools form { margin: 0; }
.topbar-public .topbar-nav { margin-left: auto; }
.topbar-public .topbar-nav .btn { margin-left: var(--s-2); }
.theme-toggle { white-space: nowrap; }
.shell:has(> .sidenav) > .sidenav { min-height: calc(100vh - var(--topbar-h)); }
.error-actions { justify-content: center; }
.main .container > .notice { margin-bottom: var(--s-5); }
.table a:not(.btn) { overflow-wrap: anywhere; }
.copy-field { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.copy-field .code { overflow-wrap: anywhere; }
@media (max-width: 899px) {
  .shell:has(> .sidenav) > .sidenav { min-height: 0; }
  /* 44px tap targets for inline links without changing line spacing: padding grows the hit area, negative margin keeps layout. */
  .breadcrumb a, .table a:not(.btn), .timeline a, .notice a, .kpi-delta a, .card-footer a, .small a, .muted a, .field-hint a, .list-plain a:not(.btn), .lede a, .step a, .card-body p a:not(.btn), .card-body li a:not(.btn), .test-mode-ribbon a {
    display: inline-block; padding: .8rem .35rem; margin: -.8rem -.35rem;
  }
  .breadcrumb { row-gap: 0; }
  .breadcrumb li { display: flex; align-items: center; }
  .breadcrumb a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 .35rem; margin: 0 -.35rem; }
  .timeline a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0; margin: 0; }
  .timeline-item > p { margin-bottom: 0; }
}
@media (max-width: 760px) {
  .topbar-public { flex-wrap: wrap; padding-top: var(--s-2); padding-bottom: var(--s-2); row-gap: var(--s-2); }
  .topbar-public .topbar-nav { flex-basis: 100%; flex-direction: column; align-items: stretch; margin-left: 0; padding-bottom: var(--s-2); }
  .topbar-public .topbar-nav a, .topbar-public .topbar-nav button { justify-content: flex-start; width: 100%; }
  .topbar-public .topbar-nav .btn { margin-left: 0; justify-content: center; }
}
@media (max-width: 899px) {
  .topbar { padding-top: var(--s-2); padding-bottom: var(--s-2); row-gap: var(--s-2); }
}
@media (max-width: 640px) {
  .topbar { padding-left: var(--s-4); padding-right: var(--s-4); }
  .topbar-tools { margin-left: 0; flex-basis: 100%; flex-wrap: nowrap; gap: var(--s-1); }
  .topbar-tools > .badge { min-width: 0; max-width: 50%; overflow: hidden; text-overflow: ellipsis; margin-right: auto; }
  .topbar-tools .btn { padding: 0 var(--s-3); }
  .topbar-tools:has(form.cluster) { flex-wrap: wrap; }
  .topbar-tools .role-badge { display: none; }
  .test-mode-ribbon { flex-wrap: nowrap; padding: .45rem var(--s-3) calc(.45rem + env(safe-area-inset-bottom)); gap: var(--s-2); white-space: nowrap; }
  .test-mode-ribbon .ribbon-full { display: none; }
  .test-mode-ribbon .ribbon-short { display: inline; }
  body:has(.test-mode-ribbon) { padding-bottom: 2.75rem; }
  .page-header .page-actions { width: 100%; }
  .page-header .page-actions .btn { flex: 1 1 auto; }
}
/* Stacked card rows for data tables on phones: <table class="table table-stack"> with data-label on every td/th. */
@media (max-width: 599px) {
  .table-wrap:has(.table-stack) { overflow-x: visible; border: 0; background: transparent; }
  .table-stack { min-width: 0; display: block; }
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .table-stack tbody { display: flex; flex-direction: column; gap: var(--s-3); }
  .table-stack tr { position: relative; display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3) var(--s-4); min-height: var(--tap);
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
  .table-stack tbody tr:hover { background: var(--card); }
  .table-stack td, .table-stack th { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: .15rem 0; border: 0; text-align: right; min-width: 0; }
  .table-stack td::before, .table-stack tbody th::before { content: attr(data-label); flex: none; max-width: 45%; text-align: left; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
  .table-stack td[data-label=""]::before, .table-stack td:not([data-label])::before { content: none; }
  .table-stack .num-cell { text-align: right; }
  .table-stack td.cell-action { display: none; }
  /* The row's primary link covers the whole card: one tap target, at least 44px tall. */
  .table-stack a.row-link { display: inline; padding: 0; margin: 0; }
  .table-stack a.row-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
  .table-stack a.row-link:focus-visible { outline: none; }
  .table-stack a.row-link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
  .table-stack .code, .table-stack .mono { overflow-wrap: anywhere; }
}

/* 17. PRINT ---------------------------------------------------------------- */
@media print {
  :root, :root[data-theme="dark"], :root[data-theme="light"] {
    --bg: #fff; --bg-elev: #fff; --bg-alt: #fff; --card: #fff; --card-2: #f2f2f2; --text: #000; --muted: #333; --faint: #444;
    --line: #bbb; --line-2: #888; --accent: #1a2f99; --ok: #075e47; --warn: #6b4500; --danger: #8f1a10; --info: #07498a; --neutral: #333;
    --shadow: none; --shadow-sm: none; --glow: none;
  }
  html, body { background: #fff !important; color: #000 !important; font-size: 11pt; }
  body:has(.test-mode-ribbon) { padding-bottom: 0; }
  .topbar, .sidenav, .skip-link, .menu-toggle, .page-actions, .form-actions, .copy-btn, .toast, .theme-toggle, .site-footer .cluster, .tabs, .btn { display: none !important; }
  .shell, .shell:has(> .sidenav) { display: block; }
  .main { padding: 0; }
  .card, .kpi, .panel, .plan, .notice, .timeline-item, tr { break-inside: avoid; box-shadow: none !important; }
  .card, .kpi, .table-wrap { border: 1px solid #999; }
  .table-wrap { overflow: visible; }
  .table { min-width: 0; font-size: 9.5pt; }
  .test-mode-ribbon { position: static; border: 2px solid #000; background: #fff; color: #000; margin-bottom: 1rem; box-shadow: none; }
  .test-mode-ribbon::before { background: #000; color: #fff; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]:after { content: " (" attr(href) ")"; font-size: 8.5pt; word-break: break-all; }
  .source-note { color: #000; font-size: 8.5pt; border-top: 1px solid #000; }
  h1, h2, h3 { break-after: avoid; }
}

/* Engine report documents (digest, county history) are designed for a light page. Their own dark-mode rules leave
   some light boxes with light text, so embedded frames always render them in the light scheme (UX review r2). */
iframe[sandbox] { color-scheme: light; background: #ffffff; }

/* 18. VISUAL POLISH (design review D3-D18) ---------------------------------------------------------------------- */
html { scrollbar-gutter: stable; }
/* D3 / D28: the app shell is a tool, data is the loudest thing. Public pages keep the big display sizes. */
.shell:has(> .sidenav) h1 { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -.02em; }
.shell:has(> .sidenav) h2 { font-size: var(--fs-lg); letter-spacing: -.01em; }
.shell:has(> .sidenav) .page-header { margin-bottom: var(--s-5); }
.shell:has(> .sidenav) .page-header .eyebrow { margin-bottom: var(--s-1); letter-spacing: .02em; text-transform: none; font-weight: 500; font-size: var(--fs-sm); color: var(--muted); }
.kpi-value { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); font-weight: 700; }
.kpi-label { color: var(--muted); }
/* D16: symmetric gutters, capped width, centred on very wide screens */
.main { padding: var(--s-6) var(--s-6) var(--s-8); }
.main > .container { max-width: 1240px; }
.shell:has(> .sidenav) > .main > .container { margin-left: 0; margin-right: auto; }
@media (min-width: 1700px) { .shell:has(> .sidenav) > .main > .container { margin-left: auto; } }

/* D4: context labels (sample, test, draft, fixture) are neutral and dashed. Amber is kept for real caveats only. */
.badge-test, .badge-context { color: var(--muted); background: transparent; border: 1px dashed var(--line-2); font-weight: 500; }
.badge-test::before, .badge-context::before { border-radius: 1px; transform: rotate(45deg); opacity: .7; }
.badge-context-solid { color: var(--muted); background: var(--neutral-soft); border-color: var(--line-2); }
.draft-note { font-size: var(--fs-xs); color: var(--faint); }
.footnote-mark { color: var(--faint); font-size: .75em; vertical-align: super; text-decoration: none; }
.footnote { font-size: var(--fs-xs); color: var(--faint); margin-top: var(--s-5); }

/* D6: one compact footer, full text on demand */
.site-foot, .source-note { max-width: none; }
.source-note { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); font-size: var(--fs-xs); color: var(--faint); margin-top: var(--s-7); }
.source-note > p { margin: 0; max-width: 90ch; }
.foot-more > summary { cursor: pointer; display: inline-flex; align-items: center; min-height: var(--tap); color: var(--muted); font-weight: 600; }
.foot-more > summary::after { content: " +"; margin-left: .3em; }
.foot-more[open] > summary::after { content: " \2212"; }
.foot-more p { margin: 0 0 var(--s-2); max-width: 90ch; }
.report-doc-note { margin-top: var(--s-5); }

/* D7: a slim, quiet, still unmistakable test ribbon */
.test-mode-ribbon { min-height: 32px; padding: .2rem var(--s-5) calc(.2rem + env(safe-area-inset-bottom)); gap: var(--s-2); flex-wrap: nowrap; white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: .01em; border-top-width: 1px; box-shadow: none; background: color-mix(in srgb, var(--bg-elev) 90%, var(--warn) 10%); }
.test-mode-ribbon::before { padding: 0 .5rem; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; line-height: 1.5; }
.test-mode-ribbon .ribbon-full { display: none; }
.test-mode-ribbon .ribbon-short { display: inline; }
.test-mode-ribbon a { text-underline-offset: .2em; }
body:has(.test-mode-ribbon) { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }

/* D9: quiet danger button */
.btn-danger-quiet { background: transparent; border-color: var(--line-2); color: var(--danger); }
.btn-danger-quiet:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn-sm.btn-danger-quiet, .btn-sm.btn-secondary, .btn-sm.btn-ghost { min-height: 36px; }
.cell-action .btn-sm, td .btn-sm { min-height: 36px; }

/* D10 / D11: prose sections and one paragraph colour rule */
.card p, .card li, .panel p, .panel li { color: var(--muted); }
.card .notice p, .card .notice li { color: inherit; }
.card p strong, .card li strong { color: var(--text); font-weight: 600; }
.prose { max-width: var(--maxw-text); }
.prose p, .prose li { color: var(--muted); line-height: var(--lh); }
.prose h2 { margin-top: var(--s-6); }
.prose h3 { margin-top: var(--s-5); }
.ruled { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3) var(--s-6); padding: var(--s-6) 0; border-top: 1px solid var(--line); }
.ruled > h2, .ruled > h3 { margin: 0; font-size: var(--fs-md); letter-spacing: -.005em; }
.ruled > :not(h2):not(h3) { min-width: 0; }
.ruled p, .ruled li { color: var(--muted); }
.ruled p:last-child { margin-bottom: 0; }
@media (min-width: 860px) { .ruled { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); } }
.faq { border-top: 1px solid var(--line); }
.faq > details { border-bottom: 1px solid var(--line); }
.faq > details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 56px; padding: var(--s-3) 0; font-weight: 600; font-size: var(--fs-md); color: var(--text); }
.faq > details > summary::-webkit-details-marker { display: none; }
.faq > details > summary::after { content: "+"; flex: none; width: 1.5rem; text-align: center; font-size: 1.375rem; font-weight: 400; color: var(--accent); }
.faq > details[open] > summary::after { content: "\2212"; }
.faq > details > :not(summary) { color: var(--muted); max-width: 70ch; }
.faq > details > p:last-child { margin-bottom: var(--s-4); }
.defn { display: grid; gap: var(--s-1) var(--s-5); grid-template-columns: minmax(0, 1fr); margin: 0; }
.defn dt { font-weight: 600; color: var(--text); }
.defn dd { margin: 0 0 var(--s-3); color: var(--muted); }
@media (min-width: 700px) { .defn { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); } .defn dd { margin-bottom: var(--s-4); } }
.grid-2.align-start, .grid-3.align-start { align-items: start; }

/* D12: timeline severity dots, quiet titles */
.timeline-item { --sev: initial; }
.timeline-item::before { background: var(--sev, var(--accent)); box-shadow: 0 0 0 1px var(--sev, var(--accent)); }
.timeline-item.sev-warning::before, .timeline-item[data-sev="warning"]::before { background: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.timeline-item.sev-watch::before, .timeline-item[data-sev="watch"]::before { background: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.timeline-item.sev-advisory::before, .timeline-item[data-sev="advisory"]::before { background: var(--info); box-shadow: 0 0 0 1px var(--info); }
.timeline-item.sev-statement::before, .timeline-item[data-sev="statement"]::before { background: var(--neutral); box-shadow: 0 0 0 1px var(--neutral); }
.timeline a { color: var(--text); font-weight: 600; text-decoration: none; }
.timeline a:hover { color: var(--accent); text-decoration: underline; }
.timeline-item.is-ended { opacity: .7; }

/* D13: usage chart + meter */
.x-quota { display: block; max-height: 10px; }
.meter { height: 8px; border-radius: 4px; background: var(--card-2); border: 1px solid var(--line); overflow: hidden; }
.meter > .meter-fill { display: block; height: 100%; min-width: 2px; border-radius: 2px; background: var(--ok); }
.data-details > summary { cursor: pointer; display: flex; align-items: center; min-height: var(--tap); font-weight: 600; font-size: var(--fs-sm); color: var(--accent); }
.data-details[open] > summary { margin-bottom: var(--s-2); }

/* D8: team table */
.table .member { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.table .member strong { font-weight: 600; color: var(--text); }
.table .member span { font-size: var(--fs-xs); color: var(--muted); overflow-wrap: anywhere; }
.role-edit { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; }
.select-sm { min-height: 36px; padding-left: var(--s-3); font-size: var(--fs-sm); border-radius: var(--r-sm); width: auto; min-width: 7.5rem; }
.cell-actions { text-align: right; white-space: nowrap; }
.table-members { min-width: 40rem; }
@media (max-width: 599px) { .table-members { min-width: 0; } .table-members td:nth-child(2) { white-space: normal; flex-wrap: wrap; } .table-members td.cell-actions:empty { display: none; } .table-stack td.cell-actions { display: flex; justify-content: flex-start; } .table-stack td.cell-actions[data-label=""]::before { content: none; } }
.table-members td { padding-top: var(--s-3); padding-bottom: var(--s-3); }
.table-members td > .badge { margin-right: var(--s-3); }
.inline-form { display: inline; margin: 0; }

/* D22 / D23 small form and code polish */
fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-4); margin: 0; min-width: 0; }
legend { padding: 0 var(--s-2); font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
.codeblock { padding-right: 5rem; scrollbar-width: thin; }

/* D17: grouped navigation with icons */
.nav-icon { width: 18px; height: 18px; flex: none; margin-right: var(--s-3); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.sidenav a[aria-current="page"] .nav-icon { color: var(--accent); opacity: 1; }
.sidenav .sidenav-heading:first-child { margin-top: 0; }
.sidenav-foot { margin-top: auto; padding: var(--s-4) var(--s-3) 0; font-size: var(--fs-xs); color: var(--faint); }
.brand-mark { width: 22px; height: 22px; flex: none; }

/* D14: signup / auth form pages: centred, calmer */
.main .container .stack:has(> form[action="/signup"]), .main .container .stack:has(> form[action="/signin"]) { max-width: 560px; margin-left: auto; margin-right: auto; }
.main .container .stack:has(> form[action="/signup"]) .form, .main .container .stack:has(> form[action="/signin"]) .form { max-width: none; }
.notice-context { --n: var(--muted); --n-bg: transparent; border-style: dashed; border-left-style: dashed; border-color: var(--line-2); color: var(--muted); }
.notice-context::before { content: "i"; background: var(--line-2); color: var(--text); }
.auth-layout { display: grid; gap: var(--s-7); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .auth-layout { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); } }
.topbar-public ~ .main .page-header { justify-content: flex-start; }
.topbar-public ~ .main .page-header .page-actions { margin-left: 0; }

/* D18: mobile */
@media (max-width: 640px) {
  .grid-4:has(> .kpi) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .kpi { padding: var(--s-4); gap: var(--s-1); }
  .kpi-value { font-size: 1.5rem; }
  .kpi-label { font-size: .6875rem; letter-spacing: .08em; }
  .kpi-delta { font-size: var(--fs-xs); }
  .main { padding: var(--s-5) var(--s-4) var(--s-7); }
  .test-mode-ribbon { padding-left: var(--s-3); padding-right: var(--s-3); }
}
.tabs { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: var(--s-6); }
@media (min-width: 900px) { .tabs { -webkit-mask-image: none; mask-image: none; padding-right: 0; } }
@media (max-width: 899px) {
  .sidenav.is-sheet-open {
    position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; top: var(--nav-top, var(--topbar-h)); flex-direction: column; overflow-y: auto;
    padding: var(--s-4) var(--s-4) calc(var(--s-7) + 32px); background: var(--bg); border: 0; gap: var(--s-1); min-height: 0;
  }
  .shell:has(> .sidenav) > .sidenav { min-height: 0; }
  .sidenav a { white-space: normal; border-bottom: 0; border-left: 3px solid transparent; border-radius: var(--r-sm); min-height: 48px; font-size: var(--fs-base); }
  .sidenav a[aria-current="page"], .sidenav a.active { border-left-color: var(--accent); border-bottom-color: transparent; }
  .sidenav-heading { display: block; margin-top: var(--s-5); }
  html.nav-open body { overflow: hidden; }
}
@media (max-width: 899px) { .shell:has(> .sidenav) { grid-template-areas: "top" "main"; } }
/* Tablet top bar: brand and Menu on one row, the tools (workspace, role, theme, sign out) on their own row below. */
@media (min-width: 641px) and (max-width: 899px) {
  .topbar { flex-wrap: wrap; }
  .brand { white-space: nowrap; flex: none; }
  .topbar-tools { flex: 1 0 100%; justify-content: flex-end; margin-left: 0; }
}
.roles-list { display: grid; gap: var(--s-3); padding: 0; margin: 0; }
.roles-list li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: baseline; gap: var(--s-4); margin: 0; color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 599px) { .roles-list li { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); } }
.table-members .role-edit { margin-top: 0; }
.table-members td:nth-child(2) { white-space: nowrap; }
.table-members td:nth-child(2) > .badge { min-width: 5.5rem; justify-content: flex-start; }
@media (min-width: 900px) { .table-members td:nth-child(2) { display: table-cell; } }

.chart-scroll { margin: 0; }
.chart-frame { overflow-x: auto; scrollbar-width: thin; }
@media (max-width: 640px) {
  .chart-frame .x-usage-chart { min-width: 540px; }
  .topbar-tools, .topbar-tools:has(form.cluster) { flex-wrap: wrap; }
  .topbar-tools > .badge { max-width: 100%; margin-right: 0; }
}


/* ===== Final polish pass ================================================== */
body { font-optical-sizing: auto; font-feature-settings: "cv11", "ss03"; }
.kpi-value--sm { font-size: var(--fs-lg); letter-spacing: -.01em; overflow-wrap: anywhere; }
.kpi-value--sm.num { white-space: nowrap; }     /* times stay on one line; a long issuing-office name wraps inside its tile */
.kpi-value--sm .kpi-unit { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); letter-spacing: 0; }
.kpi-dates { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

/* N11: on short pages the footer sits at the bottom of the viewport, no dead floor */
.shell:has(> .sidenav) > .main { display: flex; flex-direction: column; }
.shell:has(> .sidenav) > .main > .container { flex: 1 0 auto; display: flex; flex-direction: column; }
.shell:has(> .sidenav) > .main > .container > .source-note { margin-top: auto; padding-top: var(--s-7); }
.shell:has(> .sidenav) > .main > .container > .stack { margin-bottom: 0; }

/* N12: footer disclosure is a visible, keyboard-friendly control */
.foot-more > summary { font-size: var(--fs-sm); color: var(--muted); text-decoration: underline dotted; text-underline-offset: 4px; list-style: none; }
.foot-more > summary::-webkit-details-marker { display: none; }
.foot-more > summary::after { content: "\25BE"; margin-left: .4em; font-size: .85em; }
.foot-more[open] > summary::after { content: "\25B4"; }
.foot-more > summary:hover { color: var(--text); }
.foot-more > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* N9 / D24: pricing wording and the subscriber's plan summary */
.plan-price--text { font-size: var(--fs-lg); letter-spacing: -.01em; line-height: 1.2; color: var(--muted); font-weight: 650; }
.plan-summary { display: grid; gap: var(--s-3); }
.plan-summary p { margin: 0; max-width: none; }
.plan-summary .plan-features { flex: none; flex-direction: row; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.compare-plans { display: grid; gap: var(--s-4); }
.compare-plans > summary { cursor: pointer; display: inline-flex; align-items: center; min-height: var(--tap); width: fit-content; padding: 0 var(--s-4); border: 1px solid var(--line-2); border-radius: var(--r-sm); font-weight: 600; font-size: var(--fs-sm); list-style: none; }
.compare-plans > summary::-webkit-details-marker { display: none; }
.compare-plans > summary::after { content: "\25BE"; margin-left: .5em; }
.compare-plans[open] > summary::after { content: "\25B4"; }
.compare-plans > summary:hover { border-color: var(--accent); }
.compare-plans[open] > summary { margin-bottom: var(--s-4); }

/* D23: code blocks carry a header bar for the Copy control */
.codeblock:has(> .codeblock-bar) { padding: 0; overflow: hidden; }
.codeblock-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-1) var(--s-2) var(--s-1) var(--s-4); background: var(--card-2); border-bottom: 1px solid var(--line-2); font-family: var(--font); white-space: normal; }
.codeblock-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.codeblock-bar .copy-btn { position: static; min-height: 36px; }
.codeblock:has(> .codeblock-bar) > code { display: block; padding: var(--s-4) var(--s-5); overflow-x: auto; scrollbar-width: thin; }

/* D21: public endpoint table */
.table-endpoints th[scope="row"] { font-weight: 500; white-space: nowrap; }
.table-endpoints td:first-child { width: 1%; white-space: nowrap; }

/* D18: the developer tab strip wraps on narrow screens instead of clipping */
@media (max-width: 899px) {
  .tabs { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; padding-right: 0; }
}

/* Phone top bar: one row (brand + Menu). The tools live in the menu sheet (app-nav.js moves them). */
@media (max-width: 640px) {
  .topbar { flex-wrap: nowrap; padding-top: var(--s-2); padding-bottom: var(--s-2); min-height: 0; }
  .sidenav .topbar-tools { flex: none; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: var(--s-3);
    margin: var(--s-5) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--line); }
  .sidenav .topbar-tools > .badge { max-width: 100%; margin-right: 0; align-self: flex-start; }
  .sidenav .topbar-tools form, .sidenav .topbar-tools .btn, .sidenav .topbar-tools .select { width: 100%; }
  .sidenav .topbar-tools form.cluster { flex-direction: column; align-items: stretch; }
  .sidenav .topbar-tools .btn { min-height: var(--tap); justify-content: center; }
}