/* Email-first sign-in (js/screens/login.js). Shown instead of the app chrome.
   Built on the theme tokens, so every theme (dark and light) works. */
body.is-login #topbar-root,
body.is-login #impersonation-banner { display: none; }
body.is-login { display: block; background: var(--bg); }

.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login-card {
  width: min(400px, 100%); display: flex; flex-direction: column; gap: 8px;
  padding: 28px; border: 1px solid var(--ln); border-radius: var(--r-canvas, 12px);
  background: var(--sf); color: var(--tx);
}
.login-brand { font: 700 20px var(--font-display); letter-spacing: -0.01em; }
.login-brand .plus { color: var(--ac-ink); }
.login-title { margin: 8px 0 0; font: 600 22px var(--font-display); color: var(--tx); }
.login-sub { margin: 0 0 4px; color: var(--tx2); font: 500 var(--fs-md) var(--font-body); }
.login-invite {
  display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 6px; padding: 8px 12px;
  border: 1px solid var(--ok-ln); border-radius: var(--r-md); background: var(--ok-bg);
  color: var(--tx); font: 500 var(--fs-sm)/1.4 var(--font-body);
}
.login-invite svg { flex: none; margin-top: 2px; color: var(--ac-ink); }
.login-label { margin-top: 4px; color: var(--tx2); font: 500 var(--fs-sm) var(--font-body); }
.login-input {
  height: 40px; padding: 0 12px; border-radius: var(--r-md);
  border: 1px solid var(--ln); background: var(--sf2); color: var(--tx);
  font: 500 var(--fs-lg) var(--font-body);
  transition: border-color var(--t-out);
}
.login-input::placeholder { color: var(--tx2); opacity: .85; }
.login-input:hover { border-color: var(--tx2); transition-duration: 0s; }
.login-input:focus-visible { border-color: var(--indigo); }
.login-input[readonly] { opacity: .75; }
/* The error row is always there (two lines tall) so showing it moves nothing. */
.login-error { margin: 0; min-height: 40px; color: var(--red-ink); font: 500 var(--fs-md)/20px var(--font-body); }
.login-go { height: 40px; margin-top: 2px; font-size: var(--fs-md); }
.login-go:disabled { opacity: .7; cursor: progress; }
.login-spin {
  display: inline-block; width: 12px; height: 12px; margin-right: 8px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: login-spin .8s linear infinite;
}
@keyframes login-spin { to { transform: rotate(360deg); } }
.login-dev {
  display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--ln); font: 500 var(--fs-sm) var(--font-body); color: var(--tx2);
}

@media (max-width: 719px) {
  .login { padding: 16px 12px; place-items: start center; padding-top: 10vh; }
  .login-card { padding: 20px; }
  /* 16px stops iOS zooming the page when the field takes focus. */
  .login-input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .login *, .login-input { transition: none !important; }
  .login-spin { animation: none; border-right-color: currentColor; opacity: .6; }
}