/* Phone navigation: location and profile at the bottom, map tools in thumb reach. */
.vertex-v3 #app {
  --ui-base:#282e2c;
  --ui-surface:#e6e8e2;
  --ui-raised:#f5f5ef;
  --ui-text:#26332c;
  --ui-muted:#5b6b61;
  --ui-yellow:#e5c86d;
  --ui-green:#3f6551;
  --ui-on-dark:#f5f5ef;
}
/* Consistent application chrome. Map legends and danger grades retain their meaning. */
.vertex-v3 #app#app#app :is(#layerPanel,#findSheet,#routePlanner,#routeDetail,#recordSheet,#youSheet,#exploreSheet,#activitiesSheet,#activityDetail,#compareSheet,#avalancheSheet,#todayBriefSheet,#placeCard,.desk-side) {
  background:var(--ui-surface)!important;
  color:var(--ui-text)!important;
}
.vertex-v3 #app#app#app :is(.panel-head,.activities-head,.record-head,.route-detail-head,.activity-detail-head,.place-card-title) :is(h1,h2,b),
.vertex-v3 #app#app#app :is(.layer-row,.you-row,.route-planner-copy,.route-detail-stats,.settings-field,.search-result) { color:var(--ui-text); }
.vertex-v3 #app#app#app :is(.area-tabs,.tour-hub-tabs,.route-planner-mode,.desk-nav) { background:#282e2c0d!important; }
.vertex-v3 #app#app#app :is(.area-tabs,.tour-hub-tabs,.route-planner-mode,.desk-nav) button[aria-selected="true"],
.vertex-v3 #app#app#app .route-planner-mode button[aria-pressed="true"] { background:var(--ui-green)!important; color:var(--ui-on-dark)!important; border-color:var(--ui-green)!important; }
.vertex-v3 #app#app#app :is(#savePlannedRoute,#startRecord,.record-primary,#routeDetailGo) { background:var(--ui-yellow)!important; color:var(--ui-text)!important; border-color:var(--ui-yellow)!important; }
.vertex-v3 #app#app#app :is(.route-add-primary,#routeDetailReplay,.route-community-save,#plannerLayers,.area-panel-actions button,.search-result:hover) { background:var(--ui-green)!important; color:var(--ui-on-dark)!important; border-color:transparent!important; }
.vertex-v3 #app#app#app :is(.route-name-field input,.search input,.settings-field input,.settings-field textarea) { background:var(--ui-raised)!important; color:var(--ui-text)!important; border-color:#282e2c30!important; accent-color:var(--ui-green); }
.vertex-v3 #app#app#app #youAvatar { width:100%!important; height:100%!important; min-width:0!important; padding:0!important; margin:0!important; border:0!important; border-radius:inherit!important; background:transparent!important; color:inherit!important; box-shadow:none!important; display:grid!important; place-items:center; }
.vertex-v3 #app#app#app :is(#youButton,#thumbDock #youButton) { padding:0!important; overflow:hidden; clip-path:circle(50%); aspect-ratio:1; border-radius:50%!important; background:var(--ui-base)!important; color:var(--ui-on-dark)!important; }
.vertex-v3 #app#app#app :is(#weatherOverview,#weatherStation,#powderCard,.weather-levels,.weather-hours,.weather-days,.snow-aspects) { background:var(--ui-raised)!important; border-color:#282e2c16!important; }
.vertex-v3 #app#app#app #powderCard .powder-card-foot strong { color:var(--ui-green)!important; }
.vertex-v3 #app#app#app .weather-levels button.active { background:var(--ui-green)!important; color:var(--ui-on-dark)!important; }
.thumb-dock,.thumb-rail,.tour-hub-tabs,.tour-hub-area { display:none; }
.vertex-v3 #app .layer-preview.satellite-base { background:linear-gradient(130deg,#264632 25%,#807559 26% 34%,#39563b 35% 61%,#8e9280 62% 68%,#30473a 69%); }
/* A scrolling body never takes its close control off screen. */
.vertex-v3 #app#app#app :is(.panel-head,.activities-head,.record-head,.route-detail-head,.activity-detail-head,.publish-route-head,.community-profile-head,.weather-head,.find-sheet-head,.persistent-panel-head) {
  position:sticky!important; top:0!important; z-index:12; flex-shrink:0; background:var(--ui-surface)!important; isolation:isolate;
}
.vertex-v3 #app#app#app :is(.panel-head,.activities-head,.record-head,.route-detail-head,.activity-detail-head,.publish-route-head,.find-sheet-head,.persistent-panel-head) :is(button[aria-label^="Close"],.panel-dismiss) {
  display:grid!important; place-items:center; flex:none; order:10; width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; padding:0!important; margin-left:auto; border:0!important; border-radius:50%!important; background:#282e2c0b!important; color:var(--ui-text)!important; font:400 25px/1 system-ui!important; box-shadow:none!important;
}
.vertex-v3 #app#app#app #findSheet .find-sheet-head { display:flex!important; align-items:center; gap:12px; width:100%; }
.vertex-v3 #app#app#app #findSheet .find-sheet-head small { color:var(--ui-muted); }
.vertex-v3 #app#app#app #findShortcuts,.vertex-v3 #app#app#app #findAreaInfo { display:none!important; }
.vertex-v3 #app#app#app #findSheet #findCancel { display:grid!important; }
.vertex-v3 #app#app#app #areaSearchTitle { display:block; padding:0; margin:0; text-align:left; border:0; background:none; color:var(--ui-text); }
.vertex-v3 #app#app#app #areaSearchTitle h1 { margin:0; }
.vertex-v3 #app#app#app #placeChangeArea { display:grid; place-items:center; width:40px!important; min-width:40px; height:40px; padding:8px!important; color:var(--ui-green); }
.vertex-v3 #app#app#app #placeCard .place-card-title { display:flex!important; align-items:center; gap:8px; padding:8px 0; }
.vertex-v3 #app#app#app #placeCard .place-card-title>div { flex:1; min-width:0; }
.vertex-v3 #app#app#app #placeCard .place-card-title h1 { font-size:17px; overflow-wrap:anywhere; }
.vertex-v3 #app#app#app #placeCard .place-card-title .panel-dismiss { width:40px!important; min-width:40px!important; height:40px!important; }
.vertex-v3 #app#app#app #routePlanner .planner-heading { display:flex; align-items:center; gap:8px; }
.vertex-v3 #app#app#app #routePlanner .planner-heading .panel-dismiss { margin-left:0; }
@media (max-width:899px) {
  .vertex-v3 #app#app #thumbDock { position:fixed; z-index:44; left:12px; right:72px; bottom:calc(14px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:8px; }
  .vertex-v3 #app#app #thumbDock[hidden],.vertex-v3 #app#app #thumbRail[hidden] { display:none!important; }
  .vertex-v3 #app#app #thumbDock #youButton { position:static!important; display:grid!important; place-items:center; flex:none; width:46px!important; height:46px!important; border-radius:50%; border:1px solid #ffffff45; background:var(--ui-base); color:#fff; box-shadow:0 4px 14px #10202a30; }
  .vertex-v3 #app#app #thumbDock #youAvatar { width:100%; height:100%; display:grid; place-items:center; }
  .vertex-v3 #app#app #thumbDock #findBar { position:static!important; display:flex!important; flex-direction:row!important; align-items:center!important; gap:6px!important; width:auto!important; flex:1; min-width:0; height:48px!important; padding:0 12px!important; margin:0!important; border:1px solid #ffffff30!important; border-radius:25px!important; background:#24312fed!important; box-shadow:0 4px 18px #10202a30; transform:none!important; }
  .vertex-v3 #app#app #thumbDock .dock-area::before,.vertex-v3 #app#app #thumbDock .dock-area::after { display:none!important; }
  .vertex-v3 #app#app #thumbDock .dock-area { display:contents!important; }
  .vertex-v3 #app#app #thumbDock #dockTitle { order:2; flex:1; min-width:0; display:block!important; padding:0!important; text-align:left; background:none; border:0; color:#f5f8f6!important; }
  .vertex-v3 #app#app #thumbDock #dockAreaName { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:15px; }
  .vertex-v3 #app#app #thumbDock #findButton { order:1; flex:none; display:grid!important; place-items:center; width:28px!important; height:44px!important; min-width:28px!important; padding:0!important; border:0!important; background:none!important; color:#f5f8f6!important; }
  .vertex-v3 #app#app #thumbDock #dockGrab,.vertex-v3 #app#app #thumbDock #dockFavorite,.vertex-v3 #app#app #thumbDock #dockAreaInfo,.vertex-v3 #app#app #thumbDock #dockAreaLine { display:none!important; }
  .vertex-v3 #app#app #thumbRail { position:fixed; z-index:44; right:12px; bottom:calc(14px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:10px; }
  .vertex-v3 #app#app #thumbRail button { position:static!important; display:flex!important; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:48px!important; min-width:48px; height:48px!important; padding:0!important; border:1px solid #ffffff35!important; border-radius:50%!important; background:#24312f!important; color:#f5f8f6!important; box-shadow:0 4px 14px #10202a30; }
  .vertex-v3 #app#app #thumbRail #dockPlan { background:#294f46!important; }
  .vertex-v3 #app#app #thumbRail #dockPlan b { display:none!important; }
  .vertex-v3 #app#app #thumbRail #dockTours b { font:600 10px/1.1 system-ui,sans-serif; }
  .vertex-v3 #app#app #thumbRail .ui-icon { width:20px; height:20px; }
  .vertex-v3 #app#app #mapCorner .map-plan-oval { display:none!important; }
  .vertex-v3 #app#app #mapCorner .map-navigation-oval { margin-top:0!important; }
  .vertex-v3 #app#app #recordFab#recordFab { left:50%!important; right:auto!important; transform:translateX(-50%)!important; bottom:calc(76px + env(safe-area-inset-bottom))!important; height:46px!important; }
  .vertex-v3 #app#app #mapSheet { bottom:calc(76px + env(safe-area-inset-bottom))!important; }
  .vertex-v3 #app#app #mapSheet #placeCard.collapsed { display:none!important; }
  .vertex-v3 #app#app #tourHubTabs:not([hidden]) { display:flex; gap:4px; padding:4px; margin:8px 0 12px; border-radius:14px; background:#10202a0b; }
  .vertex-v3 #app#app #tourHubTabs button { flex:1; min-height:44px; border:0; border-radius:10px; background:none; color:#45605b; font:600 14px system-ui,sans-serif; }
  .vertex-v3 #app#app #tourHubTabs button[aria-selected="true"] { background:#fff; color:#203c35; box-shadow:0 1px 5px #10202a15; }
  .vertex-v3 #app#app #tourHubArea:not([hidden]) { display:block; margin:0 0 12px; color:#526c66; font-size:13px; }
  .vertex-v3 #app#app #exploreSheet #areaPanelTours { padding:0; }
  .vertex-v3 #app#app #exploreSheet #areaPanelTours[hidden],.vertex-v3 #app#app #exploreSheet #routesList[hidden],.vertex-v3 #app#app #exploreSheet .routes-library-toolbar[hidden] { display:none!important; }
  .vertex-v3 #app#app #exploreSheet #areaTourList { display:grid; gap:8px; }
  .vertex-v3 #app#app #exploreSheet .area-tour { min-height:64px; }
  .vertex-v3 #app#app #exploreSheet .area-panel-actions { display:flex; gap:8px; margin:14px 0; }
  .vertex-v3 #app#app #exploreSheet .area-panel-actions button { flex:1; min-height:44px; padding:8px; border:1px solid #10202a20; border-radius:12px; background:#ffffff55; color:#203c35; font:600 13px system-ui; }
  .vertex-v3 #app#app #exploreSheet { max-height:min(64dvh,calc(100dvh - var(--corner-clear,114px) - 70px))!important; }
  .vertex-v3 #app#app #plannerLayers { display:inline-flex!important; align-items:center; justify-content:center; }
  .vertex-v3 #app#app[data-finding] #thumbDock,.vertex-v3 #app#app[data-finding] #thumbRail,
  .vertex-v3 #app#app:has(#routePlanner:not([hidden]),#routeDetail:not([hidden]),#recordSheet:not([hidden]),#activeSession:not([hidden]),#layerPanel:not([hidden]),#exploreSheet:not([hidden]),#youSheet:not([hidden]),#activitiesSheet:not([hidden]),#activityDetail:not([hidden]),#compareSheet:not([hidden]),#avalancheSheet:not([hidden]),#todayBriefSheet:not([hidden]),#communityView:not([hidden]),#replayControls:not([hidden]),#placeCard:not(.collapsed):not([hidden])) #thumbDock,
  .vertex-v3 #app#app:has(#routePlanner:not([hidden]),#routeDetail:not([hidden]),#recordSheet:not([hidden]),#activeSession:not([hidden]),#layerPanel:not([hidden]),#exploreSheet:not([hidden]),#youSheet:not([hidden]),#activitiesSheet:not([hidden]),#activityDetail:not([hidden]),#compareSheet:not([hidden]),#avalancheSheet:not([hidden]),#todayBriefSheet:not([hidden]),#communityView:not([hidden]),#replayControls:not([hidden]),#placeCard:not(.collapsed):not([hidden])) #thumbRail { display:none!important; }
  /* While inspecting a tour or recording, the same Layers control follows the panel. */
  .vertex-v3 #app#app#app:has(#routeDetail:not([hidden]),#recordSheet:not([hidden]),#activeSession:not([hidden]),#exploreSheet:not([hidden]),#youSheet:not([hidden]),#activitiesSheet:not([hidden]),#activityDetail:not([hidden]),#compareSheet:not([hidden]),#replayControls:not([hidden])) #thumbRail { display:flex!important; bottom:calc(var(--map-surface-clearance,12px) + 8px)!important; }
  .vertex-v3 #app#app#app:has(#routeDetail:not([hidden]),#recordSheet:not([hidden]),#activeSession:not([hidden]),#exploreSheet:not([hidden]),#youSheet:not([hidden]),#activitiesSheet:not([hidden]),#activityDetail:not([hidden]),#compareSheet:not([hidden]),#replayControls:not([hidden])) #thumbRail #dockPlan,
  .vertex-v3 #app#app#app:has(#routeDetail:not([hidden]),#recordSheet:not([hidden]),#activeSession:not([hidden]),#exploreSheet:not([hidden]),#youSheet:not([hidden]),#activitiesSheet:not([hidden]),#activityDetail:not([hidden]),#compareSheet:not([hidden]),#replayControls:not([hidden])) #thumbRail #dockTours { display:none!important; }
  .vertex-v3 #app#app#app#app:has(#layerPanel:not([hidden])) #thumbRail,.vertex-v3 #app#app#app#app[data-finding] #thumbRail { display:none!important; }
  .vertex-v3 #app#app #thumbDock #youButton { padding:0!important; background:var(--ui-base)!important; border:1px solid #ffffff30!important; color:var(--ui-on-dark)!important; }
  .vertex-v3 #app#app #thumbDock #findBar,.vertex-v3 #app#app #thumbRail button,
  .vertex-v3 #app#app #mapCorner .map-navigation-oval,.vertex-v3 #app#app #avalancheChip { background:var(--ui-base)!important; color:var(--ui-on-dark)!important; border-color:#ffffff30!important; }
  .vertex-v3 #app#app #mapCorner .map-navigation-oval button { background:transparent!important; color:var(--ui-on-dark)!important; }
  .vertex-v3 #app#app #mapCorner .map-navigation-oval button span,
  .vertex-v3 #app#app #mapCorner .map-navigation-oval button svg,
  .vertex-v3 #app#app #avalancheChip :is(.avalanche-chip-text,.avalanche-status-symbol) { color:inherit!important; }
  .vertex-v3 #app#app #mapSheet[data-mode="home"] { background:var(--ui-surface)!important; }
  .vertex-v3 #app#app #thumbRail #dockPlan { background:var(--ui-green)!important; }
  .vertex-v3 #app#app #recordFab#recordFab { background:var(--ui-yellow)!important; color:var(--ui-text)!important; border-color:var(--ui-yellow)!important; }
  .vertex-v3 #app#app #recordFab#recordFab b { color:var(--ui-text)!important; }
  .vertex-v3 #app#app #avalancheChip[data-indicator="warning"] { color:var(--ui-yellow)!important; }
  .vertex-v3 #app#app #tourHubTabs button[aria-selected="true"] { background:var(--ui-green)!important; color:var(--ui-on-dark)!important; }
}

/* Separate destinations in one floating menu, with map tools above it. */
.dock-search-label,.dock-area-caption { display:none; }
@media (max-width:899px) {
  .vertex-v3 #app#app#app #thumbDock { right:12px; gap:0; padding:5px; border:1px solid #ffffff30; border-radius:28px; background:var(--ui-base); color:var(--ui-on-dark); box-shadow:0 4px 18px #10202a30; }
  .vertex-v3 #app#app#app #thumbDock #findBar { height:48px!important; padding:0!important; gap:0!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; }
  .vertex-v3 #app#app#app #thumbDock #findButton { width:64px!important; height:48px!important; display:flex!important; flex-direction:column; justify-content:center; gap:3px; border-right:1px solid #ffffff30!important; border-radius:0!important; }
  .vertex-v3 #app#app#app #thumbDock #findButton svg { width:19px; height:19px; }
  .vertex-v3 #app#app#app .dock-search-label { display:block; font:600 11px system-ui; }
  .vertex-v3 #app#app#app #thumbDock #dockTitle { height:48px; padding:3px 12px!important; display:flex!important; flex-direction:column; justify-content:center; gap:2px; }
  .vertex-v3 #app#app#app .dock-area-caption { display:block; color:#c4cec7; font:500 10px system-ui; }
  .vertex-v3 #app#app#app #thumbDock #dockAreaName { width:100%; font-size:14px; }
  .vertex-v3 #app#app#app #thumbDock #dockTours { flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width:64px; height:48px; padding:0; border:0; border-left:1px solid #ffffff30; border-radius:0; background:transparent; color:inherit; }
  .vertex-v3 #app#app#app #thumbDock #dockTours svg { width:20px; height:20px; }
  .vertex-v3 #app#app#app #thumbDock #dockTours b { font:600 11px system-ui; }
  .vertex-v3 #app#app#app #thumbRail { bottom:calc(94px + env(safe-area-inset-bottom)); }
  .vertex-v3 #app#app#app #thumbRail #cornerTours[aria-pressed="true"] { background:var(--ui-yellow)!important; color:var(--ui-text)!important; }
  .vertex-v3 #app#app#app #mapCorner .map-tours-oval { display:none!important; }
  .vertex-v3 #app#app#app #mapCorner .map-names-oval { display:none!important; }
  .vertex-v3 #app#app#app #thumbRail #cornerNames { gap:0!important; }
  .vertex-v3 #app#app#app #thumbRail #cornerNames .ui-icon { width:17px; height:17px; margin-top:2px; }
  .vertex-v3 #app#app#app #thumbRail #cornerNames b { font:800 9px/1 system-ui,sans-serif; letter-spacing:.04em; }
  .vertex-v3 #app#app#app #thumbRail #cornerNames[aria-pressed="true"] { background:#3b82f6!important; border-color:#3b82f6!important; color:#fff!important; }
  .vertex-v3 #app#app#app #recordFab#recordFab { bottom:calc(88px + env(safe-area-inset-bottom))!important; max-width:calc(100% - 150px); }
  .vertex-v3 #app#app#app #thumbDock button:focus-visible { outline:2px solid var(--ui-yellow); outline-offset:-3px; }
  .vertex-v3 #app#app#app:has(#exploreSheet:not([hidden]),#routeDetail:not([hidden]),#recordSheet:not([hidden]),#activeSession:not([hidden]),#youSheet:not([hidden]),#activitiesSheet:not([hidden]),#activityDetail:not([hidden]),#compareSheet:not([hidden]),#replayControls:not([hidden])) #thumbRail #cornerTours { display:none!important; }
}

