/*
 * 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; strong heading-weight text. */
  .muted    { color: var(--color-text-body); }
  .strong   { font-weight: 600; color: var(--color-text-heading); }

  /* 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;
  }
}