/* ══════════════════════════════════════════════════════════════════
   MAGNA BRIDGE — Professional maritime console
   Aesthetic: Furuno TimeZero × Bloomberg Terminal × Boeing PFD
   ══════════════════════════════════════════════════════════════════ */

/* iPhone safe-area: ECDIS night-cockpit blue-black into the bezel.
   The bridge feels continuous with the Dynamic Island. */
body.earth-page-marine,
body.bridge-page,
body[data-page="bridge"] {
    --magna-edge-top-paint: linear-gradient(180deg, #050d18 0%, var(--th-bg-void, #08090c) 100%);
    --magna-edge-bottom-paint: linear-gradient(0deg, #04091a 0%, var(--th-bg-void, #08090c) 100%);
}

/* ───── Design tokens ───── */
:root {
    --bp-accent:        #22d3ee;
    --bp-accent-dim:    rgba(34, 211, 238, 0.55);
    --bp-accent-bg:     rgba(34, 211, 238, 0.08);
    --bp-accent-bg2:    rgba(34, 211, 238, 0.18);
    --bp-caution:       #f59e0b;
    --bp-caution-dim:   rgba(245, 158, 11, 0.55);
    --bp-alert:         #ef4444;
    --bp-ok:            #22c55e;
    --bp-bg:            #050810;
    --bp-panel:         #0a101a;
    --bp-panel-hi:      #10182a;
    --bp-border:        rgba(34, 211, 238, 0.14);
    --bp-border-hi:     rgba(34, 211, 238, 0.28);
    --bp-divider:       rgba(255, 255, 255, 0.05);
    --bp-text:          #e4edf4;
    --bp-text-dim:      rgba(200, 220, 232, 0.58);
    --bp-text-muted:    rgba(160, 180, 200, 0.38);
    --bp-mono:          'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
    --bp-ease:          cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Kill legacy chrome that competes with bridge-pro ─── */
.earth-page-marine #hero-stats,
.earth-page-marine #vessel-legend,
.earth-page-marine .em-map-legend:not([id]),
.earth-page-marine .mr-command-bar,
.earth-page-marine #marine-hud,
.earth-page-marine #bridge-intel-ticker,
.earth-page-marine #bridge-chart-layers,      /* bridge-conditions panel */
.earth-page-marine #marine-bridge-layers,     /* chart layers floating panel */
.earth-page-marine #marine-nav-hud,           /* floating nav HUD */
.earth-page-marine #marine-nav-footer,
.earth-page-marine #bridge-time-scrubber,
.earth-page-marine #bridge-tools-fab,
.earth-page-marine #bridge-passage-toggle,
.earth-page-marine #bridge-passage-panel,
.earth-page-marine .em-content,
.earth-page-marine #magna-site-footer,
.earth-page-marine .magna-site-footer {
    display: none !important;
}

/* ─── Kill page scroll, let the bridge own the viewport ─── */
html.earth-monitor-page,
html.earth-monitor-page body.earth-page-marine {
    overflow: hidden !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--bp-bg) !important;
}
html.earth-monitor-page body.earth-page-marine > * {
    /* zero out any inherited margin on direct children */
    margin-block: 0 !important;
}

/* Marine sub-pages are now inline inside .unified-nav-scroll via .me-marine-inline.
   The legacy standalone #me-marine-subpills bar is hidden to defend against stale renders. */
#me-marine-subpills { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   LEFT TOOLBAR — vertical instrument rail
   ══════════════════════════════════════════════════════════════ */
/* ── COMMAND CENTER CONSOLIDATION ──────────────────────────────────
   The bp-toolbar (was a separate vertical rail at left) is now docked
   AT THE END of the top status-strip as a horizontal tools row. One
   command bar instead of two floating elements. */
#bp-toolbar {
    position: fixed;
    /* Left vertical instrument rail — under the top status strip, above
       the bottom HUD. Was briefly consolidated into the top strip's right
       zone but collided with the metric tiles below ~1500px viewport;
       reverted to its original vertical orientation. */
    top: calc(96px + env(safe-area-inset-top, 0px));
    left: calc(8px + env(safe-area-inset-left, 0px));
    bottom: calc(48px + env(safe-area-inset-bottom, 0px));
    width: 52px;
    background: linear-gradient(180deg,
        rgba(10,14,28,0.78) 0%,
        rgba(8,10,22,0.86) 100%);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.55);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    z-index: 886;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 8px 0;
    gap: 2px;
    overflow: hidden;
}
/* Height-responsive tool sizing — the toolbar has 11 vertically-stacked
   tools and a fixed top/bottom inset. On laptop-class viewports (< 760px
   tall) the default 48px tools overflow and the bottom search tool gets
   clipped. Step down the icon size as height shrinks so every tool
   stays reachable. */
@media (max-height: 820px) {
    #bp-toolbar .bp-tool { height: 40px !important; }
}
@media (max-height: 720px) {
    #bp-toolbar .bp-tool { height: 36px !important; }
    #bp-toolbar { padding: 6px 0 !important; gap: 1px !important; }
}
@media (max-height: 620px) {
    #bp-toolbar .bp-tool { height: 32px !important; }
    #bp-toolbar .bp-tool svg { width: 18px !important; height: 18px !important; }
}

#bp-toolbar .bp-tool {
    width: 52px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bp-text-dim);
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color 120ms var(--bp-ease), background 120ms var(--bp-ease);
    flex-shrink: 0;
}
#bp-toolbar .bp-tool:hover {
    color: rgba(var(--me-page-accent-rgb, 34,211,238), 1);
    background: linear-gradient(90deg, rgba(var(--me-page-accent-rgb, 34,211,238), 0.18), rgba(var(--me-page-accent-rgb, 34,211,238), 0.04));
    box-shadow: inset 2px 0 0 rgba(var(--me-page-accent-rgb, 34,211,238), 0.7);
}
#bp-toolbar .bp-tool.active {
    color: var(--bp-accent);
    background: linear-gradient(90deg, rgba(34,211,238,0.12), transparent);
}
#bp-toolbar .bp-tool.active::before {
    content: '';
    position: absolute;
    /* Horizontal active indicator — underline at the bottom of the icon. */
    left: 6px;
    right: 6px;
    bottom: 2px;
    height: 2px;
    background: var(--bp-accent);
    box-shadow: 0 0 8px var(--bp-accent);
    border-radius: 1px;
}
#bp-toolbar .bp-tool.amber { color: rgba(245,158,11,0.6); }
#bp-toolbar .bp-tool.amber:hover { color: var(--bp-caution); }
#bp-toolbar .bp-tool.amber.active {
    color: var(--bp-caution);
    background: linear-gradient(90deg, rgba(245,158,11,0.12), transparent);
}
#bp-toolbar .bp-tool.amber.active::before {
    background: var(--bp-caution);
    box-shadow: 0 0 8px var(--bp-caution);
}
#bp-toolbar .bp-tool svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}
#bp-toolbar .bp-divider {
    height: 1px;
    margin: 6px 12px;
    background: var(--bp-divider);
    flex-shrink: 0;
}
#bp-toolbar .bp-spacer { flex: 1; }

/* Tooltip for toolbar */
#bp-toolbar .bp-tool[data-label]:hover::after {
    content: attr(data-label);
    position: absolute;
    left: 58px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--bp-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bp-text);
    background: rgba(8,12,22,0.96);
    border: 1px solid var(--bp-border-hi);
    padding: 4px 10px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* ══════════════════════════════════════════════════════════════
   TOP STATUS STRIP — segmented + metric tiles
   ══════════════════════════════════════════════════════════════ */
/* Top strip: no card. Two zones — NAV left, STATE right, hairline between. */
#bp-status-strip {
    position: fixed;
    /* CONNECT to the unified-nav — strip kisses the nav's bottom edge so the
       two read as ONE two-tier instrument console (nav row = identity/page,
       strip row = live data). Driven by --unified-nav-h (set in JS from the
       actual rendered nav height) so the seam survives any nav resize. */
    top: calc(var(--unified-nav-h, 34px) + env(safe-area-inset-top, 0px));
    /* NESTED under the unified-nav: inset MORE than the nav's content (12px) so
       the strip reads as a slightly-smaller sub-panel tucked beneath the nav,
       not an equal-width second bar. The left layer rail (top:88px) + bp-toolbar
       (top:96px) start BELOW this 36px strip, so there's no collision. */
    left: calc(30px + env(safe-area-inset-left, 0px));
    right: calc(30px + env(safe-area-inset-right, 0px));
    /* Tiles inside are 22px; ~14px of vertical breathing room so they sit
       in the middle of the strip with proper hierarchy. */
    height: var(--bp-strip-h, 36px);
    z-index: 885;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    /* Right padding > border-radius so the last tile (UTC) clears the
       rounded bottom-right corner — otherwise its digits read as clipped
       even though they're geometrically inside. */
    padding: 0 18px 0 4px;
    /* Bezel matches the unified-nav so nav-bottom + strip-top read as one
       continuous panel face. Top-half darker (continues nav gradient),
       bottom-half slightly lighter for the "instrument console" depth. */
    background:
        linear-gradient(180deg,
            rgba(14, 18, 30, 0.92) 0%,
            rgba(10, 14, 24, 0.88) 50%,
            rgba(8, 12, 20, 0.82) 100%);
    /* Top border = 0 so nav's border-bottom IS the seam. Sides + bottom hairline. */
    border-top: 0;
    border-left: 1px solid rgba(184, 168, 140, 0.10);
    border-right: 1px solid rgba(184, 168, 140, 0.10);
    border-bottom: 1px solid rgba(184, 168, 140, 0.14);
    /* Top corners flat (continues from nav), bottom corners rounded
       (this is where the console "ends" before the map). */
    border-radius: 0 0 12px 12px;
    /* Subtle inner top highlight so the seam between nav and strip glows,
       not bleeds. Drop shadow below the strip lifts it off the map. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 6px 20px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    pointer-events: none;
    font-family: var(--bp-mono);
}
#bp-status-strip > * { pointer-events: auto; }

/* ── PERISCOPE — drop / collapse / hide animation ──
   Strip is a translateY-animated element. transform-origin top because
   it's anchored to the unified-nav and "drops" downward like an
   instrument cluster lowering into the bridge. */
#bp-status-strip {
    transform-origin: top center;
    transition:
        transform 450ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 250ms ease,
        height 350ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity, height;
}
/* EXPANDED — the default. Already styled above. */
#bp-status-strip[data-strip-state="expanded"] {
    transform: translateY(0);
    opacity: 1;
}
/* COLLAPSED — strip retracts upward, leaving a thin sliver visible.
   The 12px sliver acts as a click-target to expand.
   pointer-events must be re-enabled — the base #bp-status-strip rule sets
   pointer-events:none for transparent-pass-through, but in collapsed state
   the strip IS the click target. */
#bp-status-strip[data-strip-state="collapsed"] {
    transform: translateY(0);
    height: 12px;
    opacity: 0.85;
    cursor: pointer;
    pointer-events: auto;
}
#bp-status-strip[data-strip-state="collapsed"] > * { opacity: 0; pointer-events: none; transition: opacity 120ms ease; }
#bp-status-strip[data-strip-state="collapsed"]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 2px;
    background: rgba(var(--me-page-accent-rgb, 34,211,238), 0.5);
    border-radius: 1px;
    box-shadow: 0 0 8px rgba(var(--me-page-accent-rgb, 34,211,238), 0.4);
    pointer-events: none;
}
/* HIDDEN — fully retract behind the unified-nav, opacity 0. */
#bp-status-strip[data-strip-state="hidden"] {
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
}
/* Tile stagger entrance — tiles cascade in left-to-right when strip drops.
   Each tile delayed 30ms from the previous. */
#bp-status-strip[data-strip-state="expanded"] .bp-tile {
    animation: bp-tile-drop 380ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
#bp-status-strip[data-strip-state="expanded"] .bp-tile:nth-child(1) { animation-delay: 60ms; }
#bp-status-strip[data-strip-state="expanded"] .bp-tile:nth-child(2) { animation-delay: 90ms; }
#bp-status-strip[data-strip-state="expanded"] .bp-tile:nth-child(3) { animation-delay: 120ms; }
#bp-status-strip[data-strip-state="expanded"] .bp-tile:nth-child(4) { animation-delay: 150ms; }
#bp-status-strip[data-strip-state="expanded"] .bp-tile:nth-child(5) { animation-delay: 180ms; }
#bp-status-strip[data-strip-state="expanded"] .bp-tile:nth-child(6) { animation-delay: 210ms; }
#bp-status-strip[data-strip-state="expanded"] .bp-tile:nth-child(7) { animation-delay: 240ms; }
@keyframes bp-tile-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── STRIP CONTROLS — bare glyphs, no container. ── */
.bp-strip-ctl {
    width: 22px; height: 22px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    padding: 0;
    margin: 0;
    transition: color 140ms;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}
.bp-strip-ctl svg { width: 11px; height: 11px; }
#bp-strip-collapse { right: 64px; }
#bp-strip-hide     { right: 36px; }
.bp-strip-ctl:hover {
    color: rgba(var(--me-page-accent-rgb, 34,211,238), 1);
}
.bp-strip-ctl:focus-visible {
    outline: 1px solid rgba(var(--me-page-accent-rgb, 34,211,238), 0.6);
    outline-offset: 2px;
}
.bp-strip-ctl:focus-visible {
    outline: 1px solid rgba(var(--me-page-accent-rgb, 34,211,238), 0.6);
    outline-offset: 2px;
}

/* ── SUMMON TAB — drawer-pull at top-center, only visible when hidden ── */
#bp-strip-summon {
    position: fixed;
    top: calc(54px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translate(-50%, -100%);
    z-index: 884;
    /* 20% smaller container than the original 64x18 pill */
    width: 51px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(14, 18, 30, 0.95) 0%, rgba(10, 14, 24, 0.92) 100%);
    border: 1px solid rgba(184, 168, 140, 0.18);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    /* Vivid lime chevron — distinct from the magenta FS-exit X and the cyan
       page accent. Pops against the dark glass pill on any map state. */
    color: #a8ff3a;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    opacity: 0;
    pointer-events: none;
    transition:
        transform 420ms cubic-bezier(0.16, 1, 0.3, 1) 100ms,
        opacity 320ms ease 100ms,
        background 140ms,
        border-color 140ms;
}
#bp-strip-summon[data-strip-state="hidden"],
#bp-strip-summon[data-strip-state="collapsed"] {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}
/* When collapsed, anchor the summon tab BELOW the 12px sliver so the two
   don't overlap. Hidden state keeps the top:54px anchor from the base rule. */
#bp-strip-summon[data-strip-state="collapsed"] {
    top: calc(54px + 12px + env(safe-area-inset-top, 0px));
}
#bp-strip-summon:hover {
    background: linear-gradient(180deg, rgba(18, 24, 40, 1) 0%, rgba(14, 18, 30, 1) 100%);
    border-color: rgba(var(--me-page-accent-rgb, 34,211,238), 0.5);
    box-shadow: 0 4px 16px rgba(var(--me-page-accent-rgb, 34,211,238), 0.25);
}
#bp-strip-summon:focus-visible {
    outline: 1px solid rgba(var(--me-page-accent-rgb, 34,211,238), 0.7);
    outline-offset: 2px;
}
#bp-strip-summon.pulse {
    animation: bp-summon-pulse 1.6s ease-in-out infinite;
}
@keyframes bp-summon-pulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
    50%      { box-shadow: 0 4px 20px rgba(var(--me-page-accent-rgb, 34,211,238), 0.5); }
}

/* ── COMMAND CENTER COMPONENTS — collapse / hide as ONE unit ──
   Every bridge HUD element mirrors the strip's state via data-strip-state.
   When the user collapses or hides the strip, ALL components animate out
   together. When summoned, they all come back together. */
