Usage

The auth page is a narrow centered wrapper for the login flow. It hosts the passkey and email-link login options and a collapsible recovery section for the fallback recovery key login.

Anatomy

• .auth-page — 22.5rem max-width, centered with --space-xl top margin.
• .auth-error — reserved space for error messages; always rendered to prevent layout shift.
• .auth-alt — muted paragraph used for "or log in with…" alternative affordances.
• .recovery-section — <details> disclosure holding the recovery key form.

States

Default

Error

Notes

• The .auth-error paragraph renders with   in the default state to reserve its 1.2em min-height and prevent a layout shift when an error appears.
• Both demos are shown on a cream (--color-surface-alt) panel to approximate the real page background. In the real app, the auth page sits directly inside .main-background.
• The recovery section is intentionally a <details> disclosure — it should feel like a last-resort escape hatch, not a first-class option.