/*
 * Vertex layout authority v3
 * One responsive shell. Legacy component styling remains in styles.css,* while this file exclusively owns hierarchy,positioning and responsive layout.
 */

.vertex-v3 #app{
  --v3-nav-mobile:62px;
  --v3-safe-bottom:env(safe-area-inset-bottom);
  --v3-mobile-top:max(10px,env(safe-area-inset-top));
  --v3-desktop-rail:76px;
  --v3-desktop-left:108px;
  --v3-panel-w:420px;
  --v3-gap:12px;
}/* ---------- Global navigation ownership ---------- */
.vertex-v3 #app .bottom-nav{
  position:fixed!important;
  z-index:110!important;
  margin:0!important;
  transform:none!important;
}.vertex-v3 #app .bottom-nav button{
  cursor:pointer;
}.vertex-v3 #app .bottom-nav button.selected{
  color:#fff!important;
}.vertex-v3 #app .topbar{
  z-index:42!important;
}.vertex-v3 #app .advanced-map-tool{
  display:none!important;
}.vertex-v3 #app .map-tools{
  z-index:41!important;
}.vertex-v3 #app .place-card{
  z-index:35!important;
}.vertex-v3 #app .mountain-primary-actions{
  margin-top:8px;
}.vertex-v3 #app .contextual-compass{
  transition:opacity .15s ease;
}/* ---------- Primary destination surfaces ---------- */
.vertex-v3 #app .explore-sheet,.vertex-v3 #app .you-sheet,.vertex-v3 #app .activities-sheet,.vertex-v3 #app .activity-detail,.vertex-v3 #app .route-detail,.vertex-v3 #app .compare-sheet{
  z-index:70!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}.vertex-v3 #app .community-view{
  z-index:68!important;
}.vertex-v3 #app .weather-view{
  z-index:65!important;
}.vertex-v3 #app .record-sheet,.vertex-v3 #app .panel,.vertex-v3 #app .avalanche-sheet{
  z-index:90!important;
}/* Primary destinations are not draggable sheets. */
.vertex-v3 #app .explore-sheet>.sheet-grabber,.vertex-v3 #app .activities-sheet>.sheet-grabber,.vertex-v3 #app .activity-detail>.sheet-grabber,.vertex-v3 #app .route-detail>.sheet-grabber,.vertex-v3 #app .compare-sheet>.sheet-grabber{
  display:none!important;
}/* ---------- Routes ---------- */
.vertex-v3 #app .routes-sheet .activities-head{
  margin-bottom:10px!important;
}.vertex-v3 #app .routes-library-toolbar{
  margin-bottom:10px!important;
}.vertex-v3 #app .route-library-filters{
  position:static!important;
  top:auto!important;
  margin:0 0 10px!important;
  padding:0!important;
  background:transparent!important;
}.vertex-v3 #app .route-row{
  border-left:0!important;
  border-right:0!important;
  border-radius:0!important;
  background:transparent!important;
  border-top:0!important;
  border-bottom:1px solid #ffffff10!important;
}.vertex-v3 #app .route-row .route-map-toggle{
  border-color:#ffffff16!important;
}/* ---------- You ---------- */
.vertex-v3 #app .you-sheet{
  overflow:auto!important;
}.vertex-v3 #app .you-menu>button{
  border-radius:0!important;
  background:transparent!important;
}/* ---------- Community contextual use ---------- */
.vertex-v3 #app[data-section="routes"] .community-head,.vertex-v3 #app[data-section="routes"] .community-tabs,.vertex-v3 #app[data-section="routes"] .community-library-summary,.vertex-v3 #app[data-section="routes"] #communityPeople,.vertex-v3 #app[data-section="routes"] #communityProfileView{
  display:none!important;
}.vertex-v3 #app[data-section="routes"] #routesDiscoverNav{
  display:grid!important;
}.vertex-v3 #app[data-section="routes"] #communityRoutes{
  display:block!important;
}.vertex-v3 #app[data-section="you"] .community-head,.vertex-v3 #app[data-section="you"] .community-tabs,.vertex-v3 #app[data-section="you"] #communityRoutes,.vertex-v3 #app[data-section="you"] #routesDiscoverNav{
  display:none!important;
}.vertex-v3 #app[data-section="you"] #peopleContextNav{
  display:grid!important;
}.vertex-v3 #app[data-section="you"] #communityPeople:not([hidden]){
  display:block!important;
}.vertex-v3 #app .people-context-nav{
  grid-template-columns:auto 1fr auto!important;
  align-items:center;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}.vertex-v3 #app .people-context-nav strong{
  text-align:center;
  font-size:13px;
}.vertex-v3 #app .people-context-nav button{
  min-height:36px!important;
  padding:0 10px!important;
  background:transparent!important;
  color:#c4cecb!important;
}.vertex-v3 #app .people-context-nav .context-back{
  text-align:left;
}.vertex-v3 #app .people-context-nav .context-profile-shortcut{
  text-align:right;
  color:#fff!important;
}/* ---------- Weather ---------- */
.vertex-v3 #app .weather-head{
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr) 40px!important;
  align-items:start!important;
  gap:9px!important;
}.vertex-v3 #app .weather-head>div{
  min-width:0;
}.vertex-v3 #app .weather-head .weather-back{
  width:36px!important;
  height:36px!important;
  border:0!important;
  border-radius:50%!important;
  background:#ffffff0b!important;
  font-size:24px!important;
}.vertex-v3 #app .weather-tabs{
  z-index:105!important;
}.vertex-v3 #app .weather-summary{
  display:none!important;
}/* ---------- Details ---------- */
.vertex-v3 #app .route-detail-actions{
  grid-template-columns:minmax(0,1fr) auto auto!important;
}.vertex-v3 #app .activity-actions{
  grid-template-columns:minmax(0,1fr) auto auto!important;
}.vertex-v3 #app .route-detail-menu{
  grid-template-columns:1fr!important;
}.vertex-v3 #app .community-route-card,.vertex-v3 #app .community-person-card{
  box-shadow:none!important;
}/* ---------- Tool sheets ---------- */
.vertex-v3 #app .panel{
  overflow:auto;
}.vertex-v3 #app .layer-more-group summary{
  cursor:pointer;
}.vertex-v3 #app .record-sheet{
  overflow:auto;
}.vertex-v3 #app .route-planner{
  z-index:95!important;
}/* ---------- Mobile ---------- */
@media(max-width:759px){
  .vertex-v3 #app{
    --v3-content-bottom:calc(var(--v3-nav-mobile) + var(--v3-safe-bottom));
  }

  .vertex-v3 #app .bottom-nav{
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    height:calc(var(--v3-nav-mobile) + var(--v3-safe-bottom))!important;
    min-height:calc(var(--v3-nav-mobile) + var(--v3-safe-bottom))!important;
    padding:2px 6px var(--v3-safe-bottom)!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    align-items:center!important;
    border:0!important;
    border-top:1px solid #ffffff12!important;
    border-radius:0!important;
    background:#091013f7!important;
    backdrop-filter:blur(22px)!important;
  }
  .vertex-v3 #app .bottom-nav button{
    height:56px!important;
    min-height:56px!important;
    padding:4px 0 3px!important;
    display:flex!important;
    justify-content:center!important;
    gap:2px!important;
  }
  .vertex-v3 #app .bottom-nav small{
    font-size:8px!important;
  }

  .vertex-v3 #app .topbar{
    position:fixed!important;
    top:var(--v3-mobile-top)!important;
    left:10px!important;
    right:10px!important;
    width:auto!important;
    max-width:none!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 50px!important;
    gap:7px!important;
  }
  .vertex-v3 #app .search{
    height:50px!important;
    min-height:50px!important;
    border-radius:15px!important;
    padding:0 11px!important;
  }
  .vertex-v3 #app .round{
    width:50px!important;
    height:50px!important;
    border-radius:15px!important;
  }

  .vertex-v3 #app .map-tools{
    position:fixed!important;
    top:calc(var(--v3-mobile-top) + 62px)!important;
    right:10px!important;
    left:auto!important;
    gap:6px!important;
  }
  .vertex-v3 #app .tool{
    width:42px!important;
    height:42px!important;
    border-radius:13px!important;
  }

  .vertex-v3 #app .place-card{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:calc(var(--v3-content-bottom) + 8px)!important;
    width:auto!important;
    max-width:none!important;
    max-height:min(46vh,360px)!important;
    padding:6px 14px 12px!important;
    overflow:auto!important;
    border-radius:18px!important;
  }
  .vertex-v3 #app .place-card.collapsed{
    max-height:108px!important;
    overflow:hidden!important;
  }
  .vertex-v3 #app .place-card.collapsed .place-card-content{
    max-height:82px!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
  .vertex-v3 #app .place-card.collapsed .place-expanded-content{
    display:none!important;
  }
  .vertex-v3 #app .place-card.collapsed .place-card-title{
    margin-bottom:3px!important;
  }
  .vertex-v3 #app .place-card.collapsed .eyebrow{
    display:none!important;
  }
  .vertex-v3 #app .place-card.collapsed .resort-status{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .vertex-v3 #app .place-card.collapsed .resort-status span:nth-child(3){
    display:none!important;
  }

  /* Destinations are screens, not floating cards. */
  .vertex-v3 #app .explore-sheet,
  .vertex-v3 #app .you-sheet,
  .vertex-v3 #app .activities-sheet,
  .vertex-v3 #app .activity-detail,
  .vertex-v3 #app .route-detail,
  .vertex-v3 #app .compare-sheet,
  .vertex-v3 #app .community-view,
  .vertex-v3 #app .weather-view{
    position:fixed!important;
    inset:0 0 var(--v3-content-bottom) 0!important;
    width:auto!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:calc(max(14px,env(safe-area-inset-top)) + 4px) 14px 22px!important;
    overflow:auto!important;
    border:0!important;
    border-radius:0!important;
    background:#0b1216!important;
    box-shadow:none!important;
    transform:none!important;
  }

  .vertex-v3 #app .community-view{
    padding-top:calc(max(14px,env(safe-area-inset-top)) + 6px)!important;
  }
  .vertex-v3 #app .weather-view{
    padding-top:calc(max(14px,env(safe-area-inset-top)) + 4px)!important;
  }

  .vertex-v3 #app .activities-head,
  .vertex-v3 #app .activity-detail-head,
  .vertex-v3 #app .route-detail-head{
    position:sticky!important;
    top:-18px!important;
    z-index:6!important;
    margin:-4px -14px 10px!important;
    padding:10px 14px 8px!important;
    background:linear-gradient(#0b1216 78%,#0b121600)!important;
  }

  .vertex-v3 #app .context-surface-nav{
    position:sticky!important;
    top:-4px!important;
    z-index:8!important;
    margin:0 0 14px!important;
    background:#0b1216!important;
  }

  /* Weather sub navigation belongs below its header, not floating over the app. */
  .vertex-v3 #app .weather-tabs{
    position:static!important;
    margin:0!important;
    pointer-events:auto!important;
  }

  .vertex-v3 #app .weather-forecast{
    padding-top:46px!important;
  }
  .vertex-v3 #app .weather-map-view{
    inset:0 0 var(--v3-content-bottom) 0!important;
  }
  
  
  

  /* Tool sheets remain sheets. */
  .vertex-v3 #app .panel,
  .vertex-v3 #app .record-sheet,
  .vertex-v3 #app .avalanche-sheet{
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    bottom:calc(var(--v3-content-bottom) + 8px)!important;
    top:auto!important;
    width:auto!important;
    max-width:none!important;
    max-height:min(68vh,620px)!important;
    margin:0!important;
    padding:12px 14px 16px!important;
    border:1px solid #ffffff18!important;
    border-radius:20px!important;
    background:#0d1519fa!important;
    box-shadow:0 18px 60px #0009!important;
    backdrop-filter:blur(22px)!important;
  }
  .vertex-v3 #app .route-planner,
  .vertex-v3 #app .replay-controls,
  .vertex-v3 #app .active-session{
    bottom:calc(var(--v3-content-bottom) + 8px)!important;
  }

  /* Legends never compete with the mountain dock at the bottom. */
  .vertex-v3 #app .slope-legend,
  .vertex-v3 #app .aspect-legend{
    top:calc(var(--v3-mobile-top) + 66px)!important;
    left:10px!important;
    right:60px!important;
    bottom:auto!important;
  }
  .vertex-v3 #app .sun-panel{
    top:calc(var(--v3-mobile-top) + 66px)!important;
    bottom:auto!important;
    left:10px!important;
    right:60px!important;
    width:auto!important;
    transform:none!important;
  }

  .vertex-v3 #app .app-brand-mark{
    display:none!important;
  }
}/* ---------- Desktop ---------- */
@media(min-width:760px){
  .vertex-v3 #app .bottom-nav{
    left:16px!important;
    right:auto!important;
    top:50%!important;
    bottom:auto!important;
    width:76px!important;
    height:auto!important;
    min-height:0!important;
    padding:8px 6px!important;
    transform:translateY(-50%)!important;
    display:flex!important;
    flex-direction:column!important;
    gap:4px!important;
    border:1px solid #ffffff18!important;
    border-radius:20px!important;
    background:#091013e8!important;
    backdrop-filter:blur(22px)!important;
    box-shadow:0 12px 36px #0007!important;
  }
  .vertex-v3 #app .bottom-nav button{
    flex:none!important;
    width:62px!important;
    min-height:58px!important;
    padding:7px 4px!important;
    border-radius:14px!important;
    justify-content:center!important;
  }
  .vertex-v3 #app .bottom-nav button.selected{
    background:#ffffff0d!important;
  }

  .vertex-v3 #app .topbar{
    position:fixed!important;
    top:20px!important;
    left:var(--v3-desktop-left)!important;
    right:auto!important;
    width:460px!important;
    max-width:460px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 54px!important;
    gap:8px!important;
  }
  .vertex-v3 #app .search{
    height:54px!important;
    border-radius:16px!important;
  }
  .vertex-v3 #app .round{
    width:54px!important;
    height:54px!important;
    border-radius:16px!important;
  }

  .vertex-v3 #app .map-tools{
    position:fixed!important;
    right:20px!important;
    top:20px!important;
    gap:7px!important;
  }

  .vertex-v3 #app .place-card{
    position:fixed!important;
    left:var(--v3-desktop-left)!important;
    right:auto!important;
    bottom:20px!important;
    width:420px!important;
    max-width:420px!important;
    max-height:390px!important;
    overflow:auto!important;
  }

  /* Destinations become a consistent desktop side workspace. */
  .vertex-v3 #app .explore-sheet,
  .vertex-v3 #app .you-sheet,
  .vertex-v3 #app .activities-sheet,
  .vertex-v3 #app .activity-detail,
  .vertex-v3 #app .route-detail,
  .vertex-v3 #app .compare-sheet,
  .vertex-v3 #app .community-view{
    position:fixed!important;
    top:20px!important;
    bottom:20px!important;
    left:var(--v3-desktop-left)!important;
    right:auto!important;
    width:430px!important;
    height:auto!important;
    max-width:430px!important;
    max-height:none!important;
    margin:0!important;
    padding:16px!important;
    overflow:auto!important;
    border:1px solid #ffffff18!important;
    border-radius:22px!important;
    background:#0b1216f8!important;
    box-shadow:0 22px 64px #0008!important;
    backdrop-filter:blur(24px)!important;
    transform:none!important;
  }

  .vertex-v3 #app .weather-view{
    position:fixed!important;
    top:20px!important;
    bottom:20px!important;
    left:var(--v3-desktop-left)!important;
    right:auto!important;
    width:min(620px,calc(100vw - 148px))!important;
    max-width:620px!important;
    height:auto!important;
    margin:0!important;
    padding:18px!important;
    overflow:auto!important;
    border:1px solid #ffffff18!important;
    border-radius:22px!important;
    background:#0b1216f8!important;
    box-shadow:0 22px 64px #0008!important;
    backdrop-filter:blur(24px)!important;
  }
  .vertex-v3 #app .weather-forecast{
    padding-top:48px!important;
  }
  .vertex-v3 #app .weather-tabs{
    position:static!important;
    margin:0!important;
    pointer-events:auto!important;
  }

  /* Weather map expands to the map workspace; forecast stays a side panel. */
  .vertex-v3 #app[data-explore-view="weather-map"] .weather-view{
    inset:0!important;
    width:auto!important;
    max-width:none!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    pointer-events:none!important;
  }
  .vertex-v3 #app[data-explore-view="weather-map"] .weather-tabs,
  .vertex-v3 #app[data-explore-view="weather-map"] .weather-map-view{
    pointer-events:auto!important;
  }
  
  
  

  .vertex-v3 #app .panel,
  .vertex-v3 #app .record-sheet,
  .vertex-v3 #app .avalanche-sheet{
    position:fixed!important;
    top:20px!important;
    bottom:20px!important;
    left:auto!important;
    right:20px!important;
    width:410px!important;
    max-width:410px!important;
    max-height:none!important;
    overflow:auto!important;
    border-radius:22px!important;
  }

  .vertex-v3 #app .route-planner,
  .vertex-v3 #app .replay-controls{
    bottom:20px!important;
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
  }
  .vertex-v3 #app .active-session{
    bottom:20px!important;
    left:auto!important;
    right:20px!important;
  }

  .vertex-v3 #app .slope-legend,
  .vertex-v3 #app .aspect-legend{
    left:var(--v3-desktop-left)!important;
    right:auto!important;
    bottom:20px!important;
    max-width:520px!important;
  }
  .vertex-v3 #app .sun-panel{
    left:50%!important;
    right:auto!important;
    bottom:20px!important;
    transform:translateX(-50%)!important;
  }

  .vertex-v3 #app .app-brand-mark{
    top:20px!important;
    right:88px!important;
  }
}/* Hidden always wins. */
.vertex-v3 #app [hidden]{
  display:none!important;
}/* Replay has an explicit exit plus transport controls. */
.vertex-v3 #app .replay-controls{
  grid-template-columns:38px 42px minmax(0,1fr) 44px!important;
}.vertex-v3 #app #replayExit{
  font-size:20px!important;
}.vertex-v3 #app .replay-controls span{
  left:108px!important;
}
@media(max-width:420px){.vertex-v3 #app .replay-controls{
    grid-template-columns:34px 38px minmax(0,1fr) 40px!important;
    gap:6px!important;
  }.vertex-v3 #app .replay-controls span{
    left:94px!important;
  }
}/* ---------- Context overlays: one purpose each ---------- */

/* Route detail already communicates the preview context; a second floating
   COMMUNITY badge adds noise without adding navigation. */
.vertex-v3 #app .community-preview-bar{
  display:none!important;
}/* Community map gets one explicit back/context bar. */
.vertex-v3 #app .community-map-bar{
  z-index:72!important;
  pointer-events:none!important;
}.vertex-v3 #app .community-map-bar button{
  pointer-events:auto!important;
}/* Route presence on Explore is a small contextual control,never a second dock. */
.vertex-v3 #app .map-route-chip{
  z-index:44!important;
}/* Dialogs are contextual modals; they must not inherit the destination geometry. */
.vertex-v3 #app .profile-editor-sheet,.vertex-v3 #app .community-safety-sheet,.vertex-v3 #app .powder-finder-sheet{
  z-index:120!important;
}

@media(max-width:759px){.vertex-v3 #app .community-map-bar{
    position:fixed!important;
    top:calc(var(--v3-mobile-top) + 60px)!important;
    left:10px!important;
    right:10px!important;
    width:auto!important;
    transform:none!important;
  }.vertex-v3 #app .community-map-bar span{
    max-width:calc(100vw - 120px)!important;
  }.vertex-v3 #app .map-route-chip{
    position:fixed!important;
    top:calc(var(--v3-mobile-top) + 60px)!important;
    bottom:auto!important;
    left:10px!important;
    right:auto!important;
    transform:none!important;
    max-width:calc(100vw - 70px)!important;
  }.vertex-v3 #app .profile-editor-sheet,.vertex-v3 #app .community-safety-sheet,.vertex-v3 #app .powder-finder-sheet{
    position:fixed!important;
    inset:0 0 var(--v3-content-bottom) 0!important;
    width:auto!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:calc(max(14px,env(safe-area-inset-top)) + 4px) 14px 22px!important;
    overflow:auto!important;
    border:0!important;
    border-radius:0!important;
    transform:none!important;
    background:#0b1216!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
  }.vertex-v3 #app .profile-editor-sheet .publish-route-head,.vertex-v3 #app .community-safety-sheet .publish-route-head,.vertex-v3 #app .powder-finder-sheet .publish-route-head{
    position:sticky!important;
    top:-18px!important;
    z-index:3!important;
    margin:-4px -14px 10px!important;
    padding:10px 14px 8px!important;
    background:linear-gradient(#0b1216 80%,#0b121600)!important;
  }
}

@media(min-width:760px){.vertex-v3 #app .community-map-bar{
    position:fixed!important;
    top:80px!important;
    left:var(--v3-desktop-left)!important;
    right:auto!important;
    width:430px!important;
    transform:none!important;
  }.vertex-v3 #app .map-route-chip{
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    bottom:20px!important;
    transform:translateX(-50%)!important;
  }.vertex-v3 #app .profile-editor-sheet,.vertex-v3 #app .community-safety-sheet{
    position:fixed!important;
    top:40px!important;
    bottom:40px!important;
    left:calc(var(--v3-desktop-left) + 20px)!important;
    right:auto!important;
    width:390px!important;
    max-width:390px!important;
    max-height:none!important;
    margin:0!important;
    overflow:auto!important;
    border-radius:20px!important;
    transform:none!important;
  }.vertex-v3 #app .powder-finder-sheet{
    position:fixed!important;
    top:40px!important;
    bottom:40px!important;
    left:calc(var(--v3-desktop-left) + 20px)!important;
    right:auto!important;
    width:560px!important;
    max-width:min(560px,calc(100vw - 170px))!important;
    max-height:none!important;
    margin:0!important;
    overflow:auto!important;
    transform:none!important;
  }
}/* =========================================================
   Vertex v4 layout authority
   Weather is one destination. Desktop is rail + map + panel.
   ========================================================= */

