/* ---- css/00-tokens.css */
/* Design tokens. Colours carry one meaning each (green is Pulse, blue is pull, red is push, amber is caution).
   --font-prose is the system sans of the long-form text on the calm pages; everything else, and the whole of
   Home, is --font-mono. */

:root {
  color-scheme: dark;

  /* surfaces */
  --bg-page: #0b0d0b;
  --bg-panel: #000000;
  --bg-code: #030a04;
  --bg-raised: #06180b;
  --bg-tint: #001a08;
  --bg-callout: #010a03;
  --bg-pull: #050608;
  --bg-push: #080505;
  --bg-warn: #0d0a02;
  --bg-mark: #0b3d1a;

  /* lines */
  --line: #003b00;
  --line-strong: #2a7a44;
  --pull-line: #1d3a6b;
  --push-line: #5a1c1c;
  --warn-line: #5a430f;

  /* greens */
  --green: #00ff41;
  --green-term: #35e06b;
  --green-soft: #9dffb0;
  --green-mid: #7dff9b;
  --green-dim: #0f9d3f;

  /* text */
  --text: #c9e8d4;
  --text-strong: #ccffdb;
  --text-muted: #86b597;

  /* pills */
  --pull: #4d8dff;
  --pull-soft: #aecbff;
  --push: #ff5c5c;
  --push-soft: #ffc4c4;

  /* caution */
  --warn: #febc2e;
  --warn-soft: #ffe2a6;
  --crit: var(--warn);
  --on-crit: #000000;

  /* focus, hero, terminal chrome */
  --focus: #d6ffe3;
  --dot-red: #ff5f57;
  --dot-amber: #febc2e;
  --dot-green: #28c840;

  /* type */
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Cascadia Mono", "Roboto Mono", "Noto Sans Mono", "DejaVu Sans Mono", "Liberation Mono", "Courier New", monospace;
  --font-prose: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: .8125rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: clamp(1.625rem, 1.2rem + 1.9vw, 2.25rem);
  --fs-stat: 1.75rem;
  --lh-tight: 1.25;
  --lh-code: 1.6;
  --lh-body: 1.7;
  --measure: 76ch;

  /* space (4 px base) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.25rem;
  --s-6: 1.5rem; --s-7: 2rem; --s-8: 2.5rem; --s-9: 3.5rem;
  --gap-section: clamp(1.625rem, 4vw, 3rem);

  /* shape */
  --radius: 0;
  --radius-pill: 999px;
  --bw: 1px;
  --bw-accent: 3px;
  --bar: 6px;

  /* glow and shadow */
  --glow-text: 0 0 10px rgb(0 255 65 / .85);
  --glow-soft: 0 0 6px rgb(0 255 65 / .45);
  --glow-box: 0 0 0 1px var(--green), 0 0 14px rgb(0 255 65 / .35);
  --halo: 0 0 0 1px rgb(0 0 0 / .9), 0 0 22px 6px rgb(0 0 0 / .8);

  /* layout */
  --nav-h: 3.5rem;
  --home-max: 61.25rem;
  --shell-max: 78rem;
  --gutter: var(--s-4);
  --t-fast: 120ms;
}
@media (min-width: 48rem) { :root { --bar: 10px; --gutter: var(--s-6); } }

/* ---- css/10-base.css */
/* Reset, prose, links, focus, utilities. */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: clamp(100%, 90% + .125vw, 112.5%); scroll-padding-top: calc(var(--nav-h) + 1rem); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--line-strong) var(--bg-panel); scrollbar-width: thin; }
body { margin: 0; background: var(--bg-page); color: var(--text); font: 400 var(--fs-md)/var(--lh-body) var(--font-mono); overflow-wrap: break-word; }
h1, h2, h3, h4, code, pre, kbd, button, input, select, table { font-family: var(--font-mono); }
img, svg, canvas { max-width: 100%; }
img { height: auto; display: block; }
p { margin: 0 0 var(--s-4); }
a { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; text-shadow: var(--glow-soft); }
::selection { background: var(--green); color: #000; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s-2); top: -4rem; z-index: 50; background: var(--green); color: #000; font-weight: 700; padding: var(--s-2) var(--s-4); text-decoration: none; }
.skip:focus { top: var(--s-2); }
code { color: var(--green); background: var(--bg-tint); box-shadow: inset 0 0 0 1px var(--line); padding: 0 .28em; font-size: .9375em; }
pre code { all: unset; font-family: var(--font-mono); }
kbd { font-size: var(--fs-xs); color: var(--green-soft); border: 1px solid var(--line-strong); padding: 0 .4em; background: var(--bg-raised); }
mark { background: var(--bg-mark); color: var(--text-strong); font-weight: 700; text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 3px; padding: 0 .1em; }
hr { border: 0; border-top: 1px solid var(--line-strong); margin: var(--s-7) 0; }

[hidden] { display: none !important; }
code { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sprite { position: absolute; }

/* ---- prose: styles for Markdown output apply to class-less elements only, so a widget inside an article inherits nothing by accident */
.prose h1 { margin: 0 0 var(--s-4); font: 700 var(--fs-2xl)/1.2 var(--font-mono); color: var(--green); text-shadow: var(--glow-soft); }
.prose h2:not([class]) { margin: var(--s-8) 0 var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line-strong); font: 700 var(--fs-xl)/var(--lh-tight) var(--font-mono); color: var(--green); }
.prose h2:not([class])::before { content: "> "; white-space: pre; }
.prose h3:not([class]) { margin: var(--s-7) 0 var(--s-2); font: 700 var(--fs-lg)/var(--lh-tight) var(--font-mono); color: var(--green-soft); }
.prose h3:not([class])::before { content: "# "; white-space: pre; color: var(--green-dim); }
.prose h4:not([class]) { margin: var(--s-6) 0 var(--s-2); font: 700 var(--fs-md)/var(--lh-tight) var(--font-mono); color: var(--text-strong); }
.prose :is(h2, h3) .anchor { margin-left: .5ch; color: var(--green-dim); text-decoration: none; opacity: 0; }   /* always shown on touch: 5.9:1, where --line-strong is 3.97 */
.prose :is(h2, h3):hover .anchor, .prose .anchor:focus-visible { opacity: 1; color: var(--green); }
@media (hover: none) { .prose :is(h2, h3) .anchor { opacity: 1; } }
@media (pointer: coarse) {            /* a 44 px target around the "#", which is 13 by 30 px: the heading does not grow */
  .prose :is(h2, h3) .anchor { position: relative; }
  .prose :is(h2, h3) .anchor::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2.75rem; height: 2.75rem; translate: -50% -50%; }
}
.prose > :is(p, ul, ol, dl) { max-width: var(--measure); }
.prose :is(ul, ol):not([class]) { padding-left: 1.6em; margin: 0 0 var(--s-4); }
.prose ul:not([class]) { list-style: none; }
.prose ul:not([class]) > li { position: relative; }
.prose ul:not([class]) > li::before { content: "\25A0"; position: absolute; left: -1.4em; color: var(--green); font-size: .7em; top: .45em; }
.prose :is(ul, ol):not([class]) > li { margin-bottom: var(--s-2); }
.prose strong { color: var(--text-strong); }

/* ---- the calm regime: every page but Home and 404. The long-form text of the documentation is a system sans, about
   75 characters a line; headings, navigation, buttons, labels, code and the table heads stay monospace. :where()
   keeps the rule weaker than any component, so a widget that sets its own face or size wins. */
html[data-regime="calm"] { --lh-body: 1.65; --measure: 66ch; }
:where(html[data-regime="calm"] .prose) :where(p:not([class]), li:not(.crumb li, .toc-inline li), dd, td) { font-family: var(--font-prose); font-size: var(--fs-md); }

/* ---- reduced motion: nothing animates or transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---- css/20-layout.css */
/* Top bar, shell, sidebar, contents, breadcrumb, pager, source line, footer. */

