/* rogerwilco: one stylesheet for every page.
   Paper, ink, one red. Text is Source Serif 4; anything a program reads (a line, a label, the nav) is DM Mono, the
   same mono as crox.io. The memorable thing on any page is the line itself, drawn as a strip; everything else stays
   quiet. Dark mode follows the system and uses Crox's near-black. */

:root {
  --paper: #FAFAF7;
  --ink: #16181C;
  --muted: #5B6168;
  --rule: #D9DBD6;
  --well: #F0EFEA;
  --surface: #FFFFFF;
  --accent: #B8402A;        /* Crox red, darkened a step for small text on paper */
  --accent-ink: #FFFFFF;
  --good: #2F6B3A;
  --good-tint: #E3F0E6;
  --bad: #A3231A;
  --bad-tint: #F8E6E3;
  --warn: #8A5A12;
  --warn-tint: #F7EDD8;
  --bar: #B8402A;
  --barbase: #BFC2BB;
  --bar2: #D9897A;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "DM Mono", "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0A0A0A; --ink: #E8E6E1; --muted: #9A9A94; --rule: #2A2A2A; --well: #161616; --surface: #121212;
    --accent: #E0634A; --accent-ink: #0A0A0A; --good: #7CC48A; --good-tint: #15301C; --bad: #FF8F85; --bad-tint: #3B1B19;
    --warn: #D9A054; --warn-tint: #372A12; --bar: #E0634A; --barbase: #3A3A3A; --bar2: #8A4A3C; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0A0A0A; --ink: #E8E6E1; --muted: #9A9A94; --rule: #2A2A2A; --well: #161616; --surface: #121212;
  --accent: #E0634A; --accent-ink: #0A0A0A; --good: #7CC48A; --good-tint: #15301C; --bad: #FF8F85; --bad-tint: #3B1B19;
  --warn: #D9A054; --warn-tint: #372A12; --bar: #E0634A; --barbase: #3A3A3A; --bar2: #8A4A3C; color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding: 0 16px 72px; background: var(--paper); color: var(--ink);
  font: 17px/1.6 var(--serif); font-variation-settings: "opsz" 14;
}
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
code, pre, kbd { font-family: var(--mono); font-size: 0.86em; }
code { background: var(--well); padding: 0 0.25em; border-radius: 3px; }
pre code, .line code { background: none; padding: 0; }
pre { margin: 0; padding: 10px 12px; background: var(--well); border-left: 3px solid var(--rule); font: 0.84rem/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
pre b { color: var(--accent); font-weight: 500; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.18; text-wrap: balance; letter-spacing: -0.005em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }
p { margin: 0; }
ul, ol { margin: 0; padding-left: 1.3rem; }
li { margin: 0.35rem 0; }
em { font-style: italic; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 1.5rem 0; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (max-width: 560px) { body { font-size: 16px; } h1 { font-size: 1.65rem; } }

/* ------------------------------------------------------------------ the shared header and footer */
.site-foot { max-width: 62rem; margin: 3rem auto 0; padding-top: 12px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 6px 22px; font: 0.78rem/1.5 var(--mono); color: var(--muted); }
.site-foot code { background: none; padding: 0; }
.site-head { max-width: 62rem; margin: 0 auto; padding: 14px 0 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; border-bottom: 1px solid var(--rule); }
.site-head .mark { margin: 0; font: 500 1.35rem/1.1 var(--mono); letter-spacing: -0.02em; }
.site-head .mark a { color: inherit; text-decoration: none; }
.site-head .mark .roger { color: var(--muted); font-weight: 400; }
.site-head .mark .wilco { color: var(--accent); }
.site-head .ver { margin-left: 8px; padding: 2px 6px; border: 1px solid var(--rule); border-radius: 3px; color: var(--muted); font: 400 0.68rem/1 var(--mono); vertical-align: middle; }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 0.82rem/1.4 var(--mono); margin-left: auto; }
.site-nav a { color: var(--ink); text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.site-nav .lab { color: var(--muted); }
.site-nav .lab:hover { color: var(--ink); }
/* The menu button: hidden on a wide screen, where the links fit on one line beside the wordmark. */
.nav-toggle { display: none; margin-left: auto; align-self: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); color: var(--ink); cursor: pointer; }
.nav-toggle svg { display: block; width: 22px; height: 22px; margin: auto; }
.nav-toggle line { stroke: currentColor; stroke-width: 2; stroke-linecap: round; transform-origin: 12px 12px; }
.nav-toggle:hover { border-color: var(--ink); }
.nav-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.nav-toggle[aria-expanded="true"] .l1 { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .l2 { opacity: 0; }
.nav-toggle[aria-expanded="true"] .l3 { transform: translateY(-6px) rotate(-45deg); }
@media (prefers-reduced-motion: no-preference) { .nav-toggle line { transition: transform 0.2s ease, opacity 0.15s ease; } }
@media (max-width: 720px) {
  .site-head { align-items: center; gap: 0 12px; padding-bottom: 0; }
  .site-head .mark { padding: 4px 0 12px; }
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; flex-basis: 100%; flex-direction: column; gap: 0; margin: 0; border-top: 1px solid var(--rule); font-size: 1rem; }
  .site-head.open .site-nav { display: flex; }
  .site-nav a { padding: 12px 4px; border-bottom: 1px solid var(--rule); }     /* a 44px row to tap */
  .site-nav a:hover { border-bottom-color: var(--rule); color: var(--accent); }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--rule); }
  .site-nav a:last-child { border-bottom: 0; }
  .site-nav .lab { color: var(--muted); }
}

