/* ═══════════════════════════════════════════════════════════════════════════
   Invoice Master — app.css
   Concept: "Boardsheet" — monday's colour-as-state on Apple's quiet sheet.
   Tokens are design.md §2.1–§2.5 verbatim. No @font-face, no CDN, no gradients,
   no shadows on content. Colour means state; the accent means "you are here".
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens — light ──────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  /* ground layers — green-tinted neutral, hue 160 */
  --bg-0: #f0f5f2;
  --bg-1: #f8fbf9;
  --bg-2: #e8eeeb;
  --bg-3: #dce3df;
  --line: #d2dad5;
  --line-2: #b7c0bb;
  /* ink tiers */
  --ink: #121714;
  --ink-2: #484f4b;
  --ink-3: #5e6561;
  --ink-inv: #f8fbf9;
  /* accent — stamp magenta, ≤10% of any screen */
  --accent: #bf308f;
  --accent-ink: #fff9fd;
  --accent-text: #a7207b;
  --accent-wash: rgba(191,48,143,.10);
  /* semantic */
  --ok: #006f2b;      --ok-wash: rgba(0,111,43,.12);
  --warn: #875100;    --warn-wash: rgba(135,81,0,.12);
  --danger: #b51a25;  --danger-wash: rgba(181,26,37,.12);
  /* redeem statuses */
  --st-not-sent: #875100;  --st-not-sent-wash: rgba(135,81,0,.12);
  --st-sent: #095eb6;      --st-sent-wash: rgba(9,94,182,.12);
  --st-received: #006f2b;  --st-received-wash: rgba(0,111,43,.12);
  --st-partial: #6d47b8;   --st-partial-wash: rgba(109,71,184,.12);
  --st-rejected: #b51a25;  --st-rejected-wash: rgba(181,26,37,.12);
  --st-na: #5c625e;        --st-na-wash: rgba(92,98,94,.12);
  /* provider identity — dots only */
  --pv-anthropic: #d7704f; --pv-openai: #10a37f; --pv-google: #4285f4; --pv-xai: #484f4b;
  /* chart series (validated light set, fixed order) */
  --s1: #2a78d6; --s2: #ea632d; --s3: #19a06f; --s4: #bd8000;
  --s5: #e35f91; --s6: #008300; --s7: #4a3aa7; --s8: #e34948;
  --s-other: #819088;
  --s-dim: #d2dad5;
  --grid: #e1e6e3;
  --axis: #b7c0bb;
  --overlay: rgba(18,23,20,.62);
  --overlay-ink: #f8fbf9;   /* text ON the scrim: the scrim is dark in BOTH themes */

  /* spacing · radii · elevation · z */
  --sp-1: 2px; --sp-2: 4px; --sp-3: 6px; --sp-4: 8px; --sp-5: 12px; --sp-6: 16px;
  --sp-7: 20px; --sp-8: 24px; --sp-9: 32px; --sp-10: 40px; --sp-11: 48px;
  --gutter: 24px;
  --gap: 16px;
  --row-h: 32px;
  --row-h-dense: 28px;
  --bar-h: 44px;
  --filter-h: 36px;
  --r-0: 0;
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 8px;
  --r-full: 999px;
  --shadow-pop: 0 4px 16px rgba(0,0,0,.14), 0 0 0 1px var(--line-2);
  --shadow-dialog: 0 16px 48px rgba(0,0,0,.28), 0 0 0 1px var(--line-2);
  --z-sticky: 10; --z-dropdown: 20; --z-backdrop: 30; --z-dialog: 40; --z-toast: 50; --z-tooltip: 60;

  /* typography — system stack only (OVERRIDES §2: fully offline) */
  --font-ui:   -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", sans-serif;
  --font-mono: "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 11px; --lh-xs: 16px;
  --fs-sm: 12px; --lh-sm: 16px;
  --fs-md: 13px; --lh-md: 20px;
  --fs-lg: 15px; --lh-lg: 22px;
  --fs-xl: 18px; --lh-xl: 24px;
  --fs-2xl: 22px; --lh-2xl: 28px;
  --fs-hero: 40px; --lh-hero: 44px;
  --fw-400: 400; --fw-500: 500; --fw-600: 600;
  --tnum: "tnum" 1, "lnum" 1;

  /* motion */
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;
  --dur-flash: 700ms;
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in:  cubic-bezier(0.5, 0, 0.75, 0);

  accent-color: var(--accent);
}

/* ── 2. Tokens — dark (stamped by the head script) ──────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-0: #0a0e0c;
  --bg-1: #131715;
  --bg-2: #1b211e;
  --bg-3: #272d29;
  --line: #29302c;
  --line-2: #3d4440;
  --ink: #f0f3f1;
  --ink-2: #b2b9b5;
  --ink-3: #959c98;
  --ink-inv: #0a0e0c;
  --accent: #f07ec2;      --accent-ink: #201019;
  --accent-text: #fd97d2;
  --accent-wash: rgba(240,126,194,.14);
  --ok: #61cb7c;      --ok-wash: rgba(97,203,124,.14);
  --warn: #f7b83d;    --warn-wash: rgba(247,184,61,.14);
  --danger: #ff645f;  --danger-wash: rgba(255,100,95,.16);
  --st-not-sent: #f7b83d;  --st-not-sent-wash: rgba(247,184,61,.14);
  --st-sent: #67b0f9;      --st-sent-wash: rgba(103,176,249,.14);
  --st-received: #61cb7c;  --st-received-wash: rgba(97,203,124,.14);
  --st-partial: #b49cf7;   --st-partial-wash: rgba(180,156,247,.14);
  --st-rejected: #ff645f;  --st-rejected-wash: rgba(255,100,95,.16);
  --st-na: #959c98;        --st-na-wash: rgba(149,156,152,.14);
  --pv-anthropic: #e08b6e; --pv-openai: #2fbf95; --pv-google: #6ea0f7; --pv-xai: #b2b9b5;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
  --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
  --s-other: #5b6660; --s-dim: #29302c;
  --grid: #222825; --axis: #3d4440;
  --overlay: rgba(0,0,0,.55);
  --overlay-ink: #f0f3f1;
  --shadow-pop: 0 4px 16px rgba(0,0,0,.45), 0 0 0 1px var(--line-2);
  --shadow-dialog: 0 16px 48px rgba(0,0,0,.6), 0 0 0 1px var(--line-2);
}

/* No-JS fallback: only when nothing has been stamped on <html>. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg-0: #0a0e0c;
    --bg-1: #131715;
    --bg-2: #1b211e;
    --bg-3: #272d29;
    --line: #29302c;
    --line-2: #3d4440;
    --ink: #f0f3f1;
    --ink-2: #b2b9b5;
    --ink-3: #959c98;
    --ink-inv: #0a0e0c;
    --accent: #f07ec2;      --accent-ink: #201019;
    --accent-text: #fd97d2;
    --accent-wash: rgba(240,126,194,.14);
    --ok: #61cb7c;      --ok-wash: rgba(97,203,124,.14);
    --warn: #f7b83d;    --warn-wash: rgba(247,184,61,.14);
    --danger: #ff645f;  --danger-wash: rgba(255,100,95,.16);
    --st-not-sent: #f7b83d;  --st-not-sent-wash: rgba(247,184,61,.14);
    --st-sent: #67b0f9;      --st-sent-wash: rgba(103,176,249,.14);
    --st-received: #61cb7c;  --st-received-wash: rgba(97,203,124,.14);
    --st-partial: #b49cf7;   --st-partial-wash: rgba(180,156,247,.14);
    --st-rejected: #ff645f;  --st-rejected-wash: rgba(255,100,95,.16);
    --st-na: #959c98;        --st-na-wash: rgba(149,156,152,.14);
    --pv-anthropic: #e08b6e; --pv-openai: #2fbf95; --pv-google: #6ea0f7; --pv-xai: #b2b9b5;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
    --s-other: #5b6660; --s-dim: #29302c;
    --grid: #222825; --axis: #3d4440;
    --overlay: rgba(0,0,0,.55);
    --overlay-ink: #f0f3f1;
    --shadow-pop: 0 4px 16px rgba(0,0,0,.45), 0 0 0 1px var(--line-2);
    --shadow-dialog: 0 16px 48px rgba(0,0,0,.6), 0 0 0 1px var(--line-2);
  }
}

/* Higher-contrast preference: rules and muted ink step up one tier. */
@media (prefers-contrast: more) {
  :root { --line: var(--line-2); --ink-3: var(--ink-2); }
}

/* ── 3. Base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { height: 100%; }
body {
  font: var(--fw-400) var(--fs-md)/var(--lh-md) var(--font-ui);
  color: var(--ink);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  overflow-y: scroll;            /* stable gutter: no width jump between views */
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--accent-text); text-decoration: none; }
a:visited { color: var(--accent-text); }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* One focus treatment everywhere. Never removed. */
:focus { outline: none; }
:focus-visible,
.tbl tbody tr:focus-visible,
.dropzone:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Figures: tabular in columns, proportional in the hero. */
.num, td.num, th.num, .axis text, .kpi__value, .kpi-value, .mono, input.num {
  font-variant-numeric: tabular-nums lining-nums;
}
.num, td.num, th.num { text-align: right; }
.kpi--hero .kpi__value, .kpi--hero .kpi-value, .hero__value, .hero-value {
  font-variant-numeric: proportional-nums lining-nums;
}
.mono { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0; }
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

h1.view-title { font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: var(--fw-600); letter-spacing: -0.01em; }
h2.section {
  font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--fw-600);
  padding: var(--sp-6) 0 var(--sp-3);
  border-top: 1px solid var(--line);
}
.view > .sheet__grid:first-child h2.section,
.view > .sheet__block:first-child > h2.section,
.settings > h2.section:first-child,
.chart__block > h2.section { border-top: 0; }
.section__sub { font-size: var(--fs-xs); font-weight: var(--fw-400); color: var(--ink-3); margin-left: var(--sp-3); }

/* ── 4. Shell ───────────────────────────────────────────────────────────── */
/* Full-bleed bars, content centred at max 1600 with 24px gutters. */
.topbar, .filterbar, .sheet, .banner {
  padding-inline: max(var(--gutter), calc((100% - 1600px) / 2));
}

.skip {
  position: fixed; top: -100px; left: var(--sp-4); z-index: calc(var(--z-tooltip) + 1);
  background: var(--bg-1); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: var(--r-2); padding: var(--sp-3) var(--sp-5); font-weight: var(--fw-500);
}
.skip:focus { top: var(--sp-4); text-decoration: none; }

.topbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--sp-5);
  height: var(--bar-h);
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
}
.topbar__brand { display: flex; align-items: center; gap: var(--sp-4); flex: none; }
.topbar__mark { width: 8px; height: 8px; background: var(--accent); border-radius: 1px; }
.topbar__name { font-size: var(--fs-md); font-weight: var(--fw-600); letter-spacing: -0.01em; white-space: nowrap; }
.topbar__spacer { flex: 1 1 auto; }
.topbar > .btn, .topbar > .chip { flex: none; }

.tabs { display: flex; align-items: stretch; height: var(--bar-h); min-width: 0; }
.tab {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  height: var(--bar-h); padding: 0 10px;
  font-size: var(--fs-sm); font-weight: var(--fw-500); color: var(--ink-2);
  border-bottom: 2px solid transparent;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
  white-space: nowrap;
}
.tab:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }
.tab:active { background: var(--bg-3); color: var(--ink); }
.tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.tab__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--bg-3); color: var(--ink-2);
  border-radius: var(--r-1); font-size: var(--fs-xs); font-weight: var(--fw-600);
  font-variant-numeric: tabular-nums;
}

