/* The sign-in card uses the reader's optical materials and contrast tokens. */
.login-dialog { width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--highlight); border-radius: var(--radius-card); background: var(--glass); color: var(--ink); box-shadow: var(--shadow-lift); backdrop-filter: blur(24px) saturate(1.15); -webkit-backdrop-filter: blur(24px) saturate(1.15); }
.login-dialog::backdrop { background: rgb(9 18 30 / .35); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
:root[data-login-open] { overflow: hidden; }
.login-toolbar { display: flex; justify-content: flex-end; padding: 12px 12px 0; }
.login-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--glass-clear); transition: transform var(--spring), background var(--motion); }
.login-close:hover { background: var(--surface); }
.login-close:active, .login-google:active { transform: scale(.97); }
.login-card { padding: 8px 32px 32px; text-align: start; }
.login-mark { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 24px; border: 1px solid var(--highlight); border-radius: 20px; background: var(--accent-soft); color: var(--accent); box-shadow: var(--shadow-button); }
.login-mark .icon { width: 26px; height: 26px; }
.login-card .eyebrow { margin-bottom: 12px; color: var(--muted); font-size: 12px; letter-spacing: .035em; }
.login-card h1 { margin: 0; font-size: clamp(28px, 5vw, 36px); line-height: 1.25; letter-spacing: -.04em; text-wrap: balance; }
.login-intro { margin-top: 16px; color: var(--muted); font-size: 16px; }
.login-card form[data-login-form] { margin-top: 28px; }
.login-card .login-google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font: 600 16px/1.5 var(--font-body); box-shadow: var(--shadow-button); transition: transform var(--spring), box-shadow var(--motion); }
.login-google svg { flex: 0 0 auto; }
@media (hover: hover) { .login-google:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); } }
.login-privacy { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.login-privacy .icon { width: 17px; height: 17px; margin-top: 3px; }
.login-read { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 20px; font-size: 14px; text-decoration: none; }
.login-read:hover { text-decoration: underline; }
.login-notice { margin-block: 20px; padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--accent-soft); }
.login-status { padding: 28px 32px 40px; min-height: 180px; }
.login-status p { margin-bottom: 20px; }
.login-status-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.login-identity { margin-top: 20px; color: var(--accent); font-weight: 600; }
.login-actions { display: grid; gap: 12px; margin-top: 24px; }
.login-actions .button { width: 100%; }
.login-card .login-text-button { min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 14px; box-shadow: none; text-decoration: underline; text-underline-offset: 4px; }
.login-logout { margin-top: 12px; }
.account-page.login-page main { width: min(480px, calc(100% - 32px)); padding-block: clamp(24px, 8vh, 80px); }
.account-page.login-page main > .login-card { padding: clamp(24px, 5vw, 40px); background: var(--glass); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.login-page > footer { max-width: 480px; text-align: center; }
@media (max-width: 480px) { .login-card { padding-inline: 24px; } .login-dialog { border-radius: 28px; } }
@media (prefers-reduced-motion: reduce) { .login-close, .login-google { transition: none; } .login-close:active, .login-google:active, .login-google:hover { transform: none; } }
@media (prefers-reduced-transparency: reduce) { .login-dialog, .account-page.login-page main > .login-card { background: var(--surface); backdrop-filter: none; } }
@media (forced-colors: active) { .login-dialog, .login-card .login-google, .login-close, .login-mark { border: 1px solid CanvasText; background: Canvas; color: CanvasText; box-shadow: none; } }