/* ------------------------------------------------------------------ reading column and the document pages */
.wrap { max-width: 62rem; margin: 0 auto; display: grid; gap: 20px; }
.wrap > * { min-width: 0; }
main.doc, .doc { max-width: 70ch; min-width: 0; margin: 0 auto; display: grid; gap: 14px; padding-top: 22px; }
.doc > *, .doc li, .doc .box { min-width: 0; }
.doc li { overflow-wrap: anywhere; }
.doc h2 { margin-top: 18px; }
.doc h3 { margin-top: 8px; }
.doc ol, .doc ul { display: grid; gap: 6px; }
.doc ol > li { padding-left: 0.2rem; }
.doc pre.reply { border-left-color: var(--good); }
.doc .box { padding: 12px 14px 14px; background: var(--surface); border: 1px solid var(--rule); display: grid; gap: 8px; }
.doc .box h2, .doc .box h3 { margin: 0; }
.doc .muted { color: var(--muted); font-size: 0.94rem; }
.doc table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.doc th, .doc td { padding: 6px 8px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.doc th { color: var(--muted); font: 0.78rem/1.3 var(--mono); }
.doc .ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: 8px; }
.doc .ways a { padding: 10px 12px; background: var(--surface); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; font: 0.9rem var(--mono); }
.doc .ways a:hover { border-color: var(--accent); }
.lede { font-size: 1.18rem; line-height: 1.5; max-width: 62ch; text-wrap: pretty; }
.explain { max-width: 66ch; display: grid; gap: 10px; }
.hint { color: var(--muted); font-size: 0.94rem; max-width: 66ch; }
.section-h { margin: 8px 0 0; font-size: 1.35rem; }

