/* Slim map keys read their colours from the same live legends as the map. The
   old nodes stay available to their existing handlers, outside layout/tab order. */
.vertex-v3 #app#app#app#app#app#app#app#app#app#app .layer-side-source { display:none!important; }
.vertex-v3 #app#app#app#app#app#app#app#app#app#app #mapContextStack.legend-template {
  height:auto!important; max-height:none!important; min-height:0!important; padding:0!important;
  border:0!important; background:transparent!important; box-shadow:none!important; animation:none!important;
  translate:none!important; clip-path:none!important;
}
.vertex-v3 #app #layerSideControls {
  --side-left:max(10px,env(safe-area-inset-left));
  position:fixed; z-index:42; left:var(--side-left);
  bottom:calc(max(var(--map-home-dock-height,94px),var(--map-sheet-bottom,12px)) + 10px);
  width:max-content; max-width:calc(100vw - var(--side-left) - 64px); color:var(--ui-text);
  display:flex; flex-direction:column; align-items:flex-start;
  max-height:calc(100dvh - max(var(--map-home-dock-height,94px),var(--map-sheet-bottom,12px)) - max(140px,calc(env(safe-area-inset-top) + 128px)));
  overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none;
  font:500 12px/1.35 system-ui,sans-serif; pointer-events:none;
  --side-panel:var(--ui-base,#1e2126);
}
.vertex-v3 #app #layerSideControls[hidden] { display:none!important; }
.vertex-v3 #app #layerSideControls>* { flex:none; pointer-events:auto; }
.vertex-v3 #app #layerSideControls button { color:inherit; font:inherit; border:0; pointer-events:auto; }
.vertex-v3 #app #layerSideControls .side-layer-panel {
  position:relative; flex:none; display:grid; grid-template-columns:min-content; width:min-content;
  border:1px solid #ffffff1c; border-radius:12px; background:var(--side-panel);
  filter:drop-shadow(0 2px 4px #0003); pointer-events:none;
}
.vertex-v3 #app #layerSideControls .side-layer-title {
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-height:44px;
  min-width:0; width:100%; max-width:180px; box-sizing:border-box; padding:7px 9px 5px; margin:0; text-align:left;
  border-radius:11px 11px 0 0; background:transparent;
}
.vertex-v3 #app #layerSideControls .side-layer-title small { font:500 11px/1.3 system-ui; color:var(--ui-muted); }
.vertex-v3 #app #layerSideControls .side-layer-title b { font:600 12px/1.35 system-ui; overflow-wrap:normal; }
.vertex-v3 #app #layerSideControls .side-layer-key-wrap { position:relative; width:max-content; min-width:100%; }
.vertex-v3 #app #layerSideControls .side-layer-panel:has(.side-layer-key[hidden]) .side-layer-key-wrap { position:static; }
.vertex-v3 #app #layerSideControls .side-layer-fold {
  position:absolute; right:-28px; top:50%; transform:translateY(-50%);
  display:grid; place-items:center; width:44px; height:44px; min-width:44px;
  padding:8px; background:transparent;
}
.vertex-v3 #app #layerSideControls .side-layer-fold::before { content:''; position:absolute; inset:7px 0 7px 12px; background:var(--side-panel); border-radius:0 12px 12px 0; }
.vertex-v3 #app #layerSideControls .side-layer-fold .ui-icon { position:relative; width:18px; height:18px; translate:5px 0; }
.vertex-v3 #app #layerSideControls button:focus-visible { outline:2px solid #93c5fd; outline-offset:2px; }
.vertex-v3 #app #layerSideControls .side-layer-body { display:flex; width:max-content; max-width:100%; box-sizing:border-box; padding-right:28px; align-items:flex-end; gap:7px; pointer-events:none; }
.vertex-v3 #app #layerSideControls .side-layer-views { display:flex; flex-direction:column; gap:6px; pointer-events:none; }
.vertex-v3 #app #layerSideControls .side-layer-views button {
  display:grid; place-items:center; flex:none; width:44px; height:44px; padding:10px;
  border-radius:50%; background:var(--side-panel); box-shadow:0 2px 8px #0003;
}
.vertex-v3 #app #layerSideControls .side-layer-views button[aria-pressed="true"] { box-shadow:inset 0 0 0 2px #3b82f6,0 2px 8px #0003; background:var(--ui-raised); }
.vertex-v3 #app #layerSideControls .side-layer-key {
  display:flex; flex-direction:column; width:max-content; min-width:72px; box-sizing:border-box; padding:5px 9px 8px; pointer-events:auto;
}
.vertex-v3 #app #layerSideControls .side-layer-step { display:grid; grid-template-columns:11px auto; align-items:center; gap:8px; min-height:26px; }
.vertex-v3 #app #layerSideControls .side-layer-step>i { display:block; width:11px; height:100%; min-height:26px; }
.vertex-v3 #app #layerSideControls .side-layer-step:first-child>i { border-radius:5px 5px 0 0; }
.vertex-v3 #app #layerSideControls .side-layer-step:last-child>i { border-radius:0 0 5px 5px; }
.vertex-v3 #app #layerSideControls .side-layer-step>span {
  display:block; width:max-content; max-width:126px; padding:3px 0;
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
.vertex-v3 #app #layerSideControls .side-layer-information {
  display:flex; align-items:flex-end; gap:4px; min-height:44px; max-width:calc(100vw - max(12px,env(safe-area-inset-left)) - 68px);
  margin-top:5px; margin-left:calc(max(12px,env(safe-area-inset-left)) - var(--side-left)); pointer-events:none;
}
.vertex-v3 #app #layerSideControls .side-layer-note { flex:0 1 auto; min-width:0; width:fit-content; max-width:min(254px,calc(100vw - 104px)); margin:0; padding:6px 9px; border-radius:10px; background:var(--side-panel); font:500 11px/1.35 system-ui,sans-serif; pointer-events:auto; }
.vertex-v3 #app #layerSideControls .side-layer-info { flex:none; position:relative; display:grid; place-items:center; width:44px; height:44px; padding:8px; border-radius:50%; background:transparent; }
.vertex-v3 #app #layerSideControls .side-layer-info::before { content:''; position:absolute; inset:7px; border-radius:50%; background:var(--side-panel); }
.vertex-v3 #app #layerSideControls .side-layer-info .ui-icon { position:relative; width:17px; height:17px; }
.vertex-v3 #app #layerSideControls .side-layer-timing {
  position:fixed; top:calc(max(12px,env(safe-area-inset-top)) + 56px); left:max(12px,env(safe-area-inset-left));
  width:max-content; max-width:calc(100vw - max(12px,env(safe-area-inset-left)) - 74px); pointer-events:none;
}
.vertex-v3 #app #layerSideControls .side-layer-clock {
  display:flex; align-items:center; gap:5px; min-height:44px; max-width:100%; margin:0;
  padding:6px 8px; background:var(--side-panel); border-radius:11px; font-size:11px;
}
.vertex-v3 #app #layerSideControls .side-layer-clock svg { flex:none; width:16px; height:16px; }
.vertex-v3 #app #layerSideControls .side-layer-time { display:flex; align-items:center; gap:4px; width:300px; max-width:100%; margin:0; pointer-events:auto; }
.vertex-v3 #app #layerSideControls .layer-time-control {
  display:flex; flex:1; min-width:0; align-items:center; gap:7px; min-height:44px; padding:0 8px;
  background:var(--side-panel); border-radius:12px;
}
.vertex-v3 #app #layerSideControls .layer-time-control>b:first-child:not(.layer-time-label) { display:none; }
.vertex-v3 #app #layerSideControls .layer-time-label { flex:0 0 68px; width:68px; white-space:normal; overflow-wrap:anywhere; font:500 11px/1.35 system-ui; }
.vertex-v3 #app #layerSideControls .layer-time-control input { flex:1; width:0; min-width:50px; height:44px; padding:0; margin:0; touch-action:none; accent-color:#3b82f6; }
.vertex-v3 #app #layerSideControls .layer-time-control button { min-height:44px; padding:0 5px; background:transparent; }
.vertex-v3 #app #layerSideControls .side-layer-time-close { flex:none; display:grid; place-items:center; width:44px; height:44px; padding:8px; background:var(--side-panel); border-radius:12px; }
.vertex-v3 #app #layerSideControls [hidden] { display:none!important; }
/* Docking keeps the joined heading/key and the arrow tab beside the scale. */
.vertex-v3 #app #layerSideControls[data-minimized="true"] { --side-left:env(safe-area-inset-left,0px); }
.vertex-v3 #app #layerSideControls[data-minimized="true"] .side-layer-panel { border-left:0; border-radius:0 12px 12px 0; }
.vertex-v3 #app #layerSideControls[data-minimized="true"] .side-layer-title { border-radius:0; }
/* Sheets cover the map key; it never floats over their content. Planning keeps it. */
.vertex-v3 #app:has(#layerPanel:not([hidden]),#youSheet:not([hidden]),#routeDetail:not([hidden]),#recordSheet:not([hidden]),#exploreSheet:not([hidden]),#activitiesSheet:not([hidden]),#activityDetail:not([hidden]),#compareSheet:not([hidden]),#avalancheSheet:not([hidden]),#todayBriefSheet:not([hidden]),#weatherView:not([hidden]),#communityView:not([hidden])) #layerSideControls,
.vertex-v3 #app.powder-mode #layerSideControls { visibility:hidden; pointer-events:none; }
@media(min-width:900px) {
  .vertex-v3 #app #layerSideControls { left:calc(var(--dp,380px) + 16px); bottom:28px; max-height:calc(100dvh - 160px); }
  .vertex-v3 #app #layerSideControls[data-minimized="true"] { left:var(--dp,380px); }
  .vertex-v3 #app #layerSideControls .side-layer-information { margin-left:0; }
  .vertex-v3 #app #layerSideControls .side-layer-timing { top:76px; left:calc(var(--dp,380px) + 16px); max-width:calc(100vw - var(--dp,380px) - 90px); }
  .vertex-v3 #app[data-route-planning]:has(#plannerElevation:not([hidden])) #layerSideControls { bottom:calc(var(--desk-profile,150px) + 16px); max-height:calc(100dvh - var(--desk-profile,150px) - 144px); }
}
@media(max-width:899px) {
  .vertex-v3 #app:has(#placeCard:not(.collapsed):not([hidden])) #layerSideControls { visibility:hidden; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app[data-layer-side-controls] #thumbDock { border-radius:28px!important; border-top:1px solid #ffffff30!important; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app[data-layer-side-controls] :is(#routePlanner,#routeDetail,#recordSheet,#exploreSheet,#avalancheSheet,#todayBriefSheet,#mapSheet #placeCard:not(.collapsed)) { border-top-left-radius:24px!important; border-top-right-radius:24px!important; }
}
@media(max-height:600px) {
  .vertex-v3 #app #layerSideControls { scrollbar-width:thin; }
}