/*
 * The Anatomy of SATP — tokens and styling.
 *
 * Direction: matched to rafaelapb.github.io — Poppins type, Bulma white/grey
 * surfaces, black navbar and grey-darker footer, 0.25rem radii and the site's
 * soft card shadows. Accents still carry meaning (stage, gateway role,
 * network side) rather than decoration.
 *
 * All values live in the :root block below. A "Night Paper" variant follows,
 * applied both from prefers-color-scheme and from the manual [data-theme]
 * toggle. Poppins is loaded the same way the rest of the site loads it, with a
 * system sans fallback.
 */

:root {
  color-scheme: light;

  /* Surfaces — Bulma white/greys, as used across the site */
  --page: #fff;
  --section: #fafafa;
  --surface: #fff;
  --surface-active: #f5f5f5;

  /* Ink — Bulma text scale */
  --text: #363636;
  --text-secondary: #4a4a4a;
  --text-muted: #7a7a7a;
  --border: #dbdbdb;
  --border-strong: #b5b5b5;

  /* Semantic accents: one colour per concept, reused everywhere */
  --stage-0: #7a7a7a; /* negotiation */
  --stage-1: #257953; /* agreement */
  --stage-2: #b06000; /* locking */
  --stage-3: #cc0f35; /* commitment */
  --client: #2160c4; /* client-role gateway */
  --server: #6b45b4; /* server-role gateway */
  --source-network: #b06000;
  --destination-network: #257953;
  --accent-wash: rgba(33, 96, 196, 0.08);

  /* Chrome mirrored from the site-wide navbar and footer */
  --chrome: #000;
  --chrome-soft: #363636;
  --chrome-text: #f5f5f5;

  /* Shape — Bulma radius and card shadows */
  --radius-sm: 0.25rem;
  --radius: 0.25rem;
  --radius-lg: 0.5rem;
  --shadow-sm: 0 0 15px 0 rgba(0, 0, 0, 0.1);
  --shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 0 30px 0 rgba(0, 0, 0, 0.25);

  /* Spacing ramp */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 4rem;
  --space-6: 6rem;

  /* Type */
  --display: "Poppins", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --body: "Poppins", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono: "SFMono-Regular", Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: clamp(2.25rem, 5vw, 3.5rem);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --duration: 180ms;
}

/* "Night Paper": warm dark ink, parchment-tinted cards, muted accents. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #121212;
    --section: #1c1c1c;
    --surface: #242424;
    --surface-active: #2f2f2f;
    --text: #f5f5f5;
    --text-secondary: #dbdbdb;
    --text-muted: #b5b5b5;
    --border: rgba(245, 245, 245, 0.16);
    --border-strong: rgba(245, 245, 245, 0.32);
    --stage-0: #c9c9c9;
    --stage-1: #48c78e;
    --stage-2: #ffb86c;
    --stage-3: #f14668;
    --client: #7aa9f7;
    --server: #b79cf0;
    --source-network: #ffb86c;
    --destination-network: #48c78e;
    --accent-wash: rgba(122, 169, 247, 0.12);
    --shadow-sm: 0 0 15px 0 rgba(0, 0, 0, 0.5);
    --shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 0 30px 0 rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #17191d;
  --section: #1e2025;
  --surface: #23252a;
  --surface-active: #2c2b28;
  --text: #f2eee3;
  --text-secondary: #d0cbc0;
  --text-muted: #a8a39a;
  --border: rgba(242, 238, 227, 0.16);
  --border-strong: rgba(242, 238, 227, 0.3);
  --stage-0: #cbb884;
  --stage-1: #79c39b;
  --stage-2: #e0a469;
  --stage-3: #e08b8b;
  --client: #8dc2dc;
  --server: #c0a6d6;
  --source-network: #d9a377;
  --destination-network: #8ec9ae;
  --accent-wash: rgba(141, 194, 220, 0.14);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--page);
  color: var(--text);
  font-family: var(--body);
  font-size: var(--text-base);
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-color: currentColor;
}

code,
kbd,
pre {
  font-family: var(--mono);
  font-size: 0.92em;
}

.skip-link {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  left: var(--space-2);
  padding: var(--space-1) var(--space-2);
  position: fixed;
  top: -6rem;
  z-index: 20;
}

.skip-link:focus {
  top: var(--space-2);
}

/* ---------------------------------------------------------------- Chrome */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-navbar {
  align-items: stretch;
  background: var(--chrome);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 3.25rem;
  padding: 0 var(--space-4);
}