.vertex-v3 #app{
  --v4-rail-w:80px;
  --v4-panel-w:430px;
  --v4-panel-gap:16px;
}/* Weather owns its own Forecast / Weather map navigation. */
.vertex-v3 #app .weather-view>.weather-tabs{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  width:100%!important;
  margin:0 0 14px!important;
  padding:3px!important;
  border:1px solid #ffffff12!important;
  border-radius:12px!important;
  background:#ffffff07!important;
  pointer-events:auto!important;
}.vertex-v3 #app .weather-view>.weather-tabs button{
  min-height:36px!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  color:#8f9c99!important;
  font-size:10px!important;
  font-weight:800!important;
}.vertex-v3 #app .weather-view>.weather-tabs button.active{
  background:#eef2f0!important;
  color:#11191d!important;
}.vertex-v3 #app .weather-view.map-active{
  overflow:hidden!important;
}.vertex-v3 #app .weather-map-view{
  position:relative!important;
  width:100%!important;
  min-height:0!important;
  overflow:hidden!important;
  background:#11191d!important;
}.vertex-v3 #app #weatherMapCanvas{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
}/* Powder map must visibly fail instead of appearing as a blank broken map. */
.vertex-v3 #app .powder-raster-map.map-error{
  display:grid!important;
  place-items:center!important;
  background:
    linear-gradient(135deg,#182226,#0f171a)!important;
}.vertex-v3 #app .powder-raster-map.map-error::after{
  content:"Map temporarily unavailable";
  color:#91a09c;
  font-size:10px;
  font-weight:700;
}/* ---------------- Mobile ---------------- */
@media(max-width:759px){
  .vertex-v3 #app .weather-view{
    display:flex!important;
    flex-direction:column!important;
    inset:0 0 var(--v3-content-bottom) 0!important;
    padding:calc(max(12px,env(safe-area-inset-top)) + 2px) 12px 14px!important;
    overflow:auto!important;
  }
  .vertex-v3 #app .weather-view[hidden]{display:none!important}
  .vertex-v3 #app .weather-head{
    flex:0 0 auto!important;
    position:sticky!important;
    top:-4px!important;
    z-index:14!important;
    margin:0 -12px 8px!important;
    padding:6px 12px 8px!important;
    background:linear-gradient(#0b1216 82%,#0b121600)!important;
  }
  .vertex-v3 #app .weather-view>.weather-tabs{
    flex:0 0 auto!important;
    position:sticky!important;
    top:58px!important;
    z-index:13!important;
    background:#111a1eea!important;
    backdrop-filter:blur(18px)!important;
  }
  .vertex-v3 #app .weather-forecast{
    padding:0!important;
    /* The base max-width + auto margins would shrink this flex item to its max-content width. */
    width:100%!important;
    min-width:0!important;
  }
  .vertex-v3 #app .weather-view.map-active{
    padding-bottom:10px!important;
  }
  .vertex-v3 #app .weather-view.map-active .weather-map-view{
    flex:1 1 auto!important;
    height:auto!important;
    min-height:300px!important;
    margin:0!important;
    border:1px solid #ffffff14!important;
    border-radius:16px!important;
  }
  
  
  

  /* Forecast hierarchy: useful first, deep detail second. */
  .vertex-v3 #app .weather-summary{
    display:none!important;
  }
  .vertex-v3 #app .weather-levels{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    margin:10px 0 12px!important;
  }
  .vertex-v3 #app .weather-level-card{
    min-width:0!important;
    padding:9px!important;
  }
  .vertex-v3 #app .weather-level-card>div{
    display:none!important;
  }
  .vertex-v3 #app .weather-level-card b{
    font-size:18px!important;
  }
  .vertex-v3 #app .weather-level-card small{
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}/* ---------------- Desktop ---------------- */
@media(min-width:760px){
  /* Permanent desktop rail, not a floating mobile tab bar. */
  .vertex-v3 #app .bottom-nav{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:var(--v4-rail-w)!important;
    height:100dvh!important;
    min-height:100dvh!important;
    padding:88px 8px 18px!important;
    transform:none!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    gap:6px!important;
    border:0!important;
    border-right:1px solid #ffffff12!important;
    border-radius:0!important;
    background:#091013f5!important;
    box-shadow:none!important;
  }
  .vertex-v3 #app .bottom-nav button{
    width:64px!important;
    min-height:62px!important;
    border-radius:14px!important;
  }
  .vertex-v3 #app .bottom-nav button.selected{
    background:#ffffff0d!important;
  }

  .vertex-v3 #app .app-brand-mark{
    top:21px!important;
    left:14px!important;
    right:auto!important;
    width:52px!important;
    opacity:.8!important;
    z-index:112!important;
  }

  .vertex-v3 #app .topbar{
    top:18px!important;
    left:calc(var(--v4-rail-w) + 18px)!important;
    width:min(460px,calc(100vw - var(--v4-rail-w) - 110px))!important;
  }
  .vertex-v3 #app .place-card{
    left:calc(var(--v4-rail-w) + 18px)!important;
    bottom:18px!important;
  }
  .vertex-v3 #app .map-tools{
    top:18px!important;
    right:18px!important;
  }

  /* One desktop side workspace. */
  .vertex-v3 #app .explore-sheet,
  .vertex-v3 #app .you-sheet,
  .vertex-v3 #app .activities-sheet,
  .vertex-v3 #app .activity-detail,
  .vertex-v3 #app .route-detail,
  .vertex-v3 #app .compare-sheet,
  .vertex-v3 #app .community-view{
    top:16px!important;
    bottom:16px!important;
    left:calc(var(--v4-rail-w) + 16px)!important;
    width:var(--v4-panel-w)!important;
    max-width:var(--v4-panel-w)!important;
    border-radius:18px!important;
  }

  /* When a destination panel is open, map-only chrome gets out of the way. */
  .vertex-v3 #app:has(.explore-sheet:not([hidden])) .topbar,
  .vertex-v3 #app:has(.you-sheet:not([hidden])) .topbar,
  .vertex-v3 #app:has(.activities-sheet:not([hidden])) .topbar,
  .vertex-v3 #app:has(.activity-detail:not([hidden])) .topbar,
  .vertex-v3 #app:has(.route-detail:not([hidden])) .topbar,
  .vertex-v3 #app:has(.compare-sheet:not([hidden])) .topbar,
  .vertex-v3 #app:has(.community-view:not([hidden])) .topbar,
  .vertex-v3 #app:has(.weather-view:not([hidden])) .topbar{
    display:none!important;
  }
  .vertex-v3 #app:has(.explore-sheet:not([hidden])) .place-card,
  .vertex-v3 #app:has(.you-sheet:not([hidden])) .place-card,
  .vertex-v3 #app:has(.activities-sheet:not([hidden])) .place-card,
  .vertex-v3 #app:has(.activity-detail:not([hidden])) .place-card,
  .vertex-v3 #app:has(.route-detail:not([hidden])) .place-card,
  .vertex-v3 #app:has(.compare-sheet:not([hidden])) .place-card,
  .vertex-v3 #app:has(.community-view:not([hidden])) .place-card,
  .vertex-v3 #app:has(.weather-view:not([hidden])) .place-card{
    display:none!important;
  }

  /* Forecast = focused side workspace with map still visible. */
  .vertex-v3 #app .weather-view{
    position:fixed!important;
    top:16px!important;
    bottom:16px!important;
    left:calc(var(--v4-rail-w) + 16px)!important;
    right:auto!important;
    width:520px!important;
    max-width:520px!important;
    height:auto!important;
    padding:16px!important;
    overflow:auto!important;
    border:1px solid #ffffff18!important;
    border-radius:18px!important;
    background:#0b1216f8!important;
    box-shadow:0 22px 64px #0008!important;
    backdrop-filter:blur(24px)!important;
  }
  .vertex-v3 #app .weather-forecast{
    padding:0!important;
  }

  /* Weather Map = actual map workspace to the right of the rail. */
  .vertex-v3 #app[data-explore-view="weather-map"] .weather-view{
    inset:0 0 0 var(--v4-rail-w)!important;
    width:auto!important;
    max-width:none!important;
    padding:18px!important;
    border:0!important;
    border-radius:0!important;
    background:#0b1216!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
  }
  .vertex-v3 #app[data-explore-view="weather-map"] .weather-head{
    position:absolute!important;
    z-index:14!important;
    top:18px!important;
    left:18px!important;
    width:390px!important;
    padding:10px 12px!important;
    border:1px solid #ffffff16!important;
    border-radius:15px!important;
    background:#0b1215e8!important;
    backdrop-filter:blur(18px)!important;
  }
  .vertex-v3 #app[data-explore-view="weather-map"] .weather-view>.weather-tabs{
    position:absolute!important;
    z-index:14!important;
    top:104px!important;
    left:18px!important;
    width:300px!important;
    margin:0!important;
    background:#0b1215e8!important;
    backdrop-filter:blur(18px)!important;
  }
  .vertex-v3 #app[data-explore-view="weather-map"] .weather-map-view{
    position:absolute!important;
    inset:0!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
  }
  
  
  

  /* Forecast information density on desktop. */
  .vertex-v3 #app .weather-levels{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .vertex-v3 #app .weather-level-card{
    min-width:0!important;
    padding:10px!important;
  }
  .vertex-v3 #app .weather-level-card>div span:nth-child(n+3){
    display:none!important;
  }

  /* Desktop Powder is a side workspace, not a centered modal floating over everything. */
  .vertex-v3 #app .powder-finder-sheet{
    top:16px!important;
    bottom:16px!important;
    left:calc(var(--v4-rail-w) + 16px)!important;
    right:auto!important;
    width:560px!important;
    max-width:min(560px,calc(100vw - var(--v4-rail-w) - 48px))!important;
    border-radius:18px!important;
  }
}/* =========================================================
   Vertex v5 interaction authority
   Weather controls must always sit above the weather canvas.
   ========================================================= */
.vertex-v3 #app .weather-map-view{
  isolation:isolate!important;
}.vertex-v3 #app #weatherMapCanvas{
  z-index:0!important;
  pointer-events:auto!important;
}
@media(max-width:759px){
}
@media(min-width:760px){.vertex-v3 #app[data-explore-view="weather-map"] #weatherMapCanvas{
    z-index:0!important;
  }
}/* =========================================================
   Vertex UI system v6 — compact professional scale authority
   Visual chrome is restrained; touch targets remain >= 44px.
   ========================================================= */
.vertex-v3 #app{
  --ui-hit:44px;
  --ui-control:40px;
  --ui-control-sm:34px;
  --ui-radius:11px;
  --ui-radius-sm:9px;
  --ui-radius-panel:16px;
  --ui-title:18px;
  --ui-heading:13px;
  --ui-body:11px;
  --ui-label:9px;
  --ui-meta:8.5px;
  --ui-icon:17px;
  --ui-gap:8px;
}/* ---------- Typography ---------- */
.vertex-v3 #app h1,.vertex-v3 #app .place-card h1,.vertex-v3 #app .weather-head h1{
  font-size:var(--ui-title)!important;
  line-height:1.08!important;
  letter-spacing:-.018em!important;
}.vertex-v3 #app h2,.vertex-v3 #app .activities-head h2,.vertex-v3 #app .activity-detail-head h2,.vertex-v3 #app .route-detail-head h2,.vertex-v3 #app .panel-head h2,.vertex-v3 #app .record-head h2{
  font-size:17px!important;
  line-height:1.12!important;
  letter-spacing:-.012em!important;
}.vertex-v3 #app h3{
  font-size:14px!important;
}.vertex-v3 #app .eyebrow,.vertex-v3 #app .activities-head small,.vertex-v3 #app .activity-detail-head small,.vertex-v3 #app .route-detail-head small,.vertex-v3 #app .panel-head small,.vertex-v3 #app .record-head small,.vertex-v3 #app .weather-head small,.vertex-v3 #app .weather-section-head small,.vertex-v3 #app .layer-section small{
  font-size:var(--ui-label)!important;
  letter-spacing:.12em!important;
  font-weight:800!important;
}.vertex-v3 #app p,.vertex-v3 #app .weather-head p{
  font-size:var(--ui-body)!important;
  line-height:1.42!important;
}.vertex-v3 #app button{
  letter-spacing:0!important;
}/* ---------- Shared icon / close / back controls ---------- */
.vertex-v3 #app .round,.vertex-v3 #app .tool,.vertex-v3 #app .weather-head>button,.vertex-v3 #app .panel-head>button,.vertex-v3 #app .record-head>button,.vertex-v3 #app .activities-head>button,.vertex-v3 #app .activity-detail-head>button,.vertex-v3 #app .route-detail-head>button,.vertex-v3 #app .publish-route-head>button,.vertex-v3 #app .community-map-bar>button{
  width:var(--ui-hit)!important;
  height:var(--ui-hit)!important;
  min-width:var(--ui-hit)!important;
  min-height:var(--ui-hit)!important;
  padding:0!important;
  border-radius:12px!important;
  font-size:18px!important;
  display:grid!important;
  place-items:center!important;
}.vertex-v3 #app .community-map-bar>button{
  /* "‹ Routes" is a text label, not an icon: keep the hit height but let the label set the width. */
  width:auto!important;
  padding:0 12px!important;
  font-size:12px!important;
  white-space:nowrap!important;
}.vertex-v3 #app .round,.vertex-v3 #app .tool{
  border-color:#ffffff18!important;
  background:#0d1518dd!important;
  box-shadow:0 5px 16px #0004!important;
  backdrop-filter:blur(14px)!important;
}.vertex-v3 #app .tool.active{
  background:#edf2f0!important;
  color:#11191c!important;
}/* ---------- Search ---------- */
.vertex-v3 #app .topbar{
  gap:7px!important;
}.vertex-v3 #app .search{
  height:var(--ui-hit)!important;
  min-height:var(--ui-hit)!important;
  padding:0 7px 0 11px!important;
  border-radius:12px!important;
  border-color:#ffffff18!important;
  box-shadow:0 5px 18px #0004!important;
}.vertex-v3 #app .search-icon{
  margin-right:7px!important;
  font-size:20px!important;
}.vertex-v3 #app .search input{
  font-size:13px!important;
}.vertex-v3 #app .search-submit{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  flex-basis:34px!important;
  margin-left:4px!important;
  border-radius:9px!important;
  font-size:15px!important;
}.vertex-v3 #app .search-result{
  min-height:48px!important;
  padding:8px 11px!important;
}.vertex-v3 #app .search-result b{
  font-size:11px!important;
}.vertex-v3 #app .search-result small{
  font-size:var(--ui-meta)!important;
}/* ---------- Bottom / desktop navigation ---------- */
.vertex-v3 #app .bottom-nav button{
  font-size:var(--ui-icon)!important;
  font-weight:700!important;
}.vertex-v3 #app .bottom-nav small{
  font-size:var(--ui-meta)!important;
  font-weight:700!important;
  letter-spacing:.01em!important;
}.vertex-v3 #app .bottom-nav .record span{
  width:30px!important;
  height:30px!important;
  font-size:11px!important;
}/* ---------- Tabs / segmented controls / chips ---------- */
.vertex-v3 #app .weather-view>.weather-tabs button,.vertex-v3 #app .powder-map-tabs button,.vertex-v3 #app .context-surface-nav button,.vertex-v3 #app .community-tabs button,.vertex-v3 #app .route-library-filters button{
  min-height:var(--ui-control-sm)!important;
  height:var(--ui-control-sm)!important;
  padding:0 10px!important;
  border-radius:var(--ui-radius-sm)!important;
  font-size:var(--ui-label)!important;
  font-weight:800!important;
}.vertex-v3 #app .weather-view>.weather-tabs,.vertex-v3 #app .context-surface-nav{
  gap:2px!important;
  padding:2px!important;
  border-radius:var(--ui-radius)!important;
}.vertex-v3 #app .route-library-filters{
  gap:5px!important;
}/* ---------- Layer panel ---------- */
.vertex-v3 #app .layer-row{
  min-height:52px!important;
  padding:7px 0!important;
  gap:10px!important;
}.vertex-v3 #app .layer-preview{
  width:42px!important;
  height:34px!important;
  flex:0 0 42px!important;
  border-radius:8px!important;
}.vertex-v3 #app .layer-row b{
  font-size:11px!important;
  line-height:1.2!important;
}.vertex-v3 #app .layer-row small{
  margin-top:2px!important;
  font-size:var(--ui-meta)!important;
  line-height:1.25!important;
}.vertex-v3 #app .layer-row>i{
  min-width:24px!important;
  font-size:12px!important;
}.vertex-v3 #app .layer-section{
  padding:10px 0 5px!important;
}.vertex-v3 #app .layer-more-group summary{
  min-height:38px!important;
  padding:0 2px!important;
  font-size:var(--ui-label)!important;
}/* ---------- Map place card ---------- */
.vertex-v3 #app .place-card{
  border-radius:var(--ui-radius-panel)!important;
  padding:6px 13px 11px!important;
}.vertex-v3 #app .place-card-title{
  gap:8px!important;
}.vertex-v3 #app .favorite-place{
  width:var(--ui-hit)!important;
  height:var(--ui-hit)!important;
  min-width:var(--ui-hit)!important;
  min-height:var(--ui-hit)!important;
  font-size:18px!important;
}.vertex-v3 #app .resort-status span,.vertex-v3 #app .stats span{
  padding:7px 6px!important;
}.vertex-v3 #app .resort-status b,.vertex-v3 #app .stats b{
  font-size:11px!important;
}.vertex-v3 #app .resort-status small,.vertex-v3 #app .stats small{
  font-size:var(--ui-meta)!important;
}.vertex-v3 #app .mountain-primary-actions{
  gap:6px!important;
}.vertex-v3 #app .mountain-primary-actions button{
  min-height:52px!important;
  padding:7px 9px!important;
  border-radius:10px!important;
}.vertex-v3 #app .mountain-primary-actions button>span{
  font-size:15px!important;
}.vertex-v3 #app .mountain-primary-actions button>b{
  font-size:10px!important;
}.vertex-v3 #app .mountain-primary-actions button>small{
  font-size:var(--ui-meta)!important;
}/* ---------- Lists / rows ---------- */
.vertex-v3 #app .activity-row,.vertex-v3 #app .route-row,.vertex-v3 #app .community-route-card,.vertex-v3 #app .community-person-card,.vertex-v3 #app .you-menu>button{
  min-height:56px!important;
}.vertex-v3 #app .activity-row,.vertex-v3 #app .route-row{
  padding:7px 4px!important;
}.vertex-v3 #app .activity-icon,.vertex-v3 #app .you-menu>button>span{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  border-radius:9px!important;
  font-size:14px!important;
}.vertex-v3 #app .activity-copy b,.vertex-v3 #app .you-menu>button b,.vertex-v3 #app .community-route-card>b{
  font-size:11.5px!important;
}.vertex-v3 #app .activity-copy small,.vertex-v3 #app .activity-copy em,.vertex-v3 #app .you-menu>button small{
  font-size:var(--ui-meta)!important;
}.vertex-v3 #app .activity-arrow,.vertex-v3 #app .you-menu>button>i{
  font-size:17px!important;
}.vertex-v3 #app .community-route-card,.vertex-v3 #app .community-person-card{
  padding:10px 2px!important;
}/* ---------- Primary / secondary actions ---------- */
.vertex-v3 #app .route-detail-actions button,.vertex-v3 #app .route-detail-menu button,.vertex-v3 #app .activity-actions button,.vertex-v3 #app .record-actions button,.vertex-v3 #app .route-add-primary,.vertex-v3 #app .route-filter-toggle,.vertex-v3 #app .community-route-save-inline,.vertex-v3 #app .publish-route-actions button,.vertex-v3 #app .settings-actions button{
  min-height:40px!important;
  height:auto!important;
  padding:8px 11px!important;
  border-radius:10px!important;
  font-size:10px!important;
  font-weight:800!important;
}.vertex-v3 #app .route-detail-actions #routeDetailMore,.vertex-v3 #app .activity-actions #activityMoreButton{
  width:40px!important;
  min-width:40px!important;
  padding:0!important;
}/* ---------- Stats ---------- */
.vertex-v3 #app .activities-totals,.vertex-v3 #app .activity-detail-stats,.vertex-v3 #app .route-detail-stats{
  border-radius:11px!important;
  margin-bottom:10px!important;
}.vertex-v3 #app .activities-totals span,.vertex-v3 #app .activity-detail-stats span,.vertex-v3 #app .route-detail-stats span{
  padding:8px!important;
}.vertex-v3 #app .activities-totals b,.vertex-v3 #app .activity-detail-stats b,.vertex-v3 #app .route-detail-stats b{
  font-size:12px!important;
}.vertex-v3 #app .activities-totals small,.vertex-v3 #app .activity-detail-stats small,.vertex-v3 #app .route-detail-stats small{
  font-size:var(--ui-meta)!important;
}/* ---------- Weather ---------- */
.vertex-v3 #app .weather-now-main strong{
  font-size:30px!important;
}.vertex-v3 #app .weather-now-main b{
  font-size:12px!important;
}.vertex-v3 #app .weather-now-metrics b,.vertex-v3 #app .weather-sun b{
  font-size:11px!important;
}.vertex-v3 #app .weather-now-metrics small,.vertex-v3 #app .weather-sun small{
  font-size:var(--ui-meta)!important;
}.vertex-v3 #app .weather-level-card{
  border-radius:10px!important;
  padding:8px!important;
}.vertex-v3 #app .weather-level-card>b{
  font-size:17px!important;
}.vertex-v3 #app .weather-level-card small{
  font-size:var(--ui-meta)!important;
}.vertex-v3 #app .weather-hour-card{
  min-width:62px!important;
  padding:8px 6px!important;
}.vertex-v3 #app .weather-hour-card b{
  font-size:12px!important;
}.vertex-v3 #app .weather-hour-card small,.vertex-v3 #app .weather-hour-card span{
  font-size:var(--ui-meta)!important;
}.vertex-v3 #app .weather-days article{
  min-height:48px!important;
  padding:7px 2px!important;
  font-size:10px!important;
}.vertex-v3 #app .powder-card{
  min-height:54px!important;
  padding:9px 11px!important;
  border-radius:11px!important;
}.vertex-v3 #app .powder-card b{
  font-size:11px!important;
}.vertex-v3 #app .powder-card small,.vertex-v3 #app .powder-card span{
  font-size:var(--ui-meta)!important;
}/* ---------- Form controls / dialogs ---------- */
.vertex-v3 #app input:not([type="range"]),.vertex-v3 #app select,.vertex-v3 #app textarea{
  border-radius:10px!important;
  font-size:11px!important;
}.vertex-v3 #app select,.vertex-v3 #app input:not([type="range"]):not([type="checkbox"]):not([type="radio"]){
  min-height:40px!important;
}.vertex-v3 #app .profile-editor-sheet,.vertex-v3 #app .community-safety-sheet,.vertex-v3 #app .powder-finder-sheet,.vertex-v3 #app .panel,.vertex-v3 #app .record-sheet{
  border-radius:var(--ui-radius-panel)!important;
}/* ---------- Mobile ---------- */
@media(max-width:759px){
  .vertex-v3 #app .topbar{
    left:9px!important;
    right:9px!important;
  }
  .vertex-v3 #app .search input{
    font-size:16px!important; /* Prevent iOS input zoom. */
  }
  .vertex-v3 #app .map-tools{
    right:9px!important;
    gap:5px!important;
  }
  .vertex-v3 #app .bottom-nav{
    --v3-nav-mobile:58px;
    padding-top:1px!important;
  }
  .vertex-v3 #app .bottom-nav button{
    height:52px!important;
    min-height:52px!important;
  }
  .vertex-v3 #app .place-card{
    left:9px!important;
    right:9px!important;
  }
  .vertex-v3 #app .panel,
  .vertex-v3 #app .record-sheet,
  .vertex-v3 #app .avalanche-sheet{
    left:7px!important;
    right:7px!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
}/* ---------- Desktop ---------- */
@media(min-width:760px){
  .vertex-v3 #app{
    --v4-rail-w:72px;
    --v4-rail-half:36px;
  }
  .vertex-v3 #app .bottom-nav{
    width:var(--v4-rail-w)!important;
    padding-left:5px!important;
    padding-right:5px!important;
  }
  .vertex-v3 #app .bottom-nav button{
    width:60px!important;
    min-height:56px!important;
    height:56px!important;
  }
  .vertex-v3 #app .app-brand-mark{
    left:12px!important;
    width:46px!important;
  }
  .vertex-v3 #app .topbar{
    width:min(430px,calc(100vw - var(--v4-rail-w) - 100px))!important;
  }
  .vertex-v3 #app .explore-sheet,
  .vertex-v3 #app .you-sheet,
  .vertex-v3 #app .activities-sheet,
  .vertex-v3 #app .activity-detail,
  .vertex-v3 #app .route-detail,
  .vertex-v3 #app .compare-sheet,
  .vertex-v3 #app .community-view{
    width:410px!important;
    max-width:410px!important;
    padding:14px!important;
  }
  .vertex-v3 #app .weather-view{
    width:500px!important;
    max-width:500px!important;
    padding:14px!important;
  }
}/* =========================================================
   Vertex responsive authority v7
   Final geometry rules for mobile,tablet and desktop.
   ========================================================= */

