/* 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}

/* Full-screen pages on iPhone: the page scrolls under the status bar, but its title row sticks below it,
   so text and switches that had scrolled past showed through above the title (Felix 2026-11-07, Settings and
   profile). Each sticky title row now also covers the strip above it, the page's own top padding, in the page
   colour. At the top of the page that strip is empty anyway. */
@media (max-width:899px){
  .vertex-v3 #app :is(#youSheet,#activitiesSheet,#activityDetail,#exploreSheet,#compareSheet,#communityView,#settingsSheet,#proUpsellSheet)
    > :is(.you-child-head,.activities-head,.activity-detail-head,.publish-route-head,.people-context-nav,.context-surface-nav)::before,
  .vertex-v3 #app #communityView #communityProfileView > .community-profile-head::before,
  .vertex-v3 #app #youSheet > * > :is(.you-child-head,.activities-head)::before{
    content:'';position:absolute;left:0;right:0;bottom:100%;height:calc(env(safe-area-inset-top,0px) + 24px);
    background:var(--ui-base,var(--g-base));pointer-events:none;
    /* Out to the page's edges with shadows: a wider box (left/right -40px) made every page 26px wider than
       the phone, so it slid sideways under the finger (Bjorn 2026-11-08). Shadows never widen a scroller. */
    box-shadow:-40px 0 0 0 var(--ui-base,var(--g-base)),40px 0 0 0 var(--ui-base,var(--g-base));
  }
  /* Full pages scroll up and down only. */
  /* Strong enough to beat the older overflow:auto!important on these sheets (#app#app #youSheet won before, so
     Add gear still slid sideways under the finger, tester 2026-11-10). */
  body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app :is(#youSheet,#activitiesSheet,#activityDetail,#exploreSheet,#compareSheet,#communityView,#settingsSheet,#proUpsellSheet,#profileEditorSheet){overflow-x:hidden!important;overscroll-behavior-x:none!important}
}

/* My routes: the ⋯ menu of a route was cut off by the list's rounded box (overflow hidden) and the three dots,
   a text glyph, sat off centre in their round button (Felix 2026-11-07). The list lets the menu out; the dots
   are drawn and centred. */
.vertex-v3 #app#app#app#app#app#app#app#app#app #routesList:has(.route-row){overflow:visible!important}
.vertex-v3 #app#app#app#app#app#app#app#app#app #routesList .route-more{display:grid!important;place-items:center!important;width:38px!important;min-width:38px!important;padding:0!important;line-height:1!important}
.vertex-v3 #app #routesList .route-more .more-dots{width:18px;height:18px;fill:currentColor;stroke:none}
.vertex-v3 #app #routesList .route-menu{z-index:20}
.vertex-v3 #app #routesList .route-menu.up{top:auto!important;bottom:40px!important}

/* Recording bar: the round buttons sat on a pale shadowed, blurred strip of their own inside the card, which
   read as a white box (Felix 2026-11-07). They now sit straight on the card like every other card's buttons. */
.vertex-v3 #app#app#app#app#app#app#app #activeSession .active-map-controls{box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:0!important}

/* RIPA Pro on a phone is a full page: it stopped 44 px above the bottom, so Explore · Record · Plan showed
   through underneath (Felix 2026-11-07). It now reaches the bottom; its last line stays clear of the home bar. */
@media (max-width:899px){
  body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app #proUpsellSheet:not([hidden]){top:0!important;bottom:0!important;height:auto!important;max-height:none!important;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 18px)!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}
}

/* Ski log activity card laid out like the tour card (Bjorn ok 2026-11-08, Felix's round): three big numbers,
   the rest as one quiet line under them; Save as route as the one petrol pill, Share/Replay/More as round
   buttons, and Export GPX/Delete in a small menu above More instead of two loose rows. */
