/* On-call Brain. Direction "Pager": paper, ink, one red for what is broken now.
   Every colour and font family is declared in :root below and nowhere else (graph.js reads the same properties). */

@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("vendor/fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("vendor/fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400 600; font-style: normal; font-display: swap;
  src: url("vendor/fonts/ibm-plex-sans-var.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("vendor/fonts/ibm-plex-mono-400.woff2") format("woff2"); }

:root {
  --paper: #F8F6F4;
  --paper-2: #EAE7E4;
  --rule: #BBB6B2;
  --muted: #5E5652;
  --ink: #18120F;
  --signal: #C50710;
  --on-ink: #F8F6F4;
  --on-ink-2: #CFC8C3;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-code: "IBM Plex Mono", Menlo, Consolas, monospace;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --gutter: 32px;
  --control: 40px;
  --top-h: 56px;
  --acts-h: calc(var(--control) + 2 * var(--s3) + 2px); /* the fixed Confirm / Wrong cause bar on phone */
  --ease: cubic-bezier(.16, 1, .3, 1);
}
@media (max-width: 1100px) { :root { --gutter: 24px; } }
@media (max-width: 599px) { :root { --gutter: 16px; } }
@media (pointer: coarse) { :root { --control: 44px; } }
@media (max-width: 719px) { :root { --top-h: calc(54px + var(--control)); } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-padding-top: calc(var(--top-h) + var(--s4)); }
/* an open incident adds its sticky Answer / Show me why bar under the header: focus never lands under it */
@media (min-width: 900px) {
  html:has(#view-incidents:not([hidden]) #incident:not([hidden])) { scroll-padding-top: calc(var(--top-h) + var(--acts-h) + var(--s5)); }
}
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.5;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, dl, dd, dt, ol, ul, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { overflow-wrap: anywhere; min-width: 0; }
ol, ul { padding: 0; list-style: none; }
b, strong { font-weight: 600; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; text-underline-offset: 3px; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.slab :focus-visible, .toast :focus-visible { outline-color: var(--on-ink); }
[tabindex="-1"]:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-family: var(--font-display); font-weight: 700; line-height: 1.02; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
pre, code { font-family: var(--font-code); font-size: 13px; }
pre { margin: 0; padding: var(--s3); background: var(--paper-2); color: var(--ink); white-space: pre; overflow-x: auto;
  line-height: 1.5; max-width: 100%; }
:not(pre) > code { background: var(--paper-2); padding: 0 var(--s1); white-space: nowrap; } /* "--http --port 8001" stays whole */
@media (max-width: 359px) { :not(pre) > code { white-space: normal; overflow-wrap: anywhere; } }
.skip { position: absolute; left: var(--s2); top: -100px; background: var(--ink); color: var(--on-ink); padding: 0 var(--s3); z-index: 100;
  min-height: var(--control); display: inline-flex; align-items: center; }
.skip:focus { top: var(--s2); }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--control); padding: 0 var(--s4); border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  font-weight: 600; white-space: nowrap; text-decoration: none;
  transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}
.btn:hover { background: var(--paper-2); }
.btn:active { background: var(--ink); color: var(--on-ink); }
/* a toggle that is open (Wrong cause, Show on graph) reads as pressed */
.btn[aria-expanded="true"] { background: var(--paper-2); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.btn.fill { background: var(--ink); color: var(--on-ink); }
.btn.fill:hover { background: var(--muted); border-color: var(--muted); }
.btn.fill:active { background: var(--ink); color: var(--on-ink-2); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--paper-2); color: var(--muted); border-color: var(--rule); cursor: not-allowed; }
.btn.small { padding: 0 var(--s3); font-size: 14px; }
.btn.on-ink { border-color: var(--on-ink); color: var(--on-ink); }
.btn.on-ink:hover { background: var(--on-ink); color: var(--ink); }
.btn.on-ink:active { background: var(--on-ink-2); color: var(--ink); }
.btn.on-ink[aria-disabled="true"] { background: transparent; border-color: var(--on-ink-2); color: var(--on-ink-2); }
.link {
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: 600;
  min-height: var(--control); display: inline-flex; align-items: center; transition: color 150ms ease-out;
}
.link:hover { color: var(--muted); }
.link:active { color: var(--ink); text-decoration-thickness: 3px; }
.link:disabled { color: var(--muted); cursor: not-allowed; text-decoration: none; }
.link.quiet { font-weight: 400; min-height: 24px; }
.step-btn { font-weight: 600; text-align: left; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  min-height: 24px; transition: text-decoration-color 150ms ease-out; }
.step-btn:hover { text-decoration-color: var(--ink); }
.step-btn:active { color: var(--muted); }
input[type="text"], select {
  min-height: var(--control); padding: 0 var(--s3); border: 1.5px solid var(--ink); border-radius: 0; background: var(--paper);
  color: var(--ink); width: 100%; min-width: 0; transition: background-color 150ms ease-out;
}
input[type="text"]:hover, select:hover { background: var(--paper-2); }
input[type="text"]:disabled { background: var(--paper-2); color: var(--muted); border-color: var(--rule); cursor: not-allowed; }
input::placeholder { color: var(--muted); }
details > summary { cursor: pointer; width: max-content; max-width: 100%; min-height: 24px; text-decoration: underline; text-underline-offset: 3px;
  font-size: 14px; list-style-position: inside; transition: color 150ms ease-out; }
details > summary:hover { color: var(--muted); }
details > summary:active { color: var(--ink); text-decoration-thickness: 3px; }
@media (pointer: coarse) {
  .link.quiet, .step-btn { min-height: var(--control); }
  details > summary { padding-block: var(--s3); }
}
.skel { display: block; height: 16px; background: var(--paper-2); margin: var(--s1) 0; }
.skel.w40 { width: 40%; } .skel.w60 { width: 60%; } .skel.w80 { width: 80%; } .skel.tall { height: 24px; }

/* ---------- top bar ---------- */
.top {
  position: sticky; top: 0; z-index: 20; height: var(--top-h); background: var(--paper);
  display: flex; align-items: stretch; gap: var(--s5); padding: 0 var(--gutter); border-bottom: 2px solid var(--ink);
}
.brand { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1; white-space: nowrap; }
.positioning { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.on-landing .positioning { display: none; } /* the landing heading says it */
.views { display: flex; gap: var(--s5); margin-left: auto; }
.view-tab { padding: 0; height: 100%; min-height: var(--control); white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -2px;
  display: inline-flex; align-items: center; transition: color 150ms ease-out, border-color 150ms ease-out; }
.view-tab:hover { color: var(--muted); }
.view-tab:active { color: var(--ink); }
.view-tab[aria-current="page"] { border-bottom-color: var(--ink); font-weight: 600; color: var(--ink); }
.menu-wrap { position: relative; display: flex; align-items: center; }
@media (max-width: 1239px) { .positioning { display: none; } }
@media (max-width: 719px) {
  .top { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 52px var(--control); gap: 0 var(--s3); }
  .brand { grid-column: 1; grid-row: 1; }
  .menu-wrap { grid-column: 2; grid-row: 1; }
  .views { grid-column: 1 / -1; grid-row: 2; margin-left: 0; gap: var(--s5); }
  #btn-simulate { padding: 0 var(--s3); font-size: 14px; }
}
@media (max-width: 359px) {
  .wordmark { font-size: 20px; }
  #btn-simulate { padding: 0 var(--s2); font-size: 13px; }
  .views { gap: var(--s4); }
}

/* ---------- simulate menu ---------- */
.menu {
  position: absolute; right: 0; top: calc(100% + var(--s1)); width: 440px; max-height: calc(100vh - var(--top-h) - var(--s5));
  overflow-y: auto; background: var(--paper); border: 2px solid var(--ink); z-index: 60;
}
.menu-head { padding: var(--s3) var(--s4); display: grid; gap: var(--s1); }
.menu-title { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.menu-head h2 { font-size: 16px; font-weight: 600; }
.menu-head p { font-size: 14px; color: var(--muted); }
.scenarios li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--s3); align-items: center;
  padding: var(--s3) var(--s4); border-top: 1px solid var(--rule); }
.scenarios li .num { font-size: 28px; }
.scenarios li.done { color: var(--muted); }
.scenarios li p { font-size: 14px; color: var(--muted); }
.scenarios .done-word { font-size: 14px; color: var(--muted); padding: 0 var(--s2); max-width: 10ch; text-align: right; line-height: 1.3; }
.scenarios li p.wait { color: var(--ink); font-weight: 600; margin-top: var(--s1); }
.custom { border-top: 1px solid var(--rule); padding: var(--s3) var(--s4); }
.custom > summary { font-size: 16px; font-weight: 600; }
.custom-form { display: grid; gap: var(--s3); margin-top: var(--s3); }
.custom-form label { display: grid; gap: var(--s1); font-size: 14px; font-weight: 600; }
.menu-foot { border-top: 2px solid var(--ink); padding: var(--s3) var(--s4); display: grid; gap: var(--s2); font-size: 14px; }
.confirm-inline { display: grid; gap: var(--s2); padding: var(--s3); background: var(--paper-2); }
.confirm-inline .row-btns { display: flex; gap: var(--s2); flex-wrap: wrap; }
@media (max-width: 899px) {
  /* phone and tablet: a full-screen sheet with its own Close, so nothing behind it is sliced */
  .menu { position: fixed; inset: 0; width: auto; max-height: none; border: 0; overscroll-behavior: contain; }
  body:has(#simulate-menu:not([hidden])) { overflow: hidden; } /* the page behind the sheet does not scroll */
  .menu-head { padding-top: var(--s2); }
  .menu-title { border-bottom: 2px solid var(--ink); padding-bottom: var(--s2); margin-bottom: var(--s2); }
}

/* ---------- incidents layout ---------- */
.incidents { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: calc(100vh - var(--top-h)); }
.notice { max-width: 880px; margin-bottom: var(--s5); padding: 0 0 var(--s3); border-bottom: 2px solid var(--ink); display: grid; gap: var(--s1); }
.notice p { max-width: 75ch; }
.rail {
  position: sticky; top: var(--top-h); align-self: start; height: calc(100vh - var(--top-h)); overflow-y: auto;
  border-right: 2px solid var(--ink); display: flex; flex-direction: column;
}
.rail-group h2 { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3);
  font-size: 16px; font-weight: 600; padding: var(--s4) var(--s4) var(--s2); border-bottom: 2px solid var(--ink); }
.rail-group h2 .num { font-size: 28px; }
.rail-group + .rail-group { margin-top: var(--s3); }
.row-btn {
  /* first baseline: the time and the title's first line share one (centring would float the time on a long title) */
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 var(--s3); width: 100%; align-items: baseline;
  padding: var(--s3) var(--s4) var(--s3) calc(var(--s4) - 3px); border-left: 3px solid transparent; border-bottom: 1px solid var(--rule);
  transition: background-color 150ms ease-out;
}
.row-btn:hover { background: var(--paper-2); }
.row-btn:active { background: var(--paper-2); outline: 1.5px solid var(--ink); outline-offset: -1.5px; }
.row-btn[aria-current="true"] { background: var(--paper-2); border-left-color: var(--ink); }
.row-btn:focus-visible { outline-offset: -3px; }
.row-btn .num { font-size: 28px; line-height: 1; }
.row-btn .date { font-size: 13px; color: var(--muted); display: block; }
.row-btn .title { font-weight: 600; line-height: 1.3; display: block; }
.row-btn .mark { display: inline-block; width: 10px; height: 10px; background: var(--signal); margin-right: var(--s2); }
.row-btn .where { font-size: 14px; color: var(--muted); display: block; }
.row-btn .state { font-size: 14px; display: block; }
.rail-empty { padding: var(--s4); display: grid; gap: var(--s2); }
.rail-empty p { font-size: 14px; color: var(--muted); }
.rail-empty b { color: var(--ink); font-size: 16px; }
.rail-skel { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); }
.health { margin-top: auto; padding: var(--s4); border-top: 1px solid var(--rule); font-size: 13px; color: var(--muted); }
.health .down { color: var(--signal); font-weight: 600; }
.stage { min-width: 0; padding: var(--s5) var(--gutter) var(--s8); }
.landing { max-width: 880px; }
.incident { max-width: 1240px; }
.back { display: none; }

/* ---------- landing ---------- */
.landing h1 { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.02; max-width: 40ch; }
.readout-wrap + h1 { margin-top: var(--s6); }
.landing .lede { margin-top: var(--s4); max-width: 62ch; font-size: 16px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s5); }
.cta-row .btn { white-space: normal; max-width: 100%; text-align: left; padding-block: var(--s2); }
.cta-row .btn.fill { min-height: var(--s7); padding-inline: var(--s5); }
.cta-note { margin-top: var(--s5); max-width: 62ch; padding: var(--s3) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
/* the newest open incident: the whole slab is the button that opens it */
.readout { display: block; width: 100%; text-align: left; padding: var(--s4) var(--s5); }
.readout > span { display: block; }
.readout .slab-top { display: flex; }
.readout-title { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.02; margin: var(--s2) 0 var(--s1); overflow-wrap: anywhere; }
.readout .readout-go { display: inline-flex; align-items: center; min-height: var(--control); margin-top: var(--s4); padding: 0 var(--s4);
  border: 1.5px solid var(--on-ink); font-weight: 600; transition: background-color 150ms ease-out, color 150ms ease-out; }
.readout:hover .readout-go { background: var(--on-ink); color: var(--ink); }
.readout:active .readout-go { background: var(--on-ink-2); color: var(--ink); }
.readout:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.cta-wait { margin-top: var(--s5); max-width: 62ch; padding: var(--s3) 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.cta-wait + .cta-row { margin-top: var(--s3); }
.narrow-only { display: none; }
@media (max-width: 359px) { .wide-only { display: none; } .narrow-only { display: inline; } }
.how { margin-top: var(--s7); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.how li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s4); padding: var(--s4) 0; }
.how li + li { border-top: 1px solid var(--rule); }
.how .num { font-size: 28px; }
.how b { display: block; }
.how p { max-width: 68ch; }
.facts { margin-top: var(--s4); font-size: 14px; color: var(--muted); max-width: 75ch; }
.error-block { margin-top: var(--s5); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: var(--s4) 0;
  display: grid; gap: var(--s3); max-width: 880px; }
.error-block > * { max-width: 75ch; }
.error-block h2 { font-size: 20px; font-weight: 600; line-height: 1.3; }
.error-block pre { white-space: pre-wrap; }
.error-block + .how { border-top: 0; margin-top: var(--s5); }

/* ---------- the slab ---------- */
.slab { background: var(--ink); color: var(--on-ink); padding: var(--s4) var(--s5) var(--s5); }
.slab-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); font-size: 14px; color: var(--on-ink-2); }
.slab-top .num { font-size: 20px; color: var(--on-ink); }
.state-block { display: inline-flex; align-items: center; gap: var(--s2); padding: 0 var(--s2); min-height: 24px; font-weight: 600; font-size: 14px;
  color: var(--on-ink); border: 1.5px solid transparent; }
