/* Vale's optional MapLibre day map. Keeps the printed-timetable language: square controls, mono numbers, hairline rules. */
.dmap3d-panel { margin: var(--s4) 0 var(--s5); min-width: 0; }
.dmap3d-panel .lab { margin: 0 0 var(--s2); }
.dmap3d-slot { position: relative; aspect-ratio: 4 / 3; border: var(--rule) solid var(--ink); background: var(--surface); overflow: hidden; isolation: isolate; }
.dmap3d-slot[hidden], .dmap3d-panel[hidden] { display: none; }
.dmap3d-canvas { position: absolute; inset: 0; opacity: 0; transition: opacity .24s ease; }
.dmap3d-panel.ready .dmap3d-canvas { opacity: 1; }
.dmap3d-skeleton { position: absolute; inset: 0; z-index: 6; display: grid; place-items: end start; padding: var(--s3); overflow: hidden;
  background: linear-gradient(110deg, var(--surface) 25%, var(--bg) 42%, var(--surface) 58%); background-size: 220% 100%; animation: dmap3d-shimmer 1.2s linear infinite; }
.dmap3d-skeleton span { font: 500 var(--fs-sm) var(--f-mono); color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; }
.dmap3d-panel.ready .dmap3d-skeleton { display: none; }
@keyframes dmap3d-shimmer { to { background-position: -220% 0; } }

.dmap3d-controls { position: absolute; z-index: 7; top: var(--s2); left: var(--s2); display: grid; grid-template-columns: repeat(4, var(--ctl)); border: var(--rule) solid var(--ink); background: var(--surface); }
.dmap3d-ctl { width: var(--ctl); height: var(--ctl); padding: 0; border: 0; border-right: var(--rule) solid var(--ink); background: var(--surface); color: var(--ink); font: 500 18px/1 var(--f-mono); cursor: pointer; }
.dmap3d-ctl:last-child { border-right: 0; }
.dmap3d-ctl:hover { background: var(--bg); }
.dmap3d-ctl:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--accent); outline-offset: -3px; }
.dmap3d-mode { font-size: var(--fs-xs); letter-spacing: .04em; }
.dmap3d-mode[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

.dmap3d-attrib { position: absolute; z-index: 6; right: 0; bottom: 0; max-width: calc(100% - 8px); padding: 3px 6px; background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--ink-2); font: 500 9px/1.25 var(--f-mono); }
.dmap3d-away { position: absolute; z-index: 7; right: var(--s2); top: var(--s2); display: grid; gap: var(--s1); justify-items: end; max-width: min(68%, 300px); }
.dmap3d-away-chip { min-height: var(--ctl); max-width: 100%; padding: 8px 10px; border: var(--rule) solid var(--ink); background: var(--surface); color: var(--ink); font: 500 var(--fs-xs)/1.25 var(--f-mono); text-align: right; cursor: pointer; }
.dmap3d-away-chip:hover { background: var(--go); color: var(--go-ink); }
.dmap3d-away-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.dmap3d-marker { width: var(--ctl); height: var(--ctl); display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--bg); font: 500 var(--fs-sm)/1 var(--f-mono); }
.dmap3d-marker::before { content: ""; position: absolute; width: 28px; height: 28px; background: var(--ink); border: var(--rule) solid var(--ink); z-index: -1; }
.dmap3d-marker:hover::before { outline: var(--heavy) solid var(--accent); outline-offset: 1px; }
.dmap3d-marker:focus-visible { outline: none; }
.dmap3d-marker:focus-visible::before { outline: 3px solid var(--accent); outline-offset: 2px; }
.dmap3d-marker.next { color: var(--go-ink); }
.dmap3d-marker.next::before { background: var(--go); border-color: var(--go-ink); }
.dmap3d-marker.next::after { content: ""; position: absolute; width: 34px; height: 34px; border: var(--rule) solid var(--go); animation: dmap3d-pulse 1.8s ease-out infinite; }
@keyframes dmap3d-pulse { 0%, 45% { transform: scale(.85); opacity: .75; } 100% { transform: scale(1.35); opacity: 0; } }

.dmap3d-person { width: 18px; height: 18px; border: 3px solid var(--surface); background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 20%, transparent); }
.dmap3d-now { width: 12px; height: 12px; border: 2px solid var(--surface); background: var(--go); box-shadow: 0 0 0 1px var(--go-ink); border-radius: 50%; }
.dmap3d-route-note { margin: var(--s2) 0 0; color: var(--ink-2); }

.dmap3d-canvas .maplibregl-map, .dmap3d-canvas .maplibregl-canvas-container, .dmap3d-canvas .maplibregl-canvas { width: 100%; height: 100%; }
.dmap3d-canvas .maplibregl-canvas { display: block; }
.dmap3d-canvas .maplibregl-marker { will-change: transform; }

.dmap3d-consent { margin-top: var(--s3); padding-top: var(--s3); border-top: var(--rule) solid var(--line); display: grid; gap: var(--s2); justify-items: start; }
.dmap3d-consent-btn { min-height: var(--ctl); }
.dmap3d-fallback { margin: 0; color: var(--warn); font-weight: 600; }

@media (min-width: 960px) {
  .dmap3d-slot { aspect-ratio: 16 / 9; }
}
@media (max-width: 420px) {
  .dmap3d-slot { aspect-ratio: 1 / 1; }   /* a phone map was 326 x 244 with a 88 px control block in it */
  .dmap3d-controls { grid-template-columns: repeat(2, var(--ctl)); }
  .dmap3d-ctl:nth-child(2) { border-right: 0; border-bottom: var(--rule) solid var(--ink); }
  .dmap3d-ctl:nth-child(1) { border-bottom: var(--rule) solid var(--ink); }
  .dmap3d-away { top: calc(var(--s2) + var(--ctl) * 2 + 4px); max-width: 74%; }
}
@media (prefers-reduced-motion: reduce) {
  .dmap3d-canvas { transition: none; }
  .dmap3d-skeleton, .dmap3d-marker.next::after { animation: none !important; }
  .dmap3d-marker.next::after { display: none; }
}