/* ─────────────────────────────────────────────────────────────────────────────
   Auth screens — sign in, invitation, password reset.

   Shared so the four screens cannot drift apart. Everything visual comes from
   zerocam-theme.css; this only handles the centred single-fold layout and the
   few pieces the theme has no class for.
   ──────────────────────────────────────────────────────────────────────────── */

html, body { height: 100%; }

.auth-shell {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
}

.auth-center {
  display: grid;
  place-items: center;
  padding: 24px var(--zc-page-inset) 72px;
}

.auth-panel { width: 100%; max-width: 400px; display: grid; gap: 20px; }

.auth-head h1 {
  margin: 8px 0 0;
  font-family: var(--zc-font-serif);
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.028em;
  line-height: 1;
}

.auth-head p {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--zc-text-muted);
}

.auth-card { display: grid; gap: 14px; }

.auth-submit { width: 100%; margin-top: 2px; }

.auth-links { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-links a { text-decoration: none; }
.auth-links a:hover { color: var(--zc-text); }

/* A hard-edged strip rather than a soft pill, to match the theme. Orange, not
   the lime primary: lime is the colour of every affirmative action on the site,
   so a failure wearing it reads as success for the half-second before it is
   actually read. */
.auth-note {
  border: 2px solid var(--zc-border);
  background: var(--zc-accent);
  color: #fff;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 500;
}
.auth-note--good { background: var(--zc-surface); color: var(--zc-text); }

.auth-hint { font-size: 11.5px; color: var(--zc-text-faint); line-height: 1.4; }

/* app.js's busy() injects this. */
.spinner {
  width: 11px; height: 11px;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-top-color: #000;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
  html, body { height: auto; }
}