#bp-toolbar,
#bp-compass-strip,
#bp-zoom-stack,
#bp-anchor-pill,
#bp-power-pill,
#bp-mob-btn {
    transition:
        transform 450ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 320ms ease;
    will-change: transform, opacity;
}
/* EXPANDED — explicit defaults so transitions revert cleanly when state
   flips from hidden/collapsed back to expanded. !important defeats the
   inline `.earth-page-marine #bp-toolbar { ... !important }` overrides
   in marine-report.html that would otherwise win on specificity. */
#bp-toolbar[data-strip-state="expanded"],
#bp-compass-strip[data-strip-state="expanded"],
#bp-zoom-stack[data-strip-state="expanded"],
#bp-anchor-pill[data-strip-state="expanded"],
#bp-power-pill[data-strip-state="expanded"],
#bp-mob-btn[data-strip-state="expanded"] {
    transform: translate(0, 0) scale(1) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
/* COLLAPSED — strip is a sliver. Other components dim slightly. */
#bp-toolbar[data-strip-state="collapsed"],
#bp-compass-strip[data-strip-state="collapsed"],
#bp-zoom-stack[data-strip-state="collapsed"],
#bp-anchor-pill[data-strip-state="collapsed"],
#bp-power-pill[data-strip-state="collapsed"],
#bp-mob-btn[data-strip-state="collapsed"] {
    opacity: 0.55 !important;
    transform: scale(0.96) !important;
    pointer-events: none !important;
}
/* HIDDEN — every component slides off-screen in its native direction.
   Top components retract up, bottom components retract down, right side
   slides right. All in parallel. */
#bp-toolbar[data-strip-state="hidden"] {
    transform: translateY(-110%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
#bp-zoom-stack[data-strip-state="hidden"] {
    transform: translateX(110%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
#bp-compass-strip[data-strip-state="hidden"],
#bp-power-pill[data-strip-state="hidden"],
#bp-mob-btn[data-strip-state="hidden"],
#bp-anchor-pill[data-strip-state="hidden"] {
    transform: translateY(110%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Reduced motion: instant state transitions, no stagger animation. */
@media (prefers-reduced-motion: reduce) {
    #bp-status-strip,
    #bp-strip-summon,
    #bp-toolbar,
    #bp-compass-strip,
    #bp-zoom-stack,
    #bp-anchor-pill,
    #bp-power-pill,
    #bp-mob-btn { transition: none !important; }
    #bp-status-strip .bp-tile { animation: none !important; }
    #bp-strip-summon.pulse { animation: none !important; }
}

/* LEFT ZONE — thin hairline border groups the sub-page tabs, no fill */
.bp-strip-nav {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 22px;
    position: relative;
    padding: 0 4px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 11px;
}
.bp-strip-nav:empty { display: none; }

/* RIGHT ZONE — gauges + ticker + gear. Sits a touch lower so the baseline
   doesn't read as continuous with the nav pill. */
.bp-strip-state {
    /* Cluster controls (gear/collapse/hide) are now flex children at the END
       of this row — not absolutely-positioned floats — so they share the
       tile-row baseline and read as ONE integrated bar instead of a separate
       island at the right. position:relative no longer needed for absolute
       anchoring but kept for any stacking-context callers. */
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    height: 26px;
    margin-top: 4px;
    justify-content: flex-start;
}
/* Push the existing subpills (id=me-marine-subpills) visually into this strip */
#me-marine-subpills {
    left: 64px !important;
    top: 46px !important;
    height: 30px !important;
    padding: 2px !important;
}

#bp-tiles {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    /* Clamp to parent so children can scroll within. Without min-width:0
       AND an explicit max-width, flex children expand to their content
       size and overflow the parent (10 tiles = 880px > 691px parent). */
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Right-side cluster (gear + collapse + hide) is cleared by the parent
       .bp-strip-state's padding-right:80px, so tiles get all available width
       up to that edge. No extra margin needed here. */
    padding-right: 4px;
    /* Snap so the leading tile clicks into the left edge instead of half-clipped. */
    scroll-snap-type: x proximity;
    scroll-padding-left: 4px;
}
#bp-tiles > * { scroll-snap-align: start; flex-shrink: 0; }
#bp-tiles::-webkit-scrollbar { display: none; }
/* Each gauge = inline label+value pill with glass backdrop for map contrast. */
.bp-tile {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 4px;
    height: 22px;
    min-width: auto;
    padding: 0 9px;
    background: rgba(8,12,22,0.78);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 11px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    transition: transform 160ms var(--bp-ease), border-color 160ms, background 160ms;
    position: relative;
    text-align: center;
    box-sizing: border-box;
}
.bp-tile:hover { transform: translateY(-1px); border-color: rgba(var(--me-page-accent-rgb, 34,211,238), 0.5); }
.bp-tile:hover .bp-tile-value { color: rgba(var(--me-page-accent-rgb, 34,211,238), 1); }
.bp-tile .bp-tile-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 0;
}
.bp-tile .bp-tile-value {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: #fff;
}
/* Each gauge gets its own designated semantic color so they're distinguishable */
.bp-tile[data-tile="vessels"] .bp-tile-value { color: #9fc4e7; }
.bp-tile[data-tile="alerts"]  .bp-tile-value { color: #fbbf24; }
.bp-tile[data-tile="cpa"]     .bp-tile-value { color: #c97a5c; }
.bp-tile[data-tile="waves"]   .bp-tile-value { color: #22d3ee; }
.bp-tile[data-tile="wind"]    .bp-tile-value { color: #64c8be; }
.bp-tile[data-tile="sst"]     .bp-tile-value { color: #f5c542; }
.bp-tile[data-tile="utc"]     .bp-tile-value { color: rgba(255,255,255,0.9); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
/* Thin semantic underline — cue without stealing space */
.bp-tile::after {
    content: '';
    position: absolute;
    left: 20%; right: 20%;
    bottom: 0;
    height: 1px;
    background: currentColor;
    opacity: 0.25;
    pointer-events: none;
}
.bp-tile[data-tile="vessels"]::after { color: #9fc4e7; }
.bp-tile[data-tile="alerts"]::after  { color: #fbbf24; }
.bp-tile[data-tile="cpa"]::after     { color: #c97a5c; }
.bp-tile[data-tile="waves"]::after   { color: #22d3ee; }
.bp-tile[data-tile="wind"]::after    { color: #64c8be; }
.bp-tile[data-tile="sst"]::after     { color: #f5c542; }
.bp-tile[data-tile="utc"]::after     { color: rgba(255,255,255,0.6); }
.bp-tile:hover::after { opacity: 0.75; }
.bp-tile.ok      .bp-tile-value { color: var(--bp-ok); }
.bp-tile.warn    .bp-tile-value { color: var(--bp-caution); }
.bp-tile.alert   .bp-tile-value {
    color: var(--bp-alert);
    animation: bp-pulse 1.8s ease-in-out infinite;
}
.bp-tile.muted   .bp-tile-value { color: var(--bp-text-dim); }
.bp-tile.active  { background: rgba(34,211,238,0.08); }

/* ═══ TICKER — inside .bp-strip-state, degrades before gauges ═══ */
#bp-ticker {
    height: 22px;
    /* Size to content, not a fixed 360px reservation. Reserving 360px when
       the ticker text is half that long left a giant empty zone between the
       ticker and the marine subnav at every viewport width. */
    flex: 0 0 auto;
    max-width: 360px;
    min-width: 0;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    overflow: hidden;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.6);
}
#bp-ticker-track {
    font-size: 11px;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
#bp-status-strip #bp-tiles {
    /* Allow shrink so the tile row never overlaps the right-cluster controls
       (gear/collapse/hide ~80px). overflow-x:auto on #bp-tiles lets the row
       scroll internally if there are more tiles than fit. The hard 80px
       reservation is enforced via padding-right on .bp-strip-state below. */
    flex: 1 1 0;
    min-width: 0;
}
/* Reserve a hard 80px slot on the strip-state's right edge so the absolutely-
   positioned cluster (collapse + hide + gear) NEVER overlaps tile content,
   regardless of viewport width. This is the iPad fix — previously the cluster
   anchored to #bp-status-strip and effectively floated over whatever tiles
   extended into the last ~80px. */
/* Cluster (nail-head nodules) now lives BELOW the strip, hanging off the
   bottom edge — no longer inside the row. So tiles get the full width of
   strip-state without any right-side reservation. */
@media (max-width: 900px) {
    /* At iPad and narrower: stack strip vertically so NAV and STATE zones each
       get a full-width row and never overlap. Total strip grows to 44px. */
    #bp-status-strip {
        height: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }
    .bp-strip-nav { height: 20px; justify-content: flex-start; }
    .bp-strip-nav::after { display: none; }       /* vertical hairline makes no sense stacked */
    /* Strip-state on mobile = flex ROW with WRAP so tiles+cluster ride one
       row and ticker wraps to its own row below. Cluster sits at the END
       of the tile row, inline with the controls. */
    .bp-strip-state {
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
    }
    /* Ticker shares row 2 with the cluster. flex-basis 0 means it claims
       no width up front; cluster gets placed first, ticker fills remainder. */
    #bp-ticker {
        max-width: none !important;
        width: auto !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        font-size: 8.5px !important;
        order: 50 !important;
        height: 18px !important;
        padding: 0 8px !important;
    }
    /* Tighten gauges so all 7 fit a tablet-width row */
    #bp-tiles { gap: 3px; }
    .bp-tile { padding: 0 3px; min-width: 0; }
    .bp-tile .bp-tile-label { letter-spacing: 0.14em; }
    .bp-tile .bp-tile-value { font-size: 11px; }
    .me-marine-inline .me-marine-tab { padding: 0 7px; letter-spacing: 0.1em; }
    /* Map stays full viewport; nav + top strip + dock float on map */
    .earth-page-marine .em-map-container { top: 0 !important; bottom: 0 !important; height: 100vh !important; }
    #bp-panel { top: 54px; }
}
/* Mobile tile priority: UTC drops first (system clock covers it), then
   SST if even narrower. Keeps the row from overflowing the viewport.
   At iPhone widths we ALSO drop WIND and the inline STORMS/HURRICANE/
   TSUNAMI sub-nav (.me-marine-inline) from the tile row — that sub-nav
   already lives in the unified nav above, having it inline inside
   #bp-tiles was eating the row and clipping WAVES at the right edge. */
@media (max-width: 540px) {
    .bp-tile[data-tile="utc"] { display: none !important; }
    .me-marine-inline .me-marine-tab { font-size: 8px; padding: 0 5px; letter-spacing: 0.06em; }
}
/* Hide the inline STORMS/HURRICANE/TSUNAMI sub-nav inside #bp-tiles at any
   viewport narrower than the desktop nav threshold. That sub-nav is already
   in the unified-nav above (and in the hamburger panel below 1441px) — keeping
   it in the strip too just collides with the ticker and clips the leading
   letters of "STORMS" at common laptop widths. */
@media (max-width: 1399px) {
    #bp-tiles .me-marine-inline { display: none !important; }
}

@media (max-width: 480px) {
    .bp-tile[data-tile="sst"] { display: none !important; }
    .bp-tile[data-tile="wind"] { display: none !important; }
    /* Give the rightmost tile breathing room from the viewport edge so
       the wave value never reads as "cut off". */
    #bp-tiles { padding-right: 14px !important; }
}
@media (max-width: 380px) {
    .bp-tile[data-tile="cpa"] { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE LIQUID-GLASS POLISH — nests tile row + ticker row into a
   single console panel that KISSES the unified-nav above (no gap).
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
    /* Strip becomes a unified console flush against the nav.
       Edge-to-edge rectangle (no border-radius) on mobile so the cluster
       at the right doesn't sit in a corner curve cutout. */
    #bp-status-strip {
        top: 32px !important;
        left: 0 !important;
        right: 0 !important;
        padding: 2px 4px !important;
        height: auto !important;
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        /* Liquid-glass: deeper saturation, multi-stop bezel gradient that
           reads as real curved metal-glass material, refractive blur. */
        background:
            /* Top sheen — light catching the upper bezel curve */
            linear-gradient(180deg,
                rgba(255,255,255,0.03) 0%,
                rgba(255,255,255,0) 8%,
                rgba(255,255,255,0) 92%,
                rgba(0,0,0,0.20) 100%),
            /* Body — depth gradient through the panel */
            linear-gradient(180deg,
                rgba(18, 24, 38, 0.94) 0%,
                rgba(12, 18, 30, 0.92) 50%,
                rgba(8, 14, 24, 0.90) 100%) !important;
        backdrop-filter: blur(20px) saturate(1.6) !important;
        -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
        border-top: 0 !important;
        border-left: 1px solid rgba(184,168,140,0.14) !important;
        border-right: 1px solid rgba(184,168,140,0.14) !important;
        border-bottom: 1px solid rgba(0,0,0,0.55) !important;
        border-radius: 0 0 14px 14px !important;
        box-shadow:
            /* Inner top highlight — meets unified-nav cleanly */
            inset 0 1px 0 rgba(255,255,255,0.06),
            /* Inner side highlights for liquid-glass curvature */
            inset 1px 0 0 rgba(255,255,255,0.03),
            inset -1px 0 0 rgba(255,255,255,0.03),
            /* Lift off the map */
            0 8px 24px rgba(0,0,0,0.55),
            0 2px 6px rgba(0,0,0,0.35) !important;
    }
    /* Sub-nav (STORMS/HURRICANE/TSUNAMI) row — first line of the console */
    .bp-strip-nav {
        order: 1;
        flex: 0 0 auto;
        padding: 2px 0 0 !important;
    }
    /* Tiles + ticker stack within strip-state — second + third lines */
    .bp-strip-state {
        order: 2;
        gap: 4px !important;
        padding: 0 !important;
        margin-top: 0 !important;
    }
    /* Row 1: sub-pages + ALL tiles inline on a single horizontal row.
       Row 2: ticker, with the cluster (^ × ⚙) absolute-positioned at its
       right edge. */
    #bp-tiles {
        order: 1 !important;
        flex: 1 1 100% !important;            /* take entire row 1 */
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 26px;
        align-items: center;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
    }
    .me-marine-inline {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        padding-right: 0 !important;
        margin-right: 6px !important;
        border-right: 1px solid rgba(255,255,255,0.10) !important;
    }
    /* Cluster becomes a flex-item group at the END of the tile row.
       No absolute positioning — they sit as real flex children, taking
       their share of the row width like the tiles do. Result: tiles get
       what's left, cluster always visible inline. */
    .bp-strip-ctl,
    #bp-ticker-cfg {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        right: auto !important;
        transform: none !important;
        flex-shrink: 0 !important;
    }
    /* Push cluster to the right edge by giving the first cluster button
       margin-left: auto (auto-margin in flex pushes it to the far end). */
    #bp-strip-collapse { order: 100 !important; margin-left: auto !important; }
    #bp-strip-hide     { order: 101 !important; margin-left: 2px !important; }
    #bp-ticker-cfg     { order: 102 !important; margin-left: 2px !important; margin-right: 4px !important; }
    /* Tile container shrinks to give the cluster its space inline */
    #bp-tiles {
        padding-right: 0 !important;
        margin-right: 0 !important;
    }
    /* Tiles tight so all 7 + sub-pages fit on one line */
    .bp-tile {
        min-width: 44px !important;
        height: 22px !important;
        padding: 0 4px !important;
    }
    .bp-tile .bp-tile-label { font-size: 6.5px !important; }
    .bp-tile .bp-tile-value { font-size: 10px !important; }
    .me-marine-inline .me-marine-tab { font-size: 7.5px !important; padding: 0 5px !important; }
    /* Ticker row — reserve right space for the cluster (~100px) */
    #bp-ticker {
        padding-right: 100px !important;
    }
    /* Ticker — its own row, always visible, scrolling intel. Subtle
       inset well to read as a recessed band of light beneath the tiles. */
    #bp-ticker {
        order: 2;
        display: flex !important;
        align-items: center;
        width: 100% !important;
        max-width: none !important;
        height: 16px !important;
        padding: 0 8px !important;
        background: rgba(0,0,0,0.32);
        border-radius: 8px;
        box-shadow:
            inset 0 1px 2px rgba(0,0,0,0.55),
            inset 0 -1px 0 rgba(255,255,255,0.03);
        font-size: 8.5px !important;
        letter-spacing: 0.18em;
        color: rgba(220,228,245,0.62);
    }
    #bp-ticker-track {
        font-family: var(--bp-mono, monospace);
    }
}

/* Gear button — bare glyph, no container. */
#bp-ticker-cfg {
    width: 22px; height: 22px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0;
    transition: color 140ms;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}
#bp-ticker-cfg:hover {
    color: rgba(var(--me-page-accent-rgb, 34,211,238), 1);
}

