/* Map-first workflows. Keep controls anchored where the user entered the flow. */
.vertex-v3 #app#app .topbar { display:none!important; }
.vertex-v3 #app#app[data-finding] .topbar {
  display:flex!important; flex-direction:column!important; gap:16px!important;
  position:fixed!important; top:auto!important; bottom:calc(12px + env(safe-area-inset-bottom))!important;
  left:12px!important; right:12px!important; width:auto!important; max-width:460px!important;
  max-height:calc(100dvh - 40px)!important; padding:20px!important; box-sizing:border-box;
  overflow-y:auto; border:1px solid #1d232525; border-radius:24px;
  background:#e0e8ec; box-shadow:0 14px 60px #0f1f2945; z-index:65!important;
}
.vertex-v3 #app#app .find-sheet-head { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; }
.vertex-v3 #app .find-sheet-head small { color:#0076cc; font-size:10px; font-weight:750; letter-spacing:.1em; }
.vertex-v3 #app .find-sheet-head h2 { margin:5px 0 0; color:#223431; font-size:22px; line-height:1.2; }
.vertex-v3 #app#app[data-finding] .find-cancel { display:block!important; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:#1d232510; color:#1d2325; font-size:24px; text-shadow:none; flex:none; }
.vertex-v3 #app#app[data-finding] .search-wrap { width:100%!important; max-width:none!important; min-width:0; }
.vertex-v3 #app#app[data-finding] .search { position:relative; width:100%!important; height:50px!important; box-sizing:border-box; margin:0!important; }
.vertex-v3 #app#app[data-finding] .search input { font-size:16px!important; }
.vertex-v3 #app#app[data-finding] .search-results {
  position:static!important; width:100%!important; max-height:32dvh!important; margin-top:10px!important;
  border:0!important; box-shadow:none!important; background:#1d232506!important; border-radius:12px;
}
.vertex-v3 #app .search-result { min-height:56px; }
.vertex-v3 #app .search-empty { color:#455c66; padding:16px; font-size:14px; line-height:1.5; }
.vertex-v3 #app#app[data-finding] .find-shortcuts { display:grid!important; grid-template-columns:1fr; width:100%; gap:8px; margin:0; overflow:visible; }
.vertex-v3 #app#app[data-finding] .find-shortcuts button {
  display:grid!important; grid-template-columns:34px 1fr; grid-template-rows:auto auto; gap:3px 12px;
  height:auto; min-height:68px; padding:12px; border-radius:14px; text-align:left; background:#1d232507; box-shadow:none;
}
.vertex-v3 #app .find-shortcuts button>span { grid-row:1 / 3; align-self:center; font-size:24px; color:#0076cc; text-align:center; }
.vertex-v3 #app .find-shortcuts b { font-size:15px; color:#1f342f; }
.vertex-v3 #app .find-shortcuts small { font-size:12px; color:#596f79; font-weight:400; }
.vertex-v3 #app#app[data-finding]:has(.search-results:not([hidden])) .find-shortcuts { display:none!important; }
.vertex-v3 #app#app[data-finding] .place-card { display:none!important; }
.vertex-v3 #app#app[data-finding] .today-tour-pill,.vertex-v3 #app#app[data-finding] .layer-mode-pill,.vertex-v3 #app#app[data-finding] .community-map-bar { display:none!important; }
.vertex-v3 #app#app[data-finding] .map-tools,.vertex-v3 #app#app[data-finding] .find-bar,.vertex-v3 #app#app[data-finding] .place-badge { display:none!important; }
.vertex-v3 #app#app .record-fab { width:auto; min-width:94px; padding:0 14px; gap:9px; display:flex; justify-content:center; border-radius:27px; color:#1f342f; }
.vertex-v3 #app .record-fab b { font-size:14px; font-weight:700; }
.vertex-v3 #app .find-button { padding:0 16px; font-size:15px; gap:9px; }
.vertex-v3 #app .area-route-actions { display:flex; gap:8px; margin:12px 0; }
.vertex-v3 #app .area-route-actions button { flex:1; min-height:44px; border:1px solid #1d232524; border-radius:12px; background:#1d23250c; color:#223936; font:600 13px system-ui; }
.vertex-v3 #app .area-route-actions button:first-child { background:#263f3b; color:#dde6ea; }
.vertex-v3 #app#app .routes-library-toolbar { display:flex; gap:8px; flex-wrap:wrap; }
.vertex-v3 #app .route-name-field { display:flex; flex-direction:column; gap:5px; color:#4c6872; font-size:12px; margin-bottom:12px; }
.vertex-v3 #app .route-name-field input { width:100%; box-sizing:border-box; height:42px; padding:0 12px; border:1px solid #1d232524; border-radius:10px; background:#1d232508; color:#1d2325; font:16px system-ui; }
.vertex-v3 #app .planner-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.vertex-v3 #app .planner-heading small { color:#0076cc; font-size:10px; letter-spacing:.1em; }
.vertex-v3 #app #plannerLayers { min-height:40px; padding:0 14px; border:1px solid #1d232524; border-radius:12px; background:#1d23250c; color:#213634; font:600 14px system-ui; }
.vertex-v3 #app#app .route-detail-actions { display:flex!important; flex-wrap:wrap; gap:8px!important; }
.vertex-v3 #app#app .route-detail-actions .route-go { width:100%; flex:1 0 100%; }
.vertex-v3 #app#app .route-detail-actions #routeDetailReplay { flex:1; min-width:130px; background:#1d232514!important; }
.vertex-v3 #app#app .route-detail-actions #routeDetailLayers { flex:1; }
.vertex-v3 #app#app .route-detail-actions #routeDetailMore { flex:0 0 44px; min-width:44px; }
.vertex-v3 #app#app #routeDetail {
  display:flex!important; flex-direction:column!important; max-height:min(60dvh,520px)!important;
  overflow:hidden!important; padding:16px!important;
}
.vertex-v3 #app#app #routeDetail[hidden] { display:none!important; }
.vertex-v3 #app#app #routeDetail .route-detail-head { position:static!important; flex:none; margin:0 0 10px!important; padding:0!important; background:none!important; }
.vertex-v3 #app .route-detail-content { min-height:0; overflow:auto; overscroll-behavior:contain; flex:1 1 auto; }
.vertex-v3 #app#app #routeDetail .route-detail-stats { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; }
.vertex-v3 #app#app #routeDetail .route-detail-stats span:nth-child(n+4) { display:none!important; }
.vertex-v3 #app#app #routeDetail .route-detail-actions { flex:none; margin:12px 0 0!important; padding-top:12px; border-top:1px solid #1d232518; }
.vertex-v3 #app#app .route-detail-actions #routeDetailReplay,.vertex-v3 #app#app .route-detail-actions #routeDetailLayers,.vertex-v3 #app#app .route-detail-actions #routeDetailMore { display:flex!important; align-items:center; justify-content:center; order:1; }
.vertex-v3 #app .route-choice-actions { display:flex; width:100%; flex:1 0 100%; gap:8px; }
.vertex-v3 #app#app .route-choice-actions .route-go { flex:1 1 0; width:auto; min-width:0; padding:0 10px!important; }
.vertex-v3 #app#app #routeDetailMap { display:none!important; }
.vertex-v3 #app#app .route-detail-actions #routeDetailSaveCommunity:not([hidden]) { flex:0 0 108px; padding:0 8px!important; font-size:12px!important; }
.vertex-v3 #app#app #routeDetail .route-community-info:not([hidden]) { display:block!important; }
.vertex-v3 #app#app #routeDetail .route-detail-menu:not([hidden]) { flex:none; max-height:20dvh; overflow:auto; }
.vertex-v3 #app#app[data-section="routes"] #alpsLibrary { border-top:0; padding-top:0; margin-bottom:16px; }
.vertex-v3 #app .record-choice small { display:block; font-size:12px; color:#56717b; line-height:1.4; }
.vertex-v3 #app .record-explainer { color:#56717b; font-size:13px; line-height:1.5; margin:12px 0; }
.vertex-v3 #app#app #replayExit { width:auto!important; min-width:70px; padding:0 10px!important; font-size:14px!important; white-space:nowrap; }
.vertex-v3 #app#app .replay-controls { grid-template-columns:70px 44px minmax(0,1fr) 44px!important; gap:8px!important; padding:14px!important; }
.vertex-v3 #app #replayTitle { grid-column:1 / -1; color:#233b36; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vertex-v3 #app #replayExit { grid-column:1; grid-row:2; }
.vertex-v3 #app #replayPlayPause { grid-column:2; grid-row:2; }
.vertex-v3 #app #replayProgress { grid-column:3; grid-row:2; min-width:0; }
.vertex-v3 #app #replaySpeed { grid-column:4; grid-row:2; }
.vertex-v3 #app#app #replayStats { position:static!important; grid-column:1 / -1; font-size:12px; color:#4e6a75; }
.vertex-v3 #app .record-change { min-height:40px; border:1px solid #1d232520; border-radius:12px; padding:0 14px; background:#1d232508; color:#37525c; font:600 13px system-ui; }
.vertex-v3 #app { --workflow-tour-bottom:max(calc(var(--place-card-current-h,0px) + 132px + env(safe-area-inset-bottom)),calc(var(--legend-floor,74px) + var(--legend-terrain,0px) + var(--legend-sun,0px) + var(--legend-wind,0px) + var(--legend-best,0px) + var(--legend-powder,0px) + 8px)); }
.vertex-v3 #app#app .today-tour-pill { bottom:var(--workflow-tour-bottom); }
.vertex-v3 #app#app .today-tour-name b { max-width:42vw; }
.vertex-v3 #app#app .today-tour-start { padding:0 12px; }
.vertex-v3 #app#app:has(.today-tour-pill:not([hidden])) .map-route-chip { display:none!important; }
.vertex-v3 #app#app:has(.today-tour-pill:not([hidden])) .layer-mode-pill { bottom:calc(var(--workflow-tour-bottom) + 64px); }
.vertex-v3 #app#app:has(#recordSheet:not([hidden])) .map-route-chip { display:none!important; }
.vertex-v3 #app#app:has(#replayControls:not([hidden])) #communityPreviewBar { display:none!important; }
.vertex-v3 #app#app[data-section="routes"][data-routes-view="discover"] #communityView {
  position:fixed!important; inset:auto 12px calc(12px + env(safe-area-inset-bottom))!important;
  width:auto!important; max-width:460px!important; height:auto!important; max-height:66dvh!important;
  padding:16px!important; border:1px solid #1d232525!important; border-radius:24px!important;
  background:#e0e8ec!important; box-shadow:0 14px 60px #0f1f2945; overflow:auto!important;
}
.vertex-v3 #app#app[data-section="routes"] #routesDiscoverNav {
  position:sticky!important; top:-16px!important; z-index:3; margin:-16px -16px 12px!important;
  padding:12px!important; background:#e0e8ec!important; display:grid!important; grid-template-columns:auto 1fr auto!important; gap:8px;
}
.vertex-v3 #app #routesDiscoverNav strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; font-size:15px; }
.vertex-v3 #app #tracksListPlan { min-height:40px; padding:0 12px; border:1px solid #1d232524; border-radius:12px; background:#1d23250c; color:#223835; font:600 13px system-ui; }
@media(min-width:760px) {
  .vertex-v3 #app#app[data-section="routes"][data-routes-view="discover"] #communityView { width:440px!important; right:auto!important; left:20px!important; }
}
.vertex-v3 #app#app[data-layer-context] #routePlanner,.vertex-v3 #app#app[data-layer-context] #routeDetail { visibility:hidden!important; pointer-events:none!important; }
.vertex-v3 #app#app #routePlanner.sheet-collapsed .route-name-field { display:none; }
.vertex-v3 #app button:focus-visible,.vertex-v3 #app input:focus-visible { outline:2px solid #0076cc; outline-offset:3px; }
@media(min-width:760px) {
  .vertex-v3 #app .find-bar { display:flex!important; left:50%; right:auto; transform:translateX(-50%); width:440px; max-width:calc(100vw - 40px); }
  .vertex-v3 #app#app[data-finding] .topbar { left:50%!important; right:auto!important; transform:translateX(-50%); width:460px!important; }
  .vertex-v3 #app#app[data-finding] .find-bar { display:none!important; }
  .vertex-v3 #app#app #routeDetail { top:auto!important; left:20px!important; right:auto!important; bottom:20px!important; width:440px!important; }
}

