/* Auralis ABM Command Center. Spec: static/design/tokens.md, components.md, layout.md, RULES.md. */
/* tokens:start */
:root {
  color-scheme: light;

  /* palette: kit verbatim */
  --auralis-navy: #001F3F;   --auralis-blue: #0062CC;   --auralis-cerise: #AD0057;
  --auralis-mint: #D1E8E4;   --auralis-paper: #F8F9FA;  --auralis-white: #FFFFFF;
  --auralis-line: #DDE3E8;   --auralis-muted: #5E6E7C;  --auralis-slate: #46586B;
  --auralis-navy-80: #334C65; --auralis-navy-60: #66798C; --auralis-navy-40: #99A5B2; --auralis-navy-20: #CCD2D9;
  --auralis-blue-80: #3381D6; --auralis-blue-60: #66A1E0; --auralis-blue-40: #99C0EB; --auralis-blue-20: #CCE0F5;
  --auralis-cerise-80: #BD3379; --auralis-cerise-60: #CE669A; --auralis-cerise-40: #DE99BC; --auralis-cerise-20: #EFCCDD;
  --auralis-success: #0F7A52; --auralis-warning: #8F5500; --auralis-error: #B3261E;

  /* roles: surfaces and text */
  --color-bg: var(--auralis-paper);
  --color-surface: var(--auralis-white);
  --color-surface-sunken: var(--auralis-paper);
  --color-surface-pressed: var(--auralis-line);
  --color-surface-highlight: var(--auralis-mint);
  --color-surface-inverse: var(--auralis-navy);
  --color-surface-inverse-hover: var(--auralis-navy-80);
  --color-surface-inverse-pressed: var(--auralis-slate);
  --color-text: var(--auralis-navy);
  --color-text-muted: var(--auralis-muted);
  --color-text-subtle: var(--auralis-slate);
  --color-text-placeholder: var(--auralis-muted);
  --color-text-on-accent: var(--auralis-white);
  --color-text-inverse: var(--auralis-white);
  --color-text-inverse-muted: var(--auralis-navy-20);
  --color-text-inverse-subtle: var(--auralis-navy-40);
  --color-text-headline: var(--auralis-cerise);
  --color-link: var(--auralis-blue);
  --color-link-hover: var(--auralis-navy);
  --color-link-on-highlight: var(--auralis-navy);

  /* roles: borders, accent, focus, data */
  --color-border: var(--auralis-line);
  --color-border-control: var(--auralis-navy-60);
  --color-border-control-hover: var(--auralis-navy-80);
  --color-border-inverse: var(--auralis-navy-40);
  --color-accent: var(--auralis-blue);
  --color-accent-hover: var(--auralis-navy);
  --color-accent-pressed: var(--auralis-navy-80);
  --color-focus: var(--auralis-blue);
  --color-focus-inverse: var(--auralis-blue-40);
  --color-indicator-inverse: var(--auralis-blue-40);
  --color-data-fill: var(--auralis-navy);
  --color-data-track: var(--auralis-line);
  --color-selection-bg: var(--auralis-blue-20);

  /* roles: state families */
  --color-success-bg: var(--auralis-mint);   --color-success-text: var(--auralis-navy);  --color-success-border: var(--auralis-success);
  --color-success-strong: var(--auralis-success);
  --color-warning-bg: var(--auralis-paper);  --color-warning-text: var(--auralis-warning); --color-warning-border: var(--auralis-warning);
  --color-danger-bg: var(--auralis-paper);   --color-danger-text: var(--auralis-error);  --color-danger-border: var(--auralis-error);
  --color-danger-strong-bg: var(--auralis-error); --color-danger-strong-text: var(--auralis-white); --color-danger-strong-border: var(--auralis-error);
  --color-info-bg: var(--auralis-blue-20);   --color-info-text: var(--auralis-navy);     --color-info-border: var(--auralis-blue-20);
  --color-info-callout-bg: var(--auralis-paper); --color-info-callout-text: var(--auralis-navy); --color-info-callout-border: var(--auralis-blue);
  --color-neutral-bg: var(--auralis-paper);  --color-neutral-text: var(--auralis-slate); --color-neutral-border: var(--auralis-line);
  --color-disabled-bg: var(--auralis-paper); --color-disabled-text: var(--auralis-muted); --color-disabled-border: var(--auralis-line);

  /* roles: tiers */
  --color-tier-hot-bg: var(--auralis-navy);    --color-tier-hot-text: var(--auralis-white);  --color-tier-hot-border: var(--auralis-navy);
  --color-tier-warm-bg: var(--auralis-blue-20); --color-tier-warm-text: var(--auralis-navy); --color-tier-warm-border: var(--auralis-blue);
  --color-tier-cold-bg: var(--auralis-white);  --color-tier-cold-text: var(--auralis-slate); --color-tier-cold-border: var(--auralis-navy-60);

  /* roles: signal types */
  --color-sig-s1-bg: var(--auralis-blue-20); --color-sig-s1-text: var(--auralis-navy);  --color-sig-s1-border: var(--auralis-blue-20);
  --color-sig-s2-bg: var(--auralis-navy-80); --color-sig-s2-text: var(--auralis-white); --color-sig-s2-border: var(--auralis-navy-80);
  --color-sig-s3-bg: var(--auralis-white);   --color-sig-s3-text: var(--auralis-blue);  --color-sig-s3-border: var(--auralis-blue);
  --color-sig-s4-bg: var(--auralis-paper);   --color-sig-s4-text: var(--auralis-error); --color-sig-s4-border: var(--auralis-error);
  --color-sig-s5-bg: var(--auralis-mint);    --color-sig-s5-text: var(--auralis-navy);  --color-sig-s5-border: var(--auralis-success);
  --color-sig-s6-bg: var(--auralis-paper);   --color-sig-s6-text: var(--auralis-slate); --color-sig-s6-border: var(--auralis-line);

  /* type */
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --text-figure-xl-size: 28px; --text-title-size: 24px; --text-heading-size: 18px; --text-body-size: 14px;
  --text-figure-size: 14px; --text-secondary-size: 13px; --text-label-size: 12px; --text-legal-size: 11px;
  --lh-tight: 1.2; --lh-snug: 1.3; --lh-legal: 1.45; --lh-body: 1.5;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;
  --tracking-label: 0.08em;
  --measure: 66ch;

  /* space */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;

  /* sizes */
  --control-h: 36px; --control-h-sm: 28px; --control-h-touch: 44px; --checkbox-size: 20px;
  --bar-h-sm: 4px; --bar-h: 8px; --bar-w-lg: 160px;
  --sidebar-w: 224px; --topbar-h: 56px;
  --logo-h-sidebar: 32px; --logo-h-topbar: 24px; --logo-h-signin: 40px;
  --container-max: 1200px; --panel-narrow: 560px; --panel-signin: 416px; --feed-col: 336px;
  --table-min-w: 720px; --field-w-sm: 144px; --kpi-min: 152px; --col-min: 200px;

  /* shape */
  --radius-none: 0; --radius-control: 6px; --radius-card: 10px; --radius-panel: 16px; --radius-pill: 9999px;
  --border-hairline: 1px; --border-focus: 2px; --border-indicator: 4px;
  --focus-offset: 2px; --focus-offset-inset: -2px;
  --shadow-none: none;

  /* motion */
  --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 250ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);

  /* stacking */
  --z-base: 0; --z-raised: 1; --z-sticky: 10; --z-dropdown: 20;
  --z-overlay: 30; --z-modal: 40; --z-toast: 50; --z-tooltip: 60;
}
@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}
/* tokens:end */

