/* ---------- 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 rgba(var(--g-ink-rgb),0.078); border-radius:0; background:var(--ui-base,var(--g-base)); box-shadow:none; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
  .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 rgba(var(--g-ink-rgb),0.071); border-radius:14px; background:var(--ui-raised,var(--g-raised)); color:var(--ui-muted,var(--g-muted)); font:500 14px/1 var(--font-sans); text-align:left; cursor:text; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
  .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 rgba(var(--g-ink-rgb),0.165); border-radius:5px; font:500 11px/1.4 var(--font-sans); color:var(--ui-muted,var(--g-muted)); }
  .vertex-v3 #app#app#app#app#app#app#app#app#app .desk-search:hover { border-color:rgba(var(--g-ink-rgb),0.188); color:var(--ui-text,var(--g-contrast)); }
  .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,var(--g-surface)); color:var(--ui-muted,var(--g-muted)); font:600 16px/1 var(--font-sans); cursor:pointer; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
  .vertex-v3 #app#app#app#app#app#app#app#app#app .desk-collapse:hover { color:var(--ui-text,var(--g-contrast)); }
  .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 rgba(var(--g-ink-rgb),0.110); background:var(--ui-base,var(--g-base)); color:var(--ui-text,var(--g-contrast)); box-shadow:0 8px 24px rgba(var(--g-shadow-rgb),0.240); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
  .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:14px; background:var(--ui-surface,var(--g-surface))!important; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
  .vertex-v3 #app#app#app#app#app#app#app#app#app .desk-nav button { flex:1 1 0; height:36px; border-radius:10px; color:var(--g-muted); font-size:13px; font-weight:600; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app .desk-nav button[aria-selected="true"] { background:var(--g-accent); color:var(--g-contrast); box-shadow:none; --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
  .vertex-v3 #app#app#app#app#app#app#app#app#app .desk-nav button:hover:not([aria-selected="true"]) { color:var(--ui-text,var(--g-contrast)); background:rgba(var(--g-ink-rgb),0.039); }
  .vertex-v3 #app#app#app#app#app#app#app#app#app .desk-empty { margin:28px 24px 0; color:var(--ui-muted,var(--g-muted)); 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 rgba(var(--g-ink-rgb),0.078)!important; border-radius:0!important; background:var(--ui-base,var(--g-base))!important; box-shadow:none!important; padding-top:6px!important;
  --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
  .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; --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
  .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"]) { 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][data-h1]:not(#_h) #mapSheet[data-mode="rows"] { bottom:calc(var(--desk-profile) + 16px)!important; }

  /* Previews (a tapped peak, a pin) float at the map's lower left, beside the map credit, so they never cover the panel's list. */
  .vertex-v3 #app#app#app#app#app#app#app#app#app :is(#placePeek,#mapFeatureCard,.spot-card) { left:calc(var(--dp) + 48px)!important; right:auto!important; bottom:12px!important; width:340px!important; z-index:45!important; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app[data-route-planning][data-h1]:not(#_h) :is(#placePeek,#mapFeatureCard,.spot-card) { bottom:calc(var(--desk-profile) + 12px)!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 #mapCorner .map-plan-oval { 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 var(--font-sans); cursor:pointer; --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
  .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; }

  /* Map layers opens beside the right-hand buttons, never over them (Bjorn 2026-11-04: nothing may cover a control). */
  .vertex-v3 #app#app#app#app#app#app#app#app#app #layerPanel { right:68px!important; top:12px!important; bottom:auto!important; max-height:calc(100dvh - 24px)!important; }
  /* A mouse has a wheel and a scrollbar: the phone's floating "More" hint would only cover a row in the panel. */
  .vertex-v3 #app#app#app#app#app#app#app#app#app #placeCard #areaMore { display:none!important; }
  /* Tour filters wrap onto two rows instead of hiding behind a sideways scroll a mouse can't see. */
  .vertex-v3 #app#app#app#app#app#app#app#app#app #placeCard .area-tour-filters { flex-wrap:wrap!important; overflow:visible!important; row-gap:6px; }

  /* Lifts & pistes · Auto line · Draw stay on one line each. */
  .vertex-v3 #app#app#app#app#app#app#app#app#app #plannerModes button { white-space:nowrap; }

  /* 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 rgba(var(--g-ink-rgb),0.078)!important; border-radius:0!important; background:var(--ui-base,var(--g-base))!important; box-shadow:none!important; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
  .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][data-h1]:not(#_h) #map { bottom:var(--desk-profile)!important; height:auto!important; }
}
.vertex-v3 #app #mapCorner .map-zoom-oval { display:none; }

/* ---------- Calm panel (Bjorn 2026-11-04) ----------
   Brand and « on the first row, the search across the full width, the main menu as thin underlined tabs and the
   area's tabs as a white segmented control, so filled petrol is left for buttons that do something. */
