/* ============================================================
   Mobile layout  —  phones ≤ 640px

   iOS Safari notes:
   - position:fixed breaks inside any overflow:hidden ancestor.
     Keep overflow:hidden OFF main; clip at article level only.
   - 100vh includes Safari chrome (URL bar). Use 100svh where
     supported, with 100vh as fallback.
   - flex map fill: use flex:1 1 0 + height:0, not auto.
   ============================================================ */

@media (max-width: 640px) {

  /* ── Variables ─────────────────────────────────────────── */
  :root {
    --sheet-collapsed: 58px;
    --bar-height: 44px;
  }

  /* ── Body ───────────────────────────────────────────────── */
  body {
    grid-template-rows: var(--bar-height) 1fr;
  }

  footer { display: none; }

  header {
    padding: 0 0.75rem;
  }

  header h2 {
    font-size: 0.85rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  header h3,
  header > div { display: none; }

  /* ── Main: NO overflow — iOS Safari position:fixed fix ─── */
  main {
    display: block;
    /* No overflow, no explicit height — let article define it */
  }

  body.structural-mode main {
    grid-template-columns: unset;
  }

  /* ── Article: clip here, not on main ────────────────────── */
  article {
    display: flex;
    flex-direction: column;
    /* 100svh = height with Safari toolbar visible (iOS 15.4+) */
    height: calc(100vh  - var(--bar-height));
    height: calc(100svh - var(--bar-height));
    overflow: hidden;        /* safe: no fixed children inside article */
    padding-bottom: var(--sheet-collapsed);
  }

  /* ── Map: flex-fill pattern that works on iOS ─────────────── */
  #map {
    flex: 1 1 0;             /* 0 basis + grow = fill remaining space */
    height: 0 !important;    /* iOS: height:0 + flex-grow > height:auto */
    min-height: 0 !important;
  }

  /* ── Structural mode ─────────────────────────────────────── */
  body.structural-mode article {
    padding-bottom: calc(var(--sheet-collapsed) + 4px);
  }

  body.structural-mode #map {
    flex: 0 0 42vh;
    flex: 0 0 42svh;
    height: 42vh !important;
    height: 42svh !important;
    min-height: 180px !important;
  }

  body.structural-mode #data-pane {
    flex: 1 1 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }

  /* ── Context strip ───────────────────────────────────────── */
  #context-strip { display: none; }

  /* ── Leaflet zoom controls clear the collapsed sheet ──────── */
  .leaflet-bottom.leaflet-left {
    bottom: calc(var(--sheet-collapsed) + 8px);
  }

  /* Structural legends hidden on desktop; show compact on mobile */
  body.structural-mode .legend,
  body.structural-mode .legend_metric {
    display: block !important;
    font-size: 10px;
    padding: 4px 6px;
  }

  /* ── Bottom sheet (sidebar) ──────────────────────────────── */
  /* position:fixed works here because main has no overflow set */
  .sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10100;

    display: block;
    height: var(--sheet-collapsed);
    max-height: 75vh;
    max-height: 75svh;
    overflow: hidden;
    background: #fff;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -3px 20px rgba(0, 0, 0, 0.16);
    transition: height 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    /* iOS: promote to its own compositor layer for smooth animation */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .sidebar.sheet-open {
    height: 65vh;
    height: 65svh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Sheet handle ─────────────────────────────────────────── */
  #sheet-handle {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
    /* Enlarge tap target without affecting layout */
    -webkit-tap-highlight-color: transparent;
  }

  #sheet-handle::after {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: #ccc;
    border-radius: 2px;
  }

  /* ── Nav / mode buttons ──────────────────────────────────── */
  .nav-panel {
    padding: 0 10px 8px;
  }

  .nav-mode {
    display: flex;
    gap: 8px;
  }

  .nav-mode > div { flex: 1; }

  .nav-mode button {
    width: 100%;
    padding: 7px 2px;
    font-size: 12px;
    white-space: nowrap;
    min-height: 34px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* iOS: prevent double-tap zoom on buttons */
    touch-action: manipulation;
  }

  .nav-mode button.is-active {
    background: #1a3a8f;
    color: #fff;
    border-color: #1a3a8f;
    font-weight: 600;
  }

  /* ── Panel inside sheet ──────────────────────────────────── */
  .panel {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 0;
    padding: 10px 12px;
    overflow-y: visible;
    max-height: none;
  }

  /* ── Elections bar ───────────────────────────────────────── */
  .elections-bar {
    left: 8px;
    right: 8px;
    max-width: none;
    font-size: 12px;
    padding: 6px 8px;
  }

  .eb-row { gap: 6px; }

  .eb-row label,
  .eb-row select { font-size: 12px; }

  /* ── Results pane: static, below map ────────────────────── */
  .results-pane {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100%;
    max-width: none;
    max-height: 40vh;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    margin: 0;
    box-shadow: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

  /* ── Results table ───────────────────────────────────────── */
  #rp-body table { font-size: 12px; }

  #rp-body th,
  #rp-body td { padding: 4px 5px; }

  /* ── Data pane tabs ──────────────────────────────────────── */
  .dp-tabbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    padding: 0 4px;
    scrollbar-width: none;
  }

  .dp-tabbar::-webkit-scrollbar { display: none; }

  .dp-tab {
    font-size: 12px;
    padding: 6px 10px;
    white-space: nowrap;
    flex-shrink: 0;
    touch-action: manipulation;
  }

  .dp-year-sel { font-size: 11px; }

  /* ── Data pane: tract table ──────────────────────────────── */
  .dp-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .dp-table { font-size: 11px; }

  .dp-table th,
  .dp-table td { padding: 4px 5px; }

  /* ── Data pane: tract profile — single column ─────────────── */
  .dp-profile-layout {
    flex-direction: column !important;
    gap: 0;
    overflow: visible !important;
  }

  .dp-profile-col {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    border-right: none !important;
    border-bottom: 1px solid #f0f0f0;
    overflow-y: visible !important;
  }

  .dp-profile-col:last-child { border-bottom: none; }

  /* ── Trends chart ────────────────────────────────────────── */
  .dp-trends-layout {
    flex-direction: column;
    gap: 8px;
  }

  .dp-trends-controls {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }

  .dp-trends-chart-wrap { min-height: 180px; }

  /* ── Budget view ─────────────────────────────────────────── */
  #budget-view {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--sheet-collapsed) + 8px);
  }

  .charts-toolbar {
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
  }

  /* ── Drawer ──────────────────────────────────────────────── */
  #drawer {
    position: fixed;
    bottom: var(--sheet-collapsed);
    top: auto;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 50vh;
    max-height: 50svh;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  /* ── Touch targets ───────────────────────────────────────── */
  button, select {
    min-height: 36px;
    touch-action: manipulation;
  }

}

/* ── Landscape phone ─────────────────────────────────────── */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  :root {
    --sheet-collapsed: 44px;
    --bar-height: 36px;
  }

  body.structural-mode #map {
    flex: 0 0 80svh;
    flex: 0 0 80vh;
    height: 80vh !important;
    height: 80svh !important;
  }

  .sidebar.sheet-open {
    height: 85vh;
    height: 85svh;
  }
}