.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:750 13px/1 system-ui; 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%,#161e23); color:#f4f7f8; box-shadow:0 1px 4px #0005; text-align:left; font:500 9px/11px system-ui; pointer-events:auto; cursor:pointer; }
.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 #152229; 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 #152229; 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; }
.vertex-v3 #app#app#app#app#app #thumbDock #recordFab#recordFab .record-fab-dot { display:block!important; width:34px!important; height:34px!important; padding:3px; border:1px solid #8b969c; border-radius:50%; box-sizing:border-box; color:#f04452!important; }
.vertex-v3 #app#app#app#app#app #thumbDock #recordFab#recordFab { background:var(--ui-base)!important; }
.vertex-v3 #app#app#app#app#app #recordFab .record-fab-dot circle { r:10; }
@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,#3b82f6)!important; color:var(--ui-on-dark,#fff)!important; }
#locationButton { position:relative; }
.navigation-north { position:absolute; top:4px; left:calc(50% - 4px); width:8px; height:calc(100% - 8px); color:#fa6969; font:800 8px/1 system-ui; pointer-events:none; }
#spotName { border-bottom:1px solid #ffffff60!important; border-radius:0; color:#f4f8fb; 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:#b7bfbd80; border-radius:4px; pointer-events:none; }
  .swipe-curtain > :has(> .curtain-grabber) { position:sticky; top:0; padding-top:16px!important; z-index:3; background:var(--ui-base,#16181c)!important; touch-action:none; }
  .swipe-curtain.sheet-dragging { transition:none!important; user-select:none; }
  .swipe-curtain { transition:translate .2s ease; }
}
@media(prefers-reduced-motion:reduce){.swipe-curtain { transition:none; }}

.vertex-v3 #app#app#app#app#app#app #thumbRail #cornerTours[aria-pressed="true"] { background:var(--ui-green)!important; color:var(--ui-on-dark)!important; }
@media(max-width:899px){.vertex-v3 #app#app#app#app#app:has(#spotCard:not([hidden])) #thumbRail { bottom:calc(var(--map-dock-height,100px) + 12px)!important; }}

.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 system-ui; color:var(--ui-muted,#b7bfbd); }
.spot-name-label #spotName { width:100%; box-sizing:border-box; }
.spot-directions-origin { display:block; padding:0 0 8px; color:var(--ui-muted,#b7bfbd); font-size:11px; }

.vertex-v3 #app#app#app#app#app #locationButton[data-follow="heading"] { box-shadow:inset 0 0 0 2px var(--ui-yellow); }

.curtain-grabber { display:none; }
.route-incline-key { margin:12px 0 4px; padding:10px 12px; border:1px solid #ffffff20; border-radius:10px; color:var(--ui-muted); font:400 11px/1.5 system-ui; }
.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:#30363f; --ui-field-border:#ffffff24; }
.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:dark;
}
.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 #7cc4ff40; 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; }
.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; }
.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; }

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