.center-compass { position:absolute; left:50%; top:50%; width:0; height:0; opacity:0; transition:opacity .25s; pointer-events:none; }
.center-compass.visible { opacity:1; }
.center-compass span { position:absolute; left:0; top:0; font:600 13px/1 var(--font-sans); color:#fff; text-shadow:0 1px 3px #000,0 0 3px #000; }
.center-compass span[data-direction="N"] { color:#ff6262; }
.vertex-v3 #app #mapCenterAltitude:has(.center-compass.visible) output { bottom:calc(100% + 54px); }
.map-track-labels { position:absolute; inset:0; z-index:6; pointer-events:none; overflow:hidden; }
.map-track-label { position:absolute; width:138px; box-sizing:border-box; padding:4px 6px; border:1.5px solid var(--track-color); border-radius:7px; background:color-mix(in srgb,var(--track-color) 15%,var(--g-raised)); color:var(--g-contrast); box-shadow:0 1px 4px rgba(var(--g-shadow-rgb),0.240); text-align:left; font:500 9px/11px var(--font-sans); pointer-events:auto; cursor:pointer; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.map-track-label::before { content:""; position:absolute; left:calc(50% - 1px); top:100%; width:2px; height:9px; background:var(--track-color); box-shadow:0 0 0 1px rgba(var(--g-shadow-rgb),0.240); pointer-events:none; }
.map-track-label::after { content:""; position:absolute; left:calc(50% - 3px); top:calc(100% + 6px); width:6px; height:6px; border-radius:50%; background:var(--track-color); box-shadow:0 0 0 1px rgba(var(--g-shadow-rgb),0.240); pointer-events:none; }
.map-track-label b { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:10px; line-height:12px; }
.map-track-label span { display:block; white-space:nowrap; }
.vertex-v3 #app#app#app#app#app #thumbDock #recordFab .record-fab-play { display:none!important; }
/* Record is a tab at the dock's right end, the twin of Explore at its left: a small red dot in a white
   ring with its name under it, behind a thin divider. While recording the dot pulses and the name says so. */
.vertex-v3 #app#app#app#app#app#app #thumbDock #recordFab#recordFab { flex-direction:column!important; gap:4px!important; width:76px!important; min-width:76px!important; height:56px!important; margin:0!important; border-radius:0!important; background:transparent!important; border:0!important; border-left:1px solid rgba(var(--g-ink-rgb),0.140)!important; --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
.vertex-v3 #app#app#app#app#app#app #thumbDock #recordFab#recordFab .record-fab-dot { display:block!important; width:24px!important; height:24px!important; padding:3px; border:2px solid rgba(var(--g-ink-rgb),0.200); border-radius:50%; box-sizing:border-box; color:var(--g-danger)!important; }
.vertex-v3 #app#app#app#app#app #recordFab .record-fab-dot circle { r:12; }
.record-fab-tab { display:none; }
.vertex-v3 #app#app#app#app#app#app #thumbDock #recordFab .record-fab-tab { display:block; font:600 11px var(--font-sans); font-style:normal; color:var(--g-contrast); white-space:nowrap; }
.vertex-v3 #app#app#app#app#app#app #thumbDock #recordFab.recording-active .record-fab-tab { color:var(--g-danger); }
@media(prefers-reduced-motion:reduce) { .center-compass { transition:none; } }

.center-compass::before { content:""; position:absolute; width:72px; height:72px; left:-36px; top:-36px; border:1px solid #ffffff85; border-radius:50%; box-shadow:0 0 0 1px #13202960,inset 0 0 12px #13202922; }
.vertex-v3 #app#app#app #cornerTours[aria-pressed="true"],.vertex-v3 #app#app#app #locationButton[aria-pressed="true"] { background:var(--ui-green,var(--g-accent))!important; color:var(--ui-on-dark,var(--g-contrast))!important; --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
#locationButton { position:relative; }
.navigation-north { position:absolute; top:4px; left:calc(50% - 4px); width:8px; height:calc(100% - 8px); font:600 8px/1 var(--font-sans); pointer-events:none; }
#spotName { border-bottom:1px solid rgba(var(--g-ink-rgb),0.200)!important; border-radius:0; color:var(--g-contrast); min-width:0; }
.route-color-legend i.incline-green,#safeLineLegend i.incline-green { background:#42df9b!important; }
#safeLineLegend i.up { background:#111820!important; border:1px solid #f4f8fb; }
#safeLineLegend i.down { background:#20a86b!important; }
@media(max-width:759px){
  .vertex-v3 #app .curtain-grabber { display:block!important; position:absolute; top:5px; left:calc(50% - 18px); width:36px; height:4px; background:rgba(var(--g-raised-rgb),0.502); border-radius:4px; pointer-events:none; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
  .swipe-curtain > :has(> .curtain-grabber) { position:sticky; top:0; padding-top:16px!important; z-index:3; background:var(--ui-base,var(--g-base))!important; touch-action:none; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
  .swipe-curtain.sheet-dragging { transition:none!important; user-select:none; }
  .swipe-curtain { transition:translate .2s ease; }
  /* The shared controller promotes only the moving panel; its contents keep
     their normal scrolling, and page layout waits until release settles. */
  .sheet-dragging,.sheet-settling { user-select:none; -webkit-user-select:none; }
  .sheet-swipe-zone { touch-action:none; }
}
@media(prefers-reduced-motion:reduce){.swipe-curtain { transition:none; }}

/* Slide the finished card surface without scaling its text or fading the map through it.
   Keep the existing animation name so the shared gesture controller can take over mid-entry. */
@keyframes panel-menu-open {
  from { translate:0 32px; }
  to { translate:none; }
}
@media (max-width:899px) and (prefers-reduced-motion:no-preference) {
  .vertex-v3 #app#app#app#app :is(#friendCard,#messageCard,#powderFinderSheet):not([hidden]) {
    animation:panel-menu-open 280ms cubic-bezier(.2,.9,.3,1) backwards;
  }
}
/* A gesture finishes entry for this opening. A persistent latch avoids replaying the
   entrance animation when the temporary dragging/settling classes are removed. */
.vertex-v3 #app .swipe-curtain[data-sheet-entry-finished="true"] { animation:none!important; }

.vertex-v3 #app#app#app#app#app#app #thumbRail #cornerTours[aria-pressed="true"] { background:var(--ui-green)!important; color:var(--ui-on-dark)!important; --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 #safeLineLegend i.level { background:#f4f8fb!important; }
.vertex-v3 #app#app#app#app #safeLineLegend i.up,.vertex-v3 #app#app#app#app #safeLineLegend i.down { clip-path:polygon(0 0,100% 50%,0 100%,25% 50%); height:10px; border-radius:0; }

.spot-name-label { display:flex; flex:1; min-width:0; flex-direction:column; gap:3px; font:500 10px/1.2 var(--font-sans); color:var(--ui-muted,var(--g-muted)); }
.spot-name-label #spotName { width:100%; box-sizing:border-box; }
.spot-directions-origin { display:block; padding:0 0 8px; color:var(--ui-muted,var(--g-muted)); font-size:11px; }


.curtain-grabber { display:none; }
.route-incline-key { margin:12px 0 4px; padding:10px 12px; border:1px solid rgba(var(--g-ink-rgb),0.125); border-radius:10px; color:var(--ui-muted); font:400 11px/1.5 var(--font-sans); }
.route-incline-key summary { cursor:pointer; color:var(--ui-text); }
.route-incline-key p { margin:8px 0 0; }

/* Text entry uses a shared surface distinct from the surrounding card. */
.vertex-v3 #app { --ui-field:var(--g-raised); --ui-field-border:var(--g-line); }
.vertex-v3 #app#app#app#app#app#app#app :is(input:not([type]),input[type="text"],input[type="search"],input[type="email"],input[type="password"],input[type="url"],input[type="tel"],textarea) {
  background:var(--ui-field)!important; color:var(--ui-text)!important;
  border:1px solid var(--ui-field-border)!important; border-radius:10px!important;
  caret-color:var(--ui-yellow); color-scheme:light;
--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 :is(input,textarea)::placeholder { color:var(--ui-muted)!important; opacity:1; }
.vertex-v3 #app#app#app#app#app#app#app :is(input:not([type]),input[type="text"],input[type="search"],input[type="email"],input[type="password"],input[type="url"],input[type="tel"],textarea):focus-visible {
  border-color:var(--ui-yellow)!important; outline:2px solid rgba(var(--g-accent-rgb),0.251); outline-offset:1px;
}
.vertex-v3 #app#app#app#app#app#app#app #findSheet #searchBox { background:var(--ui-field)!important; border:1px solid var(--ui-field-border)!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 #findSheet #searchBox:focus-within { border-color:var(--ui-yellow)!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #findSheet #placeSearch { background:transparent!important; border:0!important; outline:none!important; --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
.vertex-v3 #app#app#app#app#app#app#app #spotCard .spot-name-label #spotName { width:100%!important; padding:0 10px; }

.map-track-label[hidden] { display:none!important; }
/* Boxes fade and glide instead of popping in and out (Bjorn 2026-11-08). The position transform follows
   the map at once; it is animated only while .is-gliding (a box moving to a new spot after the map settles). */
.map-track-label { transform-origin:50% 100%; transition:opacity .18s ease-out, scale .18s ease-out; animation:track-label-in .22s cubic-bezier(.2,.8,.2,1) both; will-change:transform; }
.map-track-label.is-gliding { transition:transform .24s cubic-bezier(.2,.8,.2,1), opacity .18s ease-out, scale .18s ease-out; }
.map-track-label.is-leaving { opacity:0; scale:.94; pointer-events:none; }
@keyframes track-label-in { from { opacity:0; scale:.9; } to { opacity:1; scale:1; } }
@media (prefers-reduced-motion:reduce) { .map-track-label, .map-track-label.is-gliding { transition:none; animation:none; } }

.vertex-v3 #app#app#app#app #safeLineLegend i.extreme { background:#111820!important; border:1px solid #ffffff80; }

/* The same gap separates shortcuts, Layers and the creation button. */
@media (max-width:899px) {
  .vertex-v3 #app#app#app#app#app#app#app #thumbRail { --map-control-gap:12px; gap:var(--map-control-gap); }
  .vertex-v3 #app#app#app#app#app#app#app #thumbRailGroup { display:flex; flex-direction:column; grid-area:1 / 1; width:46px; box-sizing:border-box; overflow:hidden; border:1px solid rgba(var(--g-ink-rgb),0.188); border-radius:999px; background:var(--ui-surface); box-shadow:0 4px 14px 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 #thumbRailGroup:empty { display:none; }
  .vertex-v3 #app#app#app#app#app#app#app #thumbRailGroup>button { width:44px!important; min-width:44px!important; height:46px!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 #thumbRailGroup>button~button { border-top:1px solid rgba(var(--g-ink-rgb),0.122)!important; }
  .vertex-v3 #app#app#app#app#app#app#app #thumbRailGroup>button[aria-pressed="true"] { background:var(--ui-green)!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);}
  .vertex-v3 #app#app#app#app#app#app#app #thumbRail #mapCreateTools:not([data-open="true"]) { width:46px; height:46px; border:0; background:transparent; box-shadow:none; overflow:visible; --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
  .vertex-v3 #app#app#app#app#app#app#app #thumbRail #mapCreateTools:not([data-open="true"]) #dockPlan { width:46px!important; min-width:46px!important; height:46px!important; color:var(--g-contrast)!important; box-shadow:0 3px 10px rgba(var(--g-shadow-rgb),0.240)!important; }
}
/* Phones: a lower, slimmer bottom menu that still floats (Bjorn 2026-10-28): 56 px instead of 68 px (48 felt squeezed),
   and set down into the home-indicator area, so the map gets about 30 px more. */
@media (max-width:899px) {
  .vertex-v3 #app#app#app#app#app#app#app { --map-dock-bottom:max(6px,calc(env(safe-area-inset-bottom) - 14px)); }
  .vertex-v3 #app#app#app#app#app#app#app #thumbDock { padding:4px!important; border-radius:22px!important; }
  .vertex-v3 #app#app#app#app#app#app#app #thumbDock #findBar,
  .vertex-v3 #app#app#app#app#app#app#app #thumbDock #findButton,
  .vertex-v3 #app#app#app#app#app#app#app #thumbDock #dockTitle { height:48px!important; }
  .vertex-v3 #app#app#app#app#app#app#app #thumbDock #findButton { gap:3px!important; }
  .vertex-v3 #app#app#app#app#app#app#app #thumbDock #findButton svg { width:19px!important; height:19px!important; }
  .vertex-v3 #app#app#app#app#app#app#app #thumbDock #dockTitle { padding:3px 12px!important; gap:2px!important; }
  .vertex-v3 #app#app#app#app#app#app#app #thumbDock #recordFab#recordFab { height:48px!important; gap:3px!important; }
  .vertex-v3 #app#app#app#app#app#app#app #thumbDock #recordFab#recordFab .record-fab-dot { width:22px!important; height:22px!important; }
  .vertex-v3 #app#app#app#app#app#app#app #thumbRail { bottom:calc(var(--map-dock-bottom) + 68px)!important; }
}
#routeDetail>.route-mini-profile { display:none; }
/* A lowered tour card: only its title row stays, the tour stays drawn on the map (tap the title or swipe up). */
@media (max-width:899px) {
  .vertex-v3 #app#app#app#app#app#app#app #routeDetail.rd-min { height:auto!important; max-height:none!important; min-height:0!important; }
  .vertex-v3 #app#app#app#app#app#app#app #routeDetail.rd-min>:not(.route-detail-head):not(.route-mini-profile) { display:none!important; }
  /* The lowered card keeps a low profile to drag along, the dot following on the map (Bjorn 2026-11-08). */
  .vertex-v3 #app#app#app#app#app#app#app #routeDetail.rd-min>.route-mini-profile { display:block!important; height:52px; margin:8px 0 0; touch-action:none; }
  .vertex-v3 #app#app#app#app#app#app#app #routeDetail.rd-min #routeDetailMeta[data-reading] { color:var(--ui-accent,#1f6f86); font-weight:700; }
  .vertex-v3 #app#app#app#app#app#app#app #routeDetail.rd-min>.route-mini-profile canvas { display:block; width:100%; height:52px; touch-action:none; }
  /* The card already pads for the home bar; the head adds none, so the lowered card is one row (Bjorn 2026-10-28). */
  .vertex-v3 #app#app#app#app#app#app#app #routeDetail.rd-min { overflow:visible!important; padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))!important; }
  .vertex-v3 #app#app#app#app#app#app#app #routeDetail.rd-min .route-detail-head { cursor:pointer; margin:0!important; padding-bottom:0!important; }
  /* The map buttons stay usable above an open tour card instead of hiding behind it. */
  .vertex-v3 #app#app#app#app#app#app#app#app[data-h41]:not(#_h) #thumbRail { bottom:calc(var(--map-sheet-bottom,12px) + var(--legend-strip-h,0px))!important; }
  /* Open tour card: the card has the room, no map buttons. Lowered to its title row: every map button is back,
     as on the plain map (Bjorn 2026-10-28). */
  .vertex-v3 #app#app#app#app#app#app#app#app#app[data-h42]:not(#_h):not(._h) #thumbRail { display:none!important; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app[data-h43]:not(#_h):not(._h) #mapShortcuts:not(:empty) { display:flex!important; }
  .vertex-v3 #app#app#app#app#app#app#app#app#app:not([data-route-planning])[data-h43]:not(#_h):not(._h) #thumbRail :is(#mapCreateTools,#dockPlan) { display:flex!important; }
}
/* Lowered tour card: ‹ turns to ⌃ so the way to the full card is plain to see (Bjorn 2026-11-09). */
@media (max-width:899px) {
  .vertex-v3 #app#app#app#app#app#app#app #routeDetail.rd-min #backRouteDetail { transform:rotate(90deg); }
}