/* =====================================================================
   QP AUTH SHELL — shared auth-surface structure (auth-unify Slice B)
   Canon source: members/login.html (F1 members-premium, RELAY-08 Q1/Q2).
   SCOPE RULE: every rule lives under .qp-auth (a wrapper class on the
   auth page's <main>) — NEVER body — so product headers/footers and
   shared.css element rules are untouched. Per-product skin enters ONLY
   through the --auth-* tokens below (R5); structure is platform-wide (R7).
   ===================================================================== */

.qp-auth {
  --auth-bg: #131e3d;
  --auth-bg-light: #1a2a50;
  --auth-accent: #5ba8b2;
  --auth-accent-light: #7dc4cd;
  --auth-accent-dark: #4a939c;
  --auth-error: #f07a7a; /* was #e85d5d: 3.9:1 on the tinted error box — lifted for 4.5:1 (RELAY-05 sweep) */
  --auth-success: #5bb88c;
  --auth-text-muted: rgba(255,255,255,0.5);
  --auth-border: rgba(91,168,178,0.2);
  --auth-font-display: 'Playfair Display', serif;
  --auth-font-body: 'Lato', sans-serif;
  --auth-ink: #ffffff; /* body/label/input ink — navy on the light skin */
  --auth-ink-rgb: 255,255,255; /* alpha ink for the shell's own tints (RELAY-05: members light variant) */
}
/* RELAY-05 light skin — rides the shared qa-theme key on members/* (academy auth pages keep their
   dark html default). Cream/white surfaces, navy ink, teal-INK accent (#25646c clears 4.5:1 on cream
   and carries white button text at 6.6:1; the mid teal #5ba8b2 does neither). */
.qp-auth:where([data-theme="light"] *) { /* .qp-auth-scoped (never body/html-first — Slice B rule); :where keeps specificity at .qp-auth so cascade order wins */
  --auth-bg: #faf8f5;
  --auth-bg-light: #ffffff;
  --auth-accent: #25646c;
  --auth-accent-light: #2a6f78;
  --auth-accent-dark: #1a4d53;
  --auth-error: #b23535;
  --auth-success: #2e7d55;
  --auth-text-muted: rgba(26,26,46,.68);
  --auth-border: rgba(173,155,132,.3);
  --auth-ink-rgb: 26,26,46;
  --auth-ink: #1a1a2e;
}

/* Centering context for pages whose <main> is not already a flex column
   (academy keeps its sitewide header — Option A — so its main needs this). */
.qp-auth.auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px 80px;
}

/* ─── Card ─── */
.qp-auth .auth-card {
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  background: linear-gradient(170deg, var(--auth-bg-light) 0%, var(--auth-bg) 100%);
  border: 1px solid var(--auth-border);
  border-radius: 16px;
  padding: 48px 40px;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.3),
    0 0 0 1px rgba(91,168,178,0.05) inset;
  animation: authCardEnter 0.6s ease-out;
}
@keyframes authCardEnter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.qp-auth .auth-title {
  font-family: var(--auth-font-display);
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 6px;
  color: var(--auth-ink);
}
.qp-auth .auth-subtitle {
  text-align: center;
  color: var(--auth-text-muted);
  font-size: 15px;
  margin-bottom: 32px;
  font-weight: 300;
  line-height: 1.5;
}

/* ─── Tab Switcher ─── */
.qp-auth .tab-switcher {
  display: flex;
  background: rgba(var(--auth-ink-rgb),0.04);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 30px;
  border: 1px solid rgba(var(--auth-ink-rgb),0.06);
}
.qp-auth .tab-btn {
  flex: 1;
  padding: 11px 0;
  border: none;
  background: transparent;
  color: var(--auth-text-muted);
  font-family: var(--auth-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.qp-auth .tab-btn.active {
  background: var(--auth-accent);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(91,168,178,0.3);
}
@media (max-width: 420px) {
  /* POLISH RELAY-02 batch 2: "Create Account" touched the switcher edge at 375 */
  .qp-auth .tab-btn { font-size: 12px; letter-spacing: 0.4px; padding: 11px 2px; }
}
.qp-auth .tab-btn:not(.active):hover {
  color: rgba(var(--auth-ink-rgb),0.85);
}

/* ─── Form ─── */
.qp-auth .form-group { margin-bottom: 20px; }
.qp-auth .form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--auth-text-muted);
  margin-bottom: 8px;
}
.qp-auth .form-input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(var(--auth-ink-rgb),0.05);
  border: 1px solid rgba(var(--auth-ink-rgb),0.1);
  border-radius: 10px;
  color: var(--auth-ink);
  font-family: var(--auth-font-body);
  font-size: 16px; /* POLISH batch 3: <16px makes iOS Safari zoom on focus */
  outline: none;
  box-sizing: border-box;
  transition: all 0.3s ease;
}
.qp-auth .form-input::placeholder { color: rgba(var(--auth-ink-rgb),0.25); }
.qp-auth .form-input:focus {
  border-color: var(--auth-accent);
  box-shadow: 0 0 0 3px rgba(91,168,178,0.15);
  background: rgba(var(--auth-ink-rgb),0.07);
}

