:root {
      /* CDL v1.1 — light Explore chrome over map (basemap may stay dark) */
      --ink: var(--ba-l-ink);
      --ink-2: var(--ba-l-ink-2);
      --mute: var(--ba-l-mute);
      --blue: var(--ba-blue);
      --blue-deep: var(--ba-blue-deep);
      --glass: rgba(255, 255, 255, 0.9);
      --glass-strong: rgba(255, 255, 255, 0.96);
      --glass-border: rgba(11, 27, 46, 0.1);
      --blur: blur(20px) saturate(140%);
      --shadow: 0 8px 32px rgba(11, 27, 46, 0.12);
      --chrome-hover: rgba(11, 27, 46, 0.06);
      --chrome-fill: rgba(11, 27, 46, 0.04);
      --chrome-line: rgba(11, 27, 46, 0.1);
      --f: var(--ba-f);
      --ease: var(--ba-ease);
      --c-marina: var(--ba-blue);
      --c-fuel: var(--warning);
      --c-ramp: var(--purple);
      --c-service: var(--success);
      --c-charter: #2a9d8f;
      --c-anchorage: #5b8def;
      --c-park: #3d8f6e;
      --c-beach: #c4a35a;
      --c-campground: #6b8f5a;
      --q-good: var(--success);
      --q-fair: var(--warning);
      --q-poor: var(--danger);
      /* Chrome zones — one language, intentional placement */
      --pad: 14px;
      --r-pill: var(--ba-r-pill);
      --r-card: var(--ba-r-card);
      --r-ctrl: var(--ba-r-ctrl);
      --status-h: 28px;
      /* Bottom data-dock (AI + timeline + explore) — keep overlays clear of it */
      --dock-h: 108px;
      --inspector-w: 248px;
      --inspector-w-now: min(248px, calc(100vw - 28px));
      --inspector-w-today: min(272px, calc(100vw - 28px));
      --inspector-w-tabs: 0px;
      --inspector-week-w: min(960px, calc(100vw - var(--pad) * 2 - 72px));
      --wx-week-sidebar-w: 0px;
      --map-rail-w: 52px;
      --atlas-chrome-top: 128px;
      --dock-gap: 10px;
      /* Space reserved above the bottom data-dock (status + gap + dock + margin) */
      --dock-clearance: calc(var(--status-h) + var(--dock-gap) + var(--dock-h) + 12px);
      --inspector-panel-h: calc(100dvh - var(--atlas-chrome-top) - var(--dock-clearance));
      --panel-solid: rgba(255, 255, 255, 0.94);
      --panel-solid-strong: rgba(255, 255, 255, 0.98);
      --search-well: rgba(11, 27, 46, 0.05);
      --compass-s: rgba(11, 27, 46, 0.45);
    }

    /* Dark glass chrome — map controls / dock / SiteHeader over immersive basemap */
    body.atlas-scope.atlas-chrome-dark {
      --ink: var(--ba-ink);
      --ink-2: var(--ba-ink-2);
      --mute: var(--ba-mute);
      --glass: var(--ba-glass);
      --glass-strong: var(--ba-glass-strong);
      --glass-border: var(--ba-glass-border);
      --blur: var(--ba-blur);
      --shadow: var(--ba-shadow);
      --chrome-hover: var(--ba-glass-fill);
      --chrome-fill: var(--ba-glass-fill);
      --chrome-line: var(--ba-glass-border);
      --panel-solid: rgba(7, 19, 34, 0.88);
      --panel-solid-strong: rgba(7, 19, 34, 0.94);
      --search-well: rgba(255, 255, 255, 0.08);
      --compass-s: rgba(255, 255, 255, 0.4);
      --ba-nav-bg: rgba(7, 19, 34, 0.82);
      --ba-nav-border: rgba(255, 255, 255, 0.12);
      --ba-nav-shadow: 0 18px 48px rgba(3, 12, 24, 0.4);
      --ba-nav-ink: var(--ba-ink);
      --ba-nav-ink-2: var(--ba-ink-2);
      --ba-accent-tint: rgba(30, 107, 255, 0.22);
      color: var(--ink);
    }
    body.atlas-scope.atlas-chrome-dark .wx-field-toggle button.on {
      color: #9ec5ff;
    }
    body.atlas-scope.atlas-chrome-dark .map-nav .style-toggle button.on {
      color: var(--ink);
    }
    body.atlas-scope.atlas-chrome-dark .ba-nav-wrap--map-search .nav-search {
      background: var(--search-well);
      border-color: var(--chrome-line);
    }
    body.atlas-scope.atlas-chrome-dark .ba-nav-wrap--map-search .search-results {
      background: var(--panel-solid-strong);
      border-color: var(--chrome-line);
      color: var(--ink);
    }

    /* Inspector width tokens on body — data-dock / map chrome read --inspector-w */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    @media (prefers-reduced-motion: reduce) {
      .inspector-shell,
      .wx-week-col,
      .data-dock,
      .scrubber .play {
        transition: none !important;
      }
    }
    body.insp-view-now { --inspector-w: var(--inspector-w-now); }
    body.insp-view-today { --inspector-w: var(--inspector-w-today); }
    body.insp-view-week { --inspector-w: var(--inspector-w-tabs); }

    /* Phase 5.1 port: body/html-level rules scoped to body.atlas-scope so
       the /explore CSS doesn't leak to other Next.js routes after client-
       side nav (Next.js keeps CSS loaded across routes). `atlas-scope`
       class is toggled on <body> by src/app/explore/page.tsx's client
       effect on mount/unmount. `* { box-sizing }` is kept scoped so it
       doesn't override Tailwind preflight app-wide. */
    /* Reset only the prototype mount — keep specificity low so later
       component rules (nav, wx-field-toggle, etc.) can set padding.
       SiteHeader lives outside .atlas-body-mount and is unaffected.
       MUST stay under body.atlas-scope: Next keeps this CSS after client
       nav, and other Option-B pages (boats/places/…) reuse .atlas-body-mount.
       An unscoped absolute+overflow:hidden mount locks those pages from scrolling. */
    body.atlas-scope .atlas-body-mount,
    body.atlas-scope .atlas-body-mount * { box-sizing: border-box; margin: 0; padding: 0; }
    /* Absolute map chrome is positioned against this mount, not document flow. */
    body.atlas-scope .atlas-body-mount {
      position: absolute;
      inset: 0;
      overflow: hidden;
      z-index: 0;
    }
    body.atlas-scope { height: 100dvh; }
    body.atlas-scope {
      font-family: var(--f);
      font-feature-settings: "cv11";
      background: #05080d;
      color: var(--ink);
      overflow: hidden;
      -webkit-font-smoothing: antialiased;
    }

    #map { position: absolute; inset: 0; }
    .mapboxgl-ctrl-attrib {
      background: rgba(10,18,28,0.6) !important;
      backdrop-filter: blur(8px);
      color: #7e8ea0;
      font-size: 10px;
    }
    .mapboxgl-ctrl-attrib a { color: #9fb0c2 !important; }
    .mapboxgl-ctrl-logo { opacity: 0.7; }
    .mapboxgl-ctrl-bottom-left,
    .mapboxgl-ctrl-bottom-right {
      bottom: calc(var(--status-h) + 2px) !important;
    }

    .g {
      background: var(--glass);
      backdrop-filter: var(--blur);
      -webkit-backdrop-filter: var(--blur);
      border: 1px solid var(--glass-border);
      box-shadow: var(--shadow);
      color: var(--ink);
    }
    .g-strong {
      background: var(--glass-strong);
      backdrop-filter: var(--blur);
      -webkit-backdrop-filter: var(--blur);
      border: 1px solid var(--glass-border);
      box-shadow: var(--shadow);
      color: var(--ink);
    }

    /* ===== Top nav — geometry from DS; Explore is absolutely positioned over map ===== */
    .nav {
      position: absolute;
      top: 14px;
      left: 14px;
      right: 14px;
      z-index: 30;
      height: var(--ba-nav-height);
      border-radius: var(--ba-nav-radius);
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 18px;
      background: var(--ba-nav-bg);
      backdrop-filter: blur(var(--ba-nav-blur)) saturate(125%);
      -webkit-backdrop-filter: blur(var(--ba-nav-blur)) saturate(125%);
      border: 1px solid var(--ba-nav-border);
      box-shadow: var(--ba-nav-shadow);
    }
    .wordmark {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.85rem;
      font-weight: 650;
      letter-spacing: 0.14em;
      flex-shrink: 0;
      text-decoration: none;
      color: inherit;
    }
    .wordmark svg { width: 20px; height: 20px; }
    .wordmark b { color: var(--ink); font-weight: 650; }
    .wordmark b em { font-style: normal; color: var(--blue); }
    .nav-center {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-width: 0;
      margin: 0 auto;
      max-width: 520px;
    }
    .nav-search {
      flex: 1;
      max-width: 400px;
      height: 38px;
      border-radius: 999px;
      background: var(--search-well);
      border: 1px solid var(--chrome-line);
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 15px;
      min-width: 0;
    }
    .nav-search input {
      flex: 1;
      border: 0;
      background: none;
      font: 450 0.85rem/1 var(--f);
      color: var(--ink);
      outline: none;
      min-width: 0;
    }
    .nav-search input::placeholder { color: var(--mute); }
    .nav-search-wrap { position: relative; flex: 1; max-width: 400px; min-width: 0; }
    .nav-search-wrap .nav-search { max-width: none; width: 100%; }
    .search-results {
      display: none;
      position: absolute;
      left: 0; right: 0; top: calc(100% + 8px);
      background: var(--panel-solid-strong);
      border: 1px solid var(--chrome-line);
      border-radius: 14px;
      padding: 6px;
      z-index: 80;
      max-height: 320px;
      overflow: auto;
      backdrop-filter: blur(16px);
      box-shadow: var(--shadow);
    }
    .search-results.open { display: block; }
    .search-results button {
      display: flex; flex-direction: row; align-items: center; gap: 10px;
      width: 100%; text-align: left; border: 0; background: transparent;
      color: var(--ink); padding: 10px 12px; border-radius: 10px;
      font: 500 0.84rem/1.25 var(--f); cursor: pointer;
    }
    .search-results button:hover,
    .search-results button.active { background: var(--ba-accent-tint); }
    .search-results .sr-main {
      display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
      min-width: 0; flex: 1 1 auto;
    }
    .search-results .sr-name {
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
    }
    .search-results .sr-sub { color: var(--mute); font-size: 0.72rem; font-weight: 450; }
    .search-results .sr-type {
      font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--blue); font-weight: 650;
    }
    .search-results .sr-thumb {
      flex: 0 0 40px;
      width: 40px;
      height: 40px;
      border-radius: 8px;
      overflow: hidden;
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--chrome-line);
    }
    .search-results .sr-thumb img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .search-results .sr-empty {
      padding: 12px 14px;
      color: var(--mute);
      font-size: 0.8rem;
      line-height: 1.35;
      max-width: 28rem;
    }
    .near {
      height: 34px;
      padding: 0 14px;
      border: 0;
      border-radius: 999px;
      background: var(--blue);
      color: #fff;
      font: 550 0.72rem/1 var(--f);
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      box-shadow: 0 4px 14px rgba(59, 140, 255, 0.35);
      transition: background 0.2s, transform 0.2s;
    }
    .near:hover { background: var(--blue-deep); }
    .nav-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
    .nav-icon {
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 50%;
      background: none;
      color: var(--ink-2);
      font-size: 0.85rem;
      cursor: pointer;
      transition: background 0.2s;
    }
    .nav-icon:hover { background: var(--chrome-hover); }
    .nav-avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: linear-gradient(140deg, #7db4ff, var(--blue));
      border: 1.5px solid rgba(255,255,255,0.35);
      margin-left: 4px;
    }

    /* ===== Mode control (text tabs · active underline) ===== */
    .mode-strip {
      display: flex;
      align-items: center;
      gap: 2px;
      padding: 0;
      flex-shrink: 1;
      min-width: 0;
      overflow-x: auto;
      scrollbar-width: none;
      background: none;
      border: 0;
    }
    .mode-strip::-webkit-scrollbar { display: none; }
    .mode-strip button,
    .mode-strip a {
      border: 0;
      background: none;
      text-decoration: none;
      display: inline-block;
      color: var(--mute);
      font: 500 0.72rem/1 var(--f);
      letter-spacing: -0.01em;
      padding: 8px 10px 10px;
      border-radius: 0;
      cursor: pointer;
      white-space: nowrap;
      position: relative;
      transition: color 0.2s;
    }
    .mode-strip button:hover,
    .mode-strip a:hover { color: var(--ink-2); }
    .mode-strip button.on,
    .mode-strip a.on {
      color: var(--ink);
      font-weight: 600;
    }
    .mode-strip button.on::after,
    .mode-strip a.on::after {
      content: "";
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: 2px;
      height: 2px;
      border-radius: 2px;
      background: var(--blue);
    }
    .mode-strip button.stub { opacity: 0.72; }
    /* Explore sub-modes (Conditions · Places) — quieter than app nav */
    .nav-divider {
      width: 1px;
      height: 20px;
      background: var(--chrome-line);
      flex-shrink: 0;
    }
    .mode-strip.sub button {
      font-size: 0.66rem;
      padding: 8px 8px 10px;
    }
    .mode-strip.sub button.on::after { background: var(--c-service); }

    /* Mode emphasis — dim / promote zones without hiding the map */
    body.mode-conditions .data-dock .explore-bar,
    body.mode-conditions .data-dock .catbar { opacity: 0.55; }
    body.mode-conditions .data-dock .explore-bar:hover,
    body.mode-conditions .data-dock .catbar:hover { opacity: 0.85; }
    body.mode-conditions .timeline-dock { opacity: 1; }
    body.mode-places .explore-bar,
    body.mode-places .catbar { opacity: 1; }
    body.mode-places .timeline-dock { opacity: 0.72; }
    body.mode-places .wx-field-toggle { opacity: 0.78; }
    body.mode-boats .explore-bar,
    body.mode-resources .explore-bar,
    body.mode-community .explore-bar { opacity: 0.4; pointer-events: none; }
    body.mode-boats .timeline-dock,
    body.mode-resources .timeline-dock,
    body.mode-community .timeline-dock { opacity: 0.55; }
    body.mode-boats .wx-field-toggle,
    body.mode-resources .wx-field-toggle,
    body.mode-community .wx-field-toggle { opacity: 0.65; }
    .mode-hint {
      display: none;
      position: absolute;
      left: 50%;
      top: 118px;
      transform: translateX(-50%);
      z-index: 24;
      pointer-events: none;
      font: 500 0.72rem/1.3 var(--f);
      color: var(--mute);
      letter-spacing: -0.01em;
      text-align: center;
      padding: 6px 14px;
      border-radius: var(--r-pill);
      background: var(--panel-solid);
      border: 1px solid var(--chrome-line);
      box-shadow: var(--shadow);
      max-width: min(320px, calc(100% - 40px));
    }
    body.mode-boats .mode-hint,
    body.mode-resources .mode-hint,
    body.mode-community .mode-hint { display: block; }

    /* ===== Bottom · unified data dock (AI · Time · Explore) ===== */
    .data-dock {
      position: absolute;
      left: 50%;
      bottom: calc(var(--status-h) + var(--dock-gap));
      transform: translateX(-50%);
      z-index: 25;
      display: flex;
      align-items: stretch;
      gap: 0;
      width: min(920px, calc(100% - 200px));
      max-width: calc(100% - 28px);
      min-width: 0;
      pointer-events: none;
      border-radius: 22px;
      overflow: hidden;
      background: var(--panel-solid);
      backdrop-filter: blur(22px) saturate(150%);
      -webkit-backdrop-filter: blur(22px) saturate(150%);
      border: 1px solid var(--chrome-line);
      box-shadow: var(--shadow);
      color: var(--ink);
    }
    .data-dock > * { pointer-events: auto; }
    /* Sit to the right of the inspector so the AI strip doesn't slide under it */
    body:has(.inspector.on) .data-dock {
      left: calc(var(--pad) + var(--inspector-w) + 12px);
      transform: none;
      width: min(920px, calc(100% - var(--pad) - var(--inspector-w) - 12px - 72px));
      max-width: none;
    }
    body:has(.inspector.on.week-open) .data-dock {
      left: calc(var(--pad) + var(--inspector-w) + var(--inspector-week-w) + 12px);
      width: min(
        920px,
        calc(100% - var(--pad) - var(--inspector-w) - var(--inspector-week-w) - 12px - 72px)
      );
      min-width: 0; /* was 280px — that locked the window narrower floor */
    }
    /* If the week panel eats the row, drop the dock back to a centered strip under it */
    @media (max-width: 1180px) {
      body:has(.inspector.on.week-open) .data-dock {
        left: 50%;
        transform: translateX(-50%);
        width: min(920px, calc(100% - 28px));
        min-width: 0;
      }
    }
    /* Mid widths: let the dock use more of the map, slim the guidance strip */
    @media (max-width: 1000px) {
      .data-dock { width: min(920px, calc(100% - 120px)); }
      body:has(.inspector.on) .data-dock {
        width: min(920px, calc(100% - var(--pad) - var(--inspector-w) - 12px - 60px));
      }
      .guidance { width: 148px; }
    }

    /* Explore destinations — circular chips in dock column */
    .catbar,
    .explore-bar {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 4px;
      padding: 10px 14px 10px 8px;
      flex-shrink: 0;
      min-width: 0; /* never force the dock wider than the viewport */
      max-width: 100%;
      overflow-x: auto;
      scrollbar-width: none;
      background: none;
      border: 0;
      box-shadow: none;
      border-left: 1px solid var(--chrome-line);
      transition: opacity 0.3s var(--ease);
    }
    .catbar::-webkit-scrollbar { display: none; }
    .catbar button {
      border: 0;
      background: none;
      color: var(--ink-2);
      font: 500 0.58rem/1 var(--f);
      letter-spacing: -0.01em;
      padding: 4px 6px;
      min-height: 0;
      border-radius: 12px;
      cursor: pointer;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
      transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
    }
    .catbar button:hover { background: var(--chrome-hover); color: var(--ink); }
    .catbar button:hover .ico { transform: scale(1.05); }
    .catbar button.on {
      background: transparent;
      color: var(--ink);
      font-weight: 600;
    }
    .catbar button.on .ico {
      transform: scale(1.06);
      box-shadow: 0 0 0 2px rgba(59, 140, 255, 0.55);
    }
    .catbar button .ico {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 0.68rem;
      color: #fff;
      flex-shrink: 0;
      transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
      line-height: 1;
    }
    .catbar button .ico.all { background: var(--blue); color: #fff; font-size: 0.78rem; }
    .catbar button .ico.marina { background: var(--c-marina); }
    .catbar button .ico.ramp { background: var(--c-ramp); }
    .catbar button .ico.fuel { background: var(--c-fuel); }
    .catbar button .ico.service { background: var(--c-service); }
    .catbar button .ico.charter { background: var(--c-charter); }
    .catbar button .ico.more { background: var(--chrome-fill); color: var(--ink-2); }
    .catbar button .ico.anchorage { background: var(--c-anchorage); }

    /* Soft-global coverage chip (discovery / basemap) */
    .coverage-chip {
      position: absolute;
      left: var(--pad);
      top: calc(var(--nav-h, 56px) + 10px);
      z-index: 28;
      max-width: min(420px, calc(100vw - 2 * var(--pad)));
      padding: 8px 12px;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      pointer-events: none;
      background: var(--glass-strong);
      border: 1px solid var(--chrome-line);
      box-shadow: var(--shadow);
      color: var(--ink);
    }
    .coverage-chip[hidden] { display: none !important; }
    .coverage-chip-label {
      font: 650 0.72rem/1.2 var(--f);
      color: var(--ink);
      letter-spacing: 0.01em;
    }
    .coverage-chip-copy {
      font: 450 0.68rem/1.35 var(--f);
      color: var(--ink-2);
    }
    body.mode-places .coverage-chip { top: calc(var(--nav-h, 56px) + 52px); }

    /* Soft-global: Depth abroad uses GEBCO overview; mute chrome in basemap */
    body.coverage-basemap #wx-field-toggle button[data-preset="depth"] {
      opacity: 0.72;
    }
    body.coverage-basemap #wx-field-toggle button[data-preset="depth"].depth-muted {
      opacity: 0.68;
    }
    body.coverage-basemap #catbar {
      opacity: 0.92;
    }
    body.coverage-discovery #ms-quick-chips [data-quick="fuel"],
    body.coverage-basemap #ms-quick-chips [data-quick="fuel"],
    body.coverage-discovery #ms-quick-chips [data-quick="open"],
    body.coverage-basemap #ms-quick-chips [data-quick="open"],
    body.coverage-discovery #ms-quick-chips [data-quick="top"],
    body.coverage-basemap #ms-quick-chips [data-quick="top"] {
      display: none !important;
    }

    /* ===== Right · grouped map control rail ===== */
    .map-tools {
      position: absolute;
      right: var(--pad);
      top: var(--atlas-chrome-top);
      bottom: var(--dock-clearance);
      z-index: 26;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: flex-end;
      gap: 8px;
      pointer-events: none;
      min-height: 0;
    }
    .map-nav {
      pointer-events: auto;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
      min-width: 44px;
      flex: 1 1 auto;
      min-height: 0;
      height: 100%;
      background: none;
      border: 0;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-radius: 0;
      overflow: visible;
    }
    .map-nav-group {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 2px;
      padding: 4px;
      border-radius: 22px;
      flex: 0 0 auto;
      min-width: 44px;
    }
    .map-nav-view {
      position: relative;
    }
    .map-rail-btn {
      width: 44px;
      min-width: 44px;
      height: 44px;
      min-height: 44px;
      border: 0;
      border-radius: 12px;
      background: transparent;
      color: var(--ink-2);
      font: 600 0.68rem/1 var(--f);
      cursor: pointer;
      display: grid;
      place-items: center;
      padding: 0;
      transition: background 0.15s var(--ease), color 0.15s var(--ease);
    }
    .map-rail-btn:hover { background: var(--chrome-hover); color: var(--ink); }
    .map-rail-btn.on {
      background: var(--ba-accent-tint);
      color: var(--ink);
    }
    .map-rail-btn:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 2px;
    }
    .map-rail-label {
      font: 650 0.58rem/1 var(--f);
      letter-spacing: 0.02em;
    }
    .map-rail-glyph {
      font-size: 0.95rem;
      line-height: 1;
    }
    .map-nav-view .style-toggle {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 0;
      border-radius: 0;
    }
    .map-nav-view .style-toggle button {
      border: 0;
      background: none;
      color: var(--ink-2);
      font: 500 0.68rem/1 var(--f);
      padding: 0;
      border-radius: 12px;
      cursor: pointer;
      letter-spacing: 0.01em;
    }
    .map-nav-view .style-toggle button.on {
      background: var(--ba-accent-tint);
      color: var(--ink);
      font-weight: 600;
    }
    .map-nav-view .style-toggle button[data-style="dark"] { display: none !important; }
    .map-nav .zooms {
      display: flex;
      flex-direction: column;
      gap: 2px;
      border-radius: 0;
      overflow: visible;
    }
    .map-nav .zooms .map-rail-btn {
      border-bottom: 0;
    }
    .map-nav .zooms button#zcompass {
      display: grid;
      place-items: center;
      padding: 0;
    }
    .map-nav .zooms button#zcompass .compass-icon {
      display: block;
      width: 18px;
      height: 18px;
      transform-origin: 50% 50%;
      will-change: transform;
    }
    .map-nav .zooms button#zcompass .compass-icon .needle-n { fill: #e85a4f; }
    .map-nav .zooms button#zcompass .compass-icon .needle-s { fill: var(--compass-s); }
    .map-nav-zoom {
      margin-top: auto;
    }
    /* Place category filters — icon rail (Places + Conditions desktop) */
    .map-nav-places {
      flex: 0 0 auto;
      max-height: min(360px, calc(100dvh - var(--atlas-chrome-top) - var(--dock-clearance) - 280px));
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
    }
    .map-nav-places .catbar,
    .map-nav-places .explore-bar {
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 2px;
      border: 0;
      border-left: 0;
      border-radius: 0;
      max-width: none;
      overflow: visible;
      opacity: 1 !important;
      pointer-events: auto !important;
      background: none;
      box-shadow: none;
    }
    .map-nav-places .catbar button[hidden],
    .map-nav-places .explore-bar button[hidden] {
      display: none !important;
    }
    .map-nav-places .catbar button,
    .map-nav-places .explore-bar button {
      width: 36px;
      height: 36px;
      min-height: 36px;
      padding: 0;
      border-radius: 10px;
      flex-direction: row;
      justify-content: center;
      gap: 0;
    }
    .map-nav-places .catbar button span:not(.ico),
    .map-nav-places .explore-bar button span:not(.ico) {
      display: none;
    }
    .map-nav-places .catbar button .ico,
    .map-nav-places .explore-bar button .ico {
      width: 28px;
      height: 28px;
      font-size: 0.78rem;
      display: grid;
      place-items: center;
      border-radius: 50%;
      line-height: 1;
      flex-shrink: 0;
    }
    @media (min-width: 901px) {
      .map-tools {
        justify-content: stretch;
      }
      body.mode-conditions .m-map-layers {
        display: grid !important;
        place-items: center;
      }
      body.mode-places .m-map-layers { display: none !important; }
      .map-nav-view .style-toggle button[data-style="satellite"] {
        display: none !important;
      }
      .map-nav-view .style-toggle--aux {
        position: relative;
        width: 0;
        height: 0;
        overflow: visible;
        padding: 0;
        gap: 0;
      }
      .map-nav-accessory-focusable {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
      body.mode-conditions .map-nav-places {
        display: flex;
      }
      body.mode-places .map-nav-places {
        display: flex;
      }
      .wx-field-toggle.rail-focus {
        box-shadow: 0 0 0 2px var(--blue), var(--shadow);
      }
    }

    /* ===== Left · Inspector (Z4 · legend + conditions summary) ===== */
    .sheet {
      position: absolute;
      left: var(--pad);
      top: var(--atlas-chrome-top);
      z-index: 27;
      width: 300px;
      border-radius: var(--r-card);
      overflow: hidden;
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
      transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
    }
    .sheet.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .sheet .ph {
      height: 140px;
      background: #14303f center / cover no-repeat;
      position: relative;
    }
    .sheet .ph.has-set { height: 168px; background-image: none; }
    .sheet .ph-set {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 2px;
    }
    .sheet .ph-set[data-n="2"] { grid-template-rows: 1fr; }
    .sheet .ph-set[data-n="3"] { grid-template-columns: 1.2fr 0.8fr; grid-template-rows: 1fr 1fr; }
    .sheet .ph-set[data-n="3"] > :first-child { grid-row: 1 / span 2; }
    .sheet .ph-cell {
      position: relative;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
    }
    .sheet .ph-set img,
    .sheet .ph-cell img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }
    .sheet .ph-actions {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .sheet .ph .close,
    .sheet .ph .heart {
      position: static;
      width: 32px;
      height: 32px;
      border: 0;
      border-radius: 50%;
      background: var(--panel-solid-strong);
      backdrop-filter: blur(8px);
      color: var(--ink);
      cursor: pointer;
      display: grid;
      place-items: center;
      box-shadow: var(--shadow);
      padding: 0;
    }
    .sheet .ph .heart.is-saved {
      color: #ef6548;
    }
    .sheet .ph .close svg,
    .sheet .ph .heart svg {
      display: block;
    }
    .sheet .bd { padding: 14px 16px 16px; }
    .sheet h2 {
      font-size: 1.05rem;
      font-weight: 650;
      letter-spacing: -0.02em;
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--ink);
      margin: 0;
      line-height: 1.2;
    }
    .sheet h2 .badge {
      color: var(--blue);
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      line-height: 0;
    }
    .sheet .stars {
      margin: 8px 0 0;
      font-size: 0.8125rem;
      font-weight: 500;
      color: #f2a900;
      display: flex;
      align-items: center;
      gap: 4px;
      line-height: 1.3;
    }
    .sheet .stars .star-ico { color: #f2a900; }
    .sheet .stars #sheet-rating,
    .sheet .stars span:not(.star-ico) { color: var(--mute); }
    .sheet .sub {
      margin: 6px 0 0;
      font-size: 0.8125rem;
      font-weight: 500;
      line-height: 1.4;
      color: var(--ink-2);
    }
    .sheet .sub:empty,
    .sheet .sub[hidden] {
      display: none;
      margin: 0;
    }
    .sheet .amen {
      display: flex;
      gap: 6px;
      margin: 12px 0 0;
      flex-wrap: wrap;
    }
    .sheet .amen:empty { display: none; margin: 0; }
    .sheet .amen span {
      font: 500 0.75rem/1.2 var(--f);
      color: var(--ink-2);
      background: var(--chrome-fill);
      border: 1px solid var(--chrome-line);
      padding: 6px 10px;
      border-radius: var(--r-pill);
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      box-sizing: border-box;
    }
    .sheet .sheet-links {
      display: flex;
      align-items: center;
      gap: 4px;
      margin: 12px 0 8px;
    }
    .sheet .sheet-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 36px;
      padding: 0 10px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: var(--ink);
      font: 550 0.8125rem/1 var(--f);
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }
    .sheet .sheet-link:hover {
      background: var(--chrome-hover);
      color: var(--ink);
    }
    .sheet .sheet-link .act-ico {
      flex: 0 0 auto;
      display: block;
      color: inherit;
    }
    .sheet .sheet-pin-name {
      margin: 10px 0 4px;
      padding: 12px;
      border: 1px solid var(--chrome-line, #D8D8D1);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.04);
    }
    .sheet .sheet-pin-name[hidden] {
      display: none !important;
    }
    .sheet .sheet-pin-name-label {
      display: block;
      margin: 0 0 8px;
      font: 600 0.6875rem/1.2 var(--f);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-mute, #4B5A5B);
    }
    .sheet .sheet-pin-name-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }
    .sheet .sheet-pin-name-input {
      flex: 1 1 140px;
      min-width: 0;
      min-height: 40px;
      padding: 0 12px;
      border: 1px solid var(--chrome-line, #D8D8D1);
      border-radius: 12px;
      background: #fff;
      color: #041820;
      font: 500 0.875rem/1.2 var(--f);
    }
    .sheet .sheet-pin-name-save {
      min-height: 40px;
      padding: 0 14px;
      border: 0;
      border-radius: 999px;
      background: #0B63F6;
      color: #fff;
      font: 600 0.8125rem/1 var(--f);
      cursor: pointer;
    }
    .sheet .sheet-pin-name-save:hover {
      background: #0750CC;
    }
    .sheet .sheet-pin-name-cancel {
      min-height: 40px;
      padding: 0 10px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: var(--ink-mute, #4B5A5B);
      font: 550 0.8125rem/1 var(--f);
      cursor: pointer;
    }
    .sheet .sheet-nav {
      width: 100%;
      min-height: 44px;
      margin: 0 0 8px;
      padding: 0 14px;
      border: 1px solid var(--chrome-line);
      border-radius: 14px;
      background: transparent;
      color: var(--ink);
      font: 600 0.875rem/1 var(--f);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
      box-sizing: border-box;
    }
    .sheet .sheet-nav:hover {
      background: var(--chrome-hover);
      color: var(--ink);
    }
    .sheet .sheet-nav .act-ico {
      flex: 0 0 auto;
      display: block;
    }
    .sheet .sheet-water-view {
      border-color: rgba(43, 190, 242, 0.45);
      color: var(--ink);
    }
    .sheet .sheet-water-view:hover {
      border-color: rgba(43, 190, 242, 0.75);
      background: rgba(43, 190, 242, 0.08);
    }
    .sheet .sheet-plan {
      border-color: rgba(11, 99, 246, 0.35);
    }
    .sheet .sheet-plan:hover {
      border-color: rgba(11, 99, 246, 0.65);
      background: rgba(11, 99, 246, 0.06);
    }
    .water-view-chip {
      position: absolute;
      left: 50%;
      bottom: calc(var(--pad, 16px) + 118px);
      transform: translateX(-50%);
      z-index: 24;
      max-width: min(520px, calc(100vw - 96px));
      padding: 10px 16px;
      border-radius: 16px;
      border: 1px solid rgba(216, 216, 209, 0.42);
      background: rgba(4, 24, 32, 0.94);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      box-shadow: 0 12px 32px rgba(4, 24, 32, 0.45);
      color: #f4f1ea;
      font: 500 13px/1.4 var(--f);
      letter-spacing: 0.01em;
      text-align: center;
      white-space: normal;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.22s cubic-bezier(.22,1,.36,1), visibility 0.22s;
    }
    .water-view-chip.on {
      opacity: 1;
      visibility: visible;
    }
    .sheet .cta {
      width: 100%;
      height: 46px;
      min-height: 46px;
      border: 0;
      border-radius: 14px;
      background: var(--blue);
      color: #fff;
      font: 600 0.875rem/1 var(--f);
      cursor: pointer;
      transition: background 0.2s;
      margin-top: 0;
      box-shadow: 0 6px 18px rgba(11, 99, 246, 0.28);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      text-decoration: none;
      box-sizing: border-box;
    }
    .sheet .cta::after {
      content: "→";
      font-weight: 500;
    }
    .sheet .cta:hover { background: var(--blue-deep); }
    .sheet .cta.is-leaving,
    .sheet .cta[aria-busy="true"] {
      opacity: 0.72;
      pointer-events: none;
    }
    .sheet .cta.sheet-claim {
      margin-top: 8px;
      background: transparent;
      color: var(--ink);
      border: 1px solid var(--chrome-line);
      box-shadow: none;
    }
    .sheet .cta.sheet-claim::after { content: none; }
    .sheet .cta.sheet-claim:hover {
      background: var(--chrome-hover);
      color: var(--ink);
    }
    .sheet .sheet-disclaimer {
      margin: 12px 0 0;
      font: 450 0.75rem/1.45 var(--f);
      color: var(--ink-2);
    }
    .sheet .sheet-disclaimer[hidden] { display: none !important; margin: 0; }

    /* ===== Map pins ===== */
    .pin {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 0.72rem;
      color: #fff;
      cursor: pointer;
      background: var(--c-marina);
      border: 2px solid rgba(255,255,255,0.85);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-marina) 28%, transparent), 0 4px 14px rgba(0,0,0,0.5);
      transition: transform 0.18s var(--ease);
    }
    .pin:hover { transform: scale(1.12); }
    .pin.fuel { background: var(--c-fuel); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-fuel) 28%, transparent), 0 4px 14px rgba(0,0,0,0.5); }
    .pin.ramp { background: var(--c-ramp); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-ramp) 28%, transparent), 0 4px 14px rgba(0,0,0,0.5); }
    .pin.service { background: var(--c-service); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-service) 28%, transparent), 0 4px 14px rgba(0,0,0,0.5); }
    .pin.charter { background: var(--c-charter); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-charter) 28%, transparent), 0 4px 14px rgba(0,0,0,0.5); }
    .pin.anchorage { background: var(--c-anchorage); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-anchorage) 28%, transparent), 0 4px 14px rgba(0,0,0,0.5); }
    .pin.park { background: var(--c-park); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-park) 28%, transparent), 0 4px 14px rgba(0,0,0,0.5); }
    .pin.beach { background: var(--c-beach); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-beach) 28%, transparent), 0 4px 14px rgba(0,0,0,0.5); }
    .pin.campground { background: var(--c-campground); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-campground) 28%, transparent), 0 4px 14px rgba(0,0,0,0.5); }
    .pin.pin { background: var(--ocean-900, #0b1b2e); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ocean-900, #0b1b2e) 28%, transparent), 0 4px 14px rgba(0,0,0,0.5); }
    .pin.sel {
      transform: scale(1.22);
      border-color: #fff;
      box-shadow: 0 0 0 6px rgba(255,255,255,0.25), 0 6px 20px rgba(0,0,0,0.6);
      position: relative; /* anchor for the ::after label bubble */
    }
    /* In-map preview label — Apple Weather/Maps pattern. Reads the marker's
       data-label attribute so pin content stays simple (glyph only) while
       the selected state gains a readable name tag. Inherits .pin.sel's
       1.22 scale on purpose — the resulting label reads as an appropriately
       prominent Maps-style POI callout. */
    .pin.sel::after {
      content: attr(data-label);
      position: absolute;
      left: calc(100% + 6px);
      top: 50%;
      transform: translateY(-50%);
      padding: 5px 11px;
      border-radius: 999px;
      background: rgba(11, 14, 20, 0.92);
      backdrop-filter: blur(18px) saturate(150%);
      -webkit-backdrop-filter: blur(18px) saturate(150%);
      border: 1px solid rgba(255, 255, 255, 0.18);
      color: #fff;
      font: 650 0.72rem/1 var(--f);
      letter-spacing: 0.005em;
      white-space: nowrap;
      pointer-events: none;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
      max-width: 55vw;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .pin.sel:not([data-label])::after { content: none; } /* no ghost bubble when label empty */

    /* Icons v2 teardrop markers — kill legacy circular emoji-pin chrome whenever
       JS mounts pin--marker + /icons/v2/svg/map-markers/*.svg (explore-v2 and
       classic). Keeps marker look correct even if explore-v2-shell.css is late.
       Must stay position:absolute (Mapbox Marker default): position:relative
       puts markers in document flow so later categories (Fuel after Marinas)
       stack thousands of px below the viewport and look “missing” until the
       earlier category is turned off. */
    .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;
      display: block;
      /* Mapbox Marker owns transform on this element for lat/lng placement —
         never transition/override it or pins slide/jump on sync. */
      transition: none;
      filter: drop-shadow(0 6px 8px rgb(4 24 32 / 28%));
    }
    .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 var(--ease);
    }
    /* Beat legacy .pin:hover / .pin.sel scale without !important so Mapbox's
       inline placement transform still wins. Hover/sel motion lives on the img. */
    .pin.pin--marker:hover,
    .pin.pin--marker.sel {
      transform: none;
      border-color: transparent;
      box-shadow: none !important;
    }
    .pin.pin--marker:hover .pin-marker-img {
      transform: translateY(-1px) scale(1.06);
    }
    .pin.pin--marker.sel {
      filter: drop-shadow(0 8px 14px rgb(4 24 32 / 36%));
    }
    .pin.pin--marker.sel .pin-marker-img {
      transform: scale(1.14);
    }
    .pin.pin--marker.marina,
    .pin.pin--marker.fuel,
    .pin.pin--marker.ramp,
    .pin.pin--marker.service,
    .pin.pin--marker.charter,
    .pin.pin--marker.anchorage,
    .pin.pin--marker.park,
    .pin.pin--marker.beach,
    .pin.pin--marker.campground,
    .pin.pin--marker.food,
    .pin.pin--marker.shop,
    .pin.pin--marker.medical {
      background: transparent !important;
      box-shadow: none !important;
      border: 0 !important;
    }

    /* ===== Left · Inspector (Z4 · legend + conditions summary) ===== */
    .inspector-tab {
      position: absolute;
      left: var(--pad);
      top: var(--atlas-chrome-top);
      z-index: 26;
      width: 36px;
      height: 36px;
      border: 0;
      border-radius: 12px;
      color: var(--ink-2);
      font-size: 0.9rem;
      cursor: pointer;
      display: none;
      place-items: center;
      transition: background 0.2s, color 0.2s;
    }
    .inspector-tab.show { display: grid; }
    .inspector-tab:hover { color: var(--ink); background: var(--chrome-hover); }

    .inspector {
      position: absolute;
      left: var(--pad);
      top: var(--atlas-chrome-top);
      bottom: var(--dock-clearance);
      z-index: 26;
      width: auto;
      max-width: calc(100vw - var(--pad) * 2);
      height: auto;
      max-height: none;
      border-radius: var(--r-card);
      padding: 0;
      display: none;
      flex-direction: column;
      overflow: visible;
      transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
      pointer-events: auto;
    }
    .inspector.on { display: flex; }
    .inspector.collapsed { display: none; }
    .inspector.on .inspector-shell {
      height: 100%;
      max-height: 100%;
      min-height: 0;
    }
    .inspector.view-now.on {
      bottom: auto;
      height: auto;
      max-height: calc(100dvh - var(--atlas-chrome-top) - var(--dock-clearance));
    }
    .inspector.view-now.on .inspector-shell,
    .inspector.view-now.on .inspector-core {
      height: auto;
      max-height: none;
      overflow: visible;
    }
    .inspector.view-week.on {
      width: min(var(--inspector-week-w), calc(100vw - var(--pad) * 2 - 72px));
      max-width: calc(100vw - var(--pad) * 2);
    }
    .inspector-shell {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      border-radius: var(--r-card);
      overflow: hidden;
      min-width: 0;
      min-height: 0;
      max-width: 100%;
      max-height: inherit;
    }
    .inspector-core {
      display: flex;
      flex-direction: column;
      width: var(--inspector-w);
      flex: 0 0 auto;
      max-width: min(var(--inspector-w), calc(100vw - var(--pad) * 2));
      min-width: 0;
      min-height: 0;
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scroll-padding-bottom: 16px;
      border: 0;
      background: none;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .inspector-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 10px 6px;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      order: 0;
    }
    .inspector-head .title {
      font: 600 0.62rem/1 var(--f);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--mute);
    }
    .inspector-head .hide {
      width: 24px;
      height: 24px;
      border: 0;
      border-radius: 8px;
      background: none;
      color: var(--mute);
      font-size: 0.7rem;
      cursor: pointer;
      line-height: 1;
    }
    .inspector-head .hide:hover {
      background: rgba(255,255,255,0.08);
      color: var(--ink);
    }

    /* NOW | TODAY | 7-DAY segmented control */
    .insp-seg {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 8px 8px 6px;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      order: 0;
      flex-shrink: 0;
    }
    .insp-tab {
      flex: 1;
      min-width: 0;
      border: 0;
      border-radius: 8px;
      padding: 7px 6px;
      background: transparent;
      color: var(--mute);
      font: 650 0.58rem/1.2 var(--f);
      letter-spacing: 0.03em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.2s var(--ease), color 0.2s var(--ease);
      white-space: nowrap;
    }
    .insp-tab:hover { color: var(--ink-2); background: var(--chrome-hover); }
    .insp-tab.on {
      background: rgba(61,156,240,0.18);
      color: var(--ink);
    }
    .insp-collapse {
      flex: 0 0 28px;
      width: 28px;
      height: 28px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--mute);
      font-size: 0.7rem;
      cursor: pointer;
      line-height: 1;
    }
    .insp-collapse:hover {
      background: rgba(255,255,255,0.08);
      color: var(--ink);
    }

    /* Progressive widths: compact NOW → wider TODAY → 7-DAY rail */
    .inspector.view-now { --inspector-w: var(--inspector-w-now); }
    .inspector.view-today { --inspector-w: var(--inspector-w-today); }
    .inspector.view-week { --inspector-w: var(--inspector-w-tabs); }

    /* NOW peek — narrow vertical glance card */
    .insp-now {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 6px;
      padding: 10px 10px 8px;
      order: 1;
    }
    .insp-loc-head {
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin-bottom: 2px;
    }
    .insp-loc-primary {
      font: 650 0.72rem/1.15 var(--f);
      letter-spacing: -0.02em;
      color: var(--ink);
    }
    .insp-loc-sub {
      font: 500 0.58rem/1.2 var(--f);
      color: var(--mute);
    }
    .insp-now-main {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-rows: auto auto;
      align-items: center;
      gap: 2px 10px;
    }
    .insp-now .insp-wicon {
      grid-column: 1;
      grid-row: 1 / span 2;
      align-self: center;
      width: 44px;
      height: 38px;
    }
    .insp-now .insp-wicon svg {
      width: 40px;
      height: 34px;
    }
    .insp-now-loc .loc {
      font: 600 0.52rem/1 var(--f);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--mute);
    }
    .insp-now .temp {
      grid-column: 2;
      grid-row: 1;
      font-size: 1.85rem;
      font-weight: 350;
      letter-spacing: -0.04em;
      line-height: 1;
      align-self: end;
    }
    .insp-now .cond {
      grid-column: 2;
      grid-row: 2;
      font: 500 0.62rem/1.2 var(--f);
      color: var(--ink-2);
      text-align: left;
      align-self: start;
    }
    .insp-now-score {
      display: none !important;
    }
    body.has-saved-prefs .insp-now-score {
      display: flex !important;
    }
    .insp-wicon {
      display: grid;
      place-items: center;
      flex-shrink: 0;
      width: 36px;
      height: 30px;
      line-height: 1;
    }
    .insp-wicon svg {
      width: 32px;
      height: 28px;
      display: block;
    }
    .insp-wicon-lg {
      width: 44px;
      height: 36px;
    }
    .insp-wicon-lg svg {
      width: 40px;
      height: 34px;
    }
    .insp-now-score .score-cap {
      font-size: 0.46rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--mute);
    }
    .insp-now-score .score-num b {
      font-size: 1.1rem;
      font-weight: 700;
      color: #6fd08a;
      letter-spacing: -0.03em;
    }
    .insp-now-score.tier-excellent .score-num b { color: #6fd08a; }
    .insp-now-score.tier-good .score-num b { color: #8fd07a; }
    .insp-now-score.tier-fair .score-num b { color: #ffc24b; }
    .insp-now-score.tier-poor .score-num b { color: #ff7a6b; }
    .insp-now-verdict {
      font: 500 0.55rem/1.2 var(--f);
      color: var(--ink-2);
      text-align: left;
    }
    .insp-now-stats {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 4px;
      padding-top: 8px;
      border-top: 1px solid var(--chrome-line);
    }
    .inq-prov {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 8px;
      align-items: start;
    }
    .inq-prov .k {
      font: 650 0.48rem/1 var(--f);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--mute);
      padding-top: 2px;
    }
    .inq-body {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .inq .prov,
    .wx-metric .prov {
      font: 500 0.5rem/1.2 var(--f);
      color: var(--mute);
    }
    .insp-factual {
      margin: 4px 0 0;
      font: 500 0.62rem/1.35 var(--f);
      color: var(--ink-2);
    }
    .insp-forecast-disclaimer {
      margin: 8px 0 0;
      padding: 8px 10px;
      border-radius: 12px;
      border: 1px solid var(--chrome-line);
      background: rgba(4, 24, 32, 0.04);
      font: 500 0.58rem/1.4 var(--f);
      color: var(--mute);
    }
    body.atlas-chrome-dark .insp-forecast-disclaimer {
      background: rgba(255, 255, 255, 0.04);
    }
    .wx-nws-alert {
      margin: 8px 0 0;
      order: -1;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid rgba(239, 101, 72, 0.45);
      background: rgba(239, 101, 72, 0.14);
      color: var(--ink);
      font: 600 0.62rem/1.35 var(--f);
      letter-spacing: 0.01em;
      box-shadow: 0 8px 20px rgba(4, 24, 32, 0.08);
    }
    .wx-nws-alert[data-severity="moderate"],
    .wx-nws-alert[data-severity="minor"] {
      border-color: rgba(242, 169, 0, 0.4);
      background: rgba(242, 169, 0, 0.12);
    }
    .wx-nws-alert[hidden] { display: none !important; }
    .wx-today-primary-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin: 10px 0 6px;
    }
    .wx-section-cap {
      font: 650 0.5rem/1 var(--f);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--mute);
    }
    .wx-personalize {
      border: 0;
      background: none;
      padding: 2px 0;
      font: 500 0.58rem/1 var(--f);
      color: var(--blue);
      cursor: pointer;
      text-decoration: none;
    }
    .wx-personalize:hover { text-decoration: underline; }
    .wx-personalize:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 2px;
      border-radius: 4px;
    }
    .wx-metrics-primary {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px 10px;
    }
    .wx-more-toggle {
      margin: 8px 0 0;
      border: 0;
      background: none;
      padding: 0;
      font: 500 0.58rem/1 var(--f);
      color: var(--blue);
      cursor: pointer;
      text-align: left;
    }
    .wx-more-toggle:hover { text-decoration: underline; }
    .wx-metrics-more {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid var(--chrome-line);
    }
    .wx-pref-line {
      margin: 8px 0 0;
      font: 500 0.58rem/1.3 var(--f);
      color: var(--blue);
    }
    .insp-today-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid var(--chrome-line);
    }
    .insp-nav-back,
    .insp-nav-forward {
      border: 0;
      background: none;
      padding: 4px 0;
      font: 500 0.62rem/1 var(--f);
      color: var(--blue);
      cursor: pointer;
    }
    .insp-nav-back:hover,
    .insp-nav-forward:hover { text-decoration: underline; }
    .wx-score,
    .verdict,
    .cruise {
      display: none !important;
    }
    body.has-saved-prefs .wx-score {
      display: block !important;
    }
    .tide-source {
      margin-top: 6px;
      font: 500 0.5rem/1 var(--f);
      color: var(--mute);
    }
    .inq {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      min-width: 0;
    }
    .inq .k {
      display: block;
      font: 550 0.48rem/1 var(--f);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--mute);
      flex-shrink: 0;
    }
    .inq .v {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 3px;
      font: 600 0.62rem/1.15 var(--f);
      color: var(--ink);
      min-width: 0;
    }
    @media (min-width: 901px) {
      .inspector-core > .insp-seg {
        display: none !important;
      }
      body.mode-conditions .data-dock {
        left: var(--pad);
        right: calc(var(--pad) + var(--map-rail-w));
        width: auto;
        max-width: none;
        min-width: 0;
        transform: none;
      }
      body.insp-view-week .inspector.on .inspector-core {
        width: 0;
        max-width: 0;
        overflow: hidden;
        border: 0;
        padding: 0;
      }
      body.insp-view-week .inspector.week-open .wx-week {
        min-width: var(--inspector-week-w);
        max-width: var(--inspector-week-w);
      }
    }
    .inspector.view-now .insp-seg,
    .inspector.view-week .insp-seg {
      flex-direction: column;
      align-items: stretch;
      padding: 6px 5px 5px;
      gap: 3px;
    }
    .inspector.view-now .insp-tab,
    .inspector.view-week .insp-tab {
      flex: 0 0 auto;
      width: 100%;
      padding: 7px 4px;
      font-size: 0.56rem;
      line-height: 1.25;
      letter-spacing: 0.04em;
      text-align: center;
      white-space: normal;
    }
    .inspector.view-now .insp-collapse,
    .inspector.view-week .insp-collapse {
      flex: 0 0 auto;
      width: 100%;
      height: 26px;
      margin-top: 2px;
    }
    .insp-expand-cta {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      width: 100%;
      margin-top: 10px;
      padding: 8px 0 2px;
      border: 0;
      background: none;
      color: var(--blue);
      font: 550 0.62rem/1 var(--f);
      cursor: pointer;
    }
    .insp-expand-cta:hover { color: var(--ink-2); }
    .insp-expand-cta .chev { font-size: 0.75rem; }

    .insp-today { order: 1; }

    /* View visibility — NOW panel lives outside #wx so it stays visible on Map preset */
    .inspector.view-now #wx,
    .inspector.view-week #wx { display: none !important; }
    .inspector.view-today .insp-now { display: none !important; }
    .inspector.view-week .insp-now { display: none !important; }
    .inspector.view-now .wx-field-legend,
    .inspector.view-today .wx-field-legend,
    .inspector.view-week .wx-field-legend { display: none !important; }
    .inspector.view-today .inspector-core {
      overflow: hidden;
    }
    .inspector.view-today #wx {
      flex: 1 1 auto;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scroll-padding-bottom: 18px;
      padding-bottom: 28px;
      min-width: 0;
    }
    .inspector.view-week .wx-week-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 14px 8px;
      border-bottom: 1px solid var(--chrome-line);
    }
    .wx-week-back {
      border: 0;
      background: none;
      padding: 2px 0;
      font: 500 0.62rem/1 var(--f);
      color: var(--blue);
      cursor: pointer;
      white-space: nowrap;
    }
    .wx-week-back:hover { text-decoration: underline; }
    .wx-week-layout {
      display: flex;
      gap: 0;
      min-height: 0;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      flex: 0 0 auto;
      overflow: hidden;
    }
    .wx-week-sidebar {
      flex: 0 0 var(--wx-week-sidebar-w);
      width: var(--wx-week-sidebar-w);
      max-width: var(--wx-week-sidebar-w);
      min-width: var(--wx-week-sidebar-w);
      box-sizing: border-box;
      padding: 10px 6px;
      border: 0;
      border-right: 1px solid var(--chrome-line);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      background: rgba(255,255,255,0.02);
      color: inherit;
      font: inherit;
      cursor: pointer;
      overflow: hidden;
      flex-shrink: 0;
      transition: background 0.18s var(--ease), box-shadow 0.18s var(--ease);
    }
    .wx-week-sidebar:hover { background: var(--chrome-hover); }
    .wx-week-sidebar:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: -2px;
      z-index: 1;
    }
    .wx-week-sidebar.is-selected {
      background: rgba(59, 140, 255, 0.12);
      box-shadow: inset 0 0 0 1.5px var(--blue);
    }
    .wx-week-sidebar .wx-sidebar-cap {
      font: 650 0.48rem/1 var(--f);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--mute);
    }
    .wx-week-columns {
      flex: 1 1 0;
      display: flex;
      min-width: 0;
      overflow: hidden;
    }
    .wx-week-col {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 8px 6px 10px;
      border: 0;
      border-right: 1px solid var(--chrome-line);
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      text-align: center;
      transition: background 0.18s var(--ease), box-shadow 0.18s var(--ease);
    }
    .wx-week-col:last-child { border-right: 0; }
    .wx-week-col:hover { background: var(--chrome-hover); }
    .wx-week-col:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: -2px;
      z-index: 1;
    }
    .wx-week-col.is-selected {
      background: rgba(59, 140, 255, 0.12);
      box-shadow: inset 0 0 0 1.5px var(--blue);
    }
    .wx-week-col .d {
      font: 650 0.52rem/1 var(--f);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--mute);
    }
    .wx-week-col .icon {
      width: 32px;
      height: 28px;
      display: grid;
      place-items: center;
    }
    .wx-week-col .icon svg { width: 28px; height: 24px; }
    .wx-week-col .hi {
      font: 600 0.72rem/1 var(--f);
      color: var(--ink);
    }
    .wx-week-col .lo {
      font: 500 0.58rem/1 var(--f);
      color: var(--mute);
    }
    .wx-week-col .sky,
    .wx-week-col .wind,
    .wx-week-col .wave,
    .wx-week-col .precip {
      font: 500 0.5rem/1.2 var(--f);
      color: var(--ink-2);
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .wx-week-sidebar .hi,
    .wx-week-sidebar .lo,
    .wx-week-sidebar .sky,
    .wx-week-sidebar .wind,
    .wx-week-sidebar .wave,
    .wx-week-sidebar .precip {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }
    .wx-week-col .model-note {
      margin-top: auto;
      font: 500 0.48rem/1.2 var(--f);
      color: var(--blue);
    }
    .wx-week-chart-band {
      fill: rgba(59, 140, 255, 0.08);
      stroke: rgba(59, 140, 255, 0.35);
      stroke-width: 1;
    }
    .map-nav-group .style-toggle,
    .map-nav-group .zooms {
      display: flex;
      flex-direction: column;
    }
    .map-nav .m-map-layers,
    .map-rail-btn,
    .map-nav .style-toggle button {
      min-width: 44px;
      min-height: 44px;
    }
    @media (min-width: 901px) {
      body.insp-view-week .data-dock {
        left: var(--pad) !important;
        right: calc(var(--pad) + var(--map-rail-w)) !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        transform: none !important;
      }
      body.mode-conditions:has(.inspector.on):not(.insp-view-week) .data-dock {
        left: var(--pad) !important;
        right: calc(var(--pad) + var(--map-rail-w)) !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        transform: none !important;
      }
    }
    .inspector.view-week .inspector-core {
      overflow: hidden;
    }
    .inspector.view-now .insp-expand-cta { display: flex; flex-shrink: 0; }
    .inspector.view-today .insp-expand-cta,
    .inspector.view-week .insp-expand-cta { display: none !important; }

    .wx {
      position: relative;
      padding: 10px 12px;
      min-width: 0;
      max-width: none;
      background: none;
      border: 0;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-radius: 0;
      transition: opacity 0.3s var(--ease);
      order: 1;
    }
    .wx.hidden { display: none; }
    .wx-week-toggle {
      display: none !important; /* 7-DAY tab replaces rail toggle */
    }
    .wx-week-toggle:hover {
      background: rgba(255,255,255,0.12);
      color: var(--ink);
    }
    .wx-week-toggle .chev {
      font-size: 0.7rem;
      line-height: 1;
      transition: transform 0.28s var(--ease);
    }
    .inspector.week-open .wx-week-toggle {
      color: var(--ink);
      background: rgba(61,156,240,0.18);
    }
    .inspector.week-open .wx-week-toggle .chev {
      transform: rotate(180deg);
    }

    .wx-week {
      position: relative;
      flex: 0 0 auto;
      width: 0;
      max-width: 0;
      max-height: 0;
      min-height: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-self: flex-start;
      overflow: hidden;
      border: 0;
      border-left: 0 solid rgba(255,255,255,0.08);
      background: none;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition:
        width 0.32s var(--ease),
        max-width 0.32s var(--ease),
        opacity 0.28s var(--ease),
        visibility 0.28s,
        border-left-width 0.32s var(--ease);
    }
    .inspector.week-open .wx-week {
      flex: 1 1 0;
      width: var(--inspector-week-w);
      min-width: min(360px, calc(100vw - var(--pad) * 2 - var(--inspector-w-tabs) - 12px));
      min-height: 0;
      height: 100%;
      max-width: min(
        var(--inspector-week-w),
        calc(100vw - var(--pad) * 2 - var(--inspector-w) - 8px)
      );
      max-height: 100%;
      border-left-width: 1px;
      padding: 2px 6px 0 0;
      background: rgba(8, 12, 18, 0.35);
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      overflow: hidden;
      align-self: stretch;
      display: flex;
      flex-direction: column;
    }
    .wx-week-inner {
      flex: 1 1 auto;
      width: 100%;
      min-width: 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-sizing: border-box;
    }
    .wx-week-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 10px 6px;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      flex: 0 0 auto;
    }
    .wx-week-head .title {
      font: 600 0.62rem/1 var(--f);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--mute);
    }
    .wx-week-head .close {
      width: 24px;
      height: 24px;
      border: 0;
      border-radius: 8px;
      background: none;
      color: var(--mute);
      font-size: 0.85rem;
      cursor: pointer;
      line-height: 1;
    }
    .wx-week-head .close:hover {
      background: rgba(255,255,255,0.08);
      color: var(--ink);
    }
    /* 7-day matrix: day headers + metric rows (same k/v language as the inspector) */
    .wx-week-list {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      min-height: 0;
      min-width: 0;
      max-width: 100%;
      padding: 0;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scroll-padding-bottom: 12px;
    }
    .wx-week-matrix {
      min-width: 520px;
    }
    .wx-week-days {
      display: grid;
      grid-template-columns: 56px repeat(7, minmax(52px, 1fr));
      padding: 0 2px;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .wx-week-days .wx-week-days-pad { min-width: 0; }
    .wx-week-day {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 8px 4px 9px;
      border-right: 1px solid rgba(255,255,255,0.07);
      text-align: center;
      min-width: 0;
    }
    .wx-week-day:last-child { border-right: 0; }
    .wx-week-day .d {
      font: 600 0.68rem/1.15 var(--f);
      color: var(--ink);
      letter-spacing: 0.01em;
    }
    .wx-week-day .icon {
      position: relative;
      width: 30px;
      height: 26px;
      margin: 2px 0 1px;
      display: grid;
      place-items: center;
    }
    .wx-week-day .icon svg {
      width: 28px;
      height: 24px;
      display: block;
    }
    .wx-week-day .hi {
      font: 650 0.95rem/1.05 var(--f);
      color: var(--ink);
      letter-spacing: -0.03em;
      font-variant-numeric: tabular-nums;
    }
    .wx-week-day .lo {
      font: 550 0.72rem/1.1 var(--f);
      color: #7eb6e8;
      font-variant-numeric: tabular-nums;
    }
    .wx-week-day.is-today .d { color: var(--accent, #3d9cf0); }
    .wx-week-day.is-today {
      background: linear-gradient(180deg, rgba(61,156,240,0.12), transparent 85%);
    }
    .wx-week-rows {
      display: flex;
      flex-direction: column;
      padding: 2px 0 4px;
    }
    .wx-week-row {
      display: grid;
      grid-template-columns: 56px repeat(7, minmax(52px, 1fr));
      align-items: center;
      min-height: 32px;
      padding: 4px 2px;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .wx-week-row:last-child { border-bottom: 0; }
    .wx-week-row .rk {
      font-size: 0.5rem;
      font-weight: 550;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--mute);
      padding-left: 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .wx-week-row .rv {
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--ink);
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-variant-numeric: tabular-nums;
      padding: 0 2px;
      min-width: 0;
    }
    .wx-week-row .rv.muted { color: rgba(238,243,248,0.55); font-weight: 500; }
    .wx-week-row .rv.precip-hot { color: #7eb6e8; }
    .wx-week-row .rv .pamt {
      display: block;
      font-size: 0.52rem;
      font-weight: 500;
      color: rgba(126,182,232,0.85);
      line-height: 1.15;
      margin-top: 1px;
    }
    .wx-week-row .rv .rate {
      display: inline-block;
      padding: 3px 7px;
      border-radius: 6px;
      font: 700 0.5rem/1.2 var(--f);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    @media (min-width: 901px) {
      .inspector.view-week .wx-week-row-sun { display: none; }
    }
    .wx-week-row .rv .rate.excellent { background: rgba(111,208,138,0.16); color: #7ed99a; }
    .wx-week-row .rv .rate.good { background: rgba(143,208,122,0.14); color: #9ed98a; }
    .wx-week-row .rv .rate.fair { background: rgba(255,194,75,0.14); color: #ffcf6b; }
    .wx-week-row .rv .rate.poor { background: rgba(255,122,107,0.16); color: #ff8f80; }
    .wx-week-row .rv.sun {
      font-size: 0.55rem;
      font-weight: 500;
      color: rgba(238,243,248,0.72);
      line-height: 1.25;
    }
    .wx-week-empty {
      padding: 22px 12px;
      font: 500 0.68rem/1.35 var(--f);
      color: var(--mute);
      text-align: center;
    }
    .wx .top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
    }
    .wx .verdict {
      font-size: 0.82rem;
      font-weight: 650;
      letter-spacing: -0.02em;
      color: var(--ink);
    }
    .wx .loc {
      font-size: 0.58rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      color: var(--mute);
      text-transform: uppercase;
      flex-shrink: 0;
    }
    .wx .main {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 4px;
    }
    .wx-today-main .temp {
      font-size: 1.55rem;
      font-weight: 350;
      letter-spacing: -0.04em;
      line-height: 1;
      flex-shrink: 0;
    }
    .wx .temp {
      font-size: 1.45rem;
      font-weight: 350;
      letter-spacing: -0.04em;
      line-height: 1;
    }
    .wx .side {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .wx .cond {
      font-size: 0.7rem;
      font-weight: 500;
      color: var(--ink-2);
    }
    .wx .cruise {
      font-size: 0.62rem;
      font-weight: 550;
      color: #ffc24b;
      letter-spacing: -0.01em;
    }
    .wx .row {
      display: flex;
      gap: 10px;
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid rgba(255,255,255,0.09);
    }
    .wx .cell { min-width: 0; }
    .wx .cell .k {
      font-size: 0.54rem;
      font-weight: 550;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--mute);
    }
    .wx .cell .v {
      margin-top: 2px;
      font-size: 0.74rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .wx .arrow {
      display: inline-block;
      width: 11px;
      height: 2px;
      border-radius: 1px;
      background: var(--blue);
      flex-shrink: 0;
      transition: transform 0.6s var(--ease);
    }
    .wx .arrow.wind-dir {
      /* Soft direction tick — not a chevron/arrowhead */
      box-shadow: 0 0 6px rgba(90, 168, 255, 0.35);
    }
    /* Expanded "right now" metrics — 2-col grid in Inspector, our glass style */
    .wx-metrics {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px 12px;
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid rgba(255,255,255,0.09);
    }
    .wx-metric { min-width: 0; }
    .wx-metric .k {
      font-size: 0.5rem;
      font-weight: 550;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--mute);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .wx-metric .v {
      margin-top: 1px;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--ink);
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .wx-score {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 8px;
      padding: 9px 10px 10px;
      border-radius: 10px;
      background: rgba(61,156,240,0.10);
      border: 1px solid rgba(61,156,240,0.22);
    }
    .wx-score .score-face {
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex-shrink: 0;
      min-width: 58px;
      padding-top: 1px;
    }
    .wx-score .score-cap {
      font-size: 0.48rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--mute);
    }
    .wx-score .score-num {
      display: flex;
      align-items: baseline;
      gap: 1px;
      color: var(--ink);
    }
    .wx-score .score-num b {
      font-size: 1.15rem;
      font-weight: 650;
      letter-spacing: -0.03em;
      line-height: 1;
      color: #6fd08a;
    }
    .wx-score .score-num span {
      font-size: 0.56rem;
      font-weight: 550;
      color: var(--mute);
    }
    .wx-score.tier-excellent .score-num b { color: #6fd08a; }
    .wx-score.tier-good .score-num b { color: #8fd07a; }
    .wx-score.tier-fair .score-num b { color: #ffc24b; }
    .wx-score.tier-poor .score-num b { color: #ff7a6b; }

    .wx-score .score-why {
      font-size: 0.56rem;
      font-weight: 500;
      line-height: 1.4;
      color: var(--ink-2);
      min-width: 0;
    }
    .wx-score .score-meta {
      display: flex;
      flex-direction: column;
      gap: 5px;
      min-width: 0;
      flex: 1;
      padding-top: 1px;
    }
    .wx-conf {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      align-self: flex-start;
      max-width: 100%;
      padding: 3px 8px;
      border-radius: 999px;
      font: 650 0.5rem/1.2 var(--f);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--ink-2);
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      white-space: nowrap;
    }
    .wx-conf::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--mute);
      flex-shrink: 0;
    }
    .wx-conf.conf-green { color: #7ed99a; border-color: rgba(126,217,154,0.35); background: rgba(126,217,154,0.1); }
    .wx-conf.conf-green::before { background: #7ed99a; }
    .wx-conf.conf-yellow { color: #ffcf6b; border-color: rgba(255,207,107,0.35); background: rgba(255,207,107,0.1); }
    .wx-conf.conf-yellow::before { background: #ffcf6b; }
    .wx-conf.conf-orange { color: #ffb27a; border-color: rgba(255,178,122,0.4); background: rgba(255,178,122,0.12); }
    .wx-conf.conf-orange::before { background: #ffb27a; }
    .wx-conf.conf-red { color: #ff8f80; border-color: rgba(255,143,128,0.4); background: rgba(255,143,128,0.12); }
    .wx-conf.conf-red::before { background: #ff8f80; }
    .wx-score .score-diverge {
      font-size: 0.52rem;
      font-weight: 500;
      line-height: 1.4;
      color: #ffcf6b;
      min-width: 0;
      padding-top: 1px;
      border-top: 1px solid rgba(255,207,107,0.18);
    }
    .wx-score .score-diverge[hidden] { display: none; }
    .wx-score .score-diverge .split-summary {
      margin-bottom: 5px;
      color: #ffcf6b;
    }
    .wx-score .score-diverge .model-compare-row {
      grid-template-columns: 38px 1fr;
      gap: 5px;
      margin-top: 3px;
    }
    .wx-score .score-diverge .model-compare-facts {
      display: none;
    }
    .wx-week-row .rv.conf-cell {
      font-size: 0.55rem;
      font-weight: 600;
      letter-spacing: 0.01em;
    }
    .wx-week-row .rv.conf-cell button {
      appearance: none;
      border: 0;
      border-radius: 5px;
      padding: 3px 5px;
      background: transparent;
      color: inherit;
      font: inherit;
      cursor: default;
      white-space: nowrap;
    }
    .wx-week-row .rv.conf-cell button.has-detail {
      cursor: pointer;
      background: rgba(255,178,122,0.08);
      outline: 1px solid rgba(255,178,122,0.18);
    }
    .wx-week-row .rv.conf-cell button.has-detail:hover,
    .wx-week-row .rv.conf-cell button.has-detail.on {
      background: rgba(255,178,122,0.16);
      outline-color: rgba(255,178,122,0.42);
    }
    .wx-week-row .rv .conf-dot {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      margin-right: 4px;
      vertical-align: 0;
      background: var(--mute);
    }
    .wx-week-row .rv .conf-dot.green { background: #7ed99a; }
    .wx-week-row .rv .conf-dot.yellow { background: #ffcf6b; }
    .wx-week-row .rv .conf-dot.orange { background: #ffb27a; }
    .wx-week-row .rv .conf-dot.red { background: #ff8f80; }
    .wx-model-compare {
      flex: 0 0 auto;
      margin: 2px 8px 7px 54px;
      padding: 8px 10px 9px;
      border-radius: 8px;
      border: 1px solid rgba(255,178,122,0.22);
      background: rgba(255,178,122,0.06);
      max-width: calc(100% - 62px);
      min-width: 0;
      overflow: hidden;
      box-sizing: border-box;
    }
    .wx-model-compare[hidden] { display: none; }
    .wx-model-compare-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 6px;
      min-width: 0;
    }
    .wx-model-compare-title {
      font: 650 0.52rem/1.2 var(--f);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #ffb27a;
      min-width: 0;
    }
    .wx-model-compare-summary {
      font: 500 0.55rem/1.3 var(--f);
      color: var(--ink-2);
      text-align: right;
      min-width: 0;
      overflow-wrap: anywhere;
    }
    .model-compare-row {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) minmax(0, auto);
      align-items: center;
      gap: 8px;
      min-height: 20px;
      min-width: 0;
      max-width: 100%;
    }
    .model-compare-name {
      font: 650 0.52rem/1 var(--f);
      color: var(--ink);
    }
    .model-compare-track {
      position: relative;
      height: 6px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255,255,255,0.07);
      min-width: 0;
    }
    .model-compare-track::before,
    .model-compare-track::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 1px;
      background: rgba(255,255,255,0.10);
    }
    .model-compare-track::before { left: 25%; }
    .model-compare-track::after { left: 75%; }
    .model-compare-rain {
      position: absolute;
      top: 0;
      bottom: 0;
      min-width: 2px;
      border-radius: 999px;
      background: #60a5fa;
      box-shadow: 0 0 6px rgba(96,165,250,0.45);
    }
    .model-compare-rain.possible {
      background: repeating-linear-gradient(90deg, #60a5fa 0 3px, transparent 3px 5px);
      box-shadow: none;
    }
    .model-compare-facts {
      min-width: 0;
      max-width: 100%;
      text-align: right;
      font: 550 0.52rem/1.2 var(--f);
      color: var(--ink-2);
      font-variant-numeric: tabular-nums;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    .model-compare-facts .dry { color: #7ed99a; }
    .model-compare-axis {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr);
      gap: 8px;
      margin-top: 2px;
      min-width: 0;
      max-width: 100%;
    }
    .model-compare-axis .ticks {
      display: flex;
      justify-content: space-between;
      color: var(--mute);
      font: 500 0.44rem/1 var(--f);
    }
    /* Tide card — curve + next highs/lows */
    .wx-tide {
      margin-top: 8px;
      margin-bottom: 4px;
      padding: 8px 9px 10px;
      border-radius: 10px;
      background: rgba(59,140,255,0.07);
      border: 1px solid rgba(120,180,255,0.16);
    }
    .wx-tide[hidden] { display: none; }
    .wx-tide .tide-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
    }
    .wx-tide .tide-cap {
      font-size: 0.5rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--mute);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .wx-tide .tide-now {
      font-size: 0.6rem;
      font-weight: 600;
      color: #9cc4ff;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .wx-tide .tide-curve {
      height: 38px;
      margin: 5px 0 6px;
    }
    .wx-tide .tide-curve svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }
    .wx-tide .tide-events {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px 10px;
    }
    .wx-tide .tide-ev {
      display: flex;
      align-items: baseline;
      gap: 5px;
      font-size: 0.6rem;
      font-weight: 550;
      color: var(--ink);
      white-space: nowrap;
    }
    .wx-tide .tide-ev .ty {
      font-size: 0.5rem;
      font-weight: 700;
      letter-spacing: 0.04em;
    }
    .wx-tide .tide-ev.high .ty { color: #7fd0ff; }
    .wx-tide .tide-ev.low .ty { color: #ffb27a; }
    .wx-tide .tide-ev .tm { color: var(--ink-2); }
    .wx-tide .tide-ev .hh { margin-left: auto; color: var(--mute); font-weight: 500; }

    .wx-metric .wx-src {
      display: inline-block;
      margin-left: 0.35em;
      padding: 0.05em 0.4em;
      border-radius: 4px;
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: var(--mute);
      background: rgba(255, 255, 255, 0.06);
      vertical-align: 0.1em;
    }
    .wx-metric .wx-src.is-buoy {
      color: #9fd4ff;
      background: rgba(100, 170, 255, 0.14);
    }
    .wx-metric .wx-src.is-model {
      color: var(--mute);
    }

    .wx-buoy {
      margin-top: 10px;
      padding: 10px 12px;
      border-radius: 10px;
      background: rgba(80, 140, 200, 0.08);
      border: 1px solid rgba(120, 180, 255, 0.14);
    }
    .wx-buoy[hidden] { display: none; }
    .wx-buoy .buoy-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
    }
    .wx-buoy .buoy-cap {
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--ink-2);
      letter-spacing: 0.01em;
    }
    .wx-buoy .buoy-now {
      font-size: 0.82rem;
      font-weight: 650;
      color: #9fd4ff;
      white-space: nowrap;
    }
    .wx-buoy .buoy-meta {
      margin-top: 4px;
      font-size: 0.68rem;
      color: var(--mute);
      line-height: 1.35;
    }

    /* Per-day sunrise / sunset live in the Sun metric row now */
    /* Hourly wind + waves chart under the 7-day columns */
    .wx-hour-chart {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      min-height: 0;
      border-top: 1px solid rgba(255,255,255,0.08);
      padding: 7px 0 10px;
      background: rgba(6, 10, 16, 0.42);
    }
    .wx-hour-chart[hidden] { display: none; }
    .wx-hour-chart .hour-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 4px;
      padding: 0 10px 0 var(--wx-week-sidebar-w);
    }
    .wx-hour-chart .hour-cap {
      font: 600 0.5rem/1 var(--f);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--mute);
    }
    .wx-hour-chart .hour-best {
      font: 550 0.52rem/1.2 var(--f);
      color: #7ed99a;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }
    .wx-hour-chart .hour-best:empty { display: none; }
    .wx-hour-chart .hour-head-sub {
      margin-top: 8px;
      padding-top: 7px;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .wx-hour-chart .hour-head-sub .hour-best { color: #7fd0ff; }
    .wx-hour-chart .hour-head-sub[hidden],
    .wx-hour-chart .hour-plot-tide[hidden] { display: none; }
    /* Inset by the same 52px label gutter as .wx-week-row so each 1/7 slice
       sits under its day column. Both plots share leftover panel height. */
    .wx-hour-chart .hour-plot {
      flex: 0 0 auto;
      height: 100px;
      min-height: 100px;
      position: relative;
      padding: 0 2px 6px var(--wx-week-sidebar-w);
      box-sizing: border-box;
    }
    .wx-hour-chart .hour-plot-tide {
      flex: 0 0 auto;
      height: 88px;
      min-height: 88px;
      padding: 0 2px 4px var(--wx-week-sidebar-w);
      box-sizing: border-box;
    }
    .wx-hour-chart .hour-head,
    .wx-hour-chart .hour-keys { flex: 0 0 auto; }
    .wx-hour-chart .hour-plot svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }
    .wx-hour-chart .hour-keys {
      display: flex;
      gap: 12px;
      margin-top: 3px;
      padding: 0 10px 0 var(--wx-week-sidebar-w);
    }
    .wx-hour-chart .hour-keys .k {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font: 500 0.5rem/1 var(--f);
      letter-spacing: 0.03em;
      color: var(--mute);
      text-transform: uppercase;
    }
    .wx-hour-chart .hour-keys .k i {
      width: 10px;
      height: 2px;
      border-radius: 2px;
      display: inline-block;
    }
    .wx-hour-chart .hour-keys .k.wind i { background: #7ed99a; }
    .wx-hour-chart .hour-keys .k.wave i { background: #6eb6ff; }
    .wx-hour-chart .hour-keys .k.tide i {
      background: repeating-linear-gradient(90deg, #7fd0ff 0 3px, transparent 3px 5px);
    }
    /* Adaptive legend — below conditions in Inspector stack */
    .wx-field-legend {
      display: none;
      flex-direction: column;
      align-items: stretch;
      gap: 7px;
      padding: 8px 12px 10px;
      border-radius: 0;
      pointer-events: none;
      min-width: 0;
      max-width: none;
      background: none;
      border: 0;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      position: static;
      order: 2;
    }
    .wx-field-legend.on { display: flex; }
    .wx-field-legend .row {
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .wx-field-legend .bar {
      flex: 1;
      height: 7px;
      border-radius: var(--r-pill);
      border: 1px solid rgba(255,255,255,0.18);
      min-width: 72px;
    }
    .wx-field-legend .bar.wind {
      background: linear-gradient(90deg, #0b3d4a 0%, #1a9b8e 28%, #7ed957 55%, #ffd166 78%, #ff6b35 100%);
    }
    .wx-field-legend .bar.temp {
      background: linear-gradient(90deg, #2b6cb0 0%, #38bdf8 30%, #fde047 60%, #fb923c 82%, #ef4444 100%);
    }
    .wx-field-legend .bar.waves {
      background: linear-gradient(90deg, #125a96 0%, #28aad2 22%, #32d2be 45%, #78e678 62%, #fadc50 80%, #e63746 100%);
    }
    .wx-field-legend .bar.depth {
      background: linear-gradient(90deg,
        #b8eefc 0%,
        #8ad4f0 12%,
        #6eb8e0 24%,
        #4a96c8 42%,
        #2f5f98 62%,
        #1e3d6a 82%,
        #0c1830 100%);
    }
    .wx-field-legend .lbl {
      font: 550 0.58rem/1 var(--f);
      letter-spacing: 0.04em;
      color: var(--ink-2);
      text-transform: uppercase;
      white-space: nowrap;
    }
    .wx-field-legend .keys {
      display: none;
      gap: 10px;
      flex-wrap: wrap;
      padding-top: 1px;
    }
    .wx-field-legend.keys-on .keys { display: flex; }
    .wx-field-legend .keys span {
      font: 550 0.58rem/1 var(--f);
      color: var(--ink-2);
      letter-spacing: 0.03em;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .wx-field-legend .keys .sym {
      color: #fff;
      font-size: 0.7rem;
      opacity: 0.9;
    }
    .wx-field-legend .keys .sym.wind-sym {
      width: 10px;
      height: 2px;
      border-radius: 1px;
      background: rgba(198, 222, 255, 0.95);
      display: inline-block;
      font-size: 0;
      line-height: 0;
    }
    .wx-field-legend .depth-swatches {
      display: none;
      flex-direction: column;
      gap: 4px;
      padding: 8px 0 2px;
      margin-top: 2px;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .wx-field-legend.depth-on .depth-swatches { display: flex; }
    .wx-field-legend.depth-focus .depth-swatches {
      padding-top: 6px;
      border-top: 0;
      margin-top: 0;
    }
    .wx-field-legend .depth-swatches .dramp,
    .wx-field-legend .depth-swatches .drow {
      display: none !important;
    }
    .wx-field-legend .depth-swatches .sw {
      width: 18px;
      height: 3px;
      border-radius: 2px;
      flex-shrink: 0;
    }
    .wx-field-legend .depth-swatches .dtitle {
      font: 700 0.62rem/1 var(--f);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink);
      margin-bottom: 2px;
    }
    .wx-field-legend .depth-swatches .dprobe {
      display: flex;
      align-items: baseline;
      gap: 5px;
      margin: 0 0 5px;
      font: 650 0.82rem/1.1 var(--f);
      color: var(--ink);
      font-variant-numeric: tabular-nums;
    }
    .wx-field-legend .depth-swatches .dprobe .dp-hint {
      font: 500 0.58rem/1 var(--f);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--ink-2);
      opacity: 0.75;
    }
    .wx-field-legend .depth-swatches .dprobe.is-empty .dp-val { opacity: 0.45; }
    .wx-field-legend .note {
      font: 500 0.55rem/1.3 var(--f);
      color: var(--mute);
      margin-top: 1px;
      padding-top: 6px;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    /* Depth-priority: hide air/temp scale chrome; depth block is primary */
    .wx-field-legend.depth-focus .row { opacity: 1; }
    .wx-field-legend.depth-focus .depth-swatches { opacity: 1; }
    .wx-field-legend.depth-focus .keys { display: none !important; }
    /* Scale-priority: depth swatches compact */
    .wx-field-legend.scale-focus .depth-swatches { opacity: 0.72; }
    .wx-field-legend.scale-focus .keys { opacity: 0.85; }

    /* Tiny depth note only — no color INDEX (ft labels on water are primary) */
    .depth-legend {
      display: none;
      position: absolute;
      left: calc(var(--pad) + var(--inspector-w) + 12px);
      top: var(--atlas-chrome-top);
      z-index: 25;
      min-width: 0;
      max-width: 200px;
      padding: 7px 10px 8px;
      border-radius: var(--r-card);
      pointer-events: none;
      flex-direction: column;
      gap: 0;
      background: rgba(8, 14, 28, 0.52);
      border: 1px solid rgba(255,255,255,0.08);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    body:not(:has(.inspector.on)) .depth-legend {
      left: var(--pad);
    }
    .depth-legend.on {
      display: flex;
    }
    .depth-legend[hidden] { display: none !important; }
    .depth-legend h4,
    .depth-legend .dramp,
    .depth-legend .row {
      display: none !important;
    }
    .depth-legend .note {
      margin: 0;
      padding: 0;
      border: 0;
      font: 500 0.58rem/1.3 var(--f);
      letter-spacing: 0.02em;
      color: rgba(220, 232, 244, 0.78);
    }
    @media (max-width: 900px) {
      .depth-legend {
        left: var(--pad);
        top: auto;
        bottom: calc(var(--status-h) + var(--dock-h) + var(--peek-h, 0px) + 12px);
        max-width: min(200px, 48vw);
      }
    }

    /* ===== Bottom · timeline unit (AI summary + scrubber + quality) ===== */
    .timeline-dock {
      display: none;
      flex: 1;
      min-width: 0;
      flex-direction: row;
      align-items: stretch;
      gap: 0;
      pointer-events: none;
    }
    .timeline-dock.on { display: flex; }
    /* Rain radar scrubber must stay visible even in Map mode (env chrome off). */
    body.rain-scrub .timeline-dock {
      display: flex !important;
      pointer-events: auto;
    }
    body.clouds-scrub .timeline-dock {
      display: flex !important;
      pointer-events: auto;
    }
    body.rain-scrub .timeline-dock .guidance,
    body.clouds-scrub .timeline-dock .guidance {
      display: none;
    }
    body.rain-scrub .scrubber .span {
      color: var(--blue);
      font-weight: 650;
    }
    body.rain-scrub.wx-model-forecast .scrubber .when,
    body.rain-scrub.wx-model-forecast .scrubber .span {
      color: #f3b55c;
    }
    .wx-now-divider {
      position: absolute;
      z-index: 8;
      top: -5px;
      bottom: -4px;
      width: 1px;
      pointer-events: none;
      background: rgba(255, 255, 255, 0.82);
      box-shadow: 0 0 0 1px rgba(2, 10, 18, 0.28), 0 0 8px rgba(255, 255, 255, 0.28);
    }
    .wx-now-divider > span {
      position: absolute;
      left: 50%;
      top: -12px;
      transform: translateX(-50%);
      padding: 1px 4px;
      border-radius: 4px;
      color: rgba(255, 255, 255, 0.92);
      background: rgba(5, 14, 24, 0.86);
      font: 700 0.45rem/1.25 var(--f);
      letter-spacing: 0.08em;
    }
    /* Explore v2: hour-mark Now owns the label. Hide the divider chip so it
       cannot stack a second NOW on the scrub thumb. */
    body.explore-v2 .wx-now-divider > span,
    body.atlas-scope.explore-v2 .wx-now-divider > span {
      display: none !important;
      visibility: hidden !important;
    }
    .guidance {
      display: none !important;
    }
    body.rain-scrub .timeline-dock .guidance {
      display: none;
    }
    .guidance .ai-kicker {
      font: 650 0.55rem/1 var(--f);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--blue);
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .guidance .ai-kicker .spark { font-size: 0.7rem; opacity: 0.95; }
    .guidance .line {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      overflow: hidden;
      font: 500 0.72rem/1.35 var(--f);
      letter-spacing: -0.015em;
      color: var(--ink);
      background: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border: 0;
      box-shadow: none;
      padding: 0;
      border-radius: 0;
      max-width: 100%;
      width: 100%;
      box-sizing: border-box;
    }
    .scrubber {
      flex: 1;
      min-width: 0;
      pointer-events: auto;
      border-radius: 0;
      padding: 10px 14px 8px;
      display: flex;
      align-items: center;
      gap: 10px;
      border: 0;
      background: none;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .scrubber .play {
      width: 36px;
      height: 36px;
      border: 0;
      border-radius: 50%;
      background: var(--chrome-fill);
      color: var(--ink);
      font-size: 0.62rem;
      cursor: pointer;
      flex-shrink: 0;
      display: grid;
      place-items: center;
      transition: background 0.2s, transform 0.2s;
    }
    .scrubber .play:hover { background: var(--chrome-hover); }
    .scrubber .play.on {
      background: var(--ba-accent-tint);
      color: var(--blue-deep);
    }
    .scrubber .play.wx-weather-loading {
      cursor: wait;
      animation: wx-weather-play-loading 0.9s ease-in-out infinite;
    }
    @keyframes wx-weather-play-loading {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.42; }
    }
    .scrubber .body { flex: 1; min-width: 0; }
    .scrubber .meta {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 6px;
      gap: 8px;
    }
    .scrubber .when {
      font: 650 0.62rem/1 var(--f);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--ink);
    }
    .scrubber .span {
      font: 600 0.52rem/1 var(--f);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--mute);
    }
    .scrubber .best-window { display: none !important; }
    .scrubber .track-wrap {
      position: relative;
      height: 44px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
    .scrubber .tide-layer {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 8px;
      height: 22px;
      pointer-events: none;
      z-index: 0;
      overflow: visible;
    }
    .scrubber .tide-layer svg {
      display: block;
      width: 100%;
      height: 100%;
    }
    .scrubber .wave-curls {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 12px;
      height: 28px;
      display: flex;
      align-items: flex-end;
      gap: 1px;
      pointer-events: none;
      z-index: 1;
    }
    .scrubber .wave-curls .wc {
      flex: 1;
      min-width: 0;
      height: 100%;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      opacity: 0.5;
      cursor: pointer;
      transition: opacity 0.2s, transform 0.2s;
    }
    .scrubber .wave-curls .wc svg {
      width: 100%;
      max-width: 14px;
      height: auto;
      overflow: visible;
    }
    .scrubber .wave-curls .wc path {
      fill: none;
      stroke: currentColor;
      stroke-width: 1.35;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .scrubber .wave-curls .wc.on {
      opacity: 1;
      transform: translateY(-1px);
      filter: drop-shadow(0 0 3px rgba(59, 140, 255, 0.55));
    }
    .scrubber .sun-marks {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 2;
    }
    .scrubber .sun-mark {
      position: absolute;
      top: 0;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1px;
    }
    .scrubber .sun-mark .tick {
      width: 1px;
      height: 10px;
      background: rgba(255, 194, 75, 0.55);
    }
    .scrubber .sun-mark.set .tick { background: rgba(170, 190, 220, 0.5); }
    .scrubber .sun-mark .lbl {
      font: 550 0.48rem/1 var(--f);
      letter-spacing: 0.02em;
      color: #ffc24b;
      white-space: nowrap;
      text-shadow: 0 1px 4px rgba(0,0,0,0.65);
    }
    .scrubber .sun-mark.set .lbl { color: #c5d2e4; }
    .scrubber .sun-mark[hidden] { display: none; }
    .scrubber .quality-track {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 5px;
      height: 5px;
      border-radius: 999px;
      overflow: hidden;
      display: flex;
      z-index: 1;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
    }
    .scrubber .quality-track .qs {
      flex: 1;
      min-width: 0;
    }
    .scrubber .best-window {
      position: absolute;
      bottom: 3px;
      height: 9px;
      border-radius: 999px;
      background: rgba(47, 208, 140, 0.22);
      border: 1px solid rgba(47, 208, 140, 0.35);
      pointer-events: none;
      z-index: 2;
      display: none;
    }
    .scrubber .best-window.on { display: block; }
    .scrubber input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 44px;
      margin: 0;
      background: transparent;
      outline: none;
      cursor: pointer;
      z-index: 4;
    }
    .scrubber input[type="range"]::-webkit-slider-runnable-track {
      height: 5px;
      background: transparent;
      border-radius: 999px;
    }
    .scrubber input[type="range"]::-moz-range-track {
      height: 5px;
      background: transparent;
      border-radius: 999px;
    }
    .scrubber input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 16px;
      height: 16px;
      margin-top: -5.5px;
      border-radius: 50%;
      background: #fff;
      border: 2.5px solid var(--blue);
      box-shadow: 0 2px 10px rgba(0,0,0,0.5);
      cursor: grab;
    }
    .scrubber input[type="range"]::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #fff;
      border: 2.5px solid var(--blue);
      box-shadow: 0 2px 10px rgba(0,0,0,0.5);
      cursor: grab;
    }
    .scrubber .ticks {
      display: flex;
      justify-content: space-between;
      margin-top: 4px;
      font: 500 0.5rem/1 var(--f);
      color: var(--mute);
      letter-spacing: 0.02em;
      min-width: 0;
      overflow: hidden;
    }
    .scrubber .ticks span {
      flex: 0 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: clip;
      white-space: nowrap;
    }
    .scrubber .ticks.wx-hour-marks {
      position: relative;
      display: block;
      height: 16px;
      overflow: visible;
    }
    .scrubber .ticks.wx-hour-marks .wx-hour-mark {
      position: absolute;
      top: 0;
      transform: translateX(-50%);
      flex: none;
      font: 600 0.625rem/16px var(--f);
      letter-spacing: 0.04em;
      color: var(--mute);
      white-space: nowrap;
    }
    .scrubber .ticks.wx-hour-marks .wx-hour-mark.start {
      transform: translateX(-50%);
    }
    .scrubber .ticks.wx-hour-marks .wx-hour-mark.end {
      transform: translateX(-100%);
    }
    #wx-particles.scrub-flash {
      transition: opacity 0.22s var(--ease);
      opacity: 0.55;
    }

    /* Legend chip · above the data-dock, clear of the inspector column */
    .legend-chip {
      position: absolute;
      left: var(--pad);
      bottom: calc(var(--status-h) + 10px + var(--dock-h) + 8px);
      z-index: 24;
      height: 34px;
      padding: 0 12px;
      border-radius: var(--r-pill);
      border: 0;
      color: var(--ink-2);
      font: 550 0.7rem/1 var(--f);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      transition: color 0.2s, background 0.2s;
    }
    /* When the inspector is open the chip is redundant (legend lives inside it) */
    body:has(.inspector.on) .legend-chip { display: none; }
    .legend-chip:hover { color: var(--ink); background: var(--chrome-hover); }
    .legend-chip .ico { font-size: 0.85rem; opacity: 0.85; }

    /* Compact depth readout — charted contour under cursor when Depth is on */
    .depth-probe {
      position: absolute;
      left: var(--pad);
      bottom: calc(var(--status-h) + 10px + var(--dock-h) + 48px);
      z-index: 24;
      height: 34px;
      padding: 0 11px;
      border-radius: var(--r-pill);
      border: 0;
      color: var(--ink);
      font: 650 0.78rem/1 var(--f);
      display: none;
      align-items: baseline;
      gap: 5px;
      font-variant-numeric: tabular-nums;
      pointer-events: none;
    }
    .depth-probe[data-on="1"] { display: inline-flex; }
    .depth-probe[hidden] { display: none !important; }
    body:has(.inspector.on) .depth-probe {
      /* Inspector already shows inline probe in depth swatches */
      display: none !important;
    }
    .depth-probe .dp-unit {
      font: 550 0.62rem/1 var(--f);
      color: var(--ink-2);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .depth-probe .dp-hint {
      font: 500 0.55rem/1 var(--f);
      color: var(--ink-2);
      opacity: 0.7;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-left: 2px;
    }
    .depth-probe.is-empty .dp-val { opacity: 0.4; }

    /* Status strip */
    .status-bar {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 28;
      height: var(--status-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 14px;
      background: var(--panel-solid);
      border-top: 1px solid var(--chrome-line);
      font: 500 0.58rem/1 var(--f);
      color: var(--mute);
      letter-spacing: 0.02em;
      pointer-events: none;
    }
    .status-bar .left,
    .status-bar .right {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .status-bar .src {
      display: inline-flex;
      gap: 8px;
      opacity: 0.85;
    }
    .status-bar .src span {
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      font-size: 0.52rem;
    }

    /* ===== Weather field overlay ===== */
    /* Snap opacity — a 350ms transition left Waves "invisible" while the
       canvas already had fill (class .on, computed opacity still mid-fade /
       stuck at 0 when rAF was starved). Visibility must match paint. */
    #wx-particles {
      position: absolute;
      inset: 0;
      z-index: 22;
      pointer-events: none;
      opacity: 0;
      transition: none;
    }
    #wx-particles.on { opacity: 1; }

    /* Map click sample while Wind and/or Waves is active */
    .wx-sample-tip .mapboxgl-popup-content {
      padding: 16px 20px;
      border-radius: 14px;
      background: rgba(4, 24, 32, 0.94);
      color: #e8f4ff;
      font: 600 0.8rem/1.2 var(--f, "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42);
      min-width: 124px;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .wx-sample-tip .mapboxgl-popup-tip {
      border-top-color: rgba(4, 24, 32, 0.92);
    }
    .wx-sample-tip-body {
      display: grid;
      gap: 2px;
      letter-spacing: 0.01em;
      min-width: 0;
    }
    .wx-sample-tip-body .tip-main {
      display: block;
      font-size: 0.95rem;
      font-weight: 600;
      letter-spacing: -0.015em;
      white-space: nowrap;
    }
    .wx-sample-tip-body .tip-row {
      display: flex;
      align-items: baseline;
      gap: 6px;
      min-width: 0;
    }
    .wx-sample-tip-body .tip-k {
      flex: 0 0 auto;
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      opacity: 0.65;
    }
    .wx-sample-tip-body .tip-row .tip-main {
      font-size: 0.82rem;
    }
    .wx-sample-tip-body .tip-src {
      display: block;
      margin-top: 1px;
      font-size: 0.65rem;
      font-weight: 500;
      opacity: 0.68;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.25;
    }
    .wx-sample-tip-body .tip-sub {
      display: block;
      margin-top: 0;
      font-size: 0.62rem;
      font-weight: 500;
      opacity: 0.58;
      white-space: nowrap;
    }
    .wx-sample-tip-body .tip-sep,
    .wx-sample-tip-body .tip-metric,
    .wx-sample-tip-body .tip-metric-k,
    .wx-sample-tip-body .tip-metric-v {
      display: contents;
    }
    .wx-metric.wx-metric-flash .v,
    .wx-metric-flash {
      animation: wx-metric-pulse 0.85s ease;
    }
    @keyframes wx-metric-pulse {
      0%, 100% { color: inherit; }
      30% { color: #9fd4ff; }
    }
    .wx-field-toggle {
      position: absolute;
      left: 50%;
      top: 96px;
      transform: translateX(-50%);
      z-index: 35;
      border-radius: var(--r-pill);
      display: none;
      padding: 2px;
      gap: 1px;
      max-width: calc(100% - 120px);
      overflow-x: auto;
      scrollbar-width: none;
      transition: opacity 0.3s var(--ease);
    }
    .wx-field-toggle::-webkit-scrollbar { display: none; }
    .wx-field-toggle.on { display: flex; }
    .wx-field-toggle button {
      border: 0;
      background: none;
      color: var(--ink-2);
      font: 500 0.65rem/1 var(--f);
      padding: 6px 10px;
      border-radius: var(--r-pill);
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.2s, color 0.2s;
    }
    .wx-field-toggle button.on {
      background: var(--ba-accent-tint);
      color: var(--blue-deep);
      font-weight: 600;
    }
    /* Pulse Rain/Clouds pill label while sat tiles fetch (catalog or raster). */
    .wx-field-toggle button.wx-overlay-loading {
      animation: wx-overlay-label-pulse 0.95s ease-in-out infinite;
    }
    .wx-field-toggle button.wx-overlay-loading.on {
      animation: wx-overlay-label-pulse-on 0.95s ease-in-out infinite;
    }
    @keyframes wx-overlay-label-pulse {
      0%, 100% { opacity: 1; color: var(--ink-2); }
      45% { opacity: 0.42; color: #9fd4ff; }
    }
    @keyframes wx-overlay-label-pulse-on {
      0%, 100% { opacity: 1; color: var(--blue-deep); }
      45% { opacity: 0.5; color: #5eb8ff; }
    }
    /* Rain + Clouds share a thin loading line while sat tiles fetch. */
    .wx-sat-pair {
      display: inline-flex;
      align-items: center;
      position: relative;
      flex: 0 0 auto;
      gap: 1px;
    }
    .wx-sat-loading {
      position: absolute;
      left: 6px;
      right: 6px;
      bottom: 2px;
      height: 1.5px;
      border-radius: 1px;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      background: rgba(158, 197, 255, 0.1);
      transition: opacity 0.15s ease;
    }
    .wx-sat-loading.on {
      opacity: 1;
    }
    .wx-sat-loading-bar {
      display: block;
      height: 100%;
      width: 42%;
      border-radius: inherit;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(158, 197, 255, 0.7),
        transparent
      );
      animation: wx-sat-load-shimmer 1.05s ease-in-out infinite;
    }
    @keyframes wx-sat-load-shimmer {
      0% { transform: translateX(-130%); }
      100% { transform: translateX(280%); }
    }

    /* ===== Nav responsiveness — shed chrome progressively, never overlap =====
       >1100  full nav (wordmark · app nav · sub-modes · search · Near me · icons)
       ≤1100  drop remaining stub items, tighter gaps
       ≤900   Near me collapses to icon, favorites/notifications icons hidden
       ≤720   compact paddings (below, with dock rules)
       ≤560   wordmark text + divider hidden, logo only */
    @media (max-width: 1100px) {
      .nav { gap: 8px; }
      .nav-center { max-width: 420px; }
      .mode-strip button.stub { display: none; }
    }
    @media (max-width: 900px) {
      .nav-center { max-width: 320px; }
      .near .near-label { display: none; }
      .near { padding: 0 11px; font-size: 0.8rem; }
      .nav-icon { display: none; }
      .nav-avatar { margin-left: 0; }

      /* ---- Search: icon-only pill that expands into a full nav overlay ----
         Below 900px there's no room for an inline input, but search is core
         functionality — it must stay reachable, not disappear. */
      .nav-center { flex: 0 0 auto; max-width: none; margin: 0 0 0 auto; }
      .nav-search-wrap {
        flex: 0 0 38px; width: 38px; max-width: 38px; min-width: 38px;
        border-radius: 999px; overflow: hidden;
        transition: width 0.22s var(--ease), max-width 0.22s var(--ease);
      }
      .nav-search-wrap .nav-search {
        height: 38px; width: 38px; padding: 0; justify-content: center;
        background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.09);
      }
      .nav-search-wrap input { opacity: 0; pointer-events: none; width: 0; padding: 0; }
      .nav-search-close { display: none; }

      body.m-search-open .wordmark,
      body.m-search-open .mode-strip,
      body.m-search-open .nav-divider,
      body.m-search-open .near,
      body.m-search-open .nav-right { visibility: hidden; }
      body.m-search-open .nav-center { flex: 1 1 auto; width: 100%; }
      body.m-search-open .nav-search-wrap {
        position: absolute; left: 8px; right: 8px; top: 8px; bottom: 8px;
        width: auto; max-width: none; flex: none;
        border-radius: 14px;
      }
      body.m-search-open .nav-search-wrap .nav-search {
        width: 100%; height: 100%; justify-content: flex-start;
        padding: 0 8px 0 15px; gap: 10px;
        background: rgba(11,14,20,0.94); backdrop-filter: blur(20px) saturate(150%);
        -webkit-backdrop-filter: blur(20px) saturate(150%);
        border-color: var(--blue);
      }
      body.m-search-open .nav-search-wrap input {
        opacity: 1; pointer-events: auto; width: auto; flex: 1; padding: 0;
      }
      body.m-search-open .nav-search-close {
        display: grid; place-items: center; flex-shrink: 0;
        width: 30px; height: 30px; border: 0; border-radius: 50%;
        background: rgba(255,255,255,0.1); color: var(--ink); font-size: 0.7rem; cursor: pointer;
      }

      /* ---- Sub-mode reads as a segmented control, not a second tab row ---- */
      .mode-strip.sub {
        background: rgba(255,255,255,0.05); border-radius: 999px; padding: 2px; gap: 0;
      }
      .mode-strip.sub a.on,
      .mode-strip.sub button.on {
        background: rgba(59,140,255,0.22); border-radius: 999px;
      }
      .mode-strip.sub a.on::after,
      .mode-strip.sub button.on::after { display: none; }

      /* ---- Field toggle: attach flush under nav, edge-to-edge scroll, no dead space ---- */
      .wx-field-toggle {
        left: 8px; right: 8px; transform: none; top: 70px;
        max-width: none; width: auto; justify-content: flex-start;
      }
    }
    @media (max-width: 560px) {
      .wordmark b { display: none; }
      .nav-divider { display: none; }
      .nav { gap: 6px; padding: 0 10px; }
    }

    /* =====================================================================
       Narrow / mobile (≤900px) — one bottom chrome band, map stays hero.
       Conditions peek fuses to the top of the data-dock (shared radius,
       no gap). AI guidance hides (redundant with the peek). Tap peek to
       expand the full inspector sheet over the dock.
       ===================================================================== */
    .m-scrim {
      display: none;
      position: absolute;
      inset: 0;
      z-index: 27;
      background: rgba(5, 8, 13, 0.5);
      backdrop-filter: blur(1.5px);
      -webkit-backdrop-filter: blur(1.5px);
      pointer-events: none; /* closed = never steal taps */
    }

    /* Mobile-only chrome elements. Base-hide everything here so desktop/tablet
       don't render the raw, unstyled markup (nav SVGs blowing up to browser
       default sizes, inline glyphs floating over the map, etc). Each element
       is then re-enabled inside the ≤900px media query with its actual
       positioned/styled form. */
    .m-tabbar { display: none; }
    .m-summary { display: none; }
    .m-cond-peek { display: none; }
    .m-legend-bar { display: none; }
    .m-map-layers { display: none; }
    .m-week-strip { display: none; }
    .m-insp-tabs { display: none; } /* NOW | TODAY | 7-DAY sheet header — mobile only */
    .wxft-head { display: none; } /* only appears when the layer popover is open on mobile */

    @media (min-width: 901px) {
      .insp-seg { display: flex; }
      .map-nav-places { display: flex; }
      .map-nav-places[hidden] { display: none !important; }
    }

    @media (max-width: 900px) {
      :root {
        /* Bottom bands the map has to clear:
           --status-h = floating .ba-tabbar clearance (height + inset + gap).
           --dock-h   = mode-adaptive bottom stack (peek and/or timeline).
           Timeline appears only for playable weather (rain/clouds scrub). */
        --status-h: var(
          --ba-tabbar-clearance,
          calc(64px + max(12px, env(safe-area-inset-bottom, 0px)) + 8px)
        );
        --dock-h: 96px;
        --peek-h: 0px;
      }
      /* Conditions: bottom peek only (~88) */
      body.mode-conditions { --dock-h: 96px; }
      body.mode-conditions.rain-scrub,
      body.mode-conditions.clouds-scrub { --dock-h: 168px; }
      /* Places: category chips only */
      body.mode-places { --dock-h: 84px; }
      body.mode-places.rain-scrub,
      body.mode-places.clouds-scrub { --dock-h: 156px; }
      /* Weather sheet open: peek hides; timeline may remain */
      body.mode-conditions.m-sheet { --dock-h: 0px; }
      body.mode-conditions.m-sheet.rain-scrub,
      body.mode-conditions.m-sheet.clouds-scrub { --dock-h: 66px; }
      body.m-sheet .m-scrim {
        display: block;
        pointer-events: auto; /* only intercept while sheet is open */
      }

      /* AI summary is redundant with the conditions strip */
      .guidance { display: none !important; }

      /* Old thin status strip is replaced by the tab bar as the bottom band */
      .status-bar { display: none; }

      /* Top-level page nav (Explore/Boats/Community/My Atlas) moves to the
         bottom tab bar — drop it and its divider from the top row so the
         top stays down to logo + mode + search + location. */
      #app-nav,
      .nav-divider { display: none; }

      /* Prototype .m-tabbar removed from HTML; Next .ba-tabbar owns bottom nav.
         Keep display:none so any leftover markup cannot reappear. */
      .m-tabbar { display: none !important; }

      /* ---- Layer picker (⧉) moves out of the top nav bar and into the
         top-right vertical utility stack (Apple Maps pattern). The nav-bar
         button is fully hidden on mobile; a dedicated .m-map-layers button
         lives inside .map-nav (styled below). ---------------------------- */
      .m-layers-btn { display: none !important; }
      .wx-field-toggle.on { display: none; } /* base rule wins by default on mobile */
      body.m-layers-open .wx-field-toggle.on {
        display: flex; /* higher specificity (2 classes) overrides the rule above */
        z-index: 32;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
      }

      /* ---- Bottom chrome: two floating glass pills (Apple Weather pattern).
         Outer .data-dock becomes a transparent flex container; each child
         (timeline-dock, catbar) is its own rounded glass pill with its own
         shadow. No more fused chrome band. --------------------------------- */
      .data-dock,
      body:has(.inspector.on) .data-dock,
      body:has(.inspector.on.week-open) .data-dock {
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        min-width: 0;
        transform: none;
        bottom: calc(var(--status-h) + 8px);
        z-index: 30; /* above map (0) / particles (22); below tabbar (31) */
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 0;
        box-shadow: none;
        border-radius: 0;
        overflow: visible;
        padding: 0;
        gap: 6px;
        flex-direction: column;
        align-items: stretch;
        touch-action: manipulation; /* keep Mapbox from eating chrome taps */
      }
      .m-tabbar { touch-action: manipulation; }
      .timeline-dock.on {
        flex-direction: row;
        align-items: center;
        min-width: 0;
        width: 100%;
        background: rgba(11, 14, 20, 0.78);
        backdrop-filter: blur(22px) saturate(150%);
        -webkit-backdrop-filter: blur(22px) saturate(150%);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
        padding: 0;
      }
      /* Apple's forecast player: play · title · time · thin track · anchor ticks.
         Drop all our decorative overlays (tide, waves, quality, best-window,
         sun marks) so the pill reads clean. */
      .scrubber {
        width: 100%;
        min-width: 0;
        padding: 6px 12px 6px 8px;
        gap: 10px;
        align-items: center;
      }
      .scrubber .play { width: 36px; height: 36px; flex: 0 0 36px; }
      .scrubber .body { padding: 0; }
      .scrubber .meta { gap: 8px; align-items: baseline; margin-bottom: 2px; }
      .scrubber .when { font-size: 0.72rem; font-weight: 650; letter-spacing: 0; color: var(--ink); }
      .scrubber .span { display: none; }
      .scrubber .tide-layer,
      .scrubber .wave-curls,
      .scrubber .quality-track,
      .scrubber .best-window,
      .scrubber .sun-marks { display: none; }
      .scrubber .track-wrap { height: 20px; }
      .scrubber .ticks { font-size: 0.55rem; opacity: 0.75; margin-top: 2px; }
      .scrubber .ticks span:nth-child(2),
      .scrubber .ticks span:nth-child(4) { display: none; }

      .catbar, .explore-bar {
        justify-content: flex-start;
        background: rgba(11, 14, 20, 0.78);
        backdrop-filter: blur(22px) saturate(150%);
        -webkit-backdrop-filter: blur(22px) saturate(150%);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
        padding: 4px 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        min-width: 0;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        gap: 4px;
      }
      /* 44px min touch target — icon-first chips inside the pill */
      .catbar button {
        flex-direction: row;
        gap: 6px;
        padding: 6px 10px;
        min-width: 44px;
        min-height: 36px;
        flex-shrink: 0;
        border-radius: 999px;
        background: transparent;
      }
      .catbar button.on { background: rgba(59, 140, 255, 0.2); color: var(--ink); }

      /* ================================================================
         Mode-adaptive BOTTOM BAND (map-hero remains the same in both).
         Conditions → bottom peek (+ timeline only when rain/clouds scrub).
         Places     → category chip rail (+ timeline only when scrubbing).
         ================================================================ */
      body.mode-conditions .catbar,
      body.mode-conditions .explore-bar { display: none; }
      body.mode-conditions .map-nav-places { display: none; }
      /* Places category rail → bottom dock (not the right utility stack) */
      body.mode-places .map-nav-places {
        display: flex;
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(var(--status-h) + 8px);
        width: auto;
        max-height: none;
        overflow: visible;
        z-index: 30;
        pointer-events: auto;
        box-shadow: none;
        background: none;
        padding: 0;
      }
      body.mode-places.rain-scrub .map-nav-places,
      body.mode-places.clouds-scrub .map-nav-places {
        bottom: calc(var(--status-h) + 8px + 66px);
      }
      body.mode-places:has(.sheet.show) .map-nav-places {
        display: none;
      }

      /* Timeline: mobile shows scrubber only for playable weather layers */
      body.mode-conditions .timeline-dock,
      body.mode-conditions .timeline-dock.on {
        display: none !important;
      }
      body.mode-conditions.rain-scrub .timeline-dock,
      body.mode-conditions.rain-scrub .timeline-dock.on,
      body.mode-conditions.clouds-scrub .timeline-dock,
      body.mode-conditions.clouds-scrub .timeline-dock.on {
        display: flex !important;
      }
      body.mode-places .timeline-dock { display: none; }
      body.mode-places.rain-scrub .timeline-dock,
      body.mode-places.rain-scrub .timeline-dock.on,
      body.mode-places.clouds-scrub .timeline-dock,
      body.mode-places.clouds-scrub .timeline-dock.on {
        display: flex !important;
      }

      /* ---- Conditions bottom peek (Apple Maps / Weather pattern) ---- */
      .m-cond-peek {
        display: none;
        position: relative;
        width: 100%;
        min-width: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        margin: 0;
        padding: 8px 14px 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 22px;
        background: rgba(11, 14, 20, 0.82);
        backdrop-filter: blur(22px) saturate(150%);
        -webkit-backdrop-filter: blur(22px) saturate(150%);
        box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
        color: var(--ink);
        text-align: left;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
      }
      body.mode-conditions:not(.m-sheet) .m-cond-peek {
        display: flex;
      }
      body:has(.sheet.show) .m-cond-peek {
        display: none !important;
      }
      .m-cond-peek .mcp-grab {
        align-self: center;
        width: 36px;
        height: 4px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.32);
      }
      .m-cond-peek .mcp-row {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
      }
      .m-cond-peek .mcp-temp {
        flex: 0 0 auto;
        font: 650 1.55rem/1 var(--f);
        letter-spacing: -0.03em;
        color: var(--ink);
      }
      .m-cond-peek .mcp-copy {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .m-cond-peek .mcp-loc {
        font: 650 0.78rem/1.15 var(--f);
        color: var(--ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .m-cond-peek .mcp-verdict {
        font: 500 0.68rem/1.2 var(--f);
        color: var(--ink-2);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .m-cond-peek .mcp-score {
        flex: 0 0 auto;
        min-width: 44px;
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid rgba(47, 208, 140, 0.35);
        background: rgba(47, 208, 140, 0.16);
        color: #9ee3af;
        font: 650 0.72rem/1 var(--f);
        text-align: center;
      }
      .m-cond-peek.tier-fair .mcp-score {
        border-color: rgba(255, 194, 75, 0.35);
        background: rgba(255, 194, 75, 0.18);
        color: #ffdda1;
      }
      .m-cond-peek.tier-poor .mcp-score {
        border-color: rgba(255, 122, 107, 0.4);
        background: rgba(255, 122, 107, 0.2);
        color: #ffb3a8;
      }
      .m-cond-peek .mcp-chev {
        flex: 0 0 auto;
        color: var(--ink-2);
        font-size: 0.78rem;
        opacity: 0.8;
      }

      /* Places mode: expand the chips into a taller, richer bar with
         colored icon circles + labels below (matches the mockup's
         Marinas / Ramps / Beaches / Fishing / Fuel / More row). */
      body.mode-places .catbar,
      body.mode-places .explore-bar {
        flex-direction: row;
        align-items: stretch;
        justify-content: space-around;
        padding: 10px 6px 8px;
        border-radius: 22px;
        gap: 2px;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        background: rgba(11, 14, 20, 0.78);
        backdrop-filter: blur(22px) saturate(150%);
        -webkit-backdrop-filter: blur(22px) saturate(150%);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
      }
      body.mode-places .catbar button,
      body.mode-places .explore-bar button {
        flex-direction: column;
        gap: 4px;
        padding: 4px 6px;
        min-width: 52px;
        min-height: 56px;
        border-radius: 12px;
        font-size: 0.55rem;
        color: var(--ink);
        letter-spacing: 0.02em;
      }
      body.mode-places .catbar button.on,
      body.mode-places .explore-bar button.on {
        background: rgba(255, 255, 255, 0.06);
      }
      body.mode-places .catbar button .ico,
      body.mode-places .explore-bar button .ico {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
        border-radius: 50%;
        display: grid;
        place-items: center;
      }
      /* Show labels in Places mode even at ≤560px (mockup does) */
      body.mode-places .catbar button span:not(.ico) { display: inline; }

      /* Utility stack clears the header; no top-left summary card */
      body.mode-conditions .map-tools,
      body.mode-places .map-tools {
        top: calc(var(--ba-nav-height) + 14px + 8px);
      }
      body.mode-conditions.legend-on .map-tools {
        top: calc(var(--ba-nav-height) + 14px + 50px);
      }

      /* ================================================================
         7-DAY FORECAST STRIP — retired from always-on dock.
         Week content lives in the inspector sheet (Now | Today | 7-Day).
         ================================================================ */
      .m-week-strip,
      body.mode-conditions .m-week-strip {
        display: none !important;
      }
      /* Kill 300ms tap delay + double-tap zoom on primary mobile controls */
      .m-cond-peek,
      .m-week-strip .mws-day,
      .m-week-strip .mws-expand,
      .m-map-layers,
      .m-insp-tabs .mit-tab,
      .m-insp-tabs .mit-close,
      .mode-strip button,
      .ms-cond,
      .ms-places,
      .ms-places .ms-quick-chips span,
      .near,
      .nav-search-close,
      .wx-field-toggle button {
        touch-action: manipulation;
      }
      body.mode-places .m-week-strip { display: none; }
      .m-week-strip .mws-head {
        position: absolute;
        inset: 2px 8px auto;
        height: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
      }
      .m-week-strip .mws-grab {
        width: 34px;
        height: 4px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.32);
      }
      .m-week-strip .mws-title { display: none; }
      .m-week-strip .mws-expand {
        position: absolute;
        right: 0;
        top: -1px;
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        color: var(--ink-2);
        font-size: 0.72rem;
        cursor: pointer;
        transform: translateY(-4px);
      }
      .m-week-strip .mws-list {
        display: flex;
        gap: 4px;
        flex: 1;
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .m-week-strip .mws-list::-webkit-scrollbar { display: none; }
      .m-week-strip .mws-day {
        flex: 1 0 44px;
        min-width: 44px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 6px 2px 6px;
        border-radius: 12px;
        background: transparent;
        border: 0;
        color: var(--ink);
        cursor: pointer;
        transition: background 0.15s var(--ease);
      }
      .m-week-strip .mws-day:hover,
      .m-week-strip .mws-day:focus-visible { background: rgba(255, 255, 255, 0.06); }
      .m-week-strip .mws-day.is-today { background: rgba(59, 140, 255, 0.16); }
      .m-week-strip .mws-day .mws-d {
        font-size: 0.55rem;
        font-weight: 600;
        color: var(--ink-2);
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }
      .m-week-strip .mws-day.is-today .mws-d { color: #7fbeff; }
      .m-week-strip .mws-day .mws-ico {
        display: grid;
        place-items: center;
        width: 22px;
        height: 22px;
        font-size: 0.92rem;
        line-height: 1;
      }
      .m-week-strip .mws-day .mws-ico svg {
        width: 22px;
        height: 22px;
      }
      .m-week-strip .mws-day .mws-hi {
        font-size: 0.7rem;
        font-weight: 650;
        line-height: 1;
      }
      .m-week-strip .mws-day .mws-lo {
        font-size: 0.58rem;
        color: var(--ink-2);
        line-height: 1;
      }
      .m-week-strip .mws-day .mws-rate {
        margin-top: 2px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.28);
      }
      .m-week-strip .mws-day .mws-rate.excellent { background: #7ed99a; }
      .m-week-strip .mws-day .mws-rate.good      { background: #9ed98a; }
      .m-week-strip .mws-day .mws-rate.fair      { background: #ffcf6b; }
      .m-week-strip .mws-day .mws-rate.poor      { background: #ff8f80; }
      .m-week-strip .mws-detail { display: none; }
      .m-week-strip .mws-empty {
        flex: 1;
        min-width: 0;
        padding: 12px;
        text-align: center;
        font: 500 0.65rem/1 var(--f);
        color: var(--ink-2);
      }
      body.m-week-expanded .m-week-strip {
        max-height: min(290px, 38dvh);
        border-radius: 22px;
        padding: 38px 8px 10px;
        touch-action: pan-x;
      }
      body.m-week-expanded .m-week-strip .mws-head {
        inset: 6px 10px auto;
        height: 26px;
        justify-content: flex-start;
        gap: 8px;
      }
      body.m-week-expanded .m-week-strip .mws-grab {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
      }
      body.m-week-expanded .m-week-strip .mws-title {
        display: inline;
        color: var(--ink);
        font: 650 0.68rem/1 var(--f);
      }
      body.m-week-expanded .m-week-strip .mws-expand {
        top: 2px;
        transform: rotate(180deg);
      }
      body.m-week-expanded .m-week-strip .mws-list { gap: 8px; }
      body.m-week-expanded .m-week-strip .mws-day {
        position: relative;
        flex: 0 0 128px;
        min-width: 128px;
        align-items: stretch;
        padding: 8px 9px 10px;
        gap: 3px;
        background: rgba(255, 255, 255, 0.035);
        text-align: left;
      }
      body.m-week-expanded .m-week-strip .mws-day.is-today {
        background: rgba(59, 140, 255, 0.16);
      }
      body.m-week-expanded .m-week-strip .mws-ico {
        position: absolute;
        right: 8px;
        top: 8px;
        width: 30px;
        height: 30px;
      }
      body.m-week-expanded .m-week-strip .mws-hi,
      body.m-week-expanded .m-week-strip .mws-lo { display: inline; }
      body.m-week-expanded .m-week-strip .mws-rate { display: none; }
      body.m-week-expanded .m-week-strip .mws-detail {
        display: grid;
        grid-template-columns: 1fr;
        gap: 4px;
        margin-top: 5px;
        padding-top: 7px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        color: var(--ink-2);
        font: 500 0.58rem/1.15 var(--f);
      }
      body.m-week-expanded .m-week-strip .mws-detail span {
        display: flex;
        justify-content: space-between;
        gap: 6px;
      }
      body.m-week-expanded .m-week-strip .mws-detail b {
        color: var(--ink);
        font-weight: 600;
      }
      body.m-week-expanded .m-week-strip .mws-rating.excellent b,
      body.m-week-expanded .m-week-strip .mws-rating.good b { color: #9ee3af; }
      body.m-week-expanded .m-week-strip .mws-rating.fair b { color: #ffcf6b; }
      body.m-week-expanded .m-week-strip .mws-rating.poor b { color: #ff9f91; }

      /* ---- Inspector: bottom sheet when .m-open (peek is the collapsed state) */
      .inspector {
        left: 8px;
        right: 8px;
        top: auto;
        bottom: calc(var(--status-h) + var(--dock-h) + 8px);
        width: auto;
        max-width: none;
        max-height: none;
        z-index: 28;
      }
      /* Collapsed = hidden on mobile. Only .m-open shows it. */
      .inspector:not(.m-open) { display: none; }
      .inspector.on.m-open { display: flex; }
      /* Defeat desktop .inspector.view-now.on { bottom: auto } so the sheet
         stays anchored to the bottom chrome band. */
      .inspector.view-now.on.m-open,
      .inspector.view-today.on.m-open,
      .inspector.view-week.on.m-open,
      .inspector.m-open {
        top: auto !important;
        bottom: calc(var(--status-h) + var(--dock-h) + 8px) !important;
        height: auto;
        max-height: calc(100dvh - var(--status-h) - var(--dock-h) - 72px);
      }
      .inspector.m-open .inspector-shell {
        flex-direction: column;
        width: auto;
        height: auto;
        max-height: 100%;
        border-radius: 22px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: var(--shadow);
        overflow: hidden;
      }
      .inspector.m-open .inspector-core {
        width: auto;
        flex: 1 1 auto;
        max-height: 62dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
      }
      .inspector.view-now.on.m-open .inspector-shell,
      .inspector.view-now.on.m-open .inspector-core {
        height: auto;
        max-height: inherit;
        overflow: hidden;
      }
      .inspector.view-now.on.m-open .inspector-core {
        overflow-y: auto;
        max-height: 62dvh;
      }
      /* The sheet header is the Today | 7-Day segmented control (below);
         the desktop head row would just duplicate it. */
      .inspector.m-open .inspector-head { display: none; }
      .inspector.m-open .insp-seg { display: none !important; }

      /* ---- Today | 7-Day segmented control (mobile sheet header) ------
         Only one view is mounted at a time: Today = .inspector-core,
         7-Day = the .wx-week grid (see the week rules further down). --- */
      .inspector.m-open .m-insp-tabs {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
        padding: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }
      .m-insp-tabs .mit-seg {
        display: flex;
        flex: 1;
        min-width: 0;
        gap: 2px;
        padding: 2px;
        border-radius: 12px;
        background: var(--chrome-fill);
      }
      .m-insp-tabs .mit-tab {
        flex: 1;
        min-width: 0;
        min-height: 44px;
        height: 44px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--ink-2);
        font: 650 0.66rem/1 var(--f);
        letter-spacing: 0.01em;
        cursor: pointer;
        transition: background 0.18s var(--ease), color 0.18s var(--ease);
      }
      .m-insp-tabs .mit-tab.on {
        background: var(--ba-accent-tint);
        color: var(--blue-deep);
      }
      .m-insp-tabs .mit-close {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 10px;
        background: var(--chrome-fill);
        color: var(--ink-2);
        font-size: 0.72rem;
        line-height: 1;
        cursor: pointer;
      }

      /* ---- Place card → full-width bottom sheet ---- */
      /* ---- Place card → condensed bottom sheet ---- */
      .sheet {
        left: 8px;
        right: 8px;
        top: auto;
        bottom: calc(var(--status-h) + 8px);
        width: auto;
        z-index: 29;
        transform: translateY(14px);
      }
      .sheet.show { transform: none; }
      .sheet .ph { height: 68px; }        /* was 108 — photo is a hint, not a hero */
      .sheet .ph.has-set { height: 84px; }
      .sheet .ph-set,
      .sheet .ph-set[data-n="3"] {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr;
      }
      .sheet .ph-set > :first-child { grid-row: auto; }
      .sheet .bd { padding: 12px 14px 14px; }
      .sheet .amen { margin: 10px 0 0; }
      .sheet .sheet-disclaimer { margin: 10px 0 0; }
      .sheet .sheet-links { margin: 10px 0 6px; }
      .sheet .sheet-nav { min-height: 42px; font-size: 0.8125rem; margin-bottom: 6px; }
      .sheet .cta { height: 44px; min-height: 44px; }

      /* ---- Top-right vertical utility stack (Apple Maps pattern) ------
         Locate · Layers · 3D only. Zoom / Water / Clouds / chrome toggles
         stay available on desktop; Layers opens the wx-field-toggle
         popover on both Conditions and Places. ------------------------ */
      .map-tools {
        right: 10px;
        top: calc(var(--ba-nav-height) + 14px + 8px);
        bottom: auto;
        max-height: calc(100dvh - var(--ba-nav-height) - 14px - var(--status-h) - 8px);
        justify-content: flex-end;
      }
      .map-nav {
        flex-direction: column;
        padding: 0;
        gap: 4px;
        border-radius: 0;
        box-shadow: none;
        background: none;
        height: auto;
        flex: 0 0 auto;
      }
      .map-nav-group {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
      }
      .map-nav-zoom,
      #btn-water-view,
      #map-rail-clouds,
      .map-nav .style-toggle {
        display: none !important;
      }
      .map-nav-view {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 4px;
        border-radius: 14px;
      }
      .map-nav .nav-divider { display: none; }
      .map-rail-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        border-radius: 12px;
        padding: 0;
      }
      .m-map-layers {
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: var(--ink-2);
        font-size: 1rem;
        cursor: pointer;
        display: grid !important;
        place-items: center;
      }
      body.m-layers-open .m-map-layers {
        color: var(--ink);
        background: rgba(59, 140, 255, 0.22);
      }

      /* Top-left summary card retired — bottom peek owns conditions entry */
      .m-summary {
        display: none !important;
      }
      .m-summary .ms-cond,
      .m-summary .ms-places {
        display: none;
        text-align: left;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(11, 14, 20, 0.78);
        backdrop-filter: blur(22px) saturate(150%);
        -webkit-backdrop-filter: blur(22px) saturate(150%);
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
        border-radius: 18px;
        color: var(--ink);
        cursor: pointer;
        font-family: var(--f);
      }
      body.mode-conditions .m-summary .ms-cond { display: block; padding: 12px 14px 12px; min-width: 148px; }
      body.mode-places     .m-summary .ms-places { display: block; padding: 10px 12px 10px; min-width: 160px; }

      /* -- Conditions state -- */
      .ms-cond .ms-hero {
        display: flex;
        align-items: baseline;
        gap: 8px;
      }
      .ms-cond .ms-temp {
        font-size: 2.15rem;
        font-weight: 300;
        line-height: 1;
        letter-spacing: -0.02em;
      }
      .ms-cond .ms-wicon {
        font-size: 1.15rem;
        opacity: 0.9;
        line-height: 1;
      }
      .ms-cond .ms-cond-desc {
        margin-top: 4px;
        font-size: 0.7rem;
        color: var(--ink);
        font-weight: 500;
      }
      .ms-cond .ms-cond-verdict {
        font-size: 0.62rem;
        color: var(--ink-2);
        margin-top: 1px;
      }
      .ms-cond .ms-cond-score {
        margin-top: 8px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 8px 4px 6px;
        border-radius: 999px;
        background: rgba(47, 208, 140, 0.18);
        border: 1px solid rgba(47, 208, 140, 0.35);
      }
      .ms-cond .ms-score-num {
        font-size: 0.78rem;
        font-weight: 700;
        color: #8fe3b8;
        line-height: 1;
      }
      .ms-cond .ms-score-lbl {
        font-size: 0.58rem;
        color: #b7f0d0;
        letter-spacing: 0.03em;
      }
      /* Tier tints — mirror .wx-score tiers so the two surfaces agree */
      .ms-cond.tier-fair .ms-cond-score { background: rgba(255, 194, 75, 0.18); border-color: rgba(255, 194, 75, 0.35); }
      .ms-cond.tier-fair .ms-score-num  { color: #ffdda1; }
      .ms-cond.tier-fair .ms-score-lbl  { color: #ffe9c1; }
      .ms-cond.tier-poor .ms-cond-score { background: rgba(255, 122, 107, 0.2);  border-color: rgba(255, 122, 107, 0.4); }
      .ms-cond.tier-poor .ms-score-num  { color: #ffb3a8; }
      .ms-cond.tier-poor .ms-score-lbl  { color: #ffcdc4; }

      /* -- Places state -- */
      .ms-places .ms-count {
        font-size: 1.35rem;
        font-weight: 650;
        letter-spacing: -0.01em;
        line-height: 1;
      }
      .ms-places .ms-count > span:last-child {
        font-size: 0.7rem;
        font-weight: 500;
        color: var(--ink-2);
        margin-left: 2px;
      }
      .ms-places .ms-nearby {
        margin-top: 4px;
        font-size: 0.62rem;
        color: var(--ink-2);
      }
      .ms-places .ms-nearby .chev { margin-left: 2px; }
      .ms-places .ms-quick-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: 8px;
      }
      .ms-places .ms-quick-chips span {
        padding: 4px 9px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 0.58rem;
        color: var(--ink-2);
        cursor: pointer;
        line-height: 1.2;
      }
      .ms-places .ms-quick-chips span.on {
        background: rgba(59, 140, 255, 0.22);
        border-color: rgba(59, 140, 255, 0.4);
        color: var(--ink);
      }

      /* ================================================================
         LAYER PICKER — folded popover (Conditions mode only) ========== */
      body.mode-conditions .wx-field-toggle,
      body.mode-conditions .wx-field-toggle.on {
        display: none;
        pointer-events: none; /* closed popover must never steal map/tool taps */
        left: 10px;
        right: 58px;
        top: 66px;
        transform: none;
        width: auto;
        max-width: none;
        justify-content: center;
        padding: 3px;
        gap: 0;
        z-index: 32;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
      }
      body.mode-conditions.m-layers-open .wx-field-toggle,
      body.mode-conditions.m-layers-open .wx-field-toggle.on {
        display: flex;
        pointer-events: auto;
      }
      body.mode-conditions .wx-field-toggle button:not(.wxft-close) {
        flex: 1;
        min-width: 0;
        padding: 8px 6px;
        font-size: 0.66rem;
        font-weight: 550;
        border-radius: 999px;
      }
      body.mode-conditions .wx-field-toggle .wx-sat-pair {
        flex: 2;
        min-width: 0;
      }
      body.mode-conditions .wx-field-toggle .wx-sat-pair button {
        flex: 1;
      }
      body.mode-places .wx-field-toggle,
      body.mode-places .wx-field-toggle.on { display: none !important; }
      body.m-layers-open .m-summary { opacity: 0; pointer-events: none; }
      /* Popover-header markup is no longer used; keep hidden defensively */
      .wxft-head { display: none !important; }

      /* ================================================================
         LEGEND BAR — horizontal gradient scale below the layer pill.
         Visible only when a scale-bearing preset is active in Conditions
         mode. JS sets [data-preset] and toggles [data-on]. ============ */
      body.mode-conditions .m-legend-bar[data-on="1"] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        position: absolute;
        left: 10px;
        right: 10px;
        top: 66px;
        z-index: 25;
        padding: 6px 12px;
        border-radius: 999px;
        color: var(--ink-2);
        font: 500 0.58rem/1 var(--f);
        letter-spacing: 0.03em;
      }
      /* When the layer popover is open, park the legend under it so the
         two don't stack on the same y. Collapsed layers + no scale preset
         → no legend (map stays clear). */
      body.mode-conditions.m-layers-open .m-legend-bar[data-on="1"] {
        top: 118px;
        right: 58px;
      }
      body.mode-conditions.m-layers-open.legend-on .m-summary,
      body.mode-conditions.m-layers-open.legend-on .map-tools {
        top: calc(var(--ba-nav-height) + 14px + 98px);
      }
      .timeline-dock.on {
        position: relative;
        z-index: 3;
        flex-shrink: 0;
        pointer-events: auto;
      }
      body.mode-conditions .m-week-strip {
        z-index: 1;
        flex-shrink: 0;
      }
      /* Expanded strip grows in-flow above the scrubber; keep the player
         hit-targetable even if shadows/overflow paint over the seam. */
      body.m-week-expanded .timeline-dock.on {
        z-index: 5;
      }
      .scrubber,
      .scrubber .play,
      .scrubber input[type="range"] {
        position: relative;
        z-index: 4;
        pointer-events: auto;
      }
      .scrubber { touch-action: manipulation; }
      .scrubber input[type="range"],
      .scrubber .play { touch-action: none; }
      .m-legend-bar .mlb-scale {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        padding: 0 4px;
        color: var(--ink);
      }
      .m-legend-bar .mlb-scale span {
        flex-shrink: 0;
        opacity: 0.9;
      }
      .m-legend-bar .mlb-unit {
        flex-shrink: 0;
        color: var(--ink-2);
        opacity: 0.85;
      }
      /* Gradient tints per preset — read from data-preset attribute */
      body.mode-conditions .m-legend-bar[data-preset="wind"][data-on="1"] {
        background: linear-gradient(90deg,
          rgba(59, 140, 255, 0.32) 0%,
          rgba(76, 220, 190, 0.28) 40%,
          rgba(255, 194, 75, 0.30) 70%,
          rgba(255, 122, 107, 0.36) 100%);
      }
      body.mode-conditions .m-legend-bar[data-preset="waves"][data-on="1"] {
        background: linear-gradient(90deg,
          rgba(76, 220, 190, 0.28) 0%,
          rgba(59, 140, 255, 0.32) 50%,
          rgba(255, 122, 107, 0.36) 100%);
      }
      body.mode-conditions .m-legend-bar[data-preset="temp"][data-on="1"] {
        background: linear-gradient(90deg,
          rgba(59, 140, 255, 0.32) 0%,
          rgba(47, 208, 140, 0.28) 45%,
          rgba(255, 194, 75, 0.30) 75%,
          rgba(255, 122, 107, 0.36) 100%);
      }
      body.mode-conditions .m-legend-bar[data-preset="depth"][data-on="1"] {
        background: linear-gradient(90deg,
          rgba(255, 255, 255, 0.14) 0%,
          rgba(138, 212, 240, 0.28) 12%,
          rgba(59, 140, 255, 0.32) 28%,
          rgba(47, 95, 152, 0.42) 55%,
          rgba(11, 14, 20, 0.55) 100%);
      }

    }

    /* Narrow: nav + week panel + overflow safety.
       Dock / inspector fusion lives in the block above — do not re-assert
       dock radius / --dock-h here or the fused chrome breaks. */
    @media (max-width: 900px) {
      /* Scoped — unscoped html/body rules leak to /boats etc. after Explore. */
      html:has(body.atlas-scope),
      body.atlas-scope { overflow-x: hidden; max-width: 100vw; }
      .nav { gap: 8px; padding: 0 10px; }
      .mode-strip a,
      .mode-strip button { padding: 6px 7px 8px; font-size: 0.62rem; }
      .near { padding: 0 10px; font-size: 0.8rem; }
      /* .nav-search-wrap / .wx-field-toggle sizing owned by the block above —
         redeclaring max-width:none here would undo the search-icon collapse. */
      .inspector-tab {
        display: none !important; /* bottom peek replaces the float tab */
      }
      .inspector.m-open .wx-week {
        width: 100%;
        max-width: 100%;
        border-left-width: 0;
        border-top: 0 solid rgba(255,255,255,0.08);
        max-height: 0;
      }
      .inspector.m-open.week-open .wx-week {
        width: 100%;
        max-width: 100%;
        max-height: 480px;
        border-left-width: 0;
        border-top-width: 1px;
      }
      .inspector.m-open .wx-week-inner {
        width: 100%;
        height: auto;
        min-height: 0;
      }
      .inspector.m-open .wx-week-list {
        min-height: 0;
        overflow-x: auto;
      }
      .wx-week-days,
      .wx-week-row {
        grid-template-columns: 40px repeat(7, minmax(0, 1fr));
      }

      /* ---- 7-Day view inside the mobile inspector sheet ----------------
         The desktop layout slides the week grid in as a side panel; in the
         sheet it becomes the whole sheet body (the Today view unmounts) and
         scrolls vertically, with the 7-column matrix scrolling horizontally
         inside it so the numbers stay legible on a phone. -------------- */
      .inspector.m-open.week-open .inspector-core { display: none; }
      .inspector.m-open.week-open .wx-week {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        border-top-width: 0;
      }
      .inspector.m-open.week-open .wx-week-inner {
        max-height: none;
        overflow: visible;
      }
      /* .m-insp-tabs carries the title + close affordance in the sheet */
      .inspector.m-open.week-open .wx-week-head { display: none; }
      .inspector.m-open .wx-week-days,
      .inspector.m-open .wx-week-rows { min-width: 500px; }
      .mode-hint { top: 112px; }
      .legend-chip { display: none; }
      .status-bar .src { display: none; }
    }

    /* Phone — further compress */
    @media (max-width: 560px) {
      /* No peek band in the current mobile design; --dock-h is measured from
         the real bottom stack in JS (syncDockHeight). */
      :root { --peek-h: 0px; }
      /* left/right inset owns the dock width here — a `width` override would
         push the pills past the right edge. */
      .data-dock,
      body:has(.inspector.on) .data-dock,
      body:has(.inspector.on.week-open) .data-dock {
        left: 6px;
        right: 6px;
        width: auto;
        max-width: none;
      }
      .inspector { left: 6px; right: 6px; }
      .scrubber .span { display: none; }
      .scrubber .sun-mark .lbl { display: none; }
      .catbar button span:not(.ico) { display: none; }
      .catbar button { padding: 8px; }
      .map-nav .style-toggle { display: none; }
      #status-coords { display: none; } /* coords crowd the strip on phones */
    }

    /* ===== My Boat (onboard hardware GPS) — distinct from .vessel-marker ===== */
    .sheet.ba-my-boat-sheet .ba-my-boat-link {
      color: #2BBEF2;
      text-decoration: none;
      font-weight: 600;
    }
    .sheet.ba-my-boat-sheet .ba-my-boat-link:hover {
      text-decoration: underline;
    }
    .sheet.ba-my-boat-sheet #sheet-badge {
      display: none !important;
    }
    .sheet.ba-my-boat-sheet #sheet-stars {
      display: none !important;
    }

    /* Default: map overlay. Explore v2 remounts wrap into `.ba-nav-right`. */
    .ba-my-boat-chip-wrap {
      position: fixed;
      z-index: 76;
      left: 24px;
      top: auto;
      bottom: 28px;
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .ba-my-boat-chip-wrap[hidden] {
      display: none !important;
    }
    .ba-my-boat-chip {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: max-content;
      max-width: none;
      margin: 0;
      padding: 10px 14px;
      border: 1px solid rgba(43, 190, 242, 0.42);
      border-radius: 999px;
      background: rgba(4, 24, 32, 0.94);
      box-shadow: 0 12px 32px rgba(4, 24, 32, 0.45);
      color: #f4f1ea;
      font: 600 13px/1 "Neue Haas Grotesk Display Pro", "Helvetica Neue", Arial, sans-serif;
      letter-spacing: -0.01em;
      white-space: nowrap;
      cursor: pointer;
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }
    .ba-my-boat-chip:hover {
      border-color: rgba(43, 190, 242, 0.75);
    }
    .ba-my-boat-chip:focus-visible {
      outline: 2px solid #0b63f6;
      outline-offset: 2px;
    }
    .ba-my-boat-chip-light {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex: 0 0 auto;
      background: #12b886;
      box-shadow: 0 0 0 3px rgba(18, 184, 134, 0.22);
    }
    .ba-my-boat-chip-light--on {
      background: #12b886;
      box-shadow: 0 0 0 3px rgba(18, 184, 134, 0.22);
    }
    .ba-my-boat-chip-light--off {
      background: #ef6548;
      box-shadow: 0 0 0 3px rgba(239, 101, 72, 0.22);
    }
    .ba-my-boat-chip-name {
      font-size: 13px;
      letter-spacing: -0.01em;
      color: #fff;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
    }
    .ba-my-boat-chip-caret {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 12px;
      height: 12px;
      margin-left: 0;
      border: 0;
      color: rgba(244, 241, 234, 0.72);
      flex: 0 0 auto;
      transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    .ba-my-boat-chip-caret svg {
      display: block;
    }
    .ba-my-boat-chip--menu-open .ba-my-boat-chip-caret {
      transform: rotate(180deg);
    }
    .ba-my-boat-source-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      left: auto;
      z-index: 20;
      box-sizing: border-box;
      min-width: 240px;
      width: max-content;
      max-width: min(280px, calc(100vw - 32px));
      padding: 10px 8px 8px;
      border-radius: 16px;
      border: 1px solid rgba(216, 216, 209, 0.28);
      background: rgba(4, 24, 32, 0.96);
      box-shadow: 0 18px 54px rgba(4, 24, 32, 0.45);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
    }
    .ba-my-boat-source-menu[hidden] {
      display: none !important;
    }
    .ba-my-boat-source-menu-title {
      padding: 2px 10px 10px;
      color: rgba(244, 241, 234, 0.55);
      font: 600 11px/1.2 "Neue Haas Grotesk Display Pro", "Helvetica Neue", Arial, sans-serif;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .ba-my-boat-source-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      width: 100%;
      min-height: 40px;
      margin: 0;
      padding: 8px 12px;
      border: 0;
      border-radius: 12px;
      background: transparent;
      color: #f4f1ea;
      font: 600 14px/1.2 "Neue Haas Grotesk Display Pro", "Helvetica Neue", Arial, sans-serif;
      letter-spacing: -0.01em;
      cursor: pointer;
      text-align: left;
      white-space: nowrap;
    }
    .ba-my-boat-source-option:hover:not(:disabled) {
      background: rgba(43, 190, 242, 0.12);
    }
    .ba-my-boat-source-option:focus-visible {
      outline: 2px solid #0b63f6;
      outline-offset: -2px;
    }
    .ba-my-boat-source-option--active {
      background: rgba(11, 99, 246, 0.28);
    }
    .ba-my-boat-source-option--disabled,
    .ba-my-boat-source-option:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    .ba-my-boat-source-option-label {
      min-width: 0;
      flex: 1 1 auto;
    }
    .ba-my-boat-source-option-hint {
      flex: 0 0 auto;
      color: rgba(244, 241, 234, 0.62);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
    }
    .ba-my-boat-source-notice {
      margin: 8px 4px 4px;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid rgba(242, 169, 0, 0.38);
      background: rgba(242, 169, 0, 0.12);
      color: rgba(244, 241, 234, 0.92);
      font: 400 13px/1.55 "Neue Haas Grotesk Display Pro", "Helvetica Neue", Arial, sans-serif;
      letter-spacing: 0.01em;
      white-space: normal;
      overflow-wrap: break-word;
      word-break: normal;
      hyphens: none;
    }
    @media (max-width: 900px) {
      .ba-my-boat-chip-wrap:not(.ba-my-boat-chip--nav) {
        left: 50%;
        right: auto;
        top: calc(12px + env(safe-area-inset-top, 0px) + 48px + 8px);
        bottom: auto;
        transform: translateX(-50%);
        align-items: center;
      }
      .ba-my-boat-chip-wrap:not(.ba-my-boat-chip--nav) .ba-my-boat-source-menu {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
      }
    }

    .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-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(--f);
      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(--f);
      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(--f);
      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: map chip stays off; navigate/guidance ack carries the warning. */
    body.ba-chase-view .water-view-chip,
    body.ba-chase-view .water-view-chip.on,
    .water-view-chip[hidden],
    .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;
      /* Do not set inset:!important — that clears left/top and parks the hit/paint. */
      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;
    }

    /* Next.js Issues / toast portals + nav HUD alerts above plan sheet / dock. */
    nextjs-portal,
    [data-nextjs-toast],
    [data-next-badge-root] {
      z-index: 2147483000 !important;
    }
    .nav-hud-alert,
    .wx-nws-alert {
      position: relative;
      z-index: 120;
    }
    .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(--f);
      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(--f);
      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;
      }
    }

    /* ===== Phase 1 Navigation ===== */
    .vessel-marker {
      width: 44px;
      height: 44px;
      border: 0;
      background: transparent;
      padding: 0;
      cursor: default;
      pointer-events: none;
      --vm-fill: #2BBEF2;
      --vm-stroke: #ffffff;
    }
    .vessel-marker.is-underway {
      --vm-fill: #2BBEF2;
    }
    .vessel-marker .vm-ring {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 48px;
      height: 48px;
      margin: -24px 0 0 -24px;
      border-radius: 50%;
      border: 1.5px solid color-mix(in srgb, var(--vm-fill) 40%, transparent);
      background: color-mix(in srgb, var(--vm-fill) 10%, transparent);
      opacity: 0.5;
      transition: width 0.3s, height 0.3s, margin 0.3s, opacity 0.3s;
      pointer-events: none;
    }
    .vessel-marker.is-underway .vm-ring {
      opacity: 0.28;
      border-color: color-mix(in srgb, var(--vm-fill) 28%, transparent);
    }
    .vessel-marker .vm-arrow {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 34px;
      height: 42px;
      margin: -26px 0 0 -17px;
      transform-origin: 50% 68%;
      filter: drop-shadow(0 3px 10px rgba(4, 24, 32, 0.6));
      pointer-events: none;
    }
    .vessel-marker .vm-arrow svg {
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .vessel-marker.is-underway .vm-arrow {
      width: 38px;
      height: 48px;
      margin: -30px 0 0 -19px;
    }
    .vessel-marker .vm-core {
      display: none;
    }
    .vessel-heading-pill {
      pointer-events: none;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      height: 28px;
      padding: 0 10px 0 8px;
      border-radius: 999px;
      background: rgba(4, 24, 32, 0.88);
      border: 1px solid rgba(255, 255, 255, 0.16);
      box-shadow: 0 8px 22px rgba(4, 24, 32, 0.35);
      color: #F4F1EA;
      font: 600 12px/1 "Neue Haas Grotesk Display Pro", "Helvetica Neue", Arial, sans-serif;
      letter-spacing: 0.02em;
      white-space: nowrap;
      opacity: 0;
      transform: translateY(2px);
      transition: opacity 160ms cubic-bezier(.22,1,.36,1), transform 160ms cubic-bezier(.22,1,.36,1);
    }
    .vessel-heading-pill.is-on {
      opacity: 1;
      transform: translateY(0);
    }
    .vessel-heading-pill .vhp-needle {
      width: 12px;
      height: 12px;
      flex: 0 0 auto;
      color: #EF6548;
    }
    .vessel-heading-pill .vhp-needle svg {
      display: block;
      width: 100%;
      height: 100%;
    }
    .vessel-heading-pill[hidden] {
      display: none !important;
    }
    .dest-marker {
      width: 18px;
      height: 18px;
      border-radius: 50% 50% 50% 0;
      background: var(--ocean-900, #0b1b2e);
      border: 2px solid #fff;
      transform: rotate(-45deg);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
      pointer-events: none;
    }
    .origin-marker {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--blue, #0B63F6);
      border: 2px solid #fff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
      color: #fff;
      font: 700 12px/28px var(--f, "Helvetica Neue", Arial, sans-serif);
      text-align: center;
      pointer-events: none;
      z-index: 2;
    }
    .origin-marker::before { content: "A"; }
    .dest-marker-b {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--ocean-900, #041820);
      border: 2px solid #fff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
      color: #fff;
      font: 700 12px/28px var(--f, "Helvetica Neue", Arial, sans-serif);
      text-align: center;
      transform: none;
      pointer-events: none;
      z-index: 2;
    }
    .dest-marker-b::before { content: "B"; }
    .nav-perm {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 45;
      width: min(380px, calc(100vw - 40px));
      padding: 22px 22px 18px;
      border-radius: 20px;
      color: var(--ink);
      box-sizing: border-box;
    }
    .nav-perm[hidden] { display: none !important; }
    .nav-perm h3 {
      margin: 0 0 10px;
      font: 650 1.125rem/1.25 var(--f);
      letter-spacing: -0.025em;
    }
    .nav-perm > p {
      margin: 0;
      font: 400 0.875rem/1.5 var(--f);
      color: var(--ink-2);
    }
    .nav-perm-acts {
      display: flex;
      align-items: stretch;
      gap: 10px;
      margin-top: 18px;
    }
    .nav-perm-primary {
      flex: 1 1 auto;
      min-width: 0;
      height: 44px;
      border: 0;
      border-radius: 999px;
      background: var(--blue, #0b63f6);
      color: #fff;
      font: 600 0.875rem/1 var(--f);
      cursor: pointer;
      padding: 0 18px;
    }
    .nav-perm-ghost {
      flex: 0 0 auto;
      height: 44px;
      min-width: 100px;
      padding: 0 16px;
      border: 1px solid var(--chrome-line);
      border-radius: 999px;
      background: transparent;
      color: var(--ink);
      font: 500 0.875rem/1 var(--f);
      cursor: pointer;
      white-space: nowrap;
    }
    .nav-perm-denied {
      margin-top: 14px !important;
      color: #c45c2a !important;
      font-size: 0.8125rem !important;
      line-height: 1.45 !important;
    }

    /* Navigation mode: clear competing Explore chrome entirely (opacity fade
       left a ghost data-dock behind the bottom HUD and bled header links
       through the translucent top card). */
    body.nav-active .m-summary,
    body.nav-active .inspector-tab,
    body.nav-active .data-dock,
    body.nav-active .wx-field-toggle,
    body.nav-active .m-legend-bar,
    body.nav-active .legend-chip,
    body.nav-active .catbar,
    body.nav-active .depth-probe,
    body.nav-planning .m-summary,
    body.nav-planning .inspector-tab,
    body.nav-planning .data-dock,
    body.nav-planning .wx-field-toggle,
    body.nav-planning .m-legend-bar,
    body.nav-planning .legend-chip,
    body.nav-planning .catbar,
    body.nav-planning .depth-probe,
    body.nav-planning .m-cond-peek {
      display: none !important;
    }
    body.nav-active .sheet.show,
    body.nav-planning .sheet.show { display: none !important; }
    body.nav-active .status-bar,
    body.nav-planning .status-bar {
      opacity: 0.55;
    }
    /* Keep Mapbox logo/attrib clear of the bottom HUD */
    body.nav-active .mapboxgl-ctrl-bottom-left,
    body.nav-active .mapboxgl-ctrl-bottom-right {
      bottom: calc(var(--status-h) + 78px) !important;
    }
    body.nav-planning .mapboxgl-ctrl-bottom-left,
    body.nav-planning .mapboxgl-ctrl-bottom-right {
      bottom: calc(var(--status-h) + 12px) !important;
    }

    .nav-plan {
      position: absolute;
      top: calc(var(--ba-nav-height, 70px) + 18px);
      left: 50%;
      transform: translateX(-50%);
      /* Above forecast/temp chips (~64–70); below primary nav (~80) on explore-v2 */
      z-index: 78;
      width: min(400px, calc(100vw - 24px));
      height: fit-content;
      max-height: calc(100dvh - var(--ba-nav-height, 70px) - 32px);
      overflow: auto;
      padding: 18px 18px 16px;
      border-radius: 16px;
      background: var(--panel-solid-strong, rgba(255, 255, 255, 0.98));
      border: 1px solid var(--chrome-line, rgba(11, 27, 46, 0.1));
      box-shadow: 0 18px 48px rgba(3, 12, 24, 0.28);
      color: var(--ink, #041820);
      box-sizing: border-box;
      pointer-events: auto;
    }
    /* Route-planning v2: left docked workspace (flag ba-route-planning-v2). */
    body.ba-route-planning-v2.nav-planning .nav-plan:not(.nav-plan--preview) {
      left: 24px;
      right: auto;
      transform: none;
      width: min(420px, calc(100vw - 48px));
      max-height: calc(100dvh - var(--ba-nav-height, 70px) - 48px);
      border-radius: 20px;
    }
    body.ba-route-planning-v2 .nav-plan-v2-only[hidden] {
      display: none !important;
    }
    body.ba-route-planning-v2.nav-planning .nav-plan-v2-only:not([hidden]):not(details) {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 16px;
    }
    body.ba-route-planning-v2.nav-planning details.nav-plan-v2-only:not([hidden]) {
      display: block;
    }
    body.ba-route-planning-v2 .nav-plan-vessel {
      margin-top: 12px;
      border: 1px solid var(--chrome-line, #D8D8D1);
      border-radius: 16px;
      overflow: hidden;
    }
    body.ba-route-planning-v2 .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);
    }
    body.ba-route-planning-v2 .nav-plan-vessel-summary::-webkit-details-marker {
      display: none;
    }
    body.ba-route-planning-v2 .nav-plan-vessel-body {
      padding: 0 14px 14px;
      border-top: 1px solid var(--chrome-line, #D8D8D1);
    }
    body.ba-route-planning-v2 .nav-plan-vessel-acts {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 4px 0 12px;
    }
    body.ba-route-planning-v2 .nav-plan-vessel-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px 12px;
      margin: 12px 0;
    }
    body.ba-route-planning-v2 .nav-plan-vessel-grid label {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font: 500 11px/1.2 var(--f);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--muted, #4B5A5B);
    }
    body.ba-route-planning-v2 .nav-plan-vessel-grid input {
      min-height: 40px;
      padding: 8px 10px;
      border-radius: 14px;
      border: 1px solid var(--chrome-line, #D8D8D1);
      background: #fff;
      color: var(--ink, #041820);
      font: 500 14px/1.2 var(--f);
      text-transform: none;
      letter-spacing: 0;
    }
    body.ba-route-planning-v2 .nav-plan-constraints {
      list-style: none;
      margin: 12px 0 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    body.ba-route-planning-v2 .nav-plan-constraint {
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid var(--chrome-line, #D8D8D1);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    body.ba-route-planning-v2 .nav-plan-constraint strong {
      font: 600 13px/1.2 var(--f);
    }
    body.ba-route-planning-v2 .nav-plan-constraint span {
      font: 400 13px/1.35 var(--f);
      color: var(--muted, #4B5A5B);
    }
    body.ba-route-planning-v2 .nav-plan-constraint--hard {
      border-color: rgba(239, 101, 72, 0.45);
    }
    body.ba-route-planning-v2 .nav-plan-constraint--data {
      border-color: rgba(242, 169, 0, 0.45);
    }
    body.ba-route-planning-v2 .nav-plan-constraint--preference {
      border-color: rgba(122, 111, 240, 0.4);
    }
    body.ba-route-planning-v2 .nav-plan-constraint--info {
      border-color: rgba(43, 190, 242, 0.4);
    }
    body.ba-route-planning-v2 .nav-plan-constraint--advisory {
      border-color: rgba(242, 169, 0, 0.55);
    }
    body.ba-route-planning-v2 .nav-plan-tides {
      margin-top: 12px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid var(--chrome-line, #D8D8D1);
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    body.ba-route-planning-v2 .nav-plan-tides[hidden] {
      display: none !important;
    }
    body.ba-route-planning-v2 .nav-plan-tides-label {
      margin: 0;
      font: 600 12px/16px var(--f);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    body.ba-route-planning-v2 .nav-plan-tides-note {
      margin: 0;
      font: 400 13px/1.35 var(--f);
      color: var(--muted, #4B5A5B);
    }
    body.ba-route-planning-v2 .nav-plan-tides-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    body.ba-route-planning-v2 .nav-plan-tides-list li {
      font: 400 13px/1.35 var(--f);
    }
    body.ba-route-planning-v2 .nav-plan-tide-dist,
    body.ba-route-planning-v2 .nav-plan-tide-id {
      color: var(--muted, #4B5A5B);
      font-size: 12px;
    }
    body.ba-route-planning-v2 .nav-plan-offline {
      margin-top: 12px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid var(--chrome-line, #D8D8D1);
      display: flex;
      flex-direction: column;
      gap: 4px;
      font: 400 13px/1.35 var(--f);
    }
    body.ba-route-planning-v2 .nav-plan-persist {
      margin-top: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    body.ba-route-planning-v2 .nav-plan-name-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font: 400 13px/1.3 var(--f);
    }
    body.ba-route-planning-v2 .nav-plan-name-field input {
      border: 1px solid var(--chrome-line, #D8D8D1);
      border-radius: 14px;
      padding: 10px 12px;
      background: transparent;
      color: inherit;
      font: inherit;
    }
    body.ba-route-planning-v2 .nav-plan-persist-acts {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    body.ba-route-planning-v2 .nav-plan-persist-acts .nav-plan-ghost,
    body.ba-route-planning-v2 .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.ba-route-planning-v2 .nav-plan-import-label {
      display: inline-flex;
      align-items: center;
      cursor: pointer;
    }
    .nav-plan-thinking[hidden] {
      display: none !important;
    }
    .nav-plan-thinking {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 14px 0 0;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid var(--chrome-line, rgba(11, 27, 46, 0.12));
      background: rgba(11, 99, 246, 0.08);
      font: 500 14px/20px var(--f);
      color: var(--ink, #041820);
    }
    .nav-plan-thinking-spinner {
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      border-radius: 50%;
      border: 2px solid rgba(11, 99, 246, 0.22);
      border-top-color: var(--blue, #0B63F6);
      animation: ba-nav-plan-spin 0.8s linear infinite;
    }
    .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.85; }
    }
    @media (prefers-reduced-motion: reduce) {
      .nav-plan-thinking-spinner {
        animation: none;
        border-top-color: rgba(11, 99, 246, 0.22);
        background: rgba(11, 99, 246, 0.35);
      }
      .nav-plan-metrics--busy .nav-plan-metric strong {
        animation: none;
        opacity: 0.65;
      }
    }
    body.nav-plan-busy .nav-plan-offline,
    body.nav-plan-busy .nav-plan-chart-provenance,
    body.nav-plan-busy .nav-plan-persist,
    body.nav-plan-busy .nav-plan-constraints,
    body.nav-plan-busy .nav-plan-departures,
    body.nav-plan-busy .nav-plan-conditions {
      display: none !important;
    }
    body.ba-route-planning-v2 .nav-plan-departures-label {
      margin: 0 0 8px;
      font: 500 12px/1.35 var(--f);
      color: var(--muted, #4B5A5B);
    }
    body.ba-route-planning-v2 .nav-plan-persist-status {
      margin: 0;
      font: 400 12px/1.35 var(--f);
      color: var(--ink-muted, #4B5A5B);
    }
    body.ba-route-planning-v2 .nav-plan-persist-status--error {
      color: #EF6548;
    }
    body.ba-route-planning-v2 .nav-plan-chart-provenance {
      margin: 8px 0 0;
      font: 400 12px/1.4 var(--f);
      color: var(--ink-muted, #4B5A5B);
    }
    body.ba-route-planning-v2 .nav-plan-chart-provenance[data-chart-state="missing"] {
      color: #EF6548;
    }
    body.ba-route-planning-v2 .nav-plan-chart-provenance[data-chart-state="stale"] {
      color: #F2A900;
    }
    body.ba-route-planning-v2 .nav-plan-departures {
      margin-top: 12px;
    }
    body.ba-route-planning-v2 .nav-plan-departures-list {
      list-style: none;
      margin: 8px 0 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    body.ba-route-planning-v2 .nav-plan-departure-opt {
      width: 100%;
      text-align: left;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid var(--chrome-line, #D8D8D1);
      background: transparent;
      color: inherit;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-height: 44px;
    }
    body.ba-route-planning-v2 .nav-plan-departure-note {
      font: 400 12px/1.35 var(--f);
      color: var(--muted, #4B5A5B);
    }
    body.ba-route-planning-v2 .nav-plan-stops {
      list-style: none;
      margin: 8px 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    body.ba-route-planning-v2 .nav-plan-stop {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 12px;
      border: 1px solid var(--chrome-line, #D8D8D1);
      font: 500 14px/1.2 var(--f);
    }
    body.ba-route-planning-v2 .nav-plan-catalog-seed {
      margin-top: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    body.ba-route-planning-v2 .nav-plan-catalog-label {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    body.ba-route-planning-v2 .nav-plan-catalog-label select {
      min-height: 44px;
      border-radius: 14px;
      border: 1px solid var(--chrome-line, #D8D8D1);
      padding: 8px 12px;
      font: 500 14px/1.2 var(--f);
      background: #fff;
      color: var(--ink, #041820);
    }
    body.ba-route-planning-v2 .nav-plan-catalog-note {
      margin: 0;
      font: 400 13px/1.35 var(--f);
      color: var(--muted, #4B5A5B);
    }
    body.ba-route-planning-v2 .nav-plan-constraint-focus {
      margin-top: 8px;
      align-self: flex-start;
      min-height: 40px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid var(--chrome-line, #D8D8D1);
      background: transparent;
      color: #0B63F6;
      font: 600 13px/1.2 var(--f);
      cursor: pointer;
    }
    body.ba-route-planning-v2 .nav-plan-departure-field input {
      min-height: 44px;
      padding: 8px 12px;
      border-radius: 14px;
      border: 1px solid var(--chrome-line, #D8D8D1);
      font: 500 14px/1.2 var(--f);
    }
    @media (max-width: 900px) {
      body.ba-route-planning-v2.nav-planning .nav-plan:not(.nav-plan--preview) {
        left: 12px;
        right: 12px;
        width: auto;
        top: auto;
        bottom: calc(var(--status-h, 28px) + 12px);
        max-height: min(52dvh, 480px);
        border-radius: 20px 20px 16px 16px;
      }
    }
    .nav-plan[hidden] { display: none !important; }
    body.atlas-chrome-dark .nav-plan {
      background: rgba(7, 19, 34, 0.94);
      border-color: rgba(255, 255, 255, 0.12);
      color: #f4f7fb;
    }
    .nav-plan-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
    }
    .nav-plan-head strong {
      font: 650 1rem/1.2 var(--f);
      letter-spacing: -0.02em;
    }
    .nav-plan-close {
      flex: 0 0 auto;
      width: 32px;
      height: 32px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: inherit;
      font: 500 1rem/1 var(--f);
      cursor: pointer;
      opacity: 0.7;
    }
    .nav-plan-close:hover { opacity: 1; background: var(--chrome-hover, rgba(4, 24, 32, 0.06)); }
    .nav-plan-ends {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
      gap: 10px;
      align-items: stretch;
    }
    .nav-plan-end {
      min-height: 68px;
      min-width: 0;
      padding: 10px 12px;
      border: 1px solid var(--chrome-line, rgba(11, 27, 46, 0.12));
      border-radius: 14px;
      background: transparent;
      color: inherit;
      text-align: left;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      gap: 4px;
      box-sizing: border-box;
    }
    .nav-plan-end[aria-pressed="true"] {
      border-color: var(--blue, #0B63F6);
      box-shadow: 0 0 0 1px var(--blue, #0B63F6);
    }
    .nav-plan-end-label {
      font: 600 10px/14px var(--f);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      opacity: 0.65;
    }
    .nav-plan-end strong {
      font: 600 14px/18px var(--f);
      letter-spacing: -0.015em;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      white-space: normal;
      word-break: break-word;
      max-width: 100%;
    }
    .nav-plan-swap {
      align-self: center;
      width: 40px;
      height: 40px;
      min-height: 40px;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: var(--chrome-hover, rgba(4, 24, 32, 0.06));
      color: inherit;
      font: 600 1rem/1 var(--f);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .nav-plan-metrics {
      display: flex;
      flex-wrap: wrap;
      gap: 16px 24px;
      margin-top: 20px;
      padding-top: 4px;
      position: relative;
      z-index: 0;
    }
    .nav-plan-metric {
      min-width: 0;
    }
    .nav-plan-metric .nav-hud-label {
      line-height: 1.25;
      overflow: visible;
    }
    .nav-plan-metric strong {
      display: block;
      margin-top: 6px;
      min-height: 1.2em;
      font: 650 1.05rem/1.2 var(--f);
      letter-spacing: -0.02em;
    }
    .ba-depth-ack-abroad {
      margin-top: 10px;
      font: 400 14px/22px var(--f);
      color: var(--muted, #4B5A5B);
    }
    .nav-plan-conditions[hidden] { display: none !important; }
    .nav-plan-conditions {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin: 14px 0 0;
    }
    .nav-plan-cond-peak {
      display: block;
      font: 600 14px/20px var(--f);
      color: var(--ink, #041820);
      letter-spacing: -0.01em;
    }
    .nav-plan-cond-type {
      display: block;
      font: 600 12px/16px var(--f);
      letter-spacing: 0.04em;
      color: var(--cyan, #2BBEF2);
    }
    .nav-plan-cond-type[hidden] { display: none !important; }
    .nav-plan-cond-note {
      display: block;
      font: 400 13px/20px var(--f);
      color: var(--muted, #4B5A5B);
    }
    .nav-plan-note {
      margin: 14px 0 0;
      font: 400 15px/24px var(--f);
      opacity: 0.78;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .nav-plan-note.nav-plan-note--busy {
      margin-top: 12px;
      padding: 10px 14px;
    }
    .nav-plan-acts {
      display: flex;
      gap: 12px;
      margin-top: 16px;
    }
    .nav-plan-ghost {
      flex: 1;
      height: 42px;
      border: 1px solid var(--chrome-line, rgba(11, 27, 46, 0.12));
      border-radius: 999px;
      background: transparent;
      color: inherit;
      font: 500 0.82rem/1 var(--f);
      cursor: pointer;
    }
    body.ba-route-planning-v2 #nav-plan-add-stop {
      flex: 0 0 auto;
      height: 44px;
      min-height: 44px;
      padding: 0 20px;
      font: 600 14px/1 var(--f);
    }
    /* button. prefix beats globals.css `button { color: #061018 }` */
    button.nav-plan-primary {
      flex: 1;
      height: 42px;
      border: 0;
      border-radius: 999px;
      background: var(--blue, #0B63F6);
      color: #fff;
      font: 600 0.85rem/1 var(--f);
      cursor: pointer;
    }
    button.nav-plan-primary:disabled {
      /* Dim the fill, keep white label — whole-button opacity washed text on blue */
      opacity: 1;
      color: #fff;
      background: rgba(11, 99, 246, 0.48);
      background: color-mix(in srgb, var(--blue, #0B63F6) 48%, transparent);
      cursor: not-allowed;
    }
    .nav-plan-preview {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .nav-plan-preview[hidden] { display: none !important; }
    .nav-plan-editor[hidden] { display: none !important; }
    .nav-plan--preview {
      padding: 10px 12px;
      width: min(440px, calc(100vw - 24px));
    }
    .nav-plan-preview-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .nav-plan-preview-copy strong {
      font: 650 0.9rem/1.25 var(--f);
      letter-spacing: -0.02em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .nav-plan-preview-copy span {
      font: 500 0.75rem/1.2 var(--f);
      opacity: 0.72;
    }
    .nav-plan-preview-meta {
      display: flex;
      flex-direction: column;
      gap: 2px;
      white-space: normal;
    }
    .nav-plan-preview-ends {
      font: 500 0.8rem/1.25 var(--f);
      opacity: 0.9;
    }
    .nav-plan-preview-stats {
      font: 500 0.72rem/1.3 var(--f);
      opacity: 0.68;
    }
    .nav-plan-preview-acts {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }
    /* Pills — not circles: flex:1 + shrink-wrap collapses width to ~height. */
    .nav-plan-preview-acts .nav-plan-ghost {
      flex: 0 0 auto;
      width: auto;
      min-width: 68px;
      height: 34px;
      padding: 0 14px;
      white-space: nowrap;
      box-sizing: border-box;
    }
    .nav-plan-clear {
      color: var(--coral, #EF6548);
    }

    .nav-hud {
      position: absolute;
      /* Sit below SiteHeader (Next.js chrome floats over the map) */
      top: calc(var(--ba-nav-height, 70px) + 18px);
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 40;
      pointer-events: none;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 0 12px calc(var(--status-h) + 12px);
      box-sizing: border-box;
    }
    .nav-hud[hidden] { display: none !important; }
    .nav-hud > * { pointer-events: auto; }

    .nav-hud-top,
    .nav-hud-bottom,
    .nav-panel,
    .nav-arrive,
    .nav-safety {
      /* Solid panels — avoid backdrop bleed of header / dock text */
      background: var(--panel-solid-strong, rgba(255, 255, 255, 0.98));
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border: 1px solid var(--chrome-line, rgba(11, 27, 46, 0.1));
      box-shadow: 0 8px 28px rgba(11, 27, 46, 0.14);
    }
    body.atlas-chrome-dark .nav-hud-top,
    body.atlas-chrome-dark .nav-hud-bottom,
    body.atlas-chrome-dark .nav-panel,
    body.atlas-chrome-dark .nav-arrive,
    body.atlas-chrome-dark .nav-safety {
      background: var(--panel-solid-strong, rgba(7, 19, 34, 0.96));
      border-color: rgba(255, 255, 255, 0.12);
      box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
    }

    .nav-hud-top {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) auto auto;
      gap: 10px 18px;
      align-items: center;
      padding: 14px 16px;
      border-radius: 16px;
      max-width: 520px;
      width: min(520px, 100%);
      margin: 0 auto;
      color: var(--ink);
      position: relative;
      z-index: 2;
      isolation: isolate;
      box-sizing: border-box;
    }
    .nav-hud-dest {
      min-width: 0;
    }
    .nav-hud-dest strong,
    .nav-hud-metric strong {
      display: block;
      font: 650 1.1rem/1.25 var(--f);
      letter-spacing: -0.02em;
      margin-top: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .nav-hud-label {
      display: block;
      font: 600 0.62rem/1.25 var(--f);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--mute);
      overflow: visible;
    }
    .nav-hud-metrics {
      display: flex;
      gap: 18px;
      flex-shrink: 0;
    }

    /* Navigation v1: glanceable underway presentation */
    body.nav-guidance-v1 .nav-hud-top {
      max-width: 640px;
      width: min(640px, 100%);
      padding: 18px 20px;
      border-radius: 20px;
    }
    body.nav-guidance-v1 .nav-hud-metric--hero strong,
    body.nav-guidance-v1 .nav-hud-dest strong {
      font-size: clamp(1.6rem, 4.2vw, 2.4rem);
      line-height: 1.05;
      letter-spacing: -0.035em;
      font-weight: 650;
    }
    body.nav-guidance-v1 .nav-hud-label {
      font-size: 0.7rem;
      letter-spacing: 0.08em;
    }
    body.nav-guidance-v1 .nav-hud-bottom {
      max-width: 640px;
      width: min(640px, 100%);
      gap: 8px 20px;
      padding: 16px 18px;
    }
    body.nav-guidance-v1 .nav-hud-bottom strong {
      font-size: clamp(1.15rem, 2.8vw, 1.55rem);
    }
    /* Secondary float pills share the same inactive surface as Recenter / Follow. */
    body.nav-guidance-v1 .nav-float-btn--secondary {
      opacity: 1;
    }
    body.nav-guidance-v1.atlas-chrome-light .nav-hud-top,
    body.nav-guidance-v1.atlas-chrome-light .nav-hud-bottom {
      background: #ffffff;
      border-color: #d8d8d1;
    }
    #nav-hud-xte.is-caution { color: #f2a900; }
    #nav-hud-xte.is-off { color: #ef6548; }
    .nav-hud-alert {
      margin: 0 0 8px;
      padding: 12px 16px;
      max-width: 640px;
      width: min(640px, 100%);
      border-radius: 14px;
      border: 1px solid rgba(239, 101, 72, 0.45);
      background: rgba(239, 101, 72, 0.16);
      color: var(--ink);
      font: 650 0.95rem/1.3 var(--f);
      text-align: center;
      pointer-events: auto;
    }
    .nav-hud-alert[hidden] { display: none !important; }
    body.nav-off-course .nav-hud-top {
      border-color: rgba(239, 101, 72, 0.55);
    }
    .nav-arrive-note {
      margin: 8px 0 0;
      font: 500 0.82rem/1.4 var(--f);
      color: var(--mute);
    }
    .nav-arrive-actions {
      display: flex;
      gap: 10px;
      margin-top: 14px;
    }
    .nav-arrive-actions button {
      flex: 1;
      height: 44px;
      border: 0;
      border-radius: 999px;
      font: 600 0.84rem/1 var(--f);
      cursor: pointer;
    }
    #nav-arrive-save {
      background: #0b63f6;
      color: #fff;
    }
    #nav-arrive-ok {
      background: transparent;
      color: var(--ink);
      border: 1px solid var(--chrome-line);
    }

    .nav-hud-stop {
      height: 40px;
      min-width: 64px;
      padding: 0 14px;
      border: 0;
      border-radius: 999px;
      background: var(--ocean-900, #0b1b2e);
      color: #fff;
      font: 600 0.8rem/1 var(--f);
      cursor: pointer;
      flex-shrink: 0;
    }
    body.atlas-chrome-dark .nav-hud-stop {
      background: #fff;
      color: #0b1b2e;
    }

    .nav-float {
      position: absolute;
      right: 12px;
      /* Above map-tools cluster, below top HUD */
      top: 12px;
      bottom: auto;
      transform: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
      z-index: 3;
    }
    .nav-float-btn {
      /* !important: atlas-body-mount * { padding:0 } reset */
      min-height: 40px;
      min-width: 40px;
      padding: 0 14px !important;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      /* Shared inactive surface: translucent ink over satellite/map */
      background: rgba(4, 24, 32, 0.82);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      box-shadow: 0 8px 22px rgba(4, 24, 32, 0.28);
      font: 600 12px/1 var(--f);
      letter-spacing: 0.01em;
      color: #ffffff;
      cursor: pointer;
      white-space: nowrap;
    }
    .nav-float-btn--secondary {
      opacity: 1;
      background: rgba(4, 24, 32, 0.82);
      color: #ffffff;
      border-color: rgba(255, 255, 255, 0.14);
    }
    .nav-float-btn.on {
      background: #0b63f6;
      color: #ffffff;
      border-color: #0b63f6;
      box-shadow: 0 8px 22px rgba(11, 99, 246, 0.35);
    }
    body.atlas-chrome-dark .nav-float-btn,
    body.atlas-chrome-dark .nav-float-btn--secondary {
      background: rgba(4, 24, 32, 0.82);
      color: #ffffff;
      border-color: rgba(255, 255, 255, 0.14);
    }
    body.atlas-chrome-dark .nav-float-btn.on {
      background: #0b63f6;
      color: #ffffff;
      border-color: #0b63f6;
    }
    .nav-float-btn[hidden] { display: none !important; }

    .nav-hud-bottom {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      padding: 12px 14px;
      border-radius: 16px;
      max-width: 400px;
      width: min(400px, 100%);
      margin: 0 auto;
      color: var(--ink);
      text-align: center;
      position: relative;
      z-index: 2;
      isolation: isolate;
    }
    .nav-hud-bottom strong {
      font-size: 1.05rem;
    }

    .nav-panel {
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: calc(var(--status-h) + 88px);
      max-width: 400px;
      margin: 0 auto;
      padding: 12px 14px;
      border-radius: 16px;
      color: var(--ink);
      z-index: 4;
    }
    .nav-panel[hidden] { display: none !important; }
    .nav-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
    }
    .nav-panel-head strong { font: 650 0.92rem/1.2 var(--f); }
    .nav-panel-close {
      width: 32px;
      height: 32px;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: var(--ink);
      font-size: 0.9rem;
      cursor: pointer;
    }
    .nav-panel-note {
      margin: 0 0 10px;
      font: 400 0.72rem/1.35 var(--f);
      color: var(--mute);
    }
    .nav-cond-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    .nav-cond-grid strong {
      display: block;
      margin-top: 3px;
      font: 650 0.95rem/1.2 var(--f);
    }
    .nav-nearby-cats {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 10px;
    }
    .nav-nearby-cats button {
      height: 32px;
      padding: 0 10px;
      border: 1px solid var(--chrome-line);
      border-radius: 999px;
      background: transparent;
      color: var(--ink-2);
      font: 500 0.72rem/1 var(--f);
      cursor: pointer;
    }
    .nav-nearby-cats button.on {
      background: var(--ocean-900, #0b1b2e);
      border-color: transparent;
      color: #fff;
    }
    .nav-nearby-list {
      list-style: none;
      margin: 0;
      padding: 0;
      max-height: 180px;
      overflow: auto;
    }
    .nav-nearby-list li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 0;
      border-top: 1px solid color-mix(in srgb, var(--chrome-line) 70%, transparent);
    }
    .nav-nearby-list li:first-child { border-top: 0; }
    .nav-nearby-list .nn-name {
      font: 600 0.82rem/1.2 var(--f);
    }
    .nav-nearby-list .nn-meta {
      font: 400 0.7rem/1.2 var(--f);
      color: var(--mute);
    }
    .nav-nearby-list button {
      height: 34px;
      padding: 0 10px;
      border: 0;
      border-radius: 999px;
      background: var(--ocean-900, #0b1b2e);
      color: #fff;
      font: 600 0.72rem/1 var(--f);
      cursor: pointer;
      flex-shrink: 0;
    }

    .nav-arrive {
      position: absolute;
      left: 50%;
      top: 42%;
      transform: translate(-50%, -50%);
      padding: 22px 22px 18px;
      border-radius: 18px;
      text-align: center;
      max-width: 320px;
      width: calc(100% - 32px);
      color: var(--ink);
      z-index: 5;
      box-sizing: border-box;
    }
    .nav-arrive[hidden] { display: none !important; }
    .nav-arrive strong {
      display: block;
      font: 650 1.05rem/1.35 var(--f);
      margin: 0 0 14px;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .nav-arrive button {
      height: 40px;
      padding: 0 18px;
      border: 0;
      border-radius: 999px;
      background: var(--ocean-900, #0b1b2e);
      color: #fff;
      font: 600 0.82rem/1 var(--f);
      cursor: pointer;
    }

    .nav-safety {
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: calc(var(--status-h) + 88px);
      max-width: 480px;
      margin: 0 auto;
      padding: 12px 14px;
      border-radius: 14px;
      color: var(--ink-2);
      font: 400 0.72rem/1.4 var(--f);
      z-index: 5;
    }
    .nav-safety[hidden] { display: none !important; }
    .nav-safety button {
      display: block;
      margin-top: 8px;
      height: 34px;
      padding: 0 12px;
      border: 0;
      border-radius: 999px;
      background: var(--ocean-900, #0b1b2e);
      color: #fff;
      font: 600 0.75rem/1 var(--f);
      cursor: pointer;
    }

    #zloc[data-follow="follow"],
    #zloc[data-follow="heading"] {
      color: var(--blue, #1e6bff);
    }

    @media (max-width: 900px) {
      .nav-plan {
        position: fixed;
        top: calc(var(--ba-nav-height, 70px) + 8px);
        left: 50%;
        transform: translateX(-50%);
        width: calc(100vw - 20px);
        max-width: none;
        padding: 16px;
        border-radius: 14px;
        z-index: 78;
      }
      .nav-plan-ends {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
      }
      .nav-plan-swap {
        width: 40px;
        height: 36px;
        justify-self: center;
      }
      .nav-hud {
        top: calc(var(--ba-nav-height, 70px) + 8px);
        padding: 0 10px calc(var(--status-h) + 10px);
      }
      .nav-hud-top {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 8px 10px;
        padding: 10px 12px;
        border-radius: 14px;
        max-width: none;
        width: 100%;
      }
      .nav-hud-dest { grid-column: 1; min-width: 0; }
      .nav-hud-stop { grid-column: 2; grid-row: 1; align-self: start; }
      .nav-hud-metrics { grid-column: 1 / -1; justify-content: space-between; }
      .nav-hud-dest strong { font-size: 1.05rem; }
      .nav-float {
        right: 10px;
        top: auto;
        bottom: calc(var(--status-h) + 96px);
      }
      .nav-float-btn {
        min-height: 48px;
        min-width: 48px;
        font-size: 0.7rem;
      }
      .nav-hud-bottom {
        max-width: none;
        width: 100%;
        padding: 10px 12px;
      }
      .nav-hud-bottom strong { font-size: 1.1rem; }
      .nav-panel,
      .nav-safety {
        bottom: calc(var(--status-h) + 96px);
      }
      body.nav-active .mapboxgl-ctrl-bottom-left,
      body.nav-active .mapboxgl-ctrl-bottom-right {
        bottom: calc(var(--status-h) + 86px) !important;
      }
    }

    /* ===== Explore Safety & Data ===== */
    .ba-safety-data-btn {
      position: absolute;
      z-index: 34;
      right: 14px;
      bottom: calc(var(--status-h) + 14px);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 40px;
      padding: 0 18px 0 14px !important;
      border-radius: 999px;
      border: 1px solid var(--chrome-line);
      background: var(--panel-solid);
      color: var(--ink);
      font: 600 0.75rem/1 var(--f);
      letter-spacing: 0.01em;
      cursor: pointer;
      box-shadow: 0 8px 24px rgba(4, 24, 32, 0.12);
      pointer-events: auto;
      box-sizing: border-box;
    }
    .ba-safety-data-btn:hover {
      background: var(--warm-canvas, #f4f1ea);
    }
    body.atlas-chrome-dark .ba-safety-data-btn:hover {
      background: rgba(255, 255, 255, 0.08);
    }
    .ba-safety-data-btn svg { flex: 0 0 auto; opacity: 0.85; display: block; }
    .ba-safety-data-label { white-space: nowrap; line-height: 1; }
    body.nav-active .ba-safety-data-btn,
    body.nav-planning .ba-safety-data-btn {
      bottom: calc(var(--status-h) + 88px);
    }
    @media (max-width: 900px) {
      .ba-safety-data-btn {
        right: 10px;
        bottom: calc(var(--status-h) + 72px);
        height: 34px;
        padding: 0 10px;
      }
      .ba-safety-data-label { display: none; }
      .ba-safety-data-btn { width: 36px; justify-content: center; padding: 0; }
    }

    .ba-safety-panel-backdrop {
      position: absolute;
      inset: 0;
      z-index: 60;
      background: rgba(4, 24, 32, 0.28);
      pointer-events: auto;
    }
    .ba-safety-panel-backdrop[hidden] { display: none !important; }

    .ba-safety-panel {
      position: absolute;
      z-index: 61;
      top: 72px;
      right: 16px;
      width: min(360px, calc(100vw - 28px));
      max-height: min(70vh, 560px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 18px;
      border: 1px solid var(--chrome-line);
      background: var(--panel-solid);
      color: var(--ink);
      box-shadow: 0 18px 54px rgba(4, 24, 32, 0.2);
      pointer-events: auto;
    }
    .ba-safety-panel.ba-safety-panel--anchored {
      position: fixed;
      top: auto;
      z-index: 90;
    }
    .ba-safety-panel[hidden] { display: none !important; }
    .ba-safety-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex: 0 0 auto;
      padding: 20px 20px 10px !important;
    }
    .ba-safety-panel-head h2 {
      margin: 0;
      font: 600 1rem/1.2 var(--f);
      letter-spacing: -0.02em;
    }
    .ba-safety-panel-close {
      width: 32px;
      height: 32px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--mute);
      cursor: pointer;
      font-size: 0.9rem;
    }
    .ba-safety-panel-close:hover { background: rgba(4, 24, 32, 0.06); color: var(--ink); }
    .ba-safety-panel-body {
      padding: 4px 20px max(28px, calc(20px + env(safe-area-inset-bottom, 0px))) !important;
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex: 1 1 auto;
      min-height: 0;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box;
    }
    .ba-safety-panel-body p {
      margin: 0;
      font: 500 0.72rem/1.45 var(--f);
      color: var(--ink-2);
    }
    .ba-safety-panel-note {
      /* !important: atlas-body-mount * { padding:0 } reset */
      padding: 12px 14px !important;
      border-radius: 12px;
      border: 1px solid var(--chrome-line);
      background: rgba(4, 24, 32, 0.03);
      box-sizing: border-box;
    }
    .ba-safety-sources-title {
      margin: 6px 0 0;
      font: 650 0.55rem/1 var(--f);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--mute);
    }
    .ba-safety-sources {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .ba-safety-source {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      padding: 12px !important;
      border-radius: 12px;
      border: 1px solid var(--chrome-line);
      opacity: 0.55;
      box-sizing: border-box;
    }
    .ba-safety-source.on { opacity: 1; }
    .ba-safety-source-label {
      font: 600 0.68rem/1.3 var(--f);
      color: var(--ink);
    }
    .ba-safety-source-compact {
      font: 500 0.58rem/1.3 var(--f);
      color: var(--mute);
      text-align: right;
    }
    .ba-safety-terms-link {
      margin-top: 4px;
      font: 600 0.68rem/1.3 var(--f);
      color: #0b63f6;
      text-decoration: none;
    }
    .ba-safety-terms-link:hover { text-decoration: underline; }

    .ba-safety-ack {
      /* Fixed + high z so acks sit above the mobile full-screen place sheet (z 200). */
      position: fixed;
      z-index: 220;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      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;
      border: 1px solid var(--chrome-line);
      background: var(--panel-solid);
      color: var(--ink);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
      pointer-events: auto;
    }
    .ba-safety-ack[hidden] { display: none !important; }
    /* Plan card sits at z 78; dim it while the routing ack owns the stack. */
    body.ba-routing-ack-open .nav-plan {
      opacity: 0.28;
      pointer-events: none;
    }
    body.ba-navigation-ack-open .nav-plan,
    body.ba-navigation-ack-open .nav-hud {
      opacity: 0.28;
      pointer-events: none;
    }
    body.ba-navigation-ack-open .sheet,
    body.ba-routing-ack-open .sheet {
      pointer-events: none !important;
    }
    /* Cookie banner is z-index ~2e9; hide it while safety consent owns the screen. */
    body.ba-navigation-ack-open .ba-cookie-consent,
    body.ba-routing-ack-open .ba-cookie-consent {
      visibility: hidden !important;
      pointer-events: none !important;
    }
    .ba-safety-ack h2 {
      margin: 0 0 14px !important;
      font: 600 1.05rem/1.25 var(--f);
      letter-spacing: -0.02em;
    }
    .ba-safety-ack p {
      margin: 0 0 12px !important;
      font: 500 0.84rem/1.5 var(--f);
      color: var(--ink-2);
    }
    .ba-safety-ack--nav {
      display: flex;
      flex-direction: column;
      width: min(460px, calc(100vw - 40px));
      max-height: min(88svh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px));
      overflow: hidden;
      z-index: 230;
      padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
    }
    .ba-safety-ack-scroll {
      flex: 1 1 auto;
      min-height: 0;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      padding-right: 2px;
    }
    body.explore-v2 #ba-navigation-safety-ack .ba-nav-ack-check,
    body.explore-v2 .ba-nav-ack-check,
    .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 0.82rem/1.4 var(--f);
      color: var(--ink);
      cursor: pointer;
    }
    body.explore-v2 #ba-navigation-safety-ack .ba-nav-ack-check input,
    body.explore-v2 .ba-nav-ack-check input,
    .ba-nav-ack-check input {
      display: inline-block !important;
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
      margin: 3px 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,
    .ba-nav-ack-check span {
      display: block;
      width: auto !important;
      flex: 1 1 auto;
      min-width: 0;
    }
    .ba-nav-ack-actions {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 10px;
      margin-top: 16px;
      flex: 0 0 auto;
      padding-top: 4px;
      background: var(--panel-solid);
    }
    @media (max-width: 900px) {
      .ba-safety-ack,
      .ba-safety-ack--nav {
        /* Clear floating header (~60px) + safe area; keep CTAs above thumb dock. */
        top: calc(var(--ev2-nav-h, var(--ba-nav-height, 60px)) + env(safe-area-inset-top, 0px) + 12px);
        bottom: auto;
        transform: translateX(-50%);
        width: calc(100vw - 24px);
        max-height: calc(
          100dvh
          - var(--ev2-nav-h, var(--ba-nav-height, 60px))
          - env(safe-area-inset-top, 0px)
          - env(safe-area-inset-bottom, 0px)
          - 108px
        );
        padding: 20px 20px 16px !important;
        border-radius: 18px;
      }
      .ba-safety-ack h2 {
        font-size: 1rem;
        margin-bottom: 12px !important;
      }
      .ba-safety-ack p {
        font-size: 0.8rem;
        margin-bottom: 10px !important;
      }
      .ba-nav-ack-check {
        margin-top: 12px;
        font-size: 0.78rem;
      }
      .ba-nav-ack-actions {
        margin-top: 12px;
        gap: 8px;
      }
    }
    .ba-safety-ack-btn {
      margin-top: 16px !important;
      width: 100%;
      height: 44px;
      border: 0;
      border-radius: 999px;
      background: #0b63f6;
      color: #fff;
      font: 600 0.84rem/1 var(--f);
      cursor: pointer;
    }
    .ba-nav-ack-actions .ba-safety-ack-btn {
      margin-top: 0 !important;
    }
    .ba-safety-ack-btn:hover:not(:disabled) { background: #0750cc; }
    .ba-safety-ack-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    .ba-safety-ack-btn--secondary {
      background: transparent;
      color: var(--ink);
      border: 1px solid var(--chrome-line);
    }
    .ba-safety-ack-btn--secondary:hover:not(:disabled) {
      background: rgba(4, 24, 32, 0.06);
    }
    .nav-keep-open {
      /* !important: atlas-body-mount * { margin/padding:0 } reset */
      margin: 0 0 8px !important;
      padding: 10px 16px !important;
      border-radius: 999px;
      border: 1px solid #f2a900;
      /* Solid attention amber — no muddy glass over satellite */
      background: #f2a900;
      color: #041820;
      font: 600 0.78rem/1.35 var(--f);
      text-align: center;
      pointer-events: auto;
      box-shadow: 0 8px 22px rgba(4, 24, 32, 0.22);
    }
    .nav-keep-open[hidden] { display: none !important; }
    .nav-keep-open--warn {
      border-color: #ef6548;
      background: #ef6548;
      color: #ffffff;
    }
    body.atlas-chrome-dark .nav-keep-open {
      background: #f2a900;
      border-color: #f2a900;
      color: #041820;
    }
    body.atlas-chrome-dark .nav-keep-open--warn {
      background: #ef6548;
      border-color: #ef6548;
      color: #ffffff;
    }

    .depth-info {
      margin-top: 8px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .depth-info-row {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      font: 500 0.52rem/1.3 var(--f);
      color: var(--mute);
    }
    .depth-info-row span:last-child { color: var(--ink-2); text-align: right; }
    .depth-info-note {
      margin: 6px 0 0;
      font: 500 0.52rem/1.35 var(--f);
      color: var(--mute);
    }