/**
 * Roam Explore — gate boat-nav chrome and marine conditions on the land map.
 * Layout stays Boat Explore; hide marine instruments, Waves, and water routing.
 */

body.roam-explore [data-overlay="buoy"],
body.roam-explore [data-overlay="buoys"],
body.roam-explore [data-overlay="ndbc"],
body.roam-explore [data-overlay="ferry"],
body.roam-explore [data-overlay="ferries"],
body.roam-explore [data-overlay="enc"],
body.roam-explore [data-overlay="depth"],
body.roam-explore [data-overlay="bathy"],
body.roam-explore [data-overlay="bathymetry"],
body.roam-explore [data-layer="buoy"],
body.roam-explore [data-layer="ferries"],
body.roam-explore [data-layer="enc"],
body.roam-explore [data-layer="depth"],
body.roam-explore button[data-wx="buoy"],
body.roam-explore button[data-wx="ferries"],
body.roam-explore button[data-wx="enc"],
body.roam-explore button[data-wx="depth"],
body.roam-explore .ba-chip[data-kind="buoy"],
body.roam-explore .ba-chip[data-kind="ferry"],
body.roam-explore .ba-chip[data-kind="enc"],
body.roam-explore .ba-chip[data-kind="depth"],
body.roam-explore #nav-mode-btn,
body.roam-explore #plan-mode-btn,
body.roam-explore [data-mode="navigate"],
body.roam-explore [data-mode="plan"],
body.roam-explore .ba-nav-engine,
body.roam-explore #my-boat-chip,
body.roam-explore [data-panel="my-boat"],
/* Roam SiteHeader owns top chrome — hide Boat site nav */
body.roam-explore .ba-nav-wrap,
body.roam-explore .ba-nav-wrap--dark,
body.roam-explore header.ba-site-header {
  display: none !important;
}

/* Roam map page: fill viewport even if body classes briefly churn (Strict Mode). */
body.roam-explore main.atlas-explore-main.roam-explore-host,
main.atlas-explore-main.roam-explore-host {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  background: #041820 !important;
}

/*
 * Trap Boat map chrome (map-tools z-90, legends z-74, sheets z-200, …)
 * inside this mount. Without a stacking context those z-indexes compete
 * with React Explore chrome (Places / Plan / Field) and win on phone.
 */
body.roam-explore .roam-explore-host .atlas-body-mount,
main.atlas-explore-main.roam-explore-host .atlas-body-mount {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  z-index: 1 !important;
  isolation: isolate !important;
}

body.roam-explore .roam-explore-host #map,
main.atlas-explore-main.roam-explore-host #map {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
}

/* React POI / intent chrome — above the Boat mount, below SiteHeader (z-85). */
body.roam-explore .roam-explore-host [data-roam-explore-chrome],
main.atlas-explore-main.roam-explore-host [data-roam-explore-chrome] {
  z-index: 80 !important;
}