.syncpill {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  height: 24px; padding: 0 var(--sp-4); flex: none;
  font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap;
}
.tab[data-view="home"] .tab__badge { background: var(--accent); color: var(--accent-ink); }

.syncpill__dot { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--ok); }
/* The state dot is drawn here when the client renders text only. */
.syncpill:not(:has(.syncpill__dot))::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--r-full); background: var(--ok);
}
.syncpill[data-state="saving"]:not(:has(.syncpill__dot))::before   { background: var(--st-sent); }
.syncpill[data-state="failed"]:not(:has(.syncpill__dot))::before   { background: var(--danger); }
.syncpill[data-state="reloaded"]:not(:has(.syncpill__dot))::before { background: var(--st-partial); }
.syncpill[data-state="offline"]:not(:has(.syncpill__dot))::before  { background: var(--ink-3); }
.syncpill[data-state="saving"]   .syncpill__dot { background: var(--st-sent); }
.syncpill[data-state="failed"]   .syncpill__dot { background: var(--danger); }
.syncpill[data-state="reloaded"] .syncpill__dot { background: var(--st-partial); }
.syncpill[data-state="offline"]  .syncpill__dot { background: var(--ink-3); }
.syncpill[data-state="failed"] .syncpill__text { color: var(--danger); }

.banner {
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: var(--filter-h); padding-block: var(--sp-2);
  background: var(--warn-wash); border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--ink);
}
.banner[data-kind="conflict"] { background: var(--danger-wash); }
.banner[data-kind="offline"]  { background: var(--danger-wash); }
.banner[data-kind="conflict"] .banner__text,
.banner[data-kind="offline"]  .banner__text { color: var(--danger); font-weight: var(--fw-500); }
.banner[data-kind="stale"] .banner__text { color: var(--warn); font-weight: var(--fw-500); }
.banner__actions { display: flex; gap: var(--sp-4); margin-left: auto; }

.filterbar {
  position: sticky; top: var(--bar-h); z-index: calc(var(--z-sticky) - 1);
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: var(--filter-h);
  background: var(--bg-2); border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--ink-2);
}
.filterbar__left  { display: flex; align-items: center; gap: var(--sp-4); flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.filterbar__right { display: flex; align-items: center; gap: var(--sp-4); flex: none; color: var(--ink-3); white-space: nowrap; }
.filterbar--selection { background: var(--accent-wash); color: var(--ink); font-weight: var(--fw-500); }
.filterbar--selection .filterbar__right { color: var(--ink-2); }
.filterbar__field { display: inline-flex; align-items: center; gap: var(--sp-3); }
.filterbar__label { color: var(--ink-3); font-size: var(--fs-xs); }
.input--search { width: 240px; }

.sheet { padding-block: var(--sp-2) var(--sp-11); }
.view { display: block; }

/* 12-column sheet grid; blocks are ruled, never carded. */
.sheet__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.sheet__grid--split { margin-top: var(--sp-5); }
.sheet__block { grid-column: span 12; min-width: 0; }
.sheet__block--4 { grid-column: span 4; }
.sheet__block--5 { grid-column: span 5; }
.sheet__block--6 { grid-column: span 6; }
.sheet__block--7 { grid-column: span 7; }
.sheet__block--8 { grid-column: span 8; }

/* ── 5. Buttons · chips · segmented ─────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--r-2);
  background: transparent; font-size: var(--fs-sm); font-weight: var(--fw-500);
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.btn--icon { width: 28px; padding: 0; }
.btn--primary   { background: var(--ink); color: var(--ink-inv); }
.btn--primary:hover:not(:disabled)  { background: var(--ink-2); }
.btn--accent    { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover:not(:disabled)   { background: var(--accent-text); }
.btn--secondary { background: var(--bg-1); border-color: var(--line-2); color: var(--ink); }
.btn--secondary:hover:not(:disabled) { background: var(--bg-2); }
.btn--ghost     { color: var(--ink-2); }
.btn--ghost:hover:not(:disabled)    { background: var(--bg-2); color: var(--ink); }
.btn--danger    { color: var(--danger); }
.btn--danger:hover:not(:disabled)   { background: var(--danger-wash); }
/* Pressed: filled buttons return to their base fill, ghosts sink to bg-3. */
.btn:active:not(:disabled) { background: var(--bg-3); }
.btn--primary:active:not(:disabled) { background: var(--ink); }
.btn--accent:active:not(:disabled)  { background: var(--accent); }
/* Disabled keeps its own fill — dimmed, inert, no hover or pressed change. */
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn--intable { height: 24px; padding: 0 var(--sp-4); }
.btn.is-loading { position: relative; color: transparent; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 12px; height: 12px; border-radius: var(--r-full);
  border: 2px solid var(--ink-3); border-top-color: var(--ink);
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.chip {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  height: 28px; padding: 0 10px;
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r-2);
  font-size: var(--fs-sm); font-weight: var(--fw-500); color: var(--ink);
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out);
}
.chip:hover:not(:disabled) { background: var(--bg-2); }
.chip:active:not(:disabled) { background: var(--bg-3); }
.chip:disabled, .chip[disabled] { opacity: .45; cursor: not-allowed; }
.chip:not(select)::after { content: "▾"; font-size: 10px; color: var(--ink-3); }
select.chip, .chip--select {
  appearance: none; -webkit-appearance: none;
  max-width: 180px; padding-right: var(--sp-7); text-overflow: ellipsis;
  background-color: var(--bg-1);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%235e6561'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--sp-4) center;
}
:root[data-theme="dark"] select.chip, :root[data-theme="dark"] .chip--select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23808884'/%3E%3C/svg%3E"); }
.chip.is-active { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-text); }
/* An applied chip still answers the pointer: the wash deepens, it never turns grey. */
.chip.is-active:hover:not(:disabled)  { background: color-mix(in srgb, var(--accent-wash), var(--accent) 8%); }
.chip.is-active:active:not(:disabled) { background: color-mix(in srgb, var(--accent-wash), var(--accent) 16%); }

.seg {
  display: inline-flex; align-items: center; gap: 2px;
  height: 28px; padding: 2px; background: var(--bg-2); border-radius: var(--r-2); flex: none;
}
.seg__item {
  height: 24px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--r-1);
  background: transparent; font-size: var(--fs-sm); font-weight: var(--fw-500); color: var(--ink-2);
  cursor: pointer; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.seg__item:hover:not(:disabled) { color: var(--ink); }
.seg__item:active:not(:disabled) { background: var(--bg-3); color: var(--ink); }
.seg__item:disabled, .seg__item[disabled] { opacity: .45; cursor: not-allowed; }
.seg__item.is-active, .seg__item[aria-checked="true"] {
  background: var(--bg-1); border-color: var(--line-2); color: var(--ink);
}

/* ── 6. KPI cells · hero · pipeline ─────────────────────────────────────── */
/* Ruled grid: the 1px gap IS the rule. No cards, no shadows. */
.kpi__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  /* design.md §4.1: the 1px gap IS the rule. Top and bottom rules close the
     block; the sides stay open so a column that runs short ends as ruled
     ledger, not as a framed panel hanging in mid-air. */
  border-block: 1px solid var(--line);
}
.kpi__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi { background: var(--bg-1); padding: var(--sp-5) var(--sp-6); min-width: 0; }
/* KPI figures read as a column of labelled values: label and value share one left edge. */
.kpi .kpi__value, .kpi .kpi-value, .kpi .num { text-align: left; }
/* A hero that wraps its own .kpi child stays one cell, never a box inside a box. */
.kpi--hero > .kpi { padding: 0; background: transparent; border: 0; }
.kpi__label, .kpi-label {
  display: block; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi__value, .kpi-value {
  display: block; margin-top: var(--sp-2);
  font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: var(--fw-600); color: var(--ink);
}
.kpi__delta { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--ink-3); }
.kpi__delta[data-kind="ok"]     { color: var(--ok); }
.kpi__delta[data-kind="danger"] { color: var(--danger); }

.kpi--hero { border-top: 1px solid var(--line); padding-block: var(--sp-6); }
.kpi--hero .kpi__value, .kpi--hero .kpi-value, .hero__value, .hero-value {
  font-size: var(--fs-hero); line-height: var(--lh-hero); margin-top: var(--sp-2);
}
.kpi--hero[data-kind="danger"] .kpi__value, .kpi--hero[data-kind="danger"] .kpi-value { color: var(--danger); }
.kpi--hero[data-kind="ok"]     .kpi__value, .kpi--hero[data-kind="ok"] .kpi-value     { color: var(--ok); }
.kpi--hero:empty { display: none; }

/* One 100%-stacked bar: where the money sits in the pipeline. */
.pipeline { width: 100%; height: 12px; margin-bottom: var(--sp-5); }
.pipeline:empty { display: none; }
.pipeline svg, .chart { display: block; width: 100%; }

