/* Identity Anchor setup screen. Session 3 Deliverable 1.
   Four-signal capture: name + DOB + SSN-last-4 + address.
   Class namespace .id-setup intentionally avoids .onboarding (taken by
   the AnnualCreditReport Guide screen) and .q-* (post-upload questions).
   See vioverse_app/mockup/ideas/handoff-2026-05-11-session-3-onboarding-modal-design.md. */

/* FS-2 (2026-08-02): root typeface declaration. Only `.id-setup h2` below
   carried the family, so the eyebrow, the subhead, every field label and
   every helper note rendered in Inter -- and the text inputs, which DO
   carry `font-family: inherit`, faithfully inherited the wrong one. That
   internal consistency is why the screen never looked broken enough to
   report. See landing.css `.landing` for the full rationale. */
.id-setup {
  max-width: 560px; margin: 0 auto; padding: 56px 24px 80px; display: flex; flex-direction: column; align-items: center;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.id-setup > * { width: 100%; }

.id-setup-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 14px;
  text-align: center;
}

.id-setup h2 {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 4.4vw, 56px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--text);
  margin: 0 0 14px;
  text-align: center;
}
.id-setup h2 span { color: var(--coral); }

.id-setup-subhead {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 36px;
  text-align: center;
}

.id-row { margin-bottom: 22px; }

.id-row-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
  padding-left: 16px;
}
.id-row-label .id-lock-icon { width: 14px; height: 14px; color: var(--coral); }

.id-row input[type="text"],
.id-row input[type="password"],
.id-row input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(31,24,19,0.15);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, background 0.15s;
}
.id-row input:focus {
  outline: none;
  border-color: var(--coral);
  background: rgba(255,255,255,0.85);
}
.id-row.id-error input,
.id-row.id-error .id-dob-pills select { border-color: var(--red); }

.id-helper {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 6px;
  line-height: 1.4;
  padding-left: 16px;
}
.id-helper.id-error-msg { color: var(--red); font-weight: 500; }

.id-dob-pills { display: flex; gap: 8px; }
.id-dob-pills select {
  flex: 1;
  padding: 14px 12px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(31,24,19,0.15);
  border-radius: var(--radius-sm);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.id-dob-pills select:focus {
  outline: none;
  border-color: var(--coral);
  background: rgba(255,255,255,0.85);
}
.id-dob-pills #id-pill-month { flex: 1.4; }
.id-dob-pills #id-pill-day { flex: 0.7; }
.id-dob-pills #id-pill-year { flex: 1; }

.id-ssn-wrap { position: relative; }
.id-ssn-wrap input {
  padding-right: 44px;
  letter-spacing: 0.18em;
}
.id-ssn-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  padding: 6px;
  cursor: pointer;
  font-family: inherit; /* FS-2: icon-only today, so no visible change; kept
                           uniform so a future text label cannot regress. */
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.id-ssn-toggle:hover { color: var(--text); }
.id-ssn-toggle svg { width: 18px; height: 18px; }

/* Email field label icon — matches the SSN lock-icon pattern */
.id-row-label .id-mail-icon { width: 14px; height: 14px; color: var(--coral); }

/* Email helper note — icon + text side-by-side */
.id-email-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.45;
}
.id-email-note-icon {
  width: 15px; height: 15px;
  stroke: var(--coral); stroke-width: 1.9; fill: none;
  flex-shrink: 0;
  margin-top: 1px;
}

.id-submit {
  width: auto;
  display: block;
  margin: 20px auto 0;
  padding: 18px 48px;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  background: var(--coral);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 6px 16px -4px rgba(242,100,25,0.4);
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s, box-shadow 0.18s;
}
.id-submit:hover { filter: brightness(1.06); box-shadow: 0 0 0 6px rgba(242,100,25,0.18), 0 10px 22px -4px rgba(242,100,25,0.5); transform: translateY(-1px); }
.id-submit:active { transform: scale(0.99); }
.id-submit:disabled { opacity: 0.5; cursor: not-allowed; filter: none; box-shadow: 0 6px 16px -4px rgba(242,100,25,0.4); }

/* "Already have an account? Sign in" line below the submit button */
.id-signin-line {
  text-align: center;
  font-size: 15px;
  color: rgba(30,42,53,0.62);
  margin-top: 22px;
  font-weight: 400;
}
.id-signin-line a {
  color: var(--coral);
  font-weight: 600;
  text-decoration: none;
}
.id-signin-line a:hover { text-decoration: underline; }

