/* Hallmark · shape: app screen · genre: modern-minimal · theme: Console (deal 1/3, seed web-dns-lookup-diagnostics-4bc6·ec6414bc·2026-11-02·r0) · redesign: full
 * nav: kept, a top bar with the wordmark and the page title; the tool tabs stay the first row of the search panel · signature: the zone read as a ledger, record types down the spine and what the wire returned set in the measured face · states: loading (the server-rendered result held, or a quiet line), empty (no records, said per type), error (what broke, in the result slot), full · console: graphite, paper colourway under prefers-color-scheme light
 * axes: dark/grotesk-sans/chromatic-amber · posture: restrained · contrast: pass · modes: light+dark · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V3 · weakest: V, an app screen keeps the tool's own order; the variety is in the ledger and the readings, not the shape */

/* ---------- fonts (self-hosted, OFL) ---------- */
@font-face { font-family: "Host Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/host-grotesk-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Host Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/host-grotesk-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Host Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/host-grotesk-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Host Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/host-grotesk-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/atkinson-hyperlegible-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/atkinson-hyperlegible-mono-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/atkinson-hyperlegible-mono-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- tokens (Console, graphite) ---------- */
:root {
  color-scheme: dark;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.2rem; --text-xl: 1.44rem; --text-2xl: 1.728rem; --text-3xl: 2.074rem;
  --text-display-s: 1.44rem; --text-display: 1.728rem; --text-section: 1.2rem; --text-title: 1rem; --text-lead: 1rem; --text-measured: 0.9375rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-micro: 120ms; --dur-short: 220ms;
  --container: 1120px; --gutter: 40px; --control: 40px; --hit: 44px;
  --z-dropdown: 100;
  --color-paper: oklch(17% 0.008 250); --color-paper-2: oklch(21% 0.009 250); --color-paper-3: oklch(13.5% 0.007 250);
  --color-ink: oklch(95% 0.005 250); --color-ink-2: oklch(83% 0.008 250); --color-muted: oklch(71% 0.01 250);
  --color-rule: oklch(31% 0.01 250); --color-rule-2: oklch(42% 0.012 250);
  --color-accent: oklch(82% 0.15 80); --color-accent-ink: oklch(18% 0.04 75); --color-accent-soft: oklch(29% 0.05 80); --color-focus: oklch(82% 0.15 80);
  --color-cool: oklch(77% 0.12 245); --color-cool-soft: oklch(29% 0.05 245);
  --color-ok: oklch(76% 0.15 150); --color-ok-soft: oklch(24.5% 0.03 150); --color-bad: oklch(70% 0.17 25); --color-bad-soft: oklch(24.5% 0.035 25);
  --font-display: "Host Grotesk", ui-sans-serif, system-ui, sans-serif; --font-body: var(--font-display);
  --font-outlier: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
  --radius-card: 10px; --radius-pill: 6px; --radius-chip: 4px; --rule-hair: 1px;
  --tracking-display: -0.03em; --display-weight: 500;
}
/* paper colourway for people whose system is set to light */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --color-paper: oklch(98% 0.006 85); --color-paper-2: oklch(99.4% 0.003 85); --color-paper-3: oklch(95.6% 0.008 85);
    --color-ink: oklch(19% 0.01 60); --color-ink-2: oklch(31% 0.01 60); --color-muted: oklch(46% 0.012 60);
    --color-rule: oklch(89.5% 0.008 85); --color-rule-2: oklch(79% 0.012 85);
    --color-accent: oklch(54% 0.14 70); --color-accent-ink: oklch(98.6% 0.006 85); --color-accent-soft: oklch(93.5% 0.045 80); --color-focus: oklch(54% 0.14 70);
    --color-cool: oklch(52% 0.14 250); --color-cool-soft: oklch(94% 0.03 245);
    --color-ok: oklch(48% 0.13 150); --color-ok-soft: oklch(94.5% 0.035 150); --color-bad: oklch(51% 0.18 25); --color-bad-soft: oklch(94.5% 0.03 25);
  }
}

