/* =================================================================
   FeirOS — design system
   Monochrome institutional control plane.
   Instrument Sans (UI) + IBM Plex Mono (system metadata).
   Hairline rules, squared geometry, restrained state accents.
   ================================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Palette — monochrome institutional */
  --bg:            #F6F6F4;   /* off-white page */
  --surface:       #FFFFFF;
  --surface-2:    #F2F2F0;   /* faint recessed field */
  --ink:           #0A0A0A;  /* primary text — near-black */
  --ink-2:         #4A4A4A;  /* secondary text */
  --ink-3:         #6B6B6B;  /* muted / hints — AA on bg/white */
  --line:          #DCDCD8;  /* hairline borders */
  --line-2:        #E6E6E2;  /* softer dividers */

  /* Brand — monochrome emphasis (no teal). Black on white, inverted for primary. */
  --brand:         #0A0A0A;
  --brand-ink:     #0A0A0A;
  --brand-soft:    #ECECE9;  /* selected/hover field */
  --brand-soft-2:  #DCDCD8;  /* selected/hover border */

  /* Status semantics — restrained, used only as small accents (dots / thin rules),
     never as full saturated fills. Names retained so JS+HTML keep working. */
  --green:         #4E6E58;
  --green-ink:     #3A5642;
  --green-soft:    #EFEEE9;
  --green-line:    #CDCDC6;

  --amber:         #8A6A2E;
  --amber-ink:     #6B5224;
  --amber-soft:    #F2EEE3;
  --amber-line:    #D8D0BC;

  --red:           #8C3B36;
  --red-ink:       #6E2D29;
  --red-soft:      #F0E9E7;
  --red-line:      #D8C7C4;

  /* Type — Instrument Sans primary, IBM Plex Mono for system metadata */
  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Spacing scale (4px base) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* Radii — nearly square. 2–4px maximum. No pills, no rounded SaaS cards. */
  --r-sm: 3px; --r-md: 3px; --r-lg: 3px; --r-xl: 3px; --r-pill: 2px;

  /* Shadows — flat by default; one restrained depth token for modals only */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 12px 40px rgba(10,10,10,.16);

  --nav-w: 248px;
  --maxw: 1080px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Mono helper — system metadata, IDs, timestamps, policy refs */
.mono { font-family: var(--mono); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Global keyboard focus (WCAG 2.4.7) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
[role="link"]:focus-visible,
.nav-item:focus-visible,
.btn:focus-visible,
.segmented button:focus-visible,
.row-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.radio-card:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
/* Visually-hidden helper (skip link, a11y labels) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  background: var(--ink); color: var(--surface);
  padding: 10px 16px; border-radius: var(--r-sm);
  font-weight: 600; font-size: 14px;
  transform: translateY(-150%);
  transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); }

/* Forced-colors / high-contrast support */
@media (forced-colors: active) {
  .input:focus, .select:focus,
  a:focus-visible, button:focus-visible,
  .btn:focus-visible, .nav-item:focus-visible,
  .row-link:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid CanvasText;
  }
}
h1,h2,h3,h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- App shell ---------- */
.app { display: flex; min-height: 100vh; }

/* ===== Sidebar ===== */
.sidebar {
  width: var(--nav-w);
  flex: 0 0 var(--nav-w);
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s5) var(--s5) var(--s4);
}
/* Wordmark-led: the FeirAI name carries the identity, no shield/icon container. */
.brand-mark { display: none; }   /* hide legacy shield tile per brand guidelines */
.brand-name {
  font-family: var(--font); font-weight: 600; font-size: 19px;
  letter-spacing: -0.03em; color: var(--ink); line-height: 1;
}
.brand-sub {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 3px;
}

/* Prototype / sample-data marker (understated, present on every page) */
.proto-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--ink-3); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 2px 8px; margin-top: 5px;
  text-transform: none; white-space: nowrap;
  line-height: 1;
}
.proto-tag .proto-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); flex: 0 0 auto; }
.proto-tag .proto-short { display: none; }

.nav { padding: var(--s2) var(--s3); flex: 1; }
.nav-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); font-weight: 600;
  padding: var(--s4) var(--s3) var(--s2);
}
.nav-item {
  display: flex; align-items: center; gap: var(--s3);
  padding: 9px var(--s3);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 1px;
  transition: background .12s ease, color .12s ease;
}
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item.active { background: var(--ink); color: var(--surface); }
.nav-item.active .nav-icon { color: var(--surface); }
.nav-icon { width: 17px; height: 17px; flex: 0 0 17px; color: var(--ink-3); transition: color .12s; }
.nav-item.active .nav-icon { color: var(--surface); }
.nav-item .count-badge { margin-left: auto; }

