/* ============================================================
   GLOBAL RESPONSIVE STYLES — shopifyecosystem.report
   ============================================================ */

/* === OVERFLOW PREVENTION ===
   1. Block horizontal scroll at page root (Safari iOS safe)
   2. SVG: framework only applies max-width:100% on <img>, not <svg>.
      Observable Plot renders width="640" initially, before ResizeObserver
      kicks in — this causes horizontal scroll on iPhone until it repaints.
*/
html {
  overflow-x: hidden;
}

.observablehq svg {
  max-width: 100%;
}
/* Ensure output cells don't escape their container */
.observablehq {
  min-width: 0;
}

/* === SIDEBAR === */

/* Desktop (≥918px): hide close button, sidebar is always fixed/visible */
@media (min-width: 918px) {
  #observablehq-sidebar-close {
    display: none;
  }
  /* Disable the toggle strip on desktop so users can't accidentally hide the sidebar */
  #observablehq-sidebar-toggle {
    pointer-events: none;
    cursor: default;
  }
}

/* Mobile (<918px): ensure sidebar scrolls internally, not with the page */
@media (max-width: 917px) {
  #observablehq-sidebar {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================
   GLOBAL SPACING — more room above section headings
   ============================================================ */

#observablehq-main h1 {
  padding-top: 1.5rem;
}

/* Section headings rendered from markdown ## headings */
.observablehq > h2 {
  margin-top: 3.5rem;
  padding-top: 0.5rem;
}

/* ============================================================
   INDEX PAGE — Map section (label → map → countries, stacked on mobile)
   ============================================================ */

.index-map-grid {
  display: grid !important;
  grid-template-columns: 1fr 200px;
  gap: 1.5rem;
  align-items: start;
  margin-top: 2rem;
}

@media (max-width: 700px) {
  .index-map-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   INDEX PAGE — Chart + Controls grid
   On mobile: controls panel moves ABOVE the chart
   ============================================================ */

.chart-controls-grid {
  display: grid !important;
  grid-template-columns: 1fr 200px;
  gap: 1.5rem;
  align-items: start;
  margin-top: 1rem;
}

@media (max-width: 700px) {
  .chart-controls-grid {
    grid-template-columns: 1fr !important;
  }
  .chart-controls-grid .controls-panel {
    order: -1;
    margin-top: 0 !important;
  }
}

/* ============================================================
   SLIDE-LIKE SECTIONS on mobile — each section ~1 screen tall
   ============================================================ */

@media (max-width: 700px) {
  .slide-section {
    min-height: 90svh;
    padding-bottom: 2rem;
    box-sizing: border-box;
    border-bottom: 1px solid var(--theme-foreground-faintest);
    margin-bottom: 1rem;
  }
}

/* ============================================================
   SHOPS PAGE — Sidebar region above map on mobile
   ============================================================ */

@media (max-width: 900px) {
  /* Title first, then sidebar controls, then map */
  .shops-map-title {
    order: -2;
  }
  .shops-map-sidebar {
    order: -1;
  }
}

/* ============================================================
   SHOPS PAGE — Industry Distribution: stack on mobile
   ============================================================ */

.industry-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  align-items: center;
}

@media (max-width: 700px) {
  .industry-grid {
    grid-template-columns: 1fr !important;
    justify-items: center;
  }
}

/* ============================================================
   THEMES PAGE — Responsive chart containers
   ============================================================ */

.themes-chart-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.themes-chart-wrap svg {
  max-width: 100%;
  display: block;
}