/* ── Become auth page styles ──────────────────────────────────────────────
   Shared by all unauthenticated pages.
   Palette mirrors site.scss tokens; defined here because auth pages do not
   load the admin stylesheet.
──────────────────────────────────────────────────────────────────────────── */

:root {
  --auth-bg:                #0F0F0F;
  --auth-surface:           #1A1A1A;
  --auth-accent:            #C79A5A;
  --auth-accent-hover:      #D9AE6C;
  --auth-accent-muted:      rgba(199, 154, 90, 0.2);
  --auth-accent-border:     rgba(199, 154, 90, 0.35);
  --auth-accent-subtle:     rgba(199, 154, 90, 0.12);
  --auth-text-primary:      #F5F1EC;
  --auth-text-secondary:    #A8A29A;
  --auth-text-placeholder:  #4A4540;
  --auth-error-bg:          rgba(200, 60, 60, 0.12);
  --auth-error-border:      rgba(200, 60, 60, 0.3);
  --auth-error-text:        #F08080;
  --auth-success-bg:        rgba(60, 160, 100, 0.12);
  --auth-success-border:    rgba(60, 160, 100, 0.3);
  --auth-success-text:      #80C8A0;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Page shell ── */
body.auth-body {
  background: radial-gradient(circle at 60% 12%, rgba(199,154,90,.12), transparent 42%), linear-gradient(#070909, #0B0D0D);
  color: var(--auth-text-primary);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

/* ── Card — dark register: dark-world surface matching BecomeHome card treatment ── */
.auth-card {
  width: 100%;
  max-width: 480px;
  background: linear-gradient(160deg, #1A1813 0%, #141210 100%);
  border: 1px solid rgba(199, 154, 90, 0.22);
  border-radius: 24px;
  padding: 40px 40px 34px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

/* ── Wordmark ── */
.auth-wordmark {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 36px;
  color: var(--auth-accent);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  display: block;
  margin-bottom: 32px;
}

/* ── Headings ── */
.auth-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--auth-text-primary);
  line-height: 1.2;
  margin-bottom: 20px;
}

/* Compact variant for form pages where a subhead or fields follow immediately */
.auth-heading--form {
  font-size: 28px;
  margin-bottom: 8px;
}

/* ── Subhead — form pages only ── */
.auth-subhead {
  font-size: 14px;
  color: var(--auth-text-secondary);
  line-height: 1.6;
  margin-bottom: 36px;
}

/* ── Prose text — informational pages ── */
.auth-prose {
  font-size: 15px;
  color: var(--auth-text-secondary);
  line-height: 1.75;
  margin-bottom: 24px;
}
.auth-prose p             { margin-bottom: 16px; }
.auth-prose p:last-child  { margin-bottom: 0; }
.auth-prose a             { color: var(--auth-accent); text-decoration: none; }
.auth-prose strong        { color: var(--auth-text-primary); font-weight: 500; }

/* ── Form fields ── */
.form-group { margin-bottom: 22px; }

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--auth-text-primary);
  margin-bottom: 6px;
}

.form-hint {
  font-size: 12px;
  color: var(--auth-text-secondary);
  margin-top: 4px;
  line-height: 1.5;
}

.form-input {
  display: block;
  width: 100%;
  background: var(--auth-surface);
  border: 1px solid var(--auth-accent-muted);
  color: var(--auth-text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  padding: 12px 14px;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s ease;
}
.form-input:focus       { border-color: rgba(199, 162, 124, 0.6); }
.form-input::placeholder { color: var(--auth-text-placeholder); }

.field-validation-error {
  font-size: 12px;
  color: var(--auth-error-text);
  margin-top: 4px;
  display: block;
}

/* ── Checkboxes ── */
.check-group {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.check-group input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--auth-accent);
  cursor: pointer;
}
.check-label              { font-size: 13px; color: var(--auth-text-secondary); line-height: 1.55; }
.check-label strong       { color: var(--auth-text-primary); font-weight: 500; }

/* ── Section label (compliance etc.) ── */
.section-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--auth-accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}

