/* PAI mobile overrides — applied site-wide, logged-in + logged-out.
   Strategy: force the desktop-locked rules off below 900px, give every
   horizontally-overflowing component a scroll-wrapper, and collapse
   2-col / wide grids to single column on phones. */

@media (max-width: 900px) {
  /* 1. Remove the 1280px desktop-min-width that locks horizontal scroll */
  html, body { min-width: 0 !important; max-width: 100% !important; overflow-x: hidden !important; }
  body { font-size: 14.5px; }

  /* 2. Tighten universal padding so content reaches the edges */
  .wrap, .page-view, .page-content, .container, .layout-main {
    padding-left: 14px !important;
    padding-right: 14px !important;
    max-width: 100% !important;
  }

  /* 3. Hide the icon-sidebar on phones (the burger nav handles it) */
  .icon-sidebar { display: none !important; }
  body.mobile-nav-open { overflow: hidden; }

  /* 4. Header — collapse arrows + search to single row */
  .header-bar { flex-wrap: wrap; gap: 8px; padding: 10px 12px !important; }
  .header-nav-arrows { order: -1; }
  .header-search-wrap { order: 1; flex-basis: 100%; max-width: 100% !important; }
  .header-search { width: 100%; }

  /* 5. Hero blocks — stack title + stats vertically */
  .hero { grid-template-columns: 1fr !important; gap: 18px !important; padding-bottom: 18px !important; margin-bottom: 18px !important; }
  .hero-title { font-size: clamp(26px, 7vw, 36px) !important; line-height: 1.15 !important; }
  .hero-sub { font-size: 14px !important; }
  .hero-stats { display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; text-align: left !important; gap: 18px 24px !important; }

  /* 6. Topic-grid + any 2-col grid → single column */
  .topic-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .twocol, .two-col, .law-section, .stream-panel { grid-template-columns: 1fr !important; gap: 18px !important; }
  .latest-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; }

  /* 7. Matrix / table wrappers — force horizontal scroll inside, never push body */
  .matrix, .eu27-table-scroll, .eu27-table-wrap, [class*="-table-scroll"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }
  .matrix-row { min-width: 720px; }
  .eu27-tbl, table.eu27-tbl { min-width: 720px; }

  /* 8. Tabs / filter-pills — scroll horizontally */
  .tabs, .toolbar, .toolbar-l, .scope-picker { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; }
  .tab, .filter-pill, .scope-btn { flex-shrink: 0; }

  /* 9. Detail panel (tracker) — full-screen on mobile, not fixed-rail */
  .detail-panel { position: fixed !important; top: auto !important; bottom: 0 !important; right: 0 !important; left: 0 !important; width: 100% !important; max-height: 80vh !important; border-radius: 14px 14px 0 0 !important; }

  /* 10. US-state lift — chips wrap, CTA goes full-width */
  .us-state-lift .uss-row { flex-direction: column; align-items: stretch; gap: 14px !important; }
  .us-state-lift .uss-cta { width: 100%; text-align: center; }

  /* 11. Page-head — single column with map below title */
  .page-head { grid-template-columns: 1fr !important; gap: 16px !important; }
  .page-head .ph-map { justify-self: start !important; }
  .page-head .ph-map svg { width: 96px !important; height: auto !important; }
  .page-title { font-size: clamp(28px, 7vw, 42px) !important; }

  /* 12. Authorities + legislation row grids — stack to compact card style */
  .dg-row { grid-template-columns: 1fr !important; padding: 14px !important; gap: 6px !important; }
  .reg-list-compact .reg-row { grid-template-columns: 1fr !important; gap: 8px !important; }

  /* 13. Watchlist + dashboard 4-stat strips — 2 columns max */
  .hero-stats, .stat-strip, [class*="-stats"] { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

  /* 14. Schema banner / footer — single column */
  .schema-banner { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* 15. Onboarding + step modals — full screen */
  .pst-modal, .modal-shell, .ob-modal { width: 100% !important; height: 100% !important; max-height: 100% !important; border-radius: 0 !important; }
}

@media (max-width: 540px) {
  .filter-pill { font-size: 11px; padding: 5px 10px; }
  .tab { font-size: 11px; padding: 10px 12px; }
  .matrix-row { min-width: 560px; }
  .eu27-tbl { min-width: 560px; }
  .hero-stats { grid-template-columns: 1fr 1fr !important; }
  .hero-stat-num { font-size: 20px !important; }
  .ts-real-findings { padding: 18px 14px !important; }
  .ts-real-findings h2 { font-size: 22px !important; }
}

/* Touch-target sizing for any clickable that's too small */
@media (max-width: 900px) {
  button, .button, .btn, a.tab, a.filter-pill, .topic-card, .seg-btn, .scope-btn, .col-slot {
    min-height: 40px;
  }
}