/* Shared theme tokens for all three pages.
 *
 * Two modes, both dark and both monospace, because the complaint that started
 * this was the hand-lettered display face and it was load-bearing in the old
 * cream look — you cannot keep it and change the register.
 *
 *   soc     a console. Slate/navy, cyan accent, tabular numbers, calm.
 *           Reads like the dashboards it sits next to all day.
 *   hacker  a terminal. Near-black, phosphor green, magenta, brackets.
 *
 * Structural CSS in the pages still refers to --cream/--paper/--ink/etc, so the
 * LEGACY ALIASES at the bottom of each block are what actually repaint the site.
 * New rules should use the semantic names (--bg/--panel/--text/…); the aliases
 * exist so this was a surgical change rather than a rewrite of three files.
 */

:root,
:root[data-mode="soc"] {
  --bg:#0b1220; --bg-2:#0e1729; --panel:#131c2e; --panel-2:#18233a;
  --text:#ccd8e8; --muted:#7d8fa8; --line:#26344d; --line-soft:#1c2942;
  --accent:#38bdf8;            /* cyan — BlueBot / defend */
  --danger:#f87171;            /* red  — RedBot / attack  */
  --warn:#fbbf24; --ok:#4ade80;
  --shadow:0 1px 0 rgba(255,255,255,.03), 0 6px 18px rgba(0,0,0,.45);
  --radius:6px;
  --mono:ui-monospace,'SF Mono','Cascadia Mono','JetBrains Mono',Menlo,Consolas,monospace;
  --sans:'Inter','Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --display:var(--mono);
  --texture:linear-gradient(var(--line-soft) 1px,transparent 1px),
            linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  --texture-size:44px 44px;
  --art-filter:none;
  --glow:none;

  /* legacy aliases — these are what the existing page CSS reads */
  --cream:var(--bg); --paper:var(--panel); --ink:var(--text);
  --ink-soft:var(--muted); --rule:var(--line);
  --red:var(--danger); --blue:var(--accent); --mustard:var(--warn); --green:var(--ok);
  --hand:var(--display); --body:var(--sans);
}

:root[data-mode="hacker"] {
  --bg:#050806; --bg-2:#070c08; --panel:#0a110c; --panel-2:#0d170f;
  --text:#b9f5c0; --muted:#5f8f6a; --line:#1c3322; --line-soft:#132419;
  --accent:#39ff14;            /* phosphor — BlueBot / defend */
  --danger:#ff2e88;            /* magenta  — RedBot / attack  */
  --warn:#ffb000; --ok:#39ff14;
  --shadow:0 0 0 1px rgba(57,255,20,.06), 0 6px 22px rgba(0,0,0,.7);
  --radius:3px;
  --mono:ui-monospace,'SF Mono','Cascadia Mono','JetBrains Mono',Menlo,Consolas,monospace;
  --sans:var(--mono);
  --display:var(--mono);
  /* scanlines rather than a grid */
  --texture:repeating-linear-gradient(0deg,rgba(57,255,20,.035) 0 1px,transparent 1px 3px);
  --texture-size:auto;
  --art-filter:saturate(.72) contrast(1.06) brightness(.86);
  --glow:0 0 6px rgba(57,255,20,.35);

  --cream:var(--bg); --paper:var(--panel); --ink:var(--text);
  --ink-soft:var(--muted); --rule:var(--line);
  --red:var(--danger); --blue:var(--accent); --mustard:var(--warn); --green:var(--ok);
  --hand:var(--display); --body:var(--sans);
}

/* ── things every page inherits ─────────────────────────────────────────── */
body {
  background:var(--bg) !important;
  background-image:var(--texture) !important;
  background-size:var(--texture-size) !important;
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
h1, h2, h3 { font-family:var(--display); letter-spacing:-.01em; }
:root[data-mode="hacker"] h1 { text-shadow:var(--glow); }

/* Numbers are data: always monospaced and tabular so columns line up. */
.v, .n, .score, .p, .sb .n, .kpi .v, td.num, th.num, .rank, .cnt, .d {
  font-family:var(--mono); font-variant-numeric:tabular-nums;
}

/* The marginalia art is cream-on-paper and will never be dark. Frame it
 * deliberately instead of pretending — a lit panel on a dark console. */
.art img, .ephead img {
  filter:var(--art-filter);
  border-color:var(--line) !important;
  background:var(--panel-2) !important;
}

/* Panels/cards: flatten the old hand-drawn offset shadow. */
article, .panel, .card, .kpi, .tile, .tlrow, .honesty, .ribbon, .outro,
.moved li, .clock li {
  box-shadow:var(--shadow) !important;
  border-width:1px !important;
  border-color:var(--line) !important;
  background:var(--panel) !important;
  border-radius:var(--radius) !important;
}
.outro, .ribbon { border-style:solid !important; }

/* Micro-labels read as console chrome. */
.k, .say b, .kpi .k, th {
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}

/* ── mode switch (top right, on every page) ─────────────────────────────── */
.modesw {
  position:fixed; top:10px; right:12px; z-index:40; display:flex;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel); box-shadow:var(--shadow); overflow:hidden;
}
.modesw button {
  font-family:var(--mono); font-size:.68rem; letter-spacing:.11em;
  text-transform:uppercase; cursor:pointer; padding:5px 10px;
  background:transparent; border:0; color:var(--muted);
}
.modesw button[aria-pressed="true"] { background:var(--accent); color:var(--bg); }
:root[data-mode="hacker"] .modesw button[aria-pressed="true"] { text-shadow:none; }
.modesw button + button { border-left:1px solid var(--line); }
@media (max-width:700px){ .modesw{ top:auto; bottom:10px; right:10px; } }

/* Two hardcoded browns predate the theme layer and survive var swaps. */
.b.head, dt.fut, .v.mid { color:var(--warn) !important; }

/* Chips/pills were hand-drawn ovals; square them off. */
.chip, .pill, .b, .kind, .cnt { border-radius:var(--radius) !important; }
.sbbar { border-radius:2px !important; border-width:1px !important; }
header { border-bottom:1px solid var(--line) !important; }
footer { border-top:1px solid var(--line) !important; }
nav.eps button, .filters button, .tile {
  border-width:1px !important; border-radius:var(--radius) !important;
}
nav.eps button[aria-current="true"], .tile[aria-pressed="true"],
.filters button[aria-pressed="true"] { background:var(--accent) !important; color:var(--bg) !important; }
.noart { border-color:var(--line) !important; }
#tip { background:var(--panel-2); color:var(--text); border:1px solid var(--line); }

/* Why the running order changed — never reorder silently. */
.ordernote {
  font-family:var(--mono); font-size:.72rem; color:var(--muted);
  border-left:2px solid var(--accent); padding:2px 0 2px 9px; margin:10px 0 0;
}
.ordernote b { color:var(--text); font-weight:600; }