.vertex-v3 #app#app[data-finding] .find-shortcuts.search-failed { display:grid!important; }

/* One area/search dock, four map controls, and contextual tools within thumb reach. */
.vertex-v3 #app#app .map-tools,.vertex-v3 #app#app .place-badge { display:none!important; }
.vertex-v3 #app#app .map-corner {
  display:flex!important; top:max(12px,env(safe-area-inset-top))!important; right:12px!important;
  left:auto!important; bottom:auto!important; width:44px!important; border-radius:22px!important; z-index:41!important;
}
.vertex-v3 #app#app .map-corner button { display:grid!important; width:44px!important; height:44px!important; flex:none; border:0!important; border-radius:0!important; background:none!important; }
.vertex-v3 #app#app .map-corner button+button { border-top:1px solid #1d232512!important; }
.vertex-v3 #app#app .map-corner #compassButton span { display:grid; place-items:center; }
.vertex-v3 #app#app .map-corner .ui-icon { width:20px; height:20px; }
.vertex-v3 #app#app[data-section="you"] .map-corner,.vertex-v3 #app#app:has(#weatherView:not([hidden])) .map-corner { display:none!important; }
.vertex-v3 #app#app .find-bar {
  flex-direction:column!important; gap:7px!important; padding:8px!important; box-sizing:border-box;
  border:1px solid #1d232524; border-radius:24px; background:#e0e8ecf2; box-shadow:0 10px 35px #0f1f2936;
}
.vertex-v3 #app .dock-area { display:flex; width:100%; border-radius:17px; background:#233b36; color:#dae4e9; }
.vertex-v3 #app#app .find-button { height:62px; padding:0 13px; border-radius:17px 0 0 17px; background:none; box-shadow:none; text-align:left; }
.vertex-v3 #app .dock-area-copy { display:flex; flex-direction:column; gap:3px; min-width:0; }
.vertex-v3 #app .dock-area-copy small { font-size:11px; color:#98abb2; font-weight:550; }
.vertex-v3 #app .dock-area-copy b { font-size:16px; font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vertex-v3 #app .dock-area-info { display:grid; place-items:center; flex:0 0 44px; margin:9px 0; padding:0; border:0; border-left:1px solid #dae4e924; background:none; color:#bed0d8; }
.vertex-v3 #app .dock-area-info .ui-icon { width:23px; height:23px; }
.vertex-v3 #app .find-area-info { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:42px; margin:-8px 0; padding:0 3px; border:0; background:none; color:#405d6b; font:13px system-ui; text-align:left; }
.vertex-v3 #app#app[data-finding]:has(#searchResults:not([hidden])) .find-area-info { display:none; }
.vertex-v3 #app#app .place-card { bottom:calc(var(--map-dock-height,130px) + 20px + env(safe-area-inset-bottom))!important; max-height:54dvh!important; }
.vertex-v3 #app#app .place-card.collapsed { display:none!important; }
.vertex-v3 #app#app .place-card-title { grid-template-columns:minmax(0,1fr) 36px 36px!important; }
.vertex-v3 #app .place-change-area { grid-column:2!important; grid-row:1!important; align-self:center; width:36px; height:36px; border:1px solid #1d232518; border-radius:50%; background:#1d232508; color:#233b36; font-size:23px; }
.vertex-v3 #app#app .place-card .favorite-place { grid-column:3!important; }
.vertex-v3 #app .map-context-stack {
  position:fixed; z-index:40; left:12px; right:12px; bottom:var(--map-surface-clearance,150px);
  display:flex; flex-direction:column; align-items:stretch; gap:8px;
  max-height:min(28dvh,max(44px,calc(100dvh - var(--map-surface-clearance,150px) - 210px)));
  overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; pointer-events:none;
}
.vertex-v3 #app#app #mapContextStack>* {
  position:relative!important; inset:auto!important; transform:none!important; margin:0!important;
  width:100%!important; max-width:none!important; box-sizing:border-box; flex:none; pointer-events:auto;
}
.vertex-v3 #app#app #mapContextStack .community-map-bar { padding:0!important; border:0!important; box-shadow:none!important; background:none!important; gap:4px; }
.vertex-v3 #app#app #mapContextStack .community-map-filters { overflow-x:auto!important; width:100%; scrollbar-width:none; gap:5px; }
.vertex-v3 #app#app #mapContextStack .community-map-filters button { min-height:40px!important; padding:0 10px!important; font-size:11px!important; }
.vertex-v3 #app#app #mapContextStack .community-map-filters .tracks-list-chip { margin-left:auto; }
.vertex-v3 #app#app #mapContextStack .avalanche-chip { min-height:46px!important; justify-content:flex-start; padding:6px 12px; border-radius:16px; }
.vertex-v3 #app#app #mapContextStack .map-route-chip { justify-content:flex-start; border-radius:16px; }
.vertex-v3 #app#app #mapContextStack .today-tour-pill { border-radius:16px; }
.vertex-v3 #app#app #mapContextStack .today-tour-name { flex:1; min-width:0; }
.vertex-v3 #app#app #mapContextStack .today-tour-name b { max-width:none; width:100%; font-size:14px; }
.vertex-v3 #app#app #mapContextStack .layer-mode-pill { justify-content:space-between; border-radius:16px; min-height:42px; }
.vertex-v3 #app#app #mapContextStack .sun-panel { padding:10px 12px!important; border-radius:16px!important; }
.vertex-v3 #app#app #mapContextStack .slope-legend,.vertex-v3 #app#app #mapContextStack .aspect-legend { left:auto!important; width:100%!important; }
.vertex-v3 #app#app #mapContextStack .wind-load-legend { min-height:40px; border-radius:16px; }
.vertex-v3 #app#app[data-finding] .map-context-stack,.vertex-v3 #app#app:has(#layerPanel:not([hidden]),#recordSheet:not([hidden]),#youSheet:not([hidden]),#weatherView:not([hidden]),#communityView:not([hidden]),#avalancheSheet:not([hidden]),#todayBriefSheet:not([hidden])) .map-context-stack { display:none!important; }
.vertex-v3 #app#app:has(#routePlanner:not([hidden]),#routeDetail:not([hidden]),#replayControls:not([hidden]),#activeSession:not([hidden])) .map-context-action,
.vertex-v3 #app#app[data-place-docked] .map-context-action { display:none!important; }
.vertex-v3 #app#app .status { top:auto!important; bottom:calc(var(--map-surface-clearance,150px) + var(--map-context-height,0px) + 10px)!important; max-width:calc(100vw - 32px); }
@media(min-width:760px) {
  .vertex-v3 #app .map-context-stack { left:50%; right:auto; transform:translateX(-50%); width:440px; }
  .vertex-v3 #app#app .place-card { left:50%!important; right:auto!important; transform:translateX(-50%); width:440px!important; }
}
.vertex-v3 #app#app .place-card .area-route-actions { display:none; }
.vertex-v3 #app#app .mountain-primary-actions #todayBriefButton { display:flex!important; width:100%!important; }
.vertex-v3 #app#app[data-layer-context="replay"] #replayControls { visibility:hidden!important; pointer-events:none!important; }