/* Bottom trust strip — hairline rule, monochrome, small state dot */
.trust-strip {
  margin: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--s3);
  transition: border-color .15s ease;
}
.trust-strip:hover { border-color: var(--ink); }
.trust-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink);
  box-shadow: none;
  flex: 0 0 auto;
}
.trust-text { font-size: 12.5px; font-weight: 500; color: var(--ink-2); line-height: 1.3; }
.trust-text small { display: block; font-family: var(--mono); font-weight: 400; color: var(--ink-3); opacity: 1; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 2px; }

/* Honesty states (JS upgrades the neutral default). Monochrome with a single hairline accent. */
.trust-strip.trust-neutral { background: var(--surface-2); border-color: var(--line); }
.trust-strip.trust-neutral .trust-dot { background: var(--ink-3); }
.trust-strip.trust-neutral .trust-text, .trust-strip.trust-neutral .trust-text small { color: var(--ink-2); }
.trust-strip.trust-attention { background: var(--surface); border-color: var(--amber-line); }
.trust-strip.trust-attention .trust-dot { background: var(--amber); }
.trust-strip.trust-attention .trust-text, .trust-strip.trust-attention .trust-text small { color: var(--amber-ink); }
.mt-trust.trust-neutral { background: var(--surface-2) !important; border-color: var(--line) !important; color: var(--ink-2) !important; }
.mt-trust.trust-neutral .trust-dot { background: var(--ink-3); }
.mt-trust.trust-attention { background: var(--surface) !important; border-color: var(--amber-line) !important; color: var(--amber-ink) !important; }
.mt-trust.trust-attention .trust-dot { background: var(--amber); }

/* ===== Main column ===== */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s5) var(--s7);
  border-bottom: 1px solid var(--line);
  background: rgba(246,246,244,.92);
  backdrop-filter: saturate(120%) blur(8px);
  position: sticky; top: 0; z-index: 20;
}
.topbar-titles { min-width: 0; }
.topbar h1 { font-size: 22px; font-weight: 600; }
.topbar .subtitle { color: var(--ink-3); font-size: 13px; margin-top: 2px; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }

.content { padding: var(--s6) var(--s7) var(--s8); max-width: calc(var(--maxw) + var(--s7) * 2); width: 100%; }

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: var(--s2); font-size: 13px; color: var(--ink-3); margin-bottom: var(--s2); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { opacity: .5; }

/* ---------- Cards — flat, hairline borders ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card-pad { padding: var(--s5); }
.card-head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line-2);
}
.card-head h2, .card-head h3 { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.card-head .head-action { margin-left: auto; font-size: 12.5px; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--line); }
.card-head .head-action:hover { text-decoration-color: var(--ink); }

.grid { display: grid; gap: var(--s5); }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.col-span-2 { grid-column: span 2; }
.stack > * + * { margin-top: var(--s5); }
.stack-sm > * + * { margin-top: var(--s3); }

/* Section heading */
.section-title { font-family: var(--mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); margin-bottom: var(--s3); }

/* ---------- Hero / reassurance — flat ledger panel with left accent rule ---------- */
.hero {
  border-radius: var(--r-xl);
  padding: var(--s6) var(--s5);
  border: 1px solid var(--line);
  border-left: 2px solid var(--ink);
  background: var(--surface);
  display: flex; align-items: center; gap: var(--s5);
}
.hero.attention { border-color: var(--line); border-left: 2px solid var(--amber); }
.hero-badge {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: var(--ink); display: grid; place-items: center;
  flex: 0 0 auto; border: 1px solid var(--ink);
}
.hero.attention .hero-badge { background: var(--amber); border-color: var(--amber); }
.hero-badge svg { width: 18px; height: 18px; color: var(--surface); }
.hero.attention .hero-badge svg { color: var(--surface); }
.hero h1, .hero .hero-h { font-size: 26px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; color: var(--ink); }
.hero .hero-sub { color: var(--ink-2); font-size: 15px; margin-top: 6px; max-width: 60ch; }

/* ---------- Stat / metric cards ---------- */
.stat { padding: var(--s5); }
.stat .stat-label { font-size: 13px; color: var(--ink-2); font-weight: 500; display: flex; align-items: center; gap: var(--s2); }
.stat .stat-value { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; margin-top: var(--s2); line-height: 1; }
.stat .stat-meta { font-size: 13px; color: var(--ink-3); margin-top: var(--s2); }
.stat.link-card:hover { border-color: var(--ink); }
.stat.link-card { transition: border-color .15s, background .15s; display: block; }
.stat.link-card:hover { background: var(--surface-2); }
.stat .stat-dot { width: 8px; height: 8px; border-radius: 50%; }

