:root {
  color-scheme: dark;

  /* -- ink & paper -- */
  --ink-950: #070a11;
  --ink-900: #0e131e;
  --ink-850: #131a28;
  --card3: #18202f;
  --hairline: rgba(180, 196, 222, 0.10);
  --hairline-2: rgba(180, 196, 222, 0.17);
  --paper: #eef2f9;
  --muted: #9fa9bd;

  /* -- the one accent: institutional silver -- */
  --silver: #c3c9d4;
  --silver-bright: #e7ebf1;
  --silver-dim: #5b6272;
  --silver-glow: rgba(195, 201, 212, 0.14);

  /* -- status colors: green / amber / red, matching the investor dashboard's
     own --good/--warn/--bad exactly, and the SEVERITIES vocabulary
     (mailroom/command_center.py) they're driven from -- never used for
     general UI accent, only to encode an actual status value. -- */
  --green: #46c48c;
  --amber: #e3a75a;
  --red: #ef5c63;
  --green-tint: rgba(70, 196, 140, 0.14);
  --green-line: rgba(70, 196, 140, 0.35);
  --amber-tint: rgba(227, 167, 90, 0.14);
  --amber-line: rgba(227, 167, 90, 0.35);
  --red-tint: rgba(239, 92, 99, 0.14);
  --red-line: rgba(239, 92, 99, 0.35);

  /* -- legacy aliases still referenced by this file -- */
  --bg: var(--ink-950);
  --panel: var(--ink-900);
  --text: var(--paper);
  --accent: var(--silver);

  --shadow: 0 1px 1px rgba(0, 0, 0, 0.35), 0 10px 30px -16px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 24px 60px -24px rgba(0, 0, 0, 0.85);

  /* -- type -- */
  --font-sans: "Inter", "SF Pro Display", "Segoe UI Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

a { color: var(--silver); }
a:hover { color: var(--silver-bright); }

body {
  margin: 0;
  background: var(--ink-950);
  color: var(--paper);
  font: 15px/1.5 var(--font-sans);
  position: relative;
}

/* Signature treatment: the same soft top-corner glows as the investor
   dashboard, so moving from this page into a dashboard tile doesn't feel
   like switching products. Scoped to body.page-branded so embedded/raw
   dashboard frames and the unavailable state stay visually quiet. */
body.page-branded::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 78% -8%, #111a2c 0%, rgba(17, 26, 44, 0) 60%),
    radial-gradient(900px 500px at 8% 0%, #0c1524 0%, rgba(12, 21, 36, 0) 55%);
}
body.page-branded > * { position: relative; z-index: 1; }

::selection { background: var(--silver-glow); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--silver);
  outline-offset: 2px;
}

/* -- brand lockup (shared between topbar and sign-in hero) -- */
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--paper);
}
/* The Recordstone mark is a raster stone tile with a carved R, not a flat
   vector glyph, so it needs slightly more room than the 20px the old SVG icon
   used or the texture turns to mush. Served from a 64px source (8.7 KB) rather
   than the 512px master (578 KB) -- half a megabyte to draw something this size
   would be absurd. border-radius matches the tile's own corners. */
.brand-mark {
  display: block;
  height: 24px;
  width: 24px;
  border-radius: 3px;
}
.wordmark-suffix {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid var(--hairline-2);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver);
  margin: 0 0 4px;
}
.eyebrow-section { margin: 28px 24px 8px; }

/* -- topbar -- */
.topbar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: linear-gradient(180deg, rgba(14, 19, 30, 0.92), rgba(14, 19, 30, 0.72));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 12px 30px -22px rgba(0, 0, 0, 0.9);
}
.topbar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--silver) 25%, var(--silver) 60%, transparent);
}
.user, .meta { color: var(--muted); font-size: 13px; }
.user a { color: var(--silver); text-decoration: none; }
.user a:hover { text-decoration: underline; }
.user-chip { color: var(--paper); }
.role-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border: 1px solid var(--silver-dim);
  border-radius: 999px;
  color: var(--silver);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* -- auth shell (sign-in + unavailable) -- */
