/* auth.css — the auth screen. */
/* ── login ── */
.login{max-width:340px;margin:16vh auto;text-align:center;padding:0 20px}
.login .mk{width:52px;height:52px;border-radius:12px;font-size:21px;margin:0 auto 18px}
.login h1{font-size:22px;font-weight:700;margin-bottom:24px}
.login input{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:15px;text-align:center;font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:5px;text-transform:uppercase;outline:none}
.login input:focus{border-color:var(--acc)}
/* The placeholders carry the labels now that the intro paragraph is gone, so
   they have to be readable prose rather than wide-tracked uppercase. */
.login input::placeholder{font-size:14px;letter-spacing:.5px;font-weight:600;text-transform:none;color:var(--faint)}
/* The code field's wide-tracked uppercase treatment suits 4 characters, not a
   password like aa-000-000 — and the two fields must not sit flush. */
.login #pw{margin-top:10px;font-size:16px;letter-spacing:1px;text-transform:none;font-weight:600}
.login button{width:100%;margin-top:12px;background:var(--acc);border:0;color:var(--on-acc);font-weight:700;padding:14px;border-radius:12px;cursor:pointer;font-size:15px}
.login button:disabled{opacity:.5;cursor:default}
.login .msg{margin-top:14px;font-size:12px;color:var(--bad);min-height:18px}
/* The password fields must not inherit the crew-code styling — 5px of letter
   spacing and uppercase on a password field is unreadable and, with
   text-transform, actively misleading about what is being typed. */
.login input[type=password]{font-size:16px;letter-spacing:1px;text-transform:none;font-weight:600}
.login input + input{margin-top:10px}
.login .fine{margin-top:18px;font-size:12px;line-height:1.55;color:var(--faint)}
.login .msg.ok{color:var(--air)}
.jpair{font-family:var(--mono);font-size:38px;font-weight:800;letter-spacing:.3em;text-align:center;
  color:var(--acc-txt);padding:6px 0 10px;direction:ltr}