/* 057 MANUAL — the reading surface shared by the six pages under /docs.
   Loaded after style.css, which supplies the tokens, the base element styles
   and .grain. Nothing here touches the homepage's classes. */

:root {
  /* Status colours, shared with the field renderer. Same values the
     instrument itself uses for running / waiting / failed / completed. */
  --run: rgba(240, 195, 116, 0.85);
  --wait: rgba(150, 175, 196, 0.85);
  --fail: rgba(206, 104, 90, 0.9);
  --ok: rgba(180, 210, 175, 0.8);

  --rule: rgba(230, 227, 219, 0.14);
  --rule-soft: rgba(230, 227, 219, 0.07);
  --panel: #040506;
  --panel-ring: 0 0 0 1px rgba(230, 227, 219, 0.08);

  /* The reading measure. 680px is the approved default. */
  --measure: 680px;
}

.manual {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* The homepage is built out of divs and needs none of these; the manual is
   real prose, so the browser's own margins, bullets and serif <pre> have to go.
   Scoped to .manual so nothing here can reach the homepage. */
.manual h1,
.manual h2,
.manual h3 { margin: 0; font-weight: 400; font-family: inherit; }
.manual p { margin: 0; }
.manual ul { margin: 0; padding: 0; list-style: none; }
.manual pre { margin: 0; font-family: inherit; }
.manual code {
  font-family: inherit;
  background: rgba(230, 227, 219, 0.06);
  padding: 1px 5px;
  color: rgba(230, 227, 219, 0.92);
}
.manual .code code, .manual .run-cmd code { background: none; padding: 0; }
.manual strong { font-weight: 500; color: rgba(230, 227, 219, 0.94); }
.manual em { font-style: italic; }



.wrap {
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
  padding: 0 clamp(22px, 7vw, 100px);
}

/* ---------------------------------------------------------------- bars */

.mbar {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.6vw, 18px);
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--hair);
}
.mbar .mark { border: none; }
.mbar .mark:hover { color: var(--ink); }

.footbar { border-top: 1px solid var(--hair); }
.footbar .mbar {
  padding: 22px 0 40px;
  border-bottom: none;
  flex-wrap: wrap;
  gap: 16px;
}
.footbar .mark { font-size: 11px; letter-spacing: 0.3em; color: rgba(230, 227, 219, 0.6); }
.footbar .imprint { letter-spacing: 0.24em; color: rgba(230, 227, 219, 0.34); }
.footbar .tag-right { color: rgba(230, 227, 219, 0.28); }

/* ------------------------------------------------------- sticky navbar */

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

.navstrip { position: relative; overflow: hidden; }
.navstrip canvas { display: block; width: 100%; height: 36px; }
.navstrip .veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(5, 6, 8, 0.55) 0%, rgba(5, 6, 8, 0.1) 45%, rgba(5, 6, 8, 0.86) 100%);
}

.docnav {
  display: flex;
  align-items: baseline;
  gap: clamp(11px, 1.4vw, 20px);
  padding: 9px 0 11px;
  flex-wrap: wrap;
}
.docnav a { border: none; white-space: nowrap; }
.docnav a:hover, .docnav a:hover .l { color: var(--ink); }

.docnav-home {
  font-size: 8.5px;
  letter-spacing: 0.28em;
  color: rgba(230, 227, 219, 0.44);
}
.docnav-home.is-on { color: var(--ink); }
.docnav-sep { font-size: 8.5px; color: rgba(230, 227, 219, 0.18); }

.docnav-item { display: flex; align-items: baseline; gap: 6px; }
.docnav-item .n {
  font-size: 8px;
  letter-spacing: 0.2em;
  color: rgba(230, 227, 219, 0.22);
}
.docnav-item .l {
  font-size: 8.5px;
  letter-spacing: 0.24em;
  color: rgba(230, 227, 219, 0.42);
}
.docnav-item.is-on .n { color: rgba(240, 195, 116, 0.8); }
.docnav-item.is-on .l { color: var(--ink); }

.docnav-state {
  margin-left: auto;
  font-size: 8px;
  letter-spacing: 0.22em;
  color: rgba(230, 227, 219, 0.22);
  white-space: nowrap;
}

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

.columns {
  flex: 1;
  display: flex;
  gap: 56px;
  align-items: flex-start;
}

