/**
 * Platform-wide mobile responsiveness fixes.
 *
 * Targets the iPhone-class viewport (≤640px). Adds layout escape-hatches that
 * pages with hard-coded multi-column grids didn't anticipate. Loaded after
 * page-specific styles so these win the cascade for the narrow-viewport rules
 * that need them.
 *
 * Convention: only target ≤640px, never wider — desktop layouts must be
 * untouched by this file.
 */

@media (max-width: 640px) {
  /* === Body: prevent horizontal overflow + tame padding === */
  body { overflow-x: hidden !important; }
  html { overflow-x: hidden !important; }

  /* === Common page wrappers — collapse to single-column === */
  .di-grid,
  .di-hero,
  .sm-grid,
  .sm-hero,
  .sf-hero,
  .sf-search-row,
  .mb-summary-cells,
  .nl-search-bar,
  .features,
  .audience,
  .tut-grid,
  .tut-tips-grid,
  .pricing-features,
  .ix-grid-2,
  .ix-grid-3,
  .ix-grid-4,
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .md\:grid-cols-2,
  .md\:grid-cols-3,
  .md\:grid-cols-4,
  .lg\:grid-cols-2,
  .lg\:grid-cols-3,
  .lg\:grid-cols-4,
  .lg\:grid-cols-5,
  .ix-2col,
  .ix-3col,
  .ix-4col {
    grid-template-columns: 1fr !important;
  }

  /* === Page wrappers: tighten padding === */
  .sm-wrap, .di-wrap, .sf-wrap, .mb-wrap, .nl-wrap, .ob-wrap,
  .max-w-1280, .max-w-1440, .max-w-1080, .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* === Hero cells — collapse 3-col verdict cells to 1 col on tiny phones,
        2 col on slightly wider === */
  .di-verdict-cells,
  .sm-verdict-cells,
  .mb-verdict-cells {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* === Tables: wrap in horizontal scroll instead of overflowing === */
  table {
    min-width: 480px;  /* keeps columns from squishing illegibly */
  }
  .ix-table-wrap, .table-scroll, .nl-results, .ix-data-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nl-table { min-width: 700px; }

  /* === Headlines: reduce size on mobile === */
  h1 { font-size: clamp(22px, 6vw, 32px) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(18px, 5vw, 24px) !important; }
  .di-hero-id h1, .sm-hero-id h1, .sf-hero-id h1, .mb-headline {
    font-size: 22px !important; line-height: 1.2 !important;
  }
  .nl-hero h1 { font-size: 24px !important; }

  /* === Hero CTAs: stack vertically === */
  .hero-ctas, .pr-toggle, .sm-search-row, .sf-search-row, .nl-search-bar {
    flex-wrap: wrap !important;
  }
  .hero-ctas .btn, .nl-search-bar .nl-btn {
    width: 100%;
    justify-content: center;
  }

  /* === Hero verdict + identity — stack on mobile === */
  .di-hero, .sm-hero, .sf-hero { gap: 10px !important; }

  /* === Buttons: minimum touch target 44px (WCAG/Apple guideline) === */
  button:not(.tut-tab-btn):not(.tut-faq-q):not(.wn-close):not(.sf-suggestion):not(.nl-suggestion),
  .ix-btn, .di-btn, .sm-btn, .sf-btn, .mb-btn, .nl-btn {
    min-height: 40px;
  }

  /* === Modal: respect viewport edges === */
  .ix-modal, .modal, .di-modal, .tut-modal-content {
    max-width: calc(100vw - 24px) !important;
    margin: 12px !important;
  }
  .di-modal-backdrop > .di-modal,
  .modal-backdrop > .modal {
    max-width: calc(100vw - 24px) !important;
  }

  /* === Tutorials grid + tip cards on mobile === */
  .tut-grid { gap: 6px !important; }
  .tut-card { padding: 10px 14px !important; }

  /* === Toolbar overflows === */
  .di-controls, .di-controls-right, .di-controls-left,
  .nl-toolbar, .mb-toolbar {
    flex-wrap: wrap !important;
  }

  /* === FABs + bottom nav: don't overlap === */
  /* Mobile bottom nav already exists at 56px tall. Push the AI FAB above it. */
  .ai-fab,
  .ix-term-fab,
  .help-fab {
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }

  /* === Live ticker: shrink height on mobile === */
  .live-ticker-wrapper { font-size: 11px !important; }

  /* === Status page === */
  .wrap.max-w-720 { max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; }

  /* === Welcome page hero: reduce padding === */
  .hero { padding-top: 48px !important; padding-bottom: 36px !important; }

  /* === Settings page swatches: ensure they don't overflow === */
  .s-swatches, .ix-swatches { flex-wrap: wrap !important; }

  /* === Sidebar / drawer: slide off-screen by default on mobile === */
  body.has-mobile-nav .ix-sidebar,
  body.has-mobile-nav .sidebar-desktop { display: none !important; }

  /* === Direct-indexing controls bar wraps === */
  .di-controls-left { gap: 8px !important; }
  .di-controls-left .di-pf-select { flex: 1; min-width: 0; }

  /* === Code blocks + monospace overflow === */
  pre, code, .ix-code { word-break: break-word !important;
    white-space: pre-wrap !important; }

  /* === Charts: collapse multi-pane to single === */
  .chart-multi-pane,
  .chart-grid-2,
  .chart-grid-4 { grid-template-columns: 1fr !important; }

  /* === Fonts that read poorly at 13px on phones === */
  .ix-meta, .di-eyebrow, .sm-eyebrow, .sf-eyebrow, .nl-eyebrow,
  .agent-card-eyebrow, .mb-eyebrow {
    font-size: 10px !important; letter-spacing: 0.12em !important;
  }
}

/* Smaller phones (≤375px — iPhone SE, mini) */
@media (max-width: 375px) {
  .di-verdict-cells,
  .sm-verdict-cells,
  .mb-verdict-cells {
    grid-template-columns: 1fr !important;
  }
  h1 { font-size: 20px !important; }
  .sm-wrap, .di-wrap, .sf-wrap, .mb-wrap, .nl-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}