/* Settings popover */
#bp-ticker-popover {
    position: fixed;
    z-index: 1000;
    width: 320px;
    background: rgba(8,12,22,0.98);
    border: 1px solid var(--bp-border-hi);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    padding: 12px;
    font-family: var(--bp-mono);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
#bp-ticker-popover[hidden] { display: none; }
.bp-pop-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.bp-pop-row.bp-pop-feeds { align-items: flex-start; flex-direction: column; gap: 6px; }
.bp-pop-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    flex-shrink: 0;
    width: 64px;
}
#bp-pop-loc {
    flex: 1;
    height: 26px;
    padding: 0 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--bp-border);
    border-radius: 3px;
    color: #fff;
    font-family: var(--bp-mono);
    font-size: 11px;
    outline: none;
}
#bp-pop-loc:focus { border-color: rgba(var(--me-page-accent-rgb, 34,211,238), 0.6); }
#bp-pop-loc-go {
    width: 26px; height: 26px;
    background: rgba(var(--me-page-accent-rgb, 34,211,238), 0.12);
    border: 1px solid rgba(var(--me-page-accent-rgb, 34,211,238), 0.4);
    border-radius: 3px;
    color: rgba(var(--me-page-accent-rgb, 34,211,238), 1);
    cursor: pointer;
    font-size: 13px;
    flex-shrink: 0;
}
#bp-pop-radius { flex: 1; }
#bp-pop-radius-val { font-size: 10px; color: #fff; width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
.bp-pop-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bp-pop-chip {
    padding: 4px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--bp-border);
    border-radius: 3px;
    color: rgba(255,255,255,0.55);
    font-family: var(--bp-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 120ms, border-color 120ms, background 120ms;
}
.bp-pop-chip:hover { color: #fff; }
.bp-pop-chip.on {
    color: rgba(var(--me-page-accent-rgb, 34,211,238), 1);
    border-color: rgba(var(--me-page-accent-rgb, 34,211,238), 0.6);
    background: rgba(var(--me-page-accent-rgb, 34,211,238), 0.1);
}
.bp-pop-status {
    margin-top: 6px;
    font-size: 10px;
    color: rgba(255,255,255,0.6);
    min-height: 14px;
}
#bp-ticker-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,0.95);
    animation: bp-ticker-fade 6s ease-in-out infinite;
    transition: opacity 200ms var(--bp-ease);
}
@keyframes bp-ticker-fade {
    0%, 90%, 100% { opacity: 1; }
    95% { opacity: 0.35; }
}
.bp-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.bp-ticker-src {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--bp-text-muted);
    text-transform: uppercase;
    padding: 2px 6px;
    border: 1px solid var(--bp-border);
    border-radius: 3px;
    flex-shrink: 0;
}
.bp-ticker-text {
    color: var(--bp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.bp-ticker-region {
    font-size: 9px;
    color: var(--bp-text-dim);
    flex-shrink: 0;
}
.bp-ticker-warn .bp-ticker-text { color: var(--bp-caution); }
.bp-ticker-warn .bp-ticker-src  { border-color: var(--bp-caution); color: var(--bp-caution); }
.bp-ticker-crit .bp-ticker-text { color: var(--bp-alert); animation: bp-pulse 1.8s ease-in-out infinite; }
.bp-ticker-crit .bp-ticker-src  { border-color: var(--bp-alert); color: var(--bp-alert); }
.bp-ticker-muted { color: var(--bp-text-dim); font-style: italic; }

/* Clickable AIS vessel-count ticker item */
.bp-ticker-link {
    text-decoration: none;
    cursor: pointer;
    transition: background 140ms var(--bp-ease), color 140ms var(--bp-ease);
    border-radius: 4px;
    padding: 2px 0;
}
.bp-ticker-link:hover {
    background: rgba(122, 144, 200, 0.10);
}
.bp-ticker-link:hover .bp-ticker-text,
.bp-ticker-link:hover .bp-ticker-go {
    color: var(--bp-accent, #7a90c8);
}
.bp-ticker-go {
    font-size: 10px;
    color: var(--bp-text-dim);
    flex-shrink: 0;
    margin-left: 4px;
    transition: transform 160ms var(--bp-ease), color 140ms;
}
.bp-ticker-link:hover .bp-ticker-go {
    transform: translateX(2px);
}

/* Hide ticker below ~640px so gauges stay legible on phones */
@media (max-width: 640px) {
    #bp-ticker { display: none; }
}

@keyframes bp-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}
@keyframes bp-breathe {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.3); }
}

/* ══════════════════════════════════════════════════════════════
   RIGHT DATA PANEL — tabbed console
   ══════════════════════════════════════════════════════════════ */
#bp-panel {
    position: fixed;
    /* Sit BELOW nav + strip + breathing room — never behind them.
       Computed from same vars so the seam stays right at every nav height. */
    top: calc(var(--unified-nav-h, 34px) + var(--bp-strip-h, 36px) + 8px + env(safe-area-inset-top, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
    bottom: calc(36px + env(safe-area-inset-bottom, 0px));  /* above compass strip */
    width: 0;
    background: var(--bp-panel);
    border: 0;
    border-radius: 10px;
    box-shadow: none;
    z-index: 880;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 220ms var(--bp-ease);
}
#bp-panel.open {
    width: 320px;
    border: 1px solid var(--bp-border);
    box-shadow: -4px 0 18px rgba(0,0,0,0.45);
}
#bp-panel-tabs {
    display: flex;
    height: 34px;
    border-bottom: 1px solid var(--bp-border);
    background: rgba(5,8,16,0.65);
    flex-shrink: 0;
    visibility: hidden;
}
#bp-panel.open #bp-panel-tabs { visibility: visible; }
.bp-tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: var(--bp-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bp-text-dim);
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    transition: color 120ms var(--bp-ease), background 120ms var(--bp-ease);
}
.bp-tab:hover { color: var(--bp-text); background: rgba(34,211,238,0.04); }
.bp-tab.active { color: var(--bp-accent); }
.bp-tab.active::after {
    content: '';
    position: absolute;
    left: 15%; right: 15%;
    bottom: 0;
    height: 2px;
    background: var(--bp-accent);
    box-shadow: 0 0 6px var(--bp-accent);
}
.bp-tab-count {
    display: inline-block;
    font-size: 8px;
    padding: 1px 4px;
    border-radius: 8px;
    background: rgba(34,211,238,0.12);
    color: var(--bp-accent);
    font-weight: 700;
    min-width: 14px;
    text-align: center;
}
#bp-panel-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 14px;
    color: var(--bp-text);
    font-family: var(--bp-mono);
    font-size: 11px;
    line-height: 1.55;
}
#bp-panel-body::-webkit-scrollbar { width: 4px; }
#bp-panel-body::-webkit-scrollbar-thumb { background: var(--bp-accent-dim); border-radius: 2px; }
#bp-panel-body { scrollbar-width: thin; scrollbar-color: var(--bp-accent-dim) transparent; }

/* Panel content blocks */
.bp-group {
    border-bottom: 1px solid var(--bp-divider);
    padding-bottom: 10px;
    margin-bottom: 12px;
}
.bp-group:last-child { border-bottom: none; margin-bottom: 0; }
.bp-group-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--bp-text-muted);
    text-transform: uppercase;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bp-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 10px;
}
.bp-row-k { color: var(--bp-text-muted); letter-spacing: 0.08em; text-transform: uppercase; font-size: 9px; }
.bp-row-v { color: var(--bp-text); font-variant-numeric: tabular-nums; }