main.auth-shell {
  max-width: 480px;
  margin: 80px auto;
  padding: 40px 36px;
  background: linear-gradient(160deg, var(--ink-850), var(--ink-900));
  border: 1px solid var(--hairline);
  border-radius: 14px;
  border-top: 2px solid var(--silver);
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.auth-shell-brand .brand-lockup-hero {
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
}
.tag { color: var(--muted); margin: 6px 0 28px; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 28px 0 14px;
}
.auth-divider::before, .auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

.btn {
  display: inline-block;
  margin-top: 16px;
  padding: 11px 26px;
  border-radius: 8px;
  background: var(--ink-850);
  border: 1px solid var(--hairline-2);
  color: var(--paper);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.btn-primary {
  background: var(--silver);
  border-color: var(--silver);
  color: var(--ink-950);
}
.btn-primary:hover { background: var(--silver-bright); }
.btn-quiet {
  background: transparent;
  color: var(--muted);
  font-weight: 400;
  font-size: 13px;
  padding: 6px 14px;
}
.btn-quiet:hover { color: var(--paper); border-color: var(--muted); }

.warn { color: var(--amber); }
.error { color: var(--red); }
.good { color: var(--green); }
.bad { color: var(--red); }

/* -- executive summary hero (home) -- */
.summary-hero {
  margin: 24px 24px 0;
  padding: 26px 28px;
  background: linear-gradient(160deg, var(--ink-850), var(--ink-900));
  border: 1px solid var(--hairline);
  border-radius: 14px;
  border-left: 3px solid var(--muted);
  box-shadow: var(--shadow);
}
.summary-hero-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.state-live { border-left-color: var(--green); }
.state-demo { border-left-color: var(--amber); }
.state-stale { border-left-color: var(--amber); }
.state-unknown_provenance { border-left-color: var(--amber); }
.state-unavailable { border-left-color: var(--red); }

.badge {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ink-850);
  border: 1px solid var(--hairline-2);
  color: var(--muted);
  vertical-align: middle;
}
.badge.good { background: var(--green-tint); border-color: var(--green-line); color: var(--green); }
.badge.warn { background: var(--amber-tint); border-color: var(--amber-line); color: var(--amber); }
.badge.bad { background: var(--red-tint); border-color: var(--red-line); color: var(--red); }

/* The figure and its scope caveat share a baseline so the caveat reads as part
   of the number, not as a footnote someone can skip. Wraps under it on narrow
   viewports rather than shrinking the figure. */
.nav-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin: 10px 0 4px;
}
.nav-figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 40px;
  font-weight: 600;
  color: var(--paper);
}
.nav-caveat {
  color: var(--amber);
  font-size: 0.85rem;
  line-height: 1.4;
}

/* Visible to screen readers only. The freshness dot is aria-hidden because its
   colour alone carries no meaning to a reader; this is where the state is said. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.data-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.data-row > div {
  padding: 0 16px;
  border-left: 1px solid var(--hairline);
}
.data-row > div:first-child { border-left: none; padding-left: 0; }
.data-row dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.data-row dd {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 600;
}

/* -- legacy summary-card / freshness-strip (dashboard_frame, unavailable) -- */
.summary-card, .freshness-strip {
  margin: 20px 24px;
  padding: 18px 22px;
  background: linear-gradient(160deg, var(--ink-850), var(--ink-900));
  border: 1px solid var(--hairline);
  border-radius: 10px;
  border-left: 4px solid var(--muted);
  box-shadow: var(--shadow);
}
dl { display: grid; grid-template-columns: 160px 1fr; gap: 6px 12px; margin-top: 12px; }
dt { color: var(--muted); }
dd { margin: 0; }

/* -- dashboard tabs --
   Was a grid of ledger cards; now a single tab strip so the dashboards read as
   navigation rather than as nine equal destinations. The freshness dot carries
   over unchanged -- it is the only per-dashboard staleness signal on this page,
   and dropping it would make the sniff in core.home() pointless.

   All nine tabs fit the page width. They stay content-sized and never shrink
   (flex 0 0 auto); what gives at narrower widths is type size and padding, in
   two steps, so the LABELS STAY WHOLE. Letting flex shrink them instead does
   fit the row, but at 1180px it truncated all nine to unreadable stubs
   ("Command C...", "Sub T..."), which is not fitting, it is hiding. Below
   1040px there is genuinely not enough room for nine readable labels, so the
   strip stops pretending and scrolls. */
