/* LIMITUP — app.css (the ONLY file with border / outline declarations — LUAT 56, border_lint).
   Scale (LUAT 50): --u = 1 CSS px of the 1920 mockup (set in index.html: viewport/1920 at >=1024, 0.75 below).
   Write every size as calc(N * var(--u)); readable text uses the --fs-* tokens (never below 12px).
   Page frame (LUAT 53): main.page-frame owns ground + gutters; route bodies never set max-width, side padding or background. */

:root {
  --u: 1px;
  /* colour tokens — DESIGN.md §3 */
  --paper: #CFD5D0;
  --surface: #D8DDD9;
  --surface-strong: #C4CBC7;
  --chip: #A1AAA7;
  --track: #ACB3B1;
  --cell-armed: #7F8685;
  --ink: #111716;
  --ink-soft: #6C7370;
  --toggle: #5D6565;
  --orange: #FC6705;
  --purple: #6C2CB5;
  --green: #438149;
  --code-red: #BA2F27;
  --code-green: #16733D;
  --code-blue: #2458B8;
  --white: #F4F6F4;
  --ink-chrome: #1E2320;                 /* chrome/nav.html + footer.html ink */
  /* rule tokens — DESIGN.md §4b BORDER TABLE (width + colour per rule kind); hairlines never vanish: max(1px, …) */
  --rule-frame-c: #9BA5A4;
  --rule-frame-w: max(1px, calc(2 * var(--u)));
  --rule-hair-c: #A4ACAA;
  --rule-hair-w: max(1px, calc(1 * var(--u)));
  --rule-hair2-w: max(1px, calc(2 * var(--u)));
  --rule-strong-c: #646D68;
  --rule-chrome-c: #56605A;               /* nav bottom rule + footer frame (chrome files) */
  --rule-nav-w: max(1px, calc(1 * var(--u)));
  --rule-footer-w: max(1px, calc(2 * var(--u)));
  --rule-ink-c: var(--ink);
  --rule-button-w: max(1px, calc(2 * var(--u)));
  --rule-radius: calc(2 * var(--u));
  /* fonts — DESIGN.md §2 */
  --font-display: "Antonio", "Sofia Sans Condensed", sans-serif;
  --font-body: "Sofia Sans", system-ui, sans-serif;
  --font-label: "Sofia Sans Condensed", "Sofia Sans", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  /* type scale @1920 (DESIGN.md §2) — readable text floors at 12px */
  --fs-hero: calc(74 * var(--u));
  --fs-title: calc(74 * var(--u));
  --fs-panel: calc(36 * var(--u));
  --fs-label: max(12px, calc(26 * var(--u)));
  --fs-lede: max(13px, calc(22.5 * var(--u)));
  --fs-nav: max(12px, calc(18 * var(--u)));
  --fs-body: max(12px, calc(16 * var(--u)));
  --fs-small: max(12px, calc(14 * var(--u)));
  --fs-mono: max(12px, calc(16 * var(--u)));
  --fs-mono-label: max(12px, calc(13.5 * var(--u)));
  --fs-mono-lg: max(14px, calc(26 * var(--u)));
  --fs-mono-md: max(13px, calc(24 * var(--u)));
  /* page frame @1920 (frame.json container, gutters 46 / 45 — DESIGN §1 grid 46 → 1875) */
  --gutter-l: calc(46 * var(--u));
  --gutter-r: calc(45 * var(--u));
  --gap-section: calc(64 * var(--u));
  /* motion — DESIGN.md §10: one "switchgear" easing, three durations */
  --ease-throw: cubic-bezier(.2, 0, 0, 1);
  --t-throw: 150ms;
  --t-latch: 220ms;
  --t-energise: 600ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.35;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
/* button reset (includes border:0 — routes never re-declare it) */
button { border: 0; background: none; padding: 0; margin: 0; cursor: pointer; border-radius: 0; -webkit-appearance: none; appearance: none; }
input, select, textarea { border: 0; background: none; margin: 0; border-radius: 0; }
input:focus, select:focus, textarea:focus { outline: none; }
:focus-visible { outline: max(2px, calc(2 * var(--u))) solid var(--orange); outline-offset: max(2px, calc(2 * var(--u))); }
table { border-collapse: collapse; width: 100%; }
td, th { font-variant-numeric: tabular-nums; text-align: left; padding: 0; font-weight: inherit; }
[hidden] { display: none !important; }

/* ───────── type helpers ───────── */
.display { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: .95; letter-spacing: -.05em; }
.hero-title, .route-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-hero); line-height: .95; letter-spacing: -.05em; text-transform: uppercase; margin: 0; }
.panel-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-panel); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; margin: 0; }
.section-label { font-family: var(--font-label); font-weight: 700; font-size: var(--fs-label); line-height: 1.1; letter-spacing: .067em; text-transform: uppercase; margin: 0; }
.lede { font-size: var(--fs-lede); line-height: 1.35; letter-spacing: -.01em; margin: 0; }
.small { font-size: var(--fs-small); }
.soft { color: var(--ink-soft); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-mono); letter-spacing: .02em; }
.mono-label { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-mono-label); letter-spacing: .028em; text-transform: uppercase; color: var(--ink-soft); }
.mono-lg { font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-mono-lg); font-variant-numeric: tabular-nums; line-height: 1.1; }
.mono-md { font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-mono-md); font-variant-numeric: tabular-nums; line-height: 1.1; }
.is-trip { color: var(--orange); }
.is-halt { color: var(--purple); }
.is-ok { color: var(--green); }

