/* ============================================================
   auth.truthly.ai — V2 Liquid Glass Design System
   Figma: Onboarding file, Auth section (node 200:1076)
   ============================================================ */

/* --- Design Tokens (from Figma) --- */
:root {
  --v2-bg-sunken: #000000;
  --v2-bg-brand: #72b7f9;
  --v2-border-subtle: #303030;
  --v2-text-bold: #ebebeb;
  --v2-text-subtle: #d0d0d0;
  --v2-text-white: #ffffff;
  --v2-space-xs: 8px;
  --v2-space-s: 12px;
  --v2-space-m: 16px;
  --v2-space-l: 24px;
  --v2-space-xl: 72px;
  --v2-corner-m: 12px;
  --v2-corner-round: 100px;
  --v2-font-family: 'Albert Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Glass pill — shared by segment indicator + social buttons */
  --v2-glass-pill-bg: rgba(255, 255, 255, 0.12);
  --v2-glass-pill-border: rgba(255, 255, 255, 0.10);
  --v2-glass-pill-bg-hover: rgba(255, 255, 255, 0.16);

  /* Continue button — uses background-blend-mode from Figma DevMode */
}

/* --- V2 active gate — hides V1 .page synchronously via body class set
   by the inline <script> in <head>. Avoids the one-frame flash of the
   V1 container before auth.js runs. */
body.v2-active > .page { display: none; }

/* --- Page Layout --- */
.v2-page {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 100vh is clipped by the iOS Safari browser chrome; 100dvh (dynamic
     viewport units) accounts for it. Keep 100vh as fallback for older
     WebKit. Safe-area insets prevent content from being clipped under the
     home indicator / notch on iPhone 12+. */
  min-height: 100vh;
  min-height: 100dvh;
  /* Allow content taller than the viewport (short / landscape phones) to
     scroll rather than clip.  Paired with `.v2-screen { margin: auto }`,
     which centers when there is spare height but keeps the top reachable
     when content overflows. */
  overflow-y: auto;
  background: var(--v2-bg-sunken);
  font-family: var(--v2-font-family);
  color: var(--v2-text-bold);
  padding: var(--v2-space-l);
  padding-top: max(var(--v2-space-l), env(safe-area-inset-top));
  padding-bottom: max(var(--v2-space-l), env(safe-area-inset-bottom));
  padding-left: max(var(--v2-space-l), env(safe-area-inset-left));
  padding-right: max(var(--v2-space-l), env(safe-area-inset-right));
}

/* Step-2 screens hoist a fixed top-logo (top:20px) and back button (top:72px,
   ~24px tall) to the page root, so they overlay the flow.  Reserve top
   clearance on those pages only so the centered content never rides under the
   fixed chrome on short / landscape viewports or when the mobile keyboard
   shrinks the visible page.  The class is toggled in app.ts (navigate())
   whenever the fixed chrome is hoisted — deliberately NOT `:has()`, which
   isn't available in older iOS WKWebView / Android WebView (our client apps
   embed the auth flow in webviews).  The entry screen has no fixed chrome
   (logo is in-flow), so the class is absent and it stays truly centered per
   Figma. */
.v2-page.v2-page--fixed-chrome {
  padding-top: max(104px, env(safe-area-inset-top));
}

/* Screen acts as the centering container */
.v2-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 500px;
  /* Auto margins center the screen when there is spare height and pin it to
     the top (scrollable, top reachable) when content exceeds the viewport —
     the overflow-safe replacement for the old entry-screen max-height cap. */
  margin: auto;
  position: relative;
  animation: v2-fadeIn 0.2s ease-out;
}

/* Step-1 entry screen centers branding, form-area, and legal as a single
   group, matching Figma "Signup/Signin - Entry" (node 1038:11258): the root
   and inner "Content" frames both use `justify-content: center` with a 32px
   gap between blocks.  The parent `.v2-page` (align-items/justify-content
   center) handles vertical centering; short/landscape viewports stay safe via
   `.v2-page { overflow-y: auto }` + `.v2-screen { margin: auto }`. */
