/* ============================================================================
   ProofDesk console — design system
   Locked to docs/DESIGN.md ("Composing Room, with grafts"). Do not redesign.

   Contents
     1  Tokens (light / dark)
     2  Reset and base typography
     3  Script rules (:lang)
     4  Utilities
     5  App shell
     6  Topbar
     7  Rail: nav, counts, backfill horizon
     8  Ledger, page header, sections
     9  Numeric spine and stat tiles
    10  Coverage bar
    11  Three-way absence
    12  Status dot glyphs
    13  Asleep / awake waiting bar
    14  Segmented state strip (filter control)
    15  Data tables
    16  Daybar
    17  Chips
    18  Buttons
    19  Inputs and fields
    20  Empty states
    21  Charts chrome (contract with charts.js)
    22  Specimen column and the paper sheet
    23  Drawer
    24  Prose and change lists
    25  Login
    26  Responsive
    27  Reduced motion, forced colors, print
   ========================================================================= */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* ground */
  --bg-page: #EFF1F3;
  --bg-raised: #FAFBFB;
  --bg-sunken: #E3E7EA;
  --bg-paper: #FBFBF9;
  --ink-paper: #1A1A18;

  /* rules */
  --border: #D3D9DE;
  --border-strong: #B2BBC3;
  --border-focus: #0F5C8A;

  /* ink */
  --ink: #151A20;
  --ink-2: #4E5862;
  --ink-3: #7E8892;
  --ink-inverse: #FAFBFB;

  /* accent — never a status, never a chart series */
  --accent: #0F5C8A;
  --accent-hover: #0B4468;
  --accent-soft: #E2EDF4;

  /* status */
  --good: #256B4A;
  --good-bg: #DDEBE3;
  --warn: #8A5A00;
  --warn-bg: #F3E8D2;
  --serious: #9E1259;
  --serious-bg: #F6E1EB;
  --critical: #B3261E;
  --critical-bg: #F7E0DE;

  /* waiting stripe + hatch */
  --awake: #E39A2B;
  --asleep: #9AA6B4;
  --hatch: #B2BBC3;

  /* chart series — VALIDATED palette from DESIGN.md, not the draft values.
     Fixed order, never cycled. No green/amber/magenta/red status hue is here. */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;

  /* the surface charts draw their 2px gaps and rings in */
  --chart-surface: var(--bg-raised);

  /* agent-touched, unverified: an alias of --accent, not a new hue */
  --agent: var(--accent);

  /* type */
  --font-ui: "IBM Plex Sans", "IBM Plex Sans Hebrew", "IBM Plex Sans Devanagari", "Noto Sans Gurmukhi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-condensed: "IBM Plex Sans Condensed", "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Arial Narrow", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-hebrew: "IBM Plex Sans Hebrew", "Noto Sans Hebrew", "Arial Hebrew", David, sans-serif;
  --font-devanagari: "IBM Plex Sans Devanagari", "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", sans-serif;
  --font-gurmukhi: "Noto Sans Gurmukhi", "Nirmala UI", "Gurmukhi MN", sans-serif;

  --lh-latin: 1.38;
  --lh-hebrew: 1.45;
  --lh-indic: 1.55;
  --lh-table: 1.35;
  --lh-prose: 1.5;

  /* geometry */
  --radius: 2px;
  --radius-0: 0;
  --w-rail: 216px;
  --w-specimen: 420px;
  --w-tab: 44px;
  --h-topbar: 48px;
  --h-row: 28px;
  --gutter: 20px;

  /* the only three box-shadow declarations permitted in the codebase */
  --shadow-paper: 0 1px 2px rgba(21, 26, 32, 0.10), 0 6px 16px -6px rgba(21, 26, 32, 0.22);
  --shadow-overlay: -1px 0 0 0 #B2BBC3, -12px 0 32px -12px rgba(21, 26, 32, 0.18);
  --focus-ring: 0 0 0 2px var(--bg-raised), 0 0 0 4px var(--border-focus);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-page: #12161B;
    --bg-raised: #191F26;
    --bg-sunken: #0C1015;
    --bg-paper: #FBFBF9;
    --ink-paper: #1A1A18;
    --border: #2A323B;
    --border-strong: #3E4852;
    --border-focus: #52A8DC;
    --ink: #E4E8EB;
    --ink-2: #9AA5AF;
    --ink-3: #6B757F;
    --ink-inverse: #12161B;
    --accent: #52A8DC;
    --accent-hover: #7CC0E8;
    --accent-soft: #123243;
    --good: #4FA97E;
    --good-bg: #16302A;
    --warn: #D9A23F;
    --warn-bg: #33280F;
    --serious: #E0559A;
    --serious-bg: #3A1428;
    --critical: #E8635A;
    --critical-bg: #3B1A18;
    --awake: #F0B44F;
    --asleep: #46566C;
    --hatch: #3E4852;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --shadow-paper: 0 1px 2px rgba(0, 0, 0, 0.55), 0 10px 28px -8px rgba(0, 0, 0, 0.70);
    --shadow-overlay: -1px 0 0 0 #3E4852, -12px 0 32px -12px rgba(0, 0, 0, 0.60);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-page: #12161B;
  --bg-raised: #191F26;
  --bg-sunken: #0C1015;
  --bg-paper: #FBFBF9;
  --ink-paper: #1A1A18;
  --border: #2A323B;
  --border-strong: #3E4852;
  --border-focus: #52A8DC;
  --ink: #E4E8EB;
  --ink-2: #9AA5AF;
  --ink-3: #6B757F;
  --ink-inverse: #12161B;
  --accent: #52A8DC;
  --accent-hover: #7CC0E8;
  --accent-soft: #123243;
  --good: #4FA97E;
  --good-bg: #16302A;
  --warn: #D9A23F;
  --warn-bg: #33280F;
  --serious: #E0559A;
  --serious-bg: #3A1428;
  --critical: #E8635A;
  --critical-bg: #3B1A18;
  --awake: #F0B44F;
  --asleep: #46566C;
  --hatch: #3E4852;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --shadow-paper: 0 1px 2px rgba(0, 0, 0, 0.55), 0 10px 28px -8px rgba(0, 0, 0, 0.70);
  --shadow-overlay: -1px 0 0 0 #3E4852, -12px 0 32px -12px rgba(0, 0, 0, 0.60);
}

