/* PixelOrigen day/night control. Original artwork; existing theme.js owns state.
   Decoration stays inside each page's existing responsive button footprint. */
html[data-theme] button.theme-toggle[data-theme-toggle] {
  --po-sky: #9edce9;
  --po-orb: #ffd16a;
  --po-orb-size: 14px;
  --po-track-height: 24px;
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  padding: 0;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  font-size: 0 !important;
  -webkit-tap-highlight-color: transparent;
}
html[data-theme] button.theme-toggle[data-theme-toggle] > svg { visibility: hidden; }
html[data-theme] button.theme-toggle[data-theme-toggle]::before,
html[data-theme] button.theme-toggle[data-theme-toggle]::after {
  content: "";
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
}
html[data-theme] button.theme-toggle[data-theme-toggle]::before {
  inset-inline: 1px;
  top: calc(50% - var(--po-track-height) / 2);
  height: var(--po-track-height);
  border: 1px solid #408aa0;
  border-radius: 999px;
  background-color: var(--po-sky);
  background-image: radial-gradient(ellipse at 80% 74%, #edfaff 0 17%, transparent 19%),
    radial-gradient(ellipse at 64% 69%, #edfaff 0 12%, transparent 14%);
  box-shadow: inset 0 1px 3px #0b536526;
  transition: background-color 280ms ease, border-color 280ms ease;
}
html[data-theme] button.theme-toggle[data-theme-toggle]::after {
  width: var(--po-orb-size);
  height: var(--po-orb-size);
  left: 5px;
  top: calc(50% - var(--po-orb-size) / 2);
  border-radius: 50%;
  background-color: var(--po-orb);
  box-shadow: 0 0 0 2px #fff4, 0 1px 3px #71551540;
  transform: rotate(-25deg);
  transition: transform 280ms cubic-bezier(.2,.7,.25,1), background-color 220ms ease, box-shadow 220ms ease;
}
html[data-theme="dark"] button.theme-toggle[data-theme-toggle] {
  --po-sky: #122e49;
  --po-orb: #e1f5ff;
}
html[data-theme="dark"] button.theme-toggle[data-theme-toggle]::before {
  border-color: #5babc2;
  background-image: radial-gradient(circle at 24% 30%, #b9edff 0 1px, transparent 1.4px),
    radial-gradient(circle at 40% 68%, #b9edff 0 .8px, transparent 1.2px),
    radial-gradient(circle at 14% 72%, #b9edff 0 .7px, transparent 1.1px);
}
html[data-theme="dark"] button.theme-toggle[data-theme-toggle]::after {
  /* Compositor-only motion: fixed left, with a theme-driven transform. */
  transform: translateX(14px) rotate(20deg);
  transform: translateX(calc(100cqi - var(--po-orb-size) - 10px)) rotate(20deg);
  box-shadow: inset -5px 2px 0 #537695, 0 0 0 1px #c2efff26;
}
html[data-theme] button.theme-toggle[data-theme-toggle]::after { transition-property: transform, background-color, box-shadow; }
html[data-theme] button.theme-toggle[data-theme-toggle]:focus-visible {
  outline: 2px solid var(--primary, var(--r-cyan, #087fa3)) !important;
  outline-offset: 2px;
}
@media (max-width: 480px) {
  html[data-theme] button.theme-toggle[data-theme-toggle] {
    --po-orb-size: 12px;
    --po-track-height: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] button.theme-toggle[data-theme-toggle],
  html[data-theme] button.theme-toggle[data-theme-toggle]::before,
  html[data-theme] button.theme-toggle[data-theme-toggle]::after { transition: none !important; }
}
@media (forced-colors: active) {
  html[data-theme] button.theme-toggle[data-theme-toggle] { font-size: 19px !important; color: ButtonText !important; }
  html[data-theme] button.theme-toggle[data-theme-toggle] > svg { visibility: visible; }
  html[data-theme] button.theme-toggle[data-theme-toggle]::before,
  html[data-theme] button.theme-toggle[data-theme-toggle]::after { content: none; }
}