.v2-entry-screen {
  justify-content: center;
  /* Figma "Content" gap between logo / form / legal (node 1038:11259).
     Figma's --space/xl is 32px, but the code token --v2-space-xl is 72px —
     naming mismatch, so use the literal 32px here. */
  gap: 32px;
}

/* --- Branding --- */
.v2-branding {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--v2-space-xs);
  margin-bottom: 48px;
}

/* Entry screen distributes via space-between within the 594 cap, so the
   base 48px would double up on top of the natural ~47.5px gap.  Base
   rule stays intact for the 9+ Step-2 screens (OTP, federated,
   signup-conflict, reset-password, support, verify-email, error) that
   call createLogo() outside the entry layout. */
.v2-entry-screen .v2-branding {
  margin-bottom: 0;
}

.v2-logo {
  width: 202px;
  /* Figma 200:1076 instance is 202x67.09. Forcing explicit height
     instead of `auto` (which derives ~66.6px from the SVG's 283x93
     viewBox) closes the sub-pixel gap. The 0.4% vertical stretch is
     imperceptible. */
  height: 67px;
}

.v2-tagline {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  /* Figma tagline ("Seek boldly") uses --text/bold token = #ebebeb,
     not pure white. Matches the rest of the heading hierarchy on the
     entry screen. */
  color: var(--v2-text-bold);
  text-align: center;
  margin: 0;
}

/* --- Form Area --- */
.v2-form-area {
  display: flex;
  flex-direction: column;
  gap: var(--v2-space-l);
  width: 100%;
}

.v2-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--v2-space-m);
  width: 100%;
}

/* ============================================================
   SEGMENTED CONTROL
   Figma: pill-shaped container with glass indicator pill
   ============================================================ */
.v2-segmented-control {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.5px solid var(--v2-border-subtle);
  border-radius: var(--v2-corner-round);
  padding: 3px;
  position: relative;
  background: transparent;
}

.v2-segment {
  flex: 1;
  /* Figma 200:1076 segmented control is 38px total (segments ~32px).
     Matches the Figma spec exactly; previously held at 44px for WCAG
     2.5.5 tap target, traded for visual parity per the EOW polish
     directive. The container padding of 3px each side puts segments
     at 32px + 6 = 38 total. */
  min-height: 32px;
  padding: 6px 8px;
  font-family: var(--v2-font-family);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--v2-text-bold);
  text-align: center;
  background: transparent;
  border: none;
  border-radius: 34px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: background 0.15s ease, color 0.2s ease;
  white-space: nowrap;
}

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

/* Glass indicator pill behind active tab */
.v2-segment-indicator {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 34px;
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--v2-glass-pill-bg);
  border: 0.5px solid var(--v2-glass-pill-border);
}

.v2-segmented-control[data-active="phone"] .v2-segment-indicator {
  transform: translateX(100%);
}

/* ============================================================
   TEXT FIELD
   Figma: dark bg, subtle border, 12px radius
   ============================================================ */
.v2-text-field {
  width: 100%;
}

.v2-text-field input {
  width: 100%;
  padding: var(--v2-space-m);
  font-family: var(--v2-font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--v2-text-bold);
  background: var(--v2-bg-sunken);
  border: 1px solid var(--v2-border-subtle);
  border-radius: var(--v2-corner-m);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.v2-text-field input::placeholder {
  color: var(--v2-text-subtle);
}

.v2-text-field input:focus {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.04);
}

/* Show/hide password toggle (TRUTHLYDEV-3191).
   The wrapper anchors the absolutely-positioned button; the input
   reserves right padding so revealed text never sits under the icon. */
.v2-text-field--revealable {
  position: relative;
}

.v2-text-field--revealable input {
  /* Room for the 40px-wide toggle target on the right edge. */
  padding-right: 48px;
}

.v2-password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: var(--v2-corner-m);
  /* #d0d0d0 on #000000 = ~13.8:1, well above WCAG AA. */
  color: var(--v2-text-subtle);
  cursor: pointer;
  transition: color 0.15s ease;
}

.v2-password-toggle:hover {
  color: var(--v2-text-bold);
}

