/* Login + Join on the editorial shell. The form markup and scripts are unchanged; style.css
   still ships the original .gp-login-* rules (they key off the --gp-login-* variables), so this
   file re-points those variables to the shell tokens and overrides the few hardcoded values.
   The join page's former inline styles (parent gate, password hint) live here too. */

.h2-page-auth {
  --gp-login-bg: var(--h2-paper);
  --gp-login-card: var(--h2-card);
  --gp-login-border: var(--h2-line);
  --gp-login-text: var(--h2-ink);
  --gp-login-gold: #2563EB;
  --gp-login-gold-hover: #1D4ED8;
  --gp-login-input-bg: var(--h2-paper);
  --gp-login-input-border: var(--h2-line);
  --gp-login-focus: rgba(37, 99, 235, .18);
}
html.gp-dark .h2-page-auth {
  --gp-login-card: #1B1C23;
  --gp-login-input-bg: #111217;
  --gp-login-input-border: rgba(255, 255, 255, .14);
  --gp-login-gold: #7DB4F5;
  --gp-login-gold-hover: #9CC7F9;
}

.h2-page-auth .gp-login-wrap {
  min-height: 100vh; padding: 120px clamp(16px, 4vw, 40px) 80px;
  background: var(--h2-paper); color: var(--h2-ink);
}
.h2-page-auth .gp-login-card {
  width: min(460px, 100%); padding: 40px 36px;
  background: var(--gp-login-card); border: 1px solid var(--gp-login-border); border-radius: 28px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: var(--gp-shadow-lg, 0 14px 40px rgba(20, 30, 50, .10)); color: var(--h2-ink);
}
.h2-page-auth .gp-join-card { width: min(500px, 100%); }
.h2-page-auth .gp-logo-img { max-width: 44px; filter: none; opacity: 1; }
html.gp-dark .h2-page-auth .gp-logo-img { filter: brightness(0) invert(1); }
.h2-page-auth .gp-login-title { font: 400 clamp(30px, 3vw, 40px)/1.05 var(--h2-serif); letter-spacing: -.025em; color: var(--h2-ink); margin: 0 0 22px; }
.h2-page-auth .gp-join-subtitle { color: var(--h2-ink-2); opacity: 1; font-size: 15px; margin: -10px 0 24px; }
.h2-page-auth .gp-login-card > p[style] { color: var(--h2-ink-2) !important; opacity: 1 !important; }