/* ------------------------------------------------------------------ the loop on the home page */
.loop { display: grid; gap: 12px; max-width: 66ch; }
.step { display: grid; gap: 8px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--rule); }
.step h2 { font-size: 1.05rem; }
.step h2 span { color: var(--muted); font-weight: 400; }
.step .says { color: var(--muted); font-style: italic; font-size: 0.98rem; }
.step .line { border-left-color: var(--accent); }
.step .check { display: flex; gap: 10px; align-items: baseline; color: var(--good); font-size: 0.95rem; }
.step .check .badge { background: var(--good-tint); color: var(--good); }
.proof { padding: 14px 16px; background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--accent); max-width: 66ch; display: grid; gap: 6px; }
.proof .num { font: 500 1.6rem/1.1 var(--mono); color: var(--accent); letter-spacing: -0.02em; }
.starts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 12px; }
.start-card { display: grid; gap: 4px; align-content: start; padding: 12px 14px; background: var(--surface); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.start-card:hover { border-color: var(--accent); }
.start-card b { font-size: 1rem; }
.start-card span { color: var(--muted); font-size: 0.92rem; }
.start-card code { font-size: 0.78rem; color: var(--accent); background: none; padding: 0; }

/* ------------------------------------------------------------------ the playground */
.bar { display: grid; grid-template-columns: minmax(10rem, 16rem) 1fr; gap: 6px 16px; align-items: end; }
.bar p { margin: 0; color: var(--muted); font-size: 0.92rem; min-width: 0; }
.panel { display: grid; gap: 14px; min-width: 0; padding: 16px; background: var(--surface); border: 1px solid var(--rule); }
.panel h2 { font-size: 1.2rem; }
.field { min-width: 0; }
.pairbox { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: 14px; }
.label { display: block; margin-bottom: 6px; color: var(--muted); font: 0.78rem/1.3 var(--mono); }
textarea, input[type="text"], select {
  width: 100%; padding: 10px 12px; color: var(--ink); background: var(--well);
  border: 1px solid var(--rule); border-radius: 0; font: 15px/1.5 var(--mono);
}
select { font-family: var(--serif); font-size: 16px; }
textarea { min-height: 5.6rem; resize: vertical; }
.docbox textarea { min-height: 9rem; }
::placeholder { color: var(--muted); opacity: 1; }
.row { display: flex; flex-wrap: wrap; gap: 8px; }
button {
  min-height: 40px; padding: 0 16px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--ink); border-radius: 0; font: 500 0.88rem/1 var(--mono); cursor: pointer;
}
button:hover { background: var(--well); }
button.primary { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
button.primary:hover { filter: brightness(0.92); }
button.small { min-height: 30px; padding: 0 10px; font-size: 0.78rem; border-color: var(--rule); }
@media (pointer: coarse) { button { min-height: 44px; } button.small { min-height: 36px; } }
details { background: var(--well); border: 1px solid var(--rule); }
summary { padding: 8px 12px; font: 500 0.88rem var(--mono); cursor: pointer; }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: 12px; padding: 4px 12px 12px; }
.opts input[type="text"] { background: var(--surface); }
.tick { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: 0.92rem; }
.out { display: grid; gap: 12px; min-width: 0; }
.out[hidden] { display: none; }
.verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 10px 12px; color: var(--good); background: var(--good-tint); border-left: 3px solid var(--good); }
.verdict strong { font-size: 1.05rem; }
.verdict.bad { color: var(--bad); background: var(--bad-tint); border-left-color: var(--bad); }
.verdict.warn { color: var(--warn); background: var(--warn-tint); border-left-color: var(--warn); }
.detail { min-width: 0; font-size: 0.95rem; overflow-wrap: anywhere; }
.issues, .rowlist { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.issues li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 10px; align-items: baseline; font: 0.86rem/1.45 var(--mono); overflow-wrap: anywhere; }
.rowlist li { display: grid; grid-template-columns: 4rem 1fr; gap: 10px; align-items: baseline; font: 0.86rem/1.45 var(--mono); overflow-wrap: anywhere; }
.badge { justify-self: start; padding: 3px 6px; font: 500 0.7rem/1 var(--mono); white-space: nowrap; }
.badge.err { color: var(--bad); background: var(--bad-tint); }
.badge.warn { color: var(--warn); background: var(--warn-tint); }
.badge.note { color: var(--muted); background: var(--well); border: 1px solid var(--rule); }
.codebox { display: grid; gap: 6px; min-width: 0; }
.codehead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.codehead .label { margin: 0; }
.code { margin: 0; padding: 10px 12px; background: var(--well); border-left: 3px solid var(--rule); font: 0.86rem/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.note-text { margin: 0; color: var(--muted); font-size: 0.92rem; max-width: 65ch; }
.strip { display: flex; flex-wrap: wrap; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); overflow: hidden; }
.cell { flex: 1 1 9rem; display: grid; gap: 2px; align-content: start; min-width: 0; padding: 8px 10px; background: var(--surface); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cell.type { flex: 0 1 11rem; }
.cell.wide { flex: 1 1 100%; }
.k { color: var(--muted); font: 0.7rem/1.2 var(--mono); }
.v { font: 500 0.95rem/1.35 var(--mono); overflow-wrap: anywhere; }
.type .v { color: var(--accent); font-size: 1.15rem; }
.sub { color: var(--muted); font: 400 0.85rem var(--serif); }
.tail .v { font: 400 0.95rem/1.45 var(--serif); }
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 12px; }
.cap { margin-bottom: 6px; font: 500 0.95rem/1.2 var(--mono); }
.cap span { margin-left: 8px; color: var(--muted); font: 400 0.85rem var(--serif); }
.pair { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--rule); }
.tier { display: grid; gap: 2px; min-width: 0; padding: 8px 10px; background: var(--well); }
.tier + .tier { border-left: 1px solid var(--rule); }
.tier .name { font-size: 0.95rem; font-weight: 600; }
.tier .st { color: var(--muted); font: 400 0.8rem/1.2 var(--mono); }
.tier.pass { background: var(--good-tint); } .tier.pass .st { color: var(--good); font-weight: 500; }
.tier.fail { background: var(--bad-tint); } .tier.fail .st { color: var(--bad); font-weight: 500; }
.tier.part { background: var(--warn-tint); } .tier.part .st { color: var(--warn); font-weight: 500; }
noscript p { margin: 0; padding: 10px 12px; color: var(--warn); background: var(--warn-tint); }
@media (max-width: 560px) {
  .bar { grid-template-columns: 1fr; }
  .issues li, .rowlist li { grid-template-columns: 1fr; gap: 4px; }
}