/* ── Buttons ── */
.btn-primary {
  background: linear-gradient(135deg, #D9AE6C, #C79A5A);
  color: #1B130B;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 32px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 14px 32px -12px rgba(199,154,90,.55);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover         { background: linear-gradient(135deg, #E4BB78, #D9AE6C); color: #1B130B; }

/* <button> elements span full width inside forms */
button.btn-primary {
  display: block;
  width: 100%;
  padding: 14px;
  margin-top: 24px;
}

.btn-ghost {
  display: inline-block;
  border: 1px solid var(--auth-accent-border);
  color: var(--auth-accent);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 10px 24px;
  border-radius: 8px;
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.btn-ghost:hover           { border-color: rgba(199, 162, 124, 0.7); color: var(--auth-accent); }

/* ── Notices ── */
.error-summary {
  background: var(--auth-error-bg);
  border: 1px solid var(--auth-error-border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 24px;
  font-size: 13px;
  color: var(--auth-error-text);
  line-height: 1.6;
}

.success-notice {
  background: var(--auth-success-bg);
  border: 1px solid var(--auth-success-border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 24px;
  font-size: 13px;
  color: var(--auth-success-text);
  line-height: 1.6;
}

.info-notice {
  background: rgba(199, 162, 124, 0.08);
  border: 1px solid rgba(199, 162, 124, 0.2);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 24px;
}
.info-notice p            { font-size: 14px; color: var(--auth-text-secondary); line-height: 1.7; margin-bottom: 0; }
.info-notice p + p        { margin-top: 10px; }
.info-notice strong       { color: var(--auth-accent); }
.info-notice a            { color: var(--auth-accent); text-decoration: none; }

/* ── Divider ── */
.divider {
  border: none;
  border-top: 1px solid var(--auth-accent-subtle);
  margin: 28px 0;
}

/* ── Footer link row ── */
.auth-footer              { font-size: 13px; color: var(--auth-text-secondary); text-align: center; margin-top: 24px; }
.auth-footer a            { color: var(--auth-accent); text-decoration: none; }

/* ── Clinical-light register — Become Health entry point ─────────────────
   Activated by auth-body--health on <body>. Overrides dark-world tokens
   to warm parchment / amber. Applied only to health-context login flows.
──────────────────────────────────────────────────────────────────────────── */
body.auth-body.auth-body--health {
  --auth-bg:                #FFF8EC;
  --auth-surface:           #FFFDF8;
  --auth-accent:            #B97725;
  --auth-accent-hover:      #C88A2E;
  --auth-accent-muted:      rgba(185, 119, 37, 0.18);
  --auth-accent-border:     rgba(185, 119, 37, 0.35);
  --auth-accent-subtle:     rgba(185, 119, 37, 0.1);
  --auth-text-primary:      #1F1A16;
  --auth-text-secondary:    #6F5D4C;
  --auth-text-placeholder:  #9C8B72;
  --auth-error-bg:          rgba(180, 40, 40, 0.08);
  --auth-error-border:      rgba(180, 40, 40, 0.25);
  --auth-error-text:        #8B2020;
  --auth-success-bg:        rgba(40, 140, 80, 0.08);
  --auth-success-border:    rgba(40, 140, 80, 0.25);
  --auth-success-text:      #1A5C30;
}

/* ══════════════════════════════════════════════════════════════════════════
   Auth screen set — additions (Pass 7b)
   Utility: health action button · split hero · password toggle · social row
   2FA inputs · recovery codes · QR wrapper · icon state · gated notice
══════════════════════════════════════════════════════════════════════════ */

/* ── Health primary button — intake gold (#D9C4A3), matching health intake CTA ── */
body.auth-body.auth-body--health .btn-primary,
body.auth-body.auth-body--health button.btn-primary {
  background: #D9C4A3;
  color: #fff;
  box-shadow: 0 14px 30px -14px rgba(185,119,37,.7);
}
body.auth-body.auth-body--health .btn-primary:hover,
body.auth-body.auth-body--health button.btn-primary:hover {
  background: #C9B493;
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(185,119,37,.6);
}

/* ── Split layout — desktop hero (login page only) ── */
body.auth-body--split {
  display: block;
  padding: 0;
}

/* ── Password wrapper + toggle ── */
.pw-wrap { position: relative; }
.pw-wrap .form-input { padding-right: 44px; }
.pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--auth-text-secondary);
  display: flex;
  align-items: center;
  line-height: 0;
  width: auto;
  margin-top: 0;
}
.pw-toggle:hover { color: var(--auth-text-primary); }

/* ── Options row (remember me + forgot password) ── */
.auth-options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px 0 18px;
}
.auth-remember-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--auth-text-secondary);
  cursor: pointer;
}
.auth-remember-label input[type="checkbox"] {
  accent-color: var(--auth-accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.auth-link {
  font-size: 12px;
  color: var(--auth-accent);
  text-decoration: none;
}
.auth-link:hover { text-decoration: underline; }

/* ── Social buttons (or continue with) ── */
.auth-social-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--auth-text-secondary);
  margin: 18px 0;
}
.auth-social-divider::before,
.auth-social-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--auth-accent-subtle);
  border: none;
  border-top: 1px solid var(--auth-accent-subtle);
}

