/* PeakSeeker — Peak Globe hero (v2-explore.html)
   ------------------------------------------------------------------
   Layout + chrome for the MapLibre globe hero. Colours are pinned
   literals on purpose: this section is always a dark "space" backdrop
   behind white text in BOTH site themes (the --ink-* tokens invert in
   dark mode, which is right for paper surfaces and wrong here — see the
   bug history in peakseeker-post-tier1-2-polish-aug28.md). */

.pk-hero {
  --pk-bg: #070b12;
  --pk-text: #ffffff;
  --pk-dim: rgba(255,255,255,.7);
  --pk-line: rgba(255,255,255,.18);
  --pk-glass: rgba(10,14,20,.62);
  --pk-snow: #8FD3FF; --pk-open: #5FCF8A; --pk-closed: #A5ADB6; --pk-estimated: #E8B54A; --pk-unknown: #6B727B; --pk-pending: #8A9199; --pk-summit: #F5F6F7;
  position: relative;
  min-height: calc(100dvh - 68px); /* masthead is 68px sticky above */
  background: var(--pk-bg);
  color: var(--pk-text);
  overflow: hidden;
  isolation: isolate;
}
/* Starfield behind the globe: the map canvas is transparent outside the sphere. */
.pk-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(1200px 700px at 68% 45%, rgba(63,110,140,.28), transparent 60%),
    radial-gradient(900px 600px at 20% 90%, rgba(168,68,42,.14), transparent 60%),
    url("img/night-sky.png") center / cover no-repeat,
    var(--pk-bg);
  opacity: .95;
}
/* !important: maplibre-gl.css (loaded later) sets .maplibregl-map { position: relative } */
.pk-hero .pk-globe { position: absolute !important; inset: 0; z-index: 1; }
.pk-globe .maplibregl-canvas-container, .pk-globe canvas { outline: none; }
.pk-globe .maplibregl-canvas { cursor: grab; }
.pk-globe .maplibregl-canvas:active { cursor: grabbing; }
.pk-globe .maplibregl-ctrl-bottom-right { right: 14px; bottom: 14px; z-index: 5; }
/* Scout vs. the globe controls (Sep 11 2026, reported by Louis).
   Scout's launcher is fixed at right:16px / bottom:80px and is 56px tall, so
   it occupies 80-136px up from the viewport bottom. .pk-hero is
   100dvh-68px, so its bottom lands on the viewport bottom and this control
   stack sits 14-120px up from the same edge — the two overlap across 80-120px
   and Scout covered the pitch/reset button. The controls move rather than
   Scout: Scout is viewport-fixed and sits in the same place on every page,
   while these live inside the globe, so moving them fixes the collision
   without making one page's launcher behave differently from the rest. */
@media (max-width: 899px) {
  .pk-globe .maplibregl-ctrl-bottom-right { right: auto; left: 14px; }
  .pk-globe .maplibregl-ctrl-bottom-right .maplibregl-ctrl { float: left; }
}
.pk-globe .maplibregl-ctrl-group { background: var(--pk-glass); border: 1px solid var(--pk-line); backdrop-filter: blur(10px); border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.pk-globe .maplibregl-ctrl-group button { width: 34px; height: 34px; }
.pk-globe .maplibregl-ctrl-group button + button { border-top: 1px solid var(--pk-line); }
.pk-globe .maplibregl-ctrl button .maplibregl-ctrl-icon { filter: invert(1); opacity: .85; }
.pk-globe .maplibregl-ctrl-attrib { background: rgba(10,14,20,.5); color: var(--pk-dim); font-size: 10px; border-radius: 8px; }
.pk-globe .maplibregl-ctrl-attrib a { color: var(--pk-dim); }
.pk-globe .maplibregl-ctrl-attrib.maplibregl-compact { background: rgba(10,14,20,.6); }
.pk-globe .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button { filter: invert(1); }
.pk-globe .maplibregl-cooperative-gesture-screen { background: rgba(7,11,18,.7); color: #fff; font-family: var(--font-ui); font-size: .9rem; }
.pk-globe .maplibregl-popup.pk-route-popup .maplibregl-popup-content {
  background: var(--pk-glass); color: #fff; backdrop-filter: blur(10px); border: 1px solid var(--pk-line);
  border-radius: 10px; padding: 8px 12px; font-family: var(--font-ui); font-size: 12px; line-height: 1.35; box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
.pk-globe .maplibregl-popup.pk-route-popup .maplibregl-popup-content strong { display: block; font-weight: 600; font-size: 13px; }
.pk-globe .maplibregl-popup.pk-route-popup .maplibregl-popup-content span { color: var(--pk-dim); }
.pk-globe .maplibregl-popup.pk-route-popup .maplibregl-popup-tip { border-top-color: rgba(10,14,20,.75); border-bottom-color: rgba(10,14,20,.75); }

/* Scrim for text legibility on the left; fades to nothing over the globe. */
.pk-hero-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7,11,18,.86) 0%, rgba(7,11,18,.55) 28%, rgba(7,11,18,0) 52%),
    linear-gradient(180deg, rgba(7,11,18,.35) 0%, rgba(7,11,18,0) 22%, rgba(7,11,18,0) 70%, rgba(7,11,18,.7) 100%);
}

