/* ============================================================================
   LIVE MAP ON MOBILE v102 — loaded last.

   MEASURED STRUCTURE (read off the running app at 375px):
     .cc-map                      position:relative
       .cc-map-toolbar            absolute, top 12 left 12   — search + pills
         .cc-map-search           ABSOLUTE, top 10 left 10   <-- the bug
         .cc-map-filters-lbl      static
         .cc-map-pills > .cc-layer-pill …  static flex
       .cc-map-side.cc-side-top   absolute, top 12, left 323 — zoom / locate

   The search bar is absolutely positioned INSIDE an already-absolute toolbar, so
   it is lifted out of the toolbar's flow and paints on top of the pills and the
   filter button. Measured overlaps at 375px:
       .cc-map-search  y141-179  x22-353
       .cc-map-side    y131-250  x323-363   <- under the search bar's right end
       .cc-layer-pill  y131      x93-190 and x198-284
       .cc-map-filters-lbl y131  x12-85
   Four controls in one 50px band. (An earlier attempt of mine pinned the search
   with left/right/top, which only nailed it more firmly over the pills.)

   Fix: on a phone the toolbar becomes an ordinary vertical column and the search
   returns to normal flow, so search sits ABOVE the pill row instead of over it.
   The zoom column moves to the bottom-right of the map, clear of both.
   ========================================================================== */

@media (max-width:860px){

  /* the toolbar owns the full width and stacks its children */
  .cc-map .cc-map-toolbar{
    position:absolute;top:10px;left:10px;right:10px;width:auto;
    display:flex;flex-direction:column;align-items:stretch;gap:8px;
    z-index:6;pointer-events:none}
  .cc-map .cc-map-toolbar>*{pointer-events:auto}

  /* back into flow — this single line is what stops the overlap */
  .cc-map .cc-map-search{
    position:static!important;top:auto!important;left:auto!important;
    right:auto!important;bottom:auto!important;
    width:100%;max-width:none;margin:0;order:1}

  /* filter + layer pills share one scrolling row under the search */
  .cc-map .cc-map-pills,.cc-map .cc-map-filters{
    order:2;display:flex;flex-wrap:nowrap;gap:6px;justify-content:flex-start;
    overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;margin:0;padding:1px 0 3px}
  .cc-map .cc-map-pills::-webkit-scrollbar,
  .cc-map .cc-map-filters::-webkit-scrollbar{display:none}
  .cc-map .cc-map-pills>*,.cc-map .cc-map-filters>*{flex:0 0 auto;white-space:nowrap}
  .cc-map .cc-map-filters-lbl{order:2;flex:0 0 auto;white-space:nowrap}
  .cc-map .cc-layer-pill{height:30px;padding:0 10px;font-size:12.5px}

  /* zoom / locate move to the bottom-right, out of the toolbar's band entirely.
     .cc-map ends where the vehicle sheet begins, so bottom-anchoring cannot
     collide with the sheet either. */
  .cc-map .cc-map-side.cc-side-top,.cc-map .cc-map-side{
    top:auto!important;bottom:12px;left:auto!important;right:10px;
    display:flex;flex-direction:column;gap:8px;z-index:5}
  .cc-map .cc-map-side-btn{width:36px;height:36px}

  /* the legend is a panel, not a floating chip: full width above the sheet */
  .cc-map .cc-legend{
    left:10px;right:10px;bottom:56px;top:auto;max-width:none;width:auto;z-index:7}

  /* filter dropdown must open within the viewport, not off the right edge */
  .cc-map .cc-map-filters-drop,.cc-map .cc-filters-drop{
    left:0;right:auto;max-width:calc(100vw - 32px)}
}

/* ── MAP OPTIONS / GOOGLE CONTROLS TO THE LEFT ────────────────────────────
   CORRECTION: when the owner said "move the map options to the left" I assumed
   they meant Google's own map-type control and wrote the rules below against
   .gm-style-mtc. They match nothing - this map does not render that control at
   all (queried live: null). The control on screen labelled "Map Options" is
   OURS, button.cc-map-options, and it was pinned right by design-system.css
   :3543. That is where the actual fix is; these rules are kept only because
   Google does render .gm-style-mtc when the map-type control is enabled, and
   if that is ever turned on it should come up on the left to match. */
.cc-map .gm-style-mtc,.cc-map .gm-style-mtc-bbw,
.cc-map div[title="Change map style"],.cc-map .gm-bundled-control-on-bottom{
  left:10px!important;right:auto!important}
/* Google wraps its bottom-right cluster in an absolutely positioned div; pin the
   one that holds the map-type button rather than the whole cluster. */
.cc-map .gmnoprint.gm-style-mtc-bbw,
.cc-map>div>div>div:has(>.gm-style-mtc){left:10px!important;right:auto!important}
@media (max-width:860px){
  .cc-map .gm-style-mtc,.cc-map .gmnoprint.gm-style-mtc-bbw{
    left:10px!important;right:auto!important;bottom:10px!important;top:auto!important}
}