/* Fields */
.h2-page-auth .gp-login-card .gp-form-group .gp-field-icon { color: var(--h2-ink-2); opacity: 1; }
.h2-page-auth .gp-login-card .gp-form-group .gp-floating-label { color: var(--h2-ink-3); }
.h2-page-auth input.gp-input[type="text"], .h2-page-auth input.gp-input[type="password"], .h2-page-auth input.gp-input[type="email"] { border-width: 1.5px; border-radius: 14px; }
.h2-page-auth input.gp-input:focus { background: var(--gp-login-card) !important; }
.h2-page-auth input.gp-input:focus ~ .gp-floating-label, .h2-page-auth input.gp-input:not(:placeholder-shown) ~ .gp-floating-label { background: var(--gp-login-card); color: var(--h2-label); }
html.gp-dark .h2-page-auth input.gp-input:focus ~ .gp-floating-label, html.gp-dark .h2-page-auth input.gp-input:not(:placeholder-shown) ~ .gp-floating-label { color: var(--gp-login-gold); }
.h2-page-auth .gp-checkbox-label { color: var(--h2-ink-2); }
.h2-page-auth .gp-checkbox-wrapper input:checked ~ .gp-checkbox-custom::after { color: #fff; }
.h2-page-auth .gp-login-card .gp-form-group button.gp-toggle-password { color: var(--h2-ink-2) !important; opacity: 1 !important; }

/* Button + spinner (white on deep blue) */
.h2-page-auth .gp-submit-btn { min-height: 54px; background: linear-gradient(135deg, #2E76C7, #2563EB); box-shadow: 0 10px 30px rgba(37, 99, 235, .3); font-weight: 700; }
.h2-page-auth .gp-submit-btn:hover { background: linear-gradient(135deg, #2563EB, #1D4ED8); box-shadow: 0 16px 40px rgba(37, 99, 235, .4); }
.h2-page-auth .gp-btn-loader { background: linear-gradient(135deg, #2563EB, #1D4ED8); color: #fff; }
.h2-page-auth .gp-spinner { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }

/* Notices */
.h2-page-auth .gp-login-notice.gp-error { background: #FEE2E2; border-color: #FCA5A5; color: #991B1B; }
.h2-page-auth .gp-login-notice.gp-success { background: #DCFCE7; border-color: #86EFAC; color: #166534; }
html.gp-dark .h2-page-auth .gp-login-notice.gp-error { background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .35); color: #FCA5A5; }
html.gp-dark .h2-page-auth .gp-login-notice.gp-success { background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .35); color: #86EFAC; }
.h2-page-auth .gp-notice-content p { opacity: 1; }

/* Join tabs, parent gate, hint */
.h2-page-auth .gp-join-tabs { background: var(--h2-paper-2); border: 1px solid var(--h2-line); border-radius: 999px; padding: 4px; }
.h2-page-auth .gp-join-tab { border-radius: 999px; color: var(--h2-ink-2); font-size: 14px; }
.h2-page-auth .gp-join-tab--active { background: #16171C; color: #fff; }
html.gp-dark .h2-page-auth .gp-join-tab--active { background: #F2F2F6; color: #16171C; }
.h2-page-auth .gp-join-tab:hover:not(.gp-join-tab--active) { color: var(--h2-ink); }
.h2-page-auth .gp-parent-gate { background: var(--gp-blue-bg, #EAF2FD); border: 1px solid var(--gp-blue-border, #CFE2FB); border-radius: 16px; padding: 16px 18px; margin-bottom: 18px; text-align: left; }
html.gp-dark .h2-page-auth .gp-parent-gate { background: rgba(125, 180, 245, .1); border-color: rgba(125, 180, 245, .3); }
.h2-page-auth .gp-parent-gate-title { font-weight: 800; margin: 0 0 4px; color: var(--h2-ink); }
.h2-page-auth .gp-parent-gate-sub { font-size: 13.5px; color: var(--h2-ink-2); margin: 0 0 10px; line-height: 1.5; }
.h2-page-auth .gp-attest-label { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; cursor: pointer; color: var(--h2-ink); }
.h2-page-auth .gp-attest-label input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: #2563EB; }
/* Gated states keep readable contrast: dim by colour, not by opacity. */
.h2-page-auth .gp-social-login.gp-gated { opacity: .7; pointer-events: none; filter: grayscale(1); }
.h2-page-auth .gp-submit-btn.gp-attest-gated:disabled { opacity: 1; cursor: not-allowed; transform: none; background: #CBD3DE; color: #3A3D46; box-shadow: none; }
html.gp-dark .h2-page-auth .gp-submit-btn.gp-attest-gated:disabled { background: #3A3D46; color: #D7D9E0; }
.h2-page-auth .gp-pw-hint { font-size: 12.5px; margin: -6px 0 14px; color: var(--h2-ink-2); text-align: left; }
.h2-page-auth .gp-pw-hint.gp-pw-bad { color: #B45309; }
.h2-page-auth .gp-pw-hint.gp-pw-ok { color: #166534; }
html.gp-dark .h2-page-auth .gp-pw-hint.gp-pw-bad { color: #FBBF24; }
html.gp-dark .h2-page-auth .gp-pw-hint.gp-pw-ok { color: #4ADE80; }
.h2-page-auth .gp-join-tab-content > form + p[style] { color: var(--h2-ink-2) !important; }

/* Social + links */
.h2-page-auth .gp-social-divider { color: var(--h2-ink-3); }
.h2-page-auth .gp-social-divider::before, .h2-page-auth .gp-social-divider::after { background: var(--h2-line); }
.h2-page-auth .gp-login-links { color: var(--h2-ink-2); }
.h2-page-auth .gp-link { color: var(--h2-label); font-weight: 700; }
html.gp-dark .h2-page-auth .gp-link { color: var(--gp-login-gold); }
.h2-page-auth .gp-link-sep { color: var(--h2-ink-3); }

@media (max-width: 600px) {
  .h2-page-auth .gp-login-wrap { padding: 96px 16px 60px; align-items: flex-start; }
  .h2-page-auth .gp-login-card { padding: 30px 22px; }
}

/* style.css late overrides (.gp-login-card p white, .gp-field-icon svg white) were written for
   the old dark card; out-specify them here. */
.h2-page-auth .gp-login-card p { color: var(--h2-ink-2) !important; opacity: 1; }
.h2-page-auth .gp-login-card .gp-parent-gate-title { color: var(--h2-ink) !important; }
.h2-page-auth .gp-login-card .gp-field-icon svg { color: var(--h2-ink-2); }
.h2-page-auth .gp-login-card .gp-pw-hint.gp-pw-bad { color: #B45309 !important; }
.h2-page-auth .gp-login-card .gp-pw-hint.gp-pw-ok { color: #166534 !important; }
html.gp-dark .h2-page-auth .gp-login-card .gp-pw-hint.gp-pw-bad { color: #FBBF24 !important; }
html.gp-dark .h2-page-auth .gp-login-card .gp-pw-hint.gp-pw-ok { color: #4ADE80 !important; }
.h2-page-auth .gp-login-links .gp-link { color: var(--h2-label); }
html.gp-dark .h2-page-auth .gp-login-links .gp-link { color: var(--gp-login-gold); }