/* AssessIQ Counsel — design system stylesheet.
   The law is ui/DESIGN.md. This file is its only implementation: every
   token in §2, every component in §3, motion in §2.3. No second
   stylesheet, no CDN, no import rules of any kind. Pages link this file
   and add nothing but page-specific LAYOUT in their own <style> (≤120
   lines, no colors, no font-family, no shadows, no z-index — DESIGN.md
   §7/§8). */

/* ---------------------------------------------------------------- fonts
   Geist 400/500/600, Geist Mono 400/500 — latin subset woff2, SIL OFL,
   bundled in ui/fonts/ so the resident build renders fully offline. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Geist-400.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/Geist-500.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/Geist-600.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/GeistMono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/GeistMono-500.woff2") format("woff2");
}

/* --------------------------------------------------------------- tokens
   DESIGN.md §2.1-2.3. Every color, weight, radius, shadow and z-index the
   product uses lives here. A page that needs one it can't find adds it
   here first — never redefines a `--` of its own (§7 item 1, §8). */
:root {
  color-scheme: light;

  /* §2.1 color — warm neutrals + one accent + five semantic hues */
  --bg:            #f6f6f4;
  --surface:       #ffffff;
  --surface-2:     #f1f1ed;
  --line:          #ddddd6;
  --line-strong:   #c9c9c0;
  --ink:           #1a1a1a;
  --ink-2:         #55554f;
  --ink-3:         #8a8a82;
  --accent:        #2c4a3e;
  --accent-hover:  #23392f;
  --accent-soft:   #e7ede9;
  --focus:         #2c4a3e;

  --green:         #2c6e3f;
  --green-bg:      #e6f2e9;
  --red:           #9a2b2b;
  --red-bg:        #fbeaea;
  --amber:         #8a6100;
  --amber-bg:      #fdf3dc;
  --blue:          #2b4d7a;
  --blue-bg:       #e8eef6;
  --gray:          #6b6b64;
  --gray-bg:       #eeeee8;

  /* row-hover / stripe tints used across every table + list row */
  --row-hover:     var(--surface-2);
  --row-selected:  var(--accent-soft);

  /* §2.2 typography */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", "SF Mono", Menlo, Consolas, monospace;
  --text-micro:       11px;
  --text-label:       12px;
  --text-body-dense:  13px;
  --text-body:        14px;
  --text-emphasis:    16px;
  --text-h2:          20px;
  --text-h1:          24px;
  --weight-read:      400;
  --weight-ui:        500;
  --weight-strong:    600;
  --leading-heading:  1.25;
  --leading-dense:    1.45;
  --leading-prose:    1.55;
  --prose-max:        65ch;

  /* §2.3 spacing — 4,8,12,16,24,32,48, nothing else */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* table cell padding: 8/12 at density 7, 6/10 compact */
  --cell-py: 8px;
  --cell-px: 12px;
  --cell-py-compact: 6px;
  --cell-px-compact: 10px;
  --row-h: 40px;
  --row-h-compact: 32px;

  /* radius scale */
  --radius-1: 2px;   /* inline badge */
  --radius-2: 4px;   /* inputs, list rows */
  --radius-3: 6px;   /* buttons, chips */
  --radius-4: 8px;   /* panels, popovers */
  --radius-5: 12px;  /* modal */
  --radius-pill: 9999px;

  /* elevation — borders first, shadows last (L3/L4 only) */
  --shadow-l3: 0 4px 12px rgba(26, 26, 26, .08);
  --shadow-l4: 0 12px 32px rgba(26, 26, 26, .14);
  --backdrop-color: rgba(26, 26, 26, .45);

  /* motion — 150ms on opacity/transform only; drawer/modal 180ms */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --duration: 150ms;
  --duration-enter: 180ms;
  --duration-highlight: 600ms;

  /* z layers — only these five exist in the product */
  --z-sticky: 10;
  --z-toolbar: 20;
  --z-drawer: 30;
  --z-modal: 40;
  --z-toast: 50;
  --z-backdrop: 29; /* implementation detail of drawer/modal, sits just under either */
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-dense);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: var(--leading-heading); font-weight: var(--weight-strong); }
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
p { margin: 0; }
a { color: var(--accent); }
img { max-width: 100%; }