.v2-password-toggle:focus-visible {
  outline: 2px solid var(--v2-bg-brand);
  outline-offset: 2px;
  color: var(--v2-text-bold);
}

.v2-password-toggle__icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
}

.v2-password-toggle__icon--hidden {
  display: none;
}

.v2-text-field-error input {
  /* Figma --border/danger token = #ff9581 (warmer red than the
     previous #ff6b6b). Hint text below keeps its own pink-red. */
  border-color: #ff9581;
}

/* Error chip below the field — matches Figma 392:3438 inline error:
   a small dark chip with a 16px warning-triangle icon prefix and
   --text/bold body text. The icon is rendered as a CSS `::before`
   pseudo-element so callers don't need to construct it in JS. */
.v2-text-field-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--v2-text-bold);
  background: #0e0e0e;
  border-radius: 4px;
}

.v2-text-field-hint::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9581' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ============================================================
   BUTTONS — BASE
   ============================================================ */
.v2-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--v2-space-xs);
  width: 100%;
  height: 53px;
  font-family: var(--v2-font-family);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.v2-btn:active {
  transform: scale(0.98);
}

.v2-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   PRIMARY BUTTON (Continue / Sign In)
   Figma: deep blue with subtle depth — NOT the bright #72b7f9
   The Figma layer stack (white + saturation + overlay + brand)
   composites to a deep muted blue.
   ============================================================ */
.v2-btn-primary {
  color: var(--v2-text-bold);
  border-radius: var(--v2-corner-round);
  /*
   * Figma uses background-blend-mode: plus-darker — non-standard (Apple only).
   * Computed result from Figma screenshot: deep navy ~#145a96.
   * Gradient stops chosen so the perceptual average matches that
   * composite (~#155d95) rather than the darker ~#144370 the previous
   * #175e9c→#114f88 pair produced.
   */
  background: linear-gradient(180deg, #1a6caa 0%, #125080 100%);
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.10), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
}

.v2-btn-primary:hover {
  background: linear-gradient(180deg, #2076b5 0%, #155a8e 100%);
}

.v2-btn-primary span {
  position: relative;
  z-index: 1;
}

/* ============================================================
   GLASS BUTTON (Google / Apple social sign-in)
   Figma: very dark, barely visible against the background.
   Subtle border and slight background lift on hover.
   ============================================================ */
.v2-btn-glass {
  color: var(--v2-text-bold);
  border-radius: 34px;
  background: var(--v2-glass-pill-bg);
  border: 0.5px solid var(--v2-glass-pill-border);
}

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

.v2-btn-glass span,
.v2-btn-glass svg {
  position: relative;
  z-index: 1;
}

/* Social button icon */
.v2-btn-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ============================================================
   DIVIDER
   ============================================================ */
.v2-divider {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.v2-divider::before,
.v2-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--v2-border-subtle);
}

.v2-divider span {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--v2-text-subtle);
}

/* --- Social Buttons Group --- */
.v2-social-group {
  display: flex;
  flex-direction: column;
  gap: var(--v2-space-xs);
  width: 100%;
}

/* --- Legal Footer --- */
.v2-legal {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--v2-text-subtle);
  text-align: center;
  max-width: 243px;
  margin-left: auto;
  margin-right: auto;
}

.v2-legal a {
  color: var(--v2-text-bold);
  font-weight: 600;
  text-decoration: none;
}

.v2-legal a:hover {
  text-decoration: underline;
}

/* --- Phone Warning --- */
.v2-phone-warning {
  text-align: center;
  padding: 4px 32px;
}

.v2-phone-warning p {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--v2-text-subtle);
  margin: 0;
}

/* --- Error Message --- */
.v2-error {
  color: #ff6b6b;
  font-size: 14px;
  text-align: center;
  min-height: 20px;
}

/* --- Screen Transitions --- */
@keyframes v2-fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Back Button --- */
.v2-back-btn {
  position: fixed;
  top: var(--v2-space-xl);
  left: var(--v2-space-l);
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--v2-text-bold);
  font-family: var(--v2-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px;
  z-index: 10;
}

.v2-back-btn svg {
  flex-shrink: 0;
}