/* (B2/W4) Chrome/WebKit autofill counter: the UA paints filled fields with
   its own pale background + black text, which torches the dark card. The
   1000px inset shadow repaints the field with the card surface; the
   text-fill + caret keep the type white. Focus keeps its ring OUTSIDE the
   inset fill. */
.qp-auth .form-input:-webkit-autofill,
.qp-auth .form-input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--auth-ink);
  caret-color: var(--auth-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--auth-bg-light) inset;
  box-shadow: 0 0 0 1000px var(--auth-bg-light) inset;
  transition: background-color 9999s ease-out 0s;
}
.qp-auth .form-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--auth-ink);
  caret-color: var(--auth-ink);
  -webkit-box-shadow: 0 0 0 3px rgba(91,168,178,0.15), 0 0 0 1000px var(--auth-bg-light) inset;
  box-shadow: 0 0 0 3px rgba(91,168,178,0.15), 0 0 0 1000px var(--auth-bg-light) inset;
}

.qp-auth .password-wrapper { position: relative; }
.qp-auth .password-wrapper .form-input { padding-right: 56px; }
.qp-auth .password-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--auth-text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 4px;
  transition: color 0.2s;
}
.qp-auth .password-toggle:hover { color: var(--auth-accent-light); }

.qp-auth .password-mismatch {
  display: none;
  color: var(--auth-error);
  font-size: 12px;
  margin-top: 6px;
  padding-left: 2px;
}
.qp-auth .password-mismatch.show { display: block; }

/* ─── Submit Button ─── */
.qp-auth .submit-btn {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--auth-accent), var(--auth-accent-dark));
  color: #ffffff;
  font-family: var(--auth-font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  margin-top: 6px;
}
.qp-auth .submit-btn:hover {
  box-shadow: 0 6px 25px rgba(91,168,178,0.35);
  transform: translateY(-1px);
}
.qp-auth .submit-btn:active { transform: translateY(0); }
.qp-auth .submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.qp-auth .submit-btn .spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(var(--auth-ink-rgb),0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: authSpin 0.7s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}
.qp-auth .submit-btn.loading .spinner { display: inline-block; }
/* (D16) sent/countdown state: one line, mixed case */
.qp-auth .submit-btn.sent { text-transform: none; letter-spacing: .5px; white-space: nowrap; }
.qp-auth .submit-btn.loading .btn-text { opacity: 0.8; }
@keyframes authSpin { to { transform: rotate(360deg); } }

/* Inline variant for in-page forms (settings cards): same skin, inline
   metrics. (Slice B commit ④; canon-sanctioned modifier.) */
.qp-auth .submit-btn--inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  padding: 12px 24px;
  font-size: 14px;
  letter-spacing: 0.5px;
  margin-top: 0;
}
.qp-auth .submit-btn--inline .spinner { width: 16px; height: 16px; margin-right: 0; }

/* ─── Messages ─── */
.qp-auth .message-box {
  display: none;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
  text-align: center;
}
.qp-auth .message-box.error {
  display: block;
  background: rgba(232,93,93,0.12);
  border: 1px solid rgba(232,93,93,0.3);
  color: var(--auth-error);
}
.qp-auth .message-box.success {
  display: block;
  background: rgba(91,184,140,0.12);
  border: 1px solid rgba(91,184,140,0.3);
  color: var(--auth-success);
}
.qp-auth .message-box a { color: var(--auth-accent-light); }

/* ─── Links ─── */
.qp-auth .forgot-link {
  display: block;
  text-align: right;
  margin: -10px 0 20px;
  font-size: 13px;
  color: var(--auth-accent);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}
.qp-auth .forgot-link:hover { color: var(--auth-accent-light); }

.qp-auth .back-link-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--auth-accent);
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 24px;
  transition: color 0.2s;
  text-decoration: none;
}
.qp-auth .back-link-inline:hover { color: var(--auth-accent-light); }

.qp-auth .signin-link,
.qp-auth .alt-link {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: var(--auth-text-muted);
}
.qp-auth .signin-link a,
.qp-auth .alt-link a {
  color: var(--auth-accent);
  text-decoration: none;
}
.qp-auth .signin-link a:hover,
.qp-auth .alt-link a:hover { color: var(--auth-accent-light); }

/* ─── Divider ─── */
.qp-auth .form-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
}
.qp-auth .form-divider::before,
.qp-auth .form-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(var(--auth-ink-rgb),0.08);
}
.qp-auth .form-divider span {
  font-size: 12px;
  color: var(--auth-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}

.qp-auth .info-text {
  text-align: center;
  color: var(--auth-text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.qp-auth .info-text strong { color: var(--auth-accent-light); }

/* ─── Responsive ─── */
@media (max-width: 500px) {
  .qp-auth .auth-card { padding: 36px 24px; }
  .qp-auth .auth-title { font-size: 24px; }
}