/* Toggle button inside panel */
.bp-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 7px 10px;
    margin: 2px 0;
    background: rgba(14,22,34,0.5);
    border: 1px solid var(--bp-border);
    border-radius: 3px;
    color: var(--bp-text-dim);
    font-family: var(--bp-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 120ms var(--bp-ease);
    text-align: left;
}
.bp-toggle:hover {
    color: var(--bp-text);
    border-color: var(--bp-border-hi);
    background: rgba(14,28,44,0.7);
}
.bp-toggle.active {
    color: var(--bp-accent);
    border-color: var(--bp-accent-dim);
    background: linear-gradient(180deg, rgba(34,211,238,0.14), rgba(34,211,238,0.04));
    box-shadow: inset 0 1px 0 rgba(34,211,238,0.2);
}
.bp-toggle .bp-check {
    width: 12px; height: 12px;
    border: 1px solid var(--bp-border-hi);
    border-radius: 2px;
    flex-shrink: 0;
    position: relative;
}
.bp-toggle.active .bp-check {
    background: var(--bp-accent);
    border-color: var(--bp-accent);
}
.bp-toggle.active .bp-check::after {
    content: '';
    position: absolute;
    left: 3px; top: 0;
    width: 4px; height: 8px;
    border: solid var(--bp-bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.bp-opacity {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 8px 16px;
    font-size: 9px;
    color: var(--bp-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.bp-opacity input[type="range"] {
    flex: 1;
    height: 4px;
    background: var(--bp-border);
    border-radius: 2px;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}
.bp-opacity input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--bp-accent);
    box-shadow: 0 0 4px var(--bp-accent);
    cursor: pointer;
}
.bp-opacity input[type="range"]::-moz-range-thumb {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--bp-accent);
    border: none;
    cursor: pointer;
}

/* Intel list item */
.bp-intel-item {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    margin: 4px 0;
    background: rgba(14,22,34,0.45);
    border-left: 2px solid var(--bp-accent);
    border-radius: 0 3px 3px 0;
    font-size: 10px;
    line-height: 1.5;
}
.bp-intel-item.warn  { border-left-color: var(--bp-caution); }
.bp-intel-item.crit  { border-left-color: var(--bp-alert); background: rgba(239,68,68,0.08); }
.bp-intel-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
}
.bp-intel-src {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.16em;
    padding: 1px 5px;
    border-radius: 2px;
    background: rgba(255,255,255,0.05);
    color: var(--bp-text-dim);
    text-transform: uppercase;
    flex-shrink: 0;
}
.bp-intel-ts {
    font-size: 9px;
    color: var(--bp-text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.bp-intel-head-mid {
    color: var(--bp-text);
    flex: 1;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bp-intel-region {
    font-size: 9px;
    color: var(--bp-text-muted);
    font-style: italic;
    margin-top: 2px;
}
.bp-intel-item {
    cursor: pointer;
    transition: background 120ms var(--bp-ease), border-color 120ms var(--bp-ease);
}
.bp-intel-item:hover { background: rgba(14,22,34,0.7); }
.bp-intel-item.is-open {
    background: rgba(34,211,238,0.06);
    border-left-width: 3px;
    cursor: default;
}
.bp-intel-body {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bp-intel-full {
    font-size: 11px;
    color: var(--bp-text);
    line-height: 1.5;
}
.bp-intel-meta {
    font-size: 9px;
    color: var(--bp-text-dim);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}
.bp-intel-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 10px;
    color: var(--bp-accent);
    text-decoration: none;
    border-bottom: 1px dotted var(--bp-accent-dim);
    width: fit-content;
    padding: 1px 0;
}
.bp-intel-link:hover { border-bottom-style: solid; }
.bp-intel-linkid {
    font-size: 9px;
    color: var(--bp-text-muted);
    word-break: break-all;
}

/* Tools tab — inline rows */
.bp-tool-row { position: relative; }
.bp-tool-caret {
    color: var(--bp-text-muted);
    font-size: 10px;
    transition: transform 150ms var(--bp-ease);
}
.bp-tool-row.active .bp-tool-caret { color: var(--bp-accent); }
.bp-tool-result {
    background: rgba(14,22,34,0.45);
    border: 1px solid var(--bp-border);
    border-top: none;
    border-radius: 0 0 3px 3px;
    padding: 10px 12px;
    margin-top: -2px;
    margin-bottom: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 10px;
}
.bp-tool-row-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    min-height: 22px;
}
.bp-tool-k {
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bp-text-dim);
    flex-shrink: 0;
}
.bp-tool-v {
    color: var(--bp-text);
    font-variant-numeric: tabular-nums;
    text-align: right;
    word-break: break-word;
}
.bp-tool-unit {
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--bp-text-muted);
    text-transform: uppercase;
}
.bp-tool-input {
    background: rgba(14,22,34,0.6);
    border: 1px solid var(--bp-border);
    color: var(--bp-text);
    font-family: var(--bp-mono);
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 2px;
    width: 80px;
    text-align: right;
    outline: none;
    font-variant-numeric: tabular-nums;
}
.bp-tool-input:focus { border-color: var(--bp-accent-dim); }
.bp-tool-select { width: 90px; text-align: left; }
.bp-tool-note {
    font-size: 9px;
    color: var(--bp-text-muted);
    line-height: 1.5;
    margin-top: 2px;
}
.bp-tool-result-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.bp-tool-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}
.bp-ring-label {
    font-family: var(--bp-mono);
    font-size: 9px;
    color: #22d3ee;
    background: rgba(5,8,16,0.85);
    border: 1px solid rgba(34,211,238,0.4);
    border-radius: 2px;
    padding: 1px 4px;
    text-align: center;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

/* Vessel detail panel — must stack above bridge panel on mobile */
#vessel-detail,
#buoy-detail { z-index: 890; }

.bp-intel-filters {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.bp-intel-filter {
    font-family: var(--bp-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 8px;
    background: transparent;
    border: 1px solid var(--bp-border);
    border-radius: 2px;
    color: var(--bp-text-dim);
    cursor: pointer;
    transition: all 120ms var(--bp-ease);
}
.bp-intel-filter:hover { color: var(--bp-text); border-color: var(--bp-border-hi); }
.bp-intel-filter.active { color: var(--bp-accent); border-color: var(--bp-accent-dim); background: var(--bp-accent-bg); }

/* Vessels list row */
.bp-vessel-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    margin: 2px 0;
    background: rgba(14,22,34,0.35);
    border-radius: 2px;
    cursor: pointer;
    transition: background 120ms var(--bp-ease);
    font-size: 10px;
}
.bp-vessel-row {
    /* ensure row never spills outside panel */
    max-width: 100%; box-sizing: border-box; overflow: hidden;
}
.bp-vessel-row:hover { background: rgba(34,211,238,0.08); }
.bp-vessel-row.is-selected { background: rgba(34,211,238,0.14); border-left: 2px solid var(--bp-accent, #22d3ee); padding-left: 6px; border-radius: 6px; }
.bp-vessel-arrow {
    width: 10px; height: 10px; flex-shrink: 0;
}
.bp-vessel-name { flex: 1; color: var(--bp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-vessel-sog { font-variant-numeric: tabular-nums; color: var(--bp-text-dim); font-size: 9px; }

/* CPA block inside VSL tab */
.bp-cpa-list { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 8px; }
.bp-cpa-row {
    display: grid; grid-template-columns: 1fr auto auto; gap: 8px;
    padding: 4px 8px; font-size: 10px;
    background: rgba(14,22,34,0.4); border-radius: 2px;
    font-variant-numeric: tabular-nums;
}
.bp-cpa-row.bp-cpa-high    { border-left: 2px solid #ef4444; }
.bp-cpa-row.bp-cpa-medium  { border-left: 2px solid #f59e0b; }
.bp-cpa-row.bp-cpa-low     { border-left: 2px solid #10b981; }
.bp-cpa-name { color: var(--bp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-cpa-dist, .bp-cpa-t { color: var(--bp-text-dim); font-size: 9px; }

/* ══════════════════════════════════════════════════════════════
   BOTTOM STRIP — scale + compass + cursor
   ══════════════════════════════════════════════════════════════ */
/* BOTTOM DECK — full-width instrument console mirroring the top strip.
   Spans the chart's bottom edge with the same liquid-glass marine treatment,
   border-radius flipped (top-rounded), so the chart reads as enclosed
   between two decks. Three slots: scale+coord on the left, wind in the
   center, power-mode pill on the right. Hairline dividers between. */
#bp-compass-strip {
    position: fixed;
    bottom: calc(0px + env(safe-area-inset-bottom, 0px));
    left: calc(68px + env(safe-area-inset-left, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    height: var(--bp-deck-h, 38px);
    z-index: 895;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    /* Liquid-glass marine surface — base styles; the marine deck block
       further down enforces the indigo-hairline + token-driven version. */
    background: rgba(8,12,22,0.72);
    border: 1px solid rgba(255,255,255,0.1);
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    box-shadow: 0 -6px 20px rgba(0,0,0,0.45);
    font-family: var(--bp-mono);
    font-size: 10px;
    color: var(--bp-text-dim);
    letter-spacing: 0.08em;
}
/* Internal slots — instrument-deck layout */
.bp-deck-slot {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    height: 100%;
}
.bp-deck-slot-left  { justify-content: flex-start; }
.bp-deck-slot-center {
    justify-content: center;
    flex: 1 1 auto;
    overflow: hidden;
}
.bp-deck-slot-right { justify-content: flex-end; flex-shrink: 0; }
/* Hairline divider between scale and coords — pure instrument-bezel detail */
.bp-deck-divider {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(184, 168, 140, 0.22) 30%,
        rgba(184, 168, 140, 0.22) 70%,
        transparent 100%);
}
/* Wind readout docked in center slot — uppercase mono instrument readout */
.leaflet-control-velocity.bp-deck-wind {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    font-family: var(--bp-mono);
    font-size: 10.5px;
    letter-spacing: 0.10em;
    color: rgba(232, 240, 250, 0.92);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
    pointer-events: none;
    white-space: nowrap;
    z-index: auto;
}
.leaflet-control-velocity.bp-deck-wind strong {
    font-weight: 600;
    color: rgba(184, 168, 140, 0.72);
    margin-right: 5px;
    letter-spacing: 0.12em;
}
.leaflet-control-velocity.bp-deck-wind strong + strong { margin-left: 14px; }
/* Power pill docked in right slot — remove floating positioning, keep look */
#bp-power-pill.bp-deck-power {
    position: static !important;
    margin: 0 !important;
    flex-shrink: 0;
}
#bp-scale {
    display: flex;
    align-items: center;
    gap: 6px;
}
#bp-scale-bar {
    display: inline-block;
    height: 4px;
    border: 1px solid var(--bp-accent);
    border-top: none;
    min-width: 50px;
    position: relative;
}
#bp-scale-bar::before,
#bp-scale-bar::after {
    content: '';
    position: absolute;
    top: -3px;
    width: 1px;
    height: 4px;
    background: var(--bp-accent);
}
#bp-scale-bar::before { left: 0; }
#bp-scale-bar::after  { right: 0; }
#bp-scale-label {
    color: var(--bp-accent);
    font-variant-numeric: tabular-nums;
}
/* Compass mode pill — replaces the old dead "N ↑" button.
   Cycles north-up → heading-up → course-up. The needle glyph spins to
   reflect the actual map bearing; the label shows the active mode. */
.bp-compass-pill {
    width: 34px; height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background: rgba(8,12,22,0.78);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 9px;
    color: rgba(var(--me-page-accent-rgb, 34,211,238), 0.9);
    font-family: var(--bp-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    box-shadow: 0 3px 10px rgba(0,0,0,0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    margin-bottom: 6px;
    padding: 0;
    transition: color 140ms, border-color 140ms, background 140ms;
}
.bp-compass-pill:hover {
    color: rgba(var(--me-page-accent-rgb, 34,211,238), 1);
    border-color: rgba(var(--me-page-accent-rgb, 34,211,238), 0.55);
    background: rgba(14,22,36,0.85);
}
.bp-compass-pill .bp-compass-needle {
    display: block;
    transform-origin: 50% 50%;
    transition: transform 80ms linear;
    pointer-events: none;
}
.bp-compass-pill .bp-compass-label {
    line-height: 1;
    font-size: 8px;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.65);
}
/* Active-mode tint — pill border + label color shift so user knows
   which mode is engaged at a glance.
   Use full `border:` shorthand (not just border-color) because the base
   rule's `border: 1px solid ...` shorthand caused the longhand override
   to lose under some browser quirks. Also use the lg-page-accent literal
   not a CSS-var-inside-rgba — that pattern was failing silently in some
   engines too. */
.bp-compass-pill[data-mode="heading-up"] {
    border: 1px solid rgba(34, 211, 238, 0.7);
}
.bp-compass-pill[data-mode="heading-up"] .bp-compass-label {
    color: rgb(34, 211, 238);
}
.bp-compass-pill[data-mode="course-up"] {
    border: 1px solid rgba(245, 158, 11, 0.7); /* amber — distinguishes from heading-up */
}
.bp-compass-pill[data-mode="course-up"] .bp-compass-label {
    color: rgb(245, 158, 11);
}
#bp-cursor {
    margin-left: 12px;
    color: var(--bp-text);
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════
   ZOOM STACK — bottom-right, 3 buttons
   ══════════════════════════════════════════════════════════════ */
.earth-page-marine .leaflet-top.leaflet-right,
.earth-page-marine .leaflet-control-zoom {
    display: none !important;
}
#bp-zoom-stack {
    position: fixed;
    right: 20px;
    top: 100px;                            /* below unified-nav + floating gauges */
    z-index: 884;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
body.earth-page-marine.bp-panel-open #bp-zoom-stack { right: 336px; }
.bp-zoom-btn {
    width: 34px; height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8,12,22,0.78);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 9px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    transition: color 120ms var(--bp-ease), border-color 120ms, background 120ms;
}
.bp-zoom-btn:hover { color: rgba(var(--me-page-accent-rgb, 34,211,238), 1); border-color: rgba(var(--me-page-accent-rgb, 34,211,238), 0.55); background: rgba(14,22,36,0.85); }
.bp-zoom-btn svg {
    width: 16px; height: 16px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
}
.bp-zoom-btn.zoom-n { font-family: var(--bp-mono); font-size: 11px; font-weight: 700; letter-spacing: 0; }

/* ══════════════════════════════════════════════════════════════
   MAP POSITIONING — chart takes everything between zones
   ══════════════════════════════════════════════════════════════ */
.earth-page-marine .em-map-container {
    position: fixed !important;
    top: 0 !important;                     /* full viewport — nav floats on top */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;                 /* kill any ancestor padding */
    min-height: 0 !important;
    height: 100vh !important;
    width: auto !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    transition: right 220ms var(--bp-ease);
}
/* Defeat earth-monitor.css's height: 65vh + 28px bottom padding */
body.earth-page-marine .em-map-container {
    padding-bottom: 0 !important;
    height: 100vh !important;
}
body.earth-page-marine .em-map-container #marine-map,
body.earth-page-marine .em-map-container .leaflet-container {
    height: 100% !important;
    width: 100% !important;
}
body.earth-page-marine.bp-panel-open .em-map-container {
    right: 320px !important;                /* panel still floats on top, no inset */
}
.earth-page-marine #marine-map {
    height: 100% !important;
    width: 100% !important;
}

/* ══════════════════════════════════════════════════════════════
   FLOATING TILES — anchored callouts on map
   ══════════════════════════════════════════════════════════════ */
.bp-anchor-tile {
    position: absolute;
    background: rgba(8,12,22,0.96);
    border: 1px solid var(--bp-accent-dim);
    border-radius: 3px;
    padding: 10px 12px;
    font-family: var(--bp-mono);
    font-size: 10px;
    color: var(--bp-text);
    box-shadow: 0 6px 18px rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: 260px;
    z-index: 500;
    pointer-events: auto;
}
.bp-anchor-tile-close {
    position: absolute;
    top: 4px; right: 6px;
    background: none;
    border: none;
    color: var(--bp-text-muted);
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
}

/* ══════════════════════════════════════════════════════════════
   COMMAND PALETTE
   ══════════════════════════════════════════════════════════════ */
#bp-palette-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
}
#bp-palette-backdrop.open { display: flex; }
#bp-palette {
    width: 560px;
    max-width: calc(100vw - 40px);
    background: var(--bp-panel);
    border: 1px solid var(--bp-border-hi);
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7), inset 0 1px 0 rgba(34,211,238,0.15);
    overflow: hidden;
    font-family: var(--bp-mono);
}
#bp-palette-input {
    width: 100%;
    height: 46px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--bp-border);
    padding: 0 18px;
    color: var(--bp-text);
    font-family: var(--bp-mono);
    font-size: 13px;
    letter-spacing: 0.04em;
    outline: none;
    box-sizing: border-box;
}
#bp-palette-results {
    max-height: 380px;
    overflow-y: auto;
    padding: 8px 0;
}

/* Mobile: anchor palette near the top with a clear viewport margin so the
   input never gets clipped by the soft keyboard or Safari's bottom bar.
   Constrain results so the whole thing fits between the top inset and
   the visible keyboard zone. */
@media (max-width: 760px) {
    #bp-palette-backdrop {
        padding-top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
        padding-left: 12px;
        padding-right: 12px;
        align-items: flex-start;
    }
    #bp-palette {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 32px);
        display: flex;
        flex-direction: column;
    }
    #bp-palette-input {
        height: 52px;
        font-size: 16px; /* prevents iOS zoom-on-focus */
        padding: 0 16px;
    }
    #bp-palette-results {
        max-height: none;
        flex: 1 1 auto;
        min-height: 0;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }
}
.bp-pal-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    cursor: pointer;
    color: var(--bp-text-dim);
    font-size: 11px;
}
.bp-pal-item.selected, .bp-pal-item:hover {
    background: var(--bp-accent-bg);
    color: var(--bp-text);
}
.bp-pal-hint {
    margin-left: auto;
    font-size: 9px;
    color: var(--bp-text-muted);
    letter-spacing: 0.1em;
}
.bp-pal-group-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--bp-text-muted);
    text-transform: uppercase;
    padding: 6px 18px 2px;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — iPad
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    #bp-panel.open { width: 280px; }
    body.earth-page-marine.bp-panel-open .em-map-container { right: 296px !important; }
    .bp-tile { min-width: 64px; padding: 0 10px; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — iPhone: toolbar becomes bottom dock, panel full-screen sheet
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
    /* Toolbar → floating bottom dock, inset from edges so the map shows through */
    #bp-toolbar {
        top: auto !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        width: auto !important;
        height: 48px !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        padding: 0 6px !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        border-radius: 14px !important;
        /* Solid-enough glass so individual icon hit-targets don't have map
           shining through their gaps. */
        background: linear-gradient(180deg, rgba(8,12,22,0.92), rgba(8,12,22,0.85)) !important;
        backdrop-filter: blur(14px) saturate(1.1) !important;
        -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
        box-shadow: 0 6px 18px rgba(0,0,0,0.55) !important;
    }
    #bp-toolbar .bp-tool {
        width: 44px !important;
        height: 44px !important;
    }
    #bp-toolbar .bp-tool.active::before {
        left: 10px !important;
        right: 10px !important;
        top: 0 !important;
        bottom: auto !important;
        width: auto !important;
        height: 2px !important;
    }
    #bp-toolbar .bp-divider {
        width: 1px !important;
        height: 24px !important;
        margin: 0 4px !important;
    }
    #bp-toolbar .bp-spacer { display: none; }

    /* Tooltip on mobile: above, not right */
    #bp-toolbar .bp-tool[data-label]:hover::after {
        top: -32px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* Top strip — compact. Kisses unified-nav (which ends at y:32 on mobile)
       so the two read as ONE continuous console. Was top:42, leaving a 10px
       gap below the nav that read as visual disconnection. */
    #bp-status-strip {
        left: 0 !important;
        top: 32px !important;
        height: auto !important;
        padding: 2px 8px !important;
        gap: 4px !important;
    }
    #me-marine-subpills {
        left: 12px !important;
        top: 45px !important;
        height: 30px !important;
        padding: 2px !important;
    }
    #me-marine-subpills .me-marine-pill {
        height: 20px !important;
        padding: 0 9px !important;
        font-size: 9px !important;
        line-height: 20px !important;
    }
    /* Mobile tiles: gap collapses, fills full width of strip-state (which is
       already padded-right by 80px to clear the cluster). No extra margin —
       that was creating dead space between tiles and cluster. */
    #bp-tiles,
    #bp-status-strip #bp-tiles {
        gap: 0;
        flex: 1 1 100% !important;
        width: 100% !important;
        margin-right: 0 !important;
        max-width: none !important;
        overflow: visible !important;
    }
    .bp-tile {
        min-width: 56px !important;
        padding: 0 6px !important;
    }
    .bp-tile .bp-tile-label { font-size: 7px !important; }
    .bp-tile .bp-tile-value { font-size: 11px !important; }

    /* Map runs full viewport — nav floats translucent on top.
       Status strip + tab toolbar are position: fixed floats ON TOP
       of the map (translucent), so they don't reserve layout space. */
    .earth-page-marine .em-map-container {
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        height: 100vh !important;
        padding: 0 !important;
    }
    body.earth-page-marine.bp-panel-open .em-map-container { right: 0 !important; }

    /* Panel becomes full-screen sheet — dropped to 104 so the VESSELS/ALERTS/WAVES/WIND
       chip row (top 42, height 36 → ends at 78) has a clean 26 px gap above the tab bar */
    #bp-panel {
        top: 104px !important;
        right: 0 !important;
        bottom: 54px !important;
        width: 0 !important;
        left: 100vw !important;
        z-index: 886 !important;           /* above zoom stack (878) and status strip (885) */
    }
    #bp-panel.open {
        width: 100vw !important;
        left: 0 !important;
    }

    /* Vessel / buoy detail popups must float above the panel on mobile */
    #vessel-detail,
    #buoy-detail {
        z-index: 898 !important;
    }

    /* Legacy floating tools FAB is redundant on mobile — TOOLS tab covers it */
    #bridge-tools-fab,
    #bridge-tools-panel { display: none !important; }

    /* Zoom stack: switched from "anchored to bottom" to "anchored to top" on
       mobile so it sits directly under the status strip and ends well above
       the MOB button (which now lives at bottom:132). Was bottom:66 which
       caused it to extend up THROUGH the MOB at bottom:132. */
    #bp-zoom-stack {
        right: 8px !important;
        /* Bumped from 92 to 104 so there's a real ~14px gap between the
           strip's bottom edge and the N compass button below it. */
        top: 104px !important;
        bottom: auto !important;
        z-index: 878 !important;
    }

    /* Bottom toolbar: when a bottom button opens an overlay/sheet, it must sit on top
       of the LAYERS panel. Toolbar base z:890 already > panel z:886. Any overlay that
       a toolbar button populates should inherit at least z:895 via .bp-panel-overlay. */
    #bp-toolbar { z-index: 895 !important; }
    .bp-panel-overlay,
    #bp-toolbar-overlay,
    [data-bp-overlay].open { z-index: 897 !important; }

    /* Compass strip hidden — cursor info goes into status tiles instead */
    #bp-compass-strip { display: none !important; }

    /* Panel tabs — shrink */
    .bp-tab {
        font-size: 8px !important;
        letter-spacing: 0.1em !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE BOTTOM-DOCK CLEARANCE (≤760px)
   The toolbar moves to bottom:12px / height:48px on mobile, occupying
   y from -60 to -12 from viewport bottom. Every bottom-anchored panel
   (instrument console, MOB, power pill, anchor pill, forecast tray)
   must clear it. Pushing each up by ~72px to land above the dock.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
    /* Instrument console — sits above the bottom dock, clear of MOB+power */
    .bp-instrument {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
        min-width: 240px !important;
    }
    /* Forecast tray — toggle bar just above the instrument console */
    .bp-forecast {
        bottom: calc(168px + env(safe-area-inset-bottom, 0px)) !important;
        width: calc(100vw - 24px) !important;
    }
    .bp-forecast.bp-fc-open .bp-fc-body { max-height: 160px !important; }
    /* MOB button — top-right of the bottom-cluster, above power pill.
       Use safe-area-inset-right so iOS notched devices push it inward
       rather than off the edge. Slight size reduction on phones for fit. */
    .bp-mob-btn {
        bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important;
        right: calc(12px + env(safe-area-inset-right, 0px)) !important;
        width: 52px !important;
        height: 52px !important;
    }
    /* Power pill — sits between MOB and the bottom dock */
    #bp-power-pill {
        bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
        right: 12px !important;
    }
    .bp-power-drawer {
        bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
        right: 12px !important;
    }
    /* Anchor pill — bottom-RIGHT, just LEFT of the POWER pill so both
       sit on the same baseline above the dock. POWER (throttle) is
       right:12 width:~93px, so anchor sits at right:115 (12 + 93 + 10gap).
       Width content-sized so it doesn't stretch. */
    .bp-anchor-pill {
        bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
        right: 115px !important;
        left: auto !important;
        width: auto !important;
    }
    #bp-anchor-drawer {
        bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
        left: 12px !important;
        right: 12px !important;
        max-width: calc(100vw - 24px) !important;
    }
    /* Convergence pill — keep top-left but shrink so it doesn't run into
       the right-edge zoom stack on a 760px viewport */
    .bp-convergence {
        top: calc(86px + env(safe-area-inset-top, 0px)) !important;
        left: 12px !important;
        gap: 8px !important;
        padding: 4px 10px 3px !important;
    }
    .bp-conv-val { font-size: 14px !important; }
    .bp-conv-lbl, .bp-conv-level { font-size: 8px !important; letter-spacing: 0.14em !important; }
    /* Barograph — hide on tablet/mobile; can be summoned via Cmd-K */
    .bp-baro { display: none !important; }
}