/* ---- 0. global primitives ------------------------------------------------------------------ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-sans); font-size: var(--text-body-size); line-height: var(--lh-body);
  font-weight: var(--weight-regular); color: var(--color-text); background: var(--color-bg);
}
h1, h2, h3, h4 { margin: 0; color: var(--color-text); }
h1 { font-size: var(--text-title-size); line-height: var(--lh-tight); font-weight: var(--weight-semibold); }
h2 {
  font-size: var(--text-heading-size); line-height: var(--lh-snug); font-weight: var(--weight-semibold);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
}
h3 {
  font-size: var(--text-label-size); line-height: var(--lh-tight); font-weight: var(--weight-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-text-subtle);
  margin: var(--space-4) 0 var(--space-1); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
}
h4 { font-size: var(--text-body-size); line-height: var(--lh-body); font-weight: var(--weight-semibold); }
strong, b, th { font-weight: var(--weight-semibold); }
p { margin: 0; }
small, .small { font-size: var(--text-secondary-size); line-height: var(--lh-body); }
.muted { color: var(--color-text-muted); }
.placeholder { font-style: italic; font-weight: var(--weight-regular); color: var(--color-text-muted); }
.null { color: var(--color-text-muted); }
.figure { font-family: var(--font-mono); font-size: var(--text-figure-size); font-weight: var(--weight-medium); }
.count-figure { font-family: var(--font-mono); font-size: var(--text-figure-size); font-weight: var(--weight-medium); color: var(--color-text-muted); }
.meta-mono, time {
  font-family: var(--font-mono); font-size: var(--text-label-size); line-height: var(--lh-tight);
  font-weight: var(--weight-medium); color: var(--color-text-muted);
}
.label {
  font-size: var(--text-label-size); line-height: var(--lh-tight); font-weight: var(--weight-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-text-subtle);
}
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; border: none; }
::selection { background: var(--color-selection-bg); color: var(--color-text); }

:focus-visible { outline: var(--border-focus) solid var(--color-focus); outline-offset: var(--focus-offset); }

a, .btn, .nav a, .tabs a, .feed-item, .acct-card, .user-choice, .sort, input, select, textarea, .menu-button {
  transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard), outline-color var(--duration-fast) var(--ease-standard);
}

/* links: standalone by default; prose links always underlined (blue against navy text is only 2.85:1) */
a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); text-decoration: underline; }
a:focus-visible { outline: var(--border-focus) solid var(--color-focus); outline-offset: var(--focus-offset); }
a:active { color: var(--color-accent-pressed); text-decoration: underline; }
p a:not(.btn), li a:not(.btn), dd a:not(.btn), .prose a:not(.btn) { text-decoration: underline; }

