/* Login conveniences keep native credential inputs in the original form. */
#loginForm .login-password-field { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:end; }
#loginForm .login-password-field>label { min-width:0; }
#loginForm .login-password-field input { width:100%; min-width:0; }
#loginForm .login-reveal { min-width:58px; min-height:44px; white-space:nowrap; }
#loginForm .login-options { display:grid; gap:0; min-width:0; }
#loginForm .login-option { display:flex; flex-direction:row; align-items:center; gap:8px; min-height:28px; line-height:1.4; font-size:13px; }
#loginForm .login-option input { flex:0 0 auto; width:18px; height:18px; margin:0; }
#loginForm .login-option span { min-width:0; overflow-wrap:anywhere; }
#login .login-manager-help,#loginForm .login-preference-status { margin:0 0 4px; font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
#loginForm .login-preference-status:empty { display:none; }
#login .login-help { color:var(--muted); font-size:12px; }
#login .login-help summary { padding:4px 0; min-height:28px; cursor:pointer; color:var(--blue); }
#login .login-help p { margin:0 0 8px; line-height:1.6; }
.login-password-help form,.login-reset-panel form { display:grid; gap:10px; margin-top:10px; }
.login-password-help label,.login-reset-panel label { display:grid; gap:6px; }
.login-password-help input,.login-reset-panel input { width:100%; min-width:0; }
.login-password-help>p { margin-top:10px; }
.login-reset-panel h2 { margin:12px 0 8px; font-size:20px; }
.login-reset-panel>button { margin-top:10px; }
.login-recovery-status { min-height:20px; margin:0; color:var(--muted); font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.login-recovery-status:empty { display:none; }
@media (max-width:760px) {
  #loginForm input[name="username"],#loginForm input[name="password"],.login-password-help input,.login-reset-panel input { min-height:44px; font-size:16px; }
  .login-card { padding:24px 20px; }
}

/* Responsive slider; the server, not pointer events, decides verification. */
#loginChallenge{margin:0;border:1px solid #d9e2ef;padding:8px;border-radius:10px;background:#f8fafc}
.login-puzzle{position:relative;width:min(224px,100%);aspect-ratio:320/144;overflow:hidden;border-radius:6px;margin:0 auto 4px;user-select:none}
.login-puzzle .puzzle-background{display:block;width:100%;height:100%}.login-puzzle .puzzle-piece{position:absolute;left:0;height:auto;filter:drop-shadow(0 1px 3px #20324799)}
#loginSlider{width:100%;height:36px;padding:0;accent-color:#176c62;touch-action:pan-y;cursor:ew-resize}
#loginSlider::-webkit-slider-thumb{width:30px;height:30px}
.login-puzzle-actions{display:flex;gap:8px}.login-puzzle-actions button{flex:1;min-height:32px;padding:5px 10px}
#loginPuzzleStatus{font-size:12px;line-height:1.5;margin:4px 0 0}.verified #loginPuzzleStatus{color:#126c4d}
#login .login-card{width:min(440px,100%);padding:16px 24px}
#login .brand{margin-bottom:14px}
#loginForm{gap:8px}
#loginChallenge>label{font-size:12px}
#login .login-password-help{margin-top:0;font-size:12px}
#login .login-password-help>summary{padding:4px 0;min-height:28px}
#login .login-help-footer{display:flex;flex-wrap:wrap;gap:0 12px;margin-top:8px}
#login .login-help-footer>details{max-width:100%}
#login .login-help-footer>details[open]{flex-basis:100%}
#login .error:empty{display:none}
@media(max-width:760px){
  #login{padding:12px}
  #login .login-card{padding:16px}
  #loginForm .login-option{min-height:44px}
  #loginSlider,.login-puzzle-actions button{min-height:44px}
  #login .login-help summary,#login .login-password-help>summary{min-height:44px;padding:12px 0}
}