/* subtitle line under a page h1 (property.html) */
.subtitle { color: var(--ink-2); font-size: var(--text-body-dense); margin-bottom: 4px; }
.back-link { font-size: var(--text-label); color: var(--accent); text-decoration: none; }
.back-link:hover { text-decoration: underline; }

/* a highlighted formula/equation line (valuation arithmetic shown in the open) */
.formula {
  background: var(--surface-2);
  border-radius: var(--radius-3);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  margin-top: 8px;
}

/* danger modifiers — reused wherever a negative/adverse fact needs the red hue */
.highlight.is-danger { border-left-color: var(--red); }
.highlight.is-danger .highlight-value { color: var(--red); }
.note.is-danger { color: var(--red); }

/* every number in the product renders through this */
.mono, .num, code {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* prose blocks (rare) cap at 65ch per §2.2 */
.prose { line-height: var(--leading-prose); max-width: var(--prose-max); }

/* disclosure widgets (details/summary) appear on every page */
details > summary { cursor: pointer; color: var(--accent); font-weight: var(--weight-ui); }

/* small delta/negative-value utilities, reused wherever a number needs to
   read as adverse without a chip (e.g. a raw signed percentage in a cell) */
.delta-neg { color: var(--red); }
.delta-pct { color: var(--ink-2); font-size: var(--text-label); font-weight: var(--weight-ui); }

/* secondary paragraph under a heading — replaces the old .apl-note/.note */
.note {
  color: var(--ink-2);
  font-size: var(--text-body-dense);
  line-height: var(--leading-prose);
  max-width: 900px;
  margin: 4px 0 12px;
}

/* a table/grid that must not blow the page out sideways scrolls itself */
.table-scroll { overflow-x: auto; }

/* a row of buttons/inputs/toggles above a panel's content */
.actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); }

/* small inline "—" / "no screenshot" style placeholders inside a cell */
.cell-muted { color: var(--ink-3); }
.cell-muted.italic { font-style: italic; }

/* ----------------------------------------------------------------- shell */
.shell {
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 24px 60px;
}
@media (max-width: 900px) {
  .shell { padding: 0 16px 40px; }
}

.shell-header {
  padding: 22px 0 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.shell-header .product-name { font-size: var(--text-body); font-weight: var(--weight-strong); }
.shell-header .firm-name { font-size: var(--text-body); font-weight: var(--weight-read); color: var(--ink-2); }
.shell-header .resident-line { font-size: var(--text-label); color: var(--ink-3); margin-top: 2px; }
.shell-header .asof {
  display: inline-block;
  margin-top: var(--space-2);
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  padding: 5px 10px;
  font-size: var(--text-label);
}

.status-line {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--ink-2);
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}
.status-line b { color: var(--ink); font-weight: var(--weight-strong); }

/* ----------------------------------------------------------------- tabs */
.tabs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-5);
}
.tab {
  appearance: none;
  border: none;
  background: transparent;
  font: inherit;
  font-size: var(--text-body-dense);
  font-weight: var(--weight-strong);
  color: var(--ink-2);
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  letter-spacing: 0.02em;
  min-height: 44px;
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: var(--weight-ui); }
.tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.count-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-ui);
  color: var(--ink-2);
  background: var(--surface-2);
  border-radius: var(--radius-2);
  padding: 1px 6px;
  margin-left: 4px;
}

/* tour spotlight (guided walkthrough) rides the tabs/panel layer, not a
   named §3 component, but must obey the token/no-!important rules too */
.tour-target {
  position: relative;
  z-index: var(--z-modal);
  box-shadow: 0 0 0 3px var(--accent), 0 0 0 9999px var(--backdrop-color);
  border-radius: var(--radius-4);
  background: var(--surface);
}
#tour-caption {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-l4);
  padding: var(--space-4) var(--space-5);
  max-width: 560px;
  width: calc(100% - 32px);
  font-size: var(--text-body-dense);
  line-height: var(--leading-prose);
}
#tour-caption .tour-step-n { color: var(--ink-2); font-size: var(--text-micro); margin-bottom: 4px; }
#tour-caption .tour-nav { display: flex; gap: var(--space-2); margin-top: 10px; justify-content: flex-end; }

/* ------------------------------------------------------------ tab views */
.view { display: none; }
.view.is-active { display: block; }

