/* Cards that scroll keep their top: the title row, the area figures and the tabs stay put and only the
   content under them scrolls (one scroller per card, never a card scrolling inside a card). A soft fade at
   the bottom edge says there is more to see. Loaded last, so these rules win. */

/* Area card */
.vertex-v3 #app#app#app#app#app#app#app #placeCard:not(.collapsed){display:flex!important;flex-direction:column!important;overflow:hidden!important}
.vertex-v3 #app#app#app#app#app#app#app #placeCard:not(.collapsed)>.place-card-content{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important;overflow:visible!important}
.vertex-v3 #app#app#app#app#app#app#app #placeCard:not(.collapsed)>.place-card-content>*{flex:0 0 auto}
.vertex-v3 #app#app#app#app#app#app#app #placeCard:not(.collapsed) .place-expanded-content{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important}
.vertex-v3 #app#app#app#app#app#app#app #placeCard:not(.collapsed) .place-expanded-content>*{flex:0 0 auto}
.vertex-v3 #app#app#app#app#app#app#app #placeCard:not(.collapsed) .area-panel:not([hidden]){flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* Tour card */
.vertex-v3 #app#app#app#app#app#app#app #routeDetail:not([hidden]){display:flex!important;flex-direction:column!important;overflow:hidden!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail>*{flex:0 0 auto}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail>.publish-route-sheet{flex:none}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail>.route-detail-content{flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;overscroll-behavior:contain;display:flex!important;flex-direction:column;gap:12px;padding:2px 0 14px!important;margin:0!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-detail-content>*{flex:0 0 auto;margin:0!important}

/* Bottom fade while more is below, on whichever part scrolls. */
.vertex-v3 #app#app#app#app#app#app#app :is(#placeCard .area-panel,#routeDetail>.route-detail-content)[data-more]{-webkit-mask-image:linear-gradient(#000 calc(100% - 46px),#0000);mask-image:linear-gradient(#000 calc(100% - 46px),#0000)}

/* Tour card content: one quiet row of figures, then today, the profile, links and the source. */
.vertex-v3 #app#app#app#app#app#app#app #routeDetailStats{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:0!important;padding:2px 0 0!important;border:0!important;background:none!important;overflow:visible!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetailStats>span{display:grid!important;gap:3px;padding:0 10px!important;border:0!important;border-left:1px solid #ffffff14!important;border-radius:0!important;background:none!important;box-shadow:none!important;min-width:0}
.vertex-v3 #app#app#app#app#app#app#app #routeDetailStats>span:first-child{border-left:0!important;padding-left:2px!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetailStats>span:nth-child(n+4){display:none!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetailStats b{font-size:21px!important;font-weight:700!important;line-height:1.1!important;color:var(--ui-text,#eef1f4)!important;white-space:nowrap;letter-spacing:-.01em}
.vertex-v3 #app#app#app#app#app#app#app #routeDetailStats small{font-size:12px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;color:var(--ui-muted,#9aa3ad)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vertex-v3 #app#app#app#app#app#app#app #routeDetailStats .route-detail-more{grid-column:1/-1;margin:8px 0 0 2px;font-size:12px;color:var(--ui-muted,#9aa3ad)}

