/* Theme toggle lives inside the site header's actions row (auto → light →
   dark cycle). It ships hidden and is revealed by main.js (no-JS users see no
   dead control; same pattern as the cookie banner). */
.theme-toggle {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--card); color: var(--text);
  font-size: 1.05rem; line-height: 1; cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .theme-toggle { transition: color .2s, border-color .2s; }
}