/* ───────── page frame (LUAT 53) ───────── */
main.page-frame {
  flex: 1; width: 100%; background: var(--paper);
  padding: 0 var(--gutter-r) var(--gap-section) var(--gutter-l);
}
.page-frame > * + * { margin-top: 0; }

/* ───────── NAV — chrome/nav.html (LUAT 52), px of the 1920 mockup → calc(N * --u) ───────── */
.nav {
  position: relative; z-index: 20; height: calc(102 * var(--u)); margin: 0; padding: 0 calc(46 * var(--u));
  background: var(--paper); color: var(--ink-chrome); font-family: var(--font-body);
  display: flex; align-items: center; gap: calc(54 * var(--u));
}
.nav .brand { display: flex; align-items: center; gap: calc(13 * var(--u)); text-decoration: none; font: 700 max(16px, calc(30 * var(--u)))/1 var(--font-body); letter-spacing: .16em; white-space: nowrap; }
.nav .brand img { width: calc(88 * var(--u)); height: calc(47 * var(--u)); min-width: 56px; min-height: 30px; object-fit: contain; }
.nav .nav-desktop { display: flex; align-self: stretch; gap: calc(42 * var(--u)); flex: 1; justify-content: center; }
.nav .nav-link { color: inherit; text-decoration: none; font-size: var(--fs-nav); font-weight: 500; display: flex; align-items: center; position: relative; white-space: nowrap; }
.nav .nav-desktop .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(27 * var(--u)); height: max(2px, calc(3 * var(--u))); background: var(--orange); transform: scaleX(0); transform-origin: left center; transition: transform var(--t-throw) var(--ease-throw); }
.nav .nav-desktop .nav-link:hover::after { transform: scaleX(1); background: var(--ink-chrome); }
.nav .nav-desktop .nav-link.is-active::after { transform: scaleX(1); background: var(--orange); }
/* the tools block keeps the mockup width so the six links sit where the mockup draws them (the CA/BUY it held are removed) */
.nav .tools { display: flex; align-items: center; justify-content: flex-end; gap: calc(20 * var(--u)); min-width: calc(377 * var(--u)); white-space: nowrap; }
.nav .social { width: calc(24 * var(--u)); height: calc(24 * var(--u)); min-width: 18px; min-height: 18px; display: flex; align-items: center; justify-content: center; color: inherit; cursor: pointer; }
.nav .social svg { width: 100%; height: 100%; }
[data-launch-link][aria-disabled="true"] { cursor: default; }
.nav .nav-menu { display: none; }
.nav .nav-drawer { display: none; }
.route-throw {
  position: absolute; left: 0; right: 0; bottom: calc(-1 * max(4px, calc(6 * var(--u)))); height: max(4px, calc(6 * var(--u)));
  pointer-events: none; opacity: 0; transform: scaleX(0); transform-origin: left center;
  background: var(--hazard-img) left center / calc(24 * var(--u)) 100% repeat-x;
}