.vertex-v3 #app#app #plannerLayers,.vertex-v3 #app#app .route-detail-actions #routeDetailLayers { display:none!important; }
.vertex-v3 #app#app .place-card { transform:translateY(var(--place-drag-y,0px))!important; }
@media(min-width:760px) {
  .vertex-v3 #app#app .place-card { transform:translate(-50%,var(--place-drag-y,0px))!important; }
}
.vertex-v3 #app#app .status.hide { visibility:hidden; pointer-events:none; }
/* Saved routes and the account menu open as the same bottom workspace. */
.vertex-v3 #app#app #exploreSheet,.vertex-v3 #app#app #youSheet {
  position:fixed!important; inset:auto 12px calc(12px + env(safe-area-inset-bottom))!important;
  width:auto!important; max-width:460px!important; height:auto!important; max-height:66dvh!important;
  padding:16px!important; border:1px solid #1d232525!important; border-radius:24px!important;
  background:#e0e8ec!important; box-shadow:0 14px 60px #0f1f2945; overflow:auto!important;
}
.vertex-v3 #app#app[data-section="you"][data-you-view="home"] .map-corner { display:flex!important; }
.vertex-v3 #app#app:has(#exploreSheet:not([hidden]),#activitiesSheet:not([hidden]),#activityDetail:not([hidden]),#compareSheet:not([hidden])) .map-context-stack { display:none!important; }
.vertex-v3 #app#app[data-layer-context="record"] #recordSheet,
.vertex-v3 #app#app[data-layer-context="library"] #exploreSheet,
.vertex-v3 #app#app[data-layer-context="you"] #youSheet,
.vertex-v3 #app#app[data-layer-context="tours"] #communityView { visibility:hidden!important; pointer-events:none!important; }
@media(min-width:760px) {
  .vertex-v3 #app#app #exploreSheet,.vertex-v3 #app#app #youSheet { left:50%!important; right:auto!important; transform:translateX(-50%); width:440px!important; }
}
/* Overlapping tracks are chosen in the same thumb-reachable workspace. */
.vertex-v3 #app#app .community-route-chooser-popup {
  position:fixed!important; inset:auto 12px calc(var(--map-dock-height,130px) + 20px + env(safe-area-inset-bottom))!important;
  transform:none!important; max-width:none!important; width:auto!important; z-index:110!important;
}
.vertex-v3 #app .community-route-chooser-popup .maplibregl-popup-tip { display:none; }
.vertex-v3 #app#app .community-route-chooser-popup .maplibregl-popup-content { width:100%; box-sizing:border-box; padding:16px!important; border-radius:22px!important; max-height:38dvh; overflow:auto; }
.vertex-v3 #app .community-route-chooser>small { padding:0 44px 12px 0; font-size:13px; }
.vertex-v3 #app#app .community-route-chooser .route-chooser-close { position:absolute; top:10px; right:10px; width:40px; min-height:40px; display:grid; place-items:center; padding:0; border-radius:50%; font-size:24px; }
.vertex-v3 #app#app:has(.community-route-chooser-popup) .map-context-stack { display:none!important; }
@media(min-width:760px) {
  .vertex-v3 #app#app .community-route-chooser-popup { left:50%!important; right:auto!important; width:440px!important; transform:translateX(-50%)!important; }
}

.vertex-v3 #app#app .routes-library-toolbar { flex-wrap:nowrap; gap:6px; }
.vertex-v3 #app#app .routes-library-toolbar button { width:auto!important; min-height:44px; padding:0 10px!important; font-size:13px!important; }
.vertex-v3 #app#app .routes-library-toolbar #routesPlan { flex:1; min-width:0; }
.vertex-v3 #app#app .routes-library-toolbar #routeAddButton,.vertex-v3 #app#app .routes-library-toolbar #routeFilterButton { flex:none; background:#1d232508!important; color:#253d37!important; }
/* Area details align with the dock rather than becoming a separate floating card. */
.vertex-v3 #app#app #placeCard { left:12px!important; right:12px!important; width:auto!important; max-width:none!important; box-sizing:border-box; }
@media(min-width:760px) {
  .vertex-v3 #app#app #placeCard { left:50%!important; right:auto!important; width:440px!important; max-width:440px!important; }
}
.vertex-v3 #app#app:has(#youSheet:not([hidden]),#exploreSheet:not([hidden]),#activitiesSheet:not([hidden]),#activityDetail:not([hidden]),#routeDetail:not([hidden]),#communityView:not([hidden]),#weatherView:not([hidden])) #activeSession { display:none!important; }

/* Compact search and clearly labelled map actions. */
.vertex-v3 #app#app .map-corner { background:none!important; border:0!important; box-shadow:none!important; backdrop-filter:none!important; overflow:visible!important; gap:10px; }
.vertex-v3 #app#app .map-corner #youButton { border-radius:50%!important; background:#e0e8eced!important; border:1px solid #1d232525!important; box-shadow:0 4px 18px #0f1f292e; }
.vertex-v3 #app .map-navigation-oval { overflow:hidden; border:1px solid #1d232525; border-radius:23px; background:#e0e8eced; box-shadow:0 4px 18px #0f1f292e; backdrop-filter:blur(14px); }
.vertex-v3 #app#app .map-corner .map-navigation-oval button+button { border-top:1px solid #1d232514!important; }
.vertex-v3 #app#app .find-bar { padding:0!important; gap:0!important; border:0!important; border-radius:22px; background:none!important; box-shadow:none!important; }
.vertex-v3 #app .dock-area { position:relative; height:44px; background:none; color:#223833; border-radius:22px; }
.vertex-v3 #app .dock-area::before { content:''; position:absolute; inset:6.5px 0; border:1px solid #1d23252e; border-radius:18px; background:#e0e8ecf2; box-shadow:0 5px 20px #0f1f292e; pointer-events:none; }
.vertex-v3 #app#app .find-button { position:relative; height:44px; padding:0 14px; color:#223833!important; border-radius:22px 0 0 22px; }
.vertex-v3 #app .dock-area-copy small { display:none; }
.vertex-v3 #app .dock-area-copy b { font-size:14px; font-weight:600; }
.vertex-v3 #app .dock-area-info { position:relative; height:44px; margin:0; flex:0 0 44px; border:0; color:#3c5964; }
.vertex-v3 #app .dock-area-info::before { content:''; position:absolute; left:0; top:12px; bottom:12px; width:1px; background:#1d232520; }
.vertex-v3 #app .dock-area-info .ui-icon { width:20px; height:20px; }
.vertex-v3 #app .map-quick-actions { position:fixed; z-index:42; right:12px; bottom:calc(var(--map-dock-height,44px) + 24px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:10px; }
.vertex-v3 #app .map-quick-actions button { width:52px; height:52px; padding:3px 0 4px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; border:1px solid #1d23252c; border-radius:50%; background:#e0e8ecf2; box-shadow:0 6px 22px #0f1f292e; color:#223934; cursor:pointer; }
.vertex-v3 #app .map-quick-actions .ui-icon { width:23px; height:23px; }
.vertex-v3 #app .map-quick-actions button>span { font-size:25px; line-height:25px; color:#057dc7; }
.vertex-v3 #app .map-quick-actions b { font-size:10px; font-weight:650; line-height:12px; }
.vertex-v3 #app#app #recordFab { position:fixed; z-index:42; left:50%; transform:translateX(-50%); bottom:calc(var(--map-dock-height,44px) + 24px + env(safe-area-inset-bottom)); width:56px; min-width:0; height:56px; padding:6px 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border:1px solid #f87882; border-radius:50%; background:#cd3543; box-shadow:0 5px 22px #0f1f2936; }
.vertex-v3 #app#app #recordFab>span { width:13px; height:13px; background:#1d2325; }
.vertex-v3 #app#app #recordFab b { font-size:10px; line-height:12px; color:#1d2325; }
.vertex-v3 #app#app:not([data-section="explore"]) .home-map-actions,
.vertex-v3 #app#app[data-finding] .home-map-actions,
.vertex-v3 #app#app:has(#weatherView:not([hidden]),#communityView:not([hidden]),#routeDetail:not([hidden]),#routePlanner:not([hidden]),#replayControls:not([hidden]),#activeSession:not([hidden]),#recordSheet:not([hidden]),#layerPanel:not([hidden]),#avalancheSheet:not([hidden]),#todayBriefSheet:not([hidden]),#compareSheet:not([hidden]),#exploreSheet:not([hidden]),#youSheet:not([hidden]),#activitiesSheet:not([hidden]),#activityDetail:not([hidden]),.community-route-chooser-popup) .home-map-actions { display:none!important; }
.vertex-v3 #app[data-home-actions] .map-context-stack { right:80px; }
.vertex-v3 #app#app #mapContextStack .community-map-filters .tracks-list-chip { display:flex!important; align-items:center; justify-content:flex-start; gap:7px; width:100%!important; min-height:36px!important; height:auto!important; padding:7px 12px!important; border-radius:18px!important; font-size:12px!important; }
.vertex-v3 #app #communityMapBack>span { color:#4e6974!important; font-size:11px; }
.vertex-v3 #app #communityMapBack>b { padding:0!important; background:none!important; font-size:12px!important; font-weight:650; }
.vertex-v3 #app #communityMapBack>em { font:11px system-ui; color:#4e6974; }
.vertex-v3 #app #communityMapBack>i { margin-left:auto; font-style:normal; font-size:18px; }
.vertex-v3 #app .tour-type-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:12px 0 8px; }
.vertex-v3 #app .tour-type-heading b { color:#2b4840; font-size:13px; }
.vertex-v3 #app .tour-type-heading span { color:#57717d; font-size:11px; }
.vertex-v3 #app#app #alpsLibraryFilters { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; overflow:visible; margin-bottom:12px; }
.vertex-v3 #app#app #alpsLibraryFilters button { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:3px; height:auto; min-height:58px; padding:10px 12px!important; border-radius:13px; text-align:left; background:#1d232508; color:#243d35; border:1px solid #1d232520; }
.vertex-v3 #app #alpsLibraryFilters b { font-size:13px; font-weight:650; }
.vertex-v3 #app #alpsLibraryFilters small { font-size:10px; font-weight:400; line-height:1.4; color:#536f7a; }
.vertex-v3 #app#app #alpsLibraryFilters button.active { background:#c4d4dc; color:#223038; border-color:#8dcfff80; }
.vertex-v3 #app .tour-conditions-preview { flex:none; width:36px; height:36px; margin-right:10px; border-radius:10px; background:linear-gradient(135deg,#5fb97c 0 33%,#d3a531 33% 66%,#d55955 66%); }
.vertex-v3 #app #tracksTodayChip>span:nth-child(2)>small { display:block; max-width:240px; font-size:11px; line-height:1.4; color:#57727e; }
@media(min-width:760px) {
  .vertex-v3 #app[data-home-actions] .map-context-stack { right:auto; }
}
.vertex-v3 #app#app #alpsLibraryFilters button { height:auto!important; min-height:58px!important; border-radius:13px!important; background:#1d232508!important; color:#243d35!important; border:1px solid #1d232520!important; }
.vertex-v3 #app#app #alpsLibraryFilters button.active { background:#c4d4dc!important; color:#223038!important; border-color:#8dcfff80!important; }
.vertex-v3 #app .map-quick-actions b,.vertex-v3 #app#app #recordFab b { font-size:11px; }
.vertex-v3 #app #communityMapBack>em::after { content:' routes'; }
/* Attribution opens in the lower-left space rather than underneath recording controls. */
.vertex-v3 #app#app #map .maplibregl-ctrl-bottom-right { left:12px!important; right:auto!important; bottom:calc(var(--map-dock-height,44px) + 88px + env(safe-area-inset-bottom))!important; }
.vertex-v3 #app #map .maplibregl-ctrl-attrib { max-width:calc(100vw - 96px); }
.vertex-v3 #app#app:has(#map .maplibregl-compact-show) .map-context-stack { visibility:hidden!important; pointer-events:none!important; }
/* Area details provide their own contextual route actions; floating actions stay on the open map. */
.vertex-v3 #app#app:has(#placeCard:not(.collapsed)) .home-map-actions { display:none!important; }
.vertex-v3 #app#app .place-card .area-route-actions { display:flex!important; }
.vertex-v3 #app#app:has(.community-route-chooser-popup) .place-card { visibility:hidden!important; pointer-events:none!important; }