.state-block.firing { background: var(--signal); border-color: var(--signal); }
.state-block.working { border: 1.5px dashed var(--on-ink); }
.state-block.confirmed { background: var(--ink); border-color: var(--on-ink); }
.state-block.human, .state-block.error { border-color: var(--signal); }
.indicator { width: 8px; height: 8px; background: var(--on-ink); display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .indicator { animation: blink 1.2s steps(2, jump-none) infinite; }
  @keyframes blink { from { opacity: 1; } to { opacity: .2; } }
}
.slab h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 18px + 2.2vw, 60px); line-height: 1.02;
  margin: var(--s3) 0 var(--s2); max-width: 20ch; }
.slab .where-line { color: var(--on-ink); max-width: 70ch; }
.slab .storm-line { color: var(--on-ink-2); font-size: 14px; margin-top: var(--s1); max-width: 75ch; }
.slab-live { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s4);
  padding-top: var(--s3); border-top: 1px solid var(--on-ink-2); }
.slab-live p { font-size: 14px; color: var(--on-ink-2); flex: 1 1 320px; max-width: 75ch; }
.slab-live p b { color: var(--on-ink); }
.counts { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); margin-top: var(--s5); padding-top: var(--s3);
  border-top: 1px solid var(--on-ink-2); }
.counts div { display: flex; align-items: baseline; gap: var(--s2); }
.counts .num { font-size: 44px; line-height: 1; }
.counts span:last-child { font-size: 14px; color: var(--on-ink-2); line-height: 1.25; white-space: nowrap; }

