/* /login: one card on the page background. Tokens and type come from .v2 (site.css). */
.login{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:20px var(--padx) 24px}
/* logo + card travel as one centred stack; the logo matches the site nav's size */
.login-stack{width:100%;max-width:440px;margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:28px;padding:24px 0}
.login-logo{display:block}
.login-logo img{display:block;height:44px;width:auto}
.login-card{width:100%;padding:36px 24px 32px;border:1px solid var(--faint);display:flex;flex-direction:column;gap:18px}
.login h1{font-weight:700;font-size:34px;line-height:1.05;letter-spacing:-.04em;margin:0}
.login-form{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.login-form label{font:500 12px/1.2 "Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mid)}
.login-form input{width:100%;min-height:52px;padding:0 14px;margin:0 0 6px;border:1.5px solid var(--dot);border-radius:0;background:var(--bg);color:var(--ink);font:inherit;font-size:16px;-webkit-appearance:none;appearance:none;transition:border-color .2s}
.login-form input::placeholder{color:var(--dot)}
.login-form input:focus{outline:none;border-color:var(--ink)}
.login-form[data-state="invalid"] input{border-color:var(--red)}
.login-form .btn{width:100%;min-height:52px;font-size:16px;cursor:pointer}
.login .login-msg{display:none;margin-top:6px;padding:12px 14px;border-left:3px solid var(--red);background:var(--panel);font-size:14px;line-height:1.5;color:var(--ink)}
.login-form[data-state] .login-msg{display:block}
.login-help{font-size:14px;line-height:1.5;color:var(--mid)}
.login-help a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.login-help a:hover{color:var(--red)}
.login-foot{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding-top:40px;font-size:13px;color:var(--mid)}
.login-foot nav{display:flex;gap:18px}
.login-foot a{color:var(--mid);text-decoration:none;transition:color .2s}
.login-foot a:hover{color:var(--ink)}
@container (min-width:601px){
  .login-card{padding:48px 44px 40px}
  .login h1{font-size:40px}
  .login-stack{gap:36px}
  .login-logo img{height:56px}
}