/* Flat SVG day-map fallback (js/views-map.js). It stays available when 3D consent is not given, when offline,
   or when WebGL/OpenFreeMap cannot load. Square numbered stops and hairline route keep Vale's timetable language. */
.dmap { margin: var(--s4) 0 var(--s5); }
.dmap .lab { margin: 0 0 var(--s2); }
.dmap-box { position: relative; aspect-ratio: 4 / 3; border: var(--rule) solid var(--ink); background: var(--surface); overflow: hidden; }
.dmap-svg { display: block; width: 100%; height: 100%; }
.dmap-bg { fill: var(--surface); }
.dmap-grid { stroke: var(--line); stroke-width: .75; fill: none; }
.dmap-lm rect { fill: var(--ink-2); }
.dmap-lm text { fill: var(--ink-2); font: 500 9px var(--f-mono); letter-spacing: .02em; }
.dmap-leg { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: square; fill: none; }
.dmap-away polygon { fill: var(--ink); }
.dmap-you { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }

.dmap-pins { list-style: none; margin: 0; padding: 0; }
.dmap-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: var(--ctl); height: var(--ctl);
  display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.dmap-num { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; background: var(--ink); color: var(--bg);
  font: 500 var(--fs-sm)/1 var(--f-mono); border: var(--rule) solid var(--ink); }
.dmap-pin[data-next="true"] .dmap-num { background: var(--go); color: var(--go-ink); border-color: var(--go-ink); }
.dmap-pin.away .dmap-num { background: var(--surface); color: var(--ink); }
.dmap-pin:hover .dmap-num { outline: var(--heavy) solid var(--accent); outline-offset: 1px; }
.dmap-pin:focus-visible { outline: none; }
.dmap-pin:focus-visible .dmap-num { outline: 3px solid var(--accent); outline-offset: 2px; }

.dmap-awayl { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.dmap-awayl b { font-family: var(--f-mono); }
.dmap figcaption { margin-top: var(--s2); color: var(--ink-2); }
.dmap-key { white-space: nowrap; }
.dmap-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-right: var(--s1); vertical-align: -1px; }
@media (min-width: 960px) { .dmap-box { aspect-ratio: 16 / 9; } }