/* Sign-in screen: the form, centred. */
.login{min-height:100vh;display:grid;background:var(--paper)}
.login-main{display:grid;place-items:center;padding:32px 20px}
.login-card{width:min(400px,100%)}
.login-card h2{font-size:24px;margin:0 0 4px}
.login-sub{margin:0 0 18px;color:var(--ink-3);font-size:14px}
.login-form{display:flex;flex-direction:column;gap:14px}
.login-form input{padding:10px 12px;font-size:15px}
.login-form input.otp{font-family:var(--mono);font-size:22px;letter-spacing:.3em;text-align:center}
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:44px}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--ink-3);padding:6px 8px;cursor:pointer;border-radius:4px}
.pw-eye:hover,.pw-eye[aria-pressed="true"]{color:var(--accent)}
.caps{font-size:12.5px;color:var(--amber);margin-top:-6px}
.login-err{display:none;background:var(--red-soft);color:var(--red);border-radius:5px;padding:9px 12px;font-size:13.5px}
.login-err.on{display:block}
.login-btn{justify-content:center;padding:11px 14px;font-size:15px;font-weight:600}
.login-btn:disabled{opacity:.7;cursor:progress}
.login-note{background:var(--amber-soft);color:var(--amber);border-radius:5px;padding:9px 12px;font-size:13.5px;margin-bottom:14px}
.login-note.info{background:var(--accent-soft);color:var(--accent)}
.login-help{font-size:12.5px;color:var(--ink-3);margin:18px 0 0}
.login-legal{font-size:12px;color:var(--ink-3);margin-top:18px}
.login-legal a{color:var(--ink-2)}
.login-brand{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.login-brand b{display:block;font-size:16px;line-height:1.25}
.login-brand small{display:block;color:var(--ink-3);font-size:12.5px}