/* 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;
--g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
/* One compact pill: ring icon · name ⌄ · colour bar. The card drops below it. */
.vertex-v3 #app #layerSideControls {
  --side-left:max(12px,env(safe-area-inset-left)); --layer:var(--g-accent); --side-panel:rgba(var(--g-base-rgb),0.949);
  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) - 66px); color:var(--g-contrast);
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  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 13px/1.35 var(--font-sans); pointer-events:none;
}
.vertex-v3 #app #layerSideControls[hidden],.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; margin:0; }
.vertex-v3 #app #layerSideControls button:focus-visible { outline:2px solid var(--g-accent); outline-offset:2px; }
.vertex-v3 #app #layerSideControls .ui-icon { fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.vertex-v3 #app #layerSideControls .side-layer-pill {
  display:flex; align-items:center; gap:10px; height:46px; max-width:100%; box-sizing:border-box;
  padding:3px 14px 3px 3px; border-radius:999px; background:var(--side-panel);
  box-shadow:0 4px 14px rgba(var(--g-shadow-rgb),0.240), inset 0 0 0 1px rgba(var(--g-shadow-rgb),0.078); cursor:pointer;
}
.vertex-v3 #app #layerSideControls .side-layer-ring {
  flex:none; display:grid; place-items:center; width:40px; height:40px; box-sizing:border-box;
  border-radius:50%; border:2.5px solid var(--layer); background:var(--g-base);
--g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app #layerSideControls .side-layer-ring .ui-icon { width:19px; height:19px; }
.vertex-v3 #app #layerSideControls .side-layer-name { flex:none; display:flex; align-items:center; gap:3px; }
.vertex-v3 #app #layerSideControls .side-layer-name b { font:600 14px/1.2 var(--font-sans); white-space:nowrap; }
.vertex-v3 #app #layerSideControls .side-layer-chevron { flex:none; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; opacity:.8; transition:transform .18s; }
.vertex-v3 #app #layerSideControls[data-minimized="false"] .side-layer-chevron { transform:rotate(180deg); }
/* Colour bar with its numbers under it (Bjorn 2026-10-31: cm and degrees in the minimized pill, same size). */
.vertex-v3 #app #layerSideControls .side-layer-scale { flex:none; display:flex; flex-direction:column; gap:3px; width:84px; }
.vertex-v3 #app #layerSideControls .side-layer-scale:has(.side-layer-ticks:not([hidden])) { width:96px; }
/* A words-only key with a summary chip (Snow quality: N–NE, SE, 10–13) keeps a shorter bar so the pill fits. */
.vertex-v3 #app #layerSideControls .side-layer-pill:has(.side-layer-value:not([hidden])) .side-layer-scale:has(.side-layer-ticks[hidden]) { width:60px; }
.vertex-v3 #app #layerSideControls .side-layer-scale:is([data-count="6"],[data-count="7"],[data-count="8"],[data-count="9"],[data-count="10"]):has(.side-layer-ticks:not([hidden])) { width:116px; }
.vertex-v3 #app #layerSideControls .side-layer-bar {
  display:flex; height:12px; border-radius:999px; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(var(--g-shadow-rgb),0.122);
}
.vertex-v3 #app #layerSideControls .side-layer-scale:has(.side-layer-ticks:not([hidden])) .side-layer-bar { height:8px; border-radius:999px; }
.vertex-v3 #app #layerSideControls .side-layer-bar>i { flex:1; display:block; }
.vertex-v3 #app #layerSideControls .side-layer-ticks { display:flex; margin-bottom:-2px; font:600 10px/1 var(--font-sans); font-variant-numeric:tabular-nums; color:currentColor; opacity:.88; }
.vertex-v3 #app #layerSideControls .side-layer-ticks>span { flex:1; min-width:0; display:flex; justify-content:center; align-items:baseline; white-space:nowrap; letter-spacing:-.2px; }
.vertex-v3 #app #layerSideControls .side-layer-ticks>span:last-child { overflow:visible; }
.vertex-v3 #app #layerSideControls .side-layer-ticks small { margin-left:1px; font-size:8.5px; font-weight:600; }
.vertex-v3 #app #layerSideControls .side-layer-value {
  flex:none; margin-left:3px; padding:1px 6px; border-radius:7px; background:#ffffff1f;
  font:600 11.5px/1.35 var(--font-sans); font-style:normal; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.vertex-v3 #app #layerSideControls .side-layer-value[data-level="1"] { background:#ccff66; color:#111; }
