/* ═══════════════════════════════════════════
   fikcentX v33.8 — Mobile Responsive Hardening
   Full device coverage: 280px (Fold) → 1024px (iPad)
   v33.8: Scroll fixes — overscroll-behavior scoped to PWA, html/body overflow separated
   ═══════════════════════════════════════════ */

/* ─── PHASE 1: CRITICAL GLOBAL FIXES ─── */

/* 1.1 Text size adjust — prevent iOS/Android landscape auto-inflation */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 1.2 Dynamic viewport height — fix 100vh behind browser chrome */
body {
  min-height: 100vh;
  min-height: 100dvh;
}

/* 1.6 Prevent pull-to-refresh in PWA standalone mode */
@media (display-mode: standalone) {
  body {
    overscroll-behavior-y: contain;
  }
}

/* 1.6b v33.19.2: Fix scroll sticking on iOS/Android — ensure main content area scrolls freely */
/* iOS Safari needs -webkit-overflow-scrolling:touch on scrollable containers */
html {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}
/* Prevent body from becoming a secondary scroll container that traps scroll events */
body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 1.3 Global tap highlight removal */
a, button, [onclick], [role="button"],
.topbar-nav-item, .filter-tab, .dash-tab, .ev-tab,
.j22-nav-tab, .seg-tab, .dir-btn, .btn, .btn-primary,
.ind-tier-tab, .ind-card, .tool-card, .bot-card,
.hpq-card, .pc-card, .app-dl-card, .testi-card-adv,
.j22-eq-ctrl, .j22-btn-primary, .j22-btn-ghost,
.bottom-tab, .icon-btn, .auth-nav-btn, .toggle-sw,
.sig-card, .price-item, .v18-copy-btn {
  -webkit-tap-highlight-color: transparent;
}

/* 1.4 iOS input zoom prevention — inputs MUST be 16px on touch devices */
@media (hover: none) and (pointer: coarse) {
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  input[type="date"],
  input[type="search"],
  input[type="url"],
  select,
  textarea,
  .inp,
  .j22-input,
  .j22-select,
  .j22-bt-input,
  .j22-bt-select,
  .ai-coach-input,
  .set-field input,
  .set-field select,
  .auth-field input,
  .demo-input,
  .demo-select,
  .v18-cmd-input {
    font-size: 16px !important;
  }
}

/* 1.5 Smooth scroll with fixed header offset */
html {
  scroll-padding-top: 64px;
}


/* ─── PHASE 2: TOUCH TARGETS — 44px MINIMUM ─── */