@media (max-width: 400px) {
    .bp-tile { min-width: 48px !important; }
    .bp-tile .bp-tile-label { letter-spacing: 0.12em !important; }
    #me-marine-subpills .me-marine-pill { padding: 0 6px !important; font-size: 8px !important; }
    /* Phone — even tighter bottom clearance */
    .bp-instrument {
        min-width: calc(100vw - 100px) !important;
        max-width: calc(100vw - 100px) !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   INSTRUMENT CONSOLE — bottom-center floating HUD
   Driven by bridge-instrument.js. Shows live nav readouts when GPS active.
   Restrained instrument typography: tabular nums, etched captions, no glow.
   ══════════════════════════════════════════════════════════════════ */
.bp-instrument {
    position: fixed;
    left: 50%;
    /* Bumped from bottom:20 to bottom:62 so the underway HUD clears the
       bottom-left compass-strip (scale + cursor lat/lon + mag-var, which
       lives at bottom:14, height ~30 → ends at y:44). Instrument is the
       "own ship" readout; compass strip is the "cursor inspection" readout;
       they share data shape but mean different things, so both stay visible. */
    bottom: 62px;
    transform: translateX(-50%) translateY(8px);
    z-index: 884;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 320px;
    padding: 10px 16px 8px;
    background: rgba(8,12,22,0.86);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: rgba(220,228,245,0.92);
    font-family: var(--bp-mono, 'DM Mono', monospace);
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms cubic-bezier(.4,0,.2,1), transform 280ms cubic-bezier(.4,0,.2,1);
}
.bp-instrument.bp-inst-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.bp-inst-row {
    display: flex;
    justify-content: center;
    gap: 22px;
    flex-wrap: nowrap;
}
/* Secondary row: tighter spacing + allow wrap so LAT/LON/ACC/MAG fit
   inside the 353px console width without overflow. Was causing the
   right-side cells to clip at narrow viewports. */
.bp-inst-row-secondary {
    gap: 14px !important;
    flex-wrap: wrap !important;
    row-gap: 4px !important;
}
.bp-inst-row-secondary .bp-inst-val-sm {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.bp-inst-row-primary .bp-inst-cell {
    display: flex;
    align-items: baseline;
    gap: 3px;
    min-width: 84px;
    justify-content: center;
}
.bp-inst-val {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: rgba(var(--me-page-accent-rgb, 34,211,238), 0.96);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.bp-inst-unit {
    font-size: 10px;
    font-weight: 600;
    color: rgba(220,228,245,0.55);
    letter-spacing: 0.04em;
    margin-left: 1px;
}
.bp-inst-lbl {
    font-size: 9px;
    font-weight: 700;
    color: rgba(220,228,245,0.45);
    letter-spacing: 0.18em;
    margin-left: 6px;
    text-transform: uppercase;
}
.bp-inst-row-secondary {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 6px;
    gap: 18px;
}
.bp-inst-cell-sm {
    display: flex;
    align-items: baseline;
    gap: 5px;
}
.bp-inst-lbl-sm {
    font-size: 8px;
    font-weight: 700;
    color: rgba(220,228,245,0.45);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.bp-inst-val-sm {
    font-size: 11px;
    font-weight: 600;
    color: rgba(220,228,245,0.85);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.bp-inst-unit-sm {
    font-size: 8px;
    color: rgba(220,228,245,0.5);
}

/* MAG cell — declination from IGRF-14 (slightly amber to flag it as
   non-positional info). Matches the rest of the secondary-row sizing. */
.bp-inst-cell-mag .bp-inst-val-sm {
    color: rgba(248, 198, 122, 0.92);  /* warm amber to differ from white nums */
    letter-spacing: 0.02em;
}
.bp-inst-cell-mag .bp-inst-lbl-sm {
    color: rgba(248, 198, 122, 0.55);
}

/* Tight viewport: collapse the secondary row to a single line */
@media (max-width: 540px) {
    .bp-instrument { min-width: 260px; padding: 8px 10px 6px; }
    .bp-inst-row-primary .bp-inst-cell { min-width: 64px; }
    .bp-inst-val { font-size: 20px; }
    .bp-inst-row { gap: 14px; }
}
@media (max-width: 420px) {
    /* MAG cell first to drop in extreme-narrow */
    .bp-inst-cell-mag { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   CONVERGENCE PILL — top-of-bridge composite-risk readout
   Driven by bridge-convergence.js. Hidden by default; reveals only when
   compass mode is heading-up / course-up (= bridge actively engaged).
   ══════════════════════════════════════════════════════════════════ */
.bp-convergence {
    /* Positioned top-LEFT of the map, well clear of the status strip + toolbar.
       Was floating top-center under the strip and reading as a second row. */
    position: fixed;
    top: calc(96px + env(safe-area-inset-top, 0px));
    left: calc(78px + env(safe-area-inset-left, 0px)); /* clear toolbar (53) + 12 gap + 12 inset */
    z-index: 884;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 14px 5px;
    background: rgba(8,12,22,0.86);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: var(--bp-mono, 'DM Mono', monospace);
    color: rgba(220,228,245,0.92);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 280ms cubic-bezier(.4,0,.2,1), transform 280ms cubic-bezier(.4,0,.2,1);
}
.bp-convergence.bp-conv-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.bp-conv-lbl {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: rgba(220,228,245,0.55);
    text-transform: uppercase;
}
.bp-conv-val {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: rgba(255,255,255,0.96);
    line-height: 1;
}
.bp-conv-level {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(220,228,245,0.55);
}

/* Tier coloring: green < 40, amber 40-70, red > 70 */
.bp-convergence[data-tier="green"]  .bp-conv-val { color: rgba(110, 220, 154, 0.96); }
.bp-convergence[data-tier="green"]  .bp-conv-level { color: rgba(110, 220, 154, 0.78); }
.bp-convergence[data-tier="green"]              { border-color: rgba(110, 220, 154, 0.20); }

.bp-convergence[data-tier="amber"]  .bp-conv-val { color: rgba(248, 198, 122, 0.98); }
.bp-convergence[data-tier="amber"]  .bp-conv-level { color: rgba(248, 198, 122, 0.78); }
.bp-convergence[data-tier="amber"]              { border-color: rgba(248, 198, 122, 0.22); }

.bp-convergence[data-tier="red"]    .bp-conv-val { color: rgba(255, 122, 122, 0.98); }
.bp-convergence[data-tier="red"]    .bp-conv-level { color: rgba(255, 122, 122, 0.78); }
.bp-convergence[data-tier="red"]                { border-color: rgba(255, 122, 122, 0.28); }

@media (max-width: 540px) {
    .bp-convergence { gap: 8px; padding: 5px 11px 4px; }
    .bp-conv-val { font-size: 14px; }
    .bp-conv-lbl, .bp-conv-level { font-size: 8px; letter-spacing: 0.16em; }
}

/* ══════════════════════════════════════════════════════════════════
   FORECAST STRIP — 15-day NOAA GFS day-cards above instrument console
   Driven by bridge-forecast.js. Mounts on first GPS fix, refetches 1h.
   Glass panel matching .bp-instrument. Horizontal scroll on tight viewports.
   ══════════════════════════════════════════════════════════════════ */
.bp-forecast {
    /* COLLAPSED by default: only the slim 28px toggle handle is visible.
       User taps to expand into the full 15-day strip. Preference persisted
       in localStorage 'bp-forecast-open'. This stops the strip from
       crushing the map under a permanent 144px panel. */
    position: fixed;
    left: 50%;
    bottom: calc(20px + 110px); /* above instrument console */
    transform: translateX(-50%) translateY(8px);
    z-index: 883;
    width: min(96vw, 1280px);
    background: rgba(8,12,22,0.78);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: rgba(220,228,245,0.92);
    font-family: var(--bp-mono, 'DM Mono', monospace);
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 320ms cubic-bezier(.4,0,.2,1), transform 320ms cubic-bezier(.4,0,.2,1);
}
.bp-forecast.bp-fc-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
/* Toggle handle — always visible. Tap to expand body. */
.bp-fc-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 6px 14px;
    background: transparent;
    border: none;
    color: rgba(220,228,245,0.68);
    font-family: inherit;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 140ms;
}
.bp-fc-toggle:hover { color: rgba(255,255,255,0.96); }
.bp-fc-toggle-chevron {
    font-size: 11px;
    transition: transform 280ms cubic-bezier(.4,0,.2,1);
    transform-origin: center;
    transform: rotate(180deg); /* default: chevron points UP (= "tap to open") */
}
.bp-forecast.bp-fc-open .bp-fc-toggle-chevron { transform: rotate(0deg); /* points DOWN = "tap to close" */ }
/* Body collapsed by default; expanded when bp-fc-open */
.bp-fc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 360ms cubic-bezier(.4,0,.2,1);
}
.bp-forecast.bp-fc-open .bp-fc-body {
    max-height: 200px;
    padding: 0 12px 10px;
}
.bp-fc-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 0 4px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 8px;
}
.bp-fc-title {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: rgba(220,228,245,0.55);
    text-transform: uppercase;
}
.bp-fc-source {
    font-size: 9px;
    letter-spacing: 0.08em;
    color: rgba(220,228,245,0.38);
    text-transform: uppercase;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}
.bp-fc-status {
    font-size: 9px;
    letter-spacing: 0.12em;
    color: rgba(120,180,220,0.7);
    text-transform: uppercase;
}
.bp-fc-status.bp-fc-status-err { color: rgba(255,140,120,0.85); }
.bp-fc-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.18) transparent;
    padding: 2px 2px 4px;
    -webkit-overflow-scrolling: touch;
}
.bp-fc-strip::-webkit-scrollbar { height: 6px; }
.bp-fc-strip::-webkit-scrollbar-track { background: transparent; }
.bp-fc-strip::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.14);
    border-radius: 3px;
}
.bp-fc-card {
    flex: 0 0 76px;
    min-width: 76px;
    padding: 8px 6px 7px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(20,28,44,0.55) 0%, rgba(12,18,30,0.55) 100%);
    border: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.bp-fc-card:hover {
    background: linear-gradient(180deg, rgba(28,40,62,0.7) 0%, rgba(18,26,42,0.7) 100%);
    border-color: rgba(255,255,255,0.14);
    transform: translateY(-2px);
}
.bp-fc-today {
    border-color: rgba(var(--me-page-accent-rgb, 34,211,238), 0.55) !important;
    background: linear-gradient(180deg,
        rgba(var(--me-page-accent-rgb, 34,211,238), 0.10) 0%,
        rgba(var(--me-page-accent-rgb, 34,211,238), 0.04) 100%) !important;
}
.bp-fc-dow {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: rgba(220,228,245,0.65);
    text-transform: uppercase;
}
.bp-fc-today .bp-fc-dow {
    color: rgba(var(--me-page-accent-rgb, 34,211,238), 0.95);
    letter-spacing: 0.10em;
}
.bp-fc-wind {
    display: flex;
    align-items: center;
    gap: 3px;
    font-variant-numeric: tabular-nums;
}
.bp-fc-arrow {
    width: 12px;
    height: 12px;
    color: rgba(220,228,245,0.78);
    transition: transform 320ms cubic-bezier(.4,0,.2,1);
}
.bp-fc-wval {
    font-size: 16px;
    font-weight: 700;
    color: rgba(220,228,245,0.95);
    line-height: 1;
}
.bp-fc-wunit {
    font-size: 9px;
    color: rgba(220,228,245,0.5);
    letter-spacing: 0.04em;
}
.bp-fc-wave {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}
.bp-fc-wvval {
    font-size: 11px;
    font-weight: 600;
    color: rgba(180,210,240,0.85);
}
.bp-fc-wvunit {
    font-size: 8px;
    color: rgba(220,228,245,0.45);
    letter-spacing: 0.04em;
}
.bp-fc-temp {
    display: flex;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}
.bp-fc-th {
    font-size: 10px;
    color: rgba(255,200,150,0.85);
    font-weight: 600;
}
.bp-fc-tl {
    font-size: 10px;
    color: rgba(150,190,230,0.7);
    font-weight: 500;
}
.bp-fc-cond {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(220,228,245,0.42);
    text-transform: uppercase;
    margin-top: 1px;
}
/* Condition tints — subtle accent on the card border + cond label */
.bp-fc-card.cond-calm    .bp-fc-cond { color: rgba(140,200,255,0.62); }
.bp-fc-card.cond-breezy  .bp-fc-cond { color: rgba(140,220,200,0.70); }
.bp-fc-card.cond-windy   .bp-fc-cond { color: rgba(220,200,120,0.78); }
.bp-fc-card.cond-gale    .bp-fc-cond { color: rgba(255,170,100,0.85); }
.bp-fc-card.cond-storm   .bp-fc-cond { color: rgba(255,130,110,0.92); }
.bp-fc-card.cond-hurricane .bp-fc-cond { color: rgba(255,90,140,0.95); }
.bp-fc-card.cond-gale,
.bp-fc-card.cond-storm,
.bp-fc-card.cond-hurricane {
    border-color: currentColor;
}
.bp-fc-card.cond-gale     { border-left: 2px solid rgba(255,170,100,0.55); }
.bp-fc-card.cond-storm    { border-left: 2px solid rgba(255,130,110,0.7); }
.bp-fc-card.cond-hurricane { border-left: 2px solid rgba(255,90,140,0.85); }

/* Skeleton (loading shimmer) */
.bp-fc-skeleton {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.10) 50%,
        rgba(255,255,255,0.04) 100%);
    background-size: 200% 100%;
    animation: bp-fc-shimmer 1.6s linear infinite;
    height: 96px;
}
@keyframes bp-fc-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.bp-fc-empty {
    flex: 1;
    text-align: center;
    color: rgba(220,228,245,0.5);
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 24px 0;
}