.site-navbar a {
  align-items: center;
  color: var(--chrome-text);
  display: flex;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  padding: 0.75rem;
  text-decoration: none;
  text-transform: uppercase;
}

.site-navbar a:hover,
.site-navbar a:focus-visible,
.site-navbar a.is-active {
  background: var(--chrome-soft);
  color: #fff;
}

.site-brand {
  justify-self: start;
}

.site-navbar-links {
  display: flex;
  justify-content: center;
}

.site-key-link {
  justify-self: end;
}

.tutorial-navbar {
  align-items: center;
  backdrop-filter: blur(6px);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
}

.site-title {
  font-family: var(--display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0;
  text-decoration: none;
}

.chapter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.chapter-nav a {
  align-items: baseline;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text-secondary);
  display: inline-flex;
  font-size: var(--text-sm);
  gap: 0.4em;
  padding: 0.3rem 0.75rem;
  text-decoration: none;
  transition: background-color var(--duration) var(--ease),
    border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.chapter-nav a:hover,
.chapter-nav a:focus-visible {
  background: var(--surface-active);
  color: var(--text);
}

.chapter-nav a[data-current="true"] {
  background: var(--accent-wash);
  border-color: var(--client);
  color: var(--text);
}

.chapter-nav-index {
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: var(--text-xs);
}

.theme-toggle {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-family: var(--body);
  font-size: var(--text-xs);
  gap: 0.5em;
  letter-spacing: 0.08em;
  padding: 0.4rem 0.85rem;
  text-transform: uppercase;
  transition: background-color var(--duration) var(--ease);
}

.theme-toggle:hover {
  background: var(--surface-active);
}

.theme-toggle-value {
  color: var(--text);
  letter-spacing: 0.02em;
  text-transform: none;
}

/* No-JS: the toggle cannot do anything, so do not advertise it. */
html:not([data-js="enabled"]) .theme-toggle {
  display: none;
}

/* ------------------------------------------------------------- Structure */

main {
  margin: 0 auto;
  max-width: 76rem;
}

.site-introduction,
.chapter {
  min-height: 100vh;
  padding: var(--space-6) var(--space-4);
}

.site-introduction {
  padding-bottom: var(--space-5);
}

/* Bulma-style alternating section bands. */
.chapter:nth-of-type(even) {
  background: var(--section);
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-3xl);
  margin: var(--space-2) 0 var(--space-3);
  max-width: 26ch;
}

h2 {
  font-size: var(--text-2xl);
  margin: var(--space-2) 0 var(--space-2);
  max-width: 32ch;
}

h3 {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-1);
}

.eyebrow {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  margin: 0;
  text-transform: uppercase;
}

.lede {
  color: var(--text);
  font-size: var(--text-xl);
  line-height: 1.5;
  margin: 0 0 var(--space-3);
  max-width: 34ch;
}

.prose p,
.chapter > p,
.site-introduction > p {
  color: var(--text-secondary);
  max-width: 66ch;
}

.chapter-subtitle {
  color: var(--text-secondary);
  letter-spacing: 0.05rem;
  font-size: var(--text-lg);
  margin-top: 0;
  max-width: 52ch;
}

.chapter-pending {
  border-left: 2px solid var(--border-strong);
  color: var(--text-muted);
  font-size: var(--text-sm);
  padding-left: var(--space-2);
}

/* Todo list under a scaffolded chapter: same muted register as .chapter-pending. */
.chapter-todo {
  margin: 0.4rem 0 0;
  padding-left: calc(var(--space-2) + 1rem);
  border-left: 2px solid var(--border-strong);
  color: var(--text-muted);
  font-size: var(--text-sm);
  display: grid;
  gap: 0.25rem;
  max-width: 62ch;
}


.pipeline {
  counter-reset: pipeline;
  display: grid;
  gap: var(--space-1);
  list-style: none;
  margin: var(--space-3) 0;
  max-width: 40rem;
  padding: 0;
}

