/*
 * SPI auth pages: shared editorial split layout.
 *
 * Left: a deep-teal brand panel that actually sells the membership
 * (headline + proof points + gold foil accents). Right: the form on warm
 * ivory paper, Fraunces display, monospace labels. Used by signup, login, and
 * the other entry pages so the whole front door feels like one place.
 */

:root {
  --teal-950: #072e2e;
  --teal-900: #0a3d3d;
  --teal-800: #0d4f4f;
  --teal-700: #116363;
  --teal-50:  #e8fafa;
  --gold:     #e8a838;
  --gold-200: #f3d08a;
  --ivory:    #faf7f0;
  --ivory-200:#f1ebdd;
  --cream:    #f3ede0;
  --red-50:   #fce8e7;
  --red-700:  #a8342c;
  --green-50: #e6f5ee;
  --green-700:#1f7a52;
  --gray-900: #14201f;
  --gray-700: #2c3a3a;
  --gray-600: #4a5e5e;
  --gray-500: #6a7e7e;
  --gray-400: #8a9e9e;
  --gray-200: #d8dfdf;
  --gray-100: #ebeeee;
  --white:    #ffffff;
  --mono: 'SFMono-Regular', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--gray-700);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.08fr 1fr;
}

/* ── Brand panel (left) ───────────────────────────────────────── */
.auth-brand {
  position: relative;
  background:
    radial-gradient(120% 80% at 12% 0%, #0e4a4a 0%, var(--teal-900) 45%, var(--teal-950) 100%);
  color: var(--cream);
  padding: 56px 60px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* faint blueprint grid + a soft glow, very subtle */
.auth-brand::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 90% at 20% 10%, #000 30%, transparent 80%);
  pointer-events: none;
}
.auth-brand > * { position: relative; z-index: 1; }

.auth-wordmark { display: flex; align-items: center; gap: 13px; text-decoration: none; }
/* A set display (form is flex here) beats the browser's own rule for
   [hidden], so a hidden step would stay on screen without this. */
[hidden] { display: none !important; }
/* The real SPI logo, the same /brand-mark.svg the member nav and marketing
   site load. The "S" in the markup is hidden fallback. */
.auth-glyph {
  width: 46px; height: 46px; flex: 0 0 auto;
  background: url('/brand-mark.svg?v=5') center / contain no-repeat;
  border-radius: 50%; overflow: hidden;
  color: transparent; font-size: 0;
}
.auth-wordmark-text { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600; color: #fff; letter-spacing: -0.1px; line-height: 1.2; max-width: 220px; }

.auth-brand-body { margin-top: auto; padding-top: 48px; }
.auth-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 2.6px;
  text-transform: uppercase; color: var(--gold-200); font-weight: 600;
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px;
}
.auth-eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--gold); display: inline-block; }
.auth-headline {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: clamp(30px, 3.2vw, 44px); line-height: 1.07; letter-spacing: -0.7px;
  color: #fff; margin-bottom: 18px; max-width: 14ch;
}
.auth-headline em { font-style: italic; color: var(--gold-200); }
.auth-lead { font-size: 15.5px; line-height: 1.65; color: rgba(243,237,224,0.78); max-width: 42ch; }

.auth-points { list-style: none; margin: 34px 0 0; display: flex; flex-direction: column; gap: 15px; }
.auth-points li { display: flex; gap: 13px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: rgba(243,237,224,0.92); }
.auth-points svg { flex: 0 0 auto; margin-top: 2px; color: var(--gold); }

.auth-foot { margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(243,237,224,0.14); font-size: 12.5px; color: rgba(243,237,224,0.6); line-height: 1.6; }

/* ── Form pane (right) — modern, airy, soft floating-label fields ─ */
.auth-form-pane {
  background: var(--ivory);
  display: flex; align-items: center; justify-content: center;
  padding: 56px 48px;
}
.auth-card { width: 100%; max-width: 408px; }
.auth-card-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--teal-700);
  margin-bottom: 18px;
}
.auth-card-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.auth-card h1 {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: 37px; letter-spacing: -0.8px; color: var(--gray-900);
  line-height: 1.08; margin-bottom: 11px;
}
.auth-card .subtitle { font-size: 15px; color: var(--gray-500); line-height: 1.6; margin-bottom: 30px; }