/* The bulletin control has a stable anchor, independent of open map surfaces. */
.vertex-v3 #app#app#app #avalancheChip {
  top:max(12px,env(safe-area-inset-top))!important;
  bottom:auto!important;
  margin:0!important;
  transform:none!important;
  transition:background-color .15s,color .15s,border-color .15s!important;
}
@media (max-width:899px) {
  .vertex-v3 #app#app#app #avalancheChip { left:12px!important; right:auto!important; }
}

/* Red north tip remains legible against the neutral map controls. */
.vertex-v3 #app#app#app #compassButton .compass-north { fill:#ef6b63!important; color:#ef6b63!important; }

/* Two predictable mobile sheet sizes: quick controls and detailed content. */
@media (max-width:899px) {
  .vertex-v3 #app#app#app { --sheet-compact:min(52dvh,440px); --sheet-large:min(78dvh,680px); }
  .vertex-v3 #app#app#app :is(#findSheet,#layerPanel,#routePlanner,#routeDetail,#recordSheet,#youSheet,#exploreSheet,#activitiesSheet,#activityDetail,#compareSheet,#avalancheSheet,#todayBriefSheet,#weatherView,#communityView),
  .vertex-v3 #app#app#app #mapSheet #placeCard:not(.collapsed) {
    position:fixed!important; top:auto!important; left:0!important; right:0!important; bottom:0!important;
    width:auto!important; max-width:none!important; margin:0!important; transform:none!important;
    height:var(--sheet-large)!important; min-height:0!important; max-height:var(--sheet-large)!important;
    box-sizing:border-box; overflow-y:auto!important; overscroll-behavior:contain;
    border-radius:24px 24px 0 0!important; padding-bottom:calc(16px + env(safe-area-inset-bottom))!important;
    background:var(--ui-surface)!important; color:var(--ui-text)!important; box-shadow:0 -8px 30px #10202a26;
  }
  .vertex-v3 #app#app#app :is(#findSheet,#recordSheet,#routePlanner) {
    height:var(--sheet-compact)!important; max-height:var(--sheet-compact)!important;
  }
  .vertex-v3 #app#app#app #mapSheet { position:static!important; transform:none!important; overflow:visible!important; }
  .vertex-v3 #app#app#app #mapSheet #placeCard[hidden] { display:none!important; }
}

/* Explicit close buttons replace all sheet drag affordances. */
.vertex-v3 #app#app#app :is(.sheet-grabber,.sheet-grab,.place-card-handle,.grabber) { display:none!important; }
.vertex-v3 #app#app#app #activeSessionHandle { width:40px!important; height:40px!important; padding:0!important; margin-left:auto!important; border:0!important; border-radius:50%; color:inherit; background:#282e2c0b; font:400 25px/1 system-ui; }