/* ───────── FOOTER — chrome/footer.html (LUAT 52): the label card inside the cabinet door ───────── */
.footer {
  min-height: calc(76 * var(--u)); margin: 0 calc(46 * var(--u)) calc(20 * var(--u)); padding: calc(10 * var(--u)) calc(18 * var(--u));
  background: var(--paper); color: var(--ink-chrome); font-family: var(--font-body);
  display: grid; grid-template-columns: auto 1fr auto; gap: calc(20 * var(--u)); align-items: center;
}
.footer .foot-mark { width: calc(84 * var(--u)); height: calc(45 * var(--u)); min-width: 48px; min-height: 26px; object-fit: contain; }
.footer strong { display: block; font: 700 calc(25 * var(--u))/1.05 var(--font-display); letter-spacing: 0; }
.footer .sources { font-size: max(12px, calc(12 * var(--u))); line-height: 1.3; margin-top: calc(5 * var(--u)); color: var(--ink-chrome); }
.footer .links { display: flex; align-items: center; gap: calc(18 * var(--u)); font: 600 max(12px, calc(13 * var(--u)))/1 var(--font-mono); white-space: nowrap; }
.footer .links a { text-decoration: none; cursor: pointer; }
.footer .links a[href]:hover { text-decoration: underline; }
.footer .copy { padding: calc(8 * var(--u)) calc(12 * var(--u)); font: inherit; }

