/* FPL-001/REQ-046 FR-4 (#3676) -- THE ring: sheet 02's `.spinner` (02-actions.html:232-236), written once. An INTERNAL piece of the layer, not a catalogue row: pages never draw it (use row 87 BusyIndicator, or a
   component's own busy state); layer components draw it through <Ring /> (Frontend/Components/Ui/Ring.razor), the one writer of its markup. Why a global file: component stylesheets are isolated -- Blazor rewrites
   every selector AND every @keyframes name per file -- so a look and an animation shared by many components can only live outside them. Linked in index.html right after tokens.css, because it reads the sheet's tokens.

   It is the sheet's ring exactly: --spinner-size 14, --spinner-stroke 2, --spin-dur 700 ms, a --text-secondary head on a --line track. A component whose ring differs in COLOUR only (Combobox's accent head on a --fill-1
   track; B1's filled intents) overrides the two border colours in its own stylesheet through `::deep .ui-ring` -- nothing else about the ring is configurable, so there is never a second ring. */

/* box-sizing: border-box so the 14 px token is the WHOLE ring (content-box adds the stroke twice: 18 px -- found and fixed three times by hand before this file existed). */
.ui-ring {
    box-sizing: border-box;
    display: inline-block;
    flex: none;
    width: var(--spinner-size);
    height: var(--spinner-size);
    border-radius: var(--radius-pill);
    border: var(--spinner-stroke) solid var(--line);
    border-top-color: var(--text-secondary);
    animation: ui-ring-spin var(--spin-dur) linear infinite;
}

/* The same turn for a GLYPH that rotates (AsOfLine's refresh arc): same keyframes, same duration, same reduced-motion rule. */
.ui-spin {
    animation: ui-ring-spin var(--spin-dur) linear infinite;
}

@keyframes ui-ring-spin {
    to { transform: rotate(360deg); }
}

/* Reduced motion (sheet 02 :411, "the busy ring stays drawn"): it is information, not decoration -- the ring stops with its dark quarter showing. */
@media (prefers-reduced-motion: reduce) {
    .ui-ring,
    .ui-spin {
        animation: none;
    }
}