/* Cards that scroll keep their top: the title row, the area figures and the tabs stay put and only the
   content under them scrolls (one scroller per card, never a card scrolling inside a card). A soft fade at
   the bottom edge says there is more to see. Loaded last, so these rules win. */

/* Area card */
.vertex-v3 #app#app#app#app#app#app#app #placeCard:not(.collapsed){display:flex!important;flex-direction:column!important;overflow:hidden!important}
.vertex-v3 #app#app#app#app#app#app#app #placeCard:not(.collapsed)>.place-card-content{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important;overflow:visible!important}
.vertex-v3 #app#app#app#app#app#app#app #placeCard:not(.collapsed)>.place-card-content>*{flex:0 0 auto}
.vertex-v3 #app#app#app#app#app#app#app #placeCard:not(.collapsed) .place-expanded-content{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important}
.vertex-v3 #app#app#app#app#app#app#app #placeCard:not(.collapsed) .place-expanded-content>*{flex:0 0 auto}
.vertex-v3 #app#app#app#app#app#app#app #placeCard:not(.collapsed) .area-panel:not([hidden]){flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* Tour card */
.vertex-v3 #app#app#app#app#app#app#app #routeDetail:not([hidden]){display:flex!important;flex-direction:column!important;overflow:hidden!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail>*{flex:0 0 auto}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail>.publish-route-sheet{flex:none}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail>.route-detail-content{flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;overscroll-behavior:contain;display:flex!important;flex-direction:column;gap:12px;padding:2px 0 14px!important;margin:0!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-detail-content>*{flex:0 0 auto;margin:0!important}

/* Bottom fade while more is below, on whichever part scrolls. */
.vertex-v3 #app#app#app#app#app#app#app :is(#placeCard .area-panel,#routeDetail>.route-detail-content)[data-more]{-webkit-mask-image:linear-gradient(#000 calc(100% - 46px),#0000);mask-image:linear-gradient(#000 calc(100% - 46px),#0000)}

/* Tour card content: one quiet row of figures, then today, the profile, links and the source. */
.vertex-v3 #app#app#app#app#app#app#app #routeDetailStats{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:0!important;padding:2px 0 0!important;border:0!important;background:none!important;overflow:visible!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetailStats>span{display:grid!important;gap:3px;padding:0 10px!important;border:0!important;border-left:1px solid #ffffff14!important;border-radius:0!important;background:none!important;box-shadow:none!important;min-width:0}
.vertex-v3 #app#app#app#app#app#app#app #routeDetailStats>span:first-child{border-left:0!important;padding-left:2px!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetailStats>span:nth-child(n+4){display:none!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetailStats b{font-size:21px!important;font-weight:700!important;line-height:1.1!important;color:var(--ui-text,#eef1f4)!important;white-space:nowrap;letter-spacing:-.01em}
.vertex-v3 #app#app#app#app#app#app#app #routeDetailStats small{font-size:12px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;color:var(--ui-muted,#9aa3ad)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vertex-v3 #app#app#app#app#app#app#app #routeDetailStats .route-detail-more{grid-column:1/-1;margin:8px 0 0 2px;font-size:12px;color:var(--ui-muted,#9aa3ad)}

