/* =============================================================================
   AUTH.CSS — TripDeck Authentication & Account UI
   Modal, buttons, status banners, drawer chrome, command pill
   ============================================================================= */


/* ─── HUD Command Pill ──────────────────────────────────────────────────────── */

.command-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--bg-surface-elevated, #1a1d29);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
  border-radius: 20px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth, all 0.25s cubic-bezier(0.16, 1, 0.3, 1));
  flex-shrink: 0;
}

.command-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent-flight, #00f2fe);
  box-shadow: 0 0 0 3px var(--accent-flight-glow, rgba(0, 229, 255, 0.15));
}

.command-pill .sync-dot,
.sync-dot {
  font-size: 10px;
  line-height: 1;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.sync-dot.synced {
  color: #00e676;
  text-shadow: 0 0 8px rgba(0, 230, 118, 0.6);
}

.sync-dot.local {
  color: #ffab00;
  text-shadow: 0 0 8px rgba(255, 171, 0, 0.6);
}

.sync-dot.offline {
  color: #ff5252;
  text-shadow: 0 0 8px rgba(255, 82, 82, 0.6);
}

.offline-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sync-dot.pending,
.sync-dot.saving {
  color: #38bdf8;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
  animation: sync-pending-pulse 1.4s ease-in-out infinite;
}

.sync-dot.error {
  color: #ff5252;
  text-shadow: 0 0 8px rgba(255, 82, 82, 0.6);
}

@keyframes sync-pending-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

.command-pill .pill-avatar {
  font-size: 13px;
  display: inline-flex;
  align-items: center;
}

.command-pill .pill-user-id {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Matches the mobile breakpoint used everywhere else (hud.css, base.css).
   This used to be 767.98px, a stray 0.02px off from the 768px breakpoint
   that shows the bottom mobile-nav — at exactly 768px wide, that gap meant
   neither rule applied and both the header pill and the nav's account tab
   could be visible at once. */
@media (max-width: 768px) {
  #hud-command-pill {
    display: none !important;
  }
}


/* ─── Mobile Bottom Tab Sync Badge ─────────────────────────────────────────── */

.nav-icon-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.badge-sync-dot {
  position: absolute;
  top: -2px;
  right: -4px;
  font-size: 9px;
  line-height: 1;
}


/* ─── Modal Overlay ─────────────────────────────────────────────────────────── */
/*
  Using opacity + pointer-events pattern for smooth transitions.
  .active class drives visibility. CSS transitions animate in/out.
*/

.auth-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;

  /* Hidden state */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.auth-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}


/* ─── Modal Card ────────────────────────────────────────────────────────────── */

.auth-modal-card {
  background: var(--bg-surface, #12141c);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  border-radius: 20px;
  width: 100%;
  max-width: 460px;
  padding: 32px 32px 28px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 8px 20px rgba(0, 0, 0, 0.4);
  position: relative;
  font-family: var(--font-sans);
  color: var(--text-primary);
  box-sizing: border-box;

  /* Entrance animation */
  transform: scale(0.96) translateY(6px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-modal-overlay.active .auth-modal-card {
  transform: scale(1) translateY(0);
}

@media (max-width: 480px) {
  .auth-modal-card {
    padding: 24px 20px 22px;
    border-radius: 16px;
    max-width: 100%;
  }
}


/* ─── Modal Header ──────────────────────────────────────────────────────────── */

.auth-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 28px;
  gap: 12px;
}

/* Brand block: icon + title + subtitle */
.auth-modal-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.auth-modal-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.18), rgba(37, 99, 235, 0.22));
  border: 1px solid rgba(0, 229, 255, 0.25);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  box-shadow: 0 4px 12px rgba(0, 229, 255, 0.1);
}

.auth-modal-icon svg {
  width: 22px;
  height: 22px;
  color: var(--accent-flight, #00e5ff);
  flex-shrink: 0;
}

.auth-modal-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.auth-modal-subtitle {
  font-size: 13px;
  color: var(--text-muted, #94a3b8);
  margin: 0;
  line-height: 1.4;
}


/* ─── Close Button ──────────────────────────────────────────────────────────── */

.auth-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  padding: 0;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.auth-close-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--border-color, rgba(255, 255, 255, 0.12));
}

