/* =========================================================================
   utilities.css — small, single-purpose helpers. Load LAST.
   ========================================================================= */

/* Visually hidden but available to screen readers (skip-link target labels,
   form hints, "Copied" status text, etc.). The .focusable variant reveals
   on focus — used by the skip link. */
.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.visually-hidden.focusable:focus,
.visually-hidden.focusable:focus-within {
  position: static !important;
  width: auto; height: auto;
  margin: 0; overflow: visible;
  clip: auto; clip-path: none;
  white-space: normal;
}

/* Skip link — first focusable element on every page (1.4.13 / 2.4.1) */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-3);
  inset-block-start: var(--space-3);
  z-index: var(--z-skiplink);
  transform: translateY(-150%);
  transition: transform var(--duration-fast) var(--easing-standard);
  background: var(--bg-elevated);
  color: var(--link);
  border: var(--border-2) solid var(--color-focus);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  text-decoration: underline;
  font-weight: var(--weight-semibold);
}
.skip-link:focus { transform: translateY(0); }

/* Hide content when JS is unavailable / available */
.no-js .js-only { display: none !important; }
.js .no-js-only { display: none !important; }

/* Flow / spacing helpers */
.flow > * + * { margin-block-start: var(--flow, var(--space-4)); }
.u-mt-0 { margin-block-start: 0 !important; }
.u-mb-0 { margin-block-end: 0 !important; }
.u-measure { max-width: var(--measure); }

/* Text helpers */
.u-text-muted { color: var(--text-muted); }
.u-text-sm { font-size: var(--text-sm); }
.u-text-center { text-align: center; }

/* List reset (semantic opt-in already declared in reset, mirrored here) */
.u-list-reset { list-style: none; padding: 0; margin: 0; }

/* Cluster: horizontal group that wraps, good for tag/badge rows + button rows */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap, var(--space-3));
  align-items: var(--cluster-align, center);
}

/* Visually convey "demonstration only" wrappers (used to isolate bad demos) */
.u-demo-region {
  border: var(--border-2) dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--bg-subtle);
}