/* update 211 revamp: revamp-map. Markers and overlays on the Map tab and the trip map (bus badges, clusters, You, stop flags, lines, user dot)
   plus the Map tab's search bar and controls. Loads after app.css / tripv3.css; uses the tokens in revamp.css.
   Marker system: a compact route badge (bus glyph + route number, 22px, 8px radius, mode/route colour), a heading arrow, LIVE = solid badge + a green
   live dot; NOT LIVE (scheduled / last seen / old position) = neutral outlined badge with a clock and no arrow; an old position stays dimmed. */
:root {
  --mk-ring: #fff;                                   /* the edge of every badge, flag and line casing: legible on any tile */
  --mk-shadow: 0 2px 6px rgba(11, 20, 48, .34);
  --mk-live: var(--ok, #1F9D63);
  --mk-navy: #0E1530;
  --mk-hot: #EE6A2E;                                 /* the mock's get-off orange: dark text on it reads on a light or dark map */
  --mk-stop-ring: var(--accent);
  --mk-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --mk-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A0B05' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 21V4'/%3E%3Cpath d='M7 4h10l-2 4 2 4H7'/%3E%3C/svg%3E");
}
:root[data-theme='dark'] { --mk-hot: #FF9159; }
:root.mv-night { --mk-ring: var(--mk-navy); --mk-shadow: 0 2px 8px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .14); }

/* ---------- the vehicle badge ---------- */
.mv-marker.mv-st:where(:not([class*="tm-"]):not(.ic-meet):not(.fd-mk):not(.home)) {
  height: 26px; min-width: 32px; padding: 0 8px 0 7px; gap: 4px; justify-content: center; border-radius: 8px;
  border: 2px solid var(--mk-ring); box-shadow: var(--mk-shadow);
  font: var(--rv-w-heavy) 13px/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.mv-marker.mv-st.mv-st:where(:not([class*="tm-"]):not(.ic-meet):not(.fd-mk):not(.home)):is(.pos, .stale, .est, .ghosted) > .i { display: none; }   /* live badges keep the bus glyph + number + arrow; not-live swap the glyph for a clock */
.mv-marker.mv-st:where(:not([class*="tm-"]):not(.ic-meet):not(.fd-mk):not(.home)) > .i { width: 14px; height: 14px; }
/* LIVE: a green dot inside the pill, before the bus glyph ("● [bus] 60"), so it can never meet the heading arrow */
.mv-marker.mv-st:where(:not([class*="tm-"]):not(.ic-meet):not(.fd-mk):not(.home)):not(.pos):not(.stale):not(.est):not(.ghosted):not(.cluster)::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--mk-live); box-shadow: 0 0 0 1.5px #fff; position: static; inset: auto; border: 0; animation: none; margin-right: 1px;
}
/* selected: a soft ring in its own colour, no pulse */