.dashboard-tabs {
  display: flex;
  gap: 2px;
  margin: 0 24px;
  border-bottom: 1px solid var(--hairline);
}
.dash-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  min-width: 0;
  padding: 11px 13px;
  color: var(--silver);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.dash-tab-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 1400px) {
  .dashboard-tabs { gap: 1px; }
  .dash-tab { font-size: 0.79rem; padding: 10px 9px; gap: 6px; }
}
@media (max-width: 1180px) {
  .dashboard-tabs { margin: 0 14px; }
  .dash-tab { font-size: 0.73rem; padding: 9px 6px; gap: 5px; letter-spacing: 0; }
}
@media (max-width: 1040px) {
  /* Nine readable labels no longer fit. Scroll rather than truncate. */
  .dashboard-tabs { overflow-x: auto; scrollbar-width: thin; }
  .dash-tab { font-size: 0.82rem; padding: 10px 12px; }
}
.dash-tab:hover,
.dash-tab:focus-visible {
  color: var(--silver-bright);
  background: var(--ink-850);
  border-bottom-color: var(--hairline-2);
}
.dash-tab[aria-current] {
  color: var(--silver-bright);
  background: var(--ink-850);
  border-bottom-color: var(--silver);
}
.tile-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}
.tile-dot.good { background: var(--green); box-shadow: 0 0 8px var(--green-line); }
.tile-dot.warn { background: var(--amber); box-shadow: 0 0 8px var(--amber-line); }
.tile-dot.bad { background: var(--red); box-shadow: 0 0 8px var(--red-line); }

.embed-frame {
  width: 100%;
  height: calc(100vh - 130px);
  border: 0;
  background: var(--paper);
}

form label { display: block; margin-top: 12px; color: var(--muted); }
form select, form button {
  width: 100%;
  margin-top: 6px;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--hairline-2);
  background: var(--ink-950);
  color: var(--paper);
  font: inherit;
}
form button {
  background: var(--silver);
  color: var(--ink-950);
  border: none;
  margin-top: 16px;
  font-weight: 600;
  cursor: pointer;
}
form button:hover { background: var(--silver-bright); }

/* ---------------------------------------------------------------------------
   Asset register on the landing page.

   No JavaScript anywhere in this block: filtering is a GET form, sorting and
   paging are plain links. That is not an aesthetic choice -- the app's CSP
   requires a per-request nonce on every script, and a fully server-rendered
   table needs no exception to it. It also means sort/filter state lives in a
   shareable URL.
   --------------------------------------------------------------------------- */

/* The panel treatment .summary-hero already uses, without its status-coloured
   left border. This file had no general-purpose card class before -- every
   panel carried its own copy of these six lines -- so the register sections
   share one instead of adding a seventh. */
