/* Utilities — a closed set.
 *
 * These exist so a one-off arrangement inside a component doesn't need its own
 * named block. They are deliberately few and deliberately boring: arrangement,
 * gap, text tone and size, and a handful of odds and ends. Anything that
 * describes what a thing *is* rather than how it sits belongs in a component
 * stylesheet.
 *
 * The list is closed. If you want to add one, that is usually the signal that
 * you are building a component — see COMPONENTS.md before reaching for a new
 * class here.
 *
 * They win over component styles without !important, because @layer utilities
 * is declared last in _global.css. Specificity never enters into it.
 */
@layer utilities {
  /* Arrangement */

  .flex {
    display: flex;
  }

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

  .grid {
    display: grid;
  }

  .wrap {
    flex-wrap: wrap;
  }

  .grow {
    flex: 1;
  }

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

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

  .align-baseline {
    align-items: baseline;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  /* Gap */

  .gap {
    gap: var(--space);
  }

  .gap-quarter {
    gap: var(--space-quarter);
  }

  .gap-half {
    gap: var(--space-half);
  }

  .gap-double {
    gap: var(--space-double);
  }

  /* Text — the class names match the token names, so .text-small is
     var(--text-small) and there is nothing to look up. */

  .text-small {
    font-size: var(--text-small);
  }

  .text-large {
    font-size: var(--text-large);
  }

  .text-bold {
    font-weight: var(--weight-bold);
  }

  .text-soft {
    color: var(--color-ink-soft);
  }

  /* A step quieter than soft, for something that is not information — the dash
     standing where a figure would be. See shared/_unknown, which is the only
     thing that should be reaching for it. */
  .text-faint {
    color: var(--color-ink-faint);
  }

  .text-negative {
    color: var(--color-negative);
  }

  .text-positive {
    color: var(--color-positive-ink);
  }

  .text-center {
    text-align: center;
  }

  /* Odds and ends */

  /* The one attribute selector in here, and it earns its place.
   *
   * `hidden` is a UA-stylesheet declaration, which any component's own `display`
   * beats — so `<div class="form__field" hidden>` stays on the page, because
   * .form__field says `display: grid` and grid wins. That is live today in the
   * confirmation dialog, where the typed-phrase field is rendered hidden and
   * shows anyway; a combobox hiding a chip and a filtered-out option would each
   * have rediscovered it.
   *
   * It sits in this layer because the layer order is the whole mechanism, and
   * here rather than in a component because "the next thing to be hidden" is
   * every component. */
  [hidden] {
    display: none;
  }

  .truncate {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .full-width {
    inline-size: 100%;
  }

  .no-margin {
    margin: 0;
  }

  /* Read by a screen reader, invisible to everyone else. For the label on an
     icon-only button, and for announcing what changed after a Turbo update. */
  .visually-hidden {
    --visually-hidden-size: 1px;

    position: absolute;
    inline-size: var(--visually-hidden-size);
    block-size: var(--visually-hidden-size);
    margin: calc(var(--visually-hidden-size) * -1);
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}