/* Keisuite standard spinner — iOS-style 12-spoke activity indicator.
 *
 * Usage:  <link rel="stylesheet" href="/static/spinner.css">
 *         <span class="kspinner" role="status" aria-label="Loading">
 *           <i></i><i></i><i></i><i></i><i></i><i></i>
 *           <i></i><i></i><i></i><i></i><i></i><i></i>
 *         </span>
 *
 * Tune per instance with CSS vars:
 *   --kspinner-size   (default 24px)
 *   --kspinner-color  (default #1a1a1a ink; auto-lightens in body.dark)
 *   --kspinner-speed  (default 0.9s)
 */
.kspinner {
  --kspinner-size: 24px;
  --kspinner-color: #1a1a1a;
  --kspinner-speed: 0.9s;
  position: relative;
  display: inline-block;
  width: var(--kspinner-size);
  height: var(--kspinner-size);
  color: var(--kspinner-color);
  flex-shrink: 0;
}
.kspinner i {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: calc(var(--kspinner-size) * -0.04);
  width: calc(var(--kspinner-size) * 0.08);
  height: calc(var(--kspinner-size) * 0.27);
  border-radius: 999px;
  background: currentColor;
  opacity: 0.1;
  transform-origin: center calc(var(--kspinner-size) * 0.5);
  animation: kspinner-fade var(--kspinner-speed) linear infinite;
}
.kspinner i:nth-child(1)  { transform: rotate(0deg);   animation-delay: 0s; }
.kspinner i:nth-child(2)  { transform: rotate(30deg);  animation-delay: calc(var(--kspinner-speed) * -0.9167); }
.kspinner i:nth-child(3)  { transform: rotate(60deg);  animation-delay: calc(var(--kspinner-speed) * -0.8333); }
.kspinner i:nth-child(4)  { transform: rotate(90deg);  animation-delay: calc(var(--kspinner-speed) * -0.75); }
.kspinner i:nth-child(5)  { transform: rotate(120deg); animation-delay: calc(var(--kspinner-speed) * -0.6667); }
.kspinner i:nth-child(6)  { transform: rotate(150deg); animation-delay: calc(var(--kspinner-speed) * -0.5833); }
.kspinner i:nth-child(7)  { transform: rotate(180deg); animation-delay: calc(var(--kspinner-speed) * -0.5); }
.kspinner i:nth-child(8)  { transform: rotate(210deg); animation-delay: calc(var(--kspinner-speed) * -0.4167); }
.kspinner i:nth-child(9)  { transform: rotate(240deg); animation-delay: calc(var(--kspinner-speed) * -0.3333); }
.kspinner i:nth-child(10) { transform: rotate(270deg); animation-delay: calc(var(--kspinner-speed) * -0.25); }
.kspinner i:nth-child(11) { transform: rotate(300deg); animation-delay: calc(var(--kspinner-speed) * -0.1667); }
.kspinner i:nth-child(12) { transform: rotate(330deg); animation-delay: calc(var(--kspinner-speed) * -0.0833); }

@keyframes kspinner-fade {
  0%   { opacity: 1; }
  100% { opacity: 0.1; }
}

body.dark .kspinner { --kspinner-color: #e0e0e0; }

@media (prefers-reduced-motion: reduce) {
  .kspinner i { animation: none; opacity: 0.28; }
}