/* AUTOMATON — the public dashboard.
   A deliberately committed dark palette: this is a journal of deaths, and the
   whole page is read as one long ledger. Colours are painted explicitly rather
   than inherited, so the page looks the same wherever it is embedded. */

:root {
  color-scheme: dark;

  --ink:        #e8e6e1;
  --ink-2:      #a8a49c;
  --ink-3:      #6e6a63;
  --bg:         #07080a;
  --bg-2:       #0d0f12;
  --bg-3:       #14171c;
  --line:       #1e2229;
  --line-2:     #2a2f38;

  --stable:     #4ade80;
  --tight:      #fbbf24;
  --critical:   #f87171;
  --dead:       #4b5563;
  --accent:     #7dd3fc;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* A faint grid, so the page reads as a machine readout rather than a brochure. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 64px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 64px 100%;
  opacity: .16;
  z-index: 0;
}

.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; position: relative; z-index: 1; }

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

/* ── top bar ─────────────────────────────────────────────────── */
.bar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; }
.mark {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 14px/1 var(--mono); letter-spacing: .14em; color: var(--ink);
}
.mark:hover { text-decoration: none; }
.mark-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--stable); box-shadow: 0 0 0 0 color-mix(in srgb, var(--stable) 60%, transparent);
  animation: beat 2.4s ease-out infinite;
}
@keyframes beat {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--stable) 55%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.bar-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip {
  font: 500 11px/1 var(--mono); letter-spacing: .06em;
  padding: 6px 9px; border: 1px solid var(--line-2); border-radius: 5px;
  color: var(--ink-2); background: var(--bg-2); white-space: nowrap;
}
.chip b { color: var(--ink); font-weight: 600; }
.chip-live b { color: var(--stable); }
.chip-link { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--line-2)); }
.chip-paper { color: var(--tight); border-color: color-mix(in srgb, var(--tight) 40%, var(--line-2)); }

/* ── hero ────────────────────────────────────────────────────── */
.hero { padding: 88px 0 56px; max-width: 780px; }
.kicker {
  margin: 0 0 20px; font: 500 11px/1 var(--mono);
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
}
h1 {
  margin: 0 0 26px;
  font: 600 clamp(30px, 5.2vw, 52px)/1.1 var(--sans);
  letter-spacing: -.025em;
  text-wrap: balance;
}
.lede { margin: 0 0 18px; font-size: 16.5px; color: var(--ink-2); max-width: 66ch; }
.lede b { color: var(--ink); font-weight: 600; }

.dying {
  display: flex; align-items: center; gap: 10px;
  margin: 32px 0 0; padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--critical) 26%, var(--line));
  border-radius: 7px; background: color-mix(in srgb, var(--critical) 5%, var(--bg-2));
  font: 13px/1.5 var(--mono); color: var(--ink);
}
.dying-dot {
  flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--critical); animation: fade 1.6s ease-in-out infinite;
}
@keyframes fade { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.cta { display: flex; gap: 10px; margin-top: 30px; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 11px 18px; border-radius: 6px;
  font: 500 13.5px/1 var(--sans); border: 1px solid var(--ink);
  background: var(--ink); color: var(--bg);
}
.btn:hover { text-decoration: none; opacity: .88; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink-3); }

/* ── stats ───────────────────────────────────────────────────── */
/* Separators are drawn as borders on the cells rather than as a 1px gap over a
   coloured backdrop. Eight stats rarely divide evenly into the number of
   columns that fit, and with the gap trick the leftover cells of the last row
   showed as floating grey blocks. */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px;
  overflow: hidden;
}
.stat {
  padding: 18px 16px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat b {
  display: block; font: 600 24px/1.1 var(--mono); letter-spacing: -.02em;
  color: var(--ink); margin-bottom: 6px;
}
.stat span { font-size: 11.5px; color: var(--ink-3); letter-spacing: .04em; }
.stat-note { margin: 14px 0 0; font: 12.5px/1.6 var(--mono); color: var(--ink-3); }

/* The one thing a page like this owes its reader. While the seller reports its
   own outcome, the revenue figure above is a claim rather than a receipt, and
   saying so plainly is the whole difference between this and a screenshot of a
   number somebody wants you to believe. */
.disclosure {
  margin: 16px 0 0; padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--tight) 30%, var(--line));
  border-radius: 7px; background: color-mix(in srgb, var(--tight) 5%, var(--bg-2));
  font: 12.5px/1.65 var(--mono); color: var(--ink-2);
}
.disclosure b { color: var(--tight); font-weight: 600; }

/* ── blocks ──────────────────────────────────────────────────── */
.block { padding: 76px 0 0; }
.block-head { max-width: 640px; margin-bottom: 26px; }
.block-head h2 {
  margin: 0 0 10px; font: 600 22px/1.25 var(--sans); letter-spacing: -.015em;
}
.block-head p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.block-head em { color: var(--ink); font-style: normal; font-weight: 600; }
.block-head b { color: var(--ink); }