/* ── 7. To-do ledger (the hero of Home) ─────────────────────────────────── */
.todo { border-top: 1px solid var(--line); }
.todo__row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-4);
  min-height: 40px; padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line); cursor: pointer;
  transition: background var(--dur-1) var(--ease-out);
}
.todo__row .todo__what { min-width: 0; }
.todo__head { display: flex; align-items: center; gap: var(--sp-3); font-weight: var(--fw-500); }
.todo__act, .todo__text { display: block; font-size: var(--fs-sm); margin-top: 1px; }
.todo__who { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.todo__account { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo__sep { color: var(--ink-3); }
.todo__tag  { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }
.todo__row[data-kind="download"] { background: color-mix(in srgb, var(--danger-wash) 60%, transparent); }
.todo__row[data-kind="renew"]    { background: color-mix(in srgb, var(--warn-wash) 60%, transparent); }
.todo__row[data-kind="send"]     { background: color-mix(in srgb, var(--st-sent-wash) 60%, transparent); }
.todo__row[data-kind="billing"]  { background: color-mix(in srgb, var(--st-na-wash) 60%, transparent); }
.todo__row[data-kind="ok"]       { background: color-mix(in srgb, var(--ok-wash) 60%, transparent); }
.todo__row[data-kind="download"]:hover { background: var(--danger-wash); }
.todo__row[data-kind="renew"]:hover    { background: var(--warn-wash); }
.todo__row[data-kind="send"]:hover     { background: var(--st-sent-wash); }
.todo__row[data-kind="billing"]:hover  { background: var(--st-na-wash); }
.todo__row[data-kind="ok"]:hover       { background: var(--ok-wash); }
.todo__row[data-kind="work"], .todo__row[data-kind="none"] { background: transparent; }
.todo__row[data-kind="work"]:hover, .todo__row[data-kind="none"]:hover { background: var(--bg-2); }
.todo__row[data-kind="download"] .todo__act, .todo__row[data-kind="download"] .todo__text { color: var(--danger); }
/* design §4.4: line 2 is the action text IN ITS SEVERITY COLOUR. app.js renders that line
   as .todo__text (only the download rung listed both), so every rung names both here —
   otherwise renew/send/ok/billing rows print in full --ink and read as loud as a heading. */
.todo__row[data-kind="renew"]    .todo__act, .todo__row[data-kind="renew"]    .todo__text { color: var(--warn); }
.todo__row[data-kind="send"]     .todo__act, .todo__row[data-kind="send"]     .todo__text { color: var(--st-sent); }
.todo__row[data-kind="ok"]       .todo__act, .todo__row[data-kind="ok"]       .todo__text { color: var(--ok); }
.todo__row[data-kind="billing"]  .todo__act, .todo__row[data-kind="billing"]  .todo__text { color: var(--ink-2); }
.todo__row[data-kind="work"] .todo__act, .todo__row[data-kind="work"] .todo__text,
.todo__row[data-kind="none"] .todo__act, .todo__row[data-kind="none"] .todo__text { color: var(--ink-3); }
.todo__row.is-cursor { outline: 2px solid var(--accent); outline-offset: -2px; }
.todo__row.is-snoozed, .todo__row.is-muted { opacity: .6; }
.todo__actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.todo__snoozed {
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--ink-3); cursor: pointer;
}
.renewals { padding: var(--sp-4) var(--sp-4) 0; font-size: var(--fs-xs); color: var(--ink-3); }

/* The collapsed line is a summary, not a task: no severity wash, quieter ink. */
.todo__row--quiet[data-kind], .todo__row--quiet {
  grid-template-columns: 1fr; min-height: var(--row-h); background: transparent;
}
.todo__row--quiet[data-kind]:hover, .todo__row--quiet:hover { background: var(--bg-2); }
.todo__row--quiet[data-kind] .todo__text, .todo__row--quiet .todo__text { margin-top: 0; color: var(--ink-3); }
.todo__row--quiet[data-kind]:hover .todo__text, .todo__row--quiet:hover .todo__text { color: var(--ink-2); }

/* Glyph discipline (design §4.4, DoD 14). The action string is verbatim data, so the
   emoji *presentation* is corrected here and never in the text. `font-variant-emoji: text`
   pulls an emoji-default glyph into its monochrome text form, where it inherits the rung
   colour — that is what fixes ⏰ U+23F0. ❓ U+2753 cannot follow: on this machine only
   Apple Color Emoji and LastResort carry it, so forcing text presentation would draw a
   tofu box. It is desaturated instead, on the one rung that carries it (billing), whose
   ink is already neutral — so it stops competing with the genuine danger red above it.
   Desaturated it lands near #2f2f2f, which would sink to 1.6:1 on the dark ground; the
   dark fork therefore pre-dims the ink by the same factor the filter re-adds (27% / 3 is
   one pair — change them together). */
.todo__act, .todo__text { font-variant-emoji: text; }
.todo__row[data-kind="billing"] .todo__text { filter: grayscale(1); }
:root[data-theme="dark"] .todo__row[data-kind="billing"] .todo__text {
  color: color-mix(in srgb, var(--ink-2) 27%, var(--bg-1));
  filter: grayscale(1) brightness(3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .todo__row[data-kind="billing"] .todo__text {
    color: color-mix(in srgb, var(--ink-2) 27%, var(--bg-1));
    filter: grayscale(1) brightness(3);
  }
}

/* ── 8. Status pill · action · provider dot · meter ─────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 var(--sp-4) 0 var(--sp-3); border-radius: var(--r-1);
  font-size: var(--fs-sm); font-weight: var(--fw-500);
  background: var(--st-na-wash); color: var(--st-na); white-space: nowrap;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
/* Glyph is supplied here unless the client renders its own .pill__glyph. */
.pill[data-status]:not(:has(.pill__glyph))::before { content: "–"; opacity: .85; }
.pill[data-status="not-sent"] { background: var(--st-not-sent-wash); color: var(--st-not-sent); }
.pill[data-status="not-sent"]:not(:has(.pill__glyph))::before { content: "◌"; }
.pill[data-status="sent"]     { background: var(--st-sent-wash); color: var(--st-sent); }
.pill[data-status="sent"]:not(:has(.pill__glyph))::before { content: "→"; }
.pill[data-status="received"] { background: var(--st-received-wash); color: var(--st-received); }
.pill[data-status="received"]:not(:has(.pill__glyph))::before { content: "✓"; }
.pill[data-status="partial"]  { background: var(--st-partial-wash); color: var(--st-partial); }
.pill[data-status="partial"]:not(:has(.pill__glyph))::before { content: "◐"; }
.pill[data-status="rejected"] { background: var(--st-rejected-wash); color: var(--st-rejected); }
.pill[data-status="rejected"]:not(:has(.pill__glyph))::before { content: "✕"; }
.pill[data-status="draft"]    { background: var(--st-na-wash); color: var(--st-na); }
.pill--batch { font-family: var(--font-mono); }
button.pill, select.pill { border: 0; cursor: pointer; }
button.pill:hover, select.pill:hover { filter: none; background: var(--bg-3); }

.action { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); min-width: 0; }
.action[data-kind="download"] { color: var(--danger); }
.action[data-kind="renew"]    { color: var(--warn); }
.action[data-kind="send"]     { color: var(--st-sent); }
.action[data-kind="ok"]       { color: var(--ok); }
.action[data-kind="billing"]  { color: var(--ink-2); }
.action[data-kind="work"]     { color: var(--ink-3); }
.action[data-kind="none"]     { color: var(--ink-3); }
/* Severity wash sits in the cell, not on a card. */
td[data-col="action"]:has(.action[data-kind="download"]) { background: var(--danger-wash); }
td[data-col="action"]:has(.action[data-kind="renew"])    { background: var(--warn-wash); }
td[data-col="action"]:has(.action[data-kind="send"])     { background: var(--st-sent-wash); }
td[data-col="action"]:has(.action[data-kind="ok"])       { background: var(--ok-wash); }
td[data-col="action"]:has(.action[data-kind="billing"])  { background: var(--st-na-wash); }

.cell__provider { display: inline-flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.cell__provider > span:not(.dot) { overflow: hidden; text-overflow: ellipsis; }
.row__check { margin: 0; }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--ink-3); flex: none; }
.dot[data-provider="anthropic"] { background: var(--pv-anthropic); }
.dot[data-provider="openai"]    { background: var(--pv-openai); }
.dot[data-provider="google"]    { background: var(--pv-google); }
.dot[data-provider="xai"]       { background: var(--pv-xai); }

.meter { display: flex; align-items: center; gap: var(--sp-4); }
.meter__track { flex: 1 1 auto; height: 6px; border-radius: var(--r-full); background: var(--st-received-wash); overflow: hidden; }
.meter__fill  { display: block; height: 100%; background: var(--st-received); }
.meter[data-status="partial"] .meter__fill { background: var(--st-partial); }
.meter__label { flex: none; font-size: var(--fs-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* A pill with no data-status is metadata, not a status: muted face, lighter weight,
   and no ::before glyph (the glyph rules above are all gated on [data-status]). */
.pill--chip {
  background: var(--st-na-wash); color: var(--ink-2);
  font-weight: var(--fw-400); padding-inline: var(--sp-3);
}

/* Import result values (design.md §4.16). Without these three the parser's whole
   answer — new vs duplicate vs unparsed — rendered as one identical grey pill. */
.pill[data-status="new"]       { background: var(--ok-wash);     color: var(--ok); }
.pill[data-status="duplicate"] { background: var(--st-na-wash);  color: var(--st-na); }
.pill[data-status="unparsed"]  { background: var(--danger-wash); color: var(--danger); }
/* These three are parser outcomes, not redeem statuses, so they take no status glyph —
   otherwise they inherit the base "–" (the n/a mark) and read as an undesigned status. */
.pill[data-status="new"]:not(:has(.pill__glyph))::before,
.pill[data-status="duplicate"]:not(:has(.pill__glyph))::before,
.pill[data-status="unparsed"]:not(:has(.pill__glyph))::before { content: none; }

/* A <select class="pill"> tiled the caret across the whole pill in DARK only:
   background-image won from :root[data-theme="dark"] select (0,2,1) while
   background-repeat/position came from .pill's background shorthand (0,1,0).
   The override has to beat (0,2,1), so a bare `select.pill` (0,1,1) does NOT work. */
select.pill,
:root[data-theme="dark"] select.pill {
  background-image: none;
  padding-right: var(--sp-4);
}

/* Account name + its chips share one cell: the name ellipsises, the chips never shrink. */
.cell__account {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  max-width: 100%; min-width: 0; vertical-align: middle;
}
.cell__account > span:not(.pill) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell__account > .pill { flex: none; }

/* The PDF link is a glyph with a 20px hit area — ink, never link-blue, never underlined. */
.cell__link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: var(--r-1);
  color: var(--ink-3); text-decoration: none;
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.cell__link:visited { color: var(--ink-3); }
.cell__link:hover, .cell__link:focus-visible { color: var(--accent-text); background: var(--bg-3); text-decoration: none; }

/* Same glyph discipline as the To-do rungs (§7): text presentation where a text glyph
   exists (⏰), desaturation on the billing rung and the identity chip, the only two
   surfaces that carry ❓ — which no installed text face can draw. The dark fork pre-dims
   the ink by the factor the filter re-adds; 27% / 3 is one pair, change them together. */
.action { font-variant-emoji: text; }
.action[data-kind="billing"], .pill--chip { filter: grayscale(1); }
:root[data-theme="dark"] .action[data-kind="billing"],
:root[data-theme="dark"] .pill--chip {
  color: color-mix(in srgb, var(--ink-2) 27%, var(--bg-1));
  filter: grayscale(1) brightness(3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .action[data-kind="billing"],
  :root:not([data-theme]) .pill--chip {
    color: color-mix(in srgb, var(--ink-2) 27%, var(--bg-1));
    filter: grayscale(1) brightness(3);
  }
}

/* ── 9. Data table ──────────────────────────────────────────────────────── */
.tbl__wrap {
  overflow: auto;
  background: var(--bg-1);
  border-top: 1px solid var(--line-2);
  max-height: calc(100vh - var(--bar-h) - var(--filter-h) - var(--sp-9));
  overscroll-behavior: contain;
}
.tbl__wrap--short { max-height: none; }
.tbl {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%; min-width: 100%;
  font-size: var(--fs-sm);
}
.tbl--auto { table-layout: auto; width: 100%; }
.tbl thead th {
  position: sticky; top: 0; z-index: 3;
  height: var(--row-h-dense); padding: 0 var(--sp-4);
  background: var(--bg-2); color: var(--ink-2);
  font-size: var(--fs-xs); font-weight: var(--fw-500); text-align: left;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; user-select: none;
}
.tbl thead th:hover { color: var(--ink); }
.tbl thead th[aria-sort="ascending"], .tbl thead th[aria-sort="descending"],
.tbl thead th.is-sorted-asc, .tbl thead th.is-sorted-desc { color: var(--ink); }
.tbl thead th[aria-sort="ascending"]::after,  .tbl thead th.is-sorted-asc::after  { content: "▴"; font-size: 10px; margin-left: var(--sp-2); }
.tbl thead th[aria-sort="descending"]::after, .tbl thead th.is-sorted-desc::after { content: "▾"; font-size: 10px; margin-left: var(--sp-2); }
.tbl tbody td {
  height: var(--row-h); padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--line); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tbl--dense tbody td, .tbl--dense thead th { height: var(--row-h-dense); }
.tbl tbody tr { transition: background var(--dur-1) var(--ease-out); }
.tbl tbody tr:hover > td { background: var(--bg-2); }
.tbl tbody tr.is-selected > td { background: var(--accent-wash); }
.tbl tbody tr.is-cursor > td { box-shadow: inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent); }
.tbl tbody tr.is-cursor > td:first-child { box-shadow: inset 2px 0 0 var(--accent), inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent); }
.tbl tbody tr.is-cursor > td:last-child  { box-shadow: inset -2px 0 0 var(--accent), inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent); }
.tbl tbody tr.is-muted > td { color: var(--ink-3); }
.tbl tbody tr.is-new > td { background: var(--accent-wash); }
.tbl tfoot td {
  position: sticky; bottom: 0; z-index: 2;
  height: var(--row-h); padding: 0 var(--sp-4);
  background: var(--bg-2); font-weight: var(--fw-600);
  border-top: 1px solid var(--line-2); white-space: nowrap;
}
.tbl td.num, .tbl th.num { text-align: right; }
.tbl td.is-negative, .tbl td[data-neg="1"] { color: var(--danger); }
.tbl .cell--muted { color: var(--ink-3); }