/* --------------------------------------------------------------- panel
   L1 elevation: the section container that replaces the old ad-hoc
   `.card` boxes. "No card boxes for DATA" (§1) means the highlights strip
   and every number, not this general grouping container. */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-4);
  padding: 18px 20px;
  margin-bottom: var(--space-5);
}
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}
.panel-title {
  font-size: var(--text-body);
  font-weight: var(--weight-strong);
  margin: 0;
}

/* ---------------------------------------------------------- highlights
   The KPI strip. No boxes: 1px verticals only. */
.highlights {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  overflow-x: auto;
  margin-bottom: var(--space-5);
}
@media (max-width: 640px) {
  .highlights { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
}
.highlight {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px var(--space-4);
  border-left: 1px solid var(--line);
}
.highlight:first-child { border-left: none; padding-left: 0; }
.highlight-value {
  font-family: var(--font-mono);
  font-size: var(--text-h1);
  font-weight: var(--weight-ui);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: var(--leading-heading);
}
.highlight-label { font-size: var(--text-label); color: var(--ink-2); }
.highlight-caption { font-family: var(--font-mono); font-size: var(--text-label); color: var(--ink-3); }
.highlight-caption.is-green { color: var(--green); }
.highlight-caption.is-red { color: var(--red); }
.highlight-caption.is-amber { color: var(--amber); }

/* ----------------------------------------------------------------- table
   The workhorse. Sticky header (L2), tabular mono numbers right-aligned,
   text left, 1px rule between rows. `[data-virtual]` = windowed render. */
.table-viewport {
  position: relative;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-4);
  background: var(--surface);
}
.table-viewport.is-virtual { max-height: 640px; }

.table { border-collapse: collapse; width: 100%; font-size: var(--text-body-dense); background: var(--surface); }
.table th, .table td { padding: var(--cell-py) var(--cell-px); text-align: left; }
.table th.numcell, .table td.numcell,
.table th[data-numeric], .table td[data-numeric],
.table td.num, .table th.num { text-align: right; }
.table thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--text-micro);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.table th[data-sort] { cursor: pointer; user-select: none; }
.table th[data-sort]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.table .sort-caret { font-size: 10px; color: var(--accent); margin-left: 3px; }
.table tbody td { border-bottom: 1px solid var(--line); vertical-align: top; }
.table tbody tr.rowline { cursor: pointer; }
.table tbody tr.rowline:hover { background: var(--row-hover); }
.table tbody tr.is-selected { background: var(--row-selected); }
.table tbody tr.subrow td { background: var(--bg); }
.cellmain { font-weight: var(--weight-ui); }
.cellsub { font-size: var(--text-label); color: var(--ink-2); }
.table .table-spacer td { padding: 0; border: none; height: 1px; }

/* row-highlight on a freshly-detected change: one 600ms fade, then rest */
@keyframes counsel-row-flash {
  from { background: var(--accent-soft); }
  to   { background: transparent; }
}
.table tbody tr.is-new { animation: counsel-row-flash var(--duration-highlight) var(--ease) 1; }

.table.is-compact th, .table.is-compact td { padding: var(--cell-py-compact) var(--cell-px-compact); }

/* fixed-layout tables (watch-list, valuation) need a floor width so a long
   cell can't blow columns out; the wrapper above scrolls, not the page */
.table.is-fixed { table-layout: fixed; }

/* --------------------------------------------------------------- chips
   Pill, 11px 500. Semantics are pinned: never mix meaning and color. */
.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-micro);
  font-weight: var(--weight-ui);
  white-space: nowrap;
  border: 1px solid transparent;
  background: var(--gray-bg);
  color: var(--gray);
}
.chip[title] { cursor: help; }
.chip { font-family: var(--font-sans); }
.chip-live    { background: var(--green-bg); color: var(--green); }
.chip-raised  { background: var(--red-bg);   color: var(--red);   font-weight: var(--weight-strong); }
.chip-caution { background: var(--amber-bg); color: var(--amber); }
.chip-info    { background: var(--blue-bg);  color: var(--blue);  }
.chip-neutral { background: var(--gray-bg);  color: var(--gray);  }
/* outline variants: same hue, lower emphasis (e.g. a "likely" vs "strong" tier) */
.chip-caution.is-outline { background: var(--surface); border-color: var(--amber); }
.chip-raised.is-outline  { background: var(--surface); border-color: var(--red); }
@media (max-width: 640px) {
  .chip { white-space: normal; overflow-wrap: anywhere; }
}

