/* 🤖 Shared stylesheet for the public status pages (web/status/*.html): fleet,
   income & expenditure, tier economics, investing, security, carbon,
   contributors, the prompt ledger, the SSH access ledger, and the fleet
   hardening posture.
   ONE design system — the design tokens, the reset, and every component the
   pages share (the brand masthead, the grouped nav, tiles, the single-series
   bar list, notes, the "couldn't load" alert, footer). Each page <link>s this
   and keeps only a SMALL inline <style> for its own unique bits.

   Same-origin: uploaded from the same status bucket as the pages, so the
   privacy property still holds — a page pulls its styles from its own origin,
   never a third-party host. Published by deploy/status-publish.sh, which uploads
   this file BEFORE the html so a page is never served ahead of its stylesheet.

   Palette: the dataviz-validated role set (six-checks, light + dark) already in
   use across all seven pages — the violet slot (--series / --link) is the Eleven
   brand family; --ink-2 carries ALL small text (>=4.5:1 in both modes). The
   names are the ones every page already used; this file is simply their single
   home (the union of every role any page referenced). */
:root {
  --plane: #f9f9f7; --surface: #fcfcfb;
  --ink: #0b0b0b; --ink-2: #52514e;
  --grid: #e1e0d9; --border: rgba(11,11,11,0.10);
  --series: #4a3aa7;
  --good: #006300; --good-mark: #0ca30c;
  --warn: #7a4d00;
  --bad: #b23030; --bad-mark: #d03b3b;
  --link: #4a3aa7;
  --redact-bg: #f3e9d8; --redact-ink: #7a5b16;
}
@media (prefers-color-scheme: dark) {
  :root {
    --plane: #0d0d0d; --surface: #1a1a19;
    --ink: #ffffff; --ink-2: #c3c2b7;
    --grid: #2c2c2a; --border: rgba(255,255,255,0.10);
    --series: #9085e9;
    --good: #0ca30c; --good-mark: #0ca30c;
    --warn: #e0a33c;
    --bad: #e66767; --bad-mark: #e66767;
    --link: #9085e9;
    --redact-bg: #3a3220; --redact-ink: #e0c274;
  }
}

* { box-sizing: border-box; margin: 0; }
/* Reserve the scrollbar gutter always, so a page short enough not to scroll
   centers identically to one that does — the masthead/nav must not shift
   between pages (they're pinned to one width for the same reason below). */
html { scrollbar-gutter: stable; }
body {
  background: var(--plane); color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  padding: 24px 16px 48px;
}
.wrap { max-width: 760px; margin: 0 auto; }
a { color: var(--link); }
a:focus-visible { outline: 2px solid var(--series); outline-offset: 2px; border-radius: 4px; }

/* Masthead: the brand line + page title, identical on every page. Like the
   nav below, it pins to the default 760px wrap width and centers, so it sits
   at the exact same viewport position even on a page that widens its .wrap
   (prompts.html, 860px) — the top of every page must never shift. */
header { display: flex; align-items: center; gap: 14px; max-width: 760px; margin: 0 auto 6px; }
header img { width: 44px; height: 44px; border-radius: 10px; }
header h1 { font-size: 22px; font-weight: 650; }
header .brand { color: var(--ink-2); font-size: 14px; }

/* The status nav — one system, not a flat link list: the dashboards cluster
   into four labelled groups (Operations = the machines, Money, Ledgers = the
   public records, Plan), each a quiet chip cluster on a surface. The labels
   encode what a page IS, so item names inside them stay short ("Access", not
   "Access Ledger"). The current page is a filled non-link chip, still marked
   aria-current + bolded so weight (not color alone) carries it. A 2×2 grid,
   not a wrapped flex row: intrinsic-width pills left the two rows ragged, and
   Paul asked (2026-07-21) for both rows full width with equal-width pills —
   1fr tracks give exactly that (rows also share a height, so the four read as
   one block). */
nav.status-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 14px; max-width: 760px; margin: 10px auto 18px; }
.status-nav .group {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 3px;
}
.status-nav .group-label {
  font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); padding: 0 6px 0 9px;
}
.status-nav a, .status-nav [aria-current="page"] {
  display: inline-block; padding: 2px 9px; border-radius: 7px;
  color: var(--link); text-decoration: none;
}
.status-nav a:hover { background: var(--grid); text-decoration: underline; }
.status-nav [aria-current="page"] { background: var(--series); color: var(--surface); font-weight: 650; }
/* On narrow screens the four groups would fill the first viewport, so the
   nav collapses behind a Menu disclosure (status-nav.js wires the toggle and
   keeps aria-expanded true to the state). Desktop never shows the button. */
.status-nav .menu-toggle {
  display: none; font: inherit; font-weight: 650; cursor: pointer;
  align-items: center; gap: 8px; color: var(--link);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 6px 12px;
}
.status-nav .menu-toggle:hover { background: var(--grid); }
.status-nav .menu-toggle:focus-visible { outline: 2px solid var(--series); outline-offset: 2px; }
.status-nav .menu-toggle .glyph { color: var(--ink-2); }
@media (max-width: 640px) {
  /* One column: the open groups stack full-width; justify-self keeps the
     Menu button intrinsic-width (a grid cell would otherwise stretch it). */
  nav.status-nav { grid-template-columns: 1fr; }
  .status-nav .menu-toggle { display: inline-flex; justify-self: start; }
  nav.status-nav:not(.open) .group { display: none; }
}

.lede { color: var(--ink-2); margin: 6px 0 2px; }
.asof { font-weight: 600; margin: 10px 0 24px; }
.asof .stale { color: var(--bad); font-weight: 600; }

/* Section rhythm + heading (pages built from <section> blocks). */
section { margin-bottom: 28px; }
section h2 { font-size: 15px; font-weight: 650; margin: 0 0 10px; }

/* Muted body notes and the one-line design explainer under a section heading. */
.note { color: var(--ink-2); font-size: 14px; }
.explain { margin: -4px 0 12px; }

/* Stat tiles. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 28px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.tile .label { font-size: 13px; color: var(--ink-2); }
.tile .value { font-size: 30px; font-weight: 600; margin-top: 2px; }
.tile .sub { color: var(--ink-2); font-size: 14px; margin-top: 6px; }

/* Single-series horizontal bar list (fleet versions, book tiers, the carbon
   ledger, contributors): every row is real text — its own table view — and the
   bar is aria-hidden decoration. Thin 12px mark, 4px rounded data-end, square at
   the baseline. Per-page first/last column widths override .bars li inline. */
.bars { list-style: none; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.bars li { display: grid; grid-template-columns: minmax(90px, 160px) 1fr 3.5em; align-items: center; gap: 12px; padding: 10px 16px; }
.bars li + li { border-top: 1px solid var(--grid); }
.bars .track { height: 12px; }
.bars .bar { height: 12px; min-width: 2px; background: var(--series); border-radius: 0 4px 4px 0; display: block; }
.bars .count { font-size: 14px; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.bars .empty { display: block; color: var(--ink-2); }

/* The inline "couldn't load the feed" alert (retries every minute). */
#error { display: none; background: var(--surface); border: 1px solid var(--bad-mark); border-radius: 12px; padding: 14px 16px; margin-bottom: 24px; }
#error.show { display: block; }

footer { margin-top: 36px; color: var(--ink-2); font-size: 14px; }
footer p { margin-top: 6px; }