/* Payment agent demo — "Ink & Signal".
   A near-black warm ink canvas, bone typography, a single amber signal accent,
   and three state colours: green marks what completed, amber marks the one
   moment a human must act, red marks a refusal. Nothing carries meaning by
   colour alone. */

:root {
  --bg: oklch(0.155 0.008 75);
  --surface: oklch(0.19 0.008 75);
  --surface-raised: oklch(0.225 0.009 75);
  --line: oklch(0.29 0.01 78);
  --line-strong: oklch(0.38 0.012 78);
  --ink: oklch(0.94 0.012 85);
  --ink-muted: oklch(0.66 0.014 80);
  --ink-faint: oklch(0.58 0.013 80);

  /* The signal. Reserved for what the agent is doing now, and for the one
     button that starts it. */
  --primary: oklch(0.80 0.13 78);
  --primary-hover: oklch(0.86 0.08 82);
  --primary-ink: oklch(0.16 0.01 75);

  /* Completed. Distinct from the signal, so "running" and "done" never read
     as the same thing. */
  --pass: oklch(0.76 0.14 158);

  --attention: oklch(0.78 0.14 68);
  --attention-line: oklch(0.44 0.09 70);
  --attention-bg: oklch(0.235 0.030 70);

  --refuse: oklch(0.68 0.18 25);
  --refuse-bg: oklch(0.235 0.045 25);

  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --z-sticky: 10;
  --z-overlay: 20;
  --z-toast: 30;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: min(1120px, 100% - 3rem);
  margin-inline: auto;
}

@media (max-width: 640px) {
  .wrap { width: min(1120px, 100% - 2rem); }
}

/* ---------------------------------------------------------- masthead */

.masthead {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
  flex-wrap: wrap;
}

.wordmark {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.sandbox-flag {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}

.sandbox-flag .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  flex: none;
}

/* -------------------------------------------------------------- lede */

.lede {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
  max-width: 62ch;
}

/* Instrument Serif is a display face: one weight, high contrast, tight by
   nature. It wants to be set large and tracked in, not used at body sizes. */
h1 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 1.2rem + 4.6vw, 4.5rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0 0 1.6rem;
  text-wrap: balance;
}

.lede p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0 0 1rem;
  max-width: 54ch;
  text-wrap: pretty;
}

.disclosure {
  font-family: var(--sans) !important;
  font-size: 0.92rem !important;
  color: var(--ink-muted);
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  margin-top: 1.5rem !important;
}

/* ----------------------------------------------------------- columns */

.columns {
  display: grid;
  grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding-bottom: 4rem;
}

@media (max-width: 900px) {
  .columns { grid-template-columns: minmax(0, 1fr); gap: 2.75rem; }
}

h2 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.4rem;
}

.route-intro {
  margin: 0 0 1.75rem;
  font-size: 0.9rem;
  color: var(--ink-muted);
  max-width: 46ch;
}

/* ------------------------------------------------------------- form */

.field { margin-bottom: 1.15rem; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 420px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

label {
  display: block;
  font-size: 0.86rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
}

input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}

input.mono { font-family: var(--mono); letter-spacing: 0.01em; }

input:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px oklch(0.80 0.13 78 / 0.22);
}

input::placeholder { color: var(--ink-muted); }

.hint {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--ink-muted);
}

button.primary {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.72rem 1rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--primary-ink);
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 3px;
  cursor: pointer;
  transition: background 140ms var(--ease);
}

button.primary:hover { background: var(--primary-hover); }
button.primary:disabled { opacity: 0.55; cursor: progress; }

button.primary:focus-visible,
button.link:focus-visible,
.decision button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.form-error {
  margin: 0.75rem 0 0;
  font-size: 0.86rem;
  color: var(--refuse);
}

.try {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.try h3 {
  margin: 0 0 0.6rem;
  font-size: 0.86rem;
  font-weight: 600;
}

.try ul { margin: 0; padding: 0; list-style: none; }
.try li { margin-bottom: 0.3rem; }

button.link {
  padding: 0;
  font: inherit;
  font-size: 0.88rem;
  color: var(--primary);
  background: none;
  border: none;
  border-bottom: 1px solid oklch(0.80 0.13 78 / 0.35);
  cursor: pointer;
  text-align: left;
}

button.link:hover { border-bottom-color: var(--primary); }

/* ------------------------------------------------------------ ledger */

/* The instruction as a single line of money, which is the one thing that
   should be legible from across the room. 3.2rem against 0.8rem detail
   text is the scale contrast the page was missing. */
.ledger {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--ink);
}

