/* ============================================================================
   utilities.css — small single-purpose helpers (used sparingly)
   ========================================================================== */

/* Accessibility: visually hidden but readable by screen readers */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Flex / layout helpers */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center{ align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.wrap  { flex-wrap: wrap; }

/* Text helpers */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-balance{ text-wrap: balance; }
.uppercase   { text-transform: uppercase; letter-spacing: var(--tracking-wide); }

/* Spacing helpers (margin-top rhythm) */
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0; }

/* Width helpers */
.w-full    { width: 100%; }
.max-prose { max-width: 68ch; }
.mx-auto   { margin-inline: auto; }

/* Surfaces */
.surface { background: var(--color-surface); }
.subtle  { background: var(--color-bg-subtle); }

/* Responsive visibility (mobile-first) */
.hide            { display: none !important; }
.show-md, .show-lg { display: none; }

@media (min-width: 768px) {
  .hide-md { display: none !important; }
  .show-md { display: initial; }
}
@media (min-width: 1024px) {
  .hide-lg { display: none !important; }
  .show-lg { display: initial; }
}