/* ── 2. Reset and base typography ────────────────────────────────────────── */

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

html { font-size: 16px; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: var(--lh-latin);
  font-feature-settings: "tnum" 1, "lnum" 1, "cv02" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, ul, ol, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }

hr, .hairline {
  border: 0;
  border-top: 1px solid var(--border);
  height: 0;
  margin: 0;
}
.hairline--strong { border-top-color: var(--border-strong); }

/* the type scale, as named steps */
.t-micro   { font-family: var(--font-condensed); font-weight: 600; font-size: 0.6875rem; line-height: 1rem; letter-spacing: 0.01em; color: var(--ink-2); }
.t-meta    { font-size: 0.75rem; line-height: 1rem; color: var(--ink-2); }
.t-body    { font-size: 0.8125rem; line-height: 1.1875rem; }
.t-prose   { font-size: 0.9375rem; line-height: var(--lh-prose); }
.t-title   { font-size: 1.125rem; line-height: 1.5rem; font-weight: 500; }
.t-subject { font-size: 1.375rem; line-height: 1.75rem; font-weight: 400; }
.t-figure  { font-size: 2rem; line-height: 2.125rem; font-weight: 400; letter-spacing: -0.015em; font-variant-numeric: tabular-nums lining-nums; }

.mono { font-family: var(--font-mono); font-weight: 400; font-size: 0.75rem; }
.num  { font-variant-numeric: tabular-nums lining-nums; font-weight: 500; color: var(--ink); }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }

@supports not (font-variant-numeric: tabular-nums) {
  .num, .col-num, .col-money, .col-time, .col-id, .t-figure { font-family: var(--font-mono); font-weight: 400; }
}

/* ── 3. Script rules — applied by :lang(), never by class ────────────────── */

:lang(he) { font-family: var(--font-hebrew); line-height: var(--lh-hebrew); font-size: calc(1em + 1px); direction: rtl; }
:lang(hi) { font-family: var(--font-devanagari); line-height: var(--lh-indic); font-size: calc(1em + 1px); }
:lang(pa) { font-family: var(--font-gurmukhi); line-height: var(--lh-indic); font-size: calc(1em + 1px); font-weight: 400; }

.col-id, .col-num, .col-money, .col-time { direction: ltr; unicode-bidi: isolate; }

/* customer name in their own script, transliteration second */
.name-native { color: var(--ink); }
.name-latin { color: var(--ink-2); }

/* ── 4. Utilities ────────────────────────────────────────────────────────── */

.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.split { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.row { display: flex; align-items: center; gap: 8px; }
.row--tight { gap: 4px; }
.stack > * + * { margin-top: 8px; }
.stack--lg > * + * { margin-top: 16px; }
.grow { flex: 1 1 auto; min-width: 0; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius);
  position: relative;
  z-index: 3;
}

::selection { background: var(--accent-soft); color: var(--ink); }

/* ── 5. App shell ────────────────────────────────────────────────────────── */

.app {
  display: grid;
  grid-template-columns: var(--w-rail) minmax(0, 1fr) var(--w-specimen);
  grid-template-rows: var(--h-topbar) minmax(0, 1fr);
  grid-template-areas:
    "topbar topbar topbar"
    "rail   ledger specimen";
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg-page);
}

.app.specimen-tab { --w-specimen: var(--w-tab); }

/* ── 6. Topbar ───────────────────────────────────────────────────────────── */

.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px 0 0;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
  min-width: 0;
}

.topbar__brand {
  width: var(--w-rail);
  flex: 0 0 var(--w-rail);
  padding: 0 12px;
  border-right: 1px solid var(--border);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--ink);
}
.topbar__brand:hover { text-decoration: none; }
.topbar__wordmark { font-size: 0.9375rem; font-weight: 600; line-height: 1.0625rem; }
.topbar__sub { font-family: var(--font-condensed); font-weight: 600; font-size: 0.6875rem; line-height: 0.875rem; letter-spacing: 0.01em; color: var(--ink-3); }

.topbar__search { flex: 1 1 420px; max-width: 460px; min-width: 160px; position: relative; }
.topbar__search .input { padding-left: 26px; height: 26px; background: var(--bg-page); }
.topbar__search::before {
  content: "";
  position: absolute; left: 9px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border: 1.5px solid var(--ink-3); border-radius: 50%;
  pointer-events: none;
}
.topbar__search::after {
  content: "";
  position: absolute; left: 17px; top: 50%; margin-top: 2px;
  width: 5px; height: 1.5px; background: var(--ink-3);
  transform: rotate(45deg); transform-origin: left center;
  pointer-events: none;
}
.topbar__kbd {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ink-3);
  pointer-events: none;
}

.topbar__spacer { flex: 1 1 auto; }