/* ---------- bar: view tabs and the two decisions ---------- */
.bar { position: sticky; top: var(--top-h); z-index: 10; background: var(--paper); display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-bottom: 2px solid var(--ink); }
.seg { display: inline-flex; border: 1.5px solid var(--ink); }
.seg button { min-height: var(--control); padding: 0 var(--s4); font-weight: 600; white-space: nowrap; border-bottom: 3px solid transparent;
  transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out; }
.seg button + button { border-left: 1.5px solid var(--ink); }
.seg button:hover { background: var(--paper-2); }
.seg button:active { background: var(--ink); color: var(--on-ink); }
/* the selected view reads like the top view tabs (an underline), so Confirm cause stays the bar's one filled control */
.seg button[aria-selected="true"] { background: var(--paper-2); color: var(--ink); border-bottom-color: var(--ink); }
.seg button:focus-visible { outline-offset: 2px; }
.acts { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.acts-note { font-size: 14px; color: var(--muted); }
.alts-box { margin-top: var(--s4); padding: var(--s4); background: var(--paper-2); display: grid; gap: var(--s3); }
.alts-box li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s2) 0;
  border-top: 1px solid var(--rule); }
.alts-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding-top: var(--s3);
  border-top: 1px solid var(--rule); }

/* ---------- working: the three agents (one ruled row; the working agent has the dashed outline) ---------- */
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--s4);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cell { padding: var(--s3); min-width: 0; outline: 1.5px dashed transparent; outline-offset: -1.5px; }
.cell + .cell { border-left: 1px solid var(--rule); }
.cell.working { outline-color: var(--ink); }
.cell-head { display: flex; align-items: baseline; gap: var(--s2); }
.cell-head .num { font-size: 28px; }
.cell-head .state-word { margin-left: auto; font-size: 14px; color: var(--muted); }
.cell p { font-size: 14px; margin-top: var(--s1); overflow-wrap: anywhere; }
.cell.waiting p { color: var(--muted); }