.ledger-amount {
  font-family: var(--mono);
  font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.2rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.ledger-currency {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--ink-muted);
}

.ledger-to {
  flex-basis: 100%;
  margin-top: 0.5rem;
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--ink-muted);
}

.ledger-to strong { font-weight: 500; color: var(--ink); }

/* ------------------------------------------------------------- spine */

/* Drawn before anything runs, so the agent is legible as a route rather
   than a spinner. Stations fill in as they report. */
.spine {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.spine::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 1px;
  background: var(--line);
}

.spine li {
  position: relative;
  display: grid;
  grid-template-columns: 11px 1fr;
  gap: 1rem;
  padding: 0.7rem 0;
  align-items: start;
}

.spine .marker {
  width: 11px;
  height: 11px;
  margin-top: 0.42rem;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--bg);
  z-index: 1;
}

.spine .label {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-muted);
  transition: color 200ms var(--ease);
}

.spine .detail {
  margin: 0.15rem 0 0;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-muted);
  word-break: break-word;
}

.spine .detail:empty { display: none; }

/* states */

.spine li[data-state="done"] .marker { border-color: var(--pass); background: var(--pass); }
.spine li[data-state="done"] .label { color: var(--ink); }

.spine li[data-state="attention"] .marker { border-color: var(--attention); background: var(--attention); }
.spine li[data-state="attention"] .label { color: var(--ink); }
.spine li[data-state="attention"] .detail { color: var(--attention); }

.spine li[data-state="refused"] .marker { border-color: var(--refuse); background: var(--refuse); }
.spine li[data-state="refused"] .label { color: var(--ink); }
.spine li[data-state="refused"] .detail { color: var(--refuse); }

.spine li[data-state="running"] .marker {
  border-color: var(--primary);
  border-top-color: transparent;
  background: var(--bg);
  animation: ring-spin 700ms linear infinite;
}

.spine li[data-state="running"] .label { color: var(--ink); }
.spine li[data-state="running"] .detail { font-style: italic; }

/* The human step was not required. Distinct from both done and not-reached:
   a hollow marker, because nothing happened here and nothing needed to. */
.spine li[data-state="waived"] .marker {
  border-color: var(--primary);
  border-style: dashed;
  background: var(--bg);
}

.spine li[data-state="waived"] .label { color: var(--ink); }
.spine li[data-state="waived"] .detail { color: var(--ink-muted); font-style: italic; }

/* Not reached, because the run stopped earlier. Dimmed with a real colour
   rather than opacity, which would drop the text to about 2.4:1. */
.spine li[data-state="skipped"] .label { color: var(--ink-faint); font-weight: 400; }
.spine li[data-state="skipped"] .detail { color: var(--ink-faint); }
.spine li[data-state="skipped"] .marker { border-color: var(--line); border-style: dashed; }

@keyframes ring-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- graph */

/* The same route as a graph, laid out from the compiled topology. Nodes are
   positioned HTML so they inherit the type and colour rules already in this
   file; the SVG underneath carries nothing but the edges. */

.route-note {
  margin: -0.4rem 0 1.2rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--ink-faint);
}

/* The graph replaces the station list inside the same element, so this has to
   undo the list styling the fallback needed. Narrow screens scroll it rather
   than squeeze the boxes below a readable width. */
.graph-scroll {
  margin: 0;
  padding: 0.25rem;
  margin-inline: -0.25rem;
  list-style: none;
  overflow-x: auto;
}

.graph {
  position: relative;
  margin: 0 auto;
}