.rail {
  display: none;
  position: sticky;
  top: 104px;
  width: 262px;
  flex-shrink: 0;
  padding-top: 74px;
  flex-direction: column;
  gap: 2px;
}
.rail-title {
  font-size: 8.5px;
  letter-spacing: 0.24em;
  color: rgba(230, 227, 219, 0.28);
  padding-bottom: 12px;
}
.rail a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  border: none;
  border-top: 1px solid rgba(230, 227, 219, 0.06);
}
.rail a .n {
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: rgba(230, 227, 219, 0.28);
  flex-shrink: 0;
}
.rail a .t {
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: rgba(230, 227, 219, 0.62);
}
.rail a:hover .t, .rail a.is-on .t { color: var(--ink); }

.reading {
  flex: 1;
  min-width: 0;
  max-width: var(--measure);
  padding-bottom: 110px;
}

/* Inline contents, for screens with no room for the rail. */
.contents {
  display: none;
  padding-top: 34px;
  flex-direction: column;
}
.contents-title {
  font-size: 8.5px;
  letter-spacing: 0.24em;
  color: rgba(230, 227, 219, 0.28);
  padding-bottom: 10px;
}
.contents a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border: none;
  border-top: 1px solid var(--rule-soft);
}
.contents a .n {
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: rgba(230, 227, 219, 0.28);
  flex-shrink: 0;
}
.contents a .t {
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: rgba(230, 227, 219, 0.7);
}
.contents-end { height: 1px; background: var(--rule-soft); }

/* ----------------------------------------------------- document shells */

.doc-head { padding-top: clamp(40px, 5vw, 74px); }
.doc-kicker {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 24px;
}
.doc-kicker .n { font-size: 9.5px; letter-spacing: 0.24em; color: rgba(230, 227, 219, 0.34); }
.doc-kicker .l { font-size: 10.5px; letter-spacing: 0.28em; color: rgba(230, 227, 219, 0.6); }
.doc-kicker .rule { flex: 1; height: 1px; background: var(--hair); }
.doc-kicker.is-danger .n { color: rgba(206, 104, 90, 0.7); }

h1 {
  font-size: clamp(21px, 2.3vw, 31px);
  line-height: 1.26;
  letter-spacing: -0.003em;
  color: var(--ink);
  text-wrap: pretty;
}
.doc-lede {
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: clamp(13px, 0.95vw, 14.5px);
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: rgba(230, 227, 219, 0.58);
  text-wrap: pretty;
}
.doc-lede.tight { line-height: 1.8; }

/* The one line the whole instrument rests on. Rules above and below, never a box. */
.creed {
  margin-top: 30px;
  padding: 22px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-wrap: pretty;
}

/* --------------------------------------------------------- section head */

/* The shorthand, not padding-top: style.css indents the homepage's bare
   <section>s by the page gutter, and the manual's sections sit inside the
   reading column.

   scroll-margin-top is what makes plain `#section` links land clear of the
   sticky navbar, so nothing has to intercept the scroll. */
