/* GoSEQ's arc spinner, the same as Interchange and the app (Isaac's favourite): the head races ahead, the tail catches up,
   the colour cycles. Markup: <svg class="spinner" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20"/></svg> */
.spinner { width: 18px; height: 18px; flex: none; vertical-align: -3px; animation: spin-rotate 1.4s linear infinite; }
.spinner circle { fill: none; stroke: var(--spin-accent, #ff7a45); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1, 200; stroke-dashoffset: 0;
  animation: spin-dash 1.4s ease-in-out infinite, spin-color 5.6s ease-in-out infinite; }
.spinner.big { width: 44px; height: 44px; }
button .spinner, .btn .spinner { margin-right: 8px; }
button .spinner circle, .btn .spinner circle { stroke: currentColor; animation: spin-dash 1.4s ease-in-out infinite; }
@keyframes spin-rotate { to { transform: rotate(360deg); } }
@keyframes spin-dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124; } }
@keyframes spin-color { 0%, 100% { stroke: var(--spin-accent, #ff7a45); } 25% { stroke: #F0513E; } 50% { stroke: #FFB21E; } 75% { stroke: #B8264A; } }
@media (prefers-reduced-motion: reduce) { .spinner, .spinner circle { animation: none !important; } .spinner circle { stroke-dasharray: 89, 200; stroke-dashoffset: -35; } }