/* ---------------------------------------------------------------- buttons */
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-3);
  font: inherit;
  font-size: var(--text-body-dense);
  font-weight: var(--weight-ui);
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: default; pointer-events: none; }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* the 32px density target still clears a 44px tap target on a touch screen */
@media (max-width: 640px) {
  .btn { min-height: 44px; }
}

.btn-primary { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-secondary:hover { background: var(--surface-2); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--accent); padding: 0 4px; height: auto; }
.btn-ghost:hover { text-decoration: underline; }

/* a plain text link that behaves like a ghost button (details/toggle links) */
.link-action {
  color: var(--accent);
  font-weight: var(--weight-strong);
  font-size: var(--text-label);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  padding: 0;
}
.link-action:hover { text-decoration: underline; }

/* ----------------------------------------------------------------- field */
.field { display: flex; flex-direction: column; gap: 4px; }
.field-label { font-size: var(--text-label); font-weight: var(--weight-ui); color: var(--ink-2); }
.field input, .field select, .field textarea, .field-control {
  height: 32px;
  padding: 0 var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-2);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-body-dense);
}
.field textarea, textarea.field-control { height: auto; padding: var(--space-2); font-family: var(--font-mono); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.field-control:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}
.field-helper { font-size: var(--text-label); color: var(--ink-3); }
.field-error { font-size: var(--text-label); color: var(--red); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--red); }

/* bare inputs used outside a .field wrapper (inline table-row forms) still
   get the same 32px/line-strong/focus treatment */
input[type="text"], input[type="search"], input[type="date"], input[type="number"], select {
  height: 32px;
  padding: 0 var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-2);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-body-dense);
}
input[type="checkbox"] { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- banner
   L1 panel + 3px left rule in the semantic color. One action, right. */
.banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gray);
  border-radius: var(--radius-4);
  padding: 14px 16px;
  margin-bottom: var(--space-4);
}
.banner-live    { border-left-color: var(--green); }
.banner-raised  { border-left-color: var(--red); }
.banner-caution { border-left-color: var(--amber); }
.banner-info    { border-left-color: var(--blue); }
.banner-neutral { border-left-color: var(--gray); }
.banner-text { flex: 1 1 320px; }
.banner-title { font-size: var(--text-body); font-weight: var(--weight-ui); color: var(--ink); }
.banner-body { font-size: var(--text-label); color: var(--ink-2); margin-top: 3px; }
.banner-action { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* ------------------------------------------------------------- backdrop */
.backdrop {
  position: fixed;
  inset: 0;
  background: var(--backdrop-color);
  z-index: var(--z-backdrop);
  display: none;
}
.backdrop.open { display: block; }

/* ---------------------------------------------------------------- drawer
   Right-side 480px, L3. */
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 480px;
  max-width: 100%;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-l3);
  z-index: var(--z-drawer);
  transform: translateX(102%);
  transition: transform var(--duration-enter) var(--ease);
  overflow-y: auto;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--surface);
}
.drawer-head h2 { font-size: var(--text-emphasis); margin: 0 0 2px; }
.drawer-head .sub { font-size: var(--text-label); color: var(--ink-2); }
.drawer-close {
  position: absolute;
  top: 12px; right: 12px;
  font: inherit;
  font-size: 18px;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-3);
  cursor: pointer;
  color: var(--ink-2);
}
.drawer-body { padding: 8px 20px 40px; }
.drawer .sect { margin-top: 18px; }
.drawer .sect h3, .sect h3 {
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin: 0 0 8px;
}

@media (max-width: 700px) {
  .drawer { width: 100%; }
}

/* ---------------------------------------------------------------- modal
   640px, L4, centered, with backdrop. */
.modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 640px;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 60px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-5);
  box-shadow: var(--shadow-l4);
  z-index: var(--z-modal);
  display: none;
}
.modal.open { display: block; }
.modal-head {
  padding: 18px 22px 12px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--surface);
}
.modal-head h2 { font-size: var(--text-emphasis); margin: 0 0 4px; }
.modal-head .sub { font-size: var(--text-label); color: var(--ink-2); }
.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  font: inherit;
  font-size: 18px;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-3);
  cursor: pointer;
  color: var(--ink-2);
}
.modal-body { padding: 14px 22px 22px; }

@media (max-width: 700px) {
  .modal { width: calc(100% - 24px); }
}