/* Editable cells: a hairline dotted underline appears on hover — never a box. */
.tbl td.cell--edit { cursor: text; }
.tbl td.cell--edit:hover:not(:has(.pill)) { text-decoration: underline dotted var(--line-2); text-underline-offset: 3px; }
.tbl td.is-editing { padding: 0 var(--sp-2); background: var(--bg-1); }
.tbl td.is-editing input, .tbl td.is-editing select {
  width: 100%; height: 24px; padding: 0 var(--sp-3);
  background-color: var(--bg-1); color: var(--ink);
  border: 1px solid var(--accent); border-radius: var(--r-1);
  font: var(--fw-400) var(--fs-sm)/1 var(--font-ui);
}
.tbl td.is-editing.is-invalid input, .tbl td.is-invalid input {
  border-color: var(--danger); background-color: var(--danger-wash);
}
/* The inline field IS the cell: 24px inside the 32px row, so nothing reflows and the
   baseline does not move. It must not inherit the 28px boxed field of §10. */
.cell__input {
  display: block; width: 100%; height: 24px; margin: 0; padding: 0 var(--sp-3);
  background-color: var(--bg-1); color: var(--ink);
  border: 1px solid var(--accent); border-radius: var(--r-1);
  font: var(--fw-400) var(--fs-sm)/22px var(--font-ui);
}
/* background-COLOR, never the shorthand: the shorthand would wipe §10's caret image. */
select.cell__input { padding-right: var(--sp-6); background-position: right var(--sp-2) center; }
.tbl td.num > .cell__input, .cell__input.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.tbl td[data-col="reference"] > .cell__input, .tbl td[data-col="invoice_no"] > .cell__input { font-family: var(--font-mono); }
.cell__input.is-invalid, .tbl td.is-invalid > .cell__input { border-color: var(--danger); background-color: var(--danger-wash); }
.tbl td.is-flash { animation: cellflash var(--dur-flash) var(--ease-out); }
@keyframes cellflash { from { background: var(--accent-wash); } to { background: transparent; } }

/* Sticky left columns while a wide table scrolls sideways. */
#tbl-invoices th[data-col="sel"],  #tbl-invoices td[data-col="sel"]  { position: sticky; left: 0;    z-index: 2; background: var(--bg-1); }
#tbl-invoices th[data-col="date"], #tbl-invoices td[data-col="date"] { position: sticky; left: 32px; z-index: 2; background: var(--bg-1); }
#tbl-invoices thead th[data-col="sel"], #tbl-invoices thead th[data-col="date"] { z-index: 4; background: var(--bg-2); }
#tbl-accounts th[data-col="provider"], #tbl-accounts td[data-col="provider"] { position: sticky; left: 0;    z-index: 2; background: var(--bg-1); }
#tbl-accounts th[data-col="account"],  #tbl-accounts td[data-col="account"]  { position: sticky; left: 88px; z-index: 2; background: var(--bg-1); }
/* The sticky-left cells win their background by #id, which outranked the footer's own --bg-2
   and split the TOTAL row with a hard tone edge. The footer keeps one ground across its width. */
#tbl-invoices tfoot td[data-col="sel"],  #tbl-invoices tfoot td[data-col="date"],
#tbl-accounts tfoot td[data-col="provider"], #tbl-accounts tfoot td[data-col="account"] { background: var(--bg-2); }
#tbl-accounts thead th[data-col="provider"], #tbl-accounts thead th[data-col="account"] { z-index: 4; background: var(--bg-2); }
.tbl tbody tr:hover > td[data-col="sel"],
.tbl tbody tr:hover > td[data-col="date"],
.tbl tbody tr:hover > td[data-col="provider"],
.tbl tbody tr:hover > td[data-col="account"] { background: var(--bg-2); }
.tbl tbody tr.is-selected > td[data-col="sel"],
.tbl tbody tr.is-selected > td[data-col="date"],
.tbl tbody tr.is-selected > td[data-col="provider"],
.tbl tbody tr.is-selected > td[data-col="account"] {
  background-color: var(--bg-1);
  background-image: linear-gradient(var(--accent-wash), var(--accent-wash));
}
.tbl tbody tr.is-new > td[data-col="sel"],
.tbl tbody tr.is-new > td[data-col="date"],
.tbl tbody tr.is-new > td[data-col="provider"],
.tbl tbody tr.is-new > td[data-col="account"] {
  background-color: var(--bg-1);
  background-image: linear-gradient(var(--accent-wash), var(--accent-wash));
}

/* Column widths — design.md §3.3/§3.4 (pixels win). */
.col-sel, #tbl-invoices [data-col="sel"], #tbl-import [data-col="sel"] { width: 32px; text-align: center; padding: 0; }
/* Sum of the declared column widths below. Without an explicit total, `width: max-content`
   re-derived the columns from content and the redeem columns fell off-screen. */
#tbl-invoices { width: 1556px; }
#tbl-invoices [data-col="date"]            { width: 96px; }
#tbl-invoices [data-col="provider"]        { width: 40px; }
#tbl-invoices [data-col="account"]         { width: 150px; }
#tbl-invoices [data-col="amount"]          { width: 96px; }
#tbl-invoices [data-col="usd"]             { width: 96px; }
#tbl-invoices [data-col="plan"]            { width: 110px; }
#tbl-invoices [data-col="period"]          { width: 150px; }
#tbl-invoices [data-col="invoice_no"]      { width: 130px; }
#tbl-invoices [data-col="redeem_status"]   { width: 110px; }
#tbl-invoices [data-col="batch"]           { width: 64px; }
#tbl-invoices [data-col="sent_date"]       { width: 96px; }
#tbl-invoices [data-col="received_date"]   { width: 96px; }
#tbl-invoices [data-col="received_amount"] { width: 96px; }
#tbl-invoices [data-col="reference"]       { width: 110px; }
#tbl-invoices [data-col="notes"]           { width: 44px; }
#tbl-invoices [data-col="file"]            { width: 40px; text-align: center; }
#tbl-invoices td[data-col="invoice_no"], #tbl-invoices td[data-col="batch"], #tbl-invoices td[data-col="reference"] { font-family: var(--font-mono); }
#tbl-accounts { width: 1994px; }
#tbl-accounts [data-col="provider"]        { width: 88px; }
#tbl-accounts [data-col="account"]         { width: 190px; }
#tbl-accounts [data-col="plan"]            { width: 96px; }
#tbl-accounts [data-col="billing"]         { width: 72px; }
#tbl-accounts [data-col="price"]           { width: 72px; }
#tbl-accounts [data-col="invoices"]        { width: 68px; }
#tbl-accounts [data-col="first_paid"], #tbl-accounts [data-col="last_paid"], #tbl-accounts [data-col="next_charge"] { width: 96px; }
#tbl-accounts [data-col="span_days"]       { width: 60px; }
#tbl-accounts [data-col="total_usd"]       { width: 90px; }
#tbl-accounts [data-col="avg_per_invoice"] { width: 80px; }
#tbl-accounts [data-col="trend"]           { width: 72px; }
#tbl-accounts [data-col="expected_charges"]{ width: 76px; }
#tbl-accounts [data-col="missing_invoices"]{ width: 68px; }
#tbl-accounts [data-col="days_to_next"]    { width: 58px; }
#tbl-accounts [data-col="not_sent"], #tbl-accounts [data-col="sent"], #tbl-accounts [data-col="received"] { width: 66px; }
#tbl-accounts [data-col="received_usd"]    { width: 88px; }
#tbl-accounts [data-col="outstanding_usd"] { width: 100px; }
#tbl-accounts [data-col="action"]          { width: 230px; }
#tbl-accounts [data-col="notes"]           { width: 200px; }
/* Workbook conditional formats. */
#tbl-accounts td[data-col="missing_invoices"].is-warn,
#tbl-accounts td[data-col="outstanding_usd"].is-warn { color: var(--danger); font-weight: var(--fw-500); }
#tbl-accounts td[data-col="days_to_next"].is-warn { color: var(--warn); }
#tbl-import td[data-col="original_name"], #tbl-import td[data-col="proposed_file"] { font-family: var(--font-mono); }

/* Row checkbox + the group header row Accounts uses. */
.tbl input[type="checkbox"] { margin: 0; }
.tbl tr.row--group td { background: var(--bg-2); font-weight: var(--fw-500); color: var(--ink-2); }

/* ── 10. Inputs · settings ledger · keymap ──────────────────────────────── */
input[type="text"], input[type="url"], input[type="email"], input[type="number"], input[type="date"], input[type="search"], select, textarea {
  height: 28px; padding: 0 var(--sp-4);
  background: var(--bg-1); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-2);
  font: var(--fw-400) var(--fs-md)/var(--lh-md) var(--font-ui);
  transition: border-color var(--dur-1) var(--ease-out);
}
textarea { height: auto; min-height: 72px; padding: var(--sp-3) var(--sp-4); resize: vertical; line-height: var(--lh-md); }
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input.is-invalid, select.is-invalid, textarea.is-invalid { border-color: var(--danger); background: var(--danger-wash); }
input:disabled, select:disabled, textarea:disabled { opacity: .45; cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
select {
  appearance: none; -webkit-appearance: none; padding-right: var(--sp-7);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%235e6561'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--sp-4) center;
}
:root[data-theme="dark"] select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23808884'/%3E%3C/svg%3E");
}
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px; flex: none; margin: 0; cursor: pointer;
  background: var(--bg-1); border: 1px solid var(--ink-3); border-radius: var(--r-1);
  display: inline-grid; place-content: center;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
input[type="checkbox"]:hover:not(:disabled) { border-color: var(--ink); }
input[type="checkbox"]:checked {
  background: var(--accent); border-color: var(--accent);
}
input[type="checkbox"]:checked::before {
  content: "\2713"; font-size: 10px; line-height: 1; color: var(--accent-ink);
}
input[type="checkbox"]:indeterminate {
  background: var(--accent); border-color: var(--accent);
}
input[type="checkbox"]:indeterminate::before {
  content: "\2013"; font-size: 10px; line-height: 1; color: var(--accent-ink);
}
.field__error { display: block; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--danger); }
.check { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; }

.settings { max-width: 720px; padding-top: var(--sp-4); }
.settings__row {
  display: grid; grid-template-columns: 1fr 260px; align-items: center; gap: var(--gap);
  min-height: var(--row-h); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-md);
}
.settings__row label, .settings__label { color: var(--ink-2); }
.settings__row input[type="checkbox"] { justify-self: start; }
.settings__paths { padding: var(--sp-4) 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: var(--lh-md); }
.keymap { display: grid; grid-template-columns: 88px 1fr; gap: var(--sp-3) var(--sp-6); padding: var(--sp-4) 0; font-size: var(--fs-sm); }
.keymap dt, .keymap__key {
  align-self: start;
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink);
  background: var(--bg-2); border-radius: var(--r-1); padding: 0 5px; justify-self: start;
}
.keymap dd, .keymap__what { margin: 0; color: var(--ink-2); }
.settings__paths:empty, .keymap:empty { display: none; }
.settings > h2.section:has(+ .settings__paths:empty),
.settings > h2.section:has(+ .keymap:empty) { display: none; }

