/*
 * Design rules (read before editing)
 * - Warm, light, data-dense. Tables are the main object; chrome stays quiet.
 * - One accent (burnt orange) for links, focus and the active state. Status uses muted
 *   green or red on text or a small dot, always with a text label.
 * - Every grey is the ink color at an opacity so the palette stays coherent.
 * - One control height (36px), radius 10px for panels and 8px for controls.
 * - Numbers are right-aligned with tabular figures, and their headers align the same way.
 * - Transitions are 120ms on color and background only. No scroll effects.
 * - Fonts are self-hosted (Geist, SIL OFL). Page-specific rules live in css/pages/.
 */
@font-face{font-family:"Geist";src:url("../fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --paper:#f4f1ea; --paper-2:#ebe7dc; --panel:#f7f5ef; --surface:#fffefb;
  --ink:#1a1813; --ink-rgb:26 24 19; --ink-dim:#625d50;
  --rule:rgb(var(--ink-rgb)/.09); --line-strong:rgb(var(--ink-rgb)/.2); --hover:rgb(var(--ink-rgb)/.04);
  --accent:#c2570c; --link:#a84a08;
  --ok:#1d7a3e; --bad:#b42318; --warn:#8a5a00;
  --radius:10px; --radius-sm:8px; --shadow:0 1px 2px rgb(var(--ink-rgb)/.05);
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 var(--sans);font-feature-settings:"tnum" 0}
a{color:var(--link);text-decoration:none;text-underline-offset:2px}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid rgb(194 87 12/.5);outline-offset:2px;border-radius:4px}
.num,td.num,th.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.dim{color:var(--ink-dim)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* app bar */
.bar{position:sticky;top:0;z-index:5;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;
  background:rgb(244 241 234/.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--rule)}
.brand{font-weight:650;letter-spacing:-.01em}
.upd{font-size:12.5px;color:var(--ink-dim)}

.page{max-width:1180px;margin:0 auto;padding:0 28px 56px}
.alert{margin:0 0 20px;padding:10px 14px;border-radius:var(--radius-sm);border:1px solid rgb(180 35 24/.3);
  background:rgb(180 35 24/.06);color:var(--bad)}
.empty{padding:40px 0;color:var(--ink-dim)}
footer{margin-top:40px;padding-top:16px;border-top:1px solid var(--rule);color:var(--ink-dim);font-size:12.5px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

@media (max-width:640px){.bar{padding:0 16px}.page{padding:0 16px 40px}}