/* ------------------------------------------------------------------ research: the index */
main.research { max-width: 70ch; margin: 0 auto; padding-top: 22px; }
.mast { font: 0.78rem/1.5 var(--mono); color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; margin-bottom: 1rem; }
main.research .lede, main.report .lede { margin: 0.9rem 0; }
.study { border-top: 1px solid var(--rule); padding-top: 1.2rem; margin-top: 2rem; }
.study p { margin: 0.6rem 0; }
.study .q { font-style: italic; color: var(--muted); margin: 0.4rem 0 0.8rem; }
.plain { display: grid; gap: 0.6rem; margin: 0.8rem 0; }
.plain p { margin: 0; }
.plain b { color: var(--accent); font: 500 0.76rem/1.4 var(--mono); display: block; margin-bottom: 0.1rem; }
.nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; margin: 0.8rem 0 1rem; }
.num { background: var(--well); padding: 0.7rem 0.9rem; min-width: 0; }
.num b { display: block; font: 500 1.25rem/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.num span { font-size: 0.86rem; color: var(--muted); }
a.go { font: 0.85rem var(--mono); color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); }
a.go:hover { border-bottom-width: 2px; }

/* ------------------------------------------------------------------ research: the reports */
main.report { max-width: 62rem; margin: 0 auto; padding-top: 22px; }
main.report > :not(.tw) { max-width: 37rem; margin-left: auto; margin-right: auto; }   /* the reading column (about 70 characters); a table may use the full width */
main.report h2 { margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
main.report h3 { margin-top: 1.6rem; }
main.report p { margin: 0.9rem 0; }
main.report ul, main.report ol { margin: 0.6rem 0; }
main.report .wide { max-width: 960px; margin-inline: auto; }
main.report pre { margin: 0.8rem 0; }
.decision, .answer { background: var(--well); border-left: 3px solid var(--accent); padding: 0.9rem 1.1rem; margin: 1.4rem 0; }
.decision p, .answer p { margin: 0.45rem 0; }
.decision strong { color: var(--accent); }
.glance { display: grid; grid-template-columns: 8rem 1fr; gap: 0.5rem 1.2rem; margin: 1.2rem 0 0; padding: 1rem 1.1rem; border: 1px solid var(--rule); background: var(--surface); font-size: 0.95rem; line-height: 1.5; }
.glance dt { color: var(--muted); font: 0.74rem/1.7 var(--mono); }
.glance dd { margin: 0; min-width: 0; }
ol.steps { padding-left: 1.4rem; }
ol.steps li { margin: 0.55rem 0; padding-left: 0.2rem; }
dl.decided { margin: 0.8rem 0; }
dl.decided dt { font-weight: 600; margin-top: 1.1rem; text-wrap: pretty; }
dl.decided dd { margin: 0.3rem 0 0; }
dl.decided .where { display: block; font: 0.76rem/1.6 var(--mono); color: var(--muted); margin-top: 0.25rem; }
@media (max-width: 560px) { .glance { grid-template-columns: 1fr; gap: 0.15rem 0; } .glance dt { margin-top: 0.6rem; } .glance dt:first-child { margin-top: 0; } }
main.report .plain { background: var(--well); border-left: 3px solid var(--accent); padding: 0.9rem 1.1rem; margin: 1.4rem 0; }
.plain-h { font: 0.78rem/1.4 var(--mono); color: var(--muted); margin: 0 0 0.2rem; }
.inwords { font-size: 0.95rem; color: var(--ink); background: var(--well); padding: 0.7rem 0.9rem; margin: 0.4rem 0 1.2rem; border-left: 3px solid var(--accent); }
main.report table { border-collapse: collapse; width: 100%; font: 0.8rem/1.4 var(--mono); margin: 0.8rem 0; font-variant-numeric: tabular-nums; }
main.report th, main.report td { padding: 0.45rem 0.55rem; border-bottom: 1px solid var(--rule); text-align: right; vertical-align: top; }
main.report th:first-child, main.report td:first-child { text-align: left; }
main.report td { white-space: nowrap; }
main.report th { color: var(--muted); font-weight: 500; font-size: 0.72rem; }
.tw { overflow-x: auto; }
main.report .tw { margin: 0.8rem auto; }
main.report > pre:not(.tw) { max-width: 48rem; }   /* examples may run a little wider than the prose */
main.report .tw table { margin: 0; }
caption, .cap { caption-side: bottom; text-align: left; font: 0.9rem/1.5 var(--serif); color: var(--muted); padding-top: 0.5rem; }
main.report p.cap { margin: 0.2rem auto 0.6rem; }
.ok { color: var(--good); }
.bad { color: var(--warn); font-weight: 500; }
ol.findings { padding-left: 1.4rem; }
ol.findings li { margin: 0.7rem 0; }
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; margin: 1rem 0; }
.chart { min-width: 0; }
.chart h3 { margin-top: 0.4rem; font-size: 0.95rem; }
.chart svg { width: 100%; height: auto; display: block; font-family: var(--mono); font-size: 12px; }
.chart .lab { fill: var(--ink); } .chart .axis { fill: var(--muted); } .chart .bar { fill: var(--bar); } .chart .base { fill: var(--barbase); } .chart .alt { fill: var(--bar2); }
.chart .grid { stroke: var(--rule); stroke-width: 1; }
.epigraph { font: 0.86rem/1.5 var(--mono); color: var(--muted); margin: 1.4rem 0 0.4rem; white-space: nowrap; overflow-x: auto; }
.epigraph small { display: block; font: 0.9rem/1.5 var(--serif); white-space: normal; margin-top: 0.3rem; }
.wire { display: grid; grid-template-columns: 7.5rem 1fr 3.2rem; gap: 0.35rem 0.8rem; align-items: baseline; font: 0.82rem/1.5 var(--mono); margin: 0.8rem 0; overflow-x: auto; }
.wire .k { color: var(--muted); font-size: 0.72rem; }
.wire .v { white-space: nowrap; font-weight: 400; }
.wire .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--accent); }
.src { font-size: 0.92rem; }
.src li { margin: 0.3rem 0; overflow-wrap: anywhere; }
.foot { font: 0.78rem/1.5 var(--mono); color: var(--muted); margin-top: 3rem; border-top: 1px solid var(--rule); padding-top: 0.8rem; }
@media (max-width: 520px) { .wire { grid-template-columns: 5.5rem 1fr 2.6rem; } }