/* Tokenized display numbers */
.num-xl { font-size: 32px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.num-lg { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.num-md { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.dot-green { background: var(--green); box-shadow: none; }
.dot-amber { background: var(--amber); box-shadow: none; }
.dot-red   { background: var(--red);   box-shadow: none; }

/* ---------- Status pills — hairline border + small state dot only ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 8px;
  border-radius: var(--r-md);
  font-family: var(--mono); font-size: 10px; font-weight: 500; line-height: 1;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.pill .pill-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.pill-green { color: var(--green-ink); border-color: var(--green-line); }
.pill-green .pill-dot { background: var(--green); }
.pill-amber { color: var(--amber-ink); border-color: var(--amber-line); }
.pill-amber .pill-dot { background: var(--amber); }
.pill-red   { color: var(--red-ink);   border-color: var(--red-line);   }
.pill-red .pill-dot { background: var(--red); }
.pill-neutral { color: var(--ink-2); border-color: var(--line); }
.pill-neutral .pill-dot { background: var(--ink-3); }

/* Risk chips */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--r-md);
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--line); color: var(--ink-2);
}
.chip-risk-low    { color: var(--green-ink); border-color: var(--green-line); }
.chip-risk-medium { color: var(--amber-ink); border-color: var(--amber-line); }
.chip-risk-high   { color: var(--red-ink);   border-color: var(--red-line); }

.count-badge {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 6px;
  border-radius: var(--r-md);
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.04em;
  background: var(--surface-2); color: var(--ink-3);
  border: 1px solid var(--line);
}
.count-badge.alert { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* ---------- Buttons — squared, hairline borders, monochrome ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 9px 16px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em;
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  transition: background .14s, border-color .14s, color .14s;
  white-space: nowrap;             /* keep label on a single line */
  flex-shrink: 0;                  /* never squeeze a button below its content width */
}
.btn:hover { border-color: var(--ink); }
.btn:active { transform: translateY(.5px); }
.btn svg { width: 15px; height: 15px; }
.btn-primary {
  background: var(--ink); color: var(--surface); border-color: var(--ink);
}
.btn-primary:hover { background: #1A1A1A; border-color: #1A1A1A; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink); }
.btn-danger {
  background: var(--surface); color: var(--red-ink); border-color: var(--red-line);
}
.btn-danger:hover { background: var(--red-soft); border-color: var(--red); }
.btn-danger-solid { background: var(--red); color: var(--surface); border-color: var(--red); }
.btn-danger-solid:hover { background: var(--red-ink); border-color: var(--red-ink); }
.btn-sm { padding: 5px 11px; font-size: 12.5px; }
.btn-lg { padding: 12px 22px; font-size: 15px; }
.btn-block { width: 100%; }

/* ---------- Tables — ledger rows, mono header ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg); }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data thead th {
  text-align: left; font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3);
  padding: 11px var(--s5); border-bottom: 1px solid var(--line);
  background: var(--surface);
}
table.data thead th.num, table.data tbody td.num { text-align: right; }
table.data tbody td { padding: 13px var(--s5); border-bottom: 1px solid var(--line-2); }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr.row-link { cursor: pointer; transition: background .1s; }
table.data tbody tr.row-link:hover { background: var(--surface-2); }
.cell-name { font-weight: 600; color: var(--ink); }
a.cell-name { display: inline-block; }
a.cell-name:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cell-sub { font-size: 12.5px; color: var(--ink-3); }
.cell-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

/* ---------- Progress / budget bars — flat fills, no gradients ---------- */
.bar {
  height: 6px; border-radius: var(--r-pill);
  background: var(--line); overflow: hidden; position: relative;
}
.bar-fill { height: 100%; border-radius: 0; transition: width .4s ease; }
.bar-fill.green { background: var(--green); }
.bar-fill.amber { background: var(--amber); }
.bar-fill.red   { background: var(--red); }
.bar-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s2); }
.bar-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.bar-cap { color: var(--ink-3); font-size: 13px; }
.bar-caption { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }

/* mini inline bar (table) */
.bar.mini { height: 4px; width: 90px; display: inline-block; vertical-align: middle; }

/* ---------- Feed / activity ---------- */
.feed { }
.feed-item {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: 12px 0; border-bottom: 1px solid var(--line-2);
}
.feed-item:last-child { border-bottom: none; }
.feed-ico {
  width: 26px; height: 26px; border-radius: var(--r-sm); flex: 0 0 auto;
  display: grid; place-items: center; margin-top: 1px;
  background: transparent; border: 1px solid var(--line);
}
.feed-ico svg { width: 13px; height: 13px; color: var(--ink-2); }
.feed-ico.ok  { border-color: var(--green-line); }
.feed-ico.ok svg { color: var(--green); }
.feed-ico.warn { border-color: var(--amber-line); }
.feed-ico.warn svg { color: var(--amber); }
.feed-ico.stop { border-color: var(--red-line); }
.feed-ico.stop svg { color: var(--red); }
.feed-body { min-width: 0; flex: 1; }
.feed-text { font-size: 14px; }
.feed-text strong { font-weight: 600; }
.feed-time { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ink-3); margin-top: 2px; text-transform: uppercase; }

