/* 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 #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; }
  .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; }
/* 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; }
/* Powder Finder: a solid graphite page like the other full-screen pages. */
.vertex-v3 #app#app#app#app #powderFinderSheet { background:var(--ui-surface)!important; color:var(--ui-text)!important; border-color:#ffffff14!important; backdrop-filter:none!important; color-scheme:dark; }
.vertex-v3 #app#app#app#app #powderFinderSheet>.publish-route-head { background:var(--ui-surface)!important; }
.vertex-v3 #app#app#app#app #powderFinderSheet :is(#powderFinderTitle,.powder-finder-summary b,.powder-finder-list b,.powder-finder-list strong) { color:var(--ui-text)!important; }
.vertex-v3 #app#app#app#app #powderFinderSheet :is(.publish-route-head small,.powder-finder-summary span,.powder-map-scale,.powder-map-meta,.powder-finder-note,.powder-finder-list small,.powder-finder-list span) { color:var(--ui-muted)!important; }
.vertex-v3 #app#app#app#app #powderFinderSheet :is(.powder-finder-summary,.powder-map-card,.powder-finder-note,.powder-finder-list>*) { background:var(--ui-raised)!important; border:1px solid #ffffff14!important; box-shadow:none!important; }
.vertex-v3 #app#app#app#app #powderFinderSheet #closePowderFinder { color:var(--ui-text)!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; }
@media (max-width:759px) {
  /* Powder Finder covers the whole screen; there is no bottom nav under it any more. */
  .vertex-v3 #app#app#app#app #powderFinderSheet { inset:0!important; padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))!important; }
}
/* 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; }
.vertex-v3 #app#app#app#app #powderFinderSheet .powder-map-scale i[data-snow="0"] { box-shadow:inset 0 0 0 1px #ffffff40; }
.vertex-v3 #app#app#app#app #powderFinderSheet .powder-raster-map { background:var(--ui-base)!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.up { background:repeating-linear-gradient(90deg,#4dbbff 0 7px,transparent 7px 11px)!important; width:22px; box-shadow:none; }
.vertex-v3 #app#app#app#app #routePlanner .safe-line-legend i.down { background:#42df9b!important; width:22px; height:3px; }
.vertex-v3 #app#app#app#app #routePlanner .safe-line-legend i.level { background:#f4f8fb; width:22px; }
.vertex-v3 #app#app#app#app #routePlanner .safe-line-legend i.unknown { background:repeating-linear-gradient(90deg,#aab5bd 0 5px,transparent 5px 9px); width:22px; box-shadow:none; }
.vertex-v3 #app#app#app#app #routePlanner .safe-line-legend i.caution { --route-warning:#ffc137; }
.vertex-v3 #app#app#app#app #routePlanner .safe-line-legend i.steeper { --route-warning:#ff8b27; }
.vertex-v3 #app#app#app#app #routePlanner .safe-line-legend i.danger { --route-warning:#ef4b2d; }
.vertex-v3 #app#app#app#app #routePlanner .safe-line-legend i:is(.caution,.steeper,.danger) { background:transparent!important; border:2px solid var(--route-warning); width:22px; height:8px; box-sizing:border-box; border-radius:3px; box-shadow:none; }
.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:12px; right:auto; bottom:12px; width: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 :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:has(#spotCard:not([hidden])) #thumbRail { display:flex!important; bottom:calc(var(--spot-card-h,150px) + 10px)!important; } }