/* HOMELAB — lab.css, shared shell for all 11 /homelab pages. Mobile-first (390px),
   breakpoints 560 / 640 / 720 / 1240 only. Replaces bill.css/bill.js's stylesheet half.
   Author order: tokens -> reset -> shell -> toc -> content -> tables -> cards ->
   finder/hubfind -> pager -> totop -> footer -> print. Flat, single-class selectors. */

/* ---------- tokens (karadorde house identity, see /Users/topper/sandbox/karadorde/CLAUDE.md) ---------- */
:root {
  --bg:        #101214; /* iron — page ground */
  --panel:     #171B1E; /* smoke — cards/panels */
  --panel-2:   #1D2226; /* raised surfaces, tooltips */
  --line:      #262C31;
  --line-soft: #20262A;
  --ink:       #E8E6E1; /* silver */
  --muted:     #98A1A8;
  --faint:     #5C636B;
  --crimson:      #C33B2F; /* the accent — spent sparingly */
  --crimson-mark: #D64A3D;
  --crimson-text: #E05648;
  --steel:     #8FA3B5; /* metadata / secondary accent */
  /* not a house token — local addition for the chip "running" state only */
  --good:      #7FBF8E;
  --good-line: #2C4534;

  --display: "Oswald", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  --body: "Avenir Next", "Avenir", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}

/* ---------- reset ---------- */
* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  scroll-padding-top: 64px; /* anchors clear the 48px sticky labbar + a margin */
}
body {
  margin: 0; min-height: 100svh; background: var(--bg); color: var(--ink);
  font-family: var(--body); font-size: 16px; line-height: 1.65;
  display: flex; flex-direction: column; overflow-x: hidden;
}
a { color: var(--crimson-text); text-decoration-color: rgba(224,86,72,.4); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--crimson-text); }
:focus-visible { outline: 2px solid var(--crimson-text); outline-offset: 3px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hlink, .scroll::after, a.card, .pager a, .toc a, .lb-find, .chip, .fnd-panel, .totop { transition: none; }
}

/* ---------- shell ---------- */
.page { width: min(820px, 100% - 48px); margin: 0 auto; flex: 1; }
@media (max-width: 560px) { .page { width: calc(100% - 36px); } }

/* page + TOC rail grid — pages that carry a sibling .toc get the 1240 2-col layout */
@media (min-width: 1240px) {
  .page:has(> .toc) {
    width: min(1078px, 100% - 48px);
    display: grid; grid-template-columns: minmax(0, 820px) 210px; gap: 48px; align-items: start;
  }
  .page:has(> .toc) > .content { min-width: 0; }
}

/* site nav — unchanged markup/behavior across every karadorde page */
.topnav {
  padding: 22px 0 0; display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
}
.topnav a { text-decoration: none; color: var(--steel); }
.topnav a:hover, .topnav a:focus-visible { color: var(--crimson-text); }
.topnav .tn-home { color: var(--ink); }
.topnav .tn-home .dj { color: var(--crimson-text); }
.topnav .tn-links { display: flex; gap: 18px; flex-wrap: wrap; }
.topnav .tn-links a[aria-current="true"] { color: var(--crimson-text); border-bottom: 1px solid var(--crimson); padding-bottom: 2px; }

/* labbar — the section spine, sticky, every page, NOT the site topnav */
.labbar {
  position: sticky; top: 0; z-index: 50; height: 48px; margin-top: 14px;
  display: flex; align-items: center; gap: 10px; padding: 0 2px;
  background: var(--bg); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.labbar .lb-home { color: var(--ink); text-decoration: none; flex: 0 0 auto; }
.labbar .lb-home:hover, .labbar .lb-home:focus-visible { color: var(--crimson-text); }
.labbar .lb-sep { color: var(--faint); flex: 0 0 auto; }
.labbar .lb-here {
  color: var(--steel); flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.labbar .lb-find {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 12px; background: transparent; cursor: pointer;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--crimson-text); border: 1px solid var(--line); border-radius: 2px;
  transition: border-color .15s ease;
}
.labbar .lb-find:hover, .labbar .lb-find:focus-visible { border-color: var(--crimson); }
.labbar .lb-glyph { font-size: 13px; }
.labbar .lb-find[aria-expanded="true"] { border-color: var(--crimson); color: var(--ink); }

/* crumb / header block */
.crumb {
  font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--steel); margin: clamp(26px, 5vh, 44px) 0 10px;
}
.sep { color: var(--faint); }
.crumb .sep { color: var(--faint); }
h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(40px, 8vw, 72px); line-height: .96;
  letter-spacing: .005em; text-transform: uppercase; margin: 0;
}
h1 .accent { color: var(--crimson-text); }
.tagline { max-width: 60ch; color: var(--steel); margin: 18px 0 0; font-size: 17px; }
.tagline strong { color: var(--ink); font-weight: 600; }
.scope {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em; color: var(--faint);
  margin: 14px 0 0;
}

