/* DEADLINE — the public dashboard.
   A warm, firelit palette: the page is a ledger of lives burning down, so the
   neutrals carry an ember cast rather than a grey one, and the one bright
   thing on screen is the flame. Colours are painted explicitly rather than
   inherited, so the page looks the same wherever it is embedded. */

:root {
  color-scheme: dark;

  /* Warm charcoal neutrals. The blacks lean red-brown instead of grey, the
     way a room does when the only light in it is a fire. */
  --ink:        #f2e7d8;
  --ink-2:      #c9b29a;
  --ink-3:      #8c7459;
  --bg:         #0f0a06;
  --bg-2:       #181008;
  --bg-3:       #221609;
  --line:       #2e2012;
  --line-2:     #43301b;

  /* The states. A live agent is cool teal, a pressed one amber, a dying one
     coral — three temperatures of the same fire. */
  --stable:     #3ecfaf;
  --tight:      #ffb020;
  --critical:   #ff4d5e;
  --dead:       #4a3a2b;
  /* The brand flame. Everything that links, glows or invites is this one
     orange, used sparingly so it keeps its heat. */
  --accent:     #ff7a2f;
  --accent-dim: #b34d15;
  /* Two extra tints beyond the three states, for the rail and the feed. */
  --sky:        #6ec6ff;
  --gold:       #ffd166;

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, "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) 8%, transparent), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font: 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* A single ember horizon at the top instead of a grid: the page is read as a
   firelit room, not a machine readout. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(color-mix(in srgb, var(--accent) 10%, transparent) 1px, transparent 1px) 0 0 / 100% 96px;
  opacity: .5;
  mask-image: linear-gradient(to bottom, black, transparent 320px);
  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 15px/1 var(--serif); letter-spacing: .02em; 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 10px; border: 1px solid var(--line-2); border-radius: 999px;
  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: .24em; text-transform: uppercase; color: var(--accent);
}
h1 {
  margin: 0 0 26px;
  font: 600 clamp(32px, 5.6vw, 58px)/1.08 var(--serif);
  letter-spacing: -.03em;
  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 20px; border-radius: 999px;
  font: 500 13.5px/1 var(--sans); border: 1px solid var(--accent);
  background: var(--accent); color: #1a0d04;
}
.btn:hover { text-decoration: none; background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink-3); background: transparent; color: var(--ink); }

/* ── 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: 10px;
  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 24px/1.25 var(--serif); letter-spacing: -.02em;
}
.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: 10px; 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: 10px; 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: 10px; 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: 10px; 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(--accent);
}
.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: 10px; 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; }
}