/* ---------- Desktop (Bjorn 2026-10-19): a docked panel on the left, the map fills the rest ----------
   On a computer the app is for exploring and planning, not recording. One fixed panel holds the brand,
   a search that is always there, the tabs Explore · Plan · My routes and the open card; no card floats over
   the map. « hides the panel for a full-width map. Ski log, friends and settings live behind the account
   button. The planner's elevation profile runs along the foot of the map. Loaded after every other sheet so
   it wins over the earlier floating-card desktop rules. */
.vertex-v3 #app .desk-expand { display:none; }
@media (min-width:900px){
  .vertex-v3 #app#app#app#app#app#app#app#app#app { --dp:380px; --dh:118px; --desk-g:16px; --desk-card-left:12px; --desk-card:calc(var(--dp) - 24px); --desk-w:var(--dp); --desk-profile:150px; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app.desk-collapsed { --dp:0px; --desk-w:0px; }

  /* The panel. */
  .vertex-v3 #app#app#app#app#app#app#app#app#app .desk-side { left:0; top:0; bottom:0; width:var(--dp); align-items:stretch; gap:0; padding:0; border:0; border-right:1px solid #ffffff14; border-radius:0; background:var(--ui-base,#16181c); box-shadow:none; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app.desk-collapsed .desk-side { display:none; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app .desk-head { display:flex; align-items:center; gap:10px; padding:14px 16px 10px; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app .desk-brand { flex:none; width:30px; height:22px; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app .desk-search { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px; height:40px; padding:0 10px 0 12px; border:1px solid #ffffff12; border-radius:12px; background:var(--ui-raised,#2a2e35); color:var(--ui-muted,#9aa3ad); font:500 14px/1 system-ui,sans-serif; text-align:left; cursor:text; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app .desk-search span { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app .desk-search .ui-icon { width:18px; height:18px; flex:none; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app .desk-search kbd { flex:none; padding:1px 6px; border:1px solid #ffffff2a; border-radius:5px; font:500 11px/1.4 system-ui,sans-serif; color:var(--ui-muted,#9aa3ad); }
  .vertex-v3 #app#app#app#app#app#app#app#app#app .desk-search:hover { border-color:#ffffff30; color:var(--ui-text,#f1f3f5); }
  .vertex-v3 #app#app#app#app#app#app#app#app#app .desk-collapse,.vertex-v3 #app#app#app#app#app#app#app#app#app .desk-expand { flex:none; width:34px; height:34px; border:0; border-radius:10px; background:var(--ui-surface,#1e2126); color:var(--ui-muted,#9aa3ad); font:600 16px/1 system-ui,sans-serif; cursor:pointer; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app .desk-collapse:hover { color:var(--ui-text,#f1f3f5); }
  .vertex-v3 #app#app#app#app#app#app#app#app#app.desk-collapsed .desk-expand { display:block; position:fixed; z-index:40; left:16px; top:16px; width:40px; height:40px; border:1px solid #ffffff1c; background:var(--ui-base,#16181c); color:var(--ui-text,#f1f3f5); box-shadow:0 8px 24px #0006; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app .desk-nav { flex-direction:row; gap:4px; width:auto; margin:0 16px; padding:4px!important; border-radius:12px; background:var(--ui-surface,#1e2126)!important; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app .desk-nav button { flex:1 1 0; height:36px; border-radius:9px; color:#aeb6bf; font-size:13px; font-weight:650; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app .desk-nav button[aria-selected="true"] { background:#3b82f6; color:#fff; box-shadow:none; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app .desk-nav button:hover:not([aria-selected="true"]) { color:var(--ui-text,#f1f3f5); background:#ffffff0a; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app .desk-empty { margin:28px 24px 0; color:var(--ui-muted,#9aa3ad); font-size:13px; line-height:1.45; text-align:center; }

  /* The map starts where the panel ends, so no card is ever over it. */
  .vertex-v3 #app#app#app#app#app#app#app#app#app #map { left:var(--dp)!important; right:0!important; width:auto!important; }

  /* Every card opens inside the panel, under the tabs, as tall as the panel. */
  .vertex-v3 #app#app#app#app#app#app#app#app#app :is(#findSheet,#routeDetail,#routePlanner,#youSheet,#exploreSheet,#activitiesSheet,#activityDetail,#compareSheet,#avalancheSheet,#todayBriefSheet,#communityView,#mapSheet[data-mode="home"]) {
    left:0!important; top:var(--dh)!important; bottom:0!important; width:var(--dp)!important; height:auto!important; max-height:none!important;
    border:0!important; border-right:1px solid #ffffff14!important; border-radius:0!important; background:var(--ui-base,#16181c)!important; box-shadow:none!important; padding-top:6px!important;
  }
  .vertex-v3 #app#app#app#app#app#app#app#app#app #mapSheet[data-mode="home"] #placeCard { max-height:100%!important; height:100%!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app.desk-collapsed :is(#findSheet,#routeDetail,#routePlanner,#youSheet,#exploreSheet,#activitiesSheet,#activityDetail,#compareSheet,#avalancheSheet,#todayBriefSheet,#communityView,#mapSheet[data-mode="home"],#placePeek,#mapFeatureCard,.spot-card) { display:none!important; }
  /* The area card belongs to the panel: while another card fills the panel, it waits instead of dropping onto the map. */
  .vertex-v3 #app#app#app#app#app#app#app#app#app #mapSheet[data-covered="true"] #placeCard { display:none!important; }
  /* Legends: a small card in the map's lower right corner, above the profile while planning. */
  .vertex-v3 #app#app#app#app#app#app#app#app#app #mapSheet[data-mode="rows"] { left:auto!important; right:16px!important; top:auto!important; bottom:16px!important; width:380px!important; transform:none!important; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app[data-route-planning]:has(#plannerElevation:not([hidden])) #mapSheet[data-mode="rows"] { bottom:calc(var(--desk-profile) + 16px)!important; }

  /* Previews open in the panel's lower part, never over the map. */
  .vertex-v3 #app#app#app#app#app#app#app#app#app :is(#placePeek,#mapFeatureCard,.spot-card) { left:12px!important; right:auto!important; bottom:12px!important; width:calc(var(--dp) - 24px)!important; z-index:45!important; }

  /* Map controls in one column on the right; Plan is a tab here, so its map button goes. */
  .vertex-v3 #app#app#app#app#app#app#app#app#app :is(#mapCorner .map-plan-oval,#dockPlan,#mapCreateTools) { display:none!important; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app #mapCorner .map-zoom-oval { display:flex!important; flex-direction:column; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app #mapCorner .map-zoom-oval button { width:40px; height:40px; border:0; background:transparent; color:inherit; font:500 22px/1 system-ui,sans-serif; cursor:pointer; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app #avalancheChip { left:calc(var(--dp) + 16px)!important; right:auto!important; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app.desk-collapsed #avalancheChip { left:68px!important; }

  /* Planning: the elevation profile along the foot of the map, coloured by steepness. */
  .vertex-v3 #app#app#app#app#app#app#app#app#app #routePlanner #plannerElevation:not([hidden]) { display:block!important; position:fixed!important; z-index:30; left:var(--dp)!important; right:0!important; bottom:0!important; width:auto!important; height:var(--desk-profile)!important; margin:0!important; padding:10px 20px 8px!important; border:0!important; border-top:1px solid #ffffff14!important; border-radius:0!important; background:var(--ui-base,#16181c)!important; box-shadow:none!important; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app #routePlanner #plannerElevation canvas { display:block; width:100%!important; height:100%!important; cursor:crosshair; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app[data-route-planning]:has(#plannerElevation:not([hidden])) #map { bottom:var(--desk-profile)!important; height:auto!important; }
}
.vertex-v3 #app #mapCorner .map-zoom-oval { display:none; }