/* rundown — the decisions, top of pages that have one */
.rundown { background: var(--panel); border-left: 2px solid var(--crimson); margin: 22px 0 0; padding: 16px 20px 14px; }
.rundown-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap;
  border-bottom: 1px dashed var(--line); margin: 0 0 12px; padding-bottom: 8px;
}
.rundown .rd-label { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--crimson-text); margin: 0; }
.rundown .scope { margin: 0; white-space: nowrap; }
.rundown ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.rundown li { display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; line-height: 1.4; color: var(--muted); }
.rundown li .chip { flex: 0 0 auto; }

/* ---------- toc — inline <details> (below 1240) + sticky rail (>=1240) ---------- */
.toc { display: none; }
@media (min-width: 1240px) {
  .toc { display: block; position: sticky; top: 64px; align-self: start; }
}
.toc .toc-label {
  font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 12px;
}
.toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.toc a {
  display: block; padding: 5px 0 5px 12px; border-left: 2px solid var(--line);
  color: var(--muted); text-decoration: none; font-size: 13.5px; line-height: 1.3;
  transition: color .15s ease, border-color .15s ease;
}
.toc a:hover, .toc a:focus-visible { color: var(--ink); }
.toc a.active { color: var(--crimson-text); border-left-color: var(--crimson); font-weight: 600; }

.toc-inline { background: var(--panel); border: 1px solid var(--line); margin: 20px 0 0; }
@media (min-width: 1240px) { .toc-inline { display: none; } }
.toc-inline summary {
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--steel); padding: 12px 16px; cursor: pointer; list-style: none;
  min-height: 40px; display: flex; align-items: center;
}
.toc-inline summary::-webkit-details-marker { display: none; }
.toc-inline summary::before { content: "▸ "; color: var(--crimson-text); }
.toc-inline[open] summary::before { content: "▾ "; }
.toc-inline ul {
  list-style: none; margin: 0; padding: 0 16px 14px; display: flex; flex-direction: column; gap: 8px;
  border-top: 1px dashed var(--line); padding-top: 12px;
}
.toc-inline a { color: var(--muted); text-decoration: none; font-size: 14px; }
.toc-inline a:hover, .toc-inline a:focus-visible { color: var(--crimson-text); }
.toc-inline a.active { color: var(--crimson-text); }

/* ---------- content ---------- */
main { padding: clamp(30px, 5vh, 52px) 0 72px; }
section { margin: 0 0 clamp(38px, 6vh, 60px); }
h2 {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .02em; font-size: clamp(24px, 4vw, 30px); line-height: 1.1;
  margin: 0 0 6px; scroll-margin-top: 64px;
}
h2 .num { color: var(--crimson-text); font-weight: 500; margin-right: 10px; }
h2 .meta {
  font-family: var(--mono); font-size: 13px; letter-spacing: .04em; text-transform: none;
  color: var(--steel); font-weight: 400; margin-left: 10px; vertical-align: middle;
}
h3 {
  font-family: var(--display); font-weight: 500; text-transform: uppercase;
  letter-spacing: .03em; font-size: 19px; margin: 22px 0 6px; color: var(--ink);
  scroll-margin-top: 64px;
}
.hlink {
  opacity: 0; margin-left: 8px; color: var(--faint); text-decoration: none;
  font-family: var(--mono); font-weight: 400; font-size: .6em; letter-spacing: 0; vertical-align: middle;
  transition: opacity .15s ease, color .15s ease;
}
h2:hover .hlink, h2:focus-within .hlink, h3:hover .hlink, h3:focus-within .hlink, .hlink:focus-visible { opacity: 1; }
.hlink:hover, .hlink:focus-visible { color: var(--crimson-text); }
.kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--steel); margin: 0 0 14px; }
.kicker a { color: var(--steel); }
.kicker .sep { color: var(--faint); }
p { margin: 0 0 14px; color: var(--muted); }
p strong, li strong { color: var(--ink); font-weight: 600; }
ul.plain, ol.plain { margin: 0 0 14px; padding-left: 20px; color: var(--muted); }
ul.plain li, ol.plain li { margin-bottom: 6px; }