/* ---------- base (scaffold) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 25%, transparent); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; text-decoration-color: var(--color-rule-2); }
a:hover { color: var(--color-accent); text-decoration-color: currentColor; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 30ch; font-size: var(--text-display); } h2 { max-width: 40ch; font-size: var(--text-section); } h3 { font-size: var(--text-title); line-height: 1.3; letter-spacing: 0; }
p { margin: 0; text-wrap: pretty; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
code, .measured { font-family: var(--font-outlier); font-size: var(--text-measured); font-variant-numeric: tabular-nums slashed-zero; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

/* ---------- shell ---------- */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.top { display: flex; align-items: baseline; gap: var(--space-md) var(--space-lg); flex-wrap: wrap; padding-block: var(--space-xl) var(--space-lg); }
.wordmark { font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.02em; text-decoration: none; color: var(--color-ink); white-space: nowrap; }
.wordmark span { color: var(--color-muted); font-weight: 400; }
.wordmark:hover { color: var(--color-ink); }
.page-title { font-size: var(--text-display); color: var(--color-ink); flex: 1 1 24rem; }
main { flex: 1; }

/* ---------- search panel ---------- */
.search { background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
.tabs { display: flex; gap: var(--space-2xs); padding-inline: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); overflow-x: auto; scrollbar-width: none; }
.tab { display: inline-flex; align-items: center; min-height: var(--hit); padding-inline: var(--space-sm); color: var(--color-muted); font-weight: 500; font-size: var(--text-sm); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: calc(-1 * var(--rule-hair)); transition: color var(--dur-micro) var(--ease-out); }
.tab:hover { color: var(--color-ink); }
.tab:active { color: var(--color-ink-2); }
.tab.active { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.tab:focus-visible { outline-offset: -2px; }
.search-body { padding: var(--space-md); display: grid; gap: var(--space-sm); }
.bar { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.field { min-height: var(--control); padding: 0 var(--space-sm); background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); color: var(--color-ink); min-width: 0; }
.field::placeholder { color: var(--color-muted); }
.field:hover { border-color: var(--color-muted); }
.field:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -1px; }
#name { flex: 1 1 18rem; font-family: var(--font-outlier); font-size: var(--text-md); }
#server { flex: 0 1 13rem; font-size: var(--text-sm); }
#selectors { flex: 0 1 15rem; font-size: var(--text-sm); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: var(--control); padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); font-weight: 500; font-size: var(--text-sm); white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-paper-3); border-color: var(--color-muted); color: var(--color-ink); }
.btn:active { background: var(--color-rule); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); padding-inline: var(--space-lg); }
.btn-primary:hover { background: var(--color-accent); border-color: var(--color-ink-2); color: var(--color-accent-ink); }
.btn-primary:active { background: var(--color-accent-soft); color: var(--color-ink); }
.btn .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.types { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.tchip { min-height: 30px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-chip); background: transparent; color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.tchip:hover { color: var(--color-ink); border-color: var(--color-rule-2); }
.tchip:active { background: var(--color-paper-3); }
.tchip[aria-checked="true"] { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-ink); }
.hint { color: var(--color-muted); font-size: var(--text-sm); }
.hint:empty { display: none; }
body[data-mode="mail"] .types, body:not([data-mode="lookup"]) .only-lookup, body:not([data-mode="mail"]) .only-mail { display: none; }

/* ---------- results ---------- */
#out { margin-block: var(--space-lg) var(--space-2xl); display: grid; gap: var(--space-md); }
#out:empty { display: none; }
.toolbar { display: flex; align-items: center; gap: var(--space-xs) var(--space-md); flex-wrap: wrap; }
.toolbar .source { color: var(--color-muted); font-size: var(--text-sm); margin-right: auto; }
.toolbar .actions { display: flex; gap: var(--space-xs); }
.panel { background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; }
.panels { display: grid; gap: var(--rule-hair); background: var(--color-rule); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; }
.panels > * { background: var(--color-paper-2); min-width: 0; }
.panels.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panels .panels { border: 0; border-radius: 0; }
.panel-h { display: flex; align-items: center; gap: var(--space-xs) var(--space-md); flex-wrap: wrap; padding: var(--space-sm) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.panel-h h2 { font-size: var(--text-md); letter-spacing: 0; line-height: 1.3; }
.panel-h .meta { margin-left: auto; display: flex; gap: var(--space-xs) var(--space-md); flex-wrap: wrap; align-items: center; color: var(--color-muted); font-size: var(--text-sm); }
.panel-b { padding: var(--space-md); }
.panel-f { padding: var(--space-sm) var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }
.cool { color: var(--color-cool); }
.muted { color: var(--color-muted); }

/* the ledger: record types down the spine, records beside them */
.ledger { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); }
.ledger > .type { padding: var(--space-sm) var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); border-right: var(--rule-hair) solid var(--color-rule-2); font-weight: 500; }
.ledger > .type small { display: block; color: var(--color-muted); font-size: var(--text-xs); font-weight: 400; }
.ledger > .recs { border-top: var(--rule-hair) solid var(--color-rule); }
.ledger > .type:first-child, .ledger > .type:first-child + .recs { border-top: 0; }
.rec { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-md); align-items: baseline; padding: var(--space-sm) var(--space-md); }
.rec + .rec { border-top: var(--rule-hair) solid var(--color-rule); }
.rec .val { font-family: var(--font-outlier); font-size: var(--text-measured); overflow-wrap: anywhere; color: var(--color-ink); font-variant-numeric: tabular-nums slashed-zero; }
.rec .owner { display: block; color: var(--color-muted); font-size: var(--text-xs); }
.rec .ttl { font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-cool); white-space: nowrap; font-variant-numeric: tabular-nums; }
.copy { opacity: 0; min-height: 28px; padding: 0 var(--space-xs); border: var(--rule-hair) solid transparent; border-radius: var(--radius-chip); background: none; color: var(--color-muted); font-size: var(--text-xs); cursor: pointer; transition: opacity var(--dur-micro) var(--ease-out); }
.rec:hover .copy, .copy:focus-visible { opacity: 1; }
.copy:hover { color: var(--color-ink); border-color: var(--color-rule-2); }
.copy:active { background: var(--color-paper-3); }
@media (hover: none) { .copy { opacity: 1; } }