.pipeline li {
  align-items: baseline;
  border-left: 2px solid var(--client);
  color: var(--text-secondary);
  counter-increment: pipeline;
  padding: 0.15rem 0 0.15rem var(--space-2);
}

.pipeline li::before {
  color: var(--text-muted);
  content: counter(pipeline) ".";
  font-family: var(--mono);
  font-size: var(--text-xs);
  margin-right: 0.6em;
}

.intro-subhead {
  margin-top: var(--space-5);
}

.intro-cards {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin: var(--space-3) 0 var(--space-4);
}

.intro-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.intro-card:hover {
  box-shadow: var(--shadow-lg);
  transform: scale(1.01);
}

.intro-card p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin: 0;
}

.intro-note {
  color: var(--text-muted);
  font-size: var(--text-sm);
  max-width: 60ch;
}

.toy-data-banner {
  background: var(--surface-active);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin: 0 var(--space-4) var(--space-4);
  padding: var(--space-2);
}

/* ---------------------------------------------------------------- Footer */

.site-footer {
  color: #fff;
  margin-top: var(--space-5);
}

.footer-main {
  background: var(--chrome-soft);
  padding: var(--space-4);
}

.footer-content {
  margin: 0 auto;
  max-width: 72rem;
}

.footer-content h2 {
  color: #fff;
  font-family: var(--body);
  font-size: var(--text-lg);
  margin-top: 0;
}

.footer-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-content li + li {
  margin-top: var(--space-1);
}

.site-footer a {
  color: #fff;
}

.footer-credits {
  background: var(--chrome);
  font-size: var(--text-sm);
  padding: var(--space-2);
  text-align: center;
}

.footer-credits small {
  display: block;
}

/* ------------------------------------------------------------ A11y, misc */

:focus-visible {
  outline: 3px solid var(--client);
  outline-offset: 3px;
}

@media (max-width: 60rem) {
  .site-introduction,
  .chapter {
    padding: var(--space-5) var(--space-3);
  }
}