/* ── 11. Empty · skeleton ───────────────────────────────────────────────── */
.empty { max-width: 40ch; margin: 0 auto; padding: var(--sp-11) 0; text-align: center; }
.empty--table { background: var(--bg-1); max-width: none; }
.empty--table > * { max-width: 40ch; margin-inline: auto; }
.empty__title { font-weight: var(--fw-500); color: var(--ink); }
.empty__body  { margin-top: var(--sp-2); color: var(--ink-2); font-size: var(--fs-sm); }
.empty .btn { margin-top: var(--sp-5); }

.skel { display: block; height: var(--row-h); background: var(--bg-3); border-radius: var(--r-1); animation: pulse 1.6s var(--ease-out) infinite; }
.skel--th    { height: var(--row-h-dense); }
.skel--row   { height: var(--row-h); margin-bottom: 1px; }
.skel--label { height: 11px; width: 40%; }
.skel--value { height: 18px; width: 60%; margin-top: var(--sp-2); }
.skel--plot  { height: 240px; }
@keyframes pulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
[aria-busy="true"] { cursor: progress; }

/* ── 12. Toast · drawer · strip · overlays ──────────────────────────────── */
.toasts {
  position: fixed; right: var(--sp-6); bottom: var(--sp-6); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--sp-4); pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--sp-4);
  min-width: 280px; max-width: 420px; padding: 10px var(--sp-5);
  background: var(--bg-1); border-radius: var(--r-3); box-shadow: var(--shadow-pop);
  font-size: var(--fs-sm); color: var(--ink); pointer-events: auto;
  animation: toastin var(--dur-3) var(--ease-out);
}
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } }
.toast__dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--st-sent); flex: none; }
.toast[data-kind="ok"]    .toast__dot { background: var(--ok); }
.toast[data-kind="error"] .toast__dot { background: var(--danger); }
.toast__text { flex: 1 1 auto; }
.toast__action { display: inline-flex; align-items: center; min-height: 24px; flex: none; white-space: nowrap;
  color: var(--accent-text); font-weight: var(--fw-500); background: none; border: 0; cursor: pointer; padding: 0 var(--sp-3); }
.toast__close { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px;
  color: var(--ink-3); background: none; border: 0; cursor: pointer; padding: 0 var(--sp-2); }
.toast__close:hover { color: var(--ink); }

.drawer {
  position: fixed; top: var(--bar-h); right: 0; bottom: 0; width: 360px; z-index: var(--z-dropdown);
  display: flex; flex-direction: column;
  background: var(--bg-1); border-left: 1px solid var(--line-2);
  animation: drawerin var(--dur-2) var(--ease-out);
}
@keyframes drawerin { from { opacity: 0; transform: translateX(16px); } }
.drawer__head { flex: none; display: flex; align-items: center; gap: var(--sp-4); height: var(--bar-h); padding: 0 var(--sp-6); border-bottom: 1px solid var(--line); }
.drawer__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-lg); font-weight: var(--fw-600); }
.drawer__body { flex: 1 1 auto; overflow: auto; padding: var(--sp-5) var(--sp-6); }
.drawer__foot { flex: none; display: flex; justify-content: flex-end; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); border-top: 1px solid var(--line); }
.drawer__foot:empty { display: none; }
.fields { display: grid; gap: var(--sp-4); }
.fields input, .fields select:not(.pill), .fields textarea { width: 100%; }
.fields .field__value.num { text-align: left; }
.field__label { display: block; font-size: var(--fs-xs); color: var(--ink-3); }
.field__value { display: block; font-size: var(--fs-md); }
/* Drawer rows (the `?` shortcuts sheet, and any list the drawer shows). Ruled, never carded. */
.drawer__row {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: var(--row-h); padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
}
.drawer__row:last-child { border-bottom: 0; }
.drawer__row-text { flex: 1 1 auto; min-width: 0; color: var(--ink-2); font-size: var(--fs-sm); }

.strip {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-dropdown);
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: var(--bar-h); padding-inline: max(var(--gutter), calc((100% - 1600px) / 2));
  background: var(--bg-2); border-top: 1px solid var(--line-2);
  font-size: var(--fs-sm);
  animation: stripin var(--dur-2) var(--ease-out);
}
@keyframes stripin { from { opacity: 0; transform: translateY(8px); } }
.strip__title  { font-weight: var(--fw-500); white-space: nowrap; }
.strip__fields { display: flex; align-items: center; gap: var(--sp-4); flex: 1 1 auto; flex-wrap: wrap; }
.strip__actions{ display: flex; align-items: center; gap: var(--sp-4); flex: none; }
.strip label { color: var(--ink-3); font-size: var(--fs-xs); }

.palette {
  width: 560px; max-width: calc(100vw - var(--sp-9)); padding: 0; margin-top: 15vh;
  background: var(--bg-2); color: var(--ink);
  border: 0; border-radius: var(--r-3); box-shadow: var(--shadow-dialog);
}
.palette::backdrop, .dialog::backdrop { background: var(--overlay); }
.palette__input {
  width: 100%; height: 36px; border: 0; border-bottom: 1px solid var(--line);
  border-radius: var(--r-3) var(--r-3) 0 0; background: var(--bg-1); padding: 0 var(--sp-5);
}
.palette__input:focus { border-color: var(--line); }
.palette__results { max-height: 320px; overflow: auto; padding: var(--sp-2); }
.palette__item {
  display: flex; align-items: center; gap: var(--sp-4);
  height: var(--row-h); padding: 0 var(--sp-4); border-radius: var(--r-1);
  font-size: var(--fs-sm); cursor: pointer;
}
.palette__item:hover { background: var(--bg-2); }
.palette__item.is-cursor { background: var(--accent-wash); box-shadow: inset 2px 0 0 var(--accent); }
.palette__key { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-xs); background: var(--bg-2); border-radius: var(--r-1); padding: 0 5px; }

.dialog {
  width: 440px; max-width: calc(100vw - var(--sp-9)); padding: var(--sp-7);
  background: var(--bg-2); color: var(--ink); border: 0; border-radius: var(--r-3);
  box-shadow: var(--shadow-dialog);
  animation: dialogin var(--dur-3) var(--ease-out);
}
@keyframes dialogin { from { opacity: 0; transform: scale(.98); } }
.dialog__title { font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: var(--fw-600); }
.dialog__body  { margin-top: var(--sp-4); max-width: 60ch; font-size: var(--fs-md); color: var(--ink-2); }
.dialog__foot  { display: flex; justify-content: flex-end; gap: var(--sp-4); margin-top: var(--sp-7); }

.popover {
  position: fixed; z-index: var(--z-dropdown); min-width: 180px; max-height: 320px; overflow: auto;
  padding: var(--sp-2); background: var(--bg-1); border-radius: var(--r-3); box-shadow: var(--shadow-pop);
}
.popover__item {
  display: flex; align-items: center; gap: var(--sp-4);
  height: 28px; padding: 0 var(--sp-4); border-radius: var(--r-1); font-size: var(--fs-sm); cursor: pointer;
}
.popover__item:hover, .popover__item.is-cursor { background: var(--bg-2); }
.popover__item[aria-selected="true"]::before { content: "✓"; color: var(--ink); }

.tooltip {
  position: fixed; z-index: var(--z-tooltip); max-width: 320px;
  padding: var(--sp-3) var(--sp-4); background: var(--bg-1); border-radius: var(--r-2);
  box-shadow: var(--shadow-pop); font-size: var(--fs-xs); color: var(--ink); pointer-events: none;
}
.tooltip__row { display: flex; align-items: center; gap: var(--sp-4); }
.tooltip__row .num { margin-left: auto; }

.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3);
  height: 160px; margin-top: var(--sp-5);
  background: var(--bg-1); border: 1px dashed var(--line-2); border-radius: var(--r-3);
  color: var(--ink-2); cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.dropzone__glyph { font-size: var(--fs-xl); color: var(--ink-3); }
.dropzone__title { font-size: var(--fs-lg); color: var(--ink); }
.dropzone__hint  { font-size: var(--fs-xs); color: var(--ink-3); }
.dropzone.is-dragover { border-style: solid; border-color: var(--accent); background: var(--accent-wash); }
.dropzone.is-dragover .dropzone__glyph { color: var(--accent-text); }
.dropzone.is-invalid { border-color: var(--danger); }
.import__summary { padding: var(--sp-5) 0 var(--sp-3); font-size: var(--fs-sm); color: var(--ink-2); }
.import__actions { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5) 0; }
.import__spacer  { flex: 1 1 auto; }

.dropveil {
  position: fixed; inset: 0; z-index: var(--z-backdrop);
  display: flex; align-items: center; justify-content: center;
  background: var(--overlay); color: var(--overlay-ink);
}
.dropveil__text {
  padding: var(--sp-7) var(--sp-9); border: 1px dashed var(--overlay-ink); border-radius: var(--r-3);
  color: var(--overlay-ink); font-size: var(--fs-xl); font-weight: var(--fw-500);
}

.chord {
  position: fixed; left: var(--sp-6); bottom: var(--sp-6); z-index: var(--z-toast);
  padding: var(--sp-2) var(--sp-4); background: var(--bg-1); border-radius: var(--r-2);
  box-shadow: var(--shadow-pop); font-family: var(--font-mono); font-size: var(--fs-sm);
}

/* ── 13. Batches list ───────────────────────────────────────────────────── */
.batchlist { border-top: 1px solid var(--line); }
.batchcard {
  padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--line); cursor: pointer;
  transition: background var(--dur-1) var(--ease-out);
}
.batchcard:hover { background: var(--bg-2); }
.batchcard.is-selected { background: var(--accent-wash); }
.batchcard.is-selected .batchcard__id { font-weight: var(--fw-600); }
.batchcard__top { display: flex; align-items: center; gap: var(--sp-4); }
.batchcard__id  { font-family: var(--font-mono); font-weight: var(--fw-500); }
.batchcard__meta{ color: var(--ink-2); font-size: var(--fs-sm); }
.batchcard__sum { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-2); }
.batchcard__sum .pill { margin-left: auto; }
.batchcard .meter { margin-top: var(--sp-3); }