/* ---------- Toggles / permission rows ---------- */
.perm-group + .perm-group { margin-top: var(--s5); }
.perm-group-title {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-3); font-weight: 500; margin-bottom: var(--s2);
}
.perm-row {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); margin-bottom: var(--s3);
  overflow: hidden; transition: border-color .15s;
}
.perm-row.on { border-color: var(--ink); }
.perm-row-head {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5);
}
.perm-info { min-width: 0; flex: 1; }
.perm-name { font-weight: 600; font-size: 15px; }
.perm-desc { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.perm-state { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-ink); margin-right: var(--s2); }
.perm-state.off { color: var(--ink-3); }

/* switch — squared track, monochrome */
.switch { position: relative; width: 42px; height: 24px; flex: 0 0 auto; }
.switch input { position: absolute; top: -9px; left: 0; opacity: 0; width: 100%; height: 44px; margin: 0; cursor: pointer; z-index: 2; }
.switch .track {
  position: absolute; inset: 0; border-radius: var(--r-sm);
  background: var(--line); transition: background .18s;
}
.switch .thumb {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: var(--r-sm); background: var(--surface); box-shadow: none;
  border: 1px solid var(--line);
  transition: transform .18s, background .18s, border-color .18s;
}
.switch input:checked ~ .track { background: var(--ink); }
.switch input:checked ~ .thumb { transform: translateX(18px); background: var(--surface); border-color: var(--ink); }
.switch input:focus-visible ~ .track { outline: 2px solid var(--ink); outline-offset: 2px; }

/* revealed detail under a permission */
.perm-detail {
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  padding: var(--s4) var(--s5);
  display: none;
}
.perm-row.on .perm-detail { display: block; }
.perm-row.on .perm-detail { border-top-color: var(--ink); }
.perm-detail .risk-note {
  display: flex; gap: var(--s2); align-items: flex-start;
  font-size: 13px; color: var(--ink-2); margin-bottom: var(--s3);
}
.perm-detail .risk-note svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; color: var(--amber); }
.approval-toggle {
  display: flex; align-items: center; gap: var(--s3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: var(--s3) var(--s4);
}
.approval-toggle .at-text { flex: 1; font-size: 13.5px; }
.approval-toggle .at-text strong { font-weight: 600; }
.approval-toggle .at-text small { display: block; color: var(--ink-3); font-size: 12px; }

/* ---------- Banners / notes — hairline + left accent ---------- */
.banner {
  display: flex; gap: var(--s3); align-items: flex-start;
  border-radius: var(--r-md); padding: var(--s4) var(--s5);
  font-size: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--ink);
}
.banner svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.banner strong { font-weight: 600; }
.banner-safe  { background: var(--surface); border-color: var(--line); border-left-color: var(--green); color: var(--ink); }
.banner-safe svg { color: var(--green); }
.banner-info  { background: var(--surface); border-color: var(--line); border-left-color: var(--ink); color: var(--ink); }
.banner-info svg { color: var(--ink); }
.banner-warn  { background: var(--surface); border-color: var(--line); border-left-color: var(--amber); color: var(--ink); }
.banner-warn svg { color: var(--amber); }
.banner-red   { background: var(--surface); border-color: var(--line); border-left-color: var(--red); color: var(--ink); }
.banner-red svg { color: var(--red); }

.note-quiet { font-size: 12.5px; color: var(--ink-3); display: flex; gap: var(--s2); align-items: flex-start; }
.note-quiet svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; opacity: .8; }