@media (max-width: 48rem) {
  .site-header {
    position: static;
  }

  .site-navbar {
    display: flex;
    flex-wrap: wrap;
    padding: 0 var(--space-1);
  }

  .site-navbar-links {
    justify-content: flex-start;
    order: 3;
    overflow-x: auto;
    width: 100%;
  }

  .site-navbar a {
    flex: 0 0 auto;
    padding: 0.65rem 0.5rem;
  }

  .site-key-link {
    margin-left: auto;
  }

  .tutorial-navbar {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2);
  }

  .chapter-nav {
    overflow-x: auto;
    width: 100%;
  }

  .site-introduction,
  .chapter {
    padding: var(--space-4) var(--space-2);
    min-height: 0;
  }

  .toy-data-banner {
    margin: 0 var(--space-2) var(--space-3);
  }

  .lede {
    font-size: var(--text-lg);
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Chapter 1 — stage and step reference table
   ========================================================================== */

.stage-table-block {
  margin-top: var(--space-4);
}

.table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.table-filter {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.table-filter select {
  font-family: var(--body);
  font-size: var(--text-sm);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  text-transform: none;
  letter-spacing: 0;
}

.table-count {
  margin: 0 0 0 auto;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.table-scroll {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.step-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.step-table-caption {
  caption-side: bottom;
  padding: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: left;
}

.step-table th {
  position: sticky;
  top: 0;
  background: var(--section);
  text-align: left;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

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

.step-table tr:last-child td {
  border-bottom: 0;
}

.step-table code {
  font-family: var(--mono);
  font-size: 0.8125rem;
}

.cell-index {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.cell-muted {
  color: var(--text-muted);
}

.stage-pill,
.kind-pill {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: var(--text-xs);
  white-space: nowrap;
  border: 1px solid currentColor;
}

.stage-pill[data-stage="0"] { color: var(--stage-0); }
.stage-pill[data-stage="1"] { color: var(--stage-1); }
.stage-pill[data-stage="2"] { color: var(--stage-2); }
.stage-pill[data-stage="3"] { color: var(--stage-3); }

.kind-pill[data-kind="message"] { color: var(--client); }
.kind-pill[data-kind="validation"] { color: var(--text-muted); }
.kind-pill[data-kind="ledger"] { color: var(--stage-2); }

.source-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-xs);
  font-family: var(--mono);
  color: var(--text-secondary);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.1rem 0.4rem;
  background: var(--page);
}

.source-chip:hover,
.source-chip:focus-visible {
  border-color: var(--client);
  color: var(--client);
}

.source-chip-mark {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ==========================================================================
   Chapter 2 — sticky lane diagram and scrolling narration
   ========================================================================== */

.flow-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
  align-items: start;
}

.flow-visual {
  position: sticky;
  top: 8.5rem;
}

.sticky-visual {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-2);
}

.sticky-visual-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sticky-visual-figcaption {
  margin-top: var(--space-1);
}

.sticky-visual-caption {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  min-height: 2.6em;
}

.stage-badge {
  margin: 0;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--stage-0);
}

.stage-badge[data-stage="1"] { color: var(--stage-1); }
.stage-badge[data-stage="2"] { color: var(--stage-2); }
.stage-badge[data-stage="3"] { color: var(--stage-3); }

.lane-diagram {
  width: 100%;
  height: auto;
  display: block;
}

.lane-line {
  stroke: var(--border);
  stroke-width: 1;
}

.lane-line[data-role="client"] { stroke: color-mix(in srgb, var(--client) 40%, var(--border)); }
.lane-line[data-role="server"] { stroke: color-mix(in srgb, var(--server) 40%, var(--border)); }

.actor-box {
  fill: var(--surface);
  stroke: var(--border);
}

.actor-node[data-active="true"] .actor-box {
  stroke: var(--client);
  fill: var(--accent-wash);
}

.actor-node[data-role="server"][data-active="true"] .actor-box {
  stroke: var(--server);
}

.actor-node[data-validating="true"] .actor-box {
  stroke-dasharray: 4 3;
}

.actor-icon { color: var(--text-secondary); }
.actor-icon use { stroke: currentColor; fill: none; stroke-width: 1.6; }

.actor-label {
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 500;
  fill: var(--text);
}

.actor-role {
  font-family: var(--body);
  font-size: 10px;
  fill: var(--text-muted);
}

.arrowhead { fill: var(--border-strong); }

.step-arrow,
.step-ledger-arrow {
  stroke: var(--border-strong);
  stroke-width: 1.2;
  opacity: 0.5;
}

.step-ledger-arrow { stroke-dasharray: 3 3; }

.step-label {
  font-family: var(--mono);
  font-size: 8.5px;
  fill: var(--text-muted);
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
}

.step-check {
  fill: var(--page);
  stroke: var(--border-strong);
  opacity: 0.5;
}

.step-check-icon use { stroke: var(--text-muted); fill: none; stroke-width: 2.4; }

.step-ledger-icon use { stroke: var(--stage-2); fill: none; stroke-width: 1.8; }

.step-hit {
  fill: transparent;
  cursor: pointer;
}

.lane-step[data-state="done"] .step-arrow,
.lane-step[data-state="done"] .step-ledger-arrow {
  opacity: 0.85;
  stroke: var(--text-muted);
}

.lane-step[data-state="active"] .step-arrow,
.lane-step[data-state="active"] .step-ledger-arrow {
  opacity: 1;
  stroke-width: 2.2;
  stroke: var(--client);
}

.lane-step[data-role="server"][data-state="active"] .step-arrow {
  stroke: var(--server);
}

.lane-step[data-state="active"] .step-label {
  opacity: 1;
  fill: var(--text);
}

.lane-step[data-state="active"] .step-check {
  stroke: var(--stage-1);
  stroke-width: 2;
  fill: var(--surface);
}

.ledger-rail { stroke: var(--border); stroke-width: 2; }

.ledger-block {
  fill: var(--surface-active);
  stroke: var(--border);
}

.ledger-band[data-active="true"] .ledger-block {
  fill: var(--accent-wash);
}

.ledger-badge-box {
  fill: var(--page);
  stroke: var(--border-strong);
}

.ledger-band[data-side="source"] .ledger-badge-box { stroke: var(--source-network); }
.ledger-band[data-side="destination"] .ledger-badge-box { stroke: var(--destination-network); }

.ledger-badge-text {
  font-family: var(--body);
  font-size: 10px;
  fill: var(--text);
}

.ledger-label {
  font-family: var(--body);
  font-size: 10.5px;
  fill: var(--text-muted);
}

.packet-glyph {
  opacity: 0;
  transition: opacity 120ms linear;
}

.packet-glyph[data-visible="true"] { opacity: 1; }

.packet-disc {
  fill: var(--client);
}

.packet-glyph[data-stage="2"] .packet-disc { fill: var(--stage-2); }
.packet-glyph[data-stage="3"] .packet-disc { fill: var(--stage-3); }

.packet-icon use { stroke: var(--page); fill: none; stroke-width: 2; }

.stepper-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding-top: var(--space-1);
  border-top: 1px solid var(--border);
}

.control {
  font-family: var(--body);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}

.control:hover { border-color: var(--border-strong); color: var(--text); }

.control[aria-pressed="true"] {
  border-color: var(--client);
  color: var(--client);
  background: var(--accent-wash);
}

.control-speeds { display: inline-flex; gap: 0.2rem; }

.control-status {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.step-item {
  position: relative;
  padding-left: 0;
}

.step-item-button {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 0.8rem;
  cursor: pointer;
  font-family: var(--body);
  color: var(--text-secondary);
  opacity: 0.72;
  transition: opacity var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.step-item[data-state="active"] .step-item-button {
  opacity: 1;
  color: var(--text);
  border-left-color: var(--client);
  box-shadow: var(--shadow-sm);
}

.step-item[data-state="active"][data-role="server"] .step-item-button {
  border-left-color: var(--server);
}

.step-item[data-state="done"] .step-item-button { opacity: 0.85; }

.step-item-index {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--text-muted);
  padding-top: 0.15rem;
}

.step-item-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }

.step-item-tag {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--client);
  word-break: break-word;
}