/* A larger search pill and a calm, labelled activity action. */
.vertex-v3 #app .dock-area { height:52px; }
.vertex-v3 #app .dock-area::before { inset:3px 0; border-radius:24px; }
.vertex-v3 #app#app .find-button,.vertex-v3 #app .dock-area-info { height:52px; }
.vertex-v3 #app .dock-area-copy b { font-size:15px; }
.vertex-v3 #app .dock-area-info[aria-expanded="true"] .ui-icon { transform:rotate(180deg); }
.vertex-v3 #app#app #recordFab { width:154px; height:46px; padding:0 18px; border-radius:23px; border:1px solid #f0d98b; background:#dfc775; gap:0; }
.vertex-v3 #app#app #recordFab b { color:#1f2a30; font-size:14px; font-weight:700; white-space:nowrap; }
.vertex-v3 #app#app #communityMapBar { display:none!important; }
/* The regional bulletin stays available without taking up the bottom map workspace. */
.vertex-v3 #app#app #avalancheChip { position:fixed!important; top:max(12px,env(safe-area-inset-top))!important; left:12px!important; right:auto!important; bottom:auto!important; width:44px!important; min-width:44px!important; height:44px!important; min-height:44px!important; padding:0!important; margin:0!important; transform:none!important; border:1px solid #1d232525!important; border-radius:50%!important; background:#e0e8eced!important; box-shadow:0 4px 18px #0f1f292e!important; color:#3a5460!important; display:grid!important; place-items:center; z-index:41!important; }
.vertex-v3 #app#app #avalancheChip>*:not(.avalanche-status-symbol,.avalanche-chip-level,.avalanche-chip-text) { display:none!important; }
.vertex-v3 #app .avalanche-status-symbol { display:grid; place-items:center; }
.vertex-v3 #app .avalanche-status-symbol .ui-icon { width:23px; height:23px; stroke-width:1.8; }
.vertex-v3 #app#app #avalancheChip[data-indicator="warning"] { color:#ba7e12!important; border-color:#f0bd6266!important; }
.vertex-v3 #app#app #avalancheChip[data-indicator="warning"][data-danger-level="4"],.vertex-v3 #app#app #avalancheChip[data-indicator="warning"][data-danger-level="5"] { color:#fa948b!important; border-color:#fa948b66!important; }
.vertex-v3 #app#app #avalancheChip[hidden],.vertex-v3 #app#app[data-section="you"] #avalancheChip,
.vertex-v3 #app#app:has(#avalancheSheet:not([hidden]),#layerPanel:not([hidden]),#weatherView:not([hidden]),#recordSheet:not([hidden])) #avalancheChip { display:none!important; }
.vertex-v3 #app#app:has(#avalancheSheet:not([hidden])) #routePlanner,
.vertex-v3 #app#app:has(#avalancheSheet:not([hidden])) #routeDetail,
.vertex-v3 #app#app:has(#avalancheSheet:not([hidden])) #replayControls,
.vertex-v3 #app#app:has(#avalancheSheet:not([hidden])) #placeCard,
.vertex-v3 #app#app:has(#avalancheSheet:not([hidden])) #communityView { visibility:hidden!important; pointer-events:none!important; }
.vertex-v3 #app#app:has(#avalancheSheet:not([hidden])) #activeSession { visibility:hidden!important; pointer-events:none!important; }

/* Start activity: one screen, activity preselected, Start is one tap away. */
.vertex-v3 #app#app .record-sheet .record-chooser { grid-template-columns:1fr 1fr; gap:8px; margin:2px 0 12px; }
.vertex-v3 #app#app .record-sheet .record-choice { min-height:64px; padding:10px 12px; border:1.5px solid #10202a14!important; background:#ffffff!important; color:#10202a!important; }
.vertex-v3 #app#app .record-sheet .record-choice[aria-pressed="true"] { border-color:#10202a!important; background:#10202a!important; color:#f7f9fa!important; }
.vertex-v3 #app#app .record-sheet .record-choice[aria-pressed="true"] small { color:#c3ced4!important; }
.vertex-v3 #app#app .record-sheet .record-choice small { font-size:11px; }
.vertex-v3 #app#app .record-sheet .tour-route-option b { font-size:13px; }
.vertex-v3 #app#app .record-sheet .tour-route-option small { font-size:11px; }
.vertex-v3 #app#app .record-sheet .tour-route-option.active { border-color:#10202a; background:#10202a0d; }
.vertex-v3 #app#app .record-actions .record-primary { height:54px!important; border:1px solid #f0d98b!important; border-radius:27px!important; background:#dfc775!important; color:#1f2a30!important; font-size:16px!important; font-weight:800!important; }
.vertex-v3 #app#app .record-sheet .record-explainer { margin:8px 0 0; font-size:11px; color:#5d6e76; order:9; }
/* No focus rings after a tap; keep them for keyboard users. */
.vertex-v3 #app :focus:not(:focus-visible) { outline:none; box-shadow:none; }

/* Avalanche badge: level and its name, readable without opening anything. */
.vertex-v3 #app#app #avalancheChip { width:auto!important; max-width:calc(100vw - 150px); padding:0 14px 0 8px!important; border-radius:22px!important; display:flex!important; align-items:center; gap:8px; }
.vertex-v3 #app .avalanche-chip-text { font-size:13px; font-weight:700; color:#10202a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vertex-v3 #app .avalanche-chip-level { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-size:15px; font-weight:800; color:#10202a; background:#ccff66; }
.vertex-v3 #app .avalanche-chip-level[data-level="2"] { background:#ffff00; }
.vertex-v3 #app .avalanche-chip-level[data-level="3"] { background:#ff9900; }
.vertex-v3 #app .avalanche-chip-level[data-level="4"] { background:#ff0000; color:#fff; }
.vertex-v3 #app .avalanche-chip-level[data-level="5"] { background:#1d1d1d; color:#fff; background-image:repeating-linear-gradient(45deg,#ff0000 0 4px,#1d1d1d 4px 8px); }
.vertex-v3 #app#app #avalancheChip .avalanche-status-symbol .ui-icon { width:20px; height:20px; }
.vertex-v3 #app#app #cancelRoute.armed { background:#b63834!important; border-color:#b63834!important; color:#fff!important; }
/* Legend pills: one ✕ to switch the layer off. */
.vertex-v3 #app .legend-close { flex:0 0 auto; width:26px; height:26px; margin-left:6px; border:0; border-radius:50%; background:#10202a0f; color:#3d5059; font-size:11px; line-height:26px; padding:0; cursor:pointer; }
/* Colour layers: radio marks (one at a time). */
.vertex-v3 #app .layer-row.layer-radio>i { font-size:0!important; width:20px!important; height:20px!important; min-width:20px; border-radius:50%!important; border:2px solid #9aa9b0!important; background:transparent!important; box-sizing:border-box; }
.vertex-v3 #app .layer-row.layer-radio[aria-pressed="true"]>i { border:6px solid #10202a!important; }
/* Track card source block: label, title and credit on their own lines. */
.vertex-v3 #app .route-community-info { display:grid!important; gap:3px; }
.vertex-v3 #app .route-community-info>small,.vertex-v3 #app .route-community-info>b,.vertex-v3 #app .route-community-info>span { display:block; }

