/* login.css — Sign in: one form card on the canvas, wordmark top left, credit at the bottom.
   Standalone page: it does not rely on app.css. */
html,body{margin:0}
.login-body{min-height:100vh;min-height:100dvh;background:var(--canvas);color:var(--text-1);font-family:var(--font-ui);font-size:var(--fs-md);-webkit-font-smoothing:antialiased}
.login{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:calc(24px + var(--safe-top)) 32px 0;box-sizing:border-box}
.login__top{height:44px;display:flex;align-items:center}
.login__top .h4{font-family:var(--font-display);font-weight:400;font-size:var(--fs-card);letter-spacing:-.02em;line-height:1}
.login__center{flex:1;display:grid;place-items:center;padding:24px 0 8px}
.login-form{width:440px;max-width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:28px;padding:40px}
.login-form__head{display:flex;flex-direction:column;gap:8px}
.login-form__head p{margin:0}
.login-form__title{margin:0;font-family:var(--font-display);font-weight:300;font-size:var(--fs-page);letter-spacing:-.025em;line-height:1}
.login-form__fields{display:flex;flex-direction:column;gap:16px}
.login-form__fields .field{display:flex;flex-direction:column;gap:8px}
.login-form__fields .input{height:50px;width:100%;box-sizing:border-box}
.login-form .btn--block{height:52px;font-size:var(--fs-lg)}
.login-form__foot{text-align:center;margin:-12px 0 0}
.login-forgot{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.login-pass{position:relative}
.login-pass .input{padding-right:48px}
.login-pass__eye{position:absolute;right:9px;top:50%;transform:translateY(-50%)}
.login .field__hint{margin:0}
.login-error{margin:-12px 0 -8px;color:var(--danger);font-size:var(--fs-sm)}
.login-error:empty{display:none}
.login .credit{height:auto;padding:12px 0 calc(16px + var(--safe-bottom))}
/* the focus login.js gives Username when the page opens: no ring until a key is pressed (components.css draws it) */
.login-form .input.is-quiet:focus-visible{outline:none}

@media (max-width:720px){
  .login{padding:calc(16px + var(--safe-top)) 16px 0}
  .login__center{place-items:start stretch;padding:16px 0 8px}
  .login-form{width:auto;padding:28px 22px;gap:24px}
  .login-form__fields .input{font-size:16px} /* no iOS zoom */
}