.step-item[data-role="server"] .step-item-tag { color: var(--server); }
.step-item[data-kind="ledger"] .step-item-tag { color: var(--stage-2); }

.step-item-title { font-size: var(--text-sm); }

.step-item-note {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.step-item-kind {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.step-item .source-chip { margin: 0.35rem 0 0 2.4rem; }

/* ==========================================================================
   Chapter 3 — message explorer
   ========================================================================== */

.message-explorer-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
  align-items: start;
}

.message-explorer-side { position: static; }

.scenario-card {
  background: var(--section);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
}

.scenario-card h3 { margin: 0 0 0.4rem; font-size: var(--text-base); }
.scenario-card p { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }

.message-picker { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }

.message-picker-button {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  font-family: var(--body);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.7rem;
  cursor: pointer;
  color: var(--text-secondary);
}

.message-picker-item[data-state="active"] .message-picker-button {
  border-left-color: var(--stage-1);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.message-picker-index { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: var(--text-xs); }
.message-picker-main { display: flex; flex-direction: column; min-width: 0; }
.message-picker-label { font-size: var(--text-sm); }
.message-picker-type { font-family: var(--mono); font-size: var(--text-xs); color: var(--text-muted); }
.message-picker-direction { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }

.message-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-2);
}

.message-card-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  justify-content: space-between;
  align-items: start;
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-1);
  margin-bottom: var(--space-1);
}

.message-card-type {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--stage-1);
}

.message-card-title { margin: 0.2rem 0; font-size: var(--text-lg); }

.message-card-summary { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); max-width: 46ch; }

.message-card-views { display: inline-flex; gap: 0.25rem; }

.message-card[data-view="explained"] .is-raw,
.message-card[data-view="raw"] .is-explained { display: none; }

.field-list { list-style: none; margin: 0; padding: 0 0 0 0; display: flex; flex-direction: column; gap: 0.15rem; }
.field-list[data-depth="1"], .field-list[data-depth="2"], .field-list[data-depth="3"] {
  padding-left: 0.85rem;
  border-left: 1px solid var(--border);
  margin-top: 0.3rem;
}

.field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.2rem 0;
}

.field-row[data-hash="true"] {
  background: var(--accent-wash);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.4rem;
}

.field-key { font-family: var(--mono); font-size: 0.8125rem; color: var(--text); }

.field-value {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  word-break: break-all;
}

.field-value.is-literal { color: var(--client); }
.field-value.is-null { color: var(--text-muted); }

.field-group { width: 100%; }

.field-group summary {
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.2rem 0;
}