.vertex-v3 #app#app#app#app#app#app#app #activityDetail .activity-detail-stats{display:flex!important;flex-wrap:wrap!important;align-items:baseline;gap:6px 0!important;margin:6px 0 14px!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;overflow:visible!important}
.vertex-v3 #app#app#app#app#app#app#app #activityDetail .activity-detail-stats>span{display:flex!important;flex-direction:column;gap:2px;box-sizing:border-box;padding:0 10px!important;min-width:0;background:transparent!important;border:0!important;border-left:1px solid rgba(var(--g-ink-rgb),0.12)!important;border-radius:0!important}
.vertex-v3 #app#app#app#app#app#app#app #activityDetail .activity-detail-stats>span:nth-child(-n+3){flex:0 0 33.333%}
.vertex-v3 #app#app#app#app#app#app#app #activityDetail .activity-detail-stats>span:first-child{padding-left:2px!important;border-left:0!important}
.vertex-v3 #app#app#app#app#app#app#app #activityDetail .activity-detail-stats>span:nth-child(-n+3)>b{font:600 clamp(16px,4.8vw,22px)/1.15 var(--font-sans,Inter,sans-serif)!important;color:var(--g-ink)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vertex-v3 #app#app#app#app#app#app#app #activityDetail .activity-detail-stats>span:nth-child(-n+3)>small{font:500 12px/1.2 var(--font-sans,Inter,sans-serif)!important;color:var(--g-muted)!important;margin:0!important}
.vertex-v3 #app#app#app#app#app#app#app #activityDetail .activity-detail-stats>span:nth-child(n+4){flex:0 0 auto;flex-direction:row-reverse!important;align-items:baseline;gap:4px;padding:0 14px 0 2px!important;border-left:0!important}
.vertex-v3 #app#app#app#app#app#app#app #activityDetail .activity-detail-stats>span:nth-child(n+4)>:is(b,small){display:inline!important;font:500 12px/1.4 var(--font-sans,Inter,sans-serif)!important;margin:0!important;color:var(--g-muted)!important}
.vertex-v3 #app#app#app#app#app#app#app #activityDetail .activity-detail-stats>span:nth-child(n+4)>b{color:var(--g-ink)!important}
.vertex-v3 #app#app#app#app#app#app#app #activityDetail .activity-actions{position:relative!important;display:flex!important;align-items:center!important;gap:8px!important;margin-top:12px!important;grid-template-columns:none!important}
.vertex-v3 #app#app#app#app#app#app#app #activityDetail .activity-actions>button{min-height:0!important;margin:0!important}
.vertex-v3 #app#app#app#app#app#app#app #activityDetail .activity-actions #saveActivityRoute{flex:1 1 auto!important;min-width:0;height:48px!important;padding:0 16px!important;border:0!important;border-radius:999px!important;background:var(--g-accent)!important;color:var(--g-on-accent)!important;font:600 15px var(--font-sans,Inter,sans-serif)!important;white-space:nowrap}
.vertex-v3 #app#app#app#app#app#app#app #activityDetail .activity-actions #saveActivityRoute:disabled{background:var(--g-raised)!important;color:var(--g-muted)!important}
.vertex-v3 #app#app#app#app#app#app#app #activityDetail .activity-actions .activity-round{position:relative;flex:0 0 48px!important;width:48px!important;min-width:48px!important;height:48px!important;padding:0!important;border:0!important;border-radius:50%!important;background:var(--g-raised)!important;color:var(--g-ink)!important;display:grid!important;place-items:center!important;font-size:0!important}
.vertex-v3 #app#app#app#app#app#app#app #activityDetail .activity-actions .activity-round svg{width:20px!important;height:20px!important;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vertex-v3 #app#app#app#app#app#app#app #activityDetail .activity-actions #playActivity svg{fill:currentColor;stroke:none}
.vertex-v3 #app#app#app#app#app#app#app #activityDetail .activity-actions .activity-round svg.more-dots{fill:currentColor;stroke:none}
.vertex-v3 #app#app#app#app#app#app#app #activityDetail .activity-actions #playActivity .pro-badge{position:absolute;top:-4px;right:-6px;margin:0!important;padding:1px 5px;border-radius:999px;font:600 9px/1.4 var(--font-sans,Inter,sans-serif)!important;font-style:normal}
.vertex-v3 #app#app#app#app#app#app#app #activityDetail .activity-more-menu:not([hidden]){position:absolute!important;right:0!important;bottom:calc(100% + 8px)!important;z-index:5;display:grid!important;gap:0!important;left:auto!important;width:190px!important;max-width:none!important;margin:0!important;padding:6px!important;border-radius:14px!important;background:var(--g-surface)!important;border:1px solid rgba(var(--g-ink-rgb),0.08)!important;box-shadow:0 12px 30px rgba(var(--g-shadow-rgb,18,56,75),0.24)!important}
.vertex-v3 #app#app#app#app#app#app#app #activityDetail .activity-more-menu button{display:block!important;width:100%!important;height:42px!important;min-height:42px!important;margin:0!important;padding:0 12px!important;border:0!important;border-radius:10px!important;background:transparent!important;color:var(--g-ink)!important;text-align:left!important;font:500 14px var(--font-sans,Inter,sans-serif)!important}
.vertex-v3 #app#app#app#app#app#app#app #activityDetail .activity-more-menu button:active{background:var(--g-raised)!important}

/* My routes: the ⋯ button is round like every other round button. */
.vertex-v3 #app#app#app#app#app#app#app#app#app #routesList .route-more{height:40px!important;min-height:40px!important;width:40px!important;min-width:40px!important}
.vertex-v3 #app #routesList .route-menu button{font-size:14px!important;font-weight:500!important}