.clocks { display: flex; align-items: stretch; gap: 0; flex: 0 0 auto; }
.clock {
  padding: 0 12px;
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: center;
  min-width: 118px;
}
.clock:first-child { border-left: 0; }
.clock__label { font-family: var(--font-condensed); font-weight: 600; font-size: 0.6875rem; line-height: 0.875rem; letter-spacing: 0.01em; color: var(--ink-3); }
.clock__time { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.clock--customer .clock__time { color: var(--ink-2); }

.topbar__user { display: flex; flex-direction: column; justify-content: center; padding-left: 12px; border-left: 1px solid var(--border); min-width: 0; }
.topbar__name { font-size: 0.8125rem; line-height: 1rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__role { font-family: var(--font-condensed); font-weight: 600; font-size: 0.6875rem; line-height: 0.875rem; letter-spacing: 0.01em; color: var(--ink-3); }

.topbar__actions { display: flex; align-items: center; gap: 4px; }

.iconbtn {
  appearance: none;
  height: 26px; min-width: 26px;
  padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--ink-2);
  cursor: pointer;
}
.iconbtn:hover { background: var(--bg-sunken); color: var(--ink); }
.iconbtn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* the theme toggle shows the moon in light mode, the sun in dark */
.theme-toggle .theme-toggle__dark { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-toggle__dark { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-toggle__light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .theme-toggle__dark { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .theme-toggle__light { display: none; }
}

/* ── 7. Rail ─────────────────────────────────────────────────────────────── */

.rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border-right: 1px solid var(--border);
  min-height: 0;
  overflow: hidden;
}

.rail__nav { flex: 1 1 auto; overflow-y: auto; padding: 8px 0; min-height: 0; }

.rail__group {
  font-family: var(--font-condensed); font-weight: 600;
  font-size: 0.6875rem; line-height: 1rem; letter-spacing: 0.01em;
  color: var(--ink-3);
  padding: 12px 12px 4px;
}

.nav-item {
  display: grid;
  grid-template-columns: 1fr 32px;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px;
  color: var(--ink-2);
  border-left: 2px solid transparent;
}
.nav-item:hover { background: var(--bg-sunken); color: var(--ink); text-decoration: none; }
.nav-item.is-current { color: var(--ink); border-left-color: var(--accent); background: var(--bg-sunken); }
.nav-item__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item__count {
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 500;
  color: var(--ink-2);
}
.nav-item.is-current .nav-item__count { color: var(--ink); }
.nav-item__count.is-owed { color: var(--serious); }
.nav-item__count:empty::after { content: ""; }

.rail__foot {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding: 12px;
}

.horizon__label {
  font-family: var(--font-condensed); font-weight: 600;
  font-size: 0.6875rem; line-height: 1rem; letter-spacing: 0.01em;
  color: var(--ink-2);
}
.horizon__bar {
  height: 6px;
  margin: 6px 0 6px;
  background: var(--bg-sunken);
  border-radius: var(--radius-0);
  overflow: hidden;
}
.horizon__fill { height: 100%; background: var(--ink-3); }
.horizon__note { font-size: 0.75rem; line-height: 1rem; color: var(--ink-3); }
.horizon__note .mono { color: var(--ink-2); }

/* ── 8. Ledger, page header, sections ────────────────────────────────────── */

.ledger {
  grid-area: ledger;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-raised);
}

.ledger__inner { padding: 0 var(--gutter) 48px; }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0 12px;
}
.page-head__title { font-size: 1.125rem; line-height: 1.5rem; font-weight: 500; color: var(--ink); }
.page-head__sub { font-size: 0.75rem; line-height: 1rem; color: var(--ink-2); margin-top: 2px; }
.page-head__actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.section { padding: 16px 0 0; }
.section__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 8px;
}
.section__title { font-family: var(--font-condensed); font-weight: 600; font-size: 0.6875rem; line-height: 1rem; letter-spacing: 0.01em; color: var(--ink-2); }
.section__note { font-size: 0.75rem; line-height: 1rem; color: var(--ink-3); }

/* the one filter row above everything it scopes */
.filters {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.filters__label { font-family: var(--font-condensed); font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.01em; color: var(--ink-3); }
.filters__spacer { flex: 1 1 auto; }

/* two- and three-up column layouts, still no cards */
.cols { display: grid; gap: 0 var(--gutter); grid-template-columns: 1fr; }
.cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols > * { min-width: 0; }

/* ── 9. Numeric spine and stat tiles ─────────────────────────────────────── */

.spine { padding: 4px 0 8px; }

.stat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label figure" "hint coverage";
  align-items: baseline;
  column-gap: 16px;
  padding: 4px 0;
  position: relative;
}
.stat + .stat { border-top: 1px solid var(--border); }
a.stat { color: inherit; }
a.stat:hover { background: var(--bg-sunken); text-decoration: none; }

.stat__label { grid-area: label; color: var(--ink-2); }
.stat__label .stat__window { color: var(--ink-3); font-size: 0.75rem; }

/* Figures right-align on ONE axis running the full width, like a printer's
   rate card. The unit rides in a fixed slot to the right of that axis and the
   delta grows leftward, so digits land on the same column with or without
   either of them. */
.stat__figure {
  grid-area: figure;
  justify-self: end;
  display: grid;
  grid-template-columns: auto auto var(--unit-slot, 2.25em);
  align-items: baseline;
  column-gap: 6px;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.stat__value { grid-column: 2; grid-row: 1; text-align: right; font-weight: 500; color: var(--ink); }
.stat__unit { grid-column: 3; grid-row: 1; text-align: left; font-family: var(--font-condensed); font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.01em; color: var(--ink-3); }
.stat__figure .delta { grid-column: 1; grid-row: 1; text-align: right; }
.stat__hint { grid-area: hint; font-size: 0.75rem; line-height: 1rem; color: var(--ink-3); }
.stat__coverage { grid-area: coverage; justify-self: end; padding-right: var(--unit-slot, 2.25em); }

/* the headline figure — 32px hard cap, nothing in the product is larger */
.stat--headline { padding: 8px 0; }
.stat--headline .stat__value { font-size: 2rem; line-height: 2.125rem; font-weight: 400; letter-spacing: -0.015em; }
.stat--headline .stat__label { color: var(--ink); }

/* under-30-day window: 12% --hatch diagonal underlay, window named in the label */
.stat.is-short-window {
  background-image: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--hatch) 12%, transparent) 0 1px,
    transparent 1px 6px
  );
}
@supports not (background-image: repeating-linear-gradient(45deg, color-mix(in srgb, red 12%, transparent) 0 1px, transparent 1px 6px)) {
  .stat.is-short-window { background-image: repeating-linear-gradient(45deg, var(--hatch) 0 1px, transparent 1px 6px); opacity: 0.999; }
}