.field-group-count { font-size: var(--text-xs); color: var(--text-muted); }

.field-annotation { position: relative; display: inline-flex; }

.field-annotation-trigger {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--page);
  color: var(--text-muted);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.field-annotation-trigger:hover { color: var(--client); border-color: var(--client); }

.field-annotation-panel {
  display: none;
  position: absolute;
  z-index: 5;
  top: 1.5rem;
  left: 0;
  width: min(24rem, 70vw);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-1);
}

.field-annotation[data-open="true"] .field-annotation-panel { display: block; }

.field-annotation-panel p { margin: 0 0 0.35rem; font-size: var(--text-sm); }
.field-annotation-why { color: var(--text-secondary); }
.field-annotation-type { font-size: var(--text-xs); color: var(--text-muted); }

.raw-json {
  margin: 0;
  overflow-x: auto;
  background: var(--section);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-1);
  font-size: 0.8125rem;
}

.message-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.2rem 0.75rem;
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
}

.message-meta dt { color: var(--text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.message-meta dd { margin: 0; }

.message-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: var(--space-1);
}

.message-sources-label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

.toy-banner {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  border-top: 1px dashed var(--border);
  padding-top: var(--space-1);
}

.toy-banner-mark {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--stage-2);
  white-space: nowrap;
}

.hash-chain-block {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
}

.hash-chain-block h3 { margin: 0 0 0.4rem; }
.hash-chain-intro { margin: 0 0 var(--space-2); max-width: 62ch; color: var(--text-secondary); }

/* The chain reads as blocks joined by hash pointers, so each card gets a block
   index, a monotonic sequence id, and a drawn connector to its predecessor. */
.hash-chain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-2);
}

.hash-chain-link {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--stage-1);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-2);
}

/* Connector between consecutive blocks: a short segment with a small node,
   drawn only between siblings so the first block has no dangling link. */
.hash-chain-link + .hash-chain-link::before {
  content: "";
  position: absolute;
  top: 1.35rem;
  left: calc(-1 * var(--space-2));
  width: var(--space-2);
  height: 2px;
  background: var(--stage-1);
  opacity: 0.55;
}

.hash-chain-link + .hash-chain-link::after {
  content: "";
  position: absolute;
  top: calc(1.35rem - 3px);
  left: calc(-1 * var(--space-2) / 2 - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--stage-1);
}

.hash-chain-link[data-root="true"] { border-top-color: var(--border-strong); }

