/* Phone layout v4 (src/phone-shell.js, Bjorn 2026-10-28): search + avatar on top, a sideways row of layer
   chips, Layers under it, My location and ＋ on the right, the area peek above Explore · Record · You.
   Loaded last; the long #app chain outranks the older layout files. */
#shellWeather,#shellChipOptions{display:none}
@media (max-width:899px){
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app{
  --shell-top:calc(env(safe-area-inset-top) + 8px);
  /* The home-indicator strip is only partly needed under the labels (Bjorn 2026-10-29: too much air below) */
  --nav-pad:max(4px,calc(env(safe-area-inset-bottom) - 20px));
  --nav-h:calc(54px + var(--nav-pad));
  --peek-h:64px;
  --chips-top:calc(var(--shell-top) + 58px);
  --map-dock-bottom:var(--nav-h);
}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app[data-route-planning]{--chips-top:var(--shell-top)}

/* Search bar and account menu */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-top{position:fixed;z-index:46;top:var(--shell-top);left:12px;right:12px;height:50px;display:flex;align-items:center;gap:6px;padding:0 6px 0 8px;border-radius:999px;background:var(--g-surface);box-shadow:0 4px 16px rgba(var(--g-shadow-rgb),0.240);--g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-top[hidden]{display:none}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-search{flex:1;min-width:0;height:44px;display:flex;align-items:center;gap:10px;padding:0;border:0;background:none;color:var(--g-muted);font:500 16px/1 var(--font-sans);text-align:left;cursor:pointer;--g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-search img{width:34px;height:34px;border-radius:10px;flex:none}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-search span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-avatar{flex:none;width:38px;height:38px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--g-accent);color:var(--g-on-accent);font:600 17px/1 var(--font-sans);cursor:pointer;--g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-avatar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9}

/* Layer chips */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-chips{position:fixed;z-index:45;top:var(--chips-top);left:0;right:0;display:flex;gap:7px;padding:0 12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-chips::-webkit-scrollbar{display:none}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-chips[hidden]{display:none}
/* A card pulled up over the chips covers them (src/sheet-swipe.js resize) */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app[data-card-over-chips] .shell-chips{opacity:0;pointer-events:none;transition:opacity .15s}
/* No colour fade on the layer chips: a fade freezes half-way while the map builds the layer, so the tap looks slow. */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .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);}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-chip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-chip svg{stroke:var(--chip,currentColor)}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .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);}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-chip.on svg{stroke:currentColor}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-chip-x{display:none;font-style:normal;font-size:12px;opacity:.9}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-chip.on .shell-chip-x{display:inline}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .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}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-chip-level[hidden],html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-chip.on .shell-chip-level{display:none}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-chip-level[data-level="1"]{background:#ccff66}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-chip-level[data-level="2"]{background:#ffff00}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-chip-level[data-level="4"]{background:#ff0000;color:var(--g-data-ink)}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .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}

/* Map buttons: Layers under the chips; My location and ＋ above the peek */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-layers{position:fixed;z-index:44;top:calc(var(--chips-top) + 46px);right:12px;width:46px;height:46px}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-layers[hidden]{display:none}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-layers #cornerLayers{position:static!important;display:grid!important;place-items:center;width:46px!important;height:46px!important;margin:0!important;border:0!important;border-radius:50%!important;background:var(--g-surface)!important;color:var(--g-contrast)!important;box-shadow:0 2px 10px rgba(var(--g-shadow-rgb),0.240)!important;--g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #thumbRail{display:flex!important;flex-direction:column!important;align-items:center;gap:10px!important;bottom:calc(var(--nav-h) + var(--peek-h) + 12px)!important;right:12px!important;top:auto!important}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app[data-peek-hidden] #thumbRail{bottom:calc(var(--nav-h) + 12px)!important}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #thumbRail :is(#locationButton,#cornerTours,#cornerMeasure){position:static!important;display:grid!important;place-items:center;width:46px!important;height:46px!important;margin:0!important;border:0!important;border-radius:50%!important;background:var(--g-surface)!important;color:var(--g-contrast)!important;box-shadow:0 2px 10px rgba(var(--g-shadow-rgb),0.240)!important;--g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app :is(#avalancheChip,#mapCorner,#mapShortcuts,#dockTours,#thumbRailGroup,#findButton,#recordFab,#dockFavorite,#dockAreaInfo){display:none!important}

/* Area peek: one row above the nav, a curtain that pulls fully down */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #thumbDock{left:0!important;right:0!important;bottom:var(--nav-h)!important;height:var(--peek-h)!important;padding:12px 16px 6px!important;border:0!important;border-radius:22px 22px 0 0!important;background:var(--g-surface)!important;box-shadow:0 -6px 18px rgba(var(--g-shadow-rgb),0.240)!important;transition:transform .22s ease,opacity .22s ease;--g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #thumbDock::before{content:"";position:absolute;top:6px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:999px;background:rgba(var(--g-ink-rgb),0.140)}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #thumbDock #findBar{width:100%!important;flex:1!important;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;--g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #thumbDock .dock-area{width:100%!important;display:flex!important;gap:0!important;padding:0!important;border:0!important;background:none!important;--g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #thumbDock #dockTitle{flex:1!important;min-width:0!important;height:auto!important;padding:2px 0!important;border:0!important;background:none!important;text-align:left!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:3px!important;--g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #thumbDock .dock-area-caption{display:none!important}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #thumbDock #dockAreaName{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--g-contrast)!important;font:600 18px/1.2 var(--font-sans)!important}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #thumbDock #dockAreaLine{display:block!important;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--g-muted)!important;font:500 13px/1.2 var(--font-sans)!important}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app[data-peek-hidden] #thumbDock{transform:translateY(calc(100% + var(--nav-h)));opacity:0;pointer-events:none}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #mapSheet #mapContextStack{bottom:calc(var(--nav-h) + var(--peek-h))!important}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app[data-peek-hidden] #mapSheet #mapContextStack{bottom:var(--nav-h)!important}

/* Explore · Record · You */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-nav{position:fixed;z-index:47;left:0;right:0;bottom:0;height:var(--nav-h);display:grid;grid-template-columns:repeat(3,1fr);padding:0 0 var(--nav-pad);background:var(--g-base);border-top:1px solid rgba(var(--g-ink-rgb),0.071);--g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-nav[hidden]{display:none}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;border:0;background:none;color:var(--g-muted);font:600 11.5px/1 var(--font-sans);cursor:pointer;--g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-nav button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-nav button.selected{color:var(--g-accent)}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-rec{width:23px;height:23px;box-sizing:border-box;border:2px solid rgba(var(--g-ink-rgb),0.200);border-radius:50%;display:grid;place-items:center}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-rec::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--ripa-red);color:var(--g-on-accent);--g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-nav button.live{color:var(--g-danger)}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-nav button.live .shell-rec{border-color:#ff6b75;animation:shellPulse 1.6s ease-in-out infinite}
@keyframes shellPulse{50%{opacity:.45}}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-hint{position:fixed;z-index:46;left:12px;bottom:calc(var(--nav-h) + 12px);padding:7px 12px;border-radius:14px;background:rgba(var(--g-base-rgb),0.733);color:var(--g-contrast);font:600 12.5px/1.2 var(--font-sans);--g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-hint[hidden]{display:none}

/* Planning keeps today's planner card: no search bar, no peek, no nav. Recording: no search bar, no peek. */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app[data-route-planning] :is(.shell-top,.shell-nav,#thumbDock),
/* Recording keeps search and the avatar (You, messages, friends): the app stays free while the track runs
   (Bjorn 2026-11-05). Only the area peek steps aside for the recording bar. */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app[data-shell-recording]:not([data-create-open]) #thumbDock{display:none!important}
/* Plan while recording: the plan choices take the recording bar's place until one is picked (test 2026-11-07: Plan lit up, nothing showed). */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app[data-shell-recording][data-create-open] #activeSession{display:none!important}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app[data-shell-recording][data-create-open]:not(#_h):not(._h) #thumbDock{display:flex!important}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app[data-shell-recording] #thumbRail{bottom:calc(var(--nav-h) + 112px)!important}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app[data-shell-recording] #activeSession{bottom:calc(var(--nav-h) + 8px)!important}
/* A card or full view open while recording: the recording bar steps aside (the nav keeps the running time) */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app[data-shell-recording][data-h46]:not(#_h):not(._h) #activeSession{display:none!important}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app[data-shell-recording][data-finding] #activeSession{display:none!important}
/* The layer panel ends on the nav, like the area card (it ran under Explore · Record · You) */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #layerPanel:not([hidden]){bottom:var(--nav-h)!important}
/* Map credits ("i") under the Layers button on the right; under the chips they could not be tapped */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #map .maplibregl-ctrl-bottom-right{top:calc(var(--chips-top) + 104px)!important;right:12px!important;left:auto!important;bottom:auto!important;z-index:2!important}

/* The area card opens under the chips and ends on the nav; map buttons and the peek step aside meanwhile */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #placeCard:not(.collapsed):not([hidden]){top:calc(var(--chips-top) + 44px)!important;bottom:var(--nav-h)!important;height:auto!important;max-height:none!important;border-radius:22px 22px 0 0!important}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app[data-h8]:not(#_h):not(._h) :is(.shell-layers,#thumbRail,#thumbDock,#mapContextStack){display:none!important}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app[data-h47]:not(#_h) #thumbRail{display:none!important}
/* You keeps the nav under it */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #youSheet:not([hidden]){bottom:var(--nav-h)!important;height:auto!important;max-height:none!important}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app[data-h48]:not(#_h) .shell-nav{z-index:1101}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app[data-h48]:not(#_h) :is(.shell-top,.shell-chips){display:none!important}

/* Layer key and clock hang under the chips (Bjorn 2026-10-29: they slid under the chips on notched phones) */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #layerSideControls{--side-top:calc(var(--chips-top) + 46px)!important;top:var(--side-top)!important}
/* Weather box at the right end of the peek (Bjorn 2026-10-29): sky symbol + temperature, tap = Weather tab */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #thumbDock .shell-weather{order:99!important;flex:none!important;display:flex!important;align-items:center!important;gap:6px!important;min-width:64px!important;height:44px!important;margin:0 2px 0 6px!important;padding:0 8px 0 12px!important;border:0!important;border-left:1px solid rgba(var(--g-ink-rgb),0.102)!important;border-radius:0!important;background:none!important;color:var(--g-contrast)!important;--g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #thumbDock .shell-weather[hidden]{display:none!important}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #thumbDock .shell-weather svg{width:28px!important;height:28px!important;fill:none!important;stroke:currentColor!important;stroke-width:3!important;stroke-linecap:round!important;stroke-linejoin:round!important}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #thumbDock .shell-weather b{font-size:17px!important;font-weight:600!important}
/* Tours and the slope meter on the right edge above My location (Bjorn 2026-10-29) */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #thumbRail :is(#cornerTours,#cornerMeasure) svg{width:22px!important;height:22px!important}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #thumbRail :is(#cornerTours[aria-pressed="true"],#cornerMeasure[aria-expanded="true"]){background:var(--g-accent)!important;color:var(--g-contrast)!important;--g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
/* Colour A (Bjorn 2026-10-29): coloured sky symbol and nav tabs */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #thumbDock .shell-weather[data-sky="sun"] svg{stroke:var(--g-warning)!important}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #thumbDock .shell-weather[data-sky="snow"] svg{stroke:var(--g-accent)!important}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #thumbDock .shell-weather[data-sky="rain"] svg{stroke:var(--g-accent)!important}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-nav [data-shell-nav="map"].selected{color:var(--g-accent)}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-nav [data-shell-nav="plan"].selected{color:var(--g-accent)}
/* The tab you are on: accent text and a soft accent pill behind its icon (Bjorn 2026-11-04). */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-nav button svg{box-sizing:content-box;padding:2px 16px;border-radius:999px;transition:background .15s}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-nav button.selected svg{background:rgba(var(--g-accent-rgb),0.140)}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-nav button.selected span{color:var(--g-accent)}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-nav button .shell-rec{margin-block:2px}
@media (prefers-reduced-motion:reduce){html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-nav button svg{transition:none}}
/* Plan in the bottom row replaces the round ＋ on the map (Bjorn 2026-11-04); its choices still open above the dock. */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #dockPlan{display:none!important}
/* …and its slot on the right rail closes up, so Tours, slope meter and My location sit lower (Bjorn 2026-11-04). */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #thumbRail #mapCreateTools{height:0!important;min-height:0!important;margin-top:-10px!important;overflow:visible!important}
/* The avatar is the way into the You page: a ring while that page is open. */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #shellAvatar.selected{box-shadow:0 0 0 2px var(--g-surface),0 0 0 4px var(--g-accent)}
/* Map panel → Buttons under search: order and show/hide the top row (Bjorn 2026-10-29) */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #mapShortcutChoices :is(#mapShortcutOptions,#mapShortcutPreview,#mapShortcutCount,#mapShortcutStatus){display:none!important}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-chip-options{grid-column:1 / -1;display:flex;flex-direction:column}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-chip-opt{display:flex;align-items:center;gap:6px;min-height:52px;padding:0 4px;border-bottom:1px solid rgba(var(--g-ink-rgb),0.078);color:var(--g-contrast);font:500 15px/1.3 var(--font-sans)}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-chip-opt>span{flex:1;min-width:0;display:flex;align-items:center;gap:12px}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-chip-opt>span svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--chip);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-chip-opt:has(input:not(:checked))>span{opacity:.5}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-chip-opt button{flex:none;width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--g-raised);color:var(--g-contrast);--g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-chip-opt button:disabled{opacity:.25}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-chip-opt button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-chip-opt .shell-chip-switch{flex:none;display:flex!important;align-items:center;min-height:0!important;margin:0 0 0 8px!important;padding:0!important;border:0!important;background:none!important;--g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
}
/* Pin, map-feature and tour cards sit on the bottom nav, never under it (Bjorn 2026-10-29: Add pin buttons were hidden by the nav) */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app :is(#spotCard,#mapFeatureCard,#routeDetail):not([hidden]){bottom:var(--nav-h)!important;padding-bottom:14px!important}
/* Use the shared opaque slide; once grabbed, the card stays under gesture control for this opening. */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #placeCard:not([hidden]):not(.collapsed){animation:panel-menu-open 280ms cubic-bezier(.2,.9,.3,1) backwards!important;opacity:1!important}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #placeCard[data-sheet-entry-finished="true"]{animation:none!important}
@media (prefers-reduced-motion:reduce){html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #placeCard{animation:none!important}}
/* Keyboard open while typing in the area card (Locals post or reply): the card fills the space above the
   keyboard instead of staying on the nav behind it, so the field and its Send/Post button can be seen. */
html[data-keyboard-open].phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #placeCard[data-keyboard-panel]:not(.collapsed):not([hidden]){top:calc(var(--keyboard-view-top) + env(safe-area-inset-top,0px) + 8px)!important;bottom:var(--keyboard-bottom)!important;height:auto!important;max-height:none!important;border-radius:22px!important;z-index:1200!important}