.delta { font-size: 0.75rem; font-variant-numeric: tabular-nums lining-nums; color: var(--ink-3); }
.delta.is-up { color: var(--good); }
.delta.is-down { color: var(--critical); }
.delta.is-flat { color: var(--ink-3); }

/* ── 10. Coverage bar ────────────────────────────────────────────────────── */
/* Incompleteness is visible; completeness is silent. At 100% nothing renders. */

.coverage { display: flex; align-items: center; gap: 6px; }
.coverage__bar {
  width: 72px; height: 2px;
  background: var(--bg-sunken);
  border-radius: var(--radius-0);
  overflow: hidden;
  flex: 0 0 auto;
}
.coverage__fill { height: 100%; background: var(--ink-3); }
.coverage__note { font-size: 0.75rem; line-height: 1rem; color: var(--ink-3); white-space: nowrap; }

/* ── 11. Three-way absence ───────────────────────────────────────────────── */
/* em dash  = not yet measured
   "no data" italic = measured and genuinely empty
   0 tabular = a real measured zero                                          */

.absent {
  color: var(--ink-3);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
}
.absent--empty { font-style: italic; letter-spacing: 0; }

/* keep the em dash on the decimal axis inside a money column */
.col-money .absent::after,
.money .absent::after { content: ""; display: inline-block; width: 3ch; }

/* ── 12. Status dot glyphs — hue AND shape ───────────────────────────────── */

.status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.status__label { color: var(--ink-2); }

.dot { width: 10px; height: 10px; flex: 0 0 10px; display: block; }
.dot--reply        { color: var(--serious); }   /* filled dot   — we owe a reply */
.dot--money        { color: var(--serious); }   /* half dot     — money          */
.dot--customer     { color: var(--ink-3); }     /* hollow dot   — waiting on them */
.dot--irreversible { color: var(--critical); }  /* triangle     — irreversible   */
.dot--done         { color: var(--good); }      /* check        — done           */
.dot--unmatched    { color: var(--ink-3); }     /* bar          — unmatched mail */
.status--reply .status__label,
.status--money .status__label { color: var(--serious); }
.status--irreversible .status__label { color: var(--critical); }
.status--done .status__label { color: var(--good); }

/* ── 13. Asleep / awake waiting bar ──────────────────────────────────────── */

.waiting { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.waiting__bar {
  display: flex;
  width: 56px; height: 4px;
  flex: 0 0 56px;
  background: var(--bg-sunken);
  border-radius: var(--radius-0);
  overflow: hidden;
}
.waiting__seg { height: 100%; }
.waiting__seg.is-asleep { background: var(--asleep); }
.waiting__seg.is-awake { background: var(--awake); }
.waiting__dur {
  font-family: var(--font-mono); font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
.waiting--wide .waiting__bar { width: 120px; flex-basis: 120px; }

.waiting-key { display: flex; align-items: center; gap: 10px; font-size: 0.75rem; color: var(--ink-3); }
.waiting-key__swatch { width: 12px; height: 4px; display: inline-block; margin-right: 4px; vertical-align: middle; }
.waiting-key__swatch.is-asleep { background: var(--asleep); }
.waiting-key__swatch.is-awake { background: var(--awake); }

/* ── 14. Segmented state strip — a filter control, not a hero ────────────── */

.statestrip {
  display: flex;
  width: 100%;
  height: 6px;
  background: var(--bg-sunken);
  border-radius: var(--radius-0);
  margin: 10px 0 8px;
}
.statestrip__seg {
  position: relative;
  flex: var(--seg, 1) 1 0;
  min-width: 2px;
  height: 6px;
  background: var(--seg-color, var(--ink-3));
  display: block;
  cursor: pointer;
}
.statestrip__seg + .statestrip__seg { margin-left: 1px; }
/* hit target far larger than the 6px mark */
.statestrip__seg::before { content: ""; position: absolute; inset: -8px 0; }
.statestrip__seg:hover { filter: brightness(1.12); }
.statestrip__seg.is-dimmed { opacity: 0.3; }
.statestrip__seg.is-active { box-shadow: inset 0 0 0 1px var(--ink); }

.statestrip-legend {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  padding-bottom: 4px;
}
.statestrip-legend__item {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 0.75rem; color: var(--ink-2);
}
.statestrip-legend__item.is-dimmed { color: var(--ink-3); }
.statestrip-legend__swatch { width: 8px; height: 8px; display: inline-block; background: var(--seg-color, var(--ink-3)); flex: 0 0 8px; align-self: center; }
.statestrip-legend__count { font-variant-numeric: tabular-nums lining-nums; font-weight: 500; color: var(--ink); }

/* ── 15. Data tables ─────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; overflow-y: visible; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  line-height: var(--lh-table);
}

.table thead th {
  font-family: var(--font-condensed); font-weight: 600;
  font-size: 0.6875rem; line-height: 1rem; letter-spacing: 0.01em;
  color: var(--ink-2);
  text-align: left;
  height: 24px;
  padding: 0 8px;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
  background: var(--bg-raised);
  position: sticky; top: 0; z-index: 2;
}
.table thead th + th { border-left: 1px solid var(--border); }

.table tbody td {
  height: var(--h-row);
  padding: 0 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--ink);
}
.table tbody td + td { border-left: 1px solid var(--border); }
.table tbody tr:hover td { background: var(--bg-sunken); }
.table tbody tr.is-selected td { background: var(--accent-soft); }

/* density ramp — 3px left edge in the row's status colour,
   opacity 10%→100% with hours waiting. One variable per row. */
.table tbody td:first-child { position: relative; }
.table tbody td:first-child::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--density-color, var(--ink-3));
  opacity: var(--density, 0);
}