/* Nested route dialogs belong to Route Detail,not to the viewport. */
.vertex-v3 #app .route-detail{
  position:fixed!important;
}.vertex-v3 #app .route-detail .publish-route-sheet{
  position:absolute!important;
  z-index:40!important;
  inset:0!important;
  /* The sheet fills Route Detail; keep its grid rows at content height instead of stretching inputs/buttons. */
  align-content:start!important;
  width:auto!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:14px!important;
  overflow:auto!important;
  border:0!important;
  border-radius:inherit!important;
  background:#0b1216!important;
  box-shadow:none!important;
  transform:none!important;
}.vertex-v3 #app .route-detail .publish-route-sheet .publish-route-head{
  position:sticky!important;
  top:-14px!important;
  z-index:3!important;
  margin:-14px -14px 10px!important;
  padding:12px 14px 8px!important;
  background:linear-gradient(#0b1216 82%,#0b121600)!important;
}/* Map-workflow controls stay map-centric on every screen size. */
.vertex-v3 #app .route-planner,.vertex-v3 #app .replay-controls,.vertex-v3 #app .active-session{
  z-index:100!important;
  margin:0!important;
}.vertex-v3 #app .route-planner{
  max-height:min(46vh,420px)!important;
  overflow:auto!important;
}.vertex-v3 #app .replay-controls{
  max-width:none!important;
}.vertex-v3 #app .active-session{
  max-width:none!important;
}/* Contextual map overlays must never exceed the viewport. */
.vertex-v3 #app .map-route-chip,.vertex-v3 #app .community-map-bar,.vertex-v3 #app .avalanche-chip,.vertex-v3 #app .bulletin-terrain-legend{
  max-width:calc(100vw - 24px)!important;
}/* ---------- Mobile ---------- */
@media(max-width:759px){
  .vertex-v3 #app{
    --v7-edge:8px;
  }

  /* Primary destinations always occupy the usable area above nav. */
  .vertex-v3 #app .explore-sheet,
  .vertex-v3 #app .you-sheet,
  .vertex-v3 #app .activities-sheet,
  .vertex-v3 #app .activity-detail,
  .vertex-v3 #app .route-detail,
  .vertex-v3 #app .compare-sheet,
  .vertex-v3 #app .community-view,
  .vertex-v3 #app .weather-view,
  .vertex-v3 #app .profile-editor-sheet,
  .vertex-v3 #app .community-safety-sheet,
  .vertex-v3 #app .powder-finder-sheet{
    inset:0 0 var(--v3-content-bottom) 0!important;
    width:auto!important;
    max-width:none!important;
    max-height:none!important;
    border-radius:0!important;
  }

  /* Tool sheets stay docked and never hide under the nav. */
  .vertex-v3 #app .panel,
  .vertex-v3 #app .record-sheet,
  .vertex-v3 #app .avalanche-sheet{
    left:var(--v7-edge)!important;
    right:var(--v7-edge)!important;
    bottom:calc(var(--v3-content-bottom) + var(--v7-edge))!important;
    top:auto!important;
    width:auto!important;
    max-width:none!important;
    max-height:min(68vh,calc(100dvh - var(--v3-content-bottom) - 26px))!important;
  }

  .vertex-v3 #app .route-planner{
    position:fixed!important;
    left:var(--v7-edge)!important;
    right:var(--v7-edge)!important;
    bottom:calc(var(--v3-content-bottom) + var(--v7-edge))!important;
    top:auto!important;
    width:auto!important;
    max-width:none!important;
    transform:none!important;
    padding:10px!important;
    border-radius:14px!important;
  }
  .vertex-v3 #app .route-planner-actions{
    gap:5px!important;
  }
  .vertex-v3 #app .route-planner-actions button{
    min-height:40px!important;
    padding:6px 8px!important;
    font-size:9px!important;
  }

  .vertex-v3 #app .replay-controls{
    position:fixed!important;
    left:var(--v7-edge)!important;
    right:var(--v7-edge)!important;
    bottom:calc(var(--v3-content-bottom) + var(--v7-edge))!important;
    width:auto!important;
    transform:none!important;
  }

  .vertex-v3 #app .active-session{
    position:fixed!important;
    left:var(--v7-edge)!important;
    right:var(--v7-edge)!important;
    bottom:calc(var(--v3-content-bottom) + var(--v7-edge))!important;
    width:auto!important;
  }
  .vertex-v3 #app .active-session.collapsed{
    right:auto!important;
    max-width:min(280px,calc(100vw - 16px))!important;
  }

  /* The tracks bar sits under the search bar, left of the map tools column; an own-route chip moves below it. */
  .vertex-v3 #app .community-map-bar{
    left:var(--v7-edge)!important;
    right:62px!important;
    width:auto!important;
  }
  .vertex-v3 #app:has(.community-map-bar:not([hidden])) .map-route-chip{
    top:calc(var(--v3-mobile-top) + 140px)!important;
  }
  .vertex-v3 #app .map-route-chip{
    left:var(--v7-edge)!important;
    right:auto!important;
    max-width:calc(100vw - 64px)!important;
  }
}/* Small phones: keep content readable without allowing side overflow. */
@media(max-width:390px){
  .vertex-v3 #app .route-detail-stats,
  .vertex-v3 #app .activity-detail-stats,
  .vertex-v3 #app .activities-totals{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .vertex-v3 #app .route-detail-actions{
    grid-template-columns:minmax(0,1fr) auto!important;
  }
  .vertex-v3 #app .route-detail-actions #routeDetailMore{
    grid-column:auto!important;
  }
  .vertex-v3 #app .weather-now-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}/* Short / landscape mobile: prioritize workflow content over decorative height. */
@media(max-width:759px) and (max-height:620px){
  .vertex-v3 #app .place-card{
    max-height:96px!important;
    overflow:hidden!important;
  }
  .vertex-v3 #app .place-card .place-expanded-content{
    display:none!important;
  }
  .vertex-v3 #app .panel,
  .vertex-v3 #app .record-sheet,
  .vertex-v3 #app .avalanche-sheet{
    max-height:calc(100dvh - var(--v3-content-bottom) - 16px)!important;
  }
  .vertex-v3 #app .route-planner{
    max-height:calc(100dvh - var(--v3-content-bottom) - 16px)!important;
  }
  .vertex-v3 #app .route-planner-copy span{
    display:none!important;
  }
}/* ---------- Tablet / compact desktop ---------- */
@media(min-width:760px) and (max-width:1023px){
  .vertex-v3 #app{
    --v4-rail-w:64px;
    --v4-rail-half:32px;
    --v4-panel-w:360px;
  }

  .vertex-v3 #app .bottom-nav{
    width:64px!important;
    padding-left:3px!important;
    padding-right:3px!important;
  }
  .vertex-v3 #app .bottom-nav button{
    width:56px!important;
  }
  .vertex-v3 #app .app-brand-mark{
    left:9px!important;
    width:42px!important;
  }

  .vertex-v3 #app .topbar{
    left:calc(var(--v4-rail-w) + 12px)!important;
    width:min(370px,calc(100vw - var(--v4-rail-w) - 90px))!important;
  }

  .vertex-v3 #app .place-card{
    left:calc(var(--v4-rail-w) + 12px)!important;
    width:360px!important;
    max-width:360px!important;
  }

  .vertex-v3 #app .explore-sheet,
  .vertex-v3 #app .you-sheet,
  .vertex-v3 #app .activities-sheet,
  .vertex-v3 #app .activity-detail,
  .vertex-v3 #app .route-detail,
  .vertex-v3 #app .compare-sheet,
  .vertex-v3 #app .community-view{
    left:calc(var(--v4-rail-w) + 12px)!important;
    width:360px!important;
    max-width:360px!important;
  }

  .vertex-v3 #app .weather-view{
    left:calc(var(--v4-rail-w) + 12px)!important;
    width:430px!important;
    max-width:min(430px,calc(100vw - var(--v4-rail-w) - 24px))!important;
  }

  .vertex-v3 #app .panel,
  .vertex-v3 #app .record-sheet,
  .vertex-v3 #app .avalanche-sheet{
    right:12px!important;
    width:360px!important;
    max-width:360px!important;
  }

  .vertex-v3 #app .profile-editor-sheet,
  .vertex-v3 #app .community-safety-sheet{
    left:calc(var(--v4-rail-w) + 12px)!important;
    width:360px!important;
    max-width:360px!important;
  }

  .vertex-v3 #app .powder-finder-sheet{
    left:calc(var(--v4-rail-w) + 12px)!important;
    width:500px!important;
    max-width:calc(100vw - var(--v4-rail-w) - 24px)!important;
  }
}/* ---------- Desktop ---------- */
@media(min-width:760px){
  /* Map workflows center inside the workspace to the right of the rail. */
  .vertex-v3 #app .route-planner,
  .vertex-v3 #app .replay-controls{
    position:fixed!important;
    left:calc(50% + var(--v4-rail-half))!important;
    right:auto!important;
    bottom:18px!important;
    transform:translateX(-50%)!important;
  }
  .vertex-v3 #app .route-planner{
    width:min(680px,calc(100vw - var(--v4-rail-w) - 48px))!important;
    max-width:680px!important;
  }
  .vertex-v3 #app .replay-controls{
    width:min(620px,calc(100vw - var(--v4-rail-w) - 48px))!important;
  }

  .vertex-v3 #app .active-session{
    position:fixed!important;
    left:auto!important;
    right:18px!important;
    bottom:18px!important;
    width:min(420px,calc(100vw - var(--v4-rail-w) - 36px))!important;
  }

  /* Tool panels are one predictable right-side family. */
  .vertex-v3 #app .panel,
  .vertex-v3 #app .record-sheet,
  .vertex-v3 #app .avalanche-sheet{
    top:16px!important;
    right:16px!important;
    bottom:16px!important;
    width:390px!important;
    max-width:390px!important;
    max-height:none!important;
  }

  /* Context dialogs align with the left-side destination workspace. */
  .vertex-v3 #app .profile-editor-sheet,
  .vertex-v3 #app .community-safety-sheet{
    top:16px!important;
    bottom:16px!important;
    left:calc(var(--v4-rail-w) + 16px)!important;
    width:410px!important;
    max-width:410px!important;
    max-height:none!important;
    border-radius:16px!important;
  }

  .vertex-v3 #app .powder-finder-sheet{
    top:16px!important;
    bottom:16px!important;
    left:calc(var(--v4-rail-w) + 16px)!important;
    width:560px!important;
    max-width:min(560px,calc(100vw - var(--v4-rail-w) - 32px))!important;
    max-height:none!important;
  }

  .vertex-v3 #app .community-map-bar{
    left:calc(var(--v4-rail-w) + 16px)!important;
    width:410px!important;
    max-width:min(410px,calc(100vw - var(--v4-rail-w) - 32px))!important;
  }
}/* Large desktop: keep readable line lengths; do not stretch UI just because space exists. */
@media(min-width:1440px){
  .vertex-v3 #app .explore-sheet,
  .vertex-v3 #app .you-sheet,
  .vertex-v3 #app .activities-sheet,
  .vertex-v3 #app .activity-detail,
  .vertex-v3 #app .route-detail,
  .vertex-v3 #app .compare-sheet,
  .vertex-v3 #app .community-view{
    width:420px!important;
    max-width:420px!important;
  }
  .vertex-v3 #app .weather-view{
    width:520px!important;
    max-width:520px!important;
  }
}/* Hidden remains authoritative after every responsive rule. */
.vertex-v3 #app [hidden]{
  display:none!important;
}/* Combination-state authority: map workflows should not stack unrelated chrome. */
.vertex-v3 #app:has(.route-planner:not([hidden])) .place-card,.vertex-v3 #app:has(.route-planner:not([hidden])) .topbar,.vertex-v3 #app:has(.replay-controls:not([hidden])) .place-card,.vertex-v3 #app:has(.replay-controls:not([hidden])) .topbar{
  display:none!important;
}.vertex-v3 #app:has(.route-planner:not([hidden])) .map-route-chip,.vertex-v3 #app:has(.replay-controls:not([hidden])) .map-route-chip{
  display:none!important;
}
@media(max-width:759px){.vertex-v3 #app:has(.active-session:not([hidden])) .place-card{
    display:none!important;
  }
}/* Tablet rail half is explicit; desktop default is 36px. */
@media(min-width:1024px){
  .vertex-v3 #app{
    --v4-rail-half:36px;
  }
}/* Final visibility guard — nothing after this may revive hidden UI. */
.vertex-v3 #app [hidden]{
  display:none!important;
}/* =========================================================
   Vertex full QA v9 — Weather Map + place summary authority
   ========================================================= */

/* Weather Map is a clean map state: explicit return/close,no redundant cards. */
.vertex-v3 #app .weather-view.map-active>.weather-head,.vertex-v3 #app .weather-view.map-active>.weather-tabs{
  display:none!important;
}.vertex-v3 #app .weather-map-status{
  position:absolute!important;
  z-index:24!important;
  top:136px!important;
  left:12px!important;
  max-width:min(340px,calc(100% - 24px))!important;
  padding:6px 9px!important;
  border-radius:9px!important;
  background:#0b1216df!important;
  color:#aeb9b6!important;
  font-size:9px!important;
  font-weight:750!important;
  pointer-events:none!important;
}.vertex-v3 #app .weather-map-status[data-tone="error"]{
  color:#f0c7c3!important;
}.vertex-v3 #app .weather-map-status[hidden]{
  display:none!important;
}/* Place summary: one calm information hierarchy,not a dashboard. */
.vertex-v3 #app .place-card{
  padding:5px 12px 10px!important;
  border-radius:14px!important;
  border:1px solid #ffffff16!important;
  background:#0c1417ee!important;
  box-shadow:0 12px 34px #0006!important;
}.vertex-v3 #app .place-card-handle{
  height:15px!important;
  min-height:15px!important;
  margin:0 0 2px!important;
}.vertex-v3 #app .place-card-handle span{
  width:30px!important;
  height:3px!important;
  margin:6px auto!important;
  opacity:.55!important;
}.vertex-v3 #app .place-card-title{
  align-items:center!important;
  margin-bottom:7px!important;
}.vertex-v3 #app .place-card-title .eyebrow{
  margin-bottom:3px!important;
  font-size:7.5px!important;
  letter-spacing:.12em!important;
  color:#75827f!important;
}.vertex-v3 #app .place-card-title h1{
  margin:0!important;
  font-size:17px!important;
  line-height:1.08!important;
}.vertex-v3 #app .favorite-place{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  border-radius:10px!important;
  font-size:17px!important;
  background:transparent!important;
  border-color:#ffffff12!important;
}/* Three useful glance values; no mini-cards inside the card. */
.vertex-v3 #app .resort-status{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0!important;
  margin:0!important;
  padding:7px 0!important;
  border-top:1px solid #ffffff0d!important;
  border-bottom:1px solid #ffffff0d!important;
}.vertex-v3 #app .resort-status span{
  min-width:0!important;
  padding:1px 9px!important;
  border:0!important;
  border-right:1px solid #ffffff0d!important;
  border-radius:0!important;
  background:transparent!important;
}.vertex-v3 #app .resort-status span:first-child{
  padding-left:0!important;
}.vertex-v3 #app .resort-status span:last-child{
  padding-right:0!important;
  border-right:0!important;
}.vertex-v3 #app .resort-status b{
  font-size:11px!important;
  font-weight:800!important;
}.vertex-v3 #app .resort-status small{
  margin-top:2px!important;
  font-size:7.5px!important;
  color:#768480!important;
}/* Weather / Conditions are navigation rows,not oversized feature cards. */
.vertex-v3 #app .mountain-primary-actions{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:0!important;
  margin:6px 0 0!important;
}.vertex-v3 #app .mountain-primary-actions button{
  display:grid!important;
  grid-template-columns:26px minmax(0,1fr) 16px!important;
  align-items:center!important;
  gap:7px!important;
  min-height:45px!important;
  padding:5px 2px!important;
  border:0!important;
  border-bottom:1px solid #ffffff0d!important;
  border-radius:0!important;
  background:transparent!important;
  color:#e9efed!important;
  text-align:left!important;
}.vertex-v3 #app .mountain-primary-actions button:last-child{
  border-bottom:0!important;
}.vertex-v3 #app .mountain-primary-actions button>span:first-child{
  width:26px!important;
  height:26px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:8px!important;
  background:#ffffff07!important;
  font-size:13px!important;
}.vertex-v3 #app .mountain-primary-actions button>span:nth-child(2){
  min-width:0!important;
  display:grid!important;
  gap:1px!important;
}.vertex-v3 #app .mountain-primary-actions button b{
  font-size:10.5px!important;
}.vertex-v3 #app .mountain-primary-actions button small{
  font-size:7.5px!important;
  color:#7f8d89!important;
}.vertex-v3 #app .mountain-primary-actions button i{
  font-size:16px!important;
  font-style:normal!important;
  color:#71807c!important;
  text-align:right!important;
}/* Terrain facts are quiet metadata. */
.vertex-v3 #app .place-card .stats{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0!important;
  margin:2px 0 0!important;
  padding-top:6px!important;
}.vertex-v3 #app .place-card .stats span{
  min-width:0!important;
  padding:2px 9px!important;
  border:0!important;
  border-right:1px solid #ffffff0c!important;
  background:transparent!important;
}.vertex-v3 #app .place-card .stats span:first-child{
  padding-left:0!important;
}.vertex-v3 #app .place-card .stats span:last-child{
  border-right:0!important;
}.vertex-v3 #app .place-card .stats b{
  font-size:9.5px!important;
}.vertex-v3 #app .place-card .stats small{
  font-size:7px!important;
  color:#6f7d79!important;
}/* Collapsed mobile card remains useful without feeling tall. */
@media(max-width:759px){
  .vertex-v3 #app .place-card.collapsed{
    max-height:91px!important;
  }
  .vertex-v3 #app .place-card.collapsed .place-card-content{
    max-height:68px!important;
  }
  .vertex-v3 #app .place-card.collapsed .resort-status{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .vertex-v3 #app .place-card.collapsed .resort-status span:nth-child(3){
    display:grid!important;
  }
  
}/* Powder map always has measurable geometry before SDK initialization. */
.vertex-v3 #app .powder-raster-map{
  width:100%!important;
  height:220px!important;
  min-height:220px!important;
  position:relative!important;
  isolation:isolate!important;
}
@media(max-width:620px){.vertex-v3 #app .powder-raster-map{
    height:190px!important;
    min-height:190px!important;
  }
}/* Final visibility guard. */
.vertex-v3 #app [hidden]{
  display:none!important;
}/* =========================================================
   Vertex v10 — You hierarchy + place card layout authority
   ========================================================= */

