/* Shared responsive day/night switch for website and Notebook Lab. */
button.site-theme-toggle {
  --theme-track-w: clamp(32px, 3.5vw, 48px);
  --theme-track-h: calc(var(--theme-track-w) * .42);
  --theme-thumb: calc(var(--theme-track-w) * .68);
  --theme-overhang: calc((var(--theme-thumb) - var(--theme-track-h)) / 2);
  --theme-travel: calc(var(--theme-track-w) - var(--theme-track-h));
  --theme-control-w: calc(var(--theme-track-w) + 14px);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 var(--theme-control-w); width: var(--theme-control-w); height: 44px; min-width: 44px; min-height: 44px;
  padding: 0; border: 0; border-radius: 999px; background: transparent;
  box-shadow: none; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
button.site-theme-toggle:is(:hover,:active,:focus) { background: transparent; box-shadow: none; }
button.site-theme-toggle:focus-visible { outline: 2px solid var(--theme-accent, #075d58); outline-offset: 2px; }
.theme-switch-track {
  position: relative; display: block; width: var(--theme-track-w); height: var(--theme-track-h);
  border: 1px solid color-mix(in srgb, var(--theme-accent, #0b6b61) 26%, #9fb7b2);
  border-radius: 999px; background: #c8d7d3;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.theme-switch-thumb {
  position: absolute; top: calc(var(--theme-overhang) * -1); left: calc(var(--theme-overhang) * -1);
  width: var(--theme-thumb); height: var(--theme-thumb); display: grid; place-items: center;
  border-radius: 50%; background: var(--theme-accent, #0b6b61); color: #fff;
  box-shadow: 0 2px 7px rgba(10, 49, 45, .24);
  transform: translateX(0);
  transition: transform 180ms cubic-bezier(.4,0,.2,1), background-color 180ms ease, box-shadow 180ms ease;
}
button.site-theme-toggle:active .theme-switch-thumb { box-shadow: 0 1px 3px rgba(10,49,45,.18), 0 0 0 5px rgba(11,107,97,.10); }
button.site-theme-toggle svg {
  position: absolute; width: calc(var(--theme-thumb) * .55); height: calc(var(--theme-thumb) * .55); fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; transition: opacity 150ms ease, transform 180ms ease;
}
button.site-theme-toggle .theme-sun { opacity: 1; transform: scale(1) rotate(0deg); }
button.site-theme-toggle .theme-moon { opacity: 0; transform: scale(.72) rotate(-18deg); }
html[data-theme="dark"] .theme-switch-track { background: #314750; border-color: #536b75; }
html[data-theme="dark"] button.site-theme-toggle .theme-switch-thumb {
  transform: translateX(var(--theme-travel)); background: #245f59; box-shadow: 0 2px 8px rgba(0,0,0,.34);
}
html[data-theme="dark"] button.site-theme-toggle .theme-sun { opacity: 0; transform: scale(.72) rotate(18deg); }
html[data-theme="dark"] button.site-theme-toggle .theme-moon { opacity: 1; transform: scale(1) rotate(0deg); }
@media (hover:hover) and (pointer:fine) {
  button.site-theme-toggle:hover .theme-switch-thumb { box-shadow: 0 3px 11px rgba(11,107,97,.30), 0 0 0 4px rgba(121,222,207,.10); }
}
@media (prefers-reduced-motion: reduce) {
  .theme-switch-track,.theme-switch-thumb,button.site-theme-toggle svg { transition: none !important; }
}