/* Password checklist + strength meter (includes/security.php password_rules_html + assets/password.js),
   the "What is 12 + 7?" check, and the sign-in / set-password / reset pages. */

.pw-help{margin:8px 0 14px; font-size:13px;}
.pw-strength{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.pw-track{flex:1; height:6px; border-radius:99px; background:var(--surface-2); overflow:hidden;}
.pw-track i{display:block; width:0; height:100%; border-radius:99px; background:var(--attention); transition:width .25s ease, background-color .25s ease;}
.pw-help[data-level="1"] .pw-track i{width:25%; background:var(--attention);}
.pw-help[data-level="2"] .pw-track i{width:50%; background:var(--amber, #B7791F);}
.pw-help[data-level="3"] .pw-track i{width:75%; background:var(--success);}
.pw-help[data-level="4"] .pw-track i{width:100%; background:var(--success);}
.pw-label{min-width:112px; text-align:right; font-weight:600; color:var(--text-secondary);}
.pw-help[data-level="1"] .pw-label{color:var(--attention);}
.pw-help[data-level="2"] .pw-label{color:var(--amber, #B7791F);}
.pw-help[data-level="3"] .pw-label, .pw-help[data-level="4"] .pw-label{color:var(--success);}
.pw-rules{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:4px 14px;}
.pw-rules li{display:flex; align-items:center; gap:8px; color:var(--text-secondary); line-height:1.4;}
.pw-tick{flex:none; width:16px; height:16px; border:1.5px solid var(--border-strong); border-radius:50%; position:relative; transition:background-color .15s, border-color .15s;}
.pw-rules li.ok{color:var(--text);}
.pw-rules li.ok .pw-tick{background:var(--success); border-color:var(--success);}
.pw-rules li.ok .pw-tick::after{content:""; position:absolute; left:4.5px; top:1.5px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}
.pw-match{margin:6px 0 0; font-size:13px; min-height:0;}
.pw-match:empty{display:none;}
.pw-match.ok{color:var(--success);}
.pw-match.bad{color:var(--attention);}
.pw-help.shake{animation:pwShake .35s ease;}
@keyframes pwShake{0%,100%{transform:none;} 25%{transform:translateX(-5px);} 75%{transform:translateX(5px);}}
@media (prefers-reduced-motion: reduce){.pw-help.shake{animation:none;}}

/* "What is 12 + 7?" */
.math-check{margin:4px 0 14px; padding:12px 14px; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface-2);}
.math-check label{display:block; margin-bottom:6px; font-weight:600; font-size:14px;}
.math-check input{width:100%; max-width:140px; font-size:16px;}
.math-check small{display:block; margin-top:6px; font-size:12px; color:var(--text-muted);}
.math-check.invalid{border-color:var(--attention); background:var(--attention-soft);}
.math-check .field-error{margin-top:6px; font-size:13px; color:var(--attention); font-weight:500;}

/* Sign-in, set-password, forgot and reset pages */
.forgot-link{margin:-6px 0 12px; text-align:right; font-size:13px;}
.forgot-link a{color:var(--accent); text-decoration:none; font-weight:500;}
.forgot-link a:hover{text-decoration:underline;}
.auth-box{max-width:460px;}
.auth-box .lead{margin:-8px 0 18px; color:var(--text-secondary); font-size:14px; line-height:1.55;}
.auth-box .field input{width:100%;}
.auth-box .back-to{margin:16px 0 0; text-align:center; font-size:14px;}
.auth-box .back-to a{color:var(--accent); font-weight:500;}
.login-callout.green{border-color:var(--success); background:var(--success-soft); color:var(--text);}