.pick { border-left: 2px solid var(--crimson); background: var(--panel); padding: 14px 18px; margin: 0 0 16px; }
.pick .k { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--crimson-text); display: block; margin-bottom: 4px; }
.pick p { margin: 0; color: var(--muted); }
.pick + .pick { margin-top: -4px; }

.note { font-family: var(--mono); font-size: 12.5px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 10px; margin: 16px 0 0; letter-spacing: .02em; }

.inv {
  margin: clamp(36px, 6vh, 56px) 0 0;
  border-left: 2px solid var(--crimson); padding: 4px 0 4px 18px; max-width: 60ch;
}
.inv p { margin: 0 0 6px; color: var(--muted); font-size: 15px; }
.inv p:last-child { margin-bottom: 0; }
.inv strong { color: var(--ink); font-weight: 600; }
.inv .k { font-family: var(--mono); font-size: 12px; color: var(--steel); letter-spacing: .08em; }

/* status chips — exactly four states, used site-wide; symbol + word always, never color-only */
.chip {
  display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line); white-space: nowrap; line-height: 1.6;
}
.chip.run { color: var(--good); border-color: var(--good-line); }
.chip.dec { color: var(--steel); border-color: var(--line); }
.chip.open { color: var(--crimson-text); border-color: rgba(195, 59, 47, .45); }
.chip.some { color: var(--muted); border-color: var(--line); border-style: dashed; }
.researched { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* diagrams */
figure.diagram { margin: 0 0 16px; border: 1px solid var(--line); background: var(--panel); padding: 14px; overflow-x: auto; }
figure.diagram svg { display: block; min-width: 560px; width: 100%; height: auto; }
figure.diagram figcaption { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-top: 10px; }
.svg-box { fill: var(--panel-2); stroke: var(--line); }
.svg-box-hub { fill: var(--panel-2); stroke: var(--crimson); }
.svg-t { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; letter-spacing: .03em; fill: var(--ink); }
.svg-t.dim { fill: var(--steel); font-size: 11.5px; }
.svg-t.accent { fill: var(--crimson-text); }
.svg-line { stroke: var(--faint); stroke-width: 1.2; fill: none; }
.svg-line.accent { stroke: var(--crimson); }

/* ---------- tables ---------- */
.scroll { position: relative; overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--line); }
.scroll::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 32px; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--bg)); opacity: 0; transition: opacity .15s ease;
}
.scroll.can-scroll::after { opacity: 1; }
table { border-collapse: collapse; width: 100%; min-width: 540px; font-size: 14px; }
th {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--steel); text-align: left; padding: 10px 14px;
  border-bottom: 1px solid var(--line); background: var(--panel); white-space: nowrap;
}
td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); color: var(--muted); vertical-align: top; }
tr:last-child td { border-bottom: none; }
td.hl { color: var(--ink); font-weight: 600; }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
th.num { text-align: right; }

/* ledger table — new column order Item | Price | Status | Where. Item is the sticky first
   column; thead is sticky under the labbar (top:48px). separate+spacing:0 avoids sticky/
   collapse bugs; borders stay on td/th bottom only. */
