/*
 * Utilities — single-purpose helpers. Layered last so they win ties
 * against components, but kept few: reach for a component first.
 */

@layer utilities {
  .text-right  { text-align: right; }
  .text-center { text-align: center; }

  /* Muted body text — the body SIZE as well as the quiet colour (slice 101c, CEO: muted
     body text reads at the chart's size), so a muted tail inside a heading does not
     inherit the heading's size. Strong: heading-weight text. */
  .muted    { color: var(--color-text-body); font-size: var(--text-xs); }
  .strong   { font-weight: 600; color: var(--color-text-heading); }

  /* A quiet loading spinner — inline-block so a text-center parent centers it. */
  .spinner {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--color-indigo-50);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spinner-turn 0.9s linear infinite;
  }

  @keyframes spinner-turn {
    to { transform: rotate(360deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .spinner { animation: none; }
  }

  /* A small status icon inline in a table cell — coloured by state. */
  .icon-status          { width: 1.15rem; height: 1.15rem; vertical-align: middle; }
  .icon-status--danger  { color: var(--color-danger); }
  .icon-status--success { color: var(--color-success); }

  /* Vertical rhythm — even spacing between stacked children without
     per-element margins. `--stack` overrides the gap locally. */
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack, var(--space-4));
  }

  /* Horizontal group — inline items with a gap (button rows, chips). */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster, var(--space-2));
  }

  .cluster--between { justify-content: space-between; }

  /* Numbers: right-aligned, tabular figures, no wrap — the accounting
     amount-cell convention. Mirrors the legacy `.numeric` so new code
     has one home for it. */
  .numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
}