/* password-field.css — the password composite shared by the auth screens and the account
   menu's change-password dialog: .pw (input + Show/Hide), .meter, .reqs, .pw-err, .auth-sr.
   Moved out of auth.css (2026-09-20), declarations unchanged; the only new rule is .pw-err
   (the error line PasswordField renders — same declarations as auth.css's .auth-err).
   Controls (.btn/.input/.field-label) come from components.css. */
.pw{display:flex;align-items:center;gap:6px;height:32px;padding:0 4px 0 10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm)}
.pw:focus-within{border-color:var(--accent)}
.pw input{flex:1;min-width:0;background:transparent;border:0;outline:0;font:inherit;font-size:13px;color:var(--text)}
.pw input::placeholder{color:var(--text-muted)}
.pw button{height:24px;padding:0 8px;font:inherit;font-size:11px;font-weight:600;color:var(--text-muted);background:transparent;border:0;border-radius:4px;cursor:pointer}
.pw button:hover{background:var(--bg-hover);color:var(--text)}
.meter{display:flex;gap:4px;margin-top:8px}
.meter i{flex:1;height:4px;border-radius:999px;background:var(--surface-raised)}
.meter i.on{background:var(--amber)}
.meter.strong i.on{background:var(--sage)}
.reqs{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px}
.reqs span{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-muted)}
.reqs span.ok{color:var(--sage)}
.reqs em{font-family:var(--font-mono);font-size:11px;font-style:normal}
/* Invalid .pw composite mirrors .input.invalid so the two controls read as one system. */
.pw.invalid{border-color:var(--danger);background:var(--danger-soft)}
.pw-err{margin-top:6px;font-size:11.5px;line-height:1.4;color:var(--danger)}
/* Visually hidden text for state that the glyph alone conveys (requirement met / not met). */
.auth-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}