@media (min-width:900px){
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app { --dh:170px; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app .desk-head { display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px 8px; padding:16px 16px 12px; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app .desk-brand { grid-column:1; grid-row:1; justify-self:start; width:30px; height:24px; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app .desk-collapse { grid-column:2; grid-row:1; background:transparent; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app .desk-search { grid-column:1 / -1; grid-row:2; height:44px; background:var(--g-on-accent); box-shadow:0 1px 2px rgba(var(--g-shadow-rgb),0.080); }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app .desk-nav { gap:20px; margin:0 16px; padding:0!important; border-radius:0; border-bottom:1px solid rgba(var(--g-ink-rgb),0.100); background:transparent!important; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app .desk-nav button { flex:none; height:40px; margin-bottom:-1px; padding:0 2px; border-radius:0; border-bottom:2px solid transparent!important; background:transparent!important; color:var(--g-muted); font-size:14px; font-weight:500; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app .desk-nav button[aria-selected="true"] { border-bottom:2px solid var(--g-accent)!important; background:transparent!important; color:var(--g-ink)!important; font-weight:600; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app .desk-nav button:hover:not([aria-selected="true"]) { background:transparent!important; color:var(--g-ink); }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app #placeCard .area-tabs { margin:0 4px; padding:3px!important; border-radius:14px!important; background:rgba(var(--g-ink-rgb),0.060)!important; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app #placeCard .area-tabs button { height:32px!important; border-radius:10px!important; background:transparent!important; color:var(--g-muted)!important; font-size:13px!important; font-weight:500!important; box-shadow:none!important; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app #placeCard .area-tabs button[aria-selected="true"] { background:var(--g-on-accent)!important; color:var(--g-ink)!important; font-weight:600!important; box-shadow:0 1px 3px rgba(var(--g-shadow-rgb),0.140)!important; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app :is(.area-tour,.tb-row.tb-tap):hover { border-color:rgba(var(--g-accent-rgb),0.450)!important; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app :is(#placeCard,.area-panel,.desk-side) { scrollbar-width:thin; }
}
@media (min-width:1280px){
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app:not(.desk-collapsed) { --dp:400px; }
}

/* ---------- Same quick choices as the phone (Bjorn 2026-11-04) ----------
   The phone's layer chips run along the top of the map (‹ › and the wheel page them; the Avalanche chip carries
   the danger level, so the separate avalanche pill goes), ＋ (Draw · Auto line · Pin) ends the map buttons on the
   right and opens to the left, and the map credit (i) sits in the map's lower left corner. No Record on desktop. */
@media (min-width:900px){
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app #shellChips { position:fixed; z-index:30; top:12px; left:calc(var(--dp) + 12px); right:72px; display:flex; gap:6px; padding:2px 2px 8px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app #shellChips::-webkit-scrollbar { display:none; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app #shellChips[hidden] { display:none; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app.desk-collapsed #shellChips { left:68px; }
  /* The row stops short of ‹ ›, so a page button never sits on a chip. */
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app[data-h2]:not(._h):not(._h) #shellChips { right:114px; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app[data-h3]:not(._h):not(._h) #shellChips { left:calc(var(--dp) + 50px); }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app.desk-collapsed[data-h3]:not(._h):not(._h) #shellChips { left:106px; }
  /* The phone's chip look (src/phone-shell.css), for the desktop row. */
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #shellChips .shell-chip{transition:scale .16s cubic-bezier(.2,.9,.3,1);flex:none;height:34px;display:flex;align-items:center;gap:6px;padding:0 13px 0 11px;border:0;border-radius:999px;background:rgba(var(--g-surface-rgb),0.941);color:var(--g-contrast);font:600 14px/1 var(--font-sans);box-shadow:0 2px 8px rgba(var(--g-shadow-rgb),0.240);cursor:pointer;white-space:nowrap;--g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #shellChips .shell-chip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #shellChips .shell-chip svg{stroke:var(--chip,currentColor)}
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #shellChips .shell-chip.on{background:var(--chip,var(--g-accent));color:var(--g-ink);--g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #shellChips .shell-chip.on svg{stroke:currentColor}
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #shellChips .shell-chip-x{display:none;font-style:normal;font-size:12px;opacity:.9}
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #shellChips .shell-chip.on .shell-chip-x{display:inline}
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #shellChips .shell-chip-level{min-width:18px;height:18px;display:grid;place-items:center;border-radius:5px;background:#ff9900;color:#0b0b0c;font:600 11px/1 var(--font-sans);font-style:normal}
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #shellChips .shell-chip-level[hidden],.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #shellChips .shell-chip.on .shell-chip-level{display:none}
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #shellChips .shell-chip-level[data-level="1"]{background:#ccff66}
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #shellChips .shell-chip-level[data-level="2"]{background:#ffff00}
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #shellChips .shell-chip-level[data-level="4"]{background:#ff0000;color:var(--g-data-ink)}
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #shellChips .shell-chip-level[data-level="5"]{background:repeating-conic-gradient(#ff0000 0 25%,#111 0 50%) 0 0/6px 6px;color:#fff;text-shadow:0 0 3px #000,0 0 2px #000}
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #shellChips .shell-chip { height:36px; cursor:pointer; box-shadow:0 2px 8px rgba(var(--g-shadow-rgb),0.160); }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #shellChips .shell-chip:hover:not(.on) { background:var(--g-on-accent); }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app .shell-chips-page { position:fixed; z-index:31; top:13px; width:34px; height:34px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:var(--g-on-accent); color:var(--g-ink); box-shadow:0 2px 10px rgba(var(--g-shadow-rgb),0.240); cursor:pointer; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app .shell-chips-page[hidden] { display:none; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app .shell-chips-page[data-dir="1"] { right:74px; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app .shell-chips-page[data-dir="-1"] { left:calc(var(--dp) + 10px); }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app.desk-collapsed .shell-chips-page[data-dir="-1"] { left:66px; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app .shell-chips-page .ui-icon { width:18px; height:18px; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app #avalancheChip { display:none!important; }
  /* The open layer's key hangs under the chip row instead of on it. */
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app #layerSideControls { top:62px!important; left:calc(var(--dp) + 12px)!important; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app.powder-mode :is(#shellChips,.shell-chips-page) { display:none!important; }
  /* Panels that open on the map start under the chip row. */
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app #layerPanel { top:60px!important; max-height:calc(100dvh - 72px)!important; }
  /* ＋ at the foot of the right-hand buttons; its menu opens to the left over the map. */
  /* The side panel is always open on desktop, so ＋ stays (the phone hides it behind an open card); planning has its own bar. */
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app:not([data-route-planning]):not([data-finding]) #mapCorner #mapCreateTools { display:flex!important; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app #mapCorner #mapCreateTools { position:relative!important; right:auto!important; bottom:auto!important; top:auto!important; align-self:flex-end; flex:none; width:44px; height:44px; margin-top:4px; border-radius:22px; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app #mapCorner #mapCreateTools[data-open="true"] { width:var(--create-tools-width); height:64px; margin-top:4px; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app #mapCorner #mapCreateTools #dockPlan { width:44px!important; min-width:44px!important; height:44px!important; padding:11px!important; background:var(--g-accent)!important; color:var(--g-on-accent)!important; cursor:pointer; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app #mapCorner #mapCreateTools[data-open="true"] #dockPlan { top:10px; background:transparent!important; color:var(--g-ink)!important; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app #mapCorner #mapCreateModes button { cursor:pointer; }
  /* The map credit: lower left of the map, clear of the legends (lower right) and the chips (top). */
  .vertex-v3 #app#app#app#app#app#app#app#app#app#app #map .maplibregl-ctrl-bottom-right { display:block!important; top:auto!important; right:auto!important; left:12px!important; bottom:12px!important; }
}

/* ---------- 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,var(--g-base))!important; color:var(--ui-text,var(--g-contrast))!important; box-shadow:0 -10px 30px rgba(var(--g-shadow-rgb),0.240)!important; backdrop-filter:none!important; color-scheme:light;
  font:500 13px/1.35 var(--font-sans);
--g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app#app#app#app#app#app#app#app#app #powderFinderSheet[hidden] { display:none!important; }
/* Phone: one fixed height from the first frame, so the card does not grow as the list arrives and the map's
   framing stays put; the list scrolls inside. Swipe down (or tap the title) lowers it to the title and days. */
@media (max-width:899px){
  .vertex-v3 #app#app#app#app#app#app#app#app#app #powderFinderSheet { height:min(46dvh,400px)!important; overscroll-behavior:contain; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app #powderFinderSheet.pf-min { height:auto!important; overflow:hidden!important; }
  .vertex-v3 #app #powderFinderSheet.pf-min :is(.pf-scale,.pf-status,.pf-list-head,.pf-list,.pf-saved,.powder-finder-note) { display:none!important; }
  .vertex-v3 #app #powderFinderSheet.pf-min .pf-periods { margin-bottom:0; }
  .vertex-v3 #app #powderFinderSheet .pf-head { cursor:pointer; }
}
.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:600 17px/1.2 var(--font-sans); color:var(--ui-text,var(--g-contrast)); }
.vertex-v3 #app#app#app #powderFinderSheet #closePowderFinder { flex:none; width:34px; height:34px; padding:0; border:0; border-radius:50%; background:var(--ui-raised,var(--g-raised)); color:var(--g-muted); font:500 15px/1 var(--font-sans); cursor:pointer; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.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,var(--g-raised)); color:var(--g-muted); font:600 13px/1 var(--font-sans); white-space:nowrap; cursor:pointer; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app#app#app #powderFinderSheet .pf-periods button[aria-pressed="true"] { background:var(--g-accent); color:var(--g-contrast); --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.vertex-v3 #app #powderFinderSheet .pf-scale { display:flex; align-items:center; gap:8px; margin:4px 0 10px; color:var(--ui-muted,var(--g-muted)); font-size:11px; }
.vertex-v3 #app #powderFinderSheet .pf-scale i { flex:1; height:6px; border-radius:999px; background:linear-gradient(90deg,rgba(var(--g-accent-rgb),0.500),var(--g-accent),var(--g-accent),#a656f6,var(--g-surface)); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app #powderFinderSheet .pf-status { margin:2px 0 8px; color:var(--ui-muted,var(--g-muted)); font-size:13px; }
.vertex-v3 #app #powderFinderSheet .pf-list-head { margin:0 0 6px; font:600 11px/1 var(--font-sans); letter-spacing:.08em; text-transform:uppercase; color:var(--ui-muted,var(--g-muted)); }
.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:14px; background:var(--ui-surface,var(--g-surface)); color:inherit; text-align:left; font:inherit; cursor:pointer; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app #powderFinderSheet .pf-row em { flex:none; width:22px; height:22px; border-radius:50%; background:var(--g-accent); color:var(--g-contrast); font:600 12px/22px var(--font-sans); text-align:center; font-style:normal; --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.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,var(--g-contrast)); }
.vertex-v3 #app #powderFinderSheet .pf-row small { display:block; color:var(--ui-muted,var(--g-muted)); font-size:12px; }
.vertex-v3 #app #powderFinderSheet .pf-row strong { flex:none; font:600 15px/1 var(--font-sans); color:var(--g-contrast); }
.vertex-v3 #app #powderFinderSheet .pf-list:has(.pf-region) { display:flex; flex-wrap:wrap; gap:6px; }
.vertex-v3 #app#app#app #powderFinderSheet .pf-region { height:34px; padding:0 14px; border:0; border-radius:999px; background:var(--ui-surface,var(--g-surface)); color:var(--ui-text,var(--g-contrast)); font:600 13px/1 var(--font-sans); cursor:pointer; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
/* Saved places (☆) in view: one row of chips, most snow first. */
.vertex-v3 #app #powderFinderSheet .pf-saved[hidden] { display:none; }
.vertex-v3 #app #powderFinderSheet .pf-saved { display:flex; gap:6px; overflow-x:auto; margin:0 -14px 10px; padding:0 14px; scrollbar-width:none; }
.vertex-v3 #app #powderFinderSheet .pf-saved::-webkit-scrollbar { display:none; }
.vertex-v3 #app#app#app #powderFinderSheet .pf-saved-chip { flex:none; display:flex; align-items:center; gap:6px; height:34px; padding:0 12px 0 9px; border:1.5px solid var(--g-accent); border-radius:999px; background:var(--ui-surface,var(--g-surface)); color:var(--ui-text,var(--g-ink)); font:500 13px/1 var(--font-sans); white-space:nowrap; cursor:pointer; }
.vertex-v3 #app #powderFinderSheet .pf-saved-chip .ui-icon { width:15px; height:15px; fill:var(--g-accent); stroke:none; }
.vertex-v3 #app #powderFinderSheet .pf-saved-chip b { font-weight:600; max-width:140px; overflow:hidden; text-overflow:ellipsis; }
.vertex-v3 #app #powderFinderSheet .pf-saved-chip span { color:var(--g-accent); font-weight:600; }
.vertex-v3 #app #powderFinderSheet .powder-finder-note { margin:6px 0 0; color:var(--ui-muted,var(--g-muted)); 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; height:auto!important; max-height:none!important;
    padding:14px 16px!important; border-right:1px solid rgba(var(--g-ink-rgb),0.078)!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; }
  /* The docked panel hides the map's context pills; the way back to Powder Finder after a pick stays. */
  .vertex-v3 #app#app#app[data-place-docked] #powderFinderReturn:not([hidden]) { display:flex!important; }
  .vertex-v3 #app #powderFinderSheet .pf-periods { flex-wrap:wrap; overflow:visible; margin:0 0 8px; padding:0; }
}