/* Land map: no marine field chips (Waves, water temp, depth). */
body.roam-explore #wx-field-toggle button[data-preset="waves"],
body.roam-explore #wx-field-toggle button[data-preset="depth"],
body.roam-explore #wx-field-toggle [data-preset="waves"],
body.roam-explore #wx-field-toggle [data-preset="depth"],
body.roam-explore [data-wx="waves"],
body.roam-explore [data-wx="water-temp"],
body.roam-explore [data-field="waves"],
body.roam-explore [data-field="water-temp"],
body.roam-explore .inq:has(#wx-waves-now),
body.roam-explore .wx-metric:has(#wx-waves),
body.roam-explore #wx-metric-waves,
body.roam-explore .hour-legend .wave,
body.roam-explore #sheet-water-view,
body.roam-explore #sheet-plan,
body.roam-explore #sheet-nav,
body.roam-explore .nav-plan-vessel,
body.roam-explore #nav-plan-vessel,
body.roam-explore button[data-cat="marina"],
body.roam-explore button[data-near="marina"],
body.roam-explore #ba-depth-safety-ack,
body.roam-explore #ba-routing-safety-ack,
body.roam-explore #ba-navigation-safety-ack,
body.roam-explore #depth-legend,
body.roam-explore #wx-tide,
body.roam-explore #wx-buoy,
body.roam-explore #wx-legend-depth,
body.roam-explore #wx-legend-keys,
body.roam-explore #wx-week-tide-head,
body.roam-explore #wx-tide-plot,
body.roam-explore .depth-info-note,
body.roam-explore .hour-legend .wave,
body.roam-explore #nav-cond-waves,
body.roam-explore .nav-hud-label:has(+ #nav-cond-waves),
body.roam-explore [data-roam-land-hidden="1"] {
  display: none !important;
}

/*
 * Uniform Explore glass for Boat chrome + React chrome.
 * Slightly darker navy-blue than Boat charcoal; same translucency family.
 * Remap Boat selection accent (--x-blue) to Roam orange underlines.
 */
body.roam-explore.explore-v2,
body.roam-explore.atlas-scope {
  --explore-glass-rgb: 8 36 52;
  --explore-glass: rgb(var(--explore-glass-rgb) / 0.55);
  --explore-glass-strong: rgb(var(--explore-glass-rgb) / 0.62);
  --explore-glass-panel: rgb(var(--explore-glass-rgb) / 0.84);
  --explore-glass-blur: blur(28px) saturate(155%);
  --explore-glass-line: rgb(255 255 255 / 0.14);
  --explore-glass-shadow: 0 18px 48px rgb(0 10 18 / 0.24);
  --explore-layers-panel-w: min(100vw - 3.5rem, 20.5rem);
  --explore-layers-tab-w: 1.75rem;
  --x-glass: var(--explore-glass);
  --x-panel: var(--explore-glass-strong);
  --x-glass-blur: var(--explore-glass-blur);
  --x-line: var(--explore-glass-line);
  --x-shadow: var(--explore-glass-shadow);
  --ba-blue: var(--brand-action, #e76f3c);
  --x-blue: var(--brand-action, #e76f3c);
}

/*
 * Desktop forecast — Boat modes:
 *   Today / 7-Day → full #inspector dock
 *   Play / collapsed → .ba-v2-forecast-card glance (Today · 7-Day · Play)
 * Opt-in via Forecast rail → body.roam-desktop-forecast.
 */
@media (min-width: 768px) {
  body.roam-explore {
    --ev2-forecast-dock-top: var(--explore-desktop-chrome-top, 7.75rem);
    --ev2-forecast-card-top: var(--explore-desktop-chrome-top, 7.75rem);
    --ev2-chrome-side: 0.75rem;
  }

  /* Forecast system off — hide dock + glance + inspector tab. */
  body.roam-explore:not(.roam-desktop-forecast) #inspector,
  body.roam-explore:not(.roam-desktop-forecast) .inspector,
  body.roam-explore:not(.roam-desktop-forecast) .ba-v2-forecast-card,
  body.roam-explore:not(.roam-desktop-forecast) #inspector-tab {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  /* Today / 7-Day — full Boat dock. */
  body.roam-explore.roam-desktop-forecast:not(.v2-forecast-collapsed)
    #inspector.inspector,
  body.roam-explore.roam-desktop-forecast:not(.v2-forecast-collapsed)
    #inspector.inspector.on,
  body.roam-explore.roam-desktop-forecast:not(.v2-forecast-collapsed)
    .inspector.on {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    top: var(--explore-desktop-chrome-top, 7.75rem) !important;
    left: 0.75rem !important;
    right: calc(0.75rem + 3.5rem + 0.5rem) !important;
    width: auto !important;
    max-width: none !important;
    z-index: 55 !important;
  }

  body.roam-explore.roam-desktop-forecast:not(.v2-forecast-collapsed)
    .ba-v2-forecast-card,
  body.roam-explore.roam-desktop-forecast #inspector-tab {
    display: none !important;
  }

  /* Play / collapsed glance — compact card with Today · 7-Day · Play. */
  body.roam-explore.roam-desktop-forecast.v2-forecast-collapsed
    .ba-v2-forecast-card,
  body.roam-explore.roam-desktop-forecast.v2-forecast-play
    .ba-v2-forecast-card {
    display: grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    top: var(--explore-desktop-chrome-top, 7.75rem) !important;
    left: 0.75rem !important;
    z-index: 55 !important;
  }

  /* Keep full dock off during Play / collapsed glance. */
  body.roam-explore.roam-desktop-forecast.v2-forecast-collapsed
    #inspector.inspector.on:not(.collapsed),
  body.roam-explore.roam-desktop-forecast.v2-forecast-play
    #inspector.inspector.on:not(.collapsed) {
    display: none !important;
  }

  /* Orange selection underline on Boat forecast tabs + layer chips. */
  body.roam-explore .insp-tab.on::after,
  body.roam-explore .mit-tab.on::after,
  body.roam-explore .ba-v2-glance-view[aria-selected="true"]::after,
  body.roam-explore .ba-v2-forecast-tabs button[aria-selected="true"]::after,
  body.roam-explore .wx-field-toggle > button.on::after {
    background: var(--brand-action, #e76f3c) !important;
  }

  /* Land: hide marine-only inspector rows (keep Wind, precip, feels, UV, etc.). */
  body.roam-explore .inq:has(#wx-waves-now),
  body.roam-explore #wx-waves-now,
  body.roam-explore #wx-waves-prov,
  body.roam-explore #wx-metric-waves,
  body.roam-explore #wx-metric-water,
  body.roam-explore #wx-water,
  body.roam-explore #wx-waves,
  body.roam-explore #wx-waves-prov-today,
  body.roam-explore #wx-period,
  body.roam-explore .wx-metric:has(#wx-period),
  body.roam-explore #wx-tide,
  body.roam-explore #wx-buoy,
  body.roam-explore #wx-score,
  body.roam-explore .v2-now-tide,
  body.roam-explore .tide-layer,
  body.roam-explore #tide-layer,
  body.roam-explore .wave-curls,
  body.roam-explore #wave-bars,
  body.roam-explore .ba-v2-cond-cap:has(+ #wx-tide),
  body.roam-explore .wx-metric:has(#wx-waves),
  body.roam-explore .wx-metric:has(#wx-water),
  body.roam-explore .wx-metric:has(#wx-buoy),
  body.roam-explore .wx-metric:has(#wx-score),
  body.roam-explore [data-roam-marine-slot="1"],
  body.roam-explore .ba-v2-glance-bit[data-glance="waves"],
  body.roam-explore .ba-v2-glance-bit[data-glance="water"],
  body.roam-explore .insp-tab[data-insp-view="now"],
  body.roam-explore .mit-tab[data-insp-view="now"],
  body.roam-explore .ba-v2-glance-view[data-v2-card-view="now"],
  body.roam-explore .ba-v2-forecast-tabs button[data-v2-card-view="now"] {
    display: none !important;
    visibility: hidden !important;
  }

  /*
   * Land Now — Boat is summary | metrics | tide (3-col). After hiding tide +
   * waves the third column was empty and metrics stayed sparse. Match Boat
   * density with summary | land metrics only.
   */
  body.roam-explore.insp-view-now .inspector.view-now .insp-now,
  body.roam-explore .inspector.view-now .insp-now,
  body.roam-explore.insp-view-now #insp-now {
    display: grid !important;
    grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.6fr) !important;
    gap: 0 !important;
    padding: 20px 28px 40px !important;
    overflow: hidden !important;
  }
  body.roam-explore .v2-now-summary {
    border-right: 1px solid var(--x-line, rgb(255 255 255 / 0.14)) !important;
  }
  body.roam-explore .v2-now-metrics {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(7.25rem, 1fr)) !important;
    align-content: center !important;
    padding: 0 8px 0 18px !important;
    border-right: 0 !important;
    min-width: 0 !important;
  }
  body.roam-explore .v2-now-metrics > :nth-child(4n) {
    border-right: 1px solid var(--x-line, rgb(255 255 255 / 0.14));
  }
  body.roam-explore .v2-now-metrics > :last-child {
    border-right: 0 !important;
  }

  /*
   * Land Today — Boat desktop Today is a 7-col marine grid. After hiding
   * waves/tide/buoy/score the dock looked empty. Reflow to land metrics +
   * keep hourly / temp summary filled like 7-Day density.
   * Match both body.insp-view-today and .inspector.view-today (React open path).
   */
  body.roam-explore.insp-view-today .v2-today-ready,
  body.roam-explore .inspector.view-today .v2-today-ready,
  body.roam-explore #insp-today.v2-today-ready {
    display: grid !important;
    grid-template-columns: minmax(11rem, 0.85fr) minmax(0, 1.15fr) !important;
    /* summary · metrics · alert · hourly · peek — match Boat Today stack. */
    grid-template-rows: auto auto auto auto auto auto auto auto !important;
    column-gap: 16px !important;
    row-gap: 8px !important;
    height: auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  body.roam-explore.insp-view-today .v2-today-ready > .insp-loc-head,
  body.roam-explore .inspector.view-today .v2-today-ready > .insp-loc-head {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }
  body.roam-explore.insp-view-today .v2-today-ready > .wx-today-main,
  body.roam-explore .inspector.view-today .v2-today-ready > .wx-today-main {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  body.roam-explore.insp-view-today .v2-today-ready > .insp-factual,
  body.roam-explore .inspector.view-today .v2-today-ready > .insp-factual {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }
  body.roam-explore.insp-view-today .v2-today-ready > .wx-today-primary-head,
  body.roam-explore .inspector.view-today .v2-today-ready > .wx-today-primary-head {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: end !important;
  }
  body.roam-explore.insp-view-today .v2-today-ready > .wx-metrics-primary,
  body.roam-explore.insp-view-today .v2-today-ready > .wx-metrics-more,
  body.roam-explore.insp-view-today .v2-today-ready .wx-metrics-primary,
  body.roam-explore.insp-view-today .v2-today-ready .wx-metrics-more,
  body.roam-explore .inspector.view-today .v2-today-ready > .wx-metrics-primary,
  body.roam-explore .inspector.view-today .v2-today-ready > .wx-metrics-more,
  body.roam-explore .inspector.view-today .v2-today-ready .wx-metrics-primary,
  body.roam-explore .inspector.view-today .v2-today-ready .wx-metrics-more {
    grid-column: 1 / -1 !important;
    display: grid !important;
    /* Land primary is 7 filled tiles (Wind…Sunset) — match Boat 7-col rhythm. */
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  body.roam-explore.insp-view-today .v2-today-ready > .wx-metrics-more,
  body.roam-explore.insp-view-today .v2-today-ready .wx-metrics-more,
  body.roam-explore .inspector.view-today .v2-today-ready > .wx-metrics-more,
  body.roam-explore .inspector.view-today .v2-today-ready .wx-metrics-more {
    /* More row is 3 land metrics (Visibility / UV / Pressure). */
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body.roam-explore.insp-view-today .v2-today-ready > .wx-metrics-primary,
  body.roam-explore .inspector.view-today .v2-today-ready > .wx-metrics-primary {
    grid-row: 4 !important;
  }
  body.roam-explore.insp-view-today .v2-today-ready > .wx-metrics-more,
  body.roam-explore .inspector.view-today .v2-today-ready > .wx-metrics-more {
    grid-row: 5 !important;
  }
  /* Alert + hourly below land metrics (Boat puts these under the marine grid). */
  body.roam-explore.insp-view-today .v2-today-ready > .v2-today-change,
  body.roam-explore.insp-view-today .v2-today-ready > #v2-today-change,
  body.roam-explore .inspector.view-today .v2-today-ready > .v2-today-change,
  body.roam-explore .inspector.view-today .v2-today-ready > #v2-today-change {
    grid-column: 1 / -1 !important;
    grid-row: 6 !important;
    display: block !important;
    visibility: visible !important;
    margin: 4px 0 0 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
  }
  body.roam-explore.insp-view-today .v2-today-ready > .v2-today-hourly,
  body.roam-explore.insp-view-today .v2-today-ready > #v2-today-hourly,
  body.roam-explore .inspector.view-today .v2-today-ready > .v2-today-hourly,
  body.roam-explore .inspector.view-today .v2-today-ready > #v2-today-hourly {
    grid-column: 1 / -1 !important;
    grid-row: 7 !important;
  }
  body.roam-explore.insp-view-today .v2-today-ready > .v2-today-window,
  body.roam-explore.insp-view-today .v2-today-ready > #v2-today-window,
  body.roam-explore.insp-view-today .v2-today-ready > .ba-v2-today-model-compare,
  body.roam-explore.insp-view-today .v2-today-ready > #ba-v2-today-model-compare,
  body.roam-explore.insp-view-today .v2-today-ready > .v2-today-peek,
  body.roam-explore .inspector.view-today .v2-today-ready > .v2-today-window,
  body.roam-explore .inspector.view-today .v2-today-ready > .ba-v2-today-model-compare,
  body.roam-explore .inspector.view-today .v2-today-ready > #ba-v2-today-model-compare,
  body.roam-explore .inspector.view-today .v2-today-ready > .v2-today-peek {
    grid-column: 1 / -1 !important;
    grid-row: 8 !important;
  }
  body.roam-explore.insp-view-today .v2-today-ready .wx-metric,
  body.roam-explore .inspector.view-today .v2-today-ready .wx-metric {
    min-height: 64px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  body.roam-explore.insp-view-today .v2-today-ready .wx-metric[hidden],
  body.roam-explore.insp-view-today .v2-today-ready .wx-metric[aria-hidden="true"],
  body.roam-explore .inspector.view-today .v2-today-ready .wx-metric[hidden],
  body.roam-explore .inspector.view-today .v2-today-ready .wx-metric[aria-hidden="true"] {
    display: none !important;
  }
  body.roam-explore.insp-view-today #v2-today-hourly,
  body.roam-explore.insp-view-today .v2-today-hourly,
  body.roam-explore .inspector.view-today #v2-today-hourly,
  body.roam-explore .inspector.view-today .v2-today-hourly {
    display: block !important;
    visibility: visible !important;
    min-height: 7rem !important;
    margin-top: 8px !important;
  }
  body.roam-explore.insp-view-today .v2-today-hourly-hint,
  body.roam-explore .inspector.view-today .v2-today-hourly-hint {
    font-size: 0 !important;
  }
  body.roam-explore.insp-view-today .v2-today-hourly-hint::after,
  body.roam-explore .inspector.view-today .v2-today-hourly-hint::after {
    content: "Wind · temp · sky";
    font-size: 11px;
    font-weight: 500;
    color: rgba(238, 246, 248, 0.45);
  }
  body.roam-explore.insp-view-today #ba-v2-today-model-compare,
  body.roam-explore.insp-view-today .ba-v2-today-model-compare,
  body.roam-explore .inspector.view-today #ba-v2-today-model-compare,
  body.roam-explore .inspector.view-today .ba-v2-today-model-compare {
    display: block !important;
    visibility: visible !important;
  }
  body.roam-explore.insp-view-today .inspector.view-today.on,
  body.roam-explore .inspector.view-today.on {
    height: min(620px, var(--ev2-forecast-dock-max-h, 70dvh)) !important;
    max-height: min(620px, var(--ev2-forecast-dock-max-h, 70dvh)) !important;
    overflow: auto !important;
  }

  /* Keep #insp-today visible when Forecast workspace opens Today. */
  body.roam-explore.insp-view-today #insp-today,
  body.roam-explore .inspector.view-today #insp-today {
    display: block !important;
    visibility: visible !important;
  }

  /* Never let Boat inspector-tab / glance peek under the workspace bar. */
  body.roam-explore #inspector-tab,
  body.roam-explore .inspector-tab {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }
  body.roam-explore:not(.roam-desktop-forecast) .ba-v2-forecast-card,
  body.roam-explore:not(.roam-desktop-forecast) #inspector,
  body.roam-explore:not(.roam-desktop-forecast) .inspector {
    top: auto !important;
  }

  /*
   * Desktop CONDITIONS live in the React header ribbon — never resurface Boat
   * #wx-field-toggle pills (they duplicated Wind/Temp/Rain/Clouds/Play and
   * painted under the workspace bar with stray underlines + Wind tooltips).
   * Layers still apply via __baSetWxPreset / __baToggleSatOverlay / .click().
   * Beat explore-v2-shell `display: inline-flex !important` (atlas-scope /
   * mode-conditions / ev2-chrome-ready desktop rules).
   */
  body.roam-explore #wx-field-toggle,
  body.roam-explore .wx-field-toggle,
  body.roam-explore.explore-v2 #wx-field-toggle,
  body.roam-explore.explore-v2 .wx-field-toggle,
  body.roam-explore.explore-v2 .wx-field-toggle.on,
  body.roam-explore.atlas-scope.explore-v2 #wx-field-toggle,
  body.roam-explore.atlas-scope.explore-v2 .wx-field-toggle,
  body.roam-explore.atlas-scope.explore-v2 .wx-field-toggle.on,
  body.roam-explore.atlas-scope.explore-v2.mode-conditions #wx-field-toggle,
  body.roam-explore.atlas-scope.explore-v2.mode-conditions .wx-field-toggle,
  body.roam-explore.atlas-scope.explore-v2.mode-conditions .wx-field-toggle.on,
  body.roam-explore.explore-v2.ev2-chrome-ready #wx-field-toggle,
  body.roam-explore.explore-v2.ev2-chrome-ready .wx-field-toggle,
  body.roam-explore.explore-v2.ev2-chrome-ready:not(.nav-active):not(
      .nav-planning
    )
    #wx-field-toggle,
  body.roam-explore.explore-v2.ev2-chrome-ready:not(.nav-active):not(
      .nav-planning
    )
    .wx-field-toggle,
  body.roam-explore.explore-v2.ev2-chrome-ready:not(.nav-active):not(
      .nav-planning
    )
    .wx-field-toggle.on,
  body.atlas-scope.roam-explore.explore-v2.ev2-chrome-ready:not(.nav-active):not(
      .nav-planning
    )
    #wx-field-toggle,
  body.atlas-scope.roam-explore.explore-v2.ev2-chrome-ready:not(.nav-active):not(
      .nav-planning
    )
    .wx-field-toggle,
  body.atlas-scope.roam-explore.explore-v2.ev2-chrome-ready:not(.nav-active):not(
      .nav-planning
    )
    .wx-field-toggle.on,
  body.roam-explore.explore-v2.m-layers-open .wx-field-toggle.on {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  /* Boat chip hover tip ("Wind") — no target once pills are gated off. */
  body.roam-explore .ba-explore-tooltip {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /*
   * Play-only timeline: CONDITIONS chips toggle overlays only.
   * Do NOT unhide #data-dock for roam-desktop-weather / rain-scrub /
   * clouds-scrub — that auto-opened the scrubber on Wind/Rain/Clouds.
   */
  body.roam-explore:not(.v2-player-open):not(.v2-forecast-play) .data-dock,
  body.roam-explore:not(.v2-player-open):not(.v2-forecast-play) #data-dock,
  body.roam-explore.rain-scrub:not(.v2-player-open):not(.v2-forecast-play)
    .data-dock,
  body.roam-explore.rain-scrub:not(.v2-player-open):not(.v2-forecast-play)
    #data-dock,
  body.roam-explore.clouds-scrub:not(.v2-player-open):not(.v2-forecast-play)
    .data-dock,
  body.roam-explore.clouds-scrub:not(.v2-player-open):not(.v2-forecast-play)
    #data-dock,
  body.roam-explore.roam-desktop-weather:not(.v2-player-open):not(
      .v2-forecast-play
    )
    .data-dock,
  body.roam-explore.roam-desktop-weather:not(.v2-player-open):not(
      .v2-forecast-play
    )
    #data-dock,
  body.roam-explore.atlas-scope.explore-v2.rain-scrub:not(.v2-player-open):not(
      .v2-forecast-play
    )
    .data-dock,
  body.roam-explore.atlas-scope.explore-v2.clouds-scrub:not(.v2-player-open):not(
      .v2-forecast-play
    )
    .data-dock {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  /* Play mode — Boat Motion Forecast pill (only after intentional Play). */
  body.roam-explore.v2-player-open .data-dock,
  body.roam-explore.v2-forecast-play .data-dock,
  body.roam-explore.v2-player-open #data-dock,
  body.roam-explore.v2-forecast-play #data-dock {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }

  /* Place card owns the map focus — hide Boat weather pills + forecast dock. */
  body.roam-explore.roam-explore-place-open #wx-field-toggle,
  body.roam-explore.roam-explore-place-open .wx-field-toggle,
  body.roam-explore.roam-explore-place-open .data-dock,
  body.roam-explore.roam-explore-place-open #data-dock,
  body.roam-explore.roam-explore-place-open #wx-legend-depth,
  body.roam-explore.roam-explore-place-open .depth-legend,
  body.roam-explore.roam-explore-place-open #inspector,
  body.roam-explore.roam-explore-place-open .inspector {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Land Explore: never show marine Depth slider over the map. */
body.roam-explore #wx-legend-depth,
body.roam-explore #depth-legend,
body.roam-explore .depth-legend,
body.roam-explore [data-overlay="depth"],
body.roam-explore [data-overlay="bathymetry"],
body.roam-explore #ba-depth-safety-ack {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Clear Mapbox ± / compass from the NE Look stack. */
body.roam-explore .mapboxgl-ctrl-top-right {
  top: 4.5rem !important;
  right: 0.65rem !important;
  margin-top: 0 !important;
}

@media (min-width: 768px) {
  /*
   * Desktop: React owns the right tool dock. Hide Boat .map-tools so it
   * does not paint a wider ghost pill behind ExploreThumbDock.
   */
  body.roam-explore .map-tools,
  body.roam-explore .atlas-body-mount .map-tools,
  body.roam-explore.explore-v2 .map-tools,
  body.roam-explore.explore-v2 .atlas-body-mount .map-tools,
  body.roam-explore.explore-v2.ev2-chrome-ready .map-tools,
  body.roam-explore.explore-v2.ev2-chrome-ready .atlas-body-mount .map-tools,
  body.roam-explore.explore-v2.ev2-chrome-ready.ba-explore-mode-ready .map-tools,
  body.roam-explore.explore-v2.ev2-chrome-ready.ba-explore-mode-ready .atlas-body-mount .map-tools {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  /* Clear of the layer ribbon + vertical Explore tool rail. */
  body.roam-explore .mapboxgl-ctrl-top-right {
    top: var(--explore-desktop-chrome-top, 7.75rem) !important;
    right: 4.5rem !important;
  }
}

/* Forecast player and color keys belong in the open map.
   Boat parks both at the left edge, which covers the filter panel and its caret. */
body.roam-explore.explore-v2 {
  --roam-panel-w: min(100vw - 3.5rem, 20.5rem);
  --roam-caret-w: 2rem;
  --roam-header-clear: 4.75rem;
  --ev2-legend-label-w: 4.5rem;
  --ev2-legend-scale-min: 9.75rem;
  --ev2-left-stack-w: 17.5rem;
  /*
   * Boat computes layers/timeline tops from its own nav pill. Roam hides that
   * nav and owns CONDITIONS in React — remap so scrubber + legends clear it.
   */
  --ev2-nav-h: 0px;
  --ev2-layers-top: var(--explore-desktop-chrome-top, 7.75rem);
  --ev2-timeline-top: calc(
    var(--explore-desktop-chrome-top, 7.75rem) + 0.5rem
  );
  --ev2-forecast-card-top: var(--explore-desktop-chrome-top, 7.75rem);
  --ev2-tools-top: calc(
    var(--ev2-timeline-top) + var(--ev2-timeline-h, 72px) + 0.5rem
  );
}

@media (min-width: 768px) {
  body.roam-explore.explore-v2 {
    /* Desktop Layers has no edge caret — workspace bar owns open/close. */
    --roam-caret-w: 0rem;
    /* Must clear nav + Plan/On Trail/Layers/Forecast workspace row. */
    --roam-header-clear: var(--explore-desktop-chrome-top, 7.75rem);
  }

  /*
   * Weather indexes must sit below the workspace / CONDITIONS chrome.
   * Beat Boat rules that park legends under a lower --ev2-layers-top /
   * collapsed forecast card and collide with Plan / On Trail.
   */
  body.roam-explore.explore-v2 .ba-v2-layer-legends,
  body.roam-explore.explore-v2 .ba-v2-layer-legends:not(.is-collapsed),
  body.roam-explore.explore-v2 .ba-v2-layer-legends.has-legends:not(.is-collapsed),
  body.roam-explore.explore-v2.v2-forecast-collapsed .ba-v2-layer-legends:not(.is-collapsed),
  body.roam-explore.explore-v2:has(.inspector.collapsed) .ba-v2-layer-legends:not(.is-collapsed),
  body.roam-explore.explore-v2:has(.inspector.on:not(.collapsed)):not(.v2-forecast-collapsed)
    .ba-v2-layer-legends:not(.is-collapsed) {
    top: calc(var(--roam-header-clear) + 0.5rem) !important;
    left: 0.75rem !important;
    right: auto !important;
    z-index: 40 !important;
  }

  /* Land: hide marine Water °F SST index (Air °F is the Temp key). */
  body.roam-explore .ba-v2-layer-legend[data-legend="water"] {
    display: none !important;
    visibility: hidden !important;
  }

  /*
   * Collapse control: tuck into the index stack as a quiet text control
   * instead of a second floating HIDE^ pill under the workspace bar.
   */
  body.roam-explore.explore-v2
    .ba-v2-layer-legends.has-legends:not(.is-collapsed)
    > .ba-v2-legends-collapse:not([hidden]) {
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 8px !important;
    margin-top: 0 !important;
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
    opacity: 0.72 !important;
    box-shadow: none !important;
  }
}

/*
 * Desktop Play scrubber — under CONDITIONS (React chrome), not bottom of map.
 * Boat shell defaults --ev2-timeline-top under its own layer pills; Roam has
 * no visible #wx-field-toggle, so park the dock just below the workspace row.
 */
@media (min-width: 768px) {
  body.roam-explore.atlas-scope.explore-v2 .data-dock,
  body.roam-explore.atlas-scope.explore-v2:has(.inspector.on) .data-dock,
  body.roam-explore.atlas-scope.explore-v2:has(.inspector.on.week-open) .data-dock,
  body.roam-explore.atlas-scope.explore-v2.mode-conditions .data-dock,
  body.roam-explore.atlas-scope.explore-v2.mode-conditions:has(.inspector.on)
    .data-dock,
  body.roam-explore.atlas-scope.explore-v2.mode-conditions:has(
      .inspector.on.week-open
    )
    .data-dock,
  body.roam-explore.atlas-scope.explore-v2.v2-player-open .data-dock,
  body.roam-explore.atlas-scope.explore-v2.v2-forecast-play .data-dock,
  body.roam-explore.atlas-scope.explore-v2.rain-scrub .data-dock,
  body.roam-explore.atlas-scope.explore-v2.clouds-scrub .data-dock,
  body.roam-explore.atlas-scope.explore-v2.mode-conditions.v2-player-open
    .data-dock {
    top: calc(var(--explore-desktop-chrome-top, 7.75rem) + 0.45rem) !important;
    bottom: auto !important;
    height: auto !important;
    min-height: var(--ev2-timeline-h, 72px) !important;
    right: auto !important;
    left: 50% !important;
    width: min(720px, calc(100vw - 7rem)) !important;
    transform: translateX(-50%) !important;
    z-index: 55 !important;
    pointer-events: auto !important;
  }

  /* Weather indexes clear of Motion Forecast pill — Play only, not rain-scrub alone. */
  body.roam-explore.explore-v2.v2-player-open .ba-v2-layer-legends,
  body.roam-explore.explore-v2.v2-forecast-play .ba-v2-layer-legends,
  body.roam-explore.explore-v2.v2-player-open
    .ba-v2-layer-legends:not(.is-collapsed),
  body.roam-explore.explore-v2.v2-forecast-play
    .ba-v2-layer-legends:not(.is-collapsed) {
    top: calc(
      var(--ev2-timeline-top) + var(--ev2-timeline-h, 72px) + 0.75rem
    ) !important;
  }
}

/* rain/clouds scrub classes alone must not resurrect the player pill. */
body.roam-explore.atlas-scope.explore-v2.v2-player-open .data-dock,
body.roam-explore.atlas-scope.explore-v2.v2-forecast-play .data-dock {
  display: flex !important;
}

body.roam-explore.roam-explore-panel-open.atlas-scope.explore-v2 .data-dock,
body.roam-explore.roam-explore-panel-open.atlas-scope.explore-v2:has(.inspector.on) .data-dock,
body.roam-explore.roam-explore-panel-open.atlas-scope.explore-v2:has(.inspector.on.week-open) .data-dock,
body.roam-explore.roam-explore-panel-open.atlas-scope.explore-v2.mode-conditions .data-dock,
body.roam-explore.roam-explore-panel-open.atlas-scope.explore-v2.mode-conditions:has(.inspector.on) .data-dock,
body.roam-explore.roam-explore-panel-open.atlas-scope.explore-v2.mode-conditions:has(.inspector.on.week-open) .data-dock,
body.roam-explore.atlas-scope.explore-v2:has(#explore-filter-panel:not([aria-hidden="true"])) .data-dock,
body.roam-explore.atlas-scope.explore-v2.mode-conditions:has(#explore-filter-panel:not([aria-hidden="true"])) .data-dock,
body.roam-explore.atlas-scope.explore-v2.rain-scrub:has(#explore-filter-panel:not([aria-hidden="true"])) .data-dock,
body.roam-explore.atlas-scope.explore-v2.clouds-scrub:has(#explore-filter-panel:not([aria-hidden="true"])) .data-dock,
body.roam-explore.atlas-scope.explore-v2.v2-player-open:has(#explore-filter-panel:not([aria-hidden="true"])) .data-dock {
  left: calc(50% + (var(--roam-panel-w) + var(--roam-caret-w)) / 2) !important;
  width: min(720px, calc(100vw - var(--roam-panel-w) - var(--roam-caret-w) - 2rem)) !important;
}

body.roam-explore.explore-v2 .scrubber .play,
body.roam-explore.explore-v2 .ba-v2-player-close {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  flex: 0 0 36px !important;
  position: relative !important;
  z-index: 3 !important;
  pointer-events: auto !important;
}

/* Wind, waves, and temp use the 24-hour tick row. Rain and clouds replace it
   with their own hour marks, so leave that mode alone. */
body.roam-explore.explore-v2:not(.rain-scrub):not(.clouds-scrub) .data-dock .timeline-dock,
body.roam-explore.explore-v2:not(.rain-scrub):not(.clouds-scrub) .scrubber,
body.roam-explore.explore-v2:not(.rain-scrub):not(.clouds-scrub) .scrubber .body {
  height: auto !important;
  overflow: visible !important;
}

body.roam-explore.explore-v2:not(.rain-scrub):not(.clouds-scrub) #scrub-ticks {
  display: flex !important;
  position: relative !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  width: 100% !important;
  height: auto !important;
  min-height: 16px !important;
  margin-top: 4px !important;
  overflow: visible !important;
  pointer-events: none !important;
  font: 600 10px/16px var(--font-ba-sans, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif) !important;
  letter-spacing: 0.04em !important;
  color: rgba(238, 246, 248, 0.78) !important;
}

body.roam-explore.explore-v2:not(.rain-scrub):not(.clouds-scrub) #scrub-ticks span {
  position: static !important;
  left: auto !important;
  transform: none !important;
  flex: 0 1 auto !important;
  max-width: none !important;
  overflow: visible !important;
  color: inherit !important;
  font: inherit !important;
}

body.roam-explore.explore-v2 .ba-v2-layer-legends:not(.is-collapsed),
body.roam-explore.explore-v2.v2-forecast-collapsed .ba-v2-layer-legends:not(.is-collapsed),
body.roam-explore.explore-v2:has(.inspector.collapsed) .ba-v2-layer-legends:not(.is-collapsed),
body.roam-explore.explore-v2:has(.inspector.on:not(.collapsed)):not(.v2-forecast-collapsed) .ba-v2-layer-legends:not(.is-collapsed),
body.roam-explore.explore-v2 .ba-v2-layer-legends.has-legends:not(.is-collapsed) {
  top: calc(var(--roam-header-clear) + 0.5rem) !important;
  right: auto !important;
  bottom: auto !important;
  left: 0.75rem !important;
  width: min(17.5rem, calc(100vw - 5rem)) !important;
  min-width: min(17.5rem, calc(100vw - 5rem)) !important;
  max-width: min(17.5rem, calc(100vw - 5rem)) !important;
  align-items: flex-start !important;
  z-index: 45 !important;
}

/* Index below Motion Forecast pill — must win over the default top above. */
@media (min-width: 768px) {
  body.roam-explore.explore-v2.v2-player-open .ba-v2-layer-legends,
  body.roam-explore.explore-v2.v2-forecast-play .ba-v2-layer-legends,
  body.roam-explore.explore-v2.v2-player-open .ba-v2-layer-legends:not(.is-collapsed),
  body.roam-explore.explore-v2.v2-forecast-play .ba-v2-layer-legends:not(.is-collapsed),
  body.roam-explore.explore-v2.v2-player-open
    .ba-v2-layer-legends.has-legends:not(.is-collapsed),
  body.roam-explore.explore-v2.v2-forecast-play
    .ba-v2-layer-legends.has-legends:not(.is-collapsed),
  body.roam-explore.explore-v2.v2-player-open.v2-forecast-collapsed
    .ba-v2-layer-legends:not(.is-collapsed),
  body.roam-explore.explore-v2.v2-forecast-play.v2-forecast-collapsed
    .ba-v2-layer-legends:not(.is-collapsed) {
    top: calc(
      var(--ev2-timeline-top) + var(--ev2-timeline-h, 72px) + 0.75rem
    ) !important;
    left: 0.75rem !important;
    z-index: 46 !important;
  }
}

body.roam-explore.roam-explore-panel-open.explore-v2 .ba-v2-layer-legends:not(.is-collapsed),
body.roam-explore.roam-explore-panel-open.explore-v2.v2-forecast-collapsed .ba-v2-layer-legends:not(.is-collapsed),
body.roam-explore.roam-explore-panel-open.explore-v2:has(.inspector.collapsed) .ba-v2-layer-legends:not(.is-collapsed),
body.roam-explore.roam-explore-panel-open.explore-v2:has(.inspector.on:not(.collapsed)):not(.v2-forecast-collapsed) .ba-v2-layer-legends:not(.is-collapsed),
body.roam-explore.roam-explore-panel-open.explore-v2 .ba-v2-layer-legends.has-legends:not(.is-collapsed),
body.roam-explore.roam-explore-panel-open.explore-v2.rain-scrub .ba-v2-layer-legends:not(.is-collapsed),
body.roam-explore.roam-explore-panel-open.explore-v2.clouds-scrub .ba-v2-layer-legends:not(.is-collapsed),
body.roam-explore.roam-explore-panel-open.explore-v2.v2-player-open .ba-v2-layer-legends:not(.is-collapsed),
body.roam-explore.explore-v2:has(#explore-filter-panel:not([aria-hidden="true"])) .ba-v2-layer-legends:not(.is-collapsed),
body.roam-explore.explore-v2.rain-scrub:has(#explore-filter-panel:not([aria-hidden="true"])) .ba-v2-layer-legends:not(.is-collapsed),
body.roam-explore.explore-v2.clouds-scrub:has(#explore-filter-panel:not([aria-hidden="true"])) .ba-v2-layer-legends:not(.is-collapsed),
body.roam-explore.explore-v2.v2-player-open:has(#explore-filter-panel:not([aria-hidden="true"])) .ba-v2-layer-legends:not(.is-collapsed) {
  left: calc(var(--roam-panel-w) + var(--roam-caret-w) + 0.75rem) !important;
}

/* 75 and 100 were landing on the same pixels in the 88px clouds track. */
body.roam-explore.explore-v2 .ba-v2-layer-legend__ticks,
body.roam-explore.explore-v2 .ba-v2-temp-legend__ticks {
  overflow: visible;
}

body.roam-explore .mapboxgl-ctrl-bottom-left,
body.roam-explore .mapboxgl-ctrl-bottom-right {
  bottom: 4.5rem !important;
}

/* Scrubber is top-docked on desktop — no bottom Mapbox lift for Play. */
@media (max-width: 767px) {
  body.roam-explore.rain-scrub .mapboxgl-ctrl-bottom-left,
  body.roam-explore.rain-scrub .mapboxgl-ctrl-bottom-right,
  body.roam-explore.clouds-scrub .mapboxgl-ctrl-bottom-left,
  body.roam-explore.clouds-scrub .mapboxgl-ctrl-bottom-right,
  body.roam-explore.v2-player-open .mapboxgl-ctrl-bottom-left,
  body.roam-explore.v2-player-open .mapboxgl-ctrl-bottom-right {
    bottom: calc(
      1.25rem + 2.75rem + 0.65rem + var(--ev2-timeline-h) + 0.5rem
    ) !important;
  }
}

/*
 * Map gestures: atlas #map must stay hittable under React POI chrome.
 * React overlays use pointer-events-none roots; only chips/panels opt in.
 */
body.roam-explore .atlas-body-mount,
body.roam-explore .atlas-body-mount #map,
body.roam-explore .atlas-body-mount .mapboxgl-map,
body.roam-explore .atlas-body-mount .mapboxgl-canvas-container,
body.roam-explore .atlas-body-mount .mapboxgl-canvas {
  pointer-events: auto !important;
}

/* Boat instrument chrome above the canvas */
body.roam-explore .wx-field-toggle,
body.roam-explore #wx-field-toggle,
body.roam-explore .map-tools,
body.roam-explore .data-dock,
body.roam-explore .scrubber,
body.roam-explore #scrubber,
body.roam-explore .inspector,
body.roam-explore .ba-v2-forecast-card {
  pointer-events: auto !important;
}

/*
 * Field / GPS follow: hide Boat thumb dock (empty glass slab on phone) and
 * Mapbox attribution collision so the light HUD owns the bottom edge.
 */
body.roam-explore.roam-field-immersive .map-tools,
body.roam-explore.roam-field-immersive .atlas-body-mount .map-tools,
body.roam-explore.roam-field-immersive .ba-v2-layer-legends,
body.roam-explore.roam-field-immersive .ev2-legal {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.roam-explore.roam-field-immersive:not(.roam-field-weather) #wx-field-toggle,
body.roam-explore.roam-field-immersive:not(.roam-field-weather) .wx-field-toggle {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.roam-explore.roam-field-immersive.roam-field-weather #wx-field-toggle,
body.roam-explore.roam-field-immersive.roam-field-weather .wx-field-toggle {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 70 !important;
}

@media (max-width: 767px) {
  /*
   * Phone Explore: React owns chrome. Beat explore-v2
   * `ba-explore-mode-ready .map-tools { display:flex !important }` so the
   * empty Boat thumb slab never returns under the Field / Places HUD.
   */
  body.roam-explore.explore-v2 .map-tools,
  body.roam-explore.explore-v2 .atlas-body-mount .map-tools,
  body.roam-explore.explore-v2.ev2-chrome-ready .map-tools,
  body.roam-explore.explore-v2.ev2-chrome-ready .atlas-body-mount .map-tools,
  body.roam-explore.explore-v2.ev2-chrome-ready.ba-explore-mode-ready .map-tools,
  body.roam-explore.explore-v2.ev2-chrome-ready.ba-explore-mode-ready .atlas-body-mount .map-tools,
  body.atlas-scope.roam-explore.explore-v2.ev2-chrome-ready.ba-explore-mode-ready .map-tools,
  /* Keep scrubber only for intentional Play — not Rain/Clouds layer alone. */
  body.roam-explore:not(.roam-phone-weather):not(.v2-player-open):not(.v2-forecast-play) .data-dock,
  body.roam-explore:not(.roam-phone-weather):not(.v2-player-open):not(.v2-forecast-play) .scrubber,
  body.roam-explore:not(.roam-phone-weather):not(.v2-player-open):not(.v2-forecast-play) #scrubber,
  body.roam-explore:not(.roam-phone-weather) .inspector,
  body.roam-explore .ba-v2-forecast-card,
  body.roam-explore .ba-v2-layer-legends,
  body.roam-explore .m-summary,
  body.roam-explore #m-cond-peek,
  body.roam-explore .coverage-chip,
  body.roam-explore .legend-chip,
  body.roam-explore .ev2-legal,
  body.roam-explore .m-tabbar,
  body.roam-explore #m-tabbar,
  body.roam-explore .ba-tabbar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    min-height: 0 !important;
    opacity: 0 !important;
  }

  body.roam-explore:not(.roam-field-weather):not(.roam-phone-weather) #wx-field-toggle,
  body.roam-explore:not(.roam-field-weather):not(.roam-phone-weather) .wx-field-toggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /*
   * Weather → Boat Explore phone sheet composition:
   * [scrollable Now/Today/7D content]
   * [tabs pinned at BOTTOM of sheet]
   * [scrubber only while rain/clouds/player]
   * [thumb dock]
   * No zoom rail; field chips stay off unless layers/player needs them.
   */
  body.roam-explore.roam-phone-weather {
    --roam-thumb-stack: calc(
      env(safe-area-inset-bottom, 0px) + 0.35rem + 3.5rem
    );
  }

  body.roam-explore.roam-phone-weather .inspector,
  body.roam-explore.roam-phone-weather .inspector.on,
  body.roam-explore.roam-phone-weather .inspector.on.m-open {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: calc(var(--roam-thumb-stack) + 1.35rem) !important;
    width: auto !important;
    height: auto !important;
    max-height: calc(
      100dvh - var(--roam-thumb-stack) - 5.5rem -
        env(safe-area-inset-top, 0px)
    ) !important;
    max-width: none !important;
    border-radius: 24px !important;
    z-index: 76 !important;
    transform: none !important;
    background: rgb(12 40 56 / 94%) !important;
    border: 1px solid rgb(245 239 228 / 14%) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;
    overflow: hidden !important;
  }

  body.roam-explore.roam-phone-weather.rain-scrub .inspector,
  body.roam-explore.roam-phone-weather.clouds-scrub .inspector,
  body.roam-explore.roam-phone-weather.v2-player-open .inspector,
  body.roam-explore.roam-phone-weather.rain-scrub .inspector.on.m-open,
  body.roam-explore.roam-phone-weather.clouds-scrub .inspector.on.m-open,
  body.roam-explore.roam-phone-weather.v2-player-open .inspector.on.m-open {
    bottom: calc(var(--roam-thumb-stack) + 4.25rem) !important;
  }

  body.roam-explore.roam-phone-weather .inspector .inspector-shell {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: inherit !important;
    background: transparent !important;
    color: #f5efe4 !important;
    overflow: hidden !important;
  }

  body.roam-explore.roam-phone-weather .inspector .inspector-core {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    background: transparent !important;
    color: #f5efe4 !important;
    padding: 12px 14px 8px !important;
  }

  /* Now / Today / 7D at the BOTTOM of the sheet (Boat phone). */
  body.roam-explore.roam-phone-weather .inspector .m-insp-tabs {
    display: flex !important;
    order: 3 !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    min-height: 60px !important;
    padding: 10px 12px 12px !important;
    border-top: 1px solid rgb(245 239 228 / 12%) !important;
    border-bottom: 0 !important;
    background: rgb(12 40 56 / 98%) !important;
    z-index: 5 !important;
  }

  body.roam-explore.roam-phone-weather .inspector .mit-seg {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 44px !important;
    padding: 3px !important;
    border-radius: 14px !important;
    background: rgba(4, 24, 32, 0.45) !important;
    border: 1px solid rgb(245 239 228 / 12%) !important;
  }

  body.roam-explore.roam-phone-weather .inspector .mit-tab {
    flex: 1 1 0 !important;
    min-height: 36px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgba(238, 243, 248, 0.78) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Hide legacy Now — tabs are Today · 7-Day · Play. */
  body.roam-explore.roam-phone-weather .inspector .mit-tab[data-insp-view="now"],
  body.roam-explore.roam-phone-weather .inspector .mit-tab[hidden] {
    display: none !important;
  }

  body.roam-explore.roam-phone-weather .inspector .mit-tab.on,
  body.roam-explore.roam-phone-weather .inspector .mit-tab[aria-pressed="true"] {
    background: transparent !important;
    color: var(--brand-action, #e76f3c) !important;
    box-shadow: inset 0 -2px 0 var(--brand-action, #e76f3c) !important;
  }

  body.roam-explore.roam-phone-weather .inspector .mit-close {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 10px !important;
    background: transparent !important;
  }

  body.roam-explore.roam-phone-weather .inspector #insp-seg,
  body.roam-explore.roam-phone-weather .inspector .insp-seg,
  body.roam-explore.roam-phone-weather .inspector .inspector-head,
  body.roam-explore.roam-phone-weather .inspector .insp-collapse,
  body.roam-explore.roam-phone-weather .inspector #inspector-hide,
  body.roam-explore.roam-phone-weather .inspector .insp-forecast-disclaimer,
  body.roam-explore.roam-phone-weather .inspector .guidance,
  body.roam-explore.roam-phone-weather .inspector #guidance,
  body.roam-explore.roam-phone-weather .inspector .inq:has(#wx-waves-now),
  body.roam-explore.roam-phone-weather .inspector #wx-waves-now,
  body.roam-explore.roam-phone-weather .inspector #wx-waves-prov {
    display: none !important;
  }

  /* Field strip off during weather sheet (Boat closes layers when sheet opens). */
  body.roam-explore.roam-phone-weather #wx-field-toggle,
  body.roam-explore.roam-phone-weather .wx-field-toggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Phone: timeline only while Play is open — not when a layer chip alone is on. */
  body.roam-explore.roam-phone-weather:not(.v2-player-open):not(.v2-forecast-play)
    .data-dock,
  body.roam-explore.roam-phone-weather:not(.v2-player-open):not(.v2-forecast-play)
    #data-dock {
    display: none !important;
  }

  body.roam-explore.v2-player-open,
  body.roam-explore.v2-forecast-play {
    --roam-thumb-stack: calc(
      env(safe-area-inset-bottom, 0px) + 0.35rem + 3.5rem
    );
  }

  body.roam-explore.v2-player-open .data-dock,
  body.roam-explore.v2-forecast-play .data-dock,
  body.roam-explore.v2-player-open #data-dock,
  body.roam-explore.v2-forecast-play #data-dock {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: var(--roam-thumb-stack) !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 3.75rem !important;
    opacity: 1 !important;
    z-index: 76 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  body.roam-explore.rain-scrub .scrubber,
  body.roam-explore.clouds-scrub .scrubber,
  body.roam-explore.v2-player-open .scrubber,
  body.roam-explore.v2-forecast-play .scrubber,
  body.roam-explore.rain-scrub #scrubber,
  body.roam-explore.clouds-scrub #scrubber,
  body.roam-explore.v2-player-open #scrubber,
  body.roam-explore.v2-forecast-play #scrubber,
  body.roam-explore.rain-scrub .timeline-dock,
  body.roam-explore.clouds-scrub .timeline-dock,
  body.roam-explore.v2-player-open .timeline-dock,
  body.roam-explore.v2-forecast-play .timeline-dock {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    height: auto !important;
    min-height: 0 !important;
    opacity: 1 !important;
    border-radius: 14px !important;
    background: rgb(15 59 82 / 90%) !important;
  }

  body.roam-explore.roam-phone-weather #m-cond-peek,
  body.roam-explore.roam-phone-weather #mcp-score,
  body.roam-explore.roam-phone-weather .tide-layer,
  body.roam-explore.roam-phone-weather #tide-layer,
  body.roam-explore.roam-phone-weather .wave-curls,
  body.roam-explore.roam-phone-weather #wave-bars,
  body.roam-explore.roam-phone-weather #inspector-tab,
  body.roam-explore.roam-phone-weather .data-dock .guidance,
  body.roam-explore.roam-phone-weather .data-dock #guidance,
  body.roam-explore.roam-phone-weather .data-dock .m-week-strip {
    display: none !important;
  }

  /* Phone Explore: Mapbox chrome off — Location + thumb own the map. */
  body.roam-explore .mapboxgl-ctrl-bottom-left,
  body.roam-explore .mapboxgl-ctrl-bottom-right,
  body.roam-explore .mapboxgl-ctrl-top-right,
  body.roam-explore .mapboxgl-ctrl-top-left,
  body.roam-explore .mapboxgl-ctrl-logo,
  body.roam-explore .mapboxgl-ctrl-attrib {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Safety (i) lives in React top nav — hide Boat floating / rail info. */
body.roam-explore #ba-safety-data-btn,
body.roam-explore .ba-safety-data-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Today satellite peek — below hourly (row 7), not colliding with it. */
body.roam-explore.explore-v2 .v2-today-ready > .v2-today-peek {
  grid-column: 1 / -1;
  grid-row: 8;
}
body.roam-explore.explore-v2 .v2-today-peek {
  display: block;
  width: 100%;
  height: 168px;
  margin: 16px 0 0 !important;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: #041820;
  cursor: pointer;
  text-align: left;
}
body.roam-explore.explore-v2 .v2-today-peek[hidden] {
  display: none;
}
body.roam-explore.explore-v2 .v2-today-peek-media {
  position: absolute;
  inset: 0;
}
body.roam-explore.explore-v2 .v2-today-peek-media img,
body.roam-explore.explore-v2 .v2-today-peek-media canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.roam-explore.explore-v2 .v2-today-peek-base {
  z-index: 0;
  filter: brightness(0.82) saturate(0.92);
}
body.roam-explore.explore-v2 .v2-today-peek-wx,
body.roam-explore.explore-v2 .v2-today-peek-media canvas {
  z-index: 1;
  pointer-events: none;
}
body.roam-explore.explore-v2 .v2-today-peek-dot {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -7px 0 0 -7px;
  border-radius: 999px;
  background: var(--brand-action, #e76f3c);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(4, 24, 32, 0.45);
  pointer-events: none;
}
body.roam-explore.explore-v2 .v2-today-peek-copy,
body.roam-explore.explore-v2 .v2-today-peek-credit {
  position: absolute;
  z-index: 3;
  left: 12px;
  bottom: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(4, 24, 32, 0.55);
}
body.roam-explore.explore-v2 .v2-today-peek-credit {
  left: auto;
  right: 12px;
  bottom: 12px;
  font-size: 11px;
  font-weight: 500;
}

/*
 * Map popups — restore padding/gaps wiped by Boat
 * `body.atlas-scope .atlas-body-mount * { margin:0; padding:0 }`.
 * Spacing only; chrome stays as globals.css.
 */
body.roam-explore .atlas-body-mount .rv-map-hover {
  padding: 10px 12px !important;
  gap: 4px !important;
}

body.roam-explore .atlas-body-mount .rv-map-hover-popup .mapboxgl-popup-content,
body.roam-explore .atlas-body-mount .rv-map-hover-popup .maplibregl-popup-content,
body.roam-explore .atlas-body-mount .rv-map-mvum-popup-root .mapboxgl-popup-content,
body.roam-explore .atlas-body-mount .rv-map-mvum-popup-root .maplibregl-popup-content,
body.roam-explore .atlas-body-mount .rv-map-trail-popup-root .mapboxgl-popup-content,
body.roam-explore .atlas-body-mount .rv-map-trail-popup-root .maplibregl-popup-content {
  padding: 0 !important;
}

body.roam-explore .atlas-body-mount .rv-map-mvum-popup strong,
body.roam-explore .atlas-body-mount .rv-map-mvum-popup span {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

body.roam-explore .atlas-body-mount .rv-map-mvum-popup strong {
  margin-top: 8px !important;
}

body.roam-explore .atlas-body-mount .rv-map-mvum-popup span:last-child {
  padding-bottom: 12px !important;
}

body.roam-explore .atlas-body-mount .rv-map-trail-popup {
  padding: 18px 18px 16px !important;
  gap: 12px !important;
}

body.roam-explore .atlas-body-mount .rv-map-trail-popup__eyebrow {
  padding-right: 28px !important;
}

body.roam-explore .atlas-body-mount .rv-map-trail-popup-root .mapboxgl-popup-close-button,
body.roam-explore .atlas-body-mount .rv-map-trail-popup-root .maplibregl-popup-close-button {
  top: 10px !important;
  right: 10px !important;
  padding: 6px 10px !important;
}

body.roam-explore .atlas-body-mount .rv-map-trail-popup__chip {
  padding: 4px 10px !important;
}

body.roam-explore .atlas-body-mount .rv-map-trail-popup__facts {
  padding: 12px 0 4px !important;
  gap: 10px !important;
}

body.roam-explore .atlas-body-mount .rv-map-trail-popup__actions {
  padding-top: 4px !important;
  gap: 8px !important;
}

body.roam-explore .atlas-body-mount .rv-map-trail-popup__action {
  padding: 7px 14px !important;
}

body.roam-explore .atlas-body-mount .rv-map-trail-popup__note {
  padding-top: 4px !important;
}

/*
 * CONDITIONS chrome — last-word overrides (load after explore-v2-shell via
 * zz-roam-gate precedence). Beat shell `display: inline-flex !important` and
 * phone `top:auto; bottom:…` scrubber rules that otherwise peek under the
 * React CONDITIONS ribbon or park Play at the bottom of the map.
 */
@media (min-width: 768px) {
  body.roam-explore #wx-field-toggle,
  body.roam-explore #wx-field-toggle.wx-field-toggle,
  body.roam-explore #wx-field-toggle.wx-field-toggle.on,
  body.roam-explore .wx-field-toggle,
  body.roam-explore .wx-field-toggle.on,
  body.roam-explore.explore-v2 #wx-field-toggle,
  body.roam-explore.explore-v2 #wx-field-toggle.wx-field-toggle,
  body.roam-explore.explore-v2 #wx-field-toggle.wx-field-toggle.on,
  body.roam-explore.explore-v2 .wx-field-toggle,
  body.roam-explore.explore-v2 .wx-field-toggle.on,
  body.roam-explore.atlas-scope.explore-v2 #wx-field-toggle,
  body.roam-explore.atlas-scope.explore-v2 #wx-field-toggle.wx-field-toggle,
  body.roam-explore.atlas-scope.explore-v2 #wx-field-toggle.wx-field-toggle.on,
  body.roam-explore.atlas-scope.explore-v2 .wx-field-toggle,
  body.roam-explore.atlas-scope.explore-v2 .wx-field-toggle.on,
  body.roam-explore.atlas-scope.explore-v2.mode-conditions #wx-field-toggle,
  body.roam-explore.atlas-scope.explore-v2.mode-conditions
    #wx-field-toggle.wx-field-toggle,
  body.roam-explore.atlas-scope.explore-v2.mode-conditions
    #wx-field-toggle.wx-field-toggle.on,
  body.roam-explore.atlas-scope.explore-v2.mode-conditions .wx-field-toggle,
  body.roam-explore.atlas-scope.explore-v2.mode-conditions .wx-field-toggle.on,
  body.roam-explore.explore-v2.ev2-chrome-ready #wx-field-toggle,
  body.roam-explore.explore-v2.ev2-chrome-ready #wx-field-toggle.wx-field-toggle,
  body.roam-explore.explore-v2.ev2-chrome-ready
    #wx-field-toggle.wx-field-toggle.on,
  body.roam-explore.explore-v2.ev2-chrome-ready .wx-field-toggle,
  body.roam-explore.explore-v2.ev2-chrome-ready .wx-field-toggle.on,
  body.roam-explore.explore-v2.ev2-chrome-ready:not(.nav-active):not(
      .nav-planning
    )
    #wx-field-toggle,
  body.roam-explore.explore-v2.ev2-chrome-ready:not(.nav-active):not(
      .nav-planning
    )
    #wx-field-toggle.wx-field-toggle,
  body.roam-explore.explore-v2.ev2-chrome-ready:not(.nav-active):not(
      .nav-planning
    )
    #wx-field-toggle.wx-field-toggle.on,
  body.roam-explore.explore-v2.ev2-chrome-ready:not(.nav-active):not(
      .nav-planning
    )
    .wx-field-toggle,
  body.roam-explore.explore-v2.ev2-chrome-ready:not(.nav-active):not(
      .nav-planning
    )
    .wx-field-toggle.on,
  body.atlas-scope.roam-explore.explore-v2.ev2-chrome-ready:not(.nav-active):not(
      .nav-planning
    )
    #wx-field-toggle,
  body.atlas-scope.roam-explore.explore-v2.ev2-chrome-ready:not(.nav-active):not(
      .nav-planning
    )
    #wx-field-toggle.wx-field-toggle.on,
  body.roam-explore.explore-v2.m-layers-open .wx-field-toggle.on,
  body.roam-explore.explore-v2.m-layers-open #wx-field-toggle.wx-field-toggle.on {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body.roam-explore .ba-explore-tooltip,
  body.roam-explore .ba-v2-layer-scroll-hint {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Play scrubber — under CONDITIONS, never bottom (beats ≤900px Boat bottom). */
  body.roam-explore #data-dock,
  body.roam-explore #data-dock.data-dock,
  body.roam-explore .data-dock,
  body.roam-explore.atlas-scope.explore-v2 #data-dock,
  body.roam-explore.atlas-scope.explore-v2 #data-dock.data-dock,
  body.roam-explore.atlas-scope.explore-v2 .data-dock,
  body.roam-explore.atlas-scope.explore-v2.mode-conditions #data-dock,
  body.roam-explore.atlas-scope.explore-v2.mode-conditions .data-dock,
  body.roam-explore.atlas-scope.explore-v2.v2-player-open #data-dock,
  body.roam-explore.atlas-scope.explore-v2.v2-player-open .data-dock,
  body.roam-explore.atlas-scope.explore-v2.v2-forecast-play #data-dock,
  body.roam-explore.atlas-scope.explore-v2.v2-forecast-play .data-dock,
  body.roam-explore.atlas-scope.explore-v2.rain-scrub #data-dock,
  body.roam-explore.atlas-scope.explore-v2.rain-scrub .data-dock,
  body.roam-explore.atlas-scope.explore-v2.clouds-scrub #data-dock,
  body.roam-explore.atlas-scope.explore-v2.clouds-scrub .data-dock,
  body.roam-explore.atlas-scope.explore-v2.mode-conditions.v2-player-open
    #data-dock,
  body.roam-explore.atlas-scope.explore-v2.mode-conditions.v2-player-open
    .data-dock,
  body.roam-explore.atlas-scope.explore-v2.mode-conditions.rain-scrub #data-dock,
  body.roam-explore.atlas-scope.explore-v2.mode-conditions.rain-scrub .data-dock,
  body.roam-explore.atlas-scope.explore-v2.mode-conditions.clouds-scrub
    #data-dock,
  body.roam-explore.atlas-scope.explore-v2.mode-conditions.clouds-scrub
    .data-dock,
  body.roam-explore.atlas-scope.explore-v2:has(.inspector.on) #data-dock,
  body.roam-explore.atlas-scope.explore-v2:has(.inspector.on) .data-dock,
  body.roam-explore.atlas-scope.explore-v2:has(.inspector.on.week-open)
    #data-dock,
  body.roam-explore.atlas-scope.explore-v2:has(.inspector.on.week-open)
    .data-dock {
    top: var(--ev2-timeline-top) !important;
    bottom: auto !important;
    height: auto !important;
    min-height: var(--ev2-timeline-h, 72px) !important;
    z-index: 55 !important;
  }

  body.roam-explore.v2-player-open #data-dock,
  body.roam-explore.v2-player-open .data-dock,
  body.roam-explore.v2-forecast-play #data-dock,
  body.roam-explore.v2-forecast-play .data-dock {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }

  /* Beat Boat mobile rain-scrub:not(.v2-player-open) { display:flex } rules. */
  body.roam-explore.atlas-scope.explore-v2.rain-scrub:not(.v2-player-open):not(
      .v2-forecast-play
    )
    #data-dock,
  body.roam-explore.atlas-scope.explore-v2.rain-scrub:not(.v2-player-open):not(
      .v2-forecast-play
    )
    .data-dock,
  body.roam-explore.atlas-scope.explore-v2.clouds-scrub:not(.v2-player-open):not(
      .v2-forecast-play
    )
    #data-dock,
  body.roam-explore.atlas-scope.explore-v2.clouds-scrub:not(.v2-player-open):not(
      .v2-forecast-play
    )
    .data-dock,
  body.roam-explore.atlas-scope.explore-v2.mode-conditions.rain-scrub:not(
      .v2-player-open
    ):not(.v2-forecast-play)
    #data-dock,
  body.roam-explore.atlas-scope.explore-v2.mode-conditions.rain-scrub:not(
      .v2-player-open
    ):not(.v2-forecast-play)
    .data-dock,
  body.roam-explore.atlas-scope.explore-v2.mode-conditions.clouds-scrub:not(
      .v2-player-open
    ):not(.v2-forecast-play)
    #data-dock,
  body.roam-explore.atlas-scope.explore-v2.mode-conditions.clouds-scrub:not(
      .v2-player-open
    ):not(.v2-forecast-play)
    .data-dock {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }
}

/*
 * Final Play-only gate (all breakpoints). Beats Boat explore-v2-shell
 * `rain-scrub:not(.v2-player-open) { display:flex }` so Wind/Temp/Rain/Clouds
 * never auto-open #data-dock — only intentional Play / v2-forecast-play.
 */
body.roam-explore:not(.v2-player-open):not(.v2-forecast-play) #data-dock,
body.roam-explore:not(.v2-player-open):not(.v2-forecast-play) .data-dock,
body.roam-explore.rain-scrub:not(.v2-player-open):not(.v2-forecast-play) #data-dock,
body.roam-explore.rain-scrub:not(.v2-player-open):not(.v2-forecast-play) .data-dock,
body.roam-explore.clouds-scrub:not(.v2-player-open):not(.v2-forecast-play) #data-dock,
body.roam-explore.clouds-scrub:not(.v2-player-open):not(.v2-forecast-play) .data-dock,
body.roam-explore.roam-desktop-weather:not(.v2-player-open):not(.v2-forecast-play)
  #data-dock,
body.roam-explore.roam-desktop-weather:not(.v2-player-open):not(.v2-forecast-play)
  .data-dock,
body.roam-explore.atlas-scope.explore-v2.rain-scrub:not(.v2-player-open):not(
    .v2-forecast-play
  )
  #data-dock,
body.roam-explore.atlas-scope.explore-v2.rain-scrub:not(.v2-player-open):not(
    .v2-forecast-play
  )
  .data-dock,
body.roam-explore.atlas-scope.explore-v2.clouds-scrub:not(.v2-player-open):not(
    .v2-forecast-play
  )
  #data-dock,
body.roam-explore.atlas-scope.explore-v2.clouds-scrub:not(.v2-player-open):not(
    .v2-forecast-play
  )
  .data-dock,
body.roam-explore.atlas-scope.explore-v2.mode-conditions.rain-scrub:not(
    .v2-player-open
  ):not(.v2-forecast-play)
  #data-dock,
body.roam-explore.atlas-scope.explore-v2.mode-conditions.rain-scrub:not(
    .v2-player-open
  ):not(.v2-forecast-play)
  .data-dock,
body.roam-explore.atlas-scope.explore-v2.mode-conditions.clouds-scrub:not(
    .v2-player-open
  ):not(.v2-forecast-play)
  #data-dock,
body.roam-explore.atlas-scope.explore-v2.mode-conditions.clouds-scrub:not(
    .v2-player-open
  ):not(.v2-forecast-play)
  .data-dock {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

body.roam-explore.v2-player-open #data-dock,
body.roam-explore.v2-player-open .data-dock,
body.roam-explore.v2-forecast-play #data-dock,
body.roam-explore.v2-forecast-play .data-dock {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* Land Today hourly — no wave ft column. */
body.roam-explore .v2-hour-wave,
body.roam-explore #v2-today-hourly .v2-hour-wave {
  display: none !important;
}