/* ===========================================================================
   base.css — shared by every page (hub + all reports).
   Holds only the universal reset, body defaults, and the floating theme
   toggle. Palette tokens live in hub.css / report.css so each page type can
   have its own identity. Loaded FIRST, before the page-specific stylesheet.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }

/* Floating light/dark toggle (injected by assets/toggle.js on every page).
   References tokens (--card, --ink, --line-2, --accent) that both page types
   define, so it themes correctly everywhere. */
.theme-toggle {
  position: fixed; top: 16px; right: 16px; z-index: 100;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-2, #ccc);
  background: var(--card, #fff);
  color: var(--ink, #111);
  font-size: 17px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  transition: transform .15s ease, border-color .15s ease;
}
.theme-toggle:hover { transform: translateY(-1px); border-color: var(--accent, #888); }
.theme-toggle:focus-visible { outline: 3px solid var(--accent, #888); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}