/* Hallvi documentation. Three kinds of page share this sheet:
   - the entrance at /docs/, on the landing page's dotted ground,
   - the people docs at /docs/people/, short guides for running Hallvi,
   - the agent reference at /docs/agents/, one page generated from its index.md.
   The nav, the mark, the dark command block and the copy button repeat the
   landing page's (site/index.html); keep them in step. Light only, like the
   landing page. Colour is kept to one accent for links, the current page and
   "you" markers, plus amber for risks to money, data or access. */
:root {
  --paper: #e7ecf6; --card: #fff; --ink: #0f1520; --text: #283042; --soft: #525d78;
  --line: #c9d3e6; --hair: #e1e7f1; --tint: #f4f6fb; --dot: #c6d1e8;
  --accent: #1f4fd8; --accent-wash: #eef2fd;
  --warn: #7a4a00; --warn-line: #ebcf94; --warn-wash: #fdf8ec;
  --code: #0f1520; --code-ink: #e6ebf5; --code-soft: #8792a9;
  --disp: "Bricolage Grotesque", Geist, system-ui, sans-serif;
  --sans: Geist, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--card); color: var(--text);
  font: 400 15px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 30px; }
::selection { background: color-mix(in srgb, var(--accent) 20%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--card);
  padding: 10px 14px; border-radius: 8px; font: 600 14px/1 var(--sans); text-decoration: none; }
.skip:focus { top: 12px; }