/* Auth screens: sign-up + sign-in (auth build, 2026-05-23).
   Minimal chrome around Clerk's pre-built mount containers.
   Same max-width and centering as .id-setup for visual continuity.

   FS-2 (2026-08-02) -- the SHARED-CLASS TRAP. #screen-signin and
   #screen-signup have no rules of their own anywhere; grepping the CSS
   for those two ids returns nothing, and that absence reads as "these
   screens are unstyled" when in fact they are styled entirely through
   .auth-screen, HERE, in the id-setup stylesheet. `.id-setup` is a
   SIBLING class, not an ancestor, so the family declared on it never
   reached these screens: the "Sign in to vioverse" / "Create your
   account" headlines, the subhead and the footer all rendered in Inter.
   Clerk's own widget was correctly branded the whole time
   (clerk-init.js `_clerkAppearance` passes the family in `variables`),
   so the third-party card was on-brand and OUR chrome around it was not.

   Declared here rather than on the two screen ids so the two auth
   screens cannot drift apart. */
.auth-screen {
  max-width: 560px; margin: 0 auto; padding: 56px 24px 80px; display: flex; flex-direction: column; align-items: center;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.auth-back { align-self: flex-start; margin-bottom: 6px; }

.auth-screen-header { text-align: center; margin-bottom: 32px; width: 100%; }
.auth-screen-header h2 {
  font-size: clamp(28px, 3.3vw, 45px);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin: 0 0 12px;
}
.auth-screen-subhead {
  font-size: 17px;
  font-weight: 400;
  color: rgba(30,42,53,0.62);
  margin: 0;
  line-height: 1.5;
}

.clerk-mount {
  min-height: 200px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.auth-screen-footer {
  text-align: center;
  font-size: 15px;
  color: rgba(30,42,53,0.62);
  margin-top: 24px;
  font-weight: 400;
  width: 100%;
}
.auth-screen-footer a {
  color: var(--coral);
  font-weight: 600;
  text-decoration: none;
}
.auth-screen-footer a:hover { text-decoration: underline; }


/* === Post-auth confirmation interstitial (2026-05-25) ====================
   Button-driven card after submitIdSetup() success. Matches the
   wait-interstitial card chrome (bone card, --backdrop-scrim overlay,
   28px radius, Plus Jakarta Sans). No auto-dismiss, no progress bar. */

.auth-confirmation {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 500;
  background: var(--backdrop-scrim);
  opacity: 0;
  transition: opacity 0.25s ease-out;
}

.auth-confirmation.visible {
  display: flex;
  opacity: 1;
}

.auth-confirmation-backdrop {
  position: absolute;
  inset: 0;
}

.auth-confirmation-card {
  position: relative;
  background: var(--bone-0);
  border-radius: var(--radius);
  padding: 28px 32px 24px;
  max-width: 520px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(30, 42, 53, 0.08);
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  color: var(--text);
  transform: translateY(8px);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.auth-confirmation.visible .auth-confirmation-card {
  transform: translateY(0);
}

.auth-confirmation-eyebrow {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 10px;
}

.auth-confirmation-headline {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 22px;
  color: var(--text);
}

.auth-confirmation-headline .coral {
  color: var(--coral);
}

.auth-confirmation-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 22px;
}

.auth-confirmation-icon svg {
  width: 96px;
  height: 96px;
  display: block;
}

.auth-confirmation-sub {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(30, 42, 53, 0.62);
  margin: 0 0 22px;
}

.auth-confirmation-actions {
  display: flex;
  justify-content: flex-end;
}

.auth-confirmation-btn {
  font-family: inherit;
  background: var(--ink-0);
  color: var(--bone-0);
  border: 1px solid var(--ink-0);
  border-radius: 999px;
  padding: 14px 30px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  min-width: 150px;
  text-align: center;
}

.auth-confirmation-btn:hover {
  transform: translateY(-1px);
}

.auth-confirmation-btn:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

/* Mobile: tighter sizing */
@media (max-width: 480px) {
  .auth-confirmation-card {
    padding: 22px 20px 20px;
  }
  .auth-confirmation-headline {
    font-size: 26px;
  }
  .auth-confirmation-icon svg {
    width: 80px;
    height: 80px;
  }
  .auth-confirmation-sub {
    font-size: 15px;
  }
  .auth-confirmation-btn {
    width: 100%;
    min-height: 44px;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-confirmation,
  .auth-confirmation-card {
    transition: none;
  }
  .auth-confirmation-card {
    transform: none;
  }
}