/* ---------- Powder Finder (Bjorn 2026-10-19): the main map in snow mode ----------
   Phone: a low card glued to the bottom over the map. Desktop: a card in the docked panel. While it is open
   the map's other cards, the dock and the avalanche chip step aside; the map stays the main thing. */
.vertex-v3 #app#app#app#app#app#app#app#app#app #powderFinderSheet {
  position:fixed!important; z-index:46!important; left:0!important; right:0!important; top:auto!important; bottom:0!important; transform:none!important;
  width:auto!important; height:auto!important; max-height:46dvh!important; overflow:auto!important; margin:0!important;
  padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px))!important; border:0!important; border-radius:22px 22px 0 0!important;
  background:var(--ui-base,#16181c)!important; color:var(--ui-text,#f1f3f5)!important; box-shadow:0 -10px 30px #0006!important; backdrop-filter:none!important; color-scheme:dark;
  font:500 13px/1.35 system-ui,sans-serif;
}
.vertex-v3 #app#app#app#app#app#app#app#app#app #powderFinderSheet[hidden] { display:none!important; }
.vertex-v3 #app #powderFinderSheet .pf-head { display:flex; align-items:center; gap:10px; margin:0 0 10px; }
.vertex-v3 #app #powderFinderSheet .pf-head b { flex:1; font:700 17px/1.2 system-ui,sans-serif; color:var(--ui-text,#f1f3f5); }
.vertex-v3 #app#app#app #powderFinderSheet #closePowderFinder { flex:none; width:34px; height:34px; padding:0; border:0; border-radius:50%; background:var(--ui-raised,#2a2e35); color:#cfd5db; font:500 15px/1 system-ui,sans-serif; cursor:pointer; }
.vertex-v3 #app #powderFinderSheet .pf-periods { display:flex; gap:6px; overflow-x:auto; margin:0 -14px 8px; padding:0 14px; scrollbar-width:none; }
.vertex-v3 #app #powderFinderSheet .pf-periods::-webkit-scrollbar { display:none; }
.vertex-v3 #app#app#app #powderFinderSheet .pf-periods button { flex:none; height:32px; padding:0 12px; border:0; border-radius:999px; background:var(--ui-raised,#2a2e35); color:#cfd5db; font:650 13px/1 system-ui,sans-serif; white-space:nowrap; cursor:pointer; }
.vertex-v3 #app#app#app #powderFinderSheet .pf-periods button[aria-pressed="true"] { background:#3b82f6; color:#fff; }
.vertex-v3 #app #powderFinderSheet .pf-scale { display:flex; align-items:center; gap:8px; margin:4px 0 10px; color:var(--ui-muted,#9aa3ad); font-size:11px; }
.vertex-v3 #app #powderFinderSheet .pf-scale i { flex:1; height:6px; border-radius:3px; background:linear-gradient(90deg,rgba(114,210,255,.5),#5497ff,#685cf6,#a656f6,#fff5ff); }
.vertex-v3 #app #powderFinderSheet .pf-status { margin:2px 0 8px; color:var(--ui-muted,#9aa3ad); font-size:13px; }
.vertex-v3 #app #powderFinderSheet .pf-list-head { margin:0 0 6px; font:700 11px/1 system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--ui-muted,#9aa3ad); }
.vertex-v3 #app #powderFinderSheet :is(.pf-status,.pf-list-head)[hidden] { display:none; }
.vertex-v3 #app#app#app #powderFinderSheet .pf-row { display:flex; align-items:center; gap:10px; width:100%; margin:0 0 6px; padding:9px 10px; border:0; border-radius:12px; background:var(--ui-surface,#1e2126); color:inherit; text-align:left; font:inherit; cursor:pointer; }
.vertex-v3 #app #powderFinderSheet .pf-row em { flex:none; width:22px; height:22px; border-radius:50%; background:#3b82f6; color:#fff; font:700 12px/22px system-ui,sans-serif; text-align:center; font-style:normal; }
.vertex-v3 #app #powderFinderSheet .pf-row span { flex:1; min-width:0; }
.vertex-v3 #app #powderFinderSheet .pf-row b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; color:var(--ui-text,#f1f3f5); }
.vertex-v3 #app #powderFinderSheet .pf-row small { display:block; color:var(--ui-muted,#9aa3ad); font-size:12px; }
.vertex-v3 #app #powderFinderSheet .pf-row strong { flex:none; font:700 15px/1 system-ui,sans-serif; color:#fff; }
.vertex-v3 #app #powderFinderSheet .powder-finder-note { margin:6px 0 0; color:var(--ui-muted,#9aa3ad); font-size:11px; }
.vertex-v3 #app#app#app#app#app#app#app#app#app.powder-mode :is(#thumbDock,#mapSheet,#avalancheChip,#mapContextStack,#mapCenterAltitude,#placePeek,#mapFeatureCard,#powderFinderReturn) { display:none!important; }
@media (max-width:899px){
  .vertex-v3 #app#app#app#app#app#app#app#app#app.powder-mode :is(#mapCorner,#thumbRail) { display:none!important; }
}
@media (min-width:900px){
  .vertex-v3 #app#app#app#app#app#app#app#app#app #powderFinderSheet { left:0!important; right:auto!important; top:var(--dh)!important; bottom:0!important; width:var(--dp)!important; max-height:none!important;
    padding:14px 16px!important; border-right:1px solid #ffffff14!important; border-radius:0!important; box-shadow:none!important; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app.desk-collapsed #powderFinderSheet { display:none!important; }
  .vertex-v3 #app #powderFinderSheet .pf-periods { flex-wrap:wrap; overflow:visible; margin:0 0 8px; padding:0; }
}