/* sample rows — the empty table shows its own specimen at 30% ink */
.table tbody tr.is-sample td { color: var(--ink-3); opacity: 0.55; }
.table tbody tr.is-sample:hover td { background: transparent; }
.table tbody tr.is-sample td:first-child::before { opacity: 0.12; }
.table__samplenote {
  padding: 6px 8px;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--ink-3);
}

.table tfoot td {
  height: var(--h-row);
  padding: 0 8px;
  border-top: 1px solid var(--border-strong);
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
}

/* column kinds */
.col-id    { text-align: right; font-variant-numeric: tabular-nums lining-nums; font-weight: 500; white-space: nowrap; width: 1%; }
.col-num   { text-align: right; font-variant-numeric: tabular-nums lining-nums; font-weight: 500; white-space: nowrap; width: 1%; }
.col-money { text-align: right; font-variant-numeric: tabular-nums lining-nums; font-weight: 500; white-space: nowrap; width: 1%; }
.col-time  { text-align: right; font-family: var(--font-mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; white-space: nowrap; width: 1%; }
.col-script{ text-align: center; color: var(--ink-2); font-size: 0.75rem; white-space: nowrap; width: 1%; }
.col-state { text-align: left; white-space: nowrap; width: 1%; }
.col-text  { text-align: left; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-wide  { text-align: left; width: auto; }

th.col-id, th.col-num, th.col-money, th.col-time { text-align: right; }
th.col-script { text-align: center; }

/* money aligns on the decimal, not the cell edge */
.money { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums lining-nums; }
.money__int { font-weight: 500; }
.money__frac { display: inline-block; width: 3ch; text-align: left; color: var(--ink-2); font-weight: 500; }
.money__sym { color: var(--ink-2); margin-right: 1px; }
.money--neg .money__int, .money--neg .money__frac { color: var(--critical); }

/* sortable headers */
.table th.is-sortable { cursor: pointer; }
.table th.is-sortable:hover { color: var(--ink); }
.table th .sort-caret { display: inline-block; margin-left: 4px; color: var(--ink-3); }
.table th.is-sorted .sort-caret { color: var(--ink); }

/* ── 16. Daybar — ops and support views only, never global chrome ───────── */

.daybar {
  display: flex;
  height: 28px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 8px 0;
  background: var(--bg-sunken);
}
.daybar__hour { flex: 1 1 0; position: relative; border-right: 1px solid var(--bg-raised); }
.daybar__hour:last-child { border-right: 0; }
.daybar__hour.is-asleep { background: var(--asleep); opacity: 0.35; }
.daybar__hour.is-awake { background: var(--awake); opacity: 0.35; }
.daybar__hour .daybar__load { position: absolute; left: 0; right: 0; bottom: 0; background: var(--ink-2); }
.daybar__ruler { display: flex; }
.daybar__tick {
  flex: 1 1 0;
  font-family: var(--font-condensed); font-weight: 600;
  font-size: 0.6875rem; letter-spacing: 0.01em;
  color: var(--ink-3);
  text-align: center;
}

/* ── 17. Chips ───────────────────────────────────────────────────────────── */

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: transparent;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--ink-2);
  white-space: nowrap;
}
a.chip:hover { text-decoration: none; border-color: var(--border-strong); color: var(--ink); }
.chip--good     { color: var(--good);     background: var(--good-bg);     border-color: transparent; }
.chip--warn     { color: var(--warn);     background: var(--warn-bg);     border-color: transparent; }
.chip--serious  { color: var(--serious);  background: var(--serious-bg);  border-color: transparent; }
.chip--critical { color: var(--critical); background: var(--critical-bg); border-color: transparent; }
.chip--accent   { color: var(--accent);   background: var(--accent-soft); border-color: transparent; }
.chip--script   { font-family: var(--font-condensed); font-weight: 600; letter-spacing: 0.01em; color: var(--ink-2); }
.chip--agent    { color: var(--agent); border-color: var(--agent); }
.chip.is-active { border-color: var(--ink); color: var(--ink); }
.chip__x { color: var(--ink-3); cursor: pointer; }

/* ── 18. Buttons ─────────────────────────────────────────────────────────── */

.btn {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--ink);
  font-size: 0.8125rem;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { background: var(--bg-sunken); color: var(--ink); text-decoration: none; }
.btn:active { background: var(--bg-sunken); }
.btn[disabled], .btn.is-disabled { opacity: 0.45; pointer-events: none; }

.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--ink-inverse); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--ink-inverse); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--bg-sunken); color: var(--ink); }
.btn--danger { border-color: var(--critical); color: var(--critical); background: transparent; }
.btn--danger:hover { background: var(--critical-bg); }
.btn--lg { height: 32px; padding: 0 14px; }
.btn--sm { height: 22px; padding: 0 8px; font-size: 0.75rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── 19. Inputs and fields ───────────────────────────────────────────────── */

.field { display: block; }
.field + .field { margin-top: 12px; }
.field__label {
  display: block;
  font-family: var(--font-condensed); font-weight: 600;
  font-size: 0.6875rem; line-height: 1rem; letter-spacing: 0.01em;
  color: var(--ink-2);
  margin-bottom: 3px;
}
.field__hint { font-size: 0.75rem; line-height: 1rem; color: var(--ink-3); margin-top: 3px; }
.field__error { font-size: 0.75rem; line-height: 1rem; color: var(--critical); margin-top: 3px; }

.input, .select, .textarea {
  appearance: none;
  width: 100%;
  height: 26px;
  padding: 0 8px;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 0.8125rem;
  line-height: 24px;
}
.input--lg, .select--lg { height: 32px; line-height: 30px; }
.textarea { height: auto; min-height: 76px; padding: 6px 8px; line-height: var(--lh-prose); font-size: 0.9375rem; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--critical); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--bg-sunken); color: var(--ink-3); }