/* Tight viewports: smaller cards */
@media (max-width: 720px) {
    .bp-forecast {
        bottom: calc(16px + 100px);
        width: 96vw;
        padding: 6px 8px 8px;
    }
    .bp-fc-card {
        flex: 0 0 64px;
        min-width: 64px;
        padding: 6px 4px 6px;
    }
    .bp-fc-wval { font-size: 14px; }
    .bp-fc-source { display: none; }
}
@media (max-width: 480px) {
    .bp-forecast { bottom: calc(14px + 92px); }
    .bp-fc-card { flex: 0 0 58px; min-width: 58px; }
    .bp-fc-wval { font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════════
   POWER PILL + DRAWER — battery mode controller (bottom-right)
   ══════════════════════════════════════════════════════════════════ */
.bp-power-pill {
    position: fixed;
    /* Inset from right edge enough that the rounded pill never reads as
       kissing the viewport boundary. 20px was visually clipping on Windows
       Chrome at narrower window widths. */
    right: calc(32px + env(safe-area-inset-right, 0px));
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 886;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 8px;
    background: rgba(8,12,22,0.86);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
    color: rgba(220,228,245,0.86);
    font-family: var(--bp-mono, 'DM Mono', monospace);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    box-shadow: 0 4px 14px rgba(0,0,0,0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    transition: border-color 140ms, background 140ms, transform 140ms;
}
.bp-power-pill:hover {
    border-color: rgba(255,255,255,0.20);
    background: rgba(14,22,36,0.92);
}
.bp-power-pill:active { transform: scale(0.96); }
body.earth-page-marine.bp-panel-open .bp-power-pill { right: 336px; }
/* Legacy power-dot — kept harmless in case any other code reaches for it */
.bp-power-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 8px currentColor;
    flex-shrink: 0;
}

/* ── Throttle-lever icon — marine-native power-mode visual ──
   3-notch slot with a sliding handle. Handle x position = mode.
   Color tint propagates from MODE_COLORS via inline fill on the handle. */
.bp-power-throttle {
    width: 28px;
    height: 12px;
    color: rgba(220,228,245,0.78);                /* slot + detent tint */
    flex-shrink: 0;
    overflow: visible;
}
.bp-power-throttle .bp-power-handle {
    transition: x 220ms cubic-bezier(.4,0,.2,1),
                fill 220ms ease;
    filter: drop-shadow(0 0 2px var(--bp-power-tint, currentColor));
}
.bp-power-pill[data-mode="race"] .bp-power-handle {
    animation: bp-power-handle-pulse 1.4s ease-in-out infinite;
}
@keyframes bp-power-handle-pulse {
    0%, 100% { filter: drop-shadow(0 0 2px var(--bp-power-tint, #ef4444)); }
    50%      { filter: drop-shadow(0 0 6px var(--bp-power-tint, #ef4444)); }
}

/* Drawer — slides up from the pill */
.bp-power-drawer {
    position: fixed;
    right: calc(32px + env(safe-area-inset-right, 0px));
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    z-index: 887;
    width: 280px;
    background: rgba(8,12,22,0.94);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: rgba(220,228,245,0.92);
    font-family: var(--bp-mono, 'DM Mono', monospace);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 200ms cubic-bezier(.4,0,.2,1), transform 200ms cubic-bezier(.4,0,.2,1);
}
.bp-power-drawer.bp-power-drawer-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
body.earth-page-marine.bp-panel-open .bp-power-drawer { right: 336px; }
.bp-power-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.20em;
    color: rgba(220,228,245,0.55);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.bp-power-close {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.85);
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.bp-power-close:hover { opacity: 1; }
.bp-power-close:active { transform: rotate(-180deg) scale(0.85); opacity: 0; }

.bp-power-modes {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
}
.bp-power-mode-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    color: rgba(220,228,245,0.85);
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 120ms, border-color 120ms;
}
.bp-power-mode-btn:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.14);
}
.bp-power-mode-btn[data-active="1"] {
    background: rgba(34,211,238,0.08);
    border-color: rgba(34,211,238,0.45);
}
.bp-power-mode-btn[data-active="1"][data-mode="race"] {
    background: rgba(245,158,11,0.08);
    border-color: rgba(245,158,11,0.45);
}
.bp-power-mode-name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: rgba(255,255,255,0.96);
}
.bp-power-mode-desc {
    font-size: 9px;
    color: rgba(220,228,245,0.55);
    letter-spacing: 0.04em;
    font-weight: 500;
}
.bp-power-rows {
    padding: 4px 10px 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.bp-power-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 4px;
    font-size: 10px;
    color: rgba(220,228,245,0.7);
}
.bp-power-row-key {
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(220,228,245,0.55);
    text-transform: uppercase;
    font-size: 9px;
}
.bp-power-row[data-ok="1"] .bp-power-row-val { color: rgba(34,211,238,0.92); }
.bp-power-foot {
    padding: 8px 14px 12px;
    font-size: 9px;
    color: rgba(220,228,245,0.45);
    line-height: 1.5;
    border-top: 1px solid rgba(255,255,255,0.04);
}

/* ══════════════════════════════════════════════════════════════════
   ANCHOR WATCH — pill (bottom-left) + drawer + alarm flash
   ══════════════════════════════════════════════════════════════════ */
.bp-anchor-pill {
    position: fixed;
    /* Bottom-right cluster: ANCHOR sits to the LEFT of the POWER pill
       (POWER is right:32 width ~93px), with a 12px gutter — so anchor's
       right edge = 32 + 93 + 12 = 137px from the viewport edge. Pulls the
       bottom-left zone open so the compass strip (scale + lat/lon) reads
       as the primary readout. */
    right: calc(137px + env(safe-area-inset-right, 0px));
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 886;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 8px;
    background: rgba(8,12,22,0.86);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
    color: rgba(220,228,245,0.86);
    font-family: var(--bp-mono, 'DM Mono', monospace);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    box-shadow: 0 4px 14px rgba(0,0,0,0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    transition: border-color 140ms, background 140ms, transform 140ms;
}
.bp-anchor-pill:hover {
    border-color: rgba(255,255,255,0.20);
    background: rgba(14,22,36,0.92);
}
.bp-anchor-pill:active { transform: scale(0.96); }
.bp-anchor-icon {
    font-size: 14px;
    line-height: 1;
    color: rgba(220,228,245,0.78);
}
.bp-anchor-pill[data-state="set"] .bp-anchor-icon {
    color: #22d3ee;
    text-shadow: 0 0 8px rgba(34,211,238,0.55);
}
/* Session-restored badge: 6s pulse on the pill. No drawer, no map covering. */
.bp-anchor-pill[data-restored="1"]::after {
    content: 'RESTORED';
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 6px;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: rgba(34,211,238,0.96);
    background: rgba(8,12,22,0.92);
    border: 1px solid rgba(34,211,238,0.45);
    border-radius: 4px;
    pointer-events: none;
    animation: bp-anchor-restored-pulse 6s ease-in-out forwards;
    white-space: nowrap;
}
@keyframes bp-anchor-restored-pulse {
    0%   { opacity: 0; transform: translate(-50%, 4px); }
    8%   { opacity: 1; transform: translate(-50%, 0); }
    85%  { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -4px); }
}
.bp-anchor-pill[data-state="dragging"] {
    border-color: rgba(239,68,68,0.6);
    background: rgba(36,10,12,0.92);
    color: #fff;
    animation: bp-anchor-pulse 0.9s ease-in-out infinite;
}
.bp-anchor-pill[data-state="dragging"] .bp-anchor-icon {
    color: #ef4444;
    text-shadow: 0 0 10px rgba(239,68,68,0.85);
}
@keyframes bp-anchor-pulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.55), 0 0 0 0 rgba(239,68,68,0.0); }
    50%      { box-shadow: 0 4px 14px rgba(0,0,0,0.55), 0 0 0 6px rgba(239,68,68,0.18); }
}

.bp-anchor-drawer {
    position: fixed;
    left: 20px;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    z-index: 887;
    width: 296px;
    background: rgba(8,12,22,0.94);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: rgba(220,228,245,0.92);
    font-family: var(--bp-mono, 'DM Mono', monospace);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 200ms cubic-bezier(.4,0,.2,1), transform 200ms cubic-bezier(.4,0,.2,1);
}
.bp-anchor-drawer.bp-anchor-drawer-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.bp-anchor-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.20em;
    color: rgba(220,228,245,0.55);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.bp-anchor-close {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.85);
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.bp-anchor-close:hover { opacity: 1; }

.bp-anchor-state {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 11px;
    letter-spacing: 0.10em;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(220,228,245,0.85);
}
.bp-anchor-state-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(220,228,245,0.35);
}
.bp-anchor-state[data-state="set"] .bp-anchor-state-dot { background: #22d3ee; box-shadow: 0 0 8px rgba(34,211,238,0.65); }
.bp-anchor-state[data-state="dragging"] .bp-anchor-state-dot {
    background: #ef4444;
    box-shadow: 0 0 10px rgba(239,68,68,0.85);
    animation: bp-power-pulse 0.7s ease-in-out infinite;
}
.bp-anchor-state[data-state="dragging"] .bp-anchor-state-text { color: #fca5a5; }

.bp-anchor-readout {
    display: flex;
    gap: 14px;
    padding: 0 14px 8px;
}
.bp-anchor-readout-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bp-anchor-readout-lbl {
    font-size: 8px;
    font-weight: 700;
    color: rgba(220,228,245,0.45);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.bp-anchor-readout-val {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: rgba(34,211,238,0.96);
    font-variant-numeric: tabular-nums;
}

.bp-anchor-ack {
    display: block;
    width: calc(100% - 28px);
    margin: 0 14px 10px;
    padding: 10px 12px;
    background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
    border: 1px solid rgba(239,68,68,0.6);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    cursor: pointer;
    text-transform: uppercase;
    transition: transform 120ms;
}
.bp-anchor-ack:active { transform: scale(0.97); }

.bp-anchor-radius {
    display: block;
    padding: 6px 14px 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.bp-anchor-radius-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}
.bp-anchor-radius-lbl {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: rgba(220,228,245,0.45);
    text-transform: uppercase;
}
.bp-anchor-radius-val {
    font-size: 12px;
    font-weight: 700;
    color: rgba(34,211,238,0.92);
    font-variant-numeric: tabular-nums;
}
.bp-anchor-radius input[type="range"] {
    width: 100%;
    accent-color: #22d3ee;
}

.bp-anchor-actions {
    padding: 0 14px 10px;
    display: flex;
    gap: 8px;
}
.bp-anchor-set, .bp-anchor-clear {
    flex: 1;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid rgba(34,211,238,0.45);
    border-radius: 8px;
    color: rgba(34,211,238,0.96);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    cursor: pointer;
    transition: background 120ms, border-color 120ms, transform 120ms;
}
.bp-anchor-set:hover { background: rgba(34,211,238,0.10); }
.bp-anchor-set:active { transform: scale(0.97); }
.bp-anchor-clear {
    border-color: rgba(255,255,255,0.18);
    color: rgba(220,228,245,0.85);
}
.bp-anchor-clear:hover { background: rgba(255,255,255,0.05); }
.bp-anchor-clear:active { transform: scale(0.97); }

.bp-anchor-foot {
    padding: 8px 14px 12px;
    font-size: 9px;
    color: rgba(220,228,245,0.45);
    line-height: 1.5;
    border-top: 1px solid rgba(255,255,255,0.04);
}

.bp-anchor-restore-banner {
    margin: 8px 14px 4px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(245,158,11,0.10);
    border: 1px solid rgba(245,158,11,0.45);
    color: rgba(254,243,199,0.96);
    font-size: 10px;
    line-height: 1.45;
}
.bp-anchor-restore-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}
.bp-anchor-restore-actions button {
    flex: 1;
    padding: 5px 8px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    color: rgba(220,228,245,0.95);
    font-family: inherit;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    cursor: pointer;
}
.bp-anchor-restore-actions button[data-confirm] {
    border-color: rgba(34,211,238,0.55);
    color: rgba(34,211,238,0.96);
}

/* Full-screen alarm flash (red veil) — opacity animated by JS rAF */
.bp-anchor-flash {
    position: fixed;
    inset: 0;
    z-index: 920;
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(239,68,68,0.10) 0%, rgba(239,68,68,0.55) 100%);
    box-shadow: inset 0 0 80px 12px rgba(239,68,68,0.55);
    opacity: 0;
    mix-blend-mode: screen;
}
.bp-anchor-flash.bp-anchor-flash-on {
    opacity: 0.20;
}

/* ══════════════════════════════════════════════════════════════════
   MAN OVERBOARD — large red button + ring + banner + map marker
   ══════════════════════════════════════════════════════════════════ */
.bp-mob-btn {
    position: fixed;
    /* Aligned with the power pill at right:32 so MOB sits directly above it
       on the bottom-right rail. 20px was clipping the red circle on Windows
       Chrome at narrower window widths. */
    right: calc(32px + env(safe-area-inset-right, 0px));
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    z-index: 885;
    width: 56px;
    height: 56px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
    border: 1px solid rgba(239,68,68,0.8);
    color: #fff;
    font-family: var(--bp-mono, 'DM Mono', monospace);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    box-shadow:
        0 6px 18px rgba(0,0,0,0.55),
        0 0 0 0 rgba(239,68,68,0.0),
        inset 0 1px 0 rgba(255,255,255,0.18);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 120ms, box-shadow 200ms;
}
body.earth-page-marine.bp-panel-open .bp-mob-btn { right: 336px; }
.bp-mob-btn:hover {
    box-shadow:
        0 8px 22px rgba(0,0,0,0.6),
        0 0 0 4px rgba(239,68,68,0.15),
        inset 0 1px 0 rgba(255,255,255,0.18);
}
.bp-mob-btn.bp-mob-pressing {
    transform: scale(0.96);
    box-shadow:
        0 4px 12px rgba(0,0,0,0.6),
        0 0 0 6px rgba(239,68,68,0.30),
        inset 0 1px 0 rgba(255,255,255,0.18);
}
.bp-mob-btn.bp-mob-armed {
    animation: bp-mob-armed 1.6s ease-in-out infinite;
}
@keyframes bp-mob-armed {
    0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,0.55), 0 0 0 0 rgba(239,68,68,0.0), inset 0 1px 0 rgba(255,255,255,0.18); }
    50%      { box-shadow: 0 6px 18px rgba(0,0,0,0.55), 0 0 0 8px rgba(239,68,68,0.22), inset 0 1px 0 rgba(255,255,255,0.18); }
}
.bp-mob-btn.bp-mob-no-fix {
    animation: bp-mob-shake 0.4s ease-in-out 3;
}
@keyframes bp-mob-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}
.bp-mob-label {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.18em;
    /* Stronger contrast so MOB reads at first glance — was getting lost
       on the bright red gradient. */
    text-shadow:
        0 1px 2px rgba(0,0,0,0.7),
        0 0 8px rgba(0,0,0,0.4);
}
.bp-mob-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.bp-mob-ring-track {
    fill: none;
    stroke: rgba(255,255,255,0.18);
    stroke-width: 3;
}
.bp-mob-ring-fill {
    fill: none;
    stroke: rgba(255,255,255,0.95);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 60ms linear;
}

