/**
 * Boat Atlas DS v2 — Explore / Instrument preview.
 *
 * Restyles the working legacy Atlas runtime instead of replacing it. Mapbox,
 * weather, bathymetry, place data, and navigation keep their existing behavior.
 */

@import "./voice-search-overlay.css";

/* Map boot placeholder: avoid a long pure-black void after route pending.
   Mapbox canvas covers this as soon as GL paints. */
body.explore-v2 #map,
body.explore-v2 .mapboxgl-map {
  background-color: #0a2028;
  background-image:
    radial-gradient(120% 80% at 50% 42%, rgba(43, 190, 242, 0.14) 0%, transparent 55%),
    linear-gradient(180deg, #0e2a34 0%, #041820 72%, #03141a 100%);
}

/* Anti-FOUC: hide legacy atlas chrome until explore-v2-shell.js finishes
   restyling and stamps body.ev2-chrome-ready. Critical duplicate of this
   hide also lives inline in ExploreMount (before legacy <link> CSS) so the
   classic UI cannot paint while this stylesheet is still downloading.

   Include `.inspector` — the classic white conditions card is the main flash
   on hard reload before v2 restyles it into the glass forecast panel.

   body.explore-v2 alone is NOT enough to reveal — that class is stamped by
   the route boot script before first paint, which would re-expose old chrome
   under legacy CSS.

   BA-427: also hide bare #wx-field-toggle / .map-tools / nav when not ready,
   in case nodes sit outside .atlas-body-mount during remount.

   Light chrome is opt-in via body.atlas-chrome-light only. Do not use
   :not(.atlas-chrome-dark) — a missing theme class must stay dark (default). */
body.explore-v2:not(.ev2-chrome-ready) #wx-field-toggle,
body.explore-v2:not(.ev2-chrome-ready) .wx-field-toggle,
body.explore-v2:not(.ev2-chrome-ready) .map-tools,
body.explore-v2:not(.ev2-chrome-ready) .data-dock,
body.explore-v2:not(.ev2-chrome-ready) #m-cond-peek,
body.explore-v2:not(.ev2-chrome-ready) #m-map-layers,
body.explore-v2:not(.ev2-chrome-ready) .m-summary,
body.explore-v2:not(.ev2-chrome-ready) .inspector,
body.explore-v2:not(.ev2-chrome-ready) .inspector-tab,
body.explore-v2:not(.ev2-chrome-ready) .m-week-strip,
body.explore-v2:not(.ev2-chrome-ready) .timeline-dock,
body.explore-v2:not(.ev2-chrome-ready) .legend-chip,
body.explore-v2:not(.ev2-chrome-ready) .coverage-chip,
body.explore-v2:not(.ev2-chrome-ready) .ba-nav-wrap,
body.explore-v2:not(.ev2-chrome-ready) .ba-nav-wrap--dark,
body.explore-v2:not(.ev2-chrome-ready) .ba-v2-forecast-card,
body.explore-v2:not(.ev2-chrome-ready) .ba-v2-layer-scroll-hint,
.ba-v11 .atlas-body-mount .wx-field-toggle,
.ba-v11 .atlas-body-mount .map-tools,
.ba-v11 .atlas-body-mount .data-dock,
.ba-v11 .atlas-body-mount #m-cond-peek,
.ba-v11 .atlas-body-mount #m-map-layers,
.ba-v11 .atlas-body-mount .m-summary,
.ba-v11 .atlas-body-mount .inspector,
.ba-v11 .atlas-body-mount .inspector-tab,
.ba-v11 .atlas-body-mount .m-week-strip,
.ba-v11 .atlas-body-mount .status-bar,
.ba-v11 .atlas-body-mount .timeline-dock,
.ba-v11 .atlas-body-mount .legend-chip,
.ba-v11 .atlas-body-mount .coverage-chip,
.explore-v2 .atlas-body-mount .wx-field-toggle,
.explore-v2 .atlas-body-mount .map-tools,
.explore-v2 .atlas-body-mount .data-dock,
.explore-v2 .atlas-body-mount #m-cond-peek,
.explore-v2 .atlas-body-mount #m-map-layers,
.explore-v2 .atlas-body-mount .m-summary,
.explore-v2 .atlas-body-mount .inspector,
.explore-v2 .atlas-body-mount .inspector-tab,
.explore-v2 .atlas-body-mount .m-week-strip,
.explore-v2 .atlas-body-mount .status-bar,
.explore-v2 .atlas-body-mount .timeline-dock,
.explore-v2 .atlas-body-mount .legend-chip,
.explore-v2 .atlas-body-mount .coverage-chip,
/* Forecast chip + layer coachmark sit outside the classic chrome list and
   painted over the black Mapbox void during load (staging recording). */
.ba-v11 .ba-v2-forecast-card,
.explore-v2 .ba-v2-forecast-card,
.ba-v11 .ba-v2-layer-scroll-hint,
.explore-v2 .ba-v2-layer-scroll-hint,
/* Nav can flash light glass before dark chrome classes settle. */
.explore-v2 .ba-nav-wrap,
.explore-v2 .ba-nav-wrap--dark,
.ba-v11 .ba-nav-wrap,
.ba-v11 .ba-nav-wrap--dark {
  visibility: hidden !important;
}
body.explore-v2.ev2-chrome-ready .atlas-body-mount .wx-field-toggle,
body.explore-v2.ev2-chrome-ready .atlas-body-mount .map-tools,
body.explore-v2.ev2-chrome-ready .atlas-body-mount .data-dock,
body.explore-v2.ev2-chrome-ready .atlas-body-mount #m-cond-peek,
body.explore-v2.ev2-chrome-ready .atlas-body-mount #m-map-layers,
body.explore-v2.ev2-chrome-ready .atlas-body-mount .m-summary,
body.explore-v2.ev2-chrome-ready .atlas-body-mount .inspector,
body.explore-v2.ev2-chrome-ready .atlas-body-mount .inspector-tab,
body.explore-v2.ev2-chrome-ready .atlas-body-mount .m-week-strip,
body.explore-v2.ev2-chrome-ready .atlas-body-mount .status-bar,
body.explore-v2.ev2-chrome-ready .atlas-body-mount .timeline-dock,
body.explore-v2.ev2-chrome-ready .atlas-body-mount .legend-chip,
body.explore-v2.ev2-chrome-ready .atlas-body-mount .coverage-chip,
body.explore-v2.ev2-chrome-ready .ba-v2-forecast-card,
body.explore-v2.ev2-chrome-ready .ba-v2-layer-scroll-hint,
body.explore-v2.ev2-chrome-ready .ba-nav-wrap,
body.explore-v2.ev2-chrome-ready .ba-nav-wrap--dark,
/* BA-304 / BA-427: rail may sit outside .atlas-body-mount */
body.explore-v2.ev2-chrome-ready #wx-field-toggle,
body.explore-v2.ev2-chrome-ready .wx-field-toggle,
body.explore-v2.ev2-chrome-ready .map-tools,
body.explore-v2.ev2-chrome-ready .data-dock {
  visibility: visible !important;
}

/* Plan/Nav right rail: wait for explore-mode cells before revealing .map-tools.
   Use display:none (not only visibility) so child visibility:visible and the
   :has(#nav-plan) / nav-planning overrides cannot resurrect the legacy stack
   (2D/3D/Water/Dark/locate) before Plan/Layer/Look/Day mount.
   The installer only stamps ba-explore-mode-ready after those cells exist. */
body.explore-v2.ev2-chrome-ready:not(.ba-explore-mode-ready) .map-tools,
body.explore-v2.ev2-chrome-ready:not(.ba-explore-mode-ready) .atlas-body-mount .map-tools,
body.explore-v2.ev2-chrome-ready:not(.ba-explore-mode-ready):has(#nav-plan:not([hidden])) .map-tools,
body.explore-v2.ev2-chrome-ready:not(.ba-explore-mode-ready).nav-planning .map-tools,
body.explore-v2.ev2-chrome-ready:not(.ba-explore-mode-ready).nav-active .map-tools,
body.atlas-scope.explore-v2.ev2-chrome-ready:not(.ba-explore-mode-ready).nav-planning .map-tools,
body.atlas-scope.explore-v2.ev2-chrome-ready:not(.ba-explore-mode-ready).nav-active .map-tools {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.explore-v2.ev2-chrome-ready.ba-explore-mode-ready .map-tools,
body.explore-v2.ev2-chrome-ready.ba-explore-mode-ready .atlas-body-mount .map-tools,
body.explore-v2.ev2-chrome-ready.weatheroo.ba-explore-mode-ready .map-tools,
body.explore-v2.ev2-chrome-ready.weatheroo.ba-explore-mode-ready .atlas-body-mount .map-tools {
  display: flex !important;
  visibility: visible !important;
}

/* Legacy view cells stay mounted as Look/Day implementation hooks only.
   Early hide so mobile thumb rules (display:contents / #btn3d grid) cannot
   paint 2D/3D/Water/Dark before later Plan/Nav rules or explore-mode install. */
body.explore-v2 .map-view-modes,
body.explore-v2 #btn-map-2d,
body.explore-v2 #btn3d,
body.explore-v2 #btn-water-view,
body.explore-v2 .map-nav-view .style-toggle--aux,
body.explore-v2 #btn-chrome,
body.explore-v2 #map-rail-clouds,
body.explore-v2 #btn-chase-view {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Classic-only chrome must never paint on Explore v2 (BA-426 / BA-427). */
body.explore-v2 .m-tabbar,
body.explore-v2 #m-tabbar,
body.explore-v2 .status-bar,
body.explore-v2 #status-bar,
body.explore-v2 .ba-v2-pins {
  display: none !important;
}

/* BA-304: keep desktop map-options rail visible outside nav/plan modes */
@media (min-width: 901px) {
  body.explore-v2.ev2-chrome-ready:not(.nav-active):not(.nav-planning) #wx-field-toggle,
  body.explore-v2.ev2-chrome-ready:not(.nav-active):not(.nav-planning) .wx-field-toggle,
  body.explore-v2.ev2-chrome-ready:not(.nav-active):not(.nav-planning) .wx-field-toggle.on {
    display: inline-flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}
/* Keep header search from flashing in the top nav on phone before reparent. */
@media (max-width: 900px) {
  .explore-v2.ba-v11 .ba-nav-wrap .nav-search-wrap,
  .explore-v2.ba-v11 .ba-nav-wrap--map-search .nav-search-wrap,
  body.explore-v2 .ba-nav-wrap .nav-search-wrap,
  body.explore-v2 .ba-nav-wrap--map-search .nav-search-wrap {
    display: none !important;
  }
}

body.explore-v2 {
  --x-blue: var(--ba-blue, #0b63f6);
  --x-ink: #041820;
  /* Glass fill kept light so the map reads through; blur carries readability. */
  --x-glass: rgba(4, 24, 32, 0.42);
  --x-panel: rgba(4, 24, 32, 0.48);
  --x-glass-blur: blur(28px) saturate(160%);
  --x-line: rgba(255, 255, 255, 0.16);
  --x-text: #f7fbfc;
  --x-muted: rgba(238, 246, 248, 0.72);
  --x-shadow: 0 18px 48px rgba(0, 10, 18, 0.22);
  --font-ba-sans: var(--font-ba-sans, "Neue Haas Grotesk Display Pro"), system-ui, sans-serif;
  /* Instrument chrome stack: nav → layers → timeline → tools. */
  --ev2-chrome-inset: 8px;
  /* Side inset for floating nav + left stack (forecast card, legends). */
  --ev2-chrome-side: 28px;
  --ev2-nav-h: 48px;
  /* Right map rail — wide enough for Water / Light labels. */
  --ev2-rail-w: 56px;
  /* Air between floating nav pill and layer rail (halved from 24px). */
  --ev2-gap-nav-layers: 12px;
  /* Layer rail: intentionally shorter than main nav (48 → 40). */
  --ev2-layers-h: 40px;
  --ev2-gap-chrome: 16px;
  /* Meta when-label + 30px track + 16px hour marks must clear inside the pill. */
  --ev2-timeline-h: 72px;
  --ev2-layers-top: calc(var(--ev2-chrome-inset) + var(--ev2-nav-h) + var(--ev2-gap-nav-layers));
  --ev2-timeline-top: calc(var(--ev2-layers-top) + var(--ev2-layers-h) + var(--ev2-gap-chrome));
  --ev2-tools-top: calc(var(--ev2-layers-top) + var(--ev2-layers-h) + var(--ev2-gap-nav-layers));
  --ev2-tools-top-player: calc(var(--ev2-timeline-top) + var(--ev2-timeline-h) + var(--ev2-gap-chrome));
  /* Plan and Navigate share this origin so extra Plan cells grow down. */
  --ev2-rail-top: var(--ev2-tools-top);
  /* Shared top origin for collapsed chip + Now / Today / 7-Day docks.
     When the timeline player is open, sit below it so content never overlaps. */
  --ev2-forecast-card-top: calc(var(--ev2-layers-top) + var(--ev2-layers-h) + 12px);
  --ev2-forecast-dock-top: var(--ev2-forecast-card-top);
  --ev2-forecast-dock-bottom-gap: 22px;
  --ev2-forecast-dock-max-h: calc(
    100dvh - var(--ev2-forecast-dock-top) - var(--ev2-forecast-dock-bottom-gap)
  );
  --ev2-forecast-card-h: 128px;
  /* Shared width: collapsed forecast tile + Air/Depth legend chips. */
  --ev2-left-stack-w: 204px;
  /* 7-Day day tiles: grow to fill the panel; scroll only below this floor. */
  --ev2-week-day-min-w: 112px;
  /* Fixed title column so Air / Depth / Rain / Water bars share one width.
     Sized for the longest label ("Rain mm/h") at instrument type. */
  --ev2-legend-label-w: 64px;
  /* Label role — instrument chrome type */
  --ev2-label-size: 13px;
  --ev2-label-weight: 500;
  --ev2-meta-size: 12px;
  /* Under-map fallback. Map ink fills the phone including under the home
     indicator; never leave Safari’s white page canvas showing through. */
  background: #041820;
}

/* When the timeline player is open, forecast chip + dock clear below it
   so OBSERVED / NOW / FORECAST never overlap the view title row. */
body.explore-v2.v2-player-open {
  --ev2-forecast-card-top: calc(
    var(--ev2-timeline-top) + var(--ev2-timeline-h) + 12px
  );
  --ev2-forecast-dock-top: var(--ev2-forecast-card-top);
}

body.atlas-scope.explore-v2 {
  background: #041820 !important;
}

body.explore-v2 .atlas-body-mount {
  background: #041820;
}
body.explore-v2,
body.explore-v2 button,
body.explore-v2 input,
body.explore-v2 a {
  font-family: var(--font-ba-sans);
}

body.explore-v2::before { content: none !important; }

body.explore-v2 .mode-hint,
body.explore-v2 .coverage-chip,
body.explore-v2 .legend-chip,
body.explore-v2 .depth-probe,
body.explore-v2 .depth-legend,
body.explore-v2 .m-summary,
body.explore-v2 .m-legend-bar,
body.explore-v2 .m-week-strip,
body.explore-v2 .status-bar,
body.explore-v2 .data-dock .catbar,
body.explore-v2 .data-dock .explore-bar,
body.explore-v2 .map-nav-places,
body.explore-v2 #m-map-layers,
body.explore-v2 .wx-field-toggle > button[data-preset="map"],
body.explore-v2 .wxft-head {
  display: none !important;
}

/* Keep Safety & Data accessible in v2 chrome — desktop folds it into the
   legal footer row; phone parks it in the top nav utility cluster. */
body.explore-v2 .ba-safety-data-btn {
  bottom: 112px;
  left: var(--ev2-chrome-side, 28px);
  z-index: 80;
  height: 40px;
  gap: 8px;
  padding: 0 14px 0 12px !important;
  box-sizing: border-box;
  max-width: min(200px, calc(100vw - 48px));
}
body.explore-v2.nav-active .ba-safety-data-btn,
body.explore-v2.nav-planning .ba-safety-data-btn {
  bottom: 160px;
}
body.explore-v2 .ba-safety-data-btn.ba-safety-data-btn--in-bar .ba-safety-data-label,
body.explore-v2 .ba-safety-data-btn.ba-safety-data-btn--in-rail .ba-safety-data-label {
  display: none !important;
}

/* Desktop footer: quiet text control matching Privacy / Terms. */
body.explore-v2 .ev2-legal .ba-safety-data-btn.ba-safety-data-btn--in-footer,
.explore-v2 .ev2-legal .ba-safety-data-btn.ba-safety-data-btn--in-footer {
  position: static !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: inherit !important;
  font: inherit !important;
  font-weight: 500 !important;
  letter-spacing: inherit !important;
  text-shadow: inherit !important;
  cursor: pointer !important;
  z-index: auto !important;
}
body.explore-v2 .ev2-legal .ba-safety-data-btn.ba-safety-data-btn--in-footer:hover,
.explore-v2 .ev2-legal .ba-safety-data-btn.ba-safety-data-btn--in-footer:hover {
  background: transparent !important;
  color: rgba(238, 246, 248, 0.92) !important;
}
body.explore-v2.atlas-chrome-light .ev2-legal .ba-safety-data-btn.ba-safety-data-btn--in-footer:hover {
  color: rgba(4, 24, 32, 0.92) !important;
}
body.explore-v2 .ev2-legal .ba-safety-data-btn.ba-safety-data-btn--in-footer:focus-visible,
.explore-v2 .ev2-legal .ba-safety-data-btn.ba-safety-data-btn--in-footer:focus-visible {
  outline: 2px solid #0b63f6;
  outline-offset: 2px;
  border-radius: 2px;
}
body.explore-v2 .ev2-legal .ba-safety-data-btn.ba-safety-data-btn--in-footer svg {
  display: none !important;
}
body.explore-v2 .ev2-legal .ba-safety-data-btn.ba-safety-data-btn--in-footer .ba-safety-data-label {
  display: inline !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
/* Don't leave a floating glass pill on desktop before/while JS parks it. */
@media (min-width: 901px) {
  body.explore-v2 .ba-safety-data-btn:not(.ba-safety-data-btn--in-footer):not(.ba-safety-data-btn--in-rail) {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  body.explore-v2 .ba-safety-data-btn.ba-safety-data-btn--in-footer,
  body.explore-v2 .ba-safety-data-btn.ba-safety-data-btn--in-rail {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Desktop fallback: quiet icon-only control under Zoom (matches rail buttons). */
body.explore-v2 .map-nav-zoom > .ba-safety-data-btn.ba-safety-data-btn--in-rail,
body.explore-v2 .map-nav > .ba-safety-data-btn.ba-safety-data-btn--in-rail {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 40px !important;
  margin: 4px 0 0 !important;
  padding: 8px 4px !important;
  gap: 0 !important;
  justify-content: center !important;
  border-radius: 12px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: rgba(255, 255, 255, 0.88) !important;
  z-index: auto !important;
}
body.explore-v2 .map-nav-zoom > .ba-safety-data-btn.ba-safety-data-btn--in-rail:hover,
body.explore-v2 .map-nav > .ba-safety-data-btn.ba-safety-data-btn--in-rail:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}
body.explore-v2.atlas-chrome-light .map-nav-zoom > .ba-safety-data-btn.ba-safety-data-btn--in-rail,
body.explore-v2.atlas-chrome-light .map-nav > .ba-safety-data-btn.ba-safety-data-btn--in-rail {
  color: var(--ink, #041820) !important;
}
body.explore-v2 .map-nav-zoom > .ba-safety-data-btn.ba-safety-data-btn--in-rail svg {
  width: 18px;
  height: 18px;
  opacity: 0.9;
}

/* Floating navigation
   Root cause of the “weird strip” behind the pill: globals/atlas set
   `.ba-nav-wrap--dark` to full-bleed absolute (left:0;right:0;top:0). When
   glass lived on the wrap, that full-width band peeked above the rounded
   corners. Keep the wrap transparent; put glass only on `.ba-nav`. */
body.explore-v2 .ba-nav-wrap,
body.explore-v2 .ba-nav-wrap--dark,
body.atlas-scope.explore-v2 .ba-nav-wrap,
body.atlas-scope.explore-v2 .ba-nav-wrap--dark {
  position: fixed !important;
  top: var(--ev2-chrome-inset) !important;
  right: var(--ev2-chrome-side) !important;
  bottom: auto !important;
  left: var(--ev2-chrome-side) !important;
  z-index: 80 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
}

body.explore-v2 .ba-nav {
  pointer-events: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: var(--ev2-nav-h) !important;
  min-height: var(--ev2-nav-h) !important;
  padding: 0 14px !important;
  gap: 15px !important;
  border: 1px solid var(--x-line) !important;
  border-radius: 15px !important;
  background: var(--x-glass) !important;
  box-shadow: var(--x-shadow) !important;
  -webkit-backdrop-filter: var(--x-glass-blur) !important;
  backdrop-filter: var(--x-glass-blur) !important;
  color: var(--x-text) !important;
}

body.explore-v2 .ba-wordmark {
  width: 136px;
  min-width: 136px;
  height: 34px;
  color: var(--x-text) !important;
}

body.explore-v2 .ba-wordmark img {
  display: block;
  width: 132px;
  height: 24px;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
}

/* Mobile Explore/Weather: mark-only lockup (full wordmark stays on desktop). */
body.explore-v2 .ba-wordmark-logo--mark {
  display: none;
}

body.explore-v2 .ba-mode-strip {
  display: flex !important;
  align-self: stretch;
  gap: 18px !important;
}

body.explore-v2 .ba-mode-strip a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: var(--ev2-label-size) !important;
  font-weight: var(--ev2-label-weight) !important;
  line-height: 1.25 !important;
}

body.explore-v2 .ba-mode-strip a[href="/explore"] {
  color: var(--x-text) !important;
}

body.explore-v2 .ba-mode-strip a[href="/explore"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--x-blue);
}

/* Search fills the clear band between mode links and right utilities
   (globals map-search clears margin-left, which parked the avatar after Events). */
body.explore-v2 .ba-nav-right {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

body.explore-v2 .ba-map-search.nav-center {
  position: absolute !important;
  /* Inset from left chrome (logo + Explore/Boats/Places/Events) and right
     utilities (Location chip + profile). Search flex-grows inside; never overlaps. */
  left: clamp(420px, 32%, 520px) !important;
  right: clamp(200px, 18%, 280px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  z-index: 2;
  pointer-events: none;
}

body.explore-v2 .ba-map-search.nav-center > * {
  pointer-events: auto;
}

body.explore-v2 .nav-search-wrap {
  flex: 1 1 auto !important;
  width: auto !important;
  /* Cap the field on ultrawide; minmax(0) so it shrinks with ellipsis first. */
  max-width: min(560px, 100%) !important;
  min-width: 0 !important;
}

body.explore-v2 .nav-search {
  /* Compact nav field. Go/mic use --ba-v2-search-go (panel − 8px inset). */
  --ba-v2-search-go: 26px;
  height: 34px !important;
  min-width: 0 !important;
  width: 100% !important;
  /* Keep the go button inset from the right edge of the pill. */
  padding: 0 4px 0 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 999px !important;
  background: rgba(0, 12, 20, 0.18) !important;
}

body.explore-v2 .nav-search input {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.explore-v2 .nav-search-ico {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: var(--ev2-label-size) !important;
  font-weight: var(--ev2-label-weight) !important;
  line-height: 1.25 !important;
}

/* Match shared SearchPill type (home / boats / places): Neue Haas 15px / 400. */
body.explore-v2 .nav-search input,
body.explore-v2 .nav-search input::placeholder {
  color: rgba(255, 255, 255, 0.82) !important;
  font-family: var(--ba-font, var(--font-neue-haas-display), "Helvetica Neue", Arial, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
}
body.explore-v2 .nav-search input::placeholder {
  opacity: 1 !important;
}
body.explore-v2 .nav-search input,
body.explore-v2 #universal-search {
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: 0 !important;
}

/* Voice mic: outline-only inside the dark search pill.
   Overrides global `button { background: var(--accent) }` chip.
   Resting color matches `.nav-search-ico` — do NOT use `--ba-ink-2` here.
   Kit `--ba-ink-2` is product secondary ink (#0a2028), which disappears on the
   dark translucent search well until hover forces white. */
body.explore-v2 .ba-v2-search-mic {
  position: relative;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  /* Match go-button diameter so mic never taller than the dark pill. */
  flex: 0 0 var(--ba-v2-search-go, 26px) !important;
  width: var(--ba-v2-search-go, 26px) !important;
  min-width: var(--ba-v2-search-go, 26px) !important;
  max-width: var(--ba-v2-search-go, 26px) !important;
  height: var(--ba-v2-search-go, 26px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.82) !important;
  cursor: pointer;
  box-shadow: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
  z-index: 2;
  transition:
    color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    background 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.explore-v2 .ba-v2-search-mic:hover,
body.explore-v2 .ba-v2-search-mic:active {
  color: #ffffff !important;
  background: rgba(244, 241, 234, 0.12) !important;
}
body.explore-v2 .ba-v2-search-mic:focus-visible {
  outline: 2px solid #0b63f6;
  outline-offset: 2px;
}
body.explore-v2 .ba-v2-search-mic.is-listening {
  color: #ffffff !important;
  background: #0b63f6 !important;
}
body.explore-v2 .ba-v2-search-mic.is-transcribing {
  color: #0b63f6 !important;
  background: rgba(244, 241, 234, 0.16) !important;
  cursor: wait;
}
body.explore-v2 .ba-v2-search-mic:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
body.explore-v2 .ba-v2-search-mic .ba-icon,
body.explore-v2 .ba-v2-search-mic .ba-v2-search-mic__ico {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  flex: 0 0 auto !important;
  fill: none !important;
  stroke: currentColor !important;
  color: inherit !important;
}
body.explore-v2.atlas-chrome-light .ba-v2-search-mic {
  color: #4b5a5b !important;
}
body.explore-v2.atlas-chrome-light .ba-v2-search-mic:hover,
body.explore-v2.atlas-chrome-light .ba-v2-search-mic:active {
  color: #0b63f6 !important;
  background: rgba(244, 241, 234, 0.9) !important;
}


/* Search submit: circular brand control. Diameter tracks panel height with a
   4px inset each side (--ba-v2-search-go). Overrides global `button` chip. */
body.explore-v2 .ba-v2-search-submit {
  position: relative;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  flex: 0 0 var(--ba-v2-search-go, 26px) !important;
  width: var(--ba-v2-search-go, 26px) !important;
  min-width: var(--ba-v2-search-go, 26px) !important;
  max-width: var(--ba-v2-search-go, 26px) !important;
  height: var(--ba-v2-search-go, 26px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #0b63f6 !important;
  color: #ffffff !important;
  cursor: pointer;
  box-shadow: none !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  z-index: 2;
  transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.explore-v2 .ba-v2-search-submit:hover,
body.explore-v2 .ba-v2-search-submit:active {
  background: #0750cc !important;
  color: #ffffff !important;
}
body.explore-v2 .ba-v2-search-submit:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
body.explore-v2 .ba-v2-search-submit__ico {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  flex: 0 0 auto !important;
  fill: none !important;
  stroke: currentColor !important;
  color: inherit !important;
}
body.explore-v2.atlas-chrome-light .ba-v2-search-submit {
  background: #0b63f6 !important;
  color: #ffffff !important;
}

/* BA-419: Pins control removed until save-pin drop mode ships. */
body.explore-v2 .ba-v2-pins {
  display: none !important;
}

body.explore-v2 .ba-map-search .near {
  position: relative;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  gap: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px !important;
  background: rgba(0, 12, 20, 0.22) !important;
  box-shadow: none !important;
  color: var(--x-text) !important;
  font-size: var(--ev2-label-size) !important;
  font-weight: var(--ev2-label-weight) !important;
  line-height: 1 !important;
  white-space: nowrap;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Never mount place chips in the main nav. */
body.explore-v2 .ba-map-search .ba-v2-place-group {
  display: none !important;
}

body.explore-v2 .ba-v2-pins[aria-pressed="true"] {
  background: transparent !important;
}

body.explore-v2 .ba-map-search .near {
  color: var(--x-text) !important;
}

body.explore-v2 .ba-map-search .near::after {
  display: none;
}

body.explore-v2 .m-layers-btn { display: none !important; }

body.explore-v2 .ba-nav-auth {
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  background: transparent !important;
}

body.explore-v2 .ba-nav-auth a,
body.atlas-scope.explore-v2 .ba-nav-auth a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--x-text) !important;
  font-size: var(--ev2-label-size) !important;
  font-weight: var(--ev2-label-weight) !important;
  line-height: 1.25 !important;
  white-space: nowrap;
}

body.explore-v2 .ba-nav-auth a.primary,
body.atlas-scope.explore-v2 .ba-nav-auth a.primary,
body.explore-v2 .ba-nav-auth a.primary:hover {
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #2f8cff !important;
  font-weight: 600 !important;
}

/* Horizontal layer rail — hug chip group; center as a unit under nav */
body.explore-v2 .wx-field-toggle,
body.explore-v2 .wx-field-toggle.on,
body.explore-v2.m-layers-open .wx-field-toggle.on,
body.atlas-scope.explore-v2 .wx-field-toggle,
body.atlas-scope.explore-v2 .wx-field-toggle.on,
body.atlas-scope.explore-v2.mode-conditions .wx-field-toggle,
body.atlas-scope.explore-v2.mode-conditions .wx-field-toggle.on {
  position: fixed !important;
  top: var(--ev2-layers-top) !important;
  left: 50% !important;
  right: auto !important;
  z-index: 70 !important;
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: min(1280px, calc(100vw - 120px)) !important;
  height: var(--ev2-layers-h) !important;
  min-height: var(--ev2-layers-h) !important;
  max-height: var(--ev2-layers-h) !important;
  padding: 2px 12px !important;
  gap: 4px !important;
  box-sizing: border-box !important;
  transform: translateX(-50%) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--x-line) !important;
  border-radius: 14px !important;
  background: var(--x-glass) !important;
  box-shadow: var(--x-shadow) !important;
  -webkit-backdrop-filter: var(--x-glass-blur) !important;
  backdrop-filter: var(--x-glass-blur) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
body.explore-v2 .wx-field-toggle::-webkit-scrollbar {
  display: none;
}

/* Large centered coach for horizontal layer scrolling. */
body.explore-v2 .ba-v2-layer-scroll-hint {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.explore-v2 .ba-v2-layer-scroll-hint.is-visible {
  opacity: 1;
  pointer-events: auto;
}
body.explore-v2 .ba-v2-layer-scroll-hint.is-done {
  opacity: 0;
  pointer-events: none;
}
body.explore-v2 .ba-v2-layer-scroll-hint__scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 24, 32, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
body.explore-v2 .ba-v2-layer-scroll-hint__card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 22px;
  width: min(720px, calc(100vw - 48px));
  padding: 32px 36px 28px;
  border-radius: 28px;
  border: 1px solid rgba(216, 216, 209, 0.2);
  background: rgba(4, 24, 32, 0.96);
  color: #f4f1ea;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
  font: 500 15px / 1.4 var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  transform: translateY(12px) scale(0.97);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.explore-v2 .ba-v2-layer-scroll-hint.is-visible .ba-v2-layer-scroll-hint__card {
  transform: translateY(0) scale(1);
}
body.explore-v2 .ba-v2-layer-scroll-hint__demo {
  position: relative;
  display: grid;
  place-items: center;
  gap: 18px;
  min-height: 180px;
  padding: 24px 20px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
body.explore-v2 .ba-v2-layer-scroll-hint__rail {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: 440px;
  height: 44px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(4, 24, 32, 0.72);
  box-shadow: 0 18px 48px rgba(0, 10, 18, 0.28);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  overflow: hidden;
  box-sizing: border-box;
  mask-image: linear-gradient(90deg, #000 0%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 70%, transparent 100%);
  animation: ba-v2-layer-scroll-hint-rail 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
/* Match the real layer pills: icon + label, filled active Map. */
body.explore-v2 .ba-v2-layer-scroll-hint__rail > button {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 34px;
  min-width: 0;
  padding: 0 12px 0 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
  font: 600 13px / 1 var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  cursor: default;
}
body.explore-v2 .ba-v2-layer-scroll-hint__rail > button::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 6px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("/icons/v2/svg/ui/layers.svg") center / contain no-repeat;
  mask: url("/icons/v2/svg/ui/layers.svg") center / contain no-repeat;
}
body.explore-v2 .ba-v2-layer-scroll-hint__rail > button[data-preset="map"]::before {
  -webkit-mask-image: url("/icons/v2/svg/ui/layers.svg");
  mask-image: url("/icons/v2/svg/ui/layers.svg");
}
body.explore-v2 .ba-v2-layer-scroll-hint__rail > button[data-preset="wind"]::before {
  -webkit-mask-image: url("/icons/v2/svg/ui/wind.svg");
  mask-image: url("/icons/v2/svg/ui/wind.svg");
}
body.explore-v2 .ba-v2-layer-scroll-hint__rail > button[data-preset="waves"]::before,
body.explore-v2 .ba-v2-layer-scroll-hint__rail > button[data-preset="depth"]::before {
  -webkit-mask-image: url("/icons/v2/svg/ui/waves.svg");
  mask-image: url("/icons/v2/svg/ui/waves.svg");
}
body.explore-v2 .ba-v2-layer-scroll-hint__rail > button[data-preset="temp"]::before {
  -webkit-mask-image: url("/icons/v2/svg/weather/sunny.svg");
  mask-image: url("/icons/v2/svg/weather/sunny.svg");
}
body.explore-v2 .ba-v2-layer-scroll-hint__rail > button[data-overlay="rain"]::before {
  -webkit-mask-image: url("/icons/v2/svg/weather/rain.svg");
  mask-image: url("/icons/v2/svg/weather/rain.svg");
}
body.explore-v2 .ba-v2-layer-scroll-hint__rail > button[data-overlay="clouds"]::before {
  -webkit-mask-image: url("/icons/v2/svg/ui/cloud.svg");
  mask-image: url("/icons/v2/svg/ui/cloud.svg");
}
body.explore-v2 .ba-v2-layer-scroll-hint__rail > button[data-marine-layer="buoys"]::before {
  -webkit-mask-image: url("/icons/v2/svg/ui/boat.svg");
  mask-image: url("/icons/v2/svg/ui/boat.svg");
}
body.explore-v2 .ba-v2-layer-scroll-hint__rail > button[data-marine-layer="tides"]::before {
  -webkit-mask-image: url("/icons/v2/svg/ui/waves.svg");
  mask-image: url("/icons/v2/svg/ui/waves.svg");
}
body.explore-v2 .ba-v2-layer-scroll-hint__rail > button.on {
  background: rgba(11, 99, 246, 0.28);
  color: #fff;
  box-shadow: none;
}
body.explore-v2 .ba-v2-layer-scroll-hint__rail > button.on::after {
  content: none;
  display: none;
}
body.explore-v2 .ba-v2-layer-scroll-hint__mouse {
  color: #2bbef2;
}
body.explore-v2 .ba-v2-layer-scroll-hint__wheel {
  transform-origin: 32px 18px;
  animation: ba-v2-layer-scroll-hint-wheel 1s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
body.explore-v2 .ba-v2-layer-scroll-hint__swipe {
  animation: ba-v2-layer-scroll-hint-nudge 1.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
body.explore-v2 .ba-v2-layer-scroll-hint__title {
  margin: 0;
  font-size: clamp(34px, 3.8vw, 44px);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #f4f1ea;
}
body.explore-v2 .ba-v2-layer-scroll-hint__desc {
  margin: -8px 0 0;
  color: rgba(244, 241, 234, 0.72);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
}
body.explore-v2 .ba-v2-layer-scroll-hint__ways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
body.explore-v2 .ba-v2-layer-scroll-hint__way {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(216, 216, 209, 0.12);
}
body.explore-v2 .ba-v2-layer-scroll-hint__way strong {
  display: block;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: #f4f1ea;
}
body.explore-v2 .ba-v2-layer-scroll-hint__way > div > span {
  display: block;
  margin-top: 2px;
  color: rgba(244, 241, 234, 0.62);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}
body.explore-v2 .ba-v2-layer-scroll-hint__way-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(43, 190, 242, 0.12);
  color: #2bbef2;
}
body.explore-v2 .ba-v2-layer-scroll-hint__way-ico--inline {
  width: auto;
  height: auto;
  padding: 0;
  background: transparent;
}
body.explore-v2 .ba-v2-layer-scroll-hint__way-keys {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
body.explore-v2 .ba-v2-layer-scroll-hint__plus {
  color: rgba(244, 241, 234, 0.5);
  font-size: 16px;
  font-weight: 650;
}
body.explore-v2 .ba-v2-layer-scroll-hint__kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(216, 216, 209, 0.28);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.28);
  color: #f4f1ea;
  font: 650 13px / 1 var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  letter-spacing: 0.02em;
}
body.explore-v2 .ba-v2-layer-scroll-hint__kbd--mouse {
  min-width: 56px;
  letter-spacing: 0.04em;
}
body.explore-v2 .ba-v2-layer-scroll-hint__dismiss {
  align-self: center;
  margin-top: 4px;
  min-height: 44px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: #0b63f6;
  color: #fff;
  font: 650 14px / 1 var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.explore-v2 .ba-v2-layer-scroll-hint__dismiss:hover {
  background: #0750cc;
}
body.explore-v2 .ba-v2-layer-scroll-hint__dismiss:focus-visible {
  outline: 2px solid #2bbef2;
  outline-offset: 3px;
}
@keyframes ba-v2-layer-scroll-hint-rail {
  0%,
  100% {
    transform: translateX(0);
  }
  45%,
  55% {
    transform: translateX(-72px);
  }
}
@keyframes ba-v2-layer-scroll-hint-nudge {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(8px);
  }
}
@keyframes ba-v2-layer-scroll-hint-wheel {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}
@media (max-width: 720px) {
  body.explore-v2 .ba-v2-layer-scroll-hint__ways {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.explore-v2 .ba-v2-layer-scroll-hint__rail,
  body.explore-v2 .ba-v2-layer-scroll-hint__wheel,
  body.explore-v2 .ba-v2-layer-scroll-hint__swipe {
    animation: none;
  }
  body.explore-v2 .ba-v2-layer-scroll-hint__card {
    transition: none;
  }
}
@media (max-width: 900px) {
  body.explore-v2 .ba-v2-layer-scroll-hint {
    display: none !important;
  }
}

/* Layer rail overflow chevrons — sticky at ends; only shown when scrollable that way. */
body.explore-v2 .wx-field-toggle > button.ba-v2-layer-scroll,
body.atlas-scope.explore-v2 .wx-field-toggle > button.ba-v2-layer-scroll {
  position: sticky !important;
  z-index: 5;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(4, 24, 32, 0.55) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  box-shadow: none !important;
  cursor: pointer;
  pointer-events: auto !important;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.explore-v2 .wx-field-toggle > button.ba-v2-layer-scroll[hidden],
body.atlas-scope.explore-v2 .wx-field-toggle > button.ba-v2-layer-scroll[hidden] {
  display: none !important;
}
body.explore-v2 .wx-field-toggle > button.ba-v2-layer-scroll:hover,
body.explore-v2 .wx-field-toggle > button.ba-v2-layer-scroll:focus-visible {
  background: rgba(4, 24, 32, 0.72) !important;
  color: #ffffff !important;
  outline: none;
}
body.explore-v2 .wx-field-toggle > button.ba-v2-layer-scroll:focus-visible {
  box-shadow: 0 0 0 2px rgba(11, 99, 246, 0.55) !important;
}
body.explore-v2 .wx-field-toggle > button.ba-v2-layer-scroll::before,
body.explore-v2 .wx-field-toggle > button.ba-v2-layer-scroll::after,
body.atlas-scope.explore-v2 .wx-field-toggle > button.ba-v2-layer-scroll::before,
body.atlas-scope.explore-v2 .wx-field-toggle > button.ba-v2-layer-scroll::after {
  content: none !important;
  display: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  background: none !important;
}
body.explore-v2 .ba-v2-layer-scroll__ico {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  pointer-events: none;
}
body.explore-v2 .ba-v2-layer-scroll__ico--up,
body.explore-v2 .ba-v2-layer-scroll__ico--down {
  display: none;
}
body.explore-v2 .wx-field-toggle > button.ba-v2-layer-scroll--prev {
  left: 0;
}
body.explore-v2 .wx-field-toggle > button.ba-v2-layer-scroll--next {
  right: 0;
}
body.explore-v2.atlas-chrome-light .wx-field-toggle > button.ba-v2-layer-scroll {
  background: rgba(244, 241, 234, 0.88) !important;
  color: #041820 !important;
}
body.explore-v2.atlas-chrome-light .wx-field-toggle > button.ba-v2-layer-scroll:hover,
body.explore-v2.atlas-chrome-light .wx-field-toggle > button.ba-v2-layer-scroll:focus-visible {
  background: rgba(236, 231, 221, 0.96) !important;
  color: #041820 !important;
}

/* Desktop/tablet: dissolve weather/actions wrappers so chips stay one
   horizontal strip. Without this, mid widths wrap chips inside each
   section while the fixed rail height clips/overlaps labels.
   Phone (≤900) overrides to flex column when .m-layers-open. */
body.explore-v2 .ba-v2-layer-section--weather,
body.explore-v2 .ba-v2-layer-section--actions,
body.explore-v2 .ba-v2-layer-section--marine,
body.explore-v2 .ba-v2-layer-section--legend {
  display: contents;
}

body.explore-v2 .wx-field-toggle > button,
body.explore-v2 .wx-field-toggle .ba-v2-layer-section > button,
body.explore-v2 .wx-field-toggle .wx-sat-pair > button,
body.explore-v2 .wx-field-toggle .ba-v2-layer-play,
body.explore-v2 .wx-field-toggle .ba-v2-layer-key,
body.explore-v2 .wx-field-toggle .ba-v2-place-filter,
body.explore-v2 .wx-field-toggle .ba-v2-marine-filter,
body.explore-v2 .wx-field-toggle .ba-v2-legend-filter,
body.explore-v2 .wx-field-toggle #ba-explore-help-btn.ba-explore-help-btn--in-layers {
  position: relative;
  flex: 0 0 auto;
  height: 32px !important;
  min-width: 0;
  padding: 0 6px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: var(--ev2-label-size) !important;
  font-weight: var(--ev2-label-weight) !important;
  line-height: 1.25 !important;
  pointer-events: auto !important;
  white-space: nowrap;
}

/* Keep the trailing weather-stack hit clear of the sticky next-arrow overlay. */
body.explore-v2 .wx-field-toggle .ba-v2-layer-play:last-child,
body.explore-v2 .wx-field-toggle .ba-v2-layer-key:last-child {
  margin-right: 32px !important;
}

body.explore-v2 .wx-field-toggle .ba-v2-layer-key[hidden] {
  display: none !important;
}

body.explore-v2 .wx-field-toggle .ba-v2-marine-filter.on {
  color: #2bbef2 !important;
}

body.explore-v2 .wx-field-toggle .ba-v2-legend-filter.is-locked {
  opacity: 0.72;
}

body.explore-v2 .wx-field-toggle .wx-sat-pair {
  display: contents !important;
}

/* sat-pair uses display:contents, so #wx-sat-loading's absolute left/right
   resolves against the full layer rail and paints a full-width blue hairline
   under the menu. Keep the shimmer off the desktop rail. */
body.explore-v2 .wx-field-toggle .wx-sat-loading,
body.explore-v2 #wx-sat-loading {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  background: transparent !important;
}

/* Hidden Map chip keeps .on for state — never paint its active underline. */
body.explore-v2 .wx-field-toggle > button[data-preset="map"].on::after,
body.explore-v2 .wx-field-toggle button[data-preset="map"]::after {
  content: none !important;
  display: none !important;
}

/* Pin categories — after weather chips (incl. All), before Night/Play */
body.explore-v2 .wx-field-toggle .ba-v2-place-group {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 2px;
  margin: 0 2px;
  padding: 0 4px;
  border-left: 1px solid var(--x-line);
  border-right: 1px solid var(--x-line);
}

body.explore-v2 .wx-field-toggle .ba-v2-place-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

body.explore-v2 .wx-field-toggle .ba-v2-place-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  line-height: 0;
  flex: 0 0 auto;
}

body.explore-v2 .wx-field-toggle .ba-v2-place-glyph img {
  display: block;
  width: 14px;
  height: 14px;
  /* Match other layer chip icons: ink-colored strokes on glass chrome */
  filter: none;
  opacity: 0.92;
}

body.explore-v2.atlas-chrome-dark .wx-field-toggle .ba-v2-place-glyph img {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

body.explore-v2 .ba-v2-pins-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

body.explore-v2 .ba-v2-pins-ico img {
  display: block;
  width: 14px;
  height: 14px;
  opacity: 0.9;
}

body.explore-v2.atlas-chrome-dark .ba-v2-pins-ico img {
  filter: brightness(0) invert(1);
}

/* Active place filters share the same underline treatment as weather
   chips (unified rule below). Do not add a second ::after here — place
   filters are also `button.on` and would visually stack weight. */

body.explore-v2 .wx-field-toggle > button::before,
body.explore-v2 .wx-field-toggle .ba-v2-layer-section > button::before,
body.explore-v2 .wx-field-toggle .wx-sat-pair > button::before,
body.explore-v2 .wx-field-toggle .ba-v2-marine-filter::before,
body.explore-v2 .wx-field-toggle .ba-v2-legend-filter::before,
body.explore-v2 .ba-v2-layer-play::before,
body.explore-v2 #wx-basemap-cycle::before,
body.explore-v2 #wx-field-toggle #btn-chrome::before {
  content: "" !important;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask: url("/icons/v2/svg/ui/layers.svg") center / contain no-repeat;
  mask: url("/icons/v2/svg/ui/layers.svg") center / contain no-repeat;
}
body.explore-v2 .wx-field-toggle button[data-preset="wind"]::before {
  -webkit-mask-image: url("/icons/v2/svg/ui/wind.svg");
  mask-image: url("/icons/v2/svg/ui/wind.svg");
}
body.explore-v2 .wx-field-toggle button[data-preset="waves"]::before,
body.explore-v2 .wx-field-toggle button[data-preset="depth"]::before {
  -webkit-mask-image: url("/icons/v2/svg/ui/waves.svg");
  mask-image: url("/icons/v2/svg/ui/waves.svg");
}
body.explore-v2 .wx-field-toggle button[data-preset="temp"]::before,
body.explore-v2 #wx-basemap-cycle[data-basemap-mode="day"]::before {
  -webkit-mask-image: url("/icons/v2/svg/weather/sunny.svg");
  mask-image: url("/icons/v2/svg/weather/sunny.svg");
}
body.explore-v2 .wx-field-toggle button[data-overlay="rain"]::before {
  -webkit-mask-image: url("/icons/v2/svg/weather/rain.svg");
  mask-image: url("/icons/v2/svg/weather/rain.svg");
}
body.explore-v2 .wx-field-toggle button[data-overlay="clouds"]::before {
  -webkit-mask-image: url("/icons/v2/svg/ui/cloud.svg");
  mask-image: url("/icons/v2/svg/ui/cloud.svg");
}
body.explore-v2 .wx-field-toggle .ba-v2-marine-filter[data-marine-layer="buoys"]::before {
  -webkit-mask-image: url("/icons/v2/svg/ui/boat.svg");
  mask-image: url("/icons/v2/svg/ui/boat.svg");
}
body.explore-v2 .wx-field-toggle .ba-v2-marine-filter[data-marine-layer="wrecks"]::before,
body.explore-v2 .wx-field-toggle .ba-v2-marine-filter[data-marine-layer="hazards"]::before {
  -webkit-mask-image: url("/icons/v2/svg/ui/hazard.svg");
  mask-image: url("/icons/v2/svg/ui/hazard.svg");
}
body.explore-v2 .wx-field-toggle .ba-v2-marine-filter[data-marine-layer="channels"]::before {
  -webkit-mask-image: url("/icons/v2/svg/ui/compass.svg");
  mask-image: url("/icons/v2/svg/ui/compass.svg");
}
body.explore-v2 .wx-field-toggle .ba-v2-marine-filter[data-marine-layer="ferries"]::before {
  -webkit-mask-image: url("/icons/v2/svg/ui/boat.svg");
  mask-image: url("/icons/v2/svg/ui/boat.svg");
}
body.explore-v2 .wx-field-toggle .ba-v2-marine-filter[data-marine-layer="restricted"]::before {
  -webkit-mask-image: url("/icons/v2/svg/ui/shield.svg");
  mask-image: url("/icons/v2/svg/ui/shield.svg");
}
body.explore-v2 .wx-field-toggle .ba-v2-marine-filter[data-marine-layer="tides"]::before {
  -webkit-mask-image: url("/icons/v2/svg/ui/waves.svg");
  mask-image: url("/icons/v2/svg/ui/waves.svg");
}
body.explore-v2 .wx-field-toggle .ba-v2-marine-filter[data-marine-layer="advisories"]::before {
  -webkit-mask-image: url("/icons/v2/svg/ui/bell.svg");
  mask-image: url("/icons/v2/svg/ui/bell.svg");
}
body.explore-v2 .wx-field-toggle .ba-v2-legend-filter[data-legend-layer="bigfoot"]::before {
  -webkit-mask-image: url("/icons/v2/svg/ui/legend-bigfoot.svg");
  mask-image: url("/icons/v2/svg/ui/legend-bigfoot.svg");
}
body.explore-v2 .wx-field-toggle .ba-v2-legend-filter[data-legend-layer="ufos"]::before {
  -webkit-mask-image: url("/icons/v2/svg/ui/legend-ufo.svg");
  mask-image: url("/icons/v2/svg/ui/legend-ufo.svg");
}
body.explore-v2 .wx-field-toggle .ba-v2-legend-filter[data-legend-layer="mermaids"]::before {
  -webkit-mask-image: url("/icons/v2/svg/ui/legend-mermaid.svg");
  mask-image: url("/icons/v2/svg/ui/legend-mermaid.svg");
}
body.explore-v2 .wx-field-toggle .ba-v2-legend-filter[data-legend-layer="sea-serpents"]::before {
  -webkit-mask-image: url("/icons/v2/svg/ui/legend-serpent.svg");
  mask-image: url("/icons/v2/svg/ui/legend-serpent.svg");
}
body.explore-v2 .wx-field-toggle .ba-v2-legend-filter[data-legend-layer="kraken"]::before {
  -webkit-mask-image: url("/icons/v2/svg/ui/legend-kraken.svg");
  mask-image: url("/icons/v2/svg/ui/legend-kraken.svg");
}
body.explore-v2 #wx-field-toggle .ba-v2-layer-play::before {
  -webkit-mask: url("/icons/v2/svg/ui/play.svg") center / contain no-repeat !important;
  mask: url("/icons/v2/svg/ui/play.svg") center / contain no-repeat !important;
}
body.explore-v2 #wx-field-toggle .ba-v2-layer-play.is-playing::before,
body.explore-v2 #wx-field-toggle .ba-v2-layer-play.on::before {
  -webkit-mask: url("/icons/v2/svg/ui/pause.svg") center / contain no-repeat !important;
  mask: url("/icons/v2/svg/ui/pause.svg") center / contain no-repeat !important;
}
body.explore-v2 #wx-basemap-cycle[data-basemap-mode="auto"]::before {
  -webkit-mask: url("/icons/v2/svg/ui/sun-moon.svg") center / contain no-repeat;
  mask: url("/icons/v2/svg/ui/sun-moon.svg") center / contain no-repeat;
}
body.explore-v2 #wx-basemap-cycle[data-basemap-mode="night"]::before {
  -webkit-mask: url("/icons/v2/svg/weather/moon.svg") center / contain no-repeat;
  mask: url("/icons/v2/svg/weather/moon.svg") center / contain no-repeat;
}
body.explore-v2 #wx-basemap-cycle[data-basemap-mode="day"]::before {
  -webkit-mask: url("/icons/v2/svg/weather/sunny.svg") center / contain no-repeat;
  mask: url("/icons/v2/svg/weather/sunny.svg") center / contain no-repeat;
}
/* Controls theme chip (Dark / Light) in the layers rail. */
body.explore-v2 #wx-field-toggle #btn-chrome::before {
  -webkit-mask: url("/icons/v2/svg/ui/sun-moon.svg") center / contain no-repeat;
  mask: url("/icons/v2/svg/ui/sun-moon.svg") center / contain no-repeat;
}
/* Help inherits the default layers mask unless overridden: keep the help glyph. */
body.explore-v2 #wx-field-toggle #ba-explore-help-btn.ba-explore-help-btn--in-layers::before {
  -webkit-mask: url("/icons/v2/svg/ui/help.svg") center / contain no-repeat !important;
  mask: url("/icons/v2/svg/ui/help.svg") center / contain no-repeat !important;
}
body.explore-v2.atlas-chrome-dark #wx-field-toggle #btn-chrome::before {
  -webkit-mask: url("/icons/v2/svg/weather/moon.svg") center / contain no-repeat;
  mask: url("/icons/v2/svg/weather/moon.svg") center / contain no-repeat;
}
body.explore-v2.atlas-chrome-light #wx-field-toggle #btn-chrome::before {
  -webkit-mask: url("/icons/v2/svg/weather/sunny.svg") center / contain no-repeat;
  mask: url("/icons/v2/svg/weather/sunny.svg") center / contain no-repeat;
}

/* Active layer chips — weather, places, marine, play. Specificity must beat the
   inactive `.ba-v2-layer-section > button` color !important. Basemap Auto
   keeps `.on` for mode state but is not a selected layer — no underline. */
body.explore-v2 .wx-field-toggle > button.on,
body.explore-v2 .wx-field-toggle .ba-v2-layer-section > button.on,
body.explore-v2 .wx-field-toggle .wx-sat-pair > button.on,
body.explore-v2 .wx-field-toggle .ba-v2-place-filter.on,
body.explore-v2 .wx-field-toggle .ba-v2-marine-filter.on,
body.explore-v2 .wx-field-toggle .ba-v2-legend-filter.on,
body.explore-v2 .wx-field-toggle .ba-v2-layer-play.is-playing {
  background: transparent !important;
  color: var(--x-text) !important;
}

body.explore-v2 .wx-field-toggle > button.on::after,
body.explore-v2 .wx-field-toggle .ba-v2-layer-section > button.on::after,
body.explore-v2 .wx-field-toggle .wx-sat-pair > button.on::after,
body.explore-v2 .wx-field-toggle .ba-v2-place-filter.on::after,
body.explore-v2 .wx-field-toggle .ba-v2-marine-filter.on::after,
body.explore-v2 .wx-field-toggle .ba-v2-legend-filter.on::after,
body.explore-v2 .wx-field-toggle .ba-v2-layer-play.is-playing::after,
body.explore-v2 .wx-field-toggle .ba-v2-layer-play.on::after,
body.explore-v2 .wx-field-toggle .ba-v2-layer-key.on::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 1px;
  left: 6px;
  height: 2px;
  border-radius: 999px;
  background: var(--x-blue);
}

/* Legend chips use violet accent when active (after shared .on color reset). */
body.explore-v2 .wx-field-toggle .ba-v2-legend-filter.on {
  color: #7a6ff0 !important;
}
body.explore-v2 .wx-field-toggle .ba-v2-legend-filter.on::after {
  background: #7a6ff0;
}

/* Basemap cycle `.on` is mode state — quiet pill, never a second accent color. */
body.explore-v2 .wx-field-toggle #wx-basemap-cycle.on {
  background: rgba(11, 99, 246, 0.28) !important;
  color: #fff !important;
  border-radius: 10px;
  box-shadow: none !important;
}
body.explore-v2.atlas-chrome-light .wx-field-toggle #wx-basemap-cycle.on {
  background: rgba(11, 99, 246, 0.28) !important;
  color: #fff !important;
}
body.explore-v2 .wx-field-toggle #wx-basemap-cycle.on::after {
  content: none !important;
  display: none !important;
}
/* Sections are transparent layout wrappers, never active chips. Prevent legacy
   state classes from painting a rail-wide underline through those wrappers. */
body.explore-v2 .wx-field-toggle::after,
body.explore-v2 .wx-field-toggle .ba-v2-layer-section::after,
body.explore-v2 .wx-field-toggle .ba-v2-place-group::after,
body.explore-v2 .wx-field-toggle .ba-v2-layer-scroll::after {
  content: none !important;
  display: none !important;
}

/* Place category overflow menu — retired; categories are direct rail entries. */
body.explore-v2 .ba-v2-place-more {
  display: none !important;
}

/* Reopen last place sheet — clear Mapbox attrib + legal band. */
body.explore-v2 .ba-v2-place-reopen {
  position: absolute;
  left: 16px;
  bottom: calc(var(--status-h, 28px) + 48px);
  z-index: 28;
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  height: auto;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--x-line);
  background: var(--x-glass);
  color: var(--x-text);
  font: 600 13px/1.2 var(--ba-font, inherit);
  cursor: pointer;
  box-shadow: var(--x-shadow);
  box-sizing: border-box;
}
body.explore-v2 .ba-v2-place-reopen.is-visible {
  display: inline-flex;
}

/* Layer color indexes (Temp / Depth) — upper left under layers rail.
   Gap under weather chip/dock matches the inter-index gap (--ev2-legend-stack-gap). */
body.explore-v2 {
  --ev2-legend-stack-gap: 10px;
  /* Scale column must never shrink to the 2px value mark (title-only chips). */
  --ev2-legend-scale-min: 88px;
}

body.explore-v2 .ba-v2-layer-legends {
  position: fixed !important;
  top: calc(var(--ev2-layers-top) + var(--ev2-layers-h) + var(--ev2-legend-stack-gap)) !important;
  left: var(--ev2-chrome-side) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 69 !important;
  display: flex;
  flex-direction: column;
  /* Left-align Hide / Legends pills; chips still fill host via width:100%. */
  align-items: flex-start;
  gap: var(--ev2-legend-stack-gap);
  /* Definite width required: width:auto + minmax(0,1fr) shrink-wraps the
     scale column to the 2px value mark (title-only chips). */
  width: var(--ev2-left-stack-w);
  min-width: var(--ev2-left-stack-w);
  height: auto !important;
  max-width: min(var(--ev2-left-stack-w), calc(100vw - 100px));
  box-sizing: border-box;
  pointer-events: none;
  transform: none !important;
}

/* Collapsed "Legends" pill: dock beside Layer on the right rail (not mid-map). */
body.explore-v2 .ba-v2-layer-legends.is-collapsed {
  top: var(--ev2-legends-anchor-top, var(--ev2-rail-top)) !important;
  left: auto !important;
  right: calc(var(--ev2-chrome-side) + var(--ev2-rail-w) + 8px) !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  align-items: flex-end !important;
  z-index: 70 !important;
}
body.explore-v2 .ba-v2-layer-legends.has-legends:not(.is-collapsed) {
  width: var(--ev2-left-stack-w) !important;
  min-width: var(--ev2-left-stack-w) !important;
}

/* Reopen from collapsed/tucked: expand color indexes from the same Layer anchor. */
body.explore-v2.v2-legends-tucked.is-legend-open .ba-v2-layer-legends,
body.explore-v2.v2-legends-collapsed.is-legend-open .ba-v2-layer-legends {
  top: var(--ev2-legends-anchor-top, var(--ev2-rail-top)) !important;
  left: auto !important;
  right: calc(var(--ev2-chrome-side) + var(--ev2-rail-w) + 8px) !important;
  align-items: flex-end !important;
  z-index: 70 !important;
}

/* Collapsed chip: indexes sit just under the compact forecast tile.
   Prefer measured --ev2-legend-stack-top so the weather→index gap matches
   the inter-index gap even when the chip height drifts from the token. */
body.explore-v2:has(.inspector.collapsed) .ba-v2-layer-legends,
body.explore-v2.v2-forecast-collapsed .ba-v2-layer-legends {
  top: var(
    --ev2-legend-stack-top,
    calc(
      var(--ev2-forecast-card-top) + var(--ev2-forecast-card-h) +
        var(--ev2-legend-stack-gap)
    )
  ) !important;
}

/* Expanded weather dock: park indexes below the panel (measured height via JS).
   z-index under inspector (64) so they never paint over Today/Now copy. */
body.explore-v2:has(.inspector.on:not(.collapsed)):not(.v2-forecast-collapsed) .ba-v2-layer-legends {
  top: calc(
    var(--ev2-forecast-dock-top) + var(--ev2-weather-dock-h, var(--ev2-forecast-open-h, 218px)) +
      var(--ev2-legend-stack-gap)
  ) !important;
  z-index: 63 !important;
}

/* After forecast-dock top rules: keep collapsed / rail-reopened beside Layer. */
body.explore-v2:has(.inspector.collapsed) .ba-v2-layer-legends.is-collapsed,
body.explore-v2.v2-forecast-collapsed .ba-v2-layer-legends.is-collapsed,
body.explore-v2:has(.inspector.on:not(.collapsed)):not(.v2-forecast-collapsed) .ba-v2-layer-legends.is-collapsed,
body.explore-v2:has(.inspector.collapsed).v2-legends-tucked.is-legend-open .ba-v2-layer-legends,
body.explore-v2:has(.inspector.collapsed).v2-legends-collapsed.is-legend-open .ba-v2-layer-legends,
body.explore-v2.v2-forecast-collapsed.v2-legends-tucked.is-legend-open .ba-v2-layer-legends,
body.explore-v2.v2-forecast-collapsed.v2-legends-collapsed.is-legend-open .ba-v2-layer-legends,
body.explore-v2:has(.inspector.on:not(.collapsed)):not(.v2-forecast-collapsed).v2-legends-tucked.is-legend-open .ba-v2-layer-legends,
body.explore-v2:has(.inspector.on:not(.collapsed)):not(.v2-forecast-collapsed).v2-legends-collapsed.is-legend-open .ba-v2-layer-legends {
  top: var(--ev2-legends-anchor-top, var(--ev2-rail-top)) !important;
  left: auto !important;
  right: calc(var(--ev2-chrome-side) + var(--ev2-rail-w) + 8px) !important;
  align-items: flex-end !important;
  z-index: 70 !important;
}

/* Fallback open dock heights by view (JS overwrites --ev2-weather-dock-h). */
body.explore-v2.insp-view-now {
  --ev2-forecast-open-h: 218px;
}
body.explore-v2.insp-view-today {
  --ev2-forecast-open-h: min(740px, var(--ev2-forecast-dock-max-h));
}
body.explore-v2.insp-view-week {
  /* Use available viewport; 580px was shorter than day rail + charts. */
  --ev2-forecast-open-h: var(--ev2-forecast-dock-max-h);
}

/* Tall docks that leave no map room: collapse indexes to a reopen control. */
body.explore-v2.v2-legends-tucked .ba-v2-layer-legends,
body.explore-v2.v2-legends-collapsed .ba-v2-layer-legends {
  visibility: visible !important;
  pointer-events: auto !important;
  max-height: 44px;
  overflow: hidden;
}
body.explore-v2.v2-legends-tucked .ba-v2-layer-legends::before,
body.explore-v2.v2-legends-collapsed .ba-v2-layer-legends::before {
  content: none;
  display: none;
}
body.explore-v2.v2-legends-tucked .ba-v2-layer-legend,
body.explore-v2.v2-legends-tucked .ba-v2-temp-legend,
body.explore-v2.v2-legends-collapsed .ba-v2-layer-legend,
body.explore-v2.v2-legends-collapsed .ba-v2-temp-legend,
body.explore-v2.v2-legends-tucked .ba-v2-legends-collapse,
body.explore-v2.v2-legends-collapsed .ba-v2-legends-collapse {
  display: none !important;
}
body.explore-v2.v2-legends-tucked.is-legend-open .ba-v2-layer-legends,
body.explore-v2.v2-legends-collapsed.is-legend-open .ba-v2-layer-legends {
  max-height: none;
  overflow: visible;
  /* Expanded chips need a definite width — never shrink-wrap to the title. */
  width: var(--ev2-left-stack-w) !important;
  min-width: var(--ev2-left-stack-w) !important;
  max-width: min(
    var(--ev2-left-stack-w),
    calc(100vw - var(--ev2-chrome-side) - var(--ev2-rail-w) - 24px)
  ) !important;
}
body.explore-v2.v2-legends-tucked.is-legend-open .ba-v2-layer-legend,
body.explore-v2.v2-legends-tucked.is-legend-open .ba-v2-temp-legend,
body.explore-v2.v2-legends-collapsed.is-legend-open .ba-v2-layer-legend,
body.explore-v2.v2-legends-collapsed.is-legend-open .ba-v2-temp-legend {
  display: grid !important;
}
body.explore-v2.v2-legends-tucked.is-legend-open .ba-v2-legends-collapse,
body.explore-v2.v2-legends-collapsed.is-legend-open .ba-v2-legends-collapse {
  display: inline-flex !important;
}

body.explore-v2 .ba-v2-legends-reopen,
body.explore-v2 .ba-v2-legends-collapse {
  display: none;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  flex: 0 0 auto;
  gap: 4px;
  width: auto;
  max-width: max-content;
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  margin: 0;
  border-radius: 999px;
  border: 1px solid var(--x-line);
  background: var(--x-glass);
  color: var(--x-text);
  font: 600 11px/1 var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--x-shadow);
  -webkit-backdrop-filter: var(--x-glass-blur);
  backdrop-filter: var(--x-glass-blur);
  pointer-events: auto;
  white-space: nowrap;
}
body.explore-v2 .ba-v2-layer-legends.is-collapsed > .ba-v2-legends-reopen:not([hidden]) {
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  /* Host align-items is flex-end when rail-docked. */
  align-self: auto !important;
}
body.explore-v2 .ba-v2-layer-legends.has-legends:not(.is-collapsed) > .ba-v2-legends-collapse:not([hidden]) {
  display: inline-flex !important;
  align-self: auto !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: max-content !important;
  height: 28px;
  min-height: 28px;
  padding: 0 10px;
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: 0.08em;
  opacity: 0.88;
}
body.explore-v2 .ba-v2-legends-collapse__ico {
  width: 14px;
  height: 14px;
  display: block;
  flex: 0 0 auto;
  /* Hide = tuck up; path is already an up chevron — never flip it. */
  transform: none !important;
}

body.explore-v2 .ba-v2-layer-legend,
body.explore-v2 .ba-v2-temp-legend {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto;
  display: none;
  flex: 0 0 auto;
  /* Scale track needs a non-zero min so shrink-wrapped hosts cannot collapse
     the gradient to the 2px value mark. */
  grid-template-columns: var(--ev2-legend-label-w) minmax(var(--ev2-legend-scale-min, 88px), 1fr);
  align-items: center;
  column-gap: 8px;
  width: 100%;
  min-width: calc(
    var(--ev2-legend-label-w) + var(--ev2-legend-scale-min, 88px) + 8px + 28px
  );
  max-width: none;
  align-self: stretch;
  box-sizing: border-box;
  padding: 12px 14px !important;
  border: 1px solid var(--x-line);
  border-radius: 14px;
  background: var(--x-glass);
  box-shadow: var(--x-shadow);
  -webkit-backdrop-filter: var(--x-glass-blur);
  backdrop-filter: var(--x-glass-blur);
  pointer-events: none;
  color: var(--x-text);
}

body.explore-v2 .ba-v2-layer-legend.is-on:not([hidden]),
body.explore-v2 .ba-v2-temp-legend.is-on:not([hidden]) {
  display: grid;
}

body.explore-v2 .ba-v2-layer-legend--tappable.is-on:not([hidden]) {
  pointer-events: auto;
  cursor: pointer;
}
body.explore-v2 .ba-v2-layer-legend--tappable.is-on:not([hidden]):hover,
body.explore-v2 .ba-v2-layer-legend--tappable.is-on:not([hidden]):focus-visible {
  border-color: rgba(11, 99, 246, 0.55);
  outline: none;
}
body.explore-v2 .ba-v2-layer-legend--tappable.is-on:not([hidden]):focus-visible {
  box-shadow: 0 0 0 2px rgba(11, 99, 246, 0.35), var(--x-shadow);
}

body.explore-v2 .ba-v2-layer-legend__title,
body.explore-v2 .ba-v2-temp-legend__title {
  grid-column: 1;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: var(--ev2-label-weight);
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--x-muted);
  white-space: nowrap;
}

body.explore-v2 .ba-v2-layer-legend__scale,
body.explore-v2 .ba-v2-temp-legend__scale {
  grid-column: 2;
  min-width: var(--ev2-legend-scale-min, 88px);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

body.explore-v2 .ba-v2-layer-legend__bar,
body.explore-v2 .ba-v2-temp-legend__bar {
  position: relative;
  width: 100%;
  min-width: var(--ev2-legend-scale-min, 88px);
  height: 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  /* Visible so the value mark can sit slightly proud of the track. */
  overflow: visible;
}

body.explore-v2 .ba-v2-layer-legend__mark {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 1px;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(4, 24, 32, 0.45);
  /* left set in JS as inset px so the mark stays inside the track. */
  transform: none;
  pointer-events: none;
}

body.explore-v2 .ba-v2-layer-legend--temp .ba-v2-layer-legend__bar,
body.explore-v2 .ba-v2-temp-legend__bar {
  background: linear-gradient(
    90deg,
    #2b6cb0 0%,
    #38bdf8 25%,
    #fde047 50%,
    #fb923c 75%,
    #ef4444 100%
  );
}

body.explore-v2 .ba-v2-layer-legend--depth .ba-v2-layer-legend__bar {
  /* Matches atlas .bar.depth — shallow (light) → deep (dark), ft */
  background: linear-gradient(
    90deg,
    #b8eefc 0%,
    #6eb8e0 22%,
    #4a96c8 42%,
    #2f5f98 62%,
    #1e3d6a 82%,
    #0c1830 100%
  );
}

body.explore-v2 .ba-v2-layer-legend--rain .ba-v2-layer-legend__bar {
  /* Matches atlas PRECIP_STOPS / RainViewer Universal (mm/h) */
  background: linear-gradient(
    90deg,
    #0f2d5a 0%,
    #1e5fa0 18%,
    #2d82c8 32%,
    #46a55f 48%,
    #8cc846 62%,
    #dcd237 76%,
    #f0a02d 88%,
    #dc4b37 100%
  );
}

body.explore-v2 .ba-v2-layer-legend--water .ba-v2-layer-legend__bar {
  background: linear-gradient(
    90deg,
    #1d4ed8 0%,
    #0ea5e9 25%,
    #14b8a6 50%,
    #fbbf24 75%,
    #f97316 100%
  );
}

body.explore-v2 .ba-v2-layer-legend--clouds .ba-v2-layer-legend__bar {
  background: linear-gradient(
    90deg,
    rgba(238, 246, 248, 0.25) 0%,
    rgba(200, 214, 220, 0.55) 25%,
    rgba(160, 176, 186, 0.75) 50%,
    rgba(120, 136, 148, 0.9) 75%,
    rgba(90, 104, 116, 1) 100%
  );
}

/* Clouds % shares --ev2-legend-label-w / stack min-width with Rain mm/h. */

body.explore-v2 .ba-v2-layer-legend__ticks,
body.explore-v2 .ba-v2-temp-legend__ticks {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 1.2em;
  overflow: hidden;
}

body.explore-v2 .ba-v2-layer-legend__ticks span,
body.explore-v2 .ba-v2-temp-legend__ticks span {
  position: absolute;
  top: 0;
  left: var(--ba-tick-pct, 0%);
  max-width: 48%;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  font-size: 10px;
  font-weight: var(--ev2-label-weight);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: rgba(238, 246, 248, 0.78);
  transform: translateX(-50%);
}

body.explore-v2 .ba-v2-layer-legend__ticks span:first-child,
body.explore-v2 .ba-v2-temp-legend__ticks span:first-child {
  transform: translateX(0);
}

body.explore-v2 .ba-v2-layer-legend__ticks span:last-child,
body.explore-v2 .ba-v2-temp-legend__ticks span:last-child {
  transform: translateX(-100%);
}

@media (max-width: 900px) {
  /* Color indexes sit under the header, clear of search and the conditions strip. */
  body.explore-v2 {
    --ev2-legend-stack-gap: 6px;
  }

  body.explore-v2 .ba-v2-layer-legends,
  body.explore-v2:has(.inspector.collapsed) .ba-v2-layer-legends,
  body.explore-v2.v2-forecast-collapsed .ba-v2-layer-legends,
  body.explore-v2:has(.inspector.on:not(.collapsed)):not(.v2-forecast-collapsed) .ba-v2-layer-legends {
    top: var(--ev2-temp-chip-top) !important;
    right: auto !important;
    left: 12px !important;
    bottom: auto !important;
    width: min(200px, calc(100vw - 88px)) !important;
    min-width: min(200px, calc(100vw - 88px)) !important;
    max-width: min(200px, calc(100vw - 88px)) !important;
    gap: var(--ev2-legend-stack-gap) !important;
    z-index: 74 !important;
  }

  /* Collapsed color key: no floating map pill on phone. Reopen via Layer → Key. */
  body.explore-v2 .ba-v2-layer-legends.is-collapsed,
  body.explore-v2.v2-legends-collapsed:not(.is-legend-open) .ba-v2-layer-legends,
  body.explore-v2.v2-legends-tucked:not(.is-legend-open) .ba-v2-layer-legends {
    display: none !important;
    pointer-events: none !important;
  }

  /* Expanded key scales: keep left of map, clear of Layer stack + thumb dock. */
  body.explore-v2.v2-legends-tucked.is-legend-open .ba-v2-layer-legends,
  body.explore-v2.v2-legends-collapsed.is-legend-open .ba-v2-layer-legends {
    display: flex !important;
    top: auto !important;
    bottom: calc(
      var(--status-h, 12px) + var(--ev2-thumb-bottom-gap, 12px) +
        var(--ev2-thumb-row-h, 56px) + 12px
    ) !important;
    left: 12px !important;
    right: auto !important;
    align-items: flex-start !important;
    z-index: 74 !important;
    pointer-events: auto !important;
  }

  body.explore-v2 .ba-v2-legends-reopen,
  body.explore-v2 .ba-v2-layer-legends.is-collapsed > .ba-v2-legends-reopen:not([hidden]) {
    display: none !important;
  }

  body.explore-v2:has(.inspector.on.m-open:not(.collapsed)) .ba-v2-layer-legends {
    display: none !important;
  }

  body.explore-v2 .ba-v2-layer-legends {
    --ev2-legend-label-w: 56px;
    --ev2-legend-scale-min: 72px;
  }

  body.explore-v2 .ba-v2-layer-legends.has-legends:not(.is-collapsed) {
    width: min(200px, calc(100vw - 88px)) !important;
    min-width: min(200px, calc(100vw - 88px)) !important;
  }

  body.explore-v2 .ba-v2-layer-legends.is-collapsed {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    align-items: flex-end !important;
  }

  body.explore-v2 .ba-v2-layer-legend,
  body.explore-v2 .ba-v2-temp-legend {
    padding: 10px 12px !important;
    border-radius: 12px !important;
    column-gap: 6px !important;
    min-width: calc(
      var(--ev2-legend-label-w) + var(--ev2-legend-scale-min, 72px) + 6px + 24px
    );
    /* Chips still span the stack width whether host is left- or right-docked. */
    width: 100% !important;
    align-self: stretch;
  }

  /* Compact Hide / Legends pills; ≥44px tall for touch. */
  body.explore-v2 .ba-v2-legends-reopen,
  body.explore-v2 .ba-v2-legends-collapse,
  body.explore-v2 .ba-v2-layer-legends.is-collapsed > .ba-v2-legends-reopen:not([hidden]),
  body.explore-v2 .ba-v2-layer-legends.has-legends:not(.is-collapsed) > .ba-v2-legends-collapse:not([hidden]) {
    align-self: auto !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: max-content !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 12px !important;
  }
  body.explore-v2 .ba-v2-layer-legends.has-legends:not(.is-collapsed) > .ba-v2-legends-collapse:not([hidden]) {
    margin-top: 2px !important;
    font-size: 10px !important;
  }

  body.explore-v2 .ba-v2-layer-legend__title,
  body.explore-v2 .ba-v2-temp-legend__title {
    font-size: 10px !important;
  }

  body.explore-v2 .ba-v2-layer-legend__ticks span,
  body.explore-v2 .ba-v2-temp-legend__ticks span {
    font-size: 8px !important;
  }

  /* Right stack is narrow — indexes stay on the map, never inside the rail.
     Expanded indexes need a real width so the scale column cannot shrink-wrap
     to zero (title + 2px mark only). Collapsed Legends docks beside Layer. */
  body.explore-v2.m-layers-open .ba-v2-layer-legends,
  body.explore-v2.m-layers-open .ba-v2-layer-legends.has-legends:not(.is-collapsed) {
    right: auto !important;
    left: 12px !important;
    width: min(200px, calc(100vw - 24px - var(--ev2-layer-stack-w, 58px) - 16px)) !important;
    min-width: min(180px, calc(100vw - 24px - var(--ev2-layer-stack-w, 58px) - 16px)) !important;
    max-width: min(200px, calc(100vw - 24px - var(--ev2-layer-stack-w, 58px) - 16px)) !important;
  }
  /* Layers open: collapsed key stays off-map; expanded scales clear the stack. */
  body.explore-v2.m-layers-open .ba-v2-layer-legends.is-collapsed,
  body.explore-v2.m-layers-open.v2-legends-collapsed:not(.is-legend-open) .ba-v2-layer-legends,
  body.explore-v2.m-layers-open.v2-legends-tucked:not(.is-legend-open) .ba-v2-layer-legends {
    display: none !important;
    pointer-events: none !important;
  }
  body.explore-v2.m-layers-open.v2-legends-tucked.is-legend-open .ba-v2-layer-legends,
  body.explore-v2.m-layers-open.v2-legends-collapsed.is-legend-open .ba-v2-layer-legends {
    display: flex !important;
    top: auto !important;
    bottom: calc(
      var(--status-h, 12px) + var(--ev2-thumb-bottom-gap, 12px) +
        var(--ev2-thumb-row-h, 56px) + 12px
    ) !important;
    left: 12px !important;
    right: auto !important;
    width: min(
      200px,
      calc(100vw - 24px - var(--ev2-layer-stack-w, 58px) - 16px)
    ) !important;
    min-width: min(
      180px,
      calc(100vw - 24px - var(--ev2-layer-stack-w, 58px) - 16px)
    ) !important;
    max-width: min(
      200px,
      calc(100vw - 24px - var(--ev2-layer-stack-w, 58px) - 16px)
    ) !important;
    align-items: flex-start !important;
    pointer-events: auto !important;
  }

  /* After all mobile Legends bottom docks: when the forecast player is open,
     park Legends just above the player so the pill never covers Play/Pause. */
  body.explore-v2.rain-scrub .ba-v2-layer-legends,
  body.explore-v2.clouds-scrub .ba-v2-layer-legends,
  body.explore-v2.v2-player-open .ba-v2-layer-legends,
  body.explore-v2.rain-scrub .ba-v2-layer-legends.is-collapsed,
  body.explore-v2.clouds-scrub .ba-v2-layer-legends.is-collapsed,
  body.explore-v2.v2-player-open .ba-v2-layer-legends.is-collapsed,
  body.explore-v2.rain-scrub:has(.inspector.collapsed) .ba-v2-layer-legends,
  body.explore-v2.clouds-scrub:has(.inspector.collapsed) .ba-v2-layer-legends,
  body.explore-v2.v2-player-open:has(.inspector.collapsed) .ba-v2-layer-legends,
  body.explore-v2.v2-forecast-collapsed.rain-scrub .ba-v2-layer-legends,
  body.explore-v2.v2-forecast-collapsed.clouds-scrub .ba-v2-layer-legends,
  body.explore-v2.v2-forecast-collapsed.v2-player-open .ba-v2-layer-legends,
  body.explore-v2.m-layers-open.rain-scrub .ba-v2-layer-legends,
  body.explore-v2.m-layers-open.clouds-scrub .ba-v2-layer-legends,
  body.explore-v2.m-layers-open.v2-player-open .ba-v2-layer-legends,
  body.explore-v2.m-layers-open.rain-scrub .ba-v2-layer-legends.is-collapsed,
  body.explore-v2.m-layers-open.clouds-scrub .ba-v2-layer-legends.is-collapsed,
  body.explore-v2.m-layers-open.v2-player-open .ba-v2-layer-legends.is-collapsed,
  body.explore-v2.m-layers-open.v2-legends-collapsed:not(.is-legend-open).rain-scrub .ba-v2-layer-legends,
  body.explore-v2.m-layers-open.v2-legends-collapsed:not(.is-legend-open).clouds-scrub .ba-v2-layer-legends,
  body.explore-v2.m-layers-open.v2-legends-collapsed:not(.is-legend-open).v2-player-open .ba-v2-layer-legends,
  body.explore-v2.m-layers-open.v2-legends-tucked:not(.is-legend-open).rain-scrub .ba-v2-layer-legends,
  body.explore-v2.m-layers-open.v2-legends-tucked:not(.is-legend-open).clouds-scrub .ba-v2-layer-legends,
  body.explore-v2.m-layers-open.v2-legends-tucked:not(.is-legend-open).v2-player-open .ba-v2-layer-legends,
  body.explore-v2.m-layers-open.v2-legends-tucked.is-legend-open.rain-scrub .ba-v2-layer-legends,
  body.explore-v2.m-layers-open.v2-legends-tucked.is-legend-open.clouds-scrub .ba-v2-layer-legends,
  body.explore-v2.m-layers-open.v2-legends-tucked.is-legend-open.v2-player-open .ba-v2-layer-legends,
  body.explore-v2.m-layers-open.v2-legends-collapsed.is-legend-open.rain-scrub .ba-v2-layer-legends,
  body.explore-v2.m-layers-open.v2-legends-collapsed.is-legend-open.clouds-scrub .ba-v2-layer-legends,
  body.explore-v2.m-layers-open.v2-legends-collapsed.is-legend-open.v2-player-open .ba-v2-layer-legends {
    top: auto !important;
    bottom: calc(
      var(--ev2-cond-strip-bottom) + var(--ev2-cond-strip-h, 44px) +
        var(--ev2-bottom-stack-gap, 10px) + var(--ev2-mobile-player-h, 96px) +
        10px
    ) !important;
    left: 12px !important;
    right: auto !important;
    align-items: flex-start !important;
    z-index: 75 !important;
  }

  /* Beat player-open positioning: collapsed key never floats on phone. */
  body.explore-v2.rain-scrub .ba-v2-layer-legends.is-collapsed,
  body.explore-v2.clouds-scrub .ba-v2-layer-legends.is-collapsed,
  body.explore-v2.v2-player-open .ba-v2-layer-legends.is-collapsed,
  body.explore-v2.m-layers-open.v2-legends-collapsed:not(.is-legend-open) .ba-v2-layer-legends,
  body.explore-v2.m-layers-open.v2-legends-tucked:not(.is-legend-open) .ba-v2-layer-legends {
    display: none !important;
    pointer-events: none !important;
  }
}

/* Slim horizontal time line (legacy-style) — thin track, not a fat capsule */
body.explore-v2 .data-dock,
body.explore-v2:has(.inspector.on) .data-dock,
body.explore-v2:has(.inspector.on.week-open) .data-dock {
  position: fixed !important;
  top: var(--ev2-timeline-top) !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  z-index: 66 !important;
  display: block !important;
  width: min(720px, calc(100vw - 340px)) !important;
  max-width: none !important;
  min-width: 0 !important;
  height: var(--ev2-timeline-h) !important;
  box-sizing: border-box !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
  border: 1px solid var(--x-line) !important;
  border-radius: 999px !important;
  background: var(--x-glass) !important;
  box-shadow: 0 10px 28px rgba(0, 10, 18, 0.22) !important;
  -webkit-backdrop-filter: var(--x-glass-blur) !important;
  backdrop-filter: var(--x-glass-blur) !important;
}

body.atlas-scope.explore-v2:not(.v2-player-open) .data-dock,
body.atlas-scope.explore-v2:not(.v2-player-open):has(.inspector.on) .data-dock,
body.atlas-scope.explore-v2:not(.v2-player-open):has(.inspector.on.week-open) .data-dock {
  display: none !important;
}

/* The legacy desktop rule includes mode + inspector state, so match that
   specificity to keep the timeline clear of the utility rail. */
body.atlas-scope.explore-v2.mode-conditions .data-dock,
body.atlas-scope.explore-v2.mode-conditions:has(.inspector.on) .data-dock,
body.atlas-scope.explore-v2.mode-conditions:has(.inspector.on.week-open) .data-dock {
  right: auto !important;
  left: 50% !important;
  width: min(720px, calc(100vw - 340px)) !important;
  transform: translateX(-50%) !important;
}

body.explore-v2 .timeline-dock,
body.explore-v2 .timeline-dock.on {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Play + thin scrub line + Observed/Now/Forecast + close on one row */
body.explore-v2 .scrubber {
  height: 100% !important;
  padding: 4px 6px !important;
  gap: 10px !important;
  border-radius: 999px !important;
  background: transparent !important;
  align-items: center !important;
}

body.explore-v2 .scrubber .play {
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
  border-radius: 50% !important;
  background: var(--x-blue) !important;
  color: #fff !important;
  font-size: 10px !important;
}

/* Close matches Play (26px), mounted inside .scrubber — stay in pill bounds. */
body.explore-v2 .ba-v2-player-close {
  display: none;
}
body.explore-v2.rain-scrub .ba-v2-player-close,
body.explore-v2.clouds-scrub .ba-v2-player-close,
body.explore-v2.v2-player-open .ba-v2-player-close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  align-self: center;
  position: static !important;
  flex: 0 0 26px !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--x-blue) !important;
  box-shadow: none !important;
  color: #fff !important;
  line-height: 1 !important;
  pointer-events: auto !important;
  z-index: 4;
}
body.explore-v2 .ba-v2-player-close svg {
  width: 14px;
  height: 14px;
}

body.explore-v2 .scrubber .body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 0 !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

/* Meta is clipped by default (segment labels own the chrome). When the
   rain/clouds/forecast player is open, restore the meta row so the living
   scrub sky glyph + when-label can show (Slice 4). */
body.explore-v2 .scrubber .meta {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
body.explore-v2.rain-scrub .scrubber .meta,
body.explore-v2.clouds-scrub .scrubber .meta,
body.explore-v2.v2-player-open .scrubber .meta {
  position: relative !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 0 2px !important;
  overflow: hidden !important;
  clip: auto !important;
  white-space: nowrap !important;
  border: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
}
body.explore-v2 .scrubber .scrub-meta-lead {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
body.explore-v2 .scrubber .scrub-sky.wx-sky-morph {
  width: 28px !important;
  height: 24px !important;
  flex: 0 0 auto !important;
}
/* Living when-label only. Hide #scrub-span ("NOW · NEXT Nh") so it cannot
   stack a second NOW over the track / hour-mark Now. */
body.explore-v2.rain-scrub .scrubber .when,
body.explore-v2.clouds-scrub .scrubber .when,
body.explore-v2.v2-player-open .scrubber .when {
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body.explore-v2.rain-scrub .scrubber .span,
body.explore-v2.clouds-scrub .scrubber .span,
body.explore-v2.v2-player-open .scrubber .span {
  display: none !important;
}

/* Hour marks (−2H / Now / +2H) own the Now glyph under the track. Hide the
   Observed/Now/Forecast overlay so Now cannot double-print on the thumb. */
body.explore-v2.rain-scrub .scrubber .ba-v2-tl-segments,
body.explore-v2.clouds-scrub .scrubber .ba-v2-tl-segments,
body.explore-v2.v2-player-open .scrubber .ba-v2-tl-segments {
  display: none !important;
}

body.explore-v2 .scrubber .tide-layer,
body.explore-v2 .scrubber .wave-curls,
body.explore-v2 .scrubber .sun-marks,
body.explore-v2 .scrubber .best-window,
body.explore-v2 .scrubber .quality-track,
body.explore-v2 .scrubber .ticks:not(.wx-hour-marks) {
  display: none !important;
}

/* Hour marks (−2H / Now / +2H…) must win over the legacy ticks hide. */
body.explore-v2 .scrubber .ticks.wx-hour-marks {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 16px !important;
  margin-top: 2px !important;
  pointer-events: none !important;
  z-index: 2 !important;
  overflow: visible !important;
}

body.explore-v2 .scrubber .ticks.wx-hour-marks .wx-hour-mark {
  position: absolute !important;
  top: 0 !important;
  transform: translateX(-50%);
  color: var(--x-mute, rgba(255, 255, 255, 0.55)) !important;
  /* BA-348: under-track ticks — bumped slightly for readability */
  font: 600 10px/16px var(--font-ba-sans, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif) !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
  flex: none !important;
}

/* Keep percentage left from JS — do not pin the first tick to 0 (that
   collapsed +2H onto the track start and made the series look uneven). */
body.explore-v2 .scrubber .ticks.wx-hour-marks .wx-hour-mark.start {
  transform: translateX(-50%) !important;
}

/* Cap the last label so +8H does not spill past the scrub track. */
body.explore-v2 .scrubber .ticks.wx-hour-marks .wx-hour-mark.end {
  transform: translateX(-100%) !important;
}

body.explore-v2 .scrubber .ticks.wx-hour-marks .wx-hour-mark.now {
  color: var(--x-text, rgba(255, 255, 255, 0.88)) !important;
  font-weight: 650 !important;
}

body.explore-v2 .scrubber .track-wrap {
  position: relative !important;
  /* 30px label+track band (match mobile 28–32): NOW/FORECAST clear of the line. */
  height: 30px !important;
  margin: 0 !important;
  display: block !important;
  justify-content: unset !important;
  align-items: unset !important;
}

/* Labels sit above; track + thumb share the lower 14px band.
   Line bottom = (14 − 3) / 2 = 5.5px so line center matches the range track. */
body.explore-v2 .scrubber .ba-v2-tl-line {
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: 5.5px;
  height: 3px;
  margin: 0;
  transform: none;
  border-radius: 999px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

body.explore-v2 .scrubber .ba-v2-tl-line__obs,
body.explore-v2 .scrubber .ba-v2-tl-line__fc {
  position: absolute;
  top: 0;
  bottom: 0;
}

body.explore-v2 .scrubber .ba-v2-tl-line__obs {
  left: 0;
  width: var(--ev2-now-pct, 40%);
  background: rgba(43, 190, 242, 0.55);
}

body.explore-v2 .scrubber .ba-v2-tl-line__fc {
  left: var(--ev2-now-pct, 40%);
  right: 0;
  background: rgba(11, 99, 246, 0.42);
}

body.explore-v2 .scrubber input[type="range"] {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 14px !important;
  margin: 0 !important;
}

body.explore-v2 .scrubber input[type="range"]::-webkit-slider-runnable-track {
  height: 3px !important;
  background: transparent !important;
}

body.explore-v2 .scrubber input[type="range"]::-moz-range-track {
  height: 3px !important;
  background: transparent !important;
}

/* 11px thumb on 3px track → margin-top (11 − 3) / −2 = −4. */
body.explore-v2 .scrubber input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 11px !important;
  height: 11px !important;
  margin-top: -4px !important;
  border-width: 2px !important;
  border-radius: 50% !important;
}

body.explore-v2 .scrubber input[type="range"]::-moz-range-thumb {
  width: 11px !important;
  height: 11px !important;
  border-width: 2px !important;
  border-radius: 50% !important;
  transform: none !important;
}

/* Observed · Now · Forecast — labels above the slim line */
body.explore-v2 .scrubber .ba-v2-tl-segments {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  --ev2-now-pct: 40%;
}

body.explore-v2 .scrubber .ba-v2-tl-seg {
  position: absolute;
  top: 2px;
  font-size: 10px;
  font-weight: var(--ev2-label-weight);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(238, 246, 248, 0.78);
  white-space: nowrap;
  /* ~10px type in a 30px wrap; line sits ~21.5–24.5px → ~9–10px clear gap. */
}

/* Inter-index spacing comes from .ba-v2-layer-legends gap only. */

/* Terrain / coverage warnings sit below tools — never over map controls. */
body.explore-v2 .coverage-chip,
body.explore-v2 .water-view-chip {
  pointer-events: none;
  z-index: 28;
}
body.explore-v2 .water-view-chip.on {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
}
body.explore-v2 .water-view-chip-x {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #f4f1ea;
  font: 500 18px/28px var(--ba-font, "Helvetica Neue", Arial, sans-serif);
  cursor: pointer;
}

body.explore-v2 .scrubber .ba-v2-tl-seg--obs {
  display: none;
}

body.explore-v2 .scrubber .ba-v2-tl-seg--now {
  left: 10px;
  transform: none;
  color: var(--x-text);
  font-weight: 600;
}

body.explore-v2 .scrubber .ba-v2-tl-seg--fc {
  right: 10px;
}

/* Atlas positions −2H/Now/+2H/+4H/+8H by timeline index (matches scrub thumb).
   Visibility override lives with the slim-scrub hide rules above. */

body.explore-v2 .scrubber .wx-now-divider {
  top: auto !important;
  bottom: 1px !important;
  height: 12px !important;
  margin-top: 0 !important;
  width: 1px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: none !important;
  z-index: 6 !important;
}

/* Divider is a 1px now-cursor only. Its legacy "NOW" chip collided with the
   under-track hour-mark Now (screenshot: stacked NOW on the thumb). */
body.explore-v2 .scrubber .wx-now-divider > span,
body.atlas-scope.explore-v2 .scrubber .wx-now-divider > span,
body.explore-v2.rain-scrub .scrubber .wx-now-divider > span,
body.explore-v2.clouds-scrub .scrubber .wx-now-divider > span,
body.explore-v2.v2-player-open .scrubber .wx-now-divider > span {
  display: none !important;
  visibility: hidden !important;
  content: none !important;
  font-size: 0 !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Right utility rail — width matches top nav height (--ev2-nav-h → --ev2-rail-w). */
body.explore-v2 .map-tools,
body.atlas-scope.explore-v2 .map-tools {
  position: fixed !important;
  top: var(--ev2-rail-top) !important;
  right: var(--ev2-chrome-side) !important;
  bottom: 22px !important;
  left: auto !important;
  z-index: 68 !important;
  width: var(--ev2-rail-w) !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

body.explore-v2.v2-player-open .map-tools {
  top: var(--ev2-tools-top-player) !important;
}

body.explore-v2 .map-nav {
  width: var(--ev2-rail-w) !important;
  height: auto !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  align-items: stretch !important;
}

body.explore-v2 .map-nav-group {
  width: var(--ev2-rail-w) !important;
  min-width: var(--ev2-rail-w) !important;
  padding: 6px !important;
  gap: 6px !important;
  border: 1px solid var(--x-line) !important;
  border-radius: 18px !important;
  background: var(--x-glass) !important;
  box-shadow: var(--x-shadow) !important;
  -webkit-backdrop-filter: var(--x-glass-blur) !important;
  backdrop-filter: var(--x-glass-blur) !important;
  box-sizing: border-box !important;
}

body.explore-v2 .map-nav-view { order: 0; }
body.explore-v2 .map-nav-zoom { order: 1; margin-top: 0 !important; }

body.explore-v2 .map-nav-view .style-toggle--aux {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Legacy 2D / 3D / Water stack — kept mounted for Look hooks; never paint. */
body.explore-v2 .map-view-modes {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.explore-v2 .map-nav-accessory-focusable {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 40px !important;
  margin: 0 !important;
  clip: auto !important;
  overflow: visible !important;
}

body.explore-v2 .map-nav .map-rail-btn,
body.explore-v2 .map-nav .zooms .map-rail-btn,
body.explore-v2 .ba-v2-rail-more {
  position: relative;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 40px !important;
  padding: 8px 4px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.1 !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
}

body.explore-v2 .map-view-modes .map-rail-btn {
  min-height: 52px !important;
  padding: 8px 4px 6px !important;
  gap: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

body.explore-v2 #btn-chrome.map-rail-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  min-height: 0 !important;
  padding: 0 !important;
}

body.explore-v2 .map-view-modes .map-rail-icon,
body.explore-v2 #btn-chrome .map-rail-icon {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 auto !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.75 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  pointer-events: none !important;
}

body.explore-v2 .map-view-modes .map-rail-icon [fill],
body.explore-v2 #btn-chrome .map-rail-icon [fill] {
  fill: currentColor !important;
  stroke: none !important;
}

body.explore-v2 .map-view-modes .map-rail-label,
body.explore-v2 #btn-chrome .map-rail-label {
  display: block !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.1 !important;
  text-transform: none !important;
}

body.explore-v2 #btn-water-view .map-rail-icon {
  display: block !important;
}

/* Place categories live in the top nav — never on the right rail. */
body.explore-v2 .map-nav .ba-v2-place-group {
  display: none !important;
}

body.explore-v2 .map-nav .map-rail-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

/* Right-rail latches only: Layer / Temp / Locate. White + short blue underline
   while open/follow is latched. Cycling cells (perspective, lighting, Plan↔Nav)
   stay idle off-white; the changing label is the current value (no .on paint).
   Search / zoom / compass never underline. No blue text or blue fill on dark glass.
   Top layer-rail underlines (.wx-field-toggle .on::after) stay intact. */

/* Cycling / action cells: force idle even if a leftover `.on` remains. */
body.explore-v2 .map-tools #ba-explore-look,
body.explore-v2 .map-tools #ba-explore-look.on,
body.explore-v2 .map-tools #ba-explore-light,
body.explore-v2 .map-tools #ba-explore-light.on,
body.explore-v2 .map-tools #ba-explore-mode-toggle,
body.explore-v2 .map-tools #ba-explore-mode-toggle.on,
body.explore-v2 .map-tools #ba-explore-search,
body.explore-v2 .map-tools #ba-explore-search.on,
body.explore-v2 .map-tools #btn3d.on,
body.explore-v2 .map-tools #btn3d.water-mode,
body.explore-v2 .map-tools #btn3d[data-map-view-mode="water"],
body.explore-v2 .map-tools #btn3d[data-map-view-mode="3d"],
body.explore-v2 .map-tools #btn-chrome.on,
body.explore-v2 .map-tools #wx-basemap-cycle.on {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.88) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
body.explore-v2 .map-tools #ba-explore-look:hover,
body.explore-v2 .map-tools #ba-explore-light:hover,
body.explore-v2 .map-tools #ba-explore-mode-toggle:hover,
body.explore-v2 .map-tools #ba-explore-search:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

body.explore-v2 .map-tools #ba-explore-layers.on,
body.explore-v2 .map-tools #m-map-layers.on,
body.explore-v2 .map-tools #ba-v2-glance-toggle.on,
body.explore-v2 .map-tools #ba-explore-locate.on {
  background: transparent !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.explore-v2 .map-tools #ba-explore-layers.on .map-rail-icon,
body.explore-v2 .map-tools #ba-explore-layers.on .map-rail-label,
body.explore-v2 .map-tools #m-map-layers.on .map-rail-icon,
body.explore-v2 .map-tools #m-map-layers.on .map-rail-label,
body.explore-v2 .map-tools #ba-explore-locate.on .map-rail-icon,
body.explore-v2 .map-tools #ba-explore-locate.on .map-rail-label,
body.explore-v2 .map-tools #ba-v2-glance-toggle.on .ba-v2-glance-toggle-temp,
body.explore-v2 .map-tools #ba-v2-glance-toggle.on .ba-v2-glance-toggle-ico {
  color: #fff !important;
}

body.explore-v2 .map-tools #ba-explore-layers.on .map-rail-icon,
body.explore-v2 .map-tools #m-map-layers.on .map-rail-icon,
body.explore-v2 .map-tools #ba-explore-locate.on .map-rail-icon {
  stroke: currentColor !important;
}

body.explore-v2 .map-tools #ba-explore-layers.on .map-rail-icon [fill],
body.explore-v2 .map-tools #ba-explore-layers.on .map-rail-icon .rail-icon-dot,
body.explore-v2 .map-tools #m-map-layers.on .map-rail-icon [fill],
body.explore-v2 .map-tools #m-map-layers.on .map-rail-icon .rail-icon-dot,
body.explore-v2 .map-tools #ba-explore-locate.on .map-rail-icon [fill],
body.explore-v2 .map-tools #ba-explore-locate.on .map-rail-icon .rail-icon-dot {
  fill: currentColor !important;
  stroke: none !important;
}

body.explore-v2 .map-tools #ba-explore-layers.on:hover,
body.explore-v2 .map-tools #m-map-layers.on:hover,
body.explore-v2 .map-tools #ba-v2-glance-toggle.on:hover,
body.explore-v2 .map-tools #ba-explore-locate.on:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

body.explore-v2 .map-tools #ba-explore-layers.on::after,
body.explore-v2 .map-tools #m-map-layers.on::after,
body.explore-v2 .map-tools #ba-v2-glance-toggle.on::after,
body.explore-v2 .map-tools #ba-explore-locate.on::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  right: 10px;
  bottom: 3px;
  left: 10px;
  height: 2px;
  border-radius: 999px;
  background: #0b63f6;
  pointer-events: none;
}

/* Cycling / action cells: never paint a selection underline. */
body.explore-v2 .map-tools #ba-explore-look.on::after,
body.explore-v2 .map-tools #ba-explore-light.on::after,
body.explore-v2 .map-tools #ba-explore-mode-toggle.on::after,
body.explore-v2 .map-tools #ba-explore-search.on::after,
body.explore-v2 .map-tools #zloc.on::after,
body.explore-v2 .map-tools #m-map-search.on::after,
body.explore-v2 .map-tools #zin.on::after,
body.explore-v2 .map-tools #zout.on::after,
body.explore-v2 .map-tools #zcompass.on::after,
body.explore-v2 .map-tools #btn-chrome.on::after,
body.explore-v2 .map-tools #btn3d.on::after,
body.explore-v2 .map-nav .map-rail-btn.on#wx-basemap-cycle::after {
  content: none !important;
  display: none !important;
}

body.explore-v2 #zloc,
body.explore-v2 #m-map-layers { font-size: 0 !important; }
/* Thumb-row Search is mobile-only (installed by explore-v2-shell.js). */
@media (min-width: 901px) {
  body.explore-v2 #m-map-search { display: none !important; }
}
/* Recenter: icon-only (SVG injected by explore-v2-shell). */
body.explore-v2 #zloc::before {
  content: none !important;
  display: none !important;
}
body.explore-v2 #zloc:not(.on)::after {
  content: none !important;
  display: none !important;
}
body.explore-v2 #zloc {
  min-height: 40px !important;
  padding: 0 !important;
}
body.explore-v2 #zloc .map-rail-icon {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
body.explore-v2 #zloc .map-rail-icon .rail-icon-dot {
  fill: currentColor;
  stroke: none;
}
body.explore-v2 #m-map-layers::before {
  margin-right: 4px;
  font-size: 16px;
  content: "▱";
}
body.explore-v2 #m-map-layers::after { content: "Layers"; font-size: 11px; font-weight: var(--ev2-label-weight); }
body.explore-v2 #map-rail-clouds { display: none !important; }

/* Compact disclaimer under the layer rail (not a wide banner).
   Pill end-caps are ~18px on a 36px height — left padding must clear that
   curve so the leading "W" is not flush against the rounded edge.
   Copy must wrap on narrow phones — never ellipsis the full warning. */
body.explore-v2 .water-view-chip {
  top: calc(var(--ev2-tools-top, 88px) + 10px);
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 36;
  display: none;
  width: max-content;
  max-width: min(520px, calc(100vw - 64px));
  min-height: 36px;
  height: auto;
  /* 16px left (≥ end-cap); 6px right outside the 28px close control */
  padding: 8px 6px 8px 16px !important;
  border-radius: 999px;
  background: rgba(4, 24, 32, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 22px rgba(4, 24, 32, 0.35);
  color: rgba(244, 241, 234, 0.92);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.35;
  white-space: normal !important;
  text-align: left;
  box-sizing: border-box;
  overflow: visible;
}
body.explore-v2 .water-view-chip.on {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  pointer-events: auto;
}
body.explore-v2 .water-view-chip-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  white-space: normal !important;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.35;
}
body.explore-v2 .water-view-chip-x {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  align-self: center;
  line-height: 28px;
  font-size: 16px;
}

/*
 * Location source chip
 * - Explore v2 (all widths): wrap mounted in `.ba-nav-right` by my-boat-layer.js
 *   between the wordmark and account/hamburger utility cluster.
 * - Pill title is "Location" + green/red status light; click opens source dropdown.
 */
body.explore-v2 .ba-nav-right {
  overflow: visible !important;
}
body.explore-v2 .ba-my-boat-chip-wrap {
  z-index: 76;
  overflow: visible;
}
body.explore-v2 .ba-my-boat-chip-wrap--open {
  z-index: 90;
}
body.explore-v2 .ba-my-boat-chip-wrap--open .ba-my-boat-source-menu {
  top: calc(100% + 8px);
  right: 0;
  left: auto;
}
@media (min-width: 901px) {
  body.explore-v2 .ba-nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  body.explore-v2 .ba-my-boat-chip-wrap.ba-my-boat-chip--nav,
  body.explore-v2 .ba-nav-right > .ba-my-boat-chip-wrap {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 2;
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
  }
  body.explore-v2 .ba-my-boat-chip-wrap--open.ba-my-boat-chip--nav,
  body.explore-v2 .ba-nav-right > .ba-my-boat-chip-wrap--open {
    z-index: 90;
  }
  body.explore-v2 .ba-my-boat-chip-wrap.ba-my-boat-chip--nav .ba-my-boat-chip,
  body.explore-v2 .ba-nav-right > .ba-my-boat-chip-wrap .ba-my-boat-chip {
    height: 34px;
    min-height: 34px;
    width: max-content;
    max-width: none;
    margin: 0;
    padding: 0 12px 0 10px;
    gap: 8px;
    border-radius: 999px;
    border: 1px solid rgba(43, 190, 242, 0.42);
    background: rgba(4, 24, 32, 0.55);
    box-shadow: none;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
  body.explore-v2 .ba-my-boat-chip--nav .ba-my-boat-chip-name {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
  }
}
@media (min-width: 901px) and (max-width: 1180px) {
  body.explore-v2 .ba-my-boat-chip-wrap.ba-my-boat-chip--nav .ba-my-boat-chip {
    padding: 0 10px 0 8px;
  }
}
@media (max-width: 900px) {
  body.explore-v2 {
    --ev2-my-boat-chip-h: 30px;
    --ev2-mobile-chip-gap: 10px;
    --ev2-mobile-mark: 26px;
    --ev2-mobile-util: 40px;
    --ev2-mobile-loc-max: 155px;
  }
  body.explore-v2 .ba-nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin-left: 0 !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  /* Location chip: sit in the top chrome between logo and utilities.
     Mark-only wordmark frees width; keep utilities from clipping. */
  body.explore-v2 .ba-my-boat-chip-wrap.ba-my-boat-chip--nav,
  body.explore-v2 .ba-nav-right > .ba-my-boat-chip-wrap {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 2;
    flex: 1 1 auto;
    align-self: center;
    margin: 0;
    min-width: 0;
    max-width: min(var(--ev2-mobile-loc-max), 42vw);
    overflow: hidden;
  }
  body.explore-v2 .ba-my-boat-chip-wrap.ba-my-boat-chip--nav .ba-my-boat-chip,
  body.explore-v2 .ba-nav-right > .ba-my-boat-chip-wrap .ba-my-boat-chip {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: var(--ev2-my-boat-chip-h);
    min-height: var(--ev2-my-boat-chip-h);
    margin: 0;
    padding: 0 8px 0 6px;
    gap: 4px;
    border-radius: 999px;
    border: 1px solid rgba(43, 190, 242, 0.42);
    background: rgba(4, 24, 32, 0.55);
    box-shadow: none;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-sizing: border-box;
    justify-content: center;
    white-space: nowrap;
  }
  body.explore-v2 .ba-my-boat-chip .ba-my-boat-chip-name {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
  body.explore-v2 .ba-my-boat-chip-wrap--open .ba-my-boat-source-menu {
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    min-width: 220px;
  }
  body.explore-v2.m-search-open .ba-my-boat-chip-wrap {
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.explore-v2.m-search-open .ba-v2-layer-legends {
    visibility: hidden !important;
    pointer-events: none !important;
  }
  /* Keep terrain note clear of Legends (left) and the layer stack (right). */
  body.explore-v2 .water-view-chip {
    position: fixed !important;
    top: calc(var(--ev2-temp-chip-top) + 52px) !important;
    bottom: auto !important;
    left: 12px !important;
    right: calc(12px + var(--ev2-layer-stack-w, 56px) + 16px) !important;
    transform: none !important;
    z-index: 50 !important;
    width: auto !important;
    max-width: none !important;
    min-height: 34px !important;
    height: auto !important;
    line-height: 1.35 !important;
    padding: 8px 4px 8px 14px !important;
    font-size: 11px !important;
    white-space: normal !important;
    overflow: visible !important;
    border-radius: 16px !important;
    align-items: flex-start !important;
  }
  body.explore-v2.m-layers-open .water-view-chip {
    right: calc(12px + var(--ev2-layer-stack-w, 56px) + 16px) !important;
  }
  body.explore-v2 .water-view-chip-text {
    overflow: visible;
    text-overflow: unset;
    white-space: normal !important;
    line-height: 1.35;
  }
  body.explore-v2 .water-view-chip-x {
    align-self: flex-start;
    margin-top: 0;
  }
  /* Legends Hide / reopen owns this band — never stack the terrain note on it (BA-425). */
  body.explore-v2:has(.ba-v2-layer-legends:not([hidden])) .water-view-chip.on {
    display: none !important;
  }
}
body.explore-v2 .ba-my-boat-source-menu {
  min-width: 240px;
  width: max-content;
  max-width: min(280px, calc(100vw - 24px));
  padding: 10px 8px 8px;
  border-radius: 16px;
}
body.explore-v2 .ba-my-boat-source-menu-title {
  padding: 2px 10px 10px;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.12em;
}
body.explore-v2 .ba-my-boat-source-option {
  min-height: 40px;
  padding: 8px 12px;
  gap: 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
body.explore-v2 .ba-my-boat-source-option-hint {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
body.explore-v2 .ba-my-boat-source-notice {
  margin: 8px 4px 4px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  white-space: normal;
}
body.explore-v2 .sheet .sheet-water-view {
  border-color: rgba(43, 190, 242, 0.45) !important;
}
body.explore-v2 .sheet .sheet-water-view:hover,
body.explore-v2 .sheet .sheet-water-view.on {
  border-color: rgba(43, 190, 242, 0.75) !important;
  background: rgba(43, 190, 242, 0.12) !important;
}
body.explore-v2 .map-nav .zooms { width: 100% !important; gap: 4px !important; }

body.explore-v2 .ba-v2-rail-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

/* Full conditions dock — same glass as layer rail / utility pills.
   Outer surface owns the fill + blur; kill nested .g-strong chrome so
   backdrop-filter does not stack and read as near-opaque.
   Keep -webkit- then unprefixed backdrop-filter (LightningCSS order).
   Top is locked to --ev2-forecast-dock-top (same as collapsed chip);
   taller views grow downward only — never bottom-anchored. */
body.explore-v2 .inspector,
body.explore-v2 .inspector.view-now.on,
body.explore-v2 .inspector.view-today.on,
body.explore-v2 .inspector.view-week.on {
  position: fixed !important;
  top: var(--ev2-forecast-dock-top) !important;
  right: calc(var(--ev2-chrome-side) + 52px + 8px) !important;
  bottom: auto !important;
  left: var(--ev2-chrome-side) !important;
  z-index: 64 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: auto !important;
  max-width: none !important;
  height: 288px !important;
  max-height: var(--ev2-forecast-dock-max-h) !important;
  padding: 0 !important;
  border: 1px solid var(--x-line) !important;
  border-radius: 22px !important;
  background: var(--x-glass) !important;
  box-shadow: var(--x-shadow) !important;
  -webkit-backdrop-filter: var(--x-glass-blur) !important;
  backdrop-filter: var(--x-glass-blur) !important;
  overflow: hidden !important;
  transform: none !important;
}

body.explore-v2 .inspector.collapsed { display: none !important; }
body.explore-v2 #inspector-tab { display: none !important; }

body.explore-v2 .inspector-shell,
body.explore-v2 .inspector-shell.g-strong,
body.explore-v2 .inspector .inspector-shell.g-strong {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  flex-direction: column !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  overflow: hidden !important;
}

body.explore-v2 .inspector-core {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  overflow: hidden !important;
}

body.explore-v2 .inspector-core > .insp-seg,
body.explore-v2 .inspector.view-now .insp-seg,
body.explore-v2 .inspector.view-week .insp-seg {
  display: flex !important;
  flex: 0 0 46px !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 100% !important;
  padding: 0 10px !important;
  gap: 16px !important;
  border-bottom: 1px solid var(--x-line) !important;
}

body.explore-v2 .insp-tab,
body.explore-v2 .inspector.view-now .insp-tab,
body.explore-v2 .inspector.view-week .insp-tab {
  position: relative;
  flex: 0 0 150px !important;
  width: auto !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--x-muted) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-transform: none !important;
}

body.explore-v2 .insp-tab .chev,
body.explore-v2 .mit-tab .chev {
  display: inline-block;
  margin-left: 4px;
  font-size: 14px;
  line-height: 1;
  opacity: 0.72;
  transform: translateY(-0.5px);
}

body.explore-v2 .insp-collapse {
  font-size: 18px;
  line-height: 1;
  transform: none;
}

body.explore-v2 .insp-tab.on::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: var(--x-blue);
}

/* Match collapsed-chip open caret (.ba-v2-forecast-open); always left-pointing close. */
body.explore-v2 .insp-collapse,
body.explore-v2 .inspector.view-now .insp-collapse,
body.explore-v2 .inspector.view-today .insp-collapse,
body.explore-v2 .inspector.view-week .insp-collapse {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 0 0 auto !important;
  color: var(--x-muted) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  transform: none !important;
}

body.explore-v2 .insp-collapse:hover {
  color: var(--x-text) !important;
}

/* OWNERSHIP — forecast dock chrome (bust explore-forecast-* via explore-forecast-dock.css).
   Dual-write winning gutters into public/atlas-legacy/css/explore-forecast-dock.css.
   Do not put Rain/Clouds/Play spine styles here. See docs/explore/weather-overlays.md. */
/* Now panel layout only while Now is active — do not fight view-today/week hide. */
body.explore-v2 .inspector.view-now .insp-now,
body.explore-v2.insp-view-now #insp-now {
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: minmax(230px, 1fr) minmax(460px, 2.15fr) minmax(250px, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
  min-height: 0 !important;
  /* Obvious dock inset — extra bottom so Feels clears the glass edge. */
  padding: 20px 36px 52px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Mutually exclusive panels (desktop + mobile). Dual-write: explore-forecast-dock.css. */
body.explore-v2 .inspector.view-today .insp-now,
body.explore-v2 .inspector.view-week .insp-now,
body.explore-v2.insp-view-today #insp-now,
body.explore-v2.insp-view-week #insp-now {
  display: none !important;
}

body.explore-v2 .v2-now-summary,
body.explore-v2 .v2-now-metrics,
body.explore-v2 .v2-now-tide { min-width: 0; }

body.explore-v2 .v2-now-summary {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
  /* Additional inset inside the left column (on top of .insp-now padding). */
  padding: 2px 24px 16px 8px !important;
  box-sizing: border-box !important;
  border-right: 1px solid var(--x-line);
}

body.explore-v2 .v2-now-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(96px, 1fr));
  align-content: center;
  /* Outer gutters so metric text clears summary/tide dividers (BA-341). */
  padding: 0 14px 0 22px;
  border-right: 1px solid var(--x-line);
  min-width: 0;
  column-gap: 0;
}

body.explore-v2 .v2-now-tide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 8px 0 20px;
  box-sizing: border-box;
}

body.explore-v2 .insp-loc-primary {
  color: var(--x-text) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

body.explore-v2 .insp-loc-sub {
  color: var(--x-muted) !important;
  font-size: 11px !important;
}

body.explore-v2 .insp-now-main {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 4px;
}

body.explore-v2 .insp-now .insp-wicon {
  width: 54px !important;
  height: 46px !important;
}

body.explore-v2 .insp-now .temp,
body.explore-v2 .inspector .wx-temp {
  color: var(--x-text) !important;
  font-size: 38px !important;
  font-weight: 500 !important;
  letter-spacing: -0.04em !important;
}

body.explore-v2 .insp-now .cond {
  color: var(--x-muted) !important;
  font-size: 13px !important;
}

/* Feels / H / L — normal flow under summary (do NOT margin-top:auto; that
   clipped the row under overflow:hidden on the fixed-height dock). */
body.explore-v2 .insp-now-range {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 6px 12px !important;
  flex: 0 0 auto !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 28px !important;
  color: var(--x-muted) !important;
  /* BA-347 / BA-348: keep Feels · H · L compact metadata, not a second display line. */
  font: 500 12px/1.25 var(--font-ba-sans, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif) !important;
  letter-spacing: 0.01em !important;
}
body.explore-v2 .insp-now-range .feels,
body.explore-v2 .insp-now-range .hl {
  color: inherit !important;
  font: inherit !important;
}
body.explore-v2 .insp-now-range #wx-feels-now,
body.explore-v2 .insp-now-range #wx-hi,
body.explore-v2 .insp-now-range #wx-lo {
  color: var(--x-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
}

body.explore-v2 .insp-factual {
  max-width: 260px;
  margin-top: 5px !important;
  color: var(--x-muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

/* v1 Now legal blurb — not part of the v2 dock; prune so it cannot steal a grid column. */
body.explore-v2 .insp-forecast-disclaimer {
  display: none !important;
}

/*
 * NWS advisory chip — leftover direct child of .insp-now. Without this, order:-1
 * + grid stretch steals column 1 (huge empty amber box above Tide). Compact
 * banner row above summary/metrics/tide. Dual-write: explore-forecast-dock.css.
 */
body.explore-v2 .insp-now > .wx-nws-alert {
  grid-column: 1 / -1 !important;
  justify-self: start !important;
  align-self: start !important;
  width: max-content !important;
  max-width: min(100%, 420px) !important;
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  margin: 0 0 8px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font: 600 11px/1.25 var(--font-ba-sans, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif) !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

body.explore-v2 .insp-now-stats { display: contents !important; }

body.explore-v2 .inq,
body.explore-v2 .v2-live-metric {
  min-height: 54px;
  min-width: 0;
  /* Clear gutter both sides of the vertical column rules. */
  padding: 8px 20px !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  border-right: 1px solid var(--x-line);
  box-sizing: border-box;
  overflow: hidden;
}

body.explore-v2 .v2-now-metrics > :nth-child(4n),
body.explore-v2 .v2-now-metrics > :last-child { border-right: 0; }

body.explore-v2 .inq .k,
body.explore-v2 .v2-live-metric .k,
body.explore-v2 .v2-tide-cap {
  color: var(--x-muted) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
}

body.explore-v2 .inq .inq-body,
body.explore-v2 .inq .v,
body.explore-v2 .v2-live-metric .v,
body.explore-v2 .v2-tide-value {
  color: var(--x-text) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  max-width: 100%;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

body.explore-v2 .inq .v,
body.explore-v2 .v2-live-metric .v {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 4px;
  box-sizing: border-box;
}

body.explore-v2 .inq .prov,
body.explore-v2 .v2-live-metric .prov {
  color: rgba(238, 246, 248, 0.52) !important;
  font-size: 10px !important;
}

body.explore-v2 .v2-tide-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

body.explore-v2 .v2-tide-value { font-size: 22px !important; }
body.explore-v2 .v2-tide-chart {
  width: 100%;
  height: 70px;
  overflow: visible;
}
body.explore-v2 .v2-tide-chart .grid {
  stroke: rgba(255, 255, 255, 0.12);
  stroke-dasharray: 3 5;
}
body.explore-v2 .v2-tide-chart .area { fill: url(#v2TideFill); }
body.explore-v2 .v2-tide-chart .line { fill: none; stroke: #1677ff; stroke-width: 2; }
body.explore-v2 .v2-tide-chart .dot { fill: #fff; }
body.explore-v2 .insp-expand-cta { display: none !important; }

body.explore-v2 .inspector.view-today #wx,
body.explore-v2 .inspector.view-week .wx-week {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 16px 18px 20px !important;
  overflow: auto !important;
}

/* Today — tall enough that tide curve + LOW/HIGH stay on-screen at ~1440×900. */
body.explore-v2 .inspector.view-today.on {
  height: min(740px, var(--ev2-forecast-dock-max-h)) !important;
  max-height: min(740px, var(--ev2-forecast-dock-max-h)) !important;
}

body.explore-v2.insp-view-today .inspector-core {
  display: flex !important;
  flex-direction: column !important;
}

body.explore-v2.insp-view-today .inspector.view-today #wx {
  flex: 1 1 auto !important;
  padding: 10px 14px 12px !important;
  overflow: auto !important;
}

body.explore-v2 .v2-today-ready {
  display: grid !important;
  grid-template-columns: minmax(210px, 0.7fr) minmax(620px, 2.3fr) !important;
  grid-template-rows: auto auto 1fr !important;
  column-gap: 18px !important;
  height: 100% !important;
  min-width: 0 !important;
}

body.explore-v2 .v2-today-ready > .insp-loc-head { grid-column: 1; grid-row: 1; }
body.explore-v2 .v2-today-ready > .wx-today-main { grid-column: 1; grid-row: 2; }
body.explore-v2 .v2-today-ready > .insp-factual { grid-column: 1; grid-row: 3; }
body.explore-v2 .v2-today-ready > .wx-today-primary-head { grid-column: 2; grid-row: 1; }
body.explore-v2 .v2-today-ready > .wx-metrics-primary { grid-column: 2; grid-row: 2; }
body.explore-v2 .v2-today-ready > .wx-metrics-more { grid-column: 2; grid-row: 3; }

body.explore-v2 .v2-today-ready .wx-today-main {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 4px 0 !important;
}

/* Today left column: larger temp + sky icon (chrome only). */
body.explore-v2 .v2-today-ready .wx-today-main .temp {
  font-size: 44px !important;
  font-weight: 500 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  color: var(--x-text) !important;
  flex-shrink: 0 !important;
}
body.explore-v2 .v2-today-ready .wx-today-main .insp-wicon,
body.explore-v2 .v2-today-ready .wx-today-main .insp-wicon-lg {
  width: 58px !important;
  height: 50px !important;
  flex-shrink: 0 !important;
  display: grid !important;
  place-items: center !important;
}
body.explore-v2 .v2-today-ready .wx-today-main .insp-wicon svg,
body.explore-v2 .v2-today-ready .wx-today-main .insp-wicon-lg svg {
  width: 54px !important;
  height: 46px !important;
  display: block !important;
}
body.explore-v2 .v2-today-ready .wx-today-main .cond {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--x-muted) !important;
}

body.explore-v2 .v2-today-ready .wx-today-primary-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 26px !important;
}

body.explore-v2 .v2-today-ready .wx-metrics-primary,
body.explore-v2 .v2-today-ready .wx-metrics-more {
  display: grid !important;
  /* Wide enough for "NNW 18 kn" + direction tick without clipping the divider. */
  grid-template-columns: repeat(7, minmax(136px, 1fr)) !important;
  width: 100% !important;
  min-width: 0 !important;
  border-top: 1px solid var(--x-line) !important;
}

body.explore-v2 .v2-today-ready .wx-metrics-more {
  border-bottom: 1px solid var(--x-line) !important;
}

body.explore-v2 .v2-today-ready .wx-metric {
  min-height: 72px !important;
  min-width: 0 !important;
  /* Match Now gutters: text must clear vertical column rules. */
  padding: 10px 16px !important;
  border-right: 1px solid var(--x-line) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

body.explore-v2 .v2-today-ready .wx-metric:last-child { border-right: 0 !important; }
body.explore-v2 .v2-today-ready .wx-metric .k { color: var(--x-muted) !important; font-size: 10px !important; }
body.explore-v2 .v2-today-ready .wx-metric .v {
  color: var(--x-text) !important;
  font-size: 16px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  /* Keep last glyph clear of the column rule (BA-341 / wind "NNW 18 kn"). */
  padding-right: 8px;
  box-sizing: border-box;
}
body.explore-v2 .v2-today-ready .wx-metric .v .arrow.wind-dir {
  flex-shrink: 0;
}
body.explore-v2 .v2-today-ready .wx-metric .prov { color: var(--x-muted) !important; font-size: 9px !important; }
body.explore-v2 .v2-today-ready .wx-more-toggle,
body.explore-v2 .v2-today-ready .insp-today-nav { display: none !important; }

body.explore-v2 .v2-today-ready .wx-score,
body.explore-v2 .v2-today-ready .wx-tide,
body.explore-v2 .v2-today-ready .wx-buoy,
body.explore-v2 .v2-today-ready .wx-pref-line,
body.explore-v2 .v2-today-ready > .v2-today-hourly,
body.explore-v2 .v2-today-ready > .ba-v2-today-model-compare,
body.explore-v2 .v2-today-ready > #ba-v2-today-model-compare {
  grid-column: 1 / -1;
}

/* Today: same model-split card as 7-Day (not gated behind boating-score prefs). */
body.explore-v2 .v2-today-ready #ba-v2-today-model-compare {
  display: block !important;
  margin: 12px 0 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 178, 122, 0.22) !important;
  background: rgba(255, 178, 122, 0.06) !important;
  box-sizing: border-box !important;
}
body.explore-v2 .v2-today-ready #ba-v2-today-model-compare[hidden] {
  display: none !important;
}

/* Today tide — sits below next-hours; plot SVG + HTML hour gutter */
body.explore-v2 .v2-today-ready .wx-tide {
  margin-top: 12px !important;
  padding: 12px 14px 14px !important;
  border-radius: 14px !important;
  background: rgba(4, 24, 32, 0.28) !important;
  border: 1px solid var(--x-line) !important;
}

body.explore-v2 .v2-today-ready .v2-today-hourly + .ba-v2-cond-cap,
body.explore-v2 .v2-today-ready .v2-today-hourly + .wx-tide {
  margin-top: 16px !important;
}

body.explore-v2 .v2-today-ready .wx-tide .tide-head {
  margin-bottom: 2px;
}

body.explore-v2 .v2-today-ready .wx-tide .tide-cap {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: rgba(238, 246, 248, 0.72) !important;
}

body.explore-v2 .v2-today-ready .wx-tide .tide-now {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(238, 243, 248, 0.95) !important;
}

body.explore-v2 .v2-today-ready .wx-tide .tide-curve {
  height: auto !important;
  margin: 10px 0 12px !important;
  display: flex;
  flex-direction: column;
  gap: 0;
}

body.explore-v2 .v2-today-ready .wx-tide .tide-events {
  margin-top: 2px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px 24px !important;
}

body.explore-v2 .v2-today-ready .wx-tide .tide-ev {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: baseline !important;
  column-gap: 10px !important;
  font-size: 12px !important;
  font-weight: 550 !important;
  line-height: 1.25 !important;
}

body.explore-v2 .v2-today-ready .wx-tide .tide-ev-when {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

body.explore-v2 .v2-today-ready .wx-tide .tide-ev .ty {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

body.explore-v2 .v2-today-ready .wx-tide .tide-ev .tm {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(238, 243, 248, 0.9) !important;
  font-variant-numeric: tabular-nums;
}

body.explore-v2 .v2-today-ready .wx-tide .tide-ev .hh {
  margin-left: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(238, 246, 248, 0.62) !important;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

body.explore-v2 .v2-tide-plot-wrap {
  position: relative;
  width: 100%;
  height: 64px;
}

body.explore-v2 .v2-tide-plot-wrap .v2-tide-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

body.explore-v2 .v2-tide-hour-lbl {
  position: absolute;
  top: auto;
  bottom: 2px;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(4, 24, 32, 0.55);
  pointer-events: none;
  white-space: nowrap;
}

body.explore-v2 .v2-tide-now-dot {
  position: absolute;
  z-index: 3;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #0b63f6;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(4, 24, 32, 0.35);
  pointer-events: none;
}

body.explore-v2 .v2-tide-mark {
  position: absolute;
  z-index: 2;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 1.5px rgba(4, 24, 32, 0.35);
}

body.explore-v2 .v2-tide-mark.high { background: #7fd0ff; }
body.explore-v2 .v2-tide-mark.low { background: #ffb27a; }

body.explore-v2 .v2-tide-hours {
  position: relative;
  height: 18px;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

body.explore-v2 .v2-tide-hours .v2-tide-hlbl {
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 550;
  line-height: 1;
  color: rgba(238, 246, 248, 0.72);
  pointer-events: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

body.explore-v2 .v2-tide-hours .v2-tide-hlbl:first-child {
  transform: translateX(0);
}

body.explore-v2 .v2-tide-hours .v2-tide-hlbl:last-child {
  transform: translateX(-100%);
}

/* Hourly conditions graph — below tiled metrics */
body.explore-v2 .v2-today-hourly {
  margin-top: 12px;
  padding: 10px 0 4px;
  border-top: 1px solid var(--x-line);
  min-width: 0;
}

body.explore-v2 .v2-today-hourly-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding: 0 2px;
}

body.explore-v2 .v2-today-hourly-cap {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--x-muted);
}

body.explore-v2 .v2-today-hourly-hint {
  font-size: 11px;
  font-weight: 500;
  color: rgba(238, 246, 248, 0.45);
}

body.explore-v2 .v2-today-hourly-rail {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

body.explore-v2 .v2-today-hourly-empty {
  padding: 16px 8px;
  font-size: 12px;
  color: var(--x-muted);
}

body.explore-v2 .v2-hour {
  flex: 0 0 58px;
  width: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 2px 8px;
  border-radius: 12px;
  scroll-snap-align: center;
  color: var(--x-text);
}

body.explore-v2 .v2-hour.is-now {
  background: rgba(11, 99, 246, 0.16);
  box-shadow: inset 0 0 0 1px rgba(11, 99, 246, 0.35);
}

body.explore-v2 .v2-hour-t {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--x-muted);
}

body.explore-v2 .v2-hour.is-now .v2-hour-t {
  color: var(--x-text);
}

body.explore-v2 .v2-hour-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

body.explore-v2 .v2-hour-icon.wx-sky-live {
  overflow: visible;
}

body.explore-v2 .v2-hour-icon svg,
body.explore-v2 .v2-hour-icon .wx-sky-svg {
  width: 26px;
  height: calc(26px * 0.85);
  display: block;
  overflow: visible;
}

body.explore-v2 .v2-hour-temp {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--x-text);
}

body.explore-v2 .v2-hour-sky {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  color: rgba(238, 246, 248, 0.78);
  max-width: 72px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
}

body.explore-v2 .v2-hour-bar {
  width: 10px;
  height: 36px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

body.explore-v2 .v2-hour-bar i {
  display: block;
  width: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2bbef2 0%, rgba(43, 190, 242, 0.35) 100%);
  min-height: 4px;
}

body.explore-v2 .v2-hour-pop {
  font-size: 11px;
  font-weight: 600;
  color: var(--x-text);
}

/* Taller 7-day dock — readable day cards + full-width marine charts. */
body.explore-v2 .inspector.view-week.on {
  /* Charts are full-bleed; day rail scrolls as one unit (no sticky gutter). */
  --wx-week-sidebar-w: 0px;
  height: var(--ev2-forecast-dock-max-h) !important;
  max-height: var(--ev2-forecast-dock-max-h) !important;
}

body.explore-v2.insp-view-week .inspector-core {
  flex: 0 0 46px !important;
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  overflow: visible !important;
}

body.explore-v2.insp-view-week .inspector.view-week .wx-week {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  padding: 10px 16px 14px !important;
  /* Vertical scroll only when the dock is shorter than the week body. */
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-padding-bottom: 20px;
}

body.explore-v2 .wx-week-inner {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  min-height: min-content !important;
}
body.explore-v2 .wx-week-head {
  flex: 0 0 auto !important;
  min-height: 34px !important;
  margin-bottom: 6px !important;
  padding: 4px 2px 8px !important;
}
body.explore-v2 .wx-week-list {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
}
body.explore-v2 .wx-week-inner {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: visible !important;
}
/*
 * Day rail: denser card row that fills the panel width on desktop.
 * Today + upcoming days share space evenly (flex grow). Horizontal
 * scroll only when the panel is narrower than 7 × min-width.
 * Fixed row height; no sticky underlap; no vertical drift.
 */
body.explore-v2 .wx-week-layout {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  flex: 0 0 auto !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain !important;
  overscroll-behavior-y: none !important;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 0;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
/* Upcoming days take 6/7 of free space so each matches Today (1/7). */
body.explore-v2 .wx-week-columns {
  display: flex !important;
  flex-direction: row !important;
  flex: 6 1 calc(6 * var(--ev2-week-day-min-w)) !important;
  width: auto !important;
  min-width: calc(6 * var(--ev2-week-day-min-w)) !important;
  overflow: visible !important;
}
body.explore-v2 .wx-week-layout,
body.explore-v2 .wx-week-columns,
body.explore-v2 .wx-week-col,
body.explore-v2 .wx-week-sidebar {
  height: 208px !important;
  min-height: 208px !important;
  max-height: 208px !important;
}

/* Today lead card — same denser look as day cols; grows with the rail. */
body.explore-v2 .wx-week-sidebar {
  flex: 1 1 var(--ev2-week-day-min-w) !important;
  width: auto !important;
  min-width: var(--ev2-week-day-min-w) !important;
  max-width: none !important;
  padding: 10px 8px !important;
  gap: 4px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  position: relative !important;
  left: auto !important;
  z-index: auto !important;
  background: transparent !important;
  border-right: 1px solid var(--x-line) !important;
  scroll-snap-align: start;
  cursor: pointer;
  appearance: none;
  color: inherit;
  font: inherit;
}
body.explore-v2 .wx-week-sidebar.is-selected {
  background: rgba(59, 140, 255, 0.12) !important;
  box-shadow: inset 0 0 0 1.5px var(--x-blue, #0B63F6) !important;
}
body.explore-v2 .wx-week-sidebar .wx-sidebar-cap {
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--x-muted) !important;
  flex: 0 0 auto !important;
}
body.explore-v2 .wx-week-sidebar .icon {
  width: 32px !important;
  height: 28px !important;
  margin: 2px 0 !important;
  flex: 0 0 auto !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
}
body.explore-v2 .wx-week-sidebar .icon svg {
  width: 28px !important;
  height: 24px !important;
  display: block !important;
}
body.explore-v2 .wx-week-sidebar .hi {
  font-size: 18px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  color: var(--x-text) !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: center !important;
}
body.explore-v2 .wx-week-sidebar .lo {
  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 500 !important;
  color: var(--x-muted) !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: center !important;
}
body.explore-v2 .wx-week-sidebar .sky,
body.explore-v2 .wx-week-sidebar .wind,
body.explore-v2 .wx-week-sidebar .wave,
body.explore-v2 .wx-week-sidebar .water,
body.explore-v2 .wx-week-sidebar .precip {
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  color: rgba(238, 246, 248, 0.82) !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: center !important;
}
body.explore-v2 .wx-week-sidebar .wx-personalize,
body.explore-v2 .wx-week-sidebar .wx-sidebar-pref {
  margin-top: auto !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  color: var(--x-blue) !important;
  flex: 0 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  padding: 2px 0 0 !important;
  cursor: pointer;
}

body.explore-v2 .wx-week-col {
  flex: 1 1 var(--ev2-week-day-min-w) !important;
  width: auto !important;
  min-width: var(--ev2-week-day-min-w) !important;
  max-width: none !important;
  gap: 4px !important;
  padding: 10px 8px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border-right: 1px solid var(--x-line) !important;
  scroll-snap-align: start;
}
body.explore-v2 .wx-week-col:last-child {
  border-right: 0 !important;
}
body.explore-v2 .wx-week-col.is-selected {
  background: rgba(59, 140, 255, 0.12) !important;
  box-shadow: inset 0 0 0 1.5px var(--x-blue, #0B63F6) !important;
}
body.explore-v2 .wx-week-col .d {
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: var(--x-muted) !important;
}
body.explore-v2 .wx-week-col .icon {
  width: 48px !important;
  height: 42px !important;
  margin: 4px 0 !important;
  flex: 0 0 auto !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
}
body.explore-v2 .wx-week-col .icon svg {
  width: 48px !important;
  height: 42px !important;
  display: block !important;
  overflow: visible !important;
}
body.explore-v2 .wx-week-col .hi {
  font-size: 18px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  color: var(--x-text) !important;
}
body.explore-v2 .wx-week-col .lo {
  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 500 !important;
  color: var(--x-muted) !important;
}

/* Week-relative temperature range (Apple-like scan, BA cool→warm hues). */
body.explore-v2 .wx-temp-range {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 2px 0 4px !important;
  box-sizing: border-box !important;
}

body.explore-v2 .wx-temp-range__lo,
body.explore-v2 .wx-temp-range__hi {
  flex: 0 0 auto !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
}

body.explore-v2 .wx-temp-range__lo {
  color: var(--x-muted) !important;
  min-width: 1.75em !important;
  text-align: right !important;
}

body.explore-v2 .wx-temp-range__hi {
  color: var(--x-text) !important;
  min-width: 1.75em !important;
  text-align: left !important;
}

body.explore-v2 .wx-temp-range__track {
  position: relative !important;
  flex: 1 1 auto !important;
  height: 5px !important;
  min-width: 28px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  overflow: visible !important;
}

body.explore-v2 .wx-temp-range__fill {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #2bbef2 0%, #12b886 52%, #f2a900 100%) !important;
}

body.explore-v2 .wx-temp-range__now {
  position: absolute !important;
  top: 50% !important;
  width: 8px !important;
  height: 8px !important;
  margin-left: -4px !important;
  margin-top: -4px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 0 0 1px rgba(4, 24, 32, 0.35) !important;
  z-index: 1 !important;
}

/* Hide legacy stacked hi/lo when range bar is present. */
body.explore-v2 .wx-week-col:has(.wx-temp-range) > .hi,
body.explore-v2 .wx-week-col:has(.wx-temp-range) > .lo,
body.explore-v2 .wx-week-sidebar:has(.wx-temp-range) > .hi,
body.explore-v2 .wx-week-sidebar:has(.wx-temp-range) > .lo {
  display: none !important;
}

body.explore-v2 .wx-week-col .sky,
body.explore-v2 .wx-week-col .wind,
body.explore-v2 .wx-week-col .wave,
body.explore-v2 .wx-week-col .water,
body.explore-v2 .wx-week-col .precip {
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  color: rgba(238, 246, 248, 0.82) !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums;
  padding-inline: 2px;
  box-sizing: border-box;
}
body.explore-v2 .wx-week-col .model-note {
  margin-top: auto !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  color: var(--x-blue) !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  pointer-events: auto !important;
}
body.explore-v2 .wx-model-compare {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  max-height: none !important;
  margin: 8px 0 0 !important;
  padding: 8px 10px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Keep split copy inside the chip: name|track on row 1, facts below (narrow docks). */
body.explore-v2 .wx-model-compare-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  margin-bottom: 8px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
body.explore-v2 .wx-model-compare-title,
body.explore-v2 .wx-model-compare-summary {
  max-width: 100% !important;
  min-width: 0 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
body.explore-v2 .wx-model-compare-summary {
  font-size: 11px !important;
  line-height: 1.35 !important;
}
body.explore-v2 .wx-model-compare .model-compare-row {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  grid-template-areas:
    "name track"
    "facts facts" !important;
  align-items: center !important;
  gap: 4px 8px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-top: 6px !important;
}
body.explore-v2 .wx-model-compare .model-compare-name {
  grid-area: name !important;
  min-width: 0 !important;
}
body.explore-v2 .wx-model-compare .model-compare-track {
  grid-area: track !important;
  position: relative !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 6px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.07) !important;
}
body.explore-v2 .wx-model-compare .model-compare-rain {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  min-width: 2px !important;
  border-radius: 999px !important;
  background: #60a5fa !important;
  box-shadow: 0 0 6px rgba(96, 165, 250, 0.45) !important;
  display: block !important;
}
body.explore-v2 .wx-model-compare .model-compare-rain.possible {
  background: repeating-linear-gradient(90deg, #60a5fa 0 3px, transparent 3px 5px) !important;
  box-shadow: none !important;
}
body.explore-v2 .wx-model-compare .model-compare-facts {
  grid-area: facts !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}
body.explore-v2 .wx-model-compare .model-compare-axis {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 8px !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
/* Markup has leading/trailing spacers for the old 3-col row; drop them. */
body.explore-v2 .wx-model-compare .model-compare-axis > span:not(.ticks) {
  display: none !important;
}
body.explore-v2 .wx-model-compare .model-compare-axis .ticks {
  grid-column: 2 !important;
  display: flex !important;
  justify-content: space-between !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding: 0 1px !important;
}
body.explore-v2 .wx-model-compare .model-compare-axis .ticks i {
  flex: 0 0 auto;
  font-style: normal;
}

/* BA-342: compact green Models-agree strip (no empty mid-band void). */
body.explore-v2 .wx-model-compare.is-agree {
  margin: 6px 0 0 !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(18, 184, 134, 0.35) !important;
  border-radius: 12px !important;
  background: rgba(18, 184, 134, 0.12) !important;
}
body.explore-v2 .wx-model-compare.is-agree .wx-model-compare-title {
  color: #12B886 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
body.explore-v2 .wx-model-compare.is-agree .wx-model-compare-summary {
  color: rgba(238, 246, 248, 0.72) !important;
  font-size: 11px !important;
}

/* Marine conditions — full panel width (no sidebar gutter inset). */
body.explore-v2 .wx-hour-chart {
  margin-top: 8px !important;
  padding: 4px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
body.explore-v2 .wx-hour-chart .hour-head,
body.explore-v2 .wx-hour-chart .hour-head-sub,
body.explore-v2 .wx-hour-chart .hour-plot,
body.explore-v2 .wx-hour-chart .hour-plot-tide,
body.explore-v2 .wx-hour-chart .hour-keys {
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Match dark-atlas marine chart heights (56/44 crushed the week graphs). */
body.explore-v2 .wx-hour-chart .hour-plot { height: 100px !important; min-height: 100px !important; }
body.explore-v2 .wx-hour-chart .hour-plot-tide { height: 88px !important; min-height: 88px !important; }
body.explore-v2 .wx-hour-chart .hour-head {
  min-height: 20px !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 6px 12px !important;
}
body.explore-v2 .wx-hour-chart .hour-head-sub { margin-top: 4px !important; padding-top: 4px !important; }
body.explore-v2 .wx-hour-chart .hour-cap {
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: normal !important;
}
body.explore-v2 .wx-hour-chart .hour-best {
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  color: #12B886 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: right !important;
  cursor: pointer;
}

/* Place preview — DS v2 instrument right-rail card */
body.explore-v2 .sheet {
  position: fixed !important;
  top: var(--ev2-tools-top) !important;
  right: calc(var(--ev2-chrome-side) + var(--ev2-rail-w) + 8px) !important;
  left: auto !important;
  z-index: 72 !important;
  width: 320px !important;
  max-height: calc(100dvh - 180px) !important;
  border: 1px solid var(--x-line) !important;
  border-radius: 20px !important;
  background: var(--x-panel) !important;
  box-shadow: var(--x-shadow) !important;
  -webkit-backdrop-filter: var(--x-glass-blur) !important;
  backdrop-filter: var(--x-glass-blur) !important;
  overflow: hidden auto !important;
  color: var(--x-text) !important;
  /* Kill atlas enter-slide so mobile bottom clearance is exact */
  transform: none !important;
  transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.explore-v2.v2-player-open .sheet {
  top: var(--ev2-tools-top-player) !important;
  max-height: calc(100dvh - var(--ev2-tools-top-player) - 40px) !important;
}

body.explore-v2 .sheet.show,
body.explore-v2 .sheet:not(.show) {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}
body.explore-v2 .sheet:not(.show) {
  opacity: 0 !important;
  pointer-events: none !important;
}

body.explore-v2:has(.sheet.show) .inspector { display: none !important; }

body.explore-v2 .sheet .ph {
  height: 168px !important;
  background-color: #0a2028 !important;
}

body.explore-v2 .sheet .ph-actions {
  top: 12px !important;
  right: 12px !important;
  gap: 8px !important;
}

body.explore-v2 .sheet .ph .heart,
body.explore-v2 .sheet .ph .close {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: rgba(4, 24, 32, 0.55) !important;
  color: #fff !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
}

body.explore-v2 .sheet .ph .heart.is-saved {
  color: #ef6548 !important;
}

body.explore-v2 .sheet .bd {
  padding: 16px 16px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

body.explore-v2 .sheet h2 {
  color: var(--x-text) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
  gap: 8px !important;
  margin: 0 !important;
}

body.explore-v2 .sheet h2 .badge {
  color: var(--x-blue) !important;
  width: 18px !important;
  height: 18px !important;
}

body.explore-v2 .sheet h2 .badge svg {
  width: 18px !important;
  height: 18px !important;
}

body.explore-v2 .sheet .stars {
  margin: 8px 0 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #f2a900 !important;
}

body.explore-v2 .sheet .stars .star-ico {
  color: #f2a900 !important;
  font-size: 13px !important;
}

body.explore-v2 .sheet .stars #sheet-rating,
body.explore-v2 .sheet .stars span:not(.star-ico) {
  color: var(--x-muted) !important;
}

body.explore-v2 .sheet .sub {
  margin: 6px 0 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--x-muted) !important;
}

body.explore-v2 .sheet .sub:empty,
body.explore-v2 .sheet .sub[hidden] {
  display: none !important;
  margin: 0 !important;
}

body.explore-v2 .sheet .sheet-feature {
  margin: 8px 0 0 !important;
  max-width: 100%;
  overflow: hidden;
  color: var(--x-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body.explore-v2 .sheet .sheet-feature[hidden] {
  display: none !important;
  margin: 0 !important;
}

body.explore-v2.atlas-chrome-light .sheet .sheet-feature {
  color: #041820 !important;
}

body.explore-v2 .sheet .amen {
  gap: 8px !important;
  margin: 12px 0 0 !important;
}

body.explore-v2 .sheet .amen:empty {
  display: none !important;
  margin: 0 !important;
}

body.explore-v2 .sheet .amen span {
  min-height: 28px !important;
  padding: 6px 12px !important;
  border: 1px solid var(--x-line) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--x-text) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

body.explore-v2 .sheet .sheet-disclaimer {
  margin: 20px 0 0 !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--x-line) !important;
  color: rgba(238, 243, 248, 0.62) !important;
  font-size: 12px !important;
  font-weight: 450 !important;
  line-height: 1.45 !important;
}

body.explore-v2 .sheet .sheet-disclaimer[hidden] {
  display: none !important;
  margin: 0 !important;
}

body.explore-v2 .sheet .sheet-links {
  margin: 16px 0 14px !important;
  padding: 12px 0 4px !important;
  gap: 4px !important;
  border-top: 1px solid var(--x-line);
}

body.explore-v2 .sheet .sheet-link {
  min-height: 36px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--x-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  gap: 8px !important;
}

body.explore-v2 .sheet .sheet-link:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

body.explore-v2 .sheet .sheet-link .act-ico {
  color: inherit !important;
  opacity: 0.92;
}

body.explore-v2 .sheet .sheet-nav {
  width: 100% !important;
  min-height: 44px !important;
  margin: 0 0 8px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: var(--x-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

body.explore-v2 .sheet .sheet-nav:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
}

body.explore-v2 .sheet .cta {
  position: relative !important;
  z-index: 4 !important;
  touch-action: manipulation !important;
  pointer-events: auto !important;
  min-height: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  background: var(--x-blue) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 22px rgba(11, 99, 246, 0.32) !important;
}

body.explore-v2 .sheet .cta:hover {
  background: #0750cc !important;
}

body.explore-v2 .sheet .cta.is-leaving,
body.explore-v2 .sheet .cta[aria-busy="true"] {
  opacity: 0.72 !important;
  pointer-events: none !important;
}

body.explore-v2 .sheet .cta.sheet-claim {
  background: transparent !important;
  border: 1px solid var(--x-line) !important;
  color: var(--x-text) !important;
  box-shadow: none !important;
}

body.explore-v2 .sheet .cta.sheet-claim:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

body.explore-v2 .ba-v2-compact-forecast {
  position: fixed;
  left: var(--ev2-chrome-side);
  bottom: 22px;
  z-index: 70;
  display: none;
  width: 390px;
  min-height: 58px;
  padding: 6px;
  gap: 4px;
  border: 1px solid var(--x-line);
  border-radius: 18px;
  background: var(--x-glass);
  box-shadow: var(--x-shadow);
  -webkit-backdrop-filter: var(--x-glass-blur);
  backdrop-filter: var(--x-glass-blur);
}

body.explore-v2 .ba-v2-glance,
body.explore-v2 .ba-v2-cond-cap,
body.explore-v2 .ba-v2-alerts-empty {
  display: none;
}

/* Weather / conditions rail cell: sun-cloud icon + temp (always visible as weather). */
body.explore-v2 #ba-v2-glance-toggle {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-height: 52px !important;
  padding: 8px 4px 6px !important;
  color: rgba(255, 255, 255, 0.88) !important;
}
body.explore-v2 #ba-v2-glance-toggle .ba-v2-glance-toggle-ico {
  display: grid !important;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  line-height: 0;
  color: inherit;
}
body.explore-v2 #ba-v2-glance-toggle .ba-v2-glance-toggle-ico svg,
body.explore-v2 #ba-v2-glance-toggle .ba-v2-glance-toggle-ico .wx-sky-svg {
  display: block;
  width: 18px !important;
  height: 16px !important;
}
body.explore-v2 #ba-v2-glance-toggle .ba-v2-glance-toggle-ico .map-rail-icon,
body.explore-v2 #ba-v2-glance-toggle .ba-v2-glance-toggle-ico .ba-v2-glance-fallback {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.75 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
body.explore-v2 #ba-v2-glance-toggle .ba-v2-glance-toggle-temp {
  display: block !important;
  font: 650 12px/1.1 var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif) !important;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

body.explore-v2 .ba-v2-forecast-card {
  position: fixed;
  top: var(--ev2-forecast-card-top);
  left: var(--ev2-chrome-side);
  bottom: auto;
  z-index: 70;
  display: none;
  width: var(--ev2-left-stack-w);
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--x-line);
  border-radius: 20px;
  background: var(--x-glass);
  box-shadow: var(--x-shadow);
  -webkit-backdrop-filter: var(--x-glass-blur);
  backdrop-filter: var(--x-glass-blur);
}

body.explore-v2:has(.inspector.collapsed) .ba-v2-forecast-card,
body.explore-v2.v2-forecast-collapsed .ba-v2-forecast-card {
  display: grid;
}

body.explore-v2:has(.sheet.show) .ba-v2-forecast-card { display: none !important; }

/* Place-conditions intro and compact forecast share the left stack slot —
   never stack them into one unreadable panel. */
body.explore-v2:has(.explore-deeplink-banner) .ba-v2-forecast-card {
  display: none !important;
}

body.explore-v2 .ba-v2-forecast-summary {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 20px;
  grid-template-rows: auto auto;
  align-items: center;
  min-height: 76px;
  padding: 14px 16px !important;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--x-text);
  text-align: left;
  cursor: pointer;
}

body.explore-v2 .ba-v2-forecast-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 42px;
  /* Row 1 only — align with temp; spanning 1/3 centered the icon beside location/alert */
  grid-row: 1;
  align-self: center;
}

body.explore-v2 .ba-v2-forecast-icon.wx-sky-live {
  overflow: visible;
}

body.explore-v2 .ba-v2-forecast-icon svg {
  width: 42px;
  height: 38px;
  overflow: visible;
}

/* Living sky loops dual-write (winning rules also in explore-forecast-dock.css). */
body.explore-v2 .wx-sky-live .wx-sky--clear .wx-sky-rays {
  animation: ba-fc-sky-rays-spin 15s linear infinite;
}
body.explore-v2 .wx-sky-live .wx-sky--clear .wx-sky-sun {
  animation: ba-fc-sky-sun-shimmer 3.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
body.explore-v2 .wx-sky-live .wx-sky--clear.wx-sky--night .wx-sky-moon {
  animation: ba-fc-sky-moon-shimmer 4.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  transform-box: fill-box;
  transform-origin: center;
}
body.explore-v2 .wx-sky-live .wx-sky--clear.wx-sky--night .wx-sky-rays {
  animation: none;
}
body.explore-v2 .wx-sky-live .wx-sky--sunrise .wx-sky-sun,
body.explore-v2 .wx-sky-live .wx-sky--clear.wx-sky--sunrise .wx-sky-sun {
  animation: ba-fc-sky-sunrise-lift 4.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  transform-box: fill-box;
  transform-origin: center bottom;
}
body.explore-v2 .wx-sky-live .wx-sky--sunset .wx-sky-sun,
body.explore-v2 .wx-sky-live .wx-sky--clear.wx-sky--sunset .wx-sky-sun {
  animation: ba-fc-sky-sunset-dip 4.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  transform-box: fill-box;
  transform-origin: center bottom;
}
body.explore-v2 .wx-sky-live .wx-sky--sunrise .wx-sky-rays,
body.explore-v2 .wx-sky-live .wx-sky--sunset .wx-sky-rays {
  animation: none;
}
body.explore-v2 .wx-sky-live .wx-sky--night .wx-sky-moon {
  animation: ba-fc-sky-moon-shimmer 4.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  transform-box: fill-box;
  transform-origin: center;
}
body.explore-v2 .wx-sky-live .wx-sky--night .wx-sky-cloud-front {
  animation: ba-fc-sky-cloud-cross 5.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
body.explore-v2 .wx-sky-live .wx-sky--partly .wx-sky-cloud-front {
  animation: ba-fc-sky-cloud-cross 5.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
body.explore-v2 .wx-sky-live .wx-sky--partly .wx-sky-sun {
  animation: ba-fc-sky-sun-shimmer 3.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
body.explore-v2 .wx-sky-live .wx-sky--cloudy .wx-sky-cloud {
  animation: ba-fc-sky-cloud-drift 6.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
body.explore-v2 .wx-sky-live .wx-sky--overcast .wx-sky-cloud ellipse:first-child {
  animation: ba-fc-sky-cloud-drift 6.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
body.explore-v2 .wx-sky-live .wx-sky--overcast .wx-sky-cloud--front,
body.explore-v2 .wx-sky-live .wx-sky--overcast .wx-sky-cloud ellipse:nth-child(2) {
  animation: ba-fc-sky-cloud-drift-alt 7.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
body.explore-v2 .wx-sky-live .wx-sky--fog .wx-sky-cloud {
  animation: ba-fc-sky-fog-drift 6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
body.explore-v2 .wx-sky-live .wx-sky--rain .wx-sky-drop--a {
  animation: ba-fc-sky-rain-fall 1.1s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
body.explore-v2 .wx-sky-live .wx-sky--rain .wx-sky-drop--b {
  animation: ba-fc-sky-rain-fall 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s infinite;
}
body.explore-v2 .wx-sky-live .wx-sky--rain .wx-sky-drop--c {
  animation: ba-fc-sky-rain-fall 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.4s infinite;
}
body.explore-v2 .wx-sky-live .wx-sky--rain .wx-sky-cloud {
  animation: ba-fc-sky-cloud-drift 7s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
body.explore-v2 .wx-sky-live .wx-sky--snow .wx-sky-flake--a {
  animation: ba-fc-sky-flake-fall 1.45s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
body.explore-v2 .wx-sky-live .wx-sky--snow .wx-sky-flake--b {
  animation: ba-fc-sky-flake-fall 1.45s cubic-bezier(0.22, 1, 0.36, 1) 0.28s infinite;
}
body.explore-v2 .wx-sky-live .wx-sky--snow .wx-sky-flake--c {
  animation: ba-fc-sky-flake-fall 1.45s cubic-bezier(0.22, 1, 0.36, 1) 0.55s infinite;
}
body.explore-v2 .wx-sky-live .wx-sky--storm .wx-sky-bolts {
  animation: ba-fc-sky-bolt-pulse 1.75s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
body.explore-v2 .wx-sky-live .wx-sky--storm .wx-sky-cloud {
  animation: ba-fc-sky-cloud-drift 6.3s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes ba-fc-sky-rays-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes ba-fc-sky-sun-shimmer {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.78; transform: scale(0.97); }
}
@keyframes ba-fc-sky-moon-shimmer {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.82; transform: scale(0.96); }
}
@keyframes ba-fc-sky-sunrise-lift {
  0%, 100% { transform: translateY(1.2px); opacity: 0.92; }
  50% { transform: translateY(-1.4px); opacity: 1; }
}
@keyframes ba-fc-sky-sunset-dip {
  0%, 100% { transform: translateY(-0.8px); opacity: 1; }
  50% { transform: translateY(1.6px); opacity: 0.88; }
}
@keyframes ba-fc-sky-cloud-drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(2.8px, -0.6px); }
}
@keyframes ba-fc-sky-cloud-drift-alt {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-2.2px, 0.5px); }
}
@keyframes ba-fc-sky-cloud-cross {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-3.4px, 0.4px); }
}
@keyframes ba-fc-sky-fog-drift {
  0%, 100% { transform: translateX(0); opacity: 0.88; }
  50% { transform: translateX(3.2px); opacity: 0.58; }
}
@keyframes ba-fc-sky-rain-fall {
  0% { transform: translateY(-2.5px); opacity: 0.2; }
  30% { opacity: 0.98; }
  100% { transform: translateY(5.5px); opacity: 0.08; }
}
@keyframes ba-fc-sky-flake-fall {
  0% { transform: translate(0, -2px); opacity: 0.28; }
  40% { opacity: 0.98; }
  100% { transform: translate(1.4px, 4.2px); opacity: 0.12; }
}
@keyframes ba-fc-sky-bolt-pulse {
  0%, 68%, 100% { opacity: 0.5; }
  76% { opacity: 1; }
  84% { opacity: 0.35; }
  90% { opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
  body.explore-v2 .wx-sky-live .wx-sky-rays,
  body.explore-v2 .wx-sky-live .wx-sky-cloud,
  body.explore-v2 .wx-sky-live .wx-sky-cloud-front,
  body.explore-v2 .wx-sky-live .wx-sky-cloud--front,
  body.explore-v2 .wx-sky-live .wx-sky-drop,
  body.explore-v2 .wx-sky-live .wx-sky-flake,
  body.explore-v2 .wx-sky-live .wx-sky-bolts,
  body.explore-v2 .wx-sky-live .wx-sky-sun,
  body.explore-v2 .wx-sky-live .wx-sky-moon,
  body.explore-v2 .wx-sky-live .wx-sky--overcast .wx-sky-cloud ellipse {
    animation: none !important;
  }
}

body.explore-v2 .ba-v2-forecast-temp {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  color: var(--x-text);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.04em;
}

/* Wind lives on the phone conditions strip; desktop keeps temp + location. */
body.explore-v2 .ba-v2-forecast-wind {
  display: none;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--x-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

body.explore-v2 .ba-v2-forecast-wind-dir {
  display: inline-block;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--x-blue, #0b63f6);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(43, 190, 242, 0.35);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

body.explore-v2 .ba-v2-forecast-wind-val {
  overflow: hidden;
  text-overflow: ellipsis;
}

body.explore-v2 .ba-v2-forecast-copy {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-self: start;
  min-width: 0;
  flex-direction: column;
  gap: 0;
}

body.explore-v2 .ba-v2-forecast-copy strong {
  display: block;
  color: var(--x-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

body.explore-v2 .ba-v2-forecast-copy small {
  display: block;
  overflow: hidden;
  color: var(--x-muted);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.explore-v2 .ba-v2-forecast-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 40px;
  padding: 6px;
  gap: 4px;
  border-top: 1px solid var(--x-line);
  background: rgba(4, 24, 32, 0.28);
}

body.explore-v2 .ba-v2-forecast-tabs button {
  position: relative;
  min-height: 32px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(244, 241, 234, 0.72);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
}

body.explore-v2 .ba-v2-forecast-tabs button.on {
  background: rgba(11, 99, 246, 0.28);
  color: #fff;
  box-shadow: none;
}

body.explore-v2 .ba-v2-forecast-tabs button:hover {
  color: #fff;
}

/* NWS alert cue on collapsed Now chip — coral hazard / amber attention */
body.explore-v2 .ba-v2-forecast-alert {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  max-width: 100%;
  color: #ef6548;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

body.explore-v2 .ba-v2-forecast-alert[hidden] {
  display: none !important;
}

body.explore-v2 .ba-v2-forecast-alert-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #ef6548;
  box-shadow: 0 0 0 2px rgba(239, 101, 72, 0.22);
}

body.explore-v2 .ba-v2-forecast-alert-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.explore-v2 .ba-v2-forecast-alert[data-severity="moderate"],
body.explore-v2 .ba-v2-forecast-alert[data-severity="minor"] {
  color: #f2a900;
}

body.explore-v2 .ba-v2-forecast-alert[data-severity="moderate"] .ba-v2-forecast-alert-dot,
body.explore-v2 .ba-v2-forecast-alert[data-severity="minor"] .ba-v2-forecast-alert-dot {
  background: #f2a900;
  box-shadow: 0 0 0 2px rgba(242, 169, 0, 0.24);
}

body.explore-v2 .ba-v2-forecast-open {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: center;
  color: var(--x-muted);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  transform: translateY(-1px);
}

body.explore-v2:has(.sheet.show) .ba-v2-compact-forecast { display: flex; }

body.explore-v2 .ba-v2-compact-forecast button {
  position: relative;
  flex: 1;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--x-muted);
  font-size: 14px;
  cursor: pointer;
}

body.explore-v2 .ba-v2-compact-forecast button.on { color: var(--x-text); }
body.explore-v2 .ba-v2-compact-forecast button.on::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 1px;
  left: 12px;
  height: 3px;
  border-radius: 999px;
  background: var(--x-blue);
}

/* Icons v2 place markers (teardrop assets) — replace circular emoji pins.
   Keep position:absolute so multi-select categories do not document-flow
   stack off-screen under Mapbox Marker transforms. Hover/sel motion lives
   on the img so Mapbox's inline placement transform is never overwritten. */
body.explore-v2 .pin.pin--marker,
body.atlas-scope.explore-v2 .pin.pin--marker {
  position: absolute;
  width: 32px;
  height: 37px;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent;
  font-size: 0;
  line-height: 0;
  filter: drop-shadow(0 6px 8px rgb(4 24 32 / 28%));
  transition: none;
}

body.explore-v2 .pin.pin--marker .pin-marker-img,
body.atlas-scope.explore-v2 .pin.pin--marker .pin-marker-img {
  display: block;
  width: 32px;
  height: 37px;
  pointer-events: none;
  user-select: none;
  transform-origin: 50% 100%;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

body.explore-v2 .pin.pin--marker:hover,
body.atlas-scope.explore-v2 .pin.pin--marker:hover,
body.explore-v2 .pin.pin--marker.sel,
body.atlas-scope.explore-v2 .pin.pin--marker.sel {
  /* Do not set transform here — Mapbox owns it for lat/lng placement. */
  box-shadow: none !important;
}

body.explore-v2 .pin.pin--marker:hover .pin-marker-img,
body.atlas-scope.explore-v2 .pin.pin--marker:hover .pin-marker-img {
  transform: translateY(-1px) scale(1.06);
}

body.explore-v2 .pin.pin--marker.sel,
body.atlas-scope.explore-v2 .pin.pin--marker.sel {
  filter: drop-shadow(0 8px 14px rgb(4 24 32 / 36%));
}

body.explore-v2 .pin.pin--marker.sel .pin-marker-img,
body.atlas-scope.explore-v2 .pin.pin--marker.sel .pin-marker-img {
  transform: scale(1.14);
}

/* Kill legacy per-category circular pin fills when using marker SVGs */
body.explore-v2 .pin.pin--marker.marina,
body.explore-v2 .pin.pin--marker.fuel,
body.explore-v2 .pin.pin--marker.ramp,
body.explore-v2 .pin.pin--marker.service,
body.explore-v2 .pin.pin--marker.charter,
body.explore-v2 .pin.pin--marker.anchorage,
body.explore-v2 .pin.pin--marker.park,
body.explore-v2 .pin.pin--marker.beach,
body.explore-v2 .pin.pin--marker.campground,
body.explore-v2 .pin.pin--marker.food,
body.explore-v2 .pin.pin--marker.shop,
body.explore-v2 .pin.pin--marker.medical {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Category chips: Icons v2 UI strokes on colored discs */
body.explore-v2 .catbar button .ico {
  overflow: hidden;
}

body.explore-v2 .catbar button .ico img {
  display: block;
  width: 14px;
  height: 14px;
  filter: brightness(0) invert(1);
}

body.explore-v2 .catbar button .ico.more img {
  filter: none;
  opacity: 0.85;
}

body.explore-v2.atlas-chrome-light .catbar button .ico.more img {
  filter: none;
  opacity: 0.9;
}

/* Light controls, same structure */
body.explore-v2.atlas-chrome-light {
  --x-glass: rgba(255, 255, 255, 0.52);
  --x-panel: rgba(255, 255, 255, 0.58);
  --x-line: rgba(4, 24, 32, 0.13);
  --x-text: #041820;
  --x-muted: rgba(4, 24, 32, 0.64);
  --x-shadow: 0 18px 48px rgba(4, 24, 32, 0.14);
}

body.explore-v2.atlas-chrome-light .ba-wordmark img { filter: none; }

body.explore-v2.atlas-chrome-light .ba-mode-strip a,
body.explore-v2.atlas-chrome-light .ba-nav-auth a,
body.explore-v2.atlas-chrome-light .nav-search input,
body.explore-v2.atlas-chrome-light .nav-search input::placeholder,
body.explore-v2.atlas-chrome-light .nav-search-ico,
body.explore-v2.atlas-chrome-light .wx-field-toggle > button,
body.explore-v2.atlas-chrome-light .wx-field-toggle .ba-v2-layer-section > button,
body.explore-v2.atlas-chrome-light .wx-field-toggle .wx-sat-pair > button,
body.explore-v2.atlas-chrome-light .ba-v2-layer-play,
body.explore-v2.atlas-chrome-light .map-nav .map-rail-btn,
body.explore-v2.atlas-chrome-light .ba-v2-rail-more,
body.explore-v2.atlas-chrome-light .ba-v2-place-filter {
  color: rgba(4, 24, 32, 0.78) !important;
}

body.explore-v2.atlas-chrome-light .map-nav .map-rail-btn:hover {
  background: rgba(4, 24, 32, 0.06) !important;
  color: #041820 !important;
}

/* Light chrome: same latch whitelist (no blue fill on cycling cells). */
body.explore-v2.atlas-chrome-light .map-tools #ba-explore-look,
body.explore-v2.atlas-chrome-light .map-tools #ba-explore-look.on,
body.explore-v2.atlas-chrome-light .map-tools #ba-explore-light,
body.explore-v2.atlas-chrome-light .map-tools #ba-explore-light.on,
body.explore-v2.atlas-chrome-light .map-tools #ba-explore-mode-toggle,
body.explore-v2.atlas-chrome-light .map-tools #ba-explore-mode-toggle.on,
body.explore-v2.atlas-chrome-light .map-tools #ba-explore-search,
body.explore-v2.atlas-chrome-light .map-tools #ba-explore-search.on {
  background: transparent !important;
  color: rgba(4, 24, 32, 0.78) !important;
  box-shadow: none !important;
}
body.explore-v2.atlas-chrome-light .map-tools #ba-explore-layers.on,
body.explore-v2.atlas-chrome-light .map-tools #m-map-layers.on,
body.explore-v2.atlas-chrome-light .map-tools #ba-v2-glance-toggle.on,
body.explore-v2.atlas-chrome-light .map-tools #ba-explore-locate.on {
  background: transparent !important;
  color: #041820 !important;
  box-shadow: none !important;
}

body.explore-v2.atlas-chrome-light .map-tools #ba-explore-layers.on:hover,
body.explore-v2.atlas-chrome-light .map-tools #m-map-layers.on:hover,
body.explore-v2.atlas-chrome-light .map-tools #ba-v2-glance-toggle.on:hover,
body.explore-v2.atlas-chrome-light .map-tools #ba-explore-locate.on:hover {
  background: rgba(4, 24, 32, 0.06) !important;
  color: #041820 !important;
}

body.explore-v2.atlas-chrome-light .map-view-modes {
  background: rgba(4, 24, 32, 0.05) !important;
}

/* Hamburger panel must follow Explore chrome theme — SiteHeader hardcodes
   tone=dark for map layout, which left a dark side menu over light controls. */
body.explore-v2.atlas-chrome-light .ba-consumer-menu.ba-consumer-menu--dark .ba-consumer-menu-panel {
  border-color: #d8d8d1;
  background: #fff;
  box-shadow: 0 18px 54px rgba(4, 24, 32, 0.2);
}
body.explore-v2.atlas-chrome-light .ba-consumer-menu.ba-consumer-menu--dark .ba-consumer-menu-link {
  color: #041820;
}
body.explore-v2.atlas-chrome-light .ba-consumer-menu.ba-consumer-menu--dark .ba-consumer-menu-link:hover,
body.explore-v2.atlas-chrome-light .ba-consumer-menu.ba-consumer-menu--dark .ba-consumer-menu-link:focus-visible {
  background: #f4f1ea;
  color: #0b63f6;
}
body.explore-v2.atlas-chrome-dark .ba-consumer-menu .ba-consumer-menu-panel {
  border-color: rgba(255, 255, 255, 0.12);
  background: #0a2028;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.35);
}
body.explore-v2.atlas-chrome-dark .ba-consumer-menu .ba-consumer-menu-link {
  color: #f4f1ea;
}
body.explore-v2.atlas-chrome-dark .ba-consumer-menu .ba-consumer-menu-link:hover,
body.explore-v2.atlas-chrome-dark .ba-consumer-menu .ba-consumer-menu-link:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #2bbef2;
}

/* Account panel: SiteHeader hardcodes tone=dark; keep ink readable on map glass.
   Do not force a near-100vw min-width — that clipped the panel when it was
   still avatar-anchored; globals.css owns mobile width/position. */
body.explore-v2 .ba-account-panel {
  z-index: 210;
  min-width: 0;
  background: rgba(10, 32, 40, 0.96);
  border-color: rgba(255, 255, 255, 0.14);
  color: #f4f1ea;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.4);
}
body.explore-v2 .ba-account-panel a {
  color: #f4f1ea;
}
body.explore-v2 .ba-account-panel a:hover {
  color: #2bbef2;
}
body.explore-v2 .ba-account-label {
  color: rgba(244, 241, 234, 0.72);
}
body.explore-v2 .ba-account-divider {
  border-top-color: rgba(255, 255, 255, 0.14);
}
body.explore-v2 .ba-workspace-option {
  color: rgba(244, 241, 234, 0.78);
  border-color: rgba(255, 255, 255, 0.16);
}
body.explore-v2 .ba-workspace-option.is-active {
  background: rgba(11, 99, 246, 0.22);
  color: #f4f1ea;
  border-color: #0b63f6;
}
body.explore-v2.atlas-chrome-light .ba-account-panel {
  background: #fff;
  border-color: #d8d8d1;
  color: #041820;
  box-shadow: 0 18px 54px rgba(4, 24, 32, 0.2);
}
body.explore-v2.atlas-chrome-light .ba-account-panel a {
  color: #041820;
}
body.explore-v2.atlas-chrome-light .ba-account-panel a:hover {
  color: #0b63f6;
}
body.explore-v2.atlas-chrome-light .ba-account-label {
  color: #4b5a5b;
}
body.explore-v2.atlas-chrome-light .ba-account-divider {
  border-top-color: #d8d8d1;
}
body.explore-v2.atlas-chrome-light .ba-workspace-option {
  color: #4b5a5b;
  border-color: #d8d8d1;
}
body.explore-v2.atlas-chrome-light .ba-workspace-option.is-active {
  background: rgba(11, 99, 246, 0.12);
  color: #041820;
  border-color: #0b63f6;
}

/* Location permission dialog — room to breathe */
body.explore-v2 .nav-perm {
  z-index: 80 !important;
  width: min(400px, calc(100vw - 40px)) !important;
  padding: 24px 24px 20px !important;
  border: 1px solid var(--x-line) !important;
  border-radius: 20px !important;
  background: var(--x-panel) !important;
  box-shadow: var(--x-shadow) !important;
  -webkit-backdrop-filter: var(--x-glass-blur) !important;
  backdrop-filter: var(--x-glass-blur) !important;
  color: var(--x-text) !important;
  box-sizing: border-box !important;
}

body.explore-v2 .nav-perm h3 {
  margin: 0 0 12px !important;
  color: var(--x-text) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
}

body.explore-v2 .nav-perm > p {
  margin: 0 !important;
  color: var(--x-muted) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

body.explore-v2 .nav-perm-acts {
  display: flex !important;
  align-items: stretch !important;
  gap: 12px !important;
  margin-top: 20px !important;
}

body.explore-v2 .nav-perm-primary {
  flex: 1 1 auto !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--x-blue) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

body.explore-v2 .nav-perm-ghost {
  flex: 0 0 auto !important;
  height: 44px !important;
  min-height: 44px !important;
  min-width: 104px !important;
  padding: 0 16px !important;
  border: 1px solid var(--x-line) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--x-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

body.explore-v2 .nav-perm-denied {
  margin-top: 14px !important;
  color: #ef6548 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

body.explore-v2.atlas-chrome-light .nav-search,
body.explore-v2.atlas-chrome-light .ba-v2-pins {
  border-color: rgba(4, 24, 32, 0.13) !important;
  background: rgba(255, 255, 255, 0.64) !important;
  color: var(--x-ink) !important;
}

body.explore-v2.atlas-chrome-light .ba-nav-auth a.primary {
  background: transparent !important;
  color: #1677ff !important;
}

/* Light place preview — ink on glass, same hierarchy */
body.explore-v2.atlas-chrome-light .sheet .ph .heart,
body.explore-v2.atlas-chrome-light .sheet .ph .close {
  border-color: rgba(4, 24, 32, 0.12) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: #041820 !important;
}

body.explore-v2.atlas-chrome-light .sheet .amen span {
  border-color: rgba(4, 24, 32, 0.12) !important;
  background: rgba(4, 24, 32, 0.04) !important;
  color: rgba(4, 24, 32, 0.78) !important;
}

body.explore-v2.atlas-chrome-light .sheet .sheet-link:hover {
  background: rgba(4, 24, 32, 0.06) !important;
  color: #041820 !important;
}

body.explore-v2.atlas-chrome-light .sheet .sheet-nav {
  border-color: rgba(4, 24, 32, 0.18) !important;
  color: #041820 !important;
}

body.explore-v2.atlas-chrome-light .sheet .sheet-nav:hover {
  background: rgba(4, 24, 32, 0.05) !important;
  border-color: rgba(4, 24, 32, 0.28) !important;
  color: #041820 !important;
}

body.explore-v2.atlas-chrome-light .sheet .cta.sheet-claim {
  border-color: rgba(4, 24, 32, 0.16) !important;
  color: #041820 !important;
}

body.explore-v2.atlas-chrome-light .sheet .cta.sheet-claim:hover {
  background: rgba(4, 24, 32, 0.05) !important;
}

/* Mid desktop: keep Explore/Boats/Places/Events visible; shrink search instead. */
@media (max-width: 1360px) {
  body.explore-v2 .ba-nav { gap: 12px !important; padding: 0 12px !important; }
  body.explore-v2 .ba-wordmark { width: 124px; min-width: 124px; }
  body.explore-v2 .ba-wordmark img { width: 120px; }
  body.explore-v2 .ba-mode-strip { gap: 14px !important; }
  body.explore-v2 .ba-map-search.nav-center {
    left: clamp(400px, 36%, 480px) !important;
    right: clamp(148px, 15%, 200px) !important;
    gap: 4px !important;
  }
  body.explore-v2 .nav-search-wrap {
    max-width: min(420px, 100%) !important;
    min-width: 0 !important;
  }
  body.explore-v2 .ba-v2-pins {
    min-width: 0 !important;
    padding: 0 8px !important;
  }
}

/* Narrower desktop: hide Events before search collides with the mode strip (BA-413). */
@media (max-width: 1280px) {
  body.explore-v2 .ba-mode-strip a[href="/events"],
  body.explore-v2 .ba-mode-strip a[href*="/events"] {
    display: none !important;
  }
  body.explore-v2 .ba-map-search.nav-center {
    left: clamp(340px, 32%, 420px) !important;
    right: clamp(140px, 14%, 190px) !important;
  }
  body.explore-v2 .nav-search-wrap {
    max-width: min(380px, 100%) !important;
  }
}

/* Tablet: keep primary destinations; compress search and utility chrome. */
@media (max-width: 1180px) {
  body.explore-v2 .ba-nav { gap: 8px !important; padding: 0 10px !important; }
  body.explore-v2 .ba-wordmark { width: 112px; min-width: 112px; }
  body.explore-v2 .ba-wordmark img { width: 108px; }
  body.explore-v2 .ba-mode-strip { gap: 10px !important; }
  body.explore-v2 .ba-mode-strip a { font-size: var(--ev2-label-size) !important; }
  body.explore-v2 .ba-map-search.nav-center {
    left: clamp(300px, 34%, 380px) !important;
    right: clamp(130px, 16%, 180px) !important;
    gap: 2px !important;
  }
  body.explore-v2 .nav-search-wrap {
    max-width: min(360px, 100%) !important;
    min-width: 0 !important;
  }
  body.explore-v2 .ba-nav-auth a:not(.primary) { display: none !important; }
  body.explore-v2 .ba-mode-strip a[href="/myatlas"] { display: none !important; }
  body.explore-v2 .ba-v2-pins span:not(.ba-v2-pins-ico),
  body.explore-v2 .ba-v2-pins .ba-v2-pins-label {
    display: none !important;
  }
  body.explore-v2 .ba-v2-pins {
    min-width: 34px !important;
    width: 34px !important;
    padding: 0 !important;
  }
  body.explore-v2 .ba-map-search .near {
    padding: 0 8px !important;
  }
  body.explore-v2 .ba-map-search .near .near-label {
    display: none !important;
  }

  body.explore-v2 .wx-field-toggle,
  body.explore-v2 .wx-field-toggle.on,
  body.atlas-scope.explore-v2 .wx-field-toggle,
  body.atlas-scope.explore-v2 .wx-field-toggle.on,
  body.atlas-scope.explore-v2.mode-conditions .wx-field-toggle,
  body.atlas-scope.explore-v2.mode-conditions .wx-field-toggle.on {
    width: max-content !important;
    min-width: 0 !important;
    max-width: min(960px, calc(100vw - 140px)) !important;
    /* Tighter than desktop so chips fit mid widths without wrapping */
    gap: 2px !important;
    padding: 2px 10px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  body.explore-v2 .wx-field-toggle > button,
  body.explore-v2 .wx-field-toggle .ba-v2-layer-section > button,
  body.explore-v2 .wx-field-toggle .wx-sat-pair > button,
  body.explore-v2 .wx-field-toggle .ba-v2-layer-play,
  body.explore-v2 .wx-field-toggle .ba-v2-place-filter {
    min-width: 0;
    padding: 0 5px !important;
    font-size: var(--ev2-label-size) !important;
    white-space: nowrap !important;
  }

  body.explore-v2 .data-dock,
  body.explore-v2:has(.inspector.on) .data-dock {
    width: calc(100vw - 200px) !important;
  }

  body.explore-v2 .insp-now {
    grid-template-columns: minmax(210px, 1fr) minmax(390px, 2fr) minmax(210px, 0.9fr) !important;
  }
}

/* Mobile bottom sheet */
@media (max-width: 900px) {
  /* Map fills the phone, including under the home indicator.
     Goal: Mapbox tiles paint edge-to-edge — zero white / navy / black strips.
     Thumb tools and header float ON the map (safe-area insets on chrome only).
     --ba-app-height is set by explore-mobile-boot + explore-v2-shell.js to the
     physical fill height (innerHeight + safe-area). #map void #041820 is only
     visible while GL boots, never as a reserved bar under a short canvas. */
  html:has(body.explore-v2),
  body.explore-v2 {
    background: #041820 !important;
    background-color: #041820 !important;
    background-image: none !important;
    color-scheme: dark;
    min-height: 100% !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    min-height: 100lvh !important;
    min-height: var(--ba-app-height, 100lvh) !important;
    height: 100% !important;
    height: 100svh !important;
    height: 100dvh !important;
    height: 100lvh !important;
    height: var(--ba-app-height, 100lvh) !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
  }
  body.explore-v2,
  body.explore-v2 .atlas-body-mount,
  body.explore-v2 .explore-deeplink-host,
  body.explore-v2 main.atlas-explore-main {
    height: 100% !important;
    height: 100svh !important;
    height: 100dvh !important;
    height: 100lvh !important;
    height: var(--ba-app-height, 100lvh) !important;
    min-height: var(--ba-app-height, 100lvh) !important;
    overflow: hidden !important;
    background: #041820 !important;
    background-color: #041820 !important;
    padding-bottom: 0 !important;
  }
  body.explore-v2 #map,
  body.explore-v2 .mapboxgl-map {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    width: 100vw !important;
    height: var(--ba-app-height, 100lvh) !important;
    min-width: 100% !important;
    min-height: var(--ba-app-height, 100lvh) !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #041820 !important;
    background-color: #041820 !important;
    z-index: 0 !important;
  }
  body.explore-v2 #map .mapboxgl-canvas-container,
  body.explore-v2 #map .mapboxgl-canvas,
  body.explore-v2 #map canvas.mapboxgl-canvas {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
  }
  /* Legacy status strip must never reserve opaque bottom paint on v2 mobile. */
  body.explore-v2 .status-bar,
  body.atlas-scope.explore-v2 .status-bar,
  body.explore-v2 #status-bar,
  body.atlas-scope.explore-v2 #status-bar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    pointer-events: none !important;
    opacity: 0 !important;
    z-index: -1 !important;
  }

  body.explore-v2 {
    --ev2-nav-h: 48px;
    --ev2-chrome-inset: 12px;
    --ev2-gap-nav-layers: 10px;
    /* Keep layer rail shorter than main nav on mobile too. */
    --ev2-layers-h: 46px;
    --ev2-gap-chrome: 16px;
    --ev2-timeline-h: 70px;
    --ev2-mobile-mark: 26px;
    --ev2-mobile-util: 40px;
    --ev2-mobile-loc-max: 155px;
    /* Approx. open Motion Forecast player height (title + scrub + hour marks). */
    --ev2-mobile-player-h: 96px;
    --ev2-chrome-side: 12px;
    /* Unified mobile chrome hit targets (temp / nav / layer chips). */
    --ev2-hit: 44px;
    --ev2-icon: 22px;
    /* Hit 44 + glass pill padding 6+6 — must match painted thumb height so
       the layers rail clears the bar instead of sliding under Layers. */
    --ev2-thumb-row-h: 56px;
    --ev2-layer-stack-w: 56px;
    /* Map-first: thin Waav-like conditions strip (not a square tile). */
    --ev2-cond-strip-h: 44px;
    --ev2-forecast-tile: var(--ev2-cond-strip-h);
    /* Header clearance only — weather no longer docks top-left. */
    --ev2-temp-chip-top: calc(
      var(--ev2-chrome-inset) + env(safe-area-inset-top, 0px) + var(--ev2-nav-h) + 10px
    );
    --ev2-forecast-dock-top: var(--ev2-temp-chip-top);
    --ev2-bottom-stack-gap: 16px;
    /* Slim under-dock band: Mapbox logo + compact attrib + Legal control. */
    --ev2-legal-row-h: 22px;
    --ev2-thumb-bottom-gap: calc(6px + var(--ev2-legal-row-h));
    --ev2-cond-strip-bottom: calc(
      var(--status-h, 12px) + var(--ev2-thumb-bottom-gap) + var(--ev2-thumb-row-h) +
        var(--ev2-bottom-stack-gap)
    );
    /* Alias used by legend stacking rules */
    --ev2-conditions-strip-bottom: var(--ev2-cond-strip-bottom);
  }

  body.explore-v2 .ba-nav-wrap,
  body.explore-v2 .ba-nav-wrap--dark,
  body.atlas-scope.explore-v2 .ba-nav-wrap--dark {
    top: calc(var(--ev2-chrome-inset) + env(safe-area-inset-top, 0px)) !important;
    right: 12px !important;
    left: 12px !important;
    height: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    /* Sit above map chrome (weather, legends, layer stack, info chips). */
    z-index: 120 !important;
  }

  /* Soft ink wash under the bar so white chrome stays readable on bright satellite. */
  body.explore-v2 .ba-nav-wrap::before,
  body.explore-v2 .ba-nav-wrap--dark::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(
      env(safe-area-inset-top, 0px) + var(--ev2-chrome-inset, 12px) +
        var(--ev2-nav-h, 48px) + 28px
    );
    background: linear-gradient(
      to bottom,
      rgba(4, 24, 32, 0.55) 0%,
      rgba(4, 24, 32, 0.28) 55%,
      rgba(4, 24, 32, 0) 100%
    );
    pointer-events: none;
    z-index: 0;
  }

  body.explore-v2 .ba-nav,
  body.explore-v2.v2-mobile-chrome .ba-nav,
  body.atlas-scope.explore-v2.v2-mobile-chrome .ba-nav {
    position: relative;
    z-index: 1;
    height: var(--ev2-nav-h) !important;
    min-height: var(--ev2-nav-h) !important;
    /* 12px inner pad + 12px wrap inset = balanced floating chrome. */
    padding: 0 12px !important;
    gap: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 16px !important;
    background: rgba(4, 24, 32, 0.62) !important;
    box-shadow: 0 8px 28px rgba(4, 24, 32, 0.22) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    color: #f4f1ea !important;
    overflow: visible !important;
  }
  body.explore-v2 .ba-wordmark,
  body.explore-v2 .ba-wordmark img,
  body.explore-v2 .ba-nav-right {
    filter: none;
    text-shadow: 0 1px 2px rgba(4, 24, 32, 0.35);
  }

  /* Mark-only: quiet 26px brand mark; Location stays the primary control. */
  body.explore-v2 .ba-wordmark {
    position: relative;
    width: var(--ev2-mobile-mark, 26px) !important;
    min-width: var(--ev2-mobile-mark, 26px) !important;
    max-width: var(--ev2-mobile-mark, 26px) !important;
    height: var(--ev2-mobile-mark, 26px) !important;
    overflow: hidden !important;
    flex: 0 0 var(--ev2-mobile-mark, 26px) !important;
  }
  body.explore-v2 .ba-wordmark-logo--full,
  body.explore-v2 .ba-wordmark img.ba-wordmark-logo--full {
    display: none !important;
  }
  body.explore-v2 .ba-wordmark-logo--mark,
  body.explore-v2 .ba-wordmark img.ba-wordmark-logo--mark {
    display: block !important;
    position: absolute !important;
    /* Crop official loader mark padding (see boat-atlas-loading.css ratios). */
    width: 57px !important;
    height: 57px !important;
    max-width: none !important;
    max-height: none !important;
    left: -15.5px !important;
    top: -15.5px !important;
    object-fit: cover !important;
    filter: brightness(0) invert(1) !important;
  }

  /* Deep-link Back: only when lat/lng focus landings have history to leave. */
  body.explore-v2 .ba-explore-back {
    display: none;
  }
  body.explore-v2.ba-explore-can-back .ba-explore-back {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 2px;
    height: 32px;
    min-width: 32px;
    margin: 0 2px 0 0;
    padding: 0 8px 0 4px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #f4f1ea;
    font: 600 13px / 1 var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
    letter-spacing: -0.01em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.explore-v2.ba-explore-can-back .ba-explore-back:hover,
  body.explore-v2.ba-explore-can-back .ba-explore-back:focus-visible {
    background: rgba(244, 241, 234, 0.1);
    outline: none;
  }
  body.explore-v2.ba-explore-can-back .ba-explore-back svg {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }
  body.explore-v2.ba-explore-can-back .ba-wordmark {
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
  }
  body.explore-v2.ba-explore-can-back .ba-wordmark-logo--mark,
  body.explore-v2.ba-explore-can-back .ba-wordmark img.ba-wordmark-logo--mark {
    width: 48px !important;
    height: 48px !important;
    left: -13px !important;
    top: -13px !important;
  }

  /* DS mobile: hide primary text links — logo + essential utility only.
     Crowding Explore/Boats/Community/My Atlas caused collisions at ~390. */
  body.explore-v2 .ba-mode-strip {
    display: none !important;
  }
  /* [mark] [Location] ... [info] [profile] [menu]: Location primary, utils light. */
  body.explore-v2 .ba-nav-right {
    display: flex !important;
    align-items: center !important;
    margin-left: 0 !important;
    gap: 0 !important;
    flex: 1 1 auto !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    justify-content: flex-start !important;
  }
  /* Location gets the space freed by the mark-only wordmark. */
  body.explore-v2 .ba-nav-right > .ba-my-boat-chip-wrap,
  body.explore-v2 .ba-nav-right > .ba-my-boat-chip-wrap.ba-my-boat-chip--nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: min(var(--ev2-mobile-loc-max, 155px), 42vw) !important;
    overflow: hidden !important;
  }
  body.explore-v2 .ba-nav-right > .ba-my-boat-chip-wrap .ba-my-boat-chip {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body.explore-v2 .ba-nav-right > .ba-my-boat-chip-wrap .ba-my-boat-chip-name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.explore-v2 .ba-nav-auth {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
  }
  body.explore-v2 .ba-nav-auth a,
  body.atlas-scope.explore-v2 .ba-nav-auth a {
    min-height: var(--ev2-mobile-util, 40px) !important;
    height: var(--ev2-mobile-util, 40px) !important;
    padding: 0 8px !important;
    font-size: 13px !important;
  }
  /* Profile: match info/menu — 40px hit, no blue gradient circle. */
  body.explore-v2 .ba-account-menu {
    flex: 0 0 var(--ev2-mobile-util, 40px) !important;
    width: var(--ev2-mobile-util, 40px) !important;
    min-width: var(--ev2-mobile-util, 40px) !important;
    margin: 0 !important;
  }
  body.explore-v2 .ba-nav-avatar,
  body.explore-v2 .ba-account-menu > summary {
    box-sizing: border-box !important;
    width: var(--ev2-mobile-util, 40px) !important;
    height: var(--ev2-mobile-util, 40px) !important;
    min-width: var(--ev2-mobile-util, 40px) !important;
    min-height: var(--ev2-mobile-util, 40px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(244, 241, 234, 0.96) !important;
    font: 600 14px / 1 var(--ba-f, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif) !important;
  }
  body.explore-v2 .ba-nav-avatar:hover,
  body.explore-v2 .ba-nav-avatar:focus-visible,
  body.explore-v2 .ba-account-menu > summary:hover,
  body.explore-v2 .ba-account-menu > summary:focus-visible {
    background: rgba(244, 241, 234, 0.1) !important;
  }
  body.explore-v2 .ba-nav-avatar--guest {
    background: transparent !important;
    border: 0 !important;
    color: rgba(244, 241, 234, 0.96) !important;
  }
  /* Info (Safety) in the top utility cluster on phone. */
  body.explore-v2 .ba-nav-right > #ba-safety-data-btn,
  body.explore-v2 .ba-nav-right > .ba-safety-data-btn.ba-safety-data-btn--in-nav {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 var(--ev2-mobile-util, 40px) !important;
    width: var(--ev2-mobile-util, 40px) !important;
    height: var(--ev2-mobile-util, 40px) !important;
    min-width: var(--ev2-mobile-util, 40px) !important;
    min-height: var(--ev2-mobile-util, 40px) !important;
    /* Push info / profile / menu to the trailing edge. */
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(238, 243, 248, 0.92) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2 !important;
  }
  body.explore-v2 .ba-nav-right > #ba-safety-data-btn svg,
  body.explore-v2 .ba-nav-right > .ba-safety-data-btn.ba-safety-data-btn--in-nav svg {
    width: 20px !important;
    height: 20px !important;
    opacity: 0.92 !important;
  }
  body.explore-v2 .ba-nav-right > #ba-safety-data-btn .ba-safety-data-label,
  body.explore-v2 .ba-nav-right > .ba-safety-data-btn.ba-safety-data-btn--in-nav .ba-safety-data-label {
    display: none !important;
  }
  body.explore-v2 .ba-nav-right > #ba-safety-data-btn:hover,
  body.explore-v2 .ba-nav-right > .ba-safety-data-btn.ba-safety-data-btn--in-nav:hover {
    background: rgba(244, 241, 234, 0.1) !important;
  }
  /* When info is absent (e.g. Weatheroo), trail the next utility instead. */
  body.explore-v2 .ba-nav-right > .ba-account-menu {
    margin-left: auto !important;
  }
  body.explore-v2 .ba-nav-right > #ba-safety-data-btn ~ .ba-account-menu,
  body.explore-v2 .ba-nav-right > .ba-safety-data-btn ~ .ba-account-menu {
    margin-left: 0 !important;
  }
  body.explore-v2 .ba-nav-right > .ba-consumer-menu {
    margin-left: auto !important;
  }
  body.explore-v2 .ba-nav-right > #ba-safety-data-btn ~ .ba-consumer-menu,
  body.explore-v2 .ba-nav-right > .ba-safety-data-btn ~ .ba-consumer-menu,
  body.explore-v2 .ba-nav-right > .ba-account-menu ~ .ba-consumer-menu {
    margin-left: 0 !important;
  }
  /* Tighter, consistent account / hamburger drawer spacing on phone. */
  body.explore-v2 .ba-account-panel {
    gap: 6px !important;
    padding: 12px !important;
    min-width: 0 !important;
  }
  body.explore-v2 .ba-account-panel a:not(.ba-workspace-option) {
    min-height: 40px !important;
    padding: 6px 0 !important;
    font-size: 15px !important;
  }
  body.explore-v2 .ba-account-divider {
    margin: 2px 0 !important;
  }
  body.explore-v2 .ba-account-workspace-row {
    gap: 6px !important;
  }
  /* Destinations menu must stay on Explore phone chrome (logo / Location / info / account / ☰). */
  body.explore-v2 .ba-nav-wrap .ba-nav-hamburger,
  body.explore-v2 .ba-nav-right > .ba-consumer-menu,
  body.explore-v2 .ba-nav-right > .ba-consumer-menu.ba-nav-hamburger,
  body.explore-v2 .ba-nav .ba-consumer-menu.ba-nav-hamburger {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 3 !important;
    flex: 0 0 var(--ev2-mobile-util, 40px) !important;
    width: var(--ev2-mobile-util, 40px) !important;
    min-width: var(--ev2-mobile-util, 40px) !important;
    max-width: var(--ev2-mobile-util, 40px) !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
    order: 99 !important;
  }
  body.explore-v2 .ba-consumer-menu-trigger,
  body.explore-v2 .ba-nav-hamburger .ba-consumer-menu-trigger,
  body.explore-v2 .ba-nav-right .ba-consumer-menu-trigger {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: var(--ev2-mobile-util, 40px) !important;
    height: var(--ev2-mobile-util, 40px) !important;
    min-width: var(--ev2-mobile-util, 40px) !important;
    min-height: var(--ev2-mobile-util, 40px) !important;
    color: rgba(244, 241, 234, 0.96) !important;
  }
  body.explore-v2 .ba-nav-hamburger .ba-consumer-menu-trigger svg,
  body.explore-v2 .ba-nav-right .ba-consumer-menu-trigger svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    opacity: 1 !important;
    color: inherit !important;
    stroke: currentColor !important;
  }
  body.explore-v2 .ba-consumer-menu-trigger:hover,
  body.explore-v2 .ba-consumer-menu-trigger:focus-visible {
    background: rgba(244, 241, 234, 0.1) !important;
  }
  body.explore-v2 .ba-consumer-menu-panel {
    gap: 4px !important;
    padding: 8px !important;
  }
  body.explore-v2 .ba-consumer-menu-link {
    gap: 10px !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    font-size: 16px !important;
  }
  body.explore-v2 .ba-v2-pins,
  body.explore-v2 .near-label { display: none !important; }
  body.explore-v2 .ba-tabbar {
    display: none !important;
  }

  body.explore-v2 .ba-map-search.nav-center {
    /* Search + locate live in the bottom thumb row on phone — keeping an
       empty/near-only header shell stole width from the mode strip. */
    display: none !important;
  }

  body.explore-v2 .nav-search-wrap {
    display: block !important;
    max-width: none !important;
  }

  body.explore-v2 .nav-search {
    --ba-v2-search-go: 34px;
    height: 42px !important;
  }

  body.explore-v2 .ba-map-search .near {
    display: inline-grid !important;
    min-width: 42px !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
  }

  /* Phone ≤900: layer chips are a right stack (closed=hidden), not a top rail. */

  body.explore-v2 .wx-field-toggle::-webkit-scrollbar { display: none; }

  body.explore-v2 .wx-field-toggle > button,
  body.explore-v2 .wx-field-toggle .ba-v2-layer-section > button,
  body.explore-v2 .wx-field-toggle .wx-sat-pair > button,
  body.explore-v2 .wx-field-toggle .ba-v2-layer-play {
    flex: 0 0 auto;
    min-width: 0;
    height: var(--ev2-hit) !important;
    min-height: var(--ev2-hit) !important;
    padding: 0 6px !important;
    font-size: var(--ev2-label-size) !important;
  }

  body.atlas-scope.explore-v2 .wx-field-toggle > button,
  body.atlas-scope.explore-v2 .wx-field-toggle .ba-v2-layer-section > button,
  body.atlas-scope.explore-v2 .wx-field-toggle .wx-sat-pair > button,
  body.atlas-scope.explore-v2 .wx-field-toggle .ba-v2-layer-play {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  body.explore-v2 .data-dock,
  body.explore-v2:has(.inspector.on) .data-dock,
  body.explore-v2:has(.inspector.on.week-open) .data-dock {
    top: var(--ev2-timeline-top) !important;
    right: calc(var(--ev2-chrome-side) + 48px + 8px) !important;
    left: 8px !important;
    width: auto !important;
    height: var(--ev2-timeline-h) !important;
    transform: none !important;
    border-radius: 17px !important;
  }

  body.atlas-scope.explore-v2.mode-conditions .data-dock,
  body.atlas-scope.explore-v2.mode-conditions:has(.inspector.on) .data-dock,
  body.atlas-scope.explore-v2.mode-conditions:has(.inspector.on.week-open) .data-dock {
    right: calc(var(--ev2-chrome-side) + 48px + 8px) !important;
    left: 8px !important;
    width: auto !important;
    transform: none !important;
  }

  /* Match the glass bottom bar insets — not edge-to-edge.
     When the layers rail is open, clear its width so the scrubber/close
     control are not covered. */
  body.explore-v2.v2-player-open .data-dock,
  body.explore-v2.rain-scrub .data-dock,
  body.explore-v2.clouds-scrub .data-dock,
  body.atlas-scope.explore-v2.v2-player-open .data-dock,
  body.atlas-scope.explore-v2.mode-conditions.v2-player-open .data-dock,
  body.atlas-scope.explore-v2.mode-conditions.rain-scrub .data-dock,
  body.atlas-scope.explore-v2.mode-conditions.clouds-scrub .data-dock {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    border-radius: 18px !important;
    transform: none !important;
  }
  body.explore-v2.m-layers-open.v2-player-open .data-dock,
  body.explore-v2.m-layers-open.rain-scrub .data-dock,
  body.explore-v2.m-layers-open.clouds-scrub .data-dock,
  body.atlas-scope.explore-v2.m-layers-open.v2-player-open .data-dock,
  body.atlas-scope.explore-v2.mode-conditions.m-layers-open.v2-player-open .data-dock,
  body.atlas-scope.explore-v2.mode-conditions.m-layers-open.rain-scrub .data-dock,
  body.atlas-scope.explore-v2.mode-conditions.m-layers-open.clouds-scrub .data-dock {
    right: calc(12px + var(--ev2-layer-stack-w, 56px) + 16px) !important;
  }

  body.explore-v2 .scrubber {
    padding: 3px 6px !important;
    gap: 8px !important;
  }

  body.explore-v2 .scrubber .play {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
    font-size: 10px !important;
  }

  /* Tall enough for OBSERVED / NOW / FORECAST above the slim line + thumb.
     16px collapsed the label band onto the track (labels clipped the blue line). */
  body.explore-v2 .scrubber .track-wrap { height: 28px !important; }

  body.explore-v2 .scrubber input[type="range"] {
    /* Keep the hit/thumb band in the lower half under the labels. */
    height: 14px !important;
  }

  body.explore-v2 .scrubber .ba-v2-tl-line {
    bottom: 5.5px !important;
    top: auto !important;
    transform: none !important;
  }

  body.explore-v2 .scrubber input[type="range"]::-webkit-slider-thumb {
    width: 11px !important;
    height: 11px !important;
    margin-top: -4px !important;
  }

  body.explore-v2 .scrubber .ba-v2-tl-seg {
    font-size: 9px;
    top: 2px;
    /* ~9px type in a 28px wrap; line sits ~19.5–22.5px → ~8–9px clear gap. */
    line-height: 1.1;
  }

  body.explore-v2 .map-tools,
  body.atlas-scope.explore-v2 .map-tools {
    top: auto !important;
    right: 12px !important;
    bottom: calc(var(--status-h) + var(--ev2-thumb-bottom-gap, 12px)) !important;
    width: auto !important;
  }

  body.explore-v2.v2-player-open .map-tools {
    top: auto !important;
    bottom: calc(var(--status-h) + var(--ev2-thumb-bottom-gap, 12px)) !important;
  }

  body.explore-v2 .map-nav,
  body.explore-v2 .map-nav-group {
    width: auto !important;
    min-width: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  body.explore-v2:not(.v2-forecast-collapsed):has(.inspector.on:not(.collapsed)) .map-tools {
    bottom: calc(var(--status-h) + var(--ev2-thumb-bottom-gap, 12px)) !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.explore-v2:not(.v2-forecast-collapsed):has(.inspector.on:not(.collapsed)) .map-nav-view {
    display: flex !important;
  }

  body.explore-v2.v2-forecast-collapsed .map-tools {
    bottom: calc(var(--status-h) + var(--ev2-thumb-bottom-gap, 12px)) !important;
    height: auto !important;
  }

  body.explore-v2 .map-nav-view .map-rail-btn::after,
  body.explore-v2 .ba-v2-rail-more span { display: none !important; }

  body.explore-v2 .map-nav-zoom {
    display: none !important;
  }

  body.explore-v2 .ba-v2-more-group {
    display: none !important;
  }

  body.explore-v2 .inspector,
  body.explore-v2 .inspector.view-now.on,
  body.explore-v2 .inspector.view-today.on,
  body.explore-v2 .inspector.view-week.on {
    top: var(--ev2-forecast-dock-top) !important;
    right: 8px !important;
    bottom: auto !important;
    left: 8px !important;
    height: min(330px, var(--ev2-forecast-dock-max-h)) !important;
    max-height: min(330px, var(--ev2-forecast-dock-max-h)) !important;
    border-radius: 24px 24px 18px 18px !important;
  }

  body.explore-v2 .inspector-shell {
    border-radius: 24px 24px 18px 18px !important;
  }

  body.explore-v2 .inspector-core > .insp-seg,
  body.explore-v2 .inspector.view-now .insp-seg,
  body.explore-v2 .inspector.view-week .insp-seg {
    flex: 0 0 48px !important;
    min-height: 48px !important;
    padding: 0 8px !important;
    gap: 2px !important;
  }

  body.explore-v2 .insp-tab,
  body.explore-v2 .inspector.view-now .insp-tab,
  body.explore-v2 .inspector.view-week .insp-tab {
    flex: 1 1 0 !important;
    min-height: 44px !important;
    text-align: center !important;
  }

  body.explore-v2 .inspector.view-now .insp-now,
  body.explore-v2.insp-view-now #insp-now {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 18px 20px 24px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /*
   * Mobile Now: summary must not flex-shrink under min-height:0. Desktop dock
   * allows shrinking in the 3-col grid; on a column sheet that collapse leaves
   * hero + factual overflowing on top of Wind/Waves (BA mobile overlap).
   */
  body.explore-v2 .v2-now-summary {
    flex: 0 0 auto !important;
    min-height: min-content !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 4px 12px !important;
    border-right: 0;
    border-bottom: 0;
  }

  body.explore-v2 .v2-now-summary .insp-loc-head,
  body.explore-v2 .v2-now-summary .insp-now-main,
  body.explore-v2 .v2-now-summary .insp-factual {
    flex: 0 0 auto !important;
    position: relative !important;
  }

  body.explore-v2 .v2-now-summary .insp-factual {
    max-width: none !important;
    width: 100% !important;
    margin-top: 8px !important;
  }

  body.explore-v2 .v2-now-metrics {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex: 0 0 auto !important;
    gap: 8px 16px !important;
    padding: 4px 0 8px !important;
    border-right: 0 !important;
    overflow: visible !important;
  }

  body.explore-v2 .v2-now-metrics .inq,
  body.explore-v2 .v2-now-metrics .v2-live-metric {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 4px 0 !important;
    border-right: 0 !important;
  }

  body.explore-v2 .v2-now-metrics .v,
  body.explore-v2 .v2-live-metric .v,
  body.explore-v2 .v2-tide-value {
    font-size: 16px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  body.explore-v2 .v2-now-tide {
    padding: 8px 0 0 !important;
    border-top: 1px solid var(--x-line);
  }

  body.explore-v2 .v2-today-ready {
    display: block !important;
    min-width: 0 !important;
  }

  body.explore-v2 .v2-today-ready .wx-today-primary-head { margin-top: 8px !important; }
  body.explore-v2.insp-view-today .inspector.view-today #wx {
    padding: 8px 16px !important;
  }
  /* Phone Today: 2-up tiles; Wind is tick + "18 kn" (no compass letters). */
  body.explore-v2 .v2-today-ready .wx-metrics-primary,
  body.explore-v2 .v2-today-ready .wx-metrics-more {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    overflow-x: visible !important;
    overscroll-behavior-x: auto !important;
  }
  body.explore-v2 .v2-today-ready .wx-metric {
    padding: 10px 14px !important;
    overflow: visible !important;
  }
  body.explore-v2 .v2-today-ready .wx-metric:nth-child(even) {
    border-right: 0 !important;
  }
  body.explore-v2 .v2-today-ready .wx-metric .v {
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    padding-right: 8px !important;
  }

  body.explore-v2 .inspector.view-today.on {
    top: var(--ev2-forecast-dock-top) !important;
    right: 8px !important;
    bottom: auto !important;
    left: 8px !important;
    height: min(680px, var(--ev2-forecast-dock-max-h)) !important;
    max-height: min(680px, var(--ev2-forecast-dock-max-h)) !important;
  }

  body.explore-v2 .inspector.view-week.on {
    top: var(--ev2-forecast-dock-top) !important;
    right: 8px !important;
    bottom: auto !important;
    left: 8px !important;
    height: min(540px, var(--ev2-forecast-dock-max-h)) !important;
    max-height: min(540px, var(--ev2-forecast-dock-max-h)) !important;
  }

  body.explore-v2.insp-view-today .map-tools,
  body.explore-v2.insp-view-week .map-tools {
    display: flex !important;
  }

  /* Place card fills the phone and keeps a close control. */
  body.explore-v2 .sheet.show {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    border-radius: 0 !important;
    z-index: 200 !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  body.explore-v2 .sheet.show .ph-actions {
    position: fixed !important;
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    right: 12px !important;
    left: auto !important;
    z-index: 220 !important;
    display: flex !important;
    gap: 8px !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  body.explore-v2 .sheet.show .close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    background: #041820 !important;
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  body.explore-v2.m-layers-open .sheet,
  body.explore-v2.m-layers-open .sheet.show {
    right: calc(12px + var(--ev2-layer-stack-w, 56px) + 16px) !important;
  }
  body.explore-v2 .sheet .ph {
    height: 96px !important;
  }

  body.explore-v2 .ba-v2-compact-forecast { display: none !important; }
  /* Base geometry for the conditions strip — detailed map-first rules below. */
  body.explore-v2 .ba-v2-forecast-card {
    top: auto;
    left: 12px;
    right: 12px;
    bottom: var(--ev2-cond-strip-bottom);
    width: auto;
    border-radius: 16px;
  }

  body.explore-v2 .ba-tabbar { display: none !important; }

  /* ==================================================================
     Mobile instrument chrome — map-first strip, layers FAB,
     centered Search + Locate + 3D bottom
     ================================================================== */
  body.explore-v2 {
    /* No opaque bottom band — tools float over the map with safe-area padding.
       Keep --status-h as the home-indicator inset so chrome clears it; map
       still paints underneath via #map inset:0. */
    --status-h: env(safe-area-inset-bottom, 0px);
    --dock-h: 96px;
  }
  body.explore-v2.mode-conditions { --dock-h: 96px; }
  body.explore-v2.mode-conditions.rain-scrub,
  body.explore-v2.mode-conditions.clouds-scrub,
  body.explore-v2.mode-conditions.v2-player-open { --dock-h: 168px; }
  body.explore-v2.mode-places { --dock-h: 84px; }
  body.explore-v2.mode-places.rain-scrub,
  body.explore-v2.mode-places.clouds-scrub,
  body.explore-v2.mode-places.v2-player-open { --dock-h: 156px; }
  /* Reserve thumb-row clearance so the forecast sheet sits ABOVE nav */
  body.explore-v2.mode-conditions.m-sheet { --dock-h: var(--ev2-thumb-row-h); }
  body.explore-v2.mode-conditions.m-sheet.rain-scrub,
  body.explore-v2.mode-conditions.m-sheet.clouds-scrub,
  body.explore-v2.mode-conditions.m-sheet.v2-player-open {
    --dock-h: calc(var(--ev2-thumb-row-h) + 66px);
  }

  /* Map-first conditions strip — thin bar above thumb row (Waav-like). */
  body.explore-v2 #m-cond-peek {
    display: none !important;
  }
  body.explore-v2 .ba-v2-forecast-card,
  body.explore-v2:has(.inspector.collapsed) .ba-v2-forecast-card,
  body.explore-v2.v2-forecast-collapsed .ba-v2-forecast-card {
    display: grid !important;
    grid-template-rows: 1fr !important;
    position: fixed !important;
    top: auto !important;
    left: 12px !important;
    right: 12px !important;
    bottom: var(--ev2-cond-strip-bottom) !important;
    z-index: 72 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--ev2-cond-strip-h) !important;
    max-height: var(--ev2-cond-strip-h) !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    align-content: stretch !important;
  }
  body.explore-v2 .ba-v2-forecast-summary {
    display: none !important;
  }
  body.explore-v2 .ba-v2-forecast-icon {
    display: grid !important;
    place-items: center !important;
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 auto !important;
    grid-row: auto !important;
  }
  body.explore-v2 .ba-v2-forecast-icon svg {
    width: 26px !important;
    height: 24px !important;
  }
  body.explore-v2 .ba-v2-forecast-temp {
    flex: 0 0 auto !important;
    align-self: center !important;
    font-size: 22px !important;
    letter-spacing: -0.03em !important;
    line-height: 1 !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  body.explore-v2 .ba-v2-forecast-wind {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin-left: 4px !important;
    padding-left: 12px !important;
    border-left: 1px solid var(--x-line) !important;
    color: var(--x-text) !important;
    gap: 6px !important;
    font-variant-numeric: tabular-nums;
  }
  body.explore-v2 .ba-v2-forecast-wind-val {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.explore-v2 .ba-v2-forecast-copy {
    display: none !important;
  }
  body.explore-v2 .ba-v2-forecast-alert:not([hidden]) {
    display: inline-flex !important;
    margin: 0 0 0 auto !important;
    max-width: 72px !important;
  }
  body.explore-v2 .ba-v2-forecast-open {
    display: none !important;
  }
  body.explore-v2.v2-glance-open {
    --ev2-cond-strip-h: 112px;
  }
  body.explore-v2:not(.v2-glance-open) {
    --ev2-cond-strip-h: 0px;
  }
  body.explore-v2:not(.v2-glance-open) .ba-v2-forecast-card,
  body.explore-v2:not(.v2-glance-open):has(.inspector.collapsed) .ba-v2-forecast-card,
  body.explore-v2:not(.v2-glance-open).v2-forecast-collapsed .ba-v2-forecast-card {
    display: none !important;
  }
  body.explore-v2 .ba-v2-forecast-summary {
    display: none !important;
  }
  body.explore-v2 .ba-v2-glance {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    height: 100%;
    min-height: 0;
    padding: 10px 12px 8px;
    box-sizing: border-box;
  }
  body.explore-v2 .ba-v2-glance-grab {
    display: none !important;
  }
  body.explore-v2 .ba-v2-glance-line {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    width: 100%;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    white-space: normal;
    color: var(--x-text, #eef3f8);
    font: 500 13px/1.15 var(--ba-font, "Helvetica Neue", Arial, sans-serif);
  }
  body.explore-v2 .ba-v2-glance-bit {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    padding: 0 8px;
    overflow: hidden;
    border-left: 1px solid rgba(216, 216, 209, 0.28);
    box-sizing: border-box;
  }
  body.explore-v2 .ba-v2-glance-bit > strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  body.explore-v2 .ba-v2-glance-bit--wx {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    border-left: 0;
    padding-left: 0;
  }
  body.explore-v2 .ba-v2-glance-stack {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  body.explore-v2 .ba-v2-glance-stack strong,
  body.explore-v2 .ba-v2-glance-bit > strong {
    font: 600 15px/1.1 var(--ba-font, "Helvetica Neue", Arial, sans-serif);
  }
  body.explore-v2 .ba-v2-glance-stack small,
  body.explore-v2 .ba-v2-glance-bit > small {
    color: rgba(238, 243, 248, 0.72);
    font: 500 11px/1.2 var(--ba-font, "Helvetica Neue", Arial, sans-serif);
  }
  body.explore-v2 .ba-v2-glance-sep {
    display: none !important;
  }
  body.explore-v2 .ba-v2-glance-bit[hidden],
  body.explore-v2 .ba-v2-glance-sep[hidden] {
    display: none !important;
  }
  body.explore-v2 .ba-v2-glance-views {
    display: flex !important;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 36px;
  }
  body.explore-v2 .ba-v2-glance-view {
    flex: 1 1 0;
    min-width: 0;
    min-height: 36px;
    margin: 0;
    padding: 0 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(238, 243, 248, 0.78);
    font: 600 13px/1 var(--ba-font, "Helvetica Neue", Arial, sans-serif);
    cursor: pointer;
  }
  body.explore-v2 .ba-v2-glance-view.on {
    background: rgba(11, 99, 246, 0.28);
    color: #fff;
    box-shadow: none;
  }
  body.explore-v2 #ba-v2-glance-toggle {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    width: var(--ev2-hit) !important;
    min-width: var(--ev2-hit) !important;
    height: var(--ev2-hit) !important;
    min-height: var(--ev2-hit) !important;
    padding: 0 !important;
    border-radius: 12px !important;
    color: var(--x-text, #eef3f8) !important;
    background: transparent !important;
  }
  body.explore-v2 .map-tools #ba-v2-glance-toggle.on {
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
  }
  body.explore-v2 #ba-v2-glance-toggle .ba-v2-glance-toggle-temp {
    font: 600 12px/1 var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif) !important;
  }
  body.explore-v2.m-sheet .ba-v2-forecast-card,
  body.explore-v2:has(.sheet.show) .ba-v2-forecast-card,
  body.explore-v2:not(.v2-forecast-collapsed):has(.inspector.on.m-open) .ba-v2-forecast-card {
    display: none !important;
  }
  body.explore-v2.m-layers-open .ba-v2-forecast-card,
  body.explore-v2.m-layers-open:has(.inspector.collapsed) .ba-v2-forecast-card,
  body.explore-v2.m-layers-open.v2-forecast-collapsed .ba-v2-forecast-card {
    right: calc(12px + var(--ev2-layer-stack-w, 56px) + 16px) !important;
  }
  /* Now / Today / 7-Day live in the expanded sheet — not on the strip. */
  body.explore-v2 .ba-v2-forecast-tabs {
    display: none !important;
  }
  /* Strip stays docked above thumb; timeline lifts above the strip instead. */
  body.explore-v2.mode-conditions.rain-scrub:not(.m-sheet) .ba-v2-forecast-card,
  body.explore-v2.mode-conditions.clouds-scrub:not(.m-sheet) .ba-v2-forecast-card,
  body.explore-v2.v2-player-open:not(.m-sheet) .ba-v2-forecast-card {
    top: auto !important;
    bottom: var(--ev2-cond-strip-bottom) !important;
  }

  /* Always-on layer rail → vertical right stack (closed = hidden). */
  body.explore-v2 .wx-field-toggle,
  body.explore-v2 .wx-field-toggle.on,
  body.atlas-scope.explore-v2 .wx-field-toggle,
  body.atlas-scope.explore-v2 .wx-field-toggle.on,
  body.atlas-scope.explore-v2.mode-conditions .wx-field-toggle,
  body.atlas-scope.explore-v2.mode-conditions .wx-field-toggle.on,
  body.atlas-scope.explore-v2.mode-places .wx-field-toggle,
  body.atlas-scope.explore-v2.mode-places .wx-field-toggle.on {
    display: none !important;
  }
  body.explore-v2.m-layers-open .wx-field-toggle,
  body.explore-v2.m-layers-open .wx-field-toggle.on,
  body.explore-v2.m-layers-open #wx-field-toggle,
  body.atlas-scope.explore-v2.m-layers-open .wx-field-toggle,
  body.atlas-scope.explore-v2.m-layers-open .wx-field-toggle.on,
  body.atlas-scope.explore-v2.mode-conditions.m-layers-open .wx-field-toggle,
  body.atlas-scope.explore-v2.mode-conditions.m-layers-open .wx-field-toggle.on {
    display: flex !important;
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    right: 12px !important;
    /* Clear painted thumb pill + gap so Fuel/chevron never sit under Layers. */
    bottom: calc(
      var(--status-h) + var(--ev2-thumb-bottom-gap, 12px) + var(--ev2-thumb-row-h) +
        var(--ev2-cond-strip-h) + var(--ev2-bottom-stack-gap, 16px) + 16px
    ) !important;
    width: var(--ev2-layer-stack-w) !important;
    max-width: var(--ev2-layer-stack-w) !important;
    min-width: var(--ev2-layer-stack-w) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(
      100dvh - var(--ev2-temp-chip-top) - 16px
        - var(--status-h) - var(--ev2-thumb-row-h) - var(--ev2-cond-strip-h)
        - var(--ev2-bottom-stack-gap, 16px) - 8px
    ) !important;
    transform: none !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    overflow-anchor: none;
    touch-action: pan-y;
    scrollbar-width: none;
    border-radius: 18px !important;
    background: rgba(4, 24, 32, 0.34) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
    /* Below thumb row so Layers stays tappable if geometry still kisses. */
    z-index: 72 !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
  }
  body.explore-v2.m-layers-open .wx-field-toggle::-webkit-scrollbar,
  body.explore-v2.m-layers-open #wx-field-toggle::-webkit-scrollbar {
    display: none;
  }

  /* Vertical stack: up/down chevrons stick to top/bottom of the menu. */
  body.explore-v2.m-layers-open .wx-field-toggle > button.ba-v2-layer-scroll,
  body.atlas-scope.explore-v2.m-layers-open .wx-field-toggle > button.ba-v2-layer-scroll {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 28px !important;
    min-height: 28px !important;
    border-radius: 10px !important;
    left: auto !important;
    right: auto !important;
  }
  body.explore-v2.m-layers-open .wx-field-toggle > button.ba-v2-layer-scroll--prev {
    top: 0;
  }
  body.explore-v2.m-layers-open .wx-field-toggle > button.ba-v2-layer-scroll--next {
    bottom: 0;
  }
  body.explore-v2.m-layers-open .ba-v2-layer-scroll__ico--left,
  body.explore-v2.m-layers-open .ba-v2-layer-scroll__ico--right {
    display: none;
  }
  body.explore-v2.m-layers-open .ba-v2-layer-scroll__ico--up,
  body.explore-v2.m-layers-open .ba-v2-layer-scroll__ico--down {
    display: block;
  }
  body.explore-v2.m-layers-open.rain-scrub .wx-field-toggle,
  body.explore-v2.m-layers-open.clouds-scrub .wx-field-toggle,
  body.explore-v2.m-layers-open.v2-player-open .wx-field-toggle,
  body.explore-v2.m-layers-open.rain-scrub .wx-field-toggle.on,
  body.explore-v2.m-layers-open.clouds-scrub .wx-field-toggle.on,
  body.explore-v2.m-layers-open.v2-player-open .wx-field-toggle.on {
    bottom: calc(
      var(--ev2-cond-strip-bottom) + var(--ev2-cond-strip-h) + 66px +
        var(--ev2-bottom-stack-gap, 10px)
    ) !important;
    max-height: calc(
      100dvh - var(--ev2-temp-chip-top) - 16px
        - var(--ev2-cond-strip-bottom) - var(--ev2-cond-strip-h) - 66px
        - var(--ev2-bottom-stack-gap, 10px)
    ) !important;
  }
  body.explore-v2 .wxft-head {
    display: none !important;
  }
  body.explore-v2.m-layers-open .wxft-head {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    margin: 0 0 4px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  body.explore-v2.m-layers-open .wxft-head > :not(#wxft-close) {
    display: none !important;
  }
  /* Clear circular X at top of the layer stack (matches search dismiss). */
  body.explore-v2.m-layers-open #wxft-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(4, 24, 32, 0.88);
    color: #f4f1ea;
    box-shadow: 0 8px 20px rgba(4, 24, 32, 0.28);
    font-size: 0;
    line-height: 1;
    cursor: pointer;
  }
  body.explore-v2.m-layers-open #wxft-close svg {
    display: block;
    width: 16px;
    height: 16px;
  }

  /* Closed phone rail uses display:contents from base; open stack below. */
  body.explore-v2 .ba-v2-layer-section--weather,
  body.explore-v2 .ba-v2-layer-section--actions {
    display: contents;
  }
  body.explore-v2.m-layers-open .ba-v2-layer-section--weather,
  body.explore-v2.m-layers-open .ba-v2-layer-section--actions,
  body.explore-v2.m-layers-open .ba-v2-layer-section--marine,
  body.explore-v2.m-layers-open .ba-v2-layer-section--legend,
  body.explore-v2.m-layers-open .ba-v2-place-group {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }
  /* Weather chips scroll with the rest of the stack. Only the chevrons stick. */
  body.explore-v2.m-layers-open .ba-v2-layer-section--weather {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body.explore-v2.m-layers-open .ba-v2-layer-section--weather .wx-sat-pair {
    display: contents !important;
  }
  body.explore-v2.m-layers-open .ba-v2-place-group,
  body.explore-v2.m-layers-open .ba-v2-layer-section--marine,
  body.explore-v2.m-layers-open .ba-v2-layer-section--legend,
  body.explore-v2.m-layers-open .ba-v2-layer-section--actions {
    padding-top: 4px !important;
    border-top: 1px solid var(--x-line) !important;
  }
  /* Equal compact chips in the right stack */
  body.explore-v2.m-layers-open #wx-field-toggle > .ba-v2-layer-section--weather > button,
  body.explore-v2.m-layers-open #wx-field-toggle > .ba-v2-layer-section--weather .wx-sat-pair > button,
  body.explore-v2.m-layers-open #wx-field-toggle .ba-v2-place-group .ba-v2-place-filter,
  body.explore-v2.m-layers-open #wx-field-toggle .ba-v2-layer-section--marine > button,
  body.explore-v2.m-layers-open #wx-field-toggle .ba-v2-marine-filter,
  body.explore-v2.m-layers-open #wx-field-toggle .ba-v2-layer-section--legend > button,
  body.explore-v2.m-layers-open #wx-field-toggle .ba-v2-legend-filter,
  body.explore-v2.m-layers-open #wx-field-toggle .ba-v2-layer-section--actions > button,
  body.atlas-scope.explore-v2.m-layers-open #wx-field-toggle > .ba-v2-layer-section--weather > button,
  body.atlas-scope.explore-v2.m-layers-open #wx-field-toggle > .ba-v2-layer-section--weather .wx-sat-pair > button,
  body.atlas-scope.explore-v2.m-layers-open #wx-field-toggle .ba-v2-place-group .ba-v2-place-filter,
  body.atlas-scope.explore-v2.m-layers-open #wx-field-toggle .ba-v2-layer-section--marine > button,
  body.atlas-scope.explore-v2.m-layers-open #wx-field-toggle .ba-v2-marine-filter,
  body.atlas-scope.explore-v2.m-layers-open #wx-field-toggle .ba-v2-layer-section--legend > button,
  body.atlas-scope.explore-v2.m-layers-open #wx-field-toggle .ba-v2-legend-filter,
  body.atlas-scope.explore-v2.m-layers-open #wx-field-toggle .ba-v2-layer-section--actions > button {
    display: inline-flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 36px !important;
    max-height: none !important;
    padding: 2px 0 !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  body.explore-v2.m-layers-open #wx-field-toggle > .ba-v2-layer-section--weather > button::before,
  body.explore-v2.m-layers-open #wx-field-toggle > .ba-v2-layer-section--weather .wx-sat-pair > button::before,
  body.explore-v2.m-layers-open #wx-field-toggle .ba-v2-layer-section--actions > button::before,
  body.explore-v2.m-layers-open #wx-field-toggle .ba-v2-layer-section--marine > button::before,
  body.explore-v2.m-layers-open #wx-field-toggle .ba-v2-marine-filter::before,
  body.explore-v2.m-layers-open #wx-field-toggle .ba-v2-layer-section--legend > button::before,
  body.explore-v2.m-layers-open #wx-field-toggle .ba-v2-legend-filter::before,
  body.explore-v2.m-layers-open #wx-field-toggle .ba-v2-place-group .ba-v2-place-glyph {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 var(--ev2-icon) !important;
    width: var(--ev2-icon) !important;
    height: var(--ev2-icon) !important;
    min-width: var(--ev2-icon) !important;
    min-height: var(--ev2-icon) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    vertical-align: middle !important;
  }
  body.explore-v2.m-layers-open #wx-field-toggle .ba-v2-place-group .ba-v2-place-glyph img {
    width: 14px !important;
    height: 14px !important;
  }
  body.explore-v2.m-layers-open .wx-sat-loading {
    display: none !important;
  }
  /* All-layers is the same layers glyph as the other chips. Drop it on the phone rail. */
  body.explore-v2 #wx-field-toggle button[data-preset="all"],
  body.explore-v2.m-layers-open #wx-field-toggle .ba-v2-layer-section--actions > button[data-preset="all"],
  body.explore-v2.m-layers-open #wx-field-toggle > button[data-preset="all"] {
    display: none !important;
  }
  body.explore-v2.m-layers-open .ba-v2-layer-section--actions > button {
    flex: 0 0 auto !important;
  }
  /* Chrome theme chip must stay visible once reparented into the layers stack.
     Never inherit map-rail / style-toggle hide rules. */
  body.explore-v2.m-layers-open #wx-field-toggle #btn-chrome,
  body.explore-v2.m-layers-open #wx-field-toggle .ba-v2-layer-section--actions > #btn-chrome {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    width: 100% !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--x-text) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
  }
  body.explore-v2.m-layers-open #wx-field-toggle #btn-chrome .map-rail-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    color: inherit !important;
  }
  body.explore-v2.m-layers-open #wx-field-toggle #btn-chrome .map-rail-icon,
  body.explore-v2.m-layers-open #wx-field-toggle #btn-chrome .map-rail-glyph {
    display: none !important;
  }
  body.explore-v2.m-layers-open #wx-field-toggle #btn-chrome::after {
    content: none !important;
    display: none !important;
  }

  /* Legacy m-cond-peek retired on v2 — forecast chip owns entry */
  body.explore-v2 #m-cond-peek,
  body.explore-v2.mode-conditions:not(.m-sheet) #m-cond-peek {
    display: none !important;
  }

  /* Timeline: hidden by default; shown for playable weather OR active Play.
     Sit above the conditions strip so the scrub bar never covers temp/wind. */
  body.explore-v2 .data-dock,
  body.explore-v2:has(.inspector.on) .data-dock,
  body.explore-v2:has(.inspector.on.week-open) .data-dock,
  body.atlas-scope.explore-v2.mode-conditions .data-dock,
  body.atlas-scope.explore-v2.mode-conditions:has(.inspector.on) .data-dock,
  body.atlas-scope.explore-v2.mode-conditions:has(.inspector.on.week-open) .data-dock,
  body.atlas-scope.explore-v2:not(.v2-player-open) .data-dock,
  body.atlas-scope.explore-v2:not(.v2-player-open):has(.inspector.on) .data-dock {
    display: none !important;
    position: fixed !important;
    top: auto !important;
    left: 12px !important;
    right: calc(12px + var(--ev2-layer-stack-w, 56px) + 16px) !important;
    bottom: calc(
      var(--ev2-cond-strip-bottom) + var(--ev2-cond-strip-h) + var(--ev2-bottom-stack-gap, 10px)
    ) !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    border-radius: 999px !important;
    z-index: 76 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
  }
  body.explore-v2.rain-scrub .data-dock,
  body.explore-v2.clouds-scrub .data-dock,
  body.explore-v2.v2-player-open .data-dock,
  body.atlas-scope.explore-v2.rain-scrub .data-dock,
  body.atlas-scope.explore-v2.clouds-scrub .data-dock,
  body.atlas-scope.explore-v2.v2-player-open .data-dock,
  body.atlas-scope.explore-v2.rain-scrub:not(.v2-player-open) .data-dock,
  body.atlas-scope.explore-v2.clouds-scrub:not(.v2-player-open) .data-dock {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    pointer-events: auto !important;
  }
  body.explore-v2.rain-scrub .data-dock .timeline-dock,
  body.explore-v2.clouds-scrub .data-dock .timeline-dock,
  body.explore-v2.v2-player-open .data-dock .timeline-dock,
  body.explore-v2.rain-scrub .data-dock .timeline-dock.on,
  body.explore-v2.clouds-scrub .data-dock .timeline-dock.on,
  body.explore-v2.v2-player-open .data-dock .timeline-dock.on {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    gap: 6px !important;
    height: auto !important;
    min-height: 56px !important;
    min-width: 0 !important;
    border: 1px solid var(--x-line) !important;
    border-radius: 18px !important;
    background: var(--x-glass) !important;
    box-shadow: var(--x-shadow) !important;
    -webkit-backdrop-filter: var(--x-glass-blur) !important;
    backdrop-filter: var(--x-glass-blur) !important;
    pointer-events: auto !important;
    width: auto !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  /* Same left/right as .map-tools / .map-nav-view glass pill.
     Layers rail open: inset right so scrub/close clear the stack. */
  body.explore-v2.v2-player-open .data-dock,
  body.explore-v2.rain-scrub .data-dock,
  body.explore-v2.clouds-scrub .data-dock,
  body.atlas-scope.explore-v2.v2-player-open .data-dock,
  body.atlas-scope.explore-v2.rain-scrub .data-dock,
  body.atlas-scope.explore-v2.clouds-scrub .data-dock {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    border-radius: 18px !important;
  }
  body.explore-v2.m-layers-open.v2-player-open .data-dock,
  body.explore-v2.m-layers-open.rain-scrub .data-dock,
  body.explore-v2.m-layers-open.clouds-scrub .data-dock,
  body.atlas-scope.explore-v2.m-layers-open.v2-player-open .data-dock,
  body.atlas-scope.explore-v2.m-layers-open.rain-scrub .data-dock,
  body.atlas-scope.explore-v2.m-layers-open.clouds-scrub .data-dock {
    right: calc(12px + var(--ev2-layer-stack-w, 56px) + 16px) !important;
  }
  body.explore-v2 .data-dock #m-cond-peek {
    /* Peek is fixed independently; never participate in dock flex layout */
    position: fixed !important;
  }

  /* Bottom icons: search, locate, 3D, layers — no separate layers pill. */
  body.explore-v2 .map-tools,
  body.atlas-scope.explore-v2 .map-tools,
  body.explore-v2.v2-player-open .map-tools,
  body.explore-v2.v2-forecast-collapsed .map-tools,
  body.explore-v2:not(.v2-forecast-collapsed):has(.inspector.on:not(.collapsed)) .map-tools,
  body.explore-v2.insp-view-today .map-tools,
  body.explore-v2.insp-view-week .map-tools {
    display: flex !important;
    position: fixed !important;
    top: auto !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(var(--status-h) + var(--ev2-thumb-bottom-gap, 12px)) !important;
    width: auto !important;
    height: var(--ev2-thumb-row-h) !important;
    max-height: var(--ev2-thumb-row-h) !important;
    overflow: visible !important;
    max-width: none !important;
    z-index: 90 !important;
    pointer-events: none !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: center !important;
    /* Never paint a full-width opaque band under/behind the floating pill. */
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* Dock sits above thumb row; tools stay at the bottom band */
  body.explore-v2.mode-conditions.rain-scrub:not(.m-sheet) .map-tools,
  body.explore-v2.mode-conditions.clouds-scrub:not(.m-sheet) .map-tools,
  body.explore-v2.v2-player-open:not(.m-sheet) .map-tools,
  body.explore-v2.rain-scrub:not(.m-sheet) .map-tools,
  body.explore-v2.clouds-scrub:not(.m-sheet) .map-tools {
    bottom: calc(var(--status-h) + var(--ev2-thumb-bottom-gap, 12px)) !important;
  }
  /* Sheet open — tools stay BELOW the forecast panel */
  body.explore-v2.m-sheet .map-tools,
  body.explore-v2:has(.sheet.show) .map-tools {
    bottom: calc(var(--status-h) + var(--ev2-thumb-bottom-gap, 12px)) !important;
    z-index: 80 !important;
    overflow: visible !important;
  }
  body.explore-v2 .map-nav,
  body.explore-v2 .map-nav-group,
  body.explore-v2 .map-nav-view {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    padding: 0 6px !important;
    gap: 4px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
  }
  /* Keep the glass pill full-width of the bottom tools band so the
     rain/clouds player can match it even when search is icon-only. */
  body.explore-v2 .map-nav {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  body.explore-v2 .map-nav-view {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: space-between !important;
    gap: 4px !important;
    border: 1px solid var(--x-line) !important;
    background: var(--x-glass) !important;
    box-shadow: var(--x-shadow) !important;
    -webkit-backdrop-filter: var(--x-glass-blur) !important;
    backdrop-filter: var(--x-glass-blur) !important;
    border-radius: 18px !important;
    padding: 6px !important;
  }
  /* Info is top-nav on phone; never paint Safety inside the bottom dock. */
  body.explore-v2 .map-nav-view > #ba-safety-data-btn,
  body.explore-v2 .map-nav-view > .ba-safety-data-btn,
  body.explore-v2 .ba-safety-data-btn.ba-safety-data-btn--in-bar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.explore-v2 .map-nav-view > #m-map-search,
  body.explore-v2 .map-nav-view > #ba-v2-glance-toggle {
    margin-left: 0 !important;
  }
  /* Search icon stays in the thumb bar; the field lives in #ba-v2-search-sheet. */
  body.explore-v2 .map-nav-view > .nav-search-wrap,
  body.explore-v2 .map-nav-view > #nav-search-wrap {
    display: none !important;
  }
  /* Thumb Search is #ba-explore-search; collapse legacy #m-map-search. */
  body.explore-v2 #m-map-search,
  body.explore-v2 .map-nav-view > #m-map-search {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    flex: 0 0 0 !important;
  }

  /* Full mobile search — homepage hero SearchPill language (not iOS sheet). */
  body.explore-v2:not(.m-search-open) .ba-nav .ba-v2-search-mic,
  body.explore-v2:not(.m-search-open) .ba-nav .ba-v2-search-submit {
    display: none !important;
  }
  body.explore-v2 .ba-v2-search-sheet {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 240;
    pointer-events: none;
    will-change: transform;
  }
  body.explore-v2.m-search-open .ba-v2-search-sheet {
    display: block;
    pointer-events: auto;
  }
  body.explore-v2 .ba-v2-search-sheet__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(4, 24, 32, 0.42);
    cursor: pointer;
  }
  body.explore-v2 .ba-v2-search-sheet__panel {
    position: absolute;
    top: auto;
    left: 12px;
    right: 12px;
    bottom: calc(
      var(--status-h, 12px) + var(--ev2-thumb-row-h, 48px) + 10px
    );
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    height: auto;
    max-height: min(72dvh, 580px);
    padding: 0;
    overflow: hidden;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    pointer-events: auto;
    box-sizing: border-box;
  }
  /*
   * Mobile search resting position: upper-center, always clear of SiteHeader
   * / .ba-nav. Growth (autocomplete) extends downward. Do not flush-top —
   * that parked the pill over the BoatAtlas wordmark.
   * True keyboard (data-keyboard=1) stays upper-center of the visual
   * viewport — never hard-pin to the top on focus / first keystroke.
   */
  body.explore-v2.m-search-open .ba-v2-search-sheet__panel {
    top: max(
      calc(
        var(--ev2-chrome-inset, 12px) + env(safe-area-inset-top, 0px) +
          var(--ev2-nav-h, 48px) + 20px
      ),
      38dvh
    ) !important;
    bottom: auto !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    height: auto !important;
    max-height: min(
      52dvh,
      calc(100dvh - 38dvh - var(--status-h, 12px) - 24px)
    ) !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  /* Soft keyboard: upper-center of the VV overlay (not flush-top). */
  body.explore-v2.m-search-open .ba-v2-search-sheet[data-keyboard="1"] .ba-v2-search-sheet__panel {
    top: max(12px, min(16%, 72px)) !important;
    bottom: auto !important;
    max-height: calc(var(--ba-vv-height, 100%) - 24px) !important;
    padding-top: 0 !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  body.explore-v2.m-search-open .map-nav-view {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  /* Place sheet / terrain note must not sit under the search pill. */
  body.explore-v2.m-search-open .sheet,
  body.explore-v2.m-search-open .sheet.show,
  body.explore-v2.m-search-open .water-view-chip,
  body.explore-v2.m-search-open .water-view-chip.on,
  body.explore-v2.m-search-open .coverage-chip,
  body.explore-v2.m-search-open .map-tools,
  body.explore-v2.m-search-open .ba-v2-layer-legends {
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }
  /* Avoid close control × Mapbox attrib collision while search is open. */
  body.explore-v2.m-search-open .mapboxgl-ctrl-bottom-left,
  body.explore-v2.m-search-open .mapboxgl-ctrl-bottom-right,
  body.explore-v2.m-search-open .mapboxgl-ctrl-attrib,
  body.explore-v2.m-search-open .mapboxgl-ctrl-logo,
  body.explore-v2.m-search-open .mapboxgl-ctrl-attrib-button {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  /* Legacy iOS chrome (title row) — removed in hero layout. */
  body.explore-v2 .ba-v2-search-sheet__chrome,
  body.explore-v2 .ba-v2-search-sheet__title {
    display: none !important;
  }
  /*
   * Mobile search: full-width pill + visible Close (X).
   * Backdrop / Escape also dismiss. Clear is a tiny glyph; mic when empty.
   */
  body.explore-v2 .ba-v2-search-sheet__cancel {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    z-index: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 2px 2px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: nowrap !important;
    background: rgba(4, 24, 32, 0.88) !important;
    color: #f4f1ea !important;
    box-shadow: 0 8px 20px rgba(4, 24, 32, 0.28) !important;
    pointer-events: auto !important;
    font-size: 0 !important;
    cursor: pointer !important;
  }
  body.explore-v2 .ba-v2-search-sheet__cancel svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
  }
  body.explore-v2.m-search-open .ba-v2-search-sheet__host .nav-search {
    padding-right: 52px !important;
  }
  /* Do not leave an empty frosted header while search owns the sheet.
     Beat explore-mobile-boot's ev2-chrome-ready visibility:visible. */
  body.explore-v2.ev2-chrome-ready.m-search-open .ba-nav-wrap,
  body.explore-v2.ev2-chrome-ready.m-search-open .ba-nav-wrap--dark,
  body.explore-v2.m-search-open .ba-nav-wrap,
  body.explore-v2.m-search-open .ba-nav-wrap--dark,
  body.explore-v2.ev2-chrome-ready.m-search-open .ba-nav-wrap::before,
  body.explore-v2.ev2-chrome-ready.m-search-open .ba-nav-wrap--dark::before,
  body.explore-v2.m-search-open .ba-nav-wrap::before,
  body.explore-v2.m-search-open .ba-nav-wrap--dark::before {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.explore-v2 .ba-v2-search-sheet__host {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    order: 1;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    gap: 8px;
    padding-right: 0;
    box-sizing: border-box;
  }
  body.explore-v2 .ba-v2-search-sheet__host > .nav-search-wrap,
  body.explore-v2 .ba-v2-search-sheet__host > #nav-search-wrap {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 0 1 auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    gap: 8px !important;
  }
  /* Pill on top, results below — always (thumb + keyboard). */
  body.explore-v2.m-search-open .ba-v2-search-sheet__host > .nav-search-wrap,
  body.explore-v2.m-search-open .ba-v2-search-sheet__host > #nav-search-wrap {
    flex-direction: column !important;
  }
  /* Full-width query pill: icon + input + optional clear. */
  body.explore-v2 .ba-v2-search-sheet__host .nav-search {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 12px 0 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 42px rgba(4, 24, 32, 0.24) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body.explore-v2 .ba-v2-search-sheet__host .nav-search-ico {
    position: static !important;
    display: grid !important;
    place-items: center !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    opacity: 0.55 !important;
    color: #4b5a5b !important;
  }
  body.explore-v2 .ba-v2-search-sheet__host .nav-search input,
  body.explore-v2 .ba-v2-search-sheet__host #universal-search {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #041820 !important;
    -webkit-text-fill-color: #041820 !important;
    caret-color: #0b63f6 !important;
    font: 400 15px/1.2 var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif) !important;
    letter-spacing: -0.01em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
    text-decoration-line: none !important;
    text-underline-offset: 0 !important;
  }
  body.explore-v2 .ba-v2-search-sheet__host .nav-search input::placeholder,
  body.explore-v2 .ba-v2-search-sheet__host #universal-search::placeholder {
    color: #4b5a5b !important;
    -webkit-text-fill-color: #4b5a5b !important;
    font-weight: 400 !important;
    opacity: 1 !important;
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
  }
  body.explore-v2 .ba-v2-search-sheet__host .nav-search input::-webkit-search-decoration,
  body.explore-v2 .ba-v2-search-sheet__host .nav-search input::-webkit-search-cancel-button,
  body.explore-v2 .ba-v2-search-sheet__host #universal-search::-webkit-search-decoration,
  body.explore-v2 .ba-v2-search-sheet__host #universal-search::-webkit-search-cancel-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none !important;
  }
  /* Tiny clear glyph only (no chip). */
  body.explore-v2 .ba-v2-search-sheet__host .nav-search-close {
    display: none !important;
    place-items: center !important;
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #4b5a5b !important;
    cursor: pointer;
    opacity: 0.7;
  }
  body.explore-v2 .ba-v2-search-sheet__host .nav-search-close .ba-icon,
  body.explore-v2 .ba-v2-search-sheet__host .nav-search-close svg {
    width: 14px !important;
    height: 14px !important;
  }
  body.explore-v2.m-search-open .ba-v2-search-sheet__host .nav-search-close:not([hidden]) {
    display: grid !important;
  }
  /* Mic only when empty; hide while typing or listening chrome would crowd. */
  body.explore-v2 .ba-v2-search-sheet__host .ba-v2-search-mic {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #4b5a5b !important;
    cursor: pointer;
    box-shadow: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
    z-index: 2 !important;
  }
  body.explore-v2.m-search-open .ba-v2-search-sheet__host .nav-search.has-query .ba-v2-search-mic:not(.is-listening):not(.is-transcribing) {
    display: none !important;
  }
  body.explore-v2 .ba-v2-search-sheet__host .ba-v2-search-mic:hover,
  body.explore-v2 .ba-v2-search-sheet__host .ba-v2-search-mic:active {
    color: #0b63f6 !important;
    background: #f4f1ea !important;
  }
  body.explore-v2 .ba-v2-search-sheet__host .ba-v2-search-mic.is-listening {
    color: #ffffff !important;
    background: #0b63f6 !important;
  }
  body.explore-v2 .ba-v2-search-sheet__host .ba-v2-search-mic.is-transcribing {
    color: #0b63f6 !important;
    background: #ece7dd !important;
    cursor: wait;
  }
  body.explore-v2 .ba-v2-search-sheet__host .ba-v2-search-mic:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
  body.explore-v2 .ba-v2-search-sheet__host .ba-v2-search-mic__ico,
  body.explore-v2 .ba-v2-search-sheet__host .ba-v2-search-mic .ba-icon {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    color: inherit !important;
  }
  /* Blue submit arrow: hide on mobile sheet. Keyboard Go / result tap submits. */
  body.explore-v2 .ba-v2-search-sheet__host .ba-v2-search-submit,
  body.explore-v2.m-search-open .ba-v2-search-sheet__host .ba-v2-search-submit {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
  /* Results: white card under the pill (same surface language as hero). */
  body.explore-v2 .ba-v2-search-sheet__host .search-results,
  body.explore-v2 .ba-v2-search-sheet__host #search-results {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    /* Cap height so results stay above the keyboard / thumb chrome. */
    max-height: min(42dvh, 320px) !important;
    margin-top: 0 !important;
    padding: 8px 6px !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    z-index: 1 !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 54px rgba(4, 24, 32, 0.2) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.explore-v2.m-search-open .ba-v2-search-sheet[data-keyboard="1"] .ba-v2-search-sheet__host .search-results,
  body.explore-v2.m-search-open .ba-v2-search-sheet[data-keyboard="1"] .ba-v2-search-sheet__host #search-results {
    /* Leave room above the keyboard; keep clear of the status bar via panel top. */
    max-height: min(36dvh, 260px) !important;
  }
  body.explore-v2 .ba-v2-search-sheet__host .search-results:not(.open),
  body.explore-v2 .ba-v2-search-sheet__host #search-results[hidden] {
    display: none !important;
  }
  /* Light-surface result typography (overrides dark-chrome --ba-ink). */
  body.explore-v2 .ba-v2-search-sheet__host .search-results button,
  body.explore-v2 .ba-v2-search-sheet__host #search-results button {
    color: #041820 !important;
    font: 600 16px/1.3 var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif) !important;
    padding: 14px 12px !important;
    border-radius: 14px !important;
    gap: 5px !important;
  }
  body.explore-v2 .ba-v2-search-sheet__host .search-results button:hover,
  body.explore-v2 .ba-v2-search-sheet__host .search-results button.active,
  body.explore-v2 .ba-v2-search-sheet__host #search-results button:hover,
  body.explore-v2 .ba-v2-search-sheet__host #search-results button.active {
    background: #f4f1ea !important;
  }
  body.explore-v2 .ba-v2-search-sheet__host .search-results .sr-type,
  body.explore-v2 .ba-v2-search-sheet__host #search-results .sr-type {
    color: #0b63f6 !important;
    font-size: 0.62rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin-bottom: 1px !important;
  }
  body.explore-v2 .ba-v2-search-sheet__host .search-results .sr-sub,
  body.explore-v2 .ba-v2-search-sheet__host #search-results .sr-sub {
    color: #4b5a5b !important;
    opacity: 1 !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    margin-top: 2px !important;
  }
  body.explore-v2 .ba-v2-search-sheet__host .search-results .sr-empty,
  body.explore-v2 .ba-v2-search-sheet__host #search-results .sr-empty {
    color: #4b5a5b !important;
    opacity: 1 !important;
    font-size: 0.875rem !important;
    padding: 14px 12px !important;
  }
  body.explore-v2.m-search-open .ba-wordmark,
  body.explore-v2.m-search-open .nav-divider,
  body.explore-v2.m-search-open .near,
  body.explore-v2.m-search-open .nav-right,
  body.explore-v2.m-search-open .wordmark {
    visibility: visible !important;
  }
  body.explore-v2.m-search-open .ba-mode-strip,
  body.explore-v2.m-search-open .mode-strip {
    display: none !important;
    visibility: hidden !important;
  }
  body.explore-v2:not(.v2-forecast-collapsed):has(.inspector.on:not(.collapsed)) .map-nav-view {
    display: flex !important;
  }
  /* Search mode always hides the thumb bar (beats inspector display:flex). */
  body.explore-v2.m-search-open:not(.v2-forecast-collapsed):has(.inspector.on:not(.collapsed)) .map-nav-view,
  body.explore-v2.m-search-open .map-nav-view {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.explore-v2 .map-nav-view .map-rail-btn,
  body.explore-v2 .map-nav-view #zloc,
  body.explore-v2 .map-nav-view #btn3d,
  body.explore-v2 .map-nav-view > #btn-chrome,
  body.explore-v2 .map-nav-view > #wx-basemap-cycle,
  body.explore-v2 #m-map-layers {
    width: var(--ev2-hit) !important;
    height: var(--ev2-hit) !important;
    min-width: var(--ev2-hit) !important;
    min-height: var(--ev2-hit) !important;
    border-radius: 14px !important;
  }

  /* Basemap cycle thumb only — #btn-chrome is Day/Night on the Plan rail. */
  body.explore-v2 .map-nav-view > #wx-basemap-cycle {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--x-muted) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    width: var(--ev2-hit) !important;
    height: var(--ev2-hit) !important;
    min-width: var(--ev2-hit) !important;
    min-height: var(--ev2-hit) !important;
  }
  /* Mode-state chips in the thumb row: no selection fill (`.on` is not selected). */
  body.explore-v2 .map-nav-view > #btn-chrome.on,
  body.explore-v2 .map-nav-view > #wx-basemap-cycle.on {
    background: transparent !important;
    color: rgba(238, 246, 248, 0.92) !important;
    box-shadow: none !important;
  }
  body.explore-v2 .map-nav-view > #btn-chrome::before,
  body.explore-v2 .map-nav-view > #btn-chrome::after,
  body.explore-v2 .map-nav-view > #wx-basemap-cycle::before,
  body.explore-v2 .map-nav-view > #wx-basemap-cycle::after {
    content: none !important;
    display: none !important;
    margin: 0 !important;
  }
  body.explore-v2 .map-nav-view > #btn-chrome .map-rail-icon,
  body.explore-v2 .map-nav-view > #wx-basemap-cycle .map-rail-icon {
    display: block !important;
    width: var(--ev2-icon) !important;
    height: var(--ev2-icon) !important;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
  }
  body.explore-v2 .map-nav-view > #wx-basemap-cycle .map-rail-icon path[fill] {
    stroke: none;
  }
  body.explore-v2 .map-nav-view > #btn-chrome .map-rail-glyph {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
  }
  body.explore-v2 .map-nav-view .map-rail-btn::after,
  body.explore-v2 .map-nav .map-rail-btn.on::after,
  body.explore-v2 .ba-v2-rail-more span {
    content: none !important;
    display: none !important;
  }
  /* Orphan / retired thumb controls — never show between 3D and Layers FAB.
     Keep #btn-chrome / #wx-basemap-cycle when reparented into .map-nav-view.
     Hide empty .style-toggle shell only (not the chrome button itself). */
  body.explore-v2 .map-nav-places,
  body.explore-v2 .map-nav-zoom,
  body.explore-v2 #zcompass,
  body.explore-v2 #btn-water-view,
  body.explore-v2 #btn-map-2d,
  body.explore-v2 #map-rail-clouds,
  body.explore-v2 .map-nav .style-toggle,
  body.explore-v2 .ba-v2-more-group,
  body.explore-v2 .map-tools > .m-map-search,
  body.explore-v2 .map-nav-view > button:empty:not(#zloc):not(#btn3d):not(#btn-chrome):not(#wx-basemap-cycle):not(#m-map-search) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  /* Plan/Nav Look owns camera; never unwrap legacy 2D/3D/Water into the thumb. */
  body.explore-v2 .map-view-modes,
  body.explore-v2 .map-view-modes #btn3d,
  body.explore-v2 #btn-map-2d,
  body.explore-v2 #btn-water-view {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  /* Day/Night is the lighting control — keep #btn-chrome out of the thumb. */
  body.explore-v2 .map-nav-view > #btn-chrome {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.explore-v2 .map-nav-view > #wx-basemap-cycle {
    display: grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
    width: var(--ev2-hit) !important;
    height: var(--ev2-hit) !important;
    min-width: var(--ev2-hit) !important;
    min-height: var(--ev2-hit) !important;
  }

  /* Layers sits in the thumb row with search, locate, and 3D. */
  body.explore-v2 #m-map-layers {
    display: grid !important;
    place-items: center !important;
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 1 !important;
    width: var(--ev2-hit) !important;
    height: var(--ev2-hit) !important;
    min-width: var(--ev2-hit) !important;
    min-height: var(--ev2-hit) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    /* Match Temp / Water active pills — never a sharp square. */
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: var(--x-text, #eef3f8) !important;
    font-size: 0 !important;
    pointer-events: auto !important;
  }
  body.explore-v2.mode-conditions.rain-scrub:not(.m-sheet) #m-map-layers,
  body.explore-v2.mode-conditions.clouds-scrub:not(.m-sheet) #m-map-layers,
  body.explore-v2.v2-player-open:not(.m-sheet) #m-map-layers,
  body.explore-v2.rain-scrub:not(.m-sheet) #m-map-layers,
  body.explore-v2.clouds-scrub:not(.m-sheet) #m-map-layers {
    bottom: calc(var(--status-h) + var(--ev2-thumb-bottom-gap, 12px)) !important;
    inset: auto 12px calc(var(--status-h) + var(--ev2-thumb-bottom-gap, 12px)) auto !important;
  }
  body.explore-v2.m-sheet #m-map-layers,
  body.explore-v2:has(.sheet.show) #m-map-layers {
    bottom: calc(var(--status-h) + var(--ev2-thumb-bottom-gap, 12px)) !important;
    inset: auto 12px calc(var(--status-h) + var(--ev2-thumb-bottom-gap, 12px)) auto !important;
    z-index: 81 !important;
  }
  body.explore-v2 #m-map-layers::before,
  body.explore-v2 #m-map-layers::after {
    content: none !important;
    display: none !important;
  }
  body.explore-v2 #m-map-layers .map-rail-icon {
    display: block;
    width: var(--ev2-icon);
    height: var(--ev2-icon);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
  }
  body.explore-v2.m-layers-open .map-tools #m-map-layers,
  body.explore-v2 .map-tools .map-nav-view > #m-map-layers.on {
    border-radius: 12px !important;
    color: #fff !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  /* Compact 3D / Water / 2D label — matches icon-sized controls in the thumb pill */
  body.explore-v2 .map-nav-view #btn3d {
    width: var(--ev2-hit) !important;
    min-width: var(--ev2-hit) !important;
    height: var(--ev2-hit) !important;
    padding: 0 !important;
    flex-direction: column !important;
    gap: 0 !important;
    background: transparent !important;
    border-radius: 12px !important;
  }
  body.explore-v2 #btn3d .map-rail-label {
    display: block !important;
    position: static !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  body.explore-v2 .map-tools #btn3d.on {
    color: #fff !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.explore-v2 #btn3d[data-map-view-mode="map"] {
    color: rgba(238, 246, 248, 0.72) !important;
    background: transparent !important;
  }
  body.explore-v2 #zloc .map-rail-icon {
    width: var(--ev2-icon) !important;
    height: var(--ev2-icon) !important;
  }

  body.explore-v2 #m-map-search {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  /* Header search stays hidden on phone; field is hosted in the search sheet. */
  body.explore-v2 .ba-nav-wrap .nav-search-wrap,
  body.explore-v2 .ba-nav-wrap--map-search .nav-search-wrap,
  body.explore-v2 .ba-nav-wrap--map-search > .ba-map-search > .nav-search-wrap {
    display: none !important;
  }
  body.explore-v2 .map-nav-view > .nav-search-wrap,
  body.explore-v2 .map-nav-view > #nav-search-wrap {
    display: none !important;
  }
  /* Don't hide wordmark — search lives in the overlay panel.
     Primary mode links stay hidden on mobile (DS). */
  body.explore-v2.m-search-open .ba-wordmark,
  body.explore-v2.m-search-open .nav-divider,
  body.explore-v2.m-search-open .near,
  body.explore-v2.m-search-open .nav-right,
  body.explore-v2.m-search-open .wordmark {
    visibility: visible !important;
  }
  body.explore-v2.m-search-open .ba-mode-strip,
  body.explore-v2.m-search-open .mode-strip {
    display: none !important;
    visibility: hidden !important;
  }

  /* Weather inspector → bottom sheet */
  body.explore-v2 .inspector,
  body.explore-v2 .inspector.view-now.on,
  body.explore-v2 .inspector.view-today.on,
  body.explore-v2 .inspector.view-week.on,
  body.explore-v2 .inspector.view-now.on.m-open,
  body.explore-v2 .inspector.view-today.on.m-open,
  body.explore-v2 .inspector.view-week.on.m-open,
  body.explore-v2 .inspector.on.m-open {
    top: auto !important;
    right: 8px !important;
    left: 8px !important;
    bottom: calc(
      var(--status-h) + var(--ev2-thumb-bottom-gap, 12px) + var(--ev2-thumb-row-h) + 22px
    ) !important;
    width: auto !important;
    height: auto !important;
    max-height: calc(
      100dvh - var(--status-h) - var(--ev2-thumb-bottom-gap, 12px) - var(--ev2-thumb-row-h) - var(--ev2-temp-chip-top, 88px) - 56px
    ) !important;
    overflow: hidden !important;
    max-width: calc(100vw - 16px) !important;
    border-radius: 24px !important;
    transform: none !important;
  }
  body.explore-v2 .inspector:not(.m-open),
  body.explore-v2 .inspector.on:not(.m-open),
  body.explore-v2 .inspector.view-now.on:not(.m-open),
  body.explore-v2 .inspector.view-today.on:not(.m-open),
  body.explore-v2 .inspector.view-week.on:not(.m-open),
  body.explore-v2 .inspector.collapsed {
    display: none !important;
  }
  body.explore-v2 .inspector.on.m-open,
  body.explore-v2 .inspector.view-now.on.m-open,
  body.explore-v2 .inspector.view-today.on.m-open,
  body.explore-v2 .inspector.view-week.on.m-open {
    display: flex !important;
  }
  body.explore-v2 .inspector.m-open .inspector-core {
    overflow-y: auto !important;
    min-height: 0 !important;
  }
  body.explore-v2 .inspector.view-now.m-open .insp-now {
    display: flex !important;
    flex-direction: column !important;
  }
  body.explore-v2 .inspector.view-now.m-open .v2-now-summary {
    flex: 0 0 auto !important;
    min-height: min-content !important;
    height: auto !important;
  }
  body.explore-v2 .inspector.view-now.m-open #wx,
  body.explore-v2 .inspector.view-now.m-open .wx-week,
  body.explore-v2 .inspector.view-today.m-open .insp-now,
  body.explore-v2 .inspector.view-today.m-open .wx-week,
  body.explore-v2 .inspector.view-week.m-open .insp-now,
  body.explore-v2 .inspector.view-week.m-open #wx,
  body.explore-v2.insp-view-today .inspector.m-open #insp-now,
  body.explore-v2.insp-view-week .inspector.m-open #insp-now {
    display: none !important;
  }
  body.explore-v2 .inspector.view-today.m-open #wx {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: auto !important;
  }
  body.explore-v2 .inspector.view-week.m-open .wx-week,
  body.explore-v2.insp-view-week .inspector.m-open .wx-week {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: auto !important;
  }
  body.explore-v2 .inspector.m-open .ba-v2-cond-cap {
    display: block !important;
    margin: 16px 0 8px;
    color: var(--x-text, #eef3f8);
    font: 600 13px/1.2 var(--ba-font, "Helvetica Neue", Arial, sans-serif);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  body.explore-v2 .inspector.m-open .wx-metrics .ba-v2-cond-cap {
    grid-column: 1 / -1;
  }
  body.explore-v2 .inspector.m-open .v2-today-hourly-head {
    display: none !important;
  }
  body.explore-v2 .inspector.m-open .ba-v2-alerts-empty:not([hidden]) {
    display: block !important;
    margin: 0 0 12px;
    color: rgba(238, 243, 248, 0.72);
    font: 400 14px/1.4 var(--ba-font, "Helvetica Neue", Arial, sans-serif);
  }
  body.explore-v2 .inspector.m-open .wx-metric[hidden],
  body.explore-v2 .inspector.m-open .inq[hidden],
  body.explore-v2 .inspector.m-open .ba-v2-cond-cap[hidden] {
    display: none !important;
  }
  body.explore-v2.m-sheet.rain-scrub .inspector.on.m-open,
  body.explore-v2.m-sheet.clouds-scrub .inspector.on.m-open,
  body.explore-v2.m-sheet.v2-player-open .inspector.on.m-open,
  body.explore-v2.mode-conditions.m-sheet.rain-scrub .inspector.on.m-open,
  body.explore-v2.mode-conditions.m-sheet.clouds-scrub .inspector.on.m-open,
  body.explore-v2.mode-conditions.m-sheet.v2-player-open .inspector.on.m-open {
    bottom: calc(var(--status-h) + var(--ev2-thumb-bottom-gap, 12px) + var(--ev2-thumb-row-h) + 66px + 10px) !important;
    max-height: calc(100dvh - var(--status-h) - var(--ev2-thumb-bottom-gap, 12px) - var(--ev2-thumb-row-h) - 66px - 88px) !important;
  }

  body.explore-v2 .inspector.m-open .inspector-shell {
    display: flex !important;
    flex-direction: column !important;
    border-radius: 24px !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.explore-v2 .inspector.m-open .inspector-core {
    order: 1 !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 16px 16px 16px !important;
    box-sizing: border-box !important;
  }
  body.explore-v2 .inspector.m-open .wx-week {
    order: 2 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
  }
  /* Week owns the body — collapse empty core so tabs stay tappable. */
  body.explore-v2.insp-view-week .inspector.m-open .inspector-core,
  body.explore-v2 .inspector.view-week.m-open .inspector-core {
    display: none !important;
    flex: 0 0 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
  /* Now / Today / 7-Day sit at the bottom of the weather sheet */
  body.explore-v2 .inspector.m-open .m-insp-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    order: 3 !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    gap: 0 !important;
    min-height: 60px !important;
    padding: 10px 12px 12px !important;
    border-bottom: 0 !important;
    border-top: 1px solid var(--x-line) !important;
    position: relative !important;
    z-index: 5 !important;
    background: inherit !important;
    pointer-events: auto !important;
  }
  body.explore-v2 .m-insp-tabs .mit-seg {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 3px !important;
    border-radius: 14px !important;
    background: rgba(4, 24, 32, 0.45) !important;
    border: 1px solid var(--x-line) !important;
  }
  body.explore-v2 .m-insp-tabs .mit-tab {
    flex: 1 1 0 !important;
    min-height: 36px !important;
    border-radius: 10px !important;
    color: rgba(238, 243, 248, 0.78) !important;
    background: transparent !important;
    font: 600 13px/1 var(--ba-font, "Helvetica Neue", Arial, sans-serif) !important;
    pointer-events: auto !important;
  }
  body.explore-v2 .m-insp-tabs .mit-tab.on {
    background: rgba(11, 99, 246, 0.28) !important;
    color: #fff !important;
    box-shadow: none !important;
  }
  body.explore-v2 .m-insp-tabs .mit-tab,
  body.explore-v2 .m-insp-tabs .mit-close {
    align-self: center !important;
    min-height: 36px !important;
  }
  /* Close lives inside the tab glass, not as a separate outer chip. */
  body.explore-v2 .m-insp-tabs .mit-close {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(238, 243, 248, 0.78) !important;
  }
  body.explore-v2 .inspector.m-open .insp-seg {
    display: none !important;
  }
  body.explore-v2 .inspector.m-open .inspector-head {
    display: none !important;
  }

  /* Place card fills the phone. Close stays on the photo, always tappable. */
  body.explore-v2 .sheet.show,
  body.explore-v2.m-layers-open .sheet.show {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    border-radius: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 200 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  /* Hide header chrome while the place sheet owns the screen (no blank ghost bar). */
  body.explore-v2:has(.sheet.show) .ba-nav-wrap,
  body.explore-v2:has(.sheet.show) .ba-nav-wrap--dark,
  body.explore-v2:has(.sheet.show) .ba-nav-wrap::before,
  body.explore-v2:has(.sheet.show) .ba-nav-wrap--dark::before,
  body.explore-v2:has(.sheet.show) .ba-nav-wrap * {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.explore-v2 .sheet.show .cta {
    margin-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    flex-shrink: 0 !important;
  }
  body.explore-v2 .sheet.show .bd {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding-bottom: 12px !important;
  }
  body.explore-v2 .sheet.show .sheet-disclaimer {
    margin-top: auto !important;
    padding-top: 16px !important;
  }
  body.explore-v2 .sheet.show .ph {
    position: relative !important;
    height: 220px !important;
  }
  body.explore-v2 .sheet.show .ph-actions {
    position: fixed !important;
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    right: 12px !important;
    left: auto !important;
    z-index: 220 !important;
    display: flex !important;
    gap: 8px !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  body.explore-v2 .sheet.show .ph-actions .heart,
  body.explore-v2 .sheet.show .ph-actions .close,
  body.explore-v2 .sheet.show .close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 999px !important;
    background: #041820 !important;
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Places category rail at bottom */
  body.explore-v2.mode-places .map-nav-places {
    display: flex !important;
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(var(--status-h) + 8px) !important;
    top: auto !important;
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: 72 !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  body.explore-v2.mode-places:has(.sheet.show) .map-nav-places {
    display: none !important;
  }
  body.explore-v2.mode-places .map-nav-places .catbar,
  body.explore-v2.mode-places .map-nav-places .explore-bar {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    overflow-x: auto !important;
    border: 1px solid var(--x-line) !important;
    border-radius: 22px !important;
    background: var(--x-glass) !important;
    box-shadow: var(--x-shadow) !important;
    -webkit-backdrop-filter: var(--x-glass-blur) !important;
    backdrop-filter: var(--x-glass-blur) !important;
    padding: 10px 6px 8px !important;
  }

  /* Tall shared sheet: fill from under the header down to the thumb row. */
  body.explore-v2 .inspector.on.m-open,
  body.explore-v2 .inspector.view-now.on.m-open,
  body.explore-v2 .inspector.view-today.on.m-open,
  body.explore-v2 .inspector.view-week.on.m-open,
  body.explore-v2.insp-view-now .inspector.m-open,
  body.explore-v2.insp-view-today .inspector.m-open,
  body.explore-v2.insp-view-week .inspector.m-open,
  body.explore-v2.insp-view-week .inspector.m-open.view-week {
    top: calc(
      var(--ev2-chrome-inset, 8px) + env(safe-area-inset-top, 0px) + var(--ev2-nav-h, 48px) + 4px
    ) !important;
    right: 8px !important;
    left: 8px !important;
    bottom: calc(var(--status-h) + var(--ev2-thumb-bottom-gap, 12px) + var(--ev2-thumb-row-h) + 8px) !important;
    height: auto !important;
    max-height: none !important;
    min-height: calc(
      100dvh - (var(--ev2-chrome-inset, 8px) + env(safe-area-inset-top, 0px) + var(--ev2-nav-h, 48px) + 4px) -
        (var(--status-h) + var(--ev2-thumb-bottom-gap, 12px) + var(--ev2-thumb-row-h) + 8px)
    ) !important;
  }
  body.explore-v2 .inspector.m-open .inspector-shell {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
  }
  body.explore-v2 .inspector.m-open .inspector-core {
    flex: 1 1 auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  /* 7-Day: stable horizontal day rail (scroll inside layout, not the whole sheet) */
  body.explore-v2.insp-view-week .inspector.m-open .wx-week,
  body.explore-v2 .inspector.view-week.on.m-open .wx-week {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 16px 16px 12px !important;
    box-sizing: border-box !important;
  }
  body.explore-v2.insp-view-week .inspector.m-open .wx-week-inner,
  body.explore-v2 .inspector.view-week.on.m-open .wx-week-inner {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    min-height: min-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    /* Visible so Marine below the day rail can extend and .wx-week scrolls. */
    overflow: visible !important;
  }
  body.explore-v2.insp-view-week .inspector.m-open .wx-week-list,
  body.explore-v2 .inspector.view-week.on.m-open .wx-week-list {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  body.explore-v2.insp-view-week .inspector.m-open .wx-week-layout,
  body.explore-v2 .inspector.view-week.on.m-open .wx-week-layout {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    flex: 0 0 208px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 208px !important;
    min-height: 208px !important;
    max-height: 208px !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    overscroll-behavior-y: none !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
  }
  body.explore-v2.insp-view-week .inspector.m-open .wx-week-columns,
  body.explore-v2 .inspector.view-week.on.m-open .wx-week-columns {
    display: flex !important;
    flex-direction: row !important;
    flex: 6 1 calc(6 * var(--ev2-week-day-min-w)) !important;
    width: auto !important;
    min-width: calc(6 * var(--ev2-week-day-min-w)) !important;
    gap: 0 !important;
  }
  body.explore-v2.insp-view-week .inspector.m-open .wx-week-sidebar,
  body.explore-v2 .inspector.view-week.on.m-open .wx-week-sidebar,
  body.explore-v2.insp-view-week .inspector.m-open .wx-week-col,
  body.explore-v2 .inspector.view-week.on.m-open .wx-week-col {
    flex: 1 1 var(--ev2-week-day-min-w) !important;
    width: auto !important;
    min-width: var(--ev2-week-day-min-w) !important;
    max-width: none !important;
    height: 208px !important;
    min-height: 208px !important;
    max-height: 208px !important;
    scroll-snap-align: start !important;
  }
  body.explore-v2.insp-view-week .inspector.m-open .wx-week-sidebar,
  body.explore-v2 .inspector.view-week.on.m-open .wx-week-sidebar {
    position: relative !important;
    left: auto !important;
    z-index: auto !important;
    background: transparent !important;
  }
  body.explore-v2.insp-view-week .inspector.m-open .wx-week-sidebar.is-selected,
  body.explore-v2 .inspector.view-week.on.m-open .wx-week-sidebar.is-selected {
    background: rgba(59, 140, 255, 0.12) !important;
    box-shadow: inset 0 0 0 1.5px var(--x-blue, #0B63F6) !important;
  }
  body.explore-v2.insp-view-week .inspector.m-open .wx-week-sidebar .sky,
  body.explore-v2 .inspector.view-week.on.m-open .wx-week-sidebar .sky,
  body.explore-v2.insp-view-week .inspector.m-open .wx-week-col .sky,
  body.explore-v2 .inspector.view-week.on.m-open .wx-week-col .sky {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body.explore-v2 .inspector.view-week.on .wx-hour-chart .hour-head,
  body.explore-v2 .inspector.view-week.on .wx-hour-chart .hour-head-sub,
  body.explore-v2 .inspector.view-week.on .wx-hour-chart .hour-cap {
    margin-bottom: 12px !important;
  }
  body.explore-v2 .wx-model-compare-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  body.explore-v2 .wx-model-compare-summary {
    text-align: left !important;
    max-width: none !important;
  }
  /* Keep name|track + facts stack; never drop to a 2-col auto-flow that orphan tracks. */
  body.explore-v2 .wx-model-compare .model-compare-row {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    grid-template-areas:
      "name track"
      "facts facts" !important;
    gap: 6px 10px !important;
    align-items: center !important;
  }
  body.explore-v2 .wx-model-compare .model-compare-name {
    grid-area: name !important;
  }
  body.explore-v2 .wx-model-compare .model-compare-track {
    grid-area: track !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  body.explore-v2 .wx-model-compare .model-compare-facts {
    grid-area: facts !important;
    grid-column: auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    text-align: left !important;
  }
  body.explore-v2 .wx-model-compare .model-compare-axis {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 8px 10px !important;
  }
  body.explore-v2 .wx-model-compare .model-compare-axis > span:not(.ticks) {
    display: none !important;
  }
  body.explore-v2 .wx-model-compare .model-compare-axis .ticks {
    grid-column: 2 !important;
  }
  body.explore-v2 .wx-hour-chart .hour-head {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body.explore-v2 .wx-hour-chart .hour-best {
    text-align: left !important;
  }

  body.explore-v2 .wx-tide .tide-events {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px 16px !important;
    padding: 0 2px !important;
  }
  body.explore-v2 .v2-today-ready .wx-tide .tide-ev,
  body.explore-v2 .wx-tide .tide-ev {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    min-width: 0 !important;
  }
  body.explore-v2 .wx-tide .tide-ev .tm,
  body.explore-v2 .wx-tide .tide-ev .hh {
    white-space: nowrap !important;
  }

  body.explore-v2 .v2-today-hourly-rail {
    overflow-x: auto !important;
  }
  body.explore-v2 .v2-hour {
    flex: 0 0 76px !important;
    width: 76px !important;
    min-width: 76px !important;
  }

  body.explore-v2 .v2-tide-plot-wrap {
    position: relative !important;
    overflow: visible !important;
  }
  body.explore-v2 .v2-tide-hour-lbl {
    position: absolute !important;
    top: auto !important;
    bottom: 2px !important;
  }

  body.explore-v2 .m-insp-tabs .ba-safety-data-btn,
  body.explore-v2 .ba-safety-data-btn--in-tabs {
    /* Legacy parking into forecast tabs is disabled; keep rules inert. */
    display: none !important;
  }

  /* Map-level info sits in the thumb bar on phone (see installMobileInfoThumb).
     Keep a fixed fallback only before JS reparents, then suppress the orphan. */
  body.explore-v2 .ba-safety-data-btn:not(.ba-safety-data-btn--in-tabs):not(.ba-safety-data-btn--in-bar) {
    position: fixed !important;
    left: 8px !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(
      var(--status-h, 12px) + var(--ev2-thumb-row-h, 48px) + var(--ev2-cond-strip-h, 44px) + 28px
    ) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    z-index: 40 !important;
    border-radius: 14px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.explore-v2 .ba-safety-data-btn.ba-safety-data-btn--in-bar {
    position: static !important;
    display: inline-flex !important;
  }

  /* Mapbox logo + compact attrib under the dock (expand on tap for OSM/Maxar). */
  body.explore-v2 .mapboxgl-ctrl-bottom-left {
    left: 8px !important;
    right: auto !important;
    bottom: max(4px, env(safe-area-inset-bottom, 0px)) !important;
    max-width: none !important;
    z-index: 60 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
  }
  body.explore-v2 .mapboxgl-ctrl-bottom-right {
    left: auto !important;
    right: 8px !important;
    bottom: max(4px, env(safe-area-inset-bottom, 0px)) !important;
    max-width: none !important;
    z-index: 60 !important;
  }
  body.explore-v2 .mapboxgl-ctrl-attrib {
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: min(52vw, 200px) !important;
    font-size: 9px !important;
    line-height: 12px !important;
  }
  /* Required Mapbox credit stays available via the compact "i" control. */
  body.explore-v2 .mapboxgl-ctrl-attrib-button {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    opacity: 0.72;
  }
  body.explore-v2 .mapboxgl-ctrl-attrib.mapboxgl-compact:not(.mapboxgl-compact-show) .mapboxgl-ctrl-attrib-inner {
    display: none !important;
  }
  body.explore-v2 .mapboxgl-ctrl-attrib.mapboxgl-compact.mapboxgl-compact-show {
    background: rgba(4, 24, 32, 0.72) !important;
    border-radius: 8px !important;
    padding: 4px 6px !important;
    max-width: min(70vw, 240px) !important;
  }
  body.explore-v2 .mapboxgl-ctrl-attrib.mapboxgl-compact.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner {
    display: block !important;
    font-size: 9px !important;
    line-height: 12px !important;
    color: rgba(238, 243, 248, 0.72) !important;
    white-space: normal !important;
  }
  body.explore-v2 .mapboxgl-ctrl-attrib a {
    color: rgba(238, 243, 248, 0.84) !important;
  }
  body.explore-v2 .mapboxgl-ctrl-logo {
    opacity: 0.7;
    margin: 0 !important;
  }

  body.explore-v2 .ba-safety-data-btn--in-tabs .ba-safety-data-label {
    display: none !important;
  }

  /* Keep thumb-bar Safety visible while forecast/temp sheet is open. */
  body.explore-v2:has(.inspector.on.m-open) .map-nav-view > .ba-safety-data-btn,
  body.explore-v2:has(.inspector.on.m-open) .ba-safety-data-btn.ba-safety-data-btn--in-bar {
    display: inline-flex !important;
  }
  body.explore-v2:has(.inspector.on.m-open) .ba-safety-data-btn:not(.ba-safety-data-btn--in-bar):not(.map-nav-view > .ba-safety-data-btn) {
    display: none !important;
  }

  body.explore-v2.nav-active .nav-hud {
    top: calc(
      var(--ev2-chrome-inset, 8px) + env(safe-area-inset-top, 0px) + var(--ev2-nav-h, 48px) + 8px
    ) !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    height: auto !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 0 !important;
    pointer-events: none !important;
  }
  body.explore-v2.nav-active .nav-hud > * {
    flex-shrink: 0 !important;
    pointer-events: auto !important;
  }
  body.explore-v2.nav-active .nav-hud-bottom {
    margin-top: auto !important;
  }
  body.explore-v2.nav-active .nav-arrive,
  body.explore-v2.nav-active .nav-safety,
  body.explore-v2.nav-active .nav-panel,
  body.explore-v2.nav-active .nav-float,
  body.explore-v2.nav-active .nav-hud-top,
  body.explore-v2.nav-active .nav-hud-bottom {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
  }
  body.explore-v2.nav-active .nav-hud-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    gap: 8px 10px !important;
    padding: 14px 16px !important;
  }
  body.explore-v2.nav-active .nav-hud-dest {
    grid-column: 1 !important;
    min-width: 0 !important;
  }
  body.explore-v2.nav-active .nav-hud-stop {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
  }
  body.explore-v2.nav-active .nav-hud-metrics {
    grid-column: 1 !important;
    gap: 12px !important;
  }
  body.explore-v2.nav-active .nav-hud-dest strong,
  body.explore-v2.nav-active .nav-arrive strong {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
    font-size: 15px !important;
  }
  body.explore-v2.nav-planning .nav-plan-end {
    min-height: 68px !important;
    padding: 10px 12px !important;
    gap: 4px !important;
    justify-content: center !important;
  }
  body.explore-v2.nav-planning .nav-plan-end-label {
    font: 600 10px/16px var(--f, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif) !important;
    letter-spacing: 0.1em !important;
  }
  body.explore-v2.nav-planning .nav-plan-end strong {
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: unset !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    line-height: 20px !important;
    word-break: break-word !important;
    font-size: 15px !important;
  }
  body.explore-v2.nav-active .nav-hud-label {
    font-size: 10px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.08em !important;
  }
  body.explore-v2.nav-active .nav-hud-metric strong {
    font-size: 14px !important;
  }
  body.explore-v2.nav-active .nav-safety,
  body.explore-v2.nav-active .nav-panel-note,
  body.explore-v2 .nav-perm > p {
    font-size: 13px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
  }
  body.explore-v2.nav-planning .nav-plan-note {
    font-size: 15px !important;
    line-height: 24px !important;
    white-space: normal !important;
  }
  body.explore-v2.nav-active .nav-safety {
    padding: 12px 14px !important;
    max-height: 28vh !important;
    overflow: auto !important;
  }
  body.explore-v2.nav-active .nav-safety button,
  body.explore-v2.nav-active .nav-arrive button,
  body.explore-v2.nav-active .nav-panel-close {
    min-height: 40px !important;
    margin-top: 10px !important;
  }
  body.explore-v2.nav-active .nav-panel-close {
    margin-top: 0 !important;
    width: 40px !important;
    height: 40px !important;
  }
  /* One coherent control row — never orphan Nearby on a second line. */
  body.explore-v2.nav-active .nav-float {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.explore-v2.nav-active .nav-float::-webkit-scrollbar {
    display: none;
  }
  body.explore-v2.nav-active .nav-float-btn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(4, 24, 32, 0.82) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(4, 24, 32, 0.28) !important;
    opacity: 1 !important;
  }
  body.explore-v2.nav-active .nav-float-btn.on {
    background: #0b63f6 !important;
    border-color: #0b63f6 !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(11, 99, 246, 0.35) !important;
  }
  body.explore-v2.nav-active .nav-float-btn[hidden] {
    display: none !important;
  }
  body.explore-v2.nav-active .nav-keep-open {
    margin: 0 !important;
    padding: 10px 14px !important;
    border-radius: 999px !important;
    border: 1px solid #f2a900 !important;
    background: #f2a900 !important;
    color: #041820 !important;
    font: 600 12px/1.35 var(--f, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif) !important;
    text-align: center !important;
    box-shadow: 0 8px 22px rgba(4, 24, 32, 0.22) !important;
  }
  body.explore-v2.nav-active .nav-keep-open--warn {
    border-color: #ef6548 !important;
    background: #ef6548 !important;
    color: #fff !important;
  }
  body.explore-v2.nav-active .nav-hud-bottom {
    padding: 10px 14px !important;
  }
  body.explore-v2.nav-active .nav-hud-bottom .nav-hud-metric strong {
    font-size: 15px !important;
  }
  /* Arrival: clean bottom card; hide competing panels. */
  body.explore-v2.nav-active .nav-arrive {
    margin-top: auto !important;
    padding: 22px 20px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    text-align: center !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
  }
  body.explore-v2.nav-active .nav-arrive strong {
    font-size: 16px !important;
    line-height: 1.35 !important;
    margin: 0 0 14px !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  body.explore-v2.nav-active .nav-arrive button {
    width: 100% !important;
    min-height: 44px !important;
    margin-top: 0 !important;
    border-radius: 999px !important;
    background: #0b63f6 !important;
    color: #fff !important;
  }
  body.explore-v2.nav-active.nav-arrived .nav-hud-bottom,
  body.explore-v2.nav-active.nav-arrived .nav-safety,
  body.explore-v2.nav-active.nav-arrived .nav-float,
  body.explore-v2.nav-active.nav-arrived .nav-panel,
  body.explore-v2.nav-active:has(#nav-arrive:not([hidden])) .nav-hud-bottom,
  body.explore-v2.nav-active:has(#nav-arrive:not([hidden])) .nav-safety,
  body.explore-v2.nav-active:has(#nav-arrive:not([hidden])) .nav-float,
  body.explore-v2.nav-active:has(#nav-arrive:not([hidden])) .nav-panel {
    display: none !important;
  }
  body.explore-v2.nav-active:has(#nav-arrive:not([hidden])) .nav-arrive {
    display: block !important;
  }
  body.explore-v2 .nav-perm {
    width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 48px) !important;
    overflow: auto !important;
    padding: 20px 16px 16px !important;
    box-sizing: border-box !important;
  }
  body.explore-v2 .nav-perm-acts,
  body.explore-v2.nav-planning .nav-plan-acts {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body.explore-v2 .nav-perm-primary,
  body.explore-v2 .nav-perm-ghost,
  body.explore-v2.nav-planning .nav-plan-acts .nav-plan-ghost,
  body.explore-v2.nav-planning button.nav-plan-primary {
    width: 100% !important;
    flex: none !important;
    min-height: 44px !important;
  }
  body.explore-v2.nav-active .water-view-chip,
  body.explore-v2.nav-planning .water-view-chip {
    display: none !important;
  }
  body.explore-v2.nav-active .nav-safety { order: 2; }
  body.explore-v2.nav-active .nav-arrive { order: 5; }
  body.explore-v2.nav-active .nav-hud-bottom {
    order: 4;
    margin-top: auto !important;
  }
  body.explore-v2.nav-active .nav-float { order: 1; }
  body.explore-v2.nav-active .nav-hud-top { order: 0; }
  body.explore-v2.nav-active .nav-safety button {
    display: inline-flex;
    margin-top: 10px;
  }
  body.explore-v2.nav-active .ba-safety-data-btn,
  body.explore-v2.nav-active .ev2-legal {
    display: none !important;
  }

  body.explore-v2.m-layers-open .wx-field-toggle {
    padding-bottom: 36px !important;
    scroll-padding-bottom: 36px;
  }

  /* Thumb bar: Weather | Search | View | Plan/Nav | Layer.
     Info (i) lives in the top nav on phone. */
  body.explore-v2 .map-nav-view > #ba-v2-glance-toggle { order: 1 !important; }
  body.explore-v2 .map-nav-view > #ba-explore-search,
  body.explore-v2 .map-nav-view > #m-map-search { order: 2 !important; }
  body.explore-v2 .map-nav-view > #ba-explore-look { order: 3 !important; }
  body.explore-v2 .map-nav-view > #ba-explore-mode-toggle { order: 4 !important; }
  body.explore-v2 .map-nav-view > #ba-explore-layers,
  body.explore-v2 .map-nav-view > #m-map-layers { order: 5 !important; }
  /* Keep secondary chrome mounted but out of the five-slot thumb.
     Same hide list in Plan and Navigate so mode chrome never jumps to a
     right-rail capsule on phone. */
  body.explore-v2 .map-nav-view > #ba-explore-light,
  body.explore-v2 .map-nav-view > #ba-explore-sky,
  body.explore-v2 .map-nav-view > #zloc,
  body.explore-v2 .map-nav-view > .map-view-modes,
  body.explore-v2 .map-nav-view > #btn3d,
  body.explore-v2 .map-nav-view > #m-map-search,
  body.explore-v2 .map-nav-view > #m-map-layers,
  body.explore-v2 .map-nav-view > #ba-safety-data-btn,
  body.explore-v2 .map-nav-view > .ba-safety-data-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  /* Shared bottom-dock slots (stable across Plan ↔ Navigate). */
  body.explore-v2 .map-nav-view > #ba-explore-look,
  body.explore-v2 .map-nav-view > #ba-explore-mode-toggle,
  body.explore-v2 .map-nav-view > #ba-explore-layers {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    gap: 2px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  /* Weather + Search fill the left thumb slots on Plan and Navigate. */
  body.explore-v2 .map-nav-view > #ba-v2-glance-toggle,
  body.explore-v2 .map-nav-view > #ba-explore-search {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    gap: 2px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  body.explore-v2 .map-nav-view > #ba-v2-glance-toggle .ba-v2-glance-toggle-temp {
    display: none !important;
  }
  body.explore-v2 .map-nav-view > #ba-v2-glance-toggle .map-rail-label {
    display: block !important;
  }
  /* One icon + label metric for every thumb cell (Plan and Navigate). */
  body.explore-v2 .map-nav-view > #ba-v2-glance-toggle .ba-v2-glance-toggle-ico,
  body.explore-v2 .map-nav-view > #ba-v2-glance-toggle .ba-v2-glance-toggle-ico svg,
  body.explore-v2 .map-nav-view > #ba-v2-glance-toggle .ba-v2-glance-toggle-ico .wx-sky-svg,
  body.explore-v2 .map-nav-view > #ba-v2-glance-toggle .ba-v2-glance-toggle-ico .map-rail-icon,
  body.explore-v2 .map-nav-view > #ba-v2-glance-toggle .ba-v2-glance-toggle-ico .ba-v2-glance-fallback,
  body.explore-v2 .map-nav-view > #ba-explore-search .map-rail-icon,
  body.explore-v2 .map-nav-view > #ba-explore-look .map-rail-icon,
  body.explore-v2 .map-nav-view > #ba-explore-mode-toggle .map-rail-icon,
  body.explore-v2 .map-nav-view > #ba-explore-layers .map-rail-icon {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
  }
  body.explore-v2 .map-nav-view > #ba-v2-glance-toggle .map-rail-label,
  body.explore-v2 .map-nav-view > #ba-explore-search .map-rail-label,
  body.explore-v2 .map-nav-view > #ba-explore-look .map-rail-label,
  body.explore-v2 .map-nav-view > #ba-explore-mode-toggle .map-rail-label,
  body.explore-v2 .map-nav-view > #ba-explore-layers .map-rail-label {
    display: block !important;
    font-size: 10px !important;
    font-weight: 650 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.1 !important;
    text-transform: none !important;
  }
  /* Navigate keeps the same Weather | Search | View | Nav | Layer rail as Plan. */
  body.explore-v2 .map-nav-view > #nav-search-wrap,
  body.explore-v2 .map-nav-view > .nav-search-wrap {
    display: none !important;
  }
  /* Legacy #m-map-search: keep collapsed. Thumb Search is #ba-explore-search. */
  body.explore-v2 #m-map-search,
  body.explore-v2 .map-nav-view > #m-map-search {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    flex: 0 0 0 !important;
  }

  body.explore-v2 .timeline-dock {
    position: relative !important;
  }
  body.explore-v2 .ba-v2-player-close {
    display: none;
  }
  /* Inside .scrubber (same pill as Play), trailing the track body. */
  body.explore-v2.rain-scrub .ba-v2-player-close,
  body.explore-v2.clouds-scrub .ba-v2-player-close,
  body.explore-v2.v2-player-open .ba-v2-player-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    align-self: center;
    position: static !important;
    top: auto !important;
    right: auto !important;
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    border-radius: 50% !important;
    background: var(--x-blue) !important;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: #eef3f8;
    font: 500 22px/1 var(--ba-font, "Helvetica Neue", Arial, sans-serif);
    pointer-events: auto !important;
    z-index: 4;
  }

  /* Phone forecast is the tall sheet only. The compact glance (temp / wind /
     waves above Now · Today · 7D) is a second mode and must not appear. */
  body.explore-v2 .ba-v2-forecast-card,
  body.explore-v2.v2-glance-open .ba-v2-forecast-card,
  body.explore-v2:has(.inspector.collapsed) .ba-v2-forecast-card,
  body.explore-v2.v2-forecast-collapsed .ba-v2-forecast-card,
  body.explore-v2 .ba-v2-glance-line {
    display: none !important;
  }
  body.explore-v2 .m-insp-tabs .mit-close {
    pointer-events: auto !important;
    z-index: 3 !important;
    position: relative !important;
  }
}

@media (max-width: 520px) {
  /* Keep mark-only lockup from the ≤900 block (do not restore full wordmark). */
  body.explore-v2 .ba-wordmark {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
  }
  /* Mode strip already display:none ≤900 — keep it hidden on tiny phones. */
  body.explore-v2 .ba-mode-strip {
    display: none !important;
  }
  /* Header search collapses on tiny viewports. Thumb-bar Search opens the panel. */
  body.explore-v2:not(.m-search-open):not(.v2-mobile-search-inline) .ba-nav .nav-search-wrap {
    flex: 0 0 42px !important;
    width: 42px !important;
    max-width: 42px !important;
  }

  body.explore-v2:not(.m-search-open):not(.v2-mobile-search-inline) .ba-nav .nav-search {
    width: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
  }

  body.explore-v2:not(.m-search-open):not(.v2-mobile-search-inline) .ba-nav .nav-search input,
  body.explore-v2:not(.m-search-open):not(.v2-mobile-search-inline) .ba-nav .nav-search-close,
  body.explore-v2:not(.m-search-open):not(.v2-mobile-search-inline) .ba-nav .ba-v2-search-mic,
  body.explore-v2:not(.m-search-open):not(.v2-mobile-search-inline) .ba-nav .ba-v2-search-submit {
    display: none !important;
  }

  body.explore-v2 #m-map-search,
  body.explore-v2 .map-nav-view > #m-map-search {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.explore-v2 .ba-v2-glance-details {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    padding: 0 4px 0 8px !important;
    white-space: nowrap !important;
  }
  body.explore-v2 .ba-v2-player-close {
    display: none;
  }
  body.explore-v2.rain-scrub .ba-v2-player-close,
  body.explore-v2.clouds-scrub .ba-v2-player-close,
  body.explore-v2.v2-player-open .ba-v2-player-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    align-self: center;
    position: static !important;
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    border-radius: 50% !important;
    background: var(--x-blue) !important;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: #eef3f8;
    font: 500 22px/1 var(--ba-font, "Helvetica Neue", Arial, sans-serif);
    pointer-events: auto !important;
  }

  body.explore-v2 .map-nav-view > .nav-search-wrap,
  body.explore-v2 .map-nav-view > #nav-search-wrap {
    display: none !important;
  }

  body.explore-v2 .wx-field-toggle > button,
  body.explore-v2 .wx-field-toggle .ba-v2-layer-section > button,
  body.explore-v2 .wx-field-toggle .wx-sat-pair > button,
  body.explore-v2 .wx-field-toggle .ba-v2-layer-play {
    min-width: 0;
    padding: 0 5px !important;
  }

  /* Keep the player aligned with the bottom bar; clear the layers stack when open. */
  body.explore-v2.rain-scrub .data-dock,
  body.explore-v2.clouds-scrub .data-dock,
  body.explore-v2.v2-player-open .data-dock,
  body.explore-v2.rain-scrub:has(.inspector.on) .data-dock,
  body.explore-v2.clouds-scrub:has(.inspector.on) .data-dock,
  body.explore-v2.v2-player-open:has(.inspector.on) .data-dock {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
  }
  body.explore-v2.m-layers-open.rain-scrub .data-dock,
  body.explore-v2.m-layers-open.clouds-scrub .data-dock,
  body.explore-v2.m-layers-open.v2-player-open .data-dock,
  body.explore-v2.m-layers-open.rain-scrub:has(.inspector.on) .data-dock,
  body.explore-v2.m-layers-open.clouds-scrub:has(.inspector.on) .data-dock,
  body.explore-v2.m-layers-open.v2-player-open:has(.inspector.on) .data-dock {
    right: calc(12px + var(--ev2-layer-stack-w, 56px) + 16px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.explore-v2 *,
  body.explore-v2 *::before,
  body.explore-v2 *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/*
 * Map attribution must stay readable at every viewport (desktop).
 * Logo stays bottom-left; attribution sits beside it (not under the right rail /
 * compass / Privacy·Terms). Mobile overrides live in the ≤900px block above.
 */
@media (min-width: 901px) {
  body.explore-v2 .mapboxgl-ctrl-bottom-left {
    left: 10px !important;
    right: auto !important;
    bottom: calc(var(--status-h, 28px) + 4px) !important;
    z-index: 5 !important;
    max-width: none !important;
    pointer-events: auto !important;
  }
  body.explore-v2 .mapboxgl-ctrl-bottom-right {
    /* Clear the Mapbox wordmark (~88px) so attrib never sits under the logo. */
    left: 98px !important;
    right: auto !important;
    bottom: calc(var(--status-h, 28px) + 4px) !important;
    z-index: 5 !important;
    /* Leave room for legal links + right rail + chrome gutter. */
    max-width: min(
      52vw,
      calc(100vw - var(--ev2-chrome-side, 28px) - var(--ev2-rail-w, 56px) - 220px)
    ) !important;
    pointer-events: auto !important;
  }
  body.explore-v2 .mapboxgl-ctrl-attrib {
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 2px !important;
    max-width: 100% !important;
    font-size: 10px !important;
    line-height: 14px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: rgba(238, 243, 248, 0.72) !important;
  }
  body.explore-v2 .mapboxgl-ctrl-attrib-button {
    /* Compact "i" is redundant with Safety; keep the text line visible. */
    display: none !important;
  }
  body.explore-v2 .mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: rgba(238, 243, 248, 0.72) !important;
  }
  body.explore-v2 .mapboxgl-ctrl-attrib a {
    color: rgba(238, 243, 248, 0.84) !important;
  }
  body.explore-v2 .mapboxgl-ctrl-logo {
    opacity: 0.78;
    margin: 0 0 2px !important;
  }
  body.explore-v2.atlas-chrome-light .mapboxgl-ctrl-attrib,
  body.explore-v2.atlas-chrome-light .mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner {
    color: rgba(4, 24, 32, 0.62) !important;
  }
  body.explore-v2.atlas-chrome-light .mapboxgl-ctrl-attrib a {
    color: rgba(4, 24, 32, 0.78) !important;
  }
}

/* Compact legal links — keep Privacy/Terms/Cookies away from Mapbox attrib (bottom-left). */
body.explore-v2 .ev2-legal,
.explore-v2 .ev2-legal {
  position: fixed;
  z-index: 62;
  left: auto;
  /* Clear the right map rail so legal never sits under compass / zoom. */
  right: calc(var(--ev2-chrome-side, 28px) + var(--ev2-rail-w, 56px) + 12px);
  bottom: calc(var(--status-h, 28px) + 6px);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  max-width: min(380px, 48vw);
  pointer-events: auto;
  font-family: var(--font-ba-sans, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  color: rgba(238, 246, 248, 0.55);
  text-shadow: 0 1px 2px rgba(4, 24, 32, 0.45);
}

body.explore-v2 .ev2-legal-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.explore-v2 .ev2-legal-more {
  display: none;
  position: relative;
  margin: 0;
}

body.explore-v2 .ev2-legal a,
.explore-v2 .ev2-legal a,
body.explore-v2 .ev2-legal .ba-cookie-prefs-link,
.explore-v2 .ev2-legal .ba-cookie-prefs-link {
  color: inherit;
  text-decoration: none;
}

body.explore-v2 .ev2-legal a:hover,
.explore-v2 .ev2-legal a:hover,
body.explore-v2 .ev2-legal .ba-cookie-prefs-link:hover,
.explore-v2 .ev2-legal .ba-cookie-prefs-link:hover {
  color: rgba(238, 246, 248, 0.92);
}

body.explore-v2 .ev2-legal a:focus-visible,
.explore-v2 .ev2-legal a:focus-visible,
body.explore-v2 .ev2-legal .ba-cookie-prefs-link:focus-visible,
.explore-v2 .ev2-legal .ba-cookie-prefs-link:focus-visible {
  outline: 2px solid #0b63f6;
  outline-offset: 2px;
  border-radius: 2px;
}

body.explore-v2.atlas-chrome-light .ev2-legal {
  color: rgba(4, 24, 32, 0.55);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55);
}

body.explore-v2.atlas-chrome-light .ev2-legal a:hover,
body.explore-v2.atlas-chrome-light .ev2-legal .ba-cookie-prefs-link:hover {
  color: rgba(4, 24, 32, 0.92);
}

@media (max-width: 900px) {
  body.explore-v2 .ev2-legal,
  .explore-v2 .ev2-legal {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: auto;
    max-width: min(320px, calc(100vw - 96px));
    /* Quiet text row in the lower center, clear of Layer / thumb controls. */
    bottom: max(6px, env(safe-area-inset-bottom, 0px));
    z-index: 55;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0;
    padding: 0;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    text-shadow: 0 1px 2px rgba(4, 24, 32, 0.55);
    pointer-events: auto;
  }

  body.explore-v2 .ev2-legal-inline {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
  }

  /* Drop the Legal pill on phone; keep Privacy · Terms · Cookies as plain text. */
  body.explore-v2 .ev2-legal-more {
    display: none !important;
  }

  body.explore-v2 .ev2-legal a,
  .explore-v2 .ev2-legal a,
  body.explore-v2 .ev2-legal .ba-cookie-prefs-link,
  .explore-v2 .ev2-legal .ba-cookie-prefs-link {
    padding: 2px 0;
    min-height: 0;
  }

  /* Keep legal clear of the open place sheet / forecast dock. */
  body.explore-v2.m-sheet .ev2-legal,
  body.explore-v2:has(.sheet.show) .ev2-legal,
  body.explore-v2.rain-scrub .ev2-legal,
  body.explore-v2.clouds-scrub .ev2-legal,
  body.explore-v2.v2-player-open .ev2-legal,
  body.explore-v2.m-layers-open .ev2-legal,
  body.explore-v2.m-search-open .ev2-legal,
  body.explore-v2.ba-navigate-mobile-layers-open .ev2-legal {
    display: none;
  }

  /* Reopen tab: above thumb chrome AND above Privacy/Terms row. */
  body.explore-v2 .ba-v2-place-reopen {
    position: fixed !important;
    left: 12px !important;
    right: auto !important;
    bottom: calc(
      var(--status-h, 12px) + var(--ev2-thumb-row-h, 56px) +
        var(--ev2-cond-strip-h, 0px) + var(--ev2-bottom-stack-gap, 16px) +
        8px + 36px
    ) !important;
    z-index: 88 !important;
    max-width: min(280px, calc(100vw - 24px - var(--ev2-layer-stack-w, 56px) - 16px));
    min-height: 44px !important;
    height: auto !important;
    padding: 12px 16px !important;
    line-height: 1.2 !important;
  }
}

/* —— Plan route / live nav declutter ————————————————
   Forecast card is z-index 70; header nav is ~80. Plan panel sits between
   them and docks top-left while planning so the map stays usable for pins.
   Live nav (nav-active) hides the same v2 floats classic CSS misses. */
body.explore-v2.nav-planning .nav-plan {
  position: fixed !important;
  top: calc(var(--ev2-chrome-inset, 8px) + var(--ev2-nav-h, 48px) + 10px) !important;
  left: 24px !important;
  right: auto !important;
  transform: none !important;
  z-index: 78 !important;
  width: min(380px, calc(100vw - 48px)) !important;
  height: fit-content;
  max-height: calc(100dvh - var(--ev2-nav-h, 48px) - 32px);
  overflow: auto;
  padding: 18px 18px 16px !important;
  box-sizing: border-box !important;
}

body.explore-v2.nav-planning .nav-plan-ends {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

body.explore-v2.nav-planning .nav-plan-end {
  min-height: 68px !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
  gap: 4px !important;
  justify-content: center !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}

body.explore-v2.nav-planning .nav-plan-swap {
  align-self: center !important;
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.explore-v2.nav-planning .nav-plan-metrics {
  margin-top: 16px;
  padding-top: 4px;
  gap: 12px 16px;
}

body.explore-v2.nav-planning .nav-plan-departure-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 12px;
}

body.explore-v2.nav-planning .nav-plan-departure-field input {
  min-height: 44px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
}

body.explore-v2.nav-planning .nav-plan-editor {
  --nav-plan-pill-h: 40px;
  --nav-plan-pill-pad-x: 16px;
  --nav-plan-stack-gap: 12px;
}

body.explore-v2.nav-planning .nav-plan-editor > .nav-plan-v2-only:not(details) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--nav-plan-stack-gap);
  margin-top: var(--nav-plan-stack-gap);
  width: 100%;
}

body.explore-v2.nav-planning .nav-plan-editor > .nav-plan-v2-only:has(#nav-plan-add-stop) {
  /* Beat legacy `display: block` on .nav-plan-v2-only so stack gap applies. */
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  margin-top: 16px;
}

body.explore-v2.nav-planning #nav-plan-add-stop,
body.explore-v2.nav-planning #nav-plan-resume-draft,
body.explore-v2.nav-planning .nav-plan-vessel-acts .nav-plan-ghost,
body.explore-v2.nav-planning .nav-plan-catalog-seed .nav-plan-ghost {
  min-height: var(--nav-plan-pill-h) !important;
  height: var(--nav-plan-pill-h) !important;
  padding: 0 var(--nav-plan-pill-pad-x) !important;
  margin: 0 !important;
  width: auto !important;
  max-width: 100%;
  flex: 0 0 auto !important;
  align-self: flex-start;
  box-sizing: border-box !important;
  border-radius: 999px !important;
}

/* Add stop: roomier label padding; stack gap owns space above the optional tip. */
body.explore-v2.nav-planning #nav-plan-add-stop {
  min-height: 44px !important;
  height: auto !important;
  padding: 12px 20px !important;
  line-height: 18px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font: 600 14px/18px var(--f, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif) !important;
}

/* Collapsed boat specs disclosure */
body.explore-v2.nav-planning .nav-plan-vessel {
  margin-top: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

body.explore-v2.nav-planning .nav-plan-vessel-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  font: 600 13px/1.2 var(--f, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
}

body.explore-v2.nav-planning .nav-plan-vessel-summary::-webkit-details-marker {
  display: none;
}

body.explore-v2.nav-planning .nav-plan-vessel-summary::after {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-right: 1.75px solid currentColor;
  border-bottom: 1.75px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.explore-v2.nav-planning .nav-plan-vessel[open] .nav-plan-vessel-summary::after {
  transform: rotate(-135deg);
  margin-top: 4px;
}

body.explore-v2.nav-planning .nav-plan-vessel-summary-label {
  flex: 1 1 auto;
  min-width: 0;
}

body.explore-v2.nav-planning .nav-plan-vessel-summary-meta {
  flex: 0 1 auto;
  max-width: 48%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 12px/1.2 var(--f, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  opacity: 0.72;
}

body.explore-v2.nav-planning .nav-plan-vessel-body {
  padding: 0 14px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.explore-v2.nav-planning .nav-plan-vessel-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nav-plan-stack-gap);
  margin: 4px 0 12px;
}

body.explore-v2.nav-planning .nav-plan-catalog-seed {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--nav-plan-stack-gap);
}

body.explore-v2.nav-planning .nav-plan-note {
  margin: 20px 0 4px !important;
  padding: 14px 16px !important;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font: 400 15px/24px var(--f, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif) !important;
  opacity: 1 !important;
}

body.explore-v2.nav-planning .nav-plan-thinking {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(43, 190, 242, 0.28);
  background: rgba(11, 99, 246, 0.16);
  font: 500 14px/20px var(--f, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  color: #e8f4ff;
}

body.explore-v2.nav-planning .nav-plan-thinking[hidden] {
  display: none !important;
}

body.explore-v2.nav-planning .nav-plan-thinking-spinner {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  border: 2px solid rgba(43, 190, 242, 0.28);
  border-top-color: #2bbef2;
  animation: ba-nav-plan-spin 0.8s linear infinite;
}

body.explore-v2.nav-planning .nav-plan-metrics--busy .nav-plan-metric strong {
  opacity: 0.55;
  animation: ba-nav-plan-pulse 1.2s ease-in-out infinite;
}

@keyframes ba-nav-plan-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ba-nav-plan-pulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.explore-v2.nav-planning .nav-plan-thinking-spinner {
    animation: none;
    border-top-color: rgba(43, 190, 242, 0.28);
    background: rgba(43, 190, 242, 0.45);
  }
  body.explore-v2.nav-planning .nav-plan-metrics--busy .nav-plan-metric strong {
    animation: none;
    opacity: 0.7;
  }
}

body.explore-v2.nav-plan-busy .nav-plan-offline,
body.explore-v2.nav-plan-busy .nav-plan-chart-provenance,
body.explore-v2.nav-plan-busy .nav-plan-persist,
body.explore-v2.nav-plan-busy .nav-plan-constraints,
body.explore-v2.nav-plan-busy .nav-plan-departures,
body.explore-v2.nav-plan-busy .nav-plan-conditions,
body.explore-v2.nav-plan-busy .nav-plan-tides {
  display: none !important;
}

body.explore-v2.nav-planning .nav-plan-persist-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.explore-v2.nav-planning .nav-plan-persist-acts .nav-plan-ghost,
body.explore-v2.nav-planning .nav-plan-persist-acts .nav-plan-import-label {
  flex: 1 1 calc(50% - 8px);
  min-width: 120px;
  justify-content: center;
  box-sizing: border-box;
}

body.explore-v2.nav-planning .nav-plan-departures-label {
  margin: 0 0 8px;
  font: 500 12px/1.35 var(--f, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  opacity: 0.72;
}

body.explore-v2.nav-planning .nav-plan-departure-opt.is-selected {
  border-color: var(--blue, #0b63f6);
  box-shadow: inset 0 0 0 1px rgba(11, 99, 246, 0.35);
  background: rgba(11, 99, 246, 0.06);
}

body.explore-v2.nav-planning .nav-plan-note .nav-plan-note-body {
  display: block;
}

body.explore-v2.nav-planning .nav-plan-note .nav-plan-note-disclaimer {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 500;
  opacity: 0.88;
}

body.explore-v2.nav-planning .nav-plan-conditions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
}

body.explore-v2.nav-planning .nav-plan-cond-peak,
body.explore-v2.nav-planning .nav-plan-cond-note,
body.explore-v2.nav-planning .nav-plan-cond-type {
  display: block;
}

body.explore-v2.nav-planning .nav-plan-cond-type {
  font: 600 12px/16px var(--f, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  letter-spacing: 0.04em;
  color: #2bbef2;
}

body.explore-v2.nav-planning .nav-plan-cond-type[hidden] {
  display: none !important;
}

body.explore-v2.nav-planning .nav-plan-cond-note {
  font: 400 13px/20px var(--f, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  opacity: 0.82;
}

body.explore-v2.nav-planning .nav-plan-metrics .nav-hud-label {
  font: 600 10px/1.25 var(--f, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  letter-spacing: 0.08em;
  overflow: visible;
}

body.explore-v2.nav-planning .nav-plan-end-label {
  font: 600 10px/14px var(--f, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  letter-spacing: 0.1em;
}

body.explore-v2.nav-planning .nav-plan-end-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.explore-v2.nav-planning .nav-plan-end-badge,
body.explore-v2.nav-planning .nav-plan-stop-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font: 700 11px/1 var(--f, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  letter-spacing: 0;
}

body.explore-v2.nav-planning .nav-plan-end.is-picking {
  border-color: #0b63f6 !important;
  background: rgba(11, 99, 246, 0.18) !important;
  box-shadow: 0 0 0 2px rgba(11, 99, 246, 0.22);
}

body.explore-v2.nav-planning .nav-plan-end.is-picking .nav-plan-end-badge {
  background: #0b63f6;
}

body.explore-v2.nav-planning .nav-plan-clear-ends {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

body.explore-v2.nav-planning .nav-plan-clear-end {
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 600 11px/1 var(--f, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
}

body.explore-v2.nav-planning .nav-plan-clear-end:disabled {
  opacity: 0.38;
}

body.explore-v2.nav-planning .nav-plan-search-end {
  border-color: rgba(43, 190, 242, 0.48);
  color: #bcecff;
}

body.explore-v2.nav-planning .nav-plan-pick-status {
  margin: 10px 0 0;
  color: rgba(238, 243, 248, 0.78);
  font: 500 12px/17px var(--f, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
}

body.explore-v2.nav-planning .nav-plan-stop > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body.explore-v2 .stop-marker {
  width: 24px;
  height: 24px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #7a6ff0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  color: #fff;
  font: 700 11px/24px var(--f, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  text-align: center;
  pointer-events: none;
}

body.explore-v2.nav-planning .nav-plan-end strong {
  font-size: 14px;
  line-height: 18px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  word-break: break-word;
}

body.explore-v2.ba-navigation-ack-open .ba-cookie-consent,
body.explore-v2.ba-routing-ack-open .ba-cookie-consent {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.explore-v2 .ba-safety-ack {
  /* Above mobile place sheet (z-index 200) so Navigate Here consent is visible. */
  position: fixed !important;
  z-index: 220;
  width: min(420px, calc(100vw - 48px));
  max-height: min(88svh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 32px));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 28px 28px max(24px, env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box;
  border-radius: 20px;
}

body.explore-v2 .ba-safety-ack--nav {
  z-index: 230;
  width: min(460px, calc(100vw - 40px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.explore-v2 .ba-safety-ack-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

body.explore-v2 .ba-safety-ack h2 {
  margin: 0 0 14px !important;
  line-height: 1.25;
}

body.explore-v2 .ba-safety-ack p {
  margin: 0 0 12px !important;
  font-size: 14px;
  line-height: 1.5;
}

body.explore-v2 .ba-safety-ack-btn {
  margin-top: 16px !important;
  height: 44px;
}

body.explore-v2 #ba-navigation-safety-ack .ba-nav-ack-check,
body.explore-v2 .ba-nav-ack-check {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  width: 100%;
  margin: 16px 0 0;
  font: 600 14px/1.4 var(--f, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  color: var(--ink, #eef3f8);
  cursor: pointer;
}

body.explore-v2 #ba-navigation-safety-ack .ba-nav-ack-check input,
body.explore-v2 .ba-nav-ack-check input {
  display: inline-block !important;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0 !important;
  accent-color: #0b63f6;
}

body.explore-v2 #ba-navigation-safety-ack .ba-nav-ack-check span,
body.explore-v2 .ba-nav-ack-check span {
  display: block;
  width: auto !important;
  flex: 1 1 auto;
  min-width: 0;
}

body.explore-v2 .ba-nav-ack-actions {
  flex: 0 0 auto;
  margin-top: 16px;
  padding-top: 4px;
  background: var(--panel-solid, rgba(8, 18, 24, 0.98));
}

body.explore-v2 .ba-safety-panel-head {
  padding: 20px 20px 10px !important;
  flex: 0 0 auto;
}

body.explore-v2 .ba-safety-panel-body {
  padding: 4px 20px max(28px, calc(20px + env(safe-area-inset-bottom, 0px))) !important;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

/* Beat atlas-body-mount universal padding:0 reset. */
body.atlas-scope.explore-v2 .atlas-body-mount .ba-safety-panel-note,
body.explore-v2 .ba-safety-panel-note {
  padding: 12px 14px !important;
  box-sizing: border-box;
}

body.explore-v2 .ba-safety-sources {
  gap: 8px;
}

body.atlas-scope.explore-v2 .atlas-body-mount .ba-safety-source,
body.explore-v2 .ba-safety-source {
  padding: 12px !important;
  box-sizing: border-box;
}

/* Anchored near the Safety control (JS sets left/right/bottom/max-height). */
body.explore-v2 .ba-safety-panel.ba-safety-panel--anchored {
  position: fixed !important;
  top: auto !important;
  z-index: 90;
  width: min(360px, calc(100vw - 28px));
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid var(--x-line, rgba(255, 255, 255, 0.12));
  background: var(--panel-solid, rgba(8, 18, 24, 0.94));
  color: var(--ink, #eef3f8);
  box-shadow: 0 18px 54px rgba(4, 24, 32, 0.28);
  overflow: hidden;
  pointer-events: auto;
}

@media (max-width: 900px) {
  body.explore-v2 .ba-safety-ack,
  body.explore-v2 .ba-safety-ack--nav {
    top: calc(var(--ev2-nav-h, 60px) + env(safe-area-inset-top, 0px) + 12px) !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 24px) !important;
    max-height: calc(
      100dvh
      - var(--ev2-nav-h, 60px)
      - env(safe-area-inset-top, 0px)
      - env(safe-area-inset-bottom, 0px)
      - 108px
    ) !important;
    padding: 20px 20px 16px !important;
    border-radius: 18px;
  }

  body.explore-v2 .ba-safety-ack h2 {
    font-size: 16px;
    margin-bottom: 12px !important;
  }

  body.explore-v2 .ba-safety-ack p {
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 10px !important;
  }

  body.explore-v2 .ba-nav-ack-check {
    margin-top: 12px;
    font-size: 13px;
  }

  body.explore-v2 .ba-nav-ack-actions {
    margin-top: 12px;
    gap: 8px;
  }

  body.explore-v2 .ba-nav-ack-actions .ba-safety-ack-btn,
  body.explore-v2 .ba-safety-ack-btn {
    height: 44px;
    margin-top: 0 !important;
  }
}

body.explore-v2 .ba-safety-panel-backdrop:not([hidden]) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 89;
  background: rgba(4, 24, 32, 0.22);
  pointer-events: auto;
}

body.explore-v2.ba-routing-ack-open .nav-plan {
  opacity: 0.28;
  pointer-events: none;
}

/* Compact route preview: keep path visible; bar stays out of the way */
body.explore-v2.nav-planning .nav-plan.nav-plan--preview {
  left: 24px !important;
  transform: none !important;
  width: min(380px, calc(100vw - 48px)) !important;
  max-height: none;
  overflow: visible;
  padding: 12px 16px !important;
}

body.explore-v2.nav-planning .nav-plan-preview-acts .nav-plan-ghost {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 68px !important;
  height: 34px !important;
  padding: 0 14px !important;
  white-space: nowrap !important;
}

body.explore-v2 button.nav-plan-primary,
body.explore-v2 button.nav-plan-primary:disabled {
  color: #fff;
}

/* Must beat mode-conditions / mode-places layer-rail `display: inline-flex
   !important` (higher class count). Otherwise Depth+Marinas stay visible
   under live nav and clash with Follow / HUD chrome. */
body.atlas-scope.explore-v2.nav-active .ba-v2-forecast-card,
body.atlas-scope.explore-v2.nav-active:has(.inspector.collapsed) .ba-v2-forecast-card,
body.atlas-scope.explore-v2.nav-active.v2-forecast-collapsed .ba-v2-forecast-card,
body.atlas-scope.explore-v2.nav-active .inspector,
body.atlas-scope.explore-v2.nav-active .inspector.view-now.on,
body.atlas-scope.explore-v2.nav-active .inspector.view-today.on,
body.atlas-scope.explore-v2.nav-active .inspector.view-week.on,
body.atlas-scope.explore-v2.nav-active .ba-v2-layer-legends,
body.atlas-scope.explore-v2.nav-active .m-cond-peek,
body.atlas-scope.explore-v2.nav-active .wx-field-toggle,
body.atlas-scope.explore-v2.nav-active .wx-field-toggle.on,
body.atlas-scope.explore-v2.nav-active.mode-conditions .wx-field-toggle,
body.atlas-scope.explore-v2.nav-active.mode-conditions .wx-field-toggle.on,
body.atlas-scope.explore-v2.nav-active.mode-places .wx-field-toggle,
body.atlas-scope.explore-v2.nav-active.mode-places .wx-field-toggle.on,
body.atlas-scope.explore-v2.nav-active #m-map-layers,
body.atlas-scope.explore-v2.nav-planning .ba-v2-forecast-card,
body.atlas-scope.explore-v2.nav-planning:has(.inspector.collapsed) .ba-v2-forecast-card,
body.atlas-scope.explore-v2.nav-planning.v2-forecast-collapsed .ba-v2-forecast-card,
body.atlas-scope.explore-v2.nav-planning .inspector,
body.atlas-scope.explore-v2.nav-planning .inspector.view-now.on,
body.atlas-scope.explore-v2.nav-planning .inspector.view-today.on,
body.atlas-scope.explore-v2.nav-planning .inspector.view-week.on,
body.atlas-scope.explore-v2.nav-planning .ba-v2-layer-legends,
body.atlas-scope.explore-v2.nav-planning .m-cond-peek,
body.atlas-scope.explore-v2.nav-planning .wx-field-toggle,
body.atlas-scope.explore-v2.nav-planning .wx-field-toggle.on,
body.atlas-scope.explore-v2.nav-planning.mode-conditions .wx-field-toggle,
body.atlas-scope.explore-v2.nav-planning.mode-conditions .wx-field-toggle.on,
body.atlas-scope.explore-v2.nav-planning.mode-places .wx-field-toggle,
body.atlas-scope.explore-v2.nav-planning.mode-places .wx-field-toggle.on,
body.atlas-scope.explore-v2.nav-planning #m-map-layers {
  display: none !important;
}

/* Header stays during nav/plan — soft fade so the route reads first,
   but never hide the BoatAtlas chrome (logo/search/menu). */
body.explore-v2.nav-active .ba-nav-wrap,
body.explore-v2.nav-active .ba-nav-wrap--dark,
body.explore-v2.nav-planning .ba-nav-wrap,
body.explore-v2.nav-planning .ba-nav-wrap--dark,
body.atlas-scope.explore-v2.nav-active .ba-nav-wrap,
body.atlas-scope.explore-v2.nav-active .ba-nav-wrap--dark,
body.atlas-scope.explore-v2.nav-planning .ba-nav-wrap,
body.atlas-scope.explore-v2.nav-planning .ba-nav-wrap--dark {
  opacity: 0.88;
  transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.explore-v2.nav-active .ba-nav-wrap:hover,
body.explore-v2.nav-active .ba-nav-wrap:focus-within,
body.explore-v2.nav-active .ba-nav-wrap--dark:hover,
body.explore-v2.nav-active .ba-nav-wrap--dark:focus-within,
body.explore-v2.nav-planning .ba-nav-wrap:hover,
body.explore-v2.nav-planning .ba-nav-wrap:focus-within,
body.explore-v2.nav-planning .ba-nav-wrap--dark:hover,
body.explore-v2.nav-planning .ba-nav-wrap--dark:focus-within,
body.atlas-scope.explore-v2.nav-active .ba-nav-wrap:hover,
body.atlas-scope.explore-v2.nav-active .ba-nav-wrap:focus-within,
body.atlas-scope.explore-v2.nav-active .ba-nav-wrap--dark:hover,
body.atlas-scope.explore-v2.nav-active .ba-nav-wrap--dark:focus-within,
body.atlas-scope.explore-v2.nav-planning .ba-nav-wrap:hover,
body.atlas-scope.explore-v2.nav-planning .ba-nav-wrap:focus-within,
body.atlas-scope.explore-v2.nav-planning .ba-nav-wrap--dark:hover,
body.atlas-scope.explore-v2.nav-planning .ba-nav-wrap--dark:focus-within {
  opacity: 1;
}

/* Live nav HUD sits under the restored Explore header (not classic --ba-nav-height). */
body.explore-v2.nav-active .nav-hud,
body.atlas-scope.explore-v2.nav-active .nav-hud {
  top: calc(var(--ev2-chrome-inset, 8px) + env(safe-area-inset-top, 0px) + var(--ev2-nav-h, 48px) + 10px) !important;
}

/* Keep locate / 3D available for recenter; de-emphasize search chrome. */
@media (max-width: 900px) {
  body.explore-v2.nav-active .map-nav-view > #m-map-search,
  body.explore-v2.nav-active .map-nav-view .nav-search-wrap,
  body.explore-v2.nav-planning:not(.m-search-open) .map-nav-view > #m-map-search,
  body.explore-v2.nav-planning:not(.m-search-open) .map-nav-view .nav-search-wrap {
    display: none !important;
  }

  body.explore-v2.nav-active .map-tools,
  body.explore-v2.nav-planning .map-tools {
    right: 12px !important;
    opacity: 0.85;
  }

  /*
   * Planning owns the mobile workspace. Use the visible panel as a fallback
   * signal so a delayed body-class update cannot leave thumb, legal, Mapbox,
   * or staging review chrome covering its actions.
   */
  /* Keep .map-tools — Plan/Nav mode cells (Nav, Layer, Look, Day/Night) live there. */
  body.explore-v2.nav-planning .ev2-legal,
  body.explore-v2.nav-planning .mapboxgl-ctrl-bottom-left,
  body.explore-v2.nav-planning .mapboxgl-ctrl-bottom-right,
  body.explore-v2.nav-planning .ba-dev-review-fab,
  body.explore-v2.nav-planning .ba-dev-review-bar,
  body.explore-v2:has(#nav-plan:not([hidden])) .ev2-legal,
  body.explore-v2:has(#nav-plan:not([hidden])) .mapboxgl-ctrl-bottom-left,
  body.explore-v2:has(#nav-plan:not([hidden])) .mapboxgl-ctrl-bottom-right,
  body.explore-v2:has(#nav-plan:not([hidden])) .ba-dev-review-fab,
  body.explore-v2:has(#nav-plan:not([hidden])) .ba-dev-review-bar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.explore-v2.nav-planning .nav-plan,
  body.explore-v2:has(#nav-plan:not([hidden])) .nav-plan {
    position: fixed !important;
    top: calc(8px + env(safe-area-inset-top, 0px) + var(--ev2-nav-h, 48px) + 8px) !important;
    right: 10px !important;
    left: 10px !important;
    transform: none !important;
    width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - var(--ev2-nav-h, 48px) - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    padding: 16px !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
    z-index: 78 !important;
  }

  /* While choosing From/To via search, shrink the plan card so the map stays usable. */
  body.explore-v2.nav-planning.nav-plan-picking .nav-plan {
    max-height: none !important;
  }
  body.explore-v2.nav-planning.nav-plan-picking .nav-plan-metrics,
  body.explore-v2.nav-planning.nav-plan-picking .nav-plan-conditions {
    display: none !important;
  }
  body.explore-v2.nav-planning.nav-plan-picking .nav-plan-note {
    font-size: 14px !important;
    line-height: 22px !important;
    letter-spacing: 0.01em !important;
  }
  body.explore-v2.nav-planning .nav-plan-note {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
    padding-right: 2px;
    line-height: 22px !important;
  }

  /* Route planning keeps the map tappable on phones. The compact bottom sheet
     exposes end picking, summary, and route action without becoming a tab. */
  body.explore-v2.nav-planning .nav-plan,
  body.explore-v2:has(#nav-plan:not([hidden])) .nav-plan {
    top: auto !important;
    right: 10px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    left: 10px !important;
    width: calc(100vw - 20px) !important;
    max-height: min(48dvh, 400px) !important;
    padding: 14px 14px 10px !important;
    border-radius: 20px !important;
  }

  body.explore-v2.nav-planning .nav-plan-head {
    margin-bottom: 10px;
  }

  body.explore-v2.nav-planning .nav-plan-departure-field {
    display: none !important;
  }

  body.explore-v2.nav-planning .nav-plan-ends {
    grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.explore-v2.nav-planning .nav-plan-swap {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  body.explore-v2.nav-planning .nav-plan-end {
    min-height: 62px !important;
    padding: 8px 10px !important;
  }

  body.explore-v2.nav-planning .nav-plan-end strong {
    font-size: 13px !important;
    line-height: 17px !important;
  }

  body.explore-v2.nav-planning .nav-plan-pick-status {
    margin-top: 8px;
  }

  body.explore-v2.nav-planning .nav-plan-metrics {
    margin-top: 12px;
  }

  body.explore-v2.nav-planning .nav-plan-acts {
    position: sticky;
    bottom: -10px;
    display: grid !important;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 8px;
    margin: 12px -14px -10px !important;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(4, 24, 32, 0.96);
  }

  body.explore-v2.nav-planning .nav-plan-acts .nav-plan-ghost,
  body.explore-v2.nav-planning button.nav-plan-primary {
    width: 100% !important;
    min-height: 42px !important;
  }
}

/* —— Live nav / plan: deeper map-first declutter (v2 floats) ————————
   Classic atlas already clears inspector/layers under nav-active.
   Explore v2 keeps its own floats unless we hide them here.
   Include mode-* so these beat the always-on layer-rail show rules.
   Do NOT hide .ba-nav-wrap here — header must stay (see fade rule above). */
body.atlas-scope.explore-v2.nav-active .ba-v2-forecast-card,
body.atlas-scope.explore-v2.nav-active:has(.inspector.collapsed) .ba-v2-forecast-card,
body.atlas-scope.explore-v2.nav-active.v2-forecast-collapsed .ba-v2-forecast-card,
body.atlas-scope.explore-v2.nav-active .ba-v2-layer-legends,
body.atlas-scope.explore-v2.nav-active .wx-field-toggle,
body.atlas-scope.explore-v2.nav-active .wx-field-toggle.on,
body.atlas-scope.explore-v2.nav-active.mode-conditions .wx-field-toggle,
body.atlas-scope.explore-v2.nav-active.mode-conditions .wx-field-toggle.on,
body.atlas-scope.explore-v2.nav-active.mode-places .wx-field-toggle,
body.atlas-scope.explore-v2.nav-active.mode-places .wx-field-toggle.on,
body.atlas-scope.explore-v2.nav-active #m-map-layers,
body.atlas-scope.explore-v2.nav-active .data-dock,
body.atlas-scope.explore-v2.nav-active .inspector,
body.atlas-scope.explore-v2.nav-active .inspector.on,
body.atlas-scope.explore-v2.nav-planning #m-map-layers,
body.atlas-scope.explore-v2.nav-planning .wx-field-toggle,
body.atlas-scope.explore-v2.nav-planning .wx-field-toggle.on,
body.atlas-scope.explore-v2.nav-planning.mode-conditions .wx-field-toggle,
body.atlas-scope.explore-v2.nav-planning.mode-conditions .wx-field-toggle.on,
body.atlas-scope.explore-v2.nav-planning.mode-places .wx-field-toggle,
body.atlas-scope.explore-v2.nav-planning.mode-places .wx-field-toggle.on,
body.atlas-scope.explore-v2.nav-planning .data-dock,
body.explore-v2.nav-planning #m-map-layers,
body.explore-v2.nav-planning .wx-field-toggle,
body.explore-v2.nav-planning .wx-field-toggle.on,
body.explore-v2.nav-planning.mode-conditions .wx-field-toggle,
body.explore-v2.nav-planning.mode-conditions .wx-field-toggle.on,
body.explore-v2.nav-planning.mode-places .wx-field-toggle,
body.explore-v2.nav-planning.mode-places .wx-field-toggle.on,
body.explore-v2.nav-planning .data-dock {
  display: none !important;
}

/* Plan dock / live nav must not swallow the right rail once mode cells mount. */
body.explore-v2.ba-explore-mode-ready.nav-planning .map-tools,
body.explore-v2.ba-explore-mode-ready.nav-active .map-tools,
body.atlas-scope.explore-v2.ba-explore-mode-ready.nav-planning .map-tools,
body.atlas-scope.explore-v2.ba-explore-mode-ready.nav-active .map-tools,
body.explore-v2.ba-explore-mode-ready:has(#nav-plan:not([hidden])) .map-tools {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ── Explore onboarding (flag explore_onboarding_v1) ───────────────── */

.ba-explore-tour-root {
  position: fixed;
  inset: 0;
  z-index: 5600;
  pointer-events: none;
}

.ba-explore-tour-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 24, 32, 0.18);
  pointer-events: none;
}

.ba-explore-tour-highlight {
  position: fixed;
  border: 2px solid #0b63f6;
  border-radius: 16px;
  box-shadow: 0 0 0 9999px rgba(4, 24, 32, 0.12), 0 0 0 4px rgba(11, 99, 246, 0.25);
  pointer-events: none;
  z-index: 5601;
}

.ba-explore-tour-card {
  position: fixed;
  z-index: 5602;
  pointer-events: auto;
  width: min(340px, calc(100vw - 24px));
  padding: 16px 16px 14px;
  border-radius: 18px;
  border: 1px solid rgba(216, 216, 209, 0.35);
  background: rgba(8, 22, 30, 0.94);
  color: #f4f1ea;
  box-shadow: 0 18px 54px rgba(4, 24, 32, 0.35);
  font-family: "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif;
}

body.atlas-chrome-light .ba-explore-tour-card,
body.atlas-chrome-light .ba-explore-help-menu,
body.atlas-chrome-light .ba-explore-help-panel,
body.atlas-chrome-light .ba-explore-tooltip,
body.atlas-chrome-light .ba-route-inline-hint {
  background: rgba(255, 255, 255, 0.96);
  color: #041820;
  border-color: #d8d8d1;
}

.ba-explore-tour-card--mobile {
  width: auto;
  max-width: none;
}

.ba-explore-tour-step {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2bbef2;
}

.ba-explore-tour-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.ba-explore-tour-desc {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.45;
  color: #c8cfcf;
}

body.atlas-chrome-light .ba-explore-tour-desc {
  color: #4b5a5b;
}

.ba-explore-tour-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.ba-explore-tour-btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.ba-explore-tour-btn--ghost {
  background: transparent;
  color: inherit;
  border: 1px solid rgba(216, 216, 209, 0.4);
}

.ba-explore-tour-btn--primary {
  background: #0b63f6;
  color: #fff;
}

.ba-explore-tour-btn--primary:hover {
  background: #0750cc;
}

.ba-explore-tour-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.ba-explore-help-btn {
  font-weight: 600;
  font-family: var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
}

.ba-explore-help-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
}

/* Phone: Help is a Layer-rail chip so Location stays readable in the header. */
@media (max-width: 900px) {
  body.explore-v2 #wx-field-toggle #ba-explore-help-btn.ba-explore-help-btn--in-layers {
    position: relative !important;
    inset: auto !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 44px !important;
    max-height: none !important;
    /* Utility footer: separated from Map / theme chips above. */
    margin: 10px 6px 6px !important;
    padding: 8px 0 !important;
    border: 1px solid rgba(216, 216, 209, 0.28) !important;
    border-radius: 12px !important;
    background: rgba(11, 99, 246, 0.12) !important;
    box-shadow: none !important;
    color: #f4f1ea !important;
    visibility: visible !important;
    pointer-events: auto !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
  }
  body.explore-v2 #wx-field-toggle #ba-explore-help-btn.ba-explore-help-btn--in-layers::before {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 var(--ev2-icon, 16px) !important;
    width: var(--ev2-icon, 16px) !important;
    height: var(--ev2-icon, 16px) !important;
    min-width: var(--ev2-icon, 16px) !important;
    min-height: var(--ev2-icon, 16px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: currentColor !important;
  }
  body.explore-v2 #wx-field-toggle #ba-explore-help-btn.ba-explore-help-btn--in-layers:hover,
  body.explore-v2 #wx-field-toggle #ba-explore-help-btn.ba-explore-help-btn--in-layers:focus-visible {
    background: rgba(11, 99, 246, 0.22) !important;
    outline: none !important;
  }
  body.explore-v2 #wx-field-toggle #ba-explore-help-btn.ba-explore-help-btn--nudge {
    color: #fff !important;
    background: rgba(11, 99, 246, 0.28) !important;
    border-color: rgba(11, 99, 246, 0.7) !important;
    box-shadow: 0 0 0 1px rgba(11, 99, 246, 0.45) !important;
    animation: ba-explore-help-nudge 1.6s cubic-bezier(0.22, 1, 0.36, 1) 2;
  }
  /* Never leave a stray Help control crowding the Location pill. */
  body.explore-v2 .ba-nav-right > #ba-explore-help-btn {
    display: none !important;
  }
}

@keyframes ba-explore-help-nudge {
  0%,
  100% {
    transform: translateY(0);
    box-shadow: 0 0 0 1px rgba(11, 99, 246, 0.35);
  }
  50% {
    transform: translateY(-1px);
    box-shadow: 0 0 0 2px rgba(11, 99, 246, 0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.explore-v2 #wx-field-toggle #ba-explore-help-btn.ba-explore-help-btn--nudge {
    animation: none !important;
  }
}

.ba-explore-help-menu {
  position: fixed;
  z-index: 5200;
  min-width: 240px;
  max-width: min(300px, calc(100vw - 24px));
  max-height: min(70vh, calc(100dvh - 24px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid rgba(216, 216, 209, 0.35);
  background: rgba(4, 24, 32, 0.96);
  color: #f4f1ea;
  box-shadow: 0 18px 54px rgba(4, 24, 32, 0.3);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  text-align: left;
}

@media (max-width: 900px) {
  .ba-explore-help-menu {
    z-index: 5600;
  }
}

.ba-explore-help-menu-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  margin: 0;
}

.ba-explore-help-menu-group + .ba-explore-help-menu-group {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(216, 216, 209, 0.28);
}

.ba-explore-help-menu button,
.ba-explore-help-menu [role="menuitem"] {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  cursor: pointer;
  font-family: var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
}

.ba-explore-help-menu-ico {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: rgba(244, 241, 234, 0.78);
}

.ba-explore-help-menu-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.ba-explore-help-menu button:hover,
.ba-explore-help-menu button:focus-visible,
.ba-explore-help-menu [role="menuitem"]:hover,
.ba-explore-help-menu [role="menuitem"]:focus-visible {
  background: rgba(11, 99, 246, 0.18);
  outline: none;
}

.ba-explore-help-menu button:hover .ba-explore-help-menu-ico,
.ba-explore-help-menu button:focus-visible .ba-explore-help-menu-ico {
  color: #f4f1ea;
}

body.atlas-chrome-light .ba-explore-help-menu-ico {
  color: #4b5a5b;
}

body.atlas-chrome-light .ba-explore-help-menu-group + .ba-explore-help-menu-group {
  border-top-color: #d8d8d1;
}

.ba-explore-help-panel {
  position: fixed;
  z-index: 5201;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(216, 216, 209, 0.35);
  background: rgba(4, 24, 32, 0.96);
  color: #f4f1ea;
  box-shadow: 0 18px 54px rgba(4, 24, 32, 0.3);
  max-width: 400px;
  font-family: var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  text-align: left;
}

.ba-explore-help-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.ba-explore-help-panel-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: left;
}

.ba-explore-help-panel-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
}

.ba-explore-help-panel p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #c8cfcf;
  text-align: left;
}

body.atlas-chrome-light .ba-explore-help-panel p {
  color: #4b5a5b;
}

.ba-explore-tooltip {
  position: fixed;
  z-index: 5300;
  max-width: 220px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(216, 216, 209, 0.35);
  background: rgba(8, 22, 30, 0.96);
  color: #f4f1ea;
  font-size: 12px;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: 0 8px 28px rgba(4, 24, 32, 0.25);
}

.ba-route-inline-hint {
  position: fixed;
  z-index: 5100;
  max-width: 280px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(43, 190, 242, 0.45);
  background: rgba(8, 22, 30, 0.94);
  color: #f4f1ea;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 12px 32px rgba(4, 24, 32, 0.28);
}

/* Plan-panel tip: flow with Add stop; same pill rhythm as ghost actions. */
#nav-plan .ba-route-inline-hint,
#nav-plan .nav-plan-inline-hint {
  position: static;
  z-index: auto;
  max-width: none;
  width: 100%;
  margin: 0;
  min-height: var(--nav-plan-pill-h, 40px);
  padding: 10px var(--nav-plan-pill-pad-x, 16px);
  box-sizing: border-box;
  box-shadow: none;
  border-radius: 999px;
  border-color: rgba(216, 216, 209, 0.28);
  background: rgba(255, 255, 255, 0.05);
  font: 400 13px/1.35 var(--f, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  display: flex;
  align-items: center;
}

body.explore-v2.nav-planning .nav-plan-preview-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: normal;
}

body.explore-v2.nav-planning .nav-plan-preview-ends {
  font: 500 13px/1.25 var(--f, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  opacity: 0.9;
}

body.explore-v2.nav-planning .nav-plan-preview-stats {
  font: 500 12px/1.3 var(--f, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  opacity: 0.68;
}

body.explore-v2.nav-planning .nav-plan-constraints:empty {
  display: none;
}

body.explore-v2.nav-planning .nav-plan-offline {
  margin-top: 10px;
}

body.explore-v2.nav-planning .nav-plan-chart-provenance {
  margin-top: 10px;
  line-height: 1.45;
}

body.explore-v2.nav-planning .nav-plan-chart-provenance--compact {
  opacity: 0.72;
  line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
  .ba-explore-tour-highlight,
  .ba-explore-tour-card,
  .ba-explore-tooltip {
    transition: none !important;
  }
}

body.explore-v2.ev2-chrome-ready #ba-explore-help-btn {
  visibility: visible !important;
}

/* Vessel constraints hidden when kill-switched or not yet revealed. */
#nav-plan-vessel[data-ba-vessel-ui="disabled"],
#nav-plan-vessel[hidden] {
  display: none !important;
}

/* Wind / wave map sample tip: roomy ink chip (beats Mapbox default padding). */
body.explore-v2 .wx-sample-tip.mapboxgl-popup,
body.explore-v2 .mapboxgl-popup.wx-sample-tip {
  z-index: 40;
}
body.explore-v2 .wx-sample-tip .mapboxgl-popup-content {
  padding: 16px 20px !important;
  border-radius: 14px !important;
  background: rgba(4, 24, 32, 0.94) !important;
  color: #e8f4ff !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42) !important;
  min-width: 124px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body.explore-v2 .wx-sample-tip .mapboxgl-popup-tip {
  border-top-color: rgba(4, 24, 32, 0.94) !important;
}
body.explore-v2 .wx-sample-tip-body {
  display: grid !important;
  gap: 4px !important;
  min-width: 0;
}
body.explore-v2 .wx-sample-tip-body .tip-main {
  display: block;
  font: 600 1rem/1.2 var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif) !important;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: #e8f4ff !important;
}
body.explore-v2 .wx-sample-tip-body .tip-src {
  display: block;
  font: 500 0.7rem/1.25 var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif) !important;
  opacity: 0.72;
  color: #e8f4ff !important;
}
body.explore-v2 .wx-sample-tip-body .tip-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
body.explore-v2 .wx-sample-tip-body .tip-k {
  font: 600 0.65rem/1 var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* ── Explore workspace: Plan / Navigate ─────────────────────────────────
   The right rail deliberately retains its existing .map-tools /
   .map-nav-group glass styling. These rules only arrange its existing-style
   option cells and hide planning chrome when Navigate owns the map. */
body.explore-v2 .ba-explore-mode-btn {
  min-height: 52px !important;
  padding: 8px 4px 6px !important;
  gap: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.88) !important;
}
/* Only true latches may brighten when `.on`; cycling cells stay idle. */
body.explore-v2 .map-tools #ba-explore-layers.on,
body.explore-v2 .map-tools #ba-explore-locate.on {
  color: #fff !important;
}
body.explore-v2.atlas-chrome-light .map-tools .ba-explore-mode-btn {
  color: rgba(4, 24, 32, 0.78) !important;
}
body.explore-v2.atlas-chrome-light .map-tools #ba-explore-layers.on,
body.explore-v2.atlas-chrome-light .map-tools #ba-explore-locate.on {
  color: #041820 !important;
}
body.explore-v2 .ba-explore-mode-btn .map-rail-icon {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 auto !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.75 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
body.explore-v2 #ba-explore-mode-toggle .map-rail-icon [fill] {
  fill: currentColor !important;
  stroke: none !important;
}
body.explore-v2 .ba-explore-mode-btn .map-rail-label {
  display: block !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.1 !important;
}
/* Explore has one lighting control: Day / Night on the rail.
   Beat earlier #btn-chrome.map-rail-btn { display:flex }, the
   .style-toggle--aux stack, and the mobile thumb-row
   display:grid !important rules so Dark cannot return on the Plan rail. */
body.explore-v2 .map-nav-view .style-toggle--aux,
body.explore-v2 .map-nav-view > #btn-chrome,
body.explore-v2 .map-nav-view #btn-chrome,
body.explore-v2 #btn-chrome.map-rail-btn,
body.explore-v2 #btn-chrome {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
@media (max-width: 900px) {
  body.explore-v2 .map-nav-view > #btn-chrome,
  body.explore-v2 .map-nav-view #btn-chrome,
  body.explore-v2 #btn-chrome.map-rail-btn,
  body.explore-v2 #btn-chrome {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
body.explore-v2 #ba-explore-sky {
  display: none !important;
}
body.explore-v2.ba-plan-forecast-hidden .ba-v2-forecast-card,
body.explore-v2.ba-plan-forecast-hidden .inspector,
body.explore-v2.ba-plan-forecast-hidden .data-dock {
  display: none !important;
}
body.explore-v2.explore-mode-navigate #ba-explore-forecast {
  display: none !important;
}
/* Look is the single camera control. The legacy buttons stay mounted as
   implementation hooks for 2D, 3D, and Water, but no longer compete in rail UI. */
body.explore-v2 .map-view-modes {
  display: none !important;
}

.ba-celestial-sky-layer {
  position: absolute;
  inset: 0;
  z-index: 24;
  overflow: hidden;
  /* Clip to the measured sky band so marks never paint over terrain. */
  clip-path: inset(0 0 var(--ba-sky-clip-bottom, 52%) 0);
  -webkit-clip-path: inset(0 0 var(--ba-sky-clip-bottom, 52%) 0);
  font-family: var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  pointer-events: none;
}
.ba-celestial-sky-mark {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transform: translate(-50%, -50%);
  color: #f4f1ea;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}
.ba-celestial-sky-mark i {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #f4f1ea;
  box-shadow: 0 0 6px rgba(244, 241, 234, 0.55);
}
.ba-celestial-sky-mark--sun i {
  width: 10px;
  height: 10px;
  background: #f2a900;
  box-shadow: 0 0 10px rgba(242, 169, 0, 0.65);
}
.ba-celestial-sky-mark--moon i {
  width: 8px;
  height: 8px;
  background: #d8d8d1;
  box-shadow: 0 0 8px rgba(216, 216, 209, 0.55);
}
.ba-celestial-sky-mark em {
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(4, 24, 32, 0.55);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .ba-celestial-sky-mark i {
    width: 7px;
    height: 7px;
    box-shadow: 0 0 10px rgba(244, 241, 234, 0.85);
  }
  .ba-celestial-sky-mark--sun i {
    width: 12px;
    height: 12px;
  }
  .ba-celestial-sky-mark--moon i {
    width: 10px;
    height: 10px;
  }
  .ba-celestial-sky-mark em {
    padding: 2px 6px;
    background: rgba(4, 24, 32, 0.72);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.02em;
  }
}
.ba-chase-boat-marker {
  position: relative;
  width: 72px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  overflow: visible;
  filter: drop-shadow(0 10px 18px rgba(4, 24, 32, 0.36));
  transition: filter 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ba-chase-boat-marker:hover,
.ba-chase-boat-marker[aria-expanded="true"] {
  filter: drop-shadow(0 18px 32px rgba(4, 24, 32, 0.48)) drop-shadow(0 0 8px rgba(43, 190, 242, 0.38));
}
.ba-chase-boat-marker:focus-visible {
  outline: 2px solid #0b63f6;
  outline-offset: 3px;
}
.ba-chase-boat-marker svg,
.ba-chase-boat-marker-photo {
  display: block;
  width: 100%;
  height: 100%;
}
.ba-chase-boat-marker-photo {
  object-fit: cover;
  border-radius: 14px;
}
.ba-chase-boat-marker--loading {
  position: relative;
}
.ba-chase-boat-marker--loading::after {
  content: "Loading 3D";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  z-index: 2;
  padding: 6px 9px;
  border: 1px solid rgba(166, 224, 255, 0.48);
  border-radius: 999px;
  background: rgba(4, 24, 32, 0.78);
  color: #e9f8ff;
  font: 700 10px/1 system-ui, sans-serif;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
}
/* Hide the 2D photo/SVG only. Large transparent hit target covers the GLB. */
.ba-chase-boat-marker--hitbox {
  width: 160px;
  height: 160px;
  background: transparent !important;
  filter: none !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  cursor: pointer;
  z-index: 8;
}
.ba-chase-boat-marker--hitbox .ba-chase-boat-marker-photo,
.ba-chase-boat-marker--hitbox svg {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.ba-chase-boat-canvas {
  position: absolute;
  /* Avoid inset:!important — it zeroes left/top set by the paint loop. */
  right: auto;
  bottom: auto;
  width: 136px;
  height: 136px;
  max-width: 152px;
  max-height: 152px;
  pointer-events: none;
  z-index: 6;
}
.ba-chase-boat-hit {
  position: absolute;
  right: auto;
  bottom: auto;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  z-index: 8;
}
.ba-chase-boat-marker--hitbox:hover,
.ba-chase-boat-marker--hitbox[aria-expanded="true"] {
  filter: none !important;
}
.ba-chase-boat-marker--hitbox:focus-visible {
  outline: 2px solid #0b63f6;
  outline-offset: 8px;
}
.ba-chase-boat-picker {
  position: fixed;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: calc(var(--dock-clearance, 148px) + 18px + env(safe-area-inset-bottom, 0px));
  z-index: 110;
  width: min(456px, calc(100vw - 36px));
  max-height: calc(
    100dvh - var(--ba-nav-height, 70px) - var(--dock-clearance, 148px) - 48px -
      env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
  );
  padding: 12px;
  box-sizing: border-box;
  border-radius: 20px;
  border: 1px solid rgba(216, 216, 209, 0.28);
  background: rgba(4, 24, 32, 0.96);
  color: #f4f1ea;
  box-shadow: 0 18px 54px rgba(4, 24, 32, 0.45);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  font-family: var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ba-chase-boat-picker[hidden] { display: none !important; }
.ba-chase-boat-picker-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 10px;
}
.ba-chase-boat-picker-head span {
  font: 600 12px/16px var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.64);
}
.ba-chase-boat-picker-close {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(216, 216, 209, 0.22);
  border-radius: 999px;
  background: transparent;
  color: #f4f1ea;
  font: 600 12px/1 var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  cursor: pointer;
}
.ba-chase-boat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}
/* Water/Chase: keep the small terrain chip off the map (ack sheets carry it). */
body.explore-v2 .water-view-chip[hidden],
body.explore-v2.ba-chase-view .water-view-chip,
body.explore-v2.ba-chase-view .water-view-chip.on,
body.explore-v2 .water-view-chip[hidden].on {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.ba-chase-boat-option {
  min-width: 0;
  min-height: 92px;
  padding: 8px;
  border: 1px solid rgba(216, 216, 209, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  color: #f4f1ea;
  display: grid;
  grid-template-columns: minmax(104px, 0.95fr) minmax(0, 0.75fr);
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}
.ba-chase-boat-option:hover,
.ba-chase-boat-option.on {
  border-color: rgba(43, 190, 242, 0.48);
  background: rgba(11, 99, 246, 0.22);
}
.ba-chase-boat-option:focus-visible {
  outline: 2px solid #0b63f6;
  outline-offset: -2px;
}
.ba-chase-boat-option-image {
  position: relative;
  width: 100%;
  min-width: 104px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 14px;
  /* Soft ink wash behind warm-canvas GLB stills so white hulls separate. */
  background-color: #ece7dd;
  background-image: linear-gradient(
    165deg,
    rgba(244, 241, 234, 0.92) 0%,
    rgba(236, 231, 221, 0.98) 48%,
    rgba(216, 216, 209, 0.88) 100%
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(4, 24, 32, 0.12),
    0 6px 16px rgba(4, 24, 32, 0.22);
}
.ba-chase-boat-option-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(4, 24, 32, 0.03) 0%,
    rgba(4, 24, 32, 0.08) 100%
  );
  box-shadow: inset 0 0 20px rgba(4, 24, 32, 0.07);
}
.ba-chase-boat-option-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Crop remaining still padding so the model reads larger on the warm tile. */
  transform: scale(1.28);
  transform-origin: center 52%;
  filter: saturate(1.06) contrast(1.18) brightness(0.96);
}
.ba-chase-boat-canvas {
  position: absolute;
  right: auto;
  bottom: auto;
  width: 136px;
  height: 136px;
  max-width: 152px;
  max-height: 152px;
  pointer-events: none;
  z-index: 6;
}
.ba-chase-boat-hit {
  position: absolute;
  right: auto;
  bottom: auto;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  z-index: 8;
}
/* Dev Issues badge / toasts must sit above plan sheet (78) and draft bar (72). */
nextjs-portal,
[data-nextjs-toast],
[data-next-badge-root] {
  z-index: 2147483000 !important;
}
.ba-chase-boat-option-image svg {
  position: relative;
  z-index: 0;
  display: block;
  width: 56px;
  height: 42px;
  filter: drop-shadow(0 2px 6px rgba(4, 24, 32, 0.28));
}
.ba-chase-boat-option-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.ba-chase-boat-option-label {
  min-width: 0;
  font: 600 14px/18px var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  letter-spacing: -0.01em;
}
.ba-chase-boat-option-subtitle {
  min-width: 0;
  color: rgba(244, 241, 234, 0.62);
  font: 500 10.5px/14px var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  letter-spacing: 0.01em;
}
@media (max-width: 720px) {
  .ba-chase-boat-picker {
    left: 14px;
    right: 14px;
    bottom: calc(var(--status-h, 28px) + 18px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-height: calc(
      100dvh - var(--ba-nav-height, 60px) - var(--status-h, 28px) - 40px -
        env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
    );
  }
  .ba-chase-boat-grid {
    grid-template-columns: 1fr;
  }
}
.ba-sky-lighting-menu {
  position: fixed;
  z-index: 92;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 4px;
  border: 1px solid var(--x-line);
  border-radius: 14px;
  background: var(--x-glass);
  box-shadow: var(--x-shadow);
  -webkit-backdrop-filter: var(--x-glass-blur);
  backdrop-filter: var(--x-glass-blur);
  color: var(--x-text);
  font: 600 11px/1 var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
}
.ba-sky-lighting-menu[hidden] { display: none; }
.ba-sky-lighting-menu > span {
  padding: 0 4px 0 6px;
  color: var(--x-muted);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ba-sky-lighting-menu button {
  height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  font: inherit;
}
.ba-sky-lighting-menu button.on {
  background: rgba(11, 99, 246, 0.28);
  color: #fff;
}

/* Keep horizontal chip sections content-sized. A stale mobile stack rule could
   leave an empty flex track between Advisories and the lighting controls. */
body.explore-v2:not(.m-layers-open) .wx-field-toggle {
  justify-content: flex-start !important;
}
body.explore-v2:not(.m-layers-open) .wx-field-toggle .ba-v2-layer-section--weather,
body.explore-v2:not(.m-layers-open) .wx-field-toggle .ba-v2-layer-section--actions,
body.explore-v2:not(.m-layers-open) .wx-field-toggle .ba-v2-layer-section--marine {
  display: contents !important;
  flex: 0 0 auto !important;
  width: auto !important;
}
body.explore-v2:not(.m-layers-open) .wx-field-toggle .ba-v2-place-group {
  flex: 0 0 auto !important;
  width: auto !important;
}

.ba-nav-instruments {
  position: fixed;
  z-index: 70;
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: 50%;
  display: none;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  transform: translateX(-50%);
  color: #f7fbfc;
  font-family: var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  text-align: center;
  pointer-events: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.ba-nav-instruments > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 88px;
  padding: 0 18px;
}
.ba-nav-instruments > div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}
.ba-nav-instruments span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}
.ba-nav-instruments strong {
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ba-plan-draft-bar {
  position: fixed;
  z-index: 72;
  right: 50%;
  bottom: 56px;
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(620px, calc(100vw - 160px));
  min-height: 56px;
  padding: 8px 8px 8px 20px;
  transform: translateX(50%);
  border: 1px solid var(--x-line);
  border-radius: 18px;
  background: var(--x-glass);
  box-shadow: var(--x-shadow);
  -webkit-backdrop-filter: var(--x-glass-blur);
  backdrop-filter: var(--x-glass-blur);
  color: var(--x-text);
  font-family: var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
}
.ba-plan-draft-copy {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: rgba(247, 251, 252, 0.9);
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ba-plan-draft-acts {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
}
@media (max-width: 720px) {
  .ba-plan-draft-bar {
    gap: 10px;
    padding-left: 14px;
  }
  .ba-plan-draft-acts {
    gap: 6px;
  }
  .ba-plan-draft-edit {
    display: none;
  }
  .ba-plan-draft-save,
  .ba-plan-draft-start {
    padding: 0 12px;
    font-size: 13px;
  }
}
.ba-plan-draft-save,
.ba-plan-draft-edit {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: transparent;
  color: rgba(247, 251, 252, 0.95);
  font: 600 13px/1 var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  white-space: nowrap;
  cursor: pointer;
}
.ba-plan-draft-save:hover,
.ba-plan-draft-edit:hover {
  background: rgba(255, 255, 255, 0.08);
}
.ba-plan-draft-save:disabled {
  opacity: 0.6;
  cursor: default;
}
.ba-plan-draft-start {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: #0b63f6;
  color: #fff;
  font: 600 14px/1 var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  white-space: nowrap;
  cursor: pointer;
}
.ba-plan-draft-start:hover { background: #0750cc; }

/* Underway next-waypoint + Stop (Navigate with active route). */
.ba-nav-guidance-bar {
  position: fixed;
  z-index: 72;
  right: 50%;
  bottom: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(620px, calc(100vw - 160px));
  min-height: 56px;
  padding: 8px 8px 8px 16px;
  transform: translateX(50%);
  border: 1px solid var(--x-line);
  border-radius: 18px;
  background: var(--x-glass);
  box-shadow: var(--x-shadow);
  -webkit-backdrop-filter: var(--x-glass-blur);
  backdrop-filter: var(--x-glass-blur);
  color: var(--x-text);
  font-family: var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
}
.ba-nav-guidance-ico {
  display: inline-flex;
  flex: 0 0 auto;
  color: #0b63f6;
}
.ba-nav-guidance-copy {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: rgba(247, 251, 252, 0.95);
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ba-nav-guidance-divider {
  width: 1px;
  align-self: stretch;
  flex: 0 0 auto;
  margin: 6px 0;
  background: rgba(255, 255, 255, 0.16);
}
.ba-nav-guidance-stop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #ffb4a4;
  font: 600 14px/1 var(--ba-font, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
  cursor: pointer;
}
.ba-nav-guidance-stop-ico {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #ef6548;
}
.ba-nav-guidance-stop:hover { color: #ffd0c6; }
.ba-nav-guidance-bar[hidden] { display: none !important; }

/* Plan A/B pins are tappable to re-focus picking. */
body.explore-v2.nav-planning .origin-marker.is-plan-pickable,
body.explore-v2.nav-planning .dest-marker-b.is-plan-pickable {
  pointer-events: auto !important;
  cursor: pointer;
}

/* Navigate removes planning surfaces. The rail keeps its production glass. */
body.explore-v2.explore-mode-navigate .ba-nav-wrap,
body.explore-v2.explore-mode-navigate .ba-nav-wrap--dark,
body.explore-v2.explore-mode-navigate .wx-field-toggle,
body.explore-v2.explore-mode-navigate .ba-v2-forecast-card,
body.explore-v2.explore-mode-navigate .ba-v2-layer-legends,
body.explore-v2.explore-mode-navigate .inspector,
body.explore-v2.explore-mode-navigate .data-dock,
body.explore-v2.explore-mode-navigate #timeline-dock,
body.explore-v2.explore-mode-navigate .map-nav-places,
body.explore-v2.explore-mode-navigate .map-nav-view > #zloc,
body.explore-v2.explore-mode-navigate .map-nav-view > #m-map-layers,
body.explore-v2.explore-mode-navigate .map-view-modes,
body.explore-v2.explore-mode-navigate .style-toggle,
body.explore-v2.explore-mode-navigate #map-rail-clouds,
body.explore-v2.explore-mode-navigate .nav-plan {
  display: none !important;
}
/* Weather player open: Plan and Navigate share the same timeline scrubber chrome. */
body.explore-v2.explore-mode-navigate.v2-player-open .data-dock,
body.explore-v2.explore-mode-navigate.rain-scrub .data-dock,
body.explore-v2.explore-mode-navigate.clouds-scrub .data-dock,
body.explore-v2.explore-mode-navigate.v2-player-open #timeline-dock,
body.explore-v2.explore-mode-navigate.rain-scrub #timeline-dock,
body.explore-v2.explore-mode-navigate.clouds-scrub #timeline-dock {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}
/* Hide the closed layer rail while the player is open. When Navigate layers
   are explicitly open, keep the strip visible and stack it above the player
   (see mobile rules below). */
body.explore-v2.explore-mode-navigate.v2-player-open:not(.ba-navigate-mobile-layers-open) .wx-field-toggle,
body.explore-v2.explore-mode-navigate.rain-scrub:not(.ba-navigate-mobile-layers-open) .wx-field-toggle,
body.explore-v2.explore-mode-navigate.clouds-scrub:not(.ba-navigate-mobile-layers-open) .wx-field-toggle {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Keep Save/Edit/Start for a planned route in Navigate until guidance starts. */
body.explore-v2.explore-mode-navigate.ba-has-nav-guidance .ba-plan-draft-bar,
body.explore-v2.explore-mode-navigate.nav-active .ba-plan-draft-bar {
  display: none !important;
}
body.explore-v2.explore-mode-navigate .ba-nav-instruments {
  display: flex;
}
/* Navigate preserves access to the horizontal layer rail but clears the
   heading/course instruments at the top. Active route guidance owns this
   lower area, so Layers remains available from the right rail instead.
   56px clears the legal disclaimer rail (~34px + 11px type) plus a 12px gap. */
body.atlas-scope.explore-v2.explore-mode-navigate .wx-field-toggle,
body.atlas-scope.explore-v2.explore-mode-navigate .wx-field-toggle.on {
  top: auto !important;
  bottom: 56px !important;
}
body.explore-v2.explore-mode-navigate .ba-dev-review-fab {
  bottom: 56px;
}
body.atlas-scope.explore-v2.explore-mode-navigate.nav-active .wx-field-toggle,
body.atlas-scope.explore-v2.explore-mode-navigate.nav-active .wx-field-toggle.on {
  display: none !important;
}
body.explore-v2.explore-mode-navigate .map-tools {
  top: var(--ev2-rail-top) !important;
  bottom: 112px !important;
}
/* Explore paints ba-nav-guidance-bar; keep #nav-hud for live state + arrival. */
body.explore-v2.explore-mode-navigate.nav-active .nav-hud,
body.explore-v2.explore-mode-navigate.ba-has-nav-guidance .nav-hud {
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
  transform: none !important;
}
body.explore-v2.explore-mode-navigate.nav-active .nav-hud-top,
body.explore-v2.explore-mode-navigate.nav-active .nav-hud-bottom,
body.explore-v2.explore-mode-navigate.nav-active .nav-float,
body.explore-v2.explore-mode-navigate.nav-active .nav-panel,
body.explore-v2.explore-mode-navigate.nav-active .nav-hud-alert,
body.explore-v2.explore-mode-navigate.nav-active .nav-keep-open {
  display: none !important;
}
body.explore-v2.explore-mode-navigate.nav-active .nav-arrive:not([hidden]) {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(380px, calc(100vw - 40px)) !important;
  pointer-events: auto !important;
  z-index: 80 !important;
}
body.explore-v2.ba-has-route-draft.nav-route-preview:not(.explore-mode-navigate) .nav-plan {
  display: none !important;
}

@media (max-width: 900px) {
  .ba-nav-instruments {
    top: calc(12px + env(safe-area-inset-top, 0px));
  }
  .ba-nav-instruments > div {
    min-width: 72px;
    padding: 0 12px;
  }
  .ba-nav-instruments strong { font-size: 22px; }
  .ba-plan-draft-bar,
  .ba-nav-guidance-bar {
    right: 12px;
    bottom: calc(
      var(--status-h, 12px) + var(--ev2-thumb-bottom-gap, 12px) +
        var(--ev2-thumb-row-h, 56px) + 10px + env(safe-area-inset-bottom, 0px)
    );
    width: calc(100vw - 24px);
    transform: none;
  }
  /*
   * Navigate mobile: keep mode chrome on the same bottom thumb dock as Plan
   * (View · Plan/Nav · Layer). Do NOT relocate into a right-hand vertical rail.
   */
  body.explore-v2.explore-mode-navigate .map-tools {
    top: auto !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(var(--status-h) + var(--ev2-thumb-bottom-gap, 12px)) !important;
    width: auto !important;
    height: var(--ev2-thumb-row-h) !important;
    max-height: var(--ev2-thumb-row-h) !important;
    overflow: visible !important;
    pointer-events: none !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: stretch !important;
  }
  /* Layers strip stacks above the dock; Plan/Nav slot stays put.
     Match Plan pill metrics (padding / justify) so icons do not resize on mode flip. */
  body.explore-v2.explore-mode-navigate .map-nav,
  body.explore-v2.explore-mode-navigate .map-nav-view {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    flex: 1 1 auto !important;
    gap: 4px !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }
  body.explore-v2.explore-mode-navigate .map-nav {
    padding: 0 !important;
    justify-content: center !important;
  }
  body.explore-v2.explore-mode-navigate .map-nav-view {
    padding: 6px !important;
    justify-content: space-between !important;
  }
  /* Navigate thumb: Weather + Search are real controls (same metrics as Plan). */
  body.explore-v2.explore-mode-navigate .map-nav-view > #ba-v2-glance-toggle,
  body.explore-v2.explore-mode-navigate .map-nav-view > #ba-explore-search {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: visible !important;
  }
  /* Shared weather timeline player above the Navigate thumb dock. */
  body.explore-v2.explore-mode-navigate.v2-player-open .data-dock,
  body.explore-v2.explore-mode-navigate.rain-scrub .data-dock,
  body.explore-v2.explore-mode-navigate.clouds-scrub .data-dock {
    display: flex !important;
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(
      var(--status-h, 12px) + var(--ev2-thumb-bottom-gap, 8px) +
        var(--ev2-thumb-row-h, 56px) + 8px
    ) !important;
    top: auto !important;
    width: auto !important;
    z-index: 92 !important;
  }
  /* Never let Plan's vertical stack paint under Navigate chrome. */
  body.explore-v2.explore-mode-navigate.m-layers-open .wx-field-toggle,
  body.explore-v2.explore-mode-navigate.m-layers-open .wx-field-toggle.on,
  body.atlas-scope.explore-v2.explore-mode-navigate .wx-field-toggle,
  body.atlas-scope.explore-v2.explore-mode-navigate .wx-field-toggle.on,
  body.atlas-scope.explore-v2.explore-mode-navigate.m-layers-open .wx-field-toggle,
  body.atlas-scope.explore-v2.explore-mode-navigate.m-layers-open .wx-field-toggle.on {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  /*
   * Navigate layers strip: horizontal, above the shared bottom thumb dock.
   * When the forecast player is also open, lift the strip above the player
   * (same clearance idea as Plan's vertical stack) so chips stay tappable.
   */
  body.atlas-scope.explore-v2.explore-mode-navigate.ba-navigate-mobile-layers-open .wx-field-toggle,
  body.atlas-scope.explore-v2.explore-mode-navigate.ba-navigate-mobile-layers-open .wx-field-toggle.on,
  body.explore-v2.explore-mode-navigate.ba-navigate-mobile-layers-open .wx-field-toggle,
  body.explore-v2.explore-mode-navigate.ba-navigate-mobile-layers-open .wx-field-toggle.on {
    position: fixed !important;
    top: auto !important;
    right: auto !important;
    bottom: calc(
      var(--status-h, 12px) + var(--ev2-thumb-bottom-gap, 12px) +
        var(--ev2-thumb-row-h, 56px) + 8px
    ) !important;
    left: 12px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: max-content !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    height: var(--ev2-layers-h) !important;
    max-height: var(--ev2-layers-h) !important;
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    z-index: 93 !important;
  }
  body.atlas-scope.explore-v2.explore-mode-navigate.ba-navigate-mobile-layers-open.v2-player-open .wx-field-toggle,
  body.atlas-scope.explore-v2.explore-mode-navigate.ba-navigate-mobile-layers-open.v2-player-open .wx-field-toggle.on,
  body.atlas-scope.explore-v2.explore-mode-navigate.ba-navigate-mobile-layers-open.rain-scrub .wx-field-toggle,
  body.atlas-scope.explore-v2.explore-mode-navigate.ba-navigate-mobile-layers-open.rain-scrub .wx-field-toggle.on,
  body.atlas-scope.explore-v2.explore-mode-navigate.ba-navigate-mobile-layers-open.clouds-scrub .wx-field-toggle,
  body.atlas-scope.explore-v2.explore-mode-navigate.ba-navigate-mobile-layers-open.clouds-scrub .wx-field-toggle.on,
  body.explore-v2.explore-mode-navigate.ba-navigate-mobile-layers-open.v2-player-open .wx-field-toggle,
  body.explore-v2.explore-mode-navigate.ba-navigate-mobile-layers-open.v2-player-open .wx-field-toggle.on,
  body.explore-v2.explore-mode-navigate.ba-navigate-mobile-layers-open.rain-scrub .wx-field-toggle,
  body.explore-v2.explore-mode-navigate.ba-navigate-mobile-layers-open.rain-scrub .wx-field-toggle.on,
  body.explore-v2.explore-mode-navigate.ba-navigate-mobile-layers-open.clouds-scrub .wx-field-toggle,
  body.explore-v2.explore-mode-navigate.ba-navigate-mobile-layers-open.clouds-scrub .wx-field-toggle.on {
    bottom: calc(
      var(--status-h, 12px) + var(--ev2-thumb-bottom-gap, 12px) +
        var(--ev2-thumb-row-h, 56px) + 8px +
        var(--ev2-mobile-player-h, 96px) + 8px
    ) !important;
    z-index: 93 !important;
  }
  /* Navigate: same lower-center quiet legal row as Plan. */
  body.explore-v2.explore-mode-navigate .ev2-legal,
  .explore-v2.explore-mode-navigate .ev2-legal {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
    max-width: min(320px, calc(100vw - 96px)) !important;
    justify-content: center !important;
    text-align: center !important;
    z-index: 55 !important;
  }
  body.explore-v2.explore-mode-navigate.ba-navigate-mobile-layers-open .ev2-legal,
  .explore-v2.explore-mode-navigate.ba-navigate-mobile-layers-open .ev2-legal,
  body.explore-v2.explore-mode-navigate.m-layers-open .ev2-legal,
  body.explore-v2.explore-mode-navigate.ba-navigate-mobile-layers-open .mapboxgl-ctrl-bottom-left,
  body.explore-v2.explore-mode-navigate.ba-navigate-mobile-layers-open .mapboxgl-ctrl-bottom-right,
  body.explore-v2.explore-mode-navigate.ba-navigate-mobile-layers-open .mapboxgl-ctrl-attrib,
  body.explore-v2.explore-mode-navigate.ba-navigate-mobile-layers-open .mapboxgl-ctrl-logo {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 900px) {
  body.explore-v2 .wx-sample-tip .mapboxgl-popup-content {
    padding: 18px 22px !important;
    min-width: 132px !important;
    border-radius: 16px !important;
  }
  body.explore-v2 .wx-sample-tip-body .tip-main {
    font-size: 1.05rem !important;
  }
}

/* Navigate instrument strip + BoatAtlas GPS / anchor panels */
body.explore-v2.nav-active .nav-hud-instruments {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 8px 12px 0;
  order: -1;
}
body.explore-v2.nav-active .nav-hud-instruments .nav-hud-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}
body.explore-v2.nav-active .nav-hud-instruments strong {
  font-size: 16px;
  font-weight: 600;
}
body.explore-v2:not(.nav-active) .nav-hud-instruments {
  display: none;
}
.nav-gps-upgrade-list {
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: 14px;
  line-height: 22px;
}
.nav-gps-account-link {
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
  color: #2bbef2;
  font-size: 14px;
  font-weight: 600;
}
.nav-plan-tide-link {
  color: #2bbef2;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nav-anchor-radius {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 12px;
  font-size: 13px;
}
.nav-anchor-radius input {
  max-width: 120px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(4, 24, 32, 0.45);
  color: #fff;
  padding: 8px 10px;
}
.ba-community-trust-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(242, 169, 0, 0.22);
  color: #f2a900;
}
.ba-community-trust-badge--official {
  background: rgba(43, 190, 242, 0.2);
  color: #2bbef2;
}

/* Sky night-vision polish (celestial companion) */
body.ba-night-vision,
body.ba-celestial-sky-on.ba-night-vision {
  --ba-night-vision-red: #ef6548;
}
body.ba-night-vision .nav-hud,
body.ba-night-vision .nav-panel,
body.ba-night-vision .ba-celestial-sky-layer {
  filter: sepia(0.35) saturate(0.55) hue-rotate(-25deg) brightness(0.92);
}
body.ba-night-vision .nav-hud-stop,
body.ba-night-vision .nav-float-btn.on {
  box-shadow: 0 0 0 1px rgba(239, 101, 72, 0.45);
}

/*
 * Final right-rail FOUC latch (must stay last among .map-tools display rules).
 * Mobile thumb CSS later uses high-specificity :has(.inspector…) { display:flex },
 * which previously beat the early gate and flashed 2D/3D/Water/Dark before Plan/Nav.
 */
body.explore-v2.ev2-chrome-ready:not(.ba-explore-mode-ready) .map-tools,
body.explore-v2.ev2-chrome-ready:not(.ba-explore-mode-ready) .atlas-body-mount .map-tools,
body.atlas-scope.explore-v2.ev2-chrome-ready:not(.ba-explore-mode-ready) .map-tools,
body.explore-v2.ev2-chrome-ready:not(.ba-explore-mode-ready):not(.v2-forecast-collapsed):has(.inspector.on:not(.collapsed)) .map-tools,
body.explore-v2.ev2-chrome-ready:not(.ba-explore-mode-ready).insp-view-today .map-tools,
body.explore-v2.ev2-chrome-ready:not(.ba-explore-mode-ready).insp-view-week .map-tools,
body.explore-v2.ev2-chrome-ready:not(.ba-explore-mode-ready).v2-forecast-collapsed .map-tools,
body.explore-v2.ev2-chrome-ready:not(.ba-explore-mode-ready).v2-player-open .map-tools,
body.explore-v2.ev2-chrome-ready:not(.ba-explore-mode-ready).nav-planning .map-tools,
body.explore-v2.ev2-chrome-ready:not(.ba-explore-mode-ready).nav-active .map-tools {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.explore-v2.ev2-chrome-ready.ba-explore-mode-ready .map-tools,
body.explore-v2.ev2-chrome-ready.ba-explore-mode-ready .atlas-body-mount .map-tools,
body.atlas-scope.explore-v2.ev2-chrome-ready.ba-explore-mode-ready .map-tools,
body.explore-v2.ev2-chrome-ready.weatheroo.ba-explore-mode-ready .map-tools,
body.explore-v2.ev2-chrome-ready.weatheroo.ba-explore-mode-ready .atlas-body-mount .map-tools {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}