/* Shared stylesheet for the public status pages (status/*.html): the overview,
   the carbon tally, contributors, the prompt ledger, the roadmap, and the
   milestones timeline.
   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.

   The system is adapted from status.elevenmessenger.com's status.css (same
   Eleven model, same honesty rules: state is carried by words and glyphs,
   never color alone) with Woodstar's palette: the violet slot (--series /
   --link) is the hummingbird-gorget violet from the app (web/public/styles.css);
   the neutrals match the app's plane/surface pair. --ink-2 carries ALL small
   text (>=4.5:1 in both modes). */
:root {
  --plane: #f7f7f8; --surface: #ffffff;
  --ink: #16181c; --ink-2: #565d6b;
  --grid: #e5e7eb; --border: rgba(22,24,28,0.10);
  --series: #7c3aed;
  --good: #006300; --good-mark: #0ca30c;
  --warn: #7a4d00;
  --bad: #b23030; --bad-mark: #d03b3b;
  --link: #6d31d4;
  --redact-bg: #f3e9d8; --redact-ink: #7a5b16;
}
@media (prefers-color-scheme: dark) {
  :root {
    --plane: #0e1013; --surface: #16181d;
    --ink: #e7e9ea; --ink-2: #a5aeb8;
    --grid: #2f3336; --border: rgba(255,255,255,0.10);
    --series: #a78bfa;
    --good: #0ca30c; --good-mark: #0ca30c;
    --warn: #e0a33c;
    --bad: #e66767; --bad-mark: #e66767;
    --link: #a78bfa;
    --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; }
header h1 { font-size: 22px; font-weight: 650; }
header .brand { color: var(--ink-2); font-size: 14px; }

/* The status nav — three labelled groups (Overview, 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. The current page is a
   filled non-link chip, still marked aria-current + bolded so weight (not
   color alone) carries it. Overview is one chip, so its column is intrinsic
   and the two real groups share the rest. */
nav.status-nav { display: grid; grid-template-columns: auto 1.2fr 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 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 (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; }

/* Redaction marks (the prompt ledger; reused anywhere a redaction shows). */
mark.redaction {
  background: var(--redact-bg); color: var(--redact-ink);
  border-radius: 4px; padding: 0 4px; font-size: 0.85em; white-space: nowrap;
}

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