.vertex-v3 #app#app#app #plannerLayers,.vertex-v3 #app#app#app #cancelRoute { display:none!important; }
.vertex-v3 #app#app#app .planner-heading .route-planner-actions { display:flex!important; gap:4px; margin:0 0 0 auto; padding:0; border:0; flex:none; }
.vertex-v3 #app#app#app .planner-heading .route-planner-actions button { width:38px; height:40px; min-width:38px; padding:8px!important; border-radius:10px; }
.vertex-v3 #app#app#app .planner-heading .route-planner-actions svg { width:21px; height:21px; }
.vertex-v3 #app#app#app #plannerElevation { flex:none; height:110px; min-height:110px; margin-top:12px; }
.vertex-v3 #app#app#app #plannerElevation[hidden] { display:none!important; }
.vertex-v3 #app#app#app #plannerElevationCanvas { width:100%; height:110px; }
.vertex-v3 #app#app#app #routePlanner .planner-heading { flex-wrap:nowrap; gap:4px; }
.vertex-v3 #app#app#app #routePlanner .planner-heading>small { flex:1; white-space:nowrap; font-size:10px; }
.vertex-v3 #app#app#app #routePlanner .planner-heading .route-planner-actions { width:auto!important; min-width:0!important; flex:0 0 auto!important; display:flex!important; grid-template-columns:none!important; }
.vertex-v3 #app#app#app #routePlanner .planner-heading .route-planner-actions button { flex:0 0 36px!important; width:36px!important; min-width:36px!important; max-width:36px!important; height:40px!important; }
.vertex-v3 #app#app#app #routePlanner .planner-heading .panel-dismiss { width:36px!important; min-width:36px!important; }
.vertex-v3 #app#app#app #routePlanner { overflow-x:hidden!important; }
/* Scrolling layers pass beneath an opaque header, including its top gutter. */
.vertex-v3 #app#app#app #layerPanel { padding-top:0!important; }
.vertex-v3 #app#app#app #layerPanel>.panel-head {
  position:sticky!important; top:0!important; z-index:20!important;
  margin-top:0!important; padding-top:16px!important; padding-bottom:10px!important;
  background:var(--ui-surface)!important; opacity:1!important; backdrop-filter:none!important;
  box-shadow:0 -16px 0 16px var(--ui-surface);
}
/* Shared panel chrome: one compact title row and one submenu treatment. */
.vertex-v3 #app#app#app#app :is(.panel-head,.activities-head,.record-head,.route-detail-head,.activity-detail-head,.publish-route-head,.community-profile-head,.weather-head,.find-sheet-head,.persistent-panel-head,.place-card-title,.planner-heading) {
  display:flex!important; align-items:center!important; justify-content:space-between; gap:8px;
  flex:0 0 auto!important; box-sizing:border-box!important;
  height:64px!important; min-height:64px!important; max-height:64px!important;
  margin:0 0 8px!important; padding:10px 0!important;
  background:var(--ui-surface)!important; box-shadow:0 -16px 0 16px var(--ui-surface);
}
.vertex-v3 #app#app#app#app :is(.panel-head,.activities-head,.record-head,.route-detail-head,.activity-detail-head,.publish-route-head,.community-profile-head,.weather-head,.find-sheet-head,.persistent-panel-head,.place-card-title) :is(h1,h2) {
  margin:0!important; font:650 17px/1.25 system-ui,sans-serif!important; letter-spacing:0!important;
}
.vertex-v3 #app#app#app#app :is(.panel-head,.activities-head,.record-head,.route-detail-head,.activity-detail-head,.weather-head,.find-sheet-head,.persistent-panel-head)>div>small,
.vertex-v3 #app#app#app#app .find-sheet-head>div>small { display:none!important; }
.vertex-v3 #app#app#app#app :is(.area-tabs,.tour-hub-tabs,.route-planner-mode,.weather-tabs,.route-library-filters,.powder-map-tabs) {
  gap:4px!important; padding:4px!important; margin:0 0 12px!important;
  width:100%!important; box-sizing:border-box; border:0!important; border-radius:12px!important;
  background:#282e2c0d!important; overflow-x:auto; flex-shrink:0;
}
.vertex-v3 #app#app#app#app :is(.area-tabs,.tour-hub-tabs,.route-planner-mode,.weather-tabs,.route-library-filters,.powder-map-tabs) button {
  flex:1 0 auto!important; min-height:40px!important; height:40px!important; padding:0 14px!important;
  margin:0!important; border:0!important; border-radius:9px!important; box-shadow:none!important;
  background:transparent!important; color:var(--ui-muted)!important; font:600 13px/1.2 system-ui,sans-serif!important;
}
.vertex-v3 #app#app#app#app :is(.area-tabs,.tour-hub-tabs,.route-planner-mode,.weather-tabs,.route-library-filters,.powder-map-tabs) button:is([aria-selected="true"],[aria-pressed="true"],.active) {
  background:var(--ui-green)!important; color:var(--ui-on-dark)!important;
}
.vertex-v3 #app#app#app#app .area-tour-filters { gap:6px; margin:0 0 12px; }
.vertex-v3 #app#app#app#app .area-tour-filters button { min-height:40px; padding:0 12px; border-radius:9px; font:600 13px system-ui; }
.vertex-v3 #app#app#app#app .area-tour-filters button[aria-pressed="true"] { background:var(--ui-green)!important; color:var(--ui-on-dark)!important; }
@media (max-width:899px) {
  .vertex-v3 #app#app#app#app :is(#exploreSheet,#youSheet,#findSheet,#routePlanner,#recordSheet,#routeDetail,#activitiesSheet,#activityDetail,#compareSheet,#avalancheSheet,#todayBriefSheet,#layerPanel) { padding-top:0!important; }
}
.vertex-v3 #app#app#app#app #routePlanner .planner-heading>small { font:650 17px/1.25 system-ui,sans-serif!important; letter-spacing:0!important; text-transform:none!important; color:var(--ui-text)!important; }
@media (max-width:899px) {
  /* Both tour tabs reserve the same context, control rows and list origin. */
  .vertex-v3 #app#app#app#app #exploreSheet #tourHubArea { height:24px; min-height:24px; margin:0 0 8px!important; display:flex; align-items:center; }
  .vertex-v3 #app#app#app#app #exploreSheet .tour-browser-controls { display:grid; grid-template-rows:44px 60px; gap:8px; height:112px; min-height:112px; margin:0 0 12px; flex:none; }
  .vertex-v3 #app#app#app#app #exploreSheet .tour-browser-controls[hidden] { display:none!important; }
  .vertex-v3 #app#app#app#app #exploreSheet .tour-browser-controls :is(.routes-library-toolbar,.area-tour-filters,.route-library-filters,.tour-low-angle) { margin:0!important; min-height:0!important; box-sizing:border-box; }
  .vertex-v3 #app#app#app#app #exploreSheet .tour-low-angle { height:60px; }
  .vertex-v3 #app#app#app#app #exploreSheet .route-library-filters { height:60px; align-items:center; }
  .vertex-v3 #app#app#app#app #exploreSheet :is(#areaTourList,#routesList) { margin:0!important; padding-top:0!important; }
}
@media (max-width:899px) {
  .vertex-v3 #app#app#app#app #findSheet { height:min(34dvh,300px)!important; max-height:min(34dvh,300px)!important; }
}
/* Dark map chrome, with raised surfaces from the same charcoal palette. */
.vertex-v3 #app {
  --ui-surface:#303735;
  --ui-raised:#3b4540;
  --ui-text:#f1f3ec;
  --ui-muted:#bdc8c0;
}
.vertex-v3 #app#app#app#app :is(#layerPanel,#findSheet,#routePlanner,#routeDetail,#recordSheet,#youSheet,#exploreSheet,#activitiesSheet,#activityDetail,#compareSheet,#avalancheSheet,#todayBriefSheet,#placeCard,#weatherView,#communityView,.desk-side) {
  color-scheme:dark; color:var(--ui-text)!important; border-color:#ffffff20!important;
}
.vertex-v3 #app#app#app#app :is(.area-tour,.route-row,.activity-row,.you-row,#youSeasonSummary,.tour-low-angle,.search-result,.tb-section,.tb-card,.avalanche-empty,.avalanche-problem,.avalanche-disclaimer,.avalanche-notice,.weather-hours,.weather-days) {
  background:var(--ui-raised)!important; color:var(--ui-text)!important; border-color:#ffffff16!important;
}
.vertex-v3 #app#app#app#app :is(#layerPanel,#findSheet,#routePlanner,#routeDetail,#recordSheet,#youSheet,#exploreSheet,#activitiesSheet,#activityDetail,#compareSheet,#avalancheSheet,#todayBriefSheet,#placeCard) :is(h1,h2,h3,b,strong,label,p,.route-planner-copy,.route-detail-stats,.area-tour-title) { color:var(--ui-text); }
.vertex-v3 #app#app#app#app :is(#layerPanel,#findSheet,#routePlanner,#routeDetail,#recordSheet,#youSheet,#exploreSheet,#activitiesSheet,#activityDetail,#compareSheet,#avalancheSheet,#todayBriefSheet,#placeCard) :is(small,.area-tour-meta,.route-meta,.tour-hub-area,#routePlannerHint,.tb-foot,.alps-library-credit) { color:var(--ui-muted)!important; }
.vertex-v3 #app#app#app#app :is(.area-tabs,.tour-hub-tabs,.route-planner-mode,.weather-tabs,.route-library-filters,.powder-map-tabs) { background:#1e1f22!important; }
.vertex-v3 #app#app#app#app :is(.area-tour-filters button,#routeAddButton,#routeFilterButton) { background:var(--ui-raised)!important; color:var(--ui-text)!important; border-color:#ffffff20!important; }
.vertex-v3 #app#app#app#app :is(#placeChangeArea,#favoritePlace,.route-open,.route-open b,.you-row span) { color:var(--ui-text)!important; }
.vertex-v3 #app#app#app#app :is(#recordFab,#savePlannedRoute,#startRecord,.record-primary,#routeDetailGo) { color:var(--ui-base)!important; }
.vertex-v3 #app#app#app#app #recordFab b { color:var(--ui-base)!important; }
.vertex-v3 #app#app#app#app :is(.search input,.route-name-field input,.settings-field input,.settings-field textarea) { background:var(--ui-raised)!important; color:var(--ui-text)!important; }
@keyframes panel-menu-open {
  from { opacity:0; translate:0 22px; scale:.94; }
  to { opacity:1; translate:0 0; scale:1; }
}
/* Every card opens the same way: it grows out of the tap that opened it. Closing is instant. */
@media (max-width:899px) and (prefers-reduced-motion:no-preference) {
  .vertex-v3 #app#app#app#app :is(#findSheet,#layerPanel,#routePlanner,#routeDetail,#recordSheet,#youSheet,#exploreSheet,#activitiesSheet,#activityDetail,#compareSheet,#avalancheSheet,#todayBriefSheet,#weatherView,#communityView,#spotCard,#placePeek,#mapFeatureCard,#activeSession):not([hidden]),
  .vertex-v3 #app#app#app#app #placeCard:not([hidden]):not(.collapsed) {
    transform-origin:var(--open-x,50%) 100%; animation:panel-menu-open 280ms cubic-bezier(.2,.9,.3,1) both;
  }
}
@media (prefers-reduced-motion:reduce) {
  .vertex-v3 #app#app#app#app :is(#findSheet,#layerPanel,#routePlanner,#routeDetail,#recordSheet,#youSheet,#exploreSheet,#activitiesSheet,#activityDetail,#compareSheet,#avalancheSheet,#todayBriefSheet,#weatherView,#communityView,#placeCard,#spotCard,#placePeek,#mapFeatureCard,#activeSession) { animation:none!important; }
}
.vertex-v3 #app#app#app#app #exploreSheet .area-tour-filters button[aria-pressed="true"] { background:var(--ui-green)!important; color:var(--ui-on-dark)!important; }
/* Dark-theme form and control normalization. */
.vertex-v3 #app#app#app#app #findSheet .search-wrap { width:100%!important; min-width:0; margin:0!important; align-self:stretch; }
.vertex-v3 #app#app#app#app #findSheet #searchBox {
  display:flex!important; align-items:center!important; gap:8px!important;
  width:100%!important; height:48px!important; padding:4px 6px 4px 12px!important;
  margin:0!important; box-sizing:border-box; border:1px solid #ffffff35!important;
  border-radius:12px!important; background:var(--ui-raised)!important; color:var(--ui-text)!important;
  transform:none!important; box-shadow:none!important;
}
.vertex-v3 #app#app#app#app #findSheet #placeSearch { position:static!important; flex:1!important; min-width:0!important; width:0!important; height:38px!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; color:var(--ui-text)!important; box-shadow:none!important; outline-offset:2px; }
.vertex-v3 #app#app#app#app #findSheet .search-icon { position:static!important; flex:none; color:var(--ui-muted)!important; transform:none!important; }
.vertex-v3 #app#app#app#app #findSheet .search-submit { position:static!important; flex:0 0 38px; width:38px!important; height:38px!important; margin:0!important; padding:0!important; transform:none!important; background:var(--ui-green)!important; color:var(--ui-on-dark)!important; border:0!important; border-radius:9px!important; }
.vertex-v3 #app#app#app#app :is(input,textarea)::placeholder { color:var(--ui-muted)!important; opacity:1; }
.vertex-v3 #app#app#app#app #searchResults { background:var(--ui-surface)!important; color:var(--ui-text)!important; border-color:#ffffff25!important; }
.vertex-v3 #app#app#app#app #routePlanner :is(#undoRoutePoint,#deleteRoutePoint) { background:var(--ui-raised)!important; color:var(--ui-text)!important; border:1px solid #ffffff25!important; }
.vertex-v3 #app#app#app#app #routePlanner :is(#undoRoutePoint,#deleteRoutePoint,#savePlannedRoute) svg { color:inherit!important; stroke:currentColor!important; }
.vertex-v3 #app#app#app#app button:disabled { opacity:.4!important; }
.vertex-v3 #app#app#app#app :is(.settings-section,.settings-card,.profile-card,.community-profile,.route-add-menu,.route-menu,.weather-hour-card,.weather-level-card,.weather-days article,.weather-hours article,.avalanche-times span,.tb-empty,.tb-line,.compare-card,.record-stats,.safe-line-stats,.route-detail-stats) { background:var(--ui-raised)!important; color:var(--ui-text)!important; border-color:#ffffff20!important; }
.vertex-v3 #app#app#app#app :is(.you-row,.settings-field,.settings-toggle,.route-row,.activity-row,.compare-card,.weather-hour-card,.weather-level-card,.weather-days,.weather-hours,.avalanche-problem,.avalanche-empty,.tb-line,.tb-section) :is(span,b,strong,p,label,svg) { color:inherit!important; }
.vertex-v3 #app#app#app#app :is(.settings-field,.settings-toggle,.compare-card,.weather-hour-card,.weather-level-card,.weather-days,.weather-hours,.avalanche-problem,.avalanche-empty,.tb-line) small { color:var(--ui-muted)!important; }
.vertex-v3 #app#app#app#app :is(.route-menu,.route-add-menu) button { background:var(--ui-raised)!important; color:var(--ui-text)!important; }
.vertex-v3 #app#app#app#app :is(.safe-line-start input,.settings-field select) { color:var(--ui-text)!important; background:var(--ui-raised)!important; border-color:#ffffff30!important; color-scheme:dark; }
.vertex-v3 #app#app#app#app :is(.record-explainer,#recordGps,#recordAccuracy,.route-planner-today em,.resort-status small,.weather-updated,.weather-note) { color:var(--ui-muted)!important; }
.vertex-v3 #app#app#app#app :is(.you-row,.settings-toggle,.settings-field,.route-menu) { border-color:#ffffff20!important; }
.vertex-v3 #app#app#app#app :is(.area-weather,.avalanche-body,.today-brief-body,.settings-section) a { color:#9ccfff; }
/* Nested account dialogs and information cards share the same dark surfaces. */
.vertex-v3 #app#app#app#app :is(.profile-editor-sheet,.publish-route-sheet,.settings-sheet,.community-profile-view,#weatherView,#communityView) { background:var(--ui-surface)!important; color:var(--ui-text)!important; color-scheme:dark; border-color:#ffffff25!important; }
.vertex-v3 #app#app#app#app :is(.profile-editor-sheet,.publish-route-sheet,.settings-section,.community-profile-view) :is(label,b,strong,span,p,em) { color:var(--ui-text)!important; }
.vertex-v3 #app#app#app#app :is(.profile-editor-sheet,.publish-route-sheet,.settings-section) :is(input:not([type="checkbox"]),textarea,select) { background:var(--ui-raised)!important; color:var(--ui-text)!important; border:1px solid #ffffff30!important; color-scheme:dark; }
.vertex-v3 #app#app#app#app :is(.settings-plan,.settings-pro,.community-profile-hero,.community-person-card,.compare-mountain,.weather-levels,.weather-day-card,.tb-pick,.tb-hero) { background:var(--ui-raised)!important; color:var(--ui-text)!important; border-color:#ffffff20!important; }
.vertex-v3 #app#app#app#app :is(.settings-section,.settings-plan,.profile-editor-sheet,.community-profile-hero,.community-person-card,.weather-levels,.weather-day-card) small { color:var(--ui-muted)!important; }
.vertex-v3 #app#app#app#app :is(.settings-account,.profile-editor-sheet) :is(button,a) { color:var(--ui-text); }
.vertex-v3 #app#app#app#app :is(.settings-account .account-secondary,.community-profile-edit,.community-person-avatar,.community-profile-avatar) { background:var(--ui-raised)!important; color:var(--ui-text)!important; border-color:#ffffff25!important; }
.vertex-v3 #app#app#app#app :is(#saveProfile,#saveSettings,.route-primary) { background:var(--ui-yellow)!important; color:var(--ui-base)!important; }
.vertex-v3 #app#app#app#app :is(.weather-section-head,.weather-levels,.weather-hours,.weather-days,.weather-day-card,.tb-pick,.tb-hero) :is(b,strong,p,span) { color:var(--ui-text); }
.vertex-v3 #app#app#app#app :is(.publish-route-note,.settings-save-note,.community-person-copy p,.community-profile-hero p,.weather-source-tag) { color:var(--ui-muted)!important; }
.vertex-v3 #app#app#app#app #powderCard :is(b,strong,span,p,em,small) { color:var(--ui-text)!important; }
.vertex-v3 #app#app#app#app #powderCard .powder-card-foot strong { color:#9ccfff!important; }
.vertex-v3 #app#app#app#app :is(#weatherOverview,#weatherStation,.weather-level-card,.weather-hour-card,.weather-days,.weather-hours) :is(b,strong,span,p,em) { color:var(--ui-text)!important; }
.vertex-v3 #app#app#app#app :is(.weather-source,.weather-level-card small,.weather-hour-card small,.powder-card-note) { color:var(--ui-muted)!important; }
.vertex-v3 #app#app#app#app :is(.record-stats,.safe-line-stats,.route-detail-stats) b { color:var(--ui-text)!important; }
.vertex-v3 #app#app#app#app :is(#pauseRecord,#finishRecord,#discardRecord,.active-map-controls button) { background:var(--ui-raised); color:var(--ui-text); border-color:#ffffff30; }
.vertex-v3 #app#app#app#app :is(.active-session,.replay-controls) { background:var(--ui-surface)!important; color:var(--ui-text)!important; }
.vertex-v3 #app#app#app#app :is(.active-session,.replay-controls) :is(b,strong,small,button) { color:var(--ui-text); }
/* Account navigation is a grouped menu, not a collection of .you-row cards. */
.vertex-v3 #app#app#app#app #youSheet :is(.you-menu,.you-season-summary) { background:var(--ui-raised)!important; color:var(--ui-text)!important; border-color:#ffffff20!important; }
.vertex-v3 #app#app#app#app #youSheet .you-menu>button { background:transparent!important; color:var(--ui-text)!important; border-color:#ffffff20!important; }
.vertex-v3 #app#app#app#app #youSheet .you-menu>button :is(b,span,i,svg) { color:var(--ui-text)!important; }
.vertex-v3 #app#app#app#app #youSheet .you-menu>button>span { background:#ffffff0c!important; border-color:#ffffff20!important; }
.vertex-v3 #app#app#app#app #youSheet :is(.you-menu,.you-season-summary) small { color:var(--ui-muted)!important; }
/* Recording controls must not inherit the former light button surfaces. */
.vertex-v3 #app#app#app#app #activeSession { background:var(--ui-surface)!important; color:var(--ui-text)!important; border-color:#ffffff25!important; }
.vertex-v3 #app#app#app#app #activeSession :is(.active-session-main,.active-map-controls,#activeSessionHandle) { background:transparent!important; color:var(--ui-text)!important; border-color:#ffffff25!important; }
.vertex-v3 #app#app#app#app #activeSession :is(span,strong,b,small,svg) { color:var(--ui-text)!important; }
.vertex-v3 #app#app#app#app #activeSession .active-map-controls button { background:var(--ui-raised)!important; color:var(--ui-text)!important; border-color:#ffffff25!important; }
.vertex-v3 #app#app#app#app #activeSession .active-map-controls button:is(.active,[aria-pressed="true"]) { background:var(--ui-green)!important; color:var(--ui-on-dark)!important; }
.vertex-v3 #app#app#app#app #recordSheet .record-stats>span { background:var(--ui-raised)!important; color:var(--ui-text)!important; border-color:#ffffff20!important; }
.vertex-v3 #app#app#app#app #recordSheet :is(#pauseRecord,#finishRecord,#discardRecord) { background:var(--ui-raised)!important; color:var(--ui-text)!important; border:1px solid #ffffff30!important; }
.vertex-v3 #app#app#app#app #recordSheet #finishRecord { background:var(--ui-yellow)!important; color:var(--ui-base)!important; }
.vertex-v3 #app#app#app#app #recordSheet .record-gps { background:transparent!important; color:var(--ui-muted)!important; }
/* Graphite + glacier blue (Bjorn's choice 2026-10-14): graphite cards, raised rows, blue for selected tabs and primary actions. */
.vertex-v3 #app#app {
  --ui-base:#16181c;
  --ui-surface:#1e2126;
  --ui-raised:#2a2e35;
  --ui-text:#f3f5f7;
  --ui-muted:#a3abb6;
  --ui-green:#3b82f6;
  --ui-yellow:#7cc4ff;
  --ui-on-dark:#ffffff;
}
.vertex-v3 #app#app#app#app#app :is(.area-tabs,.tour-hub-tabs,.route-planner-mode,.weather-tabs,.route-library-filters,.powder-map-tabs) { background:#16181c!important; }
.vertex-v3 #app#app#app#app#app :is(#recordFab,#savePlannedRoute,#startRecord,.record-primary,#routeDetailGo,#saveProfile,#saveSettings,.route-primary,#finishRecord),.vertex-v3 #app#app#app#app#app #recordFab b { color:#0b1520!important; }
/* On/off switches belong to the graphite surface: raised track off, glacier blue when on. */
.vertex-v3 #app#app#app#app :is(#layerPanel .layer-row.layer-switch>i,.settings-toggle input[type="checkbox"],.tour-low-angle input[type="checkbox"]) { background:#3a3f48!important; }
.vertex-v3 #app#app#app#app :is(#layerPanel .layer-row.layer-switch>i,.settings-toggle input[type="checkbox"],.tour-low-angle input[type="checkbox"])::after { background:#e6e9ee; box-shadow:0 1px 3px #00000060; }
.vertex-v3 #app#app#app#app :is(#layerPanel .layer-row.layer-switch[aria-pressed="true"]>i,.settings-toggle input[type="checkbox"]:checked,.tour-low-angle input[type="checkbox"]:checked) { background:#3b82f6!important; }
.vertex-v3 #app#app#app#app :is(#layerPanel .layer-row.layer-switch[aria-pressed="true"]>i,.settings-toggle input[type="checkbox"]:checked,.tour-low-angle input[type="checkbox"]:checked)::after { background:#ffffff; }
/* Ski day / Ski tour chooser on the dark record sheet. */
.vertex-v3 #app#app#app#app #recordChooser { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important; align-items:stretch; }
.vertex-v3 #app#app#app#app #recordChooser .record-choice { min-width:0; min-height:80px!important; padding:10px!important; grid-template-columns:22px minmax(0,1fr); grid-template-areas:"icon title" "copy copy"; gap:5px 8px; }
.vertex-v3 #app#app#app#app #recordChooser .record-choice>span { width:22px; height:22px; display:grid; place-items:center; }
.vertex-v3 #app#app#app#app #recordChooser .record-choice>small { font-size:12px; line-height:1.35; }
.vertex-v3 #app#app#app#app #recordSheet :is(.record-choice,.tour-route-option,#tourNoRoute,.record-change) { background:var(--ui-raised)!important; color:var(--ui-text)!important; border:1px solid #ffffff20!important; }
.vertex-v3 #app#app#app#app #recordSheet :is(.record-choice,.tour-route-option) :is(b,span,svg) { color:var(--ui-text)!important; }
.vertex-v3 #app#app#app#app #recordSheet :is(.record-choice,.tour-route-option) small,.vertex-v3 #app#app#app#app #recordSheet .tour-route-head small,.vertex-v3 #app#app#app#app #recordSheet .tour-route-empty { color:var(--ui-muted)!important; }
.vertex-v3 #app#app#app#app #recordSheet :is(.record-choice[aria-pressed="true"],.tour-route-option.active,#tourNoRoute.active) { background:var(--ui-green)!important; border-color:var(--ui-yellow)!important; }
.vertex-v3 #app#app#app#app #recordSheet .record-choice>span { background:#ffffff10!important; color:var(--ui-text)!important; }
/* Tours open from the area card's Tours tab; the dock has no separate Tours button. */
.vertex-v3 #app#app#app#app #dockTours { display:none!important; }
/* Start activity keeps its yellow (Bjorn 2026-10-14), also on the record sheet's Start button. */
.vertex-v3 #app#app#app#app#app :is(#recordFab,#startRecord) { background:#e5c86d!important; border-color:#e5c86d!important; color:#16181c!important; }
.vertex-v3 #app#app#app#app#app #recordFab b { color:#16181c!important; }
.vertex-v3 #app#app#app#app#app #recordSheet :is(.record-choice[aria-pressed="true"],.tour-route-option.active) small { color:#dbe9ff!important; }
/* Phones: the area card stops well below the map buttons (Bjorn 2026-10-14: it hid My location). */
@media (max-width:899px) {
  .vertex-v3 #app#app#app#app#app #mapSheet #placeCard:not(.collapsed) { height:min(60dvh,520px)!important; max-height:min(60dvh,520px)!important; }
}
/* Phones: search is a compact card at the bottom (Bjorn 2026-10-14). It sits right above the keyboard and grows upwards with results. */
@media (max-width:899px) {
  .vertex-v3 #app#app#app#app#app #findSheet {
    top:auto!important; bottom:calc(env(safe-area-inset-bottom) + 8px)!important; left:8px!important; right:8px!important;
    height:auto!important; min-height:0!important; max-height:calc(100dvh - env(safe-area-inset-top) - 24px)!important;
    padding:8px 12px 12px!important; border-radius:22px!important; z-index:70!important;
    box-shadow:0 10px 30px #00000055!important;
  }
  .vertex-v3 #app#app#app#app#app #findSheet .find-sheet-head { margin:0 0 6px!important; }
  .vertex-v3 #app#app#app#app#app #findSheet .find-sheet-head small { display:none!important; }
  .vertex-v3 #app#app#app#app#app #findSheet .find-sheet-head h2 { font-size:17px!important; margin:0!important; }
  .vertex-v3 #app#app#app#app#app #findSheet .search-icon { display:none!important; }
  .vertex-v3 #app#app#app#app#app #findSheet #searchBox { padding-left:14px!important; }
  .vertex-v3 #app#app#app#app#app #findSheet .search-wrap { display:flex!important; flex-direction:column; }
  .vertex-v3 #app#app#app#app#app #findSheet #searchResults { order:-1; position:static!important; max-height:min(52dvh,420px); overflow-y:auto; margin:0 0 8px!important; }
  .vertex-v3 #app#app#app#app#app #findSheet #searchResults:empty { display:none!important; }
}
/* Phones while recording: one row (stats · map toggles · ✕), nothing stacked on top of another. */
@media (max-width:899px) {
  .vertex-v3 #app#app#app#app#app #activeSession:not([hidden]) { display:flex!important; align-items:center!important; gap:6px!important; padding:6px 6px 6px 8px!important; bottom:calc(8px + env(safe-area-inset-bottom))!important; grid-template-columns:none!important; }
  .vertex-v3 #app#app#app#app#app #activeSession #openActiveSession { order:1; flex:1 1 auto; min-width:0; }
  .vertex-v3 #app#app#app#app#app #activeSession .active-map-controls { order:2; flex:none; opacity:1!important; }
  .vertex-v3 #app#app#app#app#app #activeSession #activeSessionHandle { order:3; position:static!important; inset:auto!important; transform:none!important; flex:none; width:36px!important; height:36px!important; min-width:36px!important; margin:0!important; font-size:22px!important; }
  .vertex-v3 #app#app#app#app#app #activeSession.collapsed #activeSessionHandle { display:none!important; }
  .vertex-v3 #app#app#app#app#app #activeSession #activeSessionTime { font-size:clamp(20px,6.4vw,28px)!important; }
  /* The record card is only as tall as its content, sitting at the bottom to leave the most map. */
  .vertex-v3 #app#app#app#app#app #recordSheet { height:auto!important; max-height:min(78dvh,680px)!important; }
}
@media (max-width:899px) {
  .vertex-v3 #app#app#app#app#app#app:has(#recordSheet:not([hidden])) #activeSession { display:none!important; }
}
@media (max-width:899px) {
  /* ✕ hides the map toggles; the timer stays as a small pill that reopens the controls. */
  .vertex-v3 #app#app#app#app#app #activeSession.collapsed .active-map-controls { display:none!important; }
  .vertex-v3 #app#app#app#app#app #activeSession.collapsed { right:auto!important; max-width:none!important; }
}
/* Snow image: a row of recent satellite pass dates under the background choice. */
.vertex-v3 #app .layer-preview.snow-image { background:linear-gradient(150deg,#f4f8fb 0 30%,#5d6f66 31% 40%,#e8eef3 41% 62%,#3f5247 63% 70%,#dfe8ee 71%); }
.vertex-v3 #app#app#app#app#app #snowImageDates:not([hidden]) { display:flex; gap:6px; overflow-x:auto; padding:2px 2px 10px; margin:-2px 0 4px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.vertex-v3 #app#app#app#app#app #snowImageDates::-webkit-scrollbar { display:none; }
.vertex-v3 #app#app#app#app#app #snowImageDates button { flex:0 0 auto; display:grid; gap:1px; min-width:66px; min-height:44px; padding:6px 10px; border:1px solid #3a3f48; border-radius:12px; background:var(--ui-raised); color:var(--ui-text); text-align:left; font:inherit; }
.vertex-v3 #app#app#app#app#app #snowImageDates button b { font-size:13px; color:var(--ui-text); }
.vertex-v3 #app#app#app#app#app #snowImageDates button small { font-size:11px; color:var(--ui-muted)!important; }
.vertex-v3 #app#app#app#app#app #snowImageDates button[aria-pressed="true"] { background:var(--ui-green); border-color:var(--ui-green); }
.vertex-v3 #app#app#app#app#app #snowImageDates button[aria-pressed="true"] :is(b,small) { color:#fff!important; }
/* Risk colour on the tour list (a choice in the Tours tab): coloured edge + a short word under the facts. */
.vertex-v3 #app#app#app#app#app .area-tour[data-risk] { box-shadow:inset 4px 0 0 var(--risk,#8b989b)!important; }
.vertex-v3 #app#app#app#app#app .area-tour[data-risk="low"] { --risk:#6fdc8c; }
.vertex-v3 #app#app#app#app#app .area-tour[data-risk="mid"] { --risk:#ffd23f; }
.vertex-v3 #app#app#app#app#app .area-tour[data-risk="high"] { --risk:#ff5a4f; }
.vertex-v3 #app#app#app#app#app .area-tour .tour-risk-tag { display:block; margin-top:3px; font-size:12px; font-weight:700; color:var(--risk,#a3abb6); }
.vertex-v3 #app#app#app#app#app .tour-browser-controls .tour-risk { margin-top:6px!important; }
/* Map legends and map context rows (Best snow, Wind loading, Slope, Powder…): a thin strip glued to the
   top edge of the bottom card on phones (the dock, the area card or the open sheet), never floating on the map. */
