/* Each metric has its own discrete scale; dark colours use light text. */
.main-table .heat-temp-0, .forecast-scale .heat-temp-0 { background: #7038d6; color: #ffffff; }
.main-table .heat-temp-1, .forecast-scale .heat-temp-1 { background: #379bff; color: #102033; }
.main-table .heat-temp-2, .forecast-scale .heat-temp-2 { background: #70caff; color: #102033; }
.main-table .heat-temp-3, .forecast-scale .heat-temp-3 { background: #ffe52b; color: #102033; }
.main-table .heat-temp-4, .forecast-scale .heat-temp-4 { background: #ff9b25; color: #102033; }
.main-table .heat-temp-5, .forecast-scale .heat-temp-5 { background: #eb382b; color: #000000; }
.main-table .heat-wind-0, .forecast-scale .heat-wind-0 { background: #f3f5f8; color: #102033; }
.main-table .heat-wind-1, .forecast-scale .heat-wind-1 { background: #fff18a; color: #102033; }
.main-table .heat-wind-2, .forecast-scale .heat-wind-2 { background: #ffd52a; color: #102033; }
.main-table .heat-wind-3, .forecast-scale .heat-wind-3 { background: #ff882b; color: #102033; }
.main-table .heat-wind-4, .forecast-scale .heat-wind-4 { background: #dc2445; color: #ffffff; }
.main-table .heat-rain-0, .forecast-scale .heat-rain-0 { background: #9eeaff; color: #102033; }
.main-table .heat-rain-1, .forecast-scale .heat-rain-1 { background: #3ed1f5; color: #102033; }
.main-table .heat-rain-2, .forecast-scale .heat-rain-2 { background: #009dea; color: #102033; }
.main-table .heat-rain-3, .forecast-scale .heat-rain-3 { background: #0067cc; color: #ffffff; }
.main-table .heat-rain-4, .forecast-scale .heat-rain-4 { background: #173caa; color: #ffffff; }
.main-table .heat-snow-0, .forecast-scale .heat-snow-0 { background: #baf4b2; color: #102033; }
.main-table .heat-snow-1, .forecast-scale .heat-snow-1 { background: #77df66; color: #102033; }
.main-table .heat-snow-2, .forecast-scale .heat-snow-2 { background: #35bc49; color: #102033; }
.main-table .heat-snow-3, .forecast-scale .heat-snow-3 { background: #16812e; color: #ffffff; }
.main-table .heat-snow-4, .forecast-scale .heat-snow-4 { background: #095a22; color: #ffffff; }
.main-table .day-column { border-color: #afbfce; border-left-width: 2px; }
.main-table .day-column:nth-child(odd) .dt-date { background: #dfeaf3; color: #203b53; }
.main-table .day-column:nth-child(even) .dt-date { background: #cbdde9; color: #203b53; }
.main-table .dt-hour-day { background: #fff6da; color: #635127; }
.main-table .dt-hour-night { background: #dce4f0; color: #344c70; }
.main-table .dt-rh, .main-table .dt-wdir { background: #f4f7fa; color: #41566b; }
.main-table .dt-snow { background: #77df66; color: #102033; }
.main-table .dt-rain { background: #9eeaff; color: #102033; }
.main-table .dt-cloudy { background: #e1e6ed; color: #465569; }
.main-table .dt-desc { background: #ffe77a; color: #4b3a0c; }
.forecast-legend { margin: 16px 0; padding: 10px 14px; border: 1px solid #dce3ec; border-radius: 8px; background: #fff; color: #40546a; font-size: 12px; }
.forecast-legend summary { cursor: pointer; font-weight: 600; }
.forecast-legend summary span { margin-left: 10px; font-weight: 400; color: #63758a; }
.forecast-legend summary:focus-visible { outline: 3px solid #2589c6; outline-offset: 3px; }
.forecast-legend-scales { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
.forecast-legend-scales strong, .forecast-legend-scales span { display: block; }
.forecast-scale { display: flex; height: 10px; margin: 5px 0; border-radius: 3px; overflow: hidden; }
.forecast-scale i { flex: 1; }
.forecast-legend p { margin: 10px 0 0; color: #63758a; }
@media (max-width: 768px) { .forecast-legend-scales { grid-template-columns: repeat(2, minmax(0, 1fr)); } .forecast-legend summary span { display: block; margin-left: 0; } }