/* Fixes from Bjorn's test round of 2026-11-06, loaded last so they win over the older layout files.
   Each block names what it fixes. */

/* You → RIPA Pro is the plan page: with Pro it shows the plan, not the buy buttons. */
.pro-upsell-sheet.pro-active .pro-store,.pro-upsell-sheet.pro-active .pro-store-web{display:none!important}
.pro-status:not([hidden]){display:flex;align-items:center;gap:12px;margin:14px 0;padding:14px 16px;border-radius:14px;background:var(--g-raised)}
.pro-status>div{flex:1;min-width:0}
.pro-status b{display:block;font:600 16px/1.3 var(--font-sans);color:var(--g-ink)}
.pro-status span{display:block;margin-top:2px;font:500 13px/1.35 var(--font-sans);color:var(--g-muted)}

/* Sticky page heads (Settings, Profile, Friends, Ski log …): the strip above a head is painted in the page
   colour too, so rows scrolling up never show above the title (Bjorn 2026-11-06). */
@media (max-width:899px){
  body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app :is(#settingsSheet,#profileEditorSheet,#communityView,#activitiesSheet,#compareSheet,#youSheet) :is(.publish-route-head,.you-child-head,.community-head,.community-profile-head,.activities-head,.context-surface-nav){
    background:var(--g-base)!important;
    box-shadow:0 -40px 0 0 var(--g-base)!important;
  }
}

/* Map credits (i): the round button sits in the middle of its circle (border-box made the circle 20 px tall
   around a 24 px button), and cards drawn over the map cover it instead of it floating on top of them. */
.vertex-v3 #app#app#app #map .maplibregl-ctrl-attrib.maplibregl-compact{min-height:24px!important;min-width:24px}
.vertex-v3 #app#app#app #map .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show){padding:0!important;width:24px;height:24px}
.vertex-v3 #app#app#app #map .maplibregl-ctrl-attrib-button{top:0!important;width:24px!important;height:24px!important;background-position:center!important}
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #map .maplibregl-ctrl-bottom-right{z-index:0!important}

/* Area card: lowered below the Layers button, that button shows again (cards never cover buttons). */
@media (max-width:899px){
  html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app[data-h8]:not(#_h):not(._h)[data-card-low] .shell-layers{display:block!important}
}

/* Search: the field lines up with the rows under it, and closes with the app's one round ✕ on the same row
   (Bjorn 2026-11-06: the field sat off-centre next to a new kind of back arrow). */
.find-search-row{display:flex;align-items:center;gap:10px}
.find-search-row>#searchBox{flex:1;min-width:0}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #findSheet .find-search-row>#searchBox{margin-left:0!important;flex:1 1 auto!important;min-width:0!important;width:auto!important}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #findSheet .find-search-row>.find-cancel{position:static!important;display:grid!important;place-items:center;flex:none;width:44px!important;height:44px!important;min-width:44px!important;
  border-radius:50%!important;background:var(--g-raised)!important;color:var(--g-ink)!important;font:400 24px/1 var(--font-sans)!important}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #findSheet .find-search-row>.find-cancel::before{content:none!important;display:none!important}

/* Area card → Tours: the two switches were hard to see when off (grey track on grey), now a clear track. */
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #placeCard .tour-low-angle input[type="checkbox"]{width:48px!important;height:28px!important;background:rgba(var(--g-ink-rgb),.22)!important}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #placeCard .tour-low-angle input[type="checkbox"]::after{top:3px!important;left:3px!important;width:22px!important;height:22px!important;background:#fff!important;box-shadow:0 1px 3px rgba(0,0,0,.25)!important}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #placeCard .tour-low-angle input[type="checkbox"]:checked{background:var(--g-accent)!important}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #placeCard .tour-low-angle input[type="checkbox"]:checked::after{transform:translateX(20px)!important}

/* Recording bar: the transparent time button carried a card shadow, which drew
   an offset grey box behind the clock ("skewed colours"). */
#app #activeSession #openActiveSession{box-shadow:none!important;background:transparent!important}

/* Battery: infinite animations of box-shadow repaint the element on the main thread every frame for as long
   as it is on screen (the recording dot for a whole tour, the powder alert whenever the place card shows it).
   Opacity runs on the compositor and costs almost nothing. Same look, same rhythm. */
@keyframes rec-pulse{50%{opacity:.45}}
.vertex-v3 #app #powderAlert{position:relative;animation:none!important}
.vertex-v3 #app #powderAlert::after{content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 22px color-mix(in srgb,var(--pw) 48%,transparent);border:1px solid color-mix(in srgb,var(--pw) 75%,transparent);
  animation:powder-glow-fade 2.8s ease-in-out infinite}
@keyframes powder-glow-fade{50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.vertex-v3 #app #powderAlert::after{animation:none}}

/* RIPA Pro sheet and the Report/Block sheet: You and the full-screen pages (Settings, Ski log …) sit at z-index 1100, the Pro sheet at
   145, so You → RIPA Pro and Settings → Pro details opened it out of sight behind the page (flow check
   2026-11-07). Report and Block on a profile opened behind the profile the same way. They now open above; its ✕ returns to the page underneath. */
@media (max-width:899px){
  body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app :is(#proUpsellSheet,#communitySafetySheet):not([hidden]){z-index:1150!important}
}

/* Map graphics lost (see app.js, webglcontextlost): one calm line with a Reload button above the bottom row. */
.map-lost-banner{position:fixed;left:12px;right:12px;bottom:calc(var(--nav-h,64px) + 12px + env(safe-area-inset-bottom,0px));z-index:1300;display:flex;align-items:center;gap:12px;
  padding:12px 12px 12px 16px;border-radius:14px;background:var(--g-surface,#fff);color:var(--g-ink,#183746);box-shadow:0 10px 30px rgba(18,56,75,.22);font:500 14px/1.35 var(--font-sans,system-ui)}
.map-lost-banner[hidden]{display:none}
.map-lost-banner span{flex:1}
.map-lost-banner button{flex:none;min-height:40px;padding:0 16px;border:0;border-radius:999px;background:var(--g-accent,#186676);color:var(--g-on-accent,#fff);font:600 14px/1 var(--font-sans,system-ui)}
@media (min-width:900px){.map-lost-banner{left:auto;right:16px;bottom:16px;max-width:420px}}

/* A pin's card covered the map buttons on the right (Tours, My location); the buttons sit above it,
   as above every other bottom card (test 2026-11-07). --spot-card-h is kept by app.js. */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app[data-h60] #thumbRail{bottom:calc(var(--nav-h) + var(--spot-card-h,230px) + 12px)!important}