/* 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{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:is([data-route-planning],[data-shell-recording]){--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:25px;background:#1e2126;box-shadow:0 4px 16px #0006}
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:#9aa3ad;font:500 16px/1 system-ui,-apple-system,sans-serif;text-align:left;cursor:pointer}
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:#3b82f6;color:#fff;font:700 17px/1 system-ui,-apple-system,sans-serif;cursor:pointer}
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}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-scrim{position:fixed;inset:0;z-index:94;background:#0008}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-scrim[hidden],html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu[hidden]{display:none}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu{position:fixed;z-index:95;top:calc(var(--shell-top) + 58px);right:12px;left:12px;max-width:380px;margin-left:auto;padding:6px;border-radius:22px;background:#1e2126;box-shadow:0 12px 40px #000a;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-menu-who{display:flex;align-items:center;gap:12px;padding:10px 12px 12px;border-bottom:1px solid #ffffff12;margin-bottom:4px}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu-who p{margin:0;display:flex;flex-direction:column;gap:3px;color:#f1f3f5;font:700 16px/1.2 system-ui,-apple-system,sans-serif}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu-who small{color:#9aa3ad;font:500 13px/1.2 system-ui,-apple-system,sans-serif}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu-avatar{width:44px;height:44px;cursor:default}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu button{display:flex;align-items:center;gap:14px;min-height:48px;padding:0 12px;border:0;border-radius:14px;background:none;color:#f1f3f5;font:500 16px/1 system-ui,-apple-system,sans-serif;text-align:left;cursor:pointer}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu button[hidden]{display:none}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu button:active{background:#2a2e35}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu button span{flex:1}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu button small{color:#8b95a1;font:500 13px/1 system-ui,-apple-system,sans-serif}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:#c4cbd3}

/* 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}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-chip{flex:none;height:34px;display:flex;align-items:center;gap:6px;padding:0 13px 0 11px;border:0;border-radius:17px;background:#1e2126f0;color:#f1f3f5;font:600 14px/1 system-ui,-apple-system,sans-serif;box-shadow:0 2px 8px #0005;cursor:pointer;white-space:nowrap}
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.on{background:#3b82f6;color:#fff}
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:#16181c;font:800 11px/1 system-ui,-apple-system,sans-serif;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:#fff}
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:#16181c;color:#ff4d4d;box-shadow:inset 0 0 0 2px #ff0000}

/* 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:#1e2126!important;color:#f1f3f5!important;box-shadow:0 2px 10px #0006!important}
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 #locationButton{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:#1e2126!important;color:#f1f3f5!important;box-shadow:0 2px 10px #0006!important}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app :is(#avalancheChip,#mapCorner,#mapShortcuts,#cornerMeasure,#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:#1e2126!important;box-shadow:0 -6px 18px #0004!important;transition:transform .22s ease,opacity .22s ease}
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:2px;background:#ffffff30}
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}
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}
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}
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:#f1f3f5!important;font:700 18px/1.2 system-ui,-apple-system,sans-serif!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:#9aa3ad!important;font:500 13px/1.2 system-ui,-apple-system,sans-serif!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:#16181c;border-top:1px solid #ffffff12}
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:#9aa3ad;font:600 11.5px/1 system-ui,-apple-system,sans-serif;cursor:pointer}
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:#5b9cff}
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 #f1f3f5;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:#ef4444}
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:#ff6b75}
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:#000b;color:#fff;font:600 12.5px/1.2 system-ui,-apple-system,sans-serif}
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),
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app[data-shell-recording] :is(.shell-top,#thumbDock){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] #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}

/* 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:has(#placeCard:not(.collapsed):not([hidden])) :is(.shell-layers,#thumbRail,#thumbDock,#mapContextStack){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:has(#youSheet:not([hidden])) .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:has(#youSheet:not([hidden])) :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}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #layerSideControls:has(.side-layer-timing:not([hidden])){--side-top:calc(var(--chips-top) + 102px)!important}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app #layerSideControls .side-layer-timing{top:calc(var(--chips-top) + 46px)!important;max-width:calc(100vw - 24px - 58px)!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 #ffffff1a!important;border-radius:0!important;background:none!important;color:#f1f3f5!important}
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:700!important}
}