.mv-marker.mv-st.mv-st.sel { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, var(--accent)) 38%, transparent), var(--mk-shadow); }
.mv-marker.mv-st.mv-st.next:not(.sel) { box-shadow: 0 0 0 3px var(--mk-ring), 0 0 0 5px var(--c, var(--accent)), var(--mk-shadow); }
.mv-marker.mv-st.mv-st .mv-spd { margin-left: 0; padding: 0 5px; height: 16px; display: inline-flex; align-items: center; gap: 1px; border-radius: 5px; background: color-mix(in srgb, var(--t, #fff) 22%, transparent); font-size: 11px; line-height: 16px; font-weight: var(--rv-w-strong); }
.mv-marker .hd { border-width: 0 5px 8px; border-bottom-color: var(--c, var(--mk-navy)); filter: drop-shadow(0 0 1.2px var(--mk-ring)) drop-shadow(0 0 .6px var(--mk-ring)); }

/* NOT LIVE: neutral outlined badge with the route colour as its left edge and a clock; never an arrow */
.mv-marker.mv-st.mv-st:where(:not([class*="tm-"]):not(.ic-meet):not(.fd-mk):not(.home)):is(.pos, .stale, .est, .ghosted) {
  background: var(--surface, #fff); color: var(--text, #121A18); border: 1.5px solid color-mix(in srgb, var(--text, #121A18) 38%, transparent);
  box-shadow: inset 4px 0 0 var(--c, var(--muted)), 0 1px 4px rgba(11, 20, 48, .22); padding-left: 10px; font-style: normal; filter: none; opacity: .92;
}
.mv-marker.mv-st.mv-st:where(:not([class*="tm-"]):not(.ic-meet):not(.fd-mk):not(.home)):is(.pos, .stale, .est, .ghosted)::before {
  content: ""; width: 12px; height: 12px; flex: none; background: currentColor; opacity: .72; -webkit-mask: var(--mk-clock) center / contain no-repeat; mask: var(--mk-clock) center / contain no-repeat; position: static; border: 0; inset: auto; animation: none;
}
.mv-marker.mv-st.mv-st:not(.fd-mk):is(.stale, .est) { opacity: .6; }      /* an old position is never shown as live: dimmed, whatever else it is */
.mv-marker.mv-st.mv-st:not(.fd-mk):is(.stale, .est).sel { opacity: .75; }
.mv-marker.mv-st.mv-st:not(.fd-mk):is(.pos, .stale, .est, .ghosted) .hd { display: none; }
.mv-marker.mv-st.mv-st:not(.fd-mk):is(.pos, .stale, .est, .ghosted) .mv-spd { background: transparent; color: var(--muted); padding: 0; font-weight: var(--rv-w-reg); }

/* ---------- a cluster: a round count badge, ringed in the colour most of its buses share ---------- */
.mv-marker.mv-st.mv-st.cluster {
  width: 36px; height: 36px; min-width: 36px; padding: 0; justify-content: center; border-radius: 50%;
  background: var(--surface, #fff); color: var(--text, #121A18); border: 3px solid var(--c, var(--accent));
  box-shadow: 0 0 0 2px var(--mk-ring), var(--mk-shadow);
}
.mv-marker.mv-st.mv-st.cluster::after { content: ""; position: absolute; inset: -6px; background: none; }
.mv-marker .mv-cn { font: var(--rv-w-heavy) 14px/1 var(--font); font-variant-numeric: tabular-nums; }

/* ---------- the bus you are on ---------- */
.mv-marker.mv-st.mv-st.you { border-color: var(--mk-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--accent)) 45%, transparent), var(--mk-shadow); margin-top: 0; z-index: 7; }
.mv-marker.mv-st.mv-st.you .mv-you {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); margin: 0; height: 18px; padding: 0 8px; line-height: 18px; border-radius: 9px;
  background: var(--mk-navy); color: #fff; border: 1.5px solid var(--mk-ring); font: var(--rv-w-heavy) 11px/15px var(--font); letter-spacing: .03em; white-space: nowrap; box-shadow: var(--mk-shadow);
}
.mv-marker.mv-st.mv-st.you .mv-you::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -4px; border: 4px solid transparent; border-top: 5px solid var(--mk-navy); }
.mv-marker.mv-st.mv-st.you.locating .mv-you { opacity: .8; }

/* ---------- stop flags: STOP 4 / GET OFF HERE / STARTS ---------- */
.mv-marker.stopflag {
  flex-direction: column; align-items: center; gap: 1px; height: auto; min-width: 0; max-width: 200px; padding: 4px 10px 5px; border-radius: 10px; border: 0;
  background: var(--mk-hot); color: #2A0B05; font: var(--rv-w-heavy) 13px/1.15 var(--font); text-align: center; white-space: normal; text-wrap: balance; text-transform: none;
  transform: translate(-50%, calc(-100% - 18px)); box-shadow: var(--mk-shadow);
}
.mv-marker.stopflag small { margin: 0; font-size: 11px; font-weight: var(--rv-w-heavy); letter-spacing: .07em; opacity: .82; color: inherit; }
.mv-marker.stopflag::before {                      /* the round pin at the stop: orange ring, a flag (get off) or a dot (board) */
  content: ""; position: absolute; left: 50%; top: calc(100% + 5px); bottom: auto; width: 24px; height: 24px; margin: 0 0 0 -12px; box-sizing: border-box;
  border: 3px solid var(--mk-ring); border-radius: 50%; background: var(--mk-hot) var(--mk-flag) center / 14px no-repeat;
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--mk-hot) 30%, transparent), var(--mk-shadow); animation: none;
}
.mv-marker.stopflag:not(.off)::before { background-image: radial-gradient(circle, #2A0B05 0 3px, transparent 3.5px); }
.mv-marker.stopflag.off, .mv-marker.stopflag.off.word { background: var(--mk-hot); color: #2A0B05; }
.mv-marker.stopflag:not(.word):not(.off) { flex-direction: row; align-items: baseline; gap: 5px; padding: 4px 10px; }   /* STOP 4 on one line */
.mv-marker.stopflag.off::before { border-top-color: var(--mk-ring); }
.mv-marker.stopflag.startflag { background: var(--surface, #fff); color: var(--text, #121A18); box-shadow: 0 0 0 2px var(--mk-ring), var(--mk-shadow); }
.mv-marker.stopflag.startflag::before { background: #fff var(--mk-flag) center / 14px no-repeat; box-shadow: 0 0 0 7px color-mix(in srgb, var(--text, #121A18) 14%, transparent), var(--mk-shadow); border-color: var(--text, #121A18); }
.mv-marker.stopflag.word { font-size: 13px; }

/* ---------- stops ---------- */
.mv-stop::after, .mv-stop.sm::after { background: var(--surface, #fff); border: 2.5px solid var(--mk-stop-ring); box-shadow: 0 1px 3px rgba(11, 20, 48, .28); }
.mv-stop.near:not(.sel)::after { background: var(--accent); border: 3px solid var(--mk-ring); }
.mv-stop.sel::after { background: var(--accent); border: 4px solid var(--mk-ring); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 32%, transparent), var(--mk-shadow); }
.mv-stop.sel::before { border-color: var(--accent); }

/* ---------- lines ---------- */
.mv-line-halo, .mv-seg-halo { stroke: var(--mk-ring); opacity: .95; }
.mv-line-halo { stroke-width: 9; }
.mv-line { stroke-width: 5; }
:root[data-look] .mv-line.walk, .mv-line.walk { stroke: var(--accent); stroke-width: 3.5; }
.mv-lines:has(.mv-line.walk) .mv-line-halo { stroke-width: 6.5; opacity: .85; }
.mv-line.guess { stroke-width: 3; opacity: .7; }
.mv-tl-seg, .mv-here .mv-tl-seg, :root.mv-here .mv-tl-seg { stroke-width: 2.5; }    /* traffic: a thin stripe in the route line, so the route colour still shows */

/* ---------- you (the location dot) ---------- */
.mv-user { width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(11, 20, 48, .45), 0 0 0 7px rgba(26, 115, 232, .18); }

/* ---------- Map tab: one glass search pill + round 44px controls ---------- */
#map .map-top { gap: var(--s2); }
#map .searchbar {
  height: 44px; min-height: 44px; padding: 0 var(--s4) 0 var(--s3); gap: var(--s2); border-radius: 22px; font: var(--rv-w-reg) var(--rv-t-small)/1 var(--font); color: var(--muted);
  background: var(--rv-glass); border: 1px solid var(--line); box-shadow: var(--rv-shadow); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
}
#map .searchbar .i { width: 20px; height: 20px; color: var(--text); flex: none; }
#map .searchbar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#map .map-top .fab, #map .map-top .fab:has(.fab-lab), #map .traffic-btn, #map .traffic-btn:has(.fab-lab), #map .zoom button {
  width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--rv-glass); color: var(--text); border: 1px solid var(--line); box-shadow: var(--rv-shadow); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
}
#map .map-top .fab .i, #map .traffic-btn .i, #map .zoom .i { width: 22px; height: 22px; }
#map .fab-lab { display: none; }
#map .zoom { top: calc(var(--safe-top) + 66px); right: var(--s3); gap: var(--s2); border-radius: 0; background: none; box-shadow: none; overflow: visible; }
#map .zoom button + button { border-top: 1px solid var(--line); }
#map .zoom .tilt-btn { font: var(--rv-w-heavy) 14px/1 var(--font); letter-spacing: 0; }
#map .zoom .tilt-btn[aria-pressed="true"], #map .zoom .bld-btn[aria-pressed="true"], #map .traffic-btn.on { background: var(--text); color: var(--bg); border-color: var(--text); box-shadow: var(--rv-shadow); }
#map .traffic-btn { top: calc(var(--safe-top) + 222px); right: var(--s3); }
#map.has-bld .traffic-btn { top: calc(var(--safe-top) + 274px); }
/* Live 3D controls that sat as heavy dark pills */
.mvgl-cam { background: var(--rv-glass); color: var(--text); border: 1px solid var(--line); box-shadow: var(--rv-shadow); font: var(--rv-w-heavy) var(--rv-t-small)/1 var(--font); }
.mvgl-badge { background: var(--rv-glass); color: var(--text); border: 1px solid var(--line); border-radius: var(--rv-r-chip); padding: 4px 8px; }

/* ---------- the trip-map / route overview badges (chooser) share the same badge ---------- */
html .mv-marker.tm-badge { height: 24px; padding: 0 8px; border-radius: 8px; border: 2px solid var(--mk-ring); box-shadow: var(--mk-shadow); font: var(--rv-w-heavy) 13px/1 var(--font); }
html .mv-marker.tm-change { border-radius: 8px; }
html .mv-marker.tm-you, html .mv-marker.tm-end { border-radius: 8px; border: 2px solid var(--mk-ring); box-shadow: var(--mk-shadow); }