.auth-close-btn:focus-visible {
  outline: 2px solid var(--accent-flight, #00e5ff);
  outline-offset: 2px;
}

.auth-close-btn svg {
  width: 16px;
  height: 16px;
}


/* ─── Status Banner ─────────────────────────────────────────────────────────── */
/*
  Replaces the old .auth-error-msg. States: error | info | success
  Set via data-state attribute. Hidden when empty.
*/

.auth-status-banner {
  display: none;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 20px;
  animation: auth-banner-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-status-banner.active {
  display: block;
}

/* Error state */
.auth-status-banner[data-state="error"] {
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.28);
  color: #fca5a5;
}

/* Info state — calm, non-alarming */
.auth-status-banner[data-state="info"] {
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.22);
  color: var(--accent-flight, #00e5ff);
}

/* Success state */
.auth-status-banner[data-state="success"] {
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.22);
  color: #86efac;
}

.auth-status-banner-message {
  display: block;
  margin-bottom: 0;
}

/* Inline action inside the banner */
.auth-banner-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: inherit;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.auth-banner-action:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
}

@keyframes auth-banner-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ─── Passkey View ──────────────────────────────────────────────────────────── */

.auth-passkey-view,
.auth-recovery-view {
  /* Views toggled with hidden attribute — no display hacks */
}


/* ─── Action Buttons ────────────────────────────────────────────────────────── */
/*
  Two variants: primary (solid) and secondary (outlined).
  Both: min-height 56px, full-width, stable layout (NO translateY on hover).
  Hover only changes: box-shadow, border-color, background tint.
*/

.auth-action-block {
  margin-bottom: 12px;
}

.auth-action-btn {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: 14px 20px;
  border-radius: 14px;
  font-family: var(--font-sans);
  cursor: pointer;
  text-align: left;
  gap: 14px;
  border: 1.5px solid transparent;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;

  /* Stable — no transform on hover */
  transition:
    box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    background 0.25s ease,
    opacity 0.2s ease;
}

.auth-action-btn:focus-visible {
  outline: 2px solid var(--accent-flight, #00e5ff);
  outline-offset: 2px;
}

/* Loading state — spinner replaces icon, button dims */
.auth-action-btn[data-loading="true"] {
  opacity: 0.75;
  pointer-events: none;
  cursor: not-allowed;
}

.auth-action-btn[data-loading="true"] .auth-action-icon::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: auth-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.auth-action-btn[data-loading="true"] .auth-action-icon svg {
  display: none;
}

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


/* ── Primary Variant ──────────────────────────────────────────────────────── */

.auth-action-btn--primary {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
}

.auth-action-btn--primary:hover {
  background: linear-gradient(135deg, #2f6fee 0%, #2153d4 100%);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 6px 24px rgba(37, 99, 235, 0.55);
}

.auth-action-btn--primary:active {
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

/* Subtle shimmer layer on primary */
.auth-action-btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
  border-radius: inherit;
  pointer-events: none;
}


/* ── Secondary Variant ────────────────────────────────────────────────────── */

.auth-action-btn--secondary {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-color, rgba(255, 255, 255, 0.14));
  color: var(--text-primary);
  box-shadow: none;
}

.auth-action-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.auth-action-btn--secondary:active {
  background: rgba(255, 255, 255, 0.06);
}


/* ── Button Content Layout ─────────────────────────────────────────────────── */

.auth-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.auth-action-icon svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.auth-action-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.auth-action-label {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.auth-action-sub {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  opacity: 0.7;
}

/* Recovery submit button: label only (no sub) */
.auth-action-btn .auth-action-label:only-child {
  font-size: 14px;
}


/* ─── Visual Divider ────────────────────────────────────────────────────────── */

.auth-visual-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 6px 0 8px;
  color: var(--text-muted, #94a3b8);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  gap: 10px;
}

.auth-visual-divider::before,
.auth-visual-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color, rgba(255, 255, 255, 0.1));
}


/* ─── Signups Paused Notice ────────────────────────────────────────────────── */

.auth-signups-paused-notice {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted, #94a3b8);
  background: var(--bg-surface-elevated, rgba(255, 255, 255, 0.04));
  border: 1px dashed var(--border-color, rgba(255, 255, 255, 0.15));
  border-radius: 8px;
  padding: 10px 14px;
  margin: 10px 0 4px;
  line-height: 1.4;
}


