/* Service area map: routes radiate from Boston and draw in when the map enters view. */
.azb-smap { display: grid; gap: var(--s-10); align-items: center; }
.azb-smap__side { display: grid; gap: var(--s-4); align-content: start; }
.azb-smap__title { margin: 0; font: 800 var(--fs-h2)/1.04 var(--font-display); letter-spacing: var(--tracking-display); text-wrap: balance; }
.azb-smap__line { margin: 0 0 var(--s-2); color: var(--azb-muted); font-size: var(--fs-lead); }
.azb-smap__chips { margin-top: var(--s-2); }
.azb-smap__chips li[hidden] { display: none; }
.azb-smap__none { margin: 0; color: var(--azb-muted); font-size: var(--fs-small); }
.azb-smap__map { margin: 0; border-radius: var(--radius-card); background: var(--azb-raised); border: 1px solid var(--azb-line); overflow: hidden; }
.azb-smap__map svg { display: block; width: 100%; height: auto; }
.azb-smap__state { fill: var(--azb-surface); stroke: color-mix(in srgb, var(--azb-ink) 14%, transparent); stroke-width: 0.8; }
.azb-smap__route { fill: none; stroke: var(--azb-accent); stroke-width: 1.4; stroke-linecap: round; opacity: 0.85; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur-scene) var(--ease-out), stroke-width var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out); }
.azb-smap__route--far { stroke-dasharray: 3 5; stroke-dashoffset: 0; opacity: 0; transition: opacity var(--dur-reveal) var(--ease-out) 900ms; stroke: var(--azb-ink); }
.azb-smap.is-in .azb-smap__route { stroke-dashoffset: 0; }
.azb-smap.is-in .azb-smap__route--far { opacity: 0.45; }
.azb-smap__route.is-active { stroke-width: 3; opacity: 1; }
.azb-smap__dot { fill: var(--azb-ink); }
.azb-smap__dot.is-active { fill: var(--azb-accent-hi); }
.azb-smap__hub { fill: var(--azb-accent); }
.azb-smap__ring { fill: none; stroke: var(--azb-accent); stroke-width: 1; opacity: 0.5; }
.azb-smap__apt rect { fill: none; stroke: var(--azb-muted); stroke-width: 1.2; }
.azb-smap__apt text, .azb-smap__far-label { font: 500 10px var(--font-mono); letter-spacing: 0.08em; fill: var(--azb-muted); }
.azb-smap__hub-label { font: 700 13px var(--font-display); fill: var(--azb-ink); }
@media (min-width: 1024px) {
	.azb-smap { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s-16); }
}
@media (prefers-reduced-motion: reduce) {
	.azb-smap__route { transition: none; stroke-dashoffset: 0; }
	.azb-smap__route--far { opacity: 0.45; transition: none; }
}