/* ============================================================
   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;
  }
}

/* ============================================================
   SITE HEADER — Logo + tagline bar
   ============================================================ */

.sr-header-name {
  display: inline-flex;
  flex-direction: row;
  gap: 0.3em;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: -0.02em;
  color: var(--theme-foreground);
  white-space: nowrap;
  flex-shrink: 0;
}

.sr-header-tagline {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

/* On mobile: name stacks vertically, tagline fills remaining space */
@media (max-width: 600px) {
  .sr-header-name {
    flex-direction: column;
    gap: 0;
    line-height: 1.2;
    font-size: 0.85rem;
  }
  .sr-header-divider {
    display: none;
  }
  .sr-header-tagline {
    font-size: 0.72rem !important;
  }
}

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

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

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

/* ============================================================
   BY-COUNTRY PAGE — Responsive region picker
   Desktop: radio buttons + search right-aligned on one row
   Mobile:  select (1/3) + search (2/3) on same line
   ============================================================ */

.by-country-controls-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

/* Desktop: hide select, keep radio + search as-is */
@media (min-width: 701px) {
  .by-country-select { display: none !important; }
}

/* Mobile: hide radio, show select + search on same row */
@media (max-width: 700px) {
  .by-country-radio { display: none !important; }

  .by-country-controls-row {
    flex-wrap: nowrap;
    gap: 0.5rem;
  }

  /* Select: 1/3 width, styled to match search input height */
  .by-country-select {
    flex: 1;
    min-width: 0;
    height: 2rem;
    padding: 0 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--theme-foreground-faint, rgba(128,128,128,0.25));
    background: var(--theme-background);
    color: var(--theme-foreground);
    font-size: 0.85rem;
    cursor: pointer;
  }

  /* Search: 2/3 width — make the Observable label + inner input stretch */
  .by-country-search {
    flex: 2;
    min-width: 0;
    display: block;
  }
  .by-country-search input {
    width: 100%;
    box-sizing: border-box;
  }
}