table.ledger { border-collapse: separate; border-spacing: 0; min-width: 620px; }
table.ledger th, table.ledger td { border-bottom: 1px solid var(--line-soft); }
table.ledger th { border-bottom: 1px solid var(--line); }
table.ledger thead th {
  position: sticky; top: 48px; z-index: 2; background: var(--bg);
}
table.ledger th:first-child, table.ledger td:first-child {
  position: sticky; left: 0; background: var(--bg); z-index: 1;
  max-width: 46vw; box-shadow: 2px 0 4px rgba(0,0,0,.35);
}
table.ledger thead th:first-child { z-index: 3; }
table.ledger td:first-child {
  color: var(--ink); font-weight: 600;
}
table.ledger td:first-child a { color: inherit; }
table.ledger tr.ledger-subtotal td { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line); }
table.ledger tr.ledger-subtotal td:first-child { background: var(--bg); }

/* ledger status filters — lab.js toggles these body classes; hidden rows carry data-status */
body.hide-run [data-status="run"], body.hide-dec [data-status="dec"],
body.hide-open [data-status="open"], body.hide-some [data-status="some"] { display: none; }

/* filter bar — show-only semantics, count badges written by lab.js */
.filter-bar {
  display: flex; gap: 8px; margin: 0 0 14px; overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 2px; scrollbar-width: none;
}
.filter-bar::-webkit-scrollbar { display: none; }
.filter-bar button {
  scroll-snap-align: start; flex: 0 0 auto; min-height: 40px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  padding: 0 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); color: var(--steel); cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.filter-bar button:hover, .filter-bar button:focus-visible { border-color: var(--crimson); color: var(--ink); }
.filter-bar button[aria-pressed="true"] { border-color: var(--crimson); color: var(--crimson-text); background: var(--panel-2); }

/* jump strip — phase pills, scrollable, NOT sticky (thead + filter-bar is busy enough) */
.jump-strip {
  display: flex; gap: 8px; margin: 0 0 18px; overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 2px; scrollbar-width: none;
}
.jump-strip::-webkit-scrollbar { display: none; }
.jump-strip a {
  scroll-snap-align: start; flex: 0 0 auto; display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--steel); text-decoration: none; transition: border-color .15s ease, color .15s ease;
}
.jump-strip a:hover, .jump-strip a:focus-visible { border-color: var(--crimson); color: var(--crimson-text); }

/* ---------- cards ---------- */
/* .kpi — 4-tile band, hardware dashboard's #status */
.kpi-band {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
  border: 1px solid var(--line); margin: 0 0 16px;
}
@media (min-width: 640px) { .kpi-band { grid-template-columns: repeat(4, 1fr); } }
a.kpi, .kpi {
  display: block; background: var(--panel); padding: 16px 16px 14px; text-decoration: none; color: inherit;
  transition: background-color .15s ease;
}
a.kpi:hover, a.kpi:focus-visible { background: var(--panel-2); }
.kpi .kpi-label {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--steel); margin: 0 0 8px;
}
.kpi .kpi-figure {
  display: block; font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .01em; font-size: clamp(17px, 2.6vw, 21px); line-height: 1.2; color: var(--ink);
}
a.kpi:hover .kpi-figure, a.kpi:focus-visible .kpi-figure { color: var(--crimson-text); }

/* .state — hub's 3-cell running/next/waiting strip */
.state { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 0 0 16px; }
@media (max-width: 640px) { .state { grid-template-columns: 1fr; } }
.state-cell { background: var(--panel); padding: 14px 16px; }
.state-cell .k { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; display: block; margin-bottom: 6px; color: var(--steel); }
.state-cell p { margin: 0; font-size: 13.5px; color: var(--muted); }

/* .cards — patch-panel card grid, shared by the hub's THE SYSTEMS/THE BILL and hardware's #parts */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 16px; }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }
a.card, .card {
  display: block; border: 1px solid var(--line); background: var(--panel);
  padding: 16px 18px; text-decoration: none; color: inherit; transition: border-color .18s ease;
}
a.card:hover, a.card:focus-visible, .card:has(a:hover), .card:has(a:focus-visible) { border-color: var(--crimson); }
.card .c-title, a.card .c-title {
  font-family: var(--display); font-weight: 500; text-transform: uppercase;
  letter-spacing: .03em; font-size: 20px; color: var(--ink); display: block; text-decoration: none;
}
.card .c-title .arrow { color: var(--faint); transition: color .18s ease; float: right; }
a.card:hover .c-title .arrow, .c-title:hover .arrow, .c-title:focus-visible .arrow { color: var(--crimson-text); }
.card .c-note, a.card .c-note { display: block; font-size: 13.5px; color: var(--steel); margin-top: 5px; }
.card .c-meta, a.card .c-meta { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-top: 10px; }