/* ------------------------------------------------------------------ about */
.lab-list { display: grid; gap: 10px; }
.lab-list a.item { display: grid; grid-template-columns: 9rem 1fr; gap: 4px 14px; padding: 10px 0; border-top: 1px solid var(--rule); color: inherit; text-decoration: none; }
.lab-list a.item:last-child { border-bottom: 1px solid var(--rule); }
.lab-list a.item:hover b { color: var(--accent); }
.lab-list b { font: 500 0.95rem var(--mono); }
.lab-list span { color: var(--ink); font-size: 0.97rem; }
.lab-list small { color: var(--muted); font: 0.76rem var(--mono); }
@media (max-width: 560px) { .lab-list a.item { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ the demo */
.demo-page { display: grid; gap: 14px; padding-top: 22px; min-width: 0; }
.demo { display: grid; grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr); gap: 20px; align-items: start; }
.demo-strip { display: grid; gap: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--rule); position: sticky; top: 12px; min-width: 0; }
.demo-field { display: grid; gap: 6px; }
.demo-strip label, .demo-strip .lbl { font: 0.78rem/1.3 var(--mono); color: var(--muted); letter-spacing: 0.02em; }
.demo-strip textarea, .demo-strip select { width: 100%; font: 0.98rem/1.45 var(--serif); color: var(--ink); background: var(--paper); border: 1px solid var(--rule); padding: 8px 10px; }
.demo-strip textarea { min-height: 96px; resize: vertical; }
.demo-record { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; font-size: 0.92rem; }
.demo-record dt { color: var(--muted); }
.demo-record dd { margin: 0; font: 0.82rem/1.5 var(--mono); overflow-wrap: anywhere; }
.demo-toggle { display: flex; gap: 8px; align-items: flex-start; font-size: 0.95rem; }
.demo-toggle input { margin-top: 5px; accent-color: var(--accent); }
.demo-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-buttons button { font: 0.88rem var(--mono); padding: 8px 12px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); cursor: pointer; }
.demo-buttons button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.demo-buttons button:disabled { opacity: 0.5; cursor: default; }
.demo-log { display: grid; gap: 10px; min-width: 0; align-content: start; }
.demo-empty { color: var(--muted); border: 1px dashed var(--rule); padding: 18px; }
.tx { display: grid; gap: 8px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--rule); border-left-width: 3px; min-width: 0; }
.tx.agent { border-left-color: var(--accent); }
.tx.pass { border-left-color: var(--good); }
.tx.fail { border-left-color: var(--bad); }
.tx.note { border-left-color: var(--warn); }
.tx-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.callsign { font: 0.72rem/1.5 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 7px; background: var(--well); color: var(--ink); }
.callsign.agent { background: var(--accent); color: var(--accent-ink); }
.tx-who { color: var(--muted); font-size: 0.9rem; }
.tx-n { margin-left: auto; color: var(--muted); font: 0.78rem var(--mono); }
.tx pre.line { border-left-color: var(--accent); }
.tx-gloss { font-size: 0.98rem; }
.verdict { display: inline-block; justify-self: start; font: 0.84rem/1.5 var(--mono); padding: 4px 8px; max-width: 100%; }
.verdict.pass { background: var(--good-tint); color: var(--good); }
.verdict.fail { background: var(--bad-tint); color: var(--bad); }
.verdict.note { background: var(--warn-tint); color: var(--warn); }
.tx ul { margin: 0; padding-left: 18px; font-size: 0.92rem; display: grid; gap: 3px; }
.tx ul.notes { color: var(--muted); }
.tx li { overflow-wrap: anywhere; }
.tx details { font-size: 0.9rem; }
.tx summary { color: var(--accent); cursor: pointer; }
.tx details pre { margin-top: 6px; max-height: 260px; overflow: auto; }
.planted { color: var(--warn); font-size: 0.9rem; }
.demo-summary { display: grid; gap: 6px; padding: 12px 14px; background: var(--well); border: 1px solid var(--rule); }
.demo-summary h2 { font-size: 1.05rem; }
.demo-summary ul { margin: 0; padding-left: 18px; font-size: 0.95rem; display: grid; gap: 3px; }
@media (max-width: 880px) { .demo { grid-template-columns: 1fr; } .demo-strip { position: static; } }

