/* The home page valley map. */

.vm { background: var(--navy); border-radius: 16px; overflow: hidden; box-shadow: 0 14px 32px rgba(15, 42, 67, .24); }
.vm-svg { display: block; width: 100%; height: auto; }

.vm-zone { fill: #1d4e7d; stroke: rgba(242, 118, 46, .6); stroke-width: 1.5; stroke-linejoin: round; }
.vm-zone-only { fill: rgba(110, 196, 245, .07); stroke: rgba(110, 196, 245, .65); stroke-width: 1.5; stroke-dasharray: 6 5; stroke-linejoin: round; }
.vm-road { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 2.5; }
.vm-road-label, .vm-range { fill: #8fa6bb; font: 700 11px var(--font-display); }
.vm-range { letter-spacing: .06em; }

.vm-city { cursor: pointer; outline: none; }
.vm-hit { fill: transparent; }
.vm-dot { fill: var(--orange); stroke: #fff; stroke-width: 2; transition: r .15s ease; }
.vm-city.is-only .vm-dot { fill: #6ec4f5; }
.vm-city text { fill: #e8f1f8; font: 600 14px var(--font-display); paint-order: stroke; stroke: var(--navy); stroke-width: 3px; }
.vm-city.is-on .vm-dot { r: 9; }
.vm-city.is-on text { fill: #fff; font-weight: 700; }
.vm-city:focus-visible .vm-dot { stroke: #fbbc04; stroke-width: 3; }
.vm-pulse { fill: rgba(242, 118, 46, .5); transform-box: fill-box; transform-origin: center; animation: vm-pulse 2.6s ease-out infinite; }
@keyframes vm-pulse { to { transform: scale(3.2); opacity: 0; } }

.vm-card { padding: 14px 18px 16px; background: #fff; }
.vm-card-top { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.vm-card h3 { margin: 0; font-size: 1.25rem; }
.vm-pill { font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; background: #fff0e6; color: var(--orange-text); }
.vm.is-only .vm-pill { background: #e6f4fc; color: #17618f; }
.vm-card p { margin: 6px 0 12px; color: var(--muted); font-size: .94rem; }
.vm-links { display: flex; flex-wrap: wrap; gap: 8px; }
.vm-links .btn { flex: 1 1 150px; padding: 9px 12px; font-size: .92rem; }
.vm-links .btn-ghost { border-width: 1.5px; }
.vm-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 10px 18px; margin: 0; background: #143553; color: #cfe0ee; font-size: .8rem; }
.vm-legend li::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; background: var(--orange); }
.vm-legend li + li::before { background: #6ec4f5; }