.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-today{padding:10px 12px!important;border:0!important;border-radius:14px!important;background:#ffffff0a!important;gap:11px!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-today small{font-size:11px!important;font-weight:600!important;letter-spacing:.04em!important;color:var(--ui-muted,#9aa3ad)!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-today b{font-size:14px!important;font-weight:600!important;color:var(--ui-text,#eef1f4)!important}

.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-profile-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px;margin:2px 0 -4px!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-profile-head>span{font-size:14px!important;font-weight:650!important;color:var(--ui-text,#eef1f4)!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-profile-head>span small{margin-left:6px;font-size:12px!important;font-weight:500;color:var(--ui-muted,#9aa3ad)!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetailReplay{display:inline-flex!important;align-items:center;gap:6px;min-height:34px!important;height:34px;padding:0 13px!important;border:0!important;border-radius:999px!important;background:#ffffff14!important;color:var(--ui-text,#eef1f4)!important;font-size:13px!important;font-weight:600!important;flex:none!important;min-width:0!important;width:auto!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetailReplay svg{width:14px;height:14px;fill:currentColor}
.vertex-v3 #app#app#app#app#app#app#app #routeDetailReplay em{font-size:9px;font-style:normal}

.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-detail-links{display:grid;border-radius:14px;background:#ffffff0a;overflow:hidden}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-detail-links:not(:has(button:not([hidden]))){display:none!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-link-row{display:flex!important;align-items:center!important;gap:12px;width:100%;min-height:56px!important;margin:0!important;padding:8px 14px!important;border:0!important;border-radius:0!important;background:none!important;color:var(--ui-text,#eef1f4)!important;text-align:left!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-link-row[hidden]{display:none!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-link-row+.route-link-row:not([hidden]){border-top:1px solid #ffffff12!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-link-row svg{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:#9cc3ff}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-link-row>span{display:grid;gap:2px;flex:1;min-width:0}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-link-row b{font-size:15px;font-weight:600}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-link-row small{display:block!important;font-size:12px!important;font-weight:400!important;color:var(--ui-muted,#9aa3ad)!important;margin:0!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-link-row>i{font-style:normal;color:var(--ui-muted,#9aa3ad);font-size:15px}

.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-community-info:not([hidden]){padding:0 2px!important;border:0!important;background:none!important;box-shadow:none!important;gap:4px!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-community-info>small{font-size:11px!important;font-weight:600!important;letter-spacing:.04em!important;color:var(--ui-muted,#9aa3ad)!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-community-info>b{font-size:14px!important;font-weight:600!important;color:var(--ui-text,#eef1f4)!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-community-info>span{font-size:12px!important;line-height:1.45!important;color:var(--ui-muted,#9aa3ad)!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-incline-key{margin:0!important;padding:0 2px!important;border:0!important;background:none!important;font-size:12px;color:var(--ui-muted,#9aa3ad)}

/* One row of actions under the content. */
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-detail-actions{display:flex!important;flex-wrap:nowrap!important;align-items:stretch;gap:8px!important;margin:0!important;padding:12px 0 0!important;border-top:1px solid #ffffff12!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-detail-actions .route-choice-actions{display:flex!important;flex:1 1 auto!important;gap:8px!important;margin:0!important;min-width:0}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-detail-actions .route-choice-actions:not(:has(button:not([hidden]))){display:none!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-detail-actions :is(#routeDetailGo,#routeDetailSaveCommunity,#routeDetailMore){min-height:40px!important;height:40px!important;margin:0!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-detail-actions #routeDetailGo{flex:1 1 auto!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-detail-actions #routeDetailSaveCommunity:not([hidden]){flex:0 0 auto!important;order:0!important;padding:0 18px!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-detail-actions #routeDetailMore{flex:0 0 44px!important;width:44px!important;margin-left:auto!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-link-row{flex-direction:row!important;justify-content:flex-start!important}
/* Area card: the tour count stays readable on the selected tab. */
.vertex-v3 #app#app#app#app#app#app#app #areaTabTours[aria-selected="true"] #areaToursCount{color:#ffffffc7!important}
/* The map's attribution (i) sits on the map, under cards, instead of floating on top of them. */
.vertex-v3 #app#app#app#app#app#app#app #map .maplibregl-ctrl-bottom-right,.vertex-v3 #app#app#app#app#app#app#app #map .maplibregl-ctrl-bottom-left{z-index:0!important}

/* Search hits: the same rows as Recent, Saved and Nearby. */
.vertex-v3 #app#app#app#app#app#app#app #searchResults .search-result{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;width:100%!important;min-height:64px!important;margin:0!important;padding:10px 2px!important;border:0!important;border-bottom:1px solid #ffffff14!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--ui-text)!important;text-align:left!important}
.vertex-v3 #app#app#app#app#app#app#app #searchResults .search-result:last-child{border-bottom:0!important}
.vertex-v3 #app#app#app#app#app#app#app #searchResults .search-result:is(:hover,:focus-visible,:active){background:#ffffff0d!important}
.vertex-v3 #app#app#app#app#app#app#app #searchResults .search-result-icon{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--ui-raised);color:#9cc3ff}
.vertex-v3 #app#app#app#app#app#app#app #searchResults .search-result-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.vertex-v3 #app#app#app#app#app#app#app #searchResults .search-result-copy{display:grid;gap:3px;flex:1;min-width:0}
.vertex-v3 #app#app#app#app#app#app#app #searchResults .search-result-copy b{font:600 16px/1.25 system-ui!important;color:var(--ui-text)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left!important}
.vertex-v3 #app#app#app#app#app#app#app #searchResults .search-result-copy small{font:400 13px/1.3 system-ui!important;color:var(--ui-muted)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left!important;max-width:none!important}
.vertex-v3 #app#app#app#app#app#app#app #searchResults .search-result-chevron{flex:none;color:var(--ui-muted)}
.vertex-v3 #app#app#app#app#app#app#app #searchResults .search-result-chevron svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.vertex-v3 #app#app#app#app#app#app#app #searchResults{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail #routeDetailMeta{font-size:12px!important;color:var(--ui-muted,#9aa3ad)!important}

/* Primary blue buttons: one compact size everywhere (40 px, 14 px text) so they don't take the screen. */
.vertex-v3 #app#app#app#app#app#app#app :is(#startRecord:not([hidden]),#routeDetailGo,#saveSettings,#mapFeatureLink,#placePeekDetails,#savePlannedRoute,.area-panel-actions button,.route-add-primary,.spot-actions button.primary,.publish-route-sheet .route-primary,#communityView form button){min-height:40px!important;height:auto!important;padding-top:8px!important;padding-bottom:8px!important;border-radius:12px!important;font-size:14px!important;font-weight:600!important;line-height:1.2!important}
.vertex-v3 #app#app#app#app#app#app#app #recordSheet #startRecord:not([hidden]){min-height:44px!important;font-size:15px!important}
.vertex-v3 #app#app#app#app#app#app#app #recordSheet #startRecord svg{width:16px!important;height:16px!important}

/* One-tap Start: the Record card stays invisible while recording is being started. */
.vertex-v3 #app#app#app#app#app#app#app #recordSheet.quick-start{visibility:hidden!important;animation:none!important}

/* Hover tips (src/fast-tips.js): the same dark card style, shown at once instead of the browser's slow tooltip. */
.fast-tip{position:fixed;z-index:200;max-width:260px;padding:6px 10px;border:1px solid #ffffff20;border-radius:10px;background:#1e2126;color:#f1f3f5;font:500 12.5px/1.35 system-ui,sans-serif;box-shadow:0 4px 14px #0006;pointer-events:none;animation:fast-tip-in 90ms ease-out}
.fast-tip[hidden]{display:none}
@keyframes fast-tip-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.fast-tip{animation:none}}