.select {
  padding-right: 22px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: right 12px center, right 8px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

.input--num, .input--money { text-align: right; font-variant-numeric: tabular-nums lining-nums; }

.checkbox { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.checkbox input { width: 13px; height: 13px; accent-color: var(--accent); margin: 0; }

/* ── 20. Empty states ────────────────────────────────────────────────────── */
/* Empty is a typographic problem: hold the measure, state the coverage. */

.empty {
  padding: 20px 0 24px;
  border-top: 1px solid var(--border);
  max-width: 48ch;
}
.empty__title { color: var(--ink-2); font-weight: 500; }
.empty__body { font-size: 0.75rem; line-height: 1.125rem; color: var(--ink-3); margin-top: 3px; }
.empty--inline { border-top: 0; padding: 8px 0; }

/* ── 21. Charts chrome — the contract charts.js draws into ───────────────── */

.chart { --chart-h: 200px; padding: 8px 0 12px; min-width: 0; }
.chart__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 6px; }
.chart__title { font-family: var(--font-condensed); font-weight: 600; font-size: 0.6875rem; line-height: 1rem; letter-spacing: 0.01em; color: var(--ink-2); }
.chart__caption { font-size: 0.75rem; line-height: 1rem; color: var(--ink-3); }
.chart__plot { position: relative; min-width: 0; outline: none; }
.chart__plot > svg { display: block; width: 100%; height: var(--chart-h); overflow: visible; }
.chart__plot:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius); }
.chart.is-stale .chart__plot { opacity: 0.45; }

/* SVG text is styled here so charts follow the theme without JS */
.c-tick   { font-family: var(--font-ui); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; fill: var(--ink-3); }
.c-cat    { font-family: var(--font-ui); font-size: 11px; fill: var(--ink-2); }
.c-time   { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-3); }
.c-label  { font-family: var(--font-ui); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; fill: var(--ink-2); }
.c-inlabel{ font-family: var(--font-ui); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.c-empty  { font-family: var(--font-ui); font-size: 13px; font-style: italic; fill: var(--ink-3); }
.c-grid   { stroke: var(--border); stroke-width: 1; shape-rendering: crispEdges; }
.c-axis   { stroke: var(--border-strong); stroke-width: 1; shape-rendering: crispEdges; }
.c-cross  { stroke: var(--ink-3); stroke-width: 1; shape-rendering: crispEdges; }
.c-hit    { fill: transparent; cursor: default; }
.c-mark   { transition: opacity 120ms linear; }
.c-mark.is-dim { opacity: 0.35; }
.c-track  { fill: var(--bg-sunken); }

.chart__legend { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 8px; }
.legend-key { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; line-height: 1rem; color: var(--ink-2); }
.legend-key__swatch { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 1px; }
.legend-key__line { width: 12px; height: 2px; flex: 0 0 12px; border-radius: 1px; }

.chart-tip {
  position: fixed;
  z-index: 90;
  min-width: 92px;
  max-width: 260px;
  padding: 6px 8px;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 0.75rem;
  line-height: 1.125rem;
  pointer-events: none;
  box-shadow: none;
}
.chart-tip[hidden] { display: none; }
.chart-tip__head { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ink-2); padding-bottom: 3px; }
.chart-tip__row { display: flex; align-items: baseline; gap: 6px; }
.chart-tip__key { width: 10px; height: 2px; flex: 0 0 10px; border-radius: 1px; align-self: center; }
.chart-tip__val { font-variant-numeric: tabular-nums lining-nums; font-weight: 500; color: var(--ink); }
.chart-tip__name { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* sparkline sits inline in a stat row */
.sparkline { display: inline-block; width: 88px; height: 18px; vertical-align: middle; }
.sparkline > svg { width: 100%; height: 100%; display: block; }

/* ── 22. Specimen column and the paper sheet ─────────────────────────────── */
/* THE ONE RULE: the proof is always on paper, even in dark mode. */

.specimen {
  grid-area: specimen;
  display: grid;
  grid-template-columns: var(--w-tab) minmax(0, 1fr);
  background: var(--bg-page);
  border-left: 1px solid var(--border);
  min-height: 0;
  overflow: hidden;
}

.specimen__tab {
  appearance: none;
  width: var(--w-tab);
  border: 0;
  border-right: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--ink-2);
  cursor: pointer;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.specimen__tab:hover { background: var(--bg-sunken); color: var(--ink); }
.specimen__tabtext {
  writing-mode: vertical-rl;
  font-family: var(--font-condensed); font-weight: 600;
  font-size: 0.6875rem; letter-spacing: 0.01em;
  white-space: nowrap;
}
.specimen__tabicon { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 12px; }
.specimen-tab .specimen__body { display: none; }
.specimen-tab .specimen__tabicon { transform: scaleX(-1); }

.specimen__body { min-width: 0; overflow-y: auto; padding: 14px 16px 32px; }

.specimen__head { padding-bottom: 10px; }
.specimen__eyebrow {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-condensed); font-weight: 600;
  font-size: 0.6875rem; letter-spacing: 0.01em; color: var(--ink-2);
}
.specimen__eyebrow .mono { color: var(--ink); }
.specimen__title { font-size: 0.9375rem; line-height: 1.375rem; color: var(--ink); margin-top: 4px; }
.specimen__meta { font-size: 0.75rem; line-height: 1.125rem; color: var(--ink-2); }
.specimen__meta .is-owed { color: var(--serious); }

/* the sheet — the only elevated surface in the application */
.sheet {
  position: relative;
  background: var(--bg-paper);
  color: var(--ink-paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-paper);
  padding: 26px 22px;
  margin: 6px 0 8px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
}
.sheet a { color: var(--ink-paper); }