/* ── agent cards ─────────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; }
.empty { color: var(--ink-3); font: 13px/1 var(--mono); padding: 28px 0; }

.card {
  border: 1px solid var(--line); border-radius: 9px; background: var(--bg-2);
  padding: 15px; display: flex; flex-direction: column; gap: 12px;
}
.card.is-dead { opacity: .48; }
.card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.card-id { font: 600 13.5px/1 var(--mono); letter-spacing: .02em; }
.card-gen { font: 11px/1 var(--mono); color: var(--ink-3); }
.state {
  font: 600 10px/1 var(--mono); letter-spacing: .1em;
  padding: 4px 7px; border-radius: 4px; border: 1px solid currentColor;
}
.state-STABLE   { color: var(--stable); }
.state-TIGHT    { color: var(--tight); }
.state-CRITICAL { color: var(--critical); }
.state-DEAD, .state-PENDING { color: var(--dead); }

.runway { display: flex; flex-direction: column; gap: 6px; }
.runway-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 11px/1 var(--mono); color: var(--ink-3);
}
.runway-h { font: 600 15px/1 var(--mono); color: var(--ink); }
.track { height: 4px; border-radius: 2px; background: var(--bg-3); overflow: hidden; }
.fill { height: 100%; border-radius: 2px; transition: width .5s ease; }
.fill-STABLE { background: var(--stable); }
.fill-TIGHT { background: var(--tight); }
.fill-CRITICAL { background: var(--critical); }
.fill-DEAD, .fill-PENDING { background: var(--dead); }

.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag {
  font: 10.5px/1 var(--mono); padding: 4px 6px; border-radius: 4px;
  background: var(--bg-3); color: var(--ink-2); border: 1px solid var(--line);
}
.tag-mut { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }

.card-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font: 11.5px/1.4 var(--mono); }
.card-rows div { display: flex; justify-content: space-between; gap: 6px; }
.card-rows .k { color: var(--ink-3); }
.card-rows .v { color: var(--ink); }
.card-rows .zero { color: var(--critical); }

/* ── journal ─────────────────────────────────────────────────── */
.journal {
  border: 1px solid var(--line); border-radius: 9px; background: var(--bg-2);
  max-height: 520px; overflow: auto;
}
.obit {
  display: grid; grid-template-columns: 96px 1fr auto;
  gap: 14px; align-items: baseline;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  font: 12px/1.5 var(--mono);
}
.obit:last-child { border-bottom: 0; }
.obit-id { color: var(--ink); font-weight: 600; }
.obit-body { color: var(--ink-2); overflow-wrap: anywhere; }
.obit-body b { color: var(--ink); font-weight: 600; }
.obit-none { color: var(--critical); }
.obit-earned { color: var(--stable); }
.obit-life { color: var(--ink-3); white-space: nowrap; }

/* ── roles ───────────────────────────────────────────────────── */
.roles {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 9px; overflow: hidden;
}
.role {
  display: grid; grid-template-columns: 130px 1fr 1.25fr; gap: 16px;
  background: var(--bg-2); padding: 15px 16px; align-items: baseline;
  font-size: 13.5px;
}
.role-name { font: 600 12px/1.4 var(--mono); letter-spacing: .08em; color: var(--ink); }
.role-owns { color: var(--ink-2); }
.role-stop { color: var(--ink); }
.role-never::before {
  content: "never"; display: inline-block; margin-right: 7px;
  font: 600 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--critical); border: 1px solid currentColor; border-radius: 3px; padding: 3px 5px;
  vertical-align: 1px;
}
.foot-note { margin: 18px 0 0; color: var(--ink-3); font-size: 13.5px; max-width: 70ch; }
.foot-note em { color: var(--ink-2); font-style: normal; font-weight: 600; }

/* ── brakes ──────────────────────────────────────────────────── */
.brakes { margin: 0; padding: 0; list-style: none; counter-reset: b; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.brakes li {
  counter-increment: b; background: var(--bg-2); padding: 14px 16px 14px 50px;
  position: relative; color: var(--ink-2); font-size: 14px;
}
.brakes li::before {
  content: counter(b); position: absolute; left: 16px; top: 14px;
  font: 600 11px/1.5 var(--mono); color: var(--ink-3);
}
.deny { margin-top: 14px; }
.deny summary { cursor: pointer; font: 12px/1 var(--mono); color: var(--ink-3); padding: 8px 0; }
.deny pre {
  margin: 8px 0 0; padding: 14px 16px; overflow-x: auto;
  border: 1px solid var(--line); border-radius: 7px; background: var(--bg-2);
  font: 12px/1.7 var(--mono); color: var(--ink-2);
}

/* ── numbers ─────────────────────────────────────────────────── */
.numbers {
  border: 1px solid var(--line); border-radius: 9px; background: var(--bg-2); padding: 20px;
  display: grid; gap: 14px;
}
.kv { display: grid; grid-template-columns: 168px 1fr; gap: 10px 16px; font: 12.5px/1.6 var(--mono); }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
/* ── limits ──────────────────────────────────────────────────── */
.limits { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.limits li {
  padding: 13px 16px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--bg-2); color: var(--ink-2); font-size: 14px;
}
.limits b { color: var(--ink); }

/* ── footer ──────────────────────────────────────────────────── */
.foot {
  margin-top: 88px; padding: 26px 0 44px; border-top: 1px solid var(--line);
  display: flex; gap: 18px; flex-wrap: wrap;
  font: 11.5px/1 var(--mono); letter-spacing: .06em; color: var(--ink-2);
}
.dim { color: var(--ink-3); }

/* ── narrow ──────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .hero { padding: 56px 0 40px; }
  .block { padding: 56px 0 0; }
  .role { grid-template-columns: 1fr; gap: 7px; }
  .obit { grid-template-columns: 1fr; gap: 5px; }
  .obit-life { text-align: left; }
  .kv { grid-template-columns: 1fr; gap: 3px 0; }
  .kv dd { margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}