/* ---- top bar */
.nav { position: sticky; top: 0; z-index: 20; background: var(--bg-panel); border-bottom: 1px solid var(--line-strong); }
.nav__in { max-width: var(--shell-max); margin: 0 auto; min-height: var(--nav-h); padding: 0 var(--gutter); display: flex; align-items: center; gap: var(--s-4); }
.nav__brand { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; color: var(--green); font-weight: 700; letter-spacing: .2em; text-decoration: none; text-shadow: var(--glow-soft); }
.nav__brand svg { width: 2.75rem; height: 1.25rem; flex: none; }
.nav__links { display: none; align-items: stretch; gap: var(--s-1); margin-left: var(--s-2); }
.nav__links a, .nav__tools a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--s-3); color: var(--green-soft); font-size: var(--fs-sm); text-decoration: none; border-bottom: 2px solid transparent; }
.nav__links a:hover, .nav__tools a:hover { color: var(--green); background: var(--bg-tint); text-shadow: none; }
.nav__links a[aria-current] { color: var(--green); border-bottom-color: var(--green); font-weight: 700; }
.nav__links a[aria-current]::before { content: "> "; white-space: pre; }
.nav__tools { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.nav__tools .only-wide { display: none; }
.nav__tools > [data-slot]:empty { display: none; }
@media (min-width: 30rem) { .js .nav__tools > [data-slot="rain"]:empty { display: block; min-width: 6.9rem; } }   /* its place is kept until script fills it: no shift */
@media (max-width: 29.99rem) { .nav__tools > [data-slot="rain"] { display: none; } }
@media (max-width: 22.49rem) { .nav__word { display: none; } .nav__in { gap: var(--s-2); } }
.nav__tools .btn--sm { min-width: 2.75rem; }
.btn.rain-toggle { min-width: 6.9rem; }            /* one width for rain: on, off and still, so the switch never jumps */
.nav__menu { position: static; }
.nav__menu > summary { list-style: none; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--s-3); border: 1px solid var(--line-strong); color: var(--green); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.nav__menu > summary::-webkit-details-marker { display: none; }
.nav__menu > summary::before { content: "[=] "; content: "[=] " / ""; white-space: pre; }
.nav__menu[open] > summary::before { content: "[x] "; content: "[x] " / ""; }
.nav__sheet { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg-panel); border-bottom: 1px solid var(--green); padding: var(--s-2) var(--gutter) var(--s-4); max-height: calc(100vh - var(--nav-h)); overflow-y: auto; }
.nav__sheet a { display: flex; align-items: center; min-height: 2.75rem; color: var(--green-soft); text-decoration: none; border-bottom: 1px solid var(--line); }
.nav__sheet a[aria-current] { color: var(--green); font-weight: 700; }
.nav__sheet a[aria-current]::before { content: "> "; white-space: pre; }
.nav a, .nav button, .nav summary { white-space: nowrap; }
@media (min-width: 76rem) {
  .nav__links { display: flex; }
  .nav__menu { display: none; }
  .nav__tools .only-wide { display: inline-flex; }
}

.nav__sheet [data-slot] { display: block; margin: var(--s-2) 0; }
.nav__sheet ul { list-style: none; margin: 0; padding: 0; }
.nav__sheet .side__h { margin: var(--s-4) 0 var(--s-1); font: 700 var(--fs-xs)/1.4 var(--font-mono); color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }

/* ---- shell, sidebar, contents */
.shell { max-width: var(--shell-max); margin: 0 auto; background: var(--bg-panel); border-left: 1px solid var(--line); border-right: 1px solid var(--line); min-height: 40rem; display: grid; grid-template-columns: minmax(0, 1fr); box-shadow: var(--halo); }
.side, .toc { display: none; }
.article { min-width: 0; padding: var(--s-6) var(--gutter) var(--s-9); }
@media (min-width: 64rem) {
  .shell { grid-template-columns: 15.5rem minmax(0, 1fr); }
  .side { display: block; position: sticky; top: var(--nav-h); align-self: start; max-height: calc(100vh - var(--nav-h)); overflow-y: auto; padding: var(--s-6) var(--s-4); }
  .article { border-left: 1px solid var(--line); }
}
@media (min-width: 80rem) {
  .shell { grid-template-columns: 15.5rem minmax(0, 1fr) auto; }
  .toc { display: block; width: 14rem; position: sticky; top: var(--nav-h); align-self: start; max-height: calc(100vh - var(--nav-h)); overflow-y: auto; padding: var(--s-6) var(--s-4); }
  .shell:has(.toc) .article { border-right: 1px solid var(--line); }
  .toc-inline { display: none; }
}
.side__h, .toc h2 { margin: 0 0 var(--s-2); font: 700 var(--fs-xs)/1.4 var(--font-mono); color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
.side ul, .toc ul { list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.side a, .toc a { display: flex; align-items: center; min-height: 2.25rem; padding: var(--s-1) var(--s-3); border-left: 3px solid transparent; color: var(--green-soft); font: 400 var(--fs-sm)/1.35 var(--font-mono); text-decoration: none; }
.toc a { min-height: 1.75rem; font-size: var(--fs-xs); color: var(--text-muted); }
.toc li li a { padding-left: var(--s-6); }
.side a:hover, .toc a:hover { color: var(--green); background: var(--bg-tint); text-shadow: none; }
.side a[aria-current], .toc a[aria-current] { color: var(--green); font-weight: 700; border-left-color: var(--green); background: var(--bg-tint); }
.side a[aria-current]::before { content: "> "; white-space: pre; }
@media (pointer: coarse) { .side a, .toc a { min-height: 2.75rem; } }

/* ---- breadcrumb, previous and next, source line */
.crumb { margin: 0 0 var(--s-2); font: 400 var(--fs-xs)/1.5 var(--font-mono); color: var(--text-muted); }
.crumb ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.crumb li + li::before { content: "/"; padding: 0 .4ch; color: var(--line-strong); }
.crumb li:last-child::after { content: " $"; white-space: pre; color: var(--green); }
.crumb a { color: var(--green-mid); }
.prose .crumb ol { margin: 0; padding: 0; }                  /* the prose list rules would otherwise indent the trail */
.prose .crumb ol > li { margin: 0; }

.pager { display: flex; justify-content: space-between; gap: var(--s-3); margin: var(--s-8) 0 var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line-strong); }
.pager a { display: inline-flex; align-items: center; min-height: 2.75rem; font: 700 var(--fs-sm)/1.3 var(--font-mono); text-decoration: none; }
.pager a:hover { text-decoration: underline; }
.pager__prev::before { content: "[<] "; content: "[<] " / ""; white-space: pre; color: var(--green-dim); }
.pager__next { margin-left: auto; text-align: right; }
.pager__next::after { content: " [>]"; content: " [>]" / ""; white-space: pre; color: var(--green-dim); }
.source { margin: 0; font: 400 var(--fs-xs)/1.5 var(--font-mono); color: var(--text-muted); }

/* ---- footer */
.footer { background: var(--bg-panel); border-top: 2px solid var(--green); padding: var(--s-5) var(--gutter); text-align: center; font: 400 var(--fs-sm)/1.6 var(--font-mono); }
.footer ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s-2); list-style: none; margin: 0 0 var(--s-2); padding: 0; }
.footer li + li::before { content: "\00B7"; padding-right: var(--s-2); color: var(--line-strong); }
@media (max-width: 29.99rem) { .footer ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-3); } .footer li + li::before { content: none; } }
.footer a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; }
.footer__meta { margin: 0; color: var(--text-muted); font-size: var(--fs-xs); }
.footer__spoon { margin: var(--s-2) 0 0; color: var(--green-dim); font-style: italic; font-size: var(--fs-xs); }

/* ---- css/30-components.css */
/* Buttons, chips, badges, fields, code, terminal, tables, callouts, accordion, pill card, figure. A rule lives in the
   file of its first class: .pill-card__sub, __why and .is-off belong to the wizard's pill choice and sit in 50-wizard.css. */

/* ---- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 2.75rem; padding: 0 var(--s-5); border: 1px solid var(--green); background: var(--bg-panel); color: var(--green); font: 700 var(--fs-sm)/1 var(--font-mono); text-decoration: none; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.btn:hover { background: var(--bg-tint); box-shadow: var(--glow-box); text-shadow: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--green); color: #000; }
.btn--primary:hover { background: var(--green-soft); }
.btn--primary:active { background: var(--green-term); }
.btn--quiet { border-color: var(--line-strong); color: var(--green-soft); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--bg-raised); color: var(--line-strong); border-color: var(--line); box-shadow: none; cursor: not-allowed; }
.btn--sm { min-height: 2rem; padding: 0 var(--s-3); font-size: var(--fs-xs); }
@media (pointer: coarse) { .btn--sm { min-height: 2.75rem; } }
.ext::after { content: " \2197"; white-space: pre; }

.badge { display: inline-block; font: 700 var(--fs-xs)/1.5 var(--font-mono); color: var(--green); background: var(--bg-tint); border: 1px solid var(--green); padding: 2px 10px; text-transform: none; white-space: nowrap; }
.badge--muted { color: var(--green-soft); border-color: var(--line-strong); }
.badge--pull { color: var(--pull); border-color: var(--pull); background: var(--bg-pull); }
.badge--push { color: var(--push); border-color: var(--push); background: var(--bg-push); }
.badge--warn { color: var(--warn); border-color: var(--warn); background: var(--bg-warn); }
.badge--crit { color: var(--on-crit); border-color: var(--crit); background: var(--crit); }

/* ---- chips and fields */
.chip { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 var(--s-3); border: 1px solid var(--line-strong); background: var(--bg-panel); color: var(--green-soft); font: 400 var(--fs-xs)/1 var(--font-mono); cursor: pointer; }
.chip::before { content: "[ ] "; content: "[ ] " / ""; white-space: pre; }
.chip[aria-pressed="true"] { border-color: var(--green); color: var(--green); background: var(--bg-tint); font-weight: 700; }
.chip[aria-pressed="true"]::before { content: "[x] "; content: "[x] " / ""; }
.chip:hover { border-color: var(--green); }
@media (pointer: coarse) { .chip { min-height: 2.75rem; } }