.graph-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.gedge-line { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.gedge-head { fill: var(--line-strong); stroke: none; }

.gedge-line, .gedge-head {
  transition: stroke 220ms var(--ease), fill 220ms var(--ease), opacity 220ms var(--ease);
}

/* An edge the run took. Toned by where it leads, so a refusal never arrives
   in the same colour as a payment continuing. */
[data-edge][data-state="taken"][data-tone="done"] { stroke: var(--pass); }
.gedge-head[data-state="taken"][data-tone="done"] { fill: var(--pass); stroke: none; }
[data-edge][data-state="taken"][data-tone="attention"] { stroke: var(--attention); }
.gedge-head[data-state="taken"][data-tone="attention"] { fill: var(--attention); stroke: none; }
[data-edge][data-state="taken"][data-tone="refused"] { stroke: var(--refuse); }
.gedge-head[data-state="taken"][data-tone="refused"] { fill: var(--refuse); stroke: none; }

.gedge-line[data-state="taken"] { stroke-width: 1.75; }

/* The branch the agent turned down. Still drawn, because the reader needs to
   see that it existed and was rejected. */
.gedge-line[data-state="untaken"] { stroke: var(--line); stroke-dasharray: 3 4; }
.gedge-head[data-state="untaken"] { fill: var(--line); }

.gedge-label {
  position: absolute;
  margin: 0;
  font-size: 0.73rem;
  line-height: 1.35;
  color: var(--ink-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  animation: edge-label 200ms var(--ease) both;
}

.gedge-label[data-tone="attention"] { color: var(--attention); }
.gedge-label[data-tone="refused"] { color: var(--refuse); }

@keyframes edge-label { from { opacity: 0; transform: translateY(-3px); } }

.gnode {
  position: absolute;
  display: grid;
  grid-template-columns: 11px 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.6rem;
  align-content: center;
  height: 58px;
  padding: 0 0.75rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}

.gnode .marker {
  grid-row: 1 / 3;
  align-self: center;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--bg);
}

.gnode .label {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink-muted);
  text-wrap: balance;
  transition: color 200ms var(--ease);
}

.gnode .detail {
  margin: 0.1rem 0 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.3;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gnode .detail:empty { display: none; }

.gnode[data-state="done"] { border-color: var(--line-strong); }
.gnode[data-state="done"] .marker { border-color: var(--pass); background: var(--pass); }
.gnode[data-state="done"] .label { color: var(--ink); }

.gnode[data-state="attention"] { border-color: var(--attention-line); background: var(--attention-bg); }
.gnode[data-state="attention"] .marker { border-color: var(--attention); background: var(--attention); }
.gnode[data-state="attention"] .label { color: var(--ink); }
.gnode[data-state="attention"] .detail { color: var(--attention); }

.gnode[data-state="refused"] { border-color: var(--refuse); background: var(--refuse-bg); }
.gnode[data-state="refused"] .marker { border-color: var(--refuse); background: var(--refuse); }
.gnode[data-state="refused"] .label { color: var(--ink); }
.gnode[data-state="refused"] .detail { color: var(--refuse); }

.gnode[data-state="running"] { border-color: var(--primary); }
.gnode[data-state="running"] .marker {
  border-color: var(--primary);
  border-top-color: transparent;
  animation: ring-spin 700ms linear infinite;
}
.gnode[data-state="running"] .label { color: var(--ink); }
.gnode[data-state="running"] .detail { font-style: italic; }

.gnode[data-state="waived"] .marker { border-color: var(--primary); border-style: dashed; }
.gnode[data-state="waived"] .label { color: var(--ink); }
.gnode[data-state="waived"] .detail { color: var(--ink-muted); font-style: italic; }

.gnode[data-state="skipped"] { border-style: dashed; }
.gnode[data-state="skipped"] .label { color: var(--ink-faint); font-weight: 400; }
.gnode[data-state="skipped"] .detail { color: var(--ink-faint); }
.gnode[data-state="skipped"] .marker { border-color: var(--line); border-style: dashed; }

/* The station where a human is the decision, marked before it happens. */
.spine .station-human .label::after {
  content: "you";
  margin-left: 0.5rem;
  padding: 0.08rem 0.4rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--attention);
  border: 1px solid var(--attention-line);
  border-radius: 2px;
  vertical-align: 0.1em;
}

/* ---------------------------------------------------------- approval */

.approval {
  margin-top: 1.75rem;
  padding: 1.5rem;
  background: var(--surface-raised);
  border: 1px solid var(--attention-line);
  border-radius: 4px;
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.4), 0 8px 24px oklch(0 0 0 / 0.35);
  animation: card-in 260ms var(--ease) both;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.approval h3 {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 0.85rem;
  letter-spacing: -0.01em;
}

.approval .prose {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 1.1rem;
  max-width: 58ch;
  text-wrap: pretty;
}

.reasons {
  margin: 0 0 1.25rem;
  padding: 0.9rem 1rem;
  list-style: none;
  background: var(--attention-bg);
  border-radius: 3px;
}

