/* THE BASE EVERY PAGE SHARES: the colours (light and dark), the three typefaces, the
   text size and the 90% scale. The dashboard adds app.css on top; the sign-in, account
   and admin pages add pages.css. One copy, so the pages cannot drift from the dashboard
   again (they did: each carried its own colours and sizes). Public, unlike app.css:
   the sign-in page loads it before anyone is signed in, and it holds nothing but these. */
:root{
  /* Cooler and quieter than the warm paper it replaces. One accent, used for
     interaction only; the three status colours are reserved for status. */
  --paper:#F3F5F8; --surface:#FFFFFF; --sunk:#EEF1F5; --raise:#FBFCFD;
  --rule:rgba(14,21,38,.09); --rule-strong:rgba(14,21,38,.16);
  /* --ink-mute reads at 4.5:1 or better (WCAG AA for text) on --surface, --paper and --sunk, the three it sits on; tests/test_dashboard_tokens.py holds it there. */
  --ink:#0E1526; --ink-soft:#4C556A; --ink-mute:#626A7C;
  --accent:#2C55D4; --accent-soft:#E9EEFC; --accent-ink:#FFFFFF; --accent-deep:#1E3A9B;
  --good:#0E7A5F; --good-soft:#E3F2ED;
  --warn:#A66A0B; --warn-soft:#FBF0DC;
  --crit:#B5352A; --crit-soft:#FBE7E4;
  --sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --shadow:0 1px 2px rgba(14,21,38,.05),0 12px 32px -8px rgba(14,21,38,.16);
  --shadow-sm:0 1px 2px rgba(14,21,38,.06);
  --r:8px; --r-lg:14px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0B0E15; --surface:#12161F; --sunk:#181D28; --raise:#1A202C;
    --rule:rgba(255,255,255,.09); --rule-strong:rgba(255,255,255,.17);
    --ink:#E9ECF3; --ink-soft:#A8B0C0; --ink-mute:#818B9D;
    --accent:#7C9BF7; --accent-soft:#1B2542; --accent-ink:#0B0E15; --accent-deep:#A8BEFB;
    --good:#4FC79E; --good-soft:#0F2A22;
    --warn:#DFA94B; --warn-soft:#2E2413;
    --crit:#E8796B; --crit-soft:#2E1A18;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 18px 44px -10px rgba(0,0,0,.6);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --paper:#0B0E15; --surface:#12161F; --sunk:#181D28; --raise:#1A202C;
  --rule:rgba(255,255,255,.09); --rule-strong:rgba(255,255,255,.17);
  --ink:#E9ECF3; --ink-soft:#A8B0C0; --ink-mute:#818B9D;
  --accent:#7C9BF7; --accent-soft:#1B2542; --accent-ink:#0B0E15; --accent-deep:#A8BEFB;
  --good:#4FC79E; --good-soft:#0F2A22;
  --warn:#DFA94B; --warn-soft:#2E2413;
  --crit:#E8796B; --crit-soft:#2E1A18;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 18px 44px -10px rgba(0,0,0,.6);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
/* THE WHOLE PAGE AT 90%, WITHOUT TOUCHING A SINGLE SIZE
   Every dimension here is in px -- 41 rem values against several hundred px
   ones -- so the usual answer, `html{font-size:90%}` with everything in rem,
   would rescale the type and leave every padding, border and column width at
   full size. That does not read as a smaller page; it reads as a cramped one.

   `zoom` scales the layout itself, so 13.5px type, 9px padding and a 246px rail
   all shrink together and the design keeps its proportions.

   AND IT SCALES `vh` TOO, which is the catch. `100vh` resolves to the viewport
   and is then scaled with everything else, so the shell rendered at 90% of the
   screen and left a tenth of it blank below the table -- 94 dead pixels on a
   940px window. Dividing the height back out is what makes the contents
   smaller WITHOUT making the app smaller, which is the whole point.

   The factor is a custom property so the two uses cannot drift: change --ui and
   both the scaling and the correction follow. */
:root{--ui:0.9;zoom:var(--ui)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:13.5px;line-height:1.5;-webkit-font-smoothing:antialiased;
  font-feature-settings:'ss01' 1,'cv01' 1}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
h1,h2,h3{text-wrap:balance;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--accent-deep)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent-soft);color:var(--ink)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Tuned scrollbars: the rail, the table and the drawer all scroll, and three
   fat native bars was most of what made this look like a tool from 2009. */
*{scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--rule-strong);border-radius:20px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--ink-mute);background-clip:content-box}


/* THE MENU SHEET: the kebab's and the avatar's, on every page that has one. */
/* Fixed, not absolute. The top bar clips its own overflow so the search and the
   stats can never spill it, and that clipped this menu out of existence: the
   sheet opened INSIDE a box with `overflow:hidden` and was cut off at the bar's
   own bottom edge, so a menu that was open and painted was invisible. It leaves
   the bar's box entirely now and is placed against the button on open. */
.sheet{position:fixed;top:0;right:0;min-width:250px;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow);z-index:1220;
  padding:6px;display:none}
.sheet.on{display:block}
.sheet button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;background:none;
  border:0;border-radius:8px;cursor:pointer;font-size:13px;text-align:left;color:var(--ink)}
.sheet button:hover{background:var(--sunk)}
.sheet .k{margin-left:auto;font-size:11px;color:var(--ink-mute);font-family:var(--mono)}
.sheet hr{border:0;border-top:1px solid var(--rule);margin:6px 3px}

/* A NEWER VERSION IS SERVING (revision.js): a small bar at the foot of the window,
   offered once, never in the way of what the reader is doing. */
.newversion{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:1300;
  display:flex;align-items:center;gap:12px;padding:9px 10px 9px 16px;max-width:calc(100vw - 32px);
  background:var(--ink);color:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow);
  font-size:13px}
.newversion[hidden]{display:none}
.newversion button{border:0;cursor:pointer;font:inherit;border-radius:var(--r)}
.newversion .nv-go{background:var(--accent);color:var(--accent-ink);padding:5px 12px;font-weight:600}
.newversion .nv-x{background:none;color:inherit;opacity:.7;font-size:17px;line-height:1;padding:2px 6px}
.newversion .nv-x:hover{opacity:1}