.auth-social-btns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}
.auth-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 6px;
  background: var(--auth-surface);
  border: 1px solid var(--auth-accent-muted);
  border-radius: 9px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--auth-text-primary);
  cursor: not-allowed;
  opacity: 0.5;
  line-height: 1;
}

/* ── Secure footer strip ── */
.auth-secure-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--auth-accent-subtle);
  font-size: 11px;
  color: var(--auth-text-secondary);
}

/* ── 2FA code inputs ── */
.auth-code-inputs {
  display: flex;
  gap: 8px;
  margin: 20px 0;
}
.auth-code-input {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--auth-text-primary);
  background: var(--auth-surface);
  border: 1px solid var(--auth-accent-muted);
  border-radius: 8px;
  padding: 14px 0;
  outline: none;
  transition: border-color 0.15s;
}
.auth-code-input:focus { border-color: var(--auth-accent); }

/* ── QR code wrapper ── */
.auth-qr-wrapper {
  align-self: center;
  background: #ffffff;
  border-radius: 12px;
  padding: 14px;
  margin: 16px auto;
  display: block;
  width: fit-content;
}

/* ── Recovery codes block ── */
.auth-recovery-codes {
  font-family: 'Courier New', 'Lucida Console', monospace;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: 0.5px;
  color: var(--auth-text-primary);
  background: var(--auth-surface);
  border: 1px solid var(--auth-accent-muted);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 14px 0;
  column-count: 2;
  column-gap: 16px;
  user-select: all;
}

/* ── Icon state (lockout / email confirmation) ── */
.auth-icon-state { text-align: center; padding: 12px 0 20px; }
.auth-icon-state svg { color: var(--auth-accent); }

/* ── Gated-feature notice ── */
.auth-gated-notice {
  background: rgba(199, 162, 124, 0.06);
  border: 1px dashed rgba(199, 162, 124, 0.22);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--auth-text-secondary);
  margin-bottom: 16px;
  line-height: 1.5;
}

/* ── Wordmark with roundel (all auth card pages) ── */
.auth-wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 32px;
  width: fit-content;
}
.auth-wordmark img { flex-shrink: 0; }
.auth-wordmark span {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 30px;
  font-weight: 600;
  color: var(--auth-accent);
  letter-spacing: -0.5px;
  line-height: 1;
}

/* ── Mobile responsive ── */
@media (max-width: 700px) {
  .auth-card { padding: 32px 24px 28px; }
  .auth-social-btns { grid-template-columns: repeat(3, auto); justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Health register reskin (Pass 7c) — matches signed-off health intake surface
   Replaces designer's rejected sage/greige with intake's cream + intake gold
══════════════════════════════════════════════════════════════════════════ */

/* Health page: cream gradient background matching intake gate screen */
body.auth-body.auth-body--health {
  background: radial-gradient(1100px 620px at 50% -8%, #FFFCF4 0%, rgba(255,252,244,0) 60%), #FFF8EC;
}

/* Health auth card: intake card treatment */
body.auth-body.auth-body--health .auth-card {
  background: #FFFDF8;
  border: 1px solid #E4D3BB;
  border-radius: 24px;
  padding: 40px 40px 34px;
  box-shadow: 0 26px 60px -28px rgba(91,65,38,.30);
}

/* Health headings: weight 500 matching intake h1 */
body.auth-body.auth-body--health .auth-heading {
  font-weight: 500;
}

/* Health wordmark: "HEALTH" sub-label matching intake lockup */
body.auth-body.auth-body--health .auth-wordmark {
  align-items: flex-start;
}
body.auth-body.auth-body--health .auth-wordmark span {
  display: flex;
  flex-direction: column;
}
body.auth-body.auth-body--health .auth-wordmark span::after {
  content: 'HEALTH';
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 5px;
  color: #8A6847;
  margin-top: 3px;
  line-height: 1;
}

/* Health form inputs: use intake surface colour */
body.auth-body.auth-body--health .form-input {
  background: #FFFDF8;
  border-color: rgba(185, 119, 37, 0.18);
}
body.auth-body.auth-body--health .form-input:focus {
  border-color: rgba(185, 119, 37, 0.5);
}

/* Health info/gated notices: warm parchment */
body.auth-body.auth-body--health .info-notice,
body.auth-body.auth-body--health .auth-gated-notice {
  background: #FFF6E7;
  border-color: #EAD6B4;
}

@media (max-width: 700px) {
  body.auth-body.auth-body--health .auth-card {
    border-radius: 20px;
    padding: 28px 22px 24px;
  }
}