/* ══════════════════════════════════════════════════════════════════════════
   Login (UI-Redesign, 2026-10-22) — one centered column on the canvas:
   logo, title, claim, labelled fields, primary action, Google as the
   alternative. The Google "G" keeps its brand colors (DESIGN.md
   exception, inline in index.html). Tokens only.
   ══════════════════════════════════════════════════════════════════════════ */

#login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--s-8) var(--s-4);
  background: var(--color-bg-canvas);
  overflow-y: auto;
}
.login-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  width: 100%;
  max-width: calc(var(--modal-w-sm) - var(--s-10));
  animation: rise-in var(--dur-base) var(--ease-out);
}
.login-brand { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center; }
.login-logo { width: var(--s-12); height: var(--s-12); object-fit: contain; margin-bottom: var(--s-2); }
.login-title { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); letter-spacing: -0.02em; color: var(--color-text-primary); }
.login-claim { color: var(--color-text-secondary); }

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--color-bg-raised);
  border: var(--bw) solid var(--color-border);
  border-radius: var(--r-lg);
}
.login-form .input { height: var(--control-h-lg); font-size: var(--fs-md); }
#login-error { min-height: var(--s-4); margin: calc(var(--s-2) * -1) 0; font-size: var(--fs-xs); color: var(--color-danger-text); }
#login-error:empty { min-height: 0; margin: 0; }

.login-divider {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--color-text-tertiary);
}
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: var(--bw); background: var(--color-border-subtle); }
.login-google svg { width: var(--icon-md); height: var(--icon-md); }
.login-foot { text-align: center; font-size: var(--fs-xs); color: var(--color-text-tertiary); }