/* ---------- Forms ---------- */
.field { margin-bottom: var(--s5); }
.field > label:not(.radio-card) { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.field .hint { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }
.input, .select {
  width: 100%; padding: 10px 13px; font-size: 14.5px; font-family: inherit;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  color: var(--ink);
  transition: border-color .14s, box-shadow .14s;
}
.input:focus, .select:focus { outline: 2px solid transparent; outline-offset: 1px; border-color: var(--ink); box-shadow: 0 0 0 2px rgba(10,10,10,.08); }
.input-prefix { position: relative; }
.input-prefix .pfx { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-weight: 600; }
.input-prefix .input { padding-left: 30px; }

/* fieldset reset for radio/checkbox groups */
.reset-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.field-legend { display: block; font-weight: 600; font-size: 14px; margin-bottom: 8px; padding: 0; }

/* radio cards */
.radio-card {
  display: flex; gap: var(--s3); align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s4); cursor: pointer; margin-bottom: var(--s3);
  transition: border-color .12s, background .12s;
}
.radio-card:hover { border-color: var(--ink); }
.radio-card > input { flex: 0 0 auto; margin-top: 3px; accent-color: var(--ink); width: 16px; height: 16px; }
.radio-card > span { flex: 1 1 auto; min-width: 0; }
.radio-card:has(input:checked) { border-color: var(--ink); background: var(--surface-2); }
.radio-card .rc-title { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.radio-card .rc-desc { display: block; font-size: 13px; color: var(--ink-2); margin-top: 3px; line-height: 1.45; }
.radio-card.rc-stop:has(input:checked) { border-color: var(--red); }

/* ---------- Approval cards — hairline panel + left accent ---------- */
.approval-card {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  border-left: 2px solid var(--amber);
}
.approval-card .ac-accent { display: none; }   /* replaced by the left accent */
.ac-body { padding: var(--s5); }
.ac-head { display: flex; align-items: flex-start; gap: var(--s3); }
.ac-ico { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; flex: 0 0 auto; }
.ac-ico svg { width: 16px; height: 16px; color: var(--ink-2); }
.ac-headline { font-size: 16px; font-weight: 600; line-height: 1.35; }
.ac-why { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; }
.ac-meta { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s4); font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.ac-meta .m { display: flex; align-items: center; gap: 5px; }
.ac-meta svg { width: 13px; height: 13px; }
.ac-actions { display: flex; gap: var(--s3); margin-top: var(--s5); }
.ac-actions .btn { flex: 0 0 auto; }
.ac-expiry { margin-left: auto; align-self: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

/* empty state */
.empty {
  text-align: center; padding: var(--s8) var(--s5);
}
.empty .empty-ico {
  width: 48px; height: 48px; border-radius: var(--r-sm); margin: 0 auto var(--s4);
  background: var(--surface); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.empty .empty-ico svg { width: 20px; height: 20px; color: var(--ink-2); }
.empty h2, .empty h3 { font-size: 18px; font-weight: 600; }
.empty p { color: var(--ink-2); margin-top: 6px; max-width: 420px; margin-left: auto; margin-right: auto; }

/* ---------- Proof / verified — flat panel + left accent ---------- */
.verified-hero {
  border-radius: var(--r-xl); padding: var(--s6) var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--ink);
  display: flex; align-items: center; gap: var(--s5);
}
.badge-big {
  width: 64px; height: 64px; flex: 0 0 auto; position: relative;
  display: grid; place-items: center;
}
.badge-big .ring { display: none; }   /* the conic ring was decorative; brand guide forbids decorative badges */
.badge-big .core {
  width: 56px; height: 56px; border-radius: var(--r-sm); background: var(--ink);
  display: grid; place-items: center;
  border: 1px solid var(--ink);
}
.badge-big .core svg { width: 26px; height: 26px; color: var(--surface); }
.verified-hero h1, .verified-hero .vh-h { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
.verified-hero .vh-sub { font-size: 15px; color: var(--ink-2); margin-top: 6px; }

.proof-line {
  display: flex; align-items: center; gap: var(--s3);
  padding: 14px 0; border-bottom: 1px solid var(--line-2); font-size: 15px;
}
.proof-line:last-child { border-bottom: none; }
.proof-line .pl-ico { width: 26px; height: 26px; border-radius: var(--r-sm); display: grid; place-items: center; flex: 0 0 auto; background: var(--surface); border: 1px solid var(--line); }
.proof-line .pl-ico svg { width: 14px; height: 14px; color: var(--ink-2); }
.proof-line .pl-num { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.proof-line .pl-text { color: var(--ink-2); }

/* segmented control */
.segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px; gap: 2px; }
.segmented button {
  border: none; background: transparent; padding: 6px 13px; border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
}
.segmented button.active { background: var(--surface); color: var(--ink); box-shadow: none; border: 1px solid var(--line); }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10,10,10,.42);
  backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center;
  padding: var(--s5);
}
.modal-overlay.open { display: flex; animation: fade .15s ease; }
.modal {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); max-width: 460px; width: 100%;
  max-height: 90vh; overflow-y: auto; overflow-x: hidden;
  animation: pop .18s cubic-bezier(.2,.8,.3,1);
  border: 1px solid var(--line);
}
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } }
.modal-pad { padding: var(--s6); }
.modal-ico {
  width: 44px; height: 44px; border-radius: var(--r-sm); margin-bottom: var(--s4);
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
}
.modal-ico svg { width: 22px; height: 22px; color: var(--ink-2); }
.modal h2 { font-size: 20px; font-weight: 600; }
.modal p { color: var(--ink-2); margin-top: var(--s3); font-size: 14.5px; }
.modal-actions { display: flex; gap: var(--s3); margin-top: var(--s6); }
.modal-actions .btn { flex: 1; }