@media (max-width:899px) {
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack { position:fixed!important; z-index:43!important; top:auto!important; left:12px!important; right:12px!important; bottom:calc(74px + env(safe-area-inset-bottom))!important; display:flex!important; flex-direction:column; overflow:hidden!important; border:1px solid #ffffff30; border-bottom:0; border-radius:22px 22px 0 0; background:var(--ui-base)!important; color:var(--ui-text); box-shadow:none!important; }
  /* No legend shown: nothing drawn (an empty strip's border was a hairline across the map). It keeps its box,
     since the layout measures it to know when a legend appears. */
  .vertex-v3 #app#app#app#app#app#app#app#app #mapSheet #mapContextStack[aria-hidden="true"] { border:0!important; background:none!important; box-shadow:none!important; }
  .vertex-v3 #app#app#app#app#app #mapSheet[data-covered="true"] #mapContextStack { left:0!important; right:0!important; bottom:calc(var(--map-sheet-bottom,12px) - 12px)!important; }
  .vertex-v3 #app#app#app#app#app #mapSheet:has(#placeCard:not(.collapsed):not([hidden])) #mapContextStack { left:0!important; right:0!important; bottom:var(--area-card-h,min(60dvh,520px))!important; }
  /* Thin rows: one line, small type, small swatches. */
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack>* { min-height:30px!important; padding:3px 6px 3px 12px!important; gap:6px!important; font-size:12px!important; border-bottom:1px solid #ffffff14!important; }
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack>*:last-child { border-bottom:0!important; }
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack :is(.wind-load-arrow,.best-snow-dot) { width:20px!important; height:20px!important; min-width:20px!important; }
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack :is(.wind-load-arrow,.best-snow-dot) svg { width:12px!important; height:12px!important; }
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack .cond-short { font-size:12px!important; }
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack :is(b,strong,span,label,button,div,p,.cond-short) { color:var(--ui-text)!important; }
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack :is(small,em) { color:var(--ui-muted)!important; }
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack .legend-close { width:24px!important; height:24px!important; min-width:24px!important; min-height:24px!important; margin-left:auto!important; padding:0!important; font-size:11px!important; background:transparent!important; color:var(--ui-muted)!important; }
  /* Legends lie side by side on one line; more than fit scroll sideways. */
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack { flex-direction:row!important; overflow-x:auto!important; overflow-y:hidden!important; scrollbar-width:none; }
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack::-webkit-scrollbar { display:none; }
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack>* { flex:1 0 auto!important; width:auto!important; max-width:none!important; border-bottom:0!important; border-right:1px solid #ffffff14!important; }
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack>*:last-child { border-right:0!important; }
  /* Steepness in the strip: one colour bar from 25° to 45°+, so it fits beside another legend. */
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack .slope-legend { flex:0 0 auto!important; gap:0!important; align-items:center; }
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack .slope-legend .legend-title { display:none!important; }
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack .slope-legend>span:not(.legend-title) { display:flex; align-items:center; gap:0!important; margin:0!important; padding:0!important; font-size:0!important; }
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack .slope-legend>span>i { width:14px!important; height:10px!important; margin:0!important; border-radius:0!important; }
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack .slope-legend>span:nth-child(2)>i { border-radius:3px 0 0 3px!important; }
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack .slope-legend>span:last-of-type>i { border-radius:0 3px 3px 0!important; }
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack .slope-legend>span:nth-child(2)::before { content:"25°"; margin-right:5px; font-size:12px; color:var(--ui-text); }
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack .slope-legend>span:last-of-type::after { content:"45°+"; margin-left:5px; font-size:12px; color:var(--ui-text); }
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack .slope-legend .legend-close { margin-left:6px!important; }
  /* Steepness alone: every band with its degrees. */
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack[data-count="1"] .slope-legend { flex:1 1 auto!important; justify-content:space-between; }
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack[data-count="1"] .slope-legend>span:not(.legend-title) { gap:4px!important; margin-right:7px!important; font-size:12px!important; }
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack[data-count="1"] .slope-legend>span>i { width:10px!important; height:10px!important; border-radius:3px!important; }
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack[data-count="1"] .slope-legend>span::before,.vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack[data-count="1"] .slope-legend>span::after { content:none!important; }
  /* Start activity: a glacier-blue play button at the right end of the search card. */
  .vertex-v3 #app#app#app#app#app #thumbDock #recordFab#recordFab { position:static!important; inset:auto!important; translate:none!important; transform:none!important; order:9; flex:none!important; width:48px!important; min-width:48px!important; max-width:none!important; height:48px!important; margin:0 0 0 6px!important; padding:0!important; border-radius:50%!important; border:0!important; background:var(--ui-green)!important; color:#fff!important; box-shadow:none!important; align-items:center!important; justify-content:center!important; }
  .vertex-v3 #app#app#app#app#app #thumbDock #recordFab#recordFab b { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip-path:inset(50%)!important; white-space:nowrap; }
  .vertex-v3 #app#app#app#app#app #thumbDock #recordFab :is(.record-fab-play,.record-fab-dot) { width:24px!important; height:24px!important; color:#fff!important; }
  .vertex-v3 #app#app#app#app#app #thumbDock #recordFab .record-fab-play { margin-left:2px; }
  .vertex-v3 #app#app#app#app#app #thumbDock #recordFab:not(.recording-active) .record-fab-dot,.vertex-v3 #app#app#app#app#app #thumbDock #recordFab.recording-active .record-fab-play { display:none!important; }
  .vertex-v3 #app#app#app#app#app #thumbDock #recordFab#recordFab.recording-active { background:#e5484d!important; }
  .vertex-v3 #app#app#app#app#app #thumbDock #recordFab.recording-active .record-fab-dot { animation:recordFabPulse 1.6s ease-in-out infinite; }
  /* Strip and the card below read as one card: same surface, same width, a hairline between them. */
  .vertex-v3 #app#app#app#app#app:has(#mapSheet[data-mode="home"] #mapContextStack[aria-hidden="false"]):not(:has(#placeCard:not(.collapsed):not([hidden]))) #thumbDock { border-top-color:#ffffff14!important; border-radius:0 0 28px 28px!important; box-shadow:0 10px 18px #10202a30!important; }
  .vertex-v3 #app#app#app#app#app #mapSheet:is([data-covered="true"],:has(#placeCard:not(.collapsed):not([hidden]))) #mapContextStack { border:0!important; border-bottom:1px solid #ffffff14!important; border-radius:24px 24px 0 0!important; background:var(--ui-surface)!important; }
  .vertex-v3 #app#app#app#app#app:has(#mapContextStack[aria-hidden="false"]) :is(#mapSheet #placeCard:not(.collapsed),#routePlanner,#routeDetail,#recordSheet,#exploreSheet,#avalancheSheet,#todayBriefSheet) { border-top-left-radius:0!important; border-top-right-radius:0!important; }
  /* Start activity and the map buttons step up by the strip, so it never covers them. */
  .vertex-v3 #app#app#app:has(#mapSheet[data-mode="home"] #mapContextStack[aria-hidden="false"]):not(:has(#placeCard:not(.collapsed):not([hidden]))) #thumbRail { translate:0 calc(-1 * var(--legend-strip-h,0px)); }
}
@keyframes recordFabPulse { 50% { opacity:.35; } }
:is(.record-fab-dot,.record-fab-play) { display:none; }
@media (max-width:899px) { .vertex-v3 #app :is(.record-fab-dot,.record-fab-play) { display:block; } }
/* Route planner Save: same shape as Delete and Undo; glacier blue with a white icon once there is something to save. */
.vertex-v3 #app#app#app#app#app #routePlanner #savePlannedRoute { background:var(--ui-raised)!important; color:var(--ui-muted)!important; border:1px solid #ffffff25!important; opacity:1!important; }
.vertex-v3 #app#app#app#app#app #routePlanner #savePlannedRoute:not(:disabled) { background:var(--ui-green)!important; border-color:var(--ui-green)!important; color:#fff!important; }
/* Full check 2026-10-14: last pieces still in the old light/green design. */
.vertex-v3 #app#app#app#app#app :is(#youButton,#locationButton,#placeChangeArea,#favoritePlace,#resortStatus,#refreshWeather,#weatherBack,#backRouteDetail,#routeDetailMore,#routeDetailMenu button,#routeDetailStats span,#routeToday,#routeCommunityInfo,.route-detail-actions,.route-elevation-profile,#powderCard,#snowAspects,.powder-card-foot,#weatherOverview,#layerPanel .layer-row,.tb-row,.tb-foot) { border-color:#ffffff14!important; }
.vertex-v3 #app#app#app#app#app :is(#weatherBack,#refreshWeather,#backRouteDetail,#routeDetailMore,#routeDetailMenu button:not(.danger)) { color:var(--ui-text)!important; background:var(--ui-raised)!important; }
.vertex-v3 #app#app#app#app#app #routeDetailMenu { background:var(--ui-surface)!important; border:1px solid #ffffff14!important; }
.vertex-v3 #app#app#app#app#app #routePlanner .planner-heading>small { color:var(--ui-text)!important; }
/* One primary action per screen: solid glacier blue with white text; the rest are raised graphite. */
.vertex-v3 #app#app#app#app#app#app :is(#startRecord,#routeDetailGo) { background:#3b82f6!important; border-color:#3b82f6!important; color:#ffffff!important; }
.vertex-v3 #app#app#app#app#app#app :is(#routeDetailReplay,#routeDetailSaveCommunity) { background:var(--ui-raised)!important; color:var(--ui-text)!important; border:1px solid #ffffff14!important; }
.vertex-v3 #app#app#app#app#app#app #routeDetailReplay em { color:var(--ui-muted)!important; }
/* Avalanche danger: Regions / On terrain use the same segmented style as the other tabs. */
.vertex-v3 #app#app#app#app .avalanche-mode button { background:var(--ui-raised)!important; border-color:#ffffff14!important; color:var(--ui-muted)!important; }
.vertex-v3 #app#app#app#app .avalanche-mode button:is(.active,[aria-pressed="true"]) { background:#3b82f6!important; border-color:#3b82f6!important; color:#ffffff!important; }
.vertex-v3 #app .layer-preview.avalanche { background:linear-gradient(145deg,#2a2e35,#3a3f48)!important; }
/* Weather map: graphite bars over the map, same as every other card. */
.vertex-v3 #app#app#app #weatherMapView { background:var(--ui-base)!important; border-color:#ffffff14!important; }
.vertex-v3 #app#app#app :is(.wxm-bar,.wxm-layers,.wxm-bottom) { background:#1e2126f0!important; border-color:#ffffff14!important; box-shadow:0 10px 26px #00000050!important; }
.vertex-v3 #app#app#app .wxm-icon { background:var(--ui-raised)!important; border-color:#ffffff14!important; color:var(--ui-text)!important; }
.vertex-v3 #app#app#app :is(.wxm-title b,.wxm-time b) { color:var(--ui-text)!important; }
.vertex-v3 #app#app#app :is(.wxm-title small,.wxm-legend>div,.wxm-time span,.wxm-days span) { color:var(--ui-muted)!important; }
.vertex-v3 #app#app#app .wxm-layers button { color:var(--ui-muted)!important; }
.vertex-v3 #app#app#app :is(.wxm-layers button.active,.wxm-play) { background:#3b82f6!important; color:#ffffff!important; box-shadow:none!important; }
.vertex-v3 #app#app#app .wxm-slider input { accent-color:#3b82f6; }
.vertex-v3 #app#app#app .wxm-days span:before { background:#ffffff30; }
.vertex-v3 #app#app#app#app #weatherMapStatus { background:#1e2126f0!important; color:var(--ui-text)!important; }
/* Tour card stats: "~3 h 03 min" fits its tile instead of ending in "…". */
.vertex-v3 #app#app#app#app #routeDetailStats>span>b { font-size:clamp(14px,4.4vw,20px)!important; text-overflow:clip!important; letter-spacing:-.01em; }
/* Ski log totals and every sheet's back arrow on the graphite surface. */
.vertex-v3 #app#app#app#app#app :is(.activities-totals,.activity-detail-stats,.community-profile-stats) { background:transparent!important; gap:8px!important; border:0!important; }
.vertex-v3 #app#app#app#app#app :is(.activities-totals,.activity-detail-stats,.community-profile-stats)>span { background:var(--ui-raised)!important; border:1px solid #ffffff14!important; border-radius:14px!important; }
.vertex-v3 #app#app#app#app#app :is(.activities-totals,.activity-detail-stats,.community-profile-stats)>span>b { color:var(--ui-text)!important; }
.vertex-v3 #app#app#app#app#app :is(.activities-totals,.activity-detail-stats,.community-profile-stats)>span>small { color:var(--ui-muted)!important; }
.vertex-v3 #app#app#app#app#app button:is([aria-label="Back"],[aria-label^="Back to"],.panel-back,.weather-back) { color:var(--ui-text)!important; border-color:#ffffff14!important; }
/* Friends & people / Profile: one header with one ✕ (no stacked "Community" and profile heads). */
.vertex-v3 #app#app#app#app #communityView:has(#peopleContextNav:not([hidden])) .community-head { display:none!important; }
.vertex-v3 #app#app#app#app #communityView:has(#communityProfileView:not([hidden])) #peopleContextNav { display:none!important; }
.vertex-v3 #app#app#app#app #communityView .community-profile-head { display:flex!important; align-items:center!important; gap:12px!important; }
.vertex-v3 #app#app#app#app #communityView .community-profile-head>div { flex:1 1 auto!important; min-width:0; text-align:left!important; }
.vertex-v3 #app#app#app#app #communityView .community-profile-head .panel-dismiss { order:10; margin-left:auto; }
.vertex-v3 #app#app#app#app #peopleMyProfileTab { background:var(--ui-raised)!important; color:var(--ui-text)!important; border-color:#ffffff14!important; }
.vertex-v3 #app#app#app#app #communityView :is(input[type="search"],input[type="text"]) { background:var(--ui-raised)!important; color:var(--ui-text)!important; border-color:#ffffff20!important; }
.vertex-v3 #app#app#app#app #communityView form button,.vertex-v3 #app#app#app#app #communityView .community-search button { background:#3b82f6!important; color:#ffffff!important; border-color:#3b82f6!important; }
.vertex-v3 #app#app#app#app #communityView .community-search { background:var(--ui-raised)!important; border-color:#ffffff20!important; color:var(--ui-muted)!important; }
.vertex-v3 #app#app#app#app #communityView .community-search input { background:transparent!important; border:0!important; }
.vertex-v3 #app#app#app#app #communityView :is(.community-profile,#communityHeaderAvatar) { background:var(--ui-raised)!important; color:var(--ui-text)!important; }
.vertex-v3 #app#app#app#app #settingsUpgrade { background:#3a3f48!important; color:var(--ui-text)!important; border:1px solid #ffffff14!important; }
/* Weather map: dark behind the map while it loads, and one way out (the header's ‹ and ✕). */
.vertex-v3 #app#app#app :is(#weatherMapCanvas,.weather-map-view) { background:var(--ui-base)!important; }
@media (max-width:899px) { .vertex-v3 #app#app#app:has(#weatherView .weather-head:not([hidden])) #weatherMapClose { visibility:hidden!important; } }
.vertex-v3 #app#app#app .wxm-bar { grid-template-columns:40px minmax(0,1fr) 40px!important; }
/* Last bits: Settings Save is the screen's one blue action; light hairlines on dark. */
.vertex-v3 #app#app#app#app#app#app #saveSettings { background:#3b82f6!important; border-color:#3b82f6!important; color:#ffffff!important; }
.vertex-v3 #app#app#app#app#app :is(#todayBriefBody .avalanche-level.small,#avalancheBody input,#avalancheBody button,#avalancheBody .avalanche-archive,#tourRoutePicker) { border-color:#ffffff1f!important; }
.vertex-v3 #app#app { background:#16181c; }
/* Every back arrow is the same round button. */
.vertex-v3 #app#app#app#app#app :is(#peopleBackToYou,#communityProfileBack) { border-radius:50%!important; width:44px!important; height:44px!important; min-width:44px!important; padding:0!important; }
/* Planner ✕ with a line drawn: one question in the sheet, Keep editing or Discard. */
.vertex-v3 #app#app#app#app #routePlanner .planner-discard { display:flex; align-items:center; gap:8px; margin:4px 0 10px; padding:10px 10px 10px 14px; border-radius:16px; background:var(--ui-raised); border:1px solid #ffffff14; }
.vertex-v3 #app#app#app#app #routePlanner .planner-discard[hidden] { display:none!important; }
.vertex-v3 #app#app#app#app #routePlanner .planner-discard span { flex:1 1 auto; min-width:0; font-weight:700; color:var(--ui-text); }
.vertex-v3 #app#app#app#app #routePlanner .planner-discard button { flex:none; min-height:40px; padding:0 14px; border-radius:12px; font-weight:700; border:1px solid #ffffff14; background:#3a3f48; color:var(--ui-text); }
.vertex-v3 #app#app#app#app #routePlanner .planner-discard #plannerDiscardYes { background:#e5484d; border-color:#e5484d; color:#ffffff; }
.vertex-v3 #app#app#app#app #routePlanner .planner-discard span { font-size:15px!important; }
.vertex-v3 #app#app#app#app #routePlanner .planner-discard button { font-size:14px!important; }
/* Route colors describe the hillside, with the same compact numeric legend in both modes. */
.vertex-v3 #app#app#app#app #routePlanner #routePlannerSteep { color:var(--ui-muted)!important; }
.vertex-v3 #app#app#app#app #routePlanner .safe-line-legend i:is(.incline-green,.caution,.danger,.level,.unknown) { width:22px; height:5px; border:0; border-radius:3px; box-shadow:none; clip-path:none; }
.vertex-v3 #app#app#app#app #routePlanner .safe-line-legend i.incline-green { background:#42df9b!important; }
.vertex-v3 #app#app#app#app #routePlanner .safe-line-legend i.caution { background:#ffc137!important; }
.vertex-v3 #app#app#app#app #routePlanner .safe-line-legend i.danger { background:#ef4b2d!important; }
.vertex-v3 #app#app#app#app #routePlanner .safe-line-legend i.level { background:#f4f8fb!important; }
.vertex-v3 #app#app#app#app #routePlanner .safe-line-legend i.unknown { background:#aab5bd!important; }
.vertex-v3 #app#app#app#app #routePlanner .safe-line-legend i:is(.arrow-up,.arrow-down) { width:auto; height:auto; background:none!important; border:0; box-shadow:none; color:#fff; font-style:normal; font-size:11px; letter-spacing:-2px; line-height:1; -webkit-text-stroke:.6px #111820; text-shadow:0 0 2px #111820,0 0 1px #111820; }
.vertex-v3 #app#app#app#app #routePlanner .safe-line-legend { gap:7px 12px!important; color:var(--ui-text)!important; }
.vertex-v3 #app#app#app#app #routePlanner .safe-line-legend .route-color-title { flex-basis:100%; color:var(--ui-muted); font-size:11px; font-weight:600; }
.vertex-v3 #app#app#app#app #routePlanner #routePlannerColorNote { color:var(--ui-muted)!important; font-size:11.5px!important; line-height:1.4; }
/* "1 route ×" chip for routes shown on the map: graphite like the rest of the map chrome. */
.vertex-v3 #app#app#app#app #mapRouteChip,.vertex-v3 #app#app#app#app #mapRouteChip button { background:var(--ui-surface)!important; color:var(--ui-text)!important; border-color:#ffffff1f!important; }
/* Map-first Auto line facts, anchored beside the same + that opens the full plan. */
.vertex-v3 #app#app#app#app #quickPlanSummary {
  position:fixed; z-index:45; display:flex; flex-direction:column; justify-content:center; gap:4px;
  min-height:64px; padding:9px 12px; border:1px solid #ffffff26; border-radius:15px;
  background:var(--ui-surface); color:var(--ui-text); box-shadow:0 4px 18px #0004;
  text-align:left; cursor:pointer;
}
.vertex-v3 #app#app#app#app #quickPlanNumbers { font:650 12px/1.4 system-ui; color:var(--ui-text); }
.vertex-v3 #app#app#app#app #quickPlanHint { font:500 10px/1.3 system-ui; color:var(--ui-muted); }
.vertex-v3 #app#app#app#app #quickPlanSummary[hidden],
.vertex-v3 #app#app#app#app[data-finding] #quickPlanSummary,
.vertex-v3 #app#app#app#app:not([data-section="explore"]) #quickPlanSummary,
.vertex-v3 #app#app#app#app:has(#routePlanner:not([hidden]),#placeCard:not(.collapsed):not([hidden]),#layerPanel:not([hidden]),#routeDetail:not([hidden]),#avalancheSheet:not([hidden]),#recordSheet:not([hidden]),#activeSession:not([hidden]),#replayControls:not([hidden])) #quickPlanSummary { display:none!important; }
.vertex-v3 #app#app#app#app #quickPlanDetails {
  display:flex; flex-direction:column; gap:4px; width:100%; margin:0; padding:0;
  border:0; border-radius:6px; background:transparent; color:var(--ui-text); text-align:left;
}
.vertex-v3 #app#app#app#app .quick-plan-actions { display:flex; justify-content:flex-end; gap:6px; padding-top:6px; border-top:1px solid #ffffff18; }
.vertex-v3 #app#app#app#app .quick-plan-actions button {
  display:grid; place-items:center; flex:none; width:40px; height:40px; padding:9px;
  border:1px solid #ffffff20; border-radius:10px; background:var(--ui-raised); color:var(--ui-text);
}
.vertex-v3 #app#app#app#app .quick-plan-actions svg { width:20px; height:20px; color:inherit; }
.vertex-v3 #app#app#app#app .quick-plan-actions #quickPlanSave { background:#3b82f6; color:#fff; }
/* Bjorn 2026-10-16: keep cards low so the map gets the room. The quick plan card is one row:
   numbers on the left, small undo/delete/save on the right, no hint line. */
.vertex-v3 #app#app#app#app #quickPlanSummary { flex-direction:row; align-items:center; gap:8px; min-height:0; padding:6px 6px 6px 10px; border-radius:13px; }
.vertex-v3 #app#app#app#app #quickPlanDetails { flex:1 1 auto; min-width:0; gap:0; }
.vertex-v3 #app#app#app#app #quickPlanNumbers { font-size:12px; line-height:1.3; }
.vertex-v3 #app#app#app#app #quickPlanHint { display:none; }
.vertex-v3 #app#app#app#app .quick-plan-actions { flex:none; gap:4px; padding-top:0; border-top:0; }
.vertex-v3 #app#app#app#app .quick-plan-actions button { width:34px; height:34px; padding:7px; border-radius:9px; }
.vertex-v3 #app#app#app#app .quick-plan-actions svg { width:18px; height:18px; }
/* Phones: every card is only as tall as its content, and none goes above about half the screen.
   Full-screen pages (weather, community, ski log) keep their size. */
@media (max-width:899px) {
  .vertex-v3 #app#app#app#app#app :is(#layerPanel,#routeDetail,#youSheet,#exploreSheet,#compareSheet,#avalancheSheet,#todayBriefSheet) {
    height:auto!important; max-height:min(58dvh,500px)!important;
  }
  .vertex-v3 #app#app#app#app#app :is(#routePlanner,#recordSheet) { height:auto!important; max-height:min(50dvh,430px)!important; }
  .vertex-v3 #app#app#app#app#app #mapSheet #placeCard:not(.collapsed) { height:auto!important; max-height:min(52dvh,450px)!important; }
}
/* Reach (Bjorn 2026-10-16): skinning time bands, same colours as on the map */
.vertex-v3 #app .reach-legend .r1 { background:#42d6a4; }
.vertex-v3 #app .reach-legend .r2 { background:#96dc5a; }
.vertex-v3 #app .reach-legend .r3 { background:#f5c846; }
.vertex-v3 #app .reach-legend .r4 { background:#f0823c; }
.vertex-v3 #app .reach-legend .reach-legend-note { font-weight:500; }
.vertex-v3 #app .reach-legend .reach-legend-note:empty { display:none; }
/* Planner modes (Bjorn 2026-10-16): Draw · Auto line · Spot on one row, smaller */
.vertex-v3 #app#app#app#app#app .route-planner-mode { padding:3px!important; gap:3px!important; margin:0 0 10px!important; }
.vertex-v3 #app#app#app#app#app .route-planner-mode button { flex:1 1 0!important; min-height:32px!important; height:32px!important; padding:0 8px!important; font:600 12.5px/1 system-ui,sans-serif!important; display:inline-flex; align-items:center; justify-content:center; gap:4px; }
.vertex-v3 #app#app#app#app#app .route-planner-mode button svg { width:14px; height:14px; }
/* Spots: one point of your own on the map, card at the bottom like every other card */
.vertex-v3 #app .spot-card { position:fixed; z-index:46; left:0; right:0; bottom:0; padding:12px 14px calc(14px + env(safe-area-inset-bottom)); border-radius:22px 22px 0 0; background:var(--ui-base,#1e2126); color:var(--ui-text,#fff); border:1px solid #ffffff1c; border-bottom:0; box-shadow:0 -8px 24px #0006; display:grid; gap:8px; }
.vertex-v3 #app .spot-card[hidden] { display:none; }
@media (min-width:900px) { .vertex-v3 #app .spot-card { left:var(--desk-card-left,12px); right:auto; bottom:16px; width:var(--desk-card,376px); border-radius:22px; border-bottom:1px solid #ffffff1c; } }
.vertex-v3 #app .spot-head { display:flex; align-items:center; gap:8px; }
.vertex-v3 #app .spot-pin { display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:50%; background:#3b82f6; color:#fff; }
.vertex-v3 #app .spot-pin svg { width:17px; height:17px; }
.vertex-v3 #app .spot-head input { flex:1; min-width:0; height:34px; padding:0 8px; border:1px solid transparent; border-radius:9px; background:transparent; color:inherit; font:650 17px/1.2 system-ui,sans-serif; }
.vertex-v3 #app .spot-head input:focus { outline:none; border-color:#ffffff30; background:#ffffff0d; }
.vertex-v3 #app .spot-head button { width:34px; height:34px; flex:none; border:0; border-radius:50%; background:#2a2e35; color:inherit; font-size:18px; }
.vertex-v3 #app .spot-card>small { padding-left:38px; color:var(--ui-muted,#9aa3ad); font-size:12.5px; }
.vertex-v3 #app .spot-actions { display:flex; gap:6px; }
.vertex-v3 #app .spot-actions button { flex:1; height:38px; border:0; border-radius:10px; background:#2a2e35; color:inherit; font:600 13px system-ui,sans-serif; }
.vertex-v3 #app .spot-actions button.primary { background:#3b82f6; color:#fff; }

/* Terrain height at the exact centre of the visible map; gestures pass through. */
.vertex-v3 #app #mapCenterAltitude { position:absolute; z-index:5; left:50%; top:50%; width:20px; height:20px; transform:translate(-50%,-50%); pointer-events:none; user-select:none; color:#fff; }
.vertex-v3 #app #mapCenterAltitude output { position:absolute; left:50%; bottom:calc(100% + 5px); transform:translateX(-50%); white-space:nowrap; font:650 14px/1.25 system-ui,sans-serif; font-variant-numeric:tabular-nums; text-shadow:-1px -1px 0 #142027,1px -1px 0 #142027,-1px 1px 0 #142027,1px 1px 0 #142027,0 2px 4px #000; }
.vertex-v3 #app #mapCenterAltitude svg { display:block; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; filter:drop-shadow(0 1px 1px #000) drop-shadow(0 -1px 1px #142027); }
.vertex-v3 #app #mapCenterAltitude .map-center-dot { fill:var(--ui-yellow); stroke:none; }

/* The + grows into one persistent, map-first creation toolbar. */
.vertex-v3 #app#app#app#app#app #mapCreateTools {
  --create-tools-width:min(340px,calc(100vw - 24px));
  position:fixed; z-index:45; right:12px; bottom:20px;
  display:flex; align-items:center; justify-content:flex-end; flex:none;
  width:48px; height:48px; padding:0; overflow:hidden; box-sizing:border-box;
  border:1px solid #ffffff30; border-radius:28px; background:var(--ui-surface); color:var(--ui-text);
  box-shadow:0 4px 18px #0004; transition:width 240ms cubic-bezier(.2,.8,.2,1),height 240ms,padding 240ms;
}
.vertex-v3 #app#app#app#app#app #mapCreateTools[data-open="true"] { width:var(--create-tools-width); height:72px; padding:4px; }
.vertex-v3 #app#app#app#app#app #mapCreateModes { display:flex; flex:none; width:calc(var(--create-tools-width) - 58px); gap:2px; margin-right:48px; }
.vertex-v3 #app#app#app#app#app #mapCreateModes[hidden] { display:none!important; }
.vertex-v3 #app#app#app#app#app #mapCreateModes > #mapCreateDiscard[hidden] { display:none!important; }
.vertex-v3 #app#app#app#app#app :is(#mapCreateModes>button,#mapCreateTools>#dockPlan) {
  position:static!important; display:flex!important; flex-direction:column; align-items:center; justify-content:center;
  flex:1 1 0; gap:2px; min-width:0!important; width:auto!important; height:46px!important; margin:0!important; padding:3px 4px!important;
  border:0!important; border-radius:22px!important; background:transparent!important; color:var(--ui-text)!important;
  box-shadow:none!important; font:600 12px/1.15 system-ui,sans-serif; white-space:nowrap;
}
.vertex-v3 #app#app#app#app#app #mapCreateTools button .ui-icon { width:19px; height:19px; color:inherit; }
.vertex-v3 #app#app#app#app#app #mapCreateTools #mapCreateModes button[aria-pressed="true"] { background:var(--ui-green)!important; color:var(--ui-on-dark)!important; }
.vertex-v3 #app#app#app#app#app #mapCreateTools #dockPlan { position:absolute!important; right:0; top:0; flex:0 0 46px; width:46px!important; min-width:46px!important; height:46px!important; padding:12px!important; border-radius:50%!important; background:var(--ui-green)!important; transition:right 240ms cubic-bezier(.2,.8,.2,1),top 240ms; }
.vertex-v3 #app#app#app#app#app #mapCreateTools #dockPlan b { display:none!important; }
.vertex-v3 #app#app#app#app#app #mapCreateTools #dockPlan svg { flex:none; width:22px; height:22px; transition:transform 240ms; }
.vertex-v3 #app#app#app#app#app #mapCreateTools[data-open="true"] #dockPlan { background:transparent!important; }
.vertex-v3 #app#app#app#app#app #mapCreateTools[data-open="true"] #dockPlan { right:4px; top:12px; }
.vertex-v3 #app#app#app#app#app #mapCreateTools[data-open="true"] #dockPlan svg { transform:rotate(45deg); }
.vertex-v3 #app#app#app#app#app #mapCreateTools[data-selected="true"] { padding:8px 56px 8px 58px; overflow:visible; }
.vertex-v3 #app#app#app#app#app .map-create-selected-icon { display:none; position:absolute; left:8px; top:12px; width:46px; height:46px; align-items:center; justify-content:center; color:var(--ui-yellow); }
.vertex-v3 #app#app#app#app#app #mapCreateTools[data-selected="true"] .map-create-selected-icon { display:flex; }
.vertex-v3 #app#app#app#app#app .map-create-selected-icon svg { display:none; width:23px; height:23px; }
.vertex-v3 #app#app#app#app#app[data-create-mode="draw"] [data-create-icon="draw"],
.vertex-v3 #app#app#app#app#app[data-create-mode="safe"] [data-create-icon="safe"],
.vertex-v3 #app#app#app#app#app[data-create-mode="spot"] [data-create-icon="spot"] { display:block; }
.vertex-v3 #app#app#app#app#app #mapCreateIntro { display:flex; flex:1; flex-direction:column; gap:4px; min-width:0; }
.vertex-v3 #app#app#app#app#app #mapCreateIntro[hidden] { display:none; }
.vertex-v3 #app#app#app#app#app #mapCreateIntro b { font:650 14px/1.35 system-ui; }
.vertex-v3 #app#app#app#app#app #mapCreateIntro small { color:var(--ui-muted); font:500 12px/1.3 system-ui; }
.vertex-v3 #app#app#app#app#app #mapCorner .map-plan-oval { display:none!important; }
.vertex-v3 #app#app#app#app#app #mapCreateTools button:focus-visible { outline:2px solid var(--ui-yellow); outline-offset:-3px; }
.vertex-v3 #app#app#app#app#app #mapCreateTools>#quickPlanSummary { position:static; flex:1; flex-direction:column; align-items:stretch; gap:0; width:auto!important; min-width:0; height:auto; min-height:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.vertex-v3 #app#app#app#app#app #mapCreateTools #quickPlanDetails { width:100%!important; height:auto!important; min-height:48px; align-items:flex-start; justify-content:center; gap:3px; border:0!important; background:transparent!important; text-align:left; }
.vertex-v3 #app#app#app#app#app #mapCreateTools #quickPlanHint { display:block; font-size:10px; }
.vertex-v3 #app#app#app#app#app #mapCreateTools #quickPlanNumbers { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; white-space:pre-line; font-size:13px; }
.vertex-v3 #app#app#app#app#app #mapCreateTools .quick-plan-actions { position:absolute; right:58px; top:-50px; bottom:auto; gap:8px; padding:0; border:0; }
.vertex-v3 #app#app#app#app#app #mapCreateTools .quick-plan-actions button { width:44px!important; min-width:44px!important; height:44px!important; padding:11px!important; border-radius:50%!important; background:var(--ui-raised)!important; box-shadow:0 2px 8px #0005; }
.vertex-v3 #app#app#app#app#app #mapCreateTools .quick-plan-actions #quickPlanSave { background:var(--ui-green)!important; }
.vertex-v3 #app#app#app#app#app[data-map-create] #spotCard { right:auto; bottom:auto; padding:10px; border-radius:15px; border:1px solid #ffffff26; background:var(--ui-surface); box-shadow:0 4px 18px #0004; }
.vertex-v3 #app#app#app#app#app[data-map-create] #spotCard .spot-head { gap:4px; min-width:0; }
.vertex-v3 #app#app#app#app#app[data-map-create] #spotCard .spot-head input { width:0; height:44px; font-size:16px; }
.vertex-v3 #app#app#app#app#app[data-map-create] #spotCard .spot-head button { width:44px; height:44px; }
.vertex-v3 #app#app#app#app#app[data-map-create] #spotCard>small { padding-left:0; font-size:12px; }
.vertex-v3 #app#app#app#app#app[data-map-create] #spotCard .spot-actions { flex-wrap:wrap; }
.vertex-v3 #app#app#app#app#app[data-map-create] #spotCard .spot-actions button { min-height:44px; height:auto; padding:6px; font-size:12px; }
.vertex-v3 #app#app#app#app#app :is(#quickPlanUndo,#quickPlanDelete,#quickPlanSave):disabled { opacity:.4; }
.vertex-v3 #app#app#app#app#app #quickPlanSummary:has(#quickPlanSave:disabled) { cursor:default; }
.vertex-v3 #app#app#app#app#app[data-map-create]:is([data-finding],:not([data-section="explore"]),:has(#routePlanner:not([hidden]),#routeDetail:not([hidden]),#recordSheet:not([hidden]),#activeSession:not([hidden]),#layerPanel:not([hidden]),#exploreSheet:not([hidden]),#youSheet:not([hidden]),#activitiesSheet:not([hidden]),#activityDetail:not([hidden]),#compareSheet:not([hidden]),#avalancheSheet:not([hidden]),#todayBriefSheet:not([hidden]),#communityView:not([hidden]),#replayControls:not([hidden]),#placeCard:not(.collapsed):not([hidden]))) #spotCard { display:none!important; }
.vertex-v3 #app#app#app#app#app:has(#spotCard:not([hidden])) #quickPlanSummary,
.vertex-v3 #app#app#app#app#app[data-finding] #mapCreateTools,
.vertex-v3 #app#app#app#app#app:not([data-section="explore"]) #mapCreateTools,
.vertex-v3 #app#app#app#app#app:has(#routePlanner:not([hidden]),#routeDetail:not([hidden]),#recordSheet:not([hidden]),#activeSession:not([hidden]),#layerPanel:not([hidden]),#exploreSheet:not([hidden]),#youSheet:not([hidden]),#activitiesSheet:not([hidden]),#activityDetail:not([hidden]),#compareSheet:not([hidden]),#avalancheSheet:not([hidden]),#todayBriefSheet:not([hidden]),#communityView:not([hidden]),#replayControls:not([hidden]),#placeCard:not(.collapsed):not([hidden])) #mapCreateTools { display:none!important; }
@media (max-width:899px) {
  .vertex-v3 #app#app#app#app#app #thumbRail { align-items:flex-end; }
  .vertex-v3 #app#app#app#app#app #thumbRail #mapCreateTools { position:relative; right:auto; bottom:auto; }
}
@media (prefers-reduced-motion:reduce) {
  .vertex-v3 #app#app#app#app#app #mapCreateTools,.vertex-v3 #app#app#app#app#app #mapCreateTools #dockPlan,.vertex-v3 #app#app#app#app#app #mapCreateTools #dockPlan svg { transition:none; }
  .vertex-v3 #app#app#app#app#app #mapCreateTools #mapCreateModes { animation:none; }
}