.field { display: grid; gap: var(--s-1); }
.field > label { font-size: var(--fs-sm); color: var(--green-soft); font-weight: 700; }
.field > .hint { font-size: var(--fs-xs); color: var(--text-muted); }
.field > .error { font-size: var(--fs-xs); color: var(--warn); font-weight: 700; }
.input { width: 100%; min-height: 2.75rem; padding: 0 var(--s-3); background: var(--bg-code); color: var(--text-strong); border: 1px solid var(--line-strong); font: 400 var(--fs-sm)/1.2 var(--font-mono); border-radius: 0; }
.input::placeholder { color: var(--green-dim); opacity: 1; }
.input:hover { border-color: var(--green-mid); }
.input:focus-visible { border-color: var(--green); }
.input[aria-invalid="true"] { border-color: var(--warn); }

.field--secret .input { border-left: 3px solid var(--warn); }
.field > label code { background: none; box-shadow: none; padding: 0; }

/* ---- terminal and code */
.term { margin: 0; background: var(--bg-code); border: 1px solid var(--green); box-shadow: var(--halo); }
.term__bar { display: flex; align-items: center; gap: 6px; padding: 7px 14px; background: var(--bg-raised); border-bottom: 1px solid var(--green); font: 400 var(--fs-xs)/1.4 var(--font-mono); color: var(--green-mid); }
.term__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.term__title { margin-left: var(--s-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term__body { margin: 0; padding: 14px 18px; overflow-x: auto; font: 400 var(--fs-sm)/var(--lh-code) var(--font-mono); color: var(--green-term); }
.term__cmd { color: var(--green); font-weight: 700; }
.cursor { display: inline-block; width: .6em; height: 1.1em; vertical-align: text-bottom; background: var(--green); }
.term figcaption { border-top: 1px solid var(--line); padding: 10px 18px; font: 400 var(--fs-sm)/1.5 var(--font-mono); color: var(--green-soft); }

.code { position: relative; margin: 0 0 var(--s-4); background: var(--bg-code); border: 1px solid var(--line); }
.code__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 2.25rem; padding: 0 var(--s-2) 0 var(--s-4); border-bottom: 1px solid var(--line); background: var(--bg-raised); font: 400 var(--fs-xs)/1 var(--font-mono); color: var(--green-mid); }
.code pre { margin: 0; padding: var(--s-3) var(--s-4); overflow-x: auto; font: 400 var(--fs-sm)/var(--lh-code) var(--font-mono); color: var(--green-soft); tab-size: 2; }
.code .ph { color: var(--warn); border-bottom: 1px dashed var(--warn); }
.code .val { background: var(--bg-mark); color: var(--text-strong); font-weight: 700; }
.copy[data-state="copied"] { color: #000; background: var(--green); }

/* The cursor blinks under body.is-motion only (Home, 404): motion never exists without the rain switch that stops it. */
.js .is-motion .cursor { animation: blink 1.06s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.term__dot:nth-child(1) { background: var(--dot-red); } .term__dot:nth-child(2) { background: var(--dot-amber); } .term__dot:nth-child(3) { background: var(--dot-green); }
.term--log { box-shadow: none; margin: 0 0 var(--s-4); }
.term--log .term__body { white-space: pre-wrap; }
.code__where { margin-left: var(--s-2); color: var(--text-muted); line-height: 1.35; }   /* on a phone the label runs over several lines */
.copy { margin-left: auto; }

/* ---- pill cards */
.pills { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 37.5rem) { .pills { grid-template-columns: 1fr 1fr; } }
.pill-card { position: relative; display: block; padding: 14px 16px; border: 1px solid var(--pull-line); border-top: var(--bw-accent) solid var(--pull); background: var(--bg-pull); color: var(--pull-soft); font: 400 var(--fs-sm)/1.65 var(--font-mono); text-decoration: none; cursor: pointer; transition: box-shadow var(--t-fast), border-color var(--t-fast); }
.pill-card--push { border-color: var(--push-line); border-top-color: var(--push); background: var(--bg-push); color: var(--push-soft); }
.pill-card__title { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); font: 700 var(--fs-md)/1.3 var(--font-mono); color: var(--pull); }
.pill-card--push .pill-card__title { color: var(--push); }
.pill-card__glyph { width: 1.75rem; height: .875rem; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--pull) 50%, var(--pull-soft) 50%); flex: none; }
.pill-card--push .pill-card__glyph { background: linear-gradient(90deg, var(--push) 50%, var(--push-soft) 50%); }
.pill-card code, .pill-card a { color: var(--pull); background: none; box-shadow: none; padding: 0; }
.pill-card--push code, .pill-card--push a { color: var(--push); }
.pill-card__go { display: block; margin-top: var(--s-3); font-weight: 700; color: var(--pull); }
.pill-card--push .pill-card__go { color: var(--push); }
.pill-card__go::after { content: ""; position: absolute; inset: 0; }   /* the whole card is the target; the links in its text sit above it */
.pill-card > p { margin: 0 0 var(--s-2); }
.pill-card > p a { position: relative; z-index: 1; }
.pill-card .pill-card__alt { font-size: var(--fs-xs); color: var(--push-soft); }
.pill-card:hover, .pill-card:has(input:checked), .pill-card:has(.pill-card__go:focus-visible) { border-color: var(--pull); box-shadow: 0 0 0 1px var(--pull), 0 0 16px rgb(77 141 255 / .35); text-shadow: none; }
.pill-card--push:hover, .pill-card--push:has(input:checked), .pill-card--push:has(.pill-card__go:focus-visible) { border-color: var(--push); box-shadow: 0 0 0 1px var(--push), 0 0 16px rgb(255 92 92 / .35); }
.pill-card:has(input:focus-visible), .pill-card:has(.pill-card__go:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.pill-card__go:focus-visible { outline: none; }
.pill-card__state::before { content: "[ ] "; content: "[ ] " / ""; white-space: pre; }
.pill-card:has(input:checked) .pill-card__state::before { content: "[x] "; content: "[x] " / ""; }
.pill-card:has(input:disabled) { opacity: 1; color: var(--text-muted); border-color: var(--line); border-top-color: var(--line-strong); background: var(--bg-panel); cursor: not-allowed; box-shadow: none; }

/* ---- callouts */
.callout { margin: 0 0 var(--s-4); padding: 14px 18px; background: var(--bg-callout); border: 1px solid var(--line); border-left: var(--bar) solid var(--green); color: var(--green-soft); font-size: var(--fs-sm); }
.callout > :last-child { margin-bottom: 0; }
.callout__label { display: block; margin-bottom: var(--s-1); font: 700 var(--fs-sm)/1.4 var(--font-mono); color: var(--green); }
.callout--security { background: var(--bg-warn); border: 1px solid var(--crit); border-left-width: var(--bar); color: var(--warn-soft); }
.callout--security .callout__label { display: inline-block; background: var(--crit); color: var(--on-crit); padding: 0 .6em; margin-bottom: var(--s-2); }
.callout--security code { color: var(--warn); background: none; box-shadow: none; padding: 0; }
/* on the calm pages a callout reads like the text around it: the same size (the paragraph rule of Home, which is smaller, would win)
   and the same measure, which is counted in the characters of the face it is set in: the box takes the face of the text too */
html[data-regime="calm"] .callout { max-width: var(--measure); font-family: var(--font-prose); font-size: var(--fs-md); }
html[data-regime="calm"] .callout > p { font-size: var(--fs-md); }

/* ---- tables */
.table-wrap { overflow-x: auto; margin: 0 0 var(--s-4); border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.55; }
th { text-align: left; padding: var(--s-2) var(--s-3); background: var(--bg-raised); color: var(--green); border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--bg-raised); }
td:first-child code { font-weight: 700; white-space: nowrap; }
.table-wrap:not(:has(table[data-config])) td code { white-space: normal; }   /* a name in a rename table wraps, after an underscore, instead of hiding the column after it */
@media (max-width: 39.99rem) {
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: 100%; }
  .table--stack tr { border-bottom: 1px solid var(--line-strong); padding: var(--s-2) 0; }
  .table--stack tbody tr:last-child { border-bottom: 0; }
  .table--stack td { border: 0; padding: 2px var(--s-3); }
  .table--stack td::before { content: attr(data-label) ": "; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-xs); }
  .table--stack td:first-child::before { content: none; }
}

/* ---- accordion */
.acc { border: 1px solid var(--line); background: var(--bg-panel); margin-bottom: var(--s-2); }
.acc > summary { list-style: none; display: flex; gap: var(--s-2); align-items: baseline; min-height: 2.75rem; padding: var(--s-3) var(--s-4); color: var(--text-strong); font: 700 var(--fs-sm)/1.5 var(--font-mono); cursor: pointer; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::before { content: "[+]"; content: "[+]" / ""; color: var(--green); flex: none; }
.acc[open] > summary::before { content: "[-]"; content: "[-]" / ""; }
.acc > summary:hover { background: var(--bg-tint); }
.acc[open] { border-left: 3px solid var(--green); }
.acc[open] > summary { border-bottom: 1px solid var(--line); }
.acc__body { padding: var(--s-3) var(--s-4); font-size: var(--fs-sm); }
.acc__body > :last-child { margin-bottom: 0; }
.acc > summary > span { display: inline; }

/* ---- figure and download line */
.shot { margin: 0; }
.shot img { width: 100%; border: 1px solid var(--line); }
.shot figcaption { margin-top: var(--s-3); font: 400 var(--fs-sm)/1.6 var(--font-mono); color: var(--green-mid); }
.shot figcaption code { background: none; box-shadow: none; padding: 0; }
.dl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: var(--s-3) 0 var(--s-4); font-size: var(--fs-xs); color: var(--text-muted); }