/* ---- 1. app shell ----------------------------------------------------------------------------- */
.shell { display: flex; flex-direction: column; min-height: 100vh; }
.sidebar {
  background: var(--color-surface-inverse); color: var(--color-text-inverse);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  padding: 0 var(--space-4); z-index: var(--z-dropdown);
}
.sidebar :focus-visible { outline-color: var(--color-focus-inverse); }
.brand { display: flex; flex-direction: column; gap: var(--space-2); color: var(--color-text-inverse); min-height: var(--topbar-h); justify-content: center; }
.brand:hover, .brand:active { color: var(--color-text-inverse); text-decoration: none; }
.brand:hover .brand-product { text-decoration: underline; }
.brand-logo { display: block; height: var(--logo-h-topbar); width: auto; }
.brand-product {
  display: none; font-size: var(--text-label-size); line-height: var(--lh-tight); font-weight: var(--weight-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-text-inverse-muted);
}
.menu-button {
  display: none; align-items: center; min-height: var(--control-h-touch); padding: 0 var(--space-4);
  border: var(--border-hairline) solid var(--color-border-inverse); border-radius: var(--radius-control);
  background: transparent; color: var(--color-text-inverse); font: inherit; font-weight: var(--weight-semibold); cursor: pointer;
}
.menu-button:hover { background: var(--color-surface-inverse-hover); }
.menu-button:focus-visible { outline: var(--border-focus) solid var(--color-focus-inverse); outline-offset: var(--focus-offset); }
.menu-button:active { background: var(--color-surface-inverse-pressed); }
.menu-button[aria-expanded="true"] { background: var(--color-surface-inverse-hover); }
/* Copy that is true only with JS (live updates) or only without it (reload hints); app.js adds .js to <html>. */
.js-only { display: none; }
.js .js-only { display: inline; }
.js .no-js { display: none; }

/* Progressive enhancement: without JS the panel is always open; app.js adds .js and drives aria-expanded. */
.js .menu-button { display: inline-flex; }
.js .menu-button[aria-expanded="false"] + .nav-panel { display: none; }
.nav-panel {
  flex: 1 1 100%; display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-2) 0 var(--space-4);
}
.nav { display: flex; flex-direction: column; gap: var(--space-1); }
.nav a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  min-height: var(--control-h-touch); padding: 0 var(--space-3); border-radius: var(--radius-control);
  border-left: var(--border-indicator) solid transparent;
  font-size: var(--text-body-size); line-height: var(--lh-body); font-weight: var(--weight-medium);
  color: var(--color-text-inverse-muted); background: transparent;
}
.nav a:hover { background: var(--color-surface-inverse-hover); color: var(--color-text-inverse); text-decoration: none; }
.nav a:focus-visible { outline: var(--border-focus) solid var(--color-focus-inverse); outline-offset: var(--focus-offset); }
.nav a:active { background: var(--color-surface-inverse-pressed); color: var(--color-text-inverse); text-decoration: none; }
.nav a[aria-current="page"] {
  background: var(--color-surface-inverse-hover); color: var(--color-text-inverse);
  font-weight: var(--weight-semibold); border-left-color: var(--color-indicator-inverse);
}
.nav-group {
  margin-top: var(--space-4); padding: 0 var(--space-3);
  font-size: var(--text-label-size); line-height: var(--lh-tight); font-weight: var(--weight-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-text-inverse-subtle);
}
.count {
  font-family: var(--font-mono); font-size: var(--text-label-size); line-height: var(--lh-body); font-weight: var(--weight-medium);
  border-radius: var(--radius-pill); padding: 0 var(--space-2); min-width: var(--space-6); text-align: center;
  background: var(--color-info-bg); color: var(--color-info-text);
}
.count.due { background: var(--color-surface); color: var(--color-danger-text); }
.who {
  border-top: var(--border-hairline) solid var(--color-border-inverse); padding-top: var(--space-4);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap;
}
.who-name { display: block; color: var(--color-text-inverse); font-weight: var(--weight-medium); }
.who-role {
  display: block; font-size: var(--text-label-size); line-height: var(--lh-tight); font-weight: var(--weight-medium);
  color: var(--color-text-inverse-muted);
}
.signout {
  min-height: var(--control-h-touch); padding: 0 var(--space-3); border: var(--border-hairline) solid transparent;
  border-radius: var(--radius-control); background: transparent; color: var(--color-text-inverse-muted);
  font: inherit; text-decoration: underline; cursor: pointer;
}
.signout:hover { background: var(--color-surface-inverse-hover); color: var(--color-text-inverse); }
.signout:focus-visible { outline: var(--border-focus) solid var(--color-focus-inverse); outline-offset: var(--focus-offset); }
.signout:active { background: var(--color-surface-inverse-pressed); color: var(--color-text-inverse); }

.main { flex: 1; min-width: 0; padding: var(--space-4) var(--space-4) var(--space-12); }
.main-inner { max-width: var(--container-max); margin: 0 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

/* ---- 2. page header ---------------------------------------------------------------------------- */
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-4); }
.page-head-text { display: flex; flex-direction: column; gap: var(--space-1); }
.eyebrow {
  font-size: var(--text-label-size); line-height: var(--lh-tight); font-weight: var(--weight-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-text-subtle);
}
.page-desc { color: var(--color-text-muted); max-width: var(--measure); }
.back { display: inline-block; font-size: var(--text-secondary-size); margin-bottom: var(--space-3); }

