/* ═══════════════════════════════════════════════════════════════════════════
   explorer-v3.css — Explorer Service Layer UI
   Modes · Timeline · Rich Cards · Side Panel · Route Builder
   Reuses the existing glass tokens from explorer-layout.css. No new palette.
═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   NO VIDEO BEHIND THE MAP
   The global ambient video is suppressed server-side (boa_use_global_video()),
   but this is the hard stop: the Explorer is a full-bleed map surface and any
   media behind it bleeds through the glass panels and washes out the terrain.
   Defensive rather than decorative — a plugin or a future template change
   must not be able to reintroduce it.
═══════════════════════════════════════════════════════════════════════════ */
body.page-template-page-explore #boaVideoBg,
body.page-template-page-explore .boa-video-bg,
body.page-template-page-explore .global-video,
body.page-template-page-explore > video,
body.boa-v3 #boaVideoBg{
  display:none !important;
}

/* ── THE HEIGHT BUG ───────────────────────────────────────────────────────
   .appShell is calc(100vh - var(--headerH)) with margin-top:var(--headerH),
   which is right. But explorer-layout.css sets .explorer to height:100dvh —
   the FULL viewport — so the Explorer is one header taller than the box that
   contains it, and .appShell clips the overflow.

   The clipped strip is the bottom of the map, which is precisely where
   MapLibre parks its zoom/compass controls. That's why the zoom disappeared.
   Filling the container instead of the viewport fixes the gap, the clipped
   bottom, and the missing zoom in one line.
──────────────────────────────────────────────────────────────────────── */
body.is-explore .explorer,
/* Leave .explorer at its native height:100dvh (set in explorer-layout.css).
   That is what actually worked. The only legitimate correction is the WordPress
   admin bar, which is 32px (46px on narrow screens) of chrome the map should sit
   below — everything else about the height was fine and I should not have
   touched it. */
body.admin-bar.page-template-page-explore .explorer{ height:calc(100dvh - 32px); }
@media screen and (max-width:782px){
  body.admin-bar.page-template-page-explore .explorer{ height:calc(100dvh - 46px); }
}