/* ---- css/40-home.css */
/* Home and 404, the show regime: rain, hero, band, panels, stats, terminal, opening.
   Motion exists only under .js .is-motion: body.is-motion is set by assets/home.js when the reader has not asked for
   less and the rain switch is on, so no animation can exist without the switch that stops it (WCAG 2.2.2). */

/* ---- rain */
.rain { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; }
html[data-rain="off"] .rain, html[data-rain="off"] .band canvas { display: none; }
main { position: relative; z-index: 2; }   /* above the rain and above the footer (the rail of Home runs down over it); the top bar is sticky with its own z-index */
.footer { position: relative; z-index: 1; }

/* ---- layout, panel, prompt heading, badge row */
.home { max-width: var(--home-max); margin: 0 auto; padding: var(--s-6) var(--gutter) var(--s-9); display: grid; gap: var(--gap-section); }
.home > * { min-width: 0; }
.panel { background: var(--bg-panel); border: var(--bw) solid var(--line); padding: var(--s-4) var(--s-5); box-shadow: var(--halo); }
@media (max-width: 30rem) { .panel { padding: .875rem var(--s-4); } }
.panel > p, .callout > p { margin: 0 0 var(--s-3); font-size: var(--fs-sm); line-height: var(--lh-body); }
.panel > :last-child, .callout > :last-child { margin-bottom: 0; }
.h-prompt { margin: 0 0 var(--s-3); font: 700 var(--fs-lg)/var(--lh-tight) var(--font-mono); color: var(--green); }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.cta .btn:not(:hover), .badges .badge:not(:hover) { box-shadow: var(--halo); }   /* a black halo, so the rain fades before it touches a button or a badge */
a.badge { text-decoration: none; }
a.badge:hover { background: var(--bg-raised); box-shadow: var(--glow-box); text-shadow: none; }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }
@media (max-width: 30rem) { .cta .btn { flex: 1 1 100%; } }
.lede { margin: 0 auto; max-width: 52rem; text-align: center; background: #000; border: 1px solid var(--line); padding: 10px 18px; color: var(--green-soft); font: 400 var(--fs-sm)/1.6 var(--font-mono); box-shadow: var(--halo); }

/* ---- hero: the scene is real text and live SVG; the dot stays small (r 7 in a 900 wide scene) and never scales */
.hero { container-type: inline-size; position: relative; background: rgb(0 0 0 / .82); border: 1px solid var(--line); box-shadow: var(--halo); overflow: hidden; }
.hero__scene { display: block; width: 100%; height: auto; }
.hero__scene--wide { display: none; }
.hero__scene--narrow { max-width: 21rem; margin: 0 auto; }
.hero__strip { max-height: 4.5rem; }
.hero__text { background: #000; box-shadow: 0 0 24px 12px #000; padding: var(--s-2) var(--s-4) var(--s-4); text-align: center; }
.hero__wordmark { margin: 0; font: 700 clamp(2.75rem, 15vw, 4.875rem)/1 var(--font-mono); letter-spacing: .2em; margin-right: -.2em; color: var(--green); text-shadow: 0 0 14px rgb(0 255 65 / .9), 0 0 2px rgb(0 255 65 / .9); }
.hero__tagline { margin: var(--s-3) 0 0; font: 400 var(--fs-md)/1.5 var(--font-mono); color: #c4ffd6; }
.hero__tagline span { display: inline-block; white-space: nowrap; }
@container (min-width: 32.5rem) {
  .hero__scene--wide { display: block; }
  .hero__scene--narrow, .hero__strip { display: none; }
  .hero__text { position: absolute; left: 53.4%; top: 17%; right: 1.5%; padding: 0 var(--s-2) var(--s-1); text-align: left; }
  .hero__wordmark { font-size: clamp(2.75rem, 8.67cqw, 5.4rem); }
  .hero__tagline { margin-top: 1.6cqw; font-size: max(.875rem, 1.78cqw); }
}
/* At rest, and whenever motion is off, the dot waits just past the first spike: the poster frame of the generator. */
.hero__wire { stroke-dasharray: 1 2; }
.sweep-head { offset-rotate: 0deg; offset-distance: 8.9%; offset-path: path('M 90 195 L 133.2 195 L 146.7 183.1 L 162.9 206.9 L 179 164.4 L 197.9 213.7 L 211.4 195 L 260 195 L 280 195 L 323.2 195 L 336.7 183.1 L 352.9 206.9 L 369 164.4 L 387.9 213.7 L 401.4 195 L 450 195 C 456 195, 462 300, 469 300 L 496.4 300 L 504.9 285.3 L 515.2 314.7 L 525.4 262.2 L 537.4 323.1 L 546 300 L 576.8 300 L 604.1 300 L 612.7 285.3 L 622.9 314.7 L 633.2 262.2 L 645.2 323.1 L 653.7 300 L 684.5 300 L 711.9 300 L 720.4 285.3 L 730.7 314.7 L 740.9 262.2 L 752.9 323.1 L 761.5 300 L 792.2 300 L 819.6 300 L 828.2 285.3 L 838.4 314.7 L 848.7 262.2 L 860.7 323.1 L 869.2 300 L 900 300'); }
.sweep-head--lens { offset-distance: 26.9%; offset-path: path('M 90 195 L 133.2 195 L 146.7 183.1 L 162.9 206.9 L 179 164.4 L 197.9 213.7 L 211.4 195 L 260 195 L 280 195 L 323.2 195 L 336.7 183.1 L 352.9 206.9 L 369 164.4 L 387.9 213.7 L 401.4 195 L 450 195'); }
.sweep-trail { stroke-dashoffset: 47.6; }
.sweep-trail--lens { stroke-dashoffset: -25.4; }
/* Live: the line draws itself once, then the dot travels it, trail behind. */
.js .is-motion .is-live .hero__wire { animation: draw 1.2s ease-out both; }
.js .is-motion .is-live .sweep-head { opacity: 0; animation: sweep-head 1.5s linear 1.3s infinite; }
.js .is-motion .is-live .sweep-trail { opacity: 0; animation: sweep-trail 1.5s linear 1.3s infinite; }
.js .is-motion .is-live .sweep-head--lens { animation: sweep-lens 1.5s linear 1.3s infinite; }
.js .is-motion .is-live .sweep-trail--lens { animation: sweep-lens-trail 1.5s linear 1.3s infinite; }
@keyframes draw { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
@keyframes sweep-head { from { offset-distance: 0%; opacity: 1; } to { offset-distance: 100%; opacity: 1; } }
@keyframes sweep-trail { from { stroke-dashoffset: 193; opacity: 1; } to { stroke-dashoffset: -1440.3; opacity: 1; } }
@keyframes sweep-lens { 0% { offset-distance: 0%; opacity: 1; } 40% { offset-distance: 100%; opacity: 1; } 41%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes sweep-lens-trail { 0% { stroke-dashoffset: 120; opacity: 1; } 40% { stroke-dashoffset: -419.7; opacity: 1; } 41%, 100% { stroke-dashoffset: -419.7; opacity: 0; } }
html[data-rain="off"] .hero { background: #000; }

/* The glitch of the wordmark and of the 404 heading: an RGB split and a clip, 200 ms. It borrows the two pill colours
   for a fifth of a second; nothing else on the site is split like this. */
.js .is-motion .is-glitch { animation: glitch .2s steps(1) both; }
@keyframes glitch {
  0% { clip-path: inset(0 0 58% 0); transform: translateX(-4px); text-shadow: 4px 0 var(--push), -4px 0 var(--pull); }
  25% { clip-path: inset(42% 0 20% 0); transform: translateX(5px); text-shadow: -4px 0 var(--push), 4px 0 var(--pull); }
  50% { clip-path: inset(12% 0 56% 0); transform: translateX(-3px); text-shadow: 3px 0 var(--push), -3px 0 var(--pull); }
  75% { clip-path: inset(66% 0 0 0); transform: translateX(3px); text-shadow: -3px 0 var(--push), 3px 0 var(--pull); }
  100% { clip-path: none; transform: none; }
}

/* ---- divider band: black between two bright rules, so it stays a separator with no script and with the rain off */
.band { position: relative; height: 80px; background: #000; border-top: 1px solid var(--green); border-bottom: 1px solid var(--green); overflow: hidden; }
.band canvas { display: block; width: 100%; height: 100%; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(0 0 0 / .88), rgb(0 0 0 / 0) 85%); pointer-events: none; }

/* ---- stats: a number over a label, each box one link */
.stats { display: grid; gap: var(--s-2); margin: 0; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); background: var(--bg-panel); box-shadow: var(--halo); }
.stats > div { position: relative; display: flex; flex-direction: column-reverse; justify-content: center; min-height: 4.5rem; background: var(--bg-panel); border: 1px solid var(--line); padding: var(--s-3); text-align: center; transition: border-color var(--t-fast), background var(--t-fast); }
.stats dd { margin: 0; font: 700 var(--fs-stat)/1.2 var(--font-mono); color: var(--green); text-shadow: var(--glow-text); }
.stats dt { font: 400 var(--fs-xs)/1.4 var(--font-mono); color: var(--green-mid); }
.stats a::before { content: ""; position: absolute; inset: 0; }   /* the stretched link; ::after stays free for the arrow of an external one */
.stats a:hover { text-shadow: none; }
.stats > div:not(:has(dd)) { min-height: 3rem; }
.stats > div:hover { border-color: var(--green); background: var(--bg-tint); }
.stats > div:has(a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.stats a:focus-visible { outline: none; }
.stats--health { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.split { display: grid; gap: var(--s-3); }
@media (min-width: 56rem) { .split { grid-template-columns: 3fr 2fr; align-items: start; } .split .stats { grid-template-columns: 1fr; } }
.features { margin: 0; padding: 0; list-style: none; font: 400 var(--fs-sm)/1.7 var(--font-mono); color: var(--green-soft); }
.features li { position: relative; padding-left: 1.4em; margin-bottom: var(--s-3); }
.features li::before { content: "\25A0"; position: absolute; left: 0; color: var(--green); }
.features b { color: var(--text-strong); }

/* ---- blocks of the page */
/* the four commands: a code box that stacks on a phone, where a code block would hide the descriptions */
.cmds { margin: 0 0 var(--s-3); padding: var(--s-3) var(--s-4); background: var(--bg-code); border: 1px solid var(--line); font: 400 var(--fs-sm)/var(--lh-code) var(--font-mono); }
.cmds > div { margin-bottom: var(--s-2); }
.cmds > div:last-child { margin-bottom: 0; }
.cmds dt { color: var(--green-soft); }
.cmds code { padding: 0; background: none; box-shadow: none; color: inherit; font-size: inherit; }
.cmds dd { margin: 0 0 0 2ch; color: var(--green-mid); }
@media (min-width: 40rem) { .cmds > div { display: grid; grid-template-columns: 28ch 1fr; margin: 0; } .cmds dd { margin: 0; } }
.zipcard { margin-bottom: var(--s-3); padding: 14px 16px; border: 1px solid var(--line); border-top: var(--bw-accent) solid var(--green); }
.zipcard__title { margin: 0 0 var(--s-2); font: 700 var(--fs-md)/1.3 var(--font-mono); color: var(--green); }
.zipcard p { margin: 0 0 var(--s-2); color: var(--green-soft); font-size: var(--fs-sm); }
.zipcard .dl { margin: var(--s-3) 0 0; }
.pillart { margin: 0 0 var(--s-3); }
.pillart img { width: 100%; max-width: 900px; margin: 0 auto; }
.pills + .pillnote { margin-top: var(--s-4); }
.shot__open { display: block; }
.panel--lost { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-4) var(--s-6); text-align: center; }
.lost__text > :last-child { margin-bottom: 0; }
html[data-page="404"] .home { align-content: center; min-height: calc(100vh - var(--nav-h) - 9rem); }
html[data-page="404"] .panel--lost .h-prompt { font-size: var(--fs-2xl); }

/* ---- the terminal of the page: a sample, then a live prompt */
.term__l, .term__o { display: inline; }
.term__o { white-space: pre-wrap; overflow-wrap: anywhere; }
.term__body a { color: var(--green); }
.term--live .term__body { max-height: 20rem; overflow: auto; padding-bottom: 0; }
.term--live { cursor: text; }
.term--live .term__body, .term--live .term__in { cursor: auto; }
.term__in { display: flex; align-items: center; padding: 0 18px 14px; background: var(--bg-code); font: 700 var(--fs-sm)/var(--lh-code) var(--font-mono); color: var(--green); cursor: text; }
.term__ps1 { white-space: pre; }
.term__in .cursor { display: none; }
.term__in:not(:focus-within):has(.term__field:placeholder-shown) .cursor { display: inline-block; margin-right: .5ch; }
.term__field { flex: 1; min-width: 0; height: calc(var(--fs-sm) * var(--lh-code)); margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--green); font: inherit; caret-color: var(--green); }
.term__field::placeholder { color: var(--green-dim); opacity: 1; font-weight: 400; }
@media (pointer: coarse) { .term__field { font-size: max(16px, var(--fs-sm)); } }   /* iOS zooms into anything smaller */
.term.is-typing .term__l:not(.is-shown) { visibility: hidden; }
.term.is-typing .term__in { opacity: 0; }   /* still focusable: focusing it completes the typing */

/* ---- the opening sequence and the wash: both are made by script, over everything */
.opening { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--s-6); background: #000; }
.opening.is-out { opacity: 0; transition: opacity .4s ease-out; }
.opening__text { width: 27ch; max-width: 100%; font: 700 clamp(1rem, 4.6vw, 1.75rem)/1.8 var(--font-mono); }
.opening__line { white-space: pre; min-height: 1.8em; }
.opening__ch { position: relative; color: transparent; }
.opening__ch.is-on { color: var(--green); text-shadow: var(--glow-soft); }
.opening__ch.is-cur::before { content: ""; position: absolute; left: 0; top: .2em; width: 100%; height: 1.3em; background: var(--green); }
.js .is-motion .opening__ch.is-cur::before { animation: blink 1.06s steps(1) infinite; }
.opening__skip { position: absolute; right: var(--s-5); bottom: var(--s-5); padding: .7rem 1.1rem; background: none; border: 1px solid var(--line-strong); color: var(--green-soft); font: 400 var(--fs-xs)/1 var(--font-mono); cursor: pointer; }
.opening__skip:hover { border-color: var(--green); color: var(--green); }
.js .wash { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0; animation: wash .3s ease-in forwards; }
.wash--pull { background: radial-gradient(circle at 50% 50%, rgb(77 141 255 / .9), rgb(10 30 90 / .95)); }
.wash--push { background: radial-gradient(circle at 50% 50%, rgb(255 92 92 / .9), rgb(90 12 12 / .95)); }
@keyframes wash { to { opacity: 1; } }

/* ---- reveals: a panel below the fold fades and rises in once, 250 ms; the class is added by script */
.js .is-motion .rv { opacity: 0; transform: translateY(14px); transition: opacity .25s ease-out, transform .25s ease-out; }
.js .is-motion .rv.is-in { opacity: 1; transform: none; }

/* ---- the white rabbit: pixel art, 16 by 14 cells, three px a cell (two on a phone), white with a faint green glow.
   Only the frame that is shown has opacity 1. A hop is 330 ms: crouch, stretch through the air, land, sit. */
.rb { opacity: 0; }
.rb--sit { opacity: 1; }
[data-rabbit].is-twitch .rb--sit { opacity: 0; }
[data-rabbit].is-twitch .rb--twitch { opacity: 1; }
.rabbit { display: block; flex: none; }
.rabbit__hop { display: block; width: 48px; height: 42px; translate: 0 0; scale: 1 1; }
.rabbit__svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 5px var(--bg-panel)) drop-shadow(var(--glow-soft)); }   /* a black rim first, so the white stays white over the rain, then the green glow of the tokens */
[data-rabbit].is-up .rabbit__hop { scale: -1 1; }
@media (max-width: 29.99rem) { .rabbit__hop { width: 32px; height: 28px; } }
.js .is-motion [data-rabbit]:is(.is-moving, .is-in, .is-hop) .rabbit__hop { animation: rabbit-arc .33s linear var(--loops, 1); }
.js .is-motion [data-rabbit]:is(.is-moving, .is-in, .is-hop) .rb--sit { animation: pose-sit .33s steps(1) var(--loops, 1); }
.js .is-motion [data-rabbit]:is(.is-moving, .is-in, .is-hop) .rb--land { animation: pose-land .33s steps(1) var(--loops, 1); }
.js .is-motion [data-rabbit]:is(.is-moving, .is-in, .is-hop) .rb--stretch { animation: pose-stretch .33s steps(1) var(--loops, 1); }
[data-rabbit].is-moving { --loops: infinite; }
[data-rabbit].is-in { --loops: 3; }
@keyframes rabbit-arc { 0%, 12% { translate: 0 0; animation-timing-function: ease-out; } 36% { translate: 0 -9px; animation-timing-function: ease-in; } 60%, 100% { translate: 0 0; } }
@keyframes pose-sit { 0% { opacity: 0; } 76% { opacity: 1; } }
@keyframes pose-land { 0% { opacity: 1; } 12% { opacity: 0; } 60% { opacity: 1; } 76% { opacity: 0; } }
@keyframes pose-stretch { 0% { opacity: 0; } 12% { opacity: 1; } 60% { opacity: 0; } }

/* ---- the scroll rail: a dim trail in the right gutter, the rabbit on it by scroll progress, a hole at the bottom.
   Only where the gutter is wide enough to hold it clear of the panels (from the width of the inline top bar). */
.rail { display: none; position: fixed; z-index: 5; top: calc(var(--nav-h) + 1.25rem); bottom: 1.5rem; right: 1.25rem; width: 48px; pointer-events: none; --travel: calc(100vh - var(--nav-h) - 2.75rem - 48px); }
@media (min-width: 76rem) { .js .rail { display: block; } .js[data-page="home"] .footer { padding-inline: 6rem; } }   /* only with script (a rabbit that cannot follow the scroll would be a stuck decoration), and the footer's text stays clear of it */
.rail__line { position: absolute; left: 50%; top: 0; bottom: 10px; width: 1px; background: repeating-linear-gradient(to bottom, var(--line-strong) 0 5px, transparent 5px 10px); opacity: .6; }
.rail__hole { position: absolute; left: -8px; right: -8px; bottom: 0; height: 18px; border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, #000 55%, #031a0b 100%); box-shadow: inset 0 0 0 2px var(--green-dim), var(--glow-soft); }
.rail__go { position: absolute; left: 0; top: 0; display: block; width: 48px; height: 42px; pointer-events: auto; transform: translateY(calc(var(--p, 0) * var(--travel))); }
.rail__in { display: block; }
@supports (animation-timeline: scroll()) {
  .js .rail__go { animation: rail-go linear both; animation-timeline: scroll(root block); }
}
html[data-rain="off"] .rail__go { animation: none; }   /* switched off: no animation object at all, the script sets the position (reduced motion does the same through its own rule) */
@keyframes rail-go { from { transform: translateY(0); } to { transform: translateY(var(--travel)); } }   /* an explicit start: the implicit one would be the position the script left in --p */
.js .is-motion .rail.is-away .rail__in { opacity: 0; }
.js .is-motion .rail.is-in .rail__in { animation: rail-in .99s linear both; }
@keyframes rail-in {
  0% { transform: translateX(-104px); opacity: 0; } 2% { opacity: 1; } 4% { transform: translateX(-104px); } 20%, 37% { transform: translateX(-69px); }
  53%, 70% { transform: translateX(-35px); } 87%, 100% { transform: translateX(0); opacity: 1; }
}

/* the way down the hole as words: the last block of the page, a plain link */
.panel--hole { text-align: center; }
.panel--hole p { margin: 0; }
.hole { font: 700 var(--fs-lg)/1.4 var(--font-mono); }

/* ---- css/50-wizard.css */
/* Getting started: the acts, the folds, the strip, the choices, the steps, the helper, the troubleshooting list.
   Everything under .js is the upgrade; without that class the page is the plain guide.
   The page is in the calm regime: nothing moves at rest. The one thing that moves is the heartbeat drawn when a step
   is ticked (once, 600 ms, never under reduced motion); hover and focus use the 120 ms of the components.
   Long-form text (the guide's sentences, in cards and steps) is --font-prose; controls, tags, the strip and code stay
   --font-mono. The calm regime (css/10-base.css) gives every li the prose face at specificity 0, so each li of a widget
   that must stay monospace says so itself below. */

/* ---- narrative labels: decoration, always next to the guide's own heading */
.kicker { margin: 0 0 var(--s-1); font: 700 var(--fs-sm)/1.4 var(--font-mono); color: var(--green-mid); }
.act__kicker { margin: var(--s-8) 0 0; font: 700 var(--fs-xs)/1.4 var(--font-mono); color: var(--green-mid); }
.act__kicker + h2:not([class]) { margin-top: var(--s-1); }
.next { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.next > li { min-width: 0; margin: 0; border: 1px solid var(--line); border-top: var(--bw-accent) solid var(--green); padding: 14px 16px; background: var(--bg-panel); color: var(--green-soft); font-size: var(--fs-sm); }
.next a { font-family: var(--font-mono); font-size: var(--fs-md); }
.next__tag { margin-left: var(--s-2); font: 400 var(--fs-xs)/1 var(--font-mono); color: var(--green-dim); }
@media (min-width: 48rem) { .next { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- acts and folds (script only) */
/* until the script has finished starting, an act shows its label and heading only: no flash of the long guide */
.js .gs:not(.is-ready) .act > :not(.act__kicker):not(h2) { display: none; }
.js .act { margin-top: var(--s-3); border: 1px solid var(--line); }
.js .act.is-open { border-color: var(--line-strong); }
.act[data-off] > .act__kicker { display: none; }
.js .act__kicker { margin: 0; padding: var(--s-3) var(--s-4) 0; }
.fold__h { margin: 0; font: 700 var(--fs-lg)/var(--lh-tight) var(--font-mono); }
.fold__toggle { all: unset; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); width: 100%; min-height: 2.75rem; padding: var(--s-1) var(--s-4) var(--s-3); color: var(--green); font: inherit; cursor: pointer; }
.fold__toggle:hover { background: var(--bg-tint); }
.fold__toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.fold__toggle::before { content: "[+]"; content: "[+]" / ""; flex: none; }
.fold__toggle[aria-expanded="true"]::before { content: "[-]"; content: "[-]" / ""; }
.fold__title { flex: 1 1 12rem; }
.fold__state { font: 400 var(--fs-xs)/1.4 var(--font-mono); color: var(--green-soft); }
.fold__body { padding: var(--s-2) var(--s-4) var(--s-4); border-top: 1px solid var(--line); }
.fold__body > :first-child { margin-top: var(--s-3); }
.fold__body > p:not(.act__next) { max-width: var(--measure); }
.act__next { margin: var(--s-5) 0 0; }
.act__next .btn { width: 100%; white-space: normal; padding-block: var(--s-3); line-height: 1.4; }
.js .trouble { margin-top: var(--s-7); }
/* the two Docker variants fold like acts, one level down */
.fold[data-docker] { margin-top: var(--s-4); border: 1px solid var(--line); }
.fold[data-docker] > .fold__h { font-size: var(--fs-md); }
.fold[data-docker] > .fold__h .fold__toggle { color: var(--green-soft); padding-top: var(--s-2); }
.fold[data-off] > .fold__h .fold__state { color: var(--text-muted); }

/* ---- the strip under the title: route, count, trace, one link, one status line */
.vitals { margin: var(--s-4) 0 var(--s-2); padding: var(--s-3) var(--s-4); background: var(--bg-panel); border: 1px solid var(--line-strong); display: grid; gap: var(--s-2); align-items: center; }
.vitals__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-1) var(--s-3); font: 700 var(--fs-xs)/1.5 var(--font-mono); color: var(--green-soft); }
.vitals__trace { position: relative; height: 1.75rem; min-width: 0; }
.vitals__trace svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vitals__trace path { fill: none; stroke: var(--green); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.vitals__dot { position: absolute; top: 59.2%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--focus); box-shadow: var(--glow-soft); }
.vitals__status { margin: 0; font: 400 var(--fs-xs)/1.5 var(--font-mono); color: var(--green-soft); }
.vitals__status:empty { display: none; }
.vitals__status b { color: var(--green); }
.vitals [data-next] { justify-self: start; }
.vitals-tools { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-5); }
/* the beat: a bright copy of the heartbeat just ticked, fading out. Created by script, only ever one, gone when it ends. */
.js .vitals__trace .vitals__beat { stroke: var(--focus); stroke-width: 3; opacity: 0; animation: beat 600ms ease-out; }
@keyframes beat { from { opacity: 1; } to { opacity: 0; } }
@media (min-width: 64rem) {          /* one compact row that sticks under the top bar; the status line only when it says something */
  .vitals { position: sticky; top: var(--nav-h); z-index: 5; grid-template-columns: auto minmax(6rem, 1fr) auto; column-gap: var(--s-4); padding-block: var(--s-2); }
  .vitals__status { grid-column: 1 / -1; }
  html:has(.vitals) { scroll-padding-top: calc(var(--nav-h) + 5.5rem); }   /* a target or a focused control never lands under the two sticky bars */
}

/* ---- choices: every choice is a radio group, so the arrow keys work for free */
.choice { border: 0; margin: 0 0 var(--s-4); padding: 0; min-width: 0; }
.choice > legend { padding: 0; margin-bottom: var(--s-2); font: 700 var(--fs-sm)/1.4 var(--font-mono); color: var(--green-soft); }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
@media (min-width: 40rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cards > li { min-width: 0; margin: 0; }
.card { position: relative; display: block; height: 100%; padding: 12px 14px 12px 3rem; border: 1px solid var(--line-strong); background: var(--bg-panel); color: var(--green-soft); font-size: var(--fs-sm); line-height: 1.6; cursor: pointer; }
.card::before { content: "[ ]"; content: "[ ]" / ""; position: absolute; left: 14px; top: 12px; font: 700 var(--fs-sm)/1.6 var(--font-mono); color: var(--green); }
.card:hover { border-color: var(--green-mid); }
.card:has(input:checked) { border-color: var(--green); background: var(--bg-tint); box-shadow: var(--glow-box); }
.card:has(input:checked)::before { content: "[x]"; content: "[x]" / ""; }
.card:has(input:focus-visible), .radio:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.card__title { display: block; margin-bottom: var(--s-1); color: var(--text-strong); font: 700 var(--fs-sm)/1.5 var(--font-mono); }
.card__title strong { font-weight: 700; }
.card__body { display: block; font-family: var(--font-prose); font-size: var(--fs-md); line-height: var(--lh-body); }
.card__body code { font-size: .875em; }
.radios { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.radio { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--s-3); border: 1px solid var(--line-strong); color: var(--green-soft); font: 400 var(--fs-sm)/1.3 var(--font-mono); cursor: pointer; }
.radio::before { content: "( ) "; content: "( ) " / ""; white-space: pre; color: var(--green); }
.radio:hover { border-color: var(--green-mid); }
.radio:has(input:checked) { border-color: var(--green); color: var(--green); background: var(--bg-tint); font-weight: 700; }
.radio:has(input:checked)::before { content: "(x) "; content: "(x) " / ""; }
/* the pill choice: the pill card is in 30-components.css, these are the parts only the wizard's choice has */
.pill-card__sub { display: block; margin-bottom: var(--s-1); font-weight: 700; }
.pill-card__lede, .pill-card__why { display: block; font-family: var(--font-prose); font-size: var(--fs-md); line-height: var(--lh-body); }
.pill-card__why { margin-top: var(--s-2); color: var(--warn-soft); }
.pill-card__why b { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--warn); }
.pill-card__why code { color: var(--warn); }
.pill-card.is-off, .pill-card.is-off:hover { color: var(--text-muted); border-color: var(--line); border-top-color: var(--line-strong); background: var(--bg-panel); box-shadow: none; cursor: not-allowed; }
.pill-card.is-off .pill-card__title { color: var(--text-muted); }
.pill-card.is-off .pill-card__glyph { background: var(--line-strong); }

/* ---- steps: the guide's numbered lists with a checkbox, the guide's own number drawn as [4] */
.steps { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); counter-reset: step; }
.steps > .step { counter-increment: step; position: relative; min-width: 0; margin: 0; padding: 3.25rem 16px 14px; background: var(--bg-panel); border: 1px solid var(--line); border-top: var(--bw-accent) solid var(--green); color: var(--green-soft); }
.steps > .step::before { content: "[" counter(step) "]"; content: "[" counter(step) "]" / ""; position: absolute; left: 3.5rem; top: .875rem; font: 700 var(--fs-md)/1.5 var(--font-mono); color: var(--green); }
.steps > .step > :last-child { margin-bottom: 0; }
.step.is-done { border-top-color: var(--line-strong); }
.step[aria-current="step"] { border-color: var(--green); box-shadow: var(--glow-box); }
.step__check { position: absolute; left: 0; top: 0; width: 3.5rem; height: 3.25rem; display: grid; place-items: center; cursor: pointer; }
.step__check input { appearance: none; -webkit-appearance: none; width: 1.5rem; height: 1.5rem; margin: 0; border: 2px solid var(--green); background: var(--bg-code); cursor: pointer; display: grid; place-items: center; border-radius: 0; }
.step__check input:checked { background: var(--green); }
.step__check input:checked::after { content: "x"; content: "x" / ""; color: #000; font: 700 1rem/1 var(--font-mono); }
.step__check input:hover { box-shadow: var(--glow-box); }
/* `done`, or what this step is on this route (for later, optional): real text next to the number, not CSS content */
.step__tag { position: absolute; top: .875rem; left: 6.25rem; right: 12px; min-height: 1.5rem; display: flex; align-items: center; font: 400 var(--fs-xs)/1.3 var(--font-mono); color: var(--text-muted); }
.step__tag:empty { display: none; }
.step.is-done > .step__tag { font-weight: 700; color: var(--green); }
.step .code, .step .term { max-width: 100%; }
.step .code__bar { flex-wrap: wrap; row-gap: var(--s-1); padding-block: var(--s-1); }      /* a narrow bar wraps its copy button instead of overflowing */
.step .code__label { flex: none; }
.step .code__where { flex: 1 1 8rem; min-width: 0; margin-left: 0; }
.step > p:not(.step__help) { max-width: var(--measure); }
.step__help { margin: var(--s-3) 0 0; padding-top: var(--s-2); border-top: 1px solid var(--line); font-family: var(--font-prose); font-size: var(--fs-sm); color: var(--text-muted); }
.step .shot { margin: var(--s-3) 0 0; }
.step .shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.step .shot figcaption { margin-top: var(--s-2); font: 400 var(--fs-xs)/1.5 var(--font-mono); color: var(--green-mid); }

/* ---- helper (path B, step 4) */
.helper { margin: 0 0 var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--line-strong); background: var(--bg-panel); display: grid; gap: var(--s-3); }
.helper__title { margin: 0; font: 700 var(--fs-sm)/1.4 var(--font-mono); color: var(--green); }
.helper textarea.input { width: 100%; min-height: 4.5rem; padding: var(--s-2) var(--s-3); font: 400 1rem/1.4 var(--font-mono); resize: vertical; }
.helper__read, .helper__notes { list-style: none; margin: 0; padding: 0; font: 700 var(--fs-xs)/1.5 var(--font-mono); color: var(--green); }
.helper__read > li, .helper__notes > li { margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs); }
.helper__notes { color: var(--warn); font-weight: 400; }
.helper__tools { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.helper__pointer { margin: var(--s-2) 0 0; font: 400 var(--fs-xs)/1.5 var(--font-mono); color: var(--green-mid); }

/* ---- troubleshooting: always visible, each entry a closed disclosure under its own bold symptom */
.trouble__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.trouble__list > li { min-width: 0; margin: 0; }
.trouble .acc { margin-bottom: 0; }
.trouble .acc__body { max-width: var(--measure); font-size: var(--fs-md); }
.trouble .acc__body > p:first-child { margin-top: 0; }
.trouble__back { margin: var(--s-3) 0 0; font-size: var(--fs-xs); }

/* ---- phones: every nested box (act, step, disclosure) gives back some width */
@media (max-width: 30rem) {
  .js .act__kicker, .fold__toggle, .fold__body { padding-inline: var(--s-3); }
  .steps > .step { padding-inline: 12px; }
  .step .acc__body { padding-inline: var(--s-3); }
}

/* ---- print: everything open, the controls gone */
@media print {
  .kicker, .act__kicker, .vitals, .vitals-tools, .act__next, .step__check, .step__tag, .step__help, .helper, .helper__pointer, .choice--ask { display: none !important; }
  .card::before { display: none; }
  .fold__body[hidden] { display: block !important; }
  .fold__toggle::before, .fold__state { display: none; }
  .js .act, .fold[data-docker], .step, .next > li { border-color: #000; }
  .steps > .step { padding-top: 14px; }
  .steps > .step::before { position: static; margin-right: .5em; }
}

/* ---- css/60-tools.css */
/* The reference tools: filter bar, metric cards, rule cards, panel cards, config builder, site search. Every page
   that uses them is a calm page: nothing here animates, and a transition never lasts more than a hover or a
   focus. Long text (descriptions, summaries, the README's bullets) is in --font-prose; names, expressions and
   controls stay in --font-mono. */

/* ---- the three regions: explorer (Metrics), rules (Alerts), dash (Dashboard) */
.explorer > p { max-width: var(--measure); }
.explorer__note { margin: 0 0 var(--s-4); font: 400 var(--fs-sm)/1.6 var(--font-prose); color: var(--text-muted); }
.explorer__note code { font-size: .9em; }
[data-slot="filter"]:empty { display: none; }
/* The bar is put there by script. Its place is kept while the page loads, so what sits below it does not jump when it arrives:
   the heights are the bar's own at the widths where its rows wrap. Without script (no .js) the slot takes no room. */
.js [data-slot="filter"]:empty { display: block; min-height: var(--bar-h, 0); margin: 0 0 var(--s-5); }
.explorer { --bar-h: 16.9rem; }
.rules { --bar-h: 9.1rem; }
.dash { --bar-h: 6.4rem; }
@media (min-width: 26.5rem) { .explorer { --bar-h: 11.9rem; } }
@media (min-width: 28rem) { .rules { --bar-h: 7.1rem; } }
@media (min-width: 30rem) { .dash { --bar-h: 4.4rem; } }
@media (min-width: 34.5rem) { .rules { --bar-h: 6.4rem; } }
@media (min-width: 35.5rem) { .explorer { --bar-h: 9.9rem; } }
@media (min-width: 42.5rem) { .explorer { --bar-h: 7.1rem; } }
@media (min-width: 43.75rem) { .rules { --bar-h: 4.4rem; } }

/* ---- filter bar */
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin: 0 0 var(--s-5); padding: var(--s-3) var(--s-4); background: var(--bg-raised); border: 1px solid var(--line-strong); }
.filterbar .field { flex: 1 1 14rem; min-width: 0; }
.filterbar__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.filterbar__status { flex: 1 1 8rem; margin: 0; font: 400 var(--fs-xs)/1.5 var(--font-mono); color: var(--green-soft); }
@media (max-width: 29.99rem) { .filterbar { padding: var(--s-3); } .filterbar .field { flex-basis: 100%; } }

/* ---- metric cards: the README's bullet, enriched in place */
.metrics { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: grid; gap: var(--s-3); }
.metric { min-width: 0; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); background: var(--bg-callout); font-family: var(--font-prose); }
.metric:target, .metric:has(> span:target) { border-color: var(--green); background: var(--bg-tint); }
.metric > .metric__use { margin: var(--s-3) calc(-1 * var(--s-4)) calc(-1 * var(--s-3)); border: 0; border-top: 1px solid var(--line); background: none; }   /* the disclosure runs edge to edge along the foot of the card */
.metric > .metric__use[open] { border-left: 0; }
.metric code { font-size: .875em; }
.metric__where { margin: 0 0 var(--s-3); font: 400 var(--fs-sm)/1.6 var(--font-prose); }
.metric__use .code { margin: 0 0 var(--s-3); }
.metric__use .acc__body > :last-child { margin-bottom: 0; }
.metric-ref { text-decoration-color: var(--line-strong); }

/* ---- rule cards (Alerts) */
.rule-group { margin: 0 0 var(--s-6); }
.rule { min-width: 0; margin: 0 0 var(--s-4); padding: var(--s-4); border: 1px solid var(--line); border-left: 3px solid var(--warn-line); background: var(--bg-callout); }
.rule[data-severity="critical"] { border-left: var(--bar) solid var(--crit); padding-left: calc(var(--s-4) - var(--bar) + 3px); }   /* the thicker bar does not push the text sideways */
.rule:target { background: var(--bg-tint); border-color: var(--green); }
.rule__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); font: 700 var(--fs-md)/1.3 var(--font-mono); color: var(--text-strong); }
.rule__title code { font-size: 1em; }
.rule__summary { margin: 0 0 var(--s-3); font: 700 var(--fs-md)/1.5 var(--font-prose); color: var(--text-strong); }
.rule__desc { margin: 0 0 var(--s-3); font: 400 var(--fs-md)/var(--lh-body) var(--font-prose); }
.rule__reads, .dash-panel__reads { margin: 0 0 var(--s-3); font: 400 var(--fs-sm)/1.9 var(--font-prose); color: var(--text-muted); }
.rule__why { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 var(--fs-xs)/1.6 var(--font-mono); color: var(--text); }
.rule .acc { margin: 0; background: var(--bg-code); }
.rule > :last-child, .dash-panel > :last-child { margin-bottom: 0; }