/* ---- 15. cards and panels ---------------------------------------------------------------------- */
.card {
  background: var(--color-surface); border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-card); padding: var(--space-4); box-shadow: var(--shadow-none); min-width: 0;
}
.card > h2 { margin-bottom: var(--space-3); }
.panel {
  background: var(--color-surface); border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-panel); padding: var(--space-4); min-width: 0;
}
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--col-min), 1fr)); gap: var(--space-4); align-items: start; }
.narrow { max-width: var(--panel-narrow); }
ul.plain { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.prose p, .prose ul, .prose ol { max-width: var(--measure); margin: 0 0 var(--space-3); }
.prose h2 { margin: var(--space-6) 0 var(--space-3); }
.prose h2:first-child { margin-top: 0; }
.prose li { margin-bottom: var(--space-1); }
.prose .tag-list { display: flex; flex-wrap: wrap; flex-direction: row; gap: var(--space-2); }

/* ---- 3. KPI tile ------------------------------------------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--kpi-min), 1fr)); gap: var(--space-3); }
.kpi { display: flex; flex-direction: column; gap: var(--space-1); }
.kpi-label {
  font-size: var(--text-label-size); line-height: var(--lh-tight); font-weight: var(--weight-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-text-subtle);
}
.kpi strong {
  font-family: var(--font-mono); font-size: var(--text-figure-xl-size); line-height: var(--lh-tight);
  font-weight: var(--weight-medium); color: var(--color-text);
}
.kpi--headline strong { color: var(--color-text-headline); }
.kpi small { color: var(--color-text-muted); }

/* ---- 4. dashboard work area, tier columns, account cards ---------------------------------------- */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.tiers { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.tier-col { display: flex; flex-direction: column; min-width: 0; }
.tier-head { margin-bottom: var(--space-3); }
.acct-stack { display: flex; flex-direction: column; gap: var(--space-2); }
.more { font-size: var(--text-secondary-size); margin-top: var(--space-2); }
.acct-card { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); color: var(--color-text); }
.acct-card:hover { border-color: var(--color-border-control); color: var(--color-text); text-decoration: none; }
.acct-card:hover .acct-name { text-decoration: underline; }
.acct-card:focus-visible { outline: var(--border-focus) solid var(--color-focus); outline-offset: var(--focus-offset); }
.acct-card:active { background: var(--color-surface-sunken); color: var(--color-text); text-decoration: none; }
.acct-name-row { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.acct-name { flex: 1; min-width: 0; font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-reason, .acct-meta { font-size: var(--text-secondary-size); color: var(--color-text-muted); }

/* ---- 5. priority indicator and 6. score bars ----------------------------------------------------- */
.priority-figure { font-family: var(--font-mono); font-size: var(--text-figure-size); line-height: var(--lh-tight); font-weight: var(--weight-medium); color: var(--color-text); }
.bar { display: block; height: var(--bar-h); background: var(--color-data-track); border-radius: var(--radius-pill); overflow: hidden; }
.bar--sm { height: var(--bar-h-sm); }
.bar-fill { display: block; height: 100%; background: var(--color-data-fill); border-radius: var(--radius-pill); }
.priority--lg { display: flex; flex-direction: column; gap: var(--space-1); }
.priority--lg .priority-figure { font-size: var(--text-figure-xl-size); color: var(--color-text-headline); }
.priority--lg .bar { width: var(--bar-w-lg); }
.priority-row { display: flex; align-items: baseline; gap: var(--space-1); }
.priority-max { font-family: var(--font-mono); font-size: var(--text-figure-size); font-weight: var(--weight-medium); color: var(--color-text-muted); }
.score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--col-min), 1fr)); gap: var(--space-6); margin-bottom: var(--space-6); }
.score { display: flex; flex-direction: column; gap: var(--space-2); }
.score-label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); font-size: var(--text-secondary-size); }
.score-value { font-family: var(--font-mono); font-size: var(--text-figure-size); font-weight: var(--weight-medium); }