@media (hover: none) and (pointer: coarse) {
  /* Icon buttons at small sizes */
  .icon-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* AI coach header buttons */
  .ai-coach-hbtn {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
  }

  /* Toggle switch */
  .toggle-sw {
    min-width: 44px;
    min-height: 44px;
    width: 48px;
    height: 28px;
  }

  /* Copy buttons */
  .v18-copy-btn {
    min-height: 36px;
    padding: 6px 12px;
  }

  /* Timeframe buttons (journal replay) */
  .j22-rp-tf-btn {
    min-height: 36px;
    min-width: 40px;
    padding: 6px 10px;
  }

  /* Filter/tab items */
  .filter-tab,
  .dash-tab,
  .ev-tab,
  .j22-nav-tab,
  .ind-tier-tab,
  .guide-tab {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Generic clickable rows */
  .j-hover-row td {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}


/* ─── PHASE 3: GRIDS WITHOUT MOBILE BREAKPOINTS ─── */

/* 3.1 .v18-demo-result — 3 cols → 1 col */
@media (max-width: 600px) {
  .v18-demo-result {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }
}

/* 3.2 .sig-perf-row — 3 cols → stacked */
@media (max-width: 480px) {
  .sig-perf-row {
    grid-template-columns: 1fr !important;
    gap: 6px;
  }
}

/* 3.3 .journal-mini-stats — 2 cols is OK but tighten gap */
@media (max-width: 380px) {
  .journal-mini-stats {
    gap: 4px;
  }
}

/* 3.4 .v17-bot-grid — minmax(200px) overflows below 420px */
@media (max-width: 420px) {
  .v17-bot-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }
}

/* 3.5 .ai-stats-grid — 4 cols → 2 cols */
@media (max-width: 600px) {
  .ai-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 360px) {
  .ai-stats-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ─── PHASE 4: PROP TRACKER — FULLY BROKEN, FULL FIX ─── */

/* Prop tracker setup rows */
@media (max-width: 600px) {
  .prop-setup-row {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 380px) {
  .prop-setup-row {
    grid-template-columns: 1fr !important;
  }
}

/* Prop tracker progress bars — 3 cols → stack */
@media (max-width: 600px) {
  .prop-bars-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ─── PHASE 5: AI COACH — EXPANDED PANEL + SMALL SCREEN ─── */

@media (max-width: 768px) {
  .ai-coach-panel.expanded {
    width: calc(100vw - 32px) !important;
    max-height: 70vh;
  }
  .ai-coach-panel.expanded .ai-coach-messages {
    max-height: 50vh;
  }
}

@media (max-width: 380px) {
  .ai-coach-panel {
    width: calc(100vw - 16px) !important;
    right: -4px !important;
    bottom: 58px !important;
    border-radius: 14px;
  }
  .ai-coach-messages {
    min-height: 160px !important;
    max-height: 45vh !important;
  }
  .ai-coach-quick-btn {
    padding: 6px 8px;
    font-size: 10px;
  }
}


/* ─── PHASE 6: LANDSCAPE MODE — PHONES ─── */

@media (orientation: landscape) and (max-height: 500px) {
  .topbar {
    padding: 4px 0;
    border-bottom-width: 0;
  }
  .brand-logo-img {
    height: 22px;
  }
  .hero {
    padding: 8px 0 6px;
  }
  .hero h1 {
    font-size: 18px;
    margin-bottom: 4px;
  }
  .hero .sub {
    font-size: 10px;
    margin-bottom: 6px;
  }
  .hero-stats {
    padding: 4px 10px;
    gap: 8px;
  }
  .hero-badge {
    font-size: 7px;
    padding: 2px 8px;
    margin-bottom: 4px;
  }
  .panel-head {
    padding: 6px 10px;
  }
  .panel-body {
    padding: 8px 10px;
  }
  .bottom-tab-bar {
    padding: 2px 0;
    padding-bottom: max(2px, env(safe-area-inset-bottom, 2px));
  }
  .bottom-tab {
    padding: 3px 6px;
    gap: 1px;
  }
  .bottom-tab-icon {
    font-size: 14px;
  }
  .bottom-tab-label {
    font-size: 7px;
  }
  .ai-coach {
    bottom: 10px !important;
    right: 10px;
  }
  .ai-coach-panel {
    max-height: 55vh;
    bottom: 54px !important;
  }
  .ai-coach-messages {
    min-height: 120px !important;
    max-height: 35vh !important;
  }
  .footer-new,
  .footer {
    padding: 16px 0;
  }
  /* Hide non-essential elements in landscape */
  .hero-glow,
  .hero-ambient,
  .v27-hero-glow,
  .j22-hero-glow,
  .mega-hero-glow {
    display: none;
  }
}


/* ─── PHASE 7: TABLET BREAKPOINTS (768px–1024px) ─── */

@media (min-width: 701px) and (max-width: 1024px) {
  .shell {
    padding: 0 20px;
  }

  /* Homepage grids — 4 cols → 2 or 3 */
  .feat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .trust-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .outcomes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .test-grid-adv,
  .test-grid--old {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Pricing — 3 cols still works but tighten */
  .pricing-grid {
    gap: 10px;
  }

  /* Dashboard grids */
  .user-hub-actions {
    grid-template-columns: repeat(2, 1fr);
  }
  .v18-demo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .v18-prop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ─── PHASE 8: SUB-360px (GALAXY FOLD / IPHONE SE) ─── */

@media (max-width: 360px) {
  .shell {
    padding: 0 10px;
  }
  .hero h1 {
    font-size: 20px;
    letter-spacing: -1px;
  }
  .hero .sub {
    font-size: 11px;
  }
  .hero-badge {
    font-size: 7px;
    padding: 2px 8px;
  }
  .hero-stats {
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px;
  }
  .hero-stat-divider {
    display: none;
  }
  .hero-stat {
    min-width: calc(50% - 6px);
    text-align: center;
  }

  /* All multi-col grids force to 1 col */
  .feat-grid,
  .bot-grid,
  .ind-grid,
  .outcomes-grid,
  .pricing-grid,
  .test-grid--old,
  .test-grid-adv,
  .home-pricing-quick,
  .app-download-grid {
    grid-template-columns: 1fr !important;
  }

  /* Panels tighter */
  .panel-body {
    padding: 8px;
  }
  .panel-head {
    padding: 6px 8px;
  }

  /* Tabs scroll */
  .seg-tabs,
  .j22-nav,
  .dash-tabs,
  .ev-tabs {
    gap: 1px;
  }
  .seg-tab,
  .dash-tab,
  .ev-tab {
    font-size: 9px;
    padding: 6px 10px;
  }

  /* Notifications dropdown */
  .notif-dropdown,
  .history-dropdown {
    width: calc(100vw - 20px) !important;
    right: -10px;
  }

  /* Pricing cards */
  .pc-card {
    padding: 16px;
  }

  /* Footer */
  .footer-nav {
    gap: 16px;
  }
  .footer-col {
    min-width: 100%;
  }
}

/* Extra small — Galaxy Fold folded (280px) */
@media (max-width: 300px) {
  .shell {
    padding: 0 6px;
  }
  .topbar {
    padding: 6px 0;
  }
  .brand-logo-img {
    height: 22px;
  }
  .hero h1 {
    font-size: 18px;
  }
  .hero-stats {
    display: none;
  }
  .icon-btn {
    min-width: 36px;
    min-height: 36px;
  }
}


/* ─── PHASE 9: FONT SIZE FLOORS ─── */

/* Prevent sub-10px text on mobile — unreadable */
@media (max-width: 700px) {
  .ind-stat-key,
  .ind-tier-count,
  .ind-card-badge,
  .ind-tag,
  .ai-coach-quick-label,
  .ai-coach-welcome-sub,
  .hpq-badge,
  .sig-live-label,
  .app-dl-plat,
  .app-dl-soon-badge,
  .app-dl-live-badge {
    font-size: 10px;
  }
}


/* ─── PHASE 10: SCROLLBAR CONSISTENCY ─── */

/* Hide scrollbars on horizontal scroll containers globally on mobile */
@media (max-width: 700px) {
  .price-bar,
  .ind-tier-tabs,
  .j22-nav,
  .dash-tabs,
  .ev-tabs,
  .ev-date-picker-bar,
  .tools-filter,
  .ind-comparison-table,
  .compare-table-wrap,
  .rw-scroll-inner {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .price-bar::-webkit-scrollbar,
  .ind-tier-tabs::-webkit-scrollbar,
  .j22-nav::-webkit-scrollbar,
  .dash-tabs::-webkit-scrollbar,
  .ev-tabs::-webkit-scrollbar,
  .ev-date-picker-bar::-webkit-scrollbar,
  .tools-filter::-webkit-scrollbar,
  .ind-comparison-table::-webkit-scrollbar,
  .compare-table-wrap::-webkit-scrollbar,
  .rw-scroll-inner::-webkit-scrollbar {
    display: none;
  }
}


/* ─── PHASE 11: REDUCED MOTION ─── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-glow,
  .hero-ambient,
  .v27-hero-glow,
  .v22-dash-hero-glow,
  .v23-hero-glow,
  .j22-hero-glow,
  .mega-hero-glow,
  .v29-acc-hero-glow,
  .ind-cta-glow,
  .eco-center-logo {
    animation: none !important;
  }
}


/* ─── PHASE 12: PRINT ENHANCEMENTS ─── */

@media print {
  body::before,
  body::after {
    display: none !important;
  }
  .ai-coach,
  .bottom-tab-bar,
  .back-to-top,
  .pwa-banner,
  .cookie-banner,
  .toast {
    display: none !important;
  }
}


/* ═══════════════════════════════════════════
   DESIGN FIXES — v33.7
   ═══════════════════════════════════════════ */

/* ─── FIX 1: Back-to-top overlaps AI coach ─── */
.back-to-top {
  left: 24px;
  right: auto;
}
@media (max-width: 700px) {
  .back-to-top {
    left: 16px;
    bottom: 80px; /* above bottom tab bar */
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  .back-to-top {
    bottom: 12px;
  }
}

/* ─── FIX 2: Missing -webkit-backdrop-filter ─── */
/* Global catch — ensures blur works on iOS Safari < 16.4 */
.ai-coach-tooltip,
.ea-setup-modal,
.v18-cmd-overlay,
.notif-dropdown,
.history-dropdown,
.upgrade-overlay,
.app-guide-overlay,
.signup-gate-overlay,
.quiz-overlay,
.page-cover-overlay {
  -webkit-backdrop-filter: blur(8px);
}
.topbar-nav.open {
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
}

/* ─── FIX 3: Hero stat dividers hide when wrapping ─── */
@media (max-width: 480px) {
  .hero-stat-divider {
    display: none;
  }
}

/* ─── FIX 5: Cookie banner pushes bottom tab bar up ─── */
body.cookie-visible .bottom-tab-bar {
  bottom: 60px;
}
@media (max-width: 600px) {
  body.cookie-visible .bottom-tab-bar {
    bottom: 80px;
  }
}

/* ─── FIX 6: Contrast boost for low-contrast tokens ─── */
/* Bump the lowest-contrast text tokens to WCAG AA-large (3:1) minimum */
/* Only on elements where these tokens are actually hard to read */
@media (max-width: 700px) {
  /* Sub-text / timestamps / helper labels on cards and panels */
  [style*="color:var(--t-20)"],
  .notif-time,
  .app-dl-plat,
  .app-dl-soon-badge {
    color: var(--t-30) !important;
  }
}

/* ─── FIX 7: Global focus-visible ring ─── */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
/* Suppress on elements that have their own focus styles */
.inp:focus-visible,
.j22-input:focus-visible,
.j22-select:focus-visible,
.j22-bt-input:focus-visible,
.j22-bt-select:focus-visible,
.set-field input:focus-visible,
.set-field select:focus-visible,
.auth-field input:focus-visible,
.ai-coach-input:focus-visible,
.demo-input:focus-visible,
.demo-select:focus-visible,
.v18-cmd-input:focus-visible,
.fkx-form-field input:focus-visible,
.fkx-search input:focus-visible,
.verif-digit:focus-visible {
  outline: none;
}

/* ─── FIX: Images max-width safety ─── */
img {
  max-width: 100%;
  height: auto;
}
/* Exclude icons/avatars that have explicit sizing */
.brand-logo-img,
.eco-center-logo,
.testi-avatar img,
.pwa-icon img,
[class*="avatar"] img {
  max-width: none;
}


/* ═══════════════════════════════════════════
   v33.19.2 — SCROLL FIX HARDENING
   Fixes: scroll sticking on PWA/iOS/Android,
   momentum scrolling, page transition scroll reset,
   bottom tab bar content occlusion
   ═══════════════════════════════════════════ */

/* ─── FIX: iOS momentum scrolling on all scrollable containers ─── */
/* iOS Safari needs explicit -webkit-overflow-scrolling:touch on containers with overflow:auto/scroll */
@media (hover: none) and (pointer: coarse) {
  .history-dropdown,
  .notif-dropdown,
  .ind-modal,
  .app-guide-card,
  .topbar-nav.open,
  .ai-coach-messages,
  .j22-modal,
  .compare-table-wrap,
  .ind-comparison-table {
    -webkit-overflow-scrolling: touch;
  }
}

/* ─── FIX: Prevent body::before/after pseudo-elements from intercepting touches ─── */
/* These decorative fixed overlays (grid pattern + radial glow) have pointer-events:none
   but on some Android WebViews they can still interfere with scroll initiation */
@media (display-mode: standalone) {
  body::before,
  body::after {
    will-change: auto;
    contain: strict;
  }
}

/* ─── FIX: Page content bottom padding when bottom tab bar is visible ─── */
/* Ensures the last content on every page is visible above the fixed tab bar */
@media (max-width: 700px) {
  .footer-new,
  .footer {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

/* ─── FIX: Sticky topbar scroll-padding for iOS PWA ─── */
/* In standalone PWA mode, there's no browser chrome, so scroll-padding needs to match topbar height only */
@media (display-mode: standalone) {
  html {
    scroll-padding-top: 56px;
  }
}

/* ─── FIX: Prevent horizontal overflow from wide inline styles ─── */
/* Some dynamically generated content (journal stats, prop tracker) uses inline widths that can cause
   horizontal scroll on narrow devices */
@media (max-width: 480px) {
  .panel-body {
    overflow-x: hidden;
  }
  /* Tables that are too wide get horizontal scroll wrapper */
  .j-table,
  .prop-log-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ─── FIX: PWA standalone — prevent rubber-banding at top/bottom of page ─── */
@media (display-mode: standalone) {
  html {
    overscroll-behavior-y: none;
    height: 100%;
  }
  body {
    height: 100%;
    overscroll-behavior-y: contain;
  }
}