.manual .sec {
  padding: clamp(38px, 4.4vw, 62px) 0 0;
  scroll-margin-top: 96px;
}
.sec-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}
.sec-head .n {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: rgba(230, 227, 219, 0.34);
  flex-shrink: 0;
}
.sec-head h2 {
  font-size: clamp(14px, 1.05vw, 16px);
  letter-spacing: 0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.sec-anchor {
  margin-left: auto;
  font-size: 10px;
  color: rgba(230, 227, 219, 0.2);
  border: none;
  flex-shrink: 0;
}
.sec-anchor:hover { color: rgba(230, 227, 219, 0.7); border: none; }

.manual .sec--danger { padding: clamp(44px, 5vw, 72px) 0 0; }
.sec--danger .sec-head { border-top-color: rgba(206, 104, 90, 0.4); }
.sec--danger .sec-head .n { color: rgba(206, 104, 90, 0.7); }

h3 {
  margin-top: 32px;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: rgba(230, 227, 219, 0.86);
}
h3.is-danger { color: rgba(206, 104, 90, 0.9); }

/* ------------------------------------------------------------ prose */

.prose {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: clamp(12.5px, 0.9vw, 13.5px);
  line-height: 1.95;
  letter-spacing: 0.015em;
  color: rgba(230, 227, 219, 0.76);
  text-wrap: pretty;
}
.prose.after-rule { padding-top: 14px; }
.prose .aside {
  color: rgba(230, 227, 219, 0.52);
  font-size: 11.5px;
  line-height: 1.85;
}

/* A quiet remark set off by a rule rather than a box. */
.note {
  margin-top: 20px;
  border-left: 1px solid var(--rule);
  padding-left: 20px;
  font-size: 11.5px;
  line-height: 1.85;
  letter-spacing: 0.025em;
  color: rgba(230, 227, 219, 0.5);
  text-wrap: pretty;
}
.note strong { color: rgba(230, 227, 219, 0.7); }
.note.loud {
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: rgba(230, 227, 219, 0.62);
}

/* Flagged remarks. The left rule carries the severity, never a filled box. */
.flag {
  margin-top: 20px;
  border-left: 1px solid var(--rule);
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.flag .label { font-size: 9px; letter-spacing: 0.26em; }
.flag .body {
  font-size: 12.5px;
  line-height: 1.9;
  letter-spacing: 0.015em;
  color: rgba(230, 227, 219, 0.86);
  text-wrap: pretty;
}
.flag .body.quiet {
  font-size: 11.5px;
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: rgba(230, 227, 219, 0.6);
}
.flag--danger { border-left-color: rgba(206, 104, 90, 0.55); }
.flag--danger .label { color: rgba(206, 104, 90, 0.9); }
.flag--caution { border-left-color: rgba(240, 195, 116, 0.5); }
.flag--caution .label { color: rgba(240, 195, 116, 0.85); }
.flag--caution .body { color: rgba(230, 227, 219, 0.82); }
.flag--note { border-left-color: rgba(150, 175, 196, 0.4); }
.flag--note .label { color: rgba(150, 175, 196, 0.85); }
.flag--note .body { font-size: 12px; color: rgba(230, 227, 219, 0.7); }
.flag .cmd {
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--ink);
}

/* ------------------------------------------------------------- registers */

/* A register is a list of key/value rows on hairlines. Two or three columns
   on a wide screen; stacked, with the labels carried inline, on a narrow one. */
.reg { margin-top: 22px; border-top: 1px solid var(--rule); }
.reg.no-cap { border-top: none; }
.reg-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 0 36px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.reg-k {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: rgba(230, 227, 219, 0.5);
}
.reg-v {
  font-size: 12.5px;
  line-height: 1.9;
  letter-spacing: 0.015em;
  color: rgba(230, 227, 219, 0.76);
  text-wrap: pretty;
}
.reg-v.tight { line-height: 1.85; }

/* A key that is an environment variable: name over default. */
.reg-var { display: flex; flex-direction: column; gap: 4px; }
.reg-var .name {
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: rgba(230, 227, 219, 0.88);
}
.reg-var .default {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(230, 227, 219, 0.36);
}
.reg-row .reg-v.var-body {
  font-size: 12px;
  color: rgba(230, 227, 219, 0.72);
}

/* Three-column register: source / read from / override. */
.reg--3 .reg-row { grid-template-columns: 172px 1fr 172px; gap: 0 24px; }
.reg-head { padding: 11px 0; border-bottom: 1px solid var(--hair); }
.reg-head > * { font-size: 8.5px; letter-spacing: 0.22em; color: rgba(230, 227, 219, 0.34); }
.reg-name { font-size: 11px; letter-spacing: 0.14em; color: rgba(230, 227, 219, 0.86); }
.reg-path { font-size: 11px; letter-spacing: 0.01em; color: rgba(230, 227, 219, 0.6); overflow-wrap: anywhere; }
.reg-env { font-size: 10px; letter-spacing: 0.08em; color: rgba(230, 227, 219, 0.52); overflow-wrap: anywhere; }
.reg-env.none { color: rgba(230, 227, 219, 0.24); }
.reg-cell { display: flex; align-items: baseline; gap: 10px; }
.reg-cell .inline-k {
  display: none;
  font-size: 8px;
  letter-spacing: 0.2em;
  color: rgba(230, 227, 219, 0.3);
  flex-shrink: 0;
  width: 74px;
}
.reg-kept { font-size: 11.5px; letter-spacing: 0.02em; color: rgba(230, 227, 219, 0.72); }

/* Status keys carry the instrument's own colours. */
.k-run { color: var(--run); }
.k-wait { color: var(--wait); }
.k-fail { color: var(--fail); }
.k-ok { color: var(--ok); }
.k-plain { color: rgba(230, 227, 219, 0.6); }
.k-dim { color: rgba(230, 227, 219, 0.42); }
.k-ink { color: rgba(230, 227, 219, 0.88); font-size: 10px; letter-spacing: 0.16em; }

/* A row whose key is a sentence rather than a label. */
.reg--survives .reg-k {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(230, 227, 219, 0.82);
}
.reg--survives .reg-v { display: flex; gap: 14px; align-items: baseline; }
.reg--survives .verdict { font-size: 9px; letter-spacing: 0.2em; flex-shrink: 0; }
.reg-row.is-deleted { border-bottom-color: rgba(206, 104, 90, 0.3); }

/* --------------------------------------------------------------- lists */

.dashed { padding-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.dashed li {
  display: flex;
  gap: 14px;
  font-size: clamp(12.5px, 0.9vw, 13.5px);
  line-height: 1.9;
  letter-spacing: 0.015em;
  color: rgba(230, 227, 219, 0.76);
  text-wrap: pretty;
}
.dashed li::before { content: '\2014'; color: rgba(230, 227, 219, 0.28); flex-shrink: 0; }

.ruled { padding-top: 20px; display: flex; flex-direction: column; }
.ruled li {
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 12.5px;
  line-height: 1.85;
  letter-spacing: 0.015em;
  color: rgba(230, 227, 219, 0.76);
  text-wrap: pretty;
}
.ruled.crossed li { display: flex; gap: 16px; align-items: baseline; }
.ruled.crossed li::before {
  content: '\00d7';
  font-size: 9px;
  color: rgba(230, 227, 219, 0.24);
  flex-shrink: 0;
  width: 12px;
}

/* ------------------------------------------------------ panels and code */

.panel {
  position: relative;
  background: var(--panel);
  box-shadow: var(--panel-ring);
  margin-top: 22px;
}
.panel .grain { z-index: 1; }

.run {
  padding: clamp(24px, 3vw, 36px) clamp(20px, 2.4vw, 30px) clamp(26px, 3vw, 34px);
  margin-top: 24px;
}
.run-label {
  position: relative;
  font-size: 9px;
  letter-spacing: 0.28em;
  color: rgba(230, 227, 219, 0.34);
  padding-bottom: 16px;
}
.run-cmd {
  position: relative;
  font-size: clamp(23px, 2.6vw, 34px);
  letter-spacing: 0.02em;
  color: var(--ink);
}

.code {
  background: var(--panel);
  box-shadow: var(--panel-ring);
  padding: 16px 20px;
  margin-top: 16px;
  overflow-x: auto;
}
.code pre {
  font-size: clamp(11.5px, 0.85vw, 13px);
  line-height: 1.95;
  letter-spacing: 0.01em;
  color: rgba(230, 227, 219, 0.88);
  white-space: pre;
}
.code.commands { padding: 18px 20px; margin-top: 22px; }
.code.commands pre { font-size: 13px; line-height: 2.05; }
.code .rem { color: rgba(230, 227, 219, 0.38); }
.code .rem-danger { color: rgba(206, 104, 90, 0.85); }

/* The command list, for screens too narrow for aligned comments. */
.cmdlist {
  display: none;
  background: var(--panel);
  box-shadow: var(--panel-ring);
  margin-top: 22px;
  padding: 4px 18px 8px;
}
.cmdlist div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.cmdlist div:last-child { border-bottom: none; }
.cmdlist .c { font-size: 13px; letter-spacing: 0.02em; color: rgba(230, 227, 219, 0.92); }
.cmdlist .d { font-size: 11px; line-height: 1.7; letter-spacing: 0.02em; color: rgba(230, 227, 219, 0.44); }
.cmdlist .d.danger { color: rgba(206, 104, 90, 0.85); }

/* ------------------------------------------------------- source entries */

.sec-head + .source { margin-top: 30px; }
.source { padding: 26px 0; border-top: 1px solid var(--hair); }
.source.is-last { border-bottom: 1px solid var(--hair); }
.source .prose { padding-top: 0; }
.source-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
}
.source-head .name { font-size: 12px; letter-spacing: 0.2em; color: var(--ink); }
.source-head .badge { font-size: 9px; letter-spacing: 0.1em; color: rgba(230, 227, 219, 0.4); }
.source-head .badge.is-always { letter-spacing: 0.16em; color: rgba(180, 210, 175, 0.75); }

/* ------------------------------------------------- the network statement */

.claim {
  padding-top: 20px;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.8;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.qualify {
  padding-top: 24px;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: rgba(230, 227, 219, 0.5);
}
.qualify + .reg { margin-top: 16px; }

/* Two conditions that look alike and are not. */
.conditions { margin-top: 24px; display: flex; flex-direction: column; }
.condition { padding: 20px 0; border-top: 1px solid var(--hair); }
.condition.is-last { border-bottom: 1px solid var(--hair); }
.condition .prose { padding-top: 0; }
.condition-name {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: rgba(230, 227, 219, 0.82);
  padding-bottom: 12px;
}

/* -------------------------------------------------------------- plates */

.plate { position: relative; background: var(--panel); box-shadow: var(--panel-ring); margin-top: 22px; }
.plate canvas { display: block; width: 100%; height: clamp(180px, 17vw, 236px); }
.plate .fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 58px; pointer-events: none;
  background: linear-gradient(to top, rgba(4, 5, 7, 0.95) 0%, rgba(4, 5, 7, 0.82) 42%, rgba(4, 5, 7, 0) 100%);
}
.plate .tl, .plate .bl, .plate .br {
  position: absolute;
  pointer-events: none;
  font-size: 8px;
}
.plate .tl { left: 14px; top: 11px; letter-spacing: 0.22em; color: rgba(230, 227, 219, 0.44); }
.plate .bl { left: 14px; bottom: 11px; letter-spacing: 0.2em; color: rgba(230, 227, 219, 0.6); }
.plate .br { right: 14px; bottom: 11px; letter-spacing: 0.2em; color: rgba(230, 227, 219, 0.6); }
.plate .bl.is-run { color: rgba(240, 195, 116, 0.9); }

.plates-note {
  padding-top: 16px;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(230, 227, 219, 0.3);
}

/* ------------------------------------------------------------- the index */

.manifest {
  padding-top: clamp(48px, 6vw, 88px);
}
.manifest-kicker {
  font-size: 9.5px;
  letter-spacing: 0.26em;
  color: rgba(230, 227, 219, 0.34);
  padding-bottom: 26px;
}
.manifest-lede {
  max-width: 600px;
  padding-top: 30px;
  font-size: clamp(12.5px, 0.9vw, 13.5px);
  line-height: 1.95;
  letter-spacing: 0.015em;
  color: rgba(230, 227, 219, 0.66);
  text-wrap: pretty;
}

.entries { padding-top: clamp(44px, 5vw, 70px); display: flex; flex-direction: column; }
.entry {
  display: grid;
  grid-template-columns: 262px 1fr;
  gap: 0 40px;
  align-items: baseline;
  padding: 24px 0;
  border: none;
  border-top: 1px solid var(--hair);
  color: inherit;
}
.entry:hover { background: rgba(230, 227, 219, 0.022); color: inherit; }
.entry-id { display: flex; align-items: baseline; gap: 14px; }
.entry-id .n { font-size: 9.5px; letter-spacing: 0.22em; color: rgba(230, 227, 219, 0.34); }
.entry-id .l { font-size: 12.5px; letter-spacing: 0.24em; color: var(--ink); }
.entry-body { display: flex; flex-direction: column; gap: 9px; }
.entry-body .t { font-size: 12.5px; letter-spacing: 0.015em; color: rgba(230, 227, 219, 0.86); }
.entry-body .b {
  font-size: 11.5px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: rgba(230, 227, 219, 0.52);
  text-wrap: pretty;
}
.entries-end { height: 1px; background: var(--hair); }

.instrument { padding-top: clamp(46px, 5vw, 72px); }
.instrument-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-bottom: 22px;
}
.instrument-head .dash { font-size: 9.5px; letter-spacing: 0.24em; color: rgba(230, 227, 219, 0.34); }
.instrument-head .t { font-size: 10.5px; letter-spacing: 0.26em; color: rgba(230, 227, 219, 0.6); }
.instrument-head .rule { flex: 1; height: 1px; background: var(--hair); }
.instrument .reg-row { padding: 13px 0; }
.instrument .reg-v { line-height: 1.85; }