/* contained result state */
.modal-ico.done { border-color: var(--green-line); }
.modal-ico.done svg { color: var(--green); }

/* ---------- Misc utility ---------- */
.muted { color: var(--ink-3); }
.txt-sm { font-size: 13px; }
.row { display: flex; align-items: center; gap: var(--s3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.wrap { flex-wrap: wrap; }
.mt-1 { margin-top: var(--s2); } .mt-2 { margin-top: var(--s4); } .mt-3 { margin-top: var(--s5); }
.mb-2 { margin-bottom: var(--s4); } .mb-3 { margin-bottom: var(--s5); }
.divider { height: 1px; background: var(--line-2); margin: var(--s4) 0; }
.spacer { flex: 1; }
.link { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--line); }
.link:hover { text-decoration-color: var(--ink); }
.avatar {
  width: 24px; height: 24px; border-radius: var(--r-sm); flex: 0 0 auto;
  background: var(--ink); color: var(--surface);
  display: grid; place-items: center; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.04em;
}

/* ---------- Help link (sidebar nav-item, near trust strip) ---------- */
.nav-help { margin: 0 var(--s3) var(--s2); }

/* Mobile "Help" link inside the compact top strip (hidden on desktop) */
.mt-help { display: none; }

/* mobile chrome (shown only on small screens) */
.mobile-bar { display: none; }
.mobile-topbar { display: none; }

/* =================================================================
   Docs / help pages — comfortable reading prose
   ================================================================= */
.docs-page { background: var(--bg); min-height: 100vh; }

/* Slim top strip on docs pages: brand + prototype marker + back-to-app */
.docs-topbar {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.docs-topbar .brand { padding: 0; gap: var(--s2); flex: 0 0 auto; }
.docs-topbar .brand-name { font-size: 15px; }
.docs-topbar .proto-tag { margin-top: 0; }
.docs-topbar .docs-top-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }

/* The reading column */
.docs-wrap {
  max-width: 760px; width: 100%; margin: 0 auto;
  padding: var(--s6) var(--s5) var(--s8);
}

/* Back / cross links above the article */
.docs-nav {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-bottom: var(--s5);
}
.docs-nav a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 7px 14px; min-height: 38px;
  transition: border-color .12s, color .12s;
}
.docs-nav a:hover { color: var(--ink); border-color: var(--ink); }
.docs-nav a svg { width: 15px; height: 15px; }
.docs-nav a.primary { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.docs-nav a.primary:hover { background: #1A1A1A; border-color: #1A1A1A; }

/* The prose itself — comfortable line length (~70ch), readable rhythm */
.docs {
  max-width: 70ch;
  font-size: 16px; line-height: 1.7; color: var(--ink);
}
.docs > * + * { margin-top: var(--s4); }
.docs h1 {
  font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;
  margin-top: 0;
}
.docs h2 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25;
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid var(--line-2);
}
.docs h1 + p, .docs h2 + p, .docs h3 + p { margin-top: var(--s3); }
.docs h3 {
  font-size: 17px; font-weight: 650; line-height: 1.3;
  margin-top: var(--s5);
}
.docs p { color: var(--ink); }
.docs a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--line); }
.docs a:hover { text-decoration-color: var(--ink); }
.docs strong { font-weight: 700; color: var(--ink); }
.docs em { font-style: italic; }

/* Lists */
.docs ul, .docs ol { padding-left: 1.4em; margin-top: var(--s3); }
.docs ul { list-style: disc; }
.docs ol { list-style: decimal; }
.docs li { margin-top: var(--s2); padding-left: 4px; }
.docs li::marker { color: var(--ink-3); }
.docs li > ul, .docs li > ol { margin-top: var(--s2); }

/* Blockquotes — institutional callout */
.docs blockquote {
  margin: var(--s5) 0 0;
  padding: var(--s4) var(--s5);
  border-left: 2px solid var(--ink);
  background: var(--surface-2);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--ink);
}
.docs blockquote p { color: var(--ink); }
.docs blockquote > * + * { margin-top: var(--s3); }
.docs blockquote strong { color: var(--ink); }

/* Inline + block code */
.docs code {
  font-family: var(--mono); font-size: .9em;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 1px 6px;
}
.docs pre {
  font-family: var(--mono); font-size: 13.5px; line-height: 1.55;
  background: var(--ink); color: #ECECE9;
  border-radius: var(--r-md); padding: var(--s4) var(--s5);
  overflow-x: auto;
}
.docs pre code { background: transparent; border: 0; padding: 0; color: inherit; }

