@layer components {
  /* The auth screens are a single column of written lines on empty paper —
     no card, no frame; the whitespace is the container. */
  .auth {
    max-inline-size: 24rem;
    margin-inline: auto;
    padding-block-start: max(12vh, var(--block-space-double));
    padding-inline: var(--inline-space-double);
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
  }

  /* Development only: the code that would have arrived by mail, in a quiet
     surface box under the form (bare-lines ruling, HANSHI Deviations). */
  .auth__dev-code {
    display: flex;
    align-items: baseline;
    gap: var(--inline-space);
    padding: var(--block-space-half) var(--inline-space);
    background-color: var(--color-surface);
    border-radius: var(--border-radius);

    code {
      font-size: var(--text-large);
      letter-spacing: 0.2em;
    }
  }
}