/* ----------------------------------------------------------- diagram */

/* Where the data goes, as three stacked bands rather than boxes and arrows. */
.flow { margin-top: 30px; }
.flow-band { position: relative; padding: 16px clamp(16px, 2vw, 22px) 18px; }
.flow-band.inner { padding: 18px clamp(16px, 2vw, 22px) 22px; }
.flow-label {
  font-size: 8px;
  letter-spacing: 0.24em;
  color: rgba(230, 227, 219, 0.3);
  padding-bottom: 12px;
}
.flow-label.on { color: rgba(230, 227, 219, 0.42); padding-bottom: 14px; }
.flow-row {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 0 24px;
}
.flow-row + .flow-arrow, .flow-row.spaced { padding-bottom: 10px; }
.flow-k { font-size: 9.5px; letter-spacing: 0.2em; color: rgba(230, 227, 219, 0.5); }
.flow-k.on { color: rgba(230, 227, 219, 0.72); }
/* A block, not a flex column: the NPM row is a sentence with inline <code> in
   it, and in a flex container every run of text between the tags would become
   its own item on its own line. Rows that are a list of lines mark them up as
   spans and get their separation from the sibling margin below. */
.flow-v {
  font-size: 11.5px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: rgba(230, 227, 219, 0.72);
  text-wrap: pretty;
}
.flow-v > span { display: block; }
.flow-v > span + span { margin-top: 6px; }
.flow-v.path { overflow-wrap: anywhere; }
.flow-v .strong { color: rgba(230, 227, 219, 0.88); }
.flow-v .quiet { color: rgba(230, 227, 219, 0.5); }
.flow-arrow { position: relative; font-size: 12px; color: rgba(230, 227, 219, 0.3); padding: 2px 0 8px; }
.flow-split {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 clamp(16px, 2vw, 22px);
}
.flow-split .rule { flex: 1; height: 1px; background: rgba(230, 227, 219, 0.3); }
.flow-split .t {
  font-size: 8px;
  letter-spacing: 0.24em;
  color: rgba(230, 227, 219, 0.55);
  white-space: nowrap;
}
.flow .flow-band, .flow .flow-split { position: relative; z-index: 1; }