/* ───────── RULES — one class per framed component (DESIGN.md §4b). Route files use these, never their own borders. ───────── */
.rule-panel   { border: var(--rule-frame-w) solid var(--rule-frame-c); border-radius: 0; background: var(--surface); }
.rule-card    { border: var(--rule-frame-w) solid var(--rule-frame-c); border-radius: 0; }
.rule-drawer  { border: var(--rule-frame-w) solid var(--rule-frame-c); border-radius: 0; }
.rule-control { border: var(--rule-frame-w) solid var(--rule-frame-c); border-radius: 0; }
/* stacked table-row frames: each row draws T/R/L, the last one (or the wrapper .rule-rows) draws B — never a doubled edge */
.rule-row { border: var(--rule-frame-w) solid var(--rule-frame-c); border-bottom-width: 0; border-radius: 0; }
.rule-row.is-last, .rule-row:last-child { border-bottom-width: var(--rule-frame-w); }
.rule-rows > .rule-row:last-child { border-bottom-width: var(--rule-frame-w); }
.rule-row.is-dark, .rule-row.is-open { border-color: var(--rule-strong-c); }
/* an open row keeps one bottom edge: the next row's top, drawn in the open row's colour (never two stacked edges) */
.rule-row.is-open + .rule-row, .rule-row[data-open="true"] + .rule-row { border-top-color: var(--rule-strong-c); }
.rule-row.is-loading { border-style: dashed; }
/* an input frame wraps the WHOLE control: padding lives inside the frame */
.rule-input { border: var(--rule-frame-w) solid var(--rule-frame-c); border-radius: var(--rule-radius); background: var(--surface); display: inline-flex; align-items: center; gap: calc(8 * var(--u)); padding: 0 calc(12 * var(--u)); min-height: calc(44 * var(--u)); }
.rule-input > input, .rule-input > select, .rule-input > textarea { flex: 1; min-width: 0; height: 100%; padding: calc(8 * var(--u)) 0; background: transparent; }
.rule-input:focus-within { border-color: var(--ink); }
.rule-button { border: var(--rule-button-w) solid var(--rule-frame-c); border-radius: var(--rule-radius); }
.rule-button.is-dark, .rule-button.is-selected, .rule-button[aria-pressed="true"], .rule-button[aria-selected="true"] { border-color: var(--ink); }
.rule-nav { border-bottom: var(--rule-nav-w) solid var(--rule-chrome-c); }
.rule-footer { border: var(--rule-footer-w) solid var(--rule-chrome-c); border-radius: var(--rule-radius); }
/* rules inside panels */
.rule-hair-row { border-bottom: var(--rule-hair-w) solid var(--rule-hair-c); }
.rule-hair-row.is-strong { border-bottom-width: var(--rule-hair2-w); }
.rule-hair-row.is-top { border-bottom-width: 0; border-top: var(--rule-hair-w) solid var(--rule-hair-c); }
.rule-hair-cell { border-bottom: var(--rule-hair-w) solid var(--rule-hair-c); }
.rule-hair-cell.is-heading { border-bottom: var(--rule-hair2-w) solid var(--ink); }
.rule-hair-row:last-child:not(.is-keep), .rule-hair-cell:last-child:not(.is-keep):not(.is-heading) { border-bottom-width: 0; }
.rule-col { border-right: var(--rule-hair2-w) solid var(--rule-hair-c); }
.rule-col.is-thin { border-right-width: var(--rule-hair-w); }
.rule-col.is-left { border-right-width: 0; border-left: var(--rule-hair2-w) solid var(--rule-hair-c); }
.rule-col:last-child:not(.is-keep) { border-right-width: 0; }
/* dense tables: header underline 2px, body rows 1px, no outer frame (put the table inside a .rule-panel) */
.rule-table th { border-bottom: var(--rule-hair2-w) solid var(--rule-hair-c); }
.rule-table td { border-bottom: var(--rule-hair-w) solid var(--rule-hair-c); }
.rule-table tr:last-child td { border-bottom-width: 0; }
.rule-table .is-group td, .rule-table .is-group th { border-bottom: var(--rule-hair2-w) solid var(--rule-hair-c); }
/* banded tables (home trip log): shaded group rows, no body row rules — the mockup draws only the header underline */
.rule-table.is-bare td, .rule-table.is-bare .is-group td { border-bottom-width: 0; }
/* empty "no pool yet" day cell + legend swatch frame */
.rule-empty { border: var(--rule-hair-w) solid var(--ink-soft); }
/* a box nested inside a framed box on a shared edge draws nothing on that edge */
.rule-inset-t { border-top-width: 0 !important; }
.rule-inset-r { border-right-width: 0 !important; }
.rule-inset-b { border-bottom-width: 0 !important; }
.rule-inset-l { border-left-width: 0 !important; }