.v2-back-btn:hover {
  color: var(--v2-text-white);
}

/* --- Step 2: Password Screen --- */
.v2-email-display {
  font-size: 14px;
  color: var(--v2-text-subtle);
  text-align: center;
  margin-bottom: var(--v2-space-xs);
}

.v2-forgot-link {
  display: block;
  font-size: 14px;
  /* Figma treats Forgot/Resend links as bright #ebebeb 600 SemiBold
     (matches the OTP screen's .v2-resend-link__btn). Was previously
     dim 400 / --text-subtle. */
  font-weight: 600;
  color: var(--v2-text-bold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--v2-font-family);
  margin-top: var(--v2-space-xs);
}

.v2-forgot-link:hover {
  opacity: 0.8;
}

/* --- Step 2: OTP Screen --- */
.v2-otp-message {
  font-size: 14px;
  line-height: 1.3;
  color: var(--v2-text-subtle);
  text-align: center;
}

.v2-otp-message strong {
  color: var(--v2-text-bold);
}

.v2-resend-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--v2-space-xs);
}

.v2-resend-btn {
  background: none;
  border: none;
  font-family: var(--v2-font-family);
  font-size: 14px;
  color: var(--v2-text-subtle);
  cursor: pointer;
  padding: 8px;
}

.v2-resend-btn:hover:not(:disabled) {
  color: var(--v2-text-bold);
}

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

.v2-resend-timer {
  font-size: 14px;
  color: var(--v2-text-subtle);
}

/* --- Stagnant-X close button ---
   Pattern lifted from the Preferences / Customization Flow section of
   the Figma file (per Ed's directive for login). The button is hidden
   by default and fades in after the user has been idle on a screen for
   ~5 seconds. Any interaction (pointerdown, keydown, input, scroll,
   focus) resets the timer. Click dismisses the auth flow back to the
   native host. */
.v2-stagnant-close {
  position: fixed;
  /* Use safe-area-inset so the button clears the notch / Dynamic Island
     on iPhone 14 Pro+. Matches the safe-area pattern on .v2-page.
     `safe-area-inset-right` only resolves to a non-zero value on notched
     iPhones in landscape orientation — portrait WebView gets 0. */
  top: max(var(--v2-space-l), env(safe-area-inset-top));
  right: max(var(--v2-space-l), env(safe-area-inset-right));
  z-index: 60;
  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;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
  transition: opacity 0.25s ease, transform 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.v2-stagnant-close.visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.v2-stagnant-close:hover {
  background: var(--v2-glass-pill-bg-hover);
}

.v2-stagnant-close:active {
  transform: scale(0.92);
}

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

.v2-stagnant-close svg {
  display: block;
  width: 20px;
  height: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .v2-stagnant-close {
    transition: none;
  }
}

/* --- Loader Overlay --- */
.v2-loader {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.v2-loader.active {
  display: flex;
}

.v2-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--v2-text-white);
  border-radius: 50%;
  animation: v2-spin 0.8s linear infinite;
}

@keyframes v2-spin {
  to { transform: rotate(360deg); }
}

/* --- Responsive --- */
@media (max-width: 480px) {
  /* No .v2-page override: mobile keeps the base centered layout
     (align-items/justify-content: center) to match Figma, which centers the
     content group vertically.  Base padding is already 24px (--v2-space-l),
     matching Figma's 24px Content padding.  Short/landscape viewports stay
     scroll-safe via `.v2-page { overflow-y: auto }` + `.v2-screen { margin: auto }`. */

  /* Step-2 screens that render .v2-branding via createLogo() outside the entry
     layout tighten the logo→heading gap on mobile.  The entry screen resets
     this to 0 (spacing owned by .v2-entry-screen's gap). */
  .v2-branding {
    margin-bottom: 32px;
  }
}

/* --- Tab panels --- */
.v2-tab-panel {
  display: none;
  flex-direction: column;
  gap: var(--v2-space-m);
}

.v2-tab-panel.active {
  display: flex;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  .v2-screen { animation: none; }
  .v2-segment-indicator { transition: none; }
  .v2-spinner { animation: none; }
}