/* ---- 7. badges and tags ------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; padding: var(--space-1) var(--space-2);
  border: var(--border-hairline) solid var(--color-neutral-border); border-radius: var(--radius-pill);
  font-size: var(--text-label-size); line-height: var(--lh-tight); font-weight: var(--weight-medium);
  white-space: nowrap; background: var(--color-neutral-bg); color: var(--color-neutral-text);
}
.badge.success { background: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success-border); }
.badge.info { background: var(--color-info-bg); color: var(--color-info-text); border-color: var(--color-info-border); }
.badge.warning { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: var(--color-warning-border); }
.badge.danger { background: var(--color-danger-strong-bg); color: var(--color-danger-strong-text); border-color: var(--color-danger-strong-border); }
.badge.neutral { background: var(--color-neutral-bg); color: var(--color-neutral-text); border-color: var(--color-neutral-border); }
.badge.tier-hot { background: var(--color-tier-hot-bg); color: var(--color-tier-hot-text); border-color: var(--color-tier-hot-border); }
.badge.tier-warm { background: var(--color-tier-warm-bg); color: var(--color-tier-warm-text); border-color: var(--color-tier-warm-border); }
.badge.tier-cold { background: var(--color-tier-cold-bg); color: var(--color-tier-cold-text); border-color: var(--color-tier-cold-border); }
.tag {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-1); padding: var(--space-1) var(--space-2);
  border: var(--border-hairline) solid transparent; border-radius: var(--radius-control);
  font-size: var(--text-label-size); line-height: var(--lh-tight); font-weight: var(--weight-medium);
}
.tag-code { font-family: var(--font-mono); font-weight: var(--weight-medium); white-space: nowrap; }
.tag-name { white-space: nowrap; }
.sig-S1 { background: var(--color-sig-s1-bg); color: var(--color-sig-s1-text); border-color: var(--color-sig-s1-border); }
.sig-S2 { background: var(--color-sig-s2-bg); color: var(--color-sig-s2-text); border-color: var(--color-sig-s2-border); }
.sig-S3 { background: var(--color-sig-s3-bg); color: var(--color-sig-s3-text); border-color: var(--color-sig-s3-border); }
.sig-S4 { background: var(--color-sig-s4-bg); color: var(--color-sig-s4-text); border-color: var(--color-sig-s4-border); }
.sig-S5 { background: var(--color-sig-s5-bg); color: var(--color-sig-s5-text); border-color: var(--color-sig-s5-border); }
.sig-S6 { background: var(--color-sig-s6-bg); color: var(--color-sig-s6-text); border-color: var(--color-sig-s6-border); }

/* ---- 8. signal feed ----------------------------------------------------------------------------- */
.feed-card { display: flex; flex-direction: column; min-width: 0; }
.feed-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.feed-filter { flex: 1 1 100%; display: flex; gap: var(--space-2); }
.feed-filter select { flex: 1; }
.feed-status { font-size: var(--text-secondary-size); color: var(--color-text-muted); }
.feed-status.is-error { color: var(--color-danger-text); }
.feed { display: flex; flex-direction: column; min-width: 0; }
.feed-item {
  display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-2);
  border-bottom: var(--border-hairline) solid var(--color-border); border-left: var(--border-indicator) solid transparent;
  background: var(--color-surface); color: var(--color-text);
}
.feed-item:hover { background: var(--color-surface-sunken); color: var(--color-text); text-decoration: none; }
.feed-item:focus-visible { outline: var(--border-focus) solid var(--color-focus); outline-offset: var(--focus-offset-inset); }
.feed-item:active { background: var(--color-surface-sunken); border-left-color: var(--color-accent); color: var(--color-text); text-decoration: none; }
.feed-item.unseen { border-left-color: var(--color-accent); }
.feed-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.feed-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-width: 0; }
.feed-account { font-weight: var(--weight-semibold); }
.feed-title { font-size: var(--text-secondary-size); color: var(--color-text-muted); }
.feed .empty { margin-top: var(--space-2); }

