/* login.css — full-screen login overlay (spc-1 A6) */
.login-overlay{
  position:fixed;inset:0;z-index:40;display:grid;place-items:center;
  background:var(--bg);padding:20px;overflow:auto;
}
.login-overlay[hidden]{display:none!important}
.login-card{
  width:min(360px,calc(100vw - 40px));background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px 24px;box-shadow:var(--shadow);
}
.login-heading{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.login-heading .brand-mark{display:grid;place-items:center;width:29px;height:29px;background:var(--brand);border-radius:8px;color:var(--on-brand)}
.login-heading .brand-mark svg{width:21px;height:21px;stroke-width:1.6}
.login-heading .brand-name{font-size:18px;font-weight:650;letter-spacing:.01em}
.login-subtitle{color:var(--muted);font-size:12px;margin-bottom:18px}
.login-form{display:grid;gap:12px}
.login-field{display:grid;gap:4px}
.login-field>span{font-size:12px;color:var(--muted)}
.login-field input{padding:8px 10px;min-width:0}
.login-error{margin-top:2px;min-height:0}
.login-error:empty{display:none}
.login-card button[type=submit]{width:100%;margin-top:4px}
@media(pointer:coarse){
  .login-card{padding:24px 20px 20px}
  .login-field input{min-height:44px;font-size:16px}
  .login-card button[type=submit]{min-height:44px}
}
@media(max-width:355px){
  .login-card{padding:20px 16px 18px}
  .login-heading .brand-name{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.login-overlay,.login-card{transition:none!important}}