/* Area sheet: Today · Tours · Weather tabs inside the place card. */
.vertex-v3 #app .area-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; padding:3px; margin:4px 0 10px; border-radius:12px; background:#10202a0d; }
.vertex-v3 #app .area-tabs button { height:34px; border:0; border-radius:9px; background:transparent; color:#5d6e76; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.vertex-v3 #app .area-tabs button[aria-selected="true"] { background:#ffffff; color:#10202a; box-shadow:0 1px 4px #0f1f2918; }
.vertex-v3 #app .area-tabs button span { font-weight:600; color:#7a8a91; }
.vertex-v3 #app .area-panel { max-height:min(46vh,420px); overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.vertex-v3 #app .area-panel .today-brief-body,.vertex-v3 #app #areaPanelToday>* { padding:0!important; }
.vertex-v3 #app .area-tour-filters { display:flex; gap:6px; margin:0 0 8px; }
.vertex-v3 #app .area-tour-filters button { height:30px; padding:0 12px; border:1px solid #10202a1a; border-radius:15px; background:#ffffff; color:#10202a; font:inherit; font-size:12px; font-weight:700; }
.vertex-v3 #app .area-tour-filters button[aria-pressed="true"] { background:#10202a; border-color:#10202a; color:#f7f9fa; }
.vertex-v3 #app .area-tour-list { display:grid; gap:6px; }
.vertex-v3 #app .area-tour { display:grid; grid-template-columns:4px minmax(0,1fr) auto; gap:10px; align-items:center; min-height:52px; padding:8px 12px 8px 8px; border:1px solid #10202a12; border-radius:12px; background:#ffffff; color:#10202a; text-align:left; font:inherit; cursor:pointer; }
.vertex-v3 #app .area-tour>i { align-self:stretch; border-radius:2px; background:#3b82f6; }
.vertex-v3 #app .area-tour[data-category="offpiste"]>i { background:#f97316; }
.vertex-v3 #app .area-tour>span { display:grid; gap:2px; min-width:0; }
.vertex-v3 #app .area-tour b { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vertex-v3 #app .area-tour small { font-size:12px; color:#5d6e76; }
.vertex-v3 #app .area-tour em { font-style:normal; color:#7a8a91; }
.vertex-v3 #app .area-more { margin:6px 2px 0; font-size:12px; color:#5d6e76; }
.vertex-v3 #app .area-panel-actions { display:flex; gap:8px; margin:10px 0 2px; }
.vertex-v3 #app .area-panel-actions button { flex:1; height:40px; border:1px solid #10202a1a; border-radius:12px; background:#ffffff; color:#10202a; font:inherit; font-size:13px; font-weight:700; }
.vertex-v3 #app .area-panel-actions button:first-child { background:#10202a; border-color:#10202a; color:#f7f9fa; }
.vertex-v3 #app .area-days { display:grid; gap:6px; }
.vertex-v3 #app .area-day { display:grid; grid-template-columns:52px 26px minmax(0,1fr) auto auto; gap:8px; align-items:center; min-height:44px; padding:6px 12px; border-radius:12px; background:#ffffff; border:1px solid #10202a12; }
.vertex-v3 #app .area-day b { font-size:13px; }
.vertex-v3 #app .area-day small { font-size:12px; color:#5d6e76; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vertex-v3 #app .area-day em { font-style:normal; font-size:12px; font-weight:700; color:#1f6feb; }
.vertex-v3 #app .area-day strong { font-size:14px; }
.vertex-v3 #app .area-day strong span { color:#7a8a91; font-weight:600; }
.vertex-v3 #app .area-day .weather-mini-icon svg { width:22px; height:22px; }
.vertex-v3 #app #areaTerrainSlot .stats { margin-top:10px; }
.vertex-v3 #app .tb-row.tb-tap { cursor:pointer; grid-template-columns:auto minmax(0,1fr) auto; }
.vertex-v3 #app .tb-row[data-kind="depth"]>div { flex:1; }
.vertex-v3 #app .tb-depths { display:grid; gap:9px; margin:8px 0 4px; }
.vertex-v3 #app .tb-depth { display:grid; grid-template-columns:58px minmax(0,1fr) auto; align-items:center; column-gap:10px; row-gap:2px; }
.vertex-v3 #app .tb-depth-h { font-size:12px!important; color:var(--ui-muted,#9aa3ad)!important; font-variant-numeric:tabular-nums; }
.vertex-v3 #app .tb-depth-bar { height:10px; border-radius:5px; background:#ffffff12; overflow:hidden; }
.vertex-v3 #app .tb-depth-bar>i { position:relative; display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,#c9d6e2,#f4f8fb); }
.vertex-v3 #app .tb-depth-soft { position:absolute; right:0; top:0; bottom:0; border-radius:0 5px 5px 0; background:var(--powder,#6cc4ff); }
.vertex-v3 #app .tb-depth b { font-size:15px!important; font-variant-numeric:tabular-nums; text-align:right; min-width:62px; }
.vertex-v3 #app .tb-depth[data-missing] b { font-size:12px!important; font-weight:600; color:var(--ui-muted,#9aa3ad)!important; }
.vertex-v3 #app .tb-depth-note { grid-column:2 / 4; font-size:11px!important; color:var(--ui-muted,#9aa3ad)!important; }
.vertex-v3 #app .tb-depth-note em { font-style:normal; font-weight:600; color:var(--powder,#6cc4ff); }
.vertex-v3 #app .tb-chevron { font-style:normal; color:#7a8a91; align-self:center; }

.vertex-v3 #app#app .area-route-actions[hidden],.vertex-v3 #app#app .mountain-primary-actions[hidden] { display:none!important; }

/* Map panel (proposal S5): no thumbnails, radio list for colour, switches for the rest. */
.vertex-v3 #app #layerPanel .layer-row { grid-template-columns:minmax(0,1fr) auto!important; min-height:52px; padding:8px 14px!important; }
.vertex-v3 #app #layerPanel .layer-row.layer-radio[aria-pressed="true"]>i { border-color:#1f6feb!important; }
.vertex-v3 #app #layerPanel .layer-row.layer-switch>i { font-size:0!important; position:relative; width:44px!important; height:26px!important; border-radius:13px!important; background:#c9d3d8!important; border:0!important; transition:background .15s; }
.vertex-v3 #app #layerPanel .layer-row.layer-switch>i::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0f1f2940; transition:transform .15s; }
.vertex-v3 #app #layerPanel .layer-row.layer-switch[aria-pressed="true"]>i { background:#22a45d!important; }
.vertex-v3 #app #layerPanel .layer-row.layer-switch[aria-pressed="true"]>i::after { transform:translateX(18px); }
.vertex-v3 #app #layerPanel .layer-section small { font-size:11px; letter-spacing:.06em; color:#5d6e76; }

/* ===== One bottom sheet =====
   The map shows four fixed things: the danger chip, the You/Map controls, the record button and one sheet.
   The sheet holds the active map colour and any context rows at the top, then either the area peek
   (name, short weather line, Tours here, Plan) or the area details with Today / Tours / Weather tabs.
   When another bottom surface (planner, route card, recording) is open, only the rows remain, above it. */