.reasons li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.92rem;
  margin-bottom: 0.35rem;
}

.reasons li:last-child { margin-bottom: 0; }

.reasons li::before {
  content: "▲";
  position: absolute;
  left: 0;
  top: 0.05em;
  font-size: 0.62rem;
  color: var(--attention);
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem 1.5rem;
  margin: 0 0 1.35rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.facts div { min-width: 0; }

.facts dt {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.15rem;
}

.facts dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.92rem;
  word-break: break-word;
}

.decision {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.decision button {
  flex: 1 1 10rem;
  padding: 0.7rem 1rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 3px;
  cursor: pointer;
  transition: background 140ms var(--ease), border-color 140ms var(--ease);
}

.decision .approve {
  color: var(--primary-ink);
  background: var(--primary);
  border: 1px solid var(--primary);
}

.decision .approve:hover { background: var(--primary-hover); }

.decision .deny {
  color: var(--refuse);
  background: transparent;
  border: 1px solid var(--line-strong);
}

.decision .deny:hover { border-color: var(--refuse); background: var(--refuse-bg); }

/* ------------------------------------------------------------ result */

.result {
  margin-top: 1.75rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  animation: card-in 240ms var(--ease) both;
}

.result[data-kind="refused"] {
  border-color: oklch(0.50 0.12 25);
  background: var(--refuse-bg);
}

.result h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  margin: 0 0 0.6rem;
}

.result p { margin: 0 0 0.9rem; max-width: 58ch; }
.result p:last-child { margin-bottom: 0; }

.sca-link {
  display: inline-block;
  padding: 0.65rem 1.1rem;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--primary-ink);
  background: var(--primary);
  border-radius: 3px;
  text-decoration: none;
}

.sca-link:hover { background: var(--primary-hover); }

.sca-note {
  font-size: 0.84rem;
  color: var(--ink-muted);
  margin-top: 0.7rem !important;
}

/* ----------------------------------------------------------- honesty */

.honesty {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem 4rem;
}

.honesty dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.75rem;
  margin: 0 0 2rem;
}

.honesty dt {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.4rem;
}

.honesty dd {
  margin: 0;
  font-size: 0.92rem;
  max-width: 42ch;
}

.colophon {
  font-size: 0.86rem;
  color: var(--ink-muted);
  margin: 0;
}

.mono { font-family: var(--mono); }

/* ---------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .steps li,
  .approval,
  .result {
    animation: fade-in 1ms linear both;
  }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  * { transition-duration: 1ms !important; }

  /* The marker stops turning but still reads as in-progress: a dashed ring
     plus the word "running" beside it, which was always there. */
  .spine li[data-state="running"] .marker,
  .gnode[data-state="running"] .marker {
    animation: none;
    border-style: dashed;
    border-top-color: var(--primary);
  }

  .gedge-label { animation: fade-in 1ms linear both; }
}

/* ---------------------------------------------------------- callback */

.callback { padding-block: clamp(2.5rem, 6vw, 4.5rem) 4rem; max-width: 60ch; }

.callback h1 { margin-bottom: 0.75rem; }

.lede-line {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--ink);
  margin: 0 0 2.25rem;
  text-wrap: pretty;
}

.callback .facts { margin-top: 2rem; }

/* Two ways on from here: back to the agent, or across to the record of what
   just happened. The primary is the amber button; the second is quieter so the
   pair does not read as two equal choices. */
.callback-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

.callback-secondary {
  font-size: 0.88rem;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: color 140ms var(--ease), border-color 140ms var(--ease);
}

.callback-secondary:hover {
  color: var(--ink);
  border-bottom-color: var(--primary);
}

/* --------------------------------------------------------- internals */

.internals {
  border-top: 1px solid var(--line);
  padding-block: 3rem 1rem;
}

.internals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 2.5rem;
  margin-top: 2rem;
}

.internals h3 {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0 0 0.5rem;
}

.internals article p { font-size: 0.92rem; margin: 0 0 0.8rem; max-width: 42ch; }

/* The one number per panel that carries the claim. */
.stat {
  font-family: var(--mono);
  font-size: 1.05rem !important;
  color: var(--ink);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}

.split-list { margin: 0; padding: 0; list-style: none; }

.split-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.32rem 0;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--line);
}

