/* === Shared responsive stylesheet for the Formula Dossier family ===
   Linked from every HTML in formula-dossier/ and case_studies/.
   Three breakpoints:
     mobile   <= 600px
     tablet   601 – 1024px
     desktop  > 1024px (no overrides; uses the page's native CSS)
*/

/* === Universal base helpers === */
html { -webkit-text-size-adjust: 100%; }
img, svg { max-width: 100%; }
table { max-width: 100%; }

/* Fluid scatter containers — applied to anything inside .pres-scatter-fluid */
.pres-scatter-fluid svg {
  width: 100% !important;
  height: auto !important;
  max-width: 1100px;
}
.pres-scatter-fluid {
  margin: 0 auto;
  max-width: 1100px;
}

/* Stacked pairwise scatter wrapper (Plan #1) — overrides the old flex row */
.pres-pairwise-stack {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 1.5rem !important;
}
.pres-pairwise-stack > div {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  width: 100% !important;
}

/* === Mobile (≤ 600px) === */
@media (max-width: 600px) {
  body { font-size: 15px; }

  /* container padding shrinks */
  .container, main, body > div { padding-left: 12px !important; padding-right: 12px !important; }

  /* tabs nav: horizontal scroll instead of wrap */
  nav.tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  nav.tabs button {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-height: 44px;
    padding: 0.5rem 0.9rem !important;
    font-size: 0.85rem !important;
  }

  /* hero / banner — stack vertically */
  header.banner h1 {
    font-size: 1.4rem !important;
    line-height: 1.3 !important;
  }
  header.banner .plugin-launcher {
    display: block !important;
    margin: 0.6rem 0 0 !important;
    font-size: 0.78rem !important;
  }
  header.banner .plugin-launcher a,
  header.banner .plugin-launcher button {
    display: inline-block;
    margin: 0.25rem 0.3rem 0.25rem 0 !important;
    min-height: 38px;
    padding: 0.4rem 0.7rem !important;
  }

  /* scatter containers: cap height so they don't dominate viewport */
  svg[id^="pres-scatter"],
  svg[id^="pres-facet"] {
    max-height: 60vh !important;
    height: auto !important;
  }

  /* faceted panels: single-column scroll instead of horizontal row */
  #pres-faceted-row {
    flex-direction: column !important;
    overflow-x: visible !important;
  }
  #pres-faceted-row > div {
    width: 100% !important;
    flex: 0 0 auto !important;
  }
  #pres-faceted-row svg {
    width: 100% !important;
    max-width: 100% !important;
    height: 60vw !important;  /* maintain ~square */
    max-height: 380px !important;
  }

  /* aux 2D scatters (pairwise) and 3D cube: hide by default behind a disclosure */
  .pres-aux-collapsible {
    display: none !important;
  }
  .pres-aux-collapsible.expanded {
    display: block !important;
  }
  .pres-aux-toggle {
    display: inline-block !important;
    background: var(--accent, #7a4d2a);
    color: white;
    border: none;
    padding: 0.5rem 0.9rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    margin: 0.6rem 0;
  }
  /* on desktop the toggle is hidden; only the content shows */

  /* case-study sidebar — already mobile-sized at 280px; reinforce overlay behaviour */
  #case-studies-sidebar { width: 92vw !important; max-width: 360px; }

  /* tables: enable horizontal scroll instead of overflow */
  .scroll-table { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .scroll-table table { min-width: 560px; }

  /* larger touch targets for all buttons / links inside header strips */
  header.site a, header.site button { min-height: 38px; display: inline-flex; align-items: center; }

  /* case-study pages typically use a fixed-width content box */
  body > .container { max-width: 100% !important; }
}

/* === Tablet (601–1024px) === */
@media (min-width: 601px) and (max-width: 1024px) {
  body { font-size: 15.5px; }
  .container, main { padding-left: 18px !important; padding-right: 18px !important; }
  nav.tabs button { padding: 0.45rem 0.75rem !important; }
  /* faceted panels: 2-column grid on tablet */
  #pres-faceted-row {
    overflow-x: visible !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }
  #pres-faceted-row > div {
    flex: 0 1 calc(50% - 0.5rem) !important;
  }
  #pres-faceted-row svg {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  /* aux scatters visible but smaller */
  .pres-aux-collapsible { display: block !important; }
  .pres-aux-toggle { display: none !important; }
}

/* === Desktop (> 1024px) — no overrides; use native page CSS === */
@media (min-width: 1025px) {
  .pres-aux-collapsible { display: block !important; }
  .pres-aux-toggle { display: none !important; }
}

/* === High-DPI / Retina === */
@media (min-resolution: 2dppx) {
  svg { shape-rendering: geometricPrecision; }
}

/* === Print === */
@media print {
  nav.tabs, .scatter-toolbar, .pres-aux-toggle, #case-sidebar-fab, .lang-toggle { display: none !important; }
  body { background: white !important; }
}