/* ---------- dispatch rows ---------- */
.dispatch { border-bottom: 2px solid var(--ink); }
#progress:not(:empty) ~ .dispatch, #alts:not(:empty) ~ .dispatch { margin-top: var(--s4); border-top: 2px solid var(--ink); }
.dispatch > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s4); padding: var(--s4) 0; }
.dispatch > div + div { border-top: 1px solid var(--rule); }
.dispatch dt { font-weight: 600; }
.dispatch dd { min-width: 0; }
.dispatch dd > * + * { margin-top: var(--s2); }
.dispatch dd p { max-width: 72ch; }
.lead { font-size: 20px; line-height: 1.35; overflow-wrap: anywhere; max-width: 72ch; }
.conf-line { max-width: 72ch; }
.conf { display: inline-block; border: 1.5px solid var(--ink); padding: 0 var(--s2); font-size: 14px; font-weight: 600; margin-right: var(--s2); }
.conf.confirmed { background: var(--ink); color: var(--on-ink); }
.memory { border-top: 1px solid var(--rule); padding-top: var(--s3); margin-top: var(--s3); }
.memory .pair { display: grid; gap: var(--s2); margin-top: var(--s3); }
.memory .pair div { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); }
.memory .pair .num { font-size: 44px; line-height: 1; }
.memory .pair .num.was { font-size: 28px; color: var(--muted); }
.memory .pair span:not(.num) { font-size: 14px; color: var(--muted); line-height: 1.25; }
.memory .pair span:nth-child(2) { color: var(--ink); }

