/* Theme handling: pages define colours with light-dark(); color-scheme picks which side applies. */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; animation-timing-function: ease; }

/* Light / auto / dark switch (buttons are rendered by theme.js) */
.theme-switch { position: relative; display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); opacity: .7; transition: opacity .15s ease; }
.theme-switch:hover, .theme-switch:focus-within { opacity: 1; }
.theme-switch button { position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 22px; padding: 0;
  border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; transition: color .15s ease; }
.theme-switch button:hover, .theme-switch button[aria-checked="true"] { color: var(--fg); }
.theme-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.theme-switch svg { width: 14px; height: 14px; }
.theme-switch .thumb { position: absolute; top: 2px; left: 2px; width: 26px; height: 22px; border-radius: 999px;
  background: var(--line); transition: transform .2s ease; }
.theme-switch[data-value="auto"] .thumb { transform: translateX(26px); }
.theme-switch[data-value="dark"] .thumb { transform: translateX(52px); }
@media (prefers-reduced-motion: reduce) { .theme-switch .thumb { transition: none; } }