.card {
  padding: 22px 24px;
  background: linear-gradient(160deg, var(--ink-850), var(--ink-900));
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

/* This page has no wrapping container: .summary-hero sets its own 24px side
   margins and every sibling must match it or sit flush to the viewport edge. */
.rs-clock,
.kpi-row,
.register-layout { margin: 18px 24px 0; }
.register-layout { margin-bottom: 32px; }

.rs-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}
.rs-card-title {
  margin: 2px 0 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.rs-card-title .badge { margin-left: 10px; vertical-align: 2px; }
.rs-clock-note { max-width: 46ch; text-align: right; margin: 0; }

/* --- statutory clock ---------------------------------------------------- */

.clock-plot {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 132px;
  margin: 20px 0 0;
  padding: 0 2px;
  border-bottom: 1px solid var(--hairline-2);
}
.clock-col { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; }
/* The "today" divider is the whole point of the chart: left of it is a window
   that has already closed. Drawn on the bucket that starts at month 0. */
.clock-col.today { box-shadow: inset 1px 0 0 var(--silver-dim); }
.clock-bar {
  display: block;
  width: 100%;
  min-height: 1px;
  border-radius: 2px 2px 0 0;
  background: var(--silver-dim);
}
.clock-col.past .clock-bar { background: var(--red); }
.clock-col.soon .clock-bar { background: var(--amber); }
.clock-col.beyond .clock-bar { background: #5b86c9; }

.clock-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font: 500 0.7rem/1 var(--font-mono);
  color: var(--muted);
  letter-spacing: 0.06em;
}
.clock-axis .axis-now { color: var(--silver-bright); }

.clock-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--muted);
}
.clock-legend li { display: flex; align-items: center; gap: 7px; }
.clock-legend strong { color: var(--paper); font-family: var(--font-mono); }
.swatch { width: 9px; height: 9px; border-radius: 2px; background: var(--silver-dim); }
.swatch.past { background: var(--red); }
.swatch.soon { background: var(--amber); }
.swatch.beyond { background: #5b86c9; }

/* --- KPI cards ---------------------------------------------------------- */

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.kpi { padding: 18px 20px; }
.kpi-figure {
  margin: 8px 0 4px;
  font: 600 1.72rem/1.1 var(--font-mono);
  letter-spacing: -0.01em;
  color: var(--paper);
}
.kpi-figure.good { color: var(--green); }
.kpi-figure.bad { color: var(--red); }
.kpi .meta { margin: 0; }

/* --- register table ----------------------------------------------------- */

.register-layout {
  display: grid;
  /* 0 as the min, not `auto`: a grid item's default min-width is its content,
     so an `auto` min lets the 9-column table dictate the track width and push
     the aside off the page instead of scrolling inside .table-scroll. */
  grid-template-columns: minmax(0, 3.6fr) minmax(230px, 1fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 1100px) {
  .register-layout { grid-template-columns: minmax(0, 1fr); }
  .rs-clock-note { text-align: left; }
}

/* Undoes the global `form label{display:block}` / `form select{width:100%}`
   rules further up this file, which are written for the stacked dev-login
   form and would otherwise stack this filter bar one control per line. */
.register-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
}
.register-filters select,
.register-filters button,
.register-filters .btn { width: auto; margin-top: 0; }
.register-filters select { padding: 8px 10px; }
.filter-search {
  flex: 1 1 260px;
  min-width: 200px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--hairline-2);
  background: var(--ink-950);
  color: var(--paper);
  font: inherit;
}
.filter-search::placeholder { color: var(--silver-dim); }
.register-count {
  margin-left: auto;
  font: 500 0.78rem/1 var(--font-mono);
  color: var(--muted);
  letter-spacing: 0.04em;
}

.table-scroll {
  margin-top: 14px;
  overflow-x: auto;
  border-top: 1px solid var(--hairline);
}
.register-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.register-table th {
  position: sticky;
  top: 0;
  background: var(--ink-900);
  text-align: left;
  padding: 10px 10px;
  font: 600 0.7rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--hairline-2);
}
.register-table th a { color: inherit; text-decoration: none; }
.register-table th a:hover { color: var(--silver-bright); }
.sort-caret { margin-left: 6px; opacity: 0.45; font-size: 0.62rem; }
.register-table th[aria-sort] { color: var(--silver-bright); }
.register-table th[aria-sort] .sort-caret { opacity: 1; }
.register-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--hairline);
  color: var(--silver);
  white-space: nowrap;
}
/* Parcel identifiers run to 30+ characters and are copied RAW from the county
   (never normalised -- see CLAUDE.md), so this is the one column allowed to
   truncate rather than widen the whole table. The full value stays selectable
   and is present in the CSV export. */
.register-table td:nth-child(2) {
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.register-table tbody tr:hover td { background: rgba(180, 196, 222, 0.045); }
/* Money and counts render tabular, never in the body font -- the Command
   Center design convention every financial figure in this repo follows. */
.register-table .col-money,
.register-table .col-int,
.register-table td.col-money,
.register-table td.col-int { text-align: right; font-family: var(--font-mono); }
.register-table td.col-money { color: var(--paper); }
.empty-row { text-align: center; padding: 28px 12px; color: var(--muted); }

.pager {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.pager .meta { margin: 0; }

/* --- needs attention ---------------------------------------------------- */

.attention-list { list-style: none; margin: 14px 0 0; padding: 0; }
.attention-list li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.86rem;
  color: var(--silver);
}
.attention-list li:last-child { border-bottom: 0; }
.attention-count {
  flex: 0 0 auto;
  min-width: 2.6ch;
  text-align: right;
  font: 600 1.15rem/1 var(--font-mono);
  color: var(--paper);
}
.attention-count.warn { color: var(--amber); }
.attention-count.bad { color: var(--red); }
.attention-list em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 0.78rem;
  color: var(--muted);
}
.attention-foot { margin-top: 16px; font-size: 0.78rem; line-height: 1.5; }