/* Platform-wide status dot. `.global-status-dot` is the canonical small state
   circle — the one treatment for "this step / person / artifact is in state X",
   wherever a row, card, or timeline needs a colour-only signal.

   It replaced five hand-rolled 14px circles that each re-derived the same
   geometry and re-typed the same status colours: `.pipeline-dot` (payment
   pipeline indicator), `.payments-bill-timeline__dot` (bill drawer timeline),
   `.readiness-dot` (admin bill rows), `.pb-dot` (kanban card milestone dots),
   and `.opportunities-task-group__dot` (task grouping headers).

       <span class="global-status-dot global-status-dot--done"></span>
       <span class="global-status-dot global-status-dot--pending
                    global-status-dot--hollow"></span>
       <span class="global-status-dot global-status-dot--sm"
             style="background: #6366f1"></span>

   Scope: this is the COLOUR-ONLY state marker. It deliberately does NOT cover
     • status pills with words in them — those route through `.global-badge`;
     • notification count bubbles (`.global-sidebar-badge`) — those carry a number;
     • decorative bullets and legend swatches that carry no state.

   The dot is always a perfect circle, so `--radius-pill` (999px) and a raw 50%
   render identically; the token keeps the css-standards ratchet clean. Borders
   are declared on the base as `2px solid transparent` and the box is
   `border-box`, so a hollow dot and a filled dot occupy the exact same 14px. */

/* ── Canonical component ── neutral grey fill at 14px. The border starts
   transparent so a bare dot handed a colour inline (a task group's own swatch)
   reads as one clean circle; every state modifier then sets background AND
   border-color together, so `--hollow` can swap the fill out and leave a ring
   in the state's own colour. */
.global-status-dot {
    display: inline-block;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--ms-pending);
}

/* ── States ── the colours resolve to the shared --ms-* milestone family, so a
   status means the same thing on a kanban card, a payment pipeline, and a bill
   timeline. `--waiting` is the one state outside that family: amber reads
   "blocked on a human" and three of the absorbed clones used it for exactly
   that (bill awaiting approval, worker mid-onboarding, milestone in progress),
   so folding it into --active or --flagged would lose a real distinction. */
.global-status-dot--pending {
    border-color: var(--ms-pending);
    background: var(--ms-pending);
}

.global-status-dot--active {
    border-color: var(--ms-active);
    background: var(--ms-active);
}

.global-status-dot--done {
    border-color: var(--ms-done);
    background: var(--ms-done);
}

.global-status-dot--skipped {
    border-color: var(--ms-skipped);
    background: var(--ms-skipped);
}

.global-status-dot--waiting {
    border-color: var(--color-warning);
    background: var(--color-warning);
}

.global-status-dot--flagged {
    border-color: var(--color-error);
    background: var(--color-error);
}

/* ── --hollow ── keeps the state's ring but empties the fill, for a step not
   reached yet or a signal that is deliberately not live. Combine with a state:
   `--pending --hollow` is the "not started" circle the payment pipeline and the
   bill timeline both draw. */
.global-status-dot--hollow {
    background: var(--color-card-bg);
}

/* ── --soft ── keeps the state's ring but swaps the fill for the state's soft
   tint: started, not finished. `--active --soft` is the step a pipeline is on
   right now — the same current-stage treatment the opportunity stage flow
   draws — and it stays readable with animation off, where a solid current dot
   is indistinguishable from a completed one. */
.global-status-dot--active.global-status-dot--soft {
    background: var(--ms-active-soft);
}

/* ── --ring ── a hairline outside the dot marking it as required / emphasized
   without changing its state colour. An outline (not a shadow) so it costs the
   layout nothing and stays token-clean. */
.global-status-dot--ring {
    outline: 1px solid var(--ink-alpha-20);
    outline-offset: 0;
}

/* ── --sm ── the dense size, for a dot sitting inside a table cell, a compact
   indicator strip, or a group header where 14px crowds the line. The surface
   decides this, not the component. */
.global-status-dot--sm {
    width: 10px;
    height: 10px;
    border-width: 1px;
}