/* ---- 9. buttons --------------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-h-touch); padding: 0 var(--space-4); border-radius: var(--radius-control);
  border: var(--border-hairline) solid var(--color-border); background: var(--color-surface); color: var(--color-text);
  font-family: inherit; font-size: var(--text-body-size); line-height: var(--lh-tight); font-weight: var(--weight-semibold);
  white-space: nowrap; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--color-surface-sunken); color: var(--color-text); border-color: var(--color-border-control); text-decoration: none; }
.btn:focus-visible { outline: var(--border-focus) solid var(--color-focus); outline-offset: var(--focus-offset); }
.btn:active { background: var(--color-surface-pressed); color: var(--color-text); border-color: var(--color-border-control); text-decoration: none; }
.btn.primary { background: var(--color-accent); color: var(--color-text-on-accent); border-color: var(--color-accent); }
.btn.primary:hover { background: var(--color-accent-hover); color: var(--color-text-on-accent); border-color: var(--color-accent-hover); }
.btn.primary:focus-visible { outline: var(--border-focus) solid var(--color-focus); outline-offset: var(--focus-offset); }
.btn.primary:active { background: var(--color-accent-pressed); color: var(--color-text-on-accent); border-color: var(--color-accent-pressed); }
.btn.ghost { background: transparent; color: var(--color-link); border-color: transparent; }
.btn.ghost:hover { background: transparent; color: var(--color-link-hover); border-color: transparent; text-decoration: underline; }
.btn.ghost:focus-visible { outline: var(--border-focus) solid var(--color-focus); outline-offset: var(--focus-offset); }
.btn.ghost:active { background: transparent; color: var(--color-accent-pressed); border-color: transparent; text-decoration: underline; }
.btn.danger { background: var(--color-surface); color: var(--color-danger-text); border-color: var(--color-danger-border); }
.btn.danger:hover { background: var(--color-danger-bg); color: var(--color-danger-text); border-color: var(--color-danger-border); }
.btn.danger:focus-visible { outline: var(--border-focus) solid var(--color-focus); outline-offset: var(--focus-offset); }
.btn.danger:active { background: var(--color-danger-strong-bg); color: var(--color-danger-strong-text); border-color: var(--color-danger-strong-border); }
.btn:disabled, .btn[aria-disabled="true"], .btn[aria-busy="true"],
.btn.primary:disabled, .btn.primary[aria-disabled="true"], .btn.danger:disabled, .btn.danger[aria-disabled="true"] {
  background: var(--color-disabled-bg); color: var(--color-disabled-text); border-color: var(--color-disabled-border);
  cursor: not-allowed; text-decoration: none;
}
.btn.ghost:disabled, .btn.ghost[aria-disabled="true"] { background: transparent; color: var(--color-disabled-text); border-color: transparent; cursor: not-allowed; text-decoration: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn.small { min-height: var(--control-h-touch); padding: 0 var(--space-3); }
.btn.icon { width: var(--control-h-touch); padding: 0; }
.btn.block { width: 100%; }
.link {
  background: none; border: none; padding: 0; color: var(--color-link); font: inherit; cursor: pointer;
}
.link:hover { color: var(--color-link-hover); text-decoration: underline; }
.link:focus-visible { outline: var(--border-focus) solid var(--color-focus); outline-offset: var(--focus-offset); }
.link:active { color: var(--color-accent-pressed); text-decoration: underline; }
.link:disabled { color: var(--color-disabled-text); text-decoration: none; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ---- 10. forms ---------------------------------------------------------------------------------- */
input, select, textarea {
  font: inherit; font-size: var(--text-body-size); line-height: var(--lh-body); color: var(--color-text);
  background: var(--color-surface); border: var(--border-hairline) solid var(--color-border-control);
  border-radius: var(--radius-control); min-height: var(--control-h-touch); padding: 0 var(--space-3); max-width: 100%;
}
select { padding-right: var(--space-8); }
input[type=number] { font-family: var(--font-mono); font-size: var(--text-figure-size); font-weight: var(--weight-medium); }
textarea { display: block; width: 100%; padding: var(--space-2) var(--space-3); resize: vertical; margin: var(--space-2) 0; }
input::placeholder, textarea::placeholder { color: var(--color-text-placeholder); }
input:hover, select:hover, textarea:hover { border-color: var(--color-border-control-hover); }
input:focus, select:focus-visible, textarea:focus, input:focus-visible, textarea:focus-visible {
  outline: var(--border-focus) solid var(--color-focus); outline-offset: var(--focus-offset);
}
input:active, select:active, textarea:active { border-color: var(--color-border-control-hover); }
input:disabled, select:disabled, textarea:disabled {
  background: var(--color-disabled-bg); color: var(--color-disabled-text); border-color: var(--color-disabled-border); cursor: not-allowed;
}
input:read-only:not([type=checkbox]):not([type=hidden]), textarea:read-only {
  background: var(--color-surface-sunken); color: var(--color-text); border-color: var(--color-border);
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--color-danger-border); }
.field-error { font-size: var(--text-secondary-size); color: var(--color-danger-text); }
input[type=checkbox] {
  width: var(--checkbox-size); height: var(--checkbox-size); min-height: 0; margin: 0; padding: 0;
  accent-color: var(--color-accent);
}
.check { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); min-height: var(--control-h-touch); }
.check:has(input:disabled) { color: var(--color-disabled-text); }
.inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.filters input[type=search] { flex: 1 1 100%; }
.filters select, .filters input[type=number] { flex: 1 1 40%; min-width: 0; }
.filters .check { flex: 1 1 100%; }
.bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.bulk select { flex: 1 1 100%; }
.settings-form { display: flex; flex-direction: column; gap: var(--space-3); }
.settings-form h2 { margin-top: var(--space-3); }
.settings-form h2:first-child { margin-top: 0; }
.setting-row { display: flex; flex-direction: column; gap: var(--space-1); font-weight: var(--weight-medium); }
.setting-row input, .setting-row select { width: 100%; }
.field { display: flex; flex-direction: column; gap: var(--space-1); font-weight: var(--weight-medium); }
.field input, .field select { width: 100%; font-weight: var(--weight-regular); }
.help { font-size: var(--text-secondary-size); color: var(--color-text-muted); }

/* ---- 11. tables --------------------------------------------------------------------------------- */
/* relative: the scroll box is then the containing block of its .sr-only text, which cannot widen the page. */
.table-wrap { overflow-x: auto; position: relative; }
.table-wrap.card { padding: 0; }
table.data { width: 100%; border-collapse: collapse; }
table.data:not(.compact) { min-width: var(--table-min-w); }
table.data th, table.data td { padding: var(--space-2) var(--space-3); border-bottom: var(--border-hairline) solid var(--color-border); text-align: left; vertical-align: top; }
table.data th {
  font-size: var(--text-label-size); line-height: var(--lh-tight); font-weight: var(--weight-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-text-subtle);
  background: var(--color-surface-sunken);
}
table.data td { font-size: var(--text-body-size); color: var(--color-text); overflow-wrap: anywhere; }
table.data .num { text-align: right; font-family: var(--font-mono); font-size: var(--text-figure-size); font-weight: var(--weight-medium); }
table.data th.num { font-family: var(--font-sans); font-size: var(--text-label-size); }
table.data.compact th, table.data.compact td { padding: var(--space-2); }
table.data tbody tr { background: var(--color-surface); }
table.data tbody tr:hover { background: var(--color-surface-sunken); }
table.data tbody tr.row-muted { background: var(--color-surface-sunken); }
table.data.selectable td:first-child { border-left: var(--border-indicator) solid transparent; }
table.data.selectable tr:has(input:checked) { background: var(--color-surface-sunken); }
table.data.selectable tr:has(input:checked) td:first-child { border-left-color: var(--color-accent); }
table.data td.empty-cell { padding: var(--space-6); color: var(--color-text-muted); }
table.data tbody tr:has(td.empty-cell):hover { background: var(--color-surface); }
.cell-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-1); font-size: var(--text-secondary-size); color: var(--color-text-muted); }
.sort { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--space-6); color: var(--color-text-subtle); }
.sort:hover { color: var(--color-text); text-decoration: underline; }
.sort:focus-visible { outline: var(--border-focus) solid var(--color-focus); outline-offset: var(--focus-offset); }
.sort:active { color: var(--color-accent-pressed); }
.sort.on { color: var(--color-text); }
.pager-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); }
.pager-row .page-of { font-size: var(--text-secondary-size); color: var(--color-text-muted); }
.pager-row .page-of .figure { font-size: var(--text-secondary-size); }