/* .jacks — mono "jack list" of deep links inside a patch-panel card (hub's THE SYSTEMS) */
.jacks { list-style: none; margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; }
.jacks li { margin: 0; }
.jacks a {
  display: flex; align-items: center; min-height: 40px; gap: 8px; text-decoration: none;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: var(--muted);
  border-bottom: 1px dashed var(--line-soft);
}
.jacks li:last-child a { border-bottom: none; }
.jacks a::before { content: "·"; color: var(--faint); }
.jacks a:hover, .jacks a:focus-visible { color: var(--crimson-text); }

/* .dial — compact one-line rows: /homelab/everything's static index + hub's "in the stacks" */
.dial { list-style: none; margin: 0; padding: 0; }
.dial li {
  border-bottom: 1px solid var(--line-soft); display: flex; align-items: baseline;
  gap: 6px 14px; flex-wrap: wrap; min-height: 40px; padding: 9px 2px;
}
.dial .d-path { font-family: var(--mono); font-size: 11.5px; color: var(--faint); flex: 0 0 auto; }
.dial .d-title { font-family: var(--display); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; font-size: 15px; color: var(--ink); }
.dial a.d-title { text-decoration: none; }
.dial a.d-title:hover, .dial a.d-title:focus-visible { color: var(--crimson-text); }
.dial .d-note { font-size: 13px; color: var(--steel); flex: 1 1 240px; }
.dial[hidden], .dial li[hidden] { display: none; }

/* ---------- finder / hubfind ---------- */
#finder.finder[hidden] { display: none; }
.finder {
  position: fixed; left: 0; right: 0; top: 48px; bottom: 0; z-index: 60;
  background: var(--bg); overflow-y: auto;
}
@media (min-width: 720px) {
  .finder {
    left: auto; bottom: auto; top: 56px; right: max(16px, calc((100% - 820px) / 2));
    width: 420px; max-height: min(560px, calc(100vh - 88px));
    background: var(--panel); border: 1px solid var(--line); box-shadow: 0 18px 46px rgba(0,0,0,.45);
    border-radius: 3px;
  }
}
.fnd-head { display: flex; gap: 8px; align-items: center; padding: 14px 14px 10px; position: sticky; top: 0; background: inherit; }
.fnd-input {
  flex: 1 1 auto; min-height: 44px; padding: 0 14px; background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 2px; font-family: var(--body); font-size: 16px;
}
.fnd-input::placeholder { color: var(--faint); }
.fnd-input:focus-visible { outline: 2px solid var(--crimson-text); outline-offset: 2px; }
.fnd-close {
  flex: 0 0 auto; min-width: 40px; min-height: 40px; background: transparent; color: var(--steel);
  border: 1px solid var(--line); border-radius: 2px; cursor: pointer; font-size: 16px;
}
.fnd-close:hover, .fnd-close:focus-visible { border-color: var(--crimson); color: var(--crimson-text); }
.fnd-body { padding: 4px 14px 20px; }
.fnd-group { margin: 18px 0 0; }
.fnd-group:first-child { margin-top: 6px; }
.fnd-group-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--crimson-text); margin: 0 0 6px;
}
.fnd-map ul, .fnd-results ul { list-style: none; margin: 0; padding: 0; }
.fnd-map a, .fnd-results a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  min-height: 40px; padding: 8px 4px; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--line-soft); font-size: 14.5px;
}
.fnd-map li:last-child a, .fnd-results li:last-child a { border-bottom: none; }
.fnd-map a:hover, .fnd-map a:focus-visible, .fnd-results a:hover, .fnd-results a:focus-visible { color: var(--crimson-text); }
.fnd-item-g {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--steel); flex: 0 0 auto; text-align: right;
}
.fnd-map a[data-here], .fnd-results a[data-here] { color: var(--crimson-text); }
.fnd-map a[data-here]::after { content: " · here"; color: var(--faint); font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; }
.fnd-empty { font-family: var(--mono); font-size: 13px; color: var(--faint); padding: 16px 4px; }

