/* ══════════════════════════════════════════════════════
   THEME TOGGLE + SWITCH CROSS-FADE
   ══════════════════════════════════════════════════════ */
/* The toggle is a top-bar icon button (shell.css .icon-button); one icon
   at a time shows what pressing it will give you. */
.theme-toggle:active { transform: scale(.96); }
.theme-toggle .theme-icon { display: none; }
:root[data-theme="light"] .theme-toggle .theme-icon-moon,
:root:not([data-theme="dark"]) .theme-toggle .theme-icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }

/* Applied by theme.js for the duration of a switch only, so a theme change
   reads as a cross-fade rather than a brightness jump. Removed again after
   the fade; never present under prefers-reduced-motion. */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: background-color 200ms ease, color 200ms ease,
              border-color 200ms ease, fill 200ms ease, stroke 200ms ease !important;
}