/* ── Viz area: legend panel + charts column ───────────── */
.viz-area { flex: 1; min-width: 0; display: flex; }
.charts-col {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
}
.chart-wrap { position: relative; min-height: 0; }
.chart-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.chart-wrap--pie      { flex: 0 0 42%; border-bottom: 1px solid var(--border); }
.chart-wrap--timeline { flex: 1; }

@media (max-width: 767px) {
  /* Allow page to scroll — override controls.css overflow:hidden */
  html, body { height: auto !important; min-height: 100dvh; overflow-y: auto !important; }
  .page-body { overflow: visible; }
  .main-area { height: auto; overflow: visible; }

  /* Stack charts vertically; each needs an explicit height for abs-positioned iframes */
  .viz-area { flex: none; height: auto; flex-direction: column; }
  .chart-wrap--pie      { flex: none; height: 55dvh; min-height: 280px; }
  .chart-wrap--timeline { flex: none; height: 50dvh; min-height: 250px; }

  .filter-panel.mobile-open { max-height: 260px; }
}