.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-today{padding:10px 12px!important;border:0!important;border-radius:14px!important;background:#ffffff0a!important;gap:11px!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-today small{font-size:11px!important;font-weight:600!important;letter-spacing:.04em!important;color:var(--ui-muted,#9aa3ad)!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-today b{font-size:14px!important;font-weight:600!important;color:var(--ui-text,#eef1f4)!important}

.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-profile-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px;margin:2px 0 -4px!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-profile-head>span{font-size:14px!important;font-weight:650!important;color:var(--ui-text,#eef1f4)!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-profile-head>span small{margin-left:6px;font-size:12px!important;font-weight:500;color:var(--ui-muted,#9aa3ad)!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetailReplay{display:inline-flex!important;align-items:center;gap:6px;min-height:34px!important;height:34px;padding:0 13px!important;border:0!important;border-radius:999px!important;background:#ffffff14!important;color:var(--ui-text,#eef1f4)!important;font-size:13px!important;font-weight:600!important;flex:none!important;min-width:0!important;width:auto!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetailReplay svg{width:14px;height:14px;fill:currentColor}
.vertex-v3 #app#app#app#app#app#app#app #routeDetailReplay em{font-size:9px;font-style:normal}

.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-detail-links{display:grid;border-radius:14px;background:#ffffff0a;overflow:hidden}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-detail-links:not(:has(button:not([hidden]))){display:none!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-link-row{display:flex!important;align-items:center!important;gap:12px;width:100%;min-height:56px!important;margin:0!important;padding:8px 14px!important;border:0!important;border-radius:0!important;background:none!important;color:var(--ui-text,#eef1f4)!important;text-align:left!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-link-row[hidden]{display:none!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-link-row+.route-link-row:not([hidden]){border-top:1px solid #ffffff12!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-link-row svg{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:#9cc3ff}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-link-row>span{display:grid;gap:2px;flex:1;min-width:0}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-link-row b{font-size:15px;font-weight:600}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-link-row small{display:block!important;font-size:12px!important;font-weight:400!important;color:var(--ui-muted,#9aa3ad)!important;margin:0!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-link-row>i{font-style:normal;color:var(--ui-muted,#9aa3ad);font-size:15px}

.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-community-info:not([hidden]){padding:0 2px!important;border:0!important;background:none!important;box-shadow:none!important;gap:4px!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-community-info>small{font-size:11px!important;font-weight:600!important;letter-spacing:.04em!important;color:var(--ui-muted,#9aa3ad)!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-community-info>b{font-size:14px!important;font-weight:600!important;color:var(--ui-text,#eef1f4)!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-community-info>span{font-size:12px!important;line-height:1.45!important;color:var(--ui-muted,#9aa3ad)!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-incline-key{margin:0!important;padding:0 2px!important;border:0!important;background:none!important;font-size:12px;color:var(--ui-muted,#9aa3ad)}

/* One row of actions under the content. */
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-detail-actions{display:flex!important;flex-wrap:nowrap!important;align-items:stretch;gap:8px!important;margin:0!important;padding:12px 0 0!important;border-top:1px solid #ffffff12!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-detail-actions .route-choice-actions{display:flex!important;flex:1 1 auto!important;gap:8px!important;margin:0!important;min-width:0}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-detail-actions .route-choice-actions:not(:has(button:not([hidden]))){display:none!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-detail-actions :is(#routeDetailGo,#routeDetailSaveCommunity,#routeDetailMore){min-height:40px!important;height:40px!important;margin:0!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-detail-actions #routeDetailGo{flex:1 1 auto!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-detail-actions #routeDetailSaveCommunity:not([hidden]){flex:0 0 auto!important;order:0!important;padding:0 18px!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-detail-actions #routeDetailMore{flex:0 0 44px!important;width:44px!important;margin-left:auto!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-link-row{flex-direction:row!important;justify-content:flex-start!important}
/* Area card: the tour count stays readable on the selected tab. */
.vertex-v3 #app#app#app#app#app#app#app #areaTabTours[aria-selected="true"] #areaToursCount{color:#ffffffc7!important}
/* The map's attribution (i) sits on the map, under cards, instead of floating on top of them. */
.vertex-v3 #app#app#app#app#app#app#app #map .maplibregl-ctrl-bottom-right,.vertex-v3 #app#app#app#app#app#app#app #map .maplibregl-ctrl-bottom-left{z-index:0!important}

/* Search hits: the same rows as Recent, Saved and Nearby. */
.vertex-v3 #app#app#app#app#app#app#app #searchResults .search-result{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;width:100%!important;min-height:64px!important;margin:0!important;padding:10px 2px!important;border:0!important;border-bottom:1px solid #ffffff14!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--ui-text)!important;text-align:left!important}
.vertex-v3 #app#app#app#app#app#app#app #searchResults .search-result:last-child{border-bottom:0!important}
.vertex-v3 #app#app#app#app#app#app#app #searchResults .search-result:is(:hover,:focus-visible,:active){background:#ffffff0d!important}
.vertex-v3 #app#app#app#app#app#app#app #searchResults .search-result-icon{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--ui-raised);color:#9cc3ff}
.vertex-v3 #app#app#app#app#app#app#app #searchResults .search-result-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.vertex-v3 #app#app#app#app#app#app#app #searchResults .search-result-copy{display:grid;gap:3px;flex:1;min-width:0}
.vertex-v3 #app#app#app#app#app#app#app #searchResults .search-result-copy b{font:600 16px/1.25 system-ui!important;color:var(--ui-text)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left!important}
.vertex-v3 #app#app#app#app#app#app#app #searchResults .search-result-copy small{font:400 13px/1.3 system-ui!important;color:var(--ui-muted)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left!important;max-width:none!important}
.vertex-v3 #app#app#app#app#app#app#app #searchResults .search-result-chevron{flex:none;color:var(--ui-muted)}
.vertex-v3 #app#app#app#app#app#app#app #searchResults .search-result-chevron svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.vertex-v3 #app#app#app#app#app#app#app #searchResults{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail #routeDetailMeta{font-size:12px!important;color:var(--ui-muted,#9aa3ad)!important}

/* Primary blue buttons: one compact size everywhere (40 px, 14 px text) so they don't take the screen. */
.vertex-v3 #app#app#app#app#app#app#app :is(#startRecord:not([hidden]),#routeDetailGo,#saveSettings,#mapFeatureLink,#placePeekDetails,#placePeekRoute,#savePlannedRoute,.area-panel-actions button,.route-add-primary,.spot-actions button.primary,.publish-route-sheet .route-primary,#communityView form button){min-height:40px!important;height:auto!important;padding-top:8px!important;padding-bottom:8px!important;border-radius:12px!important;font-size:14px!important;font-weight:600!important;line-height:1.2!important}
.vertex-v3 #app#app#app#app#app#app#app #recordSheet #startRecord:not([hidden]){min-height:44px!important;font-size:15px!important}
.vertex-v3 #app#app#app#app#app#app#app #recordSheet #startRecord svg{width:16px!important;height:16px!important}

/* One-tap Start: the Record card stays invisible while recording is being started. */
.vertex-v3 #app#app#app#app#app#app#app #recordSheet.quick-start{visibility:hidden!important;animation:none!important}

/* Hover tips (src/fast-tips.js): the same dark card style, shown at once instead of the browser's slow tooltip. */
.fast-tip{position:fixed;z-index:200;max-width:260px;padding:6px 10px;border:1px solid #ffffff20;border-radius:10px;background:#1e2126;color:#f1f3f5;font:500 12.5px/1.35 system-ui,sans-serif;box-shadow:0 4px 14px #0006;pointer-events:none;animation:fast-tip-in 90ms ease-out}
.fast-tip[hidden]{display:none}
@keyframes fast-tip-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.fast-tip{animation:none}}

/* Legends as chips (src/legend-chips.js): one low row of layer chips; only the tapped chip's views and legend
   open above it. Folded legends are display:none, so the strip is as low as the chip row whatever the mix. */
.vertex-v3 #app#app#app#app#app#app#app #mapContextStack.legend-chips-mode [data-folded="true"]{display:none!important}
.vertex-v3 #app#app#app#app#app#app#app #mapContextStack.legend-chips-mode{flex-direction:column!important;flex-wrap:nowrap!important;overflow:hidden!important}
.vertex-v3 #app#app#app#app#app#app#app #mapContextStack.legend-chips-mode>*{flex:0 0 auto!important;width:auto!important;max-width:none!important;border-right:0!important;border-bottom:1px solid #ffffff14!important}
.vertex-v3 #app#app#app#app#app#app#app #mapContextStack.legend-chips-mode>.legend-chips{order:99;display:flex!important;gap:6px!important;min-height:0!important;padding:7px 10px!important;border-bottom:0!important;overflow-x:auto!important;scrollbar-width:none}
.vertex-v3 #app#app#app#app#app#app#app #mapContextStack.legend-chips-mode>.legend-chips[hidden]{display:none!important}
.vertex-v3 #app#app#app#app#app#app#app #mapContextStack.legend-chips-mode>.legend-chips::-webkit-scrollbar{display:none}
.vertex-v3 #app#app#app#app#app#app#app #mapContextStack .legend-chip{flex:none!important;display:flex!important;align-items:center;gap:6px!important;height:30px!important;min-height:30px!important;margin:0!important;padding:0 10px 0 8px!important;border:1px solid #ffffff1c!important;border-radius:15px!important;background:var(--ui-raised,#2a2e35)!important;color:var(--ui-text)!important;font:600 12.5px/1 system-ui,sans-serif!important;white-space:nowrap}
.vertex-v3 #app#app#app#app#app#app#app #mapContextStack .legend-chip i{display:block;width:12px;height:12px;border-radius:6px;flex:none}
.vertex-v3 #app#app#app#app#app#app#app #mapContextStack .legend-chip[aria-expanded="true"]{border-color:#3b82f6!important;background:#1f3a66!important}
@media (min-width:900px){
  .vertex-v3 #app#app#app#app#app#app#app #mapSheet #mapContextStack.legend-chips-mode{background:var(--ui-surface,#1e2126)!important;border:1px solid #ffffff1c!important;border-radius:18px!important;color:var(--ui-text)!important;padding:0!important;gap:0!important}
  .vertex-v3 #app#app#app#app#app#app#app #mapSheet #mapContextStack.legend-chips-mode>*{background:transparent!important;border-radius:0!important;box-shadow:none!important}
  .vertex-v3 #app#app#app#app#app#app#app #mapSheet #mapContextStack.legend-chips-mode :is(b,strong,span,label,p,div){color:var(--ui-text,#f1f3f5)!important}
  .vertex-v3 #app#app#app#app#app#app#app #mapSheet #mapContextStack.legend-chips-mode :is(small,em){color:var(--ui-muted,#9aa3ad)!important}
}

/* One legend template for every layer (src/legend-chips.js): chips (only with 2+ layers) · name, view switch, ✕ ·
   one colour scale with labels · at most one line of text. Overrides each layer's older legend look. */
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template>.legend-chips{order:-2!important;border-bottom:1px solid #ffffff14!important}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template>.map-mode-box{order:-1!important;padding:10px 12px 2px!important;border-bottom:0!important;background:transparent!important}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template .legend-chip{background:transparent!important;color:var(--ui-muted,#9aa3ad)!important}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template .legend-chip[aria-expanded="true"]{background:var(--ui-raised,#2a2e35)!important;border-color:#ffffff66!important;color:var(--ui-text,#f1f3f5)!important}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template .map-mode-box .avalanche-mode{gap:0!important;padding:0!important;background:transparent!important;border-radius:0!important}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template .map-mode-label{display:block!important;flex:1 1 auto!important;max-width:none!important;padding:0 8px 0 0!important;font:650 14px/1.2 system-ui,sans-serif!important;color:var(--ui-text,#f1f3f5)!important;text-transform:none!important;letter-spacing:0!important}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template .map-mode-box .avalanche-mode button:not(.mode-close){flex:0 0 auto!important;min-height:30px!important;height:30px!important;padding:0 10px!important;border-radius:0!important;background:var(--ui-raised,#2a2e35)!important;box-shadow:none!important;color:var(--ui-muted,#9aa3ad)!important;font:600 12px/1 system-ui,sans-serif!important}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template .map-mode-box .avalanche-mode .map-mode-label+button{border-radius:10px 0 0 10px!important;padding-left:12px!important}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template .map-mode-box .avalanche-mode button:not(.mode-close):has(+.mode-close){border-radius:0 10px 10px 0!important;padding-right:12px!important}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template .map-mode-box .avalanche-mode button:not(.mode-close):is(.active,[aria-pressed="true"]){background:#3b82f6!important;color:#fff!important;box-shadow:inset 0 0 0 2px var(--ui-raised,#2a2e35)!important;border-radius:10px!important}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template .map-mode-box .avalanche-mode>.mode-close{flex:0 0 30px!important;width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important;margin-left:8px!important;border-radius:15px!important;background:var(--ui-raised,#2a2e35)!important;color:var(--ui-text,#f1f3f5)!important;font-size:13px!important}
/* The legend body under the head: no titles (the head names the layer), no second ✕. */
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template>[data-folded="false"]:not(.map-mode-box,.legend-chips){padding:8px 12px 10px!important;border-bottom:0!important;background:transparent!important;flex-wrap:wrap!important;row-gap:6px!important}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template :is(.legend-title,.firn-row>small:first-child,.powder-legend>small:first-child,.best-snow-legend small,.wind-load-legend small.wind-load-warn,.best-snow-dot){display:none!important}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template:has(>.map-mode-box[data-folded="false"]) .legend-close:not(.mode-close){display:none!important}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template .legend-scale:not([data-folded]){display:flex!important}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template .legend-scale{flex-wrap:wrap!important;align-items:flex-start!important;gap:0!important;width:100%!important;flex:1 1 100%!important;margin:0!important;padding:0!important}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template .legend-scale>:not(.legend-step){flex:1 1 100%!important;margin-top:6px!important}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template .legend-step{flex:1 1 0!important;min-width:0!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:4px!important;margin:0!important;padding:0!important;font:500 11px/1.2 system-ui,sans-serif!important;color:var(--ui-muted,#9aa3ad)!important;white-space:nowrap}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template .legend-step :is(b,span){font:500 11px/1.2 system-ui,sans-serif!important;color:var(--ui-muted,#9aa3ad)!important;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template .legend-step::before,.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template .legend-step::after{content:none!important;display:none!important}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template .legend-step>i{display:block!important;width:100%!important;height:8px!important;min-width:0!important;margin:0!important;border:0!important;border-radius:0!important}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template .legend-step:first-child>i,.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template :not(.legend-step)+.legend-step>i{border-radius:4px 0 0 4px!important}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template .legend-step:not(:has(+.legend-step))>i{border-radius:0 4px 4px 0!important}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template :is(.wind-load-legend,.best-snow-legend).show:not([data-folded="true"]){display:flex!important;align-items:center!important;gap:8px!important;cursor:pointer}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template :is(.wind-load-legend,.best-snow-legend)>span:not(.wind-load-arrow):not(.legend-step){flex:1 1 100%!important;order:2}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template :is(.wind-load-legend,.best-snow-legend) :is(b,em){font:500 12px/1.35 system-ui,sans-serif!important;color:var(--ui-text,#f1f3f5)!important;white-space:normal!important}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template :is(.wind-load-legend,.best-snow-legend) em{color:var(--ui-muted,#9aa3ad)!important;font-style:normal!important}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template :is(.wind-load-legend,.best-snow-legend) .cond-short{display:none!important}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template :is(.wind-load-legend,.best-snow-legend)>.legend-scale-extra{order:1;flex:1 1 0!important;width:auto!important}
/* Notes under a scale read as one quiet line. */
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template [data-folded="false"] :is(.reach-legend-note,.firn-note,.lift-legend-note,.snowline-note){font:500 12px/1.35 system-ui,sans-serif!important;color:var(--ui-muted,#9aa3ad)!important}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template>[hidden]{display:none!important}
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template>[data-folded="true"]{display:none!important}

/* Tours tab: "Show more tours" reads as a quiet button, one primary action (Show on map), Plan a route secondary. */
.vertex-v3 #app#app#app#app#app#app#app #areaTourList .area-more{display:block!important;width:100%!important;min-height:40px!important;margin:8px 0 0!important;border:1px solid #ffffff1c!important;border-radius:12px!important;background:var(--ui-raised,#2a2e35)!important;color:var(--ui-text,#f1f3f5)!important;font:600 13px/1.2 system-ui,sans-serif!important}
.vertex-v3 #app#app#app#app#app#app#app#app #areaPlanRoute{background:var(--ui-raised,#2a2e35)!important;color:var(--ui-text,#f1f3f5)!important;border:1px solid #ffffff1c!important}
.vertex-v3 #app#app#app#app#app#app#app#app :is(#areaAllTours,#areaPlanRoute){white-space:nowrap!important}


/* Place and hut preview: the heading sits on the card itself, no lighter box behind it. */
.vertex-v3 #app#app#app#app#app#app#app #placePeek .map-feature-heading{background:transparent!important}

/* You pages (Friends, Profile, Ski log, Settings): the last light-theme leftovers on the graphite cards.
   One primary blue with white text, raised graphite rows, white text. */
html,.vertex-v3 #map{background:#16181c}
.vertex-v3 #app#app#app#app#app#app#app :is(.community-friend-row,.community-route-card){background:var(--ui-raised,#2a2e35)!important;border-color:#ffffff14!important;color:var(--ui-text,#f3f5f7)!important}
.vertex-v3 #app#app#app#app#app#app#app .community-friends-title b{color:var(--ui-muted,#a3abb6)!important;font-size:12px!important;font-weight:500!important}
.vertex-v3 #app#app#app#app#app#app#app :is(.community-friends-title small,.community-route-top small,.community-friend-copy small){color:var(--ui-muted,#a3abb6)!important}
.vertex-v3 #app#app#app#app#app#app#app :is(.community-friend-row-actions button,.community-friend-actions button,.community-safety-actions button,#playActivity,#activityMoreButton,.activity-more-menu button,#communityProfileSettings){background:#3a3f48!important;border:1px solid #ffffff14!important;color:var(--ui-text,#f3f5f7)!important;font-size:13px!important;font-weight:600!important}
.vertex-v3 #app#app#app#app#app#app#app :is(.community-friend-row-actions button:first-child:not(:only-child),.community-friend-actions .community-friend-primary,.community-route-save-inline,#saveActivityRoute,#saveProfile,#confirmChangePassword,#communityView .route-primary){background:#3b82f6!important;border-color:#3b82f6!important;color:#ffffff!important;font-size:14px!important;font-weight:600!important}
.vertex-v3 #app#app#app#app#app#app#app .community-route-top i{background:#3a3f48!important;color:var(--ui-text,#f3f5f7)!important}
.vertex-v3 #app#app#app#app#app#app#app #communityPeopleSearch{background:var(--ui-raised,#2a2e35)!important;border:1px solid #ffffff14!important}
.vertex-v3 #app#app#app#app#app#app#app #communityPeopleSearch input{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--ui-text,#f3f5f7)!important}
.vertex-v3 #app#app#app#app#app#app#app #communityPeopleSearch>span{color:var(--ui-muted,#a3abb6)!important}
.vertex-v3 #app#app#app#app#app#app#app .activity-route-preview{background:var(--ui-raised,#2a2e35)!important;border-color:#ffffff14!important}
.vertex-v3 #app#app#app#app#app#app#app .activity-route-preview>span{background:#16181ccc!important;color:var(--ui-muted,#a3abb6)!important}
.vertex-v3 #app#app#app#app#app#app#app .community-friend-copy b{color:var(--ui-text,#f3f5f7)!important;font-size:15px!important;font-weight:600!important}
.vertex-v3 #app#app#app#app#app#app#app .community-friend-copy small{font-size:12px!important}
.vertex-v3 #app#app#app#app#app#app#app :is(.community-person-avatar,.community-profile-avatar){background:#3a3f48!important;color:var(--ui-text,#f3f5f7)!important}
.vertex-v3 #app#app#app#app#app#app#app #communityProfileEdit{background:#3a3f48!important;border:1px solid #ffffff14!important;color:var(--ui-text,#f3f5f7)!important;font-size:13px!important;font-weight:600!important}
.vertex-v3 #app#app#app#app#app#app#app #communityPeopleSearch{height:auto!important;min-height:48px!important;padding:4px 4px 4px 12px!important;border-radius:14px!important;box-sizing:border-box}
/* Regional coverage status sits below the view switch instead of squeezing its controls. */
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template #avalancheMode { flex-wrap:wrap!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template #avalancheMode .avalanche-coverage-note { flex:1 0 100%!important; order:5; margin-top:6px; font:500 10px/1.3 system-ui; color:var(--ui-muted); white-space:normal!important; }
.vertex-v3 #app .avalanche-coverage-note:empty { display:none!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template #avalancheMode .map-mode-label { flex:1 1 0!important; min-width:0!important; }
@media(max-width:389px) {
  .vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template #avalancheMode .map-mode-label { font-size:12px!important; }
}
/* Every colour row's header fits a 375 px phone: the row name gives way before its choices or ✕ do. */
.vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template .layer-group-mode .map-mode-label { flex:1 1 0!important; min-width:0!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; }
@media(max-width:389px) {
  .vertex-v3 #app#app#app#app#app#app#app#app #mapContextStack.legend-template .layer-group-mode .map-mode-label { font-size:12px!important; }
}
/* Area card, compact: today's figures as one quiet line under the name, so the tabs' content gets the room. */
.vertex-v3 #app#app#app#app#app#app#app #placeCard:not(.collapsed) #resortStatus { display:flex!important; flex-wrap:nowrap!important; gap:14px!important; align-items:baseline!important; min-height:0!important; height:auto!important; margin:0 0 10px!important; padding:0!important; border:0!important; background:none!important; overflow:hidden!important; white-space:nowrap!important; }
.vertex-v3 #app#app#app#app#app#app#app #placeCard:not(.collapsed) #resortStatus span { display:inline-flex!important; flex:none!important; flex-direction:row!important; align-items:baseline!important; gap:4px!important; min-width:0!important; padding:0!important; border:0!important; }
.vertex-v3 #app#app#app#app#app#app#app #placeCard:not(.collapsed) #resortStatus b { font:700 13px/1.2 system-ui,sans-serif!important; color:var(--ui-text,#fff)!important; }
.vertex-v3 #app#app#app#app#app#app#app #placeCard:not(.collapsed) #resortStatus small { font:500 12px/1.2 system-ui,sans-serif!important; letter-spacing:0!important; text-transform:none!important; color:var(--ui-muted,#9aa3ad)!important; }
/* "More" over the fade while the open tab has more below. */
.vertex-v3 #app#app#app#app#app#app#app #placeCard #areaMore { position:absolute; z-index:6; left:50%; bottom:calc(10px + env(safe-area-inset-bottom,0px)); translate:-50% 0; display:inline-flex; align-items:center; gap:3px; height:28px; padding:0 10px 0 12px; border:1px solid #ffffff26; border-radius:14px; background:#2a2e35; color:#fff; font:600 12px/1 system-ui,sans-serif; box-shadow:0 2px 8px #0006; }
.vertex-v3 #app#app#app#app#app#app#app #placeCard #areaMore .ui-icon { width:14px; height:14px; }
.vertex-v3 #app#app#app#app#app#app#app #placeCard #areaMore[hidden],.vertex-v3 #app#app#app#app#app#app#app #placeCard.collapsed #areaMore { display:none!important; }