/*
 * Sign-in page — the app's LoginScreen on the web.
 *
 * Only layout lives here: the paper, the pills, the ink button and every colour
 * come from ui.css, so the login and the console can never drift apart. The one
 * decision worth writing down: the column is 440px because that is a phone screen
 * with its gutters, which is the width the app's own layout was drawn for.
 */

[hidden] { display: none !important; }

body.login {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.login-col {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 32px 16px 36px;
  display: flex;
  flex-direction: column;
  gap: var(--s-xl);
}

/* ── wordmark, top-left of the column ─────────────────────────────────────── */

.wordmark-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
}

.wordmark-row .mark { width: 30px; height: 30px; flex: none; }

.wordmark {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.4px;
  color: var(--text-hi);
}

/* ── the paper hero ───────────────────────────────────────────────────────── */

/* side room so the two fanned sheets are not clipped by the column */
.hero-wrap { padding: var(--s-xs) 6px var(--s-sm); }

.login-hero {
  min-height: 196px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-hero .display { margin-top: 10px; }
.login-hero .body { margin-top: var(--s-md); }

/* ── form ─────────────────────────────────────────────────────────────────── */

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-lg);
}

.form-error {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 0 var(--s-md);
  color: var(--danger);
  font: 400 14.5px/19px var(--font-sans);
  text-align: center;
}

.form-error svg { width: 14px; height: 14px; flex: none; margin-top: 3px; }

#submit { margin-top: var(--s-xs); }

/* ── Google ───────────────────────────────────────────────────────────────── */

.google-signin {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
}

.google-slot { position: relative; }

/* Google draws a stand-in button, then the real one in an iframe beneath it, and
   drops the stand-in only once the iframe loads: one button tall and clipped, so
   a slow load never shows two. */
.google-box {
  height: 44px;
  overflow-y: clip;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  color: var(--text-low);
}

.google-box > .spinner { margin-top: 13px; }

.google-busy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-sm);
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--text-mid);
  font: 400 14.5px/19px var(--font-sans);
}

.google-busy .spinner { width: 16px; height: 16px; }
.google-off { text-align: center; }

.email-link {
  appearance: none;
  border: 0;
  background: none;
  padding: var(--s-xs);
  cursor: pointer;
  color: var(--text-mid);
  font: 400 14.5px/19px var(--font-sans);
  text-align: center;
}

.email-link span { color: var(--text-hi); font-weight: 700; }
.email-link:hover span { text-decoration: underline; text-underline-offset: 3px; }

.or-rule {
  display: flex;
  align-items: center;
  gap: var(--s-md);
}

.or-rule::before,
.or-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
#submit .spinner { width: 20px; height: 20px; }

.login-foot {
  margin: 0;
  text-align: center;
  font: 400 13px/18px var(--font-sans);
  color: var(--text-low);
}

@media (max-width: 520px) {
  body.login { align-items: flex-start; }
  .login-col { padding: 24px 16px 32px; gap: var(--s-lg); }
}