/* Shared by every page. Page-specific styles stay in each page's own <style>.

   Only what is genuinely identical everywhere lives here. Note that --good/--avg/--bad
   are deliberately NOT shared: on the dashboard and activity pages they are pill
   BACKGROUNDS (dark tints), while on the prose pages and status they are TEXT colours
   (bright). Same names, different jobs, so each page defines its own.

   Linked as /common.css?v=VERSION so a release never pairs new HTML with a cached
   old stylesheet (nginx serves this file straight from disk). Bump the ?v= with VERSION. */

:root {
  --bg:#0b0f14;
  --panel:#111824;
  --line:#22303f;
  --txt:#e7eef6;
  --muted:#a3b7cb;
  --accent:#3b82f6;
}
html[data-theme="light"] {
  --bg:#f3f6fa;
  --panel:#ffffff;
  --line:#cfdae6;
  --txt:#14202c;
  --muted:#4d5e6d;
  --accent:#2563eb;
}

* { box-sizing:border-box; }
a { color:var(--accent); }
.nav a { color:var(--muted); text-decoration:none; }
.nav a:hover { color:var(--accent); }
.nav a.active { color:var(--txt); font-weight:600; }
.nav-toggle { display:none; }
.online-chip { display:inline-flex; align-items:center; gap:6px; font-size:0.8125rem;
  color:var(--muted); white-space:nowrap; }
.online-dot { width:8px; height:8px; border-radius:50%; background:#21c97a;
  animation:onlinePulse 2.2s ease-out infinite; }
@keyframes onlinePulse { 0%{box-shadow:0 0 0 0 rgba(33,201,122,.5)}
  70%{box-shadow:0 0 0 6px rgba(33,201,122,0)} 100%{box-shadow:0 0 0 0 rgba(33,201,122,0)} }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* Wide tables scroll inside their own box on a narrow screen instead of dragging the whole
   page sideways. Focusable (tabindex=0 on the wrapper) so the keyboard can scroll it too. */
.tbl-scroll { overflow-x:auto; max-width:100%; }