/* readings: a single record type, set large */
.readings .rec { padding-block: var(--space-md); }
.readings .rec .val { font-size: var(--text-xl); line-height: 1.3; letter-spacing: -0.01em; }
.readings.long .rec .val { font-size: var(--text-md); }

/* chips carry state only */
.chip { display: inline-flex; align-items: center; min-height: 22px; padding: 0 var(--space-xs); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-chip); font-size: var(--text-xs); font-weight: 500; color: var(--color-ink-2); white-space: nowrap; }
.chip.ok { background: var(--color-ok-soft); border-color: var(--color-ok-soft); color: var(--color-ok); }
.chip.bad { background: var(--color-bad-soft); border-color: var(--color-bad-soft); color: var(--color-bad); }
.chip.warn { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-ink); }
.chip.cool { background: var(--color-cool-soft); border-color: var(--color-cool-soft); color: var(--color-cool); }
.chips { display: inline-flex; gap: var(--space-2xs); flex-wrap: wrap; }

/* tables */
.scroll { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tbl th { text-align: left; font-weight: 500; color: var(--color-muted); padding: var(--space-xs) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); white-space: nowrap; }
.tbl td { padding: var(--space-sm) var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); vertical-align: top; }
.tbl tbody tr:first-child td { border-top: 0; }
.tbl td.m { font-family: var(--font-outlier); font-size: var(--text-measured); font-variant-numeric: tabular-nums slashed-zero; overflow-wrap: anywhere; }
.tbl td.wide { width: 100%; }
.tbl td.nw { white-space: nowrap; }
.tbl tr.deviates td { background: var(--color-accent-soft); }

/* checks */
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-sm) var(--space-md); }
.checks li + li { border-top: var(--rule-hair) solid var(--color-rule); }
.checks .chip { justify-content: center; align-self: start; margin-top: var(--space-3xs); }
.checks .t { font-weight: 500; }
.checks .d { color: var(--color-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }

/* key–value */
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-xs) var(--space-lg); margin: 0; font-size: var(--text-sm); }
.kv dt { color: var(--color-muted); }
.kv dd { margin: 0; font-family: var(--font-outlier); font-size: var(--text-measured); overflow-wrap: anywhere; }
.record { margin: 0 0 var(--space-md); padding: var(--space-sm) var(--space-md); background: var(--color-paper-3); border-radius: var(--radius-pill); font-family: var(--font-outlier); font-size: var(--text-measured); white-space: pre-wrap; overflow-wrap: anywhere; }
.tree { margin: 0; font-family: var(--font-outlier); font-size: var(--text-sm); line-height: 1.7; white-space: pre; overflow-x: auto; color: var(--color-ink-2); }

/* statement: the one figure a view argues from */
.statement { padding: var(--space-lg) var(--space-md); display: grid; gap: var(--space-2xs); }
.statement b { font-size: var(--text-2xl); font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1.1; }
.statement span { color: var(--color-muted); font-size: var(--text-sm); }

