.forecast-view .timeline-dock{display:none}
.forecast-view #map{cursor:crosshair}
#forecastSection{width:460px;max-height:calc(100dvh - 120px)}
.forecast-location{font-size:15px;font-weight:600;margin:16px 0 6px}
.forecast-actions{display:flex;gap:8px;flex-wrap:wrap}
.forecast-actions button,.forecast-tabs button{padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:#ffffff08;color:var(--text);cursor:pointer;font:inherit;font-size:12px}
.forecast-tabs{display:flex;gap:8px;margin:16px 0}
.forecast-tabs button[aria-selected=true]{background:#80dccc20;border-color:#80dccc80;color:var(--accent)}
.forecast-attribution{font-size:11px;color:var(--muted);line-height:1.6;margin-top:16px}
.forecast-attribution a{color:var(--accent)}
.forecast-time{display:block;font-size:13px;font-weight:600;line-height:1.6}
.forecast-hero{display:flex;align-items:center;gap:14px;margin:12px 0}
.forecast-hero strong{font-size:38px;font-weight:600;letter-spacing:-1px}
.forecast-symbol{font-size:28px;line-height:1.5}
.forecast-condition{font-size:12px;color:var(--muted);line-height:1.5}
.forecast-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.forecast-metric{background:#ffffff05;border:1px solid var(--border);border-radius:12px;padding:12px}
.forecast-metric small{display:block;color:var(--muted);font-size:11px;line-height:1.5}
.forecast-metric strong{display:block;font-size:17px;margin-top:4px}
.forecast-hour-scroll{overflow:auto;max-height:260px;margin-top:16px;border:1px solid var(--border);border-radius:12px;overscroll-behavior:contain}
.forecast-hours{border-collapse:collapse;width:100%;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.forecast-hours th,.forecast-hours td{padding:9px 8px;text-align:right;border-bottom:1px solid var(--border)}
.forecast-hours th{position:sticky;top:0;background:#162634;color:var(--muted);font-weight:500}
.forecast-hours th:first-child,.forecast-hours td:first-child{text-align:left}
.forecast-hours tr[aria-current=true]{background:#80dccc18}
.forecast-days{display:grid;gap:8px}
.forecast-day{padding:12px;border:1px solid var(--border);border-radius:12px;background:#ffffff05}
.forecast-day-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;font-size:13px}
.forecast-day p{margin:0;font-size:11px;line-height:1.7;color:var(--muted)}
.forecast-note{font-size:11px;color:var(--muted);line-height:1.6;margin:10px 0}
.forecast-marker{border:2px solid #a5f0df;background:#173e44;border-radius:50%;box-shadow:0 0 0 5px #80dccc24}
.forecast-map-controls{margin-top:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
#forecastSection .forecast-map-controls select{width:100%;margin:6px 0 10px}
.forecast-map-opacity{display:flex;justify-content:space-between;color:var(--muted);font-size:11px}
#forecastMapColorbar{display:block;width:100%;height:18px;border-radius:5px;margin-top:8px}
#forecastMapLegendTicks{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:4px}
.forecast-map-dock{position:absolute;z-index:1800;left:16px;bottom:24px;width:min(760px,calc(100vw - 510px));padding:12px 16px;border:1px solid var(--border);border-radius:16px;background:var(--panel);box-shadow:var(--shadow);backdrop-filter:blur(18px)}
.forecast-map-dock-heading{display:flex;align-items:center;gap:10px;font-size:12px}
.forecast-map-dock-heading time{flex:1;text-align:right;font-size:11px}
.forecast-map-dock button{min-width:32px;min-height:32px;border:1px solid var(--border);border-radius:8px;background:#ffffff08;color:var(--text);cursor:pointer}
.forecast-map-dock button:disabled{opacity:.4;cursor:default}
.forecast-map-dock input{width:100%;height:24px;accent-color:var(--accent);cursor:pointer;margin:4px 0}
.forecast-map-range{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}
.forecast-map-dock .forecast-note{margin:6px 0 0}
/* Preserve observation-layer settings while viewing a different valid time. */
.forecast-model-view .leaflet-map-pane > .leaflet-pane{visibility:hidden}
.forecast-model-view .leaflet-map-pane > .leaflet-tile-pane,
.forecast-model-view .leaflet-map-pane > .leaflet-bathymetryPane-pane,
.forecast-model-view .leaflet-map-pane > .leaflet-forecastModel-pane,
.forecast-model-view .leaflet-map-pane > .leaflet-forecastPoint-pane{visibility:visible}
/* Make room for the ninth category while keeping the right-hand tools together. */
@media(min-width:1101px){.topbar{grid-template-columns:200px minmax(0,1fr) 110px}.category-nav{gap:4px}}
@media(max-width:760px){
  body #forecastSection{bottom:calc(12px + env(safe-area-inset-bottom));max-height:calc(100dvh - 155px - env(safe-area-inset-top));width:calc(100vw - 16px)}
  .forecast-actions button,.forecast-tabs button{min-height:44px}
  .forecast-hour-scroll{max-height:220px}
  .forecast-map-dock{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));width:auto;padding:8px 12px}
  .forecast-map-dock button{min-width:40px;min-height:40px}
  .forecast-map-dock input{height:30px;touch-action:pan-x}
  .forecast-map-dock-heading{gap:6px;font-size:11px}
  .forecast-map-dock-heading time{font-size:10px}
  .forecast-map-range{font-size:9px}
  body.forecast-model-view #forecastSection{bottom:calc(160px + env(safe-area-inset-bottom));max-height:calc(100dvh - 310px - env(safe-area-inset-top))}
}
@media(max-width:760px) and (max-height:500px) and (orientation:landscape){body #forecastSection{width:55vw;bottom:8px;max-height:calc(100dvh - 116px)}}
@media(max-width:760px) and (max-height:500px) and (orientation:landscape){body.forecast-model-view #forecastSection{bottom:8px;max-height:calc(100dvh - 116px)}.forecast-map-dock{right:auto;width:calc(45vw - 24px)}}

.forecast-map-layer-heading{display:flex;align-items:center;gap:8px}
.forecast-map-layer-heading .info-button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--border);border-radius:50%;background:transparent;color:var(--text);cursor:pointer}
.forecast-map-layer-heading .info-button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#forecastMapInfo{margin:8px 0 10px}
#forecastMapInfo .forecast-note{margin:0}
@media(max-width:760px){.forecast-map-layer-heading .info-button{width:44px;height:44px}}