.hash-chain-block-index {
  display: inline-block;
  margin-bottom: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--section);
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.hash-chain-head { margin: 0 0 0.3rem; display: flex; flex-direction: column; gap: 0.15rem; font-size: var(--text-sm); }
.hash-chain-head code { font-family: var(--mono); font-size: var(--text-xs); color: var(--text-muted); }
.hash-chain-seq { display: flex; align-items: baseline; gap: 0.35rem; margin-top: 0.15rem; }
.hash-chain-seq-label { font-family: var(--mono); font-size: var(--text-xs); color: var(--text-muted); }
.hash-chain-seq-value {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--stage-1);
  background: var(--section);
  border-radius: var(--radius-sm, 4px);
  padding: 0 0.3rem;
}
.hash-chain-body { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.hash-chain-target { margin: 0.3rem 0 0; font-size: var(--text-xs); color: var(--stage-1); display: flex; gap: 0.25rem; }
.hash-chain-target.is-genesis { color: var(--text-muted); }
.hash-chain-target-arrow { transform: rotate(180deg); }

@media (max-width: 720px) {
  .hash-chain-link + .hash-chain-link::before,
  .hash-chain-link + .hash-chain-link::after { display: none; }
}


/* ==========================================================================
   References
   ========================================================================== */

.reference-list {
  list-style: none;
  counter-reset: reference;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.reference-list li {
  counter-increment: reference;
  position: relative;
  padding-left: 2.5rem;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  scroll-margin-top: 9rem;
}

.reference-list li::before {
  content: "[" counter(reference) "]";
  position: absolute;
  left: 0;
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.reference-list li:target {
  background: var(--accent-wash);
  border-radius: var(--radius-sm);
}

.reference-list cite { font-style: italic; }

.reference-back {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-decoration: none;
  margin-left: 0.35rem;
}

.ref-link {
  font-size: 0.75em;
  vertical-align: super;
  text-decoration: none;
  color: var(--client);
  padding: 0 0.1em;
}

.ref-link:hover { text-decoration: underline; }

/* ==========================================================================
   Responsive: single column below 60rem, no stickiness on small screens
   ========================================================================== */

@media (max-width: 60rem) {
  .flow-layout,
  .message-explorer-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .flow-visual,
  .message-explorer-side {
    position: static;
  }
}

@media (prefers-reduced-motion: reduce) {
  .step-item-button,
  .step-label,
  .packet-glyph {
    transition: none;
  }
}

/* Screen-reader-only text: used by the live regions that announce step changes. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The two sticky bars are ~8.5rem tall: keep anchored sections clear of them. */
.chapter,
.site-introduction {
  scroll-margin-top: 9rem;
}

/* ==========================================================================
   Chapter 2 — framed, independently scrollable step queue
   ========================================================================== */

.flow-narration {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-2);
  overflow-y: auto;
  overscroll-behavior: contain;
  max-height: 32rem;
  position: sticky;
  top: 8.5rem;
}

@media (min-width: 61rem) {
  .flow-narration { max-height: none; }
}

.flow-narration:focus-visible {
  outline: 2px solid var(--client);
  outline-offset: 2px;
}

/* A stage that is not part of the SATP core draft says so here, not in the badge. */
.stage-note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  border-left: 2px solid var(--border);
  padding-left: 0.6rem;
}

.stage-note[hidden] { display: none; }

/* Pre-protocol hand-offs: user to application, application to gateway. */
.prologue-arrow {
  stroke: var(--text-muted);
  stroke-width: 1.2;
  stroke-dasharray: 3 3;
}

.prologue-caption,
.step-label.is-prologue {
  fill: var(--text-muted);
  font-family: var(--mono);
  font-size: 8px;
}

/* ==========================================================================
   Chapter 1 — hoverable step names
   ========================================================================== */

.step-hover {
  position: relative;
  display: inline-block;
  cursor: help;
  border-bottom: 1px dotted var(--text-muted);
}

.step-tooltip {
  position: absolute;
  left: 0;
  top: calc(100% + 0.4rem);
  z-index: 20;
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  width: 18rem;
  padding: 0.6rem 0.7rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
  font-family: var(--body);
  font-size: var(--text-xs);
  line-height: 1.45;
  white-space: normal;
}

.step-tooltip-meta { color: var(--text-muted); }

.step-hover:hover .step-tooltip,
.step-hover:focus .step-tooltip,
.step-hover:focus-within .step-tooltip {
  display: flex;
}

.step-table tbody tr:hover { background: var(--section); }

.caption-link { color: inherit; }

/* ==========================================================================
   Chapter 3 — keep the sticky column inside the viewport
   ========================================================================== */

.message-explorer-side {
  /* Not sticky: a tall scenario card plus picker used to run past the viewport and
     sit on top of the prose below. It scrolls with the page instead. */
  position: static;
  max-height: none;
  overflow: visible;
}

.hash-chain-block { grid-column: 1 / -1; }

@media (max-width: 60rem) {
  .message-explorer-side {
    max-height: none;
    overflow: visible;
  }
}

/* Ledger steps: the smart contract call that replaces a wire message. */
.payload-label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--stage-2);
}

.payload-args {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.payload-arg code { color: var(--text-muted); }
.payload-arg { display: flex; gap: 0.4rem; }

/* Hash chain block reads as prose in Chapter 1, not as a grid cell. */
#hash-chain-anatomy .hash-chain-block {
  grid-column: auto;
  margin-top: var(--space-3);
}

/* Section headings inside a chapter (e.g. the step table under the flow diagram). */
.chapter-section-title {
  margin: var(--space-4) 0 0.4rem;
  font-size: var(--text-lg);
}

.chapter-section-intro {
  margin: 0 0 var(--space-2);
  max-width: 62ch;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.step-hover.is-message code { font-size: var(--text-xs); }

/* Wire-message tooltip: keep the field/description pairs on their own rows. */
.step-hover.is-message .step-tooltip { width: 22rem; }
.step-hover.is-message .payload-arg {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.1rem;
}