/* ---- 12. empty state ---------------------------------------------------------------------------- */
.empty {
  background: var(--color-surface-sunken); border-radius: var(--radius-card); padding: var(--space-6) var(--space-4);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1);
}
.empty-title { font-weight: var(--weight-semibold); color: var(--color-text); }
.empty-body { font-size: var(--text-secondary-size); color: var(--color-text-muted); }

/* ---- 13. callouts ------------------------------------------------------------------------------- */
.callout {
  border-radius: var(--radius-card); padding: var(--space-3) var(--space-4);
  border-left: var(--border-indicator) solid transparent; font-size: var(--text-body-size);
}
.callout-title { display: block; font-weight: var(--weight-semibold); }
.callout--highlight { background: var(--color-surface-highlight); color: var(--color-text-subtle); }
.callout--highlight .callout-title, .callout--highlight strong { color: var(--color-text); }
.callout--positive { background: var(--color-success-bg); border-left-color: var(--color-success-border); color: var(--color-text-subtle); }
.callout--positive .callout-title, .callout--positive strong { color: var(--color-success-text); }
.callout--highlight a, .callout--positive a { color: var(--color-link-on-highlight); text-decoration: underline; }
.callout--negative { background: var(--color-danger-bg); border-left-color: var(--color-danger-border); color: var(--color-text); }
.callout--negative .callout-title { color: var(--color-danger-text); }
.callout--info { background: var(--color-info-callout-bg); border-left-color: var(--color-info-callout-border); color: var(--color-info-callout-text); }
.callout--warning { background: var(--color-warning-bg); border-left-color: var(--color-warning-border); color: var(--color-text); }
.callout--warning .callout-title, .callout--warning strong { color: var(--color-warning-text); }
.callout--placeholder { background: var(--color-surface-sunken); }
.account-head .callout, .card .callout { margin-top: var(--space-3); }
.card > h2 + .callout, .card > h2 + .coverage { margin-top: 0; }
.activity .plain + .plain { margin-top: var(--space-2); }

/* ---- 14. tabs ----------------------------------------------------------------------------------- */
.tabs { display: flex; gap: var(--space-1); border-bottom: var(--border-hairline) solid var(--color-border); overflow-x: auto; }
.tabs a {
  display: inline-flex; align-items: center; min-height: var(--control-h-touch); padding: var(--space-2);
  border-bottom: var(--border-focus) solid transparent; white-space: nowrap;
  font-size: var(--text-body-size); font-weight: var(--weight-medium); color: var(--color-text-muted);
}
.tabs a:hover { color: var(--color-text); border-bottom-color: var(--color-border-control); text-decoration: none; }
.tabs a:focus-visible { outline: var(--border-focus) solid var(--color-focus); outline-offset: var(--focus-offset-inset); }
.tabs a:active { color: var(--color-accent-pressed); border-bottom-color: var(--color-border-control); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--color-text); border-bottom-color: var(--color-accent); }