/* Place title is a real two-column layout: text can never sit under favorite. */
.vertex-v3 #app .place-card-title{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 40px!important;
  align-items:center!important;
  gap:8px!important;
}.vertex-v3 #app .place-card-title>div{
  min-width:0!important;
}.vertex-v3 #app .place-card-title h1{
  min-width:0!important;
  max-width:100%!important;
  overflow-wrap:anywhere!important;
  text-wrap:balance!important;
}.vertex-v3 #app .favorite-place{
  grid-column:2!important;
  justify-self:end!important;
  align-self:center!important;
  position:relative!important;
  inset:auto!important;
  z-index:2!important;
}/* One visual family for the complete You destination. */
.vertex-v3 #app[data-section="you"] .you-sheet,.vertex-v3 #app[data-section="you"] .activities-sheet,.vertex-v3 #app[data-section="you"] .activity-detail,.vertex-v3 #app[data-section="you"] .compare-sheet,.vertex-v3 #app[data-section="you"] .community-view{
  background:#0b1216f8!important;
  border-color:#ffffff14!important;
  color:#edf3f1!important;
}.vertex-v3 #app[data-section="you"] .you-sheet,.vertex-v3 #app[data-section="you"] .activities-sheet,.vertex-v3 #app[data-section="you"] .compare-sheet,.vertex-v3 #app[data-section="you"] .community-view{
  padding:14px!important;
}/* You home: compact,calm and row-based. */
.vertex-v3 #app .you-season-summary{
  margin:2px 0 10px!important;
  padding:10px 0 12px!important;
  gap:3px!important;
}.vertex-v3 #app .you-season-summary small{
  font-size:7.5px!important;
}.vertex-v3 #app .you-season-summary b{
  font-size:14px!important;
  line-height:1.25!important;
}.vertex-v3 #app .you-season-summary span{
  font-size:8.5px!important;
}.vertex-v3 #app .you-menu{
  display:grid!important;
  gap:0!important;
}.vertex-v3 #app .you-menu>button{
  display:grid!important;
  grid-template-columns:30px minmax(0,1fr) 16px!important;
  align-items:center!important;
  gap:9px!important;
  min-height:58px!important;
  padding:7px 2px!important;
  border:0!important;
  border-bottom:1px solid #ffffff0d!important;
  border-radius:0!important;
  background:transparent!important;
  text-align:left!important;
}.vertex-v3 #app .you-menu>button:last-child{
  border-bottom:0!important;
}.vertex-v3 #app .you-menu>button>span{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  border:1px solid #ffffff0f!important;
  border-radius:9px!important;
  background:#ffffff05!important;
  font-size:13px!important;
  color:#b9c4c1!important;
}.vertex-v3 #app .you-menu>button b{
  font-size:11px!important;
}.vertex-v3 #app .you-menu>button small{
  font-size:8px!important;
  color:#778682!important;
}.vertex-v3 #app .you-menu>button>i{
  font-size:16px!important;
  color:#65736f!important;
}/* Every child of You uses Back-left + title,never an arbitrary close placement. */
.vertex-v3 #app .you-child-head{
  display:grid!important;
  grid-template-columns:40px minmax(0,1fr)!important;
  align-items:center!important;
  gap:8px!important;
  min-height:48px!important;
  margin:0 0 10px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}.vertex-v3 #app .you-child-head>button{
  grid-column:1!important;
  grid-row:1!important;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  padding:0!important;
  border:1px solid #ffffff10!important;
  border-radius:10px!important;
  background:#ffffff05!important;
  color:#dce5e2!important;
  font-size:20px!important;
  display:grid!important;
  place-items:center!important;
}.vertex-v3 #app .you-child-head>div{
  grid-column:2!important;
  grid-row:1!important;
  min-width:0!important;
}.vertex-v3 #app .you-child-head small{
  display:block!important;
  margin:0 0 2px!important;
  font-size:7.5px!important;
  font-weight:850!important;
  letter-spacing:.12em!important;
  color:#74827f!important;
}.vertex-v3 #app .you-child-head h2,.vertex-v3 #app .you-child-head b{
  margin:0!important;
  font-size:15px!important;
  line-height:1.15!important;
}/* Community is only a data source when reached from You. */
.vertex-v3 #app[data-section="you"] .community-head,.vertex-v3 #app[data-section="you"] .community-tabs,.vertex-v3 #app[data-section="you"] #communityRoutes,.vertex-v3 #app[data-section="you"] #routesDiscoverNav{
  display:none!important;
}.vertex-v3 #app[data-section="you"] #peopleContextNav{
  display:none!important;
}.vertex-v3 #app[data-section="you"][data-you-view="people"] #peopleContextNav{
  display:grid!important;
}.vertex-v3 #app[data-section="you"] .people-context-nav{
  grid-template-columns:40px minmax(0,1fr) auto!important;
  min-height:48px!important;
  margin:0 0 10px!important;
  gap:8px!important;
}.vertex-v3 #app[data-section="you"] .people-context-nav .context-back{
  width:40px!important;
  min-width:40px!important;
  height:40px!important;
  padding:0!important;
  border:1px solid #ffffff10!important;
  border-radius:10px!important;
  background:#ffffff05!important;
  font-size:0!important;
  /* Icon-only like the other back buttons: centre the arrow instead of leaving it on the left edge. */
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}.vertex-v3 #app[data-section="you"] .people-context-nav .context-back::after{
  content:"‹";
  font-size:20px;
}.vertex-v3 #app[data-section="you"] .people-context-nav strong{
  text-align:left!important;
  font-size:15px!important;
}.vertex-v3 #app[data-section="you"] .people-context-nav .context-profile-shortcut{
  min-height:36px!important;
  padding:0 9px!important;
  border:1px solid #ffffff10!important;
  border-radius:9px!important;
  background:#ffffff05!important;
  font-size:9px!important;
}.vertex-v3 #app[data-section="you"] #communityPeople:not([hidden]){
  display:block!important;
}/* In the narrow You workspace,People is always one column. */
.vertex-v3 #app[data-section="you"] .community-people-discover{
  display:block!important;
  max-width:none!important;
}.vertex-v3 #app[data-section="you"] .community-my-profile-card{
  display:none!important;
}.vertex-v3 #app[data-section="you"] .community-friends-overview{
  margin-bottom:14px!important;
}.vertex-v3 #app[data-section="you"] .community-friends-block{
  padding:9px 0!important;
  border:0!important;
  border-bottom:1px solid #ffffff0d!important;
  border-radius:0!important;
  background:transparent!important;
}.vertex-v3 #app[data-section="you"] .community-search{
  height:42px!important;
  border-radius:10px!important;
}.vertex-v3 #app[data-section="you"] .community-search-state{
  padding:11px 2px 8px!important;
}.vertex-v3 #app[data-section="you"] .community-people-list{
  display:grid!important;
  gap:4px!important;
}/* Profile belongs to the same You child surface. */
.vertex-v3 #app[data-section="you"] .community-profile-view{
  max-width:none!important;
  padding:0 0 18px!important;
}.vertex-v3 #app[data-section="you"] .community-profile-hero{
  margin-top:2px!important;
  padding:12px 0!important;
  border-top:1px solid #ffffff0d!important;
  border-bottom:1px solid #ffffff0d!important;
  /* Flat divider row: drop the base card's side borders/radius, which otherwise touch the action buttons. */
  border-left:0!important;
  border-right:0!important;
  border-radius:0!important;
  background:transparent!important;
}.vertex-v3 #app[data-section="you"] .community-profile-stats{
  margin:10px 0!important;
}.vertex-v3 #app[data-section="you"] .community-section-head{
  margin-top:14px!important;
}.vertex-v3 #app[data-section="you"] .community-profile-actions button,.vertex-v3 #app[data-section="you"] .community-friend-actions button{
  min-height:38px!important;
  border-radius:9px!important;
  font-size:9px!important;
}/* Settings/edit/password become nested You views,not global floating modals. */
.vertex-v3 #app[data-section="you"] .community-view .profile-editor-sheet{
  position:absolute!important;
  z-index:40!important;
  inset:0!important;
  width:auto!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:14px!important;
  overflow:auto!important;
  border:0!important;
  border-radius:inherit!important;
  background:#0b1216!important;
  box-shadow:none!important;
  transform:none!important;
}.vertex-v3 #app[data-section="you"] .community-view .profile-editor-sheet .you-child-head{
  position:sticky!important;
  top:-14px!important;
  z-index:4!important;
  margin:-14px -14px 10px!important;
  padding:10px 14px 8px!important;
  background:linear-gradient(#0b1216 84%,#0b121600)!important;
}.vertex-v3 #app[data-section="you"] .settings-section{
  padding:12px 0!important;
  border-top:1px solid #ffffff0d!important;
}.vertex-v3 #app[data-section="you"] .settings-section:first-of-type{
  border-top:0!important;
}.vertex-v3 #app[data-section="you"] .settings-section>small{
  font-size:7.5px!important;
  letter-spacing:.12em!important;
}.vertex-v3 #app[data-section="you"] .settings-section label{
  font-size:9px!important;
}.vertex-v3 #app[data-section="you"] .settings-plan,.vertex-v3 #app[data-section="you"] .settings-toggle{
  border-radius:10px!important;
}/* Saved mountains uses the same restrained list logic. */
.vertex-v3 #app[data-section="you"] .compare-intro{
  margin:0 0 10px!important;
}.vertex-v3 #app[data-section="you"] .compare-grid{
  gap:5px!important;
}.vertex-v3 #app[data-section="you"] .compare-card{
  min-height:64px!important;
  padding:9px!important;
  border-radius:10px!important;
}/* Mobile collapsed place title is one clean line; no favorite overlap. */
@media(max-width:759px){
  .vertex-v3 #app .place-card.collapsed .place-card-title{
    grid-template-columns:minmax(0,1fr) 36px!important;
    gap:6px!important;
  }
  .vertex-v3 #app .place-card.collapsed .place-card-title h1{
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    overflow-wrap:normal!important;
  }
  .vertex-v3 #app .place-card.collapsed .favorite-place{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
    font-size:16px!important;
  }
}/* Final visibility authority. */
.vertex-v3 #app [hidden]{
  display:none!important;
}/* =========================================================
   Vertex v11 — responsive component authority
   ========================================================= */

.vertex-v3 #app{
  --v11-mobile-pad:12px;
  --v11-panel-pad:14px;
  --v11-desktop-panel:420px;
  --v11-desktop-weather:520px;
  --v11-desktop-wide:560px;
  --v11-card-radius:11px;
  --v11-card-gap:7px;
}/* Shared content-card language. */
.vertex-v3 #app .activity-detail-stats,.vertex-v3 #app .route-detail-stats,.vertex-v3 #app .community-profile-stats,.vertex-v3 #app .activities-totals,.vertex-v3 #app .record-stats{
  gap:1px!important;
  border-radius:var(--v11-card-radius)!important;
  overflow:hidden!important;
}.vertex-v3 #app .activity-detail-stats>span,.vertex-v3 #app .route-detail-stats>span,.vertex-v3 #app .community-profile-stats>span,.vertex-v3 #app .activities-totals>span,.vertex-v3 #app .record-stats>span{
  min-width:0!important;
}.vertex-v3 #app .community-route-card,.vertex-v3 #app .community-library-card,.vertex-v3 #app .community-my-profile-card,.vertex-v3 #app .compare-card,.vertex-v3 #app .record-choice,.vertex-v3 #app .powder-card,.vertex-v3 #app .weather-hour-card{
  border-radius:var(--v11-card-radius)!important;
}/* Long copy can never force card geometry wider than its container. */
.vertex-v3 #app .community-route-card,.vertex-v3 #app .community-library-card,.vertex-v3 #app .community-my-profile-card,.vertex-v3 #app .compare-card,.vertex-v3 #app .record-choice,.vertex-v3 #app .powder-card,.vertex-v3 #app .weather-hour-card,.vertex-v3 #app .route-detail,.vertex-v3 #app .activity-detail{
  min-width:0!important;
}.vertex-v3 #app .community-route-card *,.vertex-v3 #app .community-library-card *,.vertex-v3 #app .community-my-profile-card *,.vertex-v3 #app .compare-card *,.vertex-v3 #app .record-choice *,.vertex-v3 #app .powder-card *{
  min-width:0;
}/* Lists use one restrained vertical rhythm. */
.vertex-v3 #app .activities-list,.vertex-v3 #app .community-list,.vertex-v3 #app .community-people-list,.vertex-v3 #app .tour-route-list,.vertex-v3 #app .powder-finder-list,.vertex-v3 #app .compare-grid{
  gap:var(--v11-card-gap)!important;
}/* Action families wrap instead of overflowing. */
.vertex-v3 #app .activity-actions,.vertex-v3 #app .route-detail-actions,.vertex-v3 #app .record-actions,.vertex-v3 #app .route-planner-actions,.vertex-v3 #app .community-profile-actions,.vertex-v3 #app .community-friend-actions{
  max-width:100%!important;
}.vertex-v3 #app .activity-actions button,.vertex-v3 #app .route-detail-actions button,.vertex-v3 #app .record-actions button,.vertex-v3 #app .route-planner-actions button,.vertex-v3 #app .community-profile-actions button,.vertex-v3 #app .community-friend-actions button{
  min-width:0!important;
}/* Weather cards: content first,never fixed text columns that collide. */
.vertex-v3 #app .weather-now-main,.vertex-v3 #app .weather-overview,.vertex-v3 #app .weather-hour-card,.vertex-v3 #app .weather-days article{
  min-width:0!important;
}.vertex-v3 #app .weather-days article>*,.vertex-v3 #app .weather-hour-card>*{
  min-width:0!important;
}.vertex-v3 #app .weather-days article b,.vertex-v3 #app .weather-days article small,.vertex-v3 #app .weather-hour-card strong,.vertex-v3 #app .weather-hour-card span{
  overflow-wrap:anywhere!important;
}/* ---------- Mobile ---------- */
@media(max-width:759px){
  .vertex-v3 #app{
    --v11-card-gap:6px;
  }

  /* Destination views are true mobile screens. */
  .vertex-v3 #app .explore-sheet,
  .vertex-v3 #app .you-sheet,
  .vertex-v3 #app .activities-sheet,
  .vertex-v3 #app .activity-detail,
  .vertex-v3 #app .route-detail,
  .vertex-v3 #app .compare-sheet,
  .vertex-v3 #app .community-view,
  .vertex-v3 #app .weather-view,
  .vertex-v3 #app .powder-finder-sheet,
  .vertex-v3 #app .profile-editor-sheet,
  .vertex-v3 #app .community-safety-sheet{
    width:auto!important;
    max-width:none!important;
    border-radius:0!important;
    box-shadow:none!important;
  }

  .vertex-v3 #app .explore-sheet,
  .vertex-v3 #app .you-sheet,
  .vertex-v3 #app .activities-sheet,
  .vertex-v3 #app .activity-detail,
  .vertex-v3 #app .route-detail,
  .vertex-v3 #app .compare-sheet,
  .vertex-v3 #app .community-view,
  .vertex-v3 #app .weather-view{
    padding-left:var(--v11-mobile-pad)!important;
    padding-right:var(--v11-mobile-pad)!important;
  }

  /* Tool surfaces remain compact sheets rather than accidental full screens. */
  .vertex-v3 #app .panel,
  .vertex-v3 #app .record-sheet,
  .vertex-v3 #app .avalanche-sheet{
    left:7px!important;
    right:7px!important;
    width:auto!important;
    max-width:none!important;
    padding:12px!important;
    border-radius:14px!important;
  }

  /* Place card: compact and readable, never a desktop card squeezed narrow. */
  .vertex-v3 #app .place-card{
    left:9px!important;
    right:9px!important;
    width:auto!important;
    max-width:none!important;
    padding:5px 11px 9px!important;
  }
  .vertex-v3 #app .place-card-title h1{
    font-size:16px!important;
  }
  .vertex-v3 #app .resort-status span{
    padding-left:6px!important;
    padding-right:6px!important;
  }
  .vertex-v3 #app .resort-status b{
    font-size:10px!important;
  }
  .vertex-v3 #app .resort-status small{
    font-size:7px!important;
  }

  /* Weather: stack metrics/cards for thumb-width readability. */
  .vertex-v3 #app .weather-overview{
    padding:13px!important;
    border-radius:13px!important;
  }
  .vertex-v3 #app .weather-now-main{
    gap:9px!important;
  }
  .vertex-v3 #app .weather-now-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:1px!important;
  }
  .vertex-v3 #app .weather-levels{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
  }
  .vertex-v3 #app .weather-hours{
    grid-auto-columns:minmax(108px,34vw)!important;
  }
  .vertex-v3 #app .weather-days article{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:5px 8px!important;
  }
  .vertex-v3 #app .weather-days article>em,
  .vertex-v3 #app .weather-days article>span,
  .vertex-v3 #app .weather-days article>small{
    grid-column:1/-1!important;
  }

  /* Weather Map controls fit narrow screens without layering over each other. */
  
  
  .vertex-v3 #app .weather-map-status{
    top:174px!important;
  }

  /* Powder: map + ranking flow vertically. */
  .vertex-v3 #app .powder-finder-sheet{
    padding:12px!important;
  }
  .vertex-v3 #app .powder-map-card{
    padding:9px!important;
    border-radius:12px!important;
  }
  .vertex-v3 #app .powder-map-tabs{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .vertex-v3 #app .powder-finder-row{
    grid-template-columns:28px minmax(0,1fr) auto!important;
    gap:7px!important;
    padding:9px 2px!important;
  }
  .vertex-v3 #app .powder-finder-row .powder-meta{
    grid-column:2/-1!important;
    justify-self:start!important;
  }

  /* Route/activity details use stacked actions on narrow screens. */
  .vertex-v3 #app .route-detail-actions{
    grid-template-columns:minmax(0,1fr) auto!important;
  }
  .vertex-v3 #app .route-detail-actions .route-primary,
  .vertex-v3 #app .route-detail-actions .route-community-save:not([hidden]),
  .vertex-v3 #app .route-detail-actions .route-publish-action:not([hidden]){
    grid-column:1/-1!important;
  }
  .vertex-v3 #app .activity-actions{
    grid-template-columns:minmax(0,1fr) auto!important;
  }
  .vertex-v3 #app .activity-actions #saveActivityRoute{
    grid-column:1/-1!important;
  }

  /* Recording: chooser becomes one column on genuinely narrow phones. */
  .vertex-v3 #app .record-chooser{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  /* Stats cannot become four unreadably thin columns. */
  .vertex-v3 #app .activity-detail-stats,
  .vertex-v3 #app .route-detail-stats,
  .vertex-v3 #app .activities-totals{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  /* Settings controls get full mobile width. */
  .vertex-v3 #app[data-section="you"] .settings-section label,
  .vertex-v3 #app[data-section="you"] .settings-plan,
  .vertex-v3 #app[data-section="you"] .settings-toggle{
    width:100%!important;
  }

  /* Search/results remain edge-safe. */
  .vertex-v3 #app .search-results{
    max-height:min(52dvh,420px)!important;
    overflow:auto!important;
  }
}

@media(max-width:430px){.vertex-v3 #app .record-chooser{
    grid-template-columns:1fr!important;
  }.vertex-v3 #app .weather-levels{
    grid-template-columns:1fr!important;
  }.vertex-v3 #app .weather-levels button,.vertex-v3 #app .weather-levels>div{
    min-height:44px!important;
  }.vertex-v3 #app .powder-finder-row{
    grid-template-columns:24px minmax(0,1fr)!important;
  }.vertex-v3 #app .powder-finder-row .powder-snow,.vertex-v3 #app .powder-finder-row .powder-meta{
    grid-column:2!important;
    justify-self:start!important;
  }
}/* ---------- Tablet / compact desktop ---------- */
@media(min-width:760px) and (max-width:1023px){
  .vertex-v3 #app{
    --v11-desktop-panel:360px;
    --v11-desktop-weather:430px;
    --v11-desktop-wide:500px;
  }

  .vertex-v3 #app .explore-sheet,
  .vertex-v3 #app .you-sheet,
  .vertex-v3 #app .activities-sheet,
  .vertex-v3 #app .activity-detail,
  .vertex-v3 #app .route-detail,
  .vertex-v3 #app .compare-sheet,
  .vertex-v3 #app .community-view{
    width:var(--v11-desktop-panel)!important;
    max-width:calc(100vw - var(--v4-rail-w) - 24px)!important;
    padding:13px!important;
  }
  .vertex-v3 #app .weather-view{
    width:var(--v11-desktop-weather)!important;
    max-width:calc(100vw - var(--v4-rail-w) - 24px)!important;
    padding:13px!important;
  }
  .vertex-v3 #app .powder-finder-sheet{
    width:var(--v11-desktop-wide)!important;
    max-width:calc(100vw - var(--v4-rail-w) - 24px)!important;
  }

  .vertex-v3 #app .panel,
  .vertex-v3 #app .record-sheet,
  .vertex-v3 #app .avalanche-sheet{
    width:360px!important;
    max-width:calc(100vw - var(--v4-rail-w) - 24px)!important;
  }

  .vertex-v3 #app .place-card{
    width:min(360px,calc(100vw - var(--v4-rail-w) - 32px))!important;
  }

  .vertex-v3 #app .weather-now-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .vertex-v3 #app .community-people-discover{
    grid-template-columns:1fr!important;
  }
}/* ---------- Desktop ---------- */
@media(min-width:1024px){
  .vertex-v3 #app .explore-sheet,
  .vertex-v3 #app .you-sheet,
  .vertex-v3 #app .activities-sheet,
  .vertex-v3 #app .activity-detail,
  .vertex-v3 #app .route-detail,
  .vertex-v3 #app .compare-sheet,
  .vertex-v3 #app .community-view{
    width:var(--v11-desktop-panel)!important;
    max-width:var(--v11-desktop-panel)!important;
    padding:14px!important;
  }

  .vertex-v3 #app .weather-view{
    width:var(--v11-desktop-weather)!important;
    max-width:var(--v11-desktop-weather)!important;
    padding:14px!important;
  }

  .vertex-v3 #app .powder-finder-sheet{
    width:var(--v11-desktop-wide)!important;
    max-width:min(var(--v11-desktop-wide),calc(100vw - var(--v4-rail-w) - 32px))!important;
    padding:14px!important;
  }

  .vertex-v3 #app .panel,
  .vertex-v3 #app .record-sheet,
  .vertex-v3 #app .avalanche-sheet{
    width:390px!important;
    max-width:390px!important;
    padding:14px!important;
  }

  /* Map summary stays compact on desktop instead of becoming a mini dashboard. */
  .vertex-v3 #app .place-card{
    width:360px!important;
    max-width:360px!important;
  }

  /* Desktop can use richer card columns where they actually help. */
  .vertex-v3 #app .activity-detail-stats,
  .vertex-v3 #app .route-detail-stats,
  .vertex-v3 #app .activities-totals{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }

  .vertex-v3 #app .weather-now-metrics{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }

  .vertex-v3 #app .weather-levels{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  /* Full Community destination may use two columns; You-context remains one column from v10. */
  .vertex-v3 #app[data-section="routes"] .community-people-discover{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr)!important;
  }

  .vertex-v3 #app .compare-card{
    grid-template-columns:minmax(0,1.35fr) .48fr .68fr .58fr .58fr!important;
  }

  .vertex-v3 #app .powder-raster-map{
    height:230px!important;
    min-height:230px!important;
  }
}/* Large desktop remains intentionally bounded. */
@media(min-width:1440px){
  .vertex-v3 #app{
    --v11-desktop-panel:430px;
    --v11-desktop-weather:540px;
    --v11-desktop-wide:580px;
  }
}/* Final responsive visibility authority. */
.vertex-v3 #app [hidden]{
  display:none!important;
}/* v11 — auth and nested dialog responsive authority */
.vertex-v3 .auth-gate-shell,.vertex-v3 .auth-gate-card{
  box-sizing:border-box!important;
  max-width:100%!important;
}.vertex-v3 .auth-gate-card{
  overflow:hidden!important;
}.vertex-v3 .auth-gate-card input,.vertex-v3 .auth-gate-card button{
  max-width:100%!important;
  box-sizing:border-box!important;
}
@media(max-width:759px){.vertex-v3 .auth-gate{
    padding:
      max(18px,env(safe-area-inset-top))
      14px
      max(18px,env(safe-area-inset-bottom))!important;
  }.vertex-v3 .auth-gate-shell{
    width:min(100%,320px)!important;
    gap:13px!important;
  }.vertex-v3 .auth-gate-brand img{
    width:min(58vw,194px)!important;
  }.vertex-v3 .auth-gate-card{
    width:100%!important;
    padding:12px!important;
    border-radius:14px!important;
  }
}
@media(min-width:760px){.vertex-v3 .auth-gate-shell{
    width:332px!important;
  }.vertex-v3 .auth-gate-card{
    width:312px!important;
    margin-inline:auto!important;
  }
}/* Route-detail subdialogs are children of Route Detail,never viewport-sized cards. */
.vertex-v3 #app .route-detail .publish-route-sheet{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}.vertex-v3 #app .route-detail .route-detail-menu,.vertex-v3 #app .activity-detail .activity-more-menu{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
@media(max-width:759px){.vertex-v3 #app .route-detail .publish-route-sheet{
    padding:12px!important;
    border-radius:12px!important;
  }.vertex-v3 #app .route-detail .route-detail-menu{
    grid-template-columns:1fr!important;
  }.vertex-v3 #app .activity-detail .activity-more-menu button{
    min-height:40px!important;
  }
}
@media(min-width:760px){.vertex-v3 #app .route-detail .publish-route-sheet{
    padding:13px!important;
    border-radius:12px!important;
  }
}/* Standalone safety dialog follows destination workspace geometry. */
@media(min-width:760px) and (max-width:1023px){
  .vertex-v3 #app .community-safety-sheet{
    width:360px!important;
    max-width:calc(100vw - var(--v4-rail-w) - 24px)!important;
  }
}
@media(min-width:1024px){.vertex-v3 #app .community-safety-sheet{
    width:410px!important;
    max-width:410px!important;
  }
}/* Form controls always respect parent width. */
.vertex-v3 #app input:not([type="range"]),.vertex-v3 #app select,.vertex-v3 #app textarea{
  max-width:100%!important;
  box-sizing:border-box!important;
}/* Final final visibility authority after auth/dialog pass. */
.vertex-v3 #app [hidden]{
  display:none!important;
}


/* =========================================================
   Mobile Routes product model
   Mobile route selection is map-first: library -> map preview + bottom sheet.
   Desktop keeps the established side-panel composition.
   ========================================================= */