/* the evidence wire: the cause path as boxes on one signal line (vertical when long, or on a narrow screen) */
.wire { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s3); margin: var(--s2) 0 var(--s3); }
.wire li { position: relative; min-width: 0; }
.wire li::before { content: ""; position: absolute; left: 0; right: calc(-1 * var(--s3)); top: 19px; height: 2px; background: var(--signal); }
.wire li:last-child::before { display: none; }
.wire .box { position: relative; z-index: 1; display: inline-flex; flex-direction: column; justify-content: center; min-height: 40px;
  max-width: 100%; padding: var(--s1) var(--s3); border: 1.5px solid var(--ink); background: var(--paper); font-weight: 600;
  line-height: 1.2; overflow-wrap: anywhere; }
.wire .box.change { background: var(--ink); color: var(--on-ink); }
.wire .box .id { font-weight: 400; font-size: 14px; color: var(--on-ink-2); }
.wire .box.alerting { background: var(--signal); border-color: var(--signal); color: var(--on-ink); }
.wire .box.was-alerting { border-width: 3px; }
.wire .t { display: block; margin-top: var(--s2); font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.1; }
.wire .t.sig { color: var(--signal); }
.wire .m { display: block; font-size: 14px; color: var(--muted); line-height: 1.3; overflow-wrap: anywhere; }
.wire.vertical { grid-auto-flow: row; }
.wire.vertical li { padding-left: var(--s5); }
.wire.vertical li::before { left: 7px; right: auto; top: 20px; bottom: calc(-1 * var(--s3) - 20px); width: 2px; height: auto; display: block; }
.wire.vertical li:last-child::before { display: none; }
.wire.vertical li::after { content: ""; position: absolute; left: 3px; top: 16px; width: 10px; height: 10px; background: var(--signal); }

.timeline { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s1) var(--s3); align-items: baseline; }
.timeline .t { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.3; }
.timeline .t.sig { color: var(--signal); }
.people li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s3); padding: var(--s1) 0; align-items: baseline; }
.people li > span:first-child { font-size: 14px; color: var(--muted); }
.tag { display: inline-block; border: 1px solid var(--rule); padding: 0 var(--s2); font-size: 14px; color: var(--muted); margin-left: var(--s2);
  line-height: 1.5; }
.ruled li { padding: var(--s1) 0; }
.ruled li + li { margin-top: var(--s1); }
.ruled .why-not { display: block; font-size: 14px; color: var(--muted); max-width: 72ch; }
.ruled .state-word { font-size: 14px; color: var(--muted); }
.ruled .state-word.sig { color: var(--signal); font-weight: 600; }
.sources li { display: grid; grid-template-columns: 96px minmax(0, 1fr) 64px; gap: var(--s3); padding: var(--s1) 0; align-items: baseline; }
.sources li > span:first-child, .sources li > span:last-child { color: var(--muted); font-size: 14px; }
.sources li > span:last-child { text-align: right; }
.steps-list { list-style: decimal; padding-left: var(--s5); }
.steps-list li + li { margin-top: var(--s1); }
.learned { background: var(--paper-2); padding: var(--s3) var(--s4); }
.learned > * + * { margin-top: var(--s2); }