/* Area chooser is an opaque page. Its header and search stay above the scrolling places. */
.vertex-v3 #app#app#app#app#app#app #findSheet { display:none!important; }
.vertex-v3 #app#app#app#app#app#app[data-finding] #findSheet {
  position:fixed!important; display:flex!important; flex-direction:column!important; align-items:stretch!important;
  inset:0!important; z-index:90!important; width:auto!important; max-width:none!important; height:100dvh!important;
  min-height:0!important; max-height:none!important; margin:0!important; gap:16px!important;
  padding:max(12px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))!important;
  border:0!important; border-radius:0!important; background:var(--ui-surface)!important; color:var(--ui-text)!important;
  box-shadow:none!important; backdrop-filter:none!important; transform:none!important; translate:none!important; clip-path:none!important;
  overflow:hidden!important; box-sizing:border-box; color-scheme:dark;
}
.vertex-v3 #app#app#app#app#app#app #findSheet .find-sheet-head { flex:none; position:static!important; width:100%; max-width:680px; min-height:48px; margin:0 auto!important; padding:0!important; box-shadow:none!important; background:var(--ui-surface)!important; }
.vertex-v3 #app#app#app#app#app#app #findSheet .find-sheet-head>div { flex:1; }
.vertex-v3 #app#app#app#app#app#app #findSheet .find-sheet-head h2 { margin:0!important; font:650 22px/1.2 system-ui,sans-serif!important; color:var(--ui-text)!important; }
.vertex-v3 #app#app#app#app#app#app #findSheet #findCancel { flex:none; width:44px!important; height:44px!important; min-width:44px!important; margin:0!important; padding:0!important; border:0!important; border-radius:50%!important; background:var(--ui-raised)!important; color:var(--ui-text)!important; font:400 24px/1 system-ui,sans-serif!important; }
.vertex-v3 #app#app#app#app#app#app #findSheet .search-wrap { display:flex!important; flex-direction:column!important; flex:1; min-height:0; width:100%!important; max-width:680px; gap:16px; margin:0 auto!important; overflow:hidden; }
.vertex-v3 #app#app#app#app#app#app #findSheet #searchBox { flex:none; height:52px!important; padding:2px 4px!important; }
.vertex-v3 #app#app#app#app#app#app #findSheet #placeSearch { font:400 16px/1.3 system-ui,sans-serif!important; height:44px!important; }
.vertex-v3 #app#app#app#app#app#app #findSheet #placeSearch::-webkit-search-cancel-button { -webkit-appearance:none; }
.vertex-v3 #app#app#app#app#app#app #findSheet :is(.search-submit,#clearPlaceSearch) { display:grid; place-items:center; flex:0 0 44px; width:44px!important; height:44px!important; min-height:44px; margin:0; padding:0!important; border:0!important; border-radius:10px!important; background:transparent!important; color:var(--ui-muted)!important; }
.vertex-v3 #app#app#app#app#app#app #findSheet .search-submit svg { width:20px; height:20px; color:inherit!important; }
.vertex-v3 #app#app#app#app#app#app #findSheet #clearPlaceSearch { font:400 23px/1 system-ui; }
.vertex-v3 #app#app#app#app#app#app #findSheet :is(#clearPlaceSearch,#areaChooserBrowse,#searchResults)[hidden] { display:none!important; }
.vertex-v3 #app#app#app#app#app#app #findSheet #areaChooserBrowse { display:flex; flex:1; flex-direction:column; min-height:0; gap:16px; }
.vertex-v3 #app#app#app#app#app#app #findSheet .area-chooser-current { flex:none; display:flex; align-items:center; gap:12px; padding:16px; border-radius:14px; background:var(--ui-raised); }
.vertex-v3 #app#app#app#app#app#app #findSheet .area-chooser-current>svg { flex:none; width:22px; height:22px; color:var(--ui-yellow); }
.vertex-v3 #app#app#app#app#app#app #findSheet .area-chooser-current>div { min-width:0; }
.vertex-v3 #app#app#app#app#app#app #findSheet .area-chooser-current small { display:block; font:500 12px/1.3 system-ui; color:var(--ui-muted)!important; }
.vertex-v3 #app#app#app#app#app#app #findSheet .area-chooser-current b { display:block; margin-top:3px; font:650 16px/1.3 system-ui; color:var(--ui-text); overflow-wrap:anywhere; }
.vertex-v3 #app#app#app#app#app#app #findSheet .area-chooser-tabs { display:flex; flex:none; gap:4px; padding:4px; border-radius:14px; background:var(--ui-raised); }
.vertex-v3 #app#app#app#app#app#app #findSheet .area-chooser-tabs button { flex:1; min-width:0; min-height:44px; padding:8px; border:0; border-radius:10px; background:transparent; color:var(--ui-muted); font:600 14px/1.2 system-ui; }
.vertex-v3 #app#app#app#app#app#app #findSheet .area-chooser-tabs button[aria-selected="true"] { background:var(--ui-green); color:var(--ui-on-dark); }
.vertex-v3 #app#app#app#app#app#app #findSheet :is(#areaChooserList,#searchResults) { flex:1; min-height:0; overflow-y:auto!important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.vertex-v3 #app#app#app#app#app#app #findSheet #areaChooserList h3 { margin:0 0 8px 2px; color:var(--ui-muted); font:600 12px/1.3 system-ui; }
.vertex-v3 #app#app#app#app#app#app #findSheet .area-chooser-place { display:flex; align-items:center; gap:12px; width:100%; min-height:66px; padding:10px 2px; border:0; border-bottom:1px solid #ffffff14; border-radius:0; background:transparent; color:var(--ui-text); text-align:left; }
.vertex-v3 #app#app#app#app#app#app #findSheet .area-chooser-place:last-child { border-bottom:0; }
.vertex-v3 #app#app#app#app#app#app #findSheet .area-chooser-place:hover { background:var(--ui-raised); }
.vertex-v3 #app#app#app#app#app#app #findSheet .area-chooser-place-icon { flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:var(--ui-raised); color:var(--ui-yellow); }
.vertex-v3 #app#app#app#app#app#app #findSheet .area-chooser-place-icon svg { width:18px; height:18px; }
.vertex-v3 #app#app#app#app#app#app #findSheet .area-chooser-place-copy { flex:1; min-width:0; }
.vertex-v3 #app#app#app#app#app#app #findSheet .area-chooser-place-copy :is(b,small) { display:block; overflow-wrap:anywhere; }
.vertex-v3 #app#app#app#app#app#app #findSheet .area-chooser-place-copy b { font:600 15px/1.3 system-ui; }
.vertex-v3 #app#app#app#app#app#app #findSheet .area-chooser-place-copy small { margin-top:3px; font:400 12px/1.4 system-ui; color:var(--ui-muted)!important; }
.vertex-v3 #app#app#app#app#app#app #findSheet .area-chooser-place>svg { flex:none; width:16px; height:16px; color:var(--ui-muted); }
.vertex-v3 #app#app#app#app#app#app #findSheet #searchResults { position:static!important; order:0!important; width:100%!important; max-height:none!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; box-shadow:none!important; background:var(--ui-surface)!important; }
.vertex-v3 #app#app#app#app#app#app #findSheet .search-result { display:grid; gap:4px; min-height:66px; width:100%; padding:12px 4px; border:0; border-bottom:1px solid #ffffff14; border-radius:0; background:transparent; color:var(--ui-text); text-align:left; }
.vertex-v3 #app#app#app#app#app#app #findSheet .search-result b { font:600 15px/1.3 system-ui; color:var(--ui-text)!important; white-space:normal; }
.vertex-v3 #app#app#app#app#app#app #findSheet .search-result small { font:400 12px/1.4 system-ui; color:var(--ui-muted)!important; white-space:normal; }
.vertex-v3 #app#app#app#app#app#app #findSheet :is(.search-empty,.area-chooser-empty) { margin:0; padding:12px 2px; color:var(--ui-muted)!important; font:400 14px/1.5 system-ui; }
@keyframes area-chooser-open { from { opacity:0; translate:0 -18px; } to { opacity:1; translate:0 0; } }
@media (prefers-reduced-motion:no-preference) {
  .vertex-v3 #app#app#app#app#app#app[data-finding] #findSheet { animation:area-chooser-open 220ms cubic-bezier(.2,.8,.2,1) backwards!important; }
}
@media (prefers-reduced-motion:reduce) {
  .vertex-v3 #app#app#app#app#app#app #findSheet { animation:none!important; }
}
/* The map buttons (layers, terrain, ＋) step up above an open pin card. */
@media (max-width:899px) { .vertex-v3 #app#app#app#app#app#app:has(#spotCard:not([hidden])) #thumbRail { display:flex!important; bottom:calc(var(--spot-card-h,150px) + 10px)!important; } }
/* Firn clock legend: swatches and a day switch on one line, the time slider under it. */
.vertex-v3 #app .firn-legend.show { display:flex; flex-direction:column; align-items:stretch; gap:4px; pointer-events:auto; white-space:normal; }
.vertex-v3 #app .firn-legend .firn-row { display:flex; align-items:center; gap:10px; min-width:0; }
.vertex-v3 #app .firn-legend .f-powder { background:#a78bfa; }
.vertex-v3 #app .firn-legend .f-dry { background:#64748b; }
.vertex-v3 #app .firn-legend .f-hard { background:#60a5fa; }
.vertex-v3 #app .firn-legend .f-corn { background:#34d399; }
.vertex-v3 #app .firn-legend .f-wet { background:#fb923c; }
.vertex-v3 #app .firn-legend .f-thaw { background:#ef4444; }
.vertex-v3 #app .firn-legend .firn-day { margin-left:auto; height:26px; padding:0 10px; border-radius:999px; border:1px solid #ffffff2e; background:#2a2e35; color:inherit; font:600 12px/1 system-ui,sans-serif; }
.vertex-v3 #app .firn-legend .firn-time { min-width:42px; font-variant-numeric:tabular-nums; }
.vertex-v3 #app .firn-legend input[type=range] { flex:1; min-width:0; accent-color:#3b82f6; }
.vertex-v3 #app .firn-legend .firn-note { font-weight:500; font-size:12px; line-height:1.3; }
.vertex-v3 #app .firn-legend .firn-note:empty { display:none; }
.vertex-v3 #app .firn-legend { position:relative; }
.vertex-v3 #app .firn-legend>.legend-close { position:absolute; top:6px; right:8px; }
.vertex-v3 #app .firn-legend .firn-day { margin-right:30px; }
/* Snow line legend: day switch as small pills. */
.vertex-v3 #app .snowline-legend.show { display:flex; flex-direction:column; align-items:stretch; gap:6px; pointer-events:auto; white-space:normal; position:relative; }
.vertex-v3 #app .snowline-legend>.legend-close { position:absolute; top:6px; right:8px; }
.vertex-v3 #app .snowline-legend .snowline-days { display:flex; gap:6px; margin-right:30px; margin-left:auto; }
.vertex-v3 #app .snowline-legend .snowline-days button { height:26px; padding:0 10px; border-radius:999px; border:1px solid #ffffff2e; background:#2a2e35; color:inherit; font:600 12px/1 system-ui,sans-serif; }
.vertex-v3 #app .snowline-legend .snowline-days button[aria-pressed="true"] { background:#3b82f6; border-color:#3b82f6; color:#fff; }
/* From the lift legend. */
.vertex-v3 #app .lift-legend.show { display:flex; flex-direction:column; align-items:stretch; gap:4px; white-space:normal; position:relative; }
.vertex-v3 #app .lift-legend>.legend-close { position:absolute; top:6px; right:8px; pointer-events:auto; }
.vertex-v3 #app .lift-legend .firn-row { padding-right:30px; }
.vertex-v3 #app .lift-legend .l-ok { background:#34d399; }
.vertex-v3 #app .lift-legend .l-care { background:#f5c846; }
.vertex-v3 #app .lift-legend .l-avoid { background:#ef4444; }
.vertex-v3 #app .lift-legend .firn-row,
.vertex-v3 #app .snowline-legend .firn-row { display:flex; align-items:center; gap:10px; min-width:0; }
.vertex-v3 #app .lift-legend .firn-row>span,
.vertex-v3 #app .snowline-legend .firn-row>span { display:inline-flex; align-items:center; gap:5px; }
.vertex-v3 #app .lift-legend .firn-note,
.vertex-v3 #app .snowline-legend .firn-note { font-weight:500; font-size:12px; line-height:1.3; }
.vertex-v3 #app .lift-legend .firn-note { padding-right:26px; white-space:normal; overflow:visible; text-overflow:clip; }
/* Firn, Snow line and From the lift legends carry a sentence: they take the strip's width and wrap. */
.vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack>:is(.lift-legend,.firn-legend,.snowline-legend) { flex:1 1 100%!important; min-width:0!important; white-space:normal!important; }
.vertex-v3 #app .snowline-legend .snowline-time { min-width:58px; font-variant-numeric:tabular-nums; }
.vertex-v3 #app .snowline-legend input[type=range] { flex:1; min-width:0; accent-color:#3b82f6; }
/* Map panel grid: picture tiles for map style and colour layers, round buttons for Tours, Pistes, Sun and 3D.
   The list rows stay in the panel for their handlers but are not shown. */
.vertex-v3 #app #layerPanel.layer-grid-mode>.layer-row:not(.activity-layer-row),
.vertex-v3 #app #layerPanel.layer-grid-mode>.layer-section:not(.activity-layer-section),
.vertex-v3 #app #layerPanel.layer-grid-mode>.layer-presets { display:none!important; }
.vertex-v3 #app #layerPanel .layer-grid { display:grid; gap:4px; padding:0 2px 6px; }
.vertex-v3 #app #layerPanel .layer-grid-section>small { display:block; margin:12px 2px 8px; font-size:11px; font-weight:800; letter-spacing:.12em; color:#8b929c; }
.vertex-v3 #app #layerPanel .layer-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 10px; }
.vertex-v3 #app #layerPanel :is(.layer-tile,.layer-round) { all:unset; box-sizing:border-box; display:grid; justify-items:center; gap:6px; min-width:0; cursor:pointer; text-align:center; color:#c9ced6; -webkit-tap-highlight-color:transparent; }
.vertex-v3 #app #layerPanel .layer-tile-pic { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:16/9; border-radius:14px; background:#24272d center/cover no-repeat; box-shadow:inset 0 0 0 1px #ffffff14; color:#8b929c; }
.vertex-v3 #app #layerPanel .layer-tile-pic svg { width:28px; height:28px; }
.vertex-v3 #app #layerPanel .layer-tile.active .layer-tile-pic { box-shadow:0 0 0 2px #1e2126,0 0 0 4px #3b82f6; }
.vertex-v3 #app #layerPanel .layer-tile.active .layer-tile-pic::after { content:"✓"; position:absolute; right:6px; top:6px; width:20px; height:20px; border-radius:50%; background:#3b82f6; color:#fff; font-size:12px; font-weight:800; display:grid; place-items:center; box-shadow:0 1px 4px #0006; }
.vertex-v3 #app #layerPanel .layer-tile-none.active .layer-tile-pic::after { display:none; }
.vertex-v3 #app #layerPanel .layer-tile-name { font-size:12px; font-weight:700; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.vertex-v3 #app #layerPanel .layer-tile-name .pro-badge { font-size:8px; vertical-align:2px; }
.vertex-v3 #app #layerPanel :is(.layer-tile,.layer-round).active { color:#fff; }
.vertex-v3 #app #layerPanel :is(.layer-tile,.layer-round):focus-visible { outline:2px solid #3b82f6; outline-offset:3px; border-radius:14px; }
.vertex-v3 #app #layerPanel .layer-grid-modes { display:grid; gap:8px; }
.vertex-v3 #app #layerPanel .layer-grid-modes>:not([hidden]) { margin:10px 0 0!important; }
.vertex-v3 #app #layerPanel .layer-grid-status { display:block; margin:8px 2px 0; font-size:12px!important; font-weight:500!important; letter-spacing:0!important; text-transform:none!important; color:#9aa1ab; line-height:1.35; }
.vertex-v3 #app #layerPanel .layer-grid-status[hidden] { display:none; }
.vertex-v3 #app #layerPanel .layer-rounds { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.vertex-v3 #app #layerPanel .layer-round-icon { width:48px; height:48px; border-radius:50%; background:#2a2e35; display:grid; place-items:center; color:#c9ced6; }
.vertex-v3 #app #layerPanel .layer-round-icon svg { width:24px; height:24px; }
.vertex-v3 #app #layerPanel .layer-round.active .layer-round-icon { background:#3b82f6; color:#fff; }
.vertex-v3 #app #layerPanel #snowImageDates:not([hidden]) { margin-top:10px; }
.vertex-v3 #app #layerPanel .layer-grid-section:first-child>small { margin-top:2px; }
/* Layer views on the map: one segmented bar per colour layer with a choice, on top of the legend strip. */
.vertex-v3 #app#app#app#app#app #mapContextStack>.map-mode-box { order:-1; flex:0 0 100%!important; display:grid!important; gap:6px!important; padding:8px!important; min-height:0!important; border-right:0!important; border-bottom:1px solid #ffffff14!important; background:var(--ui-base); }
.vertex-v3 #app#app#app#app#app #mapContextStack>.map-mode-box:not(:has(>:not([hidden]))) { display:none!important; }
.vertex-v3 #app#app#app#app#app #mapContextStack .map-mode-box .avalanche-mode { display:flex!important; align-items:center; gap:2px!important; margin:0!important; padding:3px!important; border-radius:12px; background:var(--ui-raised)!important; }
.vertex-v3 #app#app#app#app#app #mapContextStack .map-mode-box .avalanche-mode[hidden] { display:none!important; }
.vertex-v3 #app#app#app#app#app #mapContextStack .map-mode-label { flex:0 0 auto; max-width:34%; padding:0 8px 0 6px; font-size:12px!important; font-weight:700; color:var(--ui-text)!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vertex-v3 #app#app#app#app#app #mapContextStack .map-mode-box .avalanche-mode button { flex:1 1 0!important; min-width:0; min-height:36px!important; padding:0 4px!important; border:0!important; border-radius:9px!important; background:transparent!important; color:var(--ui-muted)!important; font-size:13px!important; font-weight:600; white-space:nowrap; }
.vertex-v3 #app#app#app#app#app #mapContextStack .map-mode-box .avalanche-mode button:is(.active,[aria-pressed="true"]) { background:#3b82f6!important; color:#fff!important; }
.vertex-v3 #app#app#app#app#app #mapContextStack .map-mode-box .pro-badge { display:none!important; }
@media (max-width:899px) {
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack { flex-wrap:wrap!important; }
}
@media (min-width:900px) {
  .vertex-v3 #app#app#app#app#app #mapContextStack>.map-mode-box { border-radius:16px; border:1px solid #ffffff20!important; }
}
.vertex-v3 #app .latest-snow-legend .latest-snow-scale { gap:0; margin-left:4px; }
.vertex-v3 #app .latest-snow-legend .latest-snow-scale[hidden] { display:none; }
.vertex-v3 #app .latest-snow-legend .latest-snow-scale i { width:9px; height:8px; border-radius:0; }
.vertex-v3 #app .latest-snow-legend .latest-snow-scale i:first-child { border-radius:3px 0 0 3px; }
.vertex-v3 #app .latest-snow-legend .latest-snow-scale i:last-child { border-radius:0 3px 3px 0; }
.vertex-v3 #app #mapContextStack .latest-snow-legend small { display:none!important; }
.vertex-v3 #app #mapContextStack .latest-snow-legend>b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Weather map on phones: the whole screen, like the other full-screen pages (Bjorn 2026-10-17). */
@media (max-width:899px) {
  .vertex-v3 #app#app#app#app #weatherView:not([hidden]) { top:0!important; height:100dvh!important; max-height:none!important; border-radius:0!important; padding:0!important; animation:none!important; overflow:hidden!important; }
  /* One header on the map: ‹ back to the Weather tab, the layer and place, ✕ back to the map. */
  .vertex-v3 #app#app#app#app #weatherView:has(.weather-map-view:not([hidden])) :is(.weather-head,.weather-tabs) { display:none!important; }
  .vertex-v3 #app#app#app#app #weatherView :is(#weatherMapBack,#weatherMapClose) { visibility:visible!important; pointer-events:auto!important; }
}
/* Weather tab (Bjorn 2026-10-17): one clear column that follows one height. On phones the card
   takes the whole screen while Weather is open; the other tabs keep the low card. */
.vertex-v3 #app#app#app#app#app #areaPanelWeather .area-weather-map-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0 10px; }
.vertex-v3 #app#app#app#app#app #areaPanelWeather .area-weather-map-row button { height:40px; border:1px solid #ffffff14!important; border-radius:12px; background:var(--ui-raised,#2a2e35)!important; color:var(--ui-text)!important; font-size:14px; font-weight:650; }
.vertex-v3 #app#app#app#app#app #areaPanelWeather .area-weather-map-row #areaPowderFinder { border-color:#3b82f6!important; background:#3b82f6!important; color:#fff!important; }
.vertex-v3 #app#app#app#app#app #areaPanelWeather .area-weather-map-row #areaPowderFinder .pro-badge { background:#ffffff2e; color:#fff; }
.vertex-v3 #app#app#app#app#app #areaPanelWeather :is(#weatherSummary,.weather-days-head,.weather-vertex-mark,.powder-card-foot strong) { display:none!important; }
.vertex-v3 #app#app#app#app#app #areaPanelWeather #weatherLevels { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:4px; margin:0 0 10px; padding:4px; border-radius:14px; background:#1e1f22; }
.vertex-v3 #app#app#app#app#app #areaPanelWeather .weather-level-seg { display:grid; gap:1px; justify-items:center; min-width:0; padding:7px 4px; border:0; border-radius:11px; background:transparent; color:var(--ui-text); text-align:center; }
.vertex-v3 #app#app#app#app#app #areaPanelWeather .weather-level-seg small { font-size:11px; font-weight:600; letter-spacing:0; color:var(--ui-muted)!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.vertex-v3 #app#app#app#app#app #areaPanelWeather .weather-level-seg b { font-size:19px; line-height:1.15; }
.vertex-v3 #app#app#app#app#app #areaPanelWeather .weather-level-seg span { font-size:11px; color:var(--ui-muted); white-space:nowrap; }
.vertex-v3 #app#app#app#app#app #areaPanelWeather .weather-level-seg.active { background:#3b82f6; }
.vertex-v3 #app#app#app#app#app #areaPanelWeather .weather-level-seg.active :is(small,span,b) { color:#fff!important; }
.vertex-v3 #app#app#app#app#app #areaPanelWeather #weatherOverview { margin:0 0 10px!important; padding:14px!important; min-height:0!important; }
.vertex-v3 #app#app#app#app#app #areaPanelWeather #weatherOverview .weather-now-metrics { display:grid!important; grid-template-columns:repeat(4,1fr)!important; gap:6px!important; margin-top:12px!important; }
.vertex-v3 #app#app#app#app#app #areaPanelWeather #weatherOverview .weather-sun { display:flex!important; gap:18px!important; margin-top:8px!important; padding-top:8px!important; }
.vertex-v3 #app#app#app#app#app #areaPanelWeather #weatherOverview :is(.weather-now-metrics,.weather-sun) span { display:grid; gap:2px; padding:0!important; background:none!important; border:0!important; }
.vertex-v3 #app#app#app#app#app #areaPanelWeather #weatherOverview :is(.weather-now-metrics,.weather-sun) small { font-size:11px!important; letter-spacing:.02em!important; text-transform:uppercase; }
.vertex-v3 #app#app#app#app#app #areaPanelWeather #weatherOverview :is(.weather-now-metrics,.weather-sun) b { font-size:14px!important; }
.vertex-v3 #app#app#app#app#app #areaPanelWeather .weather-section { margin:14px 0 0!important; }
@media (max-width:899px) {
  /* The expanded place card takes the whole screen on every tab (Bjorn 2026-10-22); collapsed it is one row. */
  .vertex-v3 #app#app#app#app#app#app #mapSheet #placeCard:not(.collapsed) { height:calc(100dvh - env(safe-area-inset-top,0px) - 8px)!important; max-height:none!important; }
  /* Full screen: the map's own buttons and centre height wait behind it. */
  .vertex-v3 #app#app#app#app#app#app:has(#placeCard:not(.collapsed):not([hidden])) :is(#mapCorner,#avalancheChip,#mapCenterAltitude,#mapContextStack) { display:none!important; }
  .vertex-v3 #app#app#app#app#app#app #mapSheet #placeCard:has(#areaPanelWeather:not([hidden])) #areaPanelWeather { max-height:calc(100dvh - env(safe-area-inset-top,0px) - 8px - var(--area-head-h,250px))!important; }
}
/* Snow image dates scroll sideways inside the panel; without min-width:0 their row widened the
   Map style grid and blew the tiles up (Bjorn 2026-10-17). */
.vertex-v3 #app #layerPanel .layer-grid-section { grid-template-columns:minmax(0,1fr); min-width:0; }
.vertex-v3 #app#app#app#app#app #layerPanel #snowImageDates { min-width:0; max-width:100%; }
/* Readable in glare and with gloves: the area card's figure labels are never smaller than 11px. */
.vertex-v3 #app#app#app#app #placeCard :is(.resort-status,.stats) small { font-size:11px!important; letter-spacing:.04em!important; }
/* Satellite: Latest (dated Sentinel-2) or Summer (sharp mosaic), two equal choices under the style tiles. */
.vertex-v3 #app#app#app#app#app #satelliteChoice:not([hidden]) { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0 4px; min-width:0; }
.vertex-v3 #app#app#app#app#app #satelliteChoice button { display:grid; gap:1px; min-height:44px; padding:6px 12px; border:1px solid #3a3f48; border-radius:12px; background:var(--ui-raised); color:var(--ui-text); text-align:left; font:inherit; }
.vertex-v3 #app#app#app#app#app #satelliteChoice button b { font-size:14px; color:var(--ui-text); }
.vertex-v3 #app#app#app#app#app #satelliteChoice button small { font-size:11px; color:var(--ui-muted)!important; }
.vertex-v3 #app#app#app#app#app #satelliteChoice button[aria-pressed="true"] { background:#3b82f6; border-color:#3b82f6; }
.vertex-v3 #app#app#app#app#app #satelliteChoice button[aria-pressed="true"] :is(b,small) { color:#fff!important; }
/* Overlapping-tracks chooser: same graphite card as the tour card it opens over. */
.vertex-v3 #app#app#app#app .community-route-chooser-popup .maplibregl-popup-content { background:var(--ui-surface)!important; color:var(--ui-text)!important; border:1px solid #ffffff14!important; box-shadow:0 14px 34px #00000070!important; }
.vertex-v3 #app#app#app#app .community-route-chooser>small { color:var(--ui-muted)!important; }
.vertex-v3 #app#app#app#app .community-route-chooser button:not(.route-chooser-close) { background:var(--ui-raised)!important; color:var(--ui-text)!important; border:1px solid #ffffff10!important; }
.vertex-v3 #app#app#app#app .community-route-chooser button:not(.route-chooser-close) span { color:var(--ui-muted)!important; }
.vertex-v3 #app#app#app#app .community-route-chooser .route-chooser-close { background:var(--ui-raised)!important; color:var(--ui-text)!important; border:0!important; }
/* Start activity, simplified (Bjorn 2026-10-18: the old sheet felt clumsy): one segmented Ski day / Ski tour
   control, one primary Start, the route choice as a quiet row, and the recording bar without boxes in boxes. */
.vertex-v3 #app#app#app#app#app #recordSheet #recordChooser:not([hidden]) { display:grid!important; grid-template-columns:1fr 1fr!important; gap:4px!important; padding:4px!important; margin:4px 0 12px!important; border-radius:16px!important; background:var(--ui-base)!important; }
.vertex-v3 #app#app#app#app#app #recordSheet #recordChooser .record-choice { min-height:46px!important; height:46px!important; padding:0 12px!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:8px!important; border:0!important; border-radius:12px!important; background:transparent!important; box-shadow:none!important; }
.vertex-v3 #app#app#app#app#app #recordSheet #recordChooser .record-choice>span { width:20px!important; height:20px!important; background:transparent!important; }
.vertex-v3 #app#app#app#app#app #recordSheet #recordChooser .record-choice>span svg { width:18px; height:18px; }
.vertex-v3 #app#app#app#app#app #recordSheet #recordChooser .record-choice>b { font-size:15px!important; font-weight:700!important; }
.vertex-v3 #app#app#app#app#app #recordSheet #recordChooser .record-choice>small { display:none!important; }
.vertex-v3 #app#app#app#app#app #recordSheet #recordChooser .record-choice[aria-pressed="true"] { background:var(--ui-green)!important; }
.vertex-v3 #app#app#app#app#app #recordSheet #recordChooser .record-choice[aria-pressed="true"] :is(b,span,svg) { color:#fff!important; }
.vertex-v3 #app#app#app#app#app #recordSheet .record-start-row { margin:0 0 10px!important; }
.vertex-v3 #app#app#app#app#app #recordSheet #startRecord { width:100%!important; height:52px!important; min-height:52px!important; border-radius:16px!important; border:0!important; background:var(--ui-green)!important; color:#fff!important; font-size:16px!important; font-weight:700!important; box-shadow:none!important; }
.vertex-v3 #app#app#app#app#app #recordSheet #tourRoutePicker:not([hidden]) { padding:0!important; margin:0 0 8px!important; border:0!important; background:transparent!important; box-shadow:none!important; }
.vertex-v3 #app#app#app#app#app #recordSheet .tour-route-head { display:flex!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; min-height:44px!important; padding:0 4px 0 2px!important; }
.vertex-v3 #app#app#app#app#app #recordSheet .tour-route-head small { display:none!important; }
.vertex-v3 #app#app#app#app#app #recordSheet .tour-route-head b { font-size:14px!important; font-weight:600!important; }
.vertex-v3 #app#app#app#app#app #recordSheet #tourNoRoute { height:34px!important; min-height:34px!important; padding:0 14px!important; border-radius:17px!important; font-size:13px!important; font-weight:600!important; }
.vertex-v3 #app#app#app#app#app #recordSheet #tourNoRoute:not(.active) { background:var(--ui-raised)!important; border:1px solid #ffffff20!important; }
.vertex-v3 #app#app#app#app#app #recordSheet #tourNoRoute.active { background:var(--ui-green)!important; border:0!important; color:#fff!important; }
.vertex-v3 #app#app#app#app#app #recordSheet .tour-route-option { min-height:48px!important; border-radius:12px!important; }
.vertex-v3 #app#app#app#app#app #recordSheet .tour-route-empty { padding:2px 2px 6px!important; margin:0!important; text-align:left!important; font-size:12px!important; }
.vertex-v3 #app#app#app#app#app #recordSheet :is(.record-gps,.record-explainer) { margin:0!important; padding:2px 2px 0!important; min-height:0!important; font-size:12px!important; color:var(--ui-muted)!important; }
.vertex-v3 #app#app#app#app#app #recordSheet .record-actions:not(.record-start-row) { gap:8px!important; }
.vertex-v3 #app#app#app#app#app #recordSheet :is(#pauseRecord,#finishRecord) { height:48px!important; min-height:48px!important; border-radius:14px!important; font-weight:700!important; }
.vertex-v3 #app#app#app#app#app #recordSheet #finishRecord { background:var(--ui-green)!important; border:0!important; color:#fff!important; }
.vertex-v3 #app#app#app#app#app #recordSheet #discardRecord { background:transparent!important; border:0!important; color:#ff8a7a!important; font-weight:600!important; }
.vertex-v3 #app#app#app#app#app #activeSession .active-map-controls { gap:4px!important; padding:0!important; border:0!important; background:transparent!important; }
.vertex-v3 #app#app#app#app#app #activeSession .active-map-controls button { width:56px!important; height:46px!important; min-height:46px!important; padding:4px 0!important; border:0!important; border-radius:12px!important; font-size:15px!important; line-height:1!important; display:grid!important; place-items:center!important; gap:2px!important; }
.vertex-v3 #app#app#app#app#app #activeSession .active-map-controls button span { font-size:10px!important; font-weight:600!important; }
.vertex-v3 #app#app#app#app#app #activeSession #openActiveSession { border:0!important; background:transparent!important; }
.vertex-v3 #app#app#app#app#app #recordSheet:has(#startRecord:not([hidden])) #recordAccuracy { display:none!important; }
.vertex-v3 #app#app#app#app #liftLegend span[hidden] { display:none!important; }
/* Tour card layout: src/cards.css. */
/* Phones: the chips name the choice, so the group label goes and every chip fits (Snow surface was cut). */
@media (max-width:420px) {
  .vertex-v3 #app#app#app#app#app #mapContextStack .map-mode-label { display:none!important; }
}
.vertex-v3 #app#app#app#app#app #mapContextStack .map-mode-box .avalanche-mode button { overflow:hidden; text-overflow:ellipsis; }
/* While recording, the recording bar stays on top: sheets leave room under their last row for it. */
.vertex-v3 #app#app#app#app#app:has(#activeSession:not([hidden]):not(.collapsed)) :is(#youSheet,#layerPanel,#exploreSheet,#activitiesSheet,#activityDetail,#compareSheet,#avalancheSheet,#todayBriefSheet,#routeDetail,#placeCard:not(.collapsed)) { padding-bottom:calc(88px + env(safe-area-inset-bottom))!important; }
/* Readable with gloves and glare: no label under 11px, and the small ✕ keeps a 40px touch area. */
.vertex-v3 #app#app#app#app#app #activeSession .active-map-controls button span { font-size:11px!important; }
.vertex-v3 #app#app#app#app#app #routeDetail #routeDetailStats small { font-size:11px!important; }
.vertex-v3 #app#app#app#app#app #mapContextStack .legend-close { position:relative; }
.vertex-v3 #app#app#app#app#app #mapContextStack .legend-close::after { content:""; position:absolute; inset:-8px; }
/* New snow and Latest snow legends: a second line says when the snow falls, how long and how much. */
.vertex-v3 #app :is(#powderLegend,#latestSnowLegend).show { flex-direction:column; align-items:stretch; gap:3px; white-space:normal; }
.vertex-v3 #app :is(#powderLegend,#latestSnowLegend) .firn-row { display:flex; align-items:center; gap:10px; min-width:0; padding-right:26px; }
.vertex-v3 #app :is(#powderLegend,#latestSnowLegend) .firn-row>span:not([hidden]) { display:inline-flex; align-items:center; gap:5px; }
.vertex-v3 #app :is(#powderLegend,#latestSnowLegend) .firn-note { font-weight:500; font-size:12px; line-height:1.3; padding-right:26px; }
.vertex-v3 #app :is(#powderLegend,#latestSnowLegend) .firn-note:empty { display:none; }
.vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack>:is(#powderLegend,#latestSnowLegend):has(.firn-note:not(:empty)) { flex:1 1 100%!important; min-width:0!important; white-space:normal!important; }
.vertex-v3 #app :is(#powderLegend,#latestSnowLegend).show { position:relative; }
.vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack>:is(#powderLegend,#latestSnowLegend)>.legend-close,
.vertex-v3 #app :is(#powderLegend,#latestSnowLegend)>.legend-close { position:absolute!important; top:6px; right:8px; margin:0!important; }
/* Each layer's views end with its ✕; the legends under them then need none of their own. */
.vertex-v3 #app#app#app#app#app #mapContextStack .map-mode-box .avalanche-mode>.mode-close { flex:0 0 36px!important; width:36px!important; min-width:36px!important; height:36px!important; min-height:36px!important; margin:0 0 0 2px!important; border-radius:9px!important; background:transparent!important; color:var(--ui-muted)!important; font-size:13px!important; }
.vertex-v3 #app#app#app#app#app #mapContextStack:has(>.map-mode-box>:not([hidden]))>*>.legend-close { display:none!important; }
/* The route bar (2026-10-18): one low strip for the whole draft. Draw | Auto line and ✕ on top, the figures,
   then Undo · Delete · Details · Done. Details open in place; nothing else covers the bar while a route is drawn. */
.vertex-v3 #app#app#app#app#app #routePlanner.route-bar { gap:8px!important; padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important; overflow:hidden!important; }
.vertex-v3 #app#app#app#app#app #routePlanner .route-bar-head { display:flex; align-items:center; gap:8px; min-width:0; position:static!important; margin:0!important; padding:0!important; min-height:0!important; background:transparent!important; box-shadow:none!important; border:0!important; }
.vertex-v3 #app#app#app#app#app #routePlanner .route-bar-head::before,.vertex-v3 #app#app#app#app#app #routePlanner .route-bar-head::after,.vertex-v3 #app#app#app#app#app #routePlanner::before { display:none!important; content:none!important; }
.vertex-v3 #app#app#app#app#app #routePlanner .route-bar-head .route-planner-mode { display:flex!important; flex:1 1 auto; gap:2px; margin:0!important; padding:3px; border-radius:12px; background:var(--ui-base); }
.vertex-v3 #app#app#app#app#app #routePlanner .route-bar-head .route-planner-mode button { flex:1 1 0; min-width:0; height:34px!important; min-height:34px!important; padding:0 10px!important; border:0!important; border-radius:9px!important; background:transparent!important; color:var(--ui-muted)!important; font:650 13px/1 system-ui,sans-serif!important; box-shadow:none!important; }
.vertex-v3 #app#app#app#app#app #routePlanner .route-bar-head .route-planner-mode button[aria-pressed="true"] { background:#3b82f6!important; color:#fff!important; }
.vertex-v3 #app#app#app#app#app #routePlanner .route-bar-close { flex:0 0 40px; width:40px!important; height:40px!important; min-height:40px!important; padding:0!important; border:0!important; border-radius:50%!important; background:var(--ui-raised)!important; color:var(--ui-text)!important; font-size:16px!important; line-height:1; }
.vertex-v3 #app#app#app#app#app #routePlanner .planner-discard { margin:0!important; }
.vertex-v3 #app#app#app#app#app #routePlanner .route-bar-figures { display:flex; flex-direction:column; gap:2px; min-width:0; padding:0 2px; }
.vertex-v3 #app#app#app#app#app #routePlanner .route-bar-figures b { overflow:hidden; color:var(--ui-text)!important; font:700 15px/1.3 system-ui,sans-serif!important; font-variant-numeric:tabular-nums; white-space:nowrap; text-overflow:ellipsis; }
.vertex-v3 #app#app#app#app#app #routePlanner .route-bar-figures span { overflow:hidden; color:var(--ui-muted)!important; font:500 12px/1.3 system-ui,sans-serif!important; white-space:nowrap; text-overflow:ellipsis; }
.vertex-v3 #app#app#app#app#app #routePlanner .route-bar-figures span:empty { display:none; }
.vertex-v3 #app#app#app#app#app #routePlanner .route-bar-figures .auto-line-dot { display:inline-block; width:8px; height:8px; margin:0 6px 1px 0; border-radius:50%; vertical-align:middle; background:#748387; }
.vertex-v3 #app#app#app#app#app #routePlanner .auto-line-dot[data-grade="low"] { background:#6fdc8c; }
.vertex-v3 #app#app#app#app#app #routePlanner .auto-line-dot[data-grade="mid"] { background:#ffd23f; }
.vertex-v3 #app#app#app#app#app #routePlanner .auto-line-dot[data-grade="high"] { background:#ff5a4f; }
.vertex-v3 #app#app#app#app #routePlanner #routePlannerSteep > span { display:block; }
/* One line under the other (the key spots, By lift's steps), never side by side. */
.vertex-v3 #app#app#app#app #routePlanner .route-planner-terrain > #routePlannerSteep { flex-direction:column!important; gap:4px; }
/* Key spot on the Auto line: one line, same dark surface as every card. */
.vertex-v3 #app#app#app#app .key-spot-popup .maplibregl-popup-content { padding:9px 12px!important; border:1px solid #ffffff14; border-radius:14px; background:var(--ui-surface,#1e2126)!important; color:var(--ui-text,#f1f3f5)!important; box-shadow:0 14px 34px #00000070; font:500 13px/1.35 system-ui,sans-serif; }
.vertex-v3 #app#app#app#app .key-spot-popup .maplibregl-popup-tip { border-top-color:var(--ui-surface,#1e2126)!important; border-bottom-color:var(--ui-surface,#1e2126)!important; }
.vertex-v3 #app#app#app#app .key-spot-line { display:flex; align-items:center; gap:9px; }
.vertex-v3 #app#app#app#app .key-spot-line b { flex:none; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#ffc137; color:#16181c; font:700 12px/1 system-ui,sans-serif; }
.vertex-v3 #app#app#app#app .key-spot-line b[data-tone="danger"] { background:#ef4b2d; }
.vertex-v3 #app#app#app#app#app #routePlanner .route-bar-actions { display:flex!important; gap:6px; width:100%; margin:0!important; padding:0!important; border:0!important; }
.vertex-v3 #app#app#app#app#app #routePlanner .route-bar-actions button { display:flex!important; flex:1 1 0!important; align-items:center; justify-content:center; gap:5px; min-width:0!important; width:auto!important; height:42px!important; min-height:42px!important; margin:0!important; padding:0 6px!important; border:1px solid #ffffff1a!important; border-radius:12px!important; background:var(--ui-raised)!important; color:var(--ui-text)!important; font:650 13px/1 system-ui,sans-serif!important; box-shadow:none!important; order:0!important; opacity:1; }
.vertex-v3 #app#app#app#app#app #routePlanner .route-bar-actions button svg { flex:none; width:17px!important; height:17px!important; fill:none; stroke:currentColor!important; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.vertex-v3 #app#app#app#app#app #routePlanner .route-bar-actions button:disabled { color:var(--ui-muted)!important; opacity:.55; }
.vertex-v3 #app#app#app#app#app #routePlanner .route-bar-actions #routeDetailsToggle[aria-expanded="true"] { border-color:var(--ui-green)!important; color:#fff!important; }
.vertex-v3 #app#app#app#app#app #routePlanner .route-bar-actions #savePlannedRoute { flex:1.25 1 0!important; }
.vertex-v3 #app#app#app#app#app #routePlanner .route-bar-actions #savePlannedRoute:not(:disabled) { background:var(--ui-green)!important; border-color:var(--ui-green)!important; color:#fff!important; }
/* Only the details scroll, so ✕, the figures and the four buttons never leave the screen. */
.vertex-v3 #app#app#app#app#app #routePlanner .route-bar-details { display:flex; flex-direction:column; flex:0 1 auto; gap:8px; min-height:0; max-height:min(34dvh,300px); overflow-y:auto; overscroll-behavior:contain; padding-top:8px; border-top:1px solid #ffffff14; }
.vertex-v3 #app#app#app#app#app #routePlanner .route-bar-details>* { flex:none; }
.vertex-v3 #app#app#app#app#app #routePlanner .route-bar-details[hidden] { display:none!important; }
.vertex-v3 #app#app#app#app#app #routePlanner .route-bar-details .route-name-field { display:flex!important; flex-direction:column; gap:4px; margin:0!important; color:var(--ui-muted); font:600 11px/1.2 system-ui,sans-serif; }
.vertex-v3 #app#app#app#app#app #routePlanner .route-bar-details .route-name-field input { height:40px; padding:0 12px; border:1px solid #ffffff1f; border-radius:11px; background:var(--ui-base); color:var(--ui-text); font:500 16px/1 system-ui,sans-serif; }
.vertex-v3 #app#app#app#app#app #routePlanner .route-bar-details .route-planner-terrain,
.vertex-v3 #app#app#app#app#app #routePlanner .route-bar-details .safe-line-stats { margin:0!important; }
.vertex-v3 #app#app#app#app#app #routePlanner .route-bar-details .elevation-profile { margin:0!important; }
@media (max-width:899px) {
  .vertex-v3 #app#app#app#app#app #routePlanner.route-bar { height:auto!important; max-height:min(62dvh,560px)!important; border-radius:22px 22px 0 0!important; }
}
/* While a route is drawn, its bar is the only control for it: the ＋ waits. */
.vertex-v3 #app#app#app#app#app[data-route-planning] #mapCreateTools { display:none!important; }
/* Holding a finger on the map drops a pin, so iOS must not open its own callout there. */
.vertex-v3 #app .maplibregl-canvas-container { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
.vertex-v3 #app#app#app#app#app#app #findSheet #areaChooserReturn { width:100%; border:1px solid var(--ui-border,#ffffff24); text-align:left; color:var(--ui-text); cursor:pointer; }
.vertex-v3 #app#app#app#app#app#app #findSheet #areaChooserReturn:focus-visible { outline:2px solid var(--ui-yellow); outline-offset:2px; }
/* The mobile route editor occupies the same small floating footprint as the + menu.
   Reuse the existing editor and its events; no second route/profile renderer. */
@media (max-width:899px) {
  .vertex-v3 #app#app#app#app#app#app #routePlanner.route-bar {
    position:fixed!important; inset:auto 12px calc(14px + env(safe-area-inset-bottom)) 12px!important;
    width:auto!important; max-width:none!important;
    height:72px!important; min-height:72px!important; max-height:none!important;
    padding:10px 52px!important; border:1px solid #ffffff30!important; border-radius:28px!important;
    background:var(--ui-surface)!important; overflow:visible!important; gap:0!important;
    box-sizing:border-box!important; transform:none!important;
  }
  /* The way to get there is always in view: Lifts & pistes · Ski tour · Draw on top of the bar, the result under it. */
  .vertex-v3 #app#app#app#app#app#app #routePlanner:not(.collapsed) { height:120px!important; min-height:120px!important; padding:58px 16px 10px!important; }
  .vertex-v3 #app#app#app#app#app#app #routePlanner .route-bar-head { position:absolute!important; inset:8px 6px auto 8px!important; height:42px; display:flex!important; align-items:center; gap:4px; }
  .vertex-v3 #app#app#app#app#app#app #routePlanner .route-bar-head .route-planner-mode { display:flex!important; flex:1 1 auto; height:42px; margin:0!important; padding:3px!important; gap:2px!important; border-radius:14px; background:var(--ui-base)!important; }
  .vertex-v3 #app#app#app#app#app#app #routePlanner .route-bar-head .route-planner-mode button { flex:1 1 0!important; min-width:0; height:36px!important; min-height:36px!important; padding:0 6px!important; gap:5px; justify-content:center; border-radius:11px!important; font:600 13px/1 system-ui,sans-serif!important; white-space:nowrap; }
  .vertex-v3 #app#app#app#app#app#app #routePlanner .route-bar-head .route-planner-mode button[aria-pressed="true"] { background:#3b82f6!important; color:#fff!important; }
  .vertex-v3 #app#app#app#app#app#app #routePlanner .route-bar-head .route-planner-mode button svg { width:16px; height:16px; flex:none; }
  @media (max-width:399px){ .vertex-v3 #app#app#app#app#app#app #routePlanner .route-bar-head .route-planner-mode button svg { display:none; } }
  /* Discard this route? sits over the result line, the mode row stays above it. */
  .vertex-v3 #app#app#app#app#app#app #routePlanner .planner-discard:not([hidden]) { position:absolute!important; inset:auto 8px 8px 8px!important; z-index:4; margin:0!important; padding:6px 6px 6px 14px!important; min-height:52px; box-sizing:border-box; }
  .vertex-v3 #app#app#app#app#app#app #routePlanner .route-bar-close { flex:none; width:40px; height:40px; margin-left:2px; background:transparent!important; }
  .vertex-v3 #app#app#app#app#app#app #routePlanner .route-bar-figures { justify-content:center; height:50px; }
  .vertex-v3 #app#app#app#app#app#app #routePlanner .route-bar-figures b { white-space:normal; font-size:12px!important; }
  .vertex-v3 #app#app#app#app#app#app #routePlanner .route-bar-figures span { font-size:10px!important; }
  .vertex-v3 #app#app#app#app#app#app #routePlanner .route-bar-actions { position:absolute!important; right:0; bottom:calc(100% + 8px); width:auto!important; gap:8px; }
  .vertex-v3 #app#app#app#app#app#app #routePlanner .route-bar-actions button { flex:none!important; width:40px!important; min-width:40px!important; height:40px!important; padding:9px!important; border-radius:50%!important; background:var(--ui-raised)!important; box-shadow:0 2px 8px #0004; }
  .vertex-v3 #app#app#app#app#app#app #routePlanner .route-bar-actions button span { display:none!important; }
  .vertex-v3 #app#app#app#app#app#app #routePlanner #routeDetailsToggle::before { content:'⌃'; font-size:22px; }
  /* Done is a word, not a symbol: a blue pill at the end of the round buttons (grey until a line exists). */
  .vertex-v3 #app#app#app#app#app#app#app#app #routePlanner .route-bar-actions #savePlannedRoute { width:auto!important; min-width:76px!important; height:40px!important; min-height:40px!important; padding:0 18px!important; border-radius:20px!important; font:650 15px/40px system-ui,sans-serif!important; }
  .vertex-v3 #app#app#app#app#app#app#app#app #routePlanner .route-bar-actions #savePlannedRoute::before { content:none!important; }
  .vertex-v3 #app#app#app#app#app#app #routePlanner .route-bar-details:not([hidden]) { position:absolute; bottom:calc(100% + 58px); left:0; right:0; max-height:45dvh; overflow-y:auto; padding:12px!important; border-radius:18px; background:var(--ui-surface); box-shadow:0 4px 18px #0005; }
}
.vertex-v3 #app .compact-legend-chips { display:flex!important; flex-wrap:wrap; gap:5px 12px; width:100%; }
.vertex-v3 #app .compact-legend-chips span { display:inline-flex!important; align-items:center; gap:5px; font:600 11px/1.3 system-ui; white-space:nowrap; }
.vertex-v3 #app .compact-legend-chips i { display:inline-block!important; flex:none; width:10px; height:10px; border-radius:3px; }
.vertex-v3 #app .avalanche-coverage-note { color:var(--ui-muted); font:500 10px/1.3 system-ui; }
.vertex-v3 #app #firnTimeLabel,.vertex-v3 #app #snowLineHourLabel { flex:1 1 auto; min-width:0; white-space:nowrap; font-size:13px; font-variant-numeric:tabular-nums; }
/* Time sliders (Snow line, Snow surface): label and Now on one row, a full-width slider with a big thumb under it. */
.vertex-v3 #app .slider-head { min-height:28px; }
.vertex-v3 #app .slider-now { flex:none; height:28px; padding:0 12px; border:0; border-radius:14px; background:#3b82f6; color:#fff; font:600 12px/1 system-ui,sans-serif; }
.vertex-v3 #app .slider-now[hidden] { display:none; }
.vertex-v3 #app .powder-legend input.time-slider { flex:none; -webkit-appearance:none; appearance:none; display:block; width:100%; height:36px; margin:0; padding:0; background:transparent; touch-action:none; cursor:pointer; }
.vertex-v3 #app input.time-slider::-webkit-slider-runnable-track { height:6px; border-radius:3px; background:#ffffff3a; }
.vertex-v3 #app input.time-slider::-moz-range-track { height:6px; border-radius:3px; background:#ffffff3a; }
.vertex-v3 #app input.time-slider::-webkit-slider-thumb { -webkit-appearance:none; width:28px; height:28px; margin-top:-11px; border:3px solid #fff; border-radius:50%; background:#3b82f6; box-shadow:0 2px 6px #0006; }
.vertex-v3 #app input.time-slider::-moz-range-thumb { width:22px; height:22px; border:3px solid #fff; border-radius:50%; background:#3b82f6; box-shadow:0 2px 6px #0006; }
.vertex-v3 #app input.time-slider:disabled { opacity:.4; }

/* Bjorn 2026-10-22: the open ＋ menu replaces the bottom bar (Explore · area · Record) on phones. It sits
   where the bar was, full width, and the map keeps everything above it. */
@media (max-width:899px) {
  .vertex-v3 #app#app#app#app#app#app#app[data-create-open] #thumbDock { display:none!important; }
  .vertex-v3 #app#app#app#app#app#app#app[data-create-open] #thumbRail #mapCreateTools[data-open="true"] { position:fixed!important; left:12px!important; right:12px!important; bottom:calc(12px + env(safe-area-inset-bottom))!important; width:auto!important; height:68px!important; border-radius:24px!important; }
  .vertex-v3 #app#app#app#app#app#app#app[data-create-open] #mapCreateModes { width:auto!important; flex:1 1 auto!important; }
  .vertex-v3 #app#app#app#app#app#app#app[data-create-open] #mapSheet:not(:has(#placeCard:not(.collapsed):not([hidden]))) #mapContextStack { bottom:calc(80px + env(safe-area-inset-bottom))!important; }
  .vertex-v3 #app#app#app#app#app#app#app[data-create-open]:has(#mapContextStack[aria-hidden="false"]) #thumbRail { translate:none!important; bottom:calc(94px + env(safe-area-inset-bottom) + var(--legend-strip-h,0px))!important; }
}

/* Bjorn 2026-10-22: with the area card minimised, the legend sits on the bottom bar's measured top edge (a fixed
   74 px guess let a taller bar cover the legend's last line). It tucks 8 px under the bar's rounded top and pads
   that much, so no text is hidden. */
@media (max-width:899px) {
  .vertex-v3 #app#app#app#app#app#app#app:not([data-create-open]) #mapSheet[data-mode="home"]:not(:has(#placeCard:not(.collapsed):not([hidden]))) #mapContextStack { bottom:calc(var(--map-dock-height,calc(82px + env(safe-area-inset-bottom))) - 8px)!important; }
  /* Pad only while a legend shows: an empty strip with padding measured 8 px tall, counted as a legend and
     squared the bar's top corners. */
  .vertex-v3 #app#app#app#app#app#app#app:not([data-create-open]) #mapSheet[data-mode="home"]:not(:has(#placeCard:not(.collapsed):not([hidden]))) #mapContextStack[aria-hidden="false"] { padding-bottom:8px!important; }
}
/* By lift legend: pistes in their colour, the lift dashed like on the map. */
.vertex-v3 #app#app#app#app #routePlanner .safe-line-legend i.piste-swatch { width:22px; height:5px; border:0; border-radius:3px; box-shadow:0 0 0 1px #ffffffb0; }
.vertex-v3 #app#app#app#app #routePlanner .safe-line-legend i.lift-swatch { width:22px; height:4px; border:0; border-radius:0; box-shadow:none; background:repeating-linear-gradient(90deg,#fff 0 5px,transparent 5px 9px)!important; }
/* By lift: the steps come first in Details, before the colour legend. */
.vertex-v3 #app#app#app#app #routePlanner[data-mode="lift"] .route-planner-terrain > #routePlannerSteep { order:-1; color:var(--ui-text)!important; }
/* By lift: the way there first in Details (figures, then the steps), the start time and name after it. */
.vertex-v3 #app#app#app#app#app #routePlanner[data-mode="lift"] .route-bar-details > #safeLineStats { order:-3; }
.vertex-v3 #app#app#app#app#app #routePlanner[data-mode="lift"] .route-bar-details > #routePlannerTerrain { order:-2; }
.vertex-v3 #app#app#app#app#app #routePlanner[data-mode="lift"] .route-bar-details > #safeLineStartWrap { order:-4; }
/* By lift: one timeline, a row per step: clock · dot · what · how long (· Bus). Rows 44px so each is easy to hit. */
.vertex-v3 #app#app#app#app #routePlanner .lift-step { display:grid!important; grid-template-columns:44px 14px minmax(0,1fr) auto auto; align-items:center; column-gap:10px; min-height:44px; padding:0 2px; border-bottom:1px solid #ffffff10; }
.vertex-v3 #app#app#app#app #routePlanner .lift-step:last-child { border-bottom:0; }
.vertex-v3 #app#app#app#app #routePlanner .lift-step time { color:var(--ui-muted); font:600 13px/1 system-ui,sans-serif; font-variant-numeric:tabular-nums; }
.vertex-v3 #app#app#app#app #routePlanner .lift-step b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ui-text); font:600 15px/1.3 system-ui,sans-serif; }
.vertex-v3 #app#app#app#app #routePlanner .lift-step small { color:var(--ui-muted)!important; font-size:13px; white-space:nowrap; }
.vertex-v3 #app#app#app#app #routePlanner .lift-step-dot { width:12px; height:12px; border-radius:50%; box-shadow:0 0 0 2px #ffffff30; }
.vertex-v3 #app#app#app#app #routePlanner .lift-step-dot[data-kind="lift"] { border-radius:2px; background:repeating-linear-gradient(90deg,#fff 0 3px,#16181c 3px 6px); }
.vertex-v3 #app#app#app#app #routePlanner .lift-step-dot[data-kind="end"] { background:#ff6b5f; }
.vertex-v3 #app#app#app#app #routePlanner .lift-step-bus { display:inline-flex; align-items:center; justify-content:center; min-width:56px; height:36px; padding:0 14px; border-radius:18px; background:#3b82f6; color:#fff!important; font:600 14px/1 system-ui,sans-serif; text-decoration:none; }