@layer components {
  /* Auth pages (sign in, sign up, code entry) — a single card centered in the viewport, so the
     short form reads as a focused panel instead of stretching across the content column. */
  .wrapper:has(> .auth) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .auth {
    inline-size: min(100%, 26rem);
    padding: var(--block-space-double);
    background: var(--color-surface-raised);
    border: var(--border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow);
  }
  .auth > h1 { margin-block-end: var(--block-space); font-size: var(--text-x-large); }
  .auth .form-actions { margin-block-start: var(--block-space); }
  .auth .form-actions .btn { inline-size: 100%; justify-content: center; }
  .auth .field-note { margin-block-start: var(--block-space); text-align: center; }
}