/* Tables */
.docs .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: var(--s4); }
.docs table {
  width: 100%; border-collapse: collapse; font-size: 15px;
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.docs thead th {
  text-align: left; font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
  background: var(--surface-2); padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.docs tbody td { padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
.docs tbody tr:last-child td { border-bottom: none; }

/* Horizontal rule between sections */
.docs hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; }

/* ---- Help & Guide landing cards ---- */
.docs-cards { display: grid; gap: var(--s4); grid-template-columns: 1fr 1fr; margin-top: var(--s5); }
.docs-card {
  display: block; padding: var(--s5);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color .15s;
}
.docs-card:hover { border-color: var(--ink); }
.docs-card .dc-ico {
  width: 36px; height: 36px; border-radius: var(--r-sm); margin-bottom: var(--s3);
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
}
.docs-card .dc-ico svg { width: 18px; height: 18px; color: var(--ink); }
.docs-card .dc-title { font-size: 16px; font-weight: 600; color: var(--ink); }
.docs-card .dc-desc { font-size: 14px; color: var(--ink-2); margin-top: 4px; }
.docs-card .dc-more { font-size: 12.5px; font-weight: 600; color: var(--ink); margin-top: var(--s3); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--line); }
.docs-card .dc-more svg { width: 14px; height: 14px; flex: 0 0 14px; }
.docs-card:hover .dc-more { text-decoration-color: var(--ink); }

@media (max-width: 640px) {
  .docs { font-size: 17px; max-width: 100%; }
  .docs h1 { font-size: 26px; }
  .docs h2 { font-size: 20px; }
  .docs-cards { grid-template-columns: 1fr; }
  .docs-wrap { padding: var(--s5) var(--s4) var(--s7); }
  .docs-topbar { padding: var(--s3) var(--s4); gap: var(--s2); }
  .docs-topbar .proto-tag .proto-full { display: none; }
  .docs-topbar .proto-tag .proto-short { display: inline; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .col-span-2 { grid-column: span 1; }
  .content { padding: var(--s5) var(--s5) var(--s7); }
  .topbar { padding: var(--s4) var(--s5); }
}

/* ===== Tablet / small laptop down to phone (760px) ===== */
@media (max-width: 760px) {
  .sidebar { display: none; }
  .app { flex-direction: column; }

  /* Page topbar scrolls with content on phones (bottom tab bar is the primary nav),
     so the sticky brand strip never paints over it and the topbar's primary action
     scrolls into view at the top of the page. */
  .topbar { position: static; }

  /* Compact brand/trust top strip — gives a logo + trust signal + proto marker */
  .mobile-topbar {
    display: flex; align-items: center; gap: var(--s2);
    padding: var(--s3) var(--s4);
    background: var(--surface); border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 30;
  }
  .mobile-topbar .brand { padding: 0; gap: var(--s2); flex: 0 0 auto; }
  .mobile-topbar .brand-name { font-size: 15px; }
  .mobile-topbar .proto-tag { margin-top: 0; margin-left: auto; flex: 0 1 auto; min-width: 0; overflow: hidden; min-height: 32px; padding: 5px 10px; }
  /* Shorten the marker text inside the cramped top strip */
  .mobile-topbar .proto-tag .proto-full { display: none; }
  .mobile-topbar .proto-tag .proto-short { display: inline; }
.mobile-topbar .mt-trust {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 500; color: var(--ink-2);
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--r-pill); padding: 5px 10px; min-height: 32px;
  }
  .mobile-topbar .mt-trust .trust-dot { width: 6px; height: 6px; box-shadow: none; }

  /* Compact "Help" link in the mobile top strip */
  .mobile-topbar .mt-help {
    display: inline-flex; align-items: center; gap: 4px;
    flex: 0 0 auto;
    font-size: 11px; font-weight: 500; color: var(--ink-2);
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--r-pill); padding: 5px 10px; min-height: 32px;
  }
  .mobile-topbar .mt-help svg { width: 13px; height: 13px; flex: 0 0 auto; }
  .mobile-topbar .mt-help .mt-help-label { display: inline; }

  /* Bottom tab bar — the primary mobile navigation */
  .mobile-bar {
    display: flex; align-items: stretch; justify-content: space-between;
    background: var(--surface); border-top: 1px solid var(--line);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 4px max(env(safe-area-inset-left), 4px) max(env(safe-area-inset-bottom), 8px);
    box-shadow: 0 -2px 12px rgba(21,32,43,.06);
  }
  .mobile-bar .nav-item {
    flex: 1; flex-direction: column; gap: 3px; justify-content: center;
    padding: 8px 2px; margin: 0; border-radius: var(--r-sm);
    font-size: 11px; font-weight: 600; white-space: nowrap;
    min-height: 52px; position: relative; text-align: center;
  }
  .mobile-bar .nav-item .nav-icon { width: 21px; height: 21px; flex: 0 0 21px; }
  .mobile-bar .nav-item.active { background: var(--surface-2); color: var(--ink); }
  .mobile-bar .count-badge {
    position: absolute; top: 4px; left: 50%; margin-left: 6px;
    min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px;
  }

  /* Reserve room for the fixed bottom bar */
  .main { padding-bottom: 64px; }

  .hero { flex-direction: column; text-align: center; }
  .verified-hero { flex-direction: column; text-align: center; }

  /* Topbar: stack titles above actions so the primary button never wraps. */
  .topbar {
    flex-wrap: wrap; align-items: flex-start; gap: var(--s3);
    padding: var(--s4) var(--s5);
  }
  .topbar-titles { flex: 1 1 100%; min-width: 0; }
  .topbar-actions { flex: 0 0 auto; display: flex; gap: var(--s2); }

  /* Keep primary + danger actions reachable; hide only secondary ghost/plain links */
  .topbar-actions .btn:not(.btn-primary):not(.btn-danger):not(.btn-danger-solid) { display: none; }
  .topbar-actions .btn { padding: 9px 14px; }
}