.vertex-v3 #app #layerSideControls .side-layer-value[data-level="2"] { background:#ffff00; color:#111; }
.vertex-v3 #app #layerSideControls .side-layer-value[data-level="3"] { background:#ff9900; color:#111; }
.vertex-v3 #app #layerSideControls .side-layer-value[data-level="4"] { background:#ff0000; color:#fff; }
.vertex-v3 #app #layerSideControls .side-layer-value[data-level="5"] { background:repeating-conic-gradient(#ff0000 0 25%,#111 0 50%) 0 0/6px 6px; color:#fff; text-shadow:0 0 3px #000,0 0 2px #000; }
/* Word layers (problems, aspect, powder, snow surface, snow coming): name on top, then each colour with
   its meaning on a wrapping row, so the minimized pill explains the map on its own (Bjorn chose B). */
.vertex-v3 #app #layerSideControls[data-words="true"] .side-layer-pill {
  display:grid; grid-template-columns:40px minmax(0,auto); grid-template-rows:auto auto; column-gap:10px; row-gap:3px;
  height:auto; min-height:46px; padding:5px 14px 6px 3px; border-radius:22px; align-items:center;
}
.vertex-v3 #app #layerSideControls[data-words="true"] .side-layer-ring { grid-row:1 / 3; }
.vertex-v3 #app #layerSideControls .side-layer-words { display:flex; flex-wrap:wrap; gap:2px 9px; max-width:min(230px,calc(100vw - 150px)); text-align:left; }
.vertex-v3 #app #layerSideControls .side-layer-words>span { display:inline-flex; align-items:center; gap:4px; font:500 11px/1.25 var(--font-sans); white-space:nowrap; }
.vertex-v3 #app #layerSideControls .side-layer-words b { font:inherit; }
.vertex-v3 #app #layerSideControls .side-layer-words i { flex:none; display:block; width:10px; height:10px; border-radius:3px; box-shadow:inset 0 0 0 1px rgba(var(--g-shadow-rgb),0.149); }
/* Open, the card below already lists the key: the pill goes back to one row. */
.vertex-v3 #app #layerSideControls[data-words="true"][data-minimized="false"] .side-layer-words { display:none!important; }
.vertex-v3 #app #layerSideControls[data-words="true"][data-minimized="false"] .side-layer-pill { display:flex; height:46px; padding:3px 14px 3px 3px; border-radius:999px; }
/* The open card is only as big as its content (Bjorn: leave the map as much room as possible). */
.vertex-v3 #app #layerSideControls .side-layer-drop {
  position:relative; display:flex; flex-direction:column; gap:6px; box-sizing:border-box;
  width:max-content; max-width:min(250px,100%); margin-left:14px; padding:7px 9px 8px;
  border-radius:14px; background:var(--side-panel); box-shadow:0 4px 14px rgba(var(--g-shadow-rgb),0.240), inset 0 0 0 1px rgba(var(--g-shadow-rgb),0.078);
}
.vertex-v3 #app #layerSideControls .side-layer-drop::before {
  content:''; position:absolute; top:-5px; left:16px; width:10px; height:10px; rotate:45deg;
  background:var(--g-base); border-left:1px solid rgba(var(--g-ink-rgb),0.078); border-top:1px solid rgba(var(--g-ink-rgb),0.078);
--g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app #layerSideControls .side-layer-views { display:flex; flex-wrap:wrap; gap:4px; }
.vertex-v3 #app #layerSideControls .side-layer-views button {
  display:flex; align-items:center; gap:4px; min-height:28px; padding:0 8px 0 6px; border-radius:999px;
  background:var(--g-raised); font:500 11.5px/1 var(--font-sans); white-space:nowrap;
