/* ==========================================================================
   Utilities: small, single-purpose helpers. Keep this list short; prefer a
   component or composition primitive (.stack, .cluster, .grid) instead.
   ========================================================================== */

.text-muted   { color: var(--color-text-muted); }
.text-danger  { color: var(--color-danger-text); }
.text-success { color: var(--color-success-text); }
.text-xs      { font-size: var(--text-xs); }
.text-sm      { font-size: var(--text-sm); }
.text-lg      { font-size: var(--text-lg); }
.text-center  { text-align: center; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip link: hidden until focused by keyboard. */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: var(--weight-semibold);
}

.skip-link:focus {
  top: var(--space-2);
}

/* Constrains reading width without extra padding (use inside .container). */
.measure {
  max-width: var(--container-narrow);
  margin-inline: auto;
}

/* Keeps the line breaks people typed (e.g. a report message), wrapping long lines. */
.pre-wrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}