/* ───────── shared components ───────── */
/* hazard divider: diagonal ink bars ≈ 30 × 16 at a 41 px pitch (DESIGN §4), full container width */
:root { --hazard-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41 16' preserveAspectRatio='none'%3E%3Cpath d='M10 0H40L30 16H0Z' fill='%23111716'/%3E%3C/svg%3E"); }
.hazard { display: block; width: 100%; height: calc(16 * var(--u)); min-height: 8px; background: var(--hazard-img) left center / calc(41 * var(--u)) 100% repeat-x; }
/* surfaces */
.surface { background: var(--surface); }
.surface-strong { background: var(--surface-strong); }
/* chip (r2) */
.chip { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(5 * var(--u)) calc(10 * var(--u)); border-radius: var(--rule-radius); background: var(--chip); font-size: var(--fs-small); font-weight: 600; line-height: 1; white-space: nowrap; }
/* buttons / segmented buttons (.rule-button frame) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); min-height: calc(40 * var(--u)); padding: 0 calc(16 * var(--u)); font-family: var(--font-body); font-weight: 600; font-size: var(--fs-small); line-height: 1; white-space: nowrap; background: transparent; color: var(--ink); transition: background-color var(--t-throw) var(--ease-throw), color var(--t-throw) var(--ease-throw); }
.btn:hover { background: var(--surface-strong); }
.btn.is-dark, .btn.is-selected, .btn[aria-pressed="true"], .btn[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.btn.is-dark:hover { background: #2A3230; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.seg { display: inline-flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
/* toggle = the breaker handle: pill track + round thumb. data-state = armed | tripped | re-armed | not-wired */
.toggle { position: relative; display: inline-block; flex: none; width: calc(60 * var(--u)); height: calc(30 * var(--u)); min-width: 36px; min-height: 18px; border-radius: 999px; background: var(--toggle); overflow: hidden; vertical-align: middle; }
.toggle::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--orange); opacity: 0; transition: opacity var(--t-throw) var(--ease-throw); }
.toggle::after { content: ""; position: absolute; top: 12%; left: 6%; width: 38%; height: 76%; border-radius: 50%; background: var(--white); transform: translateX(131%); transition: transform var(--t-throw) var(--ease-throw); }
.toggle.is-large { width: calc(110 * var(--u)); height: calc(60 * var(--u)); }
.toggle[data-state="tripped"]::before { opacity: 1; }
.toggle[data-state="tripped"]::after { transform: translateX(0); }
.toggle[data-state="not-wired"] { background: var(--chip); }
.toggle[data-state="not-wired"]::after { transform: translateX(0); background: var(--surface); }
/* day-cell fills for the daily strips / legends (SVG fill: var(--cell-*) or .cell-* on HTML swatches) */
:root { --cell-open: var(--cell-armed); --cell-halted: var(--purple); --cell-trip: var(--orange); --cell-closed-bg: var(--surface); }
.cell-open { background: var(--cell-armed); }
.cell-halted { background: var(--purple); }
.cell-trip { background: var(--orange); }
.cell-closed { background: repeating-linear-gradient(135deg, var(--ink-soft) 0 max(1px, calc(1.5 * var(--u))), var(--surface) 0 calc(4 * var(--u))); }
.cell-none { background: transparent; }
.swatch { display: inline-block; flex: none; width: calc(22 * var(--u)); height: calc(22 * var(--u)); min-width: 12px; min-height: 12px; }
/* code panel */
.code { font-family: var(--font-mono); font-size: var(--fs-mono); line-height: 1.5; white-space: pre; overflow-x: auto; margin: 0; }
.code .k { color: var(--ink); } .code .s { color: var(--code-green); } .code .n { color: var(--code-blue); } .code .del { color: var(--code-red); } .code .add { color: var(--code-green); }
/* status dot */
.dot { display: inline-block; width: calc(10 * var(--u)); height: calc(10 * var(--u)); min-width: 7px; min-height: 7px; border-radius: 50%; background: var(--cell-armed); }
.dot.is-ok { background: var(--green); } .dot.is-trip { background: var(--orange); } .dot.is-halt { background: var(--purple); }
.wide { overflow-x: auto; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ───────── MOTION — DESIGN.md §10 (transform / opacity only; all off under reduced motion) ───────── */
/* route change: content fades in 200 ms while a hazard bar is thrown across under the nav */
/* route change (user fix R1): no page fade; content arrives drawn while main.lu-instant is on */
main.lu-instant [data-draw] > *, main.lu-instant [data-draw] .lu-cell, main.lu-instant [data-reveal], main.lu-instant [data-grow], main.lu-instant .lu-trace::before { transition: none !important; }
.route-throw.is-throwing { animation: lu-throw 420ms var(--ease-throw) both; }
@keyframes lu-throw { 0% { opacity: 1; transform: scaleX(0); } 60% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
/* today's cell = indicator lamp, slow pulse */
[data-pulse] { animation: lu-lamp 2.4s ease-in-out infinite; }
@keyframes lu-lamp { 0%, 100% { opacity: 1; } 50% { opacity: .38; } }
/* energise: strip cells switch on left → right in hard steps (app.js staggers --i) */
[data-draw] > *, [data-draw] .lu-cell { opacity: 0; transform: scaleY(.25); transform-origin: 50% 100%; }
[data-draw].is-drawn > *, [data-draw].is-drawn .lu-cell { opacity: 1; transform: none; transition: opacity 90ms steps(2, end), transform 90ms steps(2, end); transition-delay: calc(var(--i, 0) * 6ms); }
/* latch: a block slides down into its holder (schedule card dropped into the door frame) */
[data-reveal] { opacity: 0; transform: translateY(calc(-10 * var(--u))); }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity var(--t-latch) steps(3, end), transform var(--t-latch) var(--ease-throw); }
/* relay click: a value that just changed blinks once in two hard steps */
.lu-tick { animation: lu-tick 280ms steps(2, end) 1; }
@keyframes lu-tick { 0% { opacity: .3; } 100% { opacity: 1; } }
/* hover trace: a finger running down the schedule card — ink bar on the row's left edge */
.lu-trace { position: relative; }
.lu-trace::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: max(2px, calc(4 * var(--u))); background: var(--ink); transform: scaleY(0); transform-origin: 50% 0; transition: transform var(--t-latch) var(--ease-throw); pointer-events: none; }
.lu-trace:hover::before, .lu-trace:focus-within::before, .lu-trace.is-open::before { transform: scaleY(1); }
/* grow-in: bars grow from the left edge in the energise rhythm */
[data-grow] { transform: scaleX(0); transform-origin: left center; }
[data-grow].is-in { transform: scaleX(1); transition: transform var(--t-energise) var(--ease-throw); }
/* drawers open in place */
[data-drawer] { transform-origin: 50% 0; }
[data-drawer].is-opening { animation: lu-drawer 200ms var(--ease-throw) both; }
@keyframes lu-drawer { from { opacity: 0; transform: scaleY(.92); } to { opacity: 1; transform: none; } }
/* a live value that has gone stale (older than one refresh) dims — never looks live */
.is-stale { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-draw] > *, [data-draw] .lu-cell, [data-reveal], [data-grow] { opacity: 1 !important; transform: none !important; }
}

