/* Shared Explore-style control. Page-specific theme engines keep ownership of switching. */
:is(#theme-toggle, #themeToggle, #themeToggleMobile, #darkModeToggle).pv-theme-toggle.pv-theme-toggle {
  position: relative;
  width: 44px; min-width: 44px; height: 44px; min-height: 44px;
  flex: 0 0 44px; padding: 0; border: 1px solid rgb(24 33 39 / 14%);
  border-radius: 999px; background: rgb(255 250 242 / 72%);
  color: #59676e; font-size: 0; cursor: pointer; box-shadow: none;
}
:is(#theme-toggle, #themeToggle, #themeToggleMobile, #darkModeToggle).pv-theme-toggle[aria-pressed="true"] {
  border-color: rgb(237 245 243 / 14%); background: rgb(20 40 50 / 72%); color: #b6c7c8;
}
:is(#theme-toggle, #themeToggle, #themeToggleMobile, #darkModeToggle).pv-theme-toggle.pv-theme-toggle:hover { border-color: #0d8f86; color: #182127; transform: none; }
:is(#theme-toggle, #themeToggle, #themeToggleMobile, #darkModeToggle).pv-theme-toggle[aria-pressed="true"]:hover { border-color: #4dd3c6; color: #edf5f3; }
:is(#theme-toggle, #themeToggle, #themeToggleMobile, #darkModeToggle).pv-theme-toggle:focus-visible { outline: 2px solid #0d8f86; outline-offset: 4px; }
:is(#theme-toggle, #themeToggle, #themeToggleMobile, #darkModeToggle).pv-theme-toggle[aria-pressed="true"]:focus-visible { outline-color: #4dd3c6; }
:is(#theme-toggle, #themeToggle, #themeToggleMobile, #darkModeToggle).pv-theme-toggle > * { display: none !important; }
/* A visible, shared crossfade and turn; respect reduced-motion preferences. */
.pv-theme-toggle::before, .pv-theme-toggle::after {
  content: ""; position: absolute; width: 18px; height: 18px; inset: 50% auto auto 50%;
  background: currentColor; mask: center / contain no-repeat;
  opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(-45deg);
  transition: opacity .28s ease, transform .28s ease;
}
.pv-theme-toggle::before { mask-image: url("icons/theme-moon.svg"); }
.pv-theme-toggle::after { mask-image: url("icons/theme-sun.svg"); }
.pv-theme-toggle[aria-pressed="false"]::before,
.pv-theme-toggle[aria-pressed="true"]::after {
  opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0);
}
@media (prefers-reduced-motion: reduce) {
  .pv-theme-toggle::before, .pv-theme-toggle::after { transition: none; }
}