/* ============================================================
   Step-2 Layout (TRUTHLYDEV-1322 — Liz redesign 2026-04-25)
   Figma: Onboarding file, Auth section (node 368:3029)

   Shared layout primitives for every screen past Step-1 entry —
   Age Check, Enter Password, Enter SMS Code, Create Password,
   Reset Password, Verify Email, etc. See components-step2.ts.
   ============================================================ */

/* --- Top-left wordmark ---
   Fixed-position so it stays put across screen-transition animations
   on .v2-screen. */
.v2-top-logo {
  position: fixed;
  top: 24px;
  left: 32px;
  z-index: 40;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.v2-top-logo__img {
  width: 96px;
  height: auto;
  display: block;
}

@media (max-width: 480px) {
  .v2-top-logo {
    top: 20px;
    left: 20px;
  }
  .v2-top-logo__img {
    width: 80px;
  }
}

/* --- Centered heading + subtitle ---
   Matches Figma node 389:3076 (`Quick check – are you 13 or older?`)
   + 389:3077 (`Truthly is intended for users 13 and older.`).
   24px / 1.2 lh / 600 weight for title; 16px / 1.3 lh / 400 for
   subtitle. */
.v2-screen-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--v2-space-xs);
  text-align: center;
  /* 60px Step-2 inter-block gap per Figma 200:1076 family (Age Check,
     Enter Password, SMS Code, Create Password, Reset Email Sent — every
     frame uses 60px between heading / inputs / nav row). Was previously
     `var(--v2-space-l)` = 24px which collapsed the spec's breathing room. */
  margin-bottom: 60px;
}

.v2-screen-heading__title {
  margin: 0;
  font-family: var(--v2-font-family);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--v2-text-bold);
}

.v2-screen-heading__subtitle {
  margin: 0;
  font-family: var(--v2-font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--v2-text-subtle);
}

/* --- Bottom navigation row (back arrow + primary pill) ---
   Liz's Step-2 layout puts navigation at the bottom of the centered
   content column with the back arrow LEFT-aligned and the primary
   CTA RIGHT-aligned. The two buttons are visually separate, not a
   horizontal pair sharing a container background. */
.v2-bottom-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* 60px Step-2 inter-block gap — see `.v2-screen-heading margin-bottom`
     for the matching Figma reference. */
  margin-top: 60px;
  /* Notched/Dynamic-Island iPhones in mobile Safari sit very close to
     the home indicator; the new bottom row is the default placement
     for primary CTAs across every Step-2 screen. (PR #36 review F4
     and #33 A3.) */
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Back arrow — circular dark glass button */
.v2-back-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--v2-glass-pill-bg);
  border: 0.5px solid var(--v2-glass-pill-border);
  color: var(--v2-text-bold);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.v2-back-circle:hover {
  background: var(--v2-glass-pill-bg-hover);
}

.v2-back-circle:active {
  transform: scale(0.94);
}

.v2-back-circle:focus-visible {
  outline: 2px solid var(--v2-bg-brand);
  outline-offset: 2px;
}

.v2-back-circle svg {
  display: block;
}

/* Primary pill — Liz's design uses a pill-shape with a trailing right
   arrow. This selector layers on TOP of `.v2-btn` / `.v2-btn-primary`
   / `.v2-btn-glass` from styles-v2.css to override width / padding /
   layout while keeping the existing color treatments and disabled
   state. */
.v2-primary-pill {
  width: auto;
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v2-space-xs);
  border-radius: var(--v2-corner-round);
  font-size: 14px;
  font-weight: 600;
}

.v2-primary-pill__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.v2-primary-pill__arrow svg {
  display: block;
}

/* When the pill is disabled, dim the trailing arrow to match. The
   underlying `.v2-btn:disabled` styles handle the label opacity. */
.v2-primary-pill:disabled .v2-primary-pill__arrow {
  opacity: 0.5;
}

/* --- Glass checkbox card (Age Check pattern) ---
   Matches Figma node 392:3336 — full-width card with a centered
   checkbox + inline label. */
.v2-checkbox-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--v2-space-s);
  width: 100%;
  padding: var(--v2-space-m);
  border-radius: var(--v2-corner-m);
  /* Figma --bg/default token = solid #0e0e0e for Step-2 cards, not the
     translucent glass-pill fill used by the segmented control and
     social buttons. */
  background: #0e0e0e;
  border: 0.5px solid var(--v2-glass-pill-border);
  cursor: pointer;
  transition: background 0.15s ease;
}

