@layer utilities {
  /* Small, Campfire-style semantic utilities for genuine one-offs.
     Structural layout/spacing lives in component classes; these cover
     the handful of flex/alignment/visibility exceptions.

     NB filename: this file was deliberately named to sort BEFORE the
     old `builds/tailwind.css` during the migration, so Tailwind's
     later-loading responsive variants could win any same-name collision
     while pages were still being migrated. Tailwind has since been
     removed (teardown PR), so these are now the sole definitions of
     these class names and the ordering no longer matters. */

  .flex { display: flex; }
  .flex-column { display: flex; flex-direction: column; }
  .flex-wrap { flex-wrap: wrap; }

  .align-center { align-items: center; }
  .align-start { align-items: flex-start; }

  .justify-center { justify-content: center; }
  .justify-between { justify-content: space-between; }
  .justify-end { justify-content: flex-end; }

  /* Vertical/horizontal rhythm on a flex container. */
  .gap { gap: var(--space-4); }
  .gap-half { gap: var(--space-2); }
  .gap-large { gap: var(--space-6); }
  .gap-xl { gap: var(--space-8); }

  .full-width { width: 100%; }

  .txt-center { text-align: center; }
  .txt-right { text-align: right; }
  .txt-small { font-size: var(--txt-sm); }

  /* Low-level flex glue (Campfire keeps a small set of these for
     one-off layout). Names match the markup they replace. */
  .inline-flex { display: inline-flex; }
  .relative { position: relative; }
  .flex-1 { flex: 1 1 0%; }
  .min-w-0 { min-width: 0; }
  .shrink-0,
  .flex-shrink-0 { flex-shrink: 0; }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mono { font-family: var(--font-mono); }

  .hidden { display: none; }

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

  .hide-on-touch {
    @media (any-hover: none) {
      display: none;
    }
  }
}