/* ── 14. Charts (hand-drawn SVG; marks read tokens directly) ────────────── */
.chart__block { padding-top: var(--sp-2); border-top: 1px solid var(--line-2); background: var(--bg-1); padding-inline: var(--sp-6); padding-bottom: var(--sp-4); }
.chart__host { min-height: 240px; }
.chart__block:has(> .chart__host:empty) { display: none; }
.chart__host--tall { min-height: 320px; }
.chart__host--bars { min-height: 160px; }
.chart { overflow: visible; }
.chart text { font-size: var(--fs-xs); fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.chart .gridline { stroke: var(--grid); stroke-width: 1; }
.chart .baseline { stroke: var(--axis); stroke-width: 1; }
.chart .mark { transition: opacity var(--dur-2) var(--ease-out); }
.chart .mark[data-slot="1"] { fill: var(--s1); }
.chart .mark[data-slot="2"] { fill: var(--s2); }
.chart .mark[data-slot="3"] { fill: var(--s3); }
.chart .mark[data-slot="4"] { fill: var(--s4); }
.chart .mark[data-slot="5"] { fill: var(--s5); }
.chart .mark[data-slot="6"] { fill: var(--s6); }
.chart .mark[data-slot="7"] { fill: var(--s7); }
.chart .mark[data-slot="8"] { fill: var(--s8); }
.chart .mark[data-slot="other"] { fill: var(--s-other); }
.chart .mark.is-dimmed { fill: var(--s-dim); }
.chart .mark[data-status="not-sent"] { fill: var(--st-not-sent); }
.chart .mark[data-status="sent"]     { fill: var(--st-sent); }
.chart .mark[data-status="received"] { fill: var(--st-received); }
.chart .mark[data-status="partial"]  { fill: var(--st-partial); }
.chart .mark[data-status="rejected"] { fill: var(--st-rejected); }
.chart .mark[data-status="n/a"]      { fill: var(--st-na); }
.chart .line { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { fill: var(--ink-2); opacity: .10; }
.chart .spark { fill: none; stroke: var(--ink-3); stroke-width: 1.5; }
.chart .spark__last { fill: var(--accent); }
.chart .label { fill: var(--ink); }
.chart[data-chart="spark"] { height: 20px; width: 64px; }
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-6); padding: var(--sp-3) var(--sp-6); font-size: var(--fs-sm); color: var(--ink-2); }
.legend__item { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; }
.legend__swatch { width: 10px; height: 10px; border-radius: var(--r-1); background: var(--s-other); }
.legend__item[data-slot="1"] .legend__swatch { background: var(--s1); }
.legend__item[data-slot="2"] .legend__swatch { background: var(--s2); }
.legend__item[data-slot="3"] .legend__swatch { background: var(--s3); }
.legend__item[data-slot="4"] .legend__swatch { background: var(--s4); }
.legend__item[data-slot="5"] .legend__swatch { background: var(--s5); }
.legend__item[data-slot="6"] .legend__swatch { background: var(--s6); }
.legend__item[data-slot="7"] .legend__swatch { background: var(--s7); }
.legend__item[data-slot="8"] .legend__swatch { background: var(--s8); }
.legend__item.is-dimmed .legend__swatch { background: var(--s-dim); }
.legend__item.is-dimmed { color: var(--ink-3); }

/* ── 15. Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .sheet__block--4, .sheet__block--5, .sheet__block--7, .sheet__block--8 { grid-column: span 12; }
  .tab { padding: 0 var(--sp-4); }
  /* Collapse the count badges before the strip has to scroll (DoD 25). */
  .tab__badge { display: none; }
  /* Narrow: the tab strip scrolls rather than colliding with the global controls. */
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  /* The scroll container clips an outset ring — inset it so the keyboard stop stays visible. */
  .tab:focus-visible { outline-offset: -2px; }
  .kpi__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1099px) {
  .topbar { gap: var(--sp-4); }
  .tab { padding: 0 var(--sp-3); }
  .topbar__name { display: none; }
  .chip { max-width: 120px; overflow: hidden; }
  .settings__row { grid-template-columns: 1fr 180px; }
}
@media (max-width: 999px) {
  .sheet__block--6 { grid-column: span 12; }
  .kpi__grid, .kpi__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drawer { width: 100%; }
}

/* ── 16. Reduced motion — nothing moves, everything still reads ─────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* ── 17. Dashboard — the owner's Home (OVERRIDES §19, 2026-09-30) ──────────
   Four headline cells, each number once: paid · reimbursed · still to claim ·
   missing. Ruled like the KPI grid (the 1px gap is the rule), never carded. */
.kpi__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash__hero {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line); border-block: 1px solid var(--line);
}
.dash__kpi { background: var(--bg-1); padding: var(--sp-6) var(--sp-6) var(--sp-5); min-width: 0; }
.dash__value {
  display: block; margin-top: var(--sp-2);
  font-size: 30px; line-height: 36px; font-weight: var(--fw-600); letter-spacing: -0.01em;
  font-variant-numeric: proportional-nums lining-nums; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash__kpi[data-kind="danger"] .dash__value { color: var(--danger); }
.dash__kpi[data-kind="warn"]   .dash__value { color: var(--warn); }
.dash__kpi[data-kind="ok"]     .dash__value { color: var(--ok); }
.dash__sub { display: block; margin-top: var(--sp-2); font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--ink-3); }
.dash__minor { margin-top: var(--gap); }
.dash__hero--tokens { margin-bottom: var(--sp-5); }

.missing__group {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5) 0 var(--sp-3); font-size: var(--fs-sm); font-weight: var(--fw-600);
}
.missing__group:first-child { padding-top: 0; }
.missing__group-sub { margin-left: auto; font-size: var(--fs-xs); font-weight: var(--fw-400); color: var(--ink-3); }
.missing__list { border-top: 1px solid var(--line); }
.missing__row {
  padding: var(--sp-4) var(--sp-4); border-bottom: 1px solid var(--line); cursor: pointer;
  background: color-mix(in srgb, var(--danger-wash) 45%, transparent);
  transition: background var(--dur-1) var(--ease-out);
}
.missing__row:hover { background: var(--danger-wash); }
.missing__row--none { background: color-mix(in srgb, var(--st-na-wash) 60%, transparent); }
.missing__row--none:hover { background: var(--st-na-wash); }
.missing__who { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.missing__account { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-500); }
.missing__right { display: inline-flex; align-items: baseline; gap: var(--sp-4); margin-left: auto; flex: none; }
.missing__count { color: var(--danger); font-weight: var(--fw-600); font-size: var(--fs-sm); }
.missing__row--none .missing__count { color: var(--ink-3); font-weight: var(--fw-400); }
.missing__usd { color: var(--ink-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.missing__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.mchip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 var(--sp-4);
  border-radius: var(--r-1); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  background: var(--bg-1); color: var(--danger);
  font-size: var(--fs-xs); font-weight: var(--fw-500); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mchip--estimate { border-style: dashed; color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.missing__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-3);
}
.missing__link { margin-left: auto; color: var(--accent-text); font-weight: var(--fw-500); }
.missing__link:visited { color: var(--accent-text); }
.missing__ok { padding: var(--sp-4) var(--sp-4) 0; font-size: var(--fs-xs); color: var(--ok); }

.tbl td.is-warn { color: var(--danger); font-weight: var(--fw-500); }
.tbl tr.row--total td { background: var(--bg-2); font-weight: var(--fw-600); }
#tbl-dash-accounts tbody tr.row:not(.row--total) { cursor: pointer; }
.tbl td.tbl__head-cell { font-weight: var(--fw-500); }

.tokens__empty {
  padding: var(--sp-6); background: var(--bg-1);
  border: 1px dashed var(--line-2); border-radius: var(--r-3);
}
.tokens__empty .empty__body { max-width: 72ch; }
.tokens__format {
  margin: var(--sp-4) 0; padding: var(--sp-4) var(--sp-5);
  background: var(--bg-2); border-radius: var(--r-2);
  overflow-x: auto; white-space: pre; font-size: var(--fs-xs); line-height: var(--lh-sm);
}

.other { border-bottom: 1px solid var(--line); }
.other__summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-4) 0; cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-500);
}
.other__hint { font-size: var(--fs-xs); font-weight: var(--fw-400); color: var(--ink-3); }
.other__list { padding-bottom: var(--sp-4); }
.other__row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; font-size: var(--fs-sm); min-width: 0; }
.other__account { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.other__meta { margin-left: auto; color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; }

.access { padding: var(--sp-4) 0; display: grid; gap: var(--sp-3); justify-items: start; }
.access__line { color: var(--ink); font-size: var(--fs-md); }
.access__hint { color: var(--ink-3); font-size: var(--fs-xs); }
.topbar__ro { margin-left: var(--sp-3); }

/* ── 18. Sign-in / first-run page (auth.py renders it; no JS) ──────────────── */
body.gate {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
}
.gate__card {
  width: min(400px, 100%); padding: var(--sp-9) var(--sp-8);
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3);
}
.gate__brand { display: flex; align-items: center; gap: var(--sp-4); font-weight: var(--fw-600); margin-bottom: var(--sp-8); }
.gate__title { font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: var(--fw-600); letter-spacing: -0.01em; }
.gate__lead { margin-top: var(--sp-4); color: var(--ink-2); font-size: var(--fs-md); }
.gate__error {
  margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-2);
  background: var(--danger-wash); color: var(--danger); font-weight: var(--fw-500); font-size: var(--fs-sm);
}
.gate__form { display: grid; gap: var(--sp-4); margin-top: var(--sp-7); }
.gate__label { font-size: var(--fs-xs); color: var(--ink-3); }
.gate__input[type="password"] {
  width: 100%; height: 44px; padding: 0 var(--sp-5);
  background: var(--bg-0); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-2);
  font: var(--fw-400) 16px/1 var(--font-ui);            /* 16px: iOS does not zoom */
  transition: border-color var(--dur-1) var(--ease-out);
}
.gate__input[type="password"]:hover { border-color: var(--ink-3); }
.gate__input[type="password"]:focus { border-color: var(--accent); }
.gate__submit { height: 44px; font-size: var(--fs-lg); margin-top: var(--sp-3); }
.gate__code {
  margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-2);
  background: var(--bg-2); font-family: var(--font-mono); font-size: var(--fs-sm); overflow-x: auto;
}