.split-list li[data-ok="true"] span:last-child { color: var(--pass); }
.split-list li[data-ok="false"] span:last-child { color: var(--refuse); }

.internals details { margin-top: 0.5rem; }

.internals summary,
.case-table-wrap summary {
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--primary);
}

.mermaid-src {
  margin: 0.8rem 0 0;
  padding: 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}

.case-table-wrap { margin-top: 2.5rem; }

.case-table {
  width: 100%;
  margin-top: 1rem;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.case-table th {
  text-align: left;
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line-strong);
}

.case-table td {
  padding: 0.55rem 0.75rem 0.55rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.case-table tr[data-ok="true"] td:last-child { color: var(--pass); }
.case-table tr[data-ok="false"] td:last-child { color: var(--refuse); font-weight: 600; }

.covered-by {
  margin-top: 1.1rem !important;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  font-size: 0.84rem !important;
  color: var(--ink-muted);
}

.covered-by .protects { font-style: italic; }

.split-tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
}

.auto-note {
  padding: 0.75rem 0.9rem;
  background: var(--surface);
  border-left: none;
  border-radius: 3px;
  font-size: 0.88rem !important;
  color: var(--ink-muted);
}

/* ------------------------------------------------------------- trace */

.trace-wrap { margin-top: 1.25rem; }

.trace-wrap summary {
  cursor: pointer;
  font-size: 0.86rem;
  color: var(--primary);
}

.trace-status {
  margin: 0.9rem 0 0.6rem;
  font-size: 0.84rem;
  color: var(--ink-muted);
}

.trace-list { margin: 0; padding: 0; list-style: none; }

.trace-list li {
  display: grid;
  grid-template-columns: minmax(0, 14rem) 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.3rem 0;
  font-size: 0.84rem;
}

.trace-label { color: var(--ink); }

/* Width is the share of the slowest step, so the network call is visibly the
   expensive one and the local checks are visibly not. */
.trace-bar {
  height: 6px;
  width: var(--w);
  min-width: 2px;
  background: var(--primary);
  border-radius: 1px;
}

.trace-ms { color: var(--ink-muted); font-size: 0.78rem; }

@media (max-width: 560px) {
  .trace-list li { grid-template-columns: 1fr auto; }
  .trace-bar { display: none; }
}

/* ---------------------------------------------------------- activity */

.activity { padding-bottom: 4rem; }
.activity .lede { max-width: 64ch; }

.activity-summary {
  margin: 0 0 2rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.activity-table-wrap { overflow-x: auto; }
.activity-table { min-width: 46rem; }
.activity-table td { white-space: nowrap; }
.activity-table td:nth-child(2) { white-space: normal; }

.faint { color: var(--ink-faint); font-size: 0.78rem; }

.pill {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
}

.pill[data-tone="done"] { color: var(--pass); border-color: var(--pass); }
.pill[data-tone="attention"] { color: var(--attention); border-color: var(--attention-line); }
.pill[data-tone="refused"] { color: var(--refuse); border-color: oklch(0.50 0.12 25); }

.masthead .wordmark a { color: inherit; text-decoration: none; }

/* ------------------------------------------------- Ink & Signal additions */

/* Kept in the accessibility tree, out of the visual one. The numbered eyebrow
   is what a sighted reader sees; the h2 is what a screen reader announces and
   what aria-labelledby points at. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

h2.display {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  max-width: 20ch;
  text-wrap: balance;
}

/* ------------------------------------------------------ masthead additions */

.masthead-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* The two views of the same agent. Both links appear on both pages so the pair
   reads as a place you can move between, rather than a one-way trip out. */
.masthead-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.masthead-nav a {
  position: relative;
  padding-block: 0.35rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 140ms var(--ease);
}

.masthead-nav a:hover { color: var(--ink); }

/* The page you are on is marked, and not by colour alone — it carries the rule
   underneath it as well, so the state survives a monochrome screen. */
.masthead-nav a[aria-current="page"] { color: var(--primary); }

.masthead-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.35rem;
  height: 1px;
  background: var(--primary);
}

/* ---------------------------------------------------------------- ticker */

.ticker {
  border-block: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  padding-block: 0.9rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.ticker-track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: max-content;
  padding-left: 2.5rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
  animation: ticker 42s linear infinite;
}

.ticker-sep { color: var(--primary); }

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* A moving strip is decoration, and decoration should stop when asked. */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker { overflow-x: auto; }
}

