/* One frame for every colouring view. Headers stay put; only the body scrolls. */
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template[data-open]:not([data-open=""]) {
  height:224px!important;
  max-height:224px!important;
  box-sizing:border-box; overflow:hidden!important; padding:0!important; gap:0!important;
}
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template>.map-mode-box {
  flex:0 0 auto!important; min-height:0!important; padding:6px 12px 4px!important;
}
/* Additional overlays use a bottom switcher, keeping the title and views fixed. */
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template>.legend-chips { order:95!important; flex:0 0 auto!important; }
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template .map-mode-box .layer-card-heading {
  position:relative; display:grid!important; grid-template-columns:repeat(var(--layer-views,3),minmax(0,1fr));
  align-items:stretch!important; gap:4px 0!important; margin:0!important; padding:0!important;
}
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template .layer-card-heading>.map-mode-label {
  grid-column:1/-1; display:flex!important; align-items:center; min-height:36px; max-width:none!important;
  padding:0 44px 0 0!important; overflow:visible!important; white-space:normal!important;
  font:650 14px/1.25 system-ui,sans-serif!important;
}
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template .map-mode-box .layer-card-heading>button:not(.mode-close) {
  min-width:0!important; min-height:36px!important; height:36px!important; padding:0 6px!important;
  overflow:visible!important; white-space:normal!important; text-overflow:clip;
  font:600 12px/1.2 system-ui,sans-serif!important;
}
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template .map-mode-box .layer-card-heading>.mode-close {
  position:absolute!important; top:0; right:0; width:36px!important; min-width:36px!important;
  height:36px!important; min-height:36px!important; margin:0!important; padding:0!important;
  border-radius:50%!important; font:500 14px/1 system-ui!important;
}
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template .layer-card-heading>.mode-close::after { inset:-4px; }
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template .layer-card-hint {
  grid-column:1/-1; display:flex; align-items:center; min-height:36px; color:var(--ui-muted)!important;
  font:500 12px/1.35 system-ui,sans-serif;
}
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template>.layer-card-body,
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template>.layer-card-empty {
  flex:1 1 auto!important; min-height:0!important; width:100%!important; box-sizing:border-box;
  margin:0!important; padding:6px 12px 8px!important; overflow-x:hidden!important; overflow-y:auto!important;
  scrollbar-width:thin; scrollbar-gutter:stable;
  overscroll-behavior:contain; align-content:flex-start!important; justify-content:flex-start!important;
  border:0!important; gap:6px!important; row-gap:6px!important; white-space:normal!important;
  font:500 12px/1.4 system-ui,sans-serif!important;
}
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template .legend-step,
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template .legend-step :is(b,span) {
  white-space:normal!important; overflow:visible!important; text-overflow:clip;
  font:500 11px/1.3 system-ui,sans-serif!important;
}
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template .layer-card-body .legend-scale-extra {
  flex:0 0 100%!important; width:100%!important;
}
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template>.layer-card-body.show:not(.legend-scale,.wind-load-legend),
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template>.layer-card-body[role="note"]:not([hidden]) {
  display:flex!important; flex-direction:column!important; align-items:stretch!important; flex-wrap:nowrap!important;
}
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template .layer-card-body>.legend-scale,
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template .layer-card-body>.slider-head { flex:0 0 auto!important; }
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template :is(.firn-row,.slider-head) {
  width:100%; min-width:0; margin:0!important; padding:0!important; box-sizing:border-box;
}
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template :is(.slider-head,#sunPanel>div) {
  display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:30px;
}
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template :is(.time-slider,#sunTime) {
  flex:0 0 36px!important; width:100%!important; height:36px!important; margin:0!important;
}
/* Time and its slider share one row in every time-controlled map layer. */
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template .layer-time-control {
  display:flex!important; align-items:center!important; flex:0 0 auto!important;
  width:100%; min-width:0; min-height:36px; gap:8px!important; padding:0!important; margin:0!important;
}
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template .layer-time-control>.layer-time-label {
  flex:0 1 110px!important; min-width:0; max-width:40%; white-space:normal!important;
  text-wrap:balance;
}
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template .layer-time-control>:is(.time-slider,#sunTime) {
  flex:1 1 88px!important; width:auto!important; min-width:76px; max-width:none!important;
}
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template .layer-time-control>:is(.slider-now,.sun-now) {
  flex:0 0 auto; padding:0 8px;
}
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template :is(.firn-time,#sunTimeLabel,#latestSnowLegendText) { margin:0!important; font:600 12px/1.4 system-ui,sans-serif!important; }
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template :is(.slider-now,.sun-now) { min-height:30px; height:30px; padding:0 12px; border:0; border-radius:15px; background:var(--ui-green); color:var(--ui-on-dark); font:600 12px/1 system-ui,sans-serif; }
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template :is(.firn-note,.reach-legend-note,.avalanche-angles-note,.layer-card-body>small,.layer-card-footer) {
  margin:0!important; padding:0!important; font:500 12px/1.4 system-ui,sans-serif!important;
  color:var(--ui-muted)!important; white-space:normal!important; overflow-wrap:anywhere;
}
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template>.layer-card-footer {
  flex:0 0 auto!important; order:90; padding:4px 12px 8px!important; max-height:68px; overflow-y:auto;
  width:100%; box-sizing:border-box; border:0!important;
}
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template>.layer-card-footer:empty { display:none!important; }
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template :is(#bestSnowLegend,#windLoadLegend) { cursor:default!important; }
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template :is(#bestSnowLegend,#windLoadLegend)>span:not(.wind-load-arrow) { display:block!important; }
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template :is(#bestSnowLegendText,#bestSnowLegendDetail,#windLoadLegendText,#windLoadLegendDetail) { display:block!important; margin:0!important; font:500 12px/1.4 system-ui,sans-serif!important; }
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template #sunPanel>div>b:first-child { display:none!important; }
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template>.layer-card-empty[hidden],
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template .layer-card-body [hidden],
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template.legend-chips-mode :is(.layer-card-body,.layer-card-heading,.layer-card-footer)[data-folded="true"],
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template .map-mode-box .layer-card-heading[data-folded="true"],
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template .map-mode-box .layer-card-heading[hidden],
.vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template.legend-chips-mode>.layer-card-body[hidden] { display:none!important; }
@media (max-width:899px) {
  /* Only a phone curtain must fit between the corner controls and bottom dock.
     On desktop the area panel occupies the full sidebar height. */
  .vertex-v3 #app#app#app#app#app#app#app#app#app #mapContextStack.legend-template[data-open]:not([data-open=""]) {
    max-height:min(42dvh,calc(100dvh - var(--corner-clear,160px) - var(--map-dock-height,82px) - 24px))!important;
  }
  .vertex-v3 #app#app#app#app#app#app#app#app#app #mapSheet[data-mode="home"]:not(:has(#placeCard:not(.collapsed):not([hidden]))) #mapContextStack.legend-template[data-open]:not([data-open=""]) {
    padding:4px 0 34px!important;
  }
}