.vertex-v3 #app#app #mapSheet { position:fixed; z-index:41; left:0; right:0; bottom:0; display:flex; flex-direction:column; max-height:82dvh; box-sizing:border-box; pointer-events:none; }
.vertex-v3 #app#app #mapSheet[data-mode="home"] { padding-bottom:env(safe-area-inset-bottom); border-top:1px solid #1d232520; border-radius:22px 22px 0 0; background:#e0e8ec; box-shadow:0 -8px 30px #0f1f2926; pointer-events:auto; }
.vertex-v3 #app#app #mapSheet[data-mode="rows"] { left:12px; right:12px; bottom:var(--map-sheet-bottom,12px); overflow:hidden; border:1px solid #1d232520; border-radius:18px; background:#e0e8ec; box-shadow:0 8px 26px #0f1f292e; pointer-events:auto; }
.vertex-v3 #app#app #mapSheet[data-mode="empty"] { background:none; border:0; box-shadow:none; }
@media(min-width:760px) {
  .vertex-v3 #app#app #mapSheet,.vertex-v3 #app#app #mapSheet[data-mode="rows"] { left:50%; right:auto; width:440px; transform:translateX(-50%); }
  .vertex-v3 #app#app #mapSheet[data-mode="home"] { bottom:12px; border:1px solid #1d232520; border-radius:22px; overflow:hidden; }
}
/* Children lose their own card look: one surface, rows divided by hairlines. */
.vertex-v3 #app#app #mapSheet #mapContextStack { position:relative!important; inset:auto!important; transform:none!important; width:auto!important; max-height:none!important; overflow:visible!important; gap:0!important; z-index:auto!important; pointer-events:auto; flex:none; }
.vertex-v3 #app#app #mapSheet #mapContextStack>* { min-height:48px; padding:8px 16px!important; border:0!important; border-bottom:1px solid #1d232516!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; backdrop-filter:none!important; }
.vertex-v3 #app#app #mapSheet[data-mode="rows"] #mapContextStack>*:last-child { border-bottom:0!important; }
.vertex-v3 #app#app #mapSheet #placeCard { position:relative!important; inset:auto!important; left:auto!important; right:auto!important; bottom:auto!important; width:auto!important; max-width:none!important; max-height:66dvh!important; transform:none!important; margin:0!important; border:0!important; border-radius:0!important; box-shadow:none!important; background:transparent!important; backdrop-filter:none!important; z-index:auto!important; flex:1 1 auto; min-height:0; overflow-y:auto!important; overscroll-behavior:contain; }
.vertex-v3 #app#app #mapSheet #placeCard .place-card-content { max-height:none!important; overflow:visible!important; }
.vertex-v3 #app#app #mapSheet #findBar { position:relative!important; inset:auto!important; left:auto!important; right:auto!important; bottom:auto!important; transform:none!important; width:auto!important; max-width:none!important; flex-direction:column!important; align-items:stretch!important; gap:0!important; padding:0 16px 12px!important; pointer-events:auto!important; z-index:auto!important; }
.vertex-v3 #app#app #mapSheet:has(#placeCard:not(.collapsed)) #findBar { display:none!important; }
/* Area peek: grabber, name and today's line, search, then Tours here and Plan. */
.vertex-v3 #app#app #mapSheet .sheet-grab { align-self:center; width:64px; height:20px; padding:0; border:0; background:none; display:grid; place-items:center; cursor:pointer; }
.vertex-v3 #app#app #mapSheet .sheet-grab span { width:38px; height:4px; border-radius:2px; background:#1d232533; }
.vertex-v3 #app#app #mapSheet .dock-area { display:flex; align-items:center; gap:10px; height:auto!important; min-height:52px; background:none!important; border-radius:0!important; }
.vertex-v3 #app#app #mapSheet .dock-area::before { display:none!important; }
.vertex-v3 #app#app #mapSheet .dock-title { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:0; border:0; background:none; color:#1d2325; text-align:left; cursor:pointer; }
.vertex-v3 #app#app #mapSheet .dock-title b { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:22px; font-weight:700; letter-spacing:-.01em; }
.vertex-v3 #app#app #mapSheet .dock-title small { font-size:13px; color:#4f6670; }
.vertex-v3 #app#app #mapSheet .dock-title small:empty { display:none; }
.vertex-v3 #app#app #mapSheet #findButton { flex:none; width:42px!important; height:42px!important; padding:0!important; display:grid; place-items:center; border:1px solid #1d232518!important; border-radius:50%!important; background:#1d232508!important; color:#233b36!important; }
.vertex-v3 #app#app #mapSheet #findButton .ui-icon { width:20px; height:20px; }
.vertex-v3 #app#app #mapSheet #mapQuickActions { position:static!important; inset:auto!important; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.vertex-v3 #app#app #mapSheet #mapQuickActions button { width:auto!important; height:48px!important; padding:0 14px!important; flex-direction:row!important; gap:8px!important; border-radius:14px!important; box-shadow:none!important; font-size:15px; }
.vertex-v3 #app#app #mapSheet #mapQuickActions b { font-size:15px!important; line-height:1!important; font-weight:650; }
.vertex-v3 #app#app #mapSheet #dockTours { background:#1d2325!important; border:1px solid #1d2325!important; color:#fff!important; }
.vertex-v3 #app#app #mapSheet #dockPlan { background:#1d23250d!important; border:1px solid #1d232518!important; color:#1d2325!important; }
.vertex-v3 #app#app #mapSheet #dockPlan>span { font-size:20px!important; line-height:1!important; color:inherit!important; }
/* The record button and map attribution sit just above the sheet. */
.vertex-v3 #app#app #recordFab#recordFab { left:auto!important; right:12px!important; transform:none!important; bottom:calc(var(--map-sheet-h,150px) + 12px)!important; }
.vertex-v3 #app#app #map .maplibregl-ctrl-bottom-right { bottom:calc(var(--map-sheet-h,150px) + 12px)!important; }
@media(min-width:760px) {
  .vertex-v3 #app#app #recordFab#recordFab { right:auto!important; left:50%!important; transform:translateX(150px)!important; bottom:calc(var(--map-sheet-h,150px) + 12px)!important; }
}
/* Quick picks only set layers; no separate "mode" pill appears on the map. */
.vertex-v3 #app#app #layerModePill { display:none!important; }
/* Weather tab: the full forecast, laid out for the sheet. */
.vertex-v3 #app#app .area-weather { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; min-width:0; }
.vertex-v3 #app#app .area-weather>* { min-width:0; max-width:100%; box-sizing:border-box; }
.vertex-v3 #app#app .area-weather>* { margin:0!important; }
.vertex-v3 #app#app .area-weather .weather-overview .weather-vertex-mark { display:none; }
.vertex-v3 #app#app .area-weather .weather-hours { overflow-x:auto; scrollbar-width:none; }
.vertex-v3 #app#app .area-weather .weather-source { font-size:11px; }
.vertex-v3 #app#app #areaPanelWeather .area-panel-actions { margin-top:12px; }
.vertex-v3 #app#app #weatherTabs { display:none!important; }
.vertex-v3 #app[data-section] .area-weather .weather-hour-card{min-height:0!important;padding:9px 6px!important;gap:3px!important;justify-items:center!important;align-content:start!important}
.vertex-v3 #app[data-section] .area-weather .weather-hour-card>strong{display:none!important}
.vertex-v3 #app[data-section] .area-weather .weather-hour-card .weather-mini-icon{margin:2px 0!important}
.vertex-v3 #app[data-section] .area-weather .weather-hour-card>span:not(.weather-mini-icon),.vertex-v3 #app[data-section] .area-weather .weather-hour-card>em{font-size:10px!important;line-height:1.25!important;color:#687674!important;margin:0!important}
@media(max-width:759px){
  .vertex-v3 #app[data-section] .area-weather .weather-hour-card{width:76px!important;min-width:76px!important;flex:0 0 76px!important}
  .vertex-v3 #app[data-section] .area-weather .weather-hour-card>em{white-space:normal!important;text-align:center!important}
  .vertex-v3 #app[data-section] .area-weather .weather-days{gap:6px!important}
  .vertex-v3 #app[data-section] .area-weather .weather-days article{display:grid!important;grid-template-columns:auto auto minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;align-items:center!important;column-gap:12px!important;row-gap:4px!important;min-height:0!important;padding:10px 12px!important}
  .vertex-v3 #app[data-section] .area-weather .weather-days article>div{grid-column:1/4!important;grid-row:1!important;display:flex!important;align-items:baseline!important;gap:8px!important;min-width:0!important}
  .vertex-v3 #app[data-section] .area-weather .weather-days article>div b{font-size:14px!important;display:inline-flex!important;align-items:center!important;gap:7px!important}
  .vertex-v3 #app[data-section] .area-weather .weather-days article>div small{font-size:10px!important;color:#768581!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .vertex-v3 #app[data-section] .area-weather .weather-days article>strong{grid-column:4!important;grid-row:1/3!important;font-size:18px!important;text-align:right!important;white-space:nowrap!important}
  .vertex-v3 #app[data-section] .area-weather .weather-days article>em,.vertex-v3 #app[data-section] .area-weather .weather-days article>span,.vertex-v3 #app[data-section] .area-weather .weather-days article>small{display:block!important;grid-row:2!important;margin:0!important;font-size:10.5px!important;font-style:normal!important;color:#5d6c69!important;white-space:nowrap!important;text-align:left!important}
  .vertex-v3 #app[data-section] .area-weather .weather-days article>em{grid-column:1!important}
  .vertex-v3 #app[data-section] .area-weather .weather-days article>span{grid-column:2!important}
  .vertex-v3 #app[data-section] .area-weather .weather-days article>span:before{content:"Wind ";color:#82908c}
  .vertex-v3 #app[data-section] .area-weather .weather-days article>small{grid-column:3!important}
  .vertex-v3 #app[data-section] .area-weather .weather-days article>small:after{content:" chance";color:#82908c}
  /* A solid sticky header and tab row: nothing shows through between them. */
}/* Every on/off control is the same switch: the Map panel's 44×26 track, white knob, green when on. */
.vertex-v3 #app#app .settings-toggle input[type="checkbox"] { appearance:none; -webkit-appearance:none; flex:none; position:relative; width:44px!important; height:26px!important; margin:0; border:0; border-radius:13px; background:#c9d3d8; cursor:pointer; transition:background .15s; }
.vertex-v3 #app#app .settings-toggle input[type="checkbox"]::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0f1f2940; transition:transform .15s; }
.vertex-v3 #app#app .settings-toggle input[type="checkbox"]:checked { background:#22a45d; }
.vertex-v3 #app#app .settings-toggle input[type="checkbox"]:checked::after { transform:translateX(18px); }
.vertex-v3 #app#app .settings-toggle input[type="checkbox"]:focus-visible { outline:2px solid #1f6feb; outline-offset:2px; }
.vertex-v3 #app#app .settings-toggle { display:flex!important; align-items:center!important; justify-content:space-between!important; gap:12px!important; }
.vertex-v3 #app#app .settings-toggle[hidden] { display:none!important; }
/* A lower bottom sheet: tighter peek, rows and buttons. */
.vertex-v3 #app#app #mapSheet .sheet-grab { height:14px; }
.vertex-v3 #app#app #mapSheet #findBar { padding:0 14px 10px!important; }
.vertex-v3 #app#app #mapSheet .dock-area { min-height:44px; }
.vertex-v3 #app#app #mapSheet .dock-title { gap:1px; }
.vertex-v3 #app#app #mapSheet .dock-title b { font-size:19px; }
.vertex-v3 #app#app #mapSheet .dock-title small { font-size:12px; }
.vertex-v3 #app#app #mapSheet #findButton { width:38px!important; height:38px!important; }
.vertex-v3 #app#app #mapSheet #mapQuickActions { gap:8px; margin-top:8px; }
.vertex-v3 #app#app #mapSheet #mapQuickActions button { height:42px!important; border-radius:12px!important; }
.vertex-v3 #app#app #mapSheet #mapQuickActions b { font-size:14px!important; }
.vertex-v3 #app#app #mapSheet #mapContextStack>* { min-height:40px; padding:6px 14px!important; }
.vertex-v3 #app#app #mapSheet #placeCard { max-height:58dvh!important; }
/* Minimised sheet is one row: name and today's line, then Tours (with count), Plan and Search as compact buttons. */
.vertex-v3 #app#app #mapSheet #findBar { display:grid!important; grid-template-columns:minmax(0,1fr) auto auto; align-items:center!important; column-gap:8px!important; padding:0 12px 10px!important; }
.vertex-v3 #app#app #mapSheet #findBar>.sheet-grab { grid-column:1/-1; justify-self:center; }
.vertex-v3 #app#app #mapSheet #findBar>.dock-area,.vertex-v3 #app#app #mapSheet #findBar>#mapQuickActions { display:contents!important; }
.vertex-v3 #app#app #mapSheet #dockTitle { grid-column:1; order:1; min-height:40px; justify-content:center; }
.vertex-v3 #app#app #mapSheet #dockTours { order:2; }
.vertex-v3 #app#app #mapSheet #dockPlan { order:3; }
.vertex-v3 #app#app #mapSheet #findButton { order:4; }
.vertex-v3 #app#app #mapSheet .dock-title b { font-size:17px; }
.vertex-v3 #app#app #mapSheet #mapQuickActions button { height:38px!important; min-width:38px; padding:0 11px!important; gap:5px!important; border-radius:19px!important; }
.vertex-v3 #app#app #mapSheet #mapQuickActions button .ui-icon { width:18px; height:18px; }
.vertex-v3 #app#app #mapSheet #dockTours b { font-size:14px!important; }
.vertex-v3 #app#app #mapSheet #dockTours b span { margin-left:5px; font-weight:500; opacity:.75; }
.vertex-v3 #app#app #mapSheet #dockTours b span:empty { display:none; }
.vertex-v3 #app#app #mapSheet #dockPlan { width:38px!important; padding:0!important; justify-content:center; }
.vertex-v3 #app#app #mapSheet #dockPlan b { display:none!important; }
.vertex-v3 #app#app #mapSheet .dock-title small { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Difficulty in piste colours: green Easy, blue Medium, red Hard, black Expert, orange off-piste, grey ungraded. */
.vertex-v3 #app .grade-dot { display:inline-block; flex:none; width:10px; height:10px; margin-right:6px; border-radius:50%; background:#8a9aa0; vertical-align:-1px; }
.vertex-v3 #app .grade-dot[data-level="1"] { background:#2e9e5b; }
.vertex-v3 #app .grade-dot[data-level="2"] { background:#2f6fd6; }
.vertex-v3 #app .grade-dot[data-level="3"] { background:#d93f3f; }
.vertex-v3 #app .grade-dot[data-level="4"] { background:#1d2325; border-radius:2px; transform:rotate(45deg) scale(.9); }
.vertex-v3 #app .grade-dot[data-level="offpiste"] { background:#f08a24; }
.vertex-v3 #app .area-tour-filters { overflow-x:auto; scrollbar-width:none; margin-left:-2px; padding:0 2px; }
.vertex-v3 #app .area-tour-filters::-webkit-scrollbar { display:none; }
.vertex-v3 #app .area-tour-filters button { flex:none; display:inline-flex; align-items:center; padding:0 11px; }
.vertex-v3 #app .area-tour-filters button .grade-dot { width:8px; height:8px; margin-right:5px; }
.vertex-v3 #app .area-tour>i.grade-dot { align-self:center; width:12px; height:12px; margin:0; }
.vertex-v3 #app .area-tour { grid-template-columns:12px minmax(0,1fr) auto; }
.vertex-v3 #app .area-tour>i.grade-dot[data-level="0"] { background:#8a9aa0; }
/* "Max 30°" switch under the kind-of-day row. */
.vertex-v3 #app .tour-low-angle { margin:0 0 10px; padding:8px 2px; gap:12px; }
.vertex-v3 #app .tour-low-angle span { display:grid; gap:1px; min-width:0; }
.vertex-v3 #app .tour-low-angle b { font-size:13px; color:#10202a; }
.vertex-v3 #app .tour-low-angle small { font-size:11px; color:#5d6e76; }
.vertex-v3 #app .tour-low-angle input[type="checkbox"] { appearance:none; -webkit-appearance:none; flex:none; position:relative; width:44px; height:26px; margin:0; border:0; border-radius:13px; background:#c9d3d8; cursor:pointer; transition:background .15s; }
.vertex-v3 #app .tour-low-angle input[type="checkbox"]::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0f1f2940; transition:transform .15s; }
.vertex-v3 #app .tour-low-angle input[type="checkbox"]:checked { background:#22a45d; }
.vertex-v3 #app .tour-low-angle input[type="checkbox"]:checked::after { transform:translateX(18px); }
.vertex-v3 #app .area-tour>i.grade-dot { border-radius:50%; } .vertex-v3 #app .area-tour>i.grade-dot[data-level="4"] { border-radius:2px; }
/* One sheet at a time: the area peek and details hide while a track card, planner, recording or other sheet is open. */
.vertex-v3 #app#app #mapSheet[data-covered="true"] #findBar,.vertex-v3 #app#app #mapSheet[data-covered="true"] #placeCard { display:none!important; }
/* Retired from the Map panel: the second track colouring and the quick picks. */
.vertex-v3 #app#app #tracksTodayChip,.vertex-v3 #app#app #layerPresets,.vertex-v3 #app#app .layer-section:has(+#layerPresets) { display:none!important; }
.vertex-v3 #app .powder-raster-map{position:relative}
.vertex-v3 #app .powder-raster-map[data-empty="true"]::after{content:attr(data-empty-text);position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);padding:8px 14px;border-radius:999px;background:#ffffffee;color:#1d2325;font-size:13px;font-weight:700;white-space:nowrap;box-shadow:0 4px 14px #0f1f2922;pointer-events:none}
/* Minimised sheet: the place, favourite and search only. Planning a route lives with the map buttons, top right. */
.vertex-v3 #app#app #mapSheet #findBar>.dock-area { display:contents!important; }
.vertex-v3 #app#app #mapSheet #dockFavorite { order:2; }
.vertex-v3 #app#app #mapSheet #findButton { order:3; }
.vertex-v3 #app#app #mapSheet #dockFavorite,.vertex-v3 #app#app #mapSheet #findButton { width:40px!important; height:40px!important; min-width:40px; display:grid!important; place-items:center; padding:0!important; border:1px solid #1d232518!important; border-radius:50%!important; background:#1d23250d!important; color:#1d2325!important; cursor:pointer; }
.vertex-v3 #app#app #mapSheet #dockFavorite .ui-icon,.vertex-v3 #app#app #mapSheet #findButton .ui-icon { width:19px; height:19px; }
.vertex-v3 #app#app #mapSheet #dockFavorite.active { color:#e0a100!important; }
.vertex-v3 #app#app #mapSheet #dockFavorite.active .ui-icon { fill:currentColor; }
.vertex-v3 #app#app .map-corner .map-plan-oval #dockPlan { position:relative; color:#1d2325; }
.vertex-v3 #app#app .map-corner .map-plan-oval #dockPlan .ui-icon { width:22px; height:22px; stroke-width:2.2; }
.vertex-v3 #app#app .map-corner .map-plan-oval #dockPlan.resume::after { content:""; position:absolute; top:9px; right:9px; width:8px; height:8px; border-radius:50%; background:#2f6fd6; }
.vertex-v3 #app#app:has(#routePlanner:not([hidden])) .map-plan-oval { display:none!important; }
.vertex-v3 #app#app .map-corner .map-tours-oval #cornerTours { color:#1d2325; }
.vertex-v3 #app#app .map-corner .map-tours-oval #cornerTours[aria-pressed="true"] { background:#10202a!important; color:#f7f9fa; }
.vertex-v3 #app#app .map-corner .map-names-oval #cornerNames { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; color:#1d2325; }
.vertex-v3 #app#app .map-corner .map-names-oval #cornerNames .ui-icon { width:17px; height:17px; }
.vertex-v3 #app#app .map-corner .map-names-oval #cornerNames b { font:800 9px/1 system-ui,sans-serif; letter-spacing:.04em; }
.vertex-v3 #app#app .map-corner .map-names-oval #cornerNames[aria-pressed="true"] { background:#3b82f6!important; color:#fff; }
/* Cards are curtains that never cover the map buttons, and sit as low as they can. */
@media (max-width:759px){
  .vertex-v3 #app#app #layerPanel:not(.sheet-collapsed),.vertex-v3 #app#app #routeDetail:not(.sheet-collapsed),.vertex-v3 #app#app #recordSheet:not(.sheet-collapsed),.vertex-v3 #app#app #youSheet:not(.sheet-collapsed),.vertex-v3 #app#app #activitiesSheet:not(.sheet-collapsed),.vertex-v3 #app#app #activityDetail:not(.sheet-collapsed),.vertex-v3 #app#app #compareSheet:not(.sheet-collapsed),.vertex-v3 #app#app #exploreSheet:not(.sheet-collapsed),.vertex-v3 #app#app #avalancheSheet:not(.sheet-collapsed),.vertex-v3 #app#app #todayBriefSheet:not(.sheet-collapsed),.vertex-v3 #app#app #mapSheet #placeCard { max-height:calc(100dvh - var(--corner-clear,0px) - 14px)!important; }
  /* The tour card opens low, so the chosen tour stays in view; the profile and details scroll inside it. */
  .vertex-v3 #app#app #routeDetail:not(.sheet-collapsed) { max-height:min(44dvh,calc(100dvh - var(--corner-clear,0px) - 14px))!important; }
  .vertex-v3 #app#app #routeDetail .route-detail-head { margin:0 0 6px!important; }
  .vertex-v3 #app#app #routeDetail .route-detail-actions { margin-top:8px!important; padding-top:8px; }
  .vertex-v3 #app#app #routeDetail .route-detail-actions button { min-height:40px!important; height:40px!important; }
}
/* A lowered curtain shows only its grabber and title row, whatever else the card normally shows. */
.vertex-v3 #app#app #layerPanel.sheet-collapsed>*:not(.sheet-grabber):not(.panel-head):not(.activities-head):not(.activity-detail-head):not(.route-detail-head):not(.record-head):not(.route-planner-copy),.vertex-v3 #app#app #routeDetail.sheet-collapsed>*:not(.sheet-grabber):not(.panel-head):not(.activities-head):not(.activity-detail-head):not(.route-detail-head):not(.record-head):not(.route-planner-copy),.vertex-v3 #app#app #recordSheet.sheet-collapsed>*:not(.sheet-grabber):not(.panel-head):not(.activities-head):not(.activity-detail-head):not(.route-detail-head):not(.record-head):not(.route-planner-copy),.vertex-v3 #app#app #youSheet.sheet-collapsed>*:not(.sheet-grabber):not(.panel-head):not(.activities-head):not(.activity-detail-head):not(.route-detail-head):not(.record-head):not(.route-planner-copy),.vertex-v3 #app#app #activitiesSheet.sheet-collapsed>*:not(.sheet-grabber):not(.panel-head):not(.activities-head):not(.activity-detail-head):not(.route-detail-head):not(.record-head):not(.route-planner-copy),.vertex-v3 #app#app #activityDetail.sheet-collapsed>*:not(.sheet-grabber):not(.panel-head):not(.activities-head):not(.activity-detail-head):not(.route-detail-head):not(.record-head):not(.route-planner-copy),.vertex-v3 #app#app #compareSheet.sheet-collapsed>*:not(.sheet-grabber):not(.panel-head):not(.activities-head):not(.activity-detail-head):not(.route-detail-head):not(.record-head):not(.route-planner-copy),.vertex-v3 #app#app #exploreSheet.sheet-collapsed>*:not(.sheet-grabber):not(.panel-head):not(.activities-head):not(.activity-detail-head):not(.route-detail-head):not(.record-head):not(.route-planner-copy),.vertex-v3 #app#app #avalancheSheet.sheet-collapsed>*:not(.sheet-grabber):not(.panel-head):not(.activities-head):not(.activity-detail-head):not(.route-detail-head):not(.record-head):not(.route-planner-copy),.vertex-v3 #app#app #todayBriefSheet.sheet-collapsed>*:not(.sheet-grabber):not(.panel-head):not(.activities-head):not(.activity-detail-head):not(.route-detail-head):not(.record-head):not(.route-planner-copy) { display:none!important; }
.vertex-v3 #app#app #layerPanel.sheet-collapsed,.vertex-v3 #app#app #routeDetail.sheet-collapsed,.vertex-v3 #app#app #recordSheet.sheet-collapsed,.vertex-v3 #app#app #youSheet.sheet-collapsed,.vertex-v3 #app#app #activitiesSheet.sheet-collapsed,.vertex-v3 #app#app #activityDetail.sheet-collapsed,.vertex-v3 #app#app #compareSheet.sheet-collapsed,.vertex-v3 #app#app #exploreSheet.sheet-collapsed,.vertex-v3 #app#app #avalancheSheet.sheet-collapsed,.vertex-v3 #app#app #todayBriefSheet.sheet-collapsed { max-height:84px!important; overflow:hidden!important; }
/* The working-mode curtains show their grabber, so it is plain they can be pulled down and up. */
.vertex-v3 #app#app #recordSheet>.sheet-grabber,.vertex-v3 #app#app #routePlanner>.sheet-grabber { display:block!important; flex:none; width:100%!important; height:20px!important; margin:-8px 0 2px!important; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; }
/* The area sheet fits the screen: it never grows past the map buttons, and its content scrolls inside it,
   so the last row is always reachable on small phones and above the iPhone home indicator. */
