/*
 * Omnx Flow — sign-in page (login.css).
 *
 * LAYOUT ONLY: a centred card on the app's own surface. Every colour, radius,
 * spacing and shadow is a token from tokens.css — no literals live here.
 */

.login-page {
  /* 100dvh, not 100vh: on a phone browser 100vh is the LARGE viewport (URL bar
     hidden), so a 100vh frame is taller than what the person can see. The vh
     line stays first as the fallback for a browser without dvh. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--spacing-lg) + var(--safe-top))
           calc(var(--spacing-lg) + var(--safe-right))
           calc(var(--spacing-lg) + var(--safe-bottom))
           calc(var(--spacing-lg) + var(--safe-left));
  background: var(--surface-well);
}

.login-card {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-xl);
  background: var(--surface-panel);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--md-sys-elevation-3);
}

/* .login-brand is in base.css — Onboarding wears the same lockup and does not
   load this sheet. */

.login-title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--text-primary);
}

.login-sub {
  margin: var(--spacing-xs) 0 var(--spacing-lg);
  font-size: var(--text-md);
  color: var(--text-muted-2);
}

.login-card .form-label {
  margin-top: var(--spacing-sm);
}

.login-card .primary-button {
  margin-top: var(--spacing-lg);
  justify-content: center;
}

.login-error {
  margin: var(--spacing-md) 0 0;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-xs);
  background: var(--status-danger-bg);
  border: 1px solid var(--status-danger-border);
  color: var(--status-danger);
  font-size: var(--text-md);
}

/* ---------------------------------------------------------------------------
 * Passwordless states: "check your email", the magic-link landing spinner, and
 * the break-glass divider.
 * --------------------------------------------------------------------------- */
.login-sent-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--spacing-md);
  border-radius: 50%;
  background: var(--accent-tint-12);
}
.login-sent-icon .material-symbols-outlined {
  font-size: var(--text-4xl);
  color: var(--primary);
}

.login-spinner {
  width: 36px;
  height: 36px;
  margin: var(--spacing-md) auto var(--spacing-lg);
  border: 3px solid var(--accent-tint-20);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: login-spin var(--duration-loop) linear infinite;
}
@keyframes login-spin { to { transform: rotate(360deg); } }

/* Respect a stated preference for reduced motion — a spinner is decoration,
   and the text already says what is happening. */
@media (prefers-reduced-motion: reduce) {
  .login-spinner { animation: none; }
}

.login-divider {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: var(--spacing-lg) 0 var(--spacing-sm);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.login-foot {
  margin: var(--spacing-lg) 0 0;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
}