.bp-mob-banner {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    z-index: 921;
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms cubic-bezier(.4,0,.2,1), transform 200ms cubic-bezier(.4,0,.2,1);
}
.bp-mob-banner.bp-mob-banner-on {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.bp-mob-banner-inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 10px;
    background: linear-gradient(180deg, rgba(185,28,28,0.96) 0%, rgba(127,16,16,0.96) 100%);
    border: 1px solid rgba(239,68,68,0.8);
    border-radius: 999px;
    color: #fff;
    font-family: var(--bp-mono, 'DM Mono', monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    box-shadow: 0 6px 18px rgba(0,0,0,0.5);
    font-variant-numeric: tabular-nums;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.bp-mob-banner-tag {
    background: #fff;
    color: #b91c1c;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
}
.bp-mob-banner-sep { opacity: 0.55; }
.bp-mob-banner-clear {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.30);
    color: #fff;
    padding: 4px 8px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.16em;
    cursor: pointer;
    margin-left: 4px;
}
.bp-mob-banner-clear:hover { background: rgba(255,255,255,0.18); }

@media (max-width: 540px) {
    .bp-mob-banner-inner { font-size: 10px; gap: 8px; padding: 7px 10px; }
}

/* MOB modal */
.bp-mob-modal {
    position: fixed;
    inset: 0;
    z-index: 940;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.bp-mob-modal-card {
    width: min(360px, calc(100vw - 32px));
    background: rgba(8,12,22,0.96);
    border: 1px solid rgba(239,68,68,0.45);
    border-radius: 12px;
    padding: 18px;
    color: rgba(220,228,245,0.92);
    font-family: var(--bp-mono, 'DM Mono', monospace);
    box-shadow: 0 16px 40px rgba(0,0,0,0.7);
}
.bp-mob-modal-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #fff;
    margin-bottom: 6px;
}
.bp-mob-modal-body {
    font-size: 11px;
    color: rgba(220,228,245,0.75);
    line-height: 1.55;
    margin-bottom: 14px;
}
.bp-mob-modal-actions {
    display: flex;
    gap: 8px;
}
.bp-mob-modal-cancel, .bp-mob-modal-confirm {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    cursor: pointer;
    transition: transform 120ms;
}
.bp-mob-modal-cancel {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(220,228,245,0.85);
}
.bp-mob-modal-confirm {
    background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
    border: 1px solid rgba(239,68,68,0.7);
    color: #fff;
}
.bp-mob-modal-cancel:active, .bp-mob-modal-confirm:active { transform: scale(0.97); }

/* Map pin (rendered via L.divIcon) */
.bp-mob-map-pin {
    position: relative;
    width: 16px; height: 16px;
}
.bp-mob-map-ring {
    position: absolute;
    inset: -8px;
    border: 2px solid rgba(239,68,68,0.85);
    border-radius: 50%;
    animation: bp-mob-map-pulse 1.4s ease-out infinite;
}
.bp-mob-map-dot {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid #fff;
    box-shadow: 0 0 12px rgba(239,68,68,0.8);
}
.bp-mob-map-lbl {
    position: absolute;
    top: 18px; left: 50%;
    transform: translateX(-50%);
    background: rgba(185,28,28,0.95);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--bp-mono, 'DM Mono', monospace);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.10em;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
@keyframes bp-mob-map-pulse {
    0%   { transform: scale(0.85); opacity: 0.85; }
    100% { transform: scale(2.2);  opacity: 0;    }
}

/* ════════════════════════════════════════════════════════════════
   UNIFIED INSTRUMENT-DECK GLASS  (2026-05-13)
   One liquid-glass recipe across nav, status strip, left tool rail,
   bottom compass strip, anchor + power pills. They read as paired
   glass shelves framing the chart — a ship-bridge console, not three
   pasted widgets. Uses the marine accent palette from liquid-glass.css
   (--lg-accent: #818cf8 indigo).
   ════════════════════════════════════════════════════════════════ */

/* Marine-scoped local tokens so each surface stays consistent. */
body.earth-page-marine {
    --bp-deck-bg: linear-gradient(180deg,
        rgba(12, 16, 28, 0.78) 0%,
        rgba(8, 11, 20, 0.72) 50%,
        rgba(6, 9, 17, 0.78) 100%);
    --bp-deck-bg-flat: rgba(10, 14, 24, 0.74);
    --bp-deck-blur: blur(24px) saturate(1.55);
    /* Strip height token — read by #bp-panel so the panel never docks behind
       the strip even if the strip's height changes. */
    --bp-strip-h: 36px;
    --bp-deck-border: 0.8px solid rgba(129, 140, 248, 0.18); /* indigo hairline */
    --bp-deck-border-strong: 0.8px solid rgba(129, 140, 248, 0.28);
    --bp-deck-spec-top: rgba(255, 255, 255, 0.10);
    --bp-deck-spec-side: rgba(255, 255, 255, 0.05);
    --bp-deck-shade-bot: rgba(0, 0, 0, 0.45);
    --bp-deck-glow: rgba(129, 140, 248, 0.12);
    --bp-deck-shadow:
        0 1px 0 0 var(--bp-deck-spec-top) inset,
        0 -1px 0 0 var(--bp-deck-shade-bot) inset,
        1px 0 0 0 var(--bp-deck-spec-side) inset,
        -1px 0 0 0 var(--bp-deck-spec-side) inset,
        0 16px 32px rgba(0, 0, 0, 0.45),
        0 2px 6px rgba(0, 0, 0, 0.25);
}

/* TOP DECK — nav inner bar (id=unified-nav-bar, the real <nav> element).
   Nav spans the full viewport width edge-to-edge, so left/right/top borders
   would render as orphan hairlines on the screen edges. Only keep the
   border-BOTTOM, which is the seam where the strip docks. */
body.earth-page-marine #unified-nav-bar,
body.earth-page-marine .unified-nav {
    background-image: var(--bp-deck-bg) !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: var(--bp-deck-border) !important;
    backdrop-filter: var(--bp-deck-blur) !important;
    -webkit-backdrop-filter: var(--bp-deck-blur) !important;
    box-shadow: var(--bp-deck-shadow) !important;
}

/* TOP DECK — status strip (chip row directly under nav) */
body.earth-page-marine #bp-status-strip {
    background-image: var(--bp-deck-bg) !important;
    background-color: transparent !important;
    /* Only the bottom seam — top is the nav's bottom, L/R borders read as
       orphan chrome at the deck's edge. Deck-frame hairlines already
       define the chart enclosure. */
    border: none !important;
    border-bottom: var(--bp-deck-border) !important;
    border-radius: 0 0 14px 14px !important;
    backdrop-filter: var(--bp-deck-blur) !important;
    -webkit-backdrop-filter: var(--bp-deck-blur) !important;
    box-shadow:
        0 1px 0 0 var(--bp-deck-spec-top) inset,
        0 -1px 0 0 var(--bp-deck-shade-bot) inset,
        0 12px 24px rgba(0, 0, 0, 0.38) !important;
}

/* LEFT RAIL — vertical tool dock gets the glow-up */
body.earth-page-marine #bp-toolbar {
    background-image: linear-gradient(180deg,
        rgba(14, 18, 32, 0.82) 0%,
        rgba(8, 11, 20, 0.74) 60%,
        rgba(6, 9, 17, 0.78) 100%) !important;
    background-color: transparent !important;
    border: var(--bp-deck-border) !important;
    backdrop-filter: var(--bp-deck-blur) !important;
    -webkit-backdrop-filter: var(--bp-deck-blur) !important;
    box-shadow: var(--bp-deck-shadow) !important;
    border-radius: 14px !important;
}

/* Left rail icon tiles — soft accent glow on hover/active */
body.earth-page-marine #bp-toolbar [class*="tool"]:hover,
body.earth-page-marine #bp-toolbar .bp-tool-btn:hover {
    background: var(--bp-deck-glow) !important;
    box-shadow: 0 0 12px var(--bp-deck-glow) inset !important;
}
body.earth-page-marine #bp-toolbar .bp-tool-btn.active,
body.earth-page-marine #bp-toolbar [aria-pressed="true"] {
    background: rgba(129, 140, 248, 0.20) !important;
    box-shadow:
        0 0 0 1px rgba(129, 140, 248, 0.4) inset,
        0 0 18px rgba(129, 140, 248, 0.25) !important;
}

/* BOTTOM DECK — full-width instrument console under the chart. Mirror of
   the top status strip: same indigo-hairline + glass tokens, but border-
   bottom is dropped (deck sits on viewport edge, mirror of strip kissing
   the nav) and only the top corners are rounded so the chart "ends" at
   the deck rather than the deck floating. Depth comes from above via a
   spec-top highlight at the deck's TOP edge (instead of bottom). */
body.earth-page-marine #bp-compass-strip {
    background-image: var(--bp-deck-bg) !important;
    background-color: transparent !important;
    /* Only the top seam — bottom is the viewport edge, L/R borders read
       as orphan chrome. Deck-frame hairlines along the viewport top +
       bottom already define the chart enclosure. */
    border: none !important;
    border-top: var(--bp-deck-border) !important;
    border-top-left-radius: 14px !important;
    border-top-right-radius: 14px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    backdrop-filter: var(--bp-deck-blur) !important;
    -webkit-backdrop-filter: var(--bp-deck-blur) !important;
    /* Flipped depth — spec highlight on TOP edge, shade on BOTTOM (inside),
       and shadow above the deck (lifting it off the chart from below). */
    box-shadow:
        0 1px 0 0 var(--bp-deck-spec-top) inset,
        0 -1px 0 0 var(--bp-deck-shade-bot) inset,
        0 -10px 24px rgba(0, 0, 0, 0.42),
        0 -2px 6px rgba(0, 0, 0, 0.25) !important;
}

/* BOTTOM DECK — anchor + power-mode pills get matching trim */
body.earth-page-marine .bp-anchor-pill,
body.earth-page-marine #bp-anchor-pill,
body.earth-page-marine .bp-power-pill,
body.earth-page-marine #bp-power-pill {
    background-image: var(--bp-deck-bg) !important;
    background-color: transparent !important;
    border: var(--bp-deck-border-strong) !important;
    backdrop-filter: var(--bp-deck-blur) !important;
    -webkit-backdrop-filter: var(--bp-deck-blur) !important;
    box-shadow:
        0 1px 0 0 var(--bp-deck-spec-top) inset,
        0 -1px 0 0 var(--bp-deck-shade-bot) inset,
        0 6px 16px rgba(0, 0, 0, 0.40),
        0 0 0 0 var(--bp-deck-glow) !important;
    transition: box-shadow 200ms var(--bp-ease, ease), border-color 200ms var(--bp-ease, ease);
}
body.earth-page-marine .bp-anchor-pill:hover,
body.earth-page-marine .bp-power-pill:hover {
    border-color: rgba(129, 140, 248, 0.45) !important;
    box-shadow:
        0 1px 0 0 var(--bp-deck-spec-top) inset,
        0 -1px 0 0 var(--bp-deck-shade-bot) inset,
        0 6px 16px rgba(0, 0, 0, 0.40),
        0 0 18px var(--bp-deck-glow) !important;
}

/* DECK FRAME — 1px indigo hairlines along viewport top + bottom edges.
   These define the instrument enclosure that the chart sits inside.
   Pure decoration, pointer-events: none, never intercept clicks. */
body.earth-page-marine::before,
body.earth-page-marine::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(129, 140, 248, 0.30) 18%,
        rgba(129, 140, 248, 0.55) 50%,
        rgba(129, 140, 248, 0.30) 82%,
        transparent 100%);
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 0 12px rgba(129, 140, 248, 0.25);
}
body.earth-page-marine::before { top: 0; }
body.earth-page-marine::after  { bottom: 0; }


/* ══════════════════════════════════════════════════════════════
   MODES — MOB + Anchor activated from the configure dropdown
   ══════════════════════════════════════════════════════════════ */

/* Hide the floating MOB button + floating Anchor pill — both are now
   activated from the strip's configure (⚙) popover instead. The bridge-mob
   and bridge-anchor modules still own all state, map markers, alarms,
   and notifications — we just retire the floating UI surfaces. */
body.earth-page-marine #bp-mob-btn,
body.earth-page-marine #bp-anchor-pill,
body.earth-page-marine .bp-anchor-drawer {
    display: none !important;
}

/* Popover "MODES" row — two large tap targets, MOB red-tinted, Anchor amber */
.bp-pop-row.bp-pop-modes {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}
.bp-pop-mode-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
}
.bp-pop-mode {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 12px;
    background: rgba(10, 14, 24, 0.6);
    border: 1px solid rgba(184, 168, 140, 0.18);
    border-radius: 8px;
    color: rgba(220, 230, 240, 0.92);
    font-family: var(--bp-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    cursor: pointer;
    text-align: left;
    transition: background 140ms, border-color 140ms, transform 140ms;
}
.bp-pop-mode:hover {
    background: rgba(18, 24, 38, 0.78);
    transform: translateY(-1px);
}
.bp-pop-mode-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.bp-pop-mode-hint {
    font-size: 9px;
    opacity: 0.62;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
/* MOB — red-tinted button */
.bp-pop-mode-mob {
    border-color: rgba(239, 68, 68, 0.42);
    background: rgba(40, 8, 12, 0.55);
}
.bp-pop-mode-mob:hover {
    border-color: rgba(239, 68, 68, 0.75);
    background: rgba(58, 10, 16, 0.78);
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.30);
}
.bp-pop-mode-mob .bp-pop-mode-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.7);
    display: inline-block; margin-right: 4px;
}
.bp-pop-mode-mob.armed {
    border-color: rgba(239, 68, 68, 0.95);
    background: rgba(80, 14, 18, 0.78);
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.45);
}
/* Anchor — amber */
.bp-pop-mode-anchor {
    border-color: rgba(250, 204, 21, 0.35);
}
.bp-pop-mode-anchor:hover {
    border-color: rgba(250, 204, 21, 0.65);
    box-shadow: 0 0 14px rgba(250, 204, 21, 0.22);
}
.bp-pop-mode-anchor .bp-pop-mode-icon {
    font-size: 14px;
    color: #facc15;
}
.bp-pop-mode-anchor.armed {
    border-color: rgba(250, 204, 21, 0.95);
    background: rgba(58, 44, 8, 0.72);
    box-shadow: 0 0 16px rgba(250, 204, 21, 0.32);
}

