/* 🤖 Shared stylesheet for the public status pages (web/status/*.html):
   the overview, the carbon tally, contributors, the prompt ledger, the
   roadmap and milestones.
   ONE design system — the design tokens, the reset, and every component the
   pages share (the 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 shape is inherited from the eleven status pages; the palette is
   keymail's own (web/static/style.css — indigo accent, warm paper plane),
   expressed with light-dark() like the app. --ink-2 carries ALL small text
   and holds ≥4.5:1 in both modes. Served same-origin from the embedded FS by
   status.go — a page pulls styles only from its own host, never a third
   party. */
:root {
  color-scheme: light dark;
  --plane: light-dark(#f4f4f2, #14161a);
  --surface: light-dark(#ffffff, #1c1f25);
  --ink: light-dark(#1b1d21, #e8e9eb);
  --ink-2: light-dark(#565b63, #9aa1ab);
  --grid: light-dark(#e4e4e0, #2c313a);
  --border: light-dark(rgba(27, 29, 33, 0.12), rgba(255, 255, 255, 0.10));
  --series: light-dark(#3f51b5, #8c9eff);
  --link: light-dark(#3f51b5, #8c9eff);
  --good: light-dark(#1a7f37, #4ade80);
  --warn: light-dark(#8a5200, #fbbf24);
  --bad: light-dark(#b91c1c, #f87171);
  --bad-mark: light-dark(#b91c1c, #f87171);
  --redact-bg: light-dark(#f3e9d8, #3a3220);
  --redact-ink: light-dark(#7a5b16, #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. */
html { scrollbar-gutter: stable; }
body {
  background: var(--plane); color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, 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 — the brand
   links back to the overview, so the nav below stays two clean groups. Pinned
   to the default 760px wrap width and centered, so it sits at the exact same
   viewport position even on a page that widens its .wrap (prompts.html). */
header { display: flex; align-items: center; gap: 14px; max-width: 760px; margin: 0 auto 6px; }
header .mark {
  width: 44px; height: 44px; border-radius: 10px; flex: none;
  background: var(--series); color: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 650; text-decoration: none;
}
header h1 { font-size: 22px; font-weight: 650; }
header .brand { color: var(--ink-2); font-size: 14px; }
header .brand a { color: inherit; text-decoration: none; }
header .brand a:hover { text-decoration: underline; }

/* The status nav — two labelled groups (Ledgers = the public records, Plan),
   each a quiet chip cluster on a surface. The current page is a filled
   non-link chip, still marked aria-current + bolded so weight (not color
   alone) carries it. Two 1fr tracks keep the groups full width with
   equal-width pills. */
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; }
@media (max-width: 640px) {
  nav.status-nav { grid-template-columns: 1fr; }
}

.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; }

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