/* Theme-toggle widget — shared CSS. Each page brings its own color
   vars (--bg, --fg, --border, --accent, --muted, --row-hover); this
   file only styles the three-button system/light/dark switch sat in
   the topnav. theme.js wires the buttons.

   Pages also need:
   - a `:root[data-theme="dark"] { … }` rule mirroring their
     `@media (prefers-color-scheme: dark) :root { … }` vars (so an
     explicit choice overrides system).
   - the system-dark `@media` body to target
     `:root:not([data-theme])` instead of bare `:root`. */

nav.topnav .spacer { flex: 1; }

nav.topnav .theme {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: 999px;
  overflow: hidden;
  background: var(--bg);
}
nav.topnav .theme button {
  background: transparent; color: var(--muted);
  border: none; cursor: pointer;
  padding: .25rem .55rem;
  font: inherit; font-size: 14px;
  line-height: 1; display: inline-flex; align-items: center;
}
nav.topnav .theme button:hover { color: var(--fg); background: var(--row-hover); }
nav.topnav .theme button.active {
  /* Most pages declare --accent-soft; fall back to a translucent
     accent tint for the pages that don't. */
  background: var(--accent-soft, rgba(96, 165, 250, .12));
  color: var(--accent);
}
nav.topnav .theme button + button {
  border-left: 1px solid var(--border);
}
/* Static graph deployment hides extra/debug pages from the top nav. */
nav.topnav details.dropdown { display: none !important; }