@media(max-width:759px){
  .vertex-v3 #app[data-section="routes"] .routes-sheet{
    padding-top:max(12px,env(safe-area-inset-top))!important;
  }

  .vertex-v3 #app[data-section="routes"] .routes-sheet .activities-head{
    margin-bottom:4px!important;
  }

  

  .vertex-v3 #app[data-section="routes"] .routes-library-toolbar{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:6px!important;
    margin-bottom:8px!important;
  }

  .vertex-v3 #app[data-section="routes"] #routesList{
    gap:0!important;
    margin-top:3px!important;
  }

  .vertex-v3 #app[data-section="routes"] #routesList .route-row{
    min-height:76px!important;
    padding:10px 2px!important;
    border:0!important;
    border-bottom:1px solid #ffffff10!important;
    border-radius:0!important;
    background:transparent!important;
  }

  .vertex-v3 #app[data-section="routes"] #routesList .route-main{
    min-height:54px!important;
    align-items:center!important;
    gap:9px!important;
  }

  .vertex-v3 #app[data-section="routes"] #routesList .route-kind{
    flex:0 0 38px!important;
    width:38px!important;
    height:38px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:12px!important;
    background:#ffffff0b!important;
    font-size:18px!important;
  }

  .vertex-v3 #app[data-section="routes"] #routesList .activity-copy{
    gap:2px!important;
  }

  .vertex-v3 #app[data-section="routes"] #routesList .activity-copy b{
    font-size:14px!important;
    line-height:1.2!important;
  }

  .vertex-v3 #app[data-section="routes"] #routesList .activity-copy em{
    max-width:100%!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* Opening the row itself is the map action on mobile. */
  .vertex-v3 #app[data-section="routes"] #routesList .route-map-toggle{
    display:none!important;
  }

  .vertex-v3 #app[data-section="routes"] #routesList .route-more{
    width:38px!important;
    height:38px!important;
    margin-left:5px!important;
  }

  .vertex-v3 #app .route-detail.mobile-map-preview{
    position:fixed!important;
    z-index:34!important;
    top:auto!important;
    left:8px!important;
    right:8px!important;
    bottom:calc(var(--v3-content-bottom) + 8px)!important;
    width:auto!important;
    max-width:none!important;
    height:auto!important;
    max-height:min(46dvh,430px)!important;
    padding:11px 12px 12px!important;
    overflow:auto!important;
    border:1px solid #ffffff1c!important;
    border-radius:18px!important;
    background:#0c1418f2!important;
    box-shadow:0 -12px 38px #0008!important;
    backdrop-filter:blur(22px)!important;
  }

  .vertex-v3 #app .route-detail.mobile-map-preview .route-detail-head{
    position:sticky!important;
    top:-11px!important;
    z-index:4!important;
    margin:-11px -12px 4px!important;
    padding:11px 12px 7px!important;
    background:linear-gradient(#0c1418 78%,#0c141800)!important;
  }

  .vertex-v3 #app .route-detail.mobile-map-preview .route-detail-head h2{
    margin-bottom:1px!important;
    font-size:18px!important;
  }

  .vertex-v3 #app .route-detail.mobile-map-preview .route-detail-stats{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    margin-bottom:8px!important;
  }

  .vertex-v3 #app .route-detail.mobile-map-preview .route-detail-stats span{
    padding:8px!important;
  }

  .vertex-v3 #app .route-detail.mobile-map-preview .route-detail-stats span:nth-child(4),
  .vertex-v3 #app .route-detail.mobile-map-preview .route-detail-stats span:nth-child(5){
    display:none!important;
  }

  .vertex-v3 #app .route-detail.mobile-map-preview .route-elevation-profile{
    height:96px!important;
  }

  .vertex-v3 #app .route-detail.mobile-map-preview .route-profile-head{
    margin-top:6px!important;
  }

  .vertex-v3 #app .route-detail.mobile-map-preview .route-detail-actions{
    grid-template-columns:minmax(0,1fr) 44px!important;
    gap:6px!important;
    margin-top:8px!important;
  }

  .vertex-v3 #app .route-detail.mobile-map-preview #routeDetailMap{
    display:none!important;
  }

  .vertex-v3 #app .route-detail.mobile-map-preview #routeDetailReplay{
    min-height:42px!important;
  }

  .vertex-v3 #app .route-detail.mobile-map-preview #routeDetailMore{
    width:44px!important;
    min-width:44px!important;
  }

  .vertex-v3 #app .route-detail.mobile-map-preview .route-community-info{
    margin-top:8px!important;
  }

  /* The selected route chip is redundant while its preview sheet is open. */
  .vertex-v3 #app:has(.route-detail.mobile-map-preview:not([hidden])) .map-route-chip{
    display:none!important;
  }

  /* Keep map chrome quiet while a route preview owns the mobile map. */
  .vertex-v3 #app:has(.route-detail.mobile-map-preview:not([hidden])) .place-card,
  .vertex-v3 #app:has(.route-detail.mobile-map-preview:not([hidden])) .topbar{
    display:none!important;
  }
}

/* Mobile Routes refinements: planner, discover and post-create continuity. */
@media(max-width:759px){
  .vertex-v3 #app[data-section="routes"] .community-view{
    padding-top:max(10px,env(safe-area-inset-top))!important;
  }

  .vertex-v3 #app[data-section="routes"] .community-discover{
    margin-bottom:12px!important;
  }

  .vertex-v3 #app[data-section="routes"] .community-section-head{
    margin-bottom:8px!important;
  }

  .vertex-v3 #app[data-section="routes"] .community-route-card-wrap{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:7px!important;
    padding:2px 0!important;
    border-bottom:1px solid #ffffff10!important;
  }

  .vertex-v3 #app[data-section="routes"] .community-route-card{
    min-width:0!important;
    padding:11px 2px!important;
    border:0!important;
    background:transparent!important;
  }

  .vertex-v3 #app[data-section="routes"] .community-route-save-inline{
    min-width:74px!important;
    min-height:38px!important;
    padding:0 9px!important;
    border-radius:10px!important;
    white-space:nowrap!important;
  }

  .vertex-v3 #app[data-section="routes"] .community-route-top{
    gap:6px!important;
  }

  .vertex-v3 #app[data-section="routes"] .community-route-meta{
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .vertex-v3 #app .route-planner{
    padding:10px!important;
  }

  .vertex-v3 #app .route-planner-copy{
    margin-bottom:8px!important;
  }

  .vertex-v3 #app .route-planner-copy b{
    font-size:13px!important;
  }

  .vertex-v3 #app .route-planner-actions{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
  }

  .vertex-v3 #app .route-planner-actions button{
    min-width:0!important;
    min-height:42px!important;
    padding:7px 6px!important;
    font-size:10px!important;
  }

  .vertex-v3 #app .route-planner-actions #savePlannedRoute{
    grid-column:1/-1!important;
    order:-1!important;
    min-height:46px!important;
    font-size:11px!important;
  }

  .vertex-v3 #app:has(.route-planner:not([hidden])) .map-tools{
    display:none!important;
  }
}

/* Mobile route library thumbnails use the actual route geometry. */
.route-thumb{display:none}
@media(max-width:759px){
  .vertex-v3 #app[data-section="routes"] #routesList .route-kind{
    display:none!important;
  }
  .vertex-v3 #app[data-section="routes"] #routesList .route-thumb{
    display:block!important;
    flex:0 0 56px!important;
    width:56px!important;
    height:46px!important;
    border:1px solid #ffffff10!important;
    border-radius:12px!important;
    background:#ffffff06!important;
  }
}

/* =========================================================
   Mobile Explore / Map product model
   Keep the map dominant. The collapsed mountain dock is a glance surface;
   expansion is the deliberate path to weather and conditions.
   ========================================================= */
@media(max-width:759px){
  .vertex-v3 #app[data-section="explore"] .place-card{
    bottom:calc(var(--v3-content-bottom) + 6px)!important;
  }

  .vertex-v3 #app[data-section="explore"] .place-card.collapsed{
    max-height:82px!important;
    padding:3px 10px 7px!important;
    overflow:hidden!important;
  }

  .vertex-v3 #app[data-section="explore"] .place-card.collapsed .place-card-handle{
    height:11px!important;
    min-height:11px!important;
    margin:0!important;
  }

  .vertex-v3 #app[data-section="explore"] .place-card.collapsed .place-card-handle span{
    width:28px!important;
    margin:4px auto!important;
  }

  .vertex-v3 #app[data-section="explore"] .place-card.collapsed .place-card-content{
    max-height:65px!important;
  }

  .vertex-v3 #app[data-section="explore"] .place-card.collapsed .place-card-title{
    min-height:31px!important;
    margin:0!important;
    grid-template-columns:minmax(0,1fr) 32px!important;
    gap:5px!important;
  }

  .vertex-v3 #app[data-section="explore"] .place-card.collapsed .place-card-title h1{
    font-size:15px!important;
    line-height:1.1!important;
  }

  .vertex-v3 #app[data-section="explore"] .place-card.collapsed .favorite-place{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    min-height:32px!important;
    border-radius:9px!important;
    font-size:15px!important;
  }

  .vertex-v3 #app[data-section="explore"] .place-card.collapsed .resort-status{
    min-height:24px!important;
    padding:4px 0 1px!important;
  }

  .vertex-v3 #app[data-section="explore"] .place-card.collapsed .resort-status span{
    padding:0 5px!important;
  }

  .vertex-v3 #app[data-section="explore"] .place-card.collapsed .resort-status b{
    font-size:9.5px!important;
  }

  .vertex-v3 #app[data-section="explore"] .place-card.collapsed .resort-status small{
    margin-top:0!important;
    font-size:7.5px!important;
  }

  .vertex-v3 #app[data-section="explore"] .place-card:not(.collapsed){
    max-height:min(48dvh,390px)!important;
    padding-bottom:10px!important;
  }

  .vertex-v3 #app[data-section="explore"] .map-tools{
    top:calc(var(--v3-mobile-top) + 60px)!important;
    right:9px!important;
  }

  .vertex-v3 #app[data-section="explore"] .map-tools .tool{
    width:40px!important;
    height:40px!important;
    border-radius:12px!important;
  }

  /* Layer legends sit immediately above the mountain dock and never under it. */
  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]) .slope-legend,
  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]) .aspect-legend,
  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]) .sun-panel{
    bottom:calc(var(--v3-content-bottom) + var(--place-card-current-h,82px) + 12px)!important;
  }

  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]):has(.slope-legend.show) .place-card,
  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]):has(.aspect-legend.show) .place-card,
  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]):has(.sun-panel.show) .place-card{
    z-index:8!important;
  }

  /* Opening Layers is a focused map task, so the mountain dock leaves the stage. */
  .vertex-v3 #app[data-section="explore"]:has(#layerPanel:not([hidden])) .place-card{
    display:none!important;
  }
}

/* =========================================================
   Mobile Weather product model
   Forecast is a scrollable content screen; elevation is a horizontal selector.
   Weather Map is a dedicated full-map state with its own return controls.
   ========================================================= */
@media(max-width:759px){
  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-view{
    padding-top:0!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-head{
    position:sticky!important;
    top:0!important;
    z-index:8!important;
    margin:0 calc(var(--v11-mobile-pad) * -1)!important;
    padding:max(10px,env(safe-area-inset-top)) var(--v11-mobile-pad) 7px!important;
    background:linear-gradient(#0b1216 82%,#0b121600)!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-head h1{
    max-width:calc(100vw - 120px)!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-view>.weather-tabs{
    position:sticky!important;
    top:62px!important;
    z-index:7!important;
    margin:0 0 9px!important;
    background:#0b1216f2!important;
    backdrop-filter:blur(18px)!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-overview{
    margin-top:4px!important;
    padding:11px!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-now-metrics{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-now-metrics span{
    min-width:0!important;
    padding:8px 5px!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-now-metrics b{
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-levels{
    display:grid!important;
    grid-auto-flow:column!important;
    grid-auto-columns:minmax(218px,72vw)!important;
    grid-template-columns:none!important;
    gap:7px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    overscroll-behavior-inline:contain!important;
    scrollbar-width:none!important;
    padding:1px var(--v11-mobile-pad) 5px 0!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-levels::-webkit-scrollbar{
    display:none!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-level-card{
    scroll-snap-align:start!important;
    min-height:112px!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-hours{
    grid-auto-columns:minmax(104px,30vw)!important;
    scroll-snap-type:x proximity!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-hour-card{
    scroll-snap-align:start!important;
  }

  .vertex-v3 #app[data-explore-view="weather-map"] .weather-view{
    padding:0!important;
  }

  .vertex-v3 #app[data-explore-view="weather-map"] .weather-map-view{
    inset:0!important;
  }

  

  /* .map-active matches the older map-active rules so the head clears the back/close row. */
  

  

  .vertex-v3 #app[data-explore-view="weather-map"] .weather-map-status{
    top:calc(max(10px,env(safe-area-inset-top)) + 164px)!important;
  }
}

/* =========================================================
   Mobile Record product model
   Recording is map-first. Ordinary Explore chrome yields to live session controls.
   ========================================================= */
@media(max-width:759px){
  .vertex-v3 #app[data-section="record"] .record-sheet{
    max-height:min(62dvh,560px)!important;
    padding:12px!important;
  }

  .vertex-v3 #app[data-section="record"] .record-head h2{
    margin-bottom:10px!important;
    font-size:18px!important;
  }

  .vertex-v3 #app[data-section="record"] .record-chooser{
    gap:7px!important;
  }

  .vertex-v3 #app[data-section="record"] .record-choice{
    min-height:104px!important;
    padding:12px!important;
  }

  .vertex-v3 #app[data-section="record"] .record-choice>b{
    font-size:13px!important;
  }

  .vertex-v3 #app[data-section="record"] .tour-route-picker{
    max-height:min(34dvh,280px)!important;
    overflow:auto!important;
  }

  .vertex-v3 #app[data-section="record"] .tour-route-option{
    min-height:48px!important;
  }

  .vertex-v3 #app[data-section="record"] .record-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .vertex-v3 #app[data-section="record"] .record-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }

  .vertex-v3 #app[data-section="record"] .record-actions #startRecord:not([hidden]){
    grid-column:1/-1!important;
  }

  .vertex-v3 #app:has(.active-session:not([hidden])) .place-card,
  .vertex-v3 #app:has(.active-session:not([hidden])) .map-tools{
    display:none!important;
  }

  /* Layers stay usable while recording (slope, aspect, avalanche on the mountain); only search steps aside. */
  .vertex-v3 #app:has(.active-session:not([hidden])) .topbar .search-wrap{
    visibility:hidden!important;
    pointer-events:none!important;
  }

  .vertex-v3 #app .active-session{
    left:7px!important;
    right:7px!important;
    bottom:calc(var(--v3-content-bottom) + 7px)!important;
    padding:8px 10px 10px!important;
    border-radius:16px!important;
  }

  .vertex-v3 #app .active-session-main strong{
    font-size:21px!important;
  }

  .vertex-v3 #app .active-map-controls{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .vertex-v3 #app .active-map-controls button{
    min-height:40px!important;
  }

  /* Opening the live controls replaces the compact live strip instead of stacking it. */
  .vertex-v3 #app:has(#recordSheet:not([hidden])) .active-session{
    display:none!important;
  }
}

/* =========================================================
   Mobile You product model
   One navigation hierarchy across Ski Log, People, Saved, Profile and Settings.
   ========================================================= */
@media(max-width:759px){
  .vertex-v3 #app[data-section="you"] .you-sheet,
  .vertex-v3 #app[data-section="you"] .activities-sheet,
  .vertex-v3 #app[data-section="you"] .activity-detail,
  .vertex-v3 #app[data-section="you"] .compare-sheet,
  .vertex-v3 #app[data-section="you"] .community-view{
    padding-top:max(10px,env(safe-area-inset-top))!important;
  }

  .vertex-v3 #app[data-section="you"] .you-child-head,
  .vertex-v3 #app[data-section="you"] .activity-detail-head,
  .vertex-v3 #app[data-section="you"] .people-context-nav{
    position:sticky!important;
    top:calc(max(10px,env(safe-area-inset-top)) * -1)!important;
    z-index:8!important;
    margin-left:calc(var(--v11-mobile-pad) * -1)!important;
    margin-right:calc(var(--v11-mobile-pad) * -1)!important;
    padding:10px var(--v11-mobile-pad) 8px!important;
    background:linear-gradient(#0b1216 84%,#0b121600)!important;
  }

  .vertex-v3 #app[data-section="you"] .activities-list{
    gap:0!important;
  }

  .vertex-v3 #app[data-section="you"] .activities-list .activity-row{
    min-height:70px!important;
    padding:9px 2px!important;
    border:0!important;
    border-bottom:1px solid #ffffff0d!important;
    border-radius:0!important;
    background:transparent!important;
  }

  .vertex-v3 #app[data-section="you"] .compare-grid{
    gap:7px!important;
  }

  .vertex-v3 #app[data-section="you"] .compare-card{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:6px!important;
    padding:11px!important;
  }

  .vertex-v3 #app[data-section="you"] .compare-card>div{
    grid-column:1/-1!important;
  }

  .vertex-v3 #app[data-section="you"] .compare-card>strong,
  .vertex-v3 #app[data-section="you"] .compare-card>span{
    display:grid!important;
    min-width:0!important;
  }

  .vertex-v3 #app[data-section="you"] .compare-card>strong{
    align-content:start!important;
    font-size:17px!important;
  }

  .vertex-v3 #app[data-section="you"] .compare-card>span b,
  .vertex-v3 #app[data-section="you"] .compare-card>span small{
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .vertex-v3 #app[data-section="you"] .community-view .profile-editor-sheet{
    padding-top:max(10px,env(safe-area-inset-top))!important;
  }
}

/* =========================================================
   Mobile Powder product model
   Map first, ranking second. Keep the destination dense and scan-friendly.
   ========================================================= */
@media(max-width:759px){
  .vertex-v3 #app .powder-finder-sheet{
    inset:0 0 var(--v3-content-bottom) 0!important;
    width:auto!important;
    max-width:none!important;
    max-height:none!important;
    padding:max(10px,env(safe-area-inset-top)) var(--v11-mobile-pad) 14px!important;
    border:0!important;
    border-radius:0!important;
    overflow:auto!important;
  }

  .vertex-v3 #app .powder-finder-sheet>.publish-route-head{
    position:sticky!important;
    top:calc(max(10px,env(safe-area-inset-top)) * -1)!important;
    z-index:8!important;
    margin:calc(max(10px,env(safe-area-inset-top)) * -1) calc(var(--v11-mobile-pad) * -1) 8px!important;
    padding:max(10px,env(safe-area-inset-top)) var(--v11-mobile-pad) 8px!important;
    background:linear-gradient(#0b1216 84%,#0b121600)!important;
  }

  .vertex-v3 #app .powder-finder-summary{
    margin-bottom:8px!important;
    padding:0 2px!important;
  }

  .vertex-v3 #app .powder-map-card{
    padding:8px!important;
    margin-bottom:8px!important;
    border-radius:13px!important;
  }

  .vertex-v3 #app .powder-raster-map{
    height:210px!important;
    min-height:210px!important;
    border-radius:10px!important;
    overflow:hidden!important;
  }

  .vertex-v3 #app .powder-map-scale{
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }

  .vertex-v3 #app .powder-map-scale::-webkit-scrollbar{
    display:none!important;
  }

  .vertex-v3 #app .powder-finder-list{
    gap:0!important;
  }

  .vertex-v3 #app .powder-finder-row{
    min-height:64px!important;
    padding:9px 2px!important;
    border:0!important;
    border-bottom:1px solid #ffffff0d!important;
    border-radius:0!important;
    background:transparent!important;
  }

  .vertex-v3 #app .powder-finder-row .powder-rank{
    align-self:start!important;
    margin-top:2px!important;
  }

  .vertex-v3 #app .powder-finder-note{
    padding:10px 2px 2px!important;
  }
}

/* =========================================================
   Mobile corrections — legends, Weather and mountain actions
   ========================================================= */
