/* =========================================================================== Shared baseline for the non-studio pages (auth, account, contact, the studio chooser). Studios carry their own equivalents in studio-topbar.css. Loaded early in ; the rules that must win over page-specific inline styles use !important deliberately (noted below). =========================================================================== */ /* iOS Safari auto-zooms (and pans) when a focused input's font-size is under 16px — every auth form here used ~14–15px inputs, producing a jarring jump on iPhone. Force 16px on small screens. !important so per-page inline `.field input { font-size: 0.95rem }` can't re-trigger the zoom. */ @media (max-width: 480px) { input, select, textarea { font-size: 16px !important; } } /* Keyboard focus ring. Previously only text inputs showed focus (via a box-shadow); buttons, links, the show/hide toggle, plan cards, and the billing toggle were invisibly focused (WCAG 2.4.7). :focus-visible keeps it keyboard-only (no ring on mouse click). */ button:focus-visible, a:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible { outline: 2px solid #1e3a8a; outline-offset: 2px; } /* Honor reduced-motion: most of these pages animate card fade-ins, button hovers, the pricing toggle, and modal transitions. Near-instant rather than fully disabled so state changes remain perceivable. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }