/* Chart container base heights and responsive overrides. */

.chart-container--lg {
  height: 500px;
  width: 100%;
}

.chart-container--md {
  height: 400px;
  width: 100%;
}

.chart-container--heatmap {
  height: 500px;
  width: 100%;
}

/* MET page titles - base and responsive */
.met-page-title {
  letter-spacing: 1px;
  font-size: 20px;
}

/* Plotly chart backgrounds - transparent to match card surface */
.js-plotly-plot .main-svg {
  background: transparent !important;
}

.js-plotly-plot .legend .bg {
  fill: transparent !important;
}

@media (max-height: 800px) {
  .chart-container--lg {
    height: clamp(260px, 38vh, 500px);
  }

  .chart-container--md {
    height: clamp(220px, 32vh, 400px);
  }

  .chart-container--heatmap {
    height: clamp(320px, 48vh, 500px);
  }

  .met-page-title {
    font-size: 16px !important;
  }

  /* All h4 card/chart titles across all pages */
  .mantine-Card-root h4,
  .mantine-Paper-root h4 {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.3;
  }

  /* Text-based titles (shear page uses dmc.Text instead of dmc.Title) */
  .mantine-Paper-root > .mantine-Stack-root > .mantine-Text-root {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.3;
  }
}