/* ── 19. Phone (≤760px): bottom tab bar, card rows, no sideways page scroll ── */
@media (max-width: 760px) {
  :root { --gutter: 12px; --bar-h: 48px; --tabbar-h: 58px; }
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  .topbar {
    gap: var(--sp-3);
    height: calc(var(--bar-h) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top);
  }
  .topbar__name { display: inline; }
  /* The phone cards show native AND USD side by side, so the amount-mode switch and the
     command palette (no keyboard) step aside; the sync pill keeps only its state dot
     (api.js writes plain text into it, so the text is hidden by size, not by class). */
  #palette-btn, #currency-mode { display: none; }
  .syncpill { padding: 0 var(--sp-2); font-size: 0; gap: 0; }
  #global-provider { max-width: 92px; padding: 0 var(--sp-4); }
  .seg__item { padding: 0 var(--sp-4); }

  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-dropdown);
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--bg-1); border-top: 1px solid var(--line-2);
    overflow-x: auto; overflow-y: hidden;
  }
  .tab {
    flex: 1 0 52px; justify-content: center; height: var(--tabbar-h); padding: 0 var(--sp-2);
    font-size: var(--fs-xs); border-bottom: 0; border-top: 2px solid transparent;
  }
  .tab.is-active { border-top-color: var(--accent); color: var(--accent-text); background: var(--accent-wash); }
  .tab:focus-visible { outline-offset: -3px; }

  /* A four-row sticky filter bar would eat a third of the screen: it scrolls away on
     phones, and on Home (no controls, only a summary the Totals already carry) it hides. */
  .filterbar {
    position: static;
    flex-wrap: wrap; padding-block: var(--sp-3); row-gap: var(--sp-3);
  }
  .filterbar:has(.filterbar__left:empty) { display: none; }
  .filterbar__right { white-space: normal; flex: 1 1 100%; }
  .filterbar__left { flex: 1 1 100%; }
  .input--search { width: 100%; }
  input, select, textarea { font-size: 16px; }        /* iOS zooms into anything smaller */
  select.chip, .chip--select { max-width: 150px; }

  h2.section { padding-top: var(--sp-7); }
  .dash__hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash__kpi { padding: var(--sp-5) var(--sp-5) var(--sp-4); }
  .dash__value { font-size: 22px; line-height: 28px; }
  .kpi__grid, .kpi__grid--3, .kpi__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: var(--sp-4) var(--sp-5); }
  .dash__minor .kpi__value { font-size: var(--fs-lg); line-height: var(--lh-lg); }
  .missing__row { padding: var(--sp-5) var(--sp-4); }
  .missing__link { margin-left: 0; }
  .todo__row { min-height: 48px; }
  .chart__block { padding-inline: var(--sp-5); }
  .tbl__wrap { max-height: none; }
  .settings__row { grid-template-columns: 1fr; gap: var(--sp-3); }
  .settings__row input:not([type="checkbox"]), .settings__row .seg { width: 100%; }
  .toasts { left: var(--sp-5); right: var(--sp-5); bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--sp-4)); }
  .toast { min-width: 0; max-width: none; }
  .strip { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); flex-wrap: wrap; padding-block: var(--sp-4); }
  .drawer { top: calc(var(--bar-h) + env(safe-area-inset-top)); bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }

  /* Stacked tables (Home): every row becomes a two-column card; labels from data-label. */
  .tbl--stack { table-layout: auto; }
  .tbl--stack thead { display: none; }
  .tbl--stack, .tbl--stack tbody { display: block; width: 100%; }
  .tbl--stack tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-6);
    padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line);
  }
  .tbl--stack tbody td {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
    height: auto; padding: 0; border: 0; min-width: 0;
  }
  .tbl--stack td::before { content: attr(data-label); color: var(--ink-3); font-size: var(--fs-xs); font-weight: var(--fw-400); }
  .tbl--stack td.tbl__head-cell { grid-column: 1 / -1; font-size: var(--fs-md); }
  .tbl--stack td.tbl__head-cell::before, .tbl--stack td[data-label=""]::before { content: none; }
  .tbl--stack td[data-label=""]:empty { display: none; }
  .tbl--stack tr.row--total { background: var(--bg-2); }

  /* Invoices: a card per invoice — who, amount, when, status, PDF. */
  #tbl-invoices { width: 100%; table-layout: auto; }
  #tbl-invoices thead { display: none; }
  #tbl-invoices, #tbl-invoices tbody, #tbl-invoices tfoot { display: block; width: 100%; }
  #tbl-invoices tr {
    display: grid; grid-template-columns: 12px auto minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-4);
    grid-template-areas: "prov account account amount" ". date invoice usd" ". status status file";
    align-items: center;
    padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line);
  }
  #tbl-invoices td[data-col] {
    position: static; width: auto; height: auto; padding: 0; border: 0; background: transparent;
    box-shadow: none !important; min-width: 0; text-align: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #tbl-invoices td[data-col="amount"], #tbl-invoices td[data-col="usd"] { text-align: right; }
  #tbl-invoices td[data-col="sel"], #tbl-invoices td[data-col="plan"], #tbl-invoices td[data-col="period"],
  #tbl-invoices td[data-col="batch"], #tbl-invoices td[data-col="sent_date"], #tbl-invoices td[data-col="received_date"],
  #tbl-invoices td[data-col="received_amount"], #tbl-invoices td[data-col="reference"], #tbl-invoices td[data-col="notes"] { display: none; }
  #tbl-invoices td[data-col="provider"]   { grid-area: prov; }
  #tbl-invoices td[data-col="account"]    { grid-area: account; font-weight: var(--fw-500); }
  #tbl-invoices td[data-col="amount"]     { grid-area: amount; font-weight: var(--fw-600); }
  #tbl-invoices td[data-col="date"]       { grid-area: date; color: var(--ink-2); }
  #tbl-invoices td[data-col="invoice_no"] { grid-area: invoice; color: var(--ink-3); }
  #tbl-invoices td[data-col="usd"]        { grid-area: usd; color: var(--ink-2); }
  #tbl-invoices td[data-col="redeem_status"] { grid-area: status; }
  #tbl-invoices td[data-col="file"]       { grid-area: file; text-align: right; }
  #tbl-invoices td[data-col="file"] .cell__link { width: 36px; height: 28px; border: 1px solid var(--line-2); }
  #tbl-invoices tbody tr.is-cursor { box-shadow: inset 3px 0 0 var(--accent); }
  #tbl-invoices tfoot td[data-col] { white-space: normal; }
  #tbl-invoices tfoot td[data-col="amount"] { grid-column: 3 / -1; grid-row: 1; }
  #tbl-invoices tfoot td[data-col="account"] { grid-column: 2; grid-row: 1; }
  #tbl-invoices tfoot td:empty { display: none; }
  #tbl-invoices tfoot tr { background: var(--bg-2); font-weight: var(--fw-600); }

  /* Accounts: a card per account — who, billing, money, what to do. */
  #tbl-accounts { width: 100%; table-layout: auto; }
  #tbl-accounts thead { display: none; }
  #tbl-accounts, #tbl-accounts tbody, #tbl-accounts tfoot { display: block; width: 100%; }
  #tbl-accounts tr {
    display: grid; grid-template-columns: 12px repeat(3, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-4);
    grid-template-areas: "prov account account account" ". billing invoices total" ". missing next next" ". action action action";
    align-items: center;
    padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line);
  }
  #tbl-accounts td[data-col] {
    position: static; width: auto; height: auto; padding: 0; border: 0; background: transparent;
    box-shadow: none !important; min-width: 0; text-align: left;
  }
  #tbl-accounts td[data-col="plan"], #tbl-accounts td[data-col="price"], #tbl-accounts td[data-col="first_paid"],
  #tbl-accounts td[data-col="last_paid"], #tbl-accounts td[data-col="span_days"], #tbl-accounts td[data-col="avg_per_invoice"],
  #tbl-accounts td[data-col="trend"], #tbl-accounts td[data-col="expected_charges"], #tbl-accounts td[data-col="days_to_next"],
  #tbl-accounts td[data-col="not_sent"], #tbl-accounts td[data-col="sent"], #tbl-accounts td[data-col="received"],
  #tbl-accounts td[data-col="received_usd"], #tbl-accounts td[data-col="outstanding_usd"], #tbl-accounts td[data-col="notes"] { display: none; }
  #tbl-accounts td[data-col="provider"] { grid-area: prov; }
  #tbl-accounts td[data-col="provider"] .cell__provider > span:not(.dot) { display: none; }
  #tbl-accounts td[data-col="account"]  { grid-area: account; font-weight: var(--fw-500); }
  #tbl-accounts td[data-col="billing"]  { grid-area: billing; }
  #tbl-accounts td[data-col="invoices"] { grid-area: invoices; text-align: left; }
  #tbl-accounts td[data-col="total_usd"] { grid-area: total; text-align: left; }
  #tbl-accounts td[data-col="missing_invoices"] { grid-area: missing; text-align: left; }
  #tbl-accounts td[data-col="next_charge"] { grid-area: next; }
  #tbl-accounts td[data-col="action"] { grid-area: action; background: transparent !important; }
  #tbl-accounts td[data-col="billing"]::before  { content: "billing "; color: var(--ink-3); font-size: var(--fs-xs); }
  #tbl-accounts td[data-col="invoices"]::before { content: "invoices "; color: var(--ink-3); font-size: var(--fs-xs); }
  #tbl-accounts td[data-col="total_usd"]::before { content: "paid "; color: var(--ink-3); font-size: var(--fs-xs); }
  #tbl-accounts td[data-col="missing_invoices"]::before { content: "missing "; color: var(--ink-3); font-size: var(--fs-xs); }
  #tbl-accounts td[data-col="next_charge"]::before { content: "next "; color: var(--ink-3); font-size: var(--fs-xs); }
  #tbl-accounts tbody tr.is-cursor { box-shadow: inset 3px 0 0 var(--accent); }
  #tbl-accounts tfoot td:empty { display: none; }
  #tbl-accounts tfoot tr { background: var(--bg-2); font-weight: var(--fw-600); }
  .chart__host--bars { min-height: 0; }
  /* Monthly is a true matrix (month × account): it keeps its columns and scrolls
     sideways inside its own frame instead of squeezing every cell to an ellipsis. */
  #tbl-monthly, #tbl-batch-invoices, #tbl-import { width: max-content; min-width: 100%; table-layout: auto; }
  .dropzone { padding: 0 var(--sp-6); text-align: center; }
}

/* ── 20. Usage — subsidy view (2026-10-28, voice order AC5EE70E) ─────────────
   API-equivalent token value vs subscription dollars paid, for management.
   Same ruled grammar as Home: the hero reuses .dash__hero/.dash__kpi, tables are
   .tbl--stack. Chart colour lives here as classes (CONTRACT §4: never inline):
   value = --s1, paid = --s2, expected-without-invoice = dashed --s2, ratio = ink. */
.usage__empty {
  margin-top: var(--gap); padding: var(--sp-6); background: var(--bg-1);
  border: 1px dashed var(--line-2); border-radius: var(--r-3);
}
.usage__empty .empty__body { max-width: 72ch; }

.usage__legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6);
  padding: var(--sp-2) 0 var(--sp-4); font-size: var(--fs-xs); color: var(--ink-2);
}
.usage__legend-item { display: inline-flex; align-items: center; gap: var(--sp-3); white-space: nowrap; }
.usage__swatch { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-1); flex: none; }
.usage__swatch--value    { background: var(--s1); }
.usage__swatch--paid     { background: var(--s2); }
.usage__swatch--expected { background: color-mix(in srgb, var(--s2) 18%, transparent); border: 1px dashed var(--s2); }
.usage__swatch--ratio    { width: 16px; height: 2px; border-radius: 0; background: var(--ink-2); }

.usage__chart { min-height: 230px; }
.usage-chart .usage-bar--value    { fill: var(--s1); }
.usage-chart .usage-bar--paid     { fill: var(--s2); }
.usage-chart .usage-bar--expected { fill: var(--s2); fill-opacity: .18; stroke: var(--s2); stroke-width: 1; stroke-dasharray: 3 2; }
.usage-chart .usage-chart__line   { stroke: var(--ink-2); stroke-width: 2; }
.usage-chart .usage-dot           { fill: var(--ink-2); stroke: var(--bg-1); stroke-width: 1.5; }
.usage-chart .usage-dot--est      { fill: var(--bg-1); stroke: var(--ink-2); stroke-width: 1.5; }
.usage-chart .usage-chart__plabel { font-weight: var(--fw-600); }
.usage-chart .usage-chart__rlabel { fill: var(--ink-3); }
.usage-chart .usage-hit           { fill: var(--ink); opacity: 0; transition: opacity var(--dur-1) var(--ease-out); }
.usage-chart .usage-hit:hover     { opacity: .05; }

.usage__ratio { white-space: nowrap; }
.usage__est {
  display: inline-block; margin-left: var(--sp-2); padding: 0 var(--sp-2);
  border: 1px dashed color-mix(in srgb, var(--warn) 55%, transparent); border-radius: var(--r-1);
  color: var(--warn); font-size: var(--fs-xs); line-height: 14px; font-weight: var(--fw-500);
}
.tbl tbody td.usage__coverage { white-space: normal; color: var(--ink-3); font-size: var(--fs-xs); line-height: var(--lh-xs); min-width: 22ch; padding-block: var(--sp-2); }
#tbl-usage-accounts .cell__account { display: inline-flex; align-items: center; gap: var(--sp-3); min-width: 0; }
#tbl-usage-accounts .pill--chip { margin-left: var(--sp-2); }

.usage__notes { border-top: 1px solid var(--line); }
.usage__note {
  display: grid; grid-template-columns: 15ch minmax(0, 1fr); gap: var(--sp-5);
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm); line-height: var(--lh-md); color: var(--ink-2);
}
.usage__note-title { color: var(--ink); font-weight: var(--fw-600); }