/* -------------------------------------------------------------- colophon */

.colophon {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 2.5rem;
  margin-top: 3rem;
  border-top: 1px solid var(--line);
}

.colophon-link {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  transition: color 140ms var(--ease);
}

.colophon-link:hover { color: var(--primary); }

.colophon-note {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.colophon-fine {
  margin: 1.25rem 0 4rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
  max-width: 60ch;
}

/* The three honesty labels carry the same state colours used everywhere else:
   green for what is real, amber for what stands in, red for what never runs.
   The words say it too, so the colour is reinforcement and not the message. */
.honesty dl > div:nth-child(1) dt { color: var(--pass); }
.honesty dl > div:nth-child(2) dt { color: var(--attention); }
.honesty dl > div:nth-child(3) dt { color: var(--refuse); }

/* ------------------------------------------------------------- learn */

.learn { padding-bottom: 2rem; }

.lesson-list {
  margin: 0 0 3.5rem;
  padding: 0;
  list-style: none;
  counter-reset: lesson;
}

.lesson {
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}

.lesson:first-child { border-top: none; padding-top: 0; }

.lesson .eyebrow { margin-bottom: 1rem; }

/* The claim, then the reason it was needed here. The first is the concept in
   the abstract; the second is why this agent could not do without it. */
.lesson-what {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink);
  max-width: 62ch;
  text-wrap: pretty;
}

.lesson-why {
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-muted);
  max-width: 62ch;
  text-wrap: pretty;
}

.lesson-source {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  overflow: hidden;
}

/* Closed by default. The page is a list of concepts; the code is the evidence
   you open when you want it, not the thing you scroll past nine times. */
.lesson-path {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0.6rem 0.9rem;
  background: var(--surface-raised);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  cursor: pointer;
  list-style: none;
  transition: color 140ms var(--ease);
}

.lesson-path::-webkit-details-marker { display: none; }

.lesson-path:hover { color: var(--ink); }

/* The disclosure triangle, drawn rather than relying on the platform's. */
.lesson-path::before {
  content: "";
  width: 0;
  height: 0;
  flex: none;
  border-left: 5px solid var(--primary);
  border-block: 4px solid transparent;
  transition: transform 140ms var(--ease);
}

.lesson-source[open] .lesson-path {
  border-bottom: 1px solid var(--line);
}

.lesson-source[open] .lesson-path::before { transform: rotate(90deg); }

.lesson-path:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* Pushed right so the symbol reads first and the location stays secondary. */
.lesson-loc { margin-left: auto; }

.lesson-count { color: var(--ink-faint); }

.lesson-symbol { color: var(--primary); }

/* Code sets its own width. Let it scroll inside the card rather than push the
   page sideways. */
.lesson-source pre {
  margin: 0;
  padding: 1rem 0.9rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--ink);
  tab-size: 4;
}

.lesson-source code { font: inherit; }

.lesson-gone {
  margin: 0;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--refuse);
  border-radius: 4px;
  background: var(--refuse-bg);
  font-size: 0.9rem;
  color: var(--ink);
}

.lesson-loading {
  padding: 2rem 0;
  color: var(--ink-muted);
  font-size: 0.9rem;
}

/* ------------------------------------------------------------- watch */

.watch {
  padding-top: 2.5rem;
  margin-bottom: 4rem;
  border-top: 1px solid var(--line);
}

.watch-card {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  text-decoration: none;
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}

.watch-card:hover {
  border-color: var(--primary);
  background: var(--surface-raised);
}

@media (max-width: 620px) {
  .watch-card { grid-template-columns: minmax(0, 1fr); }
}

/* The play badge sits on the thumbnail rather than in it, so the image stays a
   plain YouTube still and nothing has to be edited if the video changes. */
.watch-thumb {
  position: relative;
  display: block;
  border-radius: 3px;
  overflow: hidden;
  background: var(--surface-raised);
}

.watch-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 0.88;
  transition: opacity 140ms var(--ease);
}

.watch-card:hover .watch-thumb img { opacity: 1; }

.watch-thumb::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-40%, -50%);
  border-left: 16px solid var(--primary);
  border-block: 11px solid transparent;
  filter: drop-shadow(0 2px 6px oklch(0 0 0 / 0.6));
}

.watch-meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.watch-title {
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

.watch-channel {
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.watch-cue {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
}