:root {
  --royal-blue: #007AFF;
  --deep-blue: #0A3D91;
  --cyan: #00D8FF;
  --teal: #00C29A;
  --graphite: #0B0B0D;
  --navy: #071A3A;
  --mist: #F8FAFF;
  --top-inset: 0px;
  --bottom-inset: 0px;
  --left-inset: 0px;
  --credits-right: 0px;
}
html, body, #map { margin: 0; width: 100%; height: 100%; overflow: hidden; }
/* iOS can enlarge long runs of text in web pages (when the phone turns sideways, for one): credits stay 11 px. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
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 and logo, kept clear of the app's panels. */
.app-corner { position: absolute; bottom: var(--bottom-inset); z-index: 2; display: flex; flex-direction: column; pointer-events: none; transition: bottom .25s ease, left .25s ease, right .25s ease; }
.app-corner > * { pointer-events: auto; }
.app-corner.left { left: var(--left-inset); align-items: flex-start; }
.app-corner.right { right: var(--credits-right); align-items: flex-end; }
#maptiler-logo { display: block; line-height: 0; margin: 0 0 6px 8px; opacity: .9; }
#maptiler-logo[hidden] { display: none; }
#maptiler-logo img { display: block; width: auto; height: 20px; }  /* MapTiler's or Mapbox's logo, whichever map is showing */
/* Credits and (i) match the app's glass controls (tab bar, map buttons): frosted see-through, plain text. */
.map-credits { display: flex; align-items: center; gap: 6px; margin: 0 8px 6px 0; padding: 2px; border-radius: 13px; font-size: 11px; line-height: 1.3; color: #1C1C1E; }
.map-credits:not(.collapsed), .map-credits button { background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(14px) saturate(1.8); backdrop-filter: blur(14px) saturate(1.8); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.7), 0 2px 8px rgba(0,0,0,.12); }
/* Every provider's credits look like MapTiler's: one line in a pill of the same width, ending in "…" when they're
   longer (Esri, Stadia, Mapbox). Tapping the text shows them in full, the way Esri's own maps do. */
.map-credits .map-credits-text { padding-left: 6px; max-width: 212px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-credits.full .map-credits-text { max-width: calc(100vw - var(--left-inset) - var(--credits-right) - 56px); white-space: normal; }
.map-credits.collapsed .map-credits-text { display: none; }
.map-credits a { color: inherit; text-decoration: underline; text-decoration-color: rgba(0,0,0,.25); text-underline-offset: 2px; }
.map-credits button { flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; font: 600 13px/22px Georgia, serif; color: inherit; -webkit-tap-highlight-color: transparent; }
.map-credits:not(.collapsed) button { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
html.dark .map-credits { color: #F2F2F7; }
html.dark .map-credits:not(.collapsed), html.dark .map-credits button { background: rgba(60,60,67,.45); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.18), 0 2px 8px rgba(0,0,0,.3); }
html.dark .map-credits a { text-decoration-color: rgba(255,255,255,.3); }
html.dark .map-credits:not(.collapsed) button { background: none; box-shadow: none; }

/* Markers */
.app-pin svg { display: block; filter: drop-shadow(0 1.5px 2px rgba(0, 0, 0, .35)); }
.app-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; }
.app-result.selected span { background: var(--royal-blue); transform: scale(1.2); }
.app-favorite svg { display: block; filter: drop-shadow(0 1.5px 2px rgba(0, 0, 0, .35)); }
.app-beam { display: none; position: absolute; left: -26px; top: -61px; width: 70px; height: 70px; pointer-events: none;
  transform-origin: 50% 100%; clip-path: polygon(50% 100%, 0 0, 100% 0);
  background: radial-gradient(circle at 50% 100%, rgba(0, 122, 255, .6), rgba(0, 122, 255, .25) 45%, rgba(0, 122, 255, 0) 72%); }
.app-user span { position: relative; 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; }
.app-start span, .app-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. */
.app-start span { background: #fff; border-color: var(--royal-blue); }
.app-end span { background: var(--teal); }