/* Single-purpose helpers. Prefer component and page classes; these cover the leftovers. */
@layer utilities {
  .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;
  }

  .stack { display: flex; flex-direction: column; gap: 16px; }
  .stack--sm { gap: 8px; }
  .stack--lg { gap: 28px; }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .push-right { margin-left: auto; }
  .text-muted { color: var(--color-neutral-700); }
  .text-strong { font-weight: 700; }
  .text-err { color: var(--color-err-text); }
  .text-warn { color: var(--color-warn-text); }
  .text-ok { color: var(--color-accent-2-800); }
  .nowrap { white-space: nowrap; }
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .mono { font-family: var(--font-mono); }

  .overline {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-neutral-700);
  }

  @media (max-width: 767px) {
    .hide-mobile { display: none !important; }
  }
  @media (min-width: 768px) {
    .only-mobile { display: none !important; }
  }
}