/*
 * The whole utility whitelist (DESIGN.md §7): spacing, layout, alignment,
 * visually-hidden. No colour, font or border utilities -- those belong to
 * components. Steps follow the --space-* scale. Add a step when a view needs
 * it, not before.
 */
@layer utilities {
  .mt-0 { margin-block-start: 0; }
  .mt-2 { margin-block-start: var(--space-2); }
  .mt-4 { margin-block-start: var(--space-4); }
  .mt-6 { margin-block-start: var(--space-6); }
  .mt-8 { margin-block-start: var(--space-8); }

  .mb-0 { margin-block-end: 0; }
  .mb-2 { margin-block-end: var(--space-2); }
  .mb-4 { margin-block-end: var(--space-4); }
  .mb-6 { margin-block-end: var(--space-6); }
  .mb-8 { margin-block-end: var(--space-8); }

  .pt-4 { padding-block-start: var(--space-4); }
  .pt-8 { padding-block-start: var(--space-8); }
  .pt-10 { padding-block-start: var(--space-10); }

  .pb-4 { padding-block-end: var(--space-4); }
  .pb-8 { padding-block-end: var(--space-8); }

  .gap-2 { gap: var(--space-2); }
  .gap-4 { gap: var(--space-4); }
  .gap-6 { gap: var(--space-6); }

  .flex { display: flex; flex-wrap: wrap; align-items: center; }
  .grid { display: grid; }
  .ml-auto { margin-inline-start: auto; }

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

  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}