/* Login layout is independent of dashboard styles; role files own its appearance. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.login-page { height: auto; min-height: 100vh; min-height: 100dvh; }
.login-page .card { max-width: 100%; }
.login-page input, .login-page .field { min-width: 0; max-width: 100%; }

body.login-page { flex-direction: column; gap: 18px; overflow-y: auto; }
.login-page::before, .login-page::after { pointer-events: none; }
.login-page .card { height: auto; flex-shrink: 0; }
.login-page .btn { min-height: 44px; }
.login-page .field input { min-height: 44px; }
.login-page .field input::placeholder { color: #586675; }
.login-feedback { padding: 10px 12px; margin-bottom: 16px; border: 1px solid #f4b4a8; border-radius: 7px; color: #ffd0c7; font-size: 13px; line-height: 1.5; }
.login-feedback ul { padding-left: 18px; margin: 0; }
.login-help { color: var(--mist); margin: 8px 0; font-size: 12px; }
.login-help summary { cursor: pointer; text-decoration: underline; padding: 5px 0; }
.login-help p { line-height: 1.5; }
.login-page .links .signup { color: var(--coral-400); font-weight: 600; }
.login-footer { position: relative; z-index: 2; width: min(550px, 100%); color: var(--steel-300); text-align: center; }
.login-footer summary { font-size: 12px; cursor: pointer; }
.login-footer .policy-links { justify-content: center; font-size: 12px; gap: 8px 16px; padding: 10px 0; }

/* Keep the restored card centered on small screens and allow long errors to wrap. */
.login-page .brand-text { min-width: 0; }
.login-page .login-feedback, .login-page .login-help, .login-page .links { overflow-wrap: anywhere; }
.login-page .login-footer { flex-shrink: 0; }
@media (max-width: 600px) {
    body.login-page:has(> .card) { align-items: center; padding: 24px 16px; }
    .login-page .card { padding: 24px 20px; }
    .login-page .field input { font-size: 16px; }
    .login-page .login-help summary, .login-page .links > a { min-height: 44px; display: block; padding: 12px 0; }
}
@media (max-height: 700px) {
    body.login-page:has(> .card) { align-items: center; justify-content: flex-start; }
}