/* public/css/login.css — the gate. One card, centred, readable on a phone with one thumb. */
.login-body {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: var(--canvas);
}
.login-card {
  width: min(100%, 420px);
  background: var(--paper);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-5);
}
.login-brand { display: flex; align-items: center; gap: var(--space-3); }
.login-mark {
  inline-size: 44px; block-size: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--brand); color: var(--on-brand);
}
.login-card h1 { font-size: 21px; font-weight: 800; letter-spacing: -.012em; }
.login-sub { font-size: 13.5px; color: var(--soft-text); }
.login-form { display: grid; gap: var(--space-4); }
.login-form .input { font-size: 17px; /* 17px keeps iOS from zooming the page on focus */ min-height: 48px; }
.btn-block { width: 100%; min-height: 48px; justify-content: center; }
.login-error {
  margin: 0; padding: var(--space-3) var(--space-4);
  background: var(--bad-bg); color: var(--bad-ink);
  border-radius: var(--radius-md); font-size: 14.5px; font-weight: 600;
}
.login-error[hidden] { display: none; }
.login-note { font-size: 13px; color: var(--soft-text); line-height: 1.5; }
@media (max-width: 480px) {
  .login-card { box-shadow: none; background: transparent; padding: var(--space-4); }
}