/* ------------------------------------------------------ small components
   Reused across drawers/panels wherever the exact §3 contract doesn't name
   a piece: a labeled key/value list, a muted callout, an accent-left
   variant of .panel for a graded summary card, a small labeled box. */
.kv { width: 100%; border-collapse: collapse; }
.kv td { padding: 5px 0; vertical-align: top; border-bottom: 1px dashed var(--line); }
.kv td.k { color: var(--ink-2); width: 42%; padding-right: 10px; font-size: var(--text-label); }
.kv td.v { font-variant-numeric: tabular-nums; }

.caveat {
  background: var(--gray-bg);
  color: var(--ink-2);
  border-radius: var(--radius-3);
  padding: 8px 10px;
  font-size: var(--text-label);
  margin-top: 8px;
}

.headline { font-size: var(--text-emphasis); font-weight: var(--weight-strong); }

.mailbox { border: 1px solid var(--line); border-radius: var(--radius-2); padding: 8px 10px; font-size: var(--text-label); }
.mailbox .lbl { font-size: var(--text-micro); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); margin-bottom: 3px; }

.panel.is-accent-live    { border-left: 3px solid var(--green); }
.panel.is-accent-caution { border-left: 3px solid var(--amber); }
.panel.is-emphasis       { border: 2px solid var(--accent); }

/* a table cell that should wrap instead of holding nowrap (addresses,
   deadlines, last-change strings) */
.table .wrap-cell { white-space: normal; overflow-wrap: anywhere; }
.table .wrap-cell .chip { white-space: normal; }

/* a labeled checkbox/select sitting in an .actions row */
.filter-toggle { display: flex; align-items: center; gap: 6px; font-size: var(--text-label); color: var(--ink-2); cursor: pointer; user-select: none; }

.formula { overflow-x: auto; }
.formula .ln { white-space: nowrap; padding: 2px 0; }

/* filter pill row (book.html subchips) — a toggle group, not a status chip */
.subchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); }
.subchip {
  font: inherit;
  font-size: var(--text-label);
  padding: 8px 12px;
  min-height: 44px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.subchip.is-active { background: var(--accent); border-color: var(--accent); color: #ffffff; }

/* outreach picker rows (book.html modal) */
.outreach-grade-group { margin-top: 14px; }
.outreach-grade-group h4 { font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); margin: 0 0 6px; }
.outreach-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px dashed var(--line); font-size: var(--text-body-dense); cursor: pointer; }
.outreach-row-main { flex: 1; }
.outreach-row-sav { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.outreach-row-disabled { opacity: 0.6; cursor: default; }
.outreach-summary { margin-top: 16px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-4); padding: 10px 12px; font-size: var(--text-body-dense); }
.outreach-summary .ln { padding: 2px 0; }
.outreach-confirm { text-align: center; padding: 30px 10px; }
.outreach-confirm .big { font-size: var(--text-emphasis); font-weight: var(--weight-strong); }

/* -------------------------------------------------------------- evidence
   Source link + retrieved timestamp + deep-link caveat, one quiet line. */
.evidence-link { color: var(--accent); font-weight: var(--weight-strong); text-decoration: none; }
.evidence-link:hover { text-decoration: underline; }
.evidence-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.evidence-line { font-size: var(--text-label); color: var(--ink-3); margin-top: 4px; }
.evidence-line .evidence-link { margin-right: 10px; }
@media (max-width: 640px) {
  .evidence-link { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 4px; }
}
.evidence-thumb {
  display: block;
  margin-top: 8px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-l3);
}
.evidence-thumb.is-compact { max-height: 180px; object-fit: cover; object-position: top; }

/* ---------------------------------------------------------------- states
   Every list/panel ships all three. Loading = flat skeleton bars, no
   spinner, no shimmer. Empty = one sentence + the action. Error = an
   inline red line with the raw reason, never a toast. */
.skeleton { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--line); border-radius: var(--radius-4); overflow: hidden; }
.skeleton-row { display: flex; gap: var(--space-4); align-items: center; height: var(--row-h); padding: 0 var(--cell-px); background: var(--surface); }
.skeleton-bar { height: 10px; border-radius: var(--radius-1); background: var(--surface-2); }

.state-empty {
  color: var(--ink-2);
  font-size: var(--text-body-dense);
  padding: 14px 0;
}
.state-empty .link-action { margin-left: 6px; }

.state-error {
  color: var(--red);
  font-size: var(--text-body-dense);
  padding: 10px 0;
}

/* ----------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}