/* ---- panel cards (Dashboard) */
.dash-row { margin: 0 0 var(--s-6); }
.dash-panel { min-width: 0; margin: 0 0 var(--s-4); padding: var(--s-4); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); background: var(--bg-callout); }
.dash-panel:target { background: var(--bg-tint); border-color: var(--green); }
.dash-panel__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); font: 700 var(--fs-md)/1.3 var(--font-mono); color: var(--text-strong); }
.dash-panel__desc { margin: 0 0 var(--s-3); font: 400 var(--fs-md)/var(--lh-body) var(--font-prose); }
.rule .code, .dash-panel .code { margin: 0 0 var(--s-3); }
.rule .code pre, .dash-panel .code pre, .metric__use .code pre { white-space: pre-wrap; overflow-wrap: break-word; }     /* an expression wraps, so none of it is out of sight */
.rules > .dl { margin: 0 0 var(--s-4); }
.dash > p { max-width: var(--measure); }
.dash-shot { margin: 0 0 var(--s-5); }
.dash-shot a { display: block; }

/* ---- config builder: the fifth column and the file under each table. A five column table needs about 64rem to leave "What it
   does" a readable line and the article is never that wide, so the rows of a config table are always cards, the way every
   table is under 640 px, and their text keeps the measure of the page. */
