@layer utilities {
  .sr-only {
    position: fixed;
    border: 0; margin: 0; padding: 0;
    clip-path: rect(0 0 0 0);
    overflow: clip;
    width: 1px; height: 1px;
    /* maintain readability by screen readers */
    white-space: nowrap;
  }

  .flow > * + * {
    margin-block-start: var(--flow-space, 1lh);
  }

  .pile {
    display: grid;
    grid: [pile] 1fr / [pile] 1fr;
    align-items: center;

    & > * {
      grid-area: pile;
    }
  }

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

  .mx-auto {
    margin-inline: auto;
  }

  .max-w-prose {
    max-width: 45ch;
  }

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

  .text-upper {
    text-transform: uppercase;
  }

  .text-sm {
    font-size: 0.75em;
  }

  .mono {
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
  }

  .error-message {
    color: var(--coral);
    font-size: 0.95rem;

    &:empty {
      display: none;
    }
  }
}