/* ---- account page ------------------------------------------------------------------------------- */
.account-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.head-main { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.head-meta, .head-reason { font-size: var(--text-secondary-size); color: var(--color-text-muted); }
.head-side { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); }
.pager { display: flex; gap: var(--space-2); }
.head-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-4);
  border-top: var(--border-hairline) solid var(--color-border);
}
/* 40% basis: two buttons per row inside the 336px content box at 400px (a 200px basis would stack them). */
.head-actions .btn { flex: 1 1 40%; }
.assign-one { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.assign-one select { flex: 1 1 100%; }
.account-head .callout { margin-top: 0; }
.intel-block { max-width: var(--measure); }
.intel-block p { margin-top: var(--space-1); }
.cites { font-size: var(--text-secondary-size); color: var(--color-text-muted); }
.facts-title { margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--border-hairline) solid var(--color-border); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--col-min), 1fr)); gap: var(--space-4) var(--space-6); margin: 0; }
.facts div { min-width: 0; }
.facts .wide { grid-column: 1 / -1; }
.facts dt {
  font-size: var(--text-label-size); line-height: var(--lh-tight); font-weight: var(--weight-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-text-subtle);
}
.facts dd { margin: var(--space-1) 0 0; overflow-wrap: anywhere; }
.signal-item {
  display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3);
  border-bottom: var(--border-hairline) solid var(--color-border); border-left: var(--border-indicator) solid transparent;
  scroll-margin-top: var(--space-6);
}
.signal-item:last-child { border-bottom-color: transparent; }
.signal-item:target { background: var(--color-surface-sunken); border-left-color: var(--color-accent); border-radius: var(--radius-card); }
.signal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.signal-summary { font-size: var(--text-secondary-size); color: var(--color-text-muted); }
.proof { font-size: var(--text-secondary-size); font-weight: var(--weight-medium); align-self: flex-start; }
.signal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.suppress { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.suppress input { flex: 1 1 var(--col-min); }
.no-draft { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); }
.coverage { margin-bottom: var(--space-3); }
.roles { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.draft { display: flex; flex-direction: column; gap: var(--space-2); scroll-margin-top: var(--space-6); border-left: var(--border-indicator) solid transparent; }
.draft:target { border-left-color: var(--color-accent); }
.draft-note { font-size: var(--text-secondary-size); color: var(--color-text-muted); max-width: var(--measure); }
.fact-check { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.activity-line .meta-mono { white-space: nowrap; }
.raw-detail { margin-top: var(--space-1); font-size: var(--text-secondary-size); color: var(--color-text-muted); }
.raw-detail summary { cursor: pointer; color: var(--color-link); }
.raw-detail summary:hover { color: var(--color-link-hover); text-decoration: underline; }
.raw-detail summary:active { color: var(--color-accent-pressed); text-decoration: underline; }
.raw-detail p { margin-top: var(--space-1); overflow-wrap: anywhere; }
/* htmx swaps a region by inserting the new copy before removing the old one; if the browser anchored scrolling
   on the old copy it would shift the page by the new copy's height. Swapped regions are never scroll anchors. */
.tab-body, .activity, .head-main, .draft, .feed, .kpis, .tiers, .results, table.data tr { overflow-anchor: none; }
/* Running and finished job notices in the account header; empty until a job starts. */
.jobs-live { display: flex; flex-direction: column; gap: var(--space-2); }
.jobs-live:empty, .flash:empty { display: none; }

/* ---- 16. sign-in -------------------------------------------------------------------------------- */
.signin-body { padding: var(--space-4); }
.signin { width: min(100%, var(--panel-signin)); margin: var(--space-6) auto 0; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.signin-brand { display: flex; flex-direction: column; gap: var(--space-2); }
.signin-logo { display: block; height: var(--logo-h-signin); width: auto; align-self: flex-start; }
.signin-section { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.user-list { display: flex; flex-direction: column; gap: var(--space-2); }
.user-choice {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); width: 100%;
  min-height: var(--control-h-touch); padding: 0 var(--space-4); border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-text); font: inherit; cursor: pointer;
}
.user-choice:hover { background: var(--color-surface-sunken); border-color: var(--color-border-control); }
.user-choice:focus-visible { outline: var(--border-focus) solid var(--color-focus); outline-offset: var(--focus-offset); }
.user-choice:active { background: var(--color-surface-pressed); border-color: var(--color-border-control); }

/* ---- 768px and up: permanent sidebar (below it a 224px sidebar leaves under 544px for content) ---- */
@media (min-width: 768px) {
  .shell { flex-direction: row; }
  .sidebar {
    width: var(--sidebar-w); flex: none; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start;
    gap: var(--space-6); padding: var(--space-4); position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: var(--z-sticky);
  }
  .brand { min-height: 0; }
  .brand-logo { height: var(--logo-h-sidebar); }
  .brand-product { display: block; }
  .js .menu-button, .menu-button { display: none; }
  .js .menu-button[aria-expanded="false"] + .nav-panel, .nav-panel { display: flex; flex: 1; padding: 0; gap: var(--space-6); justify-content: space-between; }
  .nav a { min-height: var(--control-h); }
  .signout { min-height: var(--control-h-sm); }
  .main { padding: var(--space-6) var(--space-6) var(--space-12); }
  .btn, .btn.small, input, select, textarea, .check, .tabs a { min-height: var(--control-h); }
  .btn.small { min-height: var(--control-h-sm); }
  .btn.icon { width: var(--control-h); }
  .tabs a { padding: var(--space-2) var(--space-3); }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters input[type=search] { flex: 1 1 var(--col-min); }
  .filters select, .filters input[type=number], .filters .check { flex: 0 1 auto; }
  .bulk select { flex: 0 1 auto; }
  .feed-filter { flex: 0 1 auto; }
  .tiers { grid-template-columns: repeat(auto-fit, minmax(var(--col-min), 1fr)); }
  .panel { padding: var(--space-6); }
  .account-head { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-6); }
  .head-side { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--space-3); }
  .head-actions, .assign-one, .suppress, .jobs-live, .account-head > .callout { grid-column: 1 / -1; }
  .head-actions .btn { flex: 0 1 auto; }
  .assign-one select { flex: 0 1 auto; }
  .setting-row { flex-direction: row; justify-content: space-between; align-items: center; gap: var(--space-3); }
  .setting-row input, .setting-row select { width: var(--field-w-sm); }
  .signin { margin-top: var(--space-16); padding: var(--space-8); }
}

/* ---- 1280px and up: tiers beside a 336px feed; wide tables fit, so their headers can stick ---- */
@media (min-width: 1280px) {
  .main { padding: var(--space-8) var(--space-8) var(--space-12); }
  .dash-grid { grid-template-columns: minmax(0, 1fr) var(--feed-col); }
  .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feed-card { position: sticky; top: var(--space-8); z-index: var(--z-sticky); max-height: calc(100vh - 2 * var(--space-8)); }
  .feed-card .feed { flex: 1; min-height: 0; overflow-y: auto; }
  .table-wrap { overflow: visible; }
  table.data th { position: sticky; top: 0; z-index: var(--z-sticky); }
}