.forecast-chart{position:relative;min-width:0;margin:0 0 16px;padding:22px 22px 16px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}
.forecast-chart-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.forecast-chart-titles{display:grid;gap:3px;min-width:0}
.forecast-chart-heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;min-width:0}
.forecast-chart-heading h3,.forecast-chart-rain-label{font-size:18px;line-height:1.25;margin:0;letter-spacing:-.3px}
.forecast-chart-legend{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:12px}
.forecast-chart-legend span{display:flex;align-items:center;gap:6px}
.forecast-chart-legend span::before{content:'';display:inline-block;width:18px;border-top:3px solid var(--accent)}
.forecast-chart-legend .chart-legend-min::before{border-top:2px dashed var(--muted)}
.forecast-chart-readout{font-size:12px;line-height:1.5;color:var(--muted);margin:12px 0;overflow-wrap:anywhere}
.forecast-chart-body{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr)}
.forecast-chart-axis{display:block;fill:var(--muted);font-family:inherit;font-size:11px}
.forecast-chart-viewport{min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;-webkit-overflow-scrolling:touch}
.forecast-chart-plot{display:block;max-width:none;overflow:visible;isolation:isolate;font-family:inherit}
.forecast-chart-plot text{font-size:11px;fill:var(--muted);pointer-events:none}
.forecast-chart-plot .chart-date-label{font-size:12px;font-weight:600;fill:var(--ink)}
.chart-grid,.chart-day-divider{fill:none;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.chart-grid-zero{stroke:var(--muted);stroke-dasharray:3 5;opacity:.65}
.chart-day-divider{stroke:var(--muted);stroke-dasharray:3 5;opacity:.4}
.chart-night-shade{fill:#24415b;opacity:.055;pointer-events:none}
:root[data-theme=dark] .chart-night-shade{fill:#000;opacity:.18}
.chart-line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.chart-line-minimum{stroke:var(--muted);stroke-width:2;stroke-dasharray:4 4}
.chart-line-long{stroke-dasharray:6 4}.chart-line-minimum.chart-line-long{stroke-dasharray:2 5}
.chart-dot{fill:var(--panel);stroke:var(--accent);stroke-width:1.5;pointer-events:none}.chart-dot-minimum{stroke:var(--muted)}
.chart-rain-bar{fill:#4289de}
.chart-rain-bar--probability{fill:none;stroke:#4289de;stroke-width:1.5;vector-effect:non-scaling-stroke}
.chart-point rect{fill:transparent;stroke:none}.chart-point{cursor:crosshair;outline:none}
.chart-point:focus-visible rect{fill:var(--accent-soft);opacity:.4}
.chart-guide{fill:none;stroke:var(--accent);stroke-width:1;stroke-dasharray:3 4;opacity:.5;pointer-events:none}
.forecast-chart-rain-label{display:flex;align-items:center;gap:12px;color:var(--ink)}
.forecast-chart-pan-controls{display:flex;gap:6px;flex:0 0 auto}
.chart-pan{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--accent);border-radius:7px;background:var(--panel);color:var(--accent);cursor:pointer}
.chart-pan svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chart-pan:hover:not(:disabled){background:var(--accent-soft)}.chart-pan:disabled{opacity:.35;cursor:default}.chart-pan[hidden]{display:none}
@media(max-width:760px){.forecast-chart{padding:16px 12px 12px;margin-bottom:13px}.forecast-chart-heading{gap:4px 10px}.forecast-chart-heading h3,.forecast-chart-rain-label{font-size:17px}.forecast-chart-readout{font-size:11px}.forecast-chart-legend{font-size:11px;gap:10px}}

.chart-weather-symbol{pointer-events:none}.chart-symbol-static{display:none}
@media(prefers-reduced-motion:reduce){.chart-symbol-animated{display:none}.chart-symbol-static{display:inline}}
@media print{.chart-symbol-animated{display:none}.chart-symbol-static{display:inline}}

.chart-temperature-swatch{flex:0 0 18px;align-self:center;border-top:3px solid var(--accent)}
.chart-rain-swatch{flex:0 0 10px;width:10px;height:14px;border:1.5px solid #4289de;border-radius:2px;background:#4289de;box-sizing:border-box}
.chart-rain-swatch--probability{background:transparent}
@media(max-width:760px){.forecast-chart-rain-label{gap:10px}}