body.page-template-page-explore{ background:#05070a; }
.explorer{ background:#05070a; }

/* ── MAPLIBRE NATIVE CONTROLS — pin them where they can't be covered ───── */
.explorer .maplibregl-ctrl-bottom-right,
.explorer .mapboxgl-ctrl-bottom-right{
  /* The concierge orb (.boa-ob-guide-btn) owns the very bottom-right corner
     at right:1.5rem bottom:1.5rem. Sit the zoom control ABOVE it so the two
     don't stack on top of each other. */
  bottom:104px; right:18px; z-index:900;
}
.explorer .maplibregl-ctrl-group,
.explorer .mapboxgl-ctrl-group{
  background:var(--glass-bg-warm, rgba(18,16,14,.82));
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px; overflow:hidden;
  backdrop-filter:blur(20px);
  box-shadow:0 8px 28px rgba(0,0,0,.6);
}
.explorer .maplibregl-ctrl-group button,
.explorer .mapboxgl-ctrl-group button{
  width:34px; height:34px; background:transparent;
}
.explorer .maplibregl-ctrl-group button + button{
  border-top:1px solid rgba(255,255,255,.08);
}
.explorer .maplibregl-ctrl-group button span{ filter:invert(1) brightness(1.6); }

/* ── LEGACY RETIREMENT ────────────────────────────────────────────────────
   explorer-app.js stands down under v3 (see boaV3Active()), so its panels
   have no content source. Hiding them here rather than deleting the markup
   keeps the offline fallback path intact: if the DataService ever fails to
   load, boaV3Active() returns false, the legacy app renders, and a tiny
   inline style in explorer-app.js re-shows these. */
body.boa-v3 .filtersPanel,
body.boa-v3 .drawer,
body.boa-v3 .plannerPanel{ display:none !important; }

/* ── Shared card component ────────────────────────────────────────────────
   ONE card. Side panel, drawer rails, route seeds, recommendations — all
   render this. Changing it changes every surface in the Explorer.        */
.boaCard{
  position:relative; display:grid; grid-template-columns:84px 1fr auto;
  gap:14px; align-items:center; padding:12px;
  border:1px solid rgba(255,255,255,.08); border-radius:14px;
  background:rgba(12,14,18,.5); backdrop-filter:blur(14px);
  cursor:pointer; contain:layout style;
  transition:border-color .28s ease, background .28s ease, transform .18s ease;
}
.boaCard:hover{
  background:var(--glass-bg-hover,rgba(25,22,18,.82));
  border-color:rgba(209,168,63,.42);
  transform:translateY(-1px);
}
.boaCard--compact{ grid-template-columns:64px 1fr; padding:10px; }

.boaCard__thumb{
  width:84px; height:84px; border-radius:10px; flex:none;
  background:#111 center/cover no-repeat;
  border:1px solid rgba(255,255,255,.1);
  position:relative; opacity:0; transition:opacity .4s ease;
}
.boaCard__thumb.is-loaded{ opacity:1; }
.boaCard--compact .boaCard__thumb{ width:64px; height:64px; }

.boaCard__type{
  position:absolute; top:-6px; left:-6px;
  width:24px; height:24px; display:grid; place-items:center;
  background:rgba(5,7,10,.85); border:1px solid rgba(209,168,63,.35);
  border-radius:50%; font-size:11px;
}

.boaCard__body{ min-width:0; }
.boaCard__kicker{
  display:block; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-accent,#d1a83f); opacity:.8; margin-bottom:3px;
}
.boaCard__title{
  margin:0 0 3px; font-family:"Cormorant Garamond",serif;
  font-size:17px; font-weight:700; color:var(--text-ivory,#f8f5f0); line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.boaCard__excerpt{
  margin:0; font-size:12px; line-height:1.5;
  color:var(--text-muted,rgba(248,245,240,.6));
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.boaCard__wildlife{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.boaCard__animal{
  font-size:9.5px; padding:2px 6px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07);
  color:rgba(248,245,240,.72); white-space:nowrap;
}
.boaCard__via{
  display:inline-block; margin-top:6px; font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-accent,#d1a83f); opacity:.65;
}
.boaCard__action{
  flex:none; width:34px; height:34px; border-radius:50%;
  background:rgba(209,168,63,.12); border:1px solid rgba(209,168,63,.3);
  color:var(--gold-accent,#d1a83f); font-size:14px; font-weight:800;
  cursor:pointer; transition:all .25s ease;
}
.boaCard__action:hover{ background:var(--gold-accent,#d1a83f); color:#000; }
.boaCard__action:disabled{ opacity:.4; cursor:default; }

/* Horizontal rail — used inside the drawer for each related type. */
.boaRail{
  display:flex; gap:10px; overflow-x:auto; padding:2px 2px 10px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.boaRail > .boaCard{ min-width:270px; scroll-snap-align:start; }

/* ── MODE BAR ────────────────────────────────────────────────────────────
   Four modes. Not four apps — four configurations of the same map.      */
#boaModeBar{
  position:absolute; top:84px; left:50%; transform:translateX(-50%);
  z-index:1500; text-align:center; pointer-events:none;
}
.boaMode__row{
  display:inline-flex; gap:4px; padding:5px; pointer-events:auto;
  background:var(--glass-bg-warm,rgba(18,16,14,.75));
  border:var(--glass-border,1px solid rgba(255,255,255,.08));
  border-radius:999px; backdrop-filter:var(--glass-blur,blur(24px));
  box-shadow:var(--glass-shadow,0 8px 32px rgba(0,0,0,.8));
}
.boaMode__btn{
  display:flex; align-items:center; gap:7px; padding:8px 16px;
  background:transparent; border:0; border-radius:999px;
  color:var(--text-muted,rgba(248,245,240,.6));
  font-size:12px; font-weight:700; letter-spacing:.05em;
  cursor:pointer; white-space:nowrap;
  transition:background .3s ease, color .3s ease;
}
.boaMode__btn:hover{ background:rgba(255,255,255,.06); color:#fff; }
.boaMode__btn.is-active{
  background:var(--gold-accent,#d1a83f); color:#000;
  box-shadow:0 4px 14px rgba(209,168,63,.35);
}
.boaMode__icon{ font-size:14px; }
.boaMode__blurb{
  margin:8px auto 0; max-width:420px; pointer-events:none;
  font-size:11px; line-height:1.5; color:rgba(248,245,240,.5);
  text-shadow:0 2px 8px rgba(0,0,0,.8);
}

/* ── SEASONAL TIMELINE ───────────────────────────────────────────────── */
.boaTimeline{
  position:absolute; left:50%; bottom:18px; transform:translate(-50%,20px);
  z-index:1500; width:min(680px, calc(100vw - 380px));
  padding:14px 18px; opacity:0;
  background:var(--glass-bg-warm,rgba(18,16,14,.78));
  border:var(--glass-border,1px solid rgba(255,255,255,.08));
  border-radius:18px; backdrop-filter:var(--glass-blur,blur(24px));
  box-shadow:var(--glass-shadow-deep,0 24px 64px rgba(0,0,0,.9));
  transition:opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.boaTimeline.is-in{ opacity:1; transform:translate(-50%,0); }

.boaTimeline__head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:10px;
}
.boaTimeline__title{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-accent,#d1a83f);
}
.boaTimeline__zone{
  font-family:"Cormorant Garamond",serif; font-size:16px; font-weight:700;
  color:var(--text-ivory,#f8f5f0);
}
.boaTimeline__months{ display:flex; gap:3px; }
.boaTimeline__m{
  flex:1; padding:8px 0; border:0; border-radius:8px;
  background:rgba(255,255,255,.04); color:rgba(248,245,240,.55);
  font-size:11px; font-weight:700; cursor:pointer;
  transition:background .22s ease, color .22s ease, transform .22s ease;
}
.boaTimeline__m:hover{ background:rgba(255,255,255,.1); color:#fff; }
.boaTimeline__m.is-active{
  background:var(--gold-accent,#d1a83f); color:#000;
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(209,168,63,.4);
}
.boaTimeline__event{
  margin:9px 0 0; font-size:11.5px; text-align:center;
  color:rgba(248,245,240,.65); font-style:italic;
}

/* ── RICH POI DRAWER ─────────────────────────────────────────────────── */
.boaDrawer{
  position:fixed; top:12px; right:12px; bottom:12px; width:480px;
  z-index:2400; overflow-y:auto; overscroll-behavior:contain;
  background:var(--glass-bg-warm,rgba(18,16,14,.9));
  border:var(--glass-border,1px solid rgba(255,255,255,.08));
  border-radius:18px; backdrop-filter:var(--glass-blur,blur(24px));
  box-shadow:var(--glass-shadow-deep,0 24px 64px rgba(0,0,0,.9));
  transform:translateX(115%); pointer-events:none;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.boaDrawer.is-open{ transform:translateX(0); pointer-events:auto; }

.boaDrawer__hero{
  position:relative; height:280px; flex:none;
  background:#0a0d12 center/cover no-repeat;
  border-radius:17px 17px 0 0;
  opacity:0; transition:opacity .5s ease;
}
.boaDrawer__hero.is-loaded{ opacity:1; }
.boaDrawer__scrim{
  position:absolute; inset:0; border-radius:17px 17px 0 0;
  background:linear-gradient(to bottom, rgba(10,12,16,.15) 0%, rgba(18,16,14,.95) 88%);
}
.boaDrawer__close{
  position:absolute; top:16px; right:16px; z-index:5;
  width:38px; height:38px; border-radius:50%; border:0;
  background:var(--gold-accent,#d1a83f); color:#000;
  font-size:16px; font-weight:900; cursor:pointer;
  transition:transform .3s ease, background .3s ease;
}
.boaDrawer__close:hover{ transform:rotate(90deg); background:#fff; }

.boaDrawer__cap{ position:absolute; left:26px; right:26px; bottom:20px; z-index:3; }
.boaDrawer__kicker{
  display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-accent,#d1a83f); margin-bottom:6px;
}
.boaDrawer__title{
  margin:0; font-family:"Cormorant Garamond",serif;
  font-size:36px; font-weight:700; line-height:1.05;
  color:#fff; text-shadow:0 4px 20px rgba(0,0,0,.6);
}

.boaDrawer__body{ padding:24px 26px 40px; }
.boaDrawer__lede{
  margin:0 0 20px; font-size:14.5px; line-height:1.75;
  color:rgba(248,245,240,.82);
}

.boaDrawer__facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:12px; padding:16px; margin-bottom:24px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05);
  border-radius:14px;
}
.boaDrawer__factK{
  display:block; font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(248,245,240,.45); margin-bottom:3px;
}
.boaDrawer__factV{ font-size:13px; color:var(--gold-accent,#d1a83f); font-weight:700; }

.boaDrawer__h3{
  margin:28px 0 12px; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-accent,#d1a83f);
  padding-bottom:8px; border-bottom:1px solid rgba(209,168,63,.18);
}

.boaDrawer__wildlife{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.boaWchip{
  padding:6px 12px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
  color:rgba(248,245,240,.8); font-size:11.5px;
  transition:all .25s ease;
}
.boaWchip:hover{
  background:rgba(209,168,63,.16); border-color:var(--gold-accent,#d1a83f);
  color:var(--gold-accent,#d1a83f); transform:translateY(-1px);
}

.boaDrawer__actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }

.boaDrawer__rel{ margin-bottom:18px; }
.boaDrawer__relH{
  margin:0 0 8px; font-size:12px; font-weight:700;
  color:rgba(248,245,240,.85); display:flex; align-items:center; gap:6px;
}
.boaDrawer__relN{
  font-size:9px; padding:1px 6px; border-radius:999px;
  background:rgba(209,168,63,.15); color:var(--gold-accent,#d1a83f);
}

/* ── BUTTONS ─────────────────────────────────────────────────────────── */
.boaBtn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 18px; border-radius:999px; border:1px solid transparent;
  font-size:12px; font-weight:700; letter-spacing:.04em;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:all .28s ease;
}
.boaBtn--gold{ background:var(--gold-accent,#d1a83f); color:#000; }
.boaBtn--gold:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.boaBtn--ghost{
  background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12);
  color:rgba(248,245,240,.8);
}
.boaBtn--ghost:hover{ border-color:var(--gold-accent,#d1a83f); color:var(--gold-accent,#d1a83f); }
.boaBtn--wa{ background:rgba(37,211,102,.12); border-color:rgba(37,211,102,.35); color:#25d366; }
.boaBtn--wa:hover{ background:rgba(37,211,102,.2); }
.boaBtn:disabled{ opacity:.5; cursor:default; transform:none; }

/* ── SIDE PANEL ──────────────────────────────────────────────────────── */
.boaPanel{
  position:absolute; top:84px; left:12px; bottom:12px; width:400px;
  z-index:1400; display:flex; flex-direction:column; overflow:hidden;
  background:var(--glass-bg,rgba(12,14,18,.78));
  border:var(--glass-border,1px solid rgba(255,255,255,.08));
  border-radius:18px; backdrop-filter:var(--glass-blur,blur(24px));
  box-shadow:var(--glass-shadow-deep,0 24px 64px rgba(0,0,0,.9));
}
.boaPanel__head{
  flex:none; padding:16px; border-bottom:1px solid rgba(255,255,255,.06);
}
.boaPanel__search{ margin-bottom:12px; }
.boaPanel__input{
  width:100%; padding:11px 14px; border-radius:999px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  color:var(--text-ivory,#f8f5f0); font-size:13px; outline:none;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.boaPanel__input::placeholder{ color:rgba(248,245,240,.35); }
.boaPanel__input:focus{
  border-color:var(--gold-accent,#d1a83f);
  box-shadow:0 0 18px rgba(209,168,63,.22);
}
.boaPanel__chips{ display:flex; flex-wrap:wrap; gap:5px; }
.boaChip{
  padding:5px 10px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  color:rgba(248,245,240,.68); font-size:10.5px; white-space:nowrap;
  transition:all .22s ease;
}
.boaChip b{ opacity:.55; font-weight:700; margin-left:2px; }
.boaChip:hover{ background:rgba(255,255,255,.09); color:#fff; }
.boaChip.is-active{
  background:var(--gold-accent,#d1a83f); border-color:var(--gold-accent,#d1a83f); color:#000;
}
.boaChip.is-active b{ opacity:.7; }

.boaPanel__clear{
  margin-top:10px; width:100%; padding:8px; border-radius:10px;
  background:transparent; border:1px dashed rgba(255,255,255,.15);
  color:rgba(248,245,240,.55); font-size:11px; cursor:pointer;
  transition:all .25s ease;
}
.boaPanel__clear:hover{ border-color:var(--gold-accent,#d1a83f); color:var(--gold-accent,#d1a83f); }

.boaPanel__body{
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  padding:14px 16px 20px; -webkit-overflow-scrolling:touch;
}
.boaPanel__count{
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(248,245,240,.42); margin-bottom:12px;
}
.boaPanel__lede{
  font-size:12.5px; line-height:1.65; color:rgba(248,245,240,.62);
  margin:0 0 16px;
}
.boaPanel__h4{
  margin:20px 0 10px; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-accent,#d1a83f);
}
.boaPanel__list{ display:flex; flex-direction:column; gap:8px; }
.boaPanel__empty{
  padding:32px 12px; text-align:center; font-size:13px;
  color:rgba(248,245,240,.45);
}

/* ── WILDLIFE GRID ───────────────────────────────────────────────────── */
.boaWgrid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px;
}
.boaWcell{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:14px 8px; border-radius:12px; cursor:pointer;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  transition:all .25s ease;
}
.boaWcell:hover{ background:rgba(255,255,255,.08); transform:translateY(-2px); }
.boaWcell.is-active{
  background:rgba(209,168,63,.15); border-color:var(--gold-accent,#d1a83f);
}
.boaWcell__e{ font-size:22px; }
.boaWcell__n{ font-size:11px; font-weight:700; color:rgba(248,245,240,.85); }
.boaWcell__c{ font-size:9px; color:rgba(248,245,240,.42); }

/* ── ROUTE BUILDER ───────────────────────────────────────────────────── */
.boaRoute__stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  padding:14px; margin-bottom:14px;
  background:rgba(209,168,63,.06); border:1px solid rgba(209,168,63,.16);
  border-radius:14px;
}
.boaRoute__stat{ text-align:center; }
.boaRoute__statK{
  display:block; font-size:8.5px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(248,245,240,.45); margin-bottom:2px;
}
.boaRoute__statV{ font-size:14px; color:var(--gold-accent,#d1a83f); font-weight:800; }

.boaRoute__warn{
  padding:10px 12px; margin-bottom:14px; border-radius:10px;
  background:rgba(215,120,45,.1); border:1px solid rgba(215,120,45,.25);
  font-size:11.5px; line-height:1.55; color:rgba(248,220,190,.9);
}

.boaRoute__stops{ list-style:none; margin:0 0 16px; padding:0; }
.boaRoute__stop{
  display:grid; grid-template-columns:52px 1fr auto; gap:12px; align-items:center;
  padding:10px; border-radius:12px; cursor:pointer;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  transition:all .22s ease;
}
.boaRoute__stop:hover{ background:rgba(255,255,255,.07); border-color:rgba(209,168,63,.3); }
.boaRoute__thumb{
  width:52px; height:52px; border-radius:9px;
  background:#111 center/cover no-repeat;
  border:1px solid rgba(255,255,255,.08);
  opacity:0; transition:opacity .35s ease;
}
.boaRoute__thumb.is-loaded{ opacity:1; }
.boaRoute__meta{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.boaRoute__n{
  display:inline-block; width:18px; height:18px; line-height:18px;
  border-radius:50%; text-align:center;
  background:var(--gold-accent,#d1a83f); color:#000;
  font-size:9px; font-weight:900;
}
.boaRoute__name{
  font-size:13px; color:var(--text-ivory,#f8f5f0);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.boaRoute__type{ font-size:10px; color:rgba(248,245,240,.48); }
.boaRoute__rm{
  width:26px; height:26px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  color:rgba(248,245,240,.5); font-size:11px;
  transition:all .22s ease;
}
.boaRoute__rm:hover{ background:rgba(215,70,45,.2); border-color:rgba(215,70,45,.5); color:#fff; }

.boaRoute__leg{
  padding:5px 0 5px 26px; margin:2px 0 2px 25px;
  border-left:1px dashed rgba(209,168,63,.3);
  font-size:10.5px; color:rgba(209,168,63,.75); letter-spacing:.03em;
}
.boaRoute__leg.is-flight{ color:rgba(120,180,235,.85); border-left-color:rgba(120,180,235,.35); }

.boaRoute__actions{ display:flex; flex-direction:column; gap:8px; margin-top:18px; }
.boaRoute__actions .boaBtn{ width:100%; }

#boaRouteBadge{
  display:none; min-width:18px; height:18px; padding:0 5px; line-height:18px;
  border-radius:999px; background:var(--gold-accent,#d1a83f); color:#000;
  font-size:10px; font-weight:900; text-align:center;
}
#boaRouteBadge.is-on{ display:inline-block; }

/* ── MOBILE ──────────────────────────────────────────────────────────── */
@media (max-width: 900px){
  /* The legacy filtersPanel no longer has a render path (explorer-app.js
     stands down under v3), so it must not occupy the screen. The v3 panel
     becomes the bottom sheet. */
  .filtersPanel{ display:none !important; }
  .drawer, .plannerPanel{ display:none !important; }

  .boaPanel{
    position:fixed; top:auto; left:0; right:0; bottom:0;
    width:100%; height:74vh; max-height:86vh;
    border-radius:22px 22px 0 0;
    transform:translateY(calc(100% - 58px));   /* peek: search bar visible */
    transition:transform .42s cubic-bezier(.16,1,.3,1);
    z-index:2600; will-change:transform;
  }
  .boaPanel.is-open{ transform:translateY(0); }

  /* Grab handle */
  .boaPanel__head::before{
    content:''; display:block; width:38px; height:4px; margin:0 auto 12px;
    background:rgba(255,255,255,.22); border-radius:2px;
  }
  .boaPanel__head{ cursor:grab; }
  .boaPanel__chips{ max-height:64px; overflow-y:auto; }

  #boaModeBar{ top:64px; width:calc(100vw - 24px); }
  .boaMode__row{
    display:flex; width:100%; overflow-x:auto;
    scrollbar-width:none; justify-content:flex-start;
  }
  .boaMode__row::-webkit-scrollbar{ display:none; }
  .boaMode__btn{ flex:none; padding:7px 13px; font-size:11px; }
  .boaMode__blurb{ display:none; }

  .boaTimeline{
    width:calc(100vw - 20px); left:10px; right:10px; transform:translate(0,20px);
    bottom:76px; padding:11px 13px;
  }
  .boaTimeline.is-in{ transform:translate(0,0); }
  .boaTimeline__m{ padding:9px 0; font-size:10px; }
  .boaTimeline__zone{ font-size:13px; }

  .boaDrawer{
    top:auto; left:0; right:0; bottom:0; width:100%; height:88vh;
    border-radius:22px 22px 0 0;
    transform:translateY(100%);
  }
  .boaDrawer.is-open{ transform:translateY(0); }
  .boaDrawer__hero{ height:210px; border-radius:21px 21px 0 0; }
  .boaDrawer__scrim{ border-radius:21px 21px 0 0; }
  .boaDrawer__title{ font-size:28px; }
  .boaDrawer__body{ padding:18px 18px 60px; }
  .boaDrawer__actions .boaBtn{ flex:1; min-width:130px; }

  .boaRail > .boaCard{ min-width:236px; }
  .boaRoute__stats{ grid-template-columns:repeat(2,1fr); }
}

/* ── Motion preference ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .boaDrawer, .boaTimeline, .boaCard, .boaBtn,
  .boaCard__thumb, .boaDrawer__hero, .boaRoute__thumb{
    transition:none !important; animation:none !important;
  }
  .boaCard__thumb, .boaDrawer__hero, .boaRoute__thumb{ opacity:1 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTROL STACKING — stop the panels sitting on top of each other
   The Explorer has five things competing for the top of the screen:
     .explorer-top   (weather / migration strip)   top:12px,  h≈70px
     #boaModeBar     (Discover/Wildlife/Season)    was top:84px  ← touching
     .map-controls   (style switcher + 3D Terrain) was top:104px ← overlapping
     .boa-ob-*       (onboarding tooltip)          was over the search box
     maplibre zoom                                  was under all of the above
   Give each a lane.
═══════════════════════════════════════════════════════════════════════════ */

/* 1. Mode bar sits clear of the top strip */
#boaModeBar{ top:96px; }

/* 2. Style switcher + terrain toggle drop below the mode bar's lane, and stop
      wrapping "Light" onto its own line. */
.explorer .map-controls{
  top:96px; right:16px;
}
.explorer .map-controls .segmented{
  flex-wrap:nowrap;              /* was wrapping — "Light" fell to row 2 */
  white-space:nowrap;
  padding:4px;
  border-radius:12px;
}
.explorer .map-controls .segmented__btn{
  padding:6px 11px; font-size:11px; flex:none; white-space:nowrap;
}

/* 3. Onboarding tooltip — was landing on the search field. Push it under the
      side panel's header instead of over it. */
.explorer .boa-ob-tip,
.explorer .boa-ob-card,
.explorer [class*="ob-tooltip"]{
  top:auto !important;
  bottom:96px !important;
  left:16px !important;
  right:auto !important;
  max-width:340px;
  z-index:2500;
}

/* 4. Side panel starts below the mode bar too */
.boaPanel{ top:96px; }

@media (max-width:900px){
  #boaModeBar{ top:76px; }
  .explorer .map-controls{ top:auto; bottom:96px; right:12px; }
  .explorer .map-controls .segmented{ flex-wrap:wrap; }
  .explorer .maplibregl-ctrl-bottom-right{ bottom:170px; right:14px; }
  .explorer .boa-ob-tip,
  .explorer .boa-ob-card{ bottom:auto !important; top:130px !important; right:12px !important; }
}

/* Safety net: the map container must never collapse. If a flex ancestor ever
   fails to give it height, this keeps the canvas alive rather than black. */
.explorer .mapWrap, .explorer .explorer-body{ min-height:0; }
.explorer .mapWrap{ height:100%; }
#map{ height:100%; }