/* ─── Recovery Link Row ─────────────────────────────────────────────────────── */

.auth-recovery-link-row {
  text-align: center;
  margin-top: 16px;
}

.auth-fallback-link {
  color: var(--text-muted, #94a3b8);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}

.auth-fallback-link:hover {
  color: var(--accent-flight, #00e5ff);
  border-bottom-color: rgba(0, 229, 255, 0.4);
}

.auth-fallback-link:focus-visible {
  outline: 2px solid var(--accent-flight, #00e5ff);
  outline-offset: 3px;
  border-radius: 3px;
}


/* ─── Confirm New Account View ──────────────────────────────────────────────── */

.auth-confirm-new-fineprint {
  font-size: 11.5px;
  color: var(--text-muted, #94a3b8);
  line-height: 1.5;
  text-align: center;
  margin: 14px 0 0;
}

.auth-confirm-new-fineprint a {
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.auth-confirm-new-fineprint a:hover {
  color: var(--accent-flight, #00e5ff);
  border-bottom-color: rgba(0, 229, 255, 0.4);
}


/* ─── Recovery View Form ────────────────────────────────────────────────────── */

.auth-recovery-desc {
  font-size: 13px;
  color: var(--text-muted, #94a3b8);
  margin: 0 0 20px;
  line-height: 1.5;
  text-align: center;
}

.auth-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.auth-form-group label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.auth-field-hint {
  font-size: 11px;
  color: var(--text-muted, #64748b);
  line-height: 1.4;
}

.recovery-code-input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.1);
  border: 1.5px solid var(--border-color, rgba(255, 255, 255, 0.15));
  border-radius: var(--border-radius-md, 10px);
  color: var(--text-primary);
  font-family: monospace, var(--font-mono, monospace);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.recovery-code-input:focus {
  border-color: var(--accent-flight, #00e5ff);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.18);
}


/* ─── Autofill Anchor ───────────────────────────────────────────────────────── */
/*
  Visually hidden but rendered — needed for browser conditional autofill.
  Must NOT use display:none or visibility:hidden.
*/

.passkey-autofill-anchor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  border: none;
  background: transparent;
}


/* ─── Unlock Modal Specifics ────────────────────────────────────────────────── */

.unlock-desc {
  font-size: 13px;
  color: var(--text-muted, #94a3b8);
  margin: 0 0 20px;
  line-height: 1.5;
  text-align: center;
}

.unlock-secondary-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.unlock-secondary-row .auth-action-btn {
  flex: 1;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 10px;
}

.unlock-secondary-row .auth-action-btn .auth-action-label {
  font-size: 13px;
}


/* ─── User Menu Popover ─────────────────────────────────────────────────────── */

.user-menu-popover {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 24px;
  background: var(--bg-surface, #12141c);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.18));
  border-radius: var(--border-radius-md, 12px);
  padding: 14px;
  width: 240px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
  z-index: 1000;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.user-menu-popover.active {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-menu-info {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
  color: var(--text-muted);
}

.user-menu-email {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-smooth);
  text-align: left;
}

.user-menu-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.user-menu-btn.danger {
  color: #ff5252;
}

.user-menu-btn.danger:hover {
  background: rgba(255, 82, 82, 0.12);
}


/* ─── Guest State Pill CTA ──────────────────────────────────────────────────── */

.command-pill.highlight-cta {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(37, 99, 235, 0.25));
  border: 1.5px solid var(--accent-flight, #00e5ff);
  color: var(--text-primary);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.3);
  animation: pill-glow 3s infinite alternate;
}

@keyframes pill-glow {
  0% {
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.2);
  }

  100% {
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.5);
  }
}


/* ─── Auth Toast Notification ───────────────────────────────────────────────── */

.auth-toast-notification {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: var(--bg-surface-elevated, #1e293b);
  color: var(--accent-flight, #00e5ff);
  border: 1px solid var(--accent-flight, #00e5ff);
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  opacity: 0;
  display: none;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}

.auth-toast-notification.active {
  display: block;
  opacity: 1;
}

.auth-toast-notification--action.active {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: normal;
  max-width: min(90vw, 420px);
}

.auth-toast-action-btn {
  flex-shrink: 0;
  background: var(--accent-flight, #00e5ff);
  color: #0a0b0d;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: opacity 0.2s ease;
}

.auth-toast-action-btn:hover {
  opacity: 0.85;
}

/* Mobile map sign-in upsell — a standalone button (not the toast action
   button above) so it doesn't inherit that class's narrow-viewport
   `flex: 1 1 auto`, which — inside this button's own flex column — made it
   stretch to fill the entire map panel's height. */
.map-upsell-signup-btn {
  flex: 0 0 auto;
  align-self: center;
  background: var(--accent-flight, #00e5ff);
  color: #0a0b0d;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: opacity 0.2s ease;
}

.map-upsell-signup-btn:hover {
  opacity: 0.85;
}

.auth-toast-dismiss-btn {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.auth-toast-dismiss-btn:hover {
  color: var(--text-primary, #fff);
}

/* Narrow screens: the row layout above squeezes the message into a thin
   column and wraps it letter-by-letter. Stack message on its own line,
   button + dismiss on the next, spanning the full width instead of the
   fixed max-width used on desktop. */
@media (max-width: 480px) {
  .auth-toast-notification--action.active {
    left: 16px;
    right: 16px;
    transform: none;
    max-width: none;
    width: auto;
    flex-wrap: wrap;
  }

  .auth-toast-notification--action.active span {
    flex: 1 1 100%;
  }

  .auth-toast-action-btn {
    flex: 1 1 auto;
    text-align: center;
  }
}


/* ─── Onboarding Help Popup ─────────────────────────────────────────────────── */

.account-help-popup {
  position: fixed;
  background: var(--bg-surface-elevated, #1e293b);
  border: 1px solid var(--accent-flight, #00e5ff);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  padding: 12px 16px;
  max-width: 280px;
  z-index: 1990;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-primary, #ffffff);
  animation: popup-fade-in 0.3s ease-out;
}

.account-help-popup.fade-out {
  animation: popup-fade-out 0.2s ease-in forwards;
}

.help-popup-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.help-popup-close {
  background: none;
  border: none;
  color: var(--text-muted, #94a3b8);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.help-popup-close:hover {
  color: var(--text-primary, #ffffff);
}

.help-popup-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

@keyframes popup-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes popup-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(10px);
  }
}


/* ─── Auth Checkbox Group ───────────────────────────────────────────────────── */

.auth-checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
  padding: 12px;
  background: rgba(255, 171, 0, 0.08);
  border: 1px solid rgba(255, 171, 0, 0.25);
  border-radius: var(--border-radius-md, 10px);
}

.auth-checkbox-group input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--accent-car, #ffab00);
  cursor: pointer;
  width: 16px;
  height: 16px;
}

.auth-checkbox-label {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
  cursor: pointer;
}

.auth-checkbox-label a {
  color: var(--accent-flight, #00e5ff);
  text-decoration: underline;
}

.auth-checkbox-label a:hover {
  color: var(--accent-green, #00ff66);
}


/* ─── Auth Divider (legacy, kept for other modals) ─────────────────────────── */

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 16px 0 12px;
  color: var(--text-muted, #94a3b8);
  font-size: 12px;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
}

.auth-divider span {
  padding: 0 10px;
}


/* ─── Submit Button (generic, used in non-passkey modals) ───────────────────── */

.auth-submit-btn {
  width: 100%;
  padding: 12px;
  background: var(--accent-flight, #00e5ff);
  color: #0a0b0d;
  border: none;
  border-radius: var(--border-radius-md, 10px);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.auth-submit-btn:hover {
  opacity: 0.92;
  box-shadow: 0 4px 16px rgba(0, 229, 255, 0.3);
}

.auth-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.auth-submit-btn--warning {
  background: #ffab00;
  color: #1a1200;
}

.auth-submit-btn--warning:hover {
  box-shadow: 0 4px 16px rgba(255, 171, 0, 0.35);
}

.auth-submit-btn--danger {
  background: #ff5252;
  color: #2a0a0a;
}

.auth-submit-btn--danger:hover {
  box-shadow: 0 4px 16px rgba(255, 82, 82, 0.35);
}


/* ─── Register Passkey Drawer Button ─────────────────────────────────────────── */

.btn-passkey-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 18px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius-md, 10px);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  transition: box-shadow 0.2s ease, background 0.2s ease;
}

.btn-passkey-primary:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.5);
}

.btn-passkey-primary .passkey-icon {
  font-size: 1.1rem;
}


/* ─── Hero Passkey Button (kept for unlock modal) ───────────────────────────── */

.btn-passkey-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
  transition: box-shadow 0.25s ease, background 0.25s ease;
}

.btn-passkey-hero:hover {
  background: linear-gradient(135deg, #2563eb, #1e40af);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.55);
}

.btn-passkey-hero:active {
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}


/* ─── Recovery Code Display ─────────────────────────────────────────────────── */

.recovery-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  padding: 12px 14px;
  margin: 4px 0 18px;
}

.recovery-banner-icon {
  width: 17px;
  height: 17px;
  color: var(--text-muted, #94a3b8);
  flex-shrink: 0;
  margin-top: 1px;
}

.recovery-banner p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary, #b8bfcc);
}

.recovery-banner strong {
  color: var(--text-primary);
  font-weight: 700;
}

.recovery-code-box {
  position: relative;
  background: var(--bg-surface-elevated, #1a1d29);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  border-radius: 12px;
  padding: 18px 16px 16px;
  text-align: center;
  margin-bottom: 20px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.recovery-code-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 10px;
}

.recovery-code-box code {
  display: block;
  font-family: var(--font-mono, 'SF Mono', ui-monospace, monospace);
  font-size: 1.05rem;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: var(--accent-flight, #00e5ff);
  user-select: all;
  word-break: break-all;
  line-height: 1.6;
}

.recovery-actions {
  display: flex;
  gap: 10px;
}

.btn-recovery-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  padding: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.14));
  border-radius: var(--border-radius-md, 10px);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.btn-recovery-copy:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-color, rgba(255, 255, 255, 0.24));
}

.btn-recovery-copy svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn-recovery-copy .icon-copied {
  display: none;
  color: #00e676;
}

.btn-recovery-copy.is-copied .icon-copy {
  display: none;
}

.btn-recovery-copy.is-copied .icon-copied {
  display: block;
}

.btn-recovery-copy.is-copied {
  border-color: rgba(0, 230, 118, 0.35);
  color: #00e676;
}

.recovery-actions .auth-submit-btn {
  flex: 1;
}


/* ─── Onboarding Fork Modal (blank/sample choice, progressive reveal) ───────── */

.onboarding-choice-row {
  display: flex;
  gap: 10px;
}

.onboarding-choice-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.14));
  border-radius: var(--border-radius-md, 10px);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.onboarding-choice-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.onboarding-choice-btn .onboarding-choice-check {
  display: none;
}

.onboarding-choice-btn.selected,
#btn-welcome-save-name {
  background: var(--accent-flight, #00e5ff);
  border-color: var(--accent-flight, #00e5ff);
  color: #FFF !important;
}

.onboarding-choice-btn.selected .onboarding-choice-check {
  display: inline;
}

.onboarding-section {
  transition: opacity 0.2s ease;
}

.onboarding-section.is-dimmed {
  opacity: 0.4;
  pointer-events: none;
}

.btn-welcome-save-name-check {
  display: none;
}

#btn-welcome-save-name.is-saved {
  border-color: rgba(0, 230, 118, 0.35);
  color: #00e676;
}

#btn-welcome-save-name.is-saved .btn-welcome-save-name-check {
  display: inline;
}

#btn-welcome-save-name:not(:disabled) {
  background: var(--accent-flight, #00e5ff);
  color: #0a0b0d;
  border-color: var(--accent-flight, #00e5ff);
}

#btn-welcome-save-name:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#btn-welcome-recovery-key:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ─── Responsive Adjustments ────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .hud-inner {
    grid-template-columns: 1fr auto;
  }

  .hud-section.auth-sync-section {
    gap: 8px;
  }

  .hud-sync-badge .sync-text {
    display: none;
  }

  .auth-modal-card {
    padding: 22px 18px 20px;
  }

  .auth-action-label {
    font-size: 14px;
  }

  .auth-action-sub {
    font-size: 11px;
  }
}