/*
 * spinner.css — THE ONE SPINNER.
 *
 * Brad, 2026-09-14: one spinner, one orange, everywhere — tiles, modals, the
 * frame viewer, Edit page loads. There were 27 private spinners in five colours.
 *
 * Every loading and busy spinner in the app is this element: a faint ring with
 * the brand-orange arc turning on it. Size it by the room it sits in —
 * app-spinner-xs / -s / -m / -l — never by a private width, colour or keyframes
 * of its own. Inside a button it takes the button's text colour, because an
 * orange arc on an orange button is invisible.
 *
 * SELF-CONTAINED, so a page can have it by linking this one sheet. Its colour
 * and sizes live here, not in tokens.css: a viewer test page that carries no
 * tokens still gets a whole spinner. The arc is the brand token by name, with
 * the brand's own value for a page that has no tokens.
 */
:root {
    --spinner-arc:     var(--brand-primary, #ff9800);
    --spinner-track:   rgba(255, 255, 255, 0.2);
    --spinner-speed:   0.8s;
    --spinner-size-xs: 12px;
    --spinner-size-s:  16px;
    --spinner-size-m:  24px;
    --spinner-size-l:  40px;
}
/* The ring on a light ground. */
[data-theme="light"], [data-theme="sepia"] { --spinner-track: rgba(0, 0, 0, 0.15); }

.app-spinner {
    --spinner-size: var(--spinner-size-m);
    --spinner-ring: 3px;
    display: inline-block;
    flex-shrink: 0;
    box-sizing: border-box;
    width: var(--spinner-size);
    height: var(--spinner-size);
    border: var(--spinner-ring) solid var(--spinner-track);
    border-top-color: var(--spinner-arc);
    border-radius: 50%;
    vertical-align: middle;
    animation: app-spinner-turn var(--spinner-speed) linear infinite;
}
.app-spinner-xs { --spinner-size: var(--spinner-size-xs); --spinner-ring: 2px; }
.app-spinner-s  { --spinner-size: var(--spinner-size-s);  --spinner-ring: 2px; }
.app-spinner-m  { --spinner-size: var(--spinner-size-m);  --spinner-ring: 3px; }
.app-spinner-l  { --spinner-size: var(--spinner-size-l);  --spinner-ring: 4px; }
.app-spinner-on-button {
    --spinner-arc: currentColor;
    --spinner-track: color-mix(in srgb, currentColor 30%, transparent);
}
@keyframes app-spinner-turn { to { transform: rotate(360deg); } }
/* Still turning for someone who asked for less motion — a spinner that stops
 * reads as stuck — but slowly. */
@media (prefers-reduced-motion: reduce) {
    .app-spinner { animation-duration: 2.4s; }
}