/* A route left on the map: only its small "1 route ✕" pill shows, not the legend strip's pale, shadowed
   box around it (Felix 2026-11-07: after closing a planned route a half see-through card stayed behind). */
html body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app #mapContextStack[data-only-route="true"]{
  width:max-content!important;height:auto!important;min-height:0!important;padding:0!important;border:0!important;border-radius:999px!important;
  background:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* :not([hidden]): display:flex beat the hidden attribute, so "0 routes ✕" stayed after clearing (Bjorn 2026-11-08). */
html body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app #mapContextStack[data-only-route="true"]>#mapRouteChip:not([hidden]){
  display:flex!important;align-items:center!important;gap:0!important;height:40px!important;margin:0!important;padding:0 4px 0 12px!important;border:0!important;border-radius:999px!important;
  background:var(--g-surface)!important;box-shadow:0 4px 14px rgba(var(--g-shadow-rgb),0.18)!important;backdrop-filter:none!important}
html body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app #mapContextStack[data-only-route="true"]>#mapRouteChip button{
  height:40px!important;min-height:40px!important;padding:0 6px!important;border:0!important;border-radius:999px!important;background:transparent!important;box-shadow:none!important;
  font:600 13px/1 var(--font-sans)!important;color:var(--g-ink)!important}
html body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app #mapContextStack[data-only-route="true"]>#mapRouteChip #clearMapRoutes{width:36px!important;font-size:16px!important}

/* Route colours & arrows as a picture (Felix 2026-11-07): sample lines drawn like the map's route line
   (core = way you move, edge = steepness today) and the map's own arrowheads. */
.vertex-v3 #app .route-key{display:grid;gap:8px;margin:10px 0 2px}
.vertex-v3 #app .route-key small{font:600 11px/1.2 var(--font-sans);letter-spacing:.06em;color:var(--g-muted)}
.vertex-v3 #app .route-key-row{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:4px}
.vertex-v3 #app .route-key-row span,.vertex-v3 #app .route-key-note{display:flex;align-items:center;gap:6px;font:500 13px/1.3 var(--font-sans);color:var(--g-ink)}
.vertex-v3 #app .route-key-row b{font:inherit;color:inherit}
.vertex-v3 #app .route-key-line{flex:none;width:26px;height:8px;border-radius:4px;background:var(--core);box-shadow:0 0 0 2px var(--edge)}
.vertex-v3 #app .route-key-arrows{flex:none;fill:#fff;stroke:#111820;stroke-width:2.2;stroke-linejoin:round;margin-left:-2px}
.vertex-v3 #app .route-key-note{margin:2px 0 0;font-size:12px;color:var(--g-muted)}

/* Area card held low (src/app.js syncPlacePeek): the map buttons ride just above it and the layer legend
   and the centre altitude stay, instead of all vanishing the moment the card starts to open
   (Felix 2026-11-07). Phones only; an area card opened to its normal height still has the map to itself. */
