/* Map styles. Widths are in screen pixels (vector-effect: non-scaling-stroke), so roads keep their weight at any zoom. */

.rw-map { display: block; width: 100%; height: 100%; background: var(--map-bg); user-select: none; -webkit-user-select: none; touch-action: none; --rw: 1; --mk: 1; }
.rw-map.is-static { touch-action: auto; }

.rw-map .m-grid line { stroke: var(--map-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }

.rw-map .m-roads path, .rw-map .m-halo path, .rw-map .m-hit path { fill: none; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rw-map .m-halo path { stroke: var(--map-bg); stroke-linecap: round; stroke-width: calc(var(--rw) * 8px); }
.rw-map .m-roads path { stroke-linecap: round; stroke-width: calc(var(--rw) * 3px); stroke: var(--sev-n); }
.rw-map .m-roads path.sev-0 { stroke: var(--sev-0); opacity: 0.9; }
.rw-map .m-roads path.sev-1 { stroke: var(--sev-1); stroke-width: calc(var(--rw) * 4px); }
.rw-map .m-roads path.sev-2 { stroke: var(--sev-2); stroke-width: calc(var(--rw) * 5px); }
.rw-map .m-roads path.sev-3 { stroke: var(--sev-3); stroke-width: calc(var(--rw) * 5.5px); stroke-linecap: butt; stroke-dasharray: 11 6; }
.rw-map .m-roads path.sev-n { opacity: 0.8; }
.rw-map .m-halo path.sev-1 { stroke-width: calc(var(--rw) * 9px); }
.rw-map .m-halo path.sev-2 { stroke-width: calc(var(--rw) * 10px); }
.rw-map .m-halo path.sev-3 { stroke-width: calc(var(--rw) * 10.5px); }
.rw-map path.dim { opacity: 0.16 !important; }
.rw-map .m-hit path { stroke: transparent; stroke-width: 22px; pointer-events: stroke; cursor: pointer; }

.rw-map .m-wind .w-bg { fill: var(--map-bg); stroke: #5d6870; stroke-width: 2; }
.rw-map .m-wind .w-arrow { fill: #9aa5ac; }
.rw-map .m-wind.lv-1 .w-bg { stroke: var(--sev-1); }
.rw-map .m-wind.lv-1 .w-arrow { fill: var(--sev-1); }
.rw-map .m-wind.lv-2 .w-bg { stroke: var(--sev-2); stroke-width: 2.5; }
.rw-map .m-wind.lv-2 .w-arrow { fill: var(--sev-2); }
.rw-map .m-wind.lv-3 .w-bg { fill: var(--sev-3); stroke: #ffd9d9; stroke-width: 2; }
.rw-map .m-wind.lv-3 .w-arrow { fill: #fff; }
.rw-map .m-wind.lv-n .w-bg { stroke-dasharray: 3 3; }

.rw-map text { font-family: var(--font); fill: var(--map-ink); paint-order: stroke; stroke: var(--map-bg); stroke-width: 3.5px; stroke-linejoin: round; }
.rw-map .m-gust { font-family: var(--font-cond); font-weight: 700; font-size: 15px; letter-spacing: 0.01em; }
.rw-map .m-gust.lv-0 { fill: var(--map-ink-2); font-weight: 600; }
.rw-map .m-name { font-weight: 500; font-size: 12.5px; fill: var(--map-ink-2); }
.rw-map .m-name.t1 { font-weight: 600; fill: var(--map-ink); }
.rw-map .m-scale line { stroke: var(--map-ink-2); stroke-width: 2; }
.rw-map .m-scale text { font-size: 12px; fill: var(--map-ink-2); }

.rw-map [data-pick] { cursor: pointer; }
.rw-map .m-sel { fill: none; stroke: var(--accent); stroke-width: 2; }