.storm-map { margin:17px 0 13px; }
.forecast-timeline { margin:0 0 19px; }
.map-forecast-details { margin:9px 0 0; color:var(--wine); font-size:12px; }
.map-forecast-details summary { cursor:pointer; font-weight:700; width:fit-content; }
.forecast-timeline h3 { color:var(--wine); font:700 18px/1.2 var(--serif); margin:0; }
.timeline-note { color:var(--muted); font-size:11px; margin:5px 0 0; line-height:1.65; }
.timeline-list { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(145px,1fr); gap:8px; list-style:none; margin:9px 0 0; padding:3px 3px 8px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:#c4a199 #f5eee6; }
.timeline-list li { min-width:0; scroll-snap-align:start; }
.timeline-card { display:flex; flex-direction:column; align-items:flex-start; gap:3px; width:100%; height:100%; padding:8px 10px; text-align:left; background:#fcf7f0; color:var(--ink); border:1px solid #eadfd3; border-radius:8px; }
.timeline-card:hover,.timeline-card[aria-pressed="true"] { background:#f8e9df; border-color:#ba8279; }
.timeline-card[aria-pressed="true"] { box-shadow:inset 0 2px 0 var(--wine); }
.timeline-time { display:flex; align-items:center; gap:7px; color:var(--wine); font-size:11px; white-space:nowrap; }
.timeline-time strong { font-size:12px; }
.timeline-place { font-size:13px; line-height:1.4; }
.timeline-source,.timeline-coordinates,.timeline-radius { color:var(--muted); font-size:10px; }
.timeline-source { margin-bottom:auto; }
.timeline-radius { white-space:nowrap; }
.storm-map-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.storm-map-heading h3 { color:var(--wine); font:700 18px/1.2 var(--serif); margin:0; }
.storm-map-heading p { color:var(--muted); font-size:11px; margin:4px 0 0; }
.map-time { min-width:0; width:max-content; max-width:49%; padding:6px 8px; border:1px solid #e0cfc3; border-radius:7px; background:#fffaf3; color:#654445; font-size:11px; }
.map-time:focus-visible { outline:2px solid #b77724; outline-offset:3px; }
.map-surface { position:relative; overflow:hidden; isolation:isolate; height:clamp(290px,42vw,460px); background:#dcebef; border:1px solid #ccdfe3; border-radius:11px; cursor:grab; touch-action:none; }
.map-surface:active { cursor:grabbing; }
.map-drawing { width:100%; height:100%; }
.map-drawing path { vector-effect:non-scaling-stroke; }
.map-grid { fill:none; stroke:#93aebc; stroke-width:1; stroke-opacity:.22; }
.map-land { fill:#f8f2e7; stroke:#8e9e9b; stroke-width:1; }
.map-place { pointer-events:none; fill:#4d655f; font-weight:700; font-size:11px; }
.map-place text { paint-order:stroke; stroke:#fffcf4; stroke-width:3; stroke-linejoin:round; }
.map-place-local { fill:#7d2730; font-size:12px; }
.map-place-local circle { stroke:#fff7eb; stroke-width:1.4; }
.map-place-ocean { fill:#466c7f; font-weight:600; font-size:13px; letter-spacing:.13em; }
.map-place-ocean text { stroke:#deedf0; text-anchor:middle; }
.map-area { stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.map-area-warning { fill:#d35e65; fill-opacity:.09; stroke:#a33e51; stroke-dasharray:8 4 2 4; }
.map-area-probability { fill:#f9fdff; fill-opacity:.36; stroke:#396b89; stroke-dasharray:5 3.5; }
.map-area-strong { fill:#f6d65d; fill-opacity:.53; stroke:#9f6c16; }
.map-area-storm { fill:#db5256; fill-opacity:.6; stroke:#972f3c; }
.map-area-outline { fill:none; }
.map-route { fill:none; stroke:#593a45; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.map-route-forecast { stroke:#355e76; stroke-dasharray:3 3; }
.map-point-forecast { fill:#fffaf4; stroke:#355e76; stroke-width:1.5; }
.map-point-selected { fill:#325f7a; stroke:#fffaf4; stroke-width:2.2; }
.map-point-current { fill:#a83645; stroke:#fffaf4; stroke-width:1.6; }
.map-forecast-label,.map-forecast-hit { cursor:pointer; }
.map-forecast-label { color:#264e67; }
.map-label-leader { stroke:#557d94; stroke-width:1.1; stroke-linecap:round; vector-effect:non-scaling-stroke; pointer-events:none; }
.map-label-box { fill:#fffdf7; stroke:#6a8da1; stroke-width:1; vector-effect:non-scaling-stroke; }
.map-label-time,.map-label-place { fill:currentColor; font-family:var(--sans); pointer-events:none; }
.map-label-time { font-size:10px; font-weight:700; font-variant-numeric:tabular-nums; }
.map-label-place { font-size:11px; font-weight:700; }
.map-forecast-label-compact .map-label-box { fill:#f4f9fa; }
.map-forecast-label:is(:hover,:focus-visible) .map-label-box { fill:#ecf5f9; stroke:#264e67; stroke-width:1.5; }
.map-forecast-label-selected { color:#752b3b; }
.map-forecast-label-selected .map-label-leader { stroke:#9a4554; stroke-width:1.5; }
.map-forecast-label-selected .map-label-box,
.map-forecast-label-selected:is(:hover,:focus-visible) .map-label-box { fill:#fff1eb; stroke:#9a4554; stroke-width:1.6; }
.map-navigation { position:absolute; display:grid; gap:4px; z-index:1; top:10px; left:10px; }
.map-navigation button { display:grid; place-items:center; width:31px; height:31px; border:1px solid #cdd9d8; border-radius:7px; background:#fffdf8; color:#633c46; font:700 17px/1 var(--sans); box-shadow:0 1px 5px #2d3f4220; }
.map-navigation button:hover:enabled { background:#f8ece5; }
.map-navigation button:disabled { opacity:.55; }
.map-north { position:absolute; right:11px; top:10px; font-size:12px; font-weight:700; color:#4b6270; background:#fffdf3df; border-radius:5px; padding:3px 6px; pointer-events:none; }
.map-credit { position:absolute; right:0; bottom:0; background:#fffcf4dc; color:#42585f; border-top-left-radius:5px; padding:3px 5px; font-size:9px; }
.map-credit:hover { text-decoration:underline; }
.map-legend { display:flex; flex-wrap:wrap; gap:7px; min-width:0; border:0; padding:0; margin:10px 0 0; }
.map-legend legend { margin-bottom:6px; color:var(--muted); font-size:11px; }
.map-layer-choice { display:flex; align-items:center; gap:5px; padding:5px 7px; border-radius:6px; background:#faf4ec; border:1px solid #eee2d5; font-size:11px; white-space:nowrap; cursor:pointer; }
.map-layer-choice:has(input:disabled) { opacity:.48; cursor:default; }
.map-layer-choice input { margin:0 1px 0 0; accent-color:var(--wine); }
.map-swatch { width:15px; height:9px; border-radius:3px; }
.map-swatch-strong { background:#f9dc77; border:1px solid #9f6c16; }
.map-swatch-storm { background:#ea8b90; border:1px solid #972f3c; }
.map-swatch-probability { background:#eef6fa; border:1px dashed #396b89; }
.map-swatch-warning { background:#faecee; border:1px dashed #a33e51; }
.map-hint { margin:7px 0 0; color:var(--muted); font-size:11px; line-height:1.6; }
.map-route-key { display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 0; color:#5f5654; font-size:10px; }
.map-route-key span::before { content:""; display:inline-block; width:14px; margin-right:5px; vertical-align:3px; border-top:2px solid #593a45; }
.map-route-key span + span::before { border-top:2px dashed #355e76; }
@media(max-width:760px) {
  .map-surface { height:360px; }
  .storm-map-heading { align-items:flex-start; flex-direction:column; gap:6px; }
  .storm-map-heading h3 { font-size:16px; }
  .forecast-timeline h3 { font-size:16px; }
  .storm-map-heading p { font-size:10px; }
  .map-time { max-width:100%; }
  .map-navigation button { width:35px; height:35px; }
}