/* Chart dimensions are measured by ResizeObserver, so SVG text stays unscaled. */
body:has(.forecast-detail-page) { overflow-y: auto; }
.forecast-detail-page { height: auto; min-height: calc(100vh - 50px); overflow: visible; gap: 16px; padding-bottom: 24px; }
.forecast-detail-page .forecast-chart-grid { flex: none; gap: 16px; grid-template-rows: auto; }
.forecast-detail-page .forecast-chart { min-width: 0; padding: 18px 16px 12px; box-shadow: 0 3px 16px rgba(23,67,83,.06); }
.forecast-detail-page .forecast-chart-heading { flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 0 4px 12px; }
.forecast-detail-page .forecast-chart-heading strong { font-size: 1rem; }
.forecast-detail-page .forecast-chart-heading span { font-size: .8rem; line-height: 1.65; }
.forecast-detail-page .forecast-chart-body { flex: none; width: 100%; height: 340px; overflow: visible; }
.forecast-detail-page #wind-chart { height: 280px; }
.forecast-detail-page .day-chart-svg { display: block; width: 100%; height: 100%; min-height: 0; }
.day-chart-svg .chart-axis { font-family: inherit; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.day-chart-svg .chart-grid { stroke-dasharray: none; stroke: rgba(38,87,104,.10); }
.day-chart-svg .chart-zero { stroke: #68848f; stroke-width: 1.5; }
.day-chart-svg .chart-plot-bg { fill: rgba(231,243,247,.22); }
.day-chart-svg .chart-axis-rain { fill: #0284c7; }
.day-chart-svg .area-observed, .day-chart-svg .area-forecast, .day-chart-svg .chart-temperature-area { opacity: .45; }
.day-chart-svg .chart-data-point.is-key-point { opacity: .22; }
.day-chart-svg .chart-data-point.is-last-point { opacity: 1; }
html.dark .day-chart-svg .chart-grid { stroke: rgba(255,255,255,.10); }
html.dark .day-chart-svg .chart-zero { stroke: #91a7b0; }
html.dark .day-chart-svg .chart-axis-rain { fill: #7dd3fc; }
.tropical-chart { height: 280px; gap: 7px; }
.tropical-bar-column i { border-radius: 5px 5px 0 0; }
@media (max-width: 720px) {
  .forecast-detail-page .forecast-chart { padding: 14px 6px 8px; }
  .forecast-detail-page .forecast-chart-heading { padding-inline: 8px; }
  .forecast-detail-page .forecast-chart-body { height: 310px; }
  .forecast-detail-page #wind-chart { height: 260px; }
  .day-chart-svg .chart-axis { font-size: 11px; }
}

.day-chart-svg [hidden] { display: none; }