/* Final map control layer. A tile owns two fixed rows; sensor rotation belongs
 * only to .compass-face, never to the caption or its button. */
:root{
 --map-control-size:56px;
 --map-control-bg:#fff;
 --map-control-ink:#193d32;
 --map-control-border:#b5cabc;
 --map-control-hover:#edf4e9;
 --map-control-active:#e0efd5;
 --map-control-active-ink:#234c25;
 --map-control-muted:#657b6e;
}
html[data-theme=dark]{
 --map-control-bg:#1b302b;
 --map-control-ink:#edf5ed;
 --map-control-border:#698777;
 --map-control-hover:#2b4438;
 --map-control-active:#34533a;
 --map-control-active-ink:#e4f3d7;
 --map-control-muted:#a4bbad;
}
.map-shell .map-actions{
 display:grid;
 grid-template-columns:repeat(4,var(--map-control-size));
 grid-template-rows:var(--map-control-size);
 gap:8px;
 width:max-content;
 height:var(--map-control-size);
 top:auto;
 bottom:14px;
 left:auto;
 right:max(14px,env(safe-area-inset-right));
 padding:0;
 margin:0;
}
.map-shell .map-actions .map-action{
 box-sizing:border-box;
 position:relative;
 display:grid;
 grid-template-columns:minmax(0,1fr);
 grid-template-rows:24px 12px;
 align-content:center;
 align-items:center;
 justify-items:center;
 row-gap:4px;
 width:var(--map-control-size);
 min-width:var(--map-control-size);
 height:var(--map-control-size);
 min-height:var(--map-control-size);
 padding:7px 4px;
 border:1px solid var(--map-control-border);
 border-radius:15px;
 background:var(--map-control-bg);
 color:var(--map-control-ink);
 box-shadow:0 3px 12px #102e2526;
 touch-action:manipulation;
 transition:background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease;
}
.map-shell .map-actions .map-action>span[data-icon],
.map-shell .map-actions .map-action.has-caption>span[data-icon],
.map-shell .map-actions .map-action .compass-face{
 position:static;
 inset:auto;
 grid-column:1;
 grid-row:1;
 display:grid;
 align-items:center;
 justify-items:center;
 width:24px;
 height:24px;
 margin:0;
 padding:0;
}
.map-shell .map-actions .map-action.has-caption>span[data-icon]{transform:none}
.map-shell .map-actions .map-action svg,
.map-shell .map-actions .map-action .compass-face svg{display:block;width:24px;height:24px;margin:0}
.map-shell .map-actions .map-action .compass-face{transform-origin:50% 50%}
.map-shell .map-actions .map-action .map-action-caption{
 position:static;
 inset:auto;
 grid-column:1;
 grid-row:2;
 display:block;
 width:100%;
 max-width:none;
 min-width:0;
 margin:0;
 padding:0;
 color:inherit;
 font:650 10px/12px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 font-variant-numeric:tabular-nums;
 letter-spacing:-.12px;
 text-align:center;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:clip;
}
.map-shell .map-actions .map-action.active,
.map-shell .map-actions .map-action[aria-pressed=true]{background:var(--map-control-active);color:var(--map-control-active-ink)}
.map-shell .map-actions .map-action.following{background:#1768a9;color:#fff;border-color:#1768a9}
.map-shell .map-actions .map-action:focus-visible{outline:3px solid #64aff0;outline-offset:3px}
.map-shell .map-actions .map-action:disabled{opacity:.5}
.map-shell .map-actions .map-action.searching{animation:none}
@media(hover:hover){.map-shell .map-actions .map-action:not(.following):hover{background:var(--map-control-hover)}}

/* Leaflet's old color inherited --forest, which becomes pale in dark mode. */
.map-shell .leaflet-top.leaflet-right{right:max(14px,env(safe-area-inset-right));top:164px}
.product-public-map .map-shell .leaflet-top.leaflet-right{top:16px}
.map-shell .leaflet-control-zoom{
 margin:0!important;
 border:1px solid var(--map-control-border)!important;
 border-radius:13px!important;
 background:var(--map-control-bg);
 box-shadow:0 3px 12px #102e2526!important;
}
.map-shell .leaflet-control-zoom a{
 box-sizing:border-box;
 display:block;
 width:44px!important;
 height:44px!important;
 line-height:44px!important;
 background:var(--map-control-bg)!important;
 color:var(--map-control-ink)!important;
 border-color:var(--map-control-border)!important;
 font-size:25px;
 font-weight:500!important;
 text-align:center;
 text-decoration:none;
}
.map-shell .leaflet-control-zoom a:hover{background:var(--map-control-hover)!important}
.map-shell .leaflet-control-zoom a.leaflet-disabled{color:var(--map-control-muted)!important}
.map-shell .leaflet-control-zoom a:focus-visible{outline:3px solid #64aff0;outline-offset:-4px}
.map-shell .map-statuses{position:absolute;z-index:810;left:14px;right:88px;bottom:90px;max-width:420px;max-height:calc(100% - 120px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#78988b transparent;touch-action:pan-y;display:grid;gap:7px;pointer-events:auto}
.map-shell .map-statuses :is(.heading-status,.gps-status){position:relative;inset:auto;bottom:auto;left:auto;right:auto;top:auto;width:100%;max-width:none;margin:0;box-sizing:border-box;pointer-events:auto}
.map-shell .map-statuses .heading-status{min-height:54px;padding-right:46px}
.map-shell .map-statuses #dismiss-compass{position:absolute;inset:0 0 auto auto;width:44px;height:44px;min-height:44px;padding:0;display:grid;place-items:center;touch-action:manipulation}
.map-shell .map-statuses #stop-location{min-width:44px;min-height:44px;touch-action:manipulation}
.map-shell:has(.map-statuses>:not([hidden])) .product-map-hero{display:none}
@media(min-width:761px){.map-shell .map-legend{max-width:calc(100% - 290px);flex-wrap:wrap}}
@media(max-width:760px){
 .map-shell .map-actions{right:max(12px,env(safe-area-inset-right));bottom:calc(124px + env(safe-area-inset-bottom))}
 .map-shell .leaflet-top.leaflet-right{right:max(12px,env(safe-area-inset-right))}
 .map-shell .map-legend{bottom:calc(94px + env(safe-area-inset-bottom))}
 .map-shell .map-statuses{left:12px;bottom:calc(192px + env(safe-area-inset-bottom));max-height:calc(100% - 224px - env(safe-area-inset-bottom))}
 /* The sheet owns its detent dataset. CSS follows the same 56% half height;
  * no sensor or map event is needed to reposition these controls. */
 .workspace:has(>.sidebar[data-detent=half]) .map-shell .map-actions{bottom:calc(56% + 8px)}
 .workspace:has(>.sidebar[data-detent=half]) .map-shell .map-statuses{bottom:calc(56% + 76px);max-height:calc(44% - 88px)}
 .workspace:has(>.sidebar[data-detent=half]) .map-shell:has(.map-statuses>:not([hidden])) .map-search-panel{visibility:hidden;pointer-events:none}
 /* A full sheet covers the map. display:none also removes covered controls
  * from keyboard navigation and accessibility APIs until it is collapsed. */
 .workspace:has(>.sidebar[data-detent=full]) .map-shell :is(.map-actions,.leaflet-control-zoom,.map-statuses,.gps-status,.heading-status,.map-legend){display:none}
}
@media(max-width:370px) and (max-height:650px){
 /* At 320px the half sheet leaves little vertical room. Keep the toolbar
  * beside, rather than over, the right-hand zoom hit targets. */
 .workspace:has(>.sidebar[data-detent=half]) .map-shell .map-actions{left:max(12px,env(safe-area-inset-left));right:auto}
}
/* Short landscape keeps zoom and action tiles on separate horizontal rows. */
@media(max-height:740px) and (min-width:761px){
 .map-shell .leaflet-control-zoom{display:flex;flex-direction:row}
 .map-shell .leaflet-control-zoom a{border-bottom:0;border-right:1px solid var(--map-control-border)}
 .map-shell .leaflet-control-zoom a:last-child{border-right:0}
}
@media(prefers-reduced-motion:reduce){.map-shell .map-actions .map-action{transition:none;animation:none}}