table[data-config] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
table[data-config], table[data-config] tbody, table[data-config] tr, table[data-config] td { display: block; width: 100%; }
table[data-config] tr { border-bottom: 1px solid var(--line-strong); padding: var(--s-2) 0; }
table[data-config] tbody tr:last-child { border-bottom: 0; }
table[data-config] td { border: 0; padding: 2px var(--s-3); max-width: var(--measure); }
table[data-config] td::before { content: attr(data-label) ": "; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-xs); }
table[data-config] td:first-child::before { content: none; }
table[data-config] td[data-label="Your value"] .field { max-width: 26rem; }
@media (min-width: 80rem) { .shell:has(table[data-config]) { grid-template-columns: 15.5rem minmax(0, 1fr); } }   /* this page has no contents column to leave room for */
table[data-config] .field { gap: var(--s-1); }
.builder { margin: 0 0 var(--s-8); }
.builder .code { margin: 0 0 var(--s-3); }
.builder__changed { max-width: var(--measure); margin: 0 0 var(--s-3); font: 400 var(--fs-sm)/1.6 var(--font-prose); color: var(--green-soft); }
.builder__tools { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.builder__link { margin: var(--s-4) 0 0; font: 400 var(--fs-sm)/1.6 var(--font-prose); }
.builder__check { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; cursor: pointer; font: 400 var(--fs-sm)/1 var(--font-mono); color: var(--text-strong); }
.builder__check input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--green); }
.field > .error { font-family: var(--font-prose); font-size: var(--fs-sm); line-height: 1.45; }
td .field > .error:empty { display: none; }
.headers { display: grid; gap: var(--s-2); }
.headers:empty { display: none; }
.headers__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }   /* name, value, remove: the cell is narrow beside a table */
.headers__row + .headers__row { padding-top: var(--s-2); border-top: 1px solid var(--line); }
.headers__row > button { justify-self: start; }

