/* 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: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: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: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:has(#layerPanel:not([hidden])) #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(86px + 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 #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 18px; clip-path:inset(78% 0 0 round 24px 24px 0 0); }
  to { opacity:1; translate:0 0; clip-path:inset(0 round 24px 24px 0 0); }
}
@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):not([hidden]),
  .vertex-v3 #app#app#app#app #placeCard:not([hidden]):not(.collapsed) {
    transform-origin:bottom center; animation:panel-menu-open 240ms cubic-bezier(.2,.8,.2,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) { 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 #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; animation:none!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; }
  .vertex-v3 #app#app#app#app#app #mapSheet #mapContextStack[aria-hidden="true"] { border:0; background: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: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; }