/* Only the new locate button and its feedback, never transport-map SVG/canvas. */
.map-shell > .map-controls #locateMe {
  display:grid; place-items:center; width:44px; height:44px; min-width:44px; min-height:44px;
  padding:0; border-radius:13px; position:relative; transition:background-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.map-shell > .map-controls #locateMe svg { width:21px; height:21px; }
.map-shell > .map-controls #locateMe[data-location-state="active"] {
  color:#1564cf; background:#e5f1ff; box-shadow:0 0 0 2px #7db7fb,0 4px 14px #142d2415;
}
.map-shell > .map-controls #locateMe[data-location-state="loading"] { color:#176dd6; background:#e5f1ff; cursor:progress; }
.map-shell > .map-controls #locateMe[data-location-state="loading"] svg { animation:stLocateSpin 1.2s linear infinite; }
.map-shell > .map-controls #locateMe[data-location-state="error"] { color:#bd4b48; background:#fff0ed; }
.map-shell > .map-controls #locateMe:focus-visible { outline:3px solid #4a98ff!important; outline-offset:3px; }
.map-shell > .map-controls .my-location-feedback {
  position:absolute; right:calc(100% + 10px); top:calc(100% - 50px); z-index:460;
  width:max-content; max-width:min(235px,calc(100vw - 100px)); padding:10px 12px;
  border:1px solid #d7e2f1; border-radius:12px; background:#ffffffed;
  color:#243b53; box-shadow:0 10px 27px #101b2930; font-size:11px; font-weight:650;
  line-height:1.45; pointer-events:none; text-align:left;
}
.map-shell > .map-controls .my-location-feedback[hidden] { display:none!important; }
:root[data-theme="dark"] .map-shell > .map-controls #locateMe[data-location-state="active"],
:root[data-theme="dark"] .map-shell > .map-controls #locateMe[data-location-state="loading"] {
  color:#b1d8ff; background:#1c3d62; box-shadow:0 0 0 2px #588fcb,0 4px 14px #07101f70;
}
:root[data-theme="dark"] .map-shell > .map-controls #locateMe[data-location-state="error"] { color:#ffbeb8; background:#542f3b; }
:root[data-theme="dark"] .map-shell > .map-controls .my-location-feedback {
  background:#17283ef5; border-color:#3b5476; color:#e5eefc; box-shadow:0 10px 30px #0209169e;
}
@keyframes stLocateSpin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) {
  .map-shell > .map-controls #locateMe, .map-shell > .map-controls #locateMe svg { animation:none!important; transition:none!important; }
}
.map-shell > .map-controls #stopLiveLocation { width:auto; min-width:44px; min-height:44px; height:auto; padding:8px 10px; border:1px solid #d7e2f1; border-radius:10px; background:#fff; color:#34445a; font-size:10px; line-height:1.25; font-weight:700; }
.map-shell > .map-controls #stopLiveLocation[hidden] { display:none!important; }
.map-shell > .map-controls #stopLiveLocation:focus-visible { outline:3px solid #4a98ff; outline-offset:2px; }
:root[data-theme="dark"] .map-shell > .map-controls #stopLiveLocation { background:#17283e; color:#e5eefc; border-color:#3b5476; }