/* Uiverse "Loader" (3D wireframe cube spinner)
   Source:  https://uiverse.io/bociKond/wise-bat-13
   Author:  bociKond
   Licence: uiverse.io element page footer reads "MIT License" (verified 2026-10-07). Original CSS: wise-bat-13.orig.css
   Adapted for the contractor app:
   - the one colour token --clr (peach rgb(247,197,159)) -> var(--accent) (tenant, AA-safe on the ground per theme); --clr-alpha -> 10% mix of --clr;
   - cube geometry, nth-of-type transforms and the "spinner" keyframes are untouched;
   - wrapper .uv-loader with role=status + visible-to-AT "Loading" label (the cube is aria-hidden); extra padding so the rotating corners never clip;
   - prefers-reduced-motion: animation removed, the cube is held at the keyframe-0 pose (static wireframe cube, no spin). */

.uv-loader {
  display: inline-grid;
  place-items: center;
  gap: var(--space-8);
  padding: var(--space-8);
  color: var(--text-2);
  font-size: var(--fs-sm);
}

.uv-loader__label {
  /* label is for assistive tech by default; add .uv-loader--labelled to show it */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.uv-loader--labelled .uv-loader__label {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
}

.spinner {
  width: 70.4px;
  height: 70.4px;
  --clr: var(--accent);
  --clr-alpha: color-mix(in srgb, var(--clr) 10%, transparent);
  animation: spinner 1.6s infinite ease;
  transform-style: preserve-3d;
  position: relative;
}

.spinner > div {
  background-color: var(--clr-alpha);
  height: 100%;
  position: absolute;
  width: 100%;
  border: 3.5px solid var(--clr);
}

.spinner div:nth-of-type(1) {
  transform: translateZ(-35.2px) rotateY(180deg);
}

.spinner div:nth-of-type(2) {
  transform: rotateY(-270deg) translateX(50%);
  transform-origin: top right;
}

.spinner div:nth-of-type(3) {
  transform: rotateY(270deg) translateX(-50%);
  transform-origin: center left;
}

.spinner div:nth-of-type(4) {
  transform: rotateX(90deg) translateY(-50%);
  transform-origin: top center;
}

.spinner div:nth-of-type(5) {
  transform: rotateX(-90deg) translateY(50%);
  transform-origin: bottom center;
}

.spinner div:nth-of-type(6) {
  transform: translateZ(35.2px);
}

@keyframes spinner {
  0% {
    transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
  }

  50% {
    transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
  }

  100% {
    transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
    transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
  }
}