/* Uiverse "Switch" (sun/moon theme switch)
   Source:  https://uiverse.io/RiccardoRapelli/jolly-chicken-91
   Author:  RiccardoRapelli
   Licence: uiverse.io element page footer reads "MIT License" (verified 2026-10-07). Original CSS: jolly-chicken-91.orig.css
   Adapted for the contractor app:
   - every rule scoped under .uv-theme-switch (the original .switch/.slider names also exist in empty-penguin-100; original class + id names are kept);
   - hard-coded colours replaced by tokens: sky track -> --accent-tint, night track -> --surface-2, sun -> --warning, moon/stars -> --text,
     clouds -> --surface/--border, 2px --border-strong inset ring so the control boundary is >= 3:1 on both themes;
   - 60x34 visual kept, 44px touch target via ::after hit area (--tap); timings -> --dur-slow / --ease-in-out;
   - :focus-visible ring on the track (input is visually hidden but real, keyboard-operable, role=switch + aria-label);
   - added the missing @keyframes rotate-center the original referenced but never defined;
   - prefers-reduced-motion: clouds and star twinkle stop (infinite loops removed), sun rotation and slide are instant. */

.uv-theme-switch .switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  flex: none;
  vertical-align: middle;
}

/* 44px hit area around the 34px visual */
.uv-theme-switch .switch::after {
  content: "";
  position: absolute;
  inset: -5px -2px;
}

.uv-theme-switch .switch #input {
  opacity: 0;
  width: 0;
  height: 0;
}

.uv-theme-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--accent-tint);
  box-shadow: inset 0 0 0 2px var(--border-strong);
  -webkit-transition: var(--dur-slow);
  transition: var(--dur-slow) var(--ease-in-out);
  z-index: 0;
  overflow: hidden;
}

.uv-theme-switch .sun-moon {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: var(--uv-sun, #f2b43a); /* decorative sun; the only literal in this file (state is also carried by position + track) */
  -webkit-transition: var(--dur-slow);
  transition: var(--dur-slow) var(--ease-in-out);
}

.uv-theme-switch #input:checked + .slider {
  background-color: var(--surface-2);
}

.uv-theme-switch #input:focus + .slider {
  box-shadow: inset 0 0 0 2px var(--border-strong);
}

.uv-theme-switch #input:focus-visible + .slider {
  outline: var(--ring-w) solid var(--focus);
  outline-offset: var(--ring-offset);
}

.uv-theme-switch #input:checked + .slider .sun-moon {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
  background-color: var(--text);
  -webkit-animation: rotate-center 0.6s ease-in-out both;
  animation: rotate-center 0.6s ease-in-out both;
}

.uv-theme-switch .moon-dot {
  opacity: 0;
  transition: var(--dur-slow);
  fill: var(--text-3);
}

.uv-theme-switch #input:checked + .slider .sun-moon .moon-dot {
  opacity: 1;
}

.uv-theme-switch .slider.round {
  border-radius: 34px;
}

.uv-theme-switch .slider.round .sun-moon {
  border-radius: 50%;
}

.uv-theme-switch #moon-dot-1 {
  left: 10px;
  top: 3px;
  position: absolute;
  width: 6px;
  height: 6px;
  z-index: 4;
}

.uv-theme-switch #moon-dot-2 {
  left: 2px;
  top: 10px;
  position: absolute;
  width: 10px;
  height: 10px;
  z-index: 4;
}

.uv-theme-switch #moon-dot-3 {
  left: 16px;
  top: 18px;
  position: absolute;
  width: 3px;
  height: 3px;
  z-index: 4;
}

.uv-theme-switch #light-ray-1 {
  left: -8px;
  top: -8px;
  position: absolute;
  width: 43px;
  height: 43px;
  z-index: -1;
  fill: var(--surface);
  opacity: 10%;
}

.uv-theme-switch #light-ray-2 {
  left: -50%;
  top: -50%;
  position: absolute;
  width: 55px;
  height: 55px;
  z-index: -1;
  fill: var(--surface);
  opacity: 10%;
}

.uv-theme-switch #light-ray-3 {
  left: -18px;
  top: -18px;
  position: absolute;
  width: 60px;
  height: 60px;
  z-index: -1;
  fill: var(--surface);
  opacity: 10%;
}

.uv-theme-switch .cloud-light {
  position: absolute;
  fill: var(--surface);
  animation-name: cloud-move;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

.uv-theme-switch .cloud-dark {
  position: absolute;
  fill: var(--border);
  animation-name: cloud-move;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-delay: 1s;
}

.uv-theme-switch #cloud-1 {
  left: 30px;
  top: 15px;
  width: 40px;
}

.uv-theme-switch #cloud-2 {
  left: 44px;
  top: 10px;
  width: 20px;
}

.uv-theme-switch #cloud-3 {
  left: 18px;
  top: 24px;
  width: 30px;
}

.uv-theme-switch #cloud-4 {
  left: 36px;
  top: 18px;
  width: 40px;
}

.uv-theme-switch #cloud-5 {
  left: 48px;
  top: 14px;
  width: 20px;
}

.uv-theme-switch #cloud-6 {
  left: 22px;
  top: 26px;
  width: 30px;
}

@keyframes cloud-move {
  0% {
    transform: translateX(0px);
  }

  40% {
    transform: translateX(4px);
  }

  80% {
    transform: translateX(-4px);
  }

  100% {
    transform: translateX(0px);
  }
}

.uv-theme-switch .stars {
  transform: translateY(-32px);
  opacity: 0;
  transition: var(--dur-slow);
}

.uv-theme-switch .star {
  fill: var(--text);
  position: absolute;
  -webkit-transition: var(--dur-slow);
  transition: var(--dur-slow);
  animation-name: star-twinkle;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.uv-theme-switch #input:checked + .slider .stars {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}

.uv-theme-switch #star-1 {
  width: 20px;
  top: 2px;
  left: 3px;
  animation-delay: 0.3s;
}

.uv-theme-switch #star-2 {
  width: 6px;
  top: 16px;
  left: 3px;
}

.uv-theme-switch #star-3 {
  width: 12px;
  top: 20px;
  left: 10px;
  animation-delay: 0.6s;
}

.uv-theme-switch #star-4 {
  width: 18px;
  top: 0px;
  left: 18px;
  animation-delay: 1.3s;
}

@keyframes star-twinkle {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.2);
  }

  80% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1);
  }
}

/* added: the original references rotate-center but never defines it */
@keyframes rotate-center {
  0% {
    transform: translateX(26px) rotate(0);
  }

  100% {
    transform: translateX(26px) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .uv-theme-switch .cloud-light,
  .uv-theme-switch .cloud-dark,
  .uv-theme-switch .star,
  .uv-theme-switch #input:checked + .slider .sun-moon {
    animation: none;
  }
  .uv-theme-switch .slider,
  .uv-theme-switch .sun-moon,
  .uv-theme-switch .moon-dot,
  .uv-theme-switch .stars,
  .uv-theme-switch .star {
    transition: none;
  }
}