.v2-checkbox-card:hover {
  background: #1a1a1a;
}

/* Figma 392:3336 uses a CheckSquare icon as the affordance, no native
   checkbox primitive. The visible icon stays 24x24 but the button hit
   area is 44x44 (WCAG 2.5.5 / Apple 44pt minimum tap target). */
.v2-checkbox-card__input {
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--v2-text-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

.v2-checkbox-card__input svg {
  display: block;
  width: 24px;
  height: 24px;
}

.v2-checkbox-card__input:focus-visible {
  outline: 2px solid var(--v2-bg-brand);
  outline-offset: 2px;
  border-radius: 4px;
}

.v2-checkbox-card__label {
  font-family: var(--v2-font-family);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--v2-text-bold);
  user-select: none;
}

/* --- Icon card (envelope / check-square) ---
   Matches Figma node 398:7227 — an 88x88 rounded-square dark-glass tile
   that frames a 48x48 icon. Used by the Verify Email "open your inbox"
   confirmation, and reusable for any Step-2 confirmation that needs a
   centered hero icon. */
.v2-icon-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: var(--v2-corner-l, 16px);
  /* Solid #0e0e0e per Figma --bg/default — see .v2-checkbox-card note. */
  background: #0e0e0e;
  border: 0.5px solid var(--v2-glass-pill-border);
  color: var(--v2-text-bold);
  align-self: center;
}

.v2-icon-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.v2-icon-card__icon svg {
  display: block;
}

/* --- Resend link (centered) ---
   Centered "Resend …" link with a cooldown timer. The button style
   matches Figma node 397:7066 / 392:3828 — a small white pill-link
   centered horizontally. */
.v2-resend-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: var(--v2-space-s);
}

.v2-resend-link__btn {
  font-family: var(--v2-font-family);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--v2-text-bold);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: opacity 0.15s ease;
}

.v2-resend-link__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.v2-resend-link__btn:not(:disabled):hover {
  opacity: 0.8;
}

.v2-resend-link__timer {
  font-family: var(--v2-font-family);
  font-size: 13px;
  color: var(--v2-text-subtle);
}

/* --- 6-digit OTP row (TRUTHLYDEV-2205) ---
   Matches Figma node 392:3786 — six 50x53 rounded-square boxes with
   8px gaps, row centered within the column.

   Single real `<input>` (`.v2-otp-input`) is absolutely positioned to
   overlay the entire row and is visually invisible — it captures focus
   and iOS SMS autofill. Six `<div>` presentation boxes
   (`.v2-otp-box`) layer on top with `pointer-events: none` so taps
   pass through to the input. JS mirrors `input.value[i]` into each
   box's text content. The single-input pattern is Apple's documented
   shape for `autocomplete="one-time-code"` — the previous multi-input
   layout silently truncated the autofill payload at `maxlength=1`. */
.v2-otp-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.v2-otp-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  /* Transparent text + caret so the input is visually invisible. Boxes
     render the digits via the JS-driven `textContent` mirror. Caret
     also hidden — would otherwise float over whichever box is active
     and double-cue with the focused-box highlight. */
  color: transparent;
  caret-color: transparent;
  /* >= 16px so mobile Safari does not auto-zoom the viewport when this
     real (but visually invisible) input receives focus on the OTP
     screen. The digits the user sees are rendered by the `.v2-otp-box`
     divs (22px), and this input's own text is transparent, so the size
     here has no visual effect (TRUTHLYDEV-3223). */
  font-size: 16px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  /* `text-align: center` keeps any browser-vendor autofill UI affordance
     (e.g. iOS strong-password reveal eye) roughly centered if it ever
     leaks through. */
  text-align: center;
  z-index: 1;
}

.v2-otp-box {
  position: relative;
  width: 50px;
  height: 53px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--v2-font-family);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  color: var(--v2-text-bold);
  background: var(--v2-bg-sunken);
  border: 1px solid var(--v2-border-subtle);
  border-radius: var(--v2-corner-m);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  /* Clicks pass through to the underlying input so tapping any box
     focuses the single input element. */
  pointer-events: none;
  user-select: none;
}

.v2-otp-box.v2-otp-box--focused {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06);
}

@media (max-width: 480px) {
  .v2-otp-box {
    width: 44px;
    height: 48px;
    font-size: 20px;
  }
}