/* 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;justify-content:center} /* the logo centred above the card (owner 2026-10-25) */
.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))}

@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 */
}

/* Views added with sign-up (2026-10-25): text, notes and the small text buttons. */
.login-text{margin:0;color:var(--text-1);line-height:1.5}
.login-text.muted{color:var(--text-2)}
.login-form .small{margin:0;line-height:1.5}
.login-note{margin:0;font-size:var(--fs-sm);color:var(--text-1);display:flex;align-items:center;gap:8px}
.login-note::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-dot);flex:none}
.login-extra:empty{display:none}
.login-extra{margin:-16px 0 -8px}
.login-link{background:none;border:0;padding:0;font:inherit;color:var(--text-1);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.login-link:hover{color:var(--accent)}
.login-link:disabled{opacity:.5;cursor:default}
.login-form__title:focus{outline:none}
.login-remember{margin-top:2px}
.login-remember .switch{min-height:0}
/* "Remember me": the app's switch (app.css .switch, not loaded on this page). */
.login .switch{appearance:none;display:inline-flex;align-items:center;gap:10px;padding:4px 0;border:0;background:none;color:var(--text-1);font:inherit;font-size:var(--fs-sm);cursor:pointer;text-align:left}
.login .switch-track{position:relative;flex:none;width:40px;height:24px;border-radius:var(--r-full);background:var(--surface-3);transition:background var(--t-fast)}
.login .switch-track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--knob-off,#fff);box-shadow:var(--shadow-thumb);transition:transform var(--t-fast),background var(--t-fast)}
.login .switch[aria-checked="true"] .switch-track{background:var(--inverse)}
.login .switch[aria-checked="true"] .switch-track::after{transform:translateX(16px);background:var(--inverse-fg)}