/* The round ring (public/round-ring.js), plan 2026-09-30-020 U4.
 * The ONE place its classes become colour. Every surface maps the ring
 * tokens to its own theme or brand tokens (requests.css, practice.css, and
 * the portal's request-view.css); the fallbacks here are theme tokens, never
 * a literal, so an unmapped surface still follows its light/dark theme.
 *   --ring-us      our move, and finished segments
 *   --ring-client  the client's move
 *   --ring-track   segments still ahead
 *   --ring-done    the approved round's fill
 *   --ring-on      the check and text drawn on that fill */
.rr { display: inline-block; flex: none; vertical-align: middle; overflow: visible; }
.rr-seg { fill: none; stroke: var(--ring-track, var(--border-dim, var(--line))); }
.rr-past, .rr-now-us { stroke: var(--ring-us, var(--accent)); }
.rr-now-client { stroke: var(--ring-client, var(--amber)); }
.rr-now-none { stroke: var(--ring-track, var(--border-dim, var(--line))); }
.rr-done { fill: var(--ring-done, var(--ring-us, var(--accent))); }
.rr-check { stroke: var(--ring-on, var(--bg-card, var(--surface))); }
.rr-v { fill: currentColor; font-family: inherit; }
.rr-on { fill: var(--ring-on, var(--bg-card, var(--surface))); }
.rr-sub { fill: currentColor; opacity: .75; }
.rr-sub-client { fill: var(--ring-client-ink, var(--ring-client, var(--amber))); opacity: 1; font-weight: 600; }
/* The ring beside a version label in a journey cell. */
.trj-ring { display: inline-flex; align-items: center; gap: 6px; }
.trj-ring-v { font: 700 11px var(--font-mono, ui-monospace, monospace); color: var(--text-primary, var(--text)); }