/* Login page – uses the tokens and components of app.css (.card, .input, .btn, .form-error). */
.login-page { min-height: 100dvh; display: grid; place-items: center; padding: var(--gutter); }
.login { width: 100%; max-width: 380px; display: grid; gap: 18px; }
.login .brand { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.login-card { display: grid; gap: 14px; padding: 22px; }
.login-card h2 { margin: 0; font-size: 20px; font-weight: 650; }
.login-card label { display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.login-card .input { width: 100%; height: 44px; font-size: 16px; } /* 16px: no zoom on mobile */
.login-card .btn { height: 44px; justify-content: center; font-size: 15px; }
.form-notice { margin: 0; padding: 9px 12px; border-radius: 9px; font-size: 13.5px; color: var(--good-ink); background: color-mix(in srgb, var(--good) 12%, transparent); }
.forgot { font-size: 13px; color: var(--ink-2); }
.forgot summary { cursor: pointer; color: var(--accent-ink); }
.forgot p { margin: 8px 0 0; line-height: 1.45; }
.forgot code { font-size: 12px; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }
.login .foot { text-align: center; font-size: 12px; margin: 0; }
.login-extra { display: grid; gap: 10px; }
.login-extra:empty { display: none; }
.login-extra .btn { height: 44px; justify-content: center; font-size: 15px; width: 100%; }