/* the status update the comms agent drafted: header and block share one measure */
.update { margin-top: var(--s5); max-width: 72ch; }
.update-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding-top: var(--s3); border-top: 2px solid var(--ink); }
.dispatch + .update .update-head { border-top: 0; padding-top: 0; }
.update-head h2 { font-size: 16px; font-weight: 600; }
.update-head .btn { margin-left: auto; }
.update-lines { margin-top: var(--s3); background: var(--paper-2); padding: var(--s3) var(--s4); font-size: 14px; }
.update-lines .head { font-weight: 600; font-size: 16px; margin-bottom: var(--s2); }
.update-pending { margin-top: var(--s3); color: var(--muted); font-size: 14px; }

/* ---------- show me why ---------- */
.why { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s5); margin-top: var(--s4); align-items: start; }
.why-graph { position: sticky; top: calc(var(--top-h) + 72px); }
.graph-wrap { display: grid; gap: var(--s2); }
.graph-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); }
.hud { font-size: 14px; color: var(--muted); flex: 1 1 240px; }
#graph-tools { display: flex; flex-wrap: wrap; gap: var(--s2); }
#graph { height: calc(100vh - var(--top-h) - 72px - 220px); min-height: 320px; border: 1px solid var(--rule); background: var(--paper); }
.graph-alt { font-size: 14px; max-width: 75ch; }
.graph-alt:empty { display: none; }
.legend { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: 13px; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: var(--s2); }
.lg { width: 14px; height: 14px; flex: none; overflow: visible; }
.lg.wide { width: 22px; }
.lg .k-ink { fill: var(--ink); } .lg .k-paper { fill: var(--paper); } .lg .k-paper-2 { fill: var(--paper-2); }
.lg .k-sig { fill: var(--signal); } .lg .s-ink { stroke: var(--ink); } .lg .s-sig { stroke: var(--signal); } .lg .s-muted { stroke: var(--muted); }
.lg .s-rule { stroke: var(--rule); }
.why-intro { display: grid; gap: var(--s2); }
.why-intro h2 { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.02; }
.why-intro p { max-width: 72ch; }
.group { border-top: 2px solid var(--ink); padding-top: var(--s3); margin-top: var(--s5); }
.group h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); font-size: 16px; font-weight: 600; }
.group h3 .count { font-size: 14px; font-weight: 400; color: var(--muted); }
.group .hand { font-size: 14px; color: var(--muted); margin-top: var(--s1); max-width: 72ch; }
.step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s3); padding: var(--s3) var(--s2); border-bottom: 1px solid var(--rule);
  cursor: pointer; transition: background-color 150ms ease-out; }
.step:hover { background: var(--paper-2); }
.step:active { background: var(--paper-2); outline: 1.5px solid var(--ink); outline-offset: -1.5px; }
.step.selected { background: var(--paper-2); outline: 1.5px solid var(--ink); outline-offset: -1.5px; }
.step .seq { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1; }
.step h4 { font-size: 16px; font-weight: 600; }
.step .by { font-size: 13px; color: var(--muted); }
.step .reason { margin-top: var(--s1); max-width: 72ch; }
.step .result { margin-top: var(--s1); font-size: 14px; max-width: 72ch; overflow-wrap: anywhere; }
.step .result.sig { color: var(--signal); font-weight: 600; }
.step details { margin-top: var(--s2); min-width: 0; }
.q { border: 1px solid var(--rule); margin-top: var(--s2); min-width: 0; }
.qhead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); padding: var(--s1) var(--s3); font-size: 13px; color: var(--muted); }
.qhead b { color: var(--ink); }
.qhead .rw { border: 1px solid var(--rule); color: var(--ink); padding: 0 var(--s1); }
.qhead .btn { margin-left: auto; }
.qhead .btn + .btn { margin-left: 0; }
.q pre + pre { border-top: 1px solid var(--rule); }
.q details { margin: var(--s2) var(--s3); }
.q > p, .q .plan > p { margin: 0; padding: var(--s1) var(--s3); }
.q .plan { border-top: 1px solid var(--rule); }
.why-foot { margin-top: var(--s4); font-size: 13px; color: var(--muted); }

