body { min-height: 100vh; display: grid; grid-template-columns: 1fr 1.05fr; } .auth-art { background: oklch(0.155 0.012 280); color: oklch(0.96 0.006 80); /* Top inset: this dark hero is the top element on a stacked phone layout, drawn under the transparent status bar (viewport-fit). */ padding: calc(32px + env(safe-area-inset-top)) 40px 36px; display: flex; flex-direction: column; justify-content: center; gap: 28px; } .auth-art .em-wordmark { color: oklch(0.96 0.006 80); } .auth-art-img { display: flex; justify-content: center; } .auth-art-img img { width: 100%; max-width: 460px; border-radius: var(--radius-lg); display: block; box-shadow: 0 20px 50px oklch(0.1 0.05 290 / 0.5); } .pull-quote { max-width: 460px; } .pull-quote .label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; margin-bottom: 12px; } .pull-quote p { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.3; margin: 0; color: oklch(0.96 0.006 80); } .pull-quote .attribution { font-family: var(--mono); font-size: 11px; margin-top: 12px; opacity: 0.55; } .auth-form-pane { padding: 64px; display: flex; flex-direction: column; justify-content: center; } .auth-form-pane .top-row { position: absolute; top: calc(24px + env(safe-area-inset-top)); right: 24px; } .auth-form { max-width: 360px; width: 100%; margin: 0 auto; } .auth-form h1 { font-size: 48px; margin: 12px 0 8px; } .auth-form .lead { font-size: 14px; color: var(--ink-3); margin: 0 0 32px; } .field { display: block; margin-bottom: 14px; } .auth-error { background: var(--err-bg); color: var(--err); border-radius: var(--radius); padding: 10px 14px; font-size: 13px; margin-bottom: 16px; } .auth-success { background: var(--ok-bg, oklch(0.95 0.06 145)); color: var(--ok, oklch(0.35 0.09 145)); border-radius: var(--radius); padding: 10px 14px; font-size: 13px; margin-bottom: 16px; } .forgot-link { display: block; margin-top: 6px; font-size: 12px; text-align: right; } .forgot-link a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; } .switch { margin-top: 18px; font-size: 13px; color: var(--ink-3); text-align: center; } .switch a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 880px) { body { grid-template-columns: 1fr; } .auth-art { padding: calc(32px + env(safe-area-inset-top)) 24px; gap: 20px; } .auth-art-img img { max-width: 320px; } .auth-form-pane { padding: 40px 24px; } .auth-form h1 { font-size: 36px; } } /* Native shell (post-install): no hero — you're already in the app, so just show the sign-in prompt. The content fits one viewport, so overflow:hidden makes it a single, non-scrolling screen (no elastic bounce/overscroll that revealed nothing — the same pattern the app shell uses on ). Web (desktop and mobile browser) is unchanged. (The earlier "horizontal scroll" here was input auto-zoom — fixed in em.css with the native 16px input rule.) */ html[data-em-native] body { grid-template-columns: 1fr; overflow: hidden; } html[data-em-native] .auth-art { display: none; } /* ---- Classes for former inline styles (CSP style-src 'self') ---- */ /* Hairline separating the form from the switch/legal links. */ .auth-divider { margin-top: 24px; } /* Privacy · Terms fine-print row. .switch.* so it outranks .switch (which sets margin-top:18px / font-size:13px). */ .switch.auth-legal { margin-top: 10px; font-size: 12px; }