/* faint corner registration crops */
.sheet__crop { position: absolute; width: 12px; height: 12px; pointer-events: none; opacity: 0.42; }
.sheet__crop::before, .sheet__crop::after { content: ""; position: absolute; background: #8C8C86; }
.sheet__crop::before { width: 12px; height: 1px; }
.sheet__crop::after { width: 1px; height: 12px; }
.sheet__crop--tl { top: 8px; left: 8px; }
.sheet__crop--tr { top: 8px; right: 8px; }
.sheet__crop--bl { bottom: 8px; left: 8px; }
.sheet__crop--br { bottom: 8px; right: 8px; }
.sheet__crop--tl::before, .sheet__crop--tr::before { top: 0; }
.sheet__crop--bl::before, .sheet__crop--br::before { bottom: 0; }
.sheet__crop--tl::before, .sheet__crop--bl::before { left: 0; }
.sheet__crop--tr::before, .sheet__crop--br::before { right: 0; }
.sheet__crop--tl::after, .sheet__crop--tr::after { top: 0; }
.sheet__crop--bl::after, .sheet__crop--br::after { bottom: 0; }
.sheet__crop--tl::after, .sheet__crop--bl::after { left: 0; }
.sheet__crop--tr::after, .sheet__crop--br::after { right: 0; }

/* true print sizes, 18–44px, exempt from the 32px cap */
.sheet__line { text-align: center; font-size: 18px; line-height: 1.5; }
.sheet__line--xl { font-size: 30px; line-height: 1.32; }
.sheet__line--lg { font-size: 22px; line-height: 1.4; }
.sheet__line--sm { font-size: 15px; line-height: 1.5; color: #55554F; }
.sheet__rule { width: 42px; height: 1px; background: #B9B9AE; margin: 4px auto; }
.sheet__img { width: 100%; height: auto; border-radius: 1px; }

.specimen__caption {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 0.75rem; line-height: 1rem; color: var(--ink-3);
}
.specimen__caption .mono { color: var(--ink-2); }

.specimen__section { padding-top: 14px; margin-top: 12px; border-top: 1px solid var(--border); }

/* the type specimen — the specimen column is never empty */
.type-specimen__row { padding: 6px 0; }
.type-specimen__row + .type-specimen__row { border-top: 1px solid #EAEAE2; }
.type-specimen__name { font-family: var(--font-condensed); font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.01em; color: #6E6E66; }
.type-specimen__sample { font-size: 18px; line-height: 1.5; color: var(--ink-paper); }

/* ── 23. Drawer ──────────────────────────────────────────────────────────── */

.drawer {
  position: fixed;
  top: var(--h-topbar); right: 0; bottom: 0;
  width: min(680px, 62vw);
  background: var(--bg-raised);
  border-radius: var(--radius) 0 0 var(--radius);
  box-shadow: var(--shadow-overlay);
  z-index: 60;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.drawer[hidden] { display: none; }
.drawer__head { padding: 14px 18px 10px; border-bottom: 1px solid var(--border); }
.drawer__subject { font-size: 1.375rem; line-height: 1.75rem; font-weight: 400; }
.drawer__meta { font-size: 0.75rem; line-height: 1rem; color: var(--ink-2); margin-top: 4px; }
.drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 14px 18px 32px; }
.drawer__foot { border-top: 1px solid var(--border); padding: 10px 18px; display: flex; gap: 6px; }
.drawer__scrim { position: fixed; inset: 0; z-index: 55; background: transparent; }

/* ── 24. Prose and change lists ──────────────────────────────────────────── */

.prose { font-size: 0.9375rem; line-height: var(--lh-prose); color: var(--ink); max-width: 74ch; }
.prose p + p { margin-top: 0.75em; }
.prose h4 { font-size: 0.9375rem; font-weight: 600; margin-bottom: 4px; }

.change-list { counter-reset: chg; font-size: 0.9375rem; line-height: var(--lh-prose); }
.change-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  padding: 3px 0;
}
.change-list li::before {
  counter-increment: chg;
  content: counter(chg);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink-3);
  text-align: right;
}
/* agent-extracted, no human has checked it: 1px dotted underline in --agent */
.change-list li.is-unverified .change-list__text {
  text-decoration: underline dotted var(--agent) 1px;
  text-underline-offset: 3px;
}
.change-list__note { font-size: 0.75rem; color: var(--ink-3); padding-top: 6px; border-top: 1px solid var(--border); margin-top: 8px; }

.kv { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); gap: 2px 12px; }
.kv__k { color: var(--ink-2); }
.kv__v { color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }

/* ── 25. Login ───────────────────────────────────────────────────────────── */

.login {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  background: var(--bg-page);
}

.login__proof {
  position: relative;
  min-width: 0;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  border-right: 1px solid var(--border);
  overflow: hidden;
}
/* the one place the design plays at full strength: a hatch field behind the sheet */
.login__proof::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, var(--hatch) 0 1px, transparent 1px 9px);
  opacity: 0.10;
  pointer-events: none;
}
.login__proof > * { position: relative; }

.login__brand { display: flex; align-items: baseline; gap: 10px; }
.login__wordmark { font-size: 1.375rem; line-height: 1.75rem; font-weight: 600; color: var(--ink); }
.login__tagline { font-family: var(--font-condensed); font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.01em; color: var(--ink-3); }

.login .sheet { max-width: 520px; width: 100%; margin: 0; padding: 40px 36px; min-height: 300px; align-self: center; }

.login__crops-note {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  max-width: 520px; width: 100%; align-self: center;
  font-size: 0.75rem; color: var(--ink-3);
}