/* ───────── below 1024: mobile layout (390 = no horizontal scroll) ───────── */
@media (max-width: 1023px) {
  :root { --gutter-l: 16px; --gutter-r: 16px; --gap-section: 40px;
    --fs-hero: 40px; --fs-title: 40px; --fs-panel: 24px; --fs-label: 18px; --fs-lede: 16px; --fs-nav: 16px; --fs-body: 15px; --fs-small: 13px; --fs-mono: 13px; --fs-mono-label: 12px; --fs-mono-lg: 20px; --fs-mono-md: 18px; }
  .nav { height: 64px; padding: 0 16px; gap: 12px; justify-content: space-between; }
  .nav .brand { font-size: 20px; gap: 10px; }
  .nav .brand img { width: 64px; height: 36px; }
  .nav .nav-desktop, .nav .tools { display: none; }
  .nav .nav-menu { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; font-weight: 600; font-size: 15px; }
  .nav .nav-menu-bars { position: relative; width: 18px; height: 12px; background: linear-gradient(var(--ink-chrome) 0 0) 0 0 / 100% 2px no-repeat, linear-gradient(var(--ink-chrome) 0 0) 0 50% / 100% 2px no-repeat, linear-gradient(var(--ink-chrome) 0 0) 0 100% / 100% 2px no-repeat; }
  .nav .nav-drawer:not([hidden]) { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); padding: 8px 16px 16px; }
  .nav .nav-drawer .nav-link { padding: 12px 0; font-size: 17px; }
  .nav .nav-drawer .nav-link.is-active { color: var(--ink); font-weight: 700; }
  .nav .nav-drawer .nav-link.is-active::before { content: ""; width: 4px; height: 18px; margin-right: 10px; background: var(--orange); }
  .nav .drawer-social { display: flex; gap: 20px; padding-top: 12px; font: 600 14px/1 var(--font-mono); }
  .footer { grid-template-columns: 1fr; gap: 12px; margin: 0 16px 16px; padding: 14px 16px; }
  .footer strong { font-size: 20px; }
  .footer .sources { white-space: normal; }
  .footer .links { flex-wrap: wrap; white-space: normal; gap: 14px; }
  .hazard { height: 10px; background-size: 26px 100%; }
}