.pk-hero-content {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(84px, 11vh, 120px) clamp(20px, 4vw, 56px) clamp(24px, 4vh, 40px);
}
.pk-hero-content > * { pointer-events: none; }
.pk-hero-content a, .pk-hero-content button, .pk-hero-content input, .pk-hero-content select, .pk-jump, .pk-legend { pointer-events: auto; }

.pk-hero-top { max-width: 560px; }
.pk-eyebrow { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-family: var(--font-ui); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pk-dim); margin-bottom: 18px; }
.pk-eyebrow .pk-live { display: inline-flex; align-items: center; gap: 6px; color: var(--pk-open); letter-spacing: .1em; }
.pk-eyebrow .pk-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 rgba(95,207,138,.6); animation: pk-ping 2.2s infinite; }
@keyframes pk-ping { 0% { box-shadow: 0 0 0 0 rgba(95,207,138,.55); } 70% { box-shadow: 0 0 0 9px rgba(95,207,138,0); } 100% { box-shadow: 0 0 0 0 rgba(95,207,138,0); } }
.pk-title {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1.02; letter-spacing: -.025em; margin: 0 0 18px;
  font-variation-settings: 'opsz' 120, 'SOFT' 20, 'WONK' 1; color: #fff;
  text-shadow: 0 2px 30px rgba(0,0,0,.45);
}
.pk-title em { font-style: italic; color: #cfe6ff; }
.pk-copy { font-family: var(--font-ui); font-size: clamp(.95rem, 1.2vw, 1.0625rem); line-height: 1.55; color: rgba(255,255,255,.82); max-width: 470px; margin: 0 0 26px; }
.pk-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pk-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; font-family: var(--font-ui); font-weight: 600; font-size: .9rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease; color: #fff;
}
.pk-btn:hover { transform: translateY(-1px); }
.pk-btn-primary { background: var(--accent, #A8442A); }
.pk-btn-primary:hover { background: var(--accent-deep, #7E3020); }
.pk-btn-ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); backdrop-filter: blur(8px); }
.pk-btn-ghost:hover { background: rgba(255,255,255,.18); }

.pk-hero-bottom { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 22px; }
.pk-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--font-ui); font-size: .78rem; color: var(--pk-dim); }
.pk-legend-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pk-legend-item i { width: 10px; height: 10px; border-radius: 50%; background: var(--pk-unknown); box-shadow: 0 0 0 1.5px rgba(255,255,255,.65), 0 0 10px currentColor; }
.pk-legend-item b { font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.pk-snow i, .pk-snow > i { background: var(--pk-snow); color: var(--pk-snow); }
.pk-open i, .pk-open > i { background: var(--pk-open); color: var(--pk-open); }
.pk-closed i, .pk-closed > i { background: var(--pk-closed); color: var(--pk-closed); }
.pk-estimated i, .pk-estimated > i { background: var(--pk-estimated); color: var(--pk-estimated); }
.pk-unknown i, .pk-unknown > i, .pk-pending i { background: var(--pk-unknown); color: var(--pk-unknown); }
.pk-summit i, .pk-summit > i { position: relative; width: 13px; height: 13px; border-radius: 50%; background: #0E1013; color: #BFE3FF; box-shadow: 0 0 0 1.5px rgba(245,246,247,.95), 0 0 10px rgba(191,227,255,.6); clip-path: none; }
.pk-summit i::after, .pk-summit > i::after { content: ""; position: absolute; left: 2px; right: 2px; top: 3.5px; bottom: 3.5px; background: #F5F6F7; -webkit-mask: url("peakseeker-mark.svg") center / contain no-repeat; mask: url("peakseeker-mark.svg") center / contain no-repeat; }

.pk-tier-wrap { display: inline-flex; align-items: center; gap: 8px; }
.pk-tier { font-family: var(--font-ui); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pk-dim); padding: 8px 12px; border: 1px solid var(--pk-line); border-radius: 999px; background: var(--pk-glass); backdrop-filter: blur(8px); }
.pk-reset { font: 600 .75rem var(--font-ui); color: #fff; background: rgba(255,255,255,.1); border: 1px solid var(--pk-line); border-radius: 999px; padding: 8px 12px; cursor: pointer; }
.pk-reset:hover { background: rgba(255,255,255,.2); }

.pk-jump { position: relative; margin-left: auto; width: min(420px, 100%); }
.pk-jump-input { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; background: var(--pk-glass); border: 1px solid var(--pk-line); border-radius: 14px; backdrop-filter: blur(12px); box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.pk-jump-input svg { flex: none; color: var(--pk-dim); }
.pk-jump-input input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff; font: 500 .92rem var(--font-ui); padding: 8px 0; }
.pk-jump-input input::placeholder { color: rgba(255,255,255,.5); }
.pk-jump-input select { background: rgba(255,255,255,.08); color: #fff; border: 1px solid var(--pk-line); border-radius: 9px; font: 600 .75rem var(--font-ui); padding: 7px 8px; }
.pk-jump-input select option { color: #0E1013; }
.pk-list {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); max-height: min(46vh, 420px); overflow: auto; display: none;
  background: rgba(10,14,20,.92); border: 1px solid var(--pk-line); border-radius: 14px; backdrop-filter: blur(14px); box-shadow: 0 16px 50px rgba(0,0,0,.5); padding: 6px; z-index: 8;
}
.pk-list.is-open { display: block; }
.pk-list-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: #fff; cursor: pointer; font-family: var(--font-ui); }
.pk-list-row:hover { background: rgba(255,255,255,.08); }
.pk-list-row > i { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 8px currentColor; }
.pk-list-row.pk-summit > i { clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; box-shadow: none; }
.pk-list-row b { display: block; font-weight: 600; font-size: .9rem; }
.pk-list-row em { font-style: normal; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pk-dim); margin-left: 6px; }
.pk-list-row small { display: block; color: var(--pk-dim); font-size: .76rem; margin-top: 2px; }
.pk-list-empty { padding: 14px; color: var(--pk-dim); font: .85rem var(--font-ui); }

/* Selected-pin pulse ring (HTML marker) */
.pk-ring { width: 44px; height: 44px; pointer-events: none; position: relative; }
.pk-ring i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #fff; opacity: 0; animation: pk-ring 2.2s ease-out infinite; }
.pk-ring i + i { animation-delay: 1.1s; }
@keyframes pk-ring { 0% { transform: scale(.35); opacity: .9; } 100% { transform: scale(1.15); opacity: 0; } }

/* Loading + tour caption */
.pk-loading { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--pk-dim); font: .9rem var(--font-ui); background: var(--pk-bg); transition: opacity .6s ease; }
.pk-loading.is-done { opacity: 0; pointer-events: none; }
.pk-loading a { color: #fff; }

/* Small "tiles still loading" pill shown during flyIn, until MapLibre's
   'idle' event says the destination view has actually finished loading --
   without this there's a gap where the mountain just looks unfinished. */
.pk-descending {
  position: absolute; z-index: 4; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(6px);
  display: flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px;
  background: rgba(12,16,23,.85); border: 1px solid var(--pk-line); backdrop-filter: blur(10px);
  color: #fff; font: 500 .78rem var(--font-ui); box-shadow: 0 10px 30px rgba(0,0,0,.4);
  opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease;
}
.pk-descending.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.pk-descending i { width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: pk-spin .8s linear infinite; }
.pk-spinner { width: 22px; height: 22px; border: 2px solid rgba(255,255,255,.2); border-top-color: #fff; border-radius: 50%; animation: pk-spin .9s linear infinite; }
@keyframes pk-spin { to { transform: rotate(360deg); } }
.pk-tour-caption { position: absolute; z-index: 4; left: 50%; top: 16%; transform: translate(-50%, 10px); text-align: center; pointer-events: none; opacity: 0; transition: opacity .8s ease, transform .8s ease; font-family: var(--font-ui); }
.pk-hero.is-touring .pk-tour-caption.is-on { opacity: 1; transform: translate(-50%, 0); }
.pk-tour-caption .pk-tour-kicker { display: block; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--pk-dim); }
.pk-tour-caption strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.4rem); text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.pk-tour-caption span { color: var(--pk-dim); font-size: .9rem; }

/* Pin card */
.pk-card {
  position: absolute; left: 0; top: 0; z-index: 6; width: 300px; display: none;
  background: rgba(12,16,23,.9); border: 1px solid var(--pk-line); border-radius: 16px; overflow: hidden; backdrop-filter: blur(16px);
  box-shadow: 0 24px 70px rgba(0,0,0,.55); color: #fff; font-family: var(--font-ui);
  opacity: 0; transition: opacity .25s ease; will-change: transform;
}
.pk-card.is-open { display: block; }
.pk-card.is-in { opacity: 1; }
.pk-card::after { content: ""; position: absolute; left: var(--arrow-x, 50%); bottom: -7px; width: 12px; height: 12px; margin-left: -6px; background: rgba(12,16,23,.9); border-right: 1px solid var(--pk-line); border-bottom: 1px solid var(--pk-line); transform: rotate(45deg); }
.pk-card.is-below::after { bottom: auto; top: -7px; transform: rotate(225deg); }
.pk-card-close { position: absolute; top: 8px; right: 8px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(0,0,0,.5); color: #fff; font-size: 18px; cursor: pointer; }
.pk-card-media { aspect-ratio: 16/9; background: linear-gradient(135deg, #1a2634, #0d131b); position: relative; }
.pk-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-card-media.is-missing img { display: none; }
.pk-card-media.is-missing::after { content: ""; position: absolute; inset: 0; background: url("peakseeker-mark.svg") center / 44px no-repeat; opacity: .35; }
.pk-card-body { padding: 12px 14px 14px; }
.pk-card-kind { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pk-dim); }
.pk-card h3 { margin: 3px 0 4px; font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; line-height: 1.1; color: #fff; }
.pk-card-meta { font-size: .78rem; color: var(--pk-dim); }
.pk-card-live { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: .8rem; line-height: 1.35; color: #fff; }
.pk-card-live i { flex: none; width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.pk-card-facts { display: flex; gap: 14px; margin-top: 10px; font-size: .76rem; color: var(--pk-dim); }
.pk-card-facts b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.pk-card-actions { display: flex; gap: 8px; margin-top: 12px; }
.pk-card-actions .pk-btn { padding: 9px 12px; font-size: .8rem; flex: 1; justify-content: center; }
.pk-card-actions .pk-btn-fly { background: var(--glacier, #3F6E8C); }
.pk-card-actions .pk-btn-fly:hover { background: #4d84a6; }

/* Route panel (deep zoom) */
.pk-route-panel {
  position: absolute; z-index: 6; left: clamp(20px, 4vw, 56px); bottom: clamp(24px, 4vh, 40px); width: min(380px, calc(100% - 40px));
  background: rgba(12,16,23,.88); border: 1px solid var(--pk-line); border-radius: 16px; backdrop-filter: blur(16px); box-shadow: 0 18px 60px rgba(0,0,0,.5);
  padding: 12px 14px; color: #fff; font-family: var(--font-ui); display: none; transform: translateY(8px); opacity: 0; transition: opacity .3s ease, transform .3s ease;
}
.pk-route-panel.is-open { display: block; opacity: 1; transform: none; }
.pk-rp-head { display: flex; align-items: center; gap: 10px; }
.pk-rp-back { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--pk-line); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; font-size: 14px; }
.pk-rp-kicker { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; }
.pk-rp-loading, .pk-rp-note { font-size: .8rem; color: var(--pk-dim); margin: 6px 0 0; line-height: 1.4; }
.pk-rp-note a, .pk-rp-link { color: #cfe6ff; font-size: .8rem; }
.pk-rp-link { display: inline-block; margin-top: 8px; text-decoration: none; font-weight: 600; }
/* Offered when there is no run/trail overlay to draw — see noRoutesPanel()
   in peak-globe.js. The panel used to dead-end on an error string; this is
   the action worth having there. */
.pk-rp-fly { display: block; width: 100%; margin-top: 10px; padding: 9px 14px; border-radius: 10px;
  border: 1px solid var(--pk-line); background: rgba(255,255,255,.10); color: #fff;
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.pk-rp-fly:hover { background: rgba(255,255,255,.18); }
.pk-rp-fly + .pk-rp-link { margin-right: 14px; }
.pk-rp-summary { font-size: .82rem; margin-top: 6px; }
.pk-rp-dim { color: var(--pk-dim); }
.pk-rp-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; font-size: .74rem; color: var(--pk-dim); align-items: center; }
.pk-rp-sw { display: inline-flex; align-items: center; gap: 6px; }
.pk-rp-sw i { width: 16px; height: 0; border-top: 3px solid var(--c); border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.pk-rp-sw.is-dash i { border-top-style: dashed; }
.pk-rp-all { margin-left: auto; font: 600 .72rem var(--font-ui); color: #fff; background: rgba(255,255,255,.1); border: 1px solid var(--pk-line); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.pk-hero[data-tier="ground"] .pk-hero-top, .pk-hero[data-tier="ground"] .pk-legend { opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.pk-hero[data-tier="mountain"] .pk-hero-top { opacity: .0; pointer-events: none; transition: opacity .4s ease; }
.pk-hero-top { transition: opacity .4s ease; }
.pk-hero[data-tier="ground"] .pk-hero-scrim { opacity: .45; }

.pk-scroll-cue { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 4; color: rgba(255,255,255,.55); animation: pk-bob 2.4s ease-in-out infinite; }
@keyframes pk-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }

/* ---- Mobile: globe gets its own uninterrupted block ------------------
   Compact copy on top, the globe as a full-width block nothing overlaps,
   then legend / search / CTAs below it. */
.pk-actions-mobile { display: none; }
@media (max-width: 900px), (pointer: coarse) and (max-width: 1100px) {
  .pk-hero { min-height: 0; display: grid; grid-template-rows: auto minmax(52vh, 56vh) auto; }
  .pk-hero-scrim { display: none; }
  .pk-hero-content { position: static; display: contents; padding: 0; }
  /* position/z-index: with display:contents on .pk-hero-content the copy
     lost its stacking context and was painting UNDER the absolutely-
     positioned starfield (::before) — the faded-title bug on phones. */
  .pk-hero-top { grid-row: 1; order: 1; padding: 22px 20px 14px; max-width: none; pointer-events: auto; position: relative; z-index: 3; opacity: 1 !important; }
  .pk-eyebrow { margin-bottom: 10px; font-size: .68rem; }
  .pk-title { font-size: clamp(1.9rem, 8.2vw, 2.5rem); margin-bottom: 8px; }
  .pk-copy { display: none; }
  .pk-hero-top .pk-actions { display: none; }
  .pk-actions-mobile { display: flex; gap: 8px; flex: 1 1 100%; }
  /* min-width:0 matters: the two nowrap buttons' min-content (~445px) was
     forcing the hero's single auto grid column wider than the 390px phone
     viewport, which pushed the search box's sort <select> and the legend's
     last count off the right edge. Sep 8 2026 mobile audit. */
  .pk-actions-mobile .pk-btn { flex: 1; justify-content: center; padding: 11px 8px; font-size: .84rem; min-width: 0; }
  .pk-hero { grid-template-columns: minmax(0, 1fr); }
  .pk-hero-top, .pk-hero-bottom { min-width: 0; }
  .pk-hero .pk-globe { position: relative !important; grid-row: 2; order: 2; min-height: 52vh; }
  .pk-loading, .pk-tour-caption { grid-row: 2; }
  .pk-hero-bottom { grid-row: 3; order: 3; padding: 14px 20px calc(20px + 64px); pointer-events: auto; gap: 12px 16px; position: relative; z-index: 3; }
  .pk-legend { opacity: 1 !important; pointer-events: auto !important; }
  .pk-legend { font-size: .72rem; gap: 4px 10px; order: 2; }
  .pk-tier-wrap { order: 3; }
  .pk-jump { margin-left: 0; width: 100%; order: 1; }
  .pk-list { bottom: auto; top: calc(100% + 8px); max-height: 40vh; }
  .pk-card { position: fixed; left: 12px; right: 12px; bottom: calc(12px + 64px); top: auto; width: auto; transform: none !important; z-index: 70; }
  .pk-card::after { display: none; }
  .pk-card-media { aspect-ratio: 21/9; }
  .pk-route-panel { position: fixed; left: 12px; right: 12px; bottom: calc(12px + 64px); width: auto; z-index: 70; }
  .pk-hero[data-tier="ground"] .pk-hero-top, .pk-hero[data-tier="mountain"] .pk-hero-top, .pk-hero[data-tier="ground"] .pk-legend { opacity: 1; pointer-events: auto; }
  .pk-scroll-cue { display: none; }
  .pk-globe .maplibregl-ctrl-bottom-right { bottom: 10px; right: 10px; }
}

/* Scout's floating launcher (assets/concierge.js) is fixed bottom-right
   sitewide, which on this page collides with the hero's own bottom-right
   cluster: the "Jump to a resort or summit" search box (.pk-jump, also
   right-aligned via margin-left:auto) plus MapLibre's native zoom/compass/
   attribution controls (peak-globe.js addControl(..., 'bottom-right')).
   Push Scout up clear of all three here, desktop widths only — the mobile
   layout stacks .pk-jump full-width higher up the page so there's no
   collision to fix below the 900px breakpoint used elsewhere in this file.
   Flagged by Louis (screenshot: launcher sitting on top of the search box). */
@media (min-width: 900px) {
  #psc-root { bottom: calc(150px + env(safe-area-inset-bottom)); }
}