/* ── MODE CONFIRM MODALS — full-screen overlay, centered card ── */
.bp-mode-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: bp-mode-modal-in 180ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes bp-mode-modal-in { from { opacity: 0; } to { opacity: 1; } }
.bp-mode-modal-card {
    background: linear-gradient(180deg, rgba(20, 26, 40, 0.96) 0%, rgba(12, 16, 26, 0.96) 100%);
    border: 1px solid rgba(184, 168, 140, 0.28);
    border-radius: 12px;
    padding: 22px 24px 18px;
    max-width: 420px;
    width: calc(100vw - 40px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    color: rgba(230, 235, 245, 0.95);
    font-family: var(--bp-mono);
}
.bp-mode-modal-card-mob {
    border-color: rgba(239, 68, 68, 0.55);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2) inset, 0 18px 50px rgba(40, 0, 0, 0.65), 0 0 30px rgba(239, 68, 68, 0.25);
}
.bp-mode-modal-title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.18em;
    margin-bottom: 12px;
    color: #f7fafc;
}
.bp-mode-modal-card-mob .bp-mode-modal-title { color: #fca5a5; }
.bp-mode-modal-body {
    font-size: 12px;
    line-height: 1.55;
    opacity: 0.85;
    margin-bottom: 18px;
    letter-spacing: 0.02em;
}
.bp-mode-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.bp-mode-modal-actions button {
    padding: 9px 18px;
    border-radius: 8px;
    font-family: var(--bp-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    cursor: pointer;
    transition: background 140ms, transform 100ms;
}
.bp-mode-modal-cancel {
    background: transparent;
    border: 1px solid rgba(184, 168, 140, 0.30);
    color: rgba(220, 225, 235, 0.85);
}
.bp-mode-modal-cancel:hover { background: rgba(255, 255, 255, 0.05); }
.bp-mode-modal-confirm {
    background: rgba(129, 140, 248, 0.78);
    border: 1px solid rgba(129, 140, 248, 0.95);
    color: #fff;
}
.bp-mode-modal-confirm:hover { background: rgba(129, 140, 248, 1); transform: translateY(-1px); }
.bp-mode-modal-confirm-mob {
    background: #dc2626;
    border-color: #ef4444;
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.45);
}
.bp-mode-modal-confirm-mob:hover { background: #ef4444; }
.bp-mode-modal-confirm-anchor {
    background: #ca8a04;
    border-color: #facc15;
    color: #1c1917;
}
.bp-mode-modal-confirm-anchor:hover { background: #facc15; }

.bp-mode-radius-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(184, 168, 140, 0.12);
}
.bp-mode-radius-row label {
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    opacity: 0.65;
}
.bp-mode-radius-row input[type="range"] {
    accent-color: #facc15;
}
.bp-mode-radius-row span {
    font-size: 12px;
    font-weight: 700;
    color: #facc15;
    min-width: 56px;
    text-align: right;
}

/* ── IN-STRIP MODE BADGES — armed-state indicators ── */
#bp-mode-badges {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-left: auto;
    margin-right: 8px;
}
.bp-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 9px;
    border-radius: 11px;
    font-family: var(--bp-mono);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 140ms, box-shadow 140ms;
}
.bp-mode-badge:hover { transform: translateY(-1px); }
.bp-mode-badge[hidden] { display: none; }
.bp-mode-badge-mob {
    background: rgba(239, 68, 68, 0.18);
    border: 1px solid rgba(239, 68, 68, 0.65);
    color: #fca5a5;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.28);
    animation: bp-mob-pulse 1.6s ease-in-out infinite;
}
@keyframes bp-mob-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.25); }
    50%      { box-shadow: 0 0 22px rgba(239, 68, 68, 0.62); }
}
.bp-mode-badge-mob .bp-mode-badge-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 4px #ef4444;
}
.bp-mode-badge-anchor {
    background: rgba(250, 204, 21, 0.14);
    border: 1px solid rgba(250, 204, 21, 0.55);
    color: #fde68a;
}
.bp-mode-badge-anchor .bp-mode-badge-icon { color: #facc15; font-size: 11px; }

/* ══════════════════════════════════════════════════════════════
   POLISH PASS — surface grain, bezel hairlines, engraved type,
   tabular nums, tick-spinner. Marine-scoped only. Vintage high-tech
   submarine instrument feel without touching structural CSS.
   ══════════════════════════════════════════════════════════════ */

/* Surface grain — fractal noise SVG, 2.5% opacity, tiled. Lives on
   the deck/rail glass surfaces so they read as brushed acrylic, not
   flat compositor output. Inline dataURI = zero network, zero cache. */
body.earth-page-marine {
    --bp-deck-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.7  0 0 0 0 0.75  0 0 0 0 0.9  0 0 0 0.035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body.earth-page-marine #bp-status-strip,
body.earth-page-marine #bp-compass-strip,
body.earth-page-marine #bp-toolbar {
    background-image: var(--bp-deck-grain), var(--bp-deck-bg) !important;
    background-repeat: repeat, no-repeat !important;
    background-size: 180px 180px, cover !important;
}

/* Inner specular highlight — top edge gets a soft 2-stop white bloom so
   the glass catches "overhead light" the way ECDIS bezels do. Layers on
   top of the existing token-driven inset shadows. */
body.earth-page-marine #bp-status-strip,
body.earth-page-marine #bp-compass-strip {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 2px 4px rgba(255, 255, 255, 0.025),
        inset 0 -1px 0 rgba(0, 0, 0, 0.42),
        0 6px 22px rgba(0, 0, 0, 0.45) !important;
}
body.earth-page-marine #bp-compass-strip {
    /* Bottom deck — light from above means highlight on top edge, shade on
       bottom edge; shadow lifts the deck UP off the chart, not down. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 2px 4px rgba(255, 255, 255, 0.025),
        inset 0 -1px 0 rgba(0, 0, 0, 0.42),
        0 -8px 22px rgba(0, 0, 0, 0.45) !important;
}

/* Bezel hairlines — vertical 1px gradient-fade between tiles. Reads as
   a machined instrument divider. Apply to tile-to-tile + tool-to-tool. */
body.earth-page-marine .bp-tile + .bp-tile {
    position: relative;
}
body.earth-page-marine .bp-tile + .bp-tile::before {
    content: "";
    position: absolute;
    left: -8px;       /* sit in the gap, not on the tile */
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(184, 168, 140, 0.18) 25%,
        rgba(184, 168, 140, 0.28) 50%,
        rgba(184, 168, 140, 0.18) 75%,
        transparent 100%);
    pointer-events: none;
}

/* Left rail tool groups — same hairline treatment between adjacent tools
   (when stacked vertically the divider goes horizontal). */
body.earth-page-marine #bp-toolbar > * + * {
    position: relative;
}
body.earth-page-marine #bp-toolbar > * + *::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 18%;
    right: 18%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(184, 168, 140, 0.16) 30%,
        rgba(184, 168, 140, 0.22) 50%,
        rgba(184, 168, 140, 0.16) 70%,
        transparent 100%);
    pointer-events: none;
}

/* Engraved typography — dual text-shadow for that etched-into-metal look.
   Every uppercase label on the bridge picks this up. */
body.earth-page-marine .bp-tile-label,
body.earth-page-marine .bp-pop-label,
body.earth-page-marine .bp-compass-label,
body.earth-page-marine .bp-power-label,
body.earth-page-marine .bp-tile-value,
body.earth-page-marine #bp-scale-label,
body.earth-page-marine #bp-cursor,
body.earth-page-marine .me-marine-tab,
body.earth-page-marine .bp-mode-badge,
body.earth-page-marine .leaflet-control-velocity.bp-deck-wind {
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.55),
        0 -1px 0 rgba(255, 255, 255, 0.04);
}

/* Tabular nums — every numeric readout on the bridge gets fixed-width
   digits so values don't jitter horizontally when they tick. */
body.earth-page-marine .bp-tile-value,
body.earth-page-marine #bp-cursor,
body.earth-page-marine #bp-scale-label,
body.earth-page-marine .leaflet-control-velocity.bp-deck-wind,
body.earth-page-marine #bp-utc,
body.earth-page-marine .bp-mode-badge-dist,
body.earth-page-marine .bp-mode-radius-row span,
body.earth-page-marine .bp-anchor-radius-val {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Tick-spinner — when a value changes, a subtle 120ms vertical-flick
   animation. Triggered by adding .bp-tick to the element (instrumented
   in JS where we know the value is changing). Pure CSS keyframe so the
   GPU does the work — no JS in the render path. */
@keyframes bp-tick {
    0%   { transform: translateY(0); opacity: 0.62; }
    35%  { transform: translateY(-1px); opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}
body.earth-page-marine .bp-tile-value.bp-tick,
body.earth-page-marine #bp-cursor.bp-tick {
    animation: bp-tick 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Lacquer sweep — subtle diagonal highlight layered as a background-image
   stack rather than a pseudo. #bp-status-strip already uses ::after for
   the collapsed-state indicator bar so we can't claim ::after here.
   Order from front to back: grain (brushed-acrylic) → lacquer (curved
   bezel highlight) → deck-bg gradient. Tuning kept low so polish reads
   subliminally — instrument feels real, never theatrical. */
body.earth-page-marine #bp-status-strip,
body.earth-page-marine #bp-compass-strip {
    background-image:
        var(--bp-deck-grain),
        linear-gradient(105deg,
            transparent 0%,
            transparent 38%,
            rgba(255, 255, 255, 0.030) 50%,
            transparent 62%,
            transparent 100%),
        var(--bp-deck-bg) !important;
    background-repeat: repeat, no-repeat, no-repeat !important;
    background-size: 180px 180px, 100% 100%, cover !important;
}

/* ── Local weather + tides + home port (added 2026-05-24) ───────── */
.bp-loading { font-size: 10px; color: var(--bp-text-muted); padding: 4px 0; letter-spacing: 0.08em; }
.bp-local-wx, .bp-local-tides { font-size: 10px; color: var(--bp-text); }
.bp-local-wx .bp-loc-head, .bp-local-tides .bp-loc-head {
    font-size: 9px; color: var(--bp-accent); letter-spacing: 0.1em;
    text-transform: uppercase; padding: 3px 0 6px; font-weight: 600;
}
.bp-period {
    display: grid; grid-template-columns: 64px 1fr; gap: 6px;
    padding: 5px 0; border-top: 1px dotted rgba(34,211,238,0.12);
    line-height: 1.35;
}
.bp-period:first-of-type { border-top: none; }
.bp-period .bp-period-name {
    font-size: 9px; font-weight: 600; color: var(--bp-accent);
    letter-spacing: 0.08em; text-transform: uppercase;
}
.bp-period .bp-period-text { font-size: 10px; color: var(--bp-text); opacity: 0.92; }
.bp-tide-row {
    display: grid; grid-template-columns: 56px 28px 1fr 56px;
    gap: 6px; align-items: center;
    padding: 4px 0; border-top: 1px dotted rgba(34,211,238,0.12);
}
.bp-tide-row:first-of-type { border-top: none; }
.bp-tide-time { font-family: var(--font-mono,monospace); font-size: 10px; color: var(--bp-text-muted); }
.bp-tide-type {
    font-size: 8px; font-weight: 700; letter-spacing: 0.1em;
    padding: 2px 4px; border-radius: 2px; text-align: center;
}
.bp-tide-type.high { background: rgba(34,211,238,0.18); color: #22d3ee; }
.bp-tide-type.low  { background: rgba(245,158,11,0.18); color: #f59e0b; }
.bp-tide-bar { height: 6px; background: rgba(34,211,238,0.08); border-radius: 3px; position: relative; overflow: hidden; }
.bp-tide-bar > span {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, rgba(34,211,238,0.4), rgba(34,211,238,0.85));
    border-radius: 3px;
}
.bp-tide-h { font-family: var(--font-mono,monospace); font-size: 10px; color: var(--bp-text); text-align: right; }
.bp-loc-meta { font-size: 9px; color: var(--bp-text-muted); padding-top: 4px; letter-spacing: 0.04em; }
.bp-loc-meta .bp-set-home {
    background: rgba(34,211,238,0.08); border: 1px solid rgba(34,211,238,0.3);
    color: var(--bp-accent); padding: 3px 8px; border-radius: 2px;
    font-family: inherit; font-size: 9px; letter-spacing: 0.1em;
    cursor: pointer; margin-top: 6px; text-transform: uppercase;
}
.bp-loc-meta .bp-set-home:hover { background: rgba(34,211,238,0.18); }
.bp-loc-meta .bp-home-pinned { color: var(--bp-accent); font-weight: 600; }

/* Nearest-buoy pulse halo */
.vsl-nearest-buoy {
    pointer-events: none;
}
.vsl-nearest-buoy::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 28px; height: 28px; margin-left: -14px; margin-top: -14px;
    border-radius: 50%; border: 1.5px solid rgba(34,211,238,0.8);
    box-shadow: 0 0 12px rgba(34,211,238,0.7), inset 0 0 6px rgba(34,211,238,0.4);
    animation: bp-buoy-pulse 1.8s ease-out infinite;
}
@keyframes bp-buoy-pulse {
    0%   { transform: scale(0.6); opacity: 1; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* ─── Selected vessel rich-detail card (VSL tab) ─── */
.bp-ves-card {
    margin: 0 0 10px;
    padding: 10px 10px 8px;
    background: rgba(14,22,34,0.55);
    border: 1px solid var(--bp-border);
    border-radius: 3px;
}
.bp-ves-card-head {
    display: grid; grid-template-columns: 80px 1fr auto;
    gap: 8px; align-items: center; margin-bottom: 8px;
}
.bp-ves-sil { width: 80px; height: 32px; }
.bp-ves-sil svg { display: block; width: 80px; height: 32px; }
.bp-ves-id { min-width: 0; }
.bp-ves-name {
    font-family: var(--font-mono,monospace);
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bp-ves-flag {
    display: inline-block; font-size: 8px; font-weight: 700;
    letter-spacing: 0.1em; padding: 1px 4px;
    background: rgba(255,255,255,0.08); color: var(--bp-text-muted);
    border-radius: 2px; vertical-align: middle; margin-left: 4px;
}
.bp-ves-sub {
    font-size: 9px; color: var(--bp-text-muted); margin-top: 2px;
    letter-spacing: 0.04em;
}
.bp-ves-close {
    background: transparent; border: 1px solid var(--bp-border);
    color: var(--bp-text-muted); width: 20px; height: 20px;
    border-radius: 2px; cursor: pointer; padding: 0;
    font-size: 11px; line-height: 1;
}
.bp-ves-close:hover { color: var(--bp-text); border-color: var(--bp-text-muted); }
.bp-ves-stats {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 4px; margin-bottom: 6px;
}
.bp-ves-stat {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 6px 4px; border-radius: 2px; text-align: center;
}
.bp-ves-stat b {
    display: block; font-family: var(--font-mono,monospace);
    font-size: 14px; font-weight: 700; color: var(--bp-text);
    letter-spacing: 0.02em;
}
.bp-ves-stat span {
    display: block; font-size: 8px; color: var(--bp-text-muted);
    text-transform: uppercase; letter-spacing: 0.1em; margin-top: 2px;
}
.bp-ves-voyage {
    margin: 6px 0; padding: 6px 8px;
    background: rgba(255,255,255,0.025);
    border-left: 2px solid rgba(34,211,238,0.45);
    border-radius: 2px;
}
.bp-voy {
    font-size: 10px; color: var(--bp-text); margin: 2px 0;
    font-family: var(--font-mono,monospace);
}
.bp-voy span {
    display: inline-block; min-width: 30px;
    color: var(--bp-text-muted); font-size: 8px;
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-right: 4px;
}
.bp-ves-dims {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 3px 8px; margin: 6px 0; padding: 6px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.bp-dim {
    display: flex; justify-content: space-between;
    font-size: 9px; font-family: var(--font-mono,monospace);
}
.bp-dim span {
    color: var(--bp-text-muted); text-transform: uppercase;
    letter-spacing: 0.08em;
}
.bp-dim b { color: var(--bp-text); font-weight: 600; }
.bp-ves-links {
    display: flex; gap: 6px; margin-top: 6px;
    padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.06);
}
.bp-ves-links a {
    flex: 1; text-align: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--bp-border);
    color: var(--bp-text-muted); text-decoration: none;
    font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 5px 6px; border-radius: 2px;
    transition: color 140ms, border-color 140ms, background 140ms;
}
.bp-ves-links a:hover {
    color: var(--bp-accent);
    border-color: rgba(34,211,238,0.45);
    background: rgba(34,211,238,0.06);
}