/* .hubfind — inline finder field, same matcher, rendered directly on the hub (no panel chrome) */
.hubfind { margin: 0 0 16px; }
.hubfind input {
  width: 100%; min-height: 48px; padding: 0 16px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 2px; font-family: var(--body); font-size: 16px;
}
.hubfind input::placeholder { color: var(--faint); }
.hubfind input:focus-visible { outline: 2px solid var(--crimson-text); outline-offset: 2px; }
.hubfind-results { margin-top: 8px; }
.hubfind-results:empty { margin-top: 0; }

/* filter input reused verbatim on /homelab/everything (same matcher as .hubfind) */
.everything-filter { margin: 0 0 18px; }
.everything-filter input {
  width: 100%; min-height: 48px; padding: 0 16px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 2px; font-family: var(--body); font-size: 16px;
}
.everything-filter input::placeholder { color: var(--faint); }

/* ---------- pager ---------- */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: clamp(30px, 5vh, 52px) 0 0; }
@media (max-width: 560px) { .pager { grid-template-columns: 1fr; } }
.pager a {
  display: block; border: 1px solid var(--line); background: var(--panel);
  padding: 16px 18px; text-decoration: none; color: inherit; transition: border-color .18s ease;
}
.pager a:hover, .pager a:focus-visible { border-color: var(--crimson); }
.pager .pg-next { text-align: right; }
@media (max-width: 560px) { .pager .pg-next { text-align: left; } }
.pager .pg-kick {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 6px; transition: color .18s ease;
}
.pager a:hover .pg-kick, .pager a:focus-visible .pg-kick { color: var(--crimson-text); }
.pager .pg-title {
  display: block; font-family: var(--display); font-weight: 500; text-transform: uppercase;
  letter-spacing: .02em; font-size: 19px; color: var(--ink);
}

/* ---------- totop ---------- */
.totop {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  display: none; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; color: var(--steel);
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.4); cursor: pointer;
}
.totop.show { display: inline-flex; }
.totop:hover, .totop:focus-visible { border-color: var(--crimson); color: var(--crimson-text); }

/* ---------- footer ---------- */
footer.site { border-top: 1px solid var(--line); padding: 20px 0 28px; margin-top: auto; }
footer.site .page-foot {
  width: min(820px, 100% - 48px); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--faint);
}
footer.site .sr { color: var(--steel); }

/* ---------- print ---------- */
@media print {
  :root {
    --bg: #fff; --panel: #fff; --panel-2: #f0f0f0; --line: #ccc; --line-soft: #ddd;
    --ink: #1A1C1E; --muted: #333; --steel: #456F88; --faint: #555;
    --crimson: #A63426; --crimson-text: #A63426; --good: #2C6B3A; --good-line: #b9d8bf;
  }
  body { background: #fff; }
  .topnav, .labbar, .finder, .toc, .toc-inline, .pager, .hlink, .filter-bar, .jump-strip, .totop,
  .hubfind, .everything-filter { display: none !important; }
  a { text-decoration: underline; }
  a[href^="http"]:not([href*="karadorde.com"])::after {
    content: " (" attr(href) ")"; font-size: .82em; color: var(--steel); word-break: break-all;
  }
  table, figure.diagram, .pick, .rundown { break-inside: avoid; }
  .scroll { overflow: visible; border-color: var(--line); }
  .scroll::after { display: none; }
  table.ledger thead th, table.ledger th:first-child, table.ledger td:first-child { position: static; box-shadow: none; }
  /* force any <details> open on paper, .toc-inline stays hidden above */
  details:not(.toc-inline) { display: block; }
  details:not(.toc-inline):not([open]) > summary { display: none; }
  details:not(.toc-inline) > *:not(summary) { display: block !important; }
  p, li, td { orphans: 3; widows: 3; }
}