@media (max-width:759px){
  .vertex-v3 #app#app #mapSheet { max-height:calc(100dvh - var(--corner-clear,0px) - 4px)!important; }
  .vertex-v3 #app#app #mapSheet #placeCard { flex:0 1 auto!important; min-height:0!important; overflow-y:auto!important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding-bottom:12px!important; }
  .vertex-v3 #app#app #mapSheet #mapContextStack,.vertex-v3 #app#app #mapSheet #findBar { flex:none; }
}
.vertex-v3 #app#app .area-weather-map-row { margin:0 0 10px!important; }
/* One card style on phones: every card rises from the bottom edge, full width, with the same surface,
   rounded top corners and room for the iPhone home indicator. Pages opened from You fill the screen on a solid surface. */
@media (max-width:759px){
  .vertex-v3 #app#app #findSheet,.vertex-v3 #app#app #layerPanel,.vertex-v3 #app#app #recordSheet,.vertex-v3 #app#app #routePlanner,.vertex-v3 #app#app #youSheet,.vertex-v3 #app#app #exploreSheet,.vertex-v3 #app#app #avalancheSheet,.vertex-v3 #app#app #todayBriefSheet,.vertex-v3 #app#app #routeDetail { left:0!important; right:0!important; bottom:0!important; width:auto!important; max-width:none!important; margin:0!important; border:1px solid #1d232520!important; border-bottom:0!important; border-radius:22px 22px 0 0!important; background:#e0e8ec!important; box-shadow:0 -8px 30px #0f1f2926!important; padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))!important; }
  .vertex-v3 #app#app #activitiesSheet,.vertex-v3 #app#app #compareSheet,.vertex-v3 #app#app #activityDetail,.vertex-v3 #app#app #communityView,.vertex-v3 #app#app #settingsSheet,.vertex-v3 #app#app #profileEditorSheet { background:#e9eef2!important; backdrop-filter:none!important; }
}
/* Header buttons on the area sheet are the same round buttons. */
.vertex-v3 #app#app #placeCard #favoritePlace,.vertex-v3 #app#app #placeCard #placeChangeArea { width:40px!important; height:40px!important; min-width:40px; display:grid!important; place-items:center; padding:0!important; border:1px solid #1d232518!important; border-radius:50%!important; background:#1d23250d!important; color:#1d2325!important; font-size:18px; line-height:1; }
.vertex-v3 #app#app #placeCard #favoritePlace.active { color:#e0a100!important; }
/* Sticky card headers share the card colour, so no header reads as a separate strip. */
@media (max-width:759px){
  .vertex-v3 #app#app[data-section] .avalanche-sheet .activities-head,
  .vertex-v3 #app#app[data-section] .route-detail.mobile-map-preview .route-detail-head { background:#e0e8ec!important; }
}