/* The landing page's nav, with Docs as the current place. */
.nav { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--paper) 88%, transparent); border-bottom: 1px solid var(--hair); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; padding-block: 16px; }
.brandrow { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand { font: 700 21px/1 var(--disp); letter-spacing: -.022em; }
.hv-mark { --size: 22px; position: relative; flex: none; display: inline-flex;
  align-items: center; justify-content: center; gap: calc(var(--size) * .19);
  width: calc(var(--size) * .92); height: var(--size);
  border-radius: calc(var(--size) * .28); background: var(--ink); transform: rotate(-5deg); }
.hv-mark i { width: max(2px, calc(var(--size) * .085)); height: calc(var(--size) * .23);
  margin-top: calc(var(--size) * -.16); border-radius: 2px; background: #dfe8fb; }
.hv-mark b { position: absolute; bottom: calc(var(--size) * .22); width: calc(var(--size) * .3);
  height: calc(var(--size) * .13); border-radius: 50%; margin: 0;
  border-bottom: max(1.5px, calc(var(--size) * .055)) solid #dfe8fb; }
.navlinks { display: flex; gap: 26px; margin-left: auto; margin-right: 26px; }
.navlinks a { font: 500 14px/1 var(--sans); color: var(--soft); text-decoration: none; transition: color .15s; }
.navlinks a:hover, .navlinks a[aria-current] { color: var(--ink); }
.nav-feedback { display: inline-flex; align-items: center; min-height: 36px; margin-right: 26px;
  font: 500 14px/1 var(--sans); color: var(--accent); text-decoration: none; text-underline-offset: 5px; }
.nav-feedback:hover { text-decoration: underline; }
.cta { display: inline-flex; align-items: center; height: 36px; background: var(--ink); color: var(--paper);
  text-decoration: none; font: 600 13.5px/1 var(--sans); padding: 0 17px; border-radius: 8px;
  text-box: trim-both cap alphabetic; transition: background .15s; }
.cta:hover { background: var(--accent); }

/* ---- Reading pages: the area's own menu on the left, the page on white. ---- */
.layout { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 56px;
  align-items: start; padding-block: 36px 88px; }
.doc { min-width: 0; max-width: 680px; }
.agents .doc { max-width: 740px; }

.side { position: sticky; top: 89px; max-height: calc(100vh - 105px); overflow: auto;
  padding: 0 6px 16px 0; scrollbar-width: thin; }
/* Which docs you are in, and the one-click way to the other set. */
.switch { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 0 0 22px; padding: 3px;
  background: var(--tint); border: 1px solid var(--hair); border-radius: 9px; }
.switch a { display: block; padding: 6px 4px; border-radius: 6px; text-align: center; text-decoration: none;
  font: 500 13px/1.3 var(--sans); color: var(--soft); transition: color .15s, background .15s; }
.switch a:hover { color: var(--ink); }
.switch a[aria-current] { background: var(--card); color: var(--ink);
  box-shadow: 0 1px 2px rgba(15, 21, 32, .08), 0 0 0 1px var(--hair); }
.menu summary { display: none; }
.menu .group { margin: 20px 0 4px 10px; font: 600 12.5px/1.3 var(--sans); color: var(--ink); }
.menu .group:first-child { margin-top: 0; }
.menu a { display: block; padding: 5px 10px; border-radius: 6px; text-decoration: none;
  font: 400 13.5px/1.4 var(--sans); color: var(--soft); transition: color .15s, background .15s; }
.menu a:hover { color: var(--ink); background: var(--tint); }
.menu a[aria-current] { color: var(--accent); background: var(--accent-wash); font-weight: 500; }

/* Type. Bricolage only for the page title; Geist does the rest. */
.doc h1 { font: 700 30px/1.15 var(--disp); letter-spacing: -.02em; color: var(--ink);
  margin: 0 0 10px; text-wrap: balance; }
.doc .lede { font-size: 16.5px; line-height: 1.55; color: var(--soft); margin: 0 0 24px; max-width: 60ch; }
.doc h2 { font: 600 19px/1.35 var(--sans); letter-spacing: -.01em; color: var(--ink);
  margin: 44px 0 10px; text-wrap: balance; }
.doc h3 { font: 600 15.5px/1.4 var(--sans); color: var(--ink); margin: 28px 0 6px; }
.doc p, .doc ul, .doc ol { margin: 0 0 12px; }
.doc p, .doc li { text-wrap: pretty; }
.doc ul, .doc ol { padding-left: 20px; }
.doc li { margin: 4px 0; }
.doc li::marker { color: var(--soft); }
.doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.doc a:hover { text-decoration-color: currentColor; }
.doc strong { font-weight: 600; color: var(--ink); }
code { font: 400 .87em/1 var(--mono); color: var(--ink); background: #eef1f7; border-radius: 4px;
  padding: 2px 5px; overflow-wrap: anywhere; }
kbd { font: 500 .82em/1 var(--mono); color: var(--ink); border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 5px; padding: 2px 5px; background: var(--card); }

/* The short version at the top of every people page. */
.tldr { margin: 0 0 30px; padding: 14px 18px 12px; background: var(--tint); border-radius: 12px; }
.tldr .label { display: block; margin-bottom: 4px; font: 600 13px/1.4 var(--sans); color: var(--ink); }
.tldr ul { margin: 0; padding-left: 18px; }
.tldr li { margin: 3px 0; font-size: 14.5px; line-height: 1.55; }

/* Commands: the landing page's dark block and copy button. */
pre { margin: 0; padding: 14px 18px; overflow-x: auto; background: var(--code); color: var(--code-ink);
  border-radius: 10px; font: 400 12.5px/1.7 var(--mono); tab-size: 2;
  scrollbar-width: thin; scrollbar-color: #3a4459 transparent; }
pre code { font: inherit; color: inherit; background: none; padding: 0; border-radius: 0; overflow-wrap: normal; }
pre .c { color: var(--code-soft); }
.cmd, .code { position: relative; margin: 12px 0 18px; }
/* Long commands wrap rather than scroll under the copy button. Copying takes
   the text, not the wrapping. Output keeps its columns and scrolls instead. */
.cmd pre { padding-right: 84px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cmd pre code { overflow-wrap: anywhere; }
.copy { all: unset; position: absolute; top: 8px; right: 8px; cursor: pointer;
  font: 500 12px/1 var(--sans); color: #c3cce0; padding: 7px 11px; border-radius: 7px;
  background: #1b2231; border: 1px solid #2d3748; transition: background .15s, color .15s; }
.copy:hover { background: #242d40; color: #fff; }
.copy:focus-visible { outline: 2px solid #7f9dff; outline-offset: 2px; }

/* Numbered steps. */
ol.steps { list-style: none; counter-reset: s; padding: 0; margin: 12px 0 18px; }
ol.steps > li { counter-increment: s; position: relative; padding-left: 32px; margin: 0 0 8px; }
ol.steps > li::before { content: counter(s); position: absolute; left: 0; top: 1px; width: 21px; height: 21px;
  border-radius: 50%; background: var(--tint); color: var(--ink); text-align: center;
  font: 600 11.5px/21px var(--sans); }

/* Tables: rules between rows, no boxes. */
.table { overflow-x: auto; margin: 14px 0 22px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums; }
th { text-align: left; vertical-align: bottom; font: 600 12.5px/1.4 var(--sans); color: var(--soft);
  padding: 0 16px 8px 0; border-bottom: 1px solid var(--line); }
td { padding: 9px 16px 9px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
th:last-child, td:last-child { padding-right: 0; }
tr:last-child td { border-bottom: 0; }
td:first-child { font-weight: 500; color: var(--ink); min-width: 140px; }
td p { margin: 0 0 6px; } td p:last-child { margin: 0; }

/* Boxes: a note, an outcome, and amber only for risks. */
.callout, .outcome { margin: 20px 0; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--hair); }
.callout > :last-child, .outcome > :last-child { margin-bottom: 0; }
.callout .label, .outcome .label { display: block; margin-bottom: 2px; font: 600 14px/1.45 var(--sans); color: var(--ink); }
.outcome ul { margin-bottom: 0; }
.callout.warn { border-color: var(--warn-line); background: var(--warn-wash); }
.callout.warn .label { display: flex; align-items: center; gap: 7px; color: var(--warn); }
.callout.warn .label::before { content: ""; flex: none; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: var(--warn-glyph) center / contain no-repeat; mask: var(--warn-glyph) center / contain no-repeat; }
:root { --warn-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9 16H3z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E"); }

/* ---- Diagrams: cards and lines, so they restack on a phone and stay text. ---- */
.flow { display: flex; align-items: stretch; margin: 18px 0 8px; }
.flow .node { flex: 1 1 0; min-width: 0; padding: 10px 12px; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; font-size: 13px; line-height: 1.4; color: var(--soft); }
.flow .node b { display: block; margin-bottom: 1px; font: 600 13.5px/1.35 var(--sans); color: var(--ink); }
.flow .node.here, .flow .node.end { background: var(--tint); border-color: var(--tint); }
.flow .link { flex: 0 0 64px; position: relative; display: flex; align-items: center; }
.flow .link::before { content: ""; position: absolute; left: 6px; right: 7px; top: 50%; height: 1px; background: var(--soft); }
.flow .link::after { content: ""; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  border: 4px solid transparent; border-left-color: var(--soft); }
.flow .link.accent::before { background: var(--accent); }
.flow .link.accent::after { border-left-color: var(--accent); }
.flow .link em { position: absolute; left: 0; right: 0; bottom: calc(50% + 5px); text-align: center; font-style: normal;
  font: 500 10.5px/1.3 var(--mono); color: var(--soft); }
.flow .link.accent em { color: var(--accent); }
.flow.tight .link { flex-basis: 36px; }
.figcap { margin: 6px 0 20px; color: var(--soft); font-size: 13px; }
.tag { display: block; margin-bottom: 2px; font: 500 11.5px/1.3 var(--sans); color: var(--soft); }
.tag.you, .here .tag { color: var(--accent); }

/* A numbered process on a rail: across on a wide screen, down on a phone. */
.stages { list-style: none; counter-reset: st; display: flex; margin: 20px 0 18px; padding: 0; }
.doc .stages { padding: 0; }
.stages > li { counter-increment: st; position: relative; flex: 1 1 0; min-width: 0; margin: 0;
  padding: 30px 6px 0; text-align: center; font-size: 12.5px; line-height: 1.4; color: var(--soft); }
.stages > li::before { content: counter(st); position: absolute; z-index: 1; top: 0; left: 50%;
  transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--card);
  border: 1px solid var(--line); color: var(--ink); font: 600 11px/20px var(--sans); text-align: center; }
.stages > li::after { content: ""; position: absolute; top: 11px; left: calc(50% + 11px); width: calc(100% - 22px);
  height: 1px; background: var(--line); }
.stages > li:last-child::after { display: none; }
.stages > li.end::before { background: var(--ink); border-color: var(--ink); color: var(--card); }
.stages b { display: block; margin-bottom: 1px; font: 600 13px/1.35 var(--sans); color: var(--ink); }

/* One card fanning out to several, joined by a bus line. */
.fan { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); align-items: center; margin: 20px 0 10px; }
.fan .node { padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px; line-height: 1.4; color: var(--soft); }
.fan > .node { background: var(--tint); border-color: var(--tint); }
.fan .node b { display: block; font: 600 13.5px/1.35 var(--sans); color: var(--ink); }
.fan .spokes { position: relative; display: grid; gap: 8px; padding-left: 48px; }
.fan .spokes::before { content: ""; position: absolute; left: 0; width: 20px; top: 50%; height: 1px; background: var(--line); }
.fan .spoke { position: relative; }
.fan .spoke::before { content: ""; position: absolute; left: -28px; top: -4px; bottom: -4px; width: 1px; background: var(--line); }
.fan .spoke:first-child::before { top: 50%; }
.fan .spoke:last-child::before { bottom: 50%; }
.fan .spoke::after { content: ""; position: absolute; left: -28px; width: 28px; top: 50%; height: 1px; background: var(--line); }

/* A dashed line back from the last card of a .flow.tight to the first. Set
   --n to the number of cards so the line starts and ends under their middles. */
.loopback { --n: 4; position: relative; height: 22px; border: 1px dashed var(--line); border-top: 0;
  border-radius: 0 0 10px 10px; margin: -2px calc((100% - (var(--n) - 1) * 36px) / (2 * var(--n))) 30px; }
.loopback::before { content: ""; position: absolute; left: -4.5px; top: -8px; border: 4px solid transparent;
  border-bottom-color: var(--soft); }
.loopback em { position: absolute; left: 50%; top: 100%; transform: translate(-50%, -50%); padding: 0 8px;
  background: var(--card); font: 400 12px/1.3 var(--sans); font-style: normal; color: var(--soft); white-space: nowrap; }

/* Status words in a matrix: one accent for "asks you", neutral for the rest. */
.pill { display: inline-block; font: 500 12px/1 var(--sans); padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.pill.ask { background: var(--accent-wash); color: var(--accent); }
.pill.judge { background: var(--tint); color: var(--ink); }
.pill.run { color: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.pill.none { color: var(--soft); }
table.matrix td:not(:first-child), table.matrix th:not(:first-child) { text-align: center; }
table.matrix td { vertical-align: middle; }
table.matrix td:first-child { font-weight: 400; color: var(--text); }

/* Two options side by side. */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0 20px; }
.cards > div { min-width: 0; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 10px;
  font-size: 14px; line-height: 1.5; }
.cards > div.here { background: var(--tint); border-color: var(--tint); }
.cards b { display: block; margin-bottom: 2px; font: 600 14px/1.35 var(--sans); color: var(--ink); }
.cards p { margin: 0 0 6px; color: var(--soft); }
.cards p:last-child { margin-bottom: 0; }
.doc .cards ul { margin: 4px 0 0; padding-left: 18px; }
.cards dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 6px 0 0; font-size: 13.5px; }
.cards dt { font-weight: 500; color: var(--ink); }
.cards dd { margin: 0; color: var(--soft); }

/* A list of pages with one line on each, for overviews. */
.pages { list-style: none; padding: 0; margin: 8px 0 12px; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; }
.doc .pages { padding: 0; }
.pages li { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.pages a { font-weight: 500; }
.pages span { display: block; font-size: 13.5px; color: var(--soft); }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 52px; padding-top: 22px;
  border-top: 1px solid var(--hair); }
.doc .pager a { display: block; padding: 10px 14px; border: 1px solid var(--hair); border-radius: 10px;
  text-decoration: none; color: var(--ink); font-weight: 500; font-size: 14.5px; transition: border-color .15s, background .15s; }
.doc .pager a:hover { border-color: var(--line); background: var(--tint); }
.pager span { display: block; margin-bottom: 1px; font-size: 12.5px; font-weight: 400; color: var(--soft); }
.pager .next { grid-column: 2; text-align: right; }

/* ---- The agent reference: denser, code first, one page. ---- */
.ref { font-size: 14.5px; line-height: 1.65; }
.ref h2 { margin: 48px 0 10px; padding-top: 24px; border-top: 1px solid var(--hair); }
.ref h3 { font-size: 15px; margin: 28px 0 6px; }
.ref h3 code { font-size: .93em; background: none; padding: 0; }
.ref table { font-size: 13.5px; }
.ref td:first-child { min-width: 0; }
.ref td:first-child code { white-space: nowrap; }
.docmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -6px 0 22px; }
.docmeta .facts { margin: 0 0 0 6px; font-size: 13px; color: var(--soft); }
.handoff { margin: 0 0 8px; padding: 14px 16px 2px; border: 1px solid var(--hair); border-radius: 12px; }
.handoff p { margin: 0 0 8px; font-size: 13.5px; color: var(--soft); }
.btn { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--card); color: var(--ink); cursor: pointer; text-decoration: none;
  font: 500 13px/1 var(--sans); transition: background .15s, border-color .15s; }
.doc a.btn { color: var(--ink); text-decoration: none; }
.btn:hover { background: var(--tint); border-color: var(--soft); }
/* The rules at the top of the reference are its short version. */
#rules + ol { margin: 0 0 12px; padding: 14px 18px 14px 40px; background: var(--tint); border-radius: 12px; }
#rules + ol li { margin: 5px 0; }
.ref #rules { margin-top: 36px; padding-top: 0; border-top: 0; }
/* Output and payloads keep their columns; a small label says what they are. */
.code pre { white-space: pre; }
.code[data-label]::before { content: attr(data-label); position: absolute; top: 9px; right: 14px;
  font: 500 11px/1 var(--mono); color: var(--code-soft); pointer-events: none; }

/* ---- The entrance at /docs/: the landing page's ground and two doors. ---- */
.home { background-color: var(--paper);
  background-image: radial-gradient(900px 460px at 78% -8%, rgba(31, 79, 216, .07), transparent 70%),
                    radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 100% 100%, 22px 22px; background-position: 0 0, -1px -1px; }
.lobby { padding-block: 64px 88px; }
.lobby h1 { max-width: 20ch; margin: 0 0 10px; font: 700 clamp(28px, 3.2vw, 38px)/1.1 var(--disp);
  letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.lobby .lede { max-width: 58ch; margin: 0; font-size: 17px; line-height: 1.55; color: var(--soft); }
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 32px; }
.door { display: flex; flex-direction: column; min-width: 0; padding: 24px 26px 26px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20, 24, 31, .05), 0 14px 34px rgba(20, 24, 31, .06); }
.door h2 { margin: 0 0 6px; font: 700 22px/1.2 var(--disp); letter-spacing: -.015em; color: var(--ink); }
.door > p { margin: 0 0 16px; color: var(--soft); }
.door ol { margin: 0 0 22px; padding: 0; list-style: none; counter-reset: s; }
.door ol li { counter-increment: s; position: relative; padding: 9px 0 9px 32px; border-top: 1px solid var(--hair); }
.door ol li::before { content: counter(s); position: absolute; left: 0; top: 10px; width: 21px; height: 21px;
  border-radius: 50%; background: var(--tint); color: var(--ink); text-align: center; font: 600 11.5px/21px var(--sans); }
.door ol a { color: var(--ink); font-weight: 500; text-decoration: none; }
.door ol a:hover { color: var(--accent); }
.door ol span { display: block; font-size: 13.5px; color: var(--soft); }
.door .cmd { margin: 0 0 12px; }
.door .fine { margin: 0 0 22px; font-size: 13.5px; color: var(--soft); }
.door .fine a { color: var(--accent); }
.go { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; height: 40px; margin-top: auto;
  padding: 0 16px; border-radius: 8px; background: var(--ink); color: var(--card); text-decoration: none;
  font: 600 14px/1 var(--sans); transition: background .15s; }
.go:hover { background: var(--accent); }
.go::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 1.5px 1.5px 0 0;
  transform: rotate(45deg); }
.aside { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 26px 0 0; font-size: 13.5px; color: var(--soft); }
.aside p { margin: 0; }
.aside a { color: var(--accent); text-underline-offset: 3px; }

/* A moved page, kept so old links land somewhere useful. */
.moved { max-width: 560px; padding-block: 72px; }
.moved h1 { font: 700 26px/1.2 var(--disp); color: var(--ink); margin: 0 0 8px; }

footer { color: var(--soft); font-size: 13px; padding: 24px 0 56px; border-top: 1px solid var(--hair); }
footer .wrap { display: flex; gap: 16px; flex-wrap: wrap; }
footer a { color: inherit; }
.home footer { border-top-color: var(--line); }

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

/* Below 900px the menu folds under the audience switch, above the page. */
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-block: 16px 64px; }
  .side { position: static; max-height: none; overflow: visible; padding: 0; }
  .switch { margin-bottom: 8px; }
  .menu summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none;
    padding: 10px 14px; border: 1px solid var(--hair); border-radius: 9px; font: 500 14px/1.2 var(--sans); color: var(--ink); }
  .menu summary::-webkit-details-marker { display: none; }
  .menu summary::after { content: ""; width: 7px; height: 7px; border: solid var(--soft); border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
  .menu[open] summary { border-radius: 9px 9px 0 0; }
  .menu[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
  .menu nav { padding: 12px 8px 12px; border: 1px solid var(--hair); border-top: 0; border-radius: 0 0 9px 9px; }
  .menu a { padding-block: 7px; }
  .doc, .agents .doc { max-width: none; }
}
@media (max-width: 680px) {
  .navlinks { display: none; }
  .nav-feedback { margin-left: auto; margin-right: 16px; }
  .flow { flex-direction: column; }
  .flow .link { flex-basis: 34px; justify-content: center; }
  .flow .link::before { left: 50%; right: auto; top: 4px; bottom: 6px; width: 1px; height: auto; }
  .flow .link::after { right: auto; left: 50%; top: auto; bottom: 0; transform: translateX(-50%);
    border-left-color: transparent; border-top-color: var(--soft); }
  .flow .link.accent::after { border-left-color: transparent; border-top-color: var(--accent); }
  .flow .link em { position: relative; bottom: auto; left: auto; right: auto; margin-left: 14px; text-align: left; }
  .flow.tight .link { flex-basis: 30px; }
  .stages { flex-direction: column; }
  .stages > li { text-align: left; padding: 1px 0 12px 36px; font-size: 13.5px; }
  .stages > li::before { left: 0; transform: none; }
  .stages > li::after { left: 11px; top: 26px; width: 1px; height: calc(100% - 26px); }
  .stages b { display: inline; margin-right: 4px; font-size: 14px; }
  .fan { grid-template-columns: minmax(0, 1fr); }
  .fan .spokes { padding: 14px 0 0 26px; }
  .fan .spokes::before { left: 11px; top: 0; width: 1px; height: 14px; }
  .fan .spoke::before { left: -15px; }
  .fan .spoke:first-child::before { top: -14px; }
  .fan .spoke::after { left: -15px; width: 15px; }
  .loopback { height: auto; border: 0; margin: 2px 0 22px; }
  .loopback::before { display: none; }
  .loopback em { position: static; display: block; transform: none; text-align: center; white-space: normal; padding: 0; }
  .cards, .pages, .doors { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .nav .wrap { padding-block: 12px; }
  .side { top: 0; }
  .doc h1 { font-size: 26px; }
  .doc .lede { font-size: 16px; }
  .doc h2 { font-size: 18px; margin-top: 36px; }
  .ref h2 { margin-top: 40px; padding-top: 20px; }
  .tldr { padding: 12px 14px 10px; }
  pre { font-size: 12px; padding: 12px 14px; }
  .cmd pre { padding-right: 14px; padding-top: 42px; }
  table { font-size: 13.5px; }
  td { padding-right: 12px; }
  th { padding-right: 12px; }
  td:first-child { min-width: 110px; }
  .pager { grid-template-columns: 1fr; }
  .pager .next { grid-column: 1; }
  .ref td:first-child code { white-space: normal; }
  .pill { padding: 3px 6px; font-size: 11.5px; line-height: 1.25; white-space: normal; border-radius: 7px; }
  .lobby { padding-block: 36px 56px; }
  .door { padding: 20px 18px 22px; }
}