/* ---- site search: a panel under the top bar, a full width sheet on a phone */
.search { position: fixed; z-index: 30; top: var(--nav-h); left: 0; right: 0; max-height: calc(100vh - var(--nav-h)); overflow-y: auto; padding: var(--s-3) var(--gutter) var(--s-4); background: var(--bg-panel); border-bottom: 1px solid var(--green); }
@media (min-width: 48rem) {
  .search { left: auto; right: max(var(--gutter), calc((100vw - var(--shell-max)) / 2 + var(--gutter))); width: min(40rem, calc(100vw - 2 * var(--gutter))); border: 1px solid var(--green); border-top: 0; }
}
.search__box { display: flex; align-items: center; background: var(--bg-code); border: 1px solid var(--line-strong); }
.search__box:focus-within { border-color: var(--green); box-shadow: var(--glow-box); }
.search__box > span { padding-left: var(--s-3); color: var(--green); font: 700 var(--fs-sm)/1 var(--font-mono); white-space: nowrap; }
.search__box input { flex: 1; min-width: 0; min-height: 2.75rem; padding: 0 var(--s-2); background: none; border: 0; color: var(--text-strong); font: 400 var(--fs-sm)/1 var(--font-mono); }
.search__box input:focus-visible { outline: none; }
.search__box input::placeholder { color: var(--green-dim); opacity: 1; }
.search__box kbd { margin-right: var(--s-2); }
.search__status { margin: var(--s-2) 0; font: 400 var(--fs-xs)/1.5 var(--font-mono); color: var(--text-muted); }
.search__results { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; border: 1px solid var(--line-strong); background: var(--bg-panel); }
.search__results li { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); }
.search__results li:last-child { border-bottom: 0; }
.search__results li[aria-selected="true"] { background: var(--bg-tint); box-shadow: inset 3px 0 0 var(--green); }
.search__results a { display: block; text-decoration: none; }
.search__path { display: block; font: 700 var(--fs-sm)/1.4 var(--font-mono); color: var(--green); }
.search__snip { display: block; font: 400 var(--fs-xs)/1.5 var(--font-prose); color: var(--text); }

/* ---- print: the tools' controls go, the lists stay */
@media print {
  .filterbar, .builder__tools, .builder__link, .search { display: none !important; }
  .metric, .rule, .dash-panel { break-inside: avoid; border: 1px solid #000; }
}

/* ---- css/90-print.css */
/* Print: the chrome goes, folded content shows, black text on white. Each stylesheet writes the print rules of its
   own names; this one holds the chrome only. */
@media print {
  :root { color-scheme: light; }
  *, *::before, *::after { background: #fff !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
  .skip, .nav, .side, .toc, .toc-inline, .pager, .rain, .band, [data-slot], .copy, .btn, .opening, .wash, .term__in, .rail { display: none !important; }
  .rv { opacity: 1 !important; transform: none !important; }
  .pill-card__go::after, .stats a::before { content: none !important; }   /* the stretched links would be white boxes over the text */
  .term__l, .term__cmd { visibility: visible !important; clip-path: none !important; }   /* printed in the middle of the typing */
  .shell { display: block; border: 0; }
  .article { padding: 0; }
  a { text-decoration: underline; }
  pre, .table-wrap { overflow: visible; white-space: pre-wrap; }
}