@media(max-width:759px){
  /* Terrain legends belong at the bottom of the map, directly above primary nav. */
  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]) .slope-legend,
  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]) .aspect-legend{
    position:fixed!important;
    top:auto!important;
    left:9px!important;
    right:9px!important;
    bottom:calc(var(--v3-content-bottom) + 7px)!important;
    max-width:none!important;
    min-height:34px!important;
    padding:6px 8px!important;
    justify-content:center!important;
    gap:5px!important;
    border-radius:11px!important;
    z-index:31!important;
  }

  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]) .slope-legend .legend-title,
  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]) .aspect-legend .legend-title{
    display:none!important;
  }

  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]):has(.slope-legend.show) .place-card,
  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]):has(.aspect-legend.show) .place-card{
    bottom:calc(var(--v3-content-bottom) + 49px)!important;
  }

  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]) .sun-panel{
    position:fixed!important;
    top:auto!important;
    left:9px!important;
    right:9px!important;
    bottom:calc(var(--v3-content-bottom) + 7px)!important;
    width:auto!important;
    transform:none!important;
    z-index:31!important;
  }

  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]):has(.sun-panel.show) .place-card{
    bottom:calc(var(--v3-content-bottom) + 76px)!important;
  }

  /* Sun & shadows can be on together with Slope or Aspect: stack the time slider above the legend. */
  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]):has(.slope-legend.show) .sun-panel,
  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]):has(.aspect-legend.show) .sun-panel{
    bottom:calc(var(--v3-content-bottom) + 49px)!important;
  }

  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]):has(.sun-panel.show):has(.slope-legend.show) .place-card,
  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]):has(.sun-panel.show):has(.aspect-legend.show) .place-card{
    bottom:calc(var(--v3-content-bottom) + 118px)!important;
  }

  /* Older generic span rules treated the text wrapper as an icon. */
  .vertex-v3 #app .mountain-primary-actions button{
    grid-template-columns:28px minmax(0,1fr) 18px!important;
    grid-template-areas:"icon copy arrow"!important;
  }

  .vertex-v3 #app .mountain-primary-actions button>span:first-child{
    grid-area:icon!important;
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    display:grid!important;
    place-items:center!important;
    margin:0!important;
  }

  .vertex-v3 #app .mountain-primary-actions button>span:nth-child(2){
    grid-area:copy!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    display:grid!important;
    place-items:initial!important;
    align-content:center!important;
    gap:2px!important;
    margin:0!important;
    background:transparent!important;
    border-radius:0!important;
    font-size:inherit!important;
  }

  .vertex-v3 #app .mountain-primary-actions button>span:nth-child(2)>b,
  .vertex-v3 #app .mountain-primary-actions button>span:nth-child(2)>small{
    display:block!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  .vertex-v3 #app .mountain-primary-actions button>i{
    grid-area:arrow!important;
  }

  /* Weather is a true phone layout, not the desktop composition squeezed narrow. */
  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-view{
    inset:0 0 var(--v3-content-bottom) 0!important;
    width:auto!important;
    max-width:none!important;
    padding:0 12px 18px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-head{
    display:grid!important;
    grid-template-columns:40px minmax(0,1fr) 40px!important;
    align-items:center!important;
    gap:8px!important;
    min-height:62px!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-head h1{
    max-width:100%!important;
    font-size:19px!important;
    line-height:1.1!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-head p{
    margin:2px 0 0!important;
    font-size:8px!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-view>.weather-tabs{
    top:62px!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    padding:3px!important;
    border-radius:11px!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-view>.weather-tabs button{
    width:100%!important;
    min-width:0!important;
    height:36px!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-overview{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
    margin:10px 0 12px!important;
    padding:13px!important;
    border-radius:16px!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-now-main{
    grid-column:1!important;
    display:grid!important;
    grid-template-columns:46px minmax(0,1fr)!important;
    align-items:center!important;
    gap:10px!important;
    padding-bottom:11px!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-condition-icon{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-now-main strong{
    font-size:38px!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-now-metrics{
    grid-column:1!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    border-top:1px solid #ffffff10!important;
    border-left:0!important;
    gap:0!important;
    padding-top:4px!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-now-metrics span{
    padding:8px!important;
    border-right:0!important;
    border-bottom:1px solid #ffffff0c!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-now-metrics span:nth-last-child(-n+2){
    border-bottom:0!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-sun{
    grid-column:1!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:0!important;
    min-width:0!important;
    padding-top:7px!important;
    border-top:1px solid #ffffff10!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-sun span{
    padding:6px 8px!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-levels{
    display:grid!important;
    grid-auto-flow:column!important;
    grid-auto-columns:minmax(210px,76vw)!important;
    grid-template-columns:none!important;
    gap:7px!important;
    margin:0 0 14px!important;
    border:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-level-card{
    display:block!important;
    min-height:118px!important;
    padding:12px!important;
    border:1px solid #ffffff10!important;
    border-radius:13px!important;
    background:#ffffff05!important;
    scroll-snap-align:start!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-level-card>b{
    display:block!important;
    margin:5px 0 7px!important;
    font-size:26px!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-level-card div{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:4px 10px!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-level-card::after{
    left:10px!important;
    right:10px!important;
    top:auto!important;
    bottom:0!important;
    width:auto!important;
    height:2px!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-section{
    margin-top:18px!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-section-head h2{
    font-size:17px!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-hours{
    width:calc(100% + 24px)!important;
    margin-left:-12px!important;
    padding-left:12px!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-hour-card{
    flex:0 0 102px!important;
    min-height:120px!important;
    padding:12px 10px!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-days-head{
    display:none!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-days article{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:none!important;
    gap:5px 8px!important;
    padding:11px 2px!important;
  }

  /* The legacy 3-column named areas would stack every cell on the same two rows. */
  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-days article>div,
  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-days article>strong{
    grid-area:auto!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-days article>em,
  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-days article>span,
  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-days article>small:last-child{
    grid-row:auto!important;
  }
}


/* Desktop Community route preview is a compact map card (as in styles.css), not a full-height empty panel. */
@media(min-width:760px){
  .vertex-v3 #app .route-detail.community-map-card{
    top:auto!important;
  }
  .vertex-v3 #app .route-detail.community-map-card .route-detail-stats{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* Desktop: the mountain dock is bottom-left too, so terrain legends and the Sun slider
   stack above it instead of sitting underneath it. */
@media(min-width:760px){
  .vertex-v3 #app[data-section="explore"] .slope-legend,
  .vertex-v3 #app[data-section="explore"] .aspect-legend{
    bottom:calc(var(--place-card-current-h,214px) + 28px)!important;
  }

  .vertex-v3 #app[data-section="explore"] .sun-panel{
    left:var(--v3-desktop-left)!important;
    transform:none!important;
    bottom:calc(var(--place-card-current-h,214px) + 28px)!important;
  }

  .vertex-v3 #app[data-section="explore"]:has(.slope-legend.show) .sun-panel,
  .vertex-v3 #app[data-section="explore"]:has(.aspect-legend.show) .sun-panel{
    bottom:calc(var(--place-card-current-h,214px) + 67px)!important;
  }
}

/* =========================================================
   Mobile Weather visual refinement
   Preserve the mobile structure, but restore a calmer premium hierarchy.
   ========================================================= */
@media(max-width:759px){
  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-head small{
    font-size:7px!important;
    letter-spacing:.11em!important;
    color:#6f7d79!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-head h1{
    font-size:18px!important;
    font-weight:650!important;
    letter-spacing:-.025em!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-head p{
    color:#73817e!important;
    font-size:7.5px!important;
    font-weight:550!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-view>.weather-tabs{
    border:1px solid #ffffff0e!important;
    background:#11191cf2!important;
    box-shadow:none!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-view>.weather-tabs button{
    font-size:9px!important;
    font-weight:750!important;
    color:#81908d!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-view>.weather-tabs button.active{
    background:#edf3f1!important;
    color:#10181b!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-overview{
    border:1px solid #ffffff0d!important;
    background:linear-gradient(150deg,#152024 0%,#0f171a 66%,#0c1316 100%)!important;
    box-shadow:none!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-now-main small{
    font-size:7px!important;
    letter-spacing:.1em!important;
    color:#7a8985!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-now-main b{
    margin-top:3px!important;
    font-size:13px!important;
    font-weight:600!important;
    color:#c8d2cf!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-now-main strong{
    margin-top:1px!important;
    font-size:41px!important;
    font-weight:550!important;
    letter-spacing:-.055em!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-condition-icon{
    color:#dfe8e5!important;
    opacity:.9!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-now-metrics small,
  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-sun small{
    font-size:7px!important;
    letter-spacing:.05em!important;
    text-transform:none!important;
    color:#71807c!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-now-metrics b,
  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-sun b{
    margin-top:3px!important;
    font-size:11.5px!important;
    font-weight:600!important;
    color:#d3dcda!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-level-card{
    border-color:#ffffff0b!important;
    background:#ffffff025!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-level-card.active{
    border-color:#ffffff1a!important;
    background:#ffffff055!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-level-card>small{
    font-size:7px!important;
    letter-spacing:.08em!important;
    color:#73827e!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-level-card>b{
    margin:4px 0 5px!important;
    font-size:24px!important;
    font-weight:600!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-level-card div{
    gap:3px 9px!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-level-card div span{
    font-size:8.5px!important;
    color:#889693!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-level-card div strong{
    font-weight:600!important;
    color:#c7d1ce!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .powder-card{
    margin:4px 0 20px!important;
    padding:11px 0!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .powder-card small{
    font-size:7px!important;
    letter-spacing:.1em!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .powder-card b{
    font-size:13px!important;
    font-weight:650!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .powder-card span{
    font-size:8.5px!important;
    line-height:1.35!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-section-head{
    margin-bottom:7px!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-section-head small{
    font-size:7px!important;
    letter-spacing:.09em!important;
    color:#71807c!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-section-head h2{
    margin-top:2px!important;
    font-size:16px!important;
    font-weight:650!important;
    letter-spacing:-.015em!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-section-head>span{
    font-size:8.5px!important;
    color:#85938f!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-hour-card{
    min-height:112px!important;
    padding:11px 9px!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-hour-card small{
    font-size:7.5px!important;
    color:#71807c!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-hour-card b{
    margin:4px 0 2px!important;
    font-size:20px!important;
    font-weight:600!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-hour-card strong{
    min-height:20px!important;
    font-size:8.5px!important;
    font-weight:600!important;
    color:#bdc8c5!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-hour-card span{
    margin-top:5px!important;
    font-size:8px!important;
    color:#8b9995!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-hour-card em{
    margin-top:3px!important;
    font-size:7.5px!important;
    color:#65736f!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-mini-icon{
    width:21px!important;
    height:21px!important;
    margin:6px 0 0!important;
    opacity:.82!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-days article>div b{
    font-size:12px!important;
    font-weight:650!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-days article>div small{
    font-size:8px!important;
    color:#74827f!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-days article>strong{
    font-size:14px!important;
    font-weight:600!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-days article>em,
  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-days article>span,
  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-days article>small:last-child{
    font-size:8.5px!important;
    color:#879591!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-day-icon{
    width:16px!important;
    height:16px!important;
    margin-right:5px!important;
    vertical-align:-3px!important;
    opacity:.84!important;
  }
}

/* Desktop Explore (and Record, where the card stays visible beside the sheet): correct the legacy action-row grid areas without redesigning the card. */
@media(min-width:760px){
  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]) .mountain-primary-actions button>span:first-child{
    grid-area:1 / 1!important;
  }
  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]) .mountain-primary-actions button>span:nth-child(2){
    grid-area:1 / 2!important;
    min-width:0!important;
    width:auto!important;
    height:auto!important;
  }
  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]) .mountain-primary-actions button>i{
    grid-area:1 / 3!important;
  }
}

/* Desktop Weather: adapt the existing premium overview to the actual side-panel width. */
@media(min-width:760px){
  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-overview{
    grid-template-columns:minmax(150px,.85fr) minmax(0,1.15fr)!important;
    gap:12px!important;
    padding:18px!important;
  }
  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-now-main{
    grid-column:1!important;
  }
  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-now-metrics{
    grid-column:2!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    border-left:1px solid #ffffff10!important;
  }
  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-sun{
    grid-column:1/-1!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    min-width:0!important;
    padding-top:9px!important;
    border-top:1px solid #ffffff10!important;
  }
  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-sun span{
    padding:4px 8px!important;
  }
}

/* Desktop avalanche chip belongs to the map workspace, never under the left rail. */
@media(min-width:760px){
  .vertex-v3 #app .avalanche-chip{
    left:var(--v3-desktop-left)!important;
    right:auto!important;
  }
}

/* Mobile Weather: all three elevation levels side by side instead of a sideways carousel,
   so High terrain is visible without scrolling. Details stack inside each column. */
@media(max-width:759px){
  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-levels{
    grid-auto-flow:row!important;
    grid-auto-columns:auto!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    overflow:visible!important;
    scroll-snap-type:none!important;
    padding:1px 0 5px!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-level-card{
    min-width:0!important;
    min-height:0!important;
    padding:10px 8px 11px!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-level-card>small{
    display:block!important;
    line-height:1.35!important;
    white-space:normal!important;
    text-overflow:clip!important;
    overflow:visible!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-level-card>b{
    font-size:21px!important;
    margin:4px 0 4px!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-level-card div{
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    gap:3px!important;
  }

  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-level-card div span{
    min-width:0!important;
    overflow-wrap:anywhere!important;
    line-height:1.3!important;
  }
}

/* Community map: chooser when several published routes overlap at the tapped spot. */
.vertex-v3 #app .community-route-chooser-popup .maplibregl-popup-content{
  padding:6px!important;
  border:1px solid #ffffff1c!important;
  border-radius:12px!important;
  background:#0c1418f2!important;
  box-shadow:0 12px 32px #0009!important;
  backdrop-filter:blur(16px)!important;
}
.vertex-v3 #app .community-route-chooser-popup .maplibregl-popup-tip{
  border-top-color:#0c1418f2!important;
  border-bottom-color:#0c1418f2!important;
}
.vertex-v3 #app .community-route-chooser{
  display:grid;
  gap:3px;
  min-width:190px;
}
.vertex-v3 #app .community-route-chooser>small{
  padding:4px 6px 2px;
  color:#7f8d8a;
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.vertex-v3 #app .community-route-chooser button{
  display:grid;
  gap:2px;
  width:100%;
  min-height:44px;
  padding:7px 8px;
  border:0;
  border-radius:9px;
  background:#ffffff08;
  color:#eef4f1;
  text-align:left;
}
.vertex-v3 #app .community-route-chooser button b{
  font-size:12px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.vertex-v3 #app .community-route-chooser button span{
  color:#8e9b98;
  font-size:9px;
}

:root{--active-session-h:95px} /* live height is written by app.js */

/* Mobile recording dock: fixed three-button grid (the base flex ignored the grid and overflowed),
   its own compositing layer so it stays put while the map pans underneath, out of the way of the
   Layers sheet, and legends/Sun slider stacked above it. */
@media(max-width:759px){
  .vertex-v3 #app .active-session{
    transform:translateZ(0)!important;
    contain:layout paint!important;
    touch-action:manipulation!important;
  }
  .vertex-v3 #app .active-map-controls,
  .vertex-v3 #app .active-session:not(:focus-within):not(:hover) .active-map-controls{
    /* styles.css capped this at 128px only while the dock had no hover/focus; on touch that flips
       when the map is touched, so the controls jumped. One fixed width in every state. */
    display:grid!important;
    grid-template-columns:repeat(3,42px)!important;
    gap:2px!important;
    max-width:none!important;
  }
  .vertex-v3 #app .active-map-controls button{
    min-width:0!important;
    width:42px!important;
  }
  .vertex-v3 #app:has(#layerPanel:not([hidden])) .active-session{
    display:none!important;
  }
  .vertex-v3 #app:has(.active-session:not([hidden])) .slope-legend,
  .vertex-v3 #app:has(.active-session:not([hidden])) .aspect-legend,
  .vertex-v3 #app:has(.active-session:not([hidden])) .sun-panel{
    bottom:calc(var(--v3-content-bottom) + var(--active-session-h,95px) + 14px)!important;
  }
  .vertex-v3 #app:has(.active-session:not([hidden])):has(.slope-legend.show) .sun-panel,
  .vertex-v3 #app:has(.active-session:not([hidden])):has(.aspect-legend.show) .sun-panel{
    bottom:calc(var(--v3-content-bottom) + var(--active-session-h,95px) + 56px)!important;
  }
}

/* Recording is a phone activity; desktop is for planning and reviewing. Keep Record reachable only
   while a session is already running (e.g. the window was resized mid-recording). */
@media(min-width:760px){
  .vertex-v3 #app #recordNav:not(.recording-active){
    display:none!important;
  }
}

/* Final visibility authority. Responsive composition must never override the hidden attribute.
   button[hidden] matches the specificity of the shared ">button" control rules. */
/* Layer art: small drawn previews of what each layer puts on the map (Avalanche and Bulletin keep their own). */
.vertex-v3 #app .layer-preview.layer-art{position:relative;overflow:hidden;padding:0;background:#16232a;box-shadow:inset 0 0 0 1px #ffffff14}
.layer-preview.layer-art svg{display:block;width:100%;height:100%}
.vertex-v3 #app .layer-row.active .layer-preview.layer-art,.vertex-v3 #app .layer-row[aria-pressed="true"] .layer-preview.layer-art{box-shadow:inset 0 0 0 1.5px #eef5f2}
/* The layers button says what it is: a stack icon with its name under it. */
.vertex-v3 #app .topbar .layers-button{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0!important}
.vertex-v3 #app .topbar .layers-button svg{width:20px;height:20px}
.vertex-v3 #app .topbar .layers-button small{font-size:8px;font-weight:800;letter-spacing:.02em;line-height:1}
/* ---------- Premium cards ----------
   One surface for the cards that float over the map (place card and track card): a lit top edge, a soft
   gradient and a deep shadow. Stats read as numbers first, actions as one confident primary button, and
   list rows as tiles carrying their category colour. */
.vertex-v3 #app .place-card,.vertex-v3 #app .route-detail.community-map-card,.vertex-v3 #app .route-detail.mobile-map-preview{
  border:1px solid #ffffff14!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,#19262cf5 0%,#0e171bf7 55%,#0b1316f8 100%)!important;
  box-shadow:inset 0 1px 0 #ffffff17,0 22px 50px #000000a6,0 3px 10px #00000059!important;
  backdrop-filter:blur(22px) saturate(1.25)!important;
}
.vertex-v3 #app .place-card h1,.vertex-v3 #app .route-detail-head h2{letter-spacing:-.022em!important}
.vertex-v3 #app .place-card-handle span{background:#ffffff38!important;border-radius:999px!important}
.vertex-v3 #app .resort-status b,.vertex-v3 #app .stats b,.vertex-v3 #app .route-detail-stats b{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.vertex-v3 #app .resort-status small,.vertex-v3 #app .route-detail-stats small{text-transform:uppercase;letter-spacing:.09em!important;color:#8d9ea3!important}
.vertex-v3 #app .route-detail-head{background:none!important}
.vertex-v3 #app .route-detail-head>button{border-radius:999px!important;border:1px solid #ffffff17!important;background:#ffffff0d!important}
.vertex-v3 #app #routeDetailType{display:inline-flex;align-items:center;gap:6px;color:#9fb0b4!important}
.vertex-v3 #app .route-detail[data-category] #routeDetailType::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}
.vertex-v3 #app .route-detail[data-category=""] #routeDetailType::before{display:none}
.vertex-v3 #app .route-detail[data-category="skitour"] #routeDetailType{color:#7fcdff!important}
.vertex-v3 #app .route-detail[data-category="offpiste"] #routeDetailType{color:#ffab5e!important}
.vertex-v3 #app .route-detail[data-category="trail"] #routeDetailType{color:#cdb0ff!important}
.vertex-v3 #app .route-detail-stats{gap:6px!important;border-radius:0!important;overflow:visible!important;background:none!important;border:0!important}
.vertex-v3 #app .route-detail-stats>span{border:1px solid #ffffff10!important;border-radius:13px!important;background:linear-gradient(180deg,#ffffff0c,#ffffff05)!important;box-shadow:inset 0 1px 0 #ffffff0d!important}
.vertex-v3 #app .route-detail-stats b{font-size:16px!important;font-weight:760!important}
.vertex-v3 #app .route-detail-actions .route-primary,.vertex-v3 #app .route-detail-actions .route-community-save:not([hidden]){
  border:0!important;border-radius:15px!important;
  background:linear-gradient(180deg,#ffffff 0%,#dfe9e6 100%)!important;color:#0b1417!important;
  box-shadow:inset 0 -1px 0 #00000014,0 8px 22px #00000059!important;font-weight:800!important;letter-spacing:.01em!important
}
.vertex-v3 #app .route-detail-actions .route-community-save:disabled{background:#ffffff12!important;color:#c6d3d0!important;box-shadow:none!important}
.vertex-v3 #app .mountain-primary-actions button>span:first-child{flex:0 0 30px!important;width:30px!important;height:30px!important;display:grid!important;place-items:center!important;border:1px solid #ffffff14!important;border-radius:10px!important;background:linear-gradient(180deg,#ffffff16,#ffffff06)!important}
/* The same finish on every other card: floating panels over the map get the lit edge, gradient and shadow;
   cards inside lists and sheets become quiet tiles. Full-screen destinations keep their flat page colour. */
.vertex-v3 #app #layerPanel,.vertex-v3 #app .avalanche-sheet,.vertex-v3 #app .compare-sheet,.vertex-v3 #app .record-sheet,.vertex-v3 #app .route-planner,.vertex-v3 #app .replay-controls,.vertex-v3 #app .sun-panel,.vertex-v3 #app .community-route-chooser-popup .maplibregl-popup-content,.vertex-v3 #app .profile-editor-sheet,.vertex-v3 #app .community-safety-sheet,.vertex-v3 #app .powder-finder-sheet{
  border:1px solid #ffffff14!important;
  background:linear-gradient(180deg,#19262cf7 0%,#0e171bf8 55%,#0b1316fa 100%)!important;
  box-shadow:inset 0 1px 0 #ffffff17,0 22px 50px #000000a6,0 3px 10px #00000059!important;
}
.vertex-v3 #app .slope-legend,.vertex-v3 #app .aspect-legend,.vertex-v3 #app .bulletin-terrain-legend,.vertex-v3 #app .avalanche-chip,.vertex-v3 #app .map-route-chip>button{
  border-color:#ffffff17!important;
  background:linear-gradient(180deg,#19262ceb,#0d1519ee)!important;
  box-shadow:inset 0 1px 0 #ffffff14,0 10px 26px #00000073!important;
}
.vertex-v3 #app .activity-row,.vertex-v3 #app .community-library-card,.vertex-v3 #app .community-my-profile-card,.vertex-v3 #app .community-person-card,.vertex-v3 #app .community-friend-row,.vertex-v3 #app .powder-finder-row,.vertex-v3 #app .powder-card,.vertex-v3 #app .compare-card,.vertex-v3 #app .record-choice,.vertex-v3 #app .weather-hour-card,.vertex-v3 #app .weather-days article{
  border:1px solid #ffffff0f!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#152126,#0f181c)!important;
  box-shadow:inset 0 1px 0 #ffffff0b!important;
}
.vertex-v3 #app .activity-row b,.vertex-v3 #app .compare-card b,.vertex-v3 #app .weather-hour-card strong{font-variant-numeric:tabular-nums}
.vertex-v3 #app #layerPanel .panel-head>button,.vertex-v3 #app .avalanche-sheet .panel-head>button{border-radius:999px!important;border:1px solid #ffffff17!important;background:#ffffff0d!important}
.vertex-v3 #app .you-season-summary,.vertex-v3 #app .you-menu{
  border:1px solid #ffffff0f!important;border-radius:18px!important;
  background:linear-gradient(180deg,#152126,#0f181c)!important;box-shadow:inset 0 1px 0 #ffffff0b!important
}
.vertex-v3 #app .you-season-summary{padding:14px 16px!important;margin-bottom:12px!important}
.vertex-v3 #app .you-menu{padding:2px 12px!important;overflow:hidden}
.vertex-v3 #app .you-menu button>span{border-radius:10px!important;background:linear-gradient(180deg,#ffffff16,#ffffff06)!important;border:1px solid #ffffff14!important}
/* List rows as tiles: category colour on the left edge, a quiet save pill on the right. */
.vertex-v3 #app[data-section="routes"] .community-list{display:grid!important;gap:8px!important}
.vertex-v3 #app[data-section="routes"] .community-route-card-wrap{
  padding:2px 10px 2px 8px!important;border:1px solid #ffffff0f!important;border-radius:16px!important;
  background:linear-gradient(180deg,#152126,#0f181c)!important;box-shadow:inset 0 1px 0 #ffffff0b,inset 3px 0 0 #9fb0b4!important
}
.vertex-v3 #app[data-section="routes"] .community-route-card-wrap:has(.library-skitour){box-shadow:inset 0 1px 0 #ffffff0b,inset 3px 0 0 #6cc4ff!important}
.vertex-v3 #app[data-section="routes"] .community-route-card-wrap:has(.library-offpiste){box-shadow:inset 0 1px 0 #ffffff0b,inset 3px 0 0 #ffa24c!important}
.vertex-v3 #app[data-section="routes"] .community-route-card-wrap:has(.library-trail){box-shadow:inset 0 1px 0 #ffffff0b,inset 3px 0 0 #c39bff!important}
.vertex-v3 #app[data-section="routes"] .community-route-card{padding:12px 4px!important}
.vertex-v3 #app[data-section="routes"] .community-route-card b{letter-spacing:-.01em}
.vertex-v3 #app[data-section="routes"] .community-route-top i{border:1px solid #ffffff14!important;background:#ffffff08!important;color:#a8b6b9!important;font-style:normal}
.vertex-v3 #app[data-section="routes"] .community-route-save-inline{
  min-width:0!important;padding:0 13px!important;border:1px solid #ffffff24!important;border-radius:999px!important;
  background:#ffffff0d!important;color:#eef5f2!important;font-weight:800!important;box-shadow:none!important
}
.vertex-v3 #app[data-section="routes"] .community-route-save-inline:disabled{border-color:#6cc4ff40!important;background:#6cc4ff14!important;color:#9fd8ff!important}
/* ---------- One visual system ----------
   One stroke icon set, one surface for everything that floats over the map (search, map tools, bottom nav),
   one pill for every filter, one round icon button for every close/back, and one white primary button. */
.ui-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.vertex-v3 #app .bottom-nav button>span{display:grid!important;place-items:center!important}
.vertex-v3 #app .bottom-nav button>span .ui-icon{width:22px;height:22px}
.vertex-v3 #app .map-tools .ui-icon,.vertex-v3 #app .map-tools .tracks-toggle .ui-icon{width:20px;height:20px}
.vertex-v3 #app .map-tools .tracks-toggle span{display:grid;place-items:center}
.vertex-v3 #app .mountain-primary-actions .ui-icon,.vertex-v3 #app .you-menu .ui-icon{width:17px;height:17px}
.vertex-v3 #app .record-choice .ui-icon{width:22px;height:22px}
.vertex-v3 #app .search,.vertex-v3 #app .round,.vertex-v3 #app .map-tools .tool,.vertex-v3 #app .bottom-nav{
  border:1px solid #ffffff17!important;
  background:linear-gradient(180deg,#1a272deb 0%,#0d1619f0 100%)!important;
  box-shadow:inset 0 1px 0 #ffffff17,0 10px 28px #0000007a!important;
  backdrop-filter:blur(18px) saturate(1.2)!important;
}
.vertex-v3 #app .bottom-nav{border-width:1px 0 0!important;box-shadow:inset 0 1px 0 #ffffff12,0 -10px 30px #00000059!important}
.vertex-v3 #app .map-tools .tool.active,.vertex-v3 #app .map-tools .tool[aria-pressed="true"]{
  border-color:#ffffff!important;background:linear-gradient(180deg,#ffffff,#dfe9e6)!important;color:#0b1417!important;
  box-shadow:inset 0 -1px 0 #00000014,0 10px 26px #00000066!important
}
.vertex-v3 #app .activities-head>button,.vertex-v3 #app .panel-head>button,.vertex-v3 #app .weather-head>button,.vertex-v3 #app .record-head>button,.vertex-v3 #app .activity-detail-head>button,.vertex-v3 #app .route-detail-head>button,.vertex-v3 #app .publish-route-head>button{
  border:1px solid #ffffff17!important;border-radius:999px!important;background:#ffffff0d!important;color:#eef5f2!important;box-shadow:none!important
}
.vertex-v3 #app .alps-library-filters button,.vertex-v3 #app .route-library-filters button,.vertex-v3 #app .community-tabs button,.vertex-v3 #app .weather-view>.weather-tabs button,.vertex-v3 #app .powder-map-tabs button,.vertex-v3 #app .route-filter-toggle,.vertex-v3 #app .community-map-open{
  border:1px solid #ffffff1c!important;border-radius:999px!important;background:#ffffff0b!important;color:#c9d4d1!important;font-weight:800!important;box-shadow:none!important
}
.vertex-v3 #app .alps-library-filters button.active,.vertex-v3 #app .route-library-filters button.active,.vertex-v3 #app .community-tabs button.active,.vertex-v3 #app .weather-view>.weather-tabs button.active,.vertex-v3 #app .powder-map-tabs button.active,.vertex-v3 #app .community-map-filters button.active,.vertex-v3 #app .route-filter-toggle[aria-expanded="true"]{
  border-color:#eef5f2!important;background:#eef5f2!important;color:#0b1417!important
}
.vertex-v3 #app .community-map-filters button:not(.active){
  border:1px solid #ffffff17!important;background:linear-gradient(180deg,#1a272ded,#0d1619f2)!important;color:#dfe8e5!important;
  box-shadow:inset 0 1px 0 #ffffff14,0 6px 18px #00000066!important;backdrop-filter:blur(14px)!important
}
.vertex-v3 #app .weather-view>.weather-tabs,.vertex-v3 #app .route-library-filters,.vertex-v3 #app .community-tabs{background:none!important;border:0!important;gap:6px!important}
.vertex-v3 #app .route-add-primary,.vertex-v3 #app .record-primary,.vertex-v3 #app .route-create-primary{
  border:0!important;border-radius:15px!important;background:linear-gradient(180deg,#ffffff 0%,#dfe9e6 100%)!important;color:#0b1417!important;
  box-shadow:inset 0 -1px 0 #00000014,0 8px 22px #00000059!important;font-weight:800!important
}
.vertex-v3 #app .eyebrow,.vertex-v3 #app .activities-head small,.vertex-v3 #app .panel-head small,.vertex-v3 #app .community-section-head small,.vertex-v3 #app .layer-section small{letter-spacing:.14em!important;color:#8d9ea3!important}
.vertex-v3 #app h1,.vertex-v3 #app h2{letter-spacing:-.02em}
/* While searching, the tracks filter row steps aside for the search results. */
.vertex-v3 #app:has(#placeSearch:focus) .community-map-bar,
.vertex-v3 #app:has(#searchResults:not([hidden])) .community-map-bar{display:none!important}

/* ---------- Docked place card ----------
   On phones the place card is the top of one sheet with the bottom nav:
   full width, square bottom, same surface as the nav, attribution above it. */
@media(max-width:759px){
  .vertex-v3 #app[data-section] .place-card,
  .vertex-v3 #app[data-section] .route-detail.mobile-map-preview,
  .vertex-v3 #app[data-section] .avalanche-sheet{
    left:0!important;
    right:0!important;
    width:auto!important;
    max-width:none!important;
    bottom:var(--v3-content-bottom)!important;
    border-radius:24px 24px 0 0!important;
    border-width:1px 0 0!important;
    border-color:#ffffff14!important;
    background:linear-gradient(180deg,#1b282e 0%,#131e22 100%)!important;
    box-shadow:inset 0 1px 0 #ffffff12,0 10px 0 #131e22,0 -16px 40px #00000066!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }
  .vertex-v3 #app[data-section] .route-detail.mobile-map-preview{
    padding-top:14px!important;
    backdrop-filter:none!important;
  }
  .vertex-v3 #app[data-section] .avalanche-sheet .activities-head,
  .vertex-v3 #app[data-section] .route-detail.mobile-map-preview .route-detail-head{
    background:#1b282e!important;
    box-shadow:none!important;
  }
  .vertex-v3 #app[data-section] .place-card.collapsed{
    padding-left:18px!important;
    padding-right:18px!important;
  }
  .vertex-v3 #app:has(.avalanche-sheet:not([hidden])) .bottom-nav,
  .vertex-v3 #app[data-place-docked] .bottom-nav,
  .vertex-v3 #app:has(.route-detail.mobile-map-preview:not([hidden])) .bottom-nav{
    background:linear-gradient(180deg,#131e22 0%,#0d1619 100%)!important;
    border-color:transparent!important;
    box-shadow:inset 0 1px 0 #ffffff0a!important;
    backdrop-filter:none!important;
  }
  .vertex-v3 #app[data-place-docked] .maplibregl-ctrl-bottom-right{
    bottom:calc(var(--v3-content-bottom) + var(--place-card-current-h,82px))!important;
  }
  .vertex-v3 #app:has(.route-detail.mobile-map-preview:not([hidden])) .maplibregl-ctrl-bottom-right{
    bottom:calc(var(--v3-content-bottom) + var(--map-preview-h))!important;
  }
}

/* ---------- Powder ----------
   One scale everywhere: light 2+, fresh 10+, powder day 20+, deep 30+ cm in 24h.
   The weather card leads with the number; the map card shows one alert line only when it matters. */
.vertex-v3 #app #powderCard{--pw:#8fa3ad;display:grid!important;gap:10px!important;width:100%!important;min-height:0!important;margin:6px 0 22px!important;padding:14px 15px 13px!important;border:1px solid #ffffff14!important;border-radius:18px!important;background:linear-gradient(180deg,#19262c,#0f181c)!important;box-shadow:inset 0 1px 0 #ffffff12,0 10px 28px #0006!important;text-align:left!important;color:#eef5f2!important}
.vertex-v3 #app #powderCard[data-level="light"]{--pw:#a9c7d6}
.vertex-v3 #app #powderCard[data-level="fresh"]{--pw:#7fcdff}
.vertex-v3 #app #powderCard[data-level="powder"]{--pw:#53d1ff;border-color:#53d1ff40!important;background:radial-gradient(120% 90% at 0% 0%,#1d4a5f 0%,#19262c 55%,#0f181c 100%)!important}
.vertex-v3 #app #powderCard[data-level="deep"]{--pw:#b9a2ff;border-color:#b9a2ff45!important;background:radial-gradient(120% 90% at 0% 0%,#3a2f63 0%,#19262c 55%,#0f181c 100%)!important}
.vertex-v3 #app #powderCard .powder-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.vertex-v3 #app #powderCard .powder-card-head small{font-size:9px!important;font-weight:800!important;letter-spacing:.14em!important;color:#8f9b98!important}
.vertex-v3 #app #powderCard .powder-level{padding:4px 9px;border-radius:999px;background:color-mix(in srgb,var(--pw) 18%,transparent);color:var(--pw);font-style:normal;font-size:10px;font-weight:800;letter-spacing:.02em}
.vertex-v3 #app #powderCard .powder-card-main{display:flex;align-items:baseline;gap:10px}
.vertex-v3 #app #powderCard .powder-card-main b{font-size:38px!important;line-height:1!important;font-weight:750!important;letter-spacing:-.03em!important;color:#fff!important}
.vertex-v3 #app #powderCard .powder-card-main b span{margin-left:3px;font-size:15px!important;font-weight:700;color:#c6d0cd!important}
.vertex-v3 #app #powderCard .powder-card-main>span{font-size:12px!important;font-weight:650;color:#c6d0cd!important}
.vertex-v3 #app #powderCard .powder-bars{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vertex-v3 #app #powderCard .powder-bars span{--pw:#8fa3ad;--h:4%;display:grid;grid-template-rows:38px auto auto;gap:3px}
.vertex-v3 #app #powderCard .powder-bars span[data-level="light"]{--pw:#a9c7d6}
.vertex-v3 #app #powderCard .powder-bars span[data-level="fresh"]{--pw:#7fcdff}
.vertex-v3 #app #powderCard .powder-bars span[data-level="powder"]{--pw:#53d1ff}
.vertex-v3 #app #powderCard .powder-bars span[data-level="deep"]{--pw:#b9a2ff}
.vertex-v3 #app #powderCard .powder-bars i{align-self:end;height:var(--h);min-height:3px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,var(--pw),color-mix(in srgb,var(--pw) 35%,transparent))}
.vertex-v3 #app #powderCard .powder-bars b{font-size:12px!important;font-weight:750!important;color:#eef5f2!important}
.vertex-v3 #app #powderCard .powder-bars small{font-size:9px!important;letter-spacing:.04em!important;color:#8f9b98!important}
.vertex-v3 #app #powderCard .powder-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:9px;border-top:1px solid #ffffff10}
.vertex-v3 #app #powderCard .powder-card-foot>span{font-size:10.5px!important;color:#aab6b3!important}
.vertex-v3 #app #powderCard .powder-card-foot strong{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;color:#eef5f2;white-space:nowrap}
.vertex-v3 #app #powderCard .powder-card-foot .pro-badge{font-size:8px!important}
.vertex-v3 #app #powderAlert{--pw:#7fcdff;display:flex;align-items:center;gap:10px;width:100%;margin:2px 0 8px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--pw) 35%,transparent);border-radius:13px;background:linear-gradient(90deg,color-mix(in srgb,var(--pw) 20%,transparent),#ffffff05);color:#eef5f2;text-align:left}
.vertex-v3 #app #powderAlert[data-level="powder"]{--pw:#53d1ff}
.vertex-v3 #app #powderAlert[data-level="deep"]{--pw:#b9a2ff}
.vertex-v3 #app #powderAlert .powder-alert-icon{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--pw) 22%,transparent);color:var(--pw)}
.vertex-v3 #app #powderAlert .powder-alert-icon .ui-icon{width:17px;height:17px}
.vertex-v3 #app #powderAlert .powder-alert-text{display:grid;flex:1;min-width:0;gap:1px}
.vertex-v3 #app #powderAlert b{font-size:12.5px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vertex-v3 #app #powderAlert small{font-size:10.5px;color:#c6d6de;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vertex-v3 #app #powderAlert i{font-style:normal;font-size:16px;color:#c6d0cd}
@media(max-width:759px){
  .vertex-v3 #app[data-section] .place-card.collapsed:has(#powderAlert:not([hidden])){max-height:142px!important}
  .vertex-v3 #app[data-section] .place-card.collapsed:has(#powderAlert:not([hidden])) .place-card-content{max-height:126px!important}
}

/* ---------- Avalanche bulletin: no bulletin ----------
   Explain why (season, coverage, connection) instead of a bare "No bulletin". */
.vertex-v3 #app .avalanche-empty{display:flex!important;align-items:flex-start;gap:13px;padding:15px 14px!important;border:1px solid #ffffff12!important;border-radius:16px!important;background:linear-gradient(180deg,#ffffff0a,#ffffff04)!important}
.vertex-v3 #app .avalanche-empty .avalanche-empty-icon{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:#ffffff0d;color:#c6d0cd}
.vertex-v3 #app .avalanche-empty[data-kind="season"] .avalanche-empty-icon{background:#7fcdff1f;color:#9fd8ff}
.vertex-v3 #app .avalanche-empty[data-kind="uncovered"] .avalanche-empty-icon,.vertex-v3 #app .avalanche-empty[data-kind="unavailable"] .avalanche-empty-icon{background:#ffab5e1f;color:#ffc48e}
.vertex-v3 #app .avalanche-empty .avalanche-empty-icon .ui-icon{width:21px;height:21px}
.vertex-v3 #app .avalanche-empty>div{display:grid;gap:4px;min-width:0}
.vertex-v3 #app .avalanche-empty b{font-size:15px!important;font-weight:750!important;color:#eef5f2!important}
.vertex-v3 #app .avalanche-empty p{margin:0;font-size:12px;line-height:1.45;color:#aab6b3}

/* ---------- Avalanche chip on the map ----------
   One pill like the other map controls: a label over the level (or why there is none).
   It steps aside while the bulletin sheet is open, so only one bulletin surface shows. */
.vertex-v3 #app .avalanche-chip{
  min-height:46px!important;padding:5px 16px 5px 5px!important;gap:10px!important;border-radius:999px!important;
  max-width:min(250px,calc(100vw - 96px))!important;
}
.vertex-v3 #app .avalanche-chip .avalanche-level.small{width:36px;height:36px;border-radius:50%;font-size:16px;border:0;box-shadow:inset 0 0 0 1px #00000026}
.vertex-v3 #app .avalanche-chip-icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:#ffffff0f;color:#aebfc4;box-shadow:inset 0 0 0 1px #ffffff14}
.vertex-v3 #app .avalanche-chip-icon .ui-icon{width:19px;height:19px}
.vertex-v3 #app .avalanche-chip>span:last-child{gap:2px}
.vertex-v3 #app .avalanche-chip small{order:-1;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8d9c9f}
.vertex-v3 #app .avalanche-chip b{font-size:14px;font-weight:750;letter-spacing:-.01em;color:#eef4f1}
.vertex-v3 #app .avalanche-chip[data-empty="true"] b{color:#d5dfdf}
.vertex-v3 #app .avalanche-chip:focus:not(:focus-visible){outline:none}
.vertex-v3 #app:has(.avalanche-sheet:not([hidden])) .avalanche-chip{display:none!important}
/* With the tracks bar showing, the avalanche chip sits under its chip row instead of on top of it. */
@media(max-width:759px){
  .vertex-v3 #app:has(.community-map-bar:not([hidden])) .avalanche-chip{top:calc(var(--v3-mobile-top) + 104px)!important}
}
@media(min-width:760px){
  .vertex-v3 #app:has(.community-map-bar:not([hidden])) .avalanche-chip{top:128px!important}
}
/* ---------- Mobile: map legends stack above the docked card ----------
   Everything a layer adds at the bottom of the map (Slope/Aspect legend, Sun slider, Wind loading
   and Best snow pills) sits in one stack directly above the place card or the open track card,
   never between the card and the menu bar. The map attribution moves above the stack. */
@media(max-width:759px){
  .vertex-v3 #app{
    --legend-floor:calc(var(--v3-content-bottom) + var(--place-card-current-h,0px) + 8px);
    --legend-terrain:0px;--legend-sun:0px;--legend-wind:0px;--legend-best:0px;
  }
  .vertex-v3 #app:has(.route-detail.mobile-map-preview:not([hidden])){--legend-floor:calc(var(--v3-content-bottom) + var(--map-preview-h) + 8px)}
  .vertex-v3 #app:is(:has(.slope-legend.show),:has(.aspect-legend.show)){--legend-terrain:42px}
  .vertex-v3 #app:has(.sun-panel.show){--legend-sun:64px}
  .vertex-v3 #app:has(#windLoadLegend.show){--legend-wind:56px}
  .vertex-v3 #app:has(#bestSnowLegend.show){--legend-best:56px}
  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]):has(.slope-legend.show) .place-card,
  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]):has(.aspect-legend.show) .place-card,
  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]):has(.sun-panel.show) .place-card,
  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]):has(.sun-panel.show):has(.slope-legend.show) .place-card,
  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]):has(.sun-panel.show):has(.aspect-legend.show) .place-card{
    bottom:var(--v3-content-bottom)!important;
  }
  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]) .slope-legend,
  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]) .aspect-legend{
    bottom:var(--legend-floor)!important;
    border-radius:999px!important;
  }
  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]) .sun-panel,
  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]):has(.slope-legend.show) .sun-panel,
  .vertex-v3 #app:is([data-section="explore"],[data-section="record"]):has(.aspect-legend.show) .sun-panel{
    bottom:calc(var(--legend-floor) + var(--legend-terrain))!important;
  }
  .vertex-v3 #app #windLoadLegend{left:9px;right:9px;max-width:none;bottom:calc(var(--legend-floor) + var(--legend-terrain) + var(--legend-sun))}
  .vertex-v3 #app #bestSnowLegend,.vertex-v3 #app:has(#windLoadLegend.show) #bestSnowLegend.show{left:9px;right:9px;max-width:none;transform:none;bottom:calc(var(--legend-floor) + var(--legend-terrain) + var(--legend-sun) + var(--legend-wind))}
  .vertex-v3 #app[data-place-docked] .maplibregl-ctrl-bottom-right{
    bottom:calc(var(--legend-floor) - 8px + var(--legend-terrain) + var(--legend-sun) + var(--legend-wind) + var(--legend-best))!important;
  }
  /* Wind loading and best snow start as small pills, side by side when both are on;
     a tap opens both as the full legends (#app.cond-legends-open). */
  .vertex-v3 #app .wind-load-legend{pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .vertex-v3 #app:not(.cond-legends-open):has(#windLoadLegend.show){--legend-wind:42px}
  .vertex-v3 #app:not(.cond-legends-open):has(#bestSnowLegend.show){--legend-best:42px}
  .vertex-v3 #app:not(.cond-legends-open):has(#windLoadLegend.show):has(#bestSnowLegend.show){--legend-best:0px}
  .vertex-v3 #app:not(.cond-legends-open) #windLoadLegend,
  .vertex-v3 #app:not(.cond-legends-open) #bestSnowLegend{right:auto;max-width:calc(100vw - 18px);min-height:36px;padding:3px 12px 3px 3px;gap:7px}
  .vertex-v3 #app:not(.cond-legends-open) .wind-load-legend>span:not(.wind-load-arrow){display:none}
  .vertex-v3 #app:not(.cond-legends-open) .wind-load-legend .cond-short{display:block}
  .vertex-v3 #app:not(.cond-legends-open) .wind-load-arrow{width:28px;height:28px}
  .vertex-v3 #app:not(.cond-legends-open) .wind-load-arrow svg{width:15px;height:15px}
  .vertex-v3 #app:not(.cond-legends-open):has(#bestSnowLegend.show) #windLoadLegend.show{right:calc(50% + 3px)}
  .vertex-v3 #app:not(.cond-legends-open):has(#windLoadLegend.show) #bestSnowLegend.show{left:calc(50% + 3px);right:9px;bottom:calc(var(--legend-floor) + var(--legend-terrain) + var(--legend-sun))}
}
/* Desktop: the same stack above the mountain card, lined up with its edges and width. */
@media(min-width:760px){
  .vertex-v3 #app{
    --legend-floor:calc(var(--place-card-current-h,214px) + 28px);
    --legend-terrain:0px;--legend-sun:0px;--legend-wind:0px;
  }
  .vertex-v3 #app:is(:has(.slope-legend.show),:has(.aspect-legend.show)){--legend-terrain:44px}
  .vertex-v3 #app:has(.sun-panel.show){--legend-sun:66px}
  .vertex-v3 #app:has(#windLoadLegend.show){--legend-wind:58px}
  .vertex-v3 #app[data-section="explore"] .slope-legend,
  .vertex-v3 #app[data-section="explore"] .aspect-legend{
    left:var(--place-card-left,var(--v3-desktop-left))!important;width:var(--place-card-w,360px)!important;max-width:none!important;
    bottom:var(--legend-floor)!important;justify-content:center!important;border-radius:999px!important;
  }
  .vertex-v3 #app[data-section="explore"] .sun-panel,
  .vertex-v3 #app[data-section="explore"]:has(.slope-legend.show) .sun-panel,
  .vertex-v3 #app[data-section="explore"]:has(.aspect-legend.show) .sun-panel{
    left:var(--place-card-left,var(--v3-desktop-left))!important;width:var(--place-card-w,360px)!important;
    bottom:calc(var(--legend-floor) + var(--legend-terrain))!important;
  }
  .vertex-v3 #app .wind-load-legend{left:var(--place-card-left,var(--v3-desktop-left));width:var(--place-card-w,360px);max-width:none}
  .vertex-v3 #app #windLoadLegend{bottom:calc(var(--legend-floor) + var(--legend-terrain) + var(--legend-sun))}
  .vertex-v3 #app #bestSnowLegend{bottom:calc(var(--legend-floor) + var(--legend-terrain) + var(--legend-sun) + var(--legend-wind))}
}
/* Weather is its own view: the Tracks chip row and the condition pills belong to the map. */
.vertex-v3 #app:has(#weatherView:not([hidden])) .community-map-bar,
.vertex-v3 #app:has(#weatherView:not([hidden])) .wind-load-legend{display:none!important}
/* =========================================================
   Weather map v2: one top bar (back · layer and place · close), one row of layer pills,
   and one bottom card with the legend, play and the time slider. Replaces the old
   weather-map-nav / -head / -layers / weather-timeline controls.
   ========================================================= */
