/* Rule 50 AI — the shared page shell.
 *
 * WHY THIS FILE EXISTS. Until 2026-11-04 every page carried its own copy of
 * this CSS: two hand-written pages in site-src/ and five builders in tools/,
 * each with its own <style> block. They had drifted — the content column was
 * 760px on the home page, the disclaimer and the leaderboard, 860px on the
 * rulebook, the strategies page and the execution-errors page, and 960px on
 * episodes. Nobody chose that; it is what seven copies of one stylesheet turn
 * into. Changing a colour or a width meant seven edits, and missing one was
 * invisible until somebody opened that page.
 *
 * Injected into every page's <head> by tools/inject_nav.py, which is already
 * the one place that touches every built page. Page-specific rules stay in the
 * page; anything that should look the same everywhere belongs here.
 *
 * THE COLUMN WIDTH IS A VARIABLE, NOT A CONSTANT. `--measure` is the reading
 * column. A page that is mostly prose leaves it alone; a page that is mostly
 * table sets `--measure: var(--wide)` and gets the screen back. That is the
 * knob for "make it adaptive to larger viewports" — one declaration per page
 * rather than a hunt through seven files.
 */

:root {
  --bg: #0b0e11;
  --panel: #10151a;
  --line: #1f2830;
  /* The accent is the visitor's theme colour, with the brand green as the
     fallback for any page that loads before the theme script has run. */
  --green: var(--case-neon-text, #00ff41);
  --green-dim: var(--case-neon-dim, #0a8f2f);
  --ink: #d8e0e4;
  --muted: #8b979e;
  --amber: #e8a33d;
  --red: #f0554d;

  /* Layout. --measure is the page's column; --wide is the opt-in for pages
     whose content is tables or grids rather than sentences.

     1024px is the operator's number (2026-11-04). The old columns were 760-960, which
     left 340px dead on each side of a 1440px screen. --wide goes further for
     pages that are mostly table: the strategy roster is 58 rows of seven
     columns and was being asked to live in 860px.

     --prose is the separate limit that keeps this from backfiring. A wider
     page is better for tables and worse for paragraphs -- past roughly 75
     characters the eye loses the line on the way back. So the CONTAINER grows
     and running text does not. */
  --measure: 1024px;
  --wide: 1240px;
  --prose: 74ch;
  --gutter: 1.25rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  line-height: 1.6;
  background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 3px);
}

/* The container now owns its width AND its side gutter, so a page sets only
 * --measure and its own vertical spacing. box-sizing is border-box (the reset
 * above), so the padding is inside the width and a narrow screen cannot
 * overflow — which is why there is no separate mobile rule.
 *
 * `width` rather than `max-width` is deliberate and was previously a bug: it
 * beats a page's own `max-width` whichever stylesheet wins, which silently
 * narrowed episodes.html by 100px when the shell was first added. That is the
 * correct behaviour now that the pages have stopped declaring widths of their
 * own — but it is also why removing those declarations and switching to
 * `width` had to happen in the same change. */
.wrap {
  width: min(100%, var(--measure));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* A wide page is better for tables and worse for paragraphs. Running text in
 * the page's own flow keeps a readable line length while the container grows
 * around it; anything inside a panel, card, grid or table is laid out by its
 * own rules and is left alone. */
.wrap > p,
.wrap > ul,
.wrap > ol,
.wrap > p.note {
  max-width: var(--prose);
}

a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

header { padding: 2.5rem 0 1rem; text-align: center; }
h1 { color: var(--green); letter-spacing: .08em; font-size: 1.5rem; text-shadow: 0 0 14px rgba(0, 255, 65, .3); }
h2 { color: var(--green); font-size: 1.05rem; letter-spacing: .08em; margin: 1.8rem 0 .9rem; }
h2::before { content: "> "; color: var(--green-dim); }
.home { color: var(--muted); font-size: .85rem; }
.dim { color: var(--muted); font-size: .85rem; }
p.note { color: var(--muted); font-size: .82rem; margin: -.3rem 0 .4rem; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 1rem 1.1rem; }
.panel p { font-size: .9rem; }
.panel ul { margin: .6rem 0 0 1.1rem; font-size: .85rem; color: var(--muted); }

.badges { margin-top: .8rem; display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.badge { border: 1px solid var(--line); border-radius: 999px; padding: .1rem .7rem; font-size: .78rem; color: var(--muted); }
.badge.ok { border-color: var(--green-dim); color: var(--green); }
.badge.warn { border-color: #6b5020; color: var(--amber); }
.badge.dead { border-color: #5a2522; color: var(--red); }

.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: .7rem .9rem; }
.kpi b { display: block; font-size: 1.2rem; color: var(--ink); }
.kpi span { color: var(--muted); font-size: .75rem; }

.up { color: var(--green) !important; }
.down { color: var(--red) !important; }

.tbl { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; margin: .4rem 0; }
th, td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: normal; }
td.num, th.num { text-align: right; white-space: nowrap; }
td.ok { color: var(--green); }
td.warn { color: var(--amber); }
td.dead, td.bad { color: var(--red); }
td.lc { color: var(--muted); font-size: .8rem; }

footer {
  border-top: 1px solid var(--line);
  padding: 1.8rem 0 2.5rem;
  margin-top: 2rem;
  color: var(--muted);
  font-size: .78rem;
  text-align: center;
}