/* ---------- ask the brain ---------- */
.ask { display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 1fr); gap: var(--s6); padding: var(--s5) var(--gutter) var(--s8); align-items: start; }
.ask-head h1, .connect-head h1 { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.02; }
.ask-head p, .connect-head p { margin-top: var(--s2); max-width: 62ch; }
.ask-graph { position: sticky; top: calc(var(--top-h) + var(--s5)); }
.ask-graph #graph { height: calc(100vh - var(--top-h) - 200px); }
.graph-empty { padding: var(--s4) 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); color: var(--muted); max-width: 48ch; }
.ask-phone-graph { margin-top: var(--s4); }
.chat-log { margin-top: var(--s5); }
.turn { border-top: 2px solid var(--ink); padding: var(--s4) 0; display: grid; gap: var(--s3); }
.turn .asked { font-size: 14px; font-weight: 400; color: var(--muted); }
.turn > .btn, .turn > details { justify-self: start; }
.turn .asked b { color: var(--ink); font-size: 16px; }
.a-pre { font-size: 14px; color: var(--muted); max-width: 72ch; }
.a-lead { font-size: 20px; line-height: 1.4; max-width: 68ch; overflow-wrap: anywhere; }
.a-more { max-width: 72ch; }
.a-more p { margin-top: var(--s2); }
.a-sources h3 { font-size: 14px; font-weight: 600; margin-bottom: var(--s1); }
.a-sources li { border-top: 1px solid var(--rule); }
/* an Ask source opens in place to its quote */
.src > summary { display: grid; grid-template-columns: 96px minmax(0, 1fr) 64px; gap: var(--s3); width: 100%; max-width: none; padding: var(--s2) 0;
  min-height: var(--control); align-items: baseline; list-style: none; text-decoration: none; font-size: 16px; transition: background-color 150ms ease-out; }
.src > summary::-webkit-details-marker { display: none; }
.src > summary:hover { background: var(--paper-2); color: var(--ink); }
.src > summary:active { background: var(--paper-2); outline: 1.5px solid var(--ink); outline-offset: -1.5px; }
.src > summary > span:nth-child(2) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.src[open] > summary > span:nth-child(2) { text-decoration-thickness: 2px; }
.src > summary > span:first-child, .src > summary > span:last-child { font-size: 14px; color: var(--muted); }
.src > summary > span:last-child { text-align: right; }
.quote { margin: 0 0 var(--s2) calc(96px + var(--s3)); padding: var(--s2) var(--s3); background: var(--paper-2); font-size: 14px; max-width: 68ch; }
.linked { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-top: var(--s2); font-size: 14px; }
.ask-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); margin-top: var(--s5); }
.ask-form label { grid-column: 1 / -1; font-weight: 600; }
.examples { margin-top: var(--s5); }
.examples:empty { display: none; }
.examples h2 { font-size: 14px; font-weight: 600; margin-bottom: var(--s2); }
.examples ul { display: flex; flex-wrap: wrap; gap: var(--s2); }
.examples .btn { white-space: normal; text-align: left; padding-block: var(--s1); max-width: 100%; }
.note { margin-top: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); max-width: 72ch; }
.err { display: grid; gap: var(--s2); }
.err p:first-child { font-weight: 600; }
@media (max-width: 399px) {
  .examples ul { display: grid; }
  .examples .btn { width: 100%; justify-content: flex-start; }
}

/* ---------- connect ---------- */
.connect { max-width: 880px; padding: var(--s5) var(--gutter) var(--s8); }
.status-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s1) var(--s5); margin-top: var(--s5);
  padding: var(--s3) 0; border-top: 2px solid var(--ink); font-size: 14px; }
.status-list dt { color: var(--muted); }
.status-list dd { font-weight: 600; }
.status-list .sig { color: var(--signal); }
.connect-steps { margin-top: var(--s5); border-bottom: 2px solid var(--ink); }
.connect-steps > li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s4); padding: var(--s5) 0; border-top: 1px solid var(--rule); }
.connect-steps > li:first-child { border-top: 2px solid var(--ink); }
.connect-steps .num { font-size: 28px; }
.connect-steps h2 { font-size: 20px; font-weight: 600; line-height: 1.3; }
.connect-steps li > div { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.connect-steps p { max-width: 72ch; }
.connect-steps ul { list-style: disc; padding-left: var(--s5); }
.code-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); min-width: 0; }
.code-wrap pre { white-space: pre-wrap; overflow-wrap: anywhere; } /* a long line (the webhook curl) wraps inside its block instead of running past its edge */
.tool-list { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); list-style: none !important; padding-left: 0 !important; margin-top: var(--s2); }
.code-wrap .btn { justify-self: start; }

/* ---------- toast ---------- */
/* the toast never eats a tap meant for what is under it; only its Close takes one */
.toast { position: fixed; left: var(--s5); bottom: var(--s5); z-index: 50; max-width: 440px; display: flex; align-items: center; gap: var(--s3);
  background: var(--ink); color: var(--on-ink); padding: var(--s3) var(--s3) var(--s3) var(--s4); pointer-events: none; }
.toast button { pointer-events: auto; }
.toast.error { background: var(--signal); }
.toast p { flex: 1; font-size: 14px; }
.toast button { color: var(--on-ink); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; font-weight: 600;
  min-height: var(--control); padding: 0 var(--s2); transition: color 150ms ease-out; }
