/* 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;

  /* The neutrals carry a green cast rather than a grey one. Side by side the
     difference is obvious; on its own it reads as a room with a green light in
     it rather than a lime interface. Anything stronger and the whole thing
     turns into a screensaver, which is the opposite of the tone here. */
  --ink:        #e4efe6;
  --ink-2:      #9db3a3;
  --ink-3:      #63796a;
  --bg:         #050806;
  --bg-2:       #0a100c;
  --bg-3:       #101a13;
  --line:       #17241b;
  --line-2:     #223528;

  --stable:     #4ade80;
  --tight:      #fbbf24;
  --critical:   #f87171;
  --dead:       #4b5563;
  /* Robinhood green. Their identity is black and neutrals with this as the
     single pop of colour, which is the shape this palette already had —
     the accent was just pointing the wrong way. --stable stays a softer
     green so a healthy agent does not read as a link. */
  --accent:     #00C805;
  --accent-dim: #0a8f14;

  --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:
    radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  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(color-mix(in srgb, var(--accent) 22%, transparent) 1px, transparent 1px) 0 0 / 100% 64px,
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent) 1px, transparent 1px) 0 0 / 64px 100%;
  opacity: .12;
  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-logo {
  display: block; width: 24px; height: 24px; flex: none;
  /* A slow breath instead of the old pulsing dot: the mark itself now says the
     system is running, so nothing else has to. */
  animation: breathe 3.6s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50% { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, 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; }
}