:root {
  --royal-blue: #007AFF;
  --deep-blue: #0A3D91;
  --cyan: #00D8FF;
  --teal: #00C29A;
  --graphite: #0B0B0D;
  --navy: #071A3A;
  --mist: #F8FAFF;
  --top-inset: 0px;
  --bottom-inset: 0px;
}
html, body, #map { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { font: 13px -apple-system, system-ui, sans-serif; background: #eef2f7; -webkit-user-select: none; user-select: none; }
html.dark body { background: var(--graphite); }
#map { touch-action: none; background: inherit; }
#status { position: absolute; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; color: var(--deep-blue); background: var(--mist); }
#status[hidden] { display: none; }

/* The app draws its own controls; the map only keeps its credits, kept clear of the app's panels. */
.leaflet-control-zoom { display: none; }
.leaflet-top { top: var(--top-inset); }
.leaflet-bottom { bottom: var(--bottom-inset); transition: bottom .25s ease; }
#maptiler-logo { display: block; line-height: 0; margin: 0 0 6px 8px !important; opacity: .9; }
#maptiler-logo[hidden] { display: none; }
#maptiler-logo img { display: block; width: 67px; height: 20px; }
.map-credits { display: flex; align-items: center; gap: 6px; margin: 0 8px 6px 0 !important; padding: 2px; border-radius: 12px; font-size: 11px; line-height: 1.3; color: #0B0B0D; background: rgba(255,255,255,.88); box-shadow: 0 1px 3px #0003; }
.map-credits .map-credits-text { padding-left: 6px; }
.map-credits.collapsed { background: none; box-shadow: none; }
.map-credits.collapsed .map-credits-text { display: none; }
.map-credits a { color: #0A3D91; text-decoration: none; }
.map-credits button { flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; font: 600 13px/22px Georgia, serif; color: #0A3D91; background: #fff; box-shadow: 0 1px 3px #0005; -webkit-tap-highlight-color: transparent; }

/* Markers */
.roam-pin svg { display: block; filter: drop-shadow(0 2px 3px rgba(7, 26, 58, .45)); }
.roam-result span { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--deep-blue); color: #fff; font: 600 12px/1 -apple-system, system-ui, sans-serif; border: 2px solid #fff; box-shadow: 0 1px 4px #0006; box-sizing: border-box; }
.roam-result.selected span { background: var(--royal-blue); transform: scale(1.2); }
.roam-favorite span { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 14px; border: 2px solid #fff; box-shadow: 0 1px 4px #0006; box-sizing: border-box; }
.roam-user span { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--royal-blue); border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(0, 122, 255, .2), 0 1px 4px #0006; box-sizing: border-box; }
.roam-start span, .roam-end span { display: block; width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 4px #0008; box-sizing: border-box; }
/* Hollow, so the route start never reads as the live location dot. */
.roam-start span { background: #fff; border-color: var(--royal-blue); }
.roam-end span { background: var(--teal); }