/* Sign-in page: the stage centers the card, the card owns the form. */

.login-stage {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: calc(var(--safe-top) + var(--space-4)) calc(var(--safe-right) + var(--space-3))
    calc(var(--safe-bottom) + var(--space-4)) calc(var(--safe-left) + var(--space-3));
}

.login-card {
  display: grid;
  gap: var(--space-3);
  width: min(100%, 26rem);
  padding: var(--pad-card);
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--r-card);
}

.login-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  font-size: var(--t-xl);
  letter-spacing: -0.02em;
}

.login-error {
  padding: var(--s2) var(--s3);
  border: var(--border) solid color-mix(in srgb, var(--tone-danger) 60%, transparent);
  border-radius: var(--r-ctl);
  font-size: var(--t-s);
}

.login-form {
  display: grid;
  gap: var(--space-3);
}

.login-field {
  display: grid;
  gap: var(--s1);
  color: var(--muted);
  font-size: var(--t-s);
}

.login-form .btn { width: 100%; }