form { display: flex; flex-direction: column; gap: 14px; }
.row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Floating-label field: <div class="ff"><input placeholder=" "><label></label></div> */
.ff { position: relative; }
.ff > input {
  width: 100%; height: 60px;
  padding: 25px 16px 9px;
  font-family: 'DM Sans', sans-serif; font-size: 16px; color: var(--gray-900);
  background: #fffdf8;
  border: 1.5px solid #e6dfce; border-radius: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.ff > input:focus {
  outline: none; border-color: var(--teal-700); background: var(--white);
  box-shadow: 0 0 0 4px rgba(17,99,99,0.10);
}
.ff > input:-webkit-autofill { -webkit-text-fill-color: var(--gray-900); transition: background-color 9999s; }
.ff > label {
  position: absolute; left: 16.5px; top: 19px;
  font-family: 'DM Sans', sans-serif; font-size: 16px; color: #9aa8a8;
  pointer-events: none; transform-origin: left top;
  transition: transform 0.14s ease, color 0.14s ease;
}
.ff > input:focus + label,
.ff > input:not(:placeholder-shown) + label {
  transform: translateY(-12px) scale(0.72);
  color: var(--teal-700); font-weight: 600; letter-spacing: 0.2px;
}
.pw-hint { font-size: 12.5px; color: var(--gray-500); line-height: 1.5; margin: 2px 2px 0; }

.auth-row { display: flex; justify-content: flex-end; align-items: center; font-size: 13.5px; margin-top: -2px; }
.auth-row a, .link { color: var(--teal-700); font-weight: 600; text-decoration: none; transition: color 0.12s ease; }
.auth-row a:hover, .link:hover { color: var(--gold); }

.submit-btn {
  position: relative;
  background: var(--teal-900); color: #fff; border: none;
  height: 56px; margin-top: 8px;
  font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 600;
  letter-spacing: 0; text-transform: none; cursor: pointer;
  border-radius: 14px; overflow: hidden;
  transition: background 0.15s ease, transform 0.06s ease, box-shadow 0.2s ease;
  box-shadow: 0 12px 26px -14px rgba(10,61,61,0.6);
}
.submit-btn:hover { background: var(--teal-800); box-shadow: 0 16px 34px -14px rgba(10,61,61,0.7); }
.submit-btn:active { transform: translateY(1px); }
.submit-btn:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }

.alert { padding: 13px 16px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; margin-bottom: 18px; display: none; }
.alert.show { display: block; }
.alert.error { background: var(--red-50); color: var(--red-700); border: 1px solid #f3c4c0; }
.alert.success { background: var(--green-50); color: var(--green-700); border: 1px solid #bfe3d2; }

.terms { font-size: 12.5px; color: var(--gray-500); line-height: 1.55; margin-top: 4px; }
.terms a { color: var(--teal-700); }

.auth-alt { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--ivory-200); font-size: 14px; color: var(--gray-600); line-height: 1.9; }
.auth-alt a { color: var(--teal-700); font-weight: 600; text-decoration: none; }
.auth-alt a:hover { color: var(--gold); }
.auth-alt .muted { color: var(--gray-500); font-size: 13px; }

/* ── Responsive: stack, brand becomes a compact header ────────── */
@media (max-width: 880px) {
  .auth { grid-template-columns: 1fr; }
  .auth-brand { padding: 30px 28px 28px; }
  .auth-brand-body { padding-top: 26px; }
  .auth-headline { font-size: 27px; max-width: none; }
  .auth-lead { display: none; }
  .auth-points { display: none; }
  .auth-foot { display: none; }
  .auth-form-pane { padding: 36px 26px 56px; align-items: flex-start; }
}
@media (max-width: 460px) {
  .row-2col { grid-template-columns: 1fr; }
}