.vertex-v3 #app .weather-map-view .wxm-top{position:absolute;z-index:30;top:calc(10px + env(safe-area-inset-top,0px));left:12px;right:12px;display:grid;gap:8px;pointer-events:none}
.vertex-v3 #app .wxm-bar,.vertex-v3 #app .wxm-layers,.vertex-v3 #app .wxm-bottom{pointer-events:auto;border:1px solid #ffffff17;background:linear-gradient(180deg,#19262ceb,#0d1519ee);box-shadow:inset 0 1px 0 #ffffff14,0 10px 26px #00000073;backdrop-filter:blur(16px)}
.vertex-v3 #app .wxm-bar{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;gap:8px;padding:5px;border-radius:18px}
.vertex-v3 #app .wxm-icon{width:40px;height:40px;min-width:40px;display:grid;place-items:center;padding:0;border:1px solid #ffffff17;border-radius:50%;background:#ffffff0d;color:#eef4f1;cursor:pointer}
.vertex-v3 #app .wxm-icon .ui-icon{width:18px;height:18px}
.vertex-v3 #app .wxm-title{display:grid;gap:1px;min-width:0;text-align:center}
.vertex-v3 #app .wxm-title small{font-size:8px;font-weight:900;letter-spacing:.12em;color:#8fa09c}
.vertex-v3 #app .wxm-title b{font-size:14px;font-weight:750;color:#eef4f1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vertex-v3 #app .wxm-layers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border-radius:999px;justify-self:center;width:min(100%,420px)}
.vertex-v3 #app .wxm-layers button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:34px;padding:0 8px;border:0;border-radius:999px;background:transparent;color:#b9c6c3;font-size:12px;font-weight:750;cursor:pointer}
.vertex-v3 #app .wxm-layers button .ui-icon{width:15px;height:15px}
.vertex-v3 #app .wxm-layers button.active{background:linear-gradient(180deg,#ffffff,#e3ebe8);color:#0f181b;box-shadow:0 2px 8px #0005}
.vertex-v3 #app .wxm-bottom{position:absolute;z-index:30;left:12px;right:12px;bottom:12px;display:grid;gap:8px;padding:10px 14px 8px;border-radius:20px}
.vertex-v3 #app .wxm-legend{display:grid;gap:3px}
.vertex-v3 #app .wxm-legend>i{display:block;height:6px;border-radius:999px;background:linear-gradient(90deg,#9be7ff,#3bb7ff 22%,#30d158 42%,#ffd60a 62%,#ff6b2c 80%,#d63bd6)}
.vertex-v3 #app .wxm-legend[data-layer="temp"]>i{background:linear-gradient(90deg,#6a3fd1,#3a6fe0 20%,#3fc1e8 38%,#e8f6f1 50%,#ffd24a 64%,#ff8a2a 80%,#e0322a)}
.vertex-v3 #app .wxm-legend[data-layer="wind"]>i{background:linear-gradient(90deg,#3c8c5a,#50dc78 35%,#ffd24a 65%,#ff4646)}
.vertex-v3 #app .wxm-legend[data-layer="precip"]>i{background:linear-gradient(90deg,#7fd8ff,#3f7cff 50%,#b45cff)}
.vertex-v3 #app .wxm-legend>div{display:flex;justify-content:space-between;font-size:9px;font-weight:700;color:#8fa09c}
.vertex-v3 #app .wxm-time-row{display:flex;align-items:center;gap:10px}
.vertex-v3 #app .wxm-play{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:linear-gradient(180deg,#ffffff,#e3ebe8);color:#0f181b;cursor:pointer}
.vertex-v3 #app .wxm-play .ui-icon{width:17px;height:17px}
.vertex-v3 #app .wxm-play .wxm-pause-icon,.vertex-v3 #app .wxm-play[aria-pressed="true"] .wxm-play-icon{display:none}
.vertex-v3 #app .wxm-play[aria-pressed="true"] .wxm-pause-icon{display:block}
.vertex-v3 #app .wxm-time{display:grid;gap:1px;min-width:0}
.vertex-v3 #app .wxm-time b{font-size:16px;font-weight:800;color:#eef4f1}
.vertex-v3 #app .wxm-time span{font-size:11px;color:#9eaaa8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vertex-v3 #app .wxm-slider{position:relative;padding-bottom:14px}
.vertex-v3 #app .wxm-slider input{width:100%;margin:0;accent-color:#eef4f1}
.vertex-v3 #app .wxm-days{position:absolute;left:8px;right:8px;bottom:0;height:12px}
.vertex-v3 #app .wxm-days span{position:absolute;transform:translateX(-50%);font-size:9px;font-weight:700;color:#7e8d89;white-space:nowrap}
.vertex-v3 #app .wxm-days span:before{content:"";position:absolute;left:50%;top:-6px;width:1px;height:4px;background:#ffffff40}
.vertex-v3 #app .wxm-days i{position:absolute;top:-8px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#ffd76a}
.vertex-v3 #app .weather-map-view{--wxm-bottom-h:150px}
.vertex-v3 #app[data-section] .weather-view .weather-map-view .weather-map-status{z-index:31!important;top:calc(118px + env(safe-area-inset-top,0px))!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;max-width:calc(100% - 24px)!important}
@media(min-width:760px){.vertex-v3 #app[data-section] .weather-view .weather-map-view .weather-map-status{top:132px!important;left:18px!important;transform:none!important}}
/* Forecast v2: compact hourly cards and a two-line 7-day list on phones. */
.vertex-v3 #app[data-section] .weather-view .weather-hour-card{min-height:0!important;padding:9px 6px!important;gap:3px!important;justify-items:center!important;align-content:start!important}
.vertex-v3 #app[data-section] .weather-view .weather-hour-card>strong{display:none!important}
.vertex-v3 #app[data-section] .weather-view .weather-hour-card .weather-mini-icon{margin:2px 0!important}
.vertex-v3 #app[data-section] .weather-view .weather-hour-card>span:not(.weather-mini-icon),.vertex-v3 #app[data-section] .weather-view .weather-hour-card>em{font-size:10px!important;line-height:1.25!important;color:#9eaaa8!important;margin:0!important}
@media(max-width:759px){
  .vertex-v3 #app[data-section] .weather-view .weather-hour-card{width:76px!important;min-width:76px!important;flex:0 0 76px!important}
  .vertex-v3 #app[data-section] .weather-view .weather-hour-card>em{white-space:normal!important;text-align:center!important}
  .vertex-v3 #app[data-section] .weather-view .weather-days{gap:6px!important}
  .vertex-v3 #app[data-section] .weather-view .weather-days article{display:grid!important;grid-template-columns:auto auto minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;align-items:center!important;column-gap:12px!important;row-gap:4px!important;min-height:0!important;padding:10px 12px!important}
  .vertex-v3 #app[data-section] .weather-view .weather-days article>div{grid-column:1/4!important;grid-row:1!important;display:flex!important;align-items:baseline!important;gap:8px!important;min-width:0!important}
  .vertex-v3 #app[data-section] .weather-view .weather-days article>div b{font-size:14px!important;display:inline-flex!important;align-items:center!important;gap:7px!important}
  .vertex-v3 #app[data-section] .weather-view .weather-days article>div small{font-size:10px!important;color:#8d9a97!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .vertex-v3 #app[data-section] .weather-view .weather-days article>strong{grid-column:4!important;grid-row:1/3!important;font-size:18px!important;text-align:right!important;white-space:nowrap!important}
  .vertex-v3 #app[data-section] .weather-view .weather-days article>em,.vertex-v3 #app[data-section] .weather-view .weather-days article>span,.vertex-v3 #app[data-section] .weather-view .weather-days article>small{display:block!important;grid-row:2!important;margin:0!important;font-size:10.5px!important;font-style:normal!important;color:#aab6b3!important;white-space:nowrap!important;text-align:left!important}
  .vertex-v3 #app[data-section] .weather-view .weather-days article>em{grid-column:1!important}
  .vertex-v3 #app[data-section] .weather-view .weather-days article>span{grid-column:2!important}
  .vertex-v3 #app[data-section] .weather-view .weather-days article>span:before{content:"Wind ";color:#7e8d89}
  .vertex-v3 #app[data-section] .weather-view .weather-days article>small{grid-column:3!important}
  .vertex-v3 #app[data-section] .weather-view .weather-days article>small:after{content:" chance";color:#7e8d89}
  /* A solid sticky header and tab row: nothing shows through between them. */
  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-view>.weather-head{background:#0b1216!important;min-height:74px!important}
  .vertex-v3 #app[data-explore-view="weather-forecast"] .weather-view>.weather-tabs{top:74px!important;background:#0f181c!important;box-shadow:0 -8px 0 #0b1216,0 8px 14px #0b1216cc!important}
}
/* MapTiler's own logo and attribution sit just above the bottom card. */
.vertex-v3 #app #weatherMapCanvas .maplibregl-ctrl-bottom-left,.vertex-v3 #app #weatherMapCanvas .maplibregl-ctrl-bottom-right{bottom:var(--wxm-bottom-h)}
@media(min-width:760px){
  .vertex-v3 #app .weather-map-view .wxm-top{left:18px;right:auto;width:400px;top:18px}
  .vertex-v3 #app .wxm-layers{justify-self:stretch;width:auto}
  .vertex-v3 #app .wxm-bottom{left:50%;right:auto;bottom:18px;width:min(560px,calc(100% - 36px));transform:translateX(-50%)}
}
/* On phones the Explore map's attribution must not show through under the weather view. */
@media(max-width:759px){
  .vertex-v3 #app:has(#weatherView:not([hidden])) #map .maplibregl-ctrl-bottom-right,
  .vertex-v3 #app:has(#weatherView:not([hidden])) #map .maplibregl-ctrl-bottom-left{display:none}
  /* Bottom sheets cover the map's attribution instead of the attribution covering their rows. */
  .vertex-v3 #app:has(#layerPanel:not([hidden])) #map .maplibregl-ctrl-bottom-right,
  .vertex-v3 #app:has(#todayBriefSheet:not([hidden])) #map .maplibregl-ctrl-bottom-right,
  .vertex-v3 #app:has(#avalancheSheet:not([hidden])) #map .maplibregl-ctrl-bottom-right{display:none}
}
.vertex-v3 #app [hidden],.vertex-v3 #app button[hidden]{display:none!important}

/* Alps library: open ski touring & off-piste tracks inside Discover. */
.vertex-v3 #app .alps-library{margin-bottom:28px;padding-top:22px;border-top:1px solid #ffffff10}
.vertex-v3 #app .alps-library-filters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:2px 0 4px}
.vertex-v3 #app .alps-library-filters::-webkit-scrollbar{display:none}
.vertex-v3 #app .alps-library-filters button{flex:0 0 auto;height:31px;padding:0 12px;border:1px solid #ffffff14;border-radius:999px;background:#ffffff07;color:#8f9b98;font-size:10px;font-weight:800}
.vertex-v3 #app .alps-library-filters button.active{background:#eef5f2;color:#102027;border-color:#eef5f2}
.vertex-v3 #app .community-route-card.library{border-left:3px solid #6cc4ff}
.vertex-v3 #app .community-route-card.library-offpiste{border-left-color:#ffa24c}
.vertex-v3 #app .community-route-card.library-trail{border-left-color:#c39bff}
.vertex-v3 #app .alps-library-more{width:100%;min-height:42px;margin-top:8px;border:1px solid #ffffff16;border-radius:12px;background:#ffffff09;color:#e9efed;font-size:11px;font-weight:750}
.vertex-v3 #app .alps-library-more[hidden]{display:none}
.vertex-v3 #app .alps-library-credit{margin:12px 2px 0;color:#7f8e8b;font-size:10px;line-height:1.5}
.vertex-v3 #app .alps-library-credit a,.vertex-v3 #app .route-library-source{color:#a9d8ff}
.vertex-v3 #app .route-library-source{display:block;margin-top:6px;font-size:11px;font-weight:700;text-decoration:none}
.vertex-v3 #app .route-library-source[hidden]{display:none}
/* Tracks layer on the Explore map: the filter chips, then the count and the way to the list, under the search
   bar and left of the map tools column. */
.vertex-v3 #app .tracks-bar{flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;gap:6px}
.vertex-v3 #app .tracks-bar .tracks-bar-count{justify-self:start!important;width:max-content!important;padding:4px 10px!important;border:1px solid #ffffff17!important;border-radius:999px!important;background:#10181bdd!important;backdrop-filter:blur(12px)!important;color:#edf3f1!important;font-size:11px!important;font-weight:700;white-space:nowrap}
.vertex-v3 #app .tracks-bar .tracks-bar-count[hidden]{display:none!important}
.community-map-filters{display:flex;align-items:center;gap:6px;max-width:100%;overflow:hidden;pointer-events:none}
.vertex-v3 #app .community-map-filters .tracks-list-chip{display:inline-flex!important;align-items:center;gap:5px;width:auto!important;min-width:0!important;height:30px!important;min-height:30px!important;padding:0 11px!important;border-radius:999px!important;font-size:10px!important}
.community-map-filters .tracks-list-chip b{padding:1px 6px;border-radius:999px;background:#ffffff1f;color:#edf3f1;font-size:9px;font-weight:800}
.community-map-filters .tracks-list-chip b[hidden]{display:none}
.community-map-filters button{flex:0 0 auto;pointer-events:auto;height:30px;padding:0 11px;border:1px solid #ffffff18;border-radius:999px;background:#0b1215d9;color:#c6d0cd;font-size:10px;font-weight:800;backdrop-filter:blur(14px)}
.community-map-filters button.active{background:#eef5f2;color:#102027;border-color:#eef5f2}
.vertex-v3 #app .community-map-filters.compact .chip-short{display:inline!important}
.vertex-v3 #app .community-map-filters.compact .chip-long,.vertex-v3 #app .community-map-filters .chip-short{display:none!important}
.vertex-v3 #app .community-map-filters button>span{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;min-width:0!important;height:auto!important;color:inherit!important}
.vertex-v3 #app .community-map-filters.compact{gap:5px}
.vertex-v3 #app .community-map-filters.compact button{padding:0 9px!important}
.vertex-v3 #app .map-tools .tracks-toggle{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0!important}
.vertex-v3 #app .map-tools .tracks-toggle span{font-size:14px;line-height:1}
.vertex-v3 #app .map-tools .tracks-toggle small{font-size:8px;font-weight:800;letter-spacing:.02em;line-height:1}
.vertex-v3 #app .map-tools .tracks-toggle.active{background:#eef5f2!important;color:#102027!important}
/* An open track card takes the place card's spot at the bottom of the map. */
.vertex-v3 #app .place-card.track-card-open{display:none!important}
/* Today: one chip that colours the tracks by today's bulletin on their terrain (green, yellow, red). */
.vertex-v3 #app .community-map-filters .tracks-today-chip{display:inline-flex!important;align-items:center;gap:6px}
.vertex-v3 #app .community-map-filters .tracks-today-chip>i{width:16px;height:6px;border-radius:999px;background:linear-gradient(90deg,#6fdc8c 0 33%,#ffd23f 33% 66%,#ff5a4f 66%);box-shadow:0 0 0 1px #00000040}
.vertex-v3 #app .community-map-filters .tracks-today-chip.active{background:#eef5f2;color:#102027;border-color:#eef5f2}
/* The Today line on a library track card. */
.vertex-v3 #app .route-today{display:flex;align-items:center;gap:10px;margin:10px 0 4px;padding:9px 11px;border:1px solid #ffffff12;border-radius:12px;background:#ffffff07}
.vertex-v3 #app .route-today[hidden]{display:none}
.vertex-v3 #app .route-today>i{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--today,#8b989b);box-shadow:0 0 0 3px color-mix(in srgb,var(--today,#8b989b) 25%,transparent)}
.vertex-v3 #app .route-today>span{display:grid;gap:2px;min-width:0}
.vertex-v3 #app .route-today small{font-size:8px;font-weight:900;letter-spacing:.1em;color:#7e8d89}
.vertex-v3 #app .route-today b{font-size:12px;font-weight:700;color:#e9efed;line-height:1.35}
.vertex-v3 #app .route-today[data-grade="low"]{--today:#6fdc8c}
.vertex-v3 #app .route-today[data-grade="mid"]{--today:#ffd23f}
.vertex-v3 #app .route-today[data-grade="high"]{--today:#ff5a4f}
/* Snow by aspect: one line inside the powder card, with a small rose (north up). */
.vertex-v3 #app .snow-aspects{display:flex;align-items:center;gap:11px;margin:10px 0 2px;padding:9px 10px;border-radius:12px;background:#ffffff08;border:1px solid #ffffff0f;text-align:left}
.vertex-v3 #app .snow-aspects[hidden]{display:none}
.vertex-v3 #app .snow-aspects[data-state="none"] .snow-rose{display:none}
.vertex-v3 #app .snow-aspects>span:last-child{display:grid;gap:2px;min-width:0}
.vertex-v3 #app .snow-aspects small{font-size:8px;font-weight:900;letter-spacing:.1em;color:#7e8d89}
.vertex-v3 #app .snow-aspects b{font-size:12px;font-weight:750;color:#eef4f1;line-height:1.3}
.vertex-v3 #app .snow-aspects em{font-style:normal;font-size:10px;color:#9eaaa8}
.vertex-v3 #app .snow-aspects em:empty{display:none}
.vertex-v3 #app .snow-rose{flex:0 0 auto;width:44px;height:44px}
.vertex-v3 #app .snow-rose svg{width:44px;height:44px;display:block}
.vertex-v3 #app .snow-rose path{stroke:#0f181c;stroke-width:1.2;fill:#2a383d}
.vertex-v3 #app .snow-rose path[data-q="powder"]{fill:#53d1ff}
.vertex-v3 #app .snow-rose path[data-q="settled"]{fill:#8fb9c9}
.vertex-v3 #app .snow-rose path[data-q="wind"]{fill:#b9a2ff}
.vertex-v3 #app .snow-rose path[data-q="sun"]{fill:#ffb35c}
.vertex-v3 #app .snow-rose path[data-q="crust"]{fill:#e07a5f}
.vertex-v3 #app .snow-rose circle{fill:#0f181c}
.vertex-v3 #app .snow-rose text{font-size:6px;font-weight:900;fill:#0f181c;text-anchor:middle}
.vertex-v3 #app #powderCard{grid-template-columns:minmax(0,1fr)!important;justify-items:stretch!important}
/* Phones: the chip row scrolls sideways (with Today it no longer fits next to the map tools),
   short labels, and a fade shows there is more. */
.vertex-v3 #app .community-map-filters.scrolls{overflow-x:auto!important;pointer-events:auto;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);padding-right:22px}
.vertex-v3 #app .community-map-filters.scrolls::-webkit-scrollbar{display:none}
.vertex-v3 #app .community-map-filters.scrolls.at-end{-webkit-mask-image:none;mask-image:none}
/* Wind loading: violet lee slopes on the map and one pill that says which way the wind blew. */
.vertex-v3 #app .wind-load-legend{position:fixed;z-index:35;left:var(--v3-desktop-left,20px);bottom:calc(var(--place-card-current-h,214px) + 28px);display:none;align-items:center;gap:10px;max-width:min(330px,calc(100vw - 20px));padding:7px 14px 7px 7px;border:1px solid #ffffff17;border-radius:999px;background:linear-gradient(180deg,#19262ceb,#0d1519ee);box-shadow:inset 0 1px 0 #ffffff14,0 10px 26px #00000073;pointer-events:none}
.vertex-v3 #app .wind-load-legend.show{display:flex}
.vertex-v3 #app .wind-load-arrow{--wind-to:0deg;flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#9268ff;color:#fff}
.vertex-v3 #app .wind-load-arrow[hidden]{display:none}
.vertex-v3 #app .wind-load-arrow svg{width:18px;height:18px;transform:rotate(var(--wind-to))}
.vertex-v3 #app .wind-load-legend>span:not(.wind-load-arrow){display:grid;gap:1px;min-width:0}
.vertex-v3 #app .wind-load-legend small{font-size:8px;font-weight:900;letter-spacing:.1em;color:#a995ff}
.vertex-v3 #app .wind-load-legend b{font-size:12px;font-weight:750;color:#eef4f1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vertex-v3 #app .wind-load-legend em{font-style:normal;font-size:10px;color:#9eaaa8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vertex-v3 #app .wind-load-legend em:empty{display:none}
.vertex-v3 #app .best-snow-legend small{color:#7fd8ff}
.vertex-v3 #app .best-snow-dot{background:#2aa6d6}
.vertex-v3 #app .wind-load-legend .cond-short{display:none;min-width:0;font-size:12px;font-weight:750;color:#eef4f1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* A small warning on the wind pill: drifted snow forms slabs. */
.vertex-v3 #app .wind-load-warn{display:inline-flex;align-items:center;gap:4px;color:#ffc857!important}
.vertex-v3 #app .wind-load-warn svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* Today's brief: a small labelled button beside the place name, and a short sheet. */
.vertex-v3 #app[data-section] .place-card.place-card .place-card-title:has(.today-brief-button){grid-template-columns:minmax(0,1fr) auto auto!important}
.vertex-v3 #app[data-section] .place-card.place-card .place-card-title .favorite-place{grid-column:3!important}
.vertex-v3 #app .today-brief-button{grid-column:2;justify-self:end;display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 10px 0 8px;border:1px solid #ffd76a55;border-radius:999px;background:#ffd76a1a;color:#ffe08a;font-size:11px;font-weight:800;letter-spacing:.01em;white-space:nowrap;cursor:pointer}
.vertex-v3 #app .today-brief-button .ui-icon{width:15px;height:15px}
.vertex-v3 #app .today-brief-button i{font-style:normal;font-size:12px;opacity:.75;margin-left:1px}
.vertex-v3 #app .today-brief-button:hover{background:#ffd76a2b}
.vertex-v3 #app .today-brief-button:focus-visible{outline:2px solid #ffd76a;outline-offset:2px}
.vertex-v3 #app .today-brief-body{display:grid;gap:9px}
.vertex-v3 #app .today-brief-sheet .activities-head h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vertex-v3 #app .tb-loading,.vertex-v3 #app .tb-empty{margin:0;font-size:11px;color:#9eaaa8}
.vertex-v3 #app .tb-choice{margin:0;padding:9px 11px;border-radius:12px;background:#ffd76a14;border:1px solid #ffd76a33;color:#fff1c4;font-size:12px;font-weight:750;line-height:1.35}
.vertex-v3 #app .tb-row{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border:1px solid #ffffff0d;border-radius:12px;background:#ffffff05}
.vertex-v3 #app .tb-row>div{display:grid;gap:2px;min-width:0}
.vertex-v3 #app .tb-row b{font-size:12px;color:#eef4f1}
.vertex-v3 #app .tb-row small{font-size:10px;line-height:1.35;color:#9eaaa8}
.vertex-v3 #app .tb-row .avalanche-level.small{flex:0 0 24px}
.vertex-v3 #app .tb-icon{flex:0 0 24px;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:#53d1ff22;color:#7fd8ff}
.vertex-v3 #app .tb-row[data-kind="light"] .tb-icon{background:#f6c95e22;color:#f6c95e}
.vertex-v3 #app .tb-icon .ui-icon{width:15px;height:15px}
.vertex-v3 #app .tb-lines{display:grid;gap:5px}
.vertex-v3 #app .tb-label{font-size:7px;font-weight:900;letter-spacing:.1em;color:#7e8d89}
.vertex-v3 #app .tb-line{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;padding:6px 10px;border:1px solid #ffffff10;border-radius:12px;background:#ffffff07;color:inherit;text-align:left;cursor:pointer}
.vertex-v3 #app .tb-line i{flex:0 0 10px;width:10px;height:10px;border-radius:50%}
.vertex-v3 #app .tb-line>span{display:grid;gap:1px;min-width:0;flex:1}
.vertex-v3 #app .tb-line b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vertex-v3 #app .tb-line small{font-size:10px;color:#9eaaa8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vertex-v3 #app .tb-line em{font-style:normal;color:#9eaaa8}
.vertex-v3 #app .tb-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:9px;border-top:1px solid #ffffff12;font-size:9px;line-height:1.4;color:#8d9a97}
.vertex-v3 #app .tb-foot button{flex:0 0 auto;min-height:34px;padding:0 11px;border-radius:10px;border:0;background:#eef4f1;color:#10191c;font-weight:800;font-size:11px;cursor:pointer}
/* Privacy Policy links: under the sign-in tabs and in Settings → Account. */
.auth-gate-legal{margin:12px 0 0;text-align:center;font-size:12px;color:#9eaaa8}
.auth-gate-legal a{color:#dfe9e6;text-decoration:underline;text-underline-offset:2px}
.vertex-v3 #app .settings-account .account-link{display:flex;align-items:center;justify-content:center;text-decoration:none}
/* Measured snow from the nearest open-data station, under the elevation cards. */
.vertex-v3 #app .weather-station{display:flex;align-items:center;gap:12px;margin:8px auto 0;padding:10px 13px;border:1px solid #ffffff12;border-radius:14px;background:#111c20;color:#a7b2af;font-size:11px;line-height:1.35}
.vertex-v3 #app .weather-station>span:first-child{flex:0 0 auto;display:grid;gap:2px}
.vertex-v3 #app .weather-station small{color:#84928f;font-size:8px;font-weight:850;letter-spacing:.09em}
.vertex-v3 #app .weather-station b{color:#f4f7f6;font-size:17px;letter-spacing:-.02em}
.vertex-v3 #app .weather-station>span:last-child{min-width:0}
.vertex-v3 #app .weather-station em{display:block;margin-top:2px;color:#6f7d7a;font-style:normal;font-size:9px}
.vertex-v3 #app .weather-station[hidden]{display:none}
.vertex-v3 #app .weather-source a{color:inherit;text-decoration:underline;text-underline-offset:2px}