--g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app #layerSideControls .side-layer-views button .ui-icon { width:13px; height:13px; }
.vertex-v3 #app #layerSideControls .side-layer-views button[aria-pressed="true"] { background:var(--g-accent); color:var(--g-on-accent);--g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.vertex-v3 #app #layerSideControls .side-layer-views button:disabled { opacity:.45; }
.vertex-v3 #app #layerSideControls .side-layer-key { display:flex; flex-direction:column; gap:2px; }
/* Sized by what it shows (Bjorn 2026-11-05): the colour key, views and clock set the width; the note wraps
   to that width instead of stretching the card, and long keys use two columns instead of a tall list. */
.vertex-v3 #app #layerSideControls .side-layer-drop { min-width:min(150px,100%); max-width:calc(100% - 14px); }
.vertex-v3 #app #layerSideControls .side-layer-note { max-width:none; contain:inline-size; }
.vertex-v3 #app #layerSideControls .side-layer-key:is([data-count="5"],[data-count="6"],[data-count="7"],[data-count="8"],[data-count="9"],[data-count="10"]) {
  display:grid; grid-auto-flow:column; grid-template-rows:repeat(var(--key-rows,3),auto); grid-auto-columns:minmax(0,max-content); gap:2px 14px;
}
.vertex-v3 #app #layerSideControls .side-layer-drop .snow-periods button[data-period] { flex:1 0 auto; min-width:44px; }
.vertex-v3 #app #layerSideControls .side-layer-drop .snow-periods button[data-period] span { overflow:visible; text-overflow:clip; }
.vertex-v3 #app #layerSideControls .side-layer-step { display:flex; align-items:center; gap:7px; min-height:16px; }
.vertex-v3 #app #layerSideControls .side-layer-step>i { flex:none; display:block; width:12px; height:12px; border-radius:3px; box-shadow:inset 0 0 0 1px rgba(var(--g-shadow-rgb),0.149); }
.vertex-v3 #app #layerSideControls .side-layer-step>span { font-size:11.5px; line-height:1.25; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.vertex-v3 #app #layerSideControls .side-layer-note {
  max-width:220px; margin:0; padding-top:5px; border-top:1px solid rgba(var(--g-ink-rgb),0.122); color:var(--g-muted); font:500 10.5px/1.3 var(--font-sans);
}
.vertex-v3 #app #layerSideControls .side-layer-time { display:flex; align-items:center; }
.vertex-v3 #app #layerSideControls .layer-time-control { display:flex; flex:1; min-width:0; align-items:center; gap:6px; min-height:36px; padding:0; background:transparent; --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
.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 62px; width:62px; white-space:normal; overflow-wrap:anywhere; font:600 11px/1.25 var(--font-sans); }
.vertex-v3 #app #layerSideControls .layer-time-control input { flex:1; width:0; min-width:110px; height:36px; padding:0; margin:0; touch-action:none; accent-color:var(--g-accent); }
.vertex-v3 #app #layerSideControls .layer-time-control button { min-height:36px; padding:0 5px; background:transparent; --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
/* Sheets cover the map key; it never floats over their content. Planning keeps it. */
.vertex-v3 #app[data-h7]:not(#_h) #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:auto; top:20px; max-height:calc(100dvh - 160px); }
  .vertex-v3 #app[data-route-planning][data-h1]:not(#_h) #layerSideControls { max-height:calc(100dvh - var(--desk-profile,150px) - 144px); }
}
@media(max-width:899px) {
  /* Phones: the pill hangs from the top, under the chips, so an open tour card keeps the map free. */
  .vertex-v3 #app #layerSideControls {
    --side-top:calc(max(12px,env(safe-area-inset-top)) + 56px);
    top:var(--side-top); bottom:auto;
    max-height:calc(100dvh - var(--side-top) - max(var(--map-home-dock-height,94px),var(--map-sheet-bottom,12px)) - 10px);
  }
  .vertex-v3 #app[data-h8]:not(#_h):not(._h) #layerSideControls { visibility:hidden; }
  .vertex-v3 #app[data-layer-dock-cramped] #layerSideControls { visibility:hidden; pointer-events:none; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app[data-layer-side-controls] #thumbDock { border-radius:22px!important; border-top:1px solid rgba(var(--g-ink-rgb),0.188)!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:22px!important; border-top-right-radius:22px!important; }
}