/* Signed-out family: sign-in, check-your-email, verify result and the
   401 / 403 / 404 / 500 pages.

   Layout only. Buttons, inputs, labels, the eyebrow, notices and pills come
   from pixify-tokens.css, which every page loads first. What lives here is
   placement: the centered card on the warm canvas, the brand lockup at card
   size, the round status glyph, the big error code. Colour comes from the
   tokens; the only raw value is the brand-red shadow under the Pixify mark. */

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

/* ── The centered card (sign-in, check your email, verify result) ─────── */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xl) var(--space-xl);
  background:
    radial-gradient(120% 80% at 50% -8%, var(--bg-warm) 0%, transparent 60%),
    var(--bg);
}
/* The sign-in script swaps cards with the [hidden] attribute; keep hidden hidden. */
.auth-shell [hidden] { display: none !important; }

.auth-card {
  position: relative;
  width: 100%;
  max-width: 432px;
  padding: 40px 40px 34px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-float);
}
/* The card used to carry a whisper-thin forest→mint rule across its top, the
   same gesture as the v5 hero gradient. Jacob took it off on 2026-09-17: the
   signed-out cards are deliberately plain. git history holds it. */

/* ── Brand lockup at card size (the sidebar's is smaller) ─────────────── */
.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.auth-brand .brand-logo {
  width: 46px;
  height: 57.5px;
  border-radius: 11px;
  display: block;
  box-shadow: 0 2px 8px rgba(220, 0, 0, 0.22);
}
.auth-brand .brand-wordmark { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.auth-brand .brand-title { font-family: var(--font-body); font-size: 16px; letter-spacing: -0.01em; color: var(--text); }
.auth-brand .brand-title .pixify { font-weight: 600; }
.auth-brand .brand-title .studio { font-weight: 400; color: var(--text-muted); }

/* ── Card copy ────────────────────────────────────────────────────────── */
.auth-card .eyebrow { margin-bottom: var(--space-md); }
.auth-card h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-3xl);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: var(--space-sm);
}
.auth-card .lead {
  color: var(--text-dim);
  font-size: var(--fs-md);
  line-height: 1.55;
  margin-bottom: var(--space-xl);
}
.auth-card .field { margin-bottom: var(--space-lg); }
.auth-card .notice { margin: 0 0 var(--space-lg); }
.auth-card .btn-block { margin-top: var(--space-xs); }
/* The quiet second action under the primary button: same width, white surface. */
.auth-card .auth-alt { display: flex; margin-top: var(--space-sm); }

/* A quiet mono footnote that closes the card. */
.auth-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-quiet);
}
.auth-foot::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
}

/* ── Message state: check your email, verify result ───────────────────── */
.auth-confirm { text-align: center; }
.auth-confirm .auth-brand { margin-bottom: 22px; }
.auth-confirm .eyebrow { justify-content: center; }
.auth-confirm .lead { margin-bottom: var(--space-xs); }

/* Round status glyph: green for done, red for stopped */
.auth-confirm .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  font-size: 30px;
  line-height: 1;
  color: var(--accent);
  background: var(--accent-light);
  border: 1px solid var(--accent-border);
  box-shadow: var(--shadow-soft);
}
.auth-confirm .icon.icon-red {
  color: var(--red);
  background: var(--red-bg);
  border-color: var(--red-border);
}

.auth-confirm .resend {
  margin-top: var(--space-xl);
  font-size: var(--fs-base);
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}
.auth-confirm .resend a:not(.btn) { color: var(--accent); text-decoration: none; }
.auth-confirm .resend a:not(.btn):hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 480px) {
  .auth-shell { padding: var(--space-2xl) var(--space-lg); }
  .auth-card { padding: 32px 26px 28px; border-radius: 16px; }
  .auth-card h1 { font-size: var(--fs-2xl); }
}

/* ── Error pages: the same family, no card ────────────────────────────── */
.error-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
  color: var(--text-dim);
  background:
    radial-gradient(120% 80% at 50% -8%, var(--bg-warm) 0%, transparent 60%),
    var(--bg);
}
.error-shell .auth-brand { margin-bottom: 30px; }
.error-shell .eyebrow { margin-bottom: var(--space-sm); }
.error-shell .code {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(var(--fs-display) * 2.25);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: var(--space-sm);
}
.error-shell .headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-xl);
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: var(--space-md);
}
.error-shell p {
  font-size: var(--fs-md);
  color: var(--text-dim);
  line-height: 1.55;
  max-width: 380px;
}
.error-shell .reference { margin-top: var(--space-md); font-size: var(--fs-sm); }
.error-shell .actions { margin-top: var(--space-xl); }