.toast button:hover { text-decoration-thickness: 3px; }
.toast button:active { color: var(--on-ink-2); }

/* ---------- the print: an answer arrives (the one orchestrated motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .print .slab, .print .dispatch > div, .print .update { animation: print 360ms var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
  @keyframes print { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- phone and tablet: one column ---------- */
@media (max-width: 899px) {
  .top { position: static; }
  html { scroll-padding-top: var(--s4); }
  html:has(body.has-acts-toast) { scroll-padding-bottom: calc(var(--acts-h) + var(--s4)); } /* focus never hides under the bar */
  .incidents { display: flex; flex-direction: column; }
  .rail { position: static; align-self: stretch; height: auto; overflow: visible; border-right: 0; border-bottom: 2px solid var(--ink); order: 2; }
  .stage { order: 3; padding: var(--s4) var(--gutter) var(--s7); }
  .incidents:not(.inbox-first) .rail { order: 4; border-top: 2px solid var(--ink); border-bottom: 0; }
  .incidents.has-current .rail { display: none; }
  .incidents.inbox-first .readout-wrap { display: none; } /* the same incident is the first row just above */
  .health { margin-top: 0; }
  /* the rail lines up with the stage's gutter (the row's 3px selection bar inside it) */
  .rail-group h2, .rail-empty, .health, .rail-skel { padding-inline: var(--gutter); }
  .row-btn { padding-inline: calc(var(--gutter) - 3px) var(--gutter); }
  .back { display: inline-flex; margin-bottom: var(--s3); }
  #slab { margin-inline: calc(-1 * var(--gutter)); padding: var(--s3) var(--gutter) var(--s4); }
  .counts { gap: var(--s3) var(--s5); }
  .bar { position: static; }
  .incident.has-acts { padding-bottom: var(--acts-h); }
  .acts { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: var(--paper); border-top: 2px solid var(--ink);
    padding: var(--s3) var(--gutter); flex-wrap: nowrap; }
  .acts:empty { display: none; }
  .acts .btn { flex: 1 1 0; min-width: 0; }
  .strip { grid-template-columns: minmax(0, 1fr); }
  .cell { padding: var(--s2); }
  .cell + .cell { border-left: 0; border-top: 1px solid var(--rule); }
  .cell.done p, .cell.waiting p { display: none; }
  .cell-head .num { font-size: 20px; }
  .dispatch > div { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .people li { grid-template-columns: 96px minmax(0, 1fr); }
  .sources li { grid-template-columns: 80px minmax(0, 1fr); }
  .sources li > span:last-child { display: none; }
  .why { grid-template-columns: minmax(0, 1fr); }
  .why-graph { position: static; }
  #graph, .ask-graph #graph { height: 60vh; min-height: 320px; }
  .ask { grid-template-columns: minmax(0, 1fr); padding: var(--s4) var(--gutter) var(--s7); }
  .ask-graph { display: none; }
  .connect { padding: var(--s4) var(--gutter) var(--s7); }
  .toast { left: var(--s4); right: var(--s4); bottom: var(--s4); max-width: none; }
  .has-acts-toast .toast { bottom: calc(var(--acts-h) + var(--s4)); }
  .src > summary { grid-template-columns: 80px minmax(0, 1fr); }
  .src > summary > span:last-child { display: none; }
  .quote { margin-left: 0; }
}
@media (max-width: 599px) {
  .counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .counts .num { font-size: 28px; }
  .counts div { min-width: 0; }
  .counts span:last-child { white-space: normal; } /* a long label wraps in its own half, never under the next number */
  .wire { grid-auto-flow: row; }
  .wire li { padding-left: var(--s5); }
  .wire li::before { left: 7px; right: auto; top: 20px; bottom: calc(-1 * var(--s3) - 20px); width: 2px; height: auto; display: block; }
  .wire li:last-child::before { display: none; }
  .wire li::after { content: ""; position: absolute; left: 3px; top: 16px; width: 10px; height: 10px; background: var(--signal); }
  .update-head .btn { margin-left: 0; }
  .connect-steps > li { grid-template-columns: 32px minmax(0, 1fr); gap: var(--s3); }
  .how li { grid-template-columns: 36px minmax(0, 1fr); gap: var(--s3); }
  .status-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .status-list dd + dt { margin-top: var(--s2); }
  .ask-form { grid-template-columns: minmax(0, 1fr); }
  .alts-foot { grid-template-columns: minmax(0, 1fr); }
  .alts-foot .btn { justify-self: start; }
  .code-wrap pre { white-space: pre; } /* on a phone a long command swipes sideways; wrapped, it breaks mid-URL */
}