@media (max-width:899px){
  html body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app[data-card-peek]:not(#_h):not(#_i) #thumbRail{display:flex!important;bottom:var(--place-card-top-clear)!important;top:auto!important}
  html body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app[data-card-peek]:not(#_h):not(#_i) #mapCenterAltitude{display:block!important}
  html body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app[data-card-peek]:not(#_h):not(#_i) #layerSideControls{visibility:visible!important}
}

/* Snow surface: white on the map gets its own key, "Unrated", a hatched box (Felix 2026-11-07).
   Thin hatching on a transparent colour: the side pill copies it (src/layer-legend-data.js reads the computed
   background) and the layer chip's dot stays made of the four real colours (src/legend-chips.js). */
.vertex-v3 #app#app#app#app#app#app#app #firnLegend .f-unrated{background:repeating-linear-gradient(135deg,rgba(var(--g-ink-rgb),0.34) 0 1.5px,rgba(0,0,0,0) 1.5px 4px)!important}

/* Hold and drag to reorder (src/drag-reorder.js, Bjorn 2026-11-08): the Map layers list has a grip instead of
   up/down arrows, and the buttons under search can be held and dragged on the map. A held item lifts with a
   shadow above the others; the others slide aside. No text selection or iPhone callout while holding. */
html body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-chip-opt .shell-chip-grip{width:44px;height:44px;background:transparent!important;color:var(--g-muted)!important;touch-action:none;cursor:grab}
html body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-chip-opt .shell-chip-grip svg{width:22px;height:22px;stroke-width:2}
:is(.shell-chip-options,.shell-chips) :is(.shell-chip-opt,.shell-chip){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
:is(.shell-chip-options,.shell-chips).drag-reordering :is(.shell-chip-opt,.shell-chip):not(.drag-lifted){transition:transform .18s cubic-bezier(.2,.8,.2,1)}
html body.vertex-v3 #app .shell-chip-options .shell-chip-opt.drag-lifted{position:relative;z-index:3;background:var(--g-surface);border-radius:14px;box-shadow:0 10px 26px rgba(var(--g-shadow-rgb),0.24);transition:none}
html body.vertex-v3 #app .shell-chips .shell-chip.drag-lifted{position:relative;z-index:3;box-shadow:0 10px 24px rgba(var(--g-shadow-rgb),0.30)!important;transition:none!important}
.shell-chips.drag-reordering{scroll-snap-type:none!important;overflow-x:hidden!important}

/* Profile page (Bjorn 2026-11-10, proposal B): title just "Profile", the name once under a centred picture,
   Edit profile as the one petrol action, the numbers as one row with thin dividers, plain section titles. */
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView .community-profile-hero{display:block!important;padding:8px 0 0!important;text-align:center!important}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView .community-profile-hero>div:not(.community-profile-stats){display:block!important}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView .community-profile-avatar{display:grid!important;margin:0 auto 10px!important;width:72px!important;height:72px!important;background:rgba(var(--g-accent-rgb,24,102,118),.12)!important;color:var(--g-accent)!important;font:600 28px/1 Outfit,Inter,sans-serif!important}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView #communityProfileTitle{display:block!important;font:600 22px/1.2 Outfit,Inter,sans-serif!important;color:var(--g-ink)!important;overflow-wrap:anywhere}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView #communityProfileMeta{display:block!important;margin-top:3px!important;font-size:13px!important;color:var(--g-muted)!important}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView #communityProfileMeta:empty{display:none!important}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView #communityProfileBio{text-align:center!important}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView :is(#communityProfileActions,#communityFriendActions,#communitySafetyActions):not([hidden]){margin-top:16px!important;gap:8px!important}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView :is(#communityProfileActions,#communityFriendActions,#communitySafetyActions) button{height:40px!important;border-radius:999px!important;font-size:14px!important}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView #communityProfileEdit{background:var(--g-accent)!important;color:var(--g-on-accent)!important}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView #communityProfileSettings{background:var(--g-raised)!important;color:var(--g-ink)!important}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView .community-profile-stats:not([hidden]){display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:0!important;margin:16px 0 0!important;padding:14px 0 0!important;border:0!important;border-top:1px solid rgba(var(--g-ink-rgb),.08)!important;border-radius:0!important;background:none!important}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView .community-profile-stats>span{display:block!important;min-height:0!important;padding:0!important;text-align:center!important;background:none!important;border:0!important;border-left:1px solid rgba(var(--g-ink-rgb),.08)!important;border-radius:0!important}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView .community-profile-stats>span:first-child{border-left:0!important}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView .community-profile-stats>span>b{display:block;font:600 18px/1.2 Inter,sans-serif!important;color:var(--g-ink)!important}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView .community-profile-stats>span>small{display:block;font-size:12px!important;text-transform:none!important;letter-spacing:0!important;color:var(--g-muted)!important}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView .community-section-head{margin:22px 0 8px!important}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView .community-section-head h2{display:flex!important;align-items:center;gap:8px;font:600 17px/1.2 Inter,sans-serif!important;color:var(--g-ink)!important}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView .community-profile-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--g-raised);color:var(--g-muted);font-size:12px;font-weight:600}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView .community-profile-empty{margin:0 0 4px;color:var(--g-muted);font-size:13px}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView .community-profile-empty[hidden]{display:none!important}
/* Friend's profile (Bjorn 2026-11-10): First Flock number and home mountain as two small tags under Joined. */
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView .community-profile-tags:not([hidden]){display:flex!important;flex-wrap:wrap;justify-content:center;gap:6px;margin:8px 0 2px}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView .community-profile-tags :is(.community-profile-flock,.community-profile-home)[hidden]{display:none!important}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView .community-profile-flock{display:inline-flex!important;align-items:center;gap:6px;max-width:100%;padding:4px 10px 4px 7px;border-radius:999px;background:rgba(var(--g-accent-rgb,24,102,118),.14);color:var(--g-accent)!important;font:600 13px/1.2 Inter,sans-serif!important;white-space:nowrap}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView .community-profile-flock em{font-style:normal;font-weight:500;opacity:.75}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView .community-profile-home{display:inline-flex!important;align-items:center;gap:5px;max-width:100%;padding:4px 10px 4px 7px;border-radius:999px;background:var(--g-raised);color:var(--g-ink)!important;font:500 13px/1.2 Inter,sans-serif!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView .community-profile-home span{overflow:hidden;text-overflow:ellipsis}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView .community-profile-tags svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #communityView #communityProfileView .community-profile-home svg{color:var(--g-muted)}