/* utilities.css — single-purpose helpers. Highest layer, so they win over
   component rules when applied. Keep this list small and intentional. */

@layer utilities {
  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 1.5rem;
  }
  .container.narrow { max-width: 44rem; }
  .container.wide { max-width: 80rem; }

  [x-cloak] { display: none !important; }

  .muted { color: var(--text-muted); }
  .mono { font-family: var(--font-mono); }
  .center { text-align: center; }
  .nowrap { white-space: nowrap; }
  .num { text-align: right; font-variant-numeric: tabular-nums; }

  .stack-sm { display: grid; gap: 0.5rem; }
  .stack-md { display: grid; gap: 1rem; }
  .stack-lg { display: grid; gap: 1.5rem; }

  .mt-0 { margin-top: 0; }
  .mt-1 { margin-top: 0.5rem; }
  .mt-2 { margin-top: 1rem; }
  .mt-3 { margin-top: 1.5rem; }
  .mt-4 { margin-top: 2rem; }
  .mb-0 { margin-bottom: 0; }

  .flex { display: flex; gap: 1rem; align-items: center; }
  .flex-between { display: flex; gap: 1rem; align-items: center; justify-content: space-between; }
  .flex-wrap { flex-wrap: wrap; }
  .grow { flex: 1; }

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

  .skip-link {
    position: absolute;
    left: 0.75rem;
    top: -3rem;
    z-index: 100;
    background: var(--surface);
    color: var(--text);
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: top 120ms ease;
  }
  .skip-link:focus { top: 0.75rem; }
}