@media (max-width: 760px) {
  /* Eight tabs on a 390px phone: they share the bar instead of scrolling it, and the
     informational counts step aside (Home keeps its attention badge). */
  .tab { flex: 1 1 0; min-width: 0; padding: 0 1px; overflow: hidden; letter-spacing: -0.01em; }
  .tab:not([data-view="home"]) .tab__badge { display: none; }
  .usage__hero .dash__value { font-size: 20px; line-height: 26px; }
  .usage__note { grid-template-columns: 1fr; gap: var(--sp-1); }
  .tbl--stack td.usage__coverage { grid-column: 1 / -1; justify-content: flex-start; }
  .tbl--stack td.usage__coverage::before { content: none; }
  #tbl-usage-accounts .pill--chip { display: none; }
}
@media (max-width: 380px) {
  .tab { font-size: 10px; letter-spacing: -0.02em; }
}

/* --- roles+live (lane C) --- */
/* 2026-10-28 (voice order ACE0F39C, CONTRACT §1.1/§2.4): who is signed in (#who), the
   super-admin "View as" preview (#viewas-select + #viewas-bar), and the live-updates
   dot (#live-pill). session.js and sse.js own the markup's state; colours come from
   tokens only. Everything above this block is untouched. */
.who { display: inline-flex; align-items: center; gap: var(--sp-3); flex: none; min-width: 0; }
.who__name {
  max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-xs); color: var(--ink-2);
}
.who__role { white-space: nowrap; }
.who__role[data-role="superadmin"] { background: var(--accent-wash); color: var(--accent-text); }
.who__role[data-role="ceo"]        { background: var(--st-sent-wash); color: var(--ink); }
.who__role[data-role="accountant"] { background: var(--st-partial-wash); color: var(--ink); }
.who__viewas { max-width: 170px; }
.who__out { flex: none; }

.live {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 24px; padding: 0 var(--sp-3); flex: none;
  font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap;
}
.live__dot { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--ink-3); flex: none; }
.live[data-state="live"] .live__dot { background: var(--ok); animation: live-pulse 2.4s var(--ease-out) infinite; }
.live[data-state="live"] .live__text { color: var(--ok); }
.live[data-state="connecting"] .live__dot { background: var(--st-partial); }
.live[data-state="offline"] .live__dot { background: var(--danger); }
.live[data-state="offline"] .live__text { color: var(--danger); }
.live[data-state="off"] .live__dot { background: var(--ink-3); }
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 var(--ok-wash); }
  60%  { box-shadow: 0 0 0 5px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .live[data-state="live"] .live__dot { animation: none; } }

.viewas {
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  min-height: var(--filter-h); padding-block: var(--sp-2);
  padding-inline: max(var(--gutter), calc((100% - 1600px) / 2));
  background: var(--accent-wash); color: var(--ink);
  border-bottom: 1px solid var(--line-2);
  font-size: var(--fs-sm); font-weight: var(--fw-500);
}
.viewas[data-role="accountant"] { background: var(--st-partial-wash); }
.viewas[data-role="ceo"]        { background: var(--st-sent-wash); }
.viewas__text { flex: 1 1 auto; min-width: 0; }
.viewas__clear { flex: none; }
/* While previewing, the top bar carries the same tint, so it is never mistaken for the real view. */
html.is-previewing .topbar { box-shadow: inset 0 -2px 0 var(--accent); }

.reimburse { min-height: 120px; }

@media (max-width: 760px) {
  /* A 390px top bar has no room for everything: once a sign-in is known the brand name
     steps aside (the mark stays), and a super-admin's role pill gives way to the
     View-as switch, which already says whose view this is. No sideways page scroll. */
  html[data-role] .topbar__name { display: none; }
  .who { gap: var(--sp-2); flex: 0 1 auto; }
  .who__name { display: none; }
  .who:has(.who__viewas:not([hidden])) .who__role { display: none; }
  .who:has(.who__viewas:not([hidden])) .who__out { display: none; }   /* super-admin: Settings → Access */
  .who__viewas { max-width: 112px; min-width: 0; }
  .live { padding: 0 var(--sp-2); }
  .live__text { display: none; }
  .viewas { font-size: var(--fs-xs); gap: var(--sp-3); }
}
@media (max-width: 380px) {
  .who__role { display: none; }
}

/* --- reimburse (lane B) --- */
/* 2026-10-28 (voice order ACE0F39C): the Reimbursement tab (#/reimburse, views/reimburse.js).
   Same ruled grammar as Home/Usage: the hero reuses .dash__hero/.dash__kpi, the minor row
   .kpi__grid, tables .tbl--stack. Status colour reuses the --st-* tokens (CONTRACT §4:
   colour lives in classes; only bar LENGTHS are set from JS via CSSOM). */
.rb__he { color: var(--ink-3); font-weight: var(--fw-400); unicode-bidi: isolate; }
h2.section .rb__he { font-size: var(--fs-sm); margin-left: var(--sp-2); }
.kpi__label .rb__he { font-size: var(--fs-xs); margin-left: var(--sp-2); text-transform: none; letter-spacing: 0; }

.rb__policy-line { padding: var(--sp-2) 0 var(--sp-5); font-size: var(--fs-md); line-height: var(--lh-md); color: var(--ink-2); }
.rb__policy-date { color: var(--ink); font-weight: var(--fw-600); }
.rb__notice {
  margin-bottom: var(--sp-5); padding: var(--sp-6); background: var(--bg-1);
  border: 1px dashed var(--line-2); border-radius: var(--r-3);
}
.rb__notice .empty__body { max-width: 72ch; }
.rb__form {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) 0 var(--sp-6);
}
.rb__form-label { font-size: var(--fs-sm); font-weight: var(--fw-500); color: var(--ink); }
.rb__date { width: 160px; }
.rb__form-hint { flex-basis: 100%; font-size: var(--fs-xs); color: var(--ink-3); }

.rb__hero { margin-top: 0; }

.rb__legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6);
  padding: var(--sp-2) 0 var(--sp-4); font-size: var(--fs-xs); color: var(--ink-2);
}
.rb__legend-item { display: inline-flex; align-items: center; gap: var(--sp-3); }
.rb__swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--st-na-wash); }
.rb__months { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rb__month {
  display: grid; grid-template-columns: 11ch minmax(0, 1fr) 12ch 14ch; align-items: center;
  gap: var(--sp-5); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.rb__month-name { color: var(--ink); font-weight: var(--fw-500); }
.rb__bar { display: flex; height: 12px; min-width: 0; background: var(--bg-2); border-radius: 2px; overflow: hidden; }
.rb__seg { display: block; height: 100%; min-width: 2px; }
.rb__month-total { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.rb__month-open { text-align: right; color: var(--ink-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.rb__month-open[data-kind="open"] { color: var(--st-not-sent); font-weight: var(--fw-500); }
.rb__seg[data-status="received"],   .rb__swatch[data-status="received"]   { background: var(--st-received); }
.rb__seg[data-status="unpaid"],     .rb__swatch[data-status="unpaid"]     { background: var(--st-partial); }
.rb__seg[data-status="sent"],       .rb__swatch[data-status="sent"]       { background: var(--st-sent); }
.rb__seg[data-status="pending"],    .rb__swatch[data-status="pending"]    { background: var(--st-not-sent); }
.rb__seg[data-status="rejected"],   .rb__swatch[data-status="rejected"]   { background: var(--st-rejected); }
.rb__seg[data-status="pre-policy"], .rb__swatch[data-status="pre-policy"] { background: var(--line-2); }
.rb__seg[data-status="excluded"],   .rb__swatch[data-status="excluded"]   { background: var(--st-na-wash); box-shadow: inset 0 0 0 1px var(--line-2); }

.rb__summary-bar { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-2) 0 var(--sp-4); }
.rb__summary-hint { flex: 1 1 auto; font-size: var(--fs-xs); color: var(--ink-3); }
.rb__hint { padding: 0 0 var(--sp-4); font-size: var(--fs-sm); color: var(--ink-2); }
.rb__summary {
  display: block; width: 100%; min-height: 120px; resize: vertical;
  white-space: pre; overflow: auto; line-height: var(--lh-md); background: var(--bg-1);
}

.rb__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); padding: var(--sp-2) 0 var(--sp-4); }
.rb__filter { display: flex; flex: 0 1 auto; flex-wrap: wrap; max-width: 100%; height: auto; min-height: 28px; }
.rb__status { display: inline-flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.rb__why { font-size: var(--fs-xs); color: var(--ink-3); }
.rb__account { overflow: hidden; text-overflow: ellipsis; }
.rb__pdf-links { white-space: nowrap; }
.rb__empty-line { padding: var(--sp-6) 0; color: var(--ink-3); font-size: var(--fs-sm); border-top: 1px solid var(--line); }
.pill[data-status="pre-policy"], .pill[data-status="excluded"] { background: var(--st-na-wash); color: var(--st-na); }

@media (max-width: 760px) {
  .rb__hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rb__hero .dash__value { font-size: 20px; line-height: 26px; }
  .rb__minor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rb__month { grid-template-columns: 8ch minmax(0, 1fr) 10ch; }
  .rb__month-open { grid-column: 2 / -1; text-align: left; }
  .rb__summary-bar { flex-wrap: wrap; }
  .rb__date { width: 100%; max-width: 220px; }
}
/* record progress (review fix 2026-10-28): mark sent / mark received */
.rb__form--stack { flex-direction: column; align-items: stretch; border-top: 1px solid var(--line); }
.rb__form--stack > .btn { align-self: flex-start; }
.rb__picklist { list-style: none; margin: 0; padding: 0; }
.rb__pick-row {
  display: grid; grid-template-columns: auto 11ch minmax(0, 1fr) auto auto; align-items: center;
  gap: var(--sp-4); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm);
}
#rb-recv-list .rb__pick-row { grid-template-columns: 8ch minmax(0, 1fr) auto auto; }
.rb__pick-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb__pick { width: 18px; height: 18px; margin: 0; }
.rb__field { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); }
.rb__field .input[type="text"] { flex: 1 1 220px; min-width: 0; max-width: 360px; }
@media (max-width: 760px) {
  .rb__pick-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .rb__pick-row > .mono { display: none; }
  #rb-recv-list .rb__pick-row { grid-template-columns: 7ch minmax(0, 1fr) auto; }
  #rb-recv-list .rb__pick-row > .mono { display: inline; }
  #rb-recv-list .rb__pick-row > .num { display: none; }
}
/* --- end reimburse (lane B) --- */

/* --- integration (2026-10-28, ACE0F39C) --- */
/* With nine tabs plus the who / view-as / live controls, the tab strip at ≥1280px was
   wider than its slot and painted UNDER the provider chip, the currency switch and the
   sign-in controls (Monthly…Settings unclickable for the owner at 1280 and 1440px).
   The strip now always scrolls inside its own slot (as it already did below 1280px),
   and the top bar gives back room the signed-in controls duplicate. */
.tabs { overflow-x: auto; scrollbar-width: none; flex: 0 1 auto; }
.tabs::-webkit-scrollbar { display: none; }
.tab:focus-visible { outline-offset: -2px; }
@media (max-width: 1599px) {
  html[data-role] .topbar__name { display: none; }
  .topbar { gap: var(--sp-4); }
  /* The super-admin's View-as switch already names whose view this is. */
  .who:has(.who__viewas:not([hidden])) .who__name,
  .who:has(.who__viewas:not([hidden])) .who__role { display: none; }
}
/* --- end integration --- */