/* ------------------------------------------------------------------ the story on the home page */
main.story { max-width: 70ch; margin: 0 auto; padding-top: 22px; display: grid; gap: 1.6rem; }
main.story header { display: grid; gap: 0.7rem; }
main.story section { display: grid; gap: 0.8rem; border-top: 1px solid var(--rule); padding-top: 1.3rem; }
main.story .eyebrow { font: 0.74rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
main.story .lede { font-size: 1.15rem; color: var(--muted); }
main.story .hero { display: grid; gap: 0.9rem; }
main.story .exchange { display: grid; gap: 8px; max-width: 66ch; }
main.story .rt { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 10px 12px; background: var(--surface); border: 1px solid var(--rule); }
main.story .rt.pilot { margin-left: 2rem; border-left: 3px solid var(--accent); }
main.story .rt .who { font: 500 0.72rem/1.5 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
main.story .rt p { font-size: 0.98rem; }
main.story .rt p.hb { color: var(--muted); }
main.story .rt .tag { font: 0.7rem/1.5 var(--mono); color: var(--accent); white-space: nowrap; }
main.story .radio { display: grid; gap: 6px; }
main.story .rx { display: grid; grid-template-columns: 4.6rem 9rem minmax(0, 1fr); gap: 2px 12px; align-items: baseline; padding: 8px 12px; background: var(--surface); border: 1px solid var(--rule); }
main.story .rx .t { font: 0.74rem/1.6 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
main.story .rx .who { font: 500 0.72rem/1.6 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
main.story .rx.klm .who { color: var(--accent); }
main.story .rx.panam .who { color: var(--good); }
main.story .rx p { grid-column: 3; font-size: 0.98rem; }
main.story .rx p i { color: var(--muted); font-style: italic; }
main.story .rx p.why { color: var(--warn); font-size: 0.9rem; }
main.story .rx mark { background: var(--warn-tint); color: var(--ink); padding: 0 0.2em; }
main.story .rx.end { background: var(--bad-tint); border-color: transparent; }
main.story .rx.end .who { color: var(--bad); }
main.story .rx.end p { color: var(--bad); font-weight: 600; }
main.story p.cap { font: 0.78rem/1.5 var(--mono); color: var(--muted); }
main.story .layers { display: grid; gap: 6px; }
main.story .layer { display: grid; grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 1fr); gap: 4px 14px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--rule); align-items: start; }
main.story .layer.head { background: none; border: 0; padding: 0 12px; font: 500 0.68rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
main.story .layer h3 { font-size: 0.98rem; }
main.story .layer h3 .n { display: block; font: 500 0.7rem/1.4 var(--mono); color: var(--accent); }
main.story .layer p { font-size: 0.9rem; }
main.story .layer p b { color: var(--good); font-weight: 600; }
@media (max-width: 620px) {
  main.story .rt { grid-template-columns: 1fr; } main.story .rt.pilot { margin-left: 1rem; }
  main.story .rx { grid-template-columns: 4.6rem minmax(0, 1fr); } main.story .rx p { grid-column: 1 / -1; }
  main.story .layer { grid-template-columns: 1fr; } main.story .layer.head { display: none; }
  main.story .layer p::before { display: block; font: 500 0.66rem/1.6 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  main.story .layer p:nth-of-type(1)::before { content: "In the cockpit"; } main.story .layer p:nth-of-type(2)::before { content: "Between agents"; }
}
main.story .flow { margin: 0.2rem 0 0; display: grid; gap: 0.4rem; min-width: 0; }
main.story .flow .scroll { overflow-x: auto; padding-bottom: 4px; }
main.story .flow svg { display: block; color: var(--ink); font-family: var(--serif); }
main.story .flow figcaption { font-size: 0.9rem; color: var(--muted); }
main.story .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.8rem; }
main.story .tile { background: var(--well); padding: 0.7rem 0.9rem; min-width: 0; }
main.story .tile b { display: block; font: 500 1.35rem/1.2 var(--mono); font-variant-numeric: tabular-nums; margin-bottom: 0.15rem; }
main.story .tile span { font-size: 0.9rem; color: var(--muted); }
main.story .outcome { display: flex; gap: 0.6rem; align-items: baseline; font-weight: 600; }
main.story .outcome .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; position: relative; top: 1px; background: var(--muted); }
main.story .outcome.is-good .dot { background: var(--good); }
main.story .outcome.is-bad .dot { background: var(--bad); }
main.story .outcome.is-warn .dot { background: var(--warn); }
main.story .vs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.8rem; }
main.story .vs > div { display: grid; gap: 0.4rem; min-width: 0; align-content: start; }
main.story .lbl { font: 0.72rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
main.story .said { background: var(--well); padding: 0.6rem 0.8rem; font-size: 0.95rem; }
main.story table { border-collapse: collapse; width: 100%; font: 0.8rem/1.4 var(--mono); font-variant-numeric: tabular-nums; }
main.story th, main.story td { text-align: left; padding: 0.45rem 0.55rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
main.story th { color: var(--muted); font-weight: 500; font-size: 0.72rem; }
main.story td.yes { color: var(--good); font-weight: 500; }
main.story td.no { color: var(--bad); font-weight: 500; }
main.story td.part { color: var(--warn); font-weight: 500; }
main.story .note { border-left: 3px solid var(--accent); padding: 0.2rem 0 0.2rem 0.9rem; color: var(--muted); font-size: 0.95rem; }
main.story ol, main.story ul { display: grid; gap: 0.3rem; }
main.story li::marker { color: var(--accent); font-weight: 600; }

/* ------------------------------------------------------------------ the integration guide: /quickstart */
.guide h2 { scroll-margin-top: 1rem; }
.guide .callout { background: var(--well); border-left: 3px solid var(--accent); padding: 0.7rem 0.9rem; }
.guide pre.code { border-left-color: var(--accent); }
.guide pre.reply { color: var(--muted); }
.guide table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.guide th, .guide td { text-align: left; padding: 0.45rem 0.55rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.guide th { font: 500 0.72rem/1.4 var(--mono); color: var(--muted); }
.guide .tw { overflow-x: auto; }
.guide p code, .guide td code { overflow-wrap: anywhere; }
.guide pre.code, .guide pre.reply { overflow-x: auto; max-width: 100%; }
.guide pre.code { white-space: pre; overflow-wrap: normal; }