/* ===== Phone (640px and below) — reflow + fluid widths ===== */
@media (max-width: 640px) {
  body { font-size: 16px; }

  /* Table → stacked card layout */
  .table-wrap { overflow-x: visible; }
  table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; max-width: 100%; }
  table.data thead { display: none; }
  table.data tbody tr {
    border: 1px solid var(--line); border-radius: var(--r-md);
    margin-bottom: var(--s3); padding: var(--s2) var(--s4); background: var(--surface);
  }
  table.data tbody tr:last-child { margin-bottom: 0; }
  table.data tbody td {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
    padding: 9px 0; border-bottom: 1px solid var(--line-2); text-align: right;
  }
  table.data tbody tr td:last-child { border-bottom: none; }
  table.data tbody td.num { text-align: right; }
  table.data tbody td::before {
    content: attr(data-label);
    font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em;
    color: var(--ink-3); text-align: left; flex: 0 0 auto;
  }
  /* The name cell stacks fully and reads as the card title */
  table.data tbody td.cell-primary { display: block; text-align: left; padding-top: var(--s2); }
  table.data tbody td.cell-primary::before { display: none; }
  .bar.mini { width: 110px; }

  /* Segmented control spans full width; options wrap so the last one is never
     clipped or pushed off-screen on narrow phones (~375px) */
  .segmented { display: flex; flex-wrap: wrap; width: 100%; }
  .segmented button { flex: 1 1 auto; min-height: 44px; }

  /* Approval action row wraps; expiry drops to its own line */
  .ac-actions { flex-wrap: wrap; }
  .ac-actions .btn { flex: 1; }
  .ac-expiry { margin-left: 0; flex-basis: 100%; order: 3; margin-top: var(--s3); text-align: center; }

  /* Proof scope row stacks */
  .row.row-between { flex-direction: column; align-items: stretch; }
  .proof-scope-select { width: 100% !important; }

  /* Touch targets */
  .btn-sm { min-height: 44px; padding: 10px 16px; font-size: 14px; }
  .nav-item { min-height: 44px; }
}

/* ===== Small phone (480px) — tighten spacing + type scale ===== */
@media (max-width: 480px) {
  .content { padding: var(--s4) var(--s4) var(--s7); }
  .topbar { padding: var(--s4) var(--s4); }
  .hero { padding: var(--s5); }
  .verified-hero { padding: var(--s5); }
  .hero h1, .hero .hero-h { font-size: 23px; }
  .verified-hero h1, .verified-hero .vh-h { font-size: 22px; }
  .topbar h1 { font-size: 20px; }
  .card-pad { padding: var(--s4); }
  .ac-body { padding: var(--s4); }
  .modal-pad { padding: var(--s5); }
  .num-xl { font-size: 28px; }
  .num-lg { font-size: 24px; }
  .num-md { font-size: 22px; }
  .stat { padding: var(--s4); }
  .stat .stat-value { font-size: 30px; }

/* Keep the mobile top strip from overflowing at ~375px: tighten gaps,
      let the proto marker shrink first, and reduce Help to an icon.
      All three cells share the same 32px height to keep the strip aligned. */
  .mobile-topbar { gap: 6px; padding: var(--s3) var(--s3); }
  .mobile-topbar .proto-tag { min-width: 0; }
  .mobile-topbar .mt-trust { padding: 5px 8px; }
  .mobile-topbar .mt-help { padding: 0 10px; min-width: 32px; justify-content: center; }
  .mobile-topbar .mt-help .mt-help-label { display: none; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}