/* ---------- Desktop: one sidebar on the left, the map fills the rest ----------
   Wide screens get a fixed panel with the brand and the main menu; every card that rises from the bottom
   on a phone opens in this panel instead, one at a time, with the same buttons and colours. Recording is
   phone-only, so its entry points are hidden here. */
.vertex-v3 #app .desk-side { display:none; }
@media (min-width:900px){
  /* A slim floating menu strip on the left, and every card floats next to it (Bjorn 2026-10-16, proposal B). */
  .vertex-v3 #app#app { --desk-g:16px; --desk-rail:76px; --desk-card:340px; --desk-card-left:calc(2 * var(--desk-g) + var(--desk-rail) - 6px); --desk-w:calc(var(--desk-card-left) + var(--desk-card)); }
  .vertex-v3 #app#app .desk-side { display:flex; flex-direction:column; align-items:center; gap:14px; position:fixed; z-index:40; left:var(--desk-g); top:var(--desk-g); bottom:var(--desk-g); width:var(--desk-rail); padding:14px 0; border:1px solid #ffffff14; border-radius:22px; background:#e0e8ec; box-shadow:0 18px 40px #0006; }
  .vertex-v3 #app#app .desk-brand { flex:none; width:52px; height:24px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='110 20 345 135'%3E%3Cg fill='%23fff'%3E%3Cpath d='M118 150 270 28l72 82 28-24 78 80-91-58-25 20-63-63-94 105z'/%3E%3Cpath d='m214 145 54-57 46 63-48-29z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; }
  .vertex-v3 #app#app .desk-brand img,.vertex-v3 #app#app .desk-brand p { display:none; }
  .vertex-v3 #app#app .desk-nav { display:flex; flex-direction:column; gap:6px; width:64px; margin:0; padding:0; background:none!important; }
  .vertex-v3 #app#app .desk-nav button { height:52px; padding:0 4px; border:0; border-radius:14px; background:transparent; color:#5d6e76; font:inherit; font-size:11px; font-weight:700; line-height:1.15; cursor:pointer; }
  .vertex-v3 #app#app .desk-nav button[aria-selected="true"] { background:#fff; color:#10202a; box-shadow:0 1px 4px #0f1f2918; }
  .vertex-v3 #app#app .desk-nav button:hover:not([aria-selected="true"]) { color:#10202a; }
  .vertex-v3 #app#app .app-brand-mark { display:none!important; }

  /* The map fills the window; the strip and the card float on it. */
  .vertex-v3 #app#app #map { left:0!important; }

  /* Every card floats next to the strip and is only as tall as its content. */
  .vertex-v3 #app#app #findSheet,.vertex-v3 #app#app #routeDetail,.vertex-v3 #app#app #routePlanner,.vertex-v3 #app#app #youSheet,
  .vertex-v3 #app#app #exploreSheet,.vertex-v3 #app#app #activitiesSheet,.vertex-v3 #app#app #activityDetail,.vertex-v3 #app#app #compareSheet,
  .vertex-v3 #app#app #avalancheSheet,.vertex-v3 #app#app #todayBriefSheet,.vertex-v3 #app#app #communityView,
  .vertex-v3 #app#app #mapSheet[data-mode="home"] {
    position:fixed!important; z-index:41!important; left:var(--desk-card-left)!important; right:auto!important; top:var(--desk-g)!important; bottom:auto!important;
    width:var(--desk-card)!important; max-width:none!important; height:auto!important; max-height:calc(100dvh - 2 * var(--desk-g))!important; margin:0!important; transform:none!important;
    border:1px solid #ffffff14!important; border-radius:22px!important; background:#e0e8ec!important; box-shadow:0 24px 50px #0007!important;
    backdrop-filter:none!important; overflow-y:auto!important; padding-bottom:16px!important;
  }
  .vertex-v3 #app#app #findSheet { z-index:42!important; }
  .vertex-v3 #app#app #mapSheet[data-mode="home"] { overflow:hidden!important; padding-bottom:0!important; }
  .vertex-v3 #app#app #mapSheet[data-mode="home"] #placeCard { flex:1 1 auto!important; max-height:calc(100dvh - 2 * var(--desk-g) - 2px)!important; min-height:0!important; overflow-y:auto!important; }
  /* Legend rows over the map stay a small card, centred in the map. */
  .vertex-v3 #app#app #mapSheet[data-mode="rows"] { left:calc(var(--desk-w) + (100vw - var(--desk-w)) / 2)!important; right:auto!important; width:440px!important; transform:translateX(-50%)!important; }
  /* No curtains on a desktop: grabbers go, collapsed states open fully. */
  .vertex-v3 #app#app .sheet-grabber,.vertex-v3 #app#app #mapSheet .sheet-grab,.vertex-v3 #app#app #placeCardHandle { display:none!important; }
  .vertex-v3 #app#app #routePlanner.sheet-collapsed>*:not(.sheet-grabber) { display:revert; }
  .vertex-v3 #app#app #layerPanel { top:12px!important; bottom:auto!important; max-height:calc(100dvh - 24px)!important; }
  .vertex-v3 #app#app #avalancheChip { left:calc(var(--desk-w) + var(--desk-g))!important; }
  /* Layers open on the right, so the place stays in the panel meanwhile. */
  .vertex-v3 #app#app:has(#layerPanel:not([hidden])) #mapSheet #placeCard:not([hidden]) { display:block!important; }
  /* Panel content starts at the top; actions stay at the foot. */
  .vertex-v3 #app#app #routePlanner,.vertex-v3 #app#app #findSheet { justify-content:flex-start!important; }
  .vertex-v3 #app#app #routePlanner>.sheet-grabber,.vertex-v3 #app#app #recordSheet>.sheet-grabber { display:none!important; }
  /* Without "Ski this today" the remaining action spans the row. */
  .vertex-v3 #app#app #routeDetail .route-choice-actions { display:flex!important; }
  .vertex-v3 #app#app #routeDetail .route-choice-actions>button:not(#routeDetailGo) { flex:1 1 auto!important; width:auto!important; }
  /* Recording lives on the phone. */
  .vertex-v3 #app#app #recordFab,.vertex-v3 #app#app #todayTourPill,.vertex-v3 #app#app #routeDetailGo,.vertex-v3 #app#app #recordSheet { display:none!important; }
}
/* Map controls (the attribution "i") stay under cards and sheets. No isolation on #map: the
   overlapping-tracks chooser is a map popup and must still rise above an open tour card. */
.vertex-v3 #app #map .maplibregl-ctrl-bottom-right,.vertex-v3 #app #map .maplibregl-ctrl-bottom-left { z-index:2!important; }