/* Canonical pill and stable hit area shared by web and portal. */
:is(html, #nav) button.theme-toggle[data-theme-toggle].theme-orbit {
  --dial-bg: #ffffff; --dial-ink: #111111; --dial-edge: #191919; --dial-thumb: #151515; --dial-sun: #ffffff; --dial-moon: #111111;
  display: inline-flex; position: relative; align-items: center; justify-content: center;
  width: 52px; height: 44px; min-width: 52px; min-height: 44px; flex: 0 0 52px;
  padding: 0; margin: 0; border: 0; border-radius: 24px; background: transparent;
  color: var(--dial-ink); cursor: pointer; touch-action: manipulation;
}
:is(html[data-theme="dark"], html[data-theme="dark"] #nav) button.theme-toggle[data-theme-toggle].theme-orbit {
  --dial-bg: #211e26; --dial-ink: #d0c4d8; --dial-edge: #74667e; --dial-thumb: #51455d;
}
:is(html, #nav) button.theme-toggle[data-theme-toggle].theme-orbit .theme-orbit-face {
  display: block; position: relative; width: 48px; height: 28px; box-sizing: border-box;
  border: 1px solid var(--dial-edge); border-radius: 16px; background: var(--dial-bg); pointer-events: none;
}
:is(html, #nav) button.theme-toggle[data-theme-toggle].theme-orbit .theme-pill-thumb {
  position: absolute; width: 24px; height: 24px; left: 1px; top: 1px;
  border-radius: 50%; background: var(--dial-thumb); transform: translateX(0);
  transition: transform 220ms ease;
}
:is(html[data-theme="dark"], html[data-theme="dark"] #nav) button.theme-toggle[data-theme-toggle].theme-orbit .theme-pill-thumb { transform: translateX(20px); }
:is(html[data-theme="dark"], html[data-theme="dark"] #nav) button.theme-toggle[data-theme-toggle].theme-orbit { --dial-bg: #111111; --dial-ink: #ffffff; --dial-edge: #eeeeee; --dial-thumb: #ffffff; --dial-sun: #ffffff; --dial-moon: #111111; }
:is(html, #nav) button.theme-toggle[data-theme-toggle].theme-orbit svg {
  display: block; position: absolute; width: 14px; height: 14px; top: 6px;
  transition: opacity 180ms ease;
}
:is(html, #nav) button.theme-toggle[data-theme-toggle].theme-orbit .theme-orbit-sun { left: 6px; opacity: 1; color: var(--dial-sun); }
:is(html, #nav) button.theme-toggle[data-theme-toggle].theme-orbit .theme-orbit-moon { right: 6px; opacity: 1; color: var(--dial-moon); }
:is(html[data-theme="dark"], html[data-theme="dark"] #nav) button.theme-toggle[data-theme-toggle].theme-orbit .theme-orbit-sun { opacity: 1; }
:is(html[data-theme="dark"], html[data-theme="dark"] #nav) button.theme-toggle[data-theme-toggle].theme-orbit .theme-orbit-moon { opacity: 1; }
:is(html, #nav) button.theme-toggle[data-theme-toggle].theme-orbit:focus-visible { outline: 2px solid var(--ink, currentColor); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  :is(html, #nav) button.theme-toggle[data-theme-toggle].theme-orbit:hover .theme-orbit-face { border-color: var(--dial-ink); }
}
@media (prefers-reduced-motion: reduce) {
  :is(html, #nav) button.theme-toggle[data-theme-toggle].theme-orbit,
  :is(html, #nav) button.theme-toggle[data-theme-toggle].theme-orbit * { transition: none !important; }
}
@media (forced-colors: active) {
  :is(html, #nav) button.theme-toggle[data-theme-toggle].theme-orbit { --dial-bg: Canvas !important; --dial-ink: ButtonText !important; --dial-edge: ButtonText !important; --dial-thumb: Highlight !important; --dial-sun: HighlightText !important; --dial-moon: ButtonText !important; }
  :is(html, #nav) button.theme-toggle[data-theme-toggle].theme-orbit .theme-pill-thumb { forced-color-adjust: none; }
  :is(html, #nav) button.theme-toggle[data-theme-toggle].theme-orbit:focus-visible { outline-color: Highlight; }
  :is(html[data-theme="dark"], html[data-theme="dark"] #nav) button.theme-toggle[data-theme-toggle].theme-orbit { --dial-sun: ButtonText !important; --dial-moon: HighlightText !important; }
}