/* ============================================================
   Auth pages (Login, Verify, Logout) section styles
   Source: NYC-Cupola/designs/auth-login/index.html + auth-verify/index.html
   Mirror these files from the design source — do not edit in place
   without updating the source first.
   ============================================================ */

/* Override site.css v1 heading color for v2 ink within <main>. */
main h1, main h2, main h3, main h4, main h5, main h6 {
  color: var(--ink-primary);
}

/* ---- Auth Login: two-column shell ---- */
.auth-shell {
  min-height: calc(100vh - 56px - 64px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}
@media (max-width: 880px) { .auth-shell { grid-template-columns: 1fr; min-height: auto; } }

.auth-plate {
  position: relative;
  overflow: hidden;
  padding: var(--space-9) var(--container-px);
  min-height: 520px;
  display: flex; flex-direction: column; justify-content: space-between;
}
/* On mobile (where the two-column shell stacks) the auth-plate sizes to its
   natural content height, so `space-between` has no extra space to push the
   caption-wrap away from the title — the "How sign in works" eyebrow ends
   up jammed against the h2. Switch to flex-start + an explicit gap below the
   breakpoint so the spacing is predictable. */
@media (max-width: 880px) {
  .auth-plate {
    min-height: auto;
    justify-content: flex-start;
    gap: var(--space-9);
  }
}
.auth-plate .bg-photo {
  background-image: url('/imgs/production/c10.jpg');
  opacity: 0.95;
}
.auth-plate .bg-photo-veil {
  background: linear-gradient(180deg, oklch(13% 0.025 268 / 0.45) 0%, oklch(13% 0.025 268 / 0.85) 100%);
}
.auth-plate__inner { position: relative; z-index: 2; }
.auth-plate__caption-wrap { position: relative; z-index: 2; }
.auth-plate__eyebrow {
  /* tightens .hero-eyebrow margin above the caption */
  margin-bottom: var(--space-3);
}
.auth-plate__caption {
  max-width: 36ch;
  margin: 0;
  font-family: var(--serif-quote);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink-primary);
}

.auth-panel {
  padding: var(--space-9) var(--container-px);
  background: var(--surface-base);
  display: flex; align-items: center;
}
.auth-panel__inner { width: 100%; max-width: 440px; margin: 0 auto; }
.auth-panel__logo {
  display: block;
  height: 200px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto var(--space-6);
}
@media (max-width: 768px) {
  .auth-panel__logo { height: 150px; }
}
.auth-panel h1 {
  margin: 0 0 var(--space-3);
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 44px);
  line-height: var(--lh-tight);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.auth-panel__lede {
  margin: 0 0 var(--space-6);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.auth-panel__form { display: grid; gap: var(--space-5); }

/* ---- Inline message cards (success / error) ---- */
.state-card {
  padding: var(--space-5);
  border: 1px solid var(--hairline);
  background: var(--surface-raise);
}
.state-card[data-tone="success"] {
  border-color: var(--gold-soft);
  background: oklch(75% 0.10 85 / 0.05);
}
.state-card[data-tone="error"] {
  border-color: oklch(60% 0.15 25 / 0.4);
  background: oklch(40% 0.15 25 / 0.05);
}
.state-card__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--gold-accent);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.state-card[data-tone="error"] .state-card__label {
  display: inline-block;
  background: oklch(45% 0.18 25);
  color: #ffffff;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 2px;
}
.state-card__title {
  margin: 0 0 6px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink-primary);
}
.state-card__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---- Auth Verify: centered card with progress bar ---- */
.verify-shell {
  min-height: calc(100vh - 56px - 64px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-9) var(--container-px);
  position: relative;
  overflow: hidden;
}
.verify-shell::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 50% 30%, oklch(75% 0.10 85 / 0.06), transparent 60%);
  pointer-events: none;
}
.verify-card {
  position: relative;
  width: 100%; max-width: 540px;
  background: var(--surface-raise);
  border: 1px solid var(--hairline);
  padding: var(--space-9) var(--space-7);
  text-align: center;
}
.verify-card__crest {
  display: block;
  width: 56px; height: 56px;
  margin: 0 auto var(--space-5);
  color: var(--gold-accent);
}
/* Stacked Centre 360 logo used in place of the SVG crest on the
   Sign-in-required and Pending-confirmation cards. Same vertical
   slot, taller because the brand mark needs more presence. */
.verify-card__brand {
  display: block;
  height: 160px;
  width: auto;
  max-width: 100%;
  margin: 0 auto var(--space-5);
  object-fit: contain;
}
@media (max-width: 600px) {
  .verify-card__brand { height: 124px; }
}
.verify-card h1 {
  margin: 0 0 var(--space-3);
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: var(--lh-tight);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.verify-card p {
  margin: 0 auto var(--space-5);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 48ch;
}
.verify-card .divider-gold { margin: var(--space-5) auto; }

.verify-bar {
  margin: var(--space-5) auto;
  height: 3px;
  width: 200px;
  background: var(--hairline);
  position: relative;
  overflow: hidden;
}
.verify-bar::after {
  content: "";
  position: absolute;
  top: 0; left: -40%;
  width: 40%; height: 100%;
  background: var(--gradient-civic-gold);
  animation: verify-loop 1.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes verify-loop {
  0% { left: -40%; }
  100% { left: 110%; }
}

.verify-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--ink-quiet);
  text-transform: uppercase;
}

/* ---- Demo email preview modal (Login) ---- */
.demo-email-shell {
  background: var(--surface-mark);
  border: 1px solid var(--hairline);
}
.demo-email-shell .modal-header {
  background: var(--surface-raise);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-primary);
}
.demo-email-shell .modal-title {
  font-family: var(--serif-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.demo-email-meta {
  background: var(--surface-mark);
  border-bottom: 1px solid var(--hairline);
  padding: var(--space-4);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--ink-soft);
}
.demo-email-meta strong { color: var(--gold-accent); font-weight: 700; }
.demo-email-body { padding: var(--space-6); }