*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg-0);color:var(--text-1);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;letter-spacing:.1px}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
#app{min-height:100dvh;display:flex;flex-direction:column}
/* Pages with the global nav (non-immersive routes; app.js toggles the body
class): inner sticky headers offset below the pinned topbar instead of
sliding under it. Immersive views (own header, no topbar) keep top:0. */
body:not(.app-immersive){--stick-under-nav:var(--topbar-h)}
/* Reserve bottom space for the floating PWA install banner on scrollable,
non-immersive routes so list/dashboard content isn't hidden under the card.
The height is published on by install-prompt.js (setupBannerSizing);
0px when no banner is showing. Immersive full-bleed views (chart/map) manage
their own layout and let the card float over them — hence the :not() scope. */
body:not(.app-immersive){padding-bottom:var(--install-banner-height,0px)}
button:focus-visible,[role="button"]:focus-visible,[tabindex]:focus-visible,a:focus-visible,input:focus-visible{outline:none;box-shadow:var(--ring)}
.app-error{margin:auto;max-width:42ch;text-align:center;padding:var(--s5);color:var(--text-2)}
.app-error h2{color:var(--text-1);margin-bottom:var(--s2)}
/* The NavShell wrapper is layout-transparent (display:contents) so the sticky
topbar/tabbar constrain against #app — the full page — instead of the
wrapper's own (header-sized) box, where position:sticky can never travel. */
.nav-shell{display:contents}
/* Global nav: always pinned to the top of the viewport while the page scrolls.
Fixed height (--topbar-h = old natural height: 10+25+10 content + 1 border)
so sticky elements below (e.g. .band-section-header) can offset under it
exactly. z-index 100: above page content + sticky table/section headers
(z 1–5) and the monitor settings backdrop (z 60), below popovers (800),
modals (900+) and toasts (1000). */
.topbar{display:flex;align-items:center;gap:var(--s4);height:var(--topbar-h);padding:0 18px;border-bottom:1px solid var(--border-subtle);background:var(--bg-1);position:sticky;top:0;z-index:100}
.topbar .brand{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.3px}
.topbar .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--live);box-shadow:0 0 10px var(--live)}
.topbar nav{display:flex;gap:2px;margin-left:auto}
.topbar nav a{font-family:var(--font-mono);font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-2);padding:6px 10px;border-radius:var(--r-sm);text-decoration:none}
.topbar nav a.active{color:var(--text-1);background:var(--bg-2)}
/* Account (user-settings) nav item: gear icon + first name, inline on desktop. */
.topbar nav a.nav-account{display:inline-flex;align-items:center;gap:6px}
.topbar nav a.nav-account svg{flex:none}
/* Help control: a