/* The light/dark toggle. A switch, not a button — its state IS the
   information, so both glyphs sit in the track and the knob slides between
   them rather than swapping one icon for another. */
.theme-switch {
  flex: none; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0;
}
.theme-switch:focus-visible { outline: none; }
.theme-switch:focus-visible .theme-track { outline: 2px solid var(--accent); outline-offset: 3px; }

.theme-track {
  position: relative; display: inline-flex; align-items: center;
  justify-content: space-between; gap: .28rem;
  width: 52px; height: 28px; padding: 0 .36rem;
  border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--surface-alt);
  transition: border-color .18s ease, background .18s ease;
}
.theme-switch:hover .theme-track { border-color: var(--accent); }

.theme-track svg { position: relative; z-index: 1; width: 14px; height: 14px;
                    color: var(--dim); transition: color .18s ease; }
:root:not([data-theme="dark"]) .theme-track .ico-sun  { color: var(--accent); }
:root[data-theme="dark"]       .theme-track .ico-moon { color: var(--accent); }

.theme-knob {
  position: absolute; top: 50%; left: 3px;
  width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: transform .22s cubic-bezier(.2,.8,.3,1), background .18s ease;
}
:root[data-theme="dark"] .theme-knob { transform: translateX(24px); }

@media (prefers-reduced-motion: reduce) {
  .theme-track, .theme-knob, .theme-track svg { transition: none; }
}