/* loading, error, server-rendered */
.loading { padding: var(--space-xl) var(--space-md); color: var(--color-muted); text-align: center; }
.loading::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: var(--space-xs); vertical-align: -2px; border: 2px solid var(--color-rule-2); border-top-color: var(--color-accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error { padding: var(--space-md); border: var(--rule-hair) solid var(--color-bad-soft); background: var(--color-bad-soft); color: var(--color-ink); border-radius: var(--radius-card); }
.error b { color: var(--color-bad); font-weight: 500; }
.ssr-pre { margin: 0; padding: var(--space-md); font-family: var(--font-outlier); font-size: var(--text-sm); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--color-ink-2); }
#out[aria-busy="true"] .ssr { opacity: 0.7; }

/* share menu */
.share-wrap { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + var(--space-2xs)); z-index: var(--z-dropdown); min-width: 13rem; padding: var(--space-2xs); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card); }
.menu-item { display: flex; align-items: center; width: 100%; min-height: 36px; padding: 0 var(--space-sm); border: 0; border-radius: var(--radius-pill); background: none; color: var(--color-ink); font-size: var(--text-sm); text-align: left; text-decoration: none; cursor: pointer; }
.menu-item:hover, .menu-item:focus-visible { background: var(--color-paper-3); color: var(--color-ink); outline-offset: -2px; }
.menu-item:active { background: var(--color-rule); }
.menu-sep { height: var(--rule-hair); margin: var(--space-2xs) var(--space-xs); background: var(--color-rule); }
.offscreen { position: fixed; left: -9999px; top: 0; }

/* landing: examples, about, questions */
.examples .row { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-2xs) var(--space-lg); padding: var(--space-md); align-items: baseline; }
.examples .row b { font-weight: 500; }
.examples .row p { color: var(--color-muted); font-size: var(--text-sm); grid-column: 2; }
.about { margin-block: var(--space-2xl) var(--space-xl); display: grid; gap: var(--space-lg); }
.about h2 { font-size: var(--text-xl); }
.about > p { color: var(--color-muted); max-width: 65ch; }
.features { margin: 0; }
.features > div { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-2xs) var(--space-lg); padding: var(--space-md); }
.features dt { font-weight: 500; }
.features dd { margin: 0; color: var(--color-muted); max-width: 65ch; }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq details:first-of-type { border-top: var(--rule-hair) solid var(--color-rule); }
.faq summary { display: flex; align-items: center; gap: var(--space-sm); min-height: var(--hit); padding-block: var(--space-xs); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; width: var(--space-sm); flex: none; color: var(--color-muted); font-weight: 500; }
.faq details[open] summary::before { content: "\2212"; }
.faq summary:hover h3 { color: var(--color-accent); }
.faq summary:focus-visible { outline-offset: 0; }
.faq h3 { display: inline; }
.faq p { padding: 0 0 var(--space-md) var(--space-lg); color: var(--color-muted); max-width: 70ch; }

.foot { display: flex; gap: var(--space-xs) var(--space-lg); flex-wrap: wrap; padding-block: var(--space-lg) var(--space-xl); color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- small screens ---------- */
@media (max-width: 60rem) {
  :root { --gutter: 24px; }
  .panels.two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  :root { --gutter: 16px; --text-display: 1.44rem; }
  .top { padding-block: var(--space-lg) var(--space-md); }
  #name, #server, #selectors, .bar .btn-primary { flex: 1 1 100%; }
  .toolbar .actions { width: 100%; }
  .toolbar .actions > * { flex: 1; }
  .toolbar .actions .btn { width: 100%; }
  .ledger { grid-template-columns: minmax(0, 1fr); }
  .ledger > .type { border-right: 0; padding-bottom: 0; }
  .ledger > .recs { border-top: 0; }
  .ledger > .type:first-child + .recs { border-top: 0; }
  .rec { grid-template-columns: minmax(0, 1fr) auto; }
  .rec .ttl { grid-column: 2; grid-row: 1; }
  .rec .copy { display: none; }
  .readings .rec .val { font-size: var(--text-lg); }
  .examples .row, .features > div { grid-template-columns: minmax(0, 1fr); }
  .examples .row p { grid-column: 1; }
  .checks li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .checks .chip { justify-self: start; }
  .tbl.stack thead { display: none; }
  .tbl.stack tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-top: var(--rule-hair) solid var(--color-rule); }
  .tbl.stack tbody tr:first-child { border-top: 0; }
  .tbl.stack td { border-top: 0; padding-block: var(--space-2xs); }
  .tbl.stack tr > td:first-child { padding-top: var(--space-sm); }
  .tbl.stack tr > td:last-child { grid-column: 1 / -1; padding-bottom: var(--space-sm); }
}
@media (pointer: coarse) {
  :root { --control: 44px; }
  .tchip { min-height: 36px; }
}