.login__pane {
  background: var(--bg-raised);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.login__form { width: 100%; max-width: 300px; }
.login__title { font-size: 1.125rem; line-height: 1.5rem; font-weight: 500; margin-bottom: 4px; }
.login__sub { font-size: 0.75rem; line-height: 1rem; color: var(--ink-3); margin-bottom: 20px; }
.login__error {
  border-left: 2px solid var(--critical);
  background: var(--critical-bg);
  color: var(--critical);
  padding: 6px 10px;
  font-size: 0.75rem;
  line-height: 1.125rem;
  border-radius: var(--radius-0);
  margin-bottom: 14px;
}
.login__submit { margin-top: 18px; }
.login__foot { margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.75rem; line-height: 1.125rem; color: var(--ink-3); }
.login__coverage { display: flex; align-items: center; gap: 6px; margin-top: 6px; }

/* ── 26. Responsive — usable at 1280px, degrades below ───────────────────── */

/* 216 + 640 + 420 = 1276. At the 1280px floor the three columns still fit. */
@media (max-width: 1279px) {
  .app { grid-template-columns: var(--w-rail) minmax(0, 1fr) var(--w-tab); }
  /* the specimen becomes an overlay panel rather than shrinking the ledger */
  .app:not(.specimen-tab) .specimen {
    position: fixed;
    top: var(--h-topbar); right: 0; bottom: 0;
    width: 420px;
    z-index: 50;
    border-left: 1px solid var(--border-strong);
  }
  .cols--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .app { --w-rail: 176px; }
  .topbar__brand { width: 176px; flex-basis: 176px; }
  .clock--customer { display: none; }
  .cols--2, .cols--3 { grid-template-columns: minmax(0, 1fr); }
  .login { grid-template-columns: minmax(0, 1fr); }
  .login__proof { padding: 32px 24px; border-right: 0; border-bottom: 1px solid var(--border); }
  .login__pane { padding: 32px 24px 48px; }
  .login__form { max-width: none; }
}

@media (max-width: 767px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--h-topbar) auto minmax(0, 1fr);
    grid-template-areas: "topbar" "rail" "ledger";
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }
  .rail { border-right: 0; border-bottom: 1px solid var(--border); }
  .rail__nav { display: flex; overflow-x: auto; padding: 4px; }
  .nav-item { border-left: 0; border-bottom: 2px solid transparent; grid-template-columns: auto auto; }
  .nav-item.is-current { border-bottom-color: var(--accent); }
  .rail__foot { display: none; }
  .app .specimen { position: static; display: none; }
  .topbar__brand { border-right: 0; }
  .topbar__search { display: none; }
  .ledger { overflow: visible; }
}

/* ── 27. Reduced motion, forced colors, print ────────────────────────────── */

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

@media (forced-colors: active) {
  .dot, .statestrip__seg, .waiting__seg, .coverage__fill, .horizon__fill { forced-color-adjust: none; }
  .btn, .input, .chip, .table td, .table th { border-color: CanvasText; }
  :focus-visible { outline: 2px solid Highlight; box-shadow: none; }
}

@media print {
  .app { display: block; height: auto; overflow: visible; }
  .topbar, .rail, .specimen__tab, .page-head__actions, .filters, .drawer, .chart-tip { display: none !important; }
  .ledger, .specimen { overflow: visible; border: 0; }
  .ledger__inner { padding: 0; }
  .table thead th { position: static; }
  .table tbody tr { break-inside: avoid; }
  .sheet { box-shadow: none; border: 1px solid #B9B9AE; }
  body { background: #fff; color: #000; }
}

/* ── 27. Conversation thread (flow-level; NOT the fixed .drawer overlay) ──── */

.msg {
  border-top: 1px solid var(--border);
  padding: 12px 0;
}
.msg:first-of-type { border-top: 0; }
.msg__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px 10px; margin-bottom: 6px;
}
.msg__subject { font-size: 0.8125rem; font-weight: 500; color: var(--ink); }
.msg__meta { font-size: 0.75rem; color: var(--ink-2); }
.msg__body {
  font-size: 0.8125rem; line-height: var(--lh-prose); color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 22em; overflow-y: auto;
}
.msg--outbound { padding-left: 12px; border-left: 2px solid var(--accent-soft); }
.msg--internal { opacity: 0.72; }

/* Multi-line inputs need their own height; .input is a 26px single-line control. */
.textarea { height: auto; min-height: 7em; padding: 6px 8px; line-height: var(--lh-prose); }

/* ── 28. People (user administration) ─────────────────────────────────────── */

.people-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 12px;
  align-items: end;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.people-form .btn { height: 26px; }
.role-grid { width: 100%; border-collapse: collapse; }
.role-grid th, .role-grid td {
  border-bottom: 1px solid var(--border);
  padding: 5px 8px; text-align: center; font-size: 0.75rem;
}
.role-grid th:first-child, .role-grid td:first-child { text-align: left; }
.role-grid thead th {
  font-family: var(--font-condensed); font-weight: 600;
  color: var(--ink-2); letter-spacing: 0.01em;
}
.role-grid .yes { color: var(--good); }
.role-grid .no  { color: var(--ink-3); }
.is-inactive td { opacity: 0.5; }

/* Date inputs in a filter row size to their content, not the row. */
.filters .input[type="date"] { width: auto; min-width: 9.5rem; flex: 0 0 auto; }
.filters { flex-wrap: wrap; }

/* ── 29. Reports panel ────────────────────────────────────────────────────── */

.report-index {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 12px 0 14px; margin-bottom: 2px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.report-index a {
  font-size: 0.75rem; line-height: 1; color: var(--ink-2); text-decoration: none;
  padding: 5px 9px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-raised); white-space: nowrap;
}
.report-index a:hover { color: var(--ink); border-color: var(--border-strong); }
.report-index a:focus-visible { box-shadow: var(--focus-ring); }

/* Each report is a stop on the page, so give it room and an anchor offset. */
.report { scroll-margin-top: calc(var(--h-topbar) + 12px); padding-top: 4px; }
.report + .report { margin-top: 26px; }