/* ------------------------------------------------------------- faults */

/* Troubleshooting: the fault on the left, what to do on the right. */
.faults { margin-top: 20px; border-top: 1px solid var(--hair); }
.fault {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0 32px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.fault-name {
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: rgba(230, 227, 219, 0.86);
}
.fault-name.is-signal {
  font-size: 10px;
  letter-spacing: 0.16em;
  overflow-wrap: anywhere;
}
.fault-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 12.5px;
  line-height: 1.9;
  letter-spacing: 0.015em;
  color: rgba(230, 227, 219, 0.76);
  text-wrap: pretty;
}
.fault-body .aside { color: rgba(230, 227, 219, 0.52); font-size: 11.5px; line-height: 1.85; }
.fault-states {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-left: 1px solid var(--rule);
  padding-left: 18px;
}
.fault-states .state {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(230, 227, 219, 0.5);
}

/* -------------------------------------------------------------- pager */

.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
  margin-top: clamp(56px, 6vw, 88px);
  border-top: 1px solid var(--rule);
  padding-top: 22px;
}
.pager a { display: flex; flex-direction: column; gap: 7px; border: none; }
.pager a:hover .t { color: var(--ink); }
.pager .k { font-size: 8.5px; letter-spacing: 0.24em; color: rgba(230, 227, 219, 0.3); }
.pager .t { font-size: 11.5px; letter-spacing: 0.02em; color: rgba(230, 227, 219, 0.72); }
.pager .next { text-align: right; }

/* ---------------------------------------------------------------- narrow */

/* The rail is a wide-screen affordance and the inline contents is what
   replaces it, so exactly one of the two is ever showing. Neither is in the
   index page at all. */
@media (min-width: 940px) {
  .rail { display: flex; }
  .sec-head + .code { margin-top: 20px; }
}

/* Below the rail's breakpoint the second column has nowhere to go: the
   registers stack, and the column headers they lose come back inline. */
@media (max-width: 939px) {
  .contents { display: flex; }
  .columns { gap: 0; }

  .docnav-item .n, .docnav-state { display: none; }

  .reg-row, .reg--3 .reg-row { grid-template-columns: 1fr; gap: 5px; }
  .reg--survives .reg-row, .instrument .reg-row { gap: 8px; }
  .reg-head { display: none; }
  .reg-cell .inline-k { display: block; }

  .flow-row { grid-template-columns: 1fr; gap: 7px; }
  .fault { grid-template-columns: 1fr; gap: 11px; }
  .entry { grid-template-columns: 1fr; gap: 14px; }

  .code.commands { display: none; }
  .cmdlist { display: block; }

  .pager { grid-template-columns: 1fr; gap: 26px; }
  .pager .next { text-align: left; }
}