.page-forecast-map .content-frame {max-width:none; padding:0; gap:0}
.forecast-map-frame {position:relative; width:100%; aspect-ratio:1.618034; overflow:hidden; border:0; border-radius:0; background:var(--line); box-shadow:none}
.forecast-map {position:absolute; inset:0; font:14px/1.5 'Segoe UI',sans-serif}
.forecast-map-message {position:absolute; z-index:2; left:16px; right:16px; bottom:16px; width:fit-content; max-width:calc(100% - 32px); margin:0 auto; padding:10px 16px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:var(--panel); font-size:14px; box-shadow:var(--shadow); pointer-events:none}
.forecast-map-message[hidden] {display:none}
.forecast-map-back-top {position:fixed; z-index:4; display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:7px; color:var(--ink); background:var(--panel); box-shadow:0 0 0 2px #0000001a; cursor:pointer}
.forecast-map-back-top[hidden] {display:none}
.forecast-map-back-top:hover {background:var(--subtle)}
.forecast-map-back-top:focus-visible {outline:2px solid var(--accent); outline-offset:2px}
.forecast-map-back-top svg {fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.forecast-map .maplibregl-ctrl-group {border-radius:7px; overflow:hidden}
.forecast-map .maplibregl-ctrl-group button {width:36px; height:36px}
.forecast-map .maplibregl-ctrl-scale {font-size:11px}
.forecast-map .maplibregl-popup-content {padding:16px 20px; border-radius:8px; color:var(--ink); background:var(--panel); box-shadow:0 3px 18px #172b3e25; font:14px/1.5 'Segoe UI',sans-serif}
.forecast-map .maplibregl-popup-close-button {width:30px; height:30px; color:var(--muted); font-size:20px}
.forecast-map .maplibregl-popup-anchor-bottom .maplibregl-popup-tip {border-top-color:var(--panel)}
.forecast-map .maplibregl-popup-anchor-top .maplibregl-popup-tip {border-bottom-color:var(--panel)}
.forecast-map .maplibregl-popup-anchor-left .maplibregl-popup-tip {border-right-color:var(--panel)}
.forecast-map .maplibregl-popup-anchor-right .maplibregl-popup-tip {border-left-color:var(--panel)}
.forecast-map-popup-title {display:block; margin:0 18px 8px 0; font-size:16px; font-weight:600}
@media (max-width:500px) {.forecast-map .maplibregl-ctrl-group button,.forecast-map-back-top {width:32px; height:32px}}

@media (max-width:800px) {.forecast-map-frame {aspect-ratio:1}}

.forecast-map .maplibregl-ctrl-group {background:var(--panel);color:var(--ink)}
.forecast-map .maplibregl-ctrl-group button+button {border-top-color:var(--line)}
.forecast-map .maplibregl-ctrl-group button:hover {background:var(--subtle)}
:root[data-theme=dark] .forecast-map .maplibregl-ctrl-icon {filter:invert(1)}
.forecast-map .maplibregl-ctrl-scale {color:var(--ink);border-color:var(--muted);background:var(--panel)}

.forecast-map .forecast-map-place-popup {z-index:3; width:360px; max-width:calc(100% - 24px)}
.forecast-map .forecast-map-place-popup .maplibregl-popup-content {width:100%; padding:14px; border:1px solid var(--line); border-radius:10px}
.forecast-map-popup-body {overflow-y:auto; overscroll-behavior:contain}
.forecast-map .forecast-map-place-popup :is(a,button,[tabindex]):focus-visible {outline:2px solid var(--accent); outline-offset:-2px}
.forecast-map-preview-title {margin:0 22px 3px 0; font-size:18px; line-height:1.25}
.forecast-map-preview-region {margin:0 20px 12px 0; color:var(--muted); font-size:12px; line-height:1.4}
.forecast-map-preview-days {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px}
.forecast-map .forecast-map-preview-day {padding:8px 3px; color:var(--ink); text-decoration:none}
.forecast-map .forecast-map-preview-day:hover {background:var(--accent-soft); outline:1px solid var(--line)}
.forecast-map .forecast-map-preview-day time {font-size:13px; font-weight:600; white-space:nowrap}
.forecast-map .forecast-map-preview-day .weather-symbol {width:56px; height:56px; margin:2px 0}
.forecast-map .forecast-map-preview-day .weather-icon {display:block; width:56px; height:56px}
.forecast-map-preview-temperatures {display:flex; justify-content:center; flex-wrap:wrap; gap:3px 8px; margin:2px 0 0; font-size:14px; line-height:1.4}
.forecast-map-preview-temperatures dd {margin:0; white-space:nowrap}
.forecast-map-preview-links {display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:12px; font-size:13px; line-height:1.6}
.forecast-map-preview-links a {font-weight:600}
.forecast-map-preview-note {margin:10px 0; color:var(--muted); font-size:13px}
.forecast-map-preview-retry {padding:5px 9px; border:1px solid var(--line); border-radius:5px; color:var(--accent); background:var(--subtle); font:inherit; cursor:pointer}
.forecast-map-place-popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,.forecast-map-place-popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {border-top-color:var(--panel)}