/* Reedy's Rigs — i-Boating-style nautical chart look */

/* ============================================================================
 * 2026-05-05 — Bleed cover strip RESTORED.
 * Was present in v3-v5, regressed away at v6, never returned. This is the
 * canonical pre-regression version: matches topbar's own navy gradient,
 * sits behind it (z 1) so topbar content paints on top. Hidden on mobile
 * because phone view has display:none on .topbar anyway.
 * ============================================================================ */
@media (min-width: 741px) {
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 56px;
    background: linear-gradient(180deg, #0e1e30 0%, #0a1523 100%);
    border-bottom: 1px solid #1b2e44;
    z-index: 1; /* topbar itself is z-index 1100, content sits above this */
    pointer-events: none;
  }
}

:root {
  /* Chart palette — beige land, blue water, yellow accents (like i-Boating) */
  --land: #f4ead5;
  --land-dark: #e7d9b4;
  --water-shallow: #d4e8f5;
  --water-mid: #b8dbef;
  --water-deep: #8fc6e3;
  --chart-line: #2b5d8a;
  --chart-line-soft: #8aa8c2;
  --chart-yellow: #f6c23b;
  --chart-magenta: #c9418a;
  --chart-green: #4fa36b;

  /* UI chrome — dark panels so chart pops */
  --ink: #0b1b2b;
  --ink-mid: #1a2b3f;
  --ink-soft: #24374d;
  --ink-dim: #93a9c1;
  --text: #e6edf5;
  --text-soft: #b9c6d6;
  --accent: #f6c23b;
  --accent-hot: #ff8a48;
  --success: #4fe3a8;
  --warn: #ffcf6a;
  --danger: #ff6a6a;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow-card: 0 10px 32px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.25);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", Consolas, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html { overflow-x: hidden; }
body {
  font-family: var(--font);
  color: var(--text);
  background: #05101c;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
}
#app {
  display: grid;
  grid-template-columns: 340px 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    "top   top"
    "side  main";
  height: 100vh;
  transition: grid-template-columns 0.25s ease;
}

/* 2026-05-05 — On desktop, the topbar is taken OUT of the grid via
   position:fixed so it spans the full viewport regardless of how the grid
   computes its column widths. The grid's first row remains 56px (empty)
   so #sidebar and #main start below the fixed topbar. Mobile and iPad
   keep the grid-flow topbar (their rules below override this). */
@media (min-width: 1025px) {
  .topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 56px !important;
    z-index: var(--z-map-controls);
  }
}

/* v51: Desktop hamburger — collapse sidebar in place, map reflows. */
body.sidebar-collapsed #app,
html.sidebar-collapsed-pre #app {
  grid-template-columns: 0 1fr;
}
body.sidebar-collapsed #sidebar {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  border-right: 0 !important;
  overflow: hidden !important;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.2s;
}
/* Hide every child that might leak via its own positioning/overflow. */
body.sidebar-collapsed #sidebar * {
  visibility: hidden !important;
}
#sidebar {
  transition: width 0.2s ease;
}
/* Rotate the hamburger icon when collapsed, for a subtle affordance. */
body.sidebar-collapsed #toggleSidebar {
  background: #11223a;
  border-color: #2a4668;
}
#toggleSidebar {
  transition: background 0.15s, border-color 0.15s;
}

/* ---------- Top bar ---------- */
.topbar {
  grid-area: top;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px 0 64px; /* v63.9.97 PC fix: 64px left pad reserves room for the
                            top-left hamburger button (matches iPad layout) */
  background: linear-gradient(180deg, #0e1e30 0%, #0a1523 100%);
  border-bottom: 1px solid #1b2e44;
  z-index: var(--z-map-controls);
  position: relative; /* anchor for the absolutely-positioned #toggleSidebar */
}

/* 2026-05-05 — Topbar is position:fixed (see #app rule above), so it always
   spans the full viewport. No bleed gap possible. */

/* v63.9.97 — PC HAMBURGER FIX
   Brett reported the left-hand hamburger on PC was dead. Root cause: at 1366px
   viewport (common laptop size), the .top-actions flex strip overflowed past
   the right edge of the viewport, pushing #toggleSidebar to x≈1490 (off-screen).
   Fix: pin the hamburger to TOP-LEFT on every fine-pointer screen — same
   pattern as iPad. The button is now always reachable regardless of how many
   pills/buttons sit in .top-actions. */
#toggleSidebar {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  width: 44px;
  height: 38px;
  min-width: 44px;
  min-height: 38px;
  font-size: 20px;
  line-height: 1;
  padding: 0;
  z-index: var(--z-panel);
  /* v63_10n: match navy header — was bright yellow, clashed and looked like 2 hamburgers next to logo */
  background: #0e1e30;
  color: #f6c23b;
  border: 1px solid #1b2e44;
  border-radius: 8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
#toggleSidebar:hover { background: #142a44; border-color: #2a4668; }
#toggleSidebar:active { transform: translateY(-50%) scale(0.96); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand .logo {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 2px 6px rgba(80, 150, 255, 0.28));
  flex: 0 0 44px;
}
.brand .logo img {
  width: 44px; height: 44px; object-fit: contain; display: block;
}
.brand h1 {
  font-size: 15px; margin: 0;
  letter-spacing: 0.2px; color: var(--text);
}
.brand .sub {
  font-size: 11px; margin: 2px 0 0;
  color: var(--ink-dim); letter-spacing: 0.3px;
}
.top-actions { display: flex; align-items: center; gap: 10px; }

/* ==========================================================================
   2026-05-05 — DESKTOP TOPBAR LAYOUT (rebuilt from scratch).

   Why: previously this section had separate rules for 1025-1440px and
   1441-1700px, plus an `overflow-x: hidden` in bc-brand-fit.css that was
   clipping the Refresh button at any desktop width >1440px. Buttons were
   absolutely-positioned in some ranges and flex-flowed in others, making
   the layout fight itself at every viewport boundary.

   New approach (single rule for ALL desktops ≥1025px):
   • .topbar = flex container, no wrap, padding reserves a right zone for
     refresh + auth-slot which are absolutely positioned to that zone.
   • .top-actions = the rest of the flex strip, holds presets + drawer-btns,
     scrolls horizontally if it overflows (rare).
   • Brand pinned left, max-width capped so drawer buttons get room.
   • At narrower desktops (≤1440px), buttons get smaller padding/font.
     At wider desktops, full size. No buttons hidden — everything reachable.

   Mobile (≤740px) and iPad (741-1366px touch) rules below are unchanged.
   ========================================================================== */
@media (min-width: 1025px) {
  .topbar {
    position: relative;
    padding-right: 220px; /* reserves space for refresh + auth-slot */
  }
  .top-actions {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;  /* 2026-05-05 — push buttons to right, near refresh */
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-right: 8px;
  }
  .top-actions::-webkit-scrollbar { display: none; }
  .preset-switch, .drawer-btns { flex: 0 0 auto; }

  /* --- Refresh button: pinned absolute to the reserved right zone --- */
  #bcHardRefresh {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 200px;
    z-index: 90;
    flex: 0 0 auto;
  }
  /* If user is signed in, the chip is wider — pull refresh further left */
  .bc-auth-slot:has(.bc-user-chip:not([hidden])) ~ #bcHardRefresh,
  #bcHardRefresh.bc-rf-shifted {
    right: 170px;  /* was 130px — chip needed more room, refresh was clipping it */
  }

  /* --- Auth slot (Sign in / Sign up / user chip): pinned absolute --- */
  .bc-auth-slot {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 12px;
    z-index: 90;
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    align-items: center;
  }
  #bcSignUpBtn.bc-signup-btn {
    background: #f6c23b;
    color: #0a1523;
    border: 1px solid #d8a925;
    font-weight: 700;
  }
  #bcSignUpBtn.bc-signup-btn:hover { background: #ffd24a; }
  #bcSignInBtn.bc-signin-btn {
    background: transparent;
    color: #f6c23b;
    border: 1px solid #2a4668;
  }
  #bcSignInBtn.bc-signin-btn:hover { background: #142a44; }

  /* --- Brand: keep on one line, capped width, never wraps --- */
  .brand .sub { display: none; }
  .brand h1 .brand-accent { display: none; }
  .brand h1 {
    font-size: 16px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .brand {
    max-width: 320px;
    min-width: 220px;  /* was 0 — caused 'Reedy's Rigs' to truncate to 'Reedy's gs' */
    flex: 0 0 auto;    /* don't let flex shrink the brand below min-width */
  }
}

/* --- At narrower desktops (1025-1440), buttons need to be tighter to fit --- */
@media (min-width: 1025px) and (max-width: 1440px) {
  .drawer-btn {
    padding: 6px 8px;
    font-size: 11.5px;
    gap: 4px;
    min-height: 30px;
  }
  .drawer-btn .db-tx { font-size: 11px; }
  .drawer-btn .db-ic { font-size: 12px; }
  .preset-btn {
    padding: 6px 9px;
    font-size: 11.5px;
  }
  .drawer-btns { gap: 2px; }
}

/* Base-layer switcher (Chart / Satellite / Ocean) */
.base-switch {
  display: inline-flex;
  background: #0a1523;
  border: 1px solid #1b2e44;
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.base-btn {
  background: transparent;
  color: var(--text-soft);
  border: 0;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.3px;
}
.base-btn:hover { color: var(--text); background: #11223a; }
.base-btn.active {
  background: var(--accent);
  color: #0b1b2b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.ghost {
  background: transparent;
  border: 1px solid #1b2e44;
  color: var(--text); padding: 7px 11px; border-radius: 8px;
  font-size: 14px; cursor: pointer;
}
.ghost:hover { background: #11223a; }

/* ---------- Sidebar ---------- */
#sidebar {
  grid-area: side;
  background: #0a1523;
  border-right: 1px solid #1b2e44;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.filters { padding: 12px; border-bottom: 1px solid #1b2e44; }
#search {
  width: 100%;
  padding: 9px 11px;
  background: #11223a;
  border: 1px solid #1b2e44;
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  outline: none;
}
#search:focus { border-color: var(--accent); }
#search::placeholder { color: var(--ink-dim); }

.filter-block { margin-top: 12px; }
.filter-block > label {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-dim);
  margin-bottom: 6px;
  font-weight: 600;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  background: #11223a;
  color: var(--text-soft);
  border: 1px solid #1b2e44;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.chip:hover { background: #1a3050; color: var(--text); }
.chip.active {
  background: var(--accent);
  color: #0b1b2b;
  border-color: var(--accent);
  font-weight: 600;
}
#inSeasonBtn {
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: linear-gradient(90deg, #1a3050 0%, #11223a 100%);
}
#inSeasonBtn.active {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hot) 100%);
  color: #0b1b2b;
}

select {
  width: 100%;
  padding: 7px 9px;
  background: #11223a;
  border: 1px solid #1b2e44;
  color: var(--text);
  border-radius: 7px;
  font-size: 12.5px;
}
.toggle {
  display: flex; align-items: center; gap: 7px;
  margin: 5px 0; font-size: 12.5px; color: var(--text-soft);
  cursor: pointer; user-select: none;
}
.toggle input[type="checkbox"] { accent-color: var(--accent); }
.count { color: var(--ink-dim); font-size: 11.5px; margin: 12px 0 0; }

.mark-list {
  list-style: none; margin: 0; padding: 6px;
  flex: 1; overflow-y: auto;
}
.mark-list li {
  padding: 9px 10px;
  border-radius: 7px;
  cursor: pointer;
  border: 1px solid transparent;
  margin-bottom: 2px;
}
.mark-list li:hover {
  background: #11223a;
  border-color: #1b2e44;
}
.m-name { font-size: 13px; display: flex; align-items: center; gap: 7px; }
.m-meta { font-size: 11px; color: var(--ink-dim); margin-top: 2px; }
.pill {
  display: inline-block;
  background: #243a55;
  color: #d4e8f5;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.pill.ramp { background: #1d4e7a; color: #cfe8ff; }
.pill.reef { background: #7a4a1d; color: #ffe0c2; }
.pill.shell { background: #4a2d7a; color: #e0cfff; }

/* ---------- Main / map ---------- */
#mapWrap {
  grid-area: main;
  position: relative;
  overflow: hidden;
}
#map {
  width: 100%; height: 100%;
  background: var(--water-mid);  /* blue while tiles load */
}

/* Leaflet overrides — match chart colours */
.leaflet-container {
  font-family: var(--font);
  background: var(--water-mid);
}
.leaflet-popup-content-wrapper {
  background: #0f2035;
  color: var(--text);
  border: 1px solid #27415f;
  border-radius: 9px;
  box-shadow: var(--shadow-card);
}
.leaflet-popup-content { margin: 10px 12px; font-size: 12.5px; line-height: 1.45; }
.leaflet-popup-tip { background: #0f2035; border: 1px solid #27415f; }
.leaflet-popup-content a { color: var(--accent); }
.leaflet-control-zoom a {
  background: #0f2035;
  color: var(--text);
  border: 1px solid #27415f;
}
.leaflet-control-zoom a:hover { background: #1a3050; }
.leaflet-control-attribution {
  background: rgba(10, 21, 35, 0.85) !important;
  color: var(--ink-dim) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--text-soft) !important; }

/* Mark icons */
.mk { background: transparent; border: none; }

/* Nav icons — real IALA SVG symbols (rendered inline by app.js) */
.nav-icon {
  background: transparent;
  border: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.nav-icon svg { display: block; }

/* v64.1i (2026-05-07): parallel rule for beacon markers (split from nav-icon
   so they're not hidden by body.v27-hide-hazards / body.v27-z-lt12 CSS rules
   targeting .nav-icon — those were intentional for Hazards). Same drop-shadow
   polish as .nav-icon. */
.seamark-beacon {
  background: transparent;
  border: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.seamark-beacon svg { display: block; }

/* Small dot helpers for public ramps / piers (no IALA convention needed) */
.nav-dot { width: 10px; height: 10px; border-radius: 50%; }
.nav-dot.pubramp { background: #2fa8ff; border: 2px solid #fff; width: 12px; height: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.nav-dot.pier { background: #f6c23b; border: 2px solid #fff; width: 9px; height: 9px; box-shadow: 0 1px 3px rgba(0,0,0,0.5); }
/* Vwhater.11 — BOM weather station icon (teal circle with crosshair glyph) */
.nav-dot.bomstation {
  background: #0a6f8a; color: #fff; border: 2px solid #fff;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Channel line styling (handled inline now) */

/* ---------- Detail card (i-Boating-style info card) ---------- */
#detail {
  position: absolute;
  top: 12px; right: 12px;
  width: 360px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 80px);
  background: #0f2035;
  border: 1px solid #27415f;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  /* 2026-05-05: was z-index 600 — below drop-pin FAB (1180), causing bleed.
     Bumped to 1200 so the panel covers the drop-pin like every other overlay. */
  z-index: var(--z-panel);
  display: flex; flex-direction: column;
  overflow: hidden;
}
#detail.hidden { display: none; }
/* 2026-05-05: close X needs to sit above the hamburger menu (z-index 1100+)
   on mobile, where the hamburger is fixed top-right and was covering the X. */
.close {
  position: absolute; top: 8px; right: 8px;
  z-index: var(--z-panel);
  background: transparent;
  color: var(--text-soft);
  border: 0;
  width: 28px; height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  z-index: 10;
}
.close:hover { background: #1a3050; color: var(--text); }

.card-head {
  padding: 14px 16px 10px;
  background: linear-gradient(180deg, #14283e 0%, #0f2035 100%);
  border-bottom: 1px solid #1b2e44;
}
.card-badge {
  display: inline-block;
  background: var(--accent);
  color: #0b1b2b;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.card-head h2 {
  margin: 0;
  font-size: 17px;
  color: var(--text);
  letter-spacing: 0.2px;
}
.card-head .meta {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ink-dim);
}

.card-tabs {
  display: flex;
  gap: 0;
  background: #0a1523;
  border-bottom: 1px solid #1b2e44;
  overflow-x: auto;
  scrollbar-width: none;
}
.card-tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 1;
  background: transparent;
  color: var(--text-soft);
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.2px;
  min-width: 0;
}
.tab:hover { color: var(--text); background: #11223a; }
.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: #0f2035;
}

.card-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
}
.tab-body { display: none; }
.tab-body.active { display: block; }

.block { margin-bottom: 14px; }
.block h3 {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--ink-dim);
  margin: 0 0 6px;
  font-weight: 700;
}
.block p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-soft); }
.coords {
  font-family: var(--mono);
  font-size: 12px;
  background: #0a1523;
  color: var(--accent);
  padding: 4px 8px;
  border-radius: 5px;
  display: inline-block;
}
.species-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.species-tags span {
  background: #11223a;
  color: var(--text-soft);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  border: 1px solid #1b2e44;
}

/* Fishing tab — Vwhater.25 redesign (2026-04-24) */
/* ---------- Summary hero banner ---------- */
.fish-summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #0e2236 0%, #0a1523 100%);
  border: 1px solid #1f3452;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  overflow: hidden;
}
.fish-summary::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--accent);
}
.fish-summary .fs-ring {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background:
    conic-gradient(var(--accent) var(--pct, 75%), rgba(246,194,59,0.12) 0);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.fish-summary .fs-ring::after {
  content: "";
  position: absolute;
  inset: 5px;
  background: #0a1523;
  border-radius: 50%;
}
.fish-summary .fs-ring .fs-frac {
  position: relative;
  z-index: 1;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}
.fish-summary .fs-frac .sml { font-size: 10px; color: var(--text-soft); font-weight: 600; }
.fish-summary .fs-text { flex: 1 1 auto; min-width: 0; }
.fish-summary .fs-label {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 2px;
}
.fish-summary .fs-body {
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
}
.fish-summary .fs-body b { color: var(--text); font-weight: 700; }

/* Old .fs-stat kept for safety (not used by new markup) */
.fish-summary .fs-stat { display: none; }

/* ---------- Bite tiles (tide + moon) ---------- */
.fish-bite {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 16px;
}
.fish-bite .fb {
  background: #0a1523;
  border: 1px solid #1b2e44;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fish-bite .fb .lab {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-dim);
  font-weight: 700;
}
.fish-bite .fb .lab .fb-ic { font-size: 12px; filter: none; }
.fish-bite .fb .v {
  font-size: 14px;
  color: var(--text);
  margin-top: 4px;
  font-weight: 700;
  line-height: 1.2;
}
.fish-bite .fb .sub {
  font-size: 11px;
  color: var(--text-soft);
  margin-top: 3px;
  line-height: 1.35;
}

/* ---------- Section header ---------- */
.sp-section-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--ink-dim);
  margin: 4px 0 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sp-section-head .count-pill {
  background: #11223a;
  color: var(--accent);
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 10px;
  font-size: 10.5px;
  border: 1px solid rgba(246,194,59,0.35);
  letter-spacing: 0.5px;
}

/* ---------- Species cards ---------- */
.sp-card {
  position: relative;
  background: #0a1523;
  border: 1px solid #1b2e44;
  border-radius: 10px;
  padding: 12px 14px 12px 16px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 140ms ease, background 140ms ease;
}
.sp-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #1b2e44;
}
.sp-card.in-season::before { background: var(--accent); }
.sp-card.in-season {
  border-color: #2a3f5c;
  background: linear-gradient(180deg, rgba(246,194,59,0.045) 0%, #0a1523 60%);
}
.sp-card.shoulder::before { background: #6b8bd1; }
.sp-card.off-season { opacity: 0.78; }
.sp-card.off-season::before { background: #3a4a5e; }

.sp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.sp-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.1px;
}
.sp-name .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: #11223a;
  border-radius: 7px;
  font-size: 15px;
  flex-shrink: 0;
}
.sp-card.in-season .sp-name .ic {
  background: rgba(246,194,59,0.14);
}
.sp-season {
  font-size: 10px;
  color: var(--ink-dim);
  padding: 3px 8px;
  background: #11223a;
  border-radius: 999px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid #1b2e44;
}
.sp-season.hot {
  background: rgba(246,194,59,0.14);
  color: var(--accent);
  border-color: rgba(246,194,59,0.4);
}
.sp-season.shoulder-badge {
  background: rgba(107,139,209,0.16);
  color: #9fb9ea;
  border-color: rgba(107,139,209,0.4);
}

/* Species info grid — label above value, two columns */
.sp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  margin: 2px 0 0;
}
.sp-grid.one-col { grid-template-columns: 1fr; }
.sp-cell { min-width: 0; }
.sp-cell .k {
  font-size: 9.5px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 700;
  margin-bottom: 2px;
  display: block;
}
.sp-cell .v {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.4;
  font-weight: 500;
  word-wrap: break-word;
}
.sp-cell.wide { grid-column: 1 / -1; }

/* Legacy .sp-row kept for fallback cards with no species data */
.sp-row {
  font-size: 12px;
  color: var(--text-soft);
  margin: 4px 0;
  line-height: 1.45;
}
.sp-row b { color: var(--text); font-weight: 600; }

.sp-tip {
  margin-top: 10px;
  padding: 8px 10px 8px 11px;
  background: rgba(246,194,59,0.07);
  border: 1px solid rgba(246,194,59,0.22);
  border-radius: 8px;
  font-size: 11.5px;
  color: var(--text);
  line-height: 1.5;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.sp-tip .sp-tip-ic {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1.1;
  margin-top: 1px;
}
.sp-tip .sp-tip-body { flex: 1 1 auto; }
.sp-tip .sp-tip-body b { color: var(--accent); }

/* Narrow mobile — stack grid */
@media (max-width: 520px) {
  .sp-grid { grid-template-columns: 1fr; gap: 7px; }
  .fish-bite { grid-template-columns: 1fr; }
  .fish-summary { padding: 12px 14px; gap: 12px; }
  .fish-summary .fs-ring { width: 48px; height: 48px; }
}


.card-foot {
  padding: 10px 16px;
  border-top: 1px solid #1b2e44;
  background: #0a1523;
  font-size: 12px;
}
.card-foot a { color: var(--accent); text-decoration: none; }
.card-foot a:hover { text-decoration: underline; }

/* ---------- Marine mini-panel (bottom-left chip) ---------- */
.marine {
  position: absolute;
  left: 12px; bottom: 12px;
  width: 310px;
  background: #0f2035;
  border: 1px solid #27415f;
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  z-index: 500;
  overflow: hidden;
}
.marine-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 10px 12px;
  background: linear-gradient(180deg, #14283e 0%, #0f2035 100%);
  border-bottom: 1px solid #1b2e44;
}
.marine-head h3 { margin: 0; font-size: 13px; color: var(--text); }
.marine-head p { margin: 2px 0 0; font-size: 11px; color: var(--ink-dim); }
.marine-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #1b2e44;
}
.m-cell {
  background: #0f2035;
  padding: 8px 10px;
}
.m-cell.full { grid-column: 1 / -1; }
.m-cell .label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ink-dim);
  font-weight: 600;
}
.m-cell .val {
  font-size: 14px;
  color: var(--text);
  margin-top: 2px;
  display: flex; align-items: center; gap: 5px;
}
.m-cell .sub {
  font-size: 11px;
  color: var(--text-soft);
  margin-top: 2px;
}
.wind-arrow {
  display: inline-block;
  color: var(--accent);
  font-size: 14px;
  transition: transform 0.3s;
}
.m-loading { padding: 14px; color: var(--ink-dim); font-size: 12px; }
.mini {
  background: transparent;
  color: var(--text-soft);
  border: 1px solid #1b2e44;
  border-radius: 5px;
  width: 24px; height: 24px;
  cursor: pointer;
  font-size: 14px;
}
.mini:hover { background: #1a3050; color: var(--text); }

/* ---------- Legend ---------- */
.legend {
  position: absolute;
  right: 12px; bottom: 12px;
  background: #0f2035cc;
  backdrop-filter: blur(6px);
  border: 1px solid #27415f;
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 11px;
  z-index: 500;
  max-width: 200px;
}
.legend h4 {
  margin: 0 0 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-dim);
  font-weight: 700;
}
.legend .row {
  display: flex; align-items: center; gap: 7px;
  margin: 3px 0;
  color: var(--text-soft);
}
.legend hr {
  border: 0;
  border-top: 1px solid #1b2e44;
  margin: 8px 0 6px;
}
.legend .sym {
  width: 14px; height: 14px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #fff;
}
/* IALA lateral + safety marks (match the inline SVGs on the map) */
.legend .sym.port { width: 7px; height: 10px; background: #d32f2f; border: 1px solid #000; border-radius: 1px; }
.legend .sym.stbd {
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 11px solid #2e7d32;
  background: transparent;
  filter: drop-shadow(0 0 0.5px #000);
}
.legend .sym.safe {
  width: 11px; height: 11px; border-radius: 50%;
  background: #fff;
  border: 1px solid #000;
  background-image: linear-gradient(90deg, #d32f2f 25%, #fff 25%, #fff 75%, #d32f2f 75%);
}
.legend .sym.bcn {
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 11px solid #1a1a1a;
  background: transparent;
}
.legend .sym.by { width: 10px; height: 10px; background: #2e7d32; border-radius: 50%; border: 1px solid #000; }
.legend .sym.rk {
  background: transparent;
  color: #b71c1c;
  font-weight: 900;
  font-size: 13px;
}
.legend .sym.rk::before { content: "✳"; }
.legend .sym.wr { color: #b71c1c; font-size: 11px; background: transparent; border: 0; }
.legend .sym.wr::before { content: "⚓"; }

/* Depth sounding numeric labels */
.sounding {
  background: transparent;
  border: none;
  font: 600 10.5px var(--mono);
  color: #0b3d66;
  text-shadow: 0 0 2px rgba(255,255,255,0.9), 0 0 3px rgba(255,255,255,0.7);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: -0.3px;
}

/* 3-day daily forecast in Weather tab */
.dfc {
  background: #0a1523;
  border: 1px solid #1b2e44;
  border-radius: 8px;
  overflow: hidden;
}
.dfc-row {
  display: grid;
  grid-template-columns: 52px 1fr 68px 88px 58px;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid #1b2e44;
  font-size: 11.5px;
  color: var(--text-soft);
}
.dfc-row:last-child { border-bottom: 0; }
.dfc-day { font-weight: 700; color: var(--text); font-size: 12px; }
.dfc-wx { color: var(--text-soft); font-size: 11px; }
.dfc-temp { color: var(--text); font-weight: 600; text-align: right; }
.dfc-temp .low { color: var(--ink-dim); font-weight: 500; }
.dfc-wind { color: var(--accent); font-size: 11px; white-space: nowrap; }
.dfc-rain { color: var(--text-soft); text-align: right; font-size: 11px; }
@media (max-width: 420px) {
  .dfc-row {
    grid-template-columns: 42px 1fr 54px 70px;
    font-size: 10.5px;
  }
  .dfc-rain { display: none; }
}

/* Fishing-mark legend chips (mirror the divIcon style, small) */
.legend .sym.mk-ramp, .legend .sym.mk-art,
.legend .sym.mk-shell, .legend .sym.mk-reef {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  outline: 1px solid #0b1b2b;
  font-size: 9px;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.6);
  font-weight: 700;
}
.legend .sym.mk-ramp { background: #1e88e5; }
.legend .sym.mk-art { background: #ff6a00; }
.legend .sym.mk-shell { background: #9c27b0; }
.legend .sym.mk-reef { background: #ff9800; }
.legend .swatch {
  width: 18px; height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.legend .swatch.d1 { background: #8fb8d4; }
.legend .swatch.d2 { background: #4e8bb3; }
.legend .swatch.d3 { background: #2e6590; }
.legend .swatch.d4 { background: #1b3f63; }
.legend .swatch.d5 { background: #0a2440; }
.legend .warn {
  margin: 6px 0 0;
  font-size: 10px;
  color: var(--warn);
  line-height: 1.35;
}
.legend .warn a { color: var(--accent); }

/* ---------- Mobile (real narrow viewport) ----------
   Strategy: two-row topbar (brand + ghost toggle on row 1, scrollable
   preset pills on row 2). Hide desktop-only device toggle. Expand tap
   targets to 40px+. Marine panel starts as a pill, expands on tap. */
/* ==========================================================================
   iPad topbar fix (v63.9.90) — 741–1024px range
   TWO-ROW layout: row 1 = brand + hamburger (right-anchored); row 2 = full
   action pills, horizontally scrollable. This makes every action reachable:
   Sign in, Refresh, and all preset/drawer chips just swipe into view. The
   hamburger stays fixed top-right so the sidebar collapse still works.
   Desktop ≥ 1025px unchanged.
   ========================================================================== */
/* v63.9.93 — extended to cover iPad landscape orientations. Was capped
   at 1024px, so rotating iPad Air (1180), iPad Pro 11 (1194) or iPad Pro
   12.9 (1366) to landscape fell OUT of this rule and reverted to desktop
   layout — which pushed the hamburger off-screen. Narrowed to pointer:coarse
   + hover:none so real desktops (mice) stay on the desktop layout. */
@media (min-width: 741px) and (max-width: 1366px) and (pointer: coarse), (min-width: 741px) and (max-width: 1366px) and (hover: none) {
  .topbar {
    position: relative;
    flex-wrap: wrap;
    padding: 8px 12px 8px 64px; /* 64px left pad reserves room for hamburger */
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    row-gap: 8px;
    align-items: center;
    min-height: auto;
    height: auto !important;
    overflow: visible;
  }
  /* Allow the topbar grid row to grow to fit both rows */
  #app { grid-template-rows: auto 1fr !important; }
  .brand { flex: 1 1 auto; min-width: 0; gap: 10px; }
  .brand .sub { display: none; }
  .brand h1 .brand-accent { display: none; }
  .brand h1 { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .top-actions {
    order: 2;
    flex: 1 1 100%;
    min-width: 0;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .top-actions::-webkit-scrollbar { display: none; }
  /* v63.9.91: hamburger moved to TOP-LEFT — top-right was being covered by
     Safari's toolbar on some iPad setups (landscape PWA, split-view, stage
     manager). Yellow brand colour so it's visible against any basemap tint.
     Bigger hit target (48x44) and high contrast. */
  #toggleSidebar {
    position: absolute;
    top: calc(8px + env(safe-area-inset-top, 0px));
    left: 10px;
    width: 48px;
    height: 44px;
    min-width: 48px;
    min-height: 44px;
    font-size: 22px;
    line-height: 1;
    padding: 0;
    z-index: 100;
    background: #f6c23b;
    color: #0a1523;
    border: 2px solid #0a1523;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    font-weight: 700;
  }
  #toggleSidebar:active { transform: scale(0.96); }
  /* Pills and drawer buttons keep their natural sizes but don't flex-shrink */
  .preset-switch, .drawer-btns { flex: 0 0 auto; }
  /* v63.9.98 iPad fix — Sign-in + Refresh were getting pushed off-screen inside
     the horizontally-scrolling .top-actions strip. Brett couldn't see or reach
     them. Lift them out of flex flow and pin to the top-right of row 1 so they
     are ALWAYS visible regardless of how many pills are on row 2. */
  .bc-auth-slot {
    position: absolute;
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: 64px; /* leave room for the hamburger — wait, hamburger is left now */
    right: 10px;
    z-index: 90;
    flex: 0 0 auto;
  }
  #bcHardRefresh {
    position: absolute;
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: 100px; /* sits to the LEFT of the auth slot */
    z-index: 90;
    flex: 0 0 auto;
  }
  /* When signed-in the user-chip widens; nudge refresh further left to clear it */
  .bc-auth-slot:has(.bc-user-chip:not([hidden])) ~ #bcHardRefresh,
  #bcHardRefresh.bc-rf-shifted {
    right: 180px;
  }
  /* Reserve right-side space on the brand so its h1 doesn't slide under
     the absolute-positioned Sign-in / Refresh buttons. */
  .brand { padding-right: 200px; }
  /* Hide device preview toggle (desktop-only debug tool) on iPad */
  .device-toggle { display: none !important; }
}

/* v63.9.94 — narrowed from 780px to 740px so it no longer overlaps the
   iPad rule (741-1366px). At 741-780 (iPad mini portrait 768), both rules
   were matching and the mobile rule's right-anchored hamburger collided
   with the brand logo because the iPad rule's 64px left-padding reservation
   was being ignored. Phones are all ≤ 430px so shrinking this to 740 is safe. */
@media (max-width: 740px) {
  #app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "top" "main";
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }
  .topbar {
    flex-wrap: wrap;
    padding: 8px 10px 6px;
    gap: 6px;
    row-gap: 8px;
    align-items: center;
    min-height: auto;
    min-width: 0;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
  }
  .brand { flex: 1 1 auto; min-width: 0; gap: 8px; }
  .brand .logo { width: 34px; height: 34px; flex: 0 0 34px; }
  .brand .logo img { width: 34px; height: 34px; }
  .brand h1 {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .brand h1 .brand-accent { display: none; }
  .brand .sub { display: none; }
  .top-actions {
    order: 2;
    flex: 1 1 100%;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .top-actions::-webkit-scrollbar { display: none; }
  /* Sidebar toggle — anchor to top-right, always reachable, outside the
     scrollable top-actions row so it never scrolls off-screen. */
  #toggleSidebar {
    position: absolute;
    top: 8px;
    right: 10px;
    left: auto; /* reset desktop base rule's left:12px */
    transform: none; /* reset desktop base rule's translateY */
    min-width: 44px;
    min-height: 40px;
    width: auto;
    height: auto;
    font-size: 20px;
    padding: 6px 10px;
    z-index: 10;
  }
  .topbar { position: relative; }
  /* Leave space on the right of the brand for the toggle. */
  .brand { margin-right: 52px; }
  /* Hide device preview toggle on a real phone — you’re already on mobile. */
  .device-toggle,
  #app .device-toggle,
  #app[data-device="desktop"] .device-toggle,
  #app[data-device="mobile"] .device-toggle { display: none !important; }
  /* Row 2: preset + drawer pills, horizontally scrollable. Larger targets. */
  .preset-switch,
  .drawer-btns {
    flex: 0 0 auto;
    padding: 3px;
  }
  .preset-btn,
  .drawer-btn {
    padding: 9px 10px;
    font-size: 11.5px;
    min-height: 36px;
    line-height: 1.15;
  }
  /* Restore drawer button labels — they were hidden before; icons alone aren’t clear. */
  .drawer-btn .db-tx { display: inline; font-size: 11px; }
  .drawer-btn .db-ic { font-size: 13px; }
  .drawer-btn { padding: 9px 9px; gap: 4px; }

  #sidebar {
    position: fixed;
    top: 96px; left: 0; bottom: 0;
    width: 88%; max-width: 340px;
    transform: translateX(-105%);
    transition: transform 0.25s;
    z-index: var(--z-map-controls);
    box-shadow: 12px 0 32px rgba(0, 0, 0, 0.5);
  }
  #sidebar.open { transform: translateX(0); }

  #detail {
    top: auto;
    bottom: 12px;
    right: 8px;
    left: 8px;
    width: auto;
    max-height: 65vh;
  }

  /* Marine panel — collapsible pill on mobile. Collapsed by default so the
     map fills the screen; tap the header to expand. */
  .marine {
    top: auto;
    bottom: 8px;
    left: 8px;
    right: 8px;
    max-width: none;
    width: auto;
    font-size: 11px;
    max-height: 55vh;
    overflow-y: auto;
    border-radius: 10px;
  }
  .marine .marine-head { cursor: pointer; user-select: none; }
  .marine .marine-head h3 { font-size: 12.5px; }
  .marine .marine-head::after {
    content: " ▾";
    color: var(--accent);
    font-size: 14px;
    margin-left: auto;
    align-self: center;
  }
  .marine.mobile-open .marine-head::after { content: " ▴"; }
  .marine:not(.mobile-open) .marine-body { display: none; }
  .marine:not(.mobile-open) { padding-bottom: 6px; }

  /* Legend — collapsible pill on mobile so the map stays visible. */
  .legend {
    top: auto;
    bottom: 56px;
    right: 8px;
    left: auto;
    width: auto;
    max-width: 78vw;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    padding: 8px 12px;
    font-size: 11px;
    border-radius: 10px;
    z-index: 500;
  }
  .legend:not(.open) > *:not(h4:first-child) { display: none; }
  .legend:not(.open) > h4:first-child { margin: 0; cursor: pointer; }
  .legend:not(.open) > h4:first-child::after { content: " ▾"; color: var(--accent); }
  .legend.open > h4:first-child::after { content: " ▴"; color: var(--accent); }
  .legend > h4 { cursor: pointer; min-height: 28px; display: flex; align-items: center; }

  .base-switch .base-btn { padding: 5px 8px; font-size: 11px; }

  /* Larger tap targets for chips & toggles in the sidebar */
  #sidebar .chip { padding: 9px 12px; min-height: 36px; }
  #sidebar .toggle { padding: 6px 0; min-height: 36px; }
  #sidebar .toggle input[type="checkbox"] { width: 18px; height: 18px; }
}

/* Very narrow phones (iPhone SE / small Androids): icon-only drawer buttons
   so all action buttons fit without horizontal scroll. */
@media (max-width: 400px) {
  .drawer-btn .db-tx { display: none; }
  .drawer-btn { padding: 9px 10px; }
  #app[data-device="mobile"] .drawer-btn .db-tx { display: none; }
}

/* ============================================================================
   Preset switcher (Fish Now / Navigate / Structure / Plan Trip)
   ============================================================================ */
.preset-switch {
  display: inline-flex;
  background: #0a1523;
  border: 1px solid #1b2e44;
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
}
.preset-btn {
  background: transparent;
  color: var(--text-soft);
  border: 0;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.preset-btn:hover { color: var(--text); background: #11223a; }
.preset-btn.active {
  background: linear-gradient(180deg, #f6c23b 0%, #e6a820 100%);
  color: #0b1b2b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* ============================================================================
   Unified header pill groups — drawer buttons + device toggle
   Share the same visual language as .preset-switch / .preset-btn
   ============================================================================ */
.drawer-btns,
.device-toggle {
  display: inline-flex;
  background: #0a1523;
  border: 1px solid #1b2e44;
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
}
.drawer-btn,
.dev-btn {
  background: transparent;
  color: var(--text-soft);
  border: 0;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.2px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.drawer-btn:hover,
.dev-btn:hover { color: var(--text); background: #11223a; }
.drawer-btn.active,
.dev-btn.active {
  background: linear-gradient(180deg, #f6c23b 0%, #e6a820 100%);
  color: #0b1b2b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}
.drawer-btn .db-ic { font-size: 13px; line-height: 1; }
.dev-btn svg { display: block; }

/* Narrow viewport: drawer-btn sizing handled by main mobile block above */

/* ============================================================================
   Layer group (collapsible sections in the sidebar)
   ============================================================================ */
.layer-group {
  margin-top: 10px;
  border: 1px solid #1b2e44;
  border-radius: 8px;
  background: #0a1523;
  overflow: hidden;
}
.layer-group > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  background: #0d1a2b;
  border-bottom: 1px solid transparent;
  transition: background 0.15s;
  user-select: none;
}
.layer-group > summary::-webkit-details-marker { display: none; }
/* v64.1u (2026-05-08): chevron unified — › when closed, rotates 90° to
   point down when expanded. Smooth 0.2s rotation. Applies uniformly to
   FISH / MAP STYLE / LIVE CONDITIONS / ON THE MAP / MY ACCOUNT / TOOLS
   and any other .layer-group collapsible. Default open/closed states
   are unchanged — only the chevron glyph + rotation amount changed. */
.layer-group > summary::after {
  content: "›";
  margin-left: auto;
  color: var(--ink-dim);
  font-size: 11px;
  transition: transform 0.2s;
}
.layer-group[open] > summary::after { transform: rotate(90deg); }
.layer-group[open] > summary { border-bottom-color: #1b2e44; }
.layer-group > summary:hover { background: #122238; }
.lg-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.06);
}
.lg-dot.base    { background: #64b5f6; }
.lg-dot.overlay { background: #ba68c8; }
.lg-dot.fish    { background: #ff8a48; }
.lg-dot.live    { background: #4fe3a8; }
.lg-dot.community { background: #ffb84a; } /* Vwhater.10: community section, matches feed hero-spot glow */
.lg-hint {
  margin-left: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-dim);
  text-transform: none;
  letter-spacing: 0;
}
.lg-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lg-body .chips { gap: 5px; }
.lg-body .chips .chip {
  background: #132338;
  color: var(--text-soft);
  border: 1px solid #1e3452;
  padding: 6px 9px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 5px;
}
.lg-body .chips .chip:hover { background: #1b2e48; color: var(--text); }
.lg-body .chips .chip.active {
  background: var(--accent);
  color: #0b1b2b;
  border-color: var(--accent);
}
.lg-note {
  margin: 6px 2px 0;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--ink-dim);
}
.slider-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-soft);
  margin-top: 4px;
}
.slider-row input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

/* ELITE tag pill — shown next to premium chart layers */
.elite-tag {
  display: inline-block;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  background: linear-gradient(135deg, #c8a24c 0%, #e8c877 100%);
  color: #0b1b2b;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: 1px;
  text-transform: uppercase;
}
.chip.active .elite-tag {
  background: #0b1b2b;
  color: #e8c877;
}

/* Mobile: shrink presets */
@media (max-width: 700px) {
  .preset-btn { padding: 5px 8px; font-size: 10.5px; letter-spacing: 0; }
}

/* Wind vector markers (live data grid) */
.wv-icon { background: transparent; border: 0; }
.wind-vector {
  display: flex; flex-direction: column; align-items: center;
  pointer-events: auto; cursor: help;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.wv-arrow-wrap {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
}
.wv-svg { transform-origin: 50% 50%; }
.wv-label {
  margin-top: 2px;
  padding: 3px 9px;
  border-radius: 10px;
  background: rgba(11,27,43,0.92);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  color: #fff;
}
/* v63.9.22 — station name label under the speed so beacons are identifiable at a glance */
.wv-name {
  margin-top: 2px;
  padding: 2px 7px;
  border-radius: 8px;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(11,27,43,0.15);
  font-size: 11px;
  font-weight: 700;
  color: #0a1526;
  white-space: nowrap;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* v63.9.99-clean10 — legend tabs match the chart-overlay style
   The 3 legend sections (Safety marks, Chart lines, Fishing marks) are now
   <details class="layer-group legend-group"> so they inherit the gold-header
   tab style. The old .legend h4 + .legend hr styling is overridden inside
   .legend-group so the new summary header takes over cleanly. PC + mobile. */
.legend .legend-group { margin-top: 8px; }
.legend .legend-group .lg-body { padding: 8px 12px 10px; }
.legend .legend-group .row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; margin: 0;
}
.legend .legend-group .row + .row { border-top: 0; }
.legend hr { display: none; }
.legend > h4 { display: none; }
.lg-dot.safety { background: #ef4444; }   /* red — nav warning */
.lg-dot.depth  { background: #38bdf8; }   /* sky blue — water */
.lg-dot.marks  { background: #22c55e; }   /* green — fishing */

/* v63.9.99-clean7 — wind label declutter
   Brett reported the southern Victoria coast was unreadable: every wind
   station was stamping a 3-line pill (arrow + "13-26 kn N" + "Apollo Bay"),
   and at low zoom they all overlapped — Apollo Bay, Warrnambool, Portland,
   Loch Sport, Wilsons Prom, Gabo Island all collapsed into a black smear.
   Fix: at zoom <11 hide the speed and station-name labels on ALL platforms
   (was mobile-only). The arrow + colour still tells the wind story; tap
   the beacon for full details. At zoom <9 hide the icon entirely. */
body.v27-z-lt11 .wv-name,
body.v27-z-lt11 .wv-label { display: none !important; }
/* 2026-05-05: was hiding wind icons at zoom 0-9 — too aggressive,
   user couldn't see wind at the natural "whole bay" zoom of ~8-10.
   Tightened to 0-6 only (true continental zoom-out). */
body.v27-z-6 .wv-icon,
body.v27-z-5 .wv-icon,
body.v27-z-4 .wv-icon,
body.v27-z-3 .wv-icon,
body.v27-z-2 .wv-icon,
body.v27-z-1 .wv-icon,
body.v27-z-0 .wv-icon { display: none !important; }

/* Tide station markers — v47 fused pill (head is part of the pill, no gap) */
.ts-icon { background: transparent !important; border: 0 !important; }
.tide-station {
  display: inline-flex;
  align-items: center;      /* vertical-centre the head against the label */
  pointer-events: auto; cursor: help;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
  border-radius: 14px;
  background: rgba(11,27,43,0.94);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 2px 3px 2px 2px;  /* internal padding so head has breathing room */
  white-space: nowrap;
}
.ts-head {
  flex: 0 0 24px;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255,255,255,0.9);
  position: relative;
  z-index: 1;
}
.ts-glyph {
  color: #0b1b2b;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
.ts-label {
  padding: 1px 8px 1px 6px;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ts-name {
  font-size: 10px;
  font-weight: 700;
  color: #e8eef5;
  letter-spacing: 0.2px;
}
.ts-sub {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-top: 1px;
}
.tide-station[data-state="rising"] .ts-head { animation: tidePulseUp 2.4s ease-in-out infinite; }
.tide-station[data-state="falling"] .ts-head { animation: tidePulseDown 2.4s ease-in-out infinite; }
@keyframes tidePulseUp {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes tidePulseDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}

/* ============================================================================
   Slide-in drawers — Bag limits & Ramps
   Fixed overlay. Scrim darkens the rest; panel slides in from right.
   ============================================================================ */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.drawer[hidden] { display: none; }
.drawer.open { pointer-events: auto; }
.drawer-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 12, 24, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.drawer.open .drawer-scrim { opacity: 1; }

.drawer-panel {
  position: relative;
  width: min(520px, 100vw);
  height: 100vh;
  background: #0b1b2b;
  border-left: 1px solid #1b2e44;
  box-shadow: -12px 0 40px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.drawer.open .drawer-panel { transform: translateX(0); }

.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid #1b2e44;
  background: linear-gradient(180deg, #0d2238 0%, #0b1b2b 100%);
}
.drawer-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.2px;
}
.drawer-sub {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--text-soft);
  line-height: 1.45;
}
.drawer-sub a { color: #f6c23b; text-decoration: none; }
.drawer-sub a:hover { text-decoration: underline; }

.drawer-close {
  background: transparent;
  border: 1px solid #1b2e44;
  color: var(--text-soft);
  font-size: 20px;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
  transition: all 0.15s;
}
.drawer-close:hover { color: var(--text); background: #11223a; border-color: #274a6b; }

.drawer-search {
  padding: 10px 18px;
  border-bottom: 1px solid #14263b;
  background: #0a1523;
}
.drawer-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  background: #0b1b2b;
  border: 1px solid #1b2e44;
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.drawer-search input:focus { border-color: #f6c23b; }

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 18px 16px;
}
.drawer-body::-webkit-scrollbar { width: 8px; }
.drawer-body::-webkit-scrollbar-track { background: transparent; }
.drawer-body::-webkit-scrollbar-thumb { background: #1b2e44; border-radius: 4px; }

.drawer-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-top: 1px solid #1b2e44;
  font-size: 11px;
  color: var(--text-soft);
  background: #0a1523;
}
.drawer-foot a {
  color: #f6c23b;
  text-decoration: none;
  font-weight: 600;
  font-size: 11.5px;
}
.drawer-foot a:hover { text-decoration: underline; }

/* ----- Bag limits items ----- */
.bl-cat {
  margin: 12px 0 4px;
  padding: 6px 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #f6c23b;
  background: #0d2238;
  border: 1px solid #1b2e44;
  border-radius: 6px;
}
.bl-cat:first-child { margin-top: 4px; }
.bl-item {
  padding: 10px 2px 10px;
  border-bottom: 1px solid #122235;
}
.bl-item:last-child { border-bottom: none; }
.bl-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.bl-name a { color: var(--text); text-decoration: none; }
.bl-name a:hover { color: #f6c23b; }
.bl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 4px 0;
}
.bl-pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 999px;
  background: #0a1523;
  border: 1px solid #1b2e44;
  color: var(--text);
}
.bl-pill.size { color: #8fd4ff; border-color: #1d3c5a; }
.bl-pill.bag  { color: #f6c23b; border-color: #42371a; }
.bl-pill.sub  { color: #ff9c7a; border-color: #4a2a22; }
.bl-notes {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--text-soft);
  line-height: 1.5;
}

/* ----- Ramps items ----- */
.rp-item {
  padding: 12px 2px;
  border-bottom: 1px solid #122235;
}
.rp-item:last-child { border-bottom: none; }
.rp-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.rp-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.rp-rating {
  font-size: 10.5px;
  font-weight: 700;
  color: #f6c23b;
  white-space: nowrap;
}
.rp-area {
  font-size: 11.5px;
  color: var(--text-soft);
  margin-bottom: 6px;
}
.rp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px 10px;
  margin: 6px 0;
  font-size: 11.5px;
}
.rp-stat b { color: var(--text); font-weight: 600; }
.rp-stat span { color: var(--text-soft); }
.rp-wind {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0 4px;
}
.rp-wind-pill {
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: 0.3px;
}
.rp-wind-pill.good { background: rgba(52, 168, 83, 0.18); color: #7dd395; border: 1px solid rgba(52,168,83,0.4); }
.rp-wind-pill.bad  { background: rgba(234, 88, 46, 0.16); color: #ff9c7a; border: 1px solid rgba(234,88,46,0.38); }
.rp-notes {
  font-size: 11.5px;
  color: var(--text-soft);
  margin: 6px 0 0;
  line-height: 1.5;
}
.rp-best { margin: 5px 0 0; font-size: 11.5px; color: #c9e6ff; }
.rp-best b { color: #f6c23b; }
.rp-hazards { margin: 5px 0 0; font-size: 11.5px; color: #ffc49b; }
.rp-hazards b { color: #ff9c7a; }
.rp-src { margin: 6px 0 0; font-size: 10.5px; }
.rp-src a { color: var(--text-soft); text-decoration: none; }
.rp-src a:hover { color: #f6c23b; text-decoration: underline; }

/* ============================================================================
   Device preview — Mobile frame when #app has data-device="mobile"
   Wraps the whole app in a phone-sized frame with a bezel.
   ============================================================================ */
/* Mobile preview frame — DESKTOP-ONLY. On a real phone the viewport IS
   the phone, so we don't wrap it in a fake bezel. This block makes the
   preview faithfully mirror real-mobile layout (single column, scrollable
   preset row, collapsible marine pill, hidden device toggle).
   NOTE: only applies at ≥1025px so that iPads/large phones (768-1024px) get
   the real full-bleed mobile layout, not a tiny centered mockup. */
@media (min-width: 1025px) {
  #app[data-device="mobile"] {
    width: 412px;
    height: 868px;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0 auto;
    border: 10px solid #0a1523;
    border-radius: 32px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 2px #1b2e44;
    overflow: hidden;
    position: relative;
    /* CRITICAL: override the desktop 340px sidebar column so the map fills the frame */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "top" "main";
  }
  body:has(#app[data-device="mobile"]) {
    background: radial-gradient(1200px 600px at 50% 40%, #0f2438 0%, #06101c 75%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }

  /* Topbar inside the preview frame — two-row layout, scrollable pills */
  #app[data-device="mobile"] .topbar {
    position: relative;
    flex-wrap: wrap;
    padding: 8px 10px 6px;
    gap: 6px;
    row-gap: 8px;
    min-height: auto;
    overflow: hidden;
  }
  #app[data-device="mobile"] .brand { flex: 1 1 auto; min-width: 0; gap: 8px; margin-right: 52px; }
  #app[data-device="mobile"] .brand .logo { width: 34px; height: 34px; flex: 0 0 34px; }
  #app[data-device="mobile"] .brand .logo img { width: 34px; height: 34px; }
  #app[data-device="mobile"] .brand h1 {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  #app[data-device="mobile"] .brand h1 .brand-accent { display: none; }
  #app[data-device="mobile"] .brand .sub { display: none; }
  #app[data-device="mobile"] .top-actions {
    order: 2;
    flex: 1 1 100%;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  #app[data-device="mobile"] .top-actions::-webkit-scrollbar { display: none; }
  #app[data-device="mobile"] #toggleSidebar {
    position: absolute;
    top: 8px;
    right: 10px;
    min-width: 44px;
    min-height: 40px;
    font-size: 20px;
    padding: 6px 10px;
    z-index: 10;
  }
  #app[data-device="mobile"] .device-toggle { display: none !important; }
  #app[data-device="mobile"] .preset-switch,
  #app[data-device="mobile"] .drawer-btns {
    flex: 0 0 auto;
    padding: 3px;
  }
  #app[data-device="mobile"] .preset-btn,
  #app[data-device="mobile"] .drawer-btn {
    padding: 9px 12px;
    font-size: 12px;
    min-height: 36px;
    line-height: 1.15;
  }
  #app[data-device="mobile"] .drawer-btn .db-tx { display: inline; font-size: 11.5px; }
  #app[data-device="mobile"] .drawer-btn .db-ic { font-size: 14px; }

  /* Sidebar — slide-in from left inside the frame.
     2026-05-05: bottom changed from 0 to ~80px (bottom-nav height + safe-area)
     so the sidebar's footer buttons (Install BayCast / Share BayCast / My Marks /
     My Catches) don't cover the Map / Marks / Camera / More tabs. */
  #app[data-device="mobile"] #sidebar {
    position: absolute;
    top: 96px; left: 0;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    width: 88%; max-width: 340px;
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    z-index: var(--z-map-controls);
    box-shadow: 12px 0 32px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
  }
  #app[data-device="mobile"] #sidebar.open,
  #app[data-device="mobile"] #sidebar.mobile-open { transform: translateX(0); }

  /* Map fills remaining space */
  #app[data-device="mobile"] #mapWrap { grid-area: main; position: relative; }
  #app[data-device="mobile"] #map { width: 100%; height: 100%; }

  /* Detail panel — bottom sheet style inside frame */
  #app[data-device="mobile"] #detail {
    top: auto;
    bottom: 12px;
    right: 8px;
    left: 8px;
    width: auto;
    max-height: 65vh;
  }

  /* Marine panel — collapsible pill inside the frame too */
  #app[data-device="mobile"] .marine {
    top: auto;
    bottom: 8px;
    left: 8px;
    right: 8px;
    max-width: none;
    width: auto;
    font-size: 11px;
    max-height: 55vh;
    overflow-y: auto;
    border-radius: 10px;
  }
  #app[data-device="mobile"] .marine .marine-head { cursor: pointer; user-select: none; }
  #app[data-device="mobile"] .marine .marine-head h3 { font-size: 12.5px; }
  #app[data-device="mobile"] .marine .marine-head::after {
    content: " ▾";
    color: var(--accent);
    font-size: 14px;
    margin-left: auto;
    align-self: center;
  }
  #app[data-device="mobile"] .marine.mobile-open .marine-head::after { content: " ▴"; }
  #app[data-device="mobile"] .marine:not(.mobile-open) .marine-body { display: none; }
  #app[data-device="mobile"] .marine:not(.mobile-open) { padding-bottom: 6px; }

  /* Legend — collapsible pill */
  #app[data-device="mobile"] .legend {
    display: block;
    top: auto;
    bottom: 56px;
    right: 8px;
    left: auto;
    width: auto;
    max-width: 78vw;
    max-height: calc(100% - 220px);
    overflow-y: auto;
    padding: 8px 12px;
    font-size: 11px;
    border-radius: 10px;
    z-index: 500;
  }
  #app[data-device="mobile"] .legend:not(.open) > *:not(h4:first-child) { display: none; }
  #app[data-device="mobile"] .legend:not(.open) > h4:first-child { margin: 0; cursor: pointer; }
  #app[data-device="mobile"] .legend:not(.open) > h4:first-child::after { content: " ▾"; color: var(--accent); }
  #app[data-device="mobile"] .legend.open > h4:first-child::after { content: " ▴"; color: var(--accent); }
  #app[data-device="mobile"] .legend > h4 { cursor: pointer; min-height: 28px; display: flex; align-items: center; }

  /* Drawers full-width inside the frame */
  #app[data-device="mobile"] .drawer-panel { width: 100%; border-left: 0; }
}
/* Old mobile-preview rules removed — replaced by the comprehensive block above. */

/* ============================================================================
   Mobile responsive (drawer panels full-width on narrow viewport)
   Note: main mobile layout lives in the @media (max-width: 780px) block above.
   This block only handles drawer sizing.
   ============================================================================ */
@media (max-width: 780px) {
  .drawer-panel { width: 100vw; border-left: 0; }
  .drawer-head h2 { font-size: 15px; }
}

/* ===========================================================================
   Species overlay — legend + chip "overlay-on" state
   =========================================================================== */

/* Chip activated for overlay (distinct from .active used by single-select filter) */
.chip.overlay-on {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border-color: currentColor;
  box-shadow: 0 0 0 1px currentColor, 0 0 14px rgba(255,255,255,0.08);
  color: #fff;
  position: relative;
}
.chip.overlay-on::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  pointer-events: none;
  box-shadow: 0 0 18px rgba(255, 209, 102, 0.15);
}

/* Legend injected after #speciesChips */
.species-legend {
  margin: 8px 0 14px;
  padding: 10px 10px 8px;
  border-radius: 10px;
  background: rgba(12, 18, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
}
.species-legend .sl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a93a6;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.species-legend .sl-clear {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffcf6a;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.species-legend .sl-clear:hover { background: rgba(255, 207, 106, 0.08); }

.species-legend .sl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 2px;
  font-size: 13px;
  color: #e5e9f0;
}
.species-legend .sl-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}
.species-legend .sl-name {
  flex: 1;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.species-legend .sl-meta {
  font-size: 11px;
  color: #8a93a6;
  white-space: nowrap;
}
.species-legend .sl-x {
  background: transparent;
  border: none;
  color: #6b7280;
  font-size: 16px;
  line-height: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
}
.species-legend .sl-x:hover { background: rgba(255,255,255,0.08); color: #ff6b6b; }

/* Make sure overlay rings sit above base tiles but below marker icons */
.leaflet-overlay-pane svg .leaflet-interactive { pointer-events: auto; }

/* ============================================================================
   MOBILE + iPad PORTRAIT REBUILD (v20)
   Desktop (>=1025px) is completely untouched — all rules below are inside
   @media (max-width: 740px). This is the bottom-sheet / FAB layout.
   ========================================================================== */

/* By default hide mobile chrome on desktop */
#fabStack, #bottomSheet, #sheetScrim { display: none; }

/* v63.9.2 boot-flash fix: on mobile viewport the legacy bottomSheet must stay
   hidden from frame 1. v27 is the only mobile UI; the legacy Fish Now / presets
   sheet was flashing for ~400-800ms before body.v27-mobile was applied because
   v27MobileRebuild() waits for map tiles + marks. This rule fires on viewport
   width alone, so the legacy sheet never paints on phones. */
@media (max-width: 740px) {
  #bottomSheet, #sheetScrim, #fabStack { display: none !important; }
}

@media (max-width: 740px) {
  /* ---- Root layout: map takes whole viewport, chrome floats on top ---- */
  #app[data-device="desktop"] { grid-template-rows: 52px 1fr; grid-template-columns: 1fr; grid-template-areas: "top" "main"; }
  #app[data-device="mobile"] { grid-template-rows: 52px 1fr; grid-template-columns: 1fr; grid-template-areas: "top" "main"; }

  /* ---- Compact top bar (52px) ---- */
  .topbar { padding: 0 12px; min-height: 52px; }
  .brand h1 { font-size: 15px; line-height: 1.1; }
  .brand h1 .brand-accent { display: none; } /* just "Reedy's Rigs" */
  .brand .sub { display: none; }
  .brand { text-decoration: none; }
  .brand h1 { text-decoration: none; border: 0; }

  /* Hide old top-bar preset switch + drawer buttons (moved into sheet) */
  .top-actions .preset-switch { display: none; }
  .top-actions .drawer-btns   { display: none; }
  .top-actions #toggleSidebar { display: none; }

  /* ---- Sidebar hidden — its contents are cloned into the bottom sheet ---- */
  #sidebar { display: none !important; }

  /* ---- Map takes all remaining space ---- */
  #mapWrap { position: relative; width: 100vw; height: calc(100vh - 52px); height: calc(100dvh - 52px); }
  #map { width: 100%; height: 100%; }

  /* Leaflet native zoom control: hide on mobile, we use our FAB */
  .leaflet-control-zoom { display: none !important; }
  .leaflet-control-attribution { font-size: 9px; padding: 0 4px; }

  /* v63.9.101: Detail card on mobile is now a FULL-SCREEN takeover
     (matches Weather tab fullscreen behaviour). No more 15% map
     showing above. Safe-area inset baked in so the close button
     clears the iOS clock. */
  #detail.card {
    position: fixed; inset: 0; top: 0; right: 0; bottom: 0; left: 0;
    width: 100vw; max-width: 100vw;
    height: 100vh; height: 100dvh; max-height: 100dvh;
    padding-top: env(safe-area-inset-top);
    border-radius: 0; border: 0;
    box-shadow: none;
    z-index: var(--z-panel);
  }

  /* Marine panel: inline at bottom of sheet instead of floating over map */
  #marinePanel.marine { display: none; } /* we surface this via sheet summary */

  /* IALA legend: hidden from map, moved into full sheet under a "Legend" accordion */
  #mapWrap .legend { display: none !important; }

  /* ---- FAB stack: vertical, bottom-right, above sheet peek ---- */
  #fabStack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: fixed;
    right: 12px;
    bottom: calc(136px + env(safe-area-inset-bottom, 0px)); /* clears the peek sheet */
    z-index: var(--z-fab);
    transition: bottom 240ms cubic-bezier(.22,.61,.36,1);
  }
  #bottomSheet[data-snap="half"] ~ #fabStack,
  #app:has(#bottomSheet[data-snap="half"]) #fabStack { bottom: calc(52vh + 16px + env(safe-area-inset-bottom, 0px)); }
  #app:has(#bottomSheet[data-snap="full"]) #fabStack { bottom: calc(94vh + env(safe-area-inset-bottom, 0px)); opacity: 0; pointer-events: none; }
  .fab {
    width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(14, 30, 48, 0.94);
    color: #e8eef5;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 800; line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.06) inset;
    -webkit-tap-highlight-color: transparent;
    transition: transform 120ms ease, background 160ms ease;
  }
  .fab:active { transform: scale(0.92); }
  .fab.fab-primary { background: linear-gradient(180deg, #4a9bff 0%, #2e77d1 100%); color: #fff; border-color: rgba(255,255,255,0.35); }
  .fab.fab-primary.locating { animation: fabLocating 1.4s ease-in-out infinite; }
  .fab.fab-primary.tracking { background: linear-gradient(180deg, #35c26b 0%, #1d9a4f 100%); }
  .fab.fab-small { width: 40px; height: 40px; font-size: 22px; }
  @keyframes fabLocating {
    0%,100% { box-shadow: 0 0 0 0 rgba(74,155,255,0.55), 0 6px 16px rgba(0,0,0,0.45); }
    50% { box-shadow: 0 0 0 10px rgba(74,155,255,0), 0 6px 16px rgba(0,0,0,0.45); }
  }

  /* ---- Bottom sheet ---- */
  #bottomSheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, #0e1e30 0%, #0a1523 100%);
    border-top: 1px solid #1b2e44;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.45);
    z-index: var(--z-fab);
    transform: translateY(0);
    transition: height 260ms cubic-bezier(.22,.61,.36,1), transform 260ms cubic-bezier(.22,.61,.36,1);
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #bottomSheet[data-snap="peek"] { height: calc(130px + env(safe-area-inset-bottom, 0px)); }
  #bottomSheet[data-snap="half"] { height: 52vh; height: 52dvh; }
  #bottomSheet[data-snap="full"] { height: 94vh; height: 94dvh; }

  .sheet-grab {
    height: 18px;
    display: flex; align-items: center; justify-content: center;
    cursor: grab;
    flex-shrink: 0;
    touch-action: none;
  }
  .sheet-grab:active { cursor: grabbing; }
  .sheet-handle {
    display: block;
    width: 44px; height: 5px;
    border-radius: 3px;
    background: rgba(255,255,255,0.22);
  }

  .sheet-peek {
    padding: 2px 12px 10px;
    flex-shrink: 0;
  }
  .sheet-peek-row {
    display: flex; align-items: center; gap: 8px;
  }
  .sheet-presets {
    display: flex; gap: 6px;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
    padding: 2px 0 4px;
    width: 100%;
  }
  .sheet-presets::-webkit-scrollbar { display: none; }
  .sp-btn {
    flex: 0 0 auto;
    padding: 9px 14px;
    min-height: 38px;
    border-radius: 10px;
    border: 1px solid #1b2e44;
    background: #0a1523;
    color: #b8c4d3;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    transition: background 140ms, color 140ms, border-color 140ms;
  }
  .sp-btn.active {
    background: var(--accent); color: #0b1b2b;
    border-color: var(--accent);
  }
  .sp-btn:active { transform: scale(0.96); }

  .sheet-summary {
    margin-top: 8px;
    gap: 10px;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .ss-item {
    display: flex; flex-direction: column; gap: 1px;
    flex: 1 1 0; min-width: 0;
  }
  .ss-k {
    font-size: 9.5px; letter-spacing: 0.6px; text-transform: uppercase;
    color: var(--ink-dim);
    font-weight: 700;
  }
  .ss-v {
    font-size: 13px; font-weight: 800;
    color: #e8eef5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ss-expand {
    flex: 0 0 auto;
    padding: 8px 12px;
    min-height: 36px;
    border-radius: 10px;
    background: rgba(246,194,59,0.12);
    color: var(--accent);
    border: 1px solid rgba(246,194,59,0.3);
    font-size: 12px; font-weight: 800;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* ---- Sheet body (scroll region, revealed at half/full) ---- */
  .sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 4px 14px 20px;
  }
  #bottomSheet[data-snap="peek"] .sheet-body { display: none; }

  /* Cloned sidebar inside sheet — restyle for touch */
  .sheet-body .filters { padding: 0; border: 0; }
  .sheet-body #search {
    width: 100%;
    min-height: 48px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #0a1523;
    border: 1px solid #1b2e44;
    color: var(--text);
    font-size: 16px; /* 16px prevents iOS zoom on focus */
    margin-bottom: 14px;
  }
  .sheet-body .filter-block { margin-bottom: 14px; }
  .sheet-body .filter-block > label {
    display: block;
    font-size: 10.5px; letter-spacing: 0.8px; text-transform: uppercase;
    color: var(--ink-dim); font-weight: 800;
    margin-bottom: 8px;
  }
  .sheet-body .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .sheet-body .chip {
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid #1b2e44;
    background: #0a1523;
    color: #b8c4d3;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .sheet-body .chip.active {
    background: var(--accent); color: #0b1b2b; border-color: var(--accent);
  }
  .sheet-body .chip.overlay-on {
    color: #0b1b2b;
  }
  .sheet-body #areaFilter {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    background: #0a1523; border: 1px solid #1b2e44;
    color: var(--text);
    border-radius: 10px;
    font-size: 15px;
  }
  .sheet-body details.layer-group {
    margin-top: 10px;
    border-top: 1px solid #1b2e44;
    padding-top: 10px;
  }
  .sheet-body details.layer-group > summary {
    min-height: 44px;
    padding: 8px 0;
    font-size: 14px; font-weight: 700;
  }
  .sheet-body .toggle {
    display: flex; align-items: center; gap: 10px;
    min-height: 44px;
    padding: 4px 0;
    font-size: 14px;
  }
  .sheet-body .toggle input[type=checkbox] { width: 22px; height: 22px; }
  .sheet-body .mark-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
  }
  .sheet-body .mark-list li {
    padding: 12px 4px;
    border-top: 1px solid #1b2e44;
    min-height: 56px;
    cursor: pointer;
  }
  .sheet-body .mark-list li .m-name { font-size: 14px; font-weight: 700; }
  .sheet-body .mark-list li .m-meta { font-size: 12px; color: var(--ink-dim); margin-top: 3px; }

  /* Species legend inside sheet */
  .sheet-body .species-legend { margin-top: 14px; }

  /* Drawer panels (Bag limits / Ramps) — full-screen on mobile */
  .drawer-panel {
    width: 100vw !important; max-width: 100vw !important;
    height: 100vh; height: 100dvh;
    right: 0 !important;
  }

  /* Scrim behind full sheet */
  .sheet-scrim {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: var(--z-fab);
    opacity: 0;
    transition: opacity 220ms ease;
    pointer-events: none;
  }
  .sheet-scrim.visible { opacity: 1; pointer-events: auto; }

  /* Cluster styling: inherit our brand navy + accent instead of default green/blue */
  .marker-cluster-small, .marker-cluster-medium, .marker-cluster-large {
    background: rgba(14, 30, 48, 0.65);
  }
  .marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div {
    background: linear-gradient(180deg, #4a9bff 0%, #2e77d1 100%);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    border: 2px solid #0e1e30;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }
}

/* iPad portrait (768-1024): same pattern as phone but larger type / wider snap */
@media (min-width: 768px) and (max-width: 740px) and (orientation: portrait) {
  #bottomSheet[data-snap="peek"] { height: calc(148px + env(safe-area-inset-bottom, 0px)); }
  #bottomSheet[data-snap="half"] { height: 48vh; }
  .sp-btn { font-size: 14px; padding: 11px 18px; min-height: 44px; }
  .ss-v { font-size: 15px; }
  .fab { width: 54px; height: 54px; font-size: 22px; }
  .fab.fab-small { width: 46px; height: 46px; }
  .sheet-body .chip { font-size: 14px; padding: 10px 16px; min-height: 44px; }
}

/* Very small phones (SE 375x667) */
@media (max-width: 400px) {
  .brand h1 { font-size: 14px; }
  .sp-btn { padding: 8px 12px; font-size: 12.5px; }
  .ss-k { font-size: 9px; }
  .ss-v { font-size: 12.5px; }
  #fabStack { right: 10px; }
}

/* ============================================================================
   MARKER CLUSTER — Reedy's brand styling (v20)
   Overrides the default green/orange markercluster palette with our navy+blue.
   ============================================================================ */
.marker-cluster,
.leaflet-marker-icon.mc-cluster,
.mc-cluster {
  background: transparent !important;
}
.mc-cluster .mc-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  box-shadow:
    0 0 0 4px rgba(74, 155, 255, 0.18),
    0 2px 10px rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(255,255,255,0.85);
  background: linear-gradient(145deg, #4a9bff 0%, #2e77d1 100%);
  transition: transform 120ms ease-out;
}
.mc-cluster:hover .mc-inner {
  transform: scale(1.08);
}
.mc-cluster .mc-inner.mc-sm {
  background: linear-gradient(145deg, #5ca8ff 0%, #3b85de 100%);
  font-size: 12px;
}
.mc-cluster .mc-inner.mc-md {
  background: linear-gradient(145deg, #4a9bff 0%, #2e77d1 100%);
  font-size: 13px;
}
.mc-cluster .mc-inner.mc-lg {
  background: linear-gradient(145deg, #1f5ca8 0%, #0e1e30 100%);
  box-shadow:
    0 0 0 5px rgba(74, 155, 255, 0.28),
    0 3px 14px rgba(0, 0, 0, 0.45);
  font-size: 14px;
}
/* Hide the default markercluster spans that pages older Leaflet versions show */
.mc-cluster > div:not(.mc-inner) { display: none !important; }
.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
  transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}

/* ============================================================================
   FAB toast — appears briefly when cycling base maps or confirming actions
   ============================================================================ */
.fab-toast {
  position: fixed;
  right: 78px;
  /* Vwhater.10: sit clear above the 67px mobile tab bar + safe area */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 150px);
  background: rgba(14, 30, 48, 0.95);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  border: 1px solid rgba(74, 155, 255, 0.35);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 180ms ease-out, transform 180ms ease-out;
  pointer-events: none;
  z-index: var(--z-map-controls);
  white-space: nowrap;
}
.fab-toast.show {
  opacity: 1;
  transform: translateX(0);
}
/* Only show toast on mobile/tablet */
@media (min-width: 1025px) {
  .fab-toast { display: none !important; }
}

/* Filters expand button — make the whole thing visually weightier when sheet
   is open (arrow flips via JS, we style the button to look "active"). */
#app[data-device="mobile"] #bottomSheet[data-snap="full"] #ssExpand,
#app[data-device="mobile"] #bottomSheet[data-snap="half"] #ssExpand {
  background: rgba(74, 155, 255, 0.15);
  border-color: rgba(74, 155, 255, 0.5);
  color: #4a9bff;
}

/* ==========================================================================
   DROP PIN + GPS CONVERTER (v21)
   ========================================================================== */

/* Desktop toolbar button */
#dpToggleDesktop.dp-toggle {
  position: relative;
}
#dpToggleDesktop.dp-toggle.active {
  background: #1e6fe0;
  color: #fff;
  border-color: #1e6fe0;
  box-shadow: 0 0 0 2px rgba(30,111,224,0.25);
}
#dpToggleDesktop.dp-toggle.active .db-ic,
#dpToggleDesktop.dp-toggle.active .db-tx { color: #fff; }

/* Mobile FAB drop-pin button */
#fabDropPin.active {
  background: #1e6fe0;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(30,111,224,0.3), 0 2px 8px rgba(0,0,0,0.25);
}

/* Cursor affordance when drop-pin mode active */
body.drop-pin-mode .leaflet-container { cursor: crosshair !important; }
body.drop-pin-mode .leaflet-interactive { cursor: crosshair !important; }

/* Drop pin marker (pre-save, pulsing) */
.drop-pin-icon { background: transparent; border: 0; }
.dp-pin {
  position: relative;
  width: 26px; height: 34px;
}
.dp-pin .dp-dot {
  position: absolute; top: 4px; left: 50%;
  width: 18px; height: 18px; margin-left: -9px;
  background: #ff3b30;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  z-index: 2;
}
.dp-pin::after {
  content: "";
  position: absolute; top: 20px; left: 50%;
  width: 2px; height: 12px;
  background: #fff;
  transform: translateX(-50%);
  box-shadow: 0 0 2px rgba(0,0,0,0.5);
}
.dp-pin .dp-pulse {
  position: absolute; top: 0; left: 50%;
  width: 26px; height: 26px; margin-left: -13px;
  border-radius: 50%;
  background: rgba(255,59,48,0.4);
  animation: dp-pulse 1.6s ease-out infinite;
  z-index: 1;
}
@keyframes dp-pulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Saved mark pin (blue, quieter) */
.my-mark-icon { background: transparent; border: 0; }
.mm-pin {
  width: 22px; height: 28px;
  position: relative;
}
.mm-pin .mm-inner {
  position: absolute; top: 3px; left: 50%;
  width: 16px; height: 16px; margin-left: -8px;
  background: #1e6fe0;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.45);
}
.mm-pin::after {
  content: "";
  position: absolute; top: 18px; left: 50%;
  width: 2px; height: 10px;
  background: #fff;
  transform: translateX(-50%);
  box-shadow: 0 0 2px rgba(0,0,0,0.4);
}

/* Popup content — site uses DARK popup bg (#0f2035), so all text must be light */
.dp-popup { font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; min-width: 240px; }
.dp-head {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #9aa6bb; margin: 0 0 6px;
}
.dp-saved-name {
  font-size: 14px; font-weight: 700; color: #f1f5fb;
  margin: 0 0 8px; padding-bottom: 6px;
  border-bottom: 1px solid #27415f;
}
.dp-saved-name .dp-sp { font-weight: 500; color: #8fc4ff; }

.dp-section { margin: 0 0 8px; }
.dp-label {
  font-size: 10.5px; font-weight: 600;
  color: #8a97ad; text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 3px;
}
.dp-val {
  font: 600 13.5px/1.35 ui-monospace, "SF Mono", Menlo, monospace;
  color: #eaf1fb;
  padding: 4px 0;
  user-select: all;
  letter-spacing: 0.01em;
}
.dp-val.dp-primary {
  font-size: 14.5px;
  color: #1a1205;
  background: linear-gradient(90deg, #ffe9a8, #fff3c8);
  border-left: 3px solid #f0a820;
  padding: 6px 10px;
  border-radius: 3px;
  font-weight: 700;
  /* Vwhater.10: prevent awkward mid-coord wrap on narrow mobile */
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* On very narrow mobile, shrink font so full DDM fits on one line */
@media (max-width: 420px) {
  .dp-val.dp-primary { font-size: 13px; letter-spacing: 0; }
}
.dp-val.sm { font-size: 12px; }

.dp-copyrow { display: flex; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
.dp-copy {
  background: rgba(143,196,255,0.12); border: 1px solid rgba(143,196,255,0.35);
  color: #8fc4ff; font-size: 11.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 14px;
  cursor: pointer; transition: all 0.15s;
}
.dp-copy.sm { font-size: 10.5px; padding: 3px 8px; }
.dp-copy:hover { background: rgba(143,196,255,0.24); border-color: #8fc4ff; color: #b8d7ff; }
.dp-copy.copied { background: #22a36b; color: #fff; border-color: #22a36b; }

.dp-more { margin: 6px 0 8px; font-size: 11.5px; }
.dp-more summary { cursor: pointer; color: #8a97ad; user-select: none; }
.dp-more summary:hover { color: #8fc4ff; }
.dp-more[open] summary { margin-bottom: 4px; color: #b8d7ff; }

.dp-meta {
  padding: 7px 0; margin: 8px 0;
  border-top: 1px solid #27415f;
  border-bottom: 1px solid #27415f;
  display: flex; flex-direction: column; gap: 5px;
}
.dp-meta-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.dp-chip {
  display: inline-block;
  background: rgba(143,196,255,0.18); color: #b8d7ff;
  font-weight: 700; padding: 2px 9px; border-radius: 10px;
  font-size: 11.5px;
  min-width: 58px; text-align: center;
}
.dp-chip.dim { background: rgba(255,255,255,0.08); color: #8a97ad; }
.dp-note { color: #c4cddc; font-size: 11.5px; }

.dp-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.dp-btn {
  flex: 1; min-width: 72px;
  background: rgba(255,255,255,0.05); border: 1px solid #27415f;
  color: #eaf1fb; font-size: 12px; font-weight: 600;
  padding: 8px 10px; border-radius: 6px;
  cursor: pointer; transition: all 0.15s;
}
.dp-btn:hover { background: rgba(143,196,255,0.15); border-color: #8fc4ff; color: #b8d7ff; }
.dp-btn.primary { background: #1e6fe0; color: #fff; border-color: #1e6fe0; }
.dp-btn.primary:hover { background: #3a82eb; color: #fff; border-color: #3a82eb; }
.dp-btn.danger { background: rgba(192,57,43,0.12); color: #ff7a6b; border-color: rgba(255,122,107,0.35); }
.dp-btn.danger:hover { background: rgba(192,57,43,0.25); color: #ff9a8d; }

/* Mobile tweaks — bigger hit targets in popup */
@media (max-width: 740px) {
  .dp-popup { min-width: 260px; }
  .dp-val.dp-primary { font-size: 15px; }
  .dp-copy { padding: 6px 12px; font-size: 12px; }
  .dp-btn { padding: 9px 10px; font-size: 12.5px; }
  /* Hide the desktop-only drawer-btn on mobile (we use the FAB instead) */
  #dpToggleDesktop { display: none !important; }
}
/* 2026-04-27: Brett — cull the top-left drop-pin buttons on desktop too.
   The always-on bottom-right navy FAB (#bcMobDropPin) is now the single
   drop-pin button on every screen size. */
#dpToggleDesktop { display: none !important; }
.bc-mapctl-droppin { display: none !important; }
@media (min-width: 1025px) {
  /* Hide the mobile FAB on desktop (we use the topbar button instead) */
  #fabDropPin { display: none !important; }
}

/* =========================================================================
   PWA v23 — Install Banner, Overlays, Toasts, Share Button, Menu Row
   ========================================================================= */

/* ---------- Install banner (floats above bottom sheet) ---------- */
.pwa-banner {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: var(--z-toast); /* above bottom sheet (~1190) and FAB stack */
  padding: 0 12px calc(12px + env(safe-area-inset-bottom)) 12px;
  pointer-events: none;
  transform: translateY(140%);
  transition: transform .34s cubic-bezier(.2,.9,.25,1);
}

/* On mobile / tablet portrait, clear the bottom sheet peek (~130-148px) so
   preset tabs (Fish Now / Navigate / Structure / Plan) stay tappable. */
@media (max-width: 740px) {
  .pwa-banner {
    bottom: calc(140px + env(safe-area-inset-bottom, 0px));
    padding-bottom: 8px;
  }
  /* v27e: the old bottom sheet is gone on mobile, so the install banner can
     sit at the actual bottom of the screen. Also, hide the banner while a v27
     sheet is open so it doesn't overlap the sheet content. */
  body.v27-mobile .pwa-banner {
    bottom: 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  body.v27-mobile:has(.v27-sheet.v27-sheet-open) .pwa-banner {
    transform: translateY(140%) !important;
    pointer-events: none;
  }
}
.pwa-banner.visible { transform: translateY(0); }

.pwa-banner-inner {
  pointer-events: auto;
  margin: 0 auto;
  max-width: 560px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  padding: 8px 8px 8px 11px;
  background: linear-gradient(180deg, #13253d 0%, #0e1d31 100%);
  border: 1px solid #2a4668;
  border-radius: 16px;
  box-shadow:
    0 24px 50px -12px rgba(0,0,0,.75),
    0 8px 18px -4px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.02) inset;
  color: #eaf1fb;
}

.pwa-banner-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: #0a1526;
  flex-shrink: 0;
}

.pwa-banner-text { min-width: 0; }
.pwa-banner-title {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pwa-banner-sub {
  font-size: 11.5px;
  line-height: 1.3;
  color: #b8d7ff;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pwa-banner-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 8px 14px;
  min-height: 40px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  background: linear-gradient(180deg, #ffe9a8 0%, #ffd166 100%);
  color: #2a1f00;
  box-shadow: 0 2px 8px rgba(255, 209, 102, .25);
  white-space: nowrap;
}
.pwa-banner-btn:hover { filter: brightness(1.04); }
.pwa-banner-btn:active { transform: translateY(1px); }

/* 40x44 tap target for dismiss — meets 44px min height (iOS HIG) while saving width */
.pwa-banner-close {
  appearance: none;
  border: 0;
  background: rgba(255,255,255,.06);
  color: #c4cddc;
  width: 40px; height: 44px;
  border-radius: 10px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.pwa-banner-close:hover { background: rgba(255,255,255,.12); color: #fff; }
.pwa-banner-close:focus-visible,
.pwa-banner-btn:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; }

/* "I've already installed it" — low-emphasis link under the banner card */
.pwa-banner-done {
  display: block;
  width: 100%;
  margin: 6px auto 0 auto;
  max-width: 560px;
  background: transparent;
  border: 0;
  color: #b8d7ff;
  font-size: 11.5px;
  text-align: center;
  padding: 6px 8px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: .8;
}
.pwa-banner-done:hover { opacity: 1; color: #eaf1fb; }

/* Desktop: tuck banner bottom-right, narrower */
@media (min-width: 1025px) {
  .pwa-banner { padding: 0 18px 18px 18px; left: auto; right: 0; max-width: 460px; }
  .pwa-banner-inner { max-width: none; }
  .pwa-banner-done { max-width: 460px; }
}

/* ---------- Overlay (iOS / in-app / desktop hint) ---------- */
.pwa-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-toast);
  background: rgba(5, 12, 22, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: end center;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom)) 16px;
  opacity: 0;
  transition: opacity .22s ease;
}
.pwa-overlay.visible { opacity: 1; }
.pwa-overlay-card {
  position: relative;
  width: min(440px, 100%);
  background: linear-gradient(180deg, #13263f 0%, #0e1e32 100%);
  border: 1px solid #2a4668;
  border-radius: 18px 18px 14px 14px;
  padding: 20px 20px 22px;
  color: #eaf1fb;
  box-shadow: 0 -20px 60px rgba(0,0,0,.55);
  transform: translateY(16px);
  animation: pwaSlideUp .3s cubic-bezier(.2,.9,.25,1) forwards;
}
.pwa-overlay-card:focus { outline: none; }
@keyframes pwaSlideUp { to { transform: translateY(0); } }
@media (min-width: 720px) {
  .pwa-overlay { place-items: center; }
  .pwa-overlay-card { border-radius: 18px; }
}
.pwa-overlay-close {
  position: absolute;
  top: 10px; right: 10px;
  appearance: none;
  border: 0;
  background: rgba(255,255,255,.08);
  color: #c4cddc;
  width: 44px; height: 44px;
  border-radius: 10px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.pwa-overlay-close:hover { background: rgba(255,255,255,.16); color: #fff; }
.pwa-overlay-close:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; }

.pwa-overlay-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
  padding-right: 40px;
}
.pwa-overlay-head img {
  border-radius: 11px;
  background: #0a1526;
  width: 48px; height: 48px;
}
.pwa-overlay-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}
.pwa-overlay-sub {
  font-size: 13px;
  color: #b8d7ff;
  margin-top: 3px;
  line-height: 1.4;
}
.pwa-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 6px 0;
  display: grid;
  gap: 12px;
}
.pwa-steps li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: start;
}
.pwa-step-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #ffe9a8, #ffd166);
  color: #2a1f00;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}
.pwa-step-title {
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}
.pwa-step-desc {
  font-size: 13px;
  color: #c4cddc;
  margin-top: 3px;
  line-height: 1.4;
  display: inline;
}
.pwa-share-ic {
  width: 18px; height: 18px;
  vertical-align: -4px;
  margin-left: 4px;
  color: #60a5fa;
}
.pwa-steps-plain {
  font-size: 13.5px;
  color: #c4cddc;
  line-height: 1.55;
  padding-left: 4px;
}
.pwa-steps-plain li { display: block; margin-bottom: 8px; }
.pwa-steps-plain strong { color: #fff; font-weight: 700; }

.pwa-overlay-arrow {
  position: absolute;
  right: 22px;
  bottom: -2px;
  pointer-events: none;
  opacity: 0;
  animation: pwaArrowBounce 1.4s ease-in-out .6s infinite;
}
@keyframes pwaArrowBounce {
  0%,100% { transform: translateY(-4px); opacity: .85; }
  50% { transform: translateY(4px); opacity: 1; }
}
.pwa-btn-primary {
  appearance: none;
  border: 0;
  cursor: pointer;
  margin-top: 14px;
  width: 100%;
  padding: 12px 18px;
  min-height: 44px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14.5px;
  background: linear-gradient(180deg, #ffe9a8 0%, #ffd166 100%);
  color: #2a1f00;
}
.pwa-btn-primary:hover { filter: brightness(1.04); }
.pwa-btn-primary:active { transform: translateY(1px); }
.pwa-btn-primary:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; }

/* ---------- Toasts (offline/online/updated) ---------- */
.pwa-toast-host {
  position: fixed;
  left: 50%;
  /* Below the topbar (roughly 64px tall) on desktop; right up top on mobile */
  top: calc(72px + env(safe-area-inset-top));
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: calc(100vw - 20px);
}
.pwa-toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 14px;
  background: linear-gradient(180deg, #13263f 0%, #0e1e32 100%);
  border: 1px solid #2a4668;
  border-radius: 12px;
  color: #eaf1fb;
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 14px 32px rgba(0,0,0,.55);
  min-width: 260px;
  max-width: min(520px, calc(100vw - 20px));
  transform: translateY(-16px);
  opacity: 0;
  transition: transform .24s cubic-bezier(.2,.9,.25,1), opacity .24s ease;
}
.pwa-toast.visible { transform: translateY(0); opacity: 1; }
.pwa-toast-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #6aa0ff;
  box-shadow: 0 0 0 3px rgba(106,160,255,.18);
  flex-shrink: 0;
}
.pwa-toast-ok .pwa-toast-dot { background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.18); }
.pwa-toast-warn .pwa-toast-dot { background: #ffb547; box-shadow: 0 0 0 3px rgba(255,181,71,.18); }
.pwa-toast-err .pwa-toast-dot { background: #ff6363; box-shadow: 0 0 0 3px rgba(255,99,99,.18); }
.pwa-toast-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pwa-toast-action {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: rgba(255,209,102,.18);
  color: #ffd166;
  font-weight: 700;
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 8px;
  min-height: 32px;
}
.pwa-toast-action:hover { background: rgba(255,209,102,.28); color: #ffe9a8; }
.pwa-toast-close {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: transparent;
  color: #8fa5bd;
  width: 28px; height: 28px;
  font-size: 16px;
  line-height: 1;
  border-radius: 8px;
}
.pwa-toast-close:hover { background: rgba(255,255,255,.08); color: #fff; }

/* ---------- Share button in header (desktop) ---------- */
#shareBtnDesktop .db-ic { font-weight: 800; }

/* ---------- Install/Share menu row in mobile sidebar ---------- */
/* 2026-05-05 — pwa-menu-row visual refresh.
   Was: 2-column grid of small rounded buttons that didn't match the
   <details class="layer-group"> drawers above (Fishing Intel / Live Data /
   Live Ocean / Community). Brett wanted the bottom drawers to match the
   visual language of the rest of the sidebar.
   Fix: keep the same JS (4 buttons inserted by app.js + auth/catches-ui.js)
   but restyle them as full-width rows visually identical to .layer-group
   summaries. Click behaviour unchanged — they're still <button> elements. */
.pwa-menu-row {
  display: flex;
  flex-direction: column;
  gap: 10px;          /* matches .layer-group margin-top:10px */
  grid-template-columns: none;  /* override the old 1fr 1fr grid */
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom)) 14px;
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.pwa-menu-btn {
  /* Match .layer-group container chrome */
  appearance: none;
  cursor: pointer;
  border: 1px solid #1b2e44;
  border-radius: 8px;
  background: #0d1a2b;
  /* Match .layer-group > summary inner layout */
  width: 100%;
  padding: 10px 12px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  white-space: nowrap;
  transition: background 0.15s;
}
.pwa-menu-btn:hover { background: #122238; color: var(--accent); }
.pwa-menu-btn:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; }
/* Match the chevron used by .layer-group > summary::after, but pointing
   right since these aren't collapsible (they trigger panels/actions). */
.pwa-menu-btn::after {
  content: "›";
  margin-left: auto;
  color: var(--ink-dim);
  font-size: 16px;
  font-weight: 600;
}
/* Match .lg-dot — the coloured dot to the left of each label. The dot's
   colour comes from the icon span (.pwa-menu-ic) which already had a
   colour, so we re-style that span as the dot. */
.pwa-menu-ic {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: #ffd166; /* default = yellow accent */
  box-shadow: 0 0 0 2px rgba(255,255,255,0.06);
  font-size: 0; /* hide any text content (★ ⤓ ↗) — visual is the dot */
  flex: 0 0 8px;
}
/* Per-button dot colours so each row reads distinctly, like the
   layer-group sections above. */
#mmMenuMyMarks    .pwa-menu-ic { background: #ff8a48; } /* orange — fish/marks */
#bcCatchesMenu    .pwa-menu-ic { background: #4fe3a8; } /* green — catches log */
#pwaMenuInstall   .pwa-menu-ic { background: #64b5f6; } /* blue — base/utility */
#pwaMenuShare     .pwa-menu-ic { background: #ffb84a; } /* amber — community */

/* Mobile: topbar is smaller, keep toast near the top but under the notch */
@media (max-width: 740px) {
  .pwa-toast-host {
    top: calc(64px + env(safe-area-inset-top));
  }
}

/* ---------- Hide all PWA UI when running as installed app ---------- */
@media (display-mode: standalone), (display-mode: minimal-ui) {
  .pwa-banner { display: none !important; }
  /* Keep Share button + toasts — still useful inside the installed app */
}

/* =========================================================================
   BayCast v24 — Marks Manager styles
   Dialog, panel, coloured markers, export/import UI
   ========================================================================= */

/* ---- Coloured saved-mark icon (replaces .my-mark-icon default) -------- */
.mm-mark-icon { background: transparent; border: 0; }
.mm-pin {
  position: relative;
  width: 22px; height: 28px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.mm-pin::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--mm-color, #1e6fe0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 28'%3E%3Cpath d='M11 1a9 9 0 0 1 9 9c0 6.5-9 17-9 17S2 16.5 2 10a9 9 0 0 1 9-9z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 28'%3E%3Cpath d='M11 1a9 9 0 0 1 9 9c0 6.5-9 17-9 17S2 16.5 2 10a9 9 0 0 1 9-9z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.mm-pin .mm-inner {
  position: absolute;
  left: 50%; top: 8px;
  width: 8px; height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,.35);
}
.mm-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,.25) inset;
}
.mm-notes {
  background: rgba(143,196,255,0.08);
  border-left: 2px solid rgba(143,196,255,0.45);
  padding: 6px 10px;
  margin: 0 0 8px;
  border-radius: 4px;
  color: #c4cddc;
  font-size: 12.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

/* =========================================================================
   Dialog (save / edit / export / import)
   ========================================================================= */
.mm-dlg-wrap {
  position: fixed;
  inset: 0;
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: mmDlgIn .18s ease-out;
}
@keyframes mmDlgIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mm-dlg-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 12, 22, 0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.mm-dlg {
  position: relative;
  background: #0f1824;
  color: #e6ecf3;
  border: 1px solid rgba(143,196,255,0.18);
  border-radius: 14px;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.35);
  animation: mmDlgPop .2s cubic-bezier(.3,1.2,.5,1);
  overflow: hidden;
}
.mm-dlg-wide { max-width: 540px; }
@keyframes mmDlgPop {
  from { transform: translateY(8px) scale(.98); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.mm-dlg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mm-dlg-title {
  font: 600 16px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  color: #fff;
}
.mm-dlg-close {
  background: transparent;
  border: 0;
  color: #8a97ad;
  font-size: 22px;
  line-height: 1;
  width: 32px; height: 32px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.mm-dlg-close:hover { background: rgba(255,255,255,.06); color: #fff; }
.mm-dlg-close:focus-visible { outline: 2px solid #8fc4ff; outline-offset: 1px; }
.mm-dlg-body {
  padding: 12px 16px 8px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.mm-dlg-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.mm-dlg-spacer { flex: 1; }

/* Form fields */
.mm-f {
  display: block;
  margin: 0 0 12px;
}
.mm-f-lbl {
  display: block;
  font: 600 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #8fc4ff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.mm-f-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #8a97ad;
  font-size: 11px;
  margin-left: 4px;
}
.mm-f input[type="text"],
.mm-f input[type="search"],
.mm-f textarea,
.mm-panel-tools input[type="search"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  background: #0a121e;
  border: 1px solid rgba(143,196,255,0.18);
  border-radius: 8px;
  color: #e6ecf3;
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transition: border-color .12s, background .12s;
}
.mm-f input:focus,
.mm-f textarea:focus,
.mm-panel-tools input:focus {
  outline: none;
  border-color: #8fc4ff;
  background: #101a28;
}
.mm-f textarea { resize: vertical; min-height: 60px; }

.mm-colour-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mm-colour {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.14);
  cursor: pointer;
  padding: 0;
  transition: transform .12s, border-color .12s, box-shadow .12s;
  position: relative;
}
.mm-colour:hover { transform: scale(1.08); border-color: rgba(255,255,255,.3); }
.mm-colour.selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px #1e6fe0, 0 2px 6px rgba(0,0,0,.3);
  transform: scale(1.08);
}
.mm-colour:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; }

.mm-coord-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(143,196,255,0.06);
  border-radius: 8px;
  margin-top: 4px;
}
.mm-coord-row .mm-f-lbl { margin: 0; }
.mm-coord-row code {
  font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #e6ecf3;
}

/* Buttons */
.mm-btn {
  padding: 9px 14px;
  background: transparent;
  border: 1px solid rgba(143,196,255,0.26);
  border-radius: 7px;
  color: #c4cddc;
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  min-height: 36px;
}
.mm-btn.sm { padding: 6px 10px; font-size: 12px; min-height: 30px; }
.mm-btn:hover { background: rgba(143,196,255,.12); border-color: #8fc4ff; color: #fff; }
.mm-btn:focus-visible { outline: 2px solid #ffd166; outline-offset: 1px; }
.mm-btn.primary {
  background: #1e6fe0;
  border-color: #1e6fe0;
  color: #fff;
}
.mm-btn.primary:hover { background: #3a82eb; border-color: #3a82eb; }
.mm-btn.primary:disabled {
  background: rgba(30,111,224,.35);
  border-color: transparent;
  cursor: not-allowed;
  color: rgba(255,255,255,.6);
}
.mm-btn.danger {
  background: rgba(230, 57, 70, .14);
  border-color: rgba(230, 57, 70, .4);
  color: #ff8a80;
}
.mm-btn.danger:hover {
  background: rgba(230, 57, 70, .25);
  border-color: #ff8a80;
  color: #ffb0a8;
}

/* =========================================================================
   My Marks Panel
   ========================================================================= */
.mm-panel {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: 400px;
  max-width: 100vw;
  background: #0c1623;
  color: #e6ecf3;
  border-left: 1px solid rgba(143,196,255,0.18);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 30px rgba(0,0,0,.4);
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.3,1,.4,1);
}
.mm-panel.open { transform: translateX(0); }
.mm-panel-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 14px 60px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  flex: 0 0 auto;
}
.mm-panel-head h2 {
  margin: 0;
  font: 600 15px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #fff;
}
.mm-panel-close {
  /* 2026-05-05: moved to top-LEFT (absolute) — was right-side which the
     hamburger button (z-index 12000) covered up. */
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  background: rgba(255,255,255,.08);
  border: 0;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  width: 36px; height: 36px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mm-panel-close:hover { background: rgba(255,255,255,.06); color: #fff; }
.mm-panel-close:focus-visible { outline: 2px solid #8fc4ff; outline-offset: 1px; }
.mm-panel-tools {
  padding: 10px 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex: 0 0 auto;
}
.mm-panel-tools input[type="search"] { margin: 0 0 8px; padding: 8px 10px; font-size: 13px; }
.mm-tools-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mm-count {
  margin-left: auto;
  font-size: 11.5px;
  color: #8a97ad;
}

.mm-panel-body {
  overflow-y: auto;
  flex: 1 1 auto;
  padding: 6px 0 12px;
}
.mm-panel-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(30,111,224,.08);
  flex: 0 0 auto;
  font-size: 12.5px;
}
.mm-panel-foot[hidden] { display: none !important; }
.mm-panel-foot > span { color: #c4cddc; font-weight: 600; }
.mm-bulk-actions { margin-left: auto; display: flex; gap: 6px; }

/* Mark rows */
.mm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .12s;
}
.mm-row:hover { background: rgba(143,196,255,.05); }
.mm-row-check {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  cursor: pointer;
}
.mm-row-check input {
  width: 18px; height: 18px;
  accent-color: #1e6fe0;
  cursor: pointer;
}
.mm-row-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 6px 4px;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 6px;
  min-width: 0;
}
.mm-row-main:hover { background: rgba(143,196,255,.06); }
.mm-row-main:focus-visible { outline: 2px solid #8fc4ff; outline-offset: 1px; }
.mm-row-dot {
  flex: 0 0 auto;
  width: 12px; height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,.35) inset, 0 0 0 1px rgba(255,255,255,.12);
}
.mm-row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
.mm-row-name {
  font-weight: 600;
  font-size: 13.5px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-row-sub {
  font-size: 11.5px;
  color: #c4cddc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-row-coords {
  font: 10.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #8a97ad;
}
.mm-row-actions {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}
.mm-row-btn {
  width: 34px; height: 34px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #8a97ad;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s, border-color .12s;
}
.mm-row-btn:hover { background: rgba(143,196,255,.12); color: #8fc4ff; border-color: rgba(143,196,255,.3); }
.mm-row-btn.danger:hover { background: rgba(230,57,70,.18); color: #ff8a80; border-color: rgba(230,57,70,.4); }
.mm-row-btn:focus-visible { outline: 2px solid #8fc4ff; outline-offset: 1px; }

.mm-empty {
  padding: 40px 28px;
  text-align: center;
  color: #c4cddc;
}
.mm-empty-ic { font-size: 44px; margin-bottom: 12px; opacity: .65; }
.mm-empty h3 {
  margin: 0 0 10px;
  font-size: 15px;
  color: #fff;
}
.mm-empty p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; }
.mm-empty-hint {
  font-size: 12px;
  color: #8a97ad;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* =========================================================================
   Export dialog — brand picker & instructions
   ========================================================================= */
.mm-brand-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mm-brand {
  padding: 10px 12px;
  background: #0a121e;
  border: 1px solid rgba(143,196,255,0.18);
  border-radius: 8px;
  color: #c4cddc;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s, background .12s;
  min-height: 44px;
}
.mm-brand:hover { border-color: #8fc4ff; }
.mm-brand.selected {
  border-color: #1e6fe0;
  background: rgba(30,111,224,.12);
  color: #fff;
}
.mm-brand:focus-visible { outline: 2px solid #ffd166; outline-offset: 1px; }
.mm-brand-label {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  display: block;
}

.mm-instr {
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(143,196,255,.05);
  border-left: 3px solid #8fc4ff;
  border-radius: 6px;
}
.mm-instr-head {
  font: 600 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #8fc4ff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.mm-instr-list {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.55;
  color: #e6ecf3;
}
.mm-instr-list li { margin-bottom: 4px; }
.mm-instr-list code {
  background: rgba(0,0,0,.3);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11.5px;
}
.mm-instr-note {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(143,196,255,.12);
  font-size: 12px;
  color: #c4cddc;
  line-height: 1.5;
}

/* =========================================================================
   Import preview
   ========================================================================= */
.mm-import-summary {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.mm-sum-chip {
  flex: 1;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 12px;
  color: #c4cddc;
}
.mm-sum-chip strong {
  font-size: 17px;
  display: block;
  color: #fff;
  font-weight: 700;
  margin-bottom: 2px;
}
.mm-sum-chip.fresh { background: rgba(34,163,107,.15); border: 1px solid rgba(34,163,107,.35); }
.mm-sum-chip.dupe  { background: rgba(255,209,102,.1); border: 1px solid rgba(255,209,102,.3); }

.mm-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,.03);
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 12.5px;
  color: #c4cddc;
  cursor: pointer;
}
.mm-check-row input { accent-color: #1e6fe0; }

.mm-import-preview {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 7px;
  background: rgba(0,0,0,.12);
}
.mm-imp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.mm-imp-row:last-child { border-bottom: 0; }
.mm-imp-row.is-dupe { opacity: .55; }
.mm-imp-row .mm-row-text { gap: 1px; }
.mm-imp-tag {
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(255,209,102,.18);
  color: #ffd166;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-left: auto;
}
.mm-imp-more {
  padding: 10px;
  text-align: center;
  color: #8a97ad;
  font-size: 12px;
  font-style: italic;
}

/* =========================================================================
   Mobile adjustments
   ========================================================================= */
@media (max-width: 740px) {
  .mm-panel {
    width: 100vw;
    max-width: 100vw;
    border-left: 0;
  }
  .mm-dlg {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
  }
  .mm-brand-grid {
    grid-template-columns: 1fr;
  }
  .mm-dlg-foot {
    flex-wrap: wrap;
  }
  .mm-dlg-foot .mm-dlg-spacer { flex: 1 1 100%; display: none; }
  .mm-dlg-foot .mm-btn { flex: 1; min-height: 44px; }
}

/* Keep both drop-pin and save icon styles in sync — override v21 default blue */
.my-mark-icon { display: none !important; }

/* ==========================================================================
   BAYCAST v25 — Sprint 1 mobile UX styles
   All gated @media (max-width:740px) to keep desktop untouched.
   ========================================================================== */

@media (max-width: 740px) {

  /* ---- C2 Preset layer chip strip under mode tabs ---- */
  .v25-preset-chips {
    position: fixed;
    top: 108px;                 /* sits just under the mode tabs */
    left: 12px; right: 12px;
    display: flex; gap: 6px;
    overflow-x: auto;
    padding: 6px 2px;
    z-index: 650;
    scrollbar-width: none;
    pointer-events: auto;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
  }
  .v25-preset-chips::-webkit-scrollbar { display: none; }
  .v25-chip {
    flex: 0 0 auto;
    padding: 6px 10px;
    font: 600 12px/1 system-ui, -apple-system, "SF Pro Text", sans-serif;
    color: #123;
    background: #eef3f7;
    border: 1px solid rgba(0,40,80,.12);
    border-radius: 999px;
    white-space: nowrap;
  }
  .v25-chip[data-on="1"] {
    background: #0b6ea8;
    color: #fff;
    border-color: #0b6ea8;
  }

  /* ---- C4 Wind/Tide skeleton + stale badge ---- */
  .v25-skel {
    display: inline-block;
    min-width: 48px;
    height: 0.9em;
    border-radius: 4px;
    background: linear-gradient(90deg, #e6ecf1 0%, #f5f8fa 50%, #e6ecf1 100%);
    background-size: 200% 100%;
    animation: v25skel 1.2s linear infinite;
    vertical-align: middle;
  }
  @keyframes v25skel {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  .v25-stale {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font: 600 10px/1.4 system-ui, sans-serif;
    color: #8a5a00;
    background: #fff3cf;
    border: 1px solid #f1c96a;
    border-radius: 999px;
    vertical-align: middle;
  }

  /* ---- C5 AHO zoom-out soft-label (mobile only, low zoom) — v26 override below ---- */
  .leaflet-tile-pane.v25-aho-softlabel .leaflet-layer:first-child {
    filter: contrast(88%) saturate(85%);
  }

  /* ---- C6 FAB stack: hide non-GPS FABs when sheet expanded ---- */
  /* Hide secondary FABs when sheet is expanded; keep GPS + DropPin reachable */
  .v25-fabs-hidden .fab:not(#fabGps):not(#fabDropPin) {
    opacity: 0 !important;
    transform: translateX(60px);
    pointer-events: none !important;
    transition: opacity .2s ease, transform .22s ease;
  }
  .fab-stack.v25-fabs-hidden .fab:not(#fabGps):not(#fabDropPin),
  #fabStack.v25-fabs-hidden .fab:not(#fabGps):not(#fabDropPin) {
    opacity: 0 !important;
    transform: translateX(60px);
    pointer-events: none !important;
    transition: opacity .2s ease, transform .22s ease;
  }

  /* ---- C7 Sheet scrim (visible at half + full; dimmer at full) ---- */
  /* Class is applied to the scrim element itself, so use same-element selectors */
  .sheet-scrim.v25-scrim-visible,
  #sheetScrim.v25-scrim-visible {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: rgba(8,16,28,.28);
    transition: opacity .22s ease, background .22s ease;
    position: fixed;
    inset: 0;
    z-index: var(--z-fab);
  }
  .sheet-scrim.v25-scrim-dim,
  #sheetScrim.v25-scrim-dim {
    background: rgba(8,16,28,.48);
  }

  /* ---- M3 Split counters + pulse ---- */
  .v25-marks-split {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-variant-numeric: tabular-nums;
  }
  .v25-marks-sep { opacity: .4; }
  .v25-mine { color: #0b6ea8; font-weight: 700; }
  .v25-pulse { animation: v25pulse .6s ease; }
  @keyframes v25pulse {
    0%   { transform: scale(1);   }
    40%  { transform: scale(1.18); color: #0b6ea8; }
    100% { transform: scale(1);   }
  }

  /* ---- M1 Quick-save collapsible details ---- */
  .v25-details {
    margin-top: 10px;
    border-top: 1px dashed rgba(0,0,0,.1);
    padding-top: 8px;
  }
  .v25-details-summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 2px;
    font: 600 13px/1 system-ui, sans-serif;
    color: #0b6ea8;
    display: flex; align-items: center; gap: 6px;
  }
  .v25-details-summary::-webkit-details-marker { display: none; }
  .v25-details-summary::before {
    content: "›";
    display: inline-block;
    transform: rotate(0deg);
    transition: transform .18s ease;
    font-size: 18px;
  }
  .v25-details[open] .v25-details-summary::before {
    transform: rotate(90deg);
  }
  .v25-quick-save {
    background: #0b6ea8 !important;
    color: #fff !important;
    font-weight: 700;
    min-height: 48px;
    border-radius: 12px !important;
  }
  .v25-save-detailed {
    background: #eef3f7 !important;
    color: #0b6ea8 !important;
    font-weight: 600;
    min-height: 44px;
    border-radius: 12px !important;
    border: 1px solid rgba(11,110,168,.25) !important;
  }

  /* ---- C3 First-run sheet ---- */
  .v25-fr-wrap {
    position: fixed; inset: 0;
    z-index: var(--z-toast);
    display: none;
    align-items: flex-end;
    justify-content: center;
  }
  .v25-fr-wrap[data-open="1"],
  .v25-fr-wrap.visible { display: flex; }
  .v25-fr-backdrop {
    position: absolute; inset: 0;
    background: rgba(8,16,28,.48);
    backdrop-filter: blur(2px);
  }
  .v25-fr-card {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: #fff;
    border-radius: 18px 18px 0 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 32px rgba(0,0,0,.18);
    animation: v25fr-rise .28s cubic-bezier(.2,.8,.2,1);
  }
  @keyframes v25fr-rise {
    from { transform: translateY(32px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  .v25-fr-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
  }
  .v25-fr-logo {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: #0b6ea8;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font: 800 16px/1 system-ui, sans-serif;
    letter-spacing: -.02em;
  }
  .v25-fr-title {
    font: 800 17px/1.2 system-ui, sans-serif;
    color: #0e1a2b;
  }
  .v25-fr-sub {
    font: 500 12px/1.3 system-ui, sans-serif;
    color: #55627a;
    margin-top: 2px;
  }
  .v25-fr-actions {
    display: flex; gap: 8px;
    margin: 10px 0 8px;
  }
  .v25-fr-btn {
    flex: 1;
    min-height: 48px;
    border-radius: 12px;
    background: #0b6ea8;
    color: #fff;
    font: 700 14px/1 system-ui, sans-serif;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    border: none;
  }
  .v25-fr-btn-ic {
    display: inline-flex;
    width: 18px; height: 18px;
  }
  .v25-fr-or {
    text-align: center;
    color: #8593a8;
    font: 600 11px/1 system-ui, sans-serif;
    letter-spacing: .08em;
    margin: 6px 0 6px;
  }
  .v25-fr-ramps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    max-height: 46vh;
    overflow-y: auto;
  }
  .v25-fr-ramp {
    background: #f1f5f9;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 10px;
    padding: 10px 10px;
    text-align: left;
    font: 600 13px/1.2 system-ui, sans-serif;
    color: #0e1a2b;
    min-height: 52px;
  }
  .v25-fr-ramp-name { display: block; }
  .v25-fr-ramp-area {
    display: block;
    margin-top: 2px;
    font: 500 11px/1.2 system-ui, sans-serif;
    color: #667388;
  }
  .v25-fr-foot {
    display: flex; justify-content: center;
    margin-top: 8px;
  }
  .v25-fr-skip {
    background: transparent;
    border: none;
    color: #55627a;
    font: 600 12px/1 system-ui, sans-serif;
    padding: 10px 16px;
    min-height: 36px;
  }
}

/* ==========================================================================
   BAYCAST v26 — Sprint 2 mobile polish
   All rules gated @media (max-width: 740px). Desktop untouched.
   ========================================================================== */

@media (max-width: 740px) {

  /* ---- P2-4: right-edge clipping. FAB column sits at right: 10px with
     ~48px wide buttons. Keep labels/popups out of that lane. ---- */
  .leaflet-popup-content {
    max-width: calc(100vw - 80px) !important;
  }
  .leaflet-marker-icon.wind-vector-icon .wind-vector {
    max-width: 44px;
  }
  /* Note: Leaflet marker panes can't be padded safely (positions break).
     Instead we make the FABs translucent so content reads through, and
     wind arrow labels are capped to a max width so they don't spray out. */
  /* At tight widths, soften the FAB background a bit so content behind
     still reads; full colour on tap. */
  #fabStack .fab {
    background: rgba(255,255,255,.88);
    backdrop-filter: saturate(150%) blur(6px);
    -webkit-backdrop-filter: saturate(150%) blur(6px);
  }

  /* ---- P1-3: interactive chip states ---- */
  .v25-chip.v26-chip-interactive {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, background-color .18s ease, color .18s ease;
  }
  .v25-chip.v26-chip-interactive:active {
    transform: scale(.96);
  }
  .v25-chip.v26-chip-interactive[data-on="0"] {
    background: #f5f7fa;
    color: #6b7788;
    border-color: rgba(0,40,80,.10);
    opacity: .78;
  }
  .v25-chip.v26-chip-interactive[data-on="1"] {
    background: #0b6ea8;
    color: #fff;
    border-color: #0b6ea8;
    opacity: 1;
    box-shadow: 0 1px 3px rgba(11,110,168,.35);
  }
  .v25-chip.v26-chip-status {
    background: #eef3f7;
    color: #2a3a4f;
    border-color: rgba(0,40,80,.10);
    opacity: .92;
    cursor: default;
  }
  .v25-chip.v26-chip-status::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #2bb673;
    margin-right: 5px;
    vertical-align: middle;
  }

  /* ---- P2-6: drop-pin mode pill ---- */
  .v26-dp-pill {
    position: fixed;
    top: 58px; left: 12px;
    z-index: var(--z-sheet);
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 8px 12px;
    background: #0b6ea8;
    color: #fff;
    border-radius: 999px;
    font: 600 12px/1 system-ui, -apple-system, "SF Pro Text", sans-serif;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    animation: v26dp-pulse 1.4s ease-in-out infinite;
  }
  .v26-dp-pill.visible { display: inline-flex; }
  .v26-dp-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #ffc947;
    box-shadow: 0 0 0 0 rgba(255,201,71,.8);
    animation: v26dp-dot 1.1s ease-in-out infinite;
  }
  .v26-dp-cancel {
    width: 22px; height: 22px;
    margin-left: 2px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    color: #fff;
    font: 700 14px/1 system-ui, sans-serif;
    cursor: pointer;
  }
  @keyframes v26dp-pulse {
    0%,100% { box-shadow: 0 4px 14px rgba(0,0,0,.25); }
    50%     { box-shadow: 0 4px 18px rgba(11,110,168,.45); }
  }
  @keyframes v26dp-dot {
    0%   { box-shadow: 0 0 0 0   rgba(255,201,71,.8); }
    70%  { box-shadow: 0 0 0 8px rgba(255,201,71,0); }
    100% { box-shadow: 0 0 0 0   rgba(255,201,71,0); }
  }

  /* Also, stronger .active state on the FAB itself so it reads as "on" */
  #fabDropPin.active,
  #fabDropPin[aria-pressed="true"] {
    background: #0b6ea8 !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(11,110,168,.22), 0 4px 10px rgba(11,110,168,.28);
  }
  #fabDropPin.active svg,
  #fabDropPin[aria-pressed="true"] svg { stroke: #fff; }

  /* ---- P3-b: wider grab handle, more breathing room ---- */
  .v26-sheet .sheet-handle,
  #bottomSheet.v26-sheet .sheet-handle {
    width: 72px !important;
    height: 6px !important;
    margin: 8px auto 6px !important;
    border-radius: 999px;
    background: rgba(20, 40, 80, .22);
  }
  /* Bigger invisible tap zone above the handle */
  .v26-sheet .sheet-grab,
  #bottomSheet.v26-sheet .sheet-grab {
    min-height: 26px;
    padding: 8px 0 4px;
    cursor: grab;
  }

  /* ---- P3-a: first-run polish ---- */
  .v25-fr-head {
    padding: 4px 2px 0;
  }
  .v25-fr-title {
    font-size: 18px !important;
    color: #0e1a2b !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.6);
  }
  .v25-fr-sub {
    color: #3e4a62 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  /* Larger ramp buttons so "Olivers Hill (Frankston)" never wraps weirdly */
  .v25-fr-ramp {
    min-height: 58px !important;
    padding: 10px 12px !important;
  }
  .v25-fr-ramp-name {
    font-size: 13px !important;
    line-height: 1.25 !important;
    word-break: normal;
    hyphens: auto;
  }
  .v25-fr-ramp-area {
    color: #4d5a72 !important;
    font-size: 11px !important;
  }
  /* Higher contrast skip link — reads as a real action */
  .v25-fr-skip {
    color: #0b6ea8 !important;
    font-size: 13px !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    min-height: 44px !important;
    padding: 12px 16px !important;
  }

  /* ---- P3-c: softer cached/offline badge tones ---- */
  .v25-stale {
    background: #eaf1f7 !important;
    color: #4a6480 !important;
    border-color: #c9d7e4 !important;
    font-weight: 600 !important;
  }

  /* ---- P2-4 continued: wind popup source line was clipped at right ---- */
  .leaflet-popup-content small {
    display: inline-block;
    max-width: 100%;
    word-wrap: break-word;
  }

  /* ---- P2-5: when zoomed out on AHO chart, mute the duplicated text labels
     by blending the base tile into the background. The class is applied
     directly to .leaflet-tile-pane, so target its first child layer. ---- */
  .leaflet-tile-pane.v25-aho-softlabel .leaflet-layer:first-child {
    filter: contrast(62%) saturate(78%) brightness(112%) blur(0.7px);
    opacity: 0.65;
  }
}

/* Narrower screens (<= 425px) ---- */
@media (max-width: 425px) {
  .v26-dp-pill {
    top: 54px;
    font-size: 11.5px;
    max-width: calc(100vw - 92px);
  }
}

/* ============================================================================
 * v27 — Mobile rebuild styles
 * ----------------------------------------------------------------------------
 * All mobile-only, scoped by body.v27-mobile + @media (max-width: 740px).
 * Desktop gets nothing from this block.
 * ============================================================================ */
@media (max-width: 740px) {

  /* ---- Kill desktop chrome on mobile ------------------------------------ */
  body.v27-mobile .topbar,
  body.v27-mobile #fabStack,
  body.v27-mobile #bottomSheet,
  body.v27-mobile #ssExpand,
  body.v27-mobile #v25PresetChips,
  body.v27-mobile #v26DpPill {
    display: none !important;
  }

  /* Full-bleed map */
  body.v27-mobile #mapWrap,
  body.v27-mobile #map {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 0;
  }
  body.v27-mobile #app { padding: 0 !important; margin: 0 !important; }

  /* Hide Leaflet attribution on mobile — shown inside About sheet instead */
  body.v27-mobile .leaflet-control-attribution { display: none !important; }
  body.v27-mobile .leaflet-control-zoom { display: none !important; }

  /* Hide marker categories — toggled by JS via body classes */
  /* v27d: only hide the literal ramp pins when 'Boat ramps' is off.
     Reedy's reef marks use .mk.mk-reef and must always show per UI copy. */
  body.v27-mobile.v27-hide-ramps    .leaflet-marker-icon.mk-ramp   { display: none !important; }
  body.v27-mobile.v27-hide-hazards  .leaflet-marker-icon.nav-icon  { display: none !important; }
  body.v27-mobile.v27-hide-tide     .leaflet-marker-icon.ts-icon   { display: none !important; }
  body.v27-mobile.v27-hide-wind     .leaflet-marker-icon.wv-icon   { display: none !important; }

  /* Hide all auto-opened tooltips by default — tap to open only */
  body.v27-mobile .leaflet-tooltip-pane .leaflet-tooltip {
    display: none !important;
  }

  /* ---- v27 chrome: top-left logo chip ----------------------------------- */
  /* v63.10g4: hamburger chip — solid navy disk + crisp white 3-line icon.
     Was a translucent white shield logo that looked "see-through" on the
     satellite map. Matches the navy/white drop-pin FAB chrome family. */
  body.v27-mobile .v27-logo {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0) + 12px);
    left: 12px;
    width: 44px; height: 44px;
    border-radius: 14px;
    background: #0a1526 !important;          /* brand navy */
    color: #ffffff !important;                /* white icon */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid #0a1526 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.18);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: var(--z-map-controls);
    padding: 0;
  }
  body.v27-mobile .v27-logo svg {
    width: 22px; height: 22px;
    stroke: #ffffff !important;
  }
  body.v27-mobile .v27-logo img {
    width: 30px; height: 30px; object-fit: contain;
  }
  body.v27-mobile .v27-logo:active { transform: scale(0.96); }

  /* ---- v27 chrome: top-right conditions pill ---------------------------- */
  body.v27-mobile .v27-cond {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0) + 12px);
    right: 12px;
    height: 44px;
    padding: 0 16px;
    border-radius: 22px;
    background: rgba(255,255,255,0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: none;
    box-shadow: 0 4px 14px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.1);
    display: flex; align-items: center; gap: 8px;
    font: 600 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #0b3a5c;
    cursor: pointer;
    z-index: var(--z-map-controls);
  }
  body.v27-mobile .v27-cond-sep { opacity: 0.4; }
  body.v27-mobile .v27-cond-tide { color: #0b6ea8; }
  body.v27-mobile .v27-cond:active { transform: scale(0.97); }

  /* ---- v27 chrome: 3 FABs bottom-right ---------------------------------- */
  body.v27-mobile .v27-fabs {
    position: fixed;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0) + 16px);
    display: flex; flex-direction: column; gap: 10px;
    z-index: var(--z-map-controls);
    transition: bottom 180ms ease;
  }
  /* v27e: when the PWA install banner is up, push the FABs above it so they
     are still reachable. Banner now sits at bottom:0 on v27 and is ~200px tall. */
  body.v27-mobile:has(#pwaInstallBanner.visible) .v27-fabs {
    bottom: calc(env(safe-area-inset-bottom, 0) + 120px);
  }
  body.v27-mobile .v27-fab {
    width: 52px; height: 52px;
    border-radius: 16px;
    background: rgba(255,255,255,0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: none;
    box-shadow: 0 4px 14px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.1);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    padding: 0;
  }
  body.v27-mobile .v27-fab:active { transform: scale(0.94); background: rgba(235,245,255,0.96); }
  body.v27-mobile .v27-fab.v27-fab-active {
    background: #0b6ea8;
  }
  body.v27-mobile .v27-fab.v27-fab-active svg { stroke: #fff !important; }
  body.v27-mobile .v27-fab.v27-fab-active svg circle[fill] { fill: #fff !important; }

  /* v27e: Location FAB loading spinner when geolocation pending */
  body.v27-mobile .v27-fab.v27-fab-loading {
    animation: v27FabPulse 1.2s ease-in-out infinite;
  }
  @keyframes v27FabPulse {
    0%,100% { background: rgba(255,255,255,0.94); }
    50%     { background: rgba(180,215,240,0.94); }
  }

  /* v27e/g: when a full Leaflet popup is open (drop-pin detail), hide the
     top chrome so it doesn't clip the popup's header. Popup auto-closes on
     outside click, so chrome comes back naturally. */
  body.v27-mobile:has(.leaflet-popup) .v27-logo,
  body.v27-mobile:has(.leaflet-popup) .v27-cond {
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
  }

  /* v27h BUG #12/#15: hide top chrome while any full-screen modal overlay
     is open so the logo + conditions pill don't peek through dim backdrops.
     Covers: first-run sheet, My Marks save/edit dialog, My Marks panel,
     PWA install overlay. */
  body.v27-mobile:has(.v25-fr-wrap.visible) .v27-logo,
  body.v27-mobile:has(.v25-fr-wrap.visible) .v27-cond,
  body.v27-mobile:has(#v25_firstRun.visible) .v27-logo,
  body.v27-mobile:has(#v25_firstRun.visible) .v27-cond,
  body.v27-mobile:has(.mm-dlg-wrap) .v27-logo,
  body.v27-mobile:has(.mm-dlg-wrap) .v27-cond,
  body.v27-mobile:has(.mm-panel.open) .v27-logo,
  body.v27-mobile:has(.mm-panel.open) .v27-cond,
  body.v27-mobile:has(.pwa-overlay-card) .v27-logo,
  body.v27-mobile:has(.pwa-overlay-card) .v27-cond {
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
  }

  /* v27e: blue location puck shown after geolocation resolves */
  body.v27-mobile .v27-user-puck { pointer-events: none; }
  body.v27-mobile .v27-user-puck-ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    background: rgba(30, 136, 229, 0.22);
    border: 1.5px solid rgba(30, 136, 229, 0.5);
    animation: v27PuckPulse 2s ease-in-out infinite;
  }
  body.v27-mobile .v27-user-puck-dot {
    position: absolute; left: 5px; top: 5px; width: 12px; height: 12px;
    border-radius: 50%; background: #1e88e5;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  }
  @keyframes v27PuckPulse {
    0%,100% { transform: scale(1); opacity: 0.9; }
    50%     { transform: scale(1.35); opacity: 0.35; }
  }

  /* ---- v27 bottom sheet ------------------------------------------------- */
  body.v27-mobile .v27-sheet {
    position: fixed; inset: 0;
    z-index: var(--z-sheet);
    pointer-events: none;
  }
  body.v27-mobile .v27-sheet.v27-sheet-open { pointer-events: auto; }
  body.v27-mobile .v27-sheet-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,20,40,0);
    transition: background 0.24s ease;
  }
  body.v27-mobile .v27-sheet.v27-sheet-open .v27-sheet-backdrop {
    background: rgba(0,20,40,0.4);
  }
  body.v27-mobile .v27-sheet-panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 28px rgba(0,0,0,.22);
    max-height: 78vh;
    max-height: 78dvh;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.25, 1);
    display: flex; flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  body.v27-mobile .v27-sheet.v27-sheet-open .v27-sheet-panel {
    transform: translateY(0);
  }
  body.v27-mobile .v27-sheet-grab {
    width: 44px; height: 5px;
    background: #d6dde4;
    border-radius: 3px;
    margin: 10px auto 4px;
    cursor: pointer;
  }
  body.v27-mobile .v27-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 20px 12px;
    border-bottom: 1px solid #eef2f6;
  }
  body.v27-mobile .v27-sheet-title {
    margin: 0;
    font: 700 20px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #0b3a5c;
  }
  body.v27-mobile .v27-sheet-close {
    width: 32px; height: 32px;
    border-radius: 16px;
    border: none;
    background: #f3f6f9;
    color: #5a6774;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }
  body.v27-mobile .v27-sheet-body {
    overflow-y: auto;
    padding: 16px 20px 24px;
    -webkit-overflow-scrolling: touch;
    flex: 1;
  }

  /* ---- Menu rows ------------------------------------------------------- */
  body.v27-mobile .v27-menu-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px;
    background: #f3f6f9;
    border-radius: 12px;
    margin-bottom: 12px;
    font-size: 15px;
    color: #0b3a5c;
  }
  body.v27-mobile .v27-menu-hint { color: #5a6774; font-weight: 500; }
  body.v27-mobile .v27-menu-btn {
    display: block; width: 100%;
    text-align: left;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e5ebf0;
    border-radius: 12px;
    margin-bottom: 8px;
    font: 500 16px/1.2 -apple-system, sans-serif;
    color: #0b3a5c;
    cursor: pointer;
  }
  body.v27-mobile .v27-menu-btn:active { background: #eef4f9; }
  body.v27-mobile .v27-menu-foot {
    margin-top: 16px;
    text-align: center;
    font-size: 12px;
    color: #8a96a2;
  }

  /* ---- Layer toggles --------------------------------------------------- */
  body.v27-mobile .v27-toggles { display: flex; flex-direction: column; gap: 2px; }
  body.v27-mobile .v27-toggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 4px;
    border-bottom: 1px solid #eef2f6;
    cursor: pointer;
  }
  body.v27-mobile .v27-toggle:last-child { border-bottom: none; }
  body.v27-mobile .v27-toggle-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
  body.v27-mobile .v27-toggle-label {
    font: 600 16px/1.2 -apple-system, sans-serif;
    color: #0b3a5c;
  }
  body.v27-mobile .v27-toggle-desc {
    font: 500 13px/1.3 -apple-system, sans-serif;
    color: #5a6774;
  }
  body.v27-mobile .v27-toggle input { display: none; }
  body.v27-mobile .v27-toggle-switch {
    width: 50px; height: 30px;
    background: #d6dde4;
    border-radius: 15px;
    position: relative;
    transition: background 0.2s ease;
    flex-shrink: 0;
  }
  body.v27-mobile .v27-toggle-switch::after {
    content: '';
    position: absolute;
    left: 3px; top: 3px;
    width: 24px; height: 24px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    transition: transform 0.2s ease;
  }
  body.v27-mobile .v27-toggle input:checked + .v27-toggle-switch { background: #0b6ea8; }
  body.v27-mobile .v27-toggle input:checked + .v27-toggle-switch::after { transform: translateX(20px); }

  /* ---- Conditions cards ------------------------------------------------ */
  body.v27-mobile .v27-cond-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  }
  body.v27-mobile .v27-cond-card {
    padding: 16px;
    background: #f3f6f9;
    border-radius: 14px;
  }
  body.v27-mobile .v27-cond-label {
    font: 600 12px/1 -apple-system, sans-serif;
    color: #5a6774;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
  }
  body.v27-mobile .v27-cond-big {
    font: 700 24px/1.1 -apple-system, sans-serif;
    color: #0b3a5c;
    margin-bottom: 4px;
  }
  body.v27-mobile .v27-cond-sub {
    font: 500 12px/1.2 -apple-system, sans-serif;
    color: #8a96a2;
  }

  /* ---- Marks list ------------------------------------------------------ */
  body.v27-mobile .v27-list { display: flex; flex-direction: column; }
  body.v27-mobile .v27-mark-row {
    display: block; width: 100%;
    text-align: left;
    padding: 12px 4px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #eef2f6;
    cursor: pointer;
  }
  body.v27-mobile .v27-mark-row:active { background: #f3f6f9; }
  body.v27-mobile .v27-mark-name {
    font: 600 15px/1.2 -apple-system, sans-serif;
    color: #0b3a5c;
    margin-bottom: 2px;
  }
  body.v27-mobile .v27-mark-sub {
    font: 500 13px/1.3 -apple-system, sans-serif;
    color: #5a6774;
  }

  /* ---- Generic paragraph ----------------------------------------------- */
  body.v27-mobile .v27-p {
    font: 500 15px/1.45 -apple-system, sans-serif;
    color: #0b3a5c;
    margin: 0 0 10px;
  }
  body.v27-mobile .v27-p-dim { color: #5a6774; font-size: 13px; }

  /* ---- v29: Zoom pill (custom mobile +/- above the FAB stack) ---------- */
  body.v27-mobile .v27-zoom {
    position: fixed;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0) + 220px);
    width: 52px;
    background: rgba(255,255,255,0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.1);
    display: flex; flex-direction: column; align-items: stretch;
    z-index: var(--z-map-controls);
    overflow: hidden;
    transition: opacity 180ms ease, transform 180ms ease, bottom 180ms ease;
  }
  body.v27-mobile .v27-zoom-btn {
    height: 44px;
    background: transparent;
    border: none;
    font: 700 22px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #0b6ea8;
    cursor: pointer;
    padding: 0;
  }
  body.v27-mobile .v27-zoom-btn:active { background: rgba(235,245,255,0.96); }
  body.v27-mobile .v27-zoom-sep {
    height: 1px;
    background: rgba(10,60,100,0.12);
    margin: 0 8px;
  }
  /* Push zoom pill above the PWA install banner just like the FABs */
  body.v27-mobile:has(#pwaInstallBanner.visible) .v27-zoom {
    bottom: calc(env(safe-area-inset-bottom, 0) + 324px);
  }

  /* ---- v29 BUG #31: hide FABs + zoom pill when mark detail card is open */
  body.v27-mobile:has(#detail:not(.hidden)) .v27-fabs,
  body.v27-mobile:has(#detail:not(.hidden)) .v27-zoom {
    opacity: 0;
    pointer-events: none;
    transform: translateX(8px);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  /* ---- v29 BUG #22/23/24/25/27 → v64.1c (2026-05-06) refinement -------- */
  /* Zoom class is stamped on <body> by app.js on zoomend (Leaflet doesn't do
     this natively). v64.1c — match desktop pattern: hide LABELS only on wind
     + tide markers at low zoom; arrows/markers stay visible so users can
     read direction at whole-of-bay zoom. Nav-aids still fully hidden at z<12
     (299 of them across the bay would crowd the chart unreadable). */
  body.v27-mobile.v27-z-lt11 .wv-icon .wv-label,
  body.v27-mobile.v27-z-lt11 .wv-icon .wv-name,
  body.v27-mobile.v27-z-lt11 .ts-icon .ts-label,
  body.v27-mobile.v27-z-lt11 .ts-icon .ts-name {
    display: none !important;
  }
  body.v27-mobile.v27-z-lt12 .nav-icon {
    display: none !important;
  }

  /* ---- v29: polished menu (hero + groups) ----------------------------- */
  body.v27-mobile .v27-menu-hero {
    background: linear-gradient(135deg, #f3f6f9 0%, #e6eef6 100%);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 18px;
    display: flex; flex-direction: column; gap: 8px;
  }
  body.v27-mobile .v27-menu-hero-row {
    display: flex; align-items: center; justify-content: space-between;
  }
  body.v27-mobile .v27-menu-hero-label {
    font: 600 12px/1 -apple-system, sans-serif;
    color: #5a6774;
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }
  body.v27-mobile .v27-menu-hero strong {
    font: 700 18px/1 -apple-system, sans-serif;
    color: #0b3a5c;
  }
  body.v27-mobile .v27-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 10px;
    font: 600 12px/1 -apple-system, sans-serif;
  }
  body.v27-mobile .v27-pill-ok   { background: #e3f3e8; color: #1b7a3e; }
  body.v27-mobile .v27-pill-warn { background: #fdecec; color: #a33a3a; }

  body.v27-mobile .v27-menu-group-label {
    font: 600 11px/1 -apple-system, sans-serif;
    color: #8a96a2;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 14px 2px 8px;
  }
  /* Override the old single-line btn rule for the new stacked layout */
  body.v27-mobile .v27-menu-btn {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 12px 14px;
  }
  body.v27-mobile .v27-menu-btn-main {
    font: 600 15px/1.2 -apple-system, sans-serif;
    color: #0b3a5c;
  }
  body.v27-mobile .v27-menu-btn-hint {
    font: 500 12px/1.3 -apple-system, sans-serif;
    color: #5a6774;
  }
}

/* ========================================================================
   v30 — Offline map download
   Progress bar + danger/primary button variants for the offline flow.
   Gated on .v27-mobile so desktop is untouched.
   ======================================================================== */
@media (max-width: 740px) {
  body.v27-mobile .v27-progress {
    height: 10px;
    background: #e9eef3;
    border-radius: 999px;
    overflow: hidden;
    margin: 10px 0 12px;
  }
  body.v27-mobile .v27-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #2b7bbd 0%, #4aa8e0 100%);
    border-radius: 999px;
    transition: width 120ms linear;
  }
  body.v27-mobile .v27-menu-btn-primary {
    background: #0b3a5c;
    color: #fff;
    border-color: #0b3a5c;
  }
  body.v27-mobile .v27-menu-btn-primary .v27-menu-btn-main,
  body.v27-mobile .v27-menu-btn-primary .v27-menu-btn-hint {
    color: #fff;
  }
  body.v27-mobile .v27-menu-btn-danger {
    background: #fef6f6;
    border-color: #f0cdcd;
  }
  body.v27-mobile .v27-menu-btn-danger .v27-menu-btn-main {
    color: #a33a3a;
  }
}

/* ========================================================================
   v31 — First-run redesign + coach overlay
   Scoped to .v31-fr + .v31-coach so v25 styles remain untouched.
   ======================================================================== */
@media (max-width: 740px) {
  .v31-fr .v31-fr-hero {
    text-align: left;
    display: flex; flex-direction: column; gap: 4px;
    padding: 2px 2px 8px;
  }
  .v31-fr .v31-fr-logo {
    width: 48px; height: 48px;
    border-radius: 12px;
    margin-bottom: 6px;
    object-fit: contain;
  }
  .v31-fr .v31-fr-title {
    font: 800 22px/1.15 system-ui, -apple-system, sans-serif;
    color: #0b3a5c;
    margin: 0;
  }
  .v31-fr .v31-fr-sub {
    font: 500 13px/1.4 system-ui, sans-serif;
    color: #55627a;
    margin: 2px 0 0;
  }
  .v31-fr .v31-fr-perks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    margin: 12px 0 10px;
    padding: 10px;
    background: #f3f7fa;
    border-radius: 12px;
  }
  .v31-fr .v31-fr-perk {
    display: flex; align-items: center; gap: 8px;
    font: 600 12px/1.25 system-ui, sans-serif;
    color: #274256;
  }
  .v31-fr .v31-fr-perk-ic {
    flex: 0 0 18px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #0b6ea8;
    color: #fff;
    font: 700 10px/1 system-ui, sans-serif;
  }
  .v31-fr .v31-fr-section {
    font: 700 12px/1 system-ui, sans-serif;
    color: #8a96a2;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 6px 2px 6px;
  }
  /* Hide the old .v25-fr-head in v31 mode (we use v31-fr-hero instead) */
  .v31-fr .v25-fr-head { display: none; }

  /* Coach overlay */
  .v31-coach {
    position: fixed; inset: 0;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(0,0,0,.38);
    z-index: var(--z-panel);
    opacity: 0; pointer-events: none;
    transition: opacity .18s ease;
  }
  .v31-coach.visible {
    opacity: 1; pointer-events: auto;
  }
  .v31-coach-card {
    width: 100%;
    max-width: 560px;
    background: #fff;
    border-radius: 18px 18px 0 0;
    /* v64.1h (2026-05-07): bottom padding bumped 20px→40px to lift Got-it
       button clear of iOS home-indicator gesture zone on tall phones. */
    padding: 20px 20px calc(40px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 32px rgba(0,0,0,.22);
    animation: v25fr-rise .28s cubic-bezier(.2,.8,.2,1);
  }
  .v31-coach-title {
    font: 800 17px/1.2 system-ui, sans-serif;
    color: #0b3a5c;
    margin-bottom: 10px;
  }
  .v31-coach-list {
    list-style: none; padding: 0; margin: 0 0 14px;
    display: flex; flex-direction: column; gap: 10px;
  }
  .v31-coach-list li {
    font: 500 13px/1.4 system-ui, sans-serif;
    color: #334456;
    padding-left: 22px;
    position: relative;
  }
  .v31-coach-list li::before {
    content: "";
    position: absolute;
    left: 2px; top: 6px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #0b6ea8;
  }
  .v31-coach-list strong {
    color: #0b3a5c;
    font-weight: 700;
  }
  .v31-coach-btn {
    width: 100%;
    min-height: 46px;
    border-radius: 12px;
    background: #0b6ea8;
    color: #fff;
    font: 700 15px/1 system-ui, sans-serif;
    border: none;
  }
}

/* ========================================================================
   v32 — Mobile drop-pin popup redesign
   Compact card with Save-to-Marks as the hero action. Desktop popup is
   unchanged (different .dp-popup layout above).
   ======================================================================== */
@media (max-width: 740px) {
  .leaflet-popup-content .dp-popup.dp32 {
    min-width: 260px;
    max-width: 300px;
  }
  .dp32 .dp32-head {
    font: 600 11px/1 -apple-system, system-ui, sans-serif;
    color: #8a96a2;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
  }
  .dp32 .dp32-name {
    font: 700 16px/1.2 -apple-system, system-ui, sans-serif;
    color: #0b3a5c;
    margin-bottom: 8px;
    /* v63.10f: long names like "Snapper Hole — Mt Martha 30m drop"
       must wrap inside the popup, not clip off the edge. */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .dp32 .dp32-sp {
    font-weight: 500;
    color: #55627a;
    font-size: 13px;
  }
  .dp32 .dp32-coord-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff7d6;
    border: 1px solid #f0d97a;
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 10px;
  }
  .dp32 .dp32-coord {
    flex: 1;
    min-width: 0;
    color: #0b3a5c;
  }
  .dp32 .dp32-coord-ln {
    font: 700 14px/1.3 ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @media (max-width: 420px) {
    .dp32 .dp32-coord-ln { font-size: 13px; }
  }
  @media (max-width: 360px) {
    .dp32 .dp32-coord-ln { font-size: 12.5px; letter-spacing: -0.02em; }
  }
  .dp32 .dp32-copy {
    flex: 0 0 auto;
    font: 700 12px/1 -apple-system, sans-serif;
    color: #0b6ea8;
    background: #fff;
    border: 1px solid #cfdae6;
    border-radius: 8px;
    padding: 6px 10px;
    min-height: 32px;
  }
  .dp32 .dp32-stats {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
  }
  .dp32 .dp32-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #f3f6f9;
    border-radius: 8px;
    padding: 6px 8px;
  }
  .dp32 .dp32-stat strong {
    font: 700 14px/1 -apple-system, sans-serif;
    color: #0b3a5c;
  }
  .dp32 .dp32-stat span {
    font: 500 11px/1.2 -apple-system, sans-serif;
    color: #5a6774;
  }
  .dp32 .dp32-stat.dim strong { color: #8a96a2; }
  .dp32 .dp32-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .dp32 .dp32-btn {
    min-height: 42px;
    border-radius: 10px;
    font: 600 14px/1 -apple-system, sans-serif;
    border: 1px solid #cfdae6;
    background: #fff;
    color: #0b3a5c;
  }
  .dp32 .dp32-btn.primary {
    background: #0b6ea8;
    color: #fff;
    border-color: #0b6ea8;
    font-weight: 700;
    font-size: 15px;
    min-height: 48px;
  }
  .dp32 .dp32-btn.danger {
    background: #fef6f6;
    border-color: #f0cdcd;
    color: #a33a3a;
    min-height: 44px;
  }
  .dp32 .dp32-actions-row {
    display: flex;
    gap: 6px;
  }
  .dp32 .dp32-btn.sm {
    flex: 1;
    min-height: 38px;
    font-size: 13px;
  }
  .dp32 .dp32-btn.sm.active {
    background: #eef4f9;
    border-color: #0b6ea8;
  }
  .dp32 .dp32-more {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e3e9ef;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .dp32 .dp32-more[hidden] {
    display: none;
  }
  .dp32 .dp32-fmt {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 600 12px/1 -apple-system, sans-serif;
  }
  .dp32 .dp32-fmt-lbl {
    flex: 0 0 56px;
    color: #8a96a2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
  }
  .dp32 .dp32-fmt code {
    flex: 1;
    font: 600 12px/1.2 ui-monospace, Menlo, monospace;
    color: #0b3a5c;
    word-break: break-all;
  }
}

/* ====================================================================
 * v33 — Marks list: search + filter + sort
 * ==================================================================== */
@media (max-width: 740px) {
  .v33-marks {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .v33-marks-search {
    position: sticky;
    top: 0;
    background: #fff;
    padding: 2px 0 4px;
    z-index: 2;
  }
  .v33-marks-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    font: 500 16px/1.2 -apple-system, BlinkMacSystemFont, sans-serif;
    color: #0a2540;
    background: #f4f7fa;
    border: 1px solid #dfe6ee;
    border-radius: 10px;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    transition: border-color 120ms, background 120ms;
  }
  .v33-marks-input:focus {
    border-color: #0b6ea8;
    background: #fff;
  }
  .v33-marks-input::placeholder {
    color: #8a96a2;
  }
  .v33-marks-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .v33-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .v33-filter > span {
    font: 700 10px/1 -apple-system, sans-serif;
    letter-spacing: 0.5px;
    color: #8a96a2;
    text-transform: uppercase;
    padding-left: 2px;
  }
  .v33-marks-sel {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 32px 9px 12px;
    font: 500 14px/1.2 -apple-system, sans-serif;
    color: #0a2540;
    background: #fff;
    border: 1px solid #dfe6ee;
    border-radius: 8px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23556573' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    outline: none;
  }
  .v33-marks-sel:focus {
    border-color: #0b6ea8;
  }
  .v33-marks-sortrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 2px;
  }
  .v33-marks-sort {
    display: inline-flex;
    background: #eef2f6;
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
  }
  .v33-sort-btn {
    border: 0;
    background: transparent;
    padding: 6px 12px;
    font: 600 13px/1 -apple-system, sans-serif;
    color: #556573;
    border-radius: 6px;
    cursor: pointer;
    transition: background 120ms, color 120ms;
  }
  .v33-sort-btn.active {
    background: #fff;
    color: #0a2540;
    box-shadow: 0 1px 2px rgba(10, 37, 64, 0.08);
  }
  .v33-marks-count {
    font: 500 12px/1 -apple-system, sans-serif;
    color: #8a96a2;
  }
  .v33-marks-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .v33-marks-body .v27-mark-row.v33-mark-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
  }
  .v33-mark-main {
    flex: 1;
    min-width: 0;
  }
  .v33-dist {
    flex: 0 0 auto;
    font: 700 12px/1 -apple-system, sans-serif;
    color: #0b6ea8;
    background: #eaf3fa;
    padding: 5px 8px;
    border-radius: 6px;
    white-space: nowrap;
  }
}

/* ====================================================================
 * v34 — Chart style picker (mobile Layers sheet)
 * ==================================================================== */
@media (max-width: 740px) {
  .v34-section-label {
    font: 700 11px/1 -apple-system, sans-serif;
    color: #8a96a2;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
    padding-left: 2px;
  }
  .v34-chart-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 4px;
  }
  .v34-chart-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    text-align: left;
    background: #fff;
    border: 1.5px solid #e3e9ef;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 120ms, background 120ms, transform 80ms;
    min-height: 68px;
    box-sizing: border-box;
    width: 100%;
  }
  .v34-chart-card:active {
    transform: scale(0.99);
    background: #f7fafc;
  }
  .v34-chart-card.active {
    border-color: #0b6ea8;
    background: #eef6fb;
  }
  .v34-chart-sw {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid #dfe6ee;
    background: #cfd8e0;
    background-size: cover;
    background-position: center;
  }
  /* Chart style preview swatches — stylized previews so users recognize the look */
  .v34-sw-aho {
    background:
      linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 60%),
      repeating-linear-gradient(45deg, rgba(10,37,64,0.08) 0 2px, transparent 2px 8px),
      linear-gradient(180deg, #dbe8f2 0%, #a9c6de 60%, #7faecb 100%);
  }
  .v34-sw-vicmap {
    background:
      radial-gradient(circle at 30% 30%, rgba(0,0,0,0.15) 0%, transparent 50%),
      radial-gradient(circle at 70% 60%, rgba(255,255,255,0.25) 0%, transparent 55%),
      linear-gradient(135deg, #6fa68c 0%, #3f7a5c 60%, #2e5a43 100%);
  }
  .v34-sw-satellite {
    background:
      radial-gradient(circle at 40% 40%, #4f6b54 0%, transparent 40%),
      radial-gradient(circle at 70% 65%, #c9b68a 0%, transparent 35%),
      linear-gradient(135deg, #3b4e63 0%, #1f3040 100%);
  }
  .v34-sw-chart {
    background:
      linear-gradient(135deg, #f7f4ec 0%, #e6ecf1 50%, #cde0eb 100%);
  }
  .v34-sw-ocean {
    background:
      radial-gradient(ellipse at 50% 60%, #7fb8d7 0%, #4d8cb3 55%, #2e6590 100%);
  }
  .v34-chart-txt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .v34-chart-label {
    font: 700 15px/1.2 -apple-system, sans-serif;
    color: #0a2540;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .v34-chart-active-pill {
    font: 700 10px/1 -apple-system, sans-serif;
    color: #0b6ea8;
    background: #d7e9f4;
    padding: 3px 6px;
    border-radius: 4px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
  }
  .v34-chart-desc {
    font: 500 13px/1.3 -apple-system, sans-serif;
    color: #556573;
  }
  .v34-chart-hint {
    font: 500 12px/1.3 -apple-system, sans-serif;
    color: #8a96a2;
  }
  .v34-chart-tick {
    flex: 0 0 auto;
    font: 700 18px/1 -apple-system, sans-serif;
    color: #0b6ea8;
    min-width: 20px;
    text-align: center;
  }
}

/* ============================================================================
   v34b — iPad / TABLET minimize chips
   v50 fix: tightened upper bound 1280 -> 1194 so real laptops/desktops get
   the clean original view. iPad landscape (1194) and below still get the
   chips; anything 1195px or wider is pixel-identical to the classic desktop.
   Applies only when body.v34-tablet is present (741-1194px, not phone, not
   wide desktop). Adds small collapse chips to three desktop panels
   (#sidebar, #marinePanel, .legend) and a compact "restore" rail for the
   collapsed state. Wide desktop (>=1281) is untouched.

   Core behavior:
     - Each panel gets a v34-min button that adds body.v34-min-sidebar /
       v34-min-marine / v34-min-safety. When set, we collapse that panel to
       0 width (sidebar) or height (marine/legend) and reveal a small tab
       so the user can restore it.
     - Layout adjusts to give the map more room.
   ============================================================================ */

/* Minimize button placed into each panel header. */
.v34-min-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  color: #0a2b4a;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: none; /* hidden by default; shown on tablet */
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  z-index: 50;
  transition: background 120ms, transform 120ms;
}
.v34-min-btn:hover { background: #f4f8fc; }
.v34-min-btn:active { transform: scale(0.96); }

/* Restore pill: a small chip shown when the panel is minimized. */
.v34-restore {
  position: fixed;
  display: none;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 999px;
  color: #0a2b4a;
  font: 600 12.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(10,43,74,0.12);
  cursor: pointer;
  z-index: 900;
}
.v34-restore:hover { background: #f4f8fc; }
.v34-restore .v34-restore-ic {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0b6ea8;
}

/* Activate only in the tablet range. Use a sharper lower bound so phones
   (which went to 740px breakpoint above) are excluded. */
@media (min-width: 741px) and (max-width: 1194px) {
  /* Show the minimize chips on each panel */
  .v34-min-btn { display: inline-flex; }

  /* Top bar is too tight on iPad portrait (810px) with the full preset row
     + drawer buttons + sidebar toggle. Hide the sub-title and the
     “Fishing Chart” accent so the brand stays on one line. */
  .brand h1 .brand-accent { display: none; }
  .brand .sub { display: none; }
  .brand h1 { font-size: 14px; }
  .brand .logo { width: 36px; height: 36px; flex: 0 0 36px; }
  .brand .logo img { width: 36px; height: 36px; }
  /* Compact the preset/drawer buttons a touch so nothing wraps. */
  .preset-btn { padding: 7px 10px; font-size: 12.5px; }
  .drawer-btn { padding: 7px 10px; font-size: 12.5px; }
  .drawer-btn .db-tx { font-size: 12px; }

  /* Ensure the panel containers can host an absolutely-positioned button */
  #sidebar { position: relative; }
  #marinePanel { position: relative; }
  .legend { position: relative; }

  /* Slightly pad the top of panels so the X chip doesn't overlap titles */
  #sidebar > .filters { padding-top: 4px; }
  #marinePanel .marine-head { padding-right: 34px; }
  .legend > h4:first-child { padding-right: 34px; }

  /* Sidebar collapsed: give both grid columns to the map and hide the sidebar.
     We use auto for the first column so the brand area in the topbar doesn't
     get squished into a 0-width track and wrap awkwardly. */
  body.v34-min-sidebar #app {
    grid-template-columns: auto 1fr !important;
  }
  body.v34-min-sidebar #sidebar {
    display: none !important;
  }

  /* Marine panel collapsed: shrink to a thin strip within sidebar; use its
     own hidden rule so its body disappears but the chip can restore it. */
  body.v34-min-marine #marinePanel {
    display: none;
  }

  /* Safety legend collapsed similarly */
  body.v34-min-safety .legend {
    display: none;
  }

  /* Restore chips — appear only when respective panel is minimized */
  body.v34-min-sidebar .v34-restore-sidebar { display: inline-flex; top: 72px; right: 12px; }
  body.v34-min-marine  .v34-restore-marine  { display: inline-flex; top: 110px; right: 12px; }
  body.v34-min-safety  .v34-restore-safety  { display: inline-flex; top: 148px; right: 12px; }

  /* When sidebar is minimized, the restore chips need to sit in the main
     viewport rather than tucked under the sidebar. Override position. */
  body.v34-min-sidebar .v34-restore { right: 12px; }
}

/* Larger desktop (>=1281): the minimize chips and restore rail stay hidden.
   Panels render exactly as before. No rule is needed here because all tablet
   rules are wrapped in the @media block above. */

/* =============================================================================
   v35 — Conditions glanceability
   Big wind + tide readings for on-water glance. Mobile-gated.
   ========================================================================== */
body.v27-mobile .v35-cond {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 2px 0 8px;
}
body.v27-mobile .v35-cond-hero {
  background: linear-gradient(180deg, #eef5fb 0%, #e1ecf5 100%);
  border: 1px solid #cdd9e4;
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
body.v27-mobile .v35-cond-hero.v35-wind-calm   { background: linear-gradient(180deg, #eaf7ee 0%, #d6edde 100%); border-color: #b8dcc5; }
body.v27-mobile .v35-cond-hero.v35-wind-light  { background: linear-gradient(180deg, #eef5fb 0%, #d7e8f4 100%); border-color: #b4cee3; }
body.v27-mobile .v35-cond-hero.v35-wind-fresh  { background: linear-gradient(180deg, #fff4e2 0%, #fbe1bf 100%); border-color: #e9c68b; }
body.v27-mobile .v35-cond-hero.v35-wind-strong { background: linear-gradient(180deg, #fde4e0 0%, #f6c3bc 100%); border-color: #e39a90; }
body.v27-mobile .v35-cond-hero.v35-tide-rising  { background: linear-gradient(180deg, #e6f6fd 0%, #c9e8f6 100%); border-color: #9fd1e9; }
body.v27-mobile .v35-cond-hero.v35-tide-falling { background: linear-gradient(180deg, #fff1e3 0%, #fdd7b2 100%); border-color: #efb37a; }
body.v27-mobile .v35-cond-hero.v35-tide-slack   { background: linear-gradient(180deg, #f2f4f7 0%, #dfe4eb 100%); border-color: #c0c9d4; }

body.v27-mobile .v35-cond-hero-label {
  font: 700 11px/1 -apple-system, system-ui, sans-serif;
  color: #4a5a6a;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 10px;
}
body.v27-mobile .v35-cond-hero-main {
  display: flex;
  align-items: center;
  gap: 14px;
}
body.v27-mobile .v35-wind-arrow {
  width: 54px;
  height: 54px;
  color: #0b3a5c;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s ease;
  flex-shrink: 0;
}
body.v27-mobile .v35-wind-arrow svg { width: 54px; height: 54px; }
body.v27-mobile .v35-tide-arrow {
  font-size: 42px;
  line-height: 1;
  color: #0b3a5c;
  width: 54px;
  text-align: center;
  flex-shrink: 0;
}
body.v27-mobile .v35-tide-rising  .v35-tide-arrow { color: #1e7aa8; }
body.v27-mobile .v35-tide-falling .v35-tide-arrow { color: #c86423; }
body.v27-mobile .v35-tide-slack   .v35-tide-arrow { color: #6b7a89; }

body.v27-mobile .v35-cond-hero-val {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex: 1;
}
body.v27-mobile .v35-big {
  font: 800 56px/1 -apple-system, system-ui, sans-serif;
  color: #0b3a5c;
  letter-spacing: -1.5px;
}
body.v27-mobile .v35-big-txt {
  font: 800 36px/1 -apple-system, system-ui, sans-serif;
  color: #0b3a5c;
  letter-spacing: -0.5px;
}
body.v27-mobile .v35-unit {
  font: 600 18px/1 -apple-system, system-ui, sans-serif;
  color: #4a5a6a;
  margin-left: 2px;
}
body.v27-mobile .v35-cond-hero-dir {
  font: 700 22px/1 -apple-system, system-ui, sans-serif;
  color: #0b3a5c;
  padding: 6px 10px;
  background: rgba(255,255,255,0.55);
  border-radius: 10px;
  letter-spacing: 0.5px;
}
body.v27-mobile .v35-cond-hero-sub {
  margin-top: 12px;
  font: 500 13px/1.35 -apple-system, system-ui, sans-serif;
  color: #3a4a5a;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
body.v27-mobile .v35-cond-hero-sub b { color: #0b3a5c; font-weight: 700; }
body.v27-mobile .v35-dot { color: #9aa6b2; }

body.v27-mobile .v35-cond-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
body.v27-mobile .v35-cond-stat {
  background: #f3f6f9;
  border-radius: 14px;
  padding: 14px;
  border: 1px solid #e4e9ef;
}
body.v27-mobile .v35-cond-stat-label {
  font: 700 10.5px/1 -apple-system, system-ui, sans-serif;
  color: #6b7a89;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  margin-bottom: 6px;
}
body.v27-mobile .v35-cond-stat-val {
  font: 700 26px/1.05 -apple-system, system-ui, sans-serif;
  color: #0b3a5c;
  margin-bottom: 4px;
}
body.v27-mobile .v35-cond-stat-sub {
  font: 500 11.5px/1.3 -apple-system, system-ui, sans-serif;
  color: #6b7a89;
}
body.v27-mobile .v35-cond-shelter {
  background: #fff7ea;
  border: 1px solid #f1dfb8;
  border-radius: 14px;
  padding: 12px 14px;
}
body.v27-mobile .v35-cond-shelter-label {
  font: 700 10.5px/1 -apple-system, system-ui, sans-serif;
  color: #8a6a1e;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  margin-bottom: 6px;
}
body.v27-mobile .v35-cond-shelter-txt {
  font: 500 13px/1.45 -apple-system, system-ui, sans-serif;
  color: #4a3e1e;
}
body.v27-mobile .v35-cond-foot {
  font: 500 11px/1 -apple-system, system-ui, sans-serif;
  color: #8a96a2;
  text-align: center;
  padding-top: 4px;
}

body.v27-mobile .v35-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 14px;
  min-height: 140px;
}
body.v27-mobile .v35-cond-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #d6dfe8;
  border-top-color: #0b6ea8;
  border-radius: 50%;
  animation: v35spin 0.9s linear infinite;
}
@keyframes v35spin { to { transform: rotate(360deg); } }
body.v27-mobile .v35-cond-loading-txt {
  font: 500 13px/1.35 -apple-system, system-ui, sans-serif;
  color: #6b7a89;
}

/* =============================================================================
   v36 — One-handed reach + speed
   Bottom thumb-zone quick bar with 4 big targets. Mobile-only.
   Also repositions the FAB stack and zoom pill so they sit above the bar.
   ========================================================================== */
.v36-thumb { display: none; }  /* Desktop/tablet default: fully hidden */

body.v27-mobile .v36-thumb {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  /* v62: unitless env() fallback was dropping to 0 on some iOS builds, causing
     the bar to sit flush with the home indicator and appear to float when the
     URL bar hid. Use an explicit 0px fallback + GPU-promoted layer to stop
     Safari from repainting the bar every time it recomputes viewport height. */
  padding: 8px 8px calc(env(safe-area-inset-bottom, 0px) + 8px);
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(10,60,100,0.10);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  z-index: var(--z-map-controls);
  transition: transform 220ms ease, opacity 220ms ease;
  transform: translateZ(0);
  will-change: transform;
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
}
body.v27-mobile .v36-thumb-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  padding: 6px 2px;
  border: none;
  background: transparent;
  color: #0b3a5c;
  cursor: pointer;
  border-radius: 12px;
  transition: background-color 120ms ease, transform 80ms ease;
  -webkit-tap-highlight-color: transparent;
}
body.v27-mobile .v36-thumb-btn svg {
  width: 24px; height: 24px;
  color: #0b6ea8;
  stroke: #0b6ea8;
  transition: transform 120ms ease, color 120ms ease;
}
body.v27-mobile .v36-thumb-txt {
  font: 600 10.5px/1 -apple-system, system-ui, sans-serif;
  letter-spacing: 0.15px;
  color: #3a4a5a;
}
body.v27-mobile .v36-thumb-btn:active,
body.v27-mobile .v36-thumb-btn.v36-thumb-press {
  background: rgba(11,110,168,0.10);
  transform: scale(0.96);
}
body.v27-mobile .v36-thumb-btn:active svg,
body.v27-mobile .v36-thumb-btn.v36-thumb-press svg {
  transform: translateY(-1px) scale(1.04);
}
/* Drop-pin button gets an accent when in drop mode */
body.v27-mobile .v36-thumb-btn.v36-thumb-active {
  background: #0b6ea8;
}
body.v27-mobile .v36-thumb-btn.v36-thumb-active svg {
  color: #fff; stroke: #fff;
}
body.v27-mobile .v36-thumb-btn.v36-thumb-active svg circle[fill] { fill: #fff !important; }
body.v27-mobile .v36-thumb-btn.v36-thumb-active .v36-thumb-txt {
  color: #fff;
}

/* ---- Lift existing FABs and zoom pill so the thumb bar doesn't cover them
   The thumb bar is ~72px tall (incl. safe-area). */
body.v27-mobile .v27-fabs {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
}
body.v27-mobile .v27-zoom {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 292px);
}
/* When PWA banner is up, keep the extra offset too */
body.v27-mobile:has(#pwaInstallBanner.visible) .v27-fabs {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 192px);
}
body.v27-mobile:has(#pwaInstallBanner.visible) .v27-zoom {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 396px);
}
/* v36: When PWA banner is up, push thumb bar above it */
body.v27-mobile:has(#pwaInstallBanner.visible) .v36-thumb {
  bottom: 104px;  /* banner height */
}
/* v36: When the bottom sheet is open, hide the thumb bar so it doesn't cover
   sheet content. The sheet's own close X stays accessible. */
body.v27-mobile:has(#v27Sheet.v27-sheet-open) .v36-thumb {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}
/* v36: When mark detail card is open, also hide the thumb bar */
body.v27-mobile:has(#detail:not(.hidden)) .v36-thumb {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}
/* v64.1k (2026-05-08): bottom-nav stays above the hamburger sidebar so the
   "More" tab (and the rest of the bottom-nav) remains visible and tappable
   while the drawer is open. Overrides the bc-mobile-menu-fix.js runtime-
   injected rules:
     body.v27-mobile.bc-mobm-on     #v36Thumb { z-index: var(--z-sheet) !important; }
     body.v27-mobile.bc-mobm-active #v36Thumb { display: none !important; }
   The `html` prefix bumps this rule's specificity from (1,2,1) to (1,2,2) so
   it wins the cascade for both bc-mobm-on AND bc-mobm-active states.
   Stacking with this rule applied:
     map -> #bc-ham-backdrop (z=9500) -> #sidebar (z=11500) -> #v36Thumb (z=12000)
   Sidebar renders UNDERNEATH the bottom-nav. */
html body.v27-mobile.bc-mobm-on #v36Thumb,
html body.v27-mobile.bc-mobm-active #v36Thumb {
  z-index: 12000 !important;
  display: grid !important;
}

/* =============================================================================
   v37 — Share a mark
   ========================================================================== */
/* Share button on detail card \u2014 sits in card head, to the left of close btn.
   Keeps colour palette consistent with the card itself. */
#detailShare.v37-share-btn {
  position: absolute;
  top: 10px;
  right: 50px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #e1e9f1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 120ms ease, transform 80ms ease;
  z-index: 5;
}
#detailShare.v37-share-btn:hover {
  background: rgba(255,255,255,0.14);
}
#detailShare.v37-share-btn:active {
  transform: scale(0.94);
  background: rgba(255,255,255,0.2);
}
#detailShare.v37-share-btn svg { pointer-events: none; }

/* Mobile: share button gets same glassy look as other v27 chrome */
body.v27-mobile #detailShare.v37-share-btn {
  top: 12px;
  right: 58px;
  background: rgba(11,110,168,0.92);
  border: none;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
body.v27-mobile #detailShare.v37-share-btn:active {
  background: rgba(11,110,168,1);
}

/* Shared-pin marker (when a user opens BayCast via a shared link) */
.v37-shared-pin {
  background: transparent !important;
  border: none !important;
}
.v37-shared-pin-inner {
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
  animation: v37sharedPinBob 1.8s ease-in-out infinite;
}
@keyframes v37sharedPinBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ==========================================================================
   v38 — Trip log (sessions & catches)
   Mobile-first modal. Log-catch button next to share button on detail card.
   Desktop uses the same modal, just centered and smaller.
   ========================================================================== */

/* Log-catch button on detail card — sits next to the share button */
#detailLogCatch.v38-catch-btn {
  position: absolute;
  top: 12px;
  right: 92px;       /* close=52, share=12+32=44 → log sits at 92 from right */
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: rgba(34, 34, 44, 0.55);
  color: #e8f1ff;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  z-index: 3;
  -webkit-tap-highlight-color: transparent;
}
#detailLogCatch.v38-catch-btn:hover { background: rgba(34, 34, 44, 0.8); }
#detailLogCatch.v38-catch-btn:active { transform: scale(0.95); }

/* Mobile — solid green for "log catch" so it reads as action-affirmative */
body.v27-mobile #detailLogCatch.v38-catch-btn {
  background: rgba(30, 140, 80, 0.95);
  color: #ffffff;
  width: 40px; height: 40px;
  top: 10px;
  right: 96px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Desktop — keep share button where it was, move log to its left */
@media (min-width: 1001px) {
  #detailLogCatch.v38-catch-btn { right: 92px; top: 12px; }
}

/* ---- Modal (desktop centered, mobile full-screen sheet) ---- */
.v38-modal-root {
  position: fixed; inset: 0;
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  justify-content: center;
}
.v38-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 10, 18, 0.58);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: v38FadeIn 0.18s ease-out;
}
.v38-modal {
  position: relative;
  width: min(92vw, 520px);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: #0f1922;
  color: #e8f1ff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0,0,0,0.3);
  overflow: hidden;
  animation: v38ModalIn 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.v38-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.v38-modal-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
}
.v38-modal-close {
  background: transparent;
  border: 0;
  color: #9ab;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.v38-modal-close:hover { color: #fff; background: rgba(255,255,255,0.06); }
.v38-modal-body {
  padding: 16px 18px 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}

/* Mobile full-screen sheet variant */
body.v27-mobile .v38-modal {
  width: 100vw;
  max-width: 100vw;
  max-height: 100vh;
  height: 100vh;
  border-radius: 0;
  border: 0;
}
body.v27-mobile .v38-modal-head {
  padding-top: calc(env(safe-area-inset-top, 0) + 14px);
}
body.v27-mobile .v38-modal-body {
  padding-bottom: calc(env(safe-area-inset-bottom, 0) + 20px);
}

@keyframes v38FadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes v38ModalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Form ---- */
.v38-catch-form { display: flex; flex-direction: column; gap: 14px; }
.v38-field { display: flex; flex-direction: column; gap: 6px; }
.v38-field-row { display: flex; gap: 12px; }
.v38-field-row .v38-field { flex: 1 1 0; min-width: 0; }
.v38-field label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9ab;
}
.v38-field input[type="number"],
.v38-field input[type="text"],
.v38-field select,
.v38-field textarea {
  width: 100%;
  box-sizing: border-box;
  background: #1a2530;
  color: #e8f1ff;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 12px;
  font-size: 16px; /* iOS: >=16 prevents zoom on focus */
  font-family: inherit;
  outline: none;
}
.v38-field textarea { resize: vertical; min-height: 48px; }
.v38-field input:focus,
.v38-field select:focus,
.v38-field textarea:focus {
  border-color: #3aa5e8;
  box-shadow: 0 0 0 3px rgba(58, 165, 232, 0.18);
}
.v38-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: #d3e4f5;
  font-size: 15px;
  cursor: pointer;
}
.v38-check input { width: 18px; height: 18px; accent-color: #3aa5e8; }
.v38-mark-pill-wrap { margin-top: 2px; }
.v38-mark-pill {
  display: inline-block;
  padding: 8px 12px;
  background: rgba(58, 165, 232, 0.12);
  border: 1px solid rgba(58, 165, 232, 0.3);
  border-radius: 10px;
  font-size: 13px;
  color: #b0d9f5;
}
.v38-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 6px;
}
.v38-btn {
  padding: 11px 18px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  transition: transform 0.1s, background 0.15s;
}
.v38-btn:active { transform: scale(0.97); }
.v38-btn-primary {
  background: linear-gradient(180deg, #1e8c50, #16703f);
  color: #fff;
  box-shadow: 0 2px 6px rgba(30,140,80,0.3);
}
.v38-btn-primary:hover { filter: brightness(1.08); }
.v38-btn-ghost {
  background: rgba(255,255,255,0.06);
  color: #cfd9e4;
}
.v38-btn-ghost:hover { background: rgba(255,255,255,0.1); }
.v38-btn-danger {
  background: rgba(200, 60, 60, 0.15);
  color: #f0a5a5;
  border: 1px solid rgba(200, 60, 60, 0.3);
}
.v38-btn-danger:hover { background: rgba(200, 60, 60, 0.28); color: #fff; }

/* ---- Trip log list ---- */
.v38-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.v38-log-stats {
  font-size: 12px;
  color: #8ca;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.v38-session {
  background: #16212d;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 14px 14px 12px;
  margin-bottom: 12px;
}
.v38-session-active {
  border-color: rgba(30, 180, 100, 0.5);
  box-shadow: 0 0 0 1px rgba(30, 180, 100, 0.25);
}
.v38-row-head { margin-bottom: 10px; }
.v38-row-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.v38-row-title strong { font-size: 15px; color: #ffffff; }
.v38-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.v38-badge-active {
  background: rgba(30, 180, 100, 0.2);
  color: #5ee7a0;
  border: 1px solid rgba(30, 180, 100, 0.4);
}
.v38-row-meta {
  font-size: 12px;
  color: #8ca;
  margin-top: 3px;
}
.v38-catches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.v38-catch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  font-size: 13px;
  position: relative;
}
.v38-catch-sp { font-weight: 600; color: #ffffff; }
.v38-catch-m { color: #b0d9f5; font-variant-numeric: tabular-nums; }
.v38-catch-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 99px;
  background: rgba(58, 165, 232, 0.18);
  color: #8dcbf0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.v38-catch-mark { color: #8ca; font-size: 12px; }
.v38-catch-ts { color: #678; font-size: 11px; margin-left: auto; font-variant-numeric: tabular-nums; }
.v38-catch-del {
  background: transparent;
  border: 0;
  color: #678;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}
.v38-catch-del:hover { color: #f0a5a5; background: rgba(200,60,60,0.1); }
.v38-no-catches {
  color: #8ca;
  font-size: 12px;
  font-style: italic;
  padding: 6px 0 10px;
}
.v38-row-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
  flex-wrap: wrap;
}
.v38-sp-list { color: #b0d9f5; font-size: 12px; flex: 1 1 auto; }
.v38-row-foot .v38-btn { padding: 7px 12px; font-size: 12px; }

/* ---- Empty state ---- */
.v38-empty {
  text-align: center;
  padding: 32px 20px;
  color: #b0c5d8;
}
.v38-empty-icon { font-size: 48px; margin-bottom: 12px; }
.v38-empty h3 { margin: 0 0 6px; color: #ffffff; font-size: 17px; }
.v38-empty p { margin: 0 0 18px; color: #8ca; font-size: 14px; }

/* ==========================================================================
   v39 — Bite forecast
   ========================================================================== */

.v39-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.v39-sp-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8ca;
}
.v39-sp-select {
  background: #1a2530;
  color: #e8f1ff;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  min-width: 160px;
}
.v39-sp-select:focus { border-color: #3aa5e8; }
.v39-loc-chip {
  font-size: 12px;
  color: #b0d9f5;
  background: rgba(58,165,232,0.12);
  padding: 5px 10px;
  border-radius: 99px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.v39-loading {
  text-align: center;
  padding: 40px 20px;
  color: #8ca;
  font-size: 14px;
}
.v39-err {
  padding: 20px;
  text-align: center;
  color: #f0a5a5;
  font-size: 14px;
}

.v39-hero {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}
.v39-hero-now, .v39-hero-peak {
  flex: 1 1 0;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.v39-hero-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.v39-hero-score {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.v39-hero-grade {
  font-size: 13px;
  color: #cfd9e4;
  font-weight: 600;
}

.v39-tl-wrap {
  margin-bottom: 18px;
}
.v39-tl {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 104px;
  padding: 4px 0 22px;
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.05));
  border-radius: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.v39-tl-col {
  flex: 1 1 0;
  min-width: 8px;
  height: var(--h, 40px);
  background: var(--bar, #3aa5e8);
  border-radius: 2px 2px 0 0;
  position: relative;
  transition: opacity 0.15s;
  cursor: help;
}
.v39-tl-col:hover { opacity: 0.85; }
.v39-tl-label {
  position: absolute;
  bottom: -18px;
  left: 0;
  font-size: 10px;
  color: #8ca;
  font-weight: 600;
  white-space: nowrap;
}

.v39-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.v39-chip {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 99px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.v39-chip-fire   { background: rgba(30,180,100,0.18); color: #5ee7a0; }
.v39-chip-steady { background: rgba(58,165,232,0.18); color: #8dcbf0; }
.v39-chip-slow   { background: rgba(232,160,58,0.18); color: #f0c880; }
.v39-chip-quiet  { background: rgba(120,120,140,0.14); color: #a0a8b0; }

.v39-why {
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  padding: 12px 14px 14px;
  margin-bottom: 14px;
}
.v39-why h4 {
  margin: 0 0 8px;
  font-size: 13px;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.v39-why-sub {
  color: #8ca;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  margin-left: 6px;
}
.v39-why ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.v39-why li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: #cfd9e4;
}
.v39-why-v {
  display: inline-block;
  min-width: 36px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 12px;
  text-align: right;
  padding: 2px 6px;
  border-radius: 6px;
}
.v39-why-pos .v39-why-v { color: #5ee7a0; background: rgba(30,180,100,0.12); }
.v39-why-neg .v39-why-v { color: #f0a5a5; background: rgba(200,60,60,0.12); }

.v39-disclaimer {
  font-size: 11px;
  color: #8ca;
  font-style: italic;
  text-align: center;
  padding: 0 8px;
  line-height: 1.5;
}

.v27-menu-btn-feature {
  border: 1px solid rgba(58,165,232,0.3) !important;
  background: linear-gradient(180deg, rgba(58,165,232,0.08), rgba(58,165,232,0.02)) !important;
}
.v27-menu-new {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: rgba(30,180,100,0.24);
  color: #5ee7a0;
  font-size: 9px;
  font-weight: 800;
  border-radius: 99px;
  vertical-align: middle;
  letter-spacing: 0.08em;
  position: relative;
  top: -1px;
}

/* ============================================================================
   v40 — Safety polish: MOB (man overboard) + share position
   ============================================================================ */

/* MOB FAB: red, always at top of FAB column, mobile-only */
.v40-fab-mob {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: #e03838;
  color: #fff;
  box-shadow: 0 2px 10px rgba(224,56,56,0.45), 0 0 0 3px rgba(224,56,56,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.08s ease, box-shadow 0.15s ease;
  touch-action: manipulation;
}
.v40-fab-mob:active {
  transform: scale(0.94);
}
.v40-fab-mob .v40-fab-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #fff;
  line-height: 1;
}
/* Arming ring — shows progress when held */
.v40-fab-mob::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  pointer-events: none;
  transition: border-color 0.1s ease;
}
.v40-fab-mob.v40-arming::before {
  border-color: rgba(255,255,255,0.85);
  animation: v40armPulse 0.9s ease-out forwards;
}
@keyframes v40armPulse {
  0%   { inset: -4px; opacity: 1; }
  100% { inset: -18px; opacity: 0; }
}
.v40-fab-mob.v40-armed {
  animation: v40armedBlink 0.7s ease-in-out infinite alternate;
}
@keyframes v40armedBlink {
  from { background: #e03838; box-shadow: 0 2px 10px rgba(224,56,56,0.45), 0 0 0 3px rgba(224,56,56,0.08); }
  to   { background: #ff4f4f; box-shadow: 0 2px 18px rgba(255,80,80,0.70), 0 0 0 6px rgba(255,80,80,0.18); }
}

/* Hide MOB FAB entirely on desktop/tablet shell (we add a header version instead) */
body:not(.v27-mobile) .v40-fab-mob { display: none; }

/* Desktop header MOB button — unobtrusive red chip next to Share */
.v40-hdr-mob {
  background: #e03838;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(224,56,56,0.25);
  transition: transform 0.08s ease, box-shadow 0.15s ease;
}
.v40-hdr-mob:hover { box-shadow: 0 2px 8px rgba(224,56,56,0.45); }
.v40-hdr-mob:active { transform: scale(0.96); }
body.v27-mobile .v40-hdr-mob { display: none; }

/* Full-screen red overlay */
.v40-mob-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-debug); /* above install banners and PWA toasts */
  background: linear-gradient(180deg, #c82828 0%, #7a1010 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: calc(env(safe-area-inset-top, 0) + 16px) 18px calc(env(safe-area-inset-bottom, 0) + 20px);
  animation: v40OverlayIn 0.2s ease-out;
  overflow-y: auto;
}
/* Desktop: centered panel, not full bleed */
body:not(.v27-mobile) .v40-mob-overlay {
  padding: 0;
  align-items: center;
  justify-content: center;
  background: rgba(60, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}
body:not(.v27-mobile) .v40-mob-overlay > * {
  max-width: 520px;
  width: calc(100vw - 40px);
}
body:not(.v27-mobile) .v40-mob-overlay .v40-mob-head,
body:not(.v27-mobile) .v40-mob-overlay .v40-mob-sub,
body:not(.v27-mobile) .v40-mob-overlay .v40-mob-card,
body:not(.v27-mobile) .v40-mob-overlay .v40-mob-btn,
body:not(.v27-mobile) .v40-mob-overlay .v40-mob-status {
  background-clip: padding-box;
}
body:not(.v27-mobile) .v40-mob-overlay::before {
  content: "";
  position: absolute;
  inset: 50% 50% auto auto;
  width: min(560px, calc(100vw - 40px));
  height: auto;
}
/* Wrap the panel so desktop has a bordered card */
body:not(.v27-mobile) .v40-mob-overlay {
  /* inner card container is achieved via direct children styling above */
}
@keyframes v40OverlayIn {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}

.v40-mob-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.v40-mob-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin: 0;
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
  line-height: 1.1;
  white-space: nowrap;
}
@media (min-width: 380px) {
  .v40-mob-title { font-size: 26px; }
}
.v40-mob-sub {
  font-size: 14px;
  opacity: 0.9;
  margin: 0 0 14px;
}
.v40-mob-close {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.v40-mob-card {
  background: rgba(255,255,255,0.14);
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 14px;
  padding: 14px;
  margin: 0 0 12px;
}
.v40-mob-card h4 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  opacity: 0.85;
  text-transform: uppercase;
}
.v40-mob-coord {
  font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  word-break: break-word;
}
@media (min-width: 380px) {
  .v40-mob-coord { font-size: 18px; }
}
.v40-mob-coord-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.v40-mob-coord-row:last-child { margin-bottom: 0; }
.v40-mob-coord-lbl {
  flex: 0 0 42px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0.7;
  text-transform: uppercase;
  white-space: nowrap;
}
.v40-mob-coord-row span:last-child { flex: 1; }
.v40-mob-age {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 6px;
}

.v40-mob-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  border: none;
  background: #fff;
  color: #b01010;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.04em;
  cursor: pointer;
  margin-bottom: 10px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: transform 0.08s ease;
}
.v40-mob-btn:active { transform: scale(0.98); }
.v40-mob-btn.v40-mob-btn-000 {
  background: #fff4f4;
  color: #a01010;
  border: 2px solid rgba(255,255,255,0.5);
}
.v40-mob-btn.v40-mob-btn-ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.5);
}

.v40-mob-status {
  font-size: 13px;
  opacity: 0.85;
  text-align: center;
  min-height: 20px;
  margin-top: 4px;
}

/* ============================================================================
   v41 — Critical fixes: banner clip, bite from detail, station disclosure,
         MOB sizing, species dedupe styles
   ============================================================================ */

/* Hide PWA install banner while any v38/v39 modal is open so it does not
   clip the bottom of the modal. v40 overlay is at z-index 2B already. */
body:has(.v38-modal-root) .pwa-banner,
html:has(.v38-modal-root) .pwa-banner {
  transform: translateY(140%) !important;
  pointer-events: none !important;
  visibility: hidden;
}

/* Bite-forecast button on detail card — sits to the left of the log-catch button */
#detailBiteForecast.v41-bite-btn {
  position: absolute;
  top: 12px;
  right: 136px;       /* close=52, share=12+32=44, log=92 → bite=136 */
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: rgba(34, 34, 44, 0.55);
  color: #e8f1ff;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  z-index: 3;
  -webkit-tap-highlight-color: transparent;
}
#detailBiteForecast.v41-bite-btn:hover { background: rgba(34, 34, 44, 0.8); }
#detailBiteForecast.v41-bite-btn:active { transform: scale(0.95); }

/* Mobile — solid amber for bite forecast so it reads as information */
body.v27-mobile #detailBiteForecast.v41-bite-btn {
  background: rgba(220, 140, 20, 0.95);
  color: #ffffff;
  width: 40px; height: 40px;
  top: 10px;
  right: 144px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

@media (min-width: 1001px) {
  #detailBiteForecast.v41-bite-btn { right: 136px; top: 12px; }
}

/* v41: Tide station disclosure chip in bite forecast controls */
.v39-stn-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(11, 110, 168, 0.12);
  color: #0b6ea8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-left: 8px;
  white-space: nowrap;
}

/* v42: MOB FAB moved OFF the right FAB stack into bottom-LEFT corner so it
   cannot be hit by accidental taps aimed at Locate/Layers/Drop. Circle shape
   restored to preserve emergency-button visual distinctiveness. */
body.v27-mobile .v40-fab-mob {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0) + 16px);
  bottom: calc(env(safe-area-inset-bottom, 0) + 88px); /* sit above the v36 thumb-bar (~72px) */
  width: 52px;
  height: 52px;
  border-radius: 50%;      /* circle — emergency affordance, differentiated from squircle FABs */
  margin: 0;
  z-index: var(--z-map-controls);           /* above thumb bar (1000) but below overlays */
}
body.v27-mobile .v40-fab-mob .v40-fab-label {
  font-size: 10px;
}
/* Hide MOB when any sheet, modal, detail panel, or overlay is open */
body.v27-mobile:has(.v38-modal-root) .v40-fab-mob,
body.v27-mobile:has(#detail:not(.hidden)) .v40-fab-mob,
body.v27-mobile:has(.v27-sheet.v27-sheet-open) .v40-fab-mob,
body.v27-mobile:has(.v40-mob-overlay) .v40-fab-mob,
body.v27-mobile:has(.mm-panel.open) .v40-fab-mob,
body.v27-mobile:has(.mm-dlg-wrap) .v40-fab-mob {
  display: none;
}

/* v42: pressure chip affordance — small chevron hint */
.v42-bay-more {
  margin-left: 4px;
  font-size: 10px;
  font-weight: 800;
  color: #6b3b9b;
  opacity: 0.55;
  letter-spacing: -0.04em;
}
/* v42: trend-building placeholder styling (dots, not an arrow) */
.v42-trend-building {
  color: #9aa3b1;
  opacity: 0.7;
  font-weight: 700;
}

/* ============================================================================
   v41 — BayCast branding toggle (desktop pixel-identical, mobile shows BayCast)
   ============================================================================ */

/* Default (desktop): show desktop text, hide mobile text */
.brand-mobile-only { display: none; }
.brand-desktop-only { display: inline; }

/* Mobile: flip — show BayCast + "by Reedy's Rigs" */
body.v27-mobile .brand-mobile-only { display: inline; }
body.v27-mobile .brand-desktop-only { display: none; }

/* Mobile sub line always visible when branded */
body.v27-mobile .brand .sub {
  display: block;
  font-size: 10px;
  line-height: 1.2;
  opacity: 0.75;
  margin: 1px 0 0 0;
  letter-spacing: 0.02em;
}
body.v27-mobile .brand h1 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* v41 brand pill (mobile-only): sits next to the v27-logo chip */
.v41-brand-pill { display: none; }
body.v27-mobile .v41-brand-pill {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  top: calc(env(safe-area-inset-top, 0) + 12px);
  left: 64px;          /* logo chip is 12+44 = 56, add 8px gap */
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.1);
  z-index: var(--z-map-controls);
  pointer-events: none;
  line-height: 1;
}
body.v27-mobile .v41-brand-pill .v41-brand-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #0b6ea8;
}
body.v27-mobile .v41-brand-pill .v41-brand-by {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #5a6470;
  margin-top: 2px;
}

/* Hide the brand pill when modals, sheets, or overlays are open — keeps the
   same surfaces clean that already hide the logo chip. */
body.v27-mobile:has(.leaflet-popup) .v41-brand-pill,
body.v27-mobile:has(.v25-fr-wrap.visible) .v41-brand-pill,
body.v27-mobile:has(#v25_firstRun.visible) .v41-brand-pill,
body.v27-mobile:has(.mm-dlg-wrap) .v41-brand-pill,
body.v27-mobile:has(.mm-panel.open) .v41-brand-pill,
body.v27-mobile:has(.pwa-overlay-card) .v41-brand-pill,
body.v27-mobile:has(.v38-modal-root) .v41-brand-pill,
body.v27-mobile:has(#detail:not(.hidden)) .v41-brand-pill,
body.v27-mobile:has(.v27-sheet.v27-sheet-open) .v41-brand-pill {
  display: none;
}

/* ============================================================================
   v41 — Bay conditions strip (mobile-only): water temps PPB N/S + WP N/S + hPa
   ============================================================================ */

/* Hidden on desktop entirely */
.v41-bay { display: none; }

body.v27-mobile .v41-bay {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0) + 66px); /* sits under the top-right v27-cond pill */
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.1);
  border: 0;
  z-index: 999;
  font-size: 11px;
  line-height: 1;
  color: #222830;
  cursor: pointer;
  max-width: calc(100vw - 24px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.v27-mobile .v41-bay:active { transform: scale(0.98); }

body.v27-mobile .v41-bay-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
body.v27-mobile .v41-bay-grp-lbl {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #5a6470;
  text-transform: uppercase;
}
body.v27-mobile .v41-bay-seg {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
body.v27-mobile .v41-bay-lbl {
  font-size: 9px;
  font-weight: 700;
  color: #0b6ea8;
  letter-spacing: 0.02em;
}
body.v27-mobile .v41-bay-val {
  font-size: 12px;
  font-weight: 700;
  color: #0b3d5f;
}
body.v27-mobile .v41-bay-seg-p .v41-bay-val { color: #6b3b9b; }
body.v27-mobile .v41-bay-unit {
  font-size: 9px;
  font-weight: 600;
  color: #6b3b9b;
  opacity: 0.75;
  margin-left: 1px;
}
body.v27-mobile .v41-bay-trend {
  font-size: 11px;
  font-weight: 800;
  color: #6b3b9b;
}
body.v27-mobile .v41-bay-sep {
  color: #c2c9d3;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.9;
}

/* Hide on mobile when overlays/sheets/detail are open (keep the surface calm) */
body.v27-mobile:has(.leaflet-popup) .v41-bay,
body.v27-mobile:has(.v25-fr-wrap.visible) .v41-bay,
body.v27-mobile:has(#v25_firstRun.visible) .v41-bay,
body.v27-mobile:has(.mm-dlg-wrap) .v41-bay,
body.v27-mobile:has(.mm-panel.open) .v41-bay,
body.v27-mobile:has(.pwa-overlay-card) .v41-bay,
body.v27-mobile:has(.v38-modal-root) .v41-bay,
body.v27-mobile:has(#detail:not(.hidden)) .v41-bay,
body.v27-mobile:has(.v27-sheet.v27-sheet-open) .v41-bay {
  display: none;
}

/* ---- Bay conditions detail modal content ---- */
.v41-bay-detail { display: flex; flex-direction: column; gap: 10px; }
.v41-bay-section-lbl {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8c97a6;
  margin-top: 4px;
}
.v41-bay-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.v41-bay-card {
  background: rgba(11, 110, 168, 0.08);
  border: 1px solid rgba(11, 110, 168, 0.18);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.v41-bay-card-wide { grid-column: 1 / -1; background: rgba(107, 59, 155, 0.08); border-color: rgba(107, 59, 155, 0.2); }
.v41-bay-card-lbl {
  font-size: 11px;
  font-weight: 700;
  color: #5a6470;
  letter-spacing: 0.02em;
}
.v41-bay-card-val {
  font-size: 26px;
  font-weight: 800;
  color: #0b3d5f;
  letter-spacing: -0.01em;
}
.v41-bay-card-wide .v41-bay-card-val { color: #4a2775; }
.v41-bay-card-sub { font-size: 11px; color: #6b7380; }
.v41-bay-card-trend { font-weight: 800; color: #6b3b9b; margin-left: 4px; }

.v41-bay-tips { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.v41-bay-tip {
  font-size: 13px;
  line-height: 1.4;
  color: #2a3140;
  padding: 8px 10px;
  background: rgba(11,110,168,0.04);
  border-left: 3px solid rgba(11,110,168,0.35);
  border-radius: 6px;
}
.v41-bay-src {
  font-size: 11px;
  color: #8c97a6;
  margin-top: 8px;
  text-align: center;
}

/* ============================================================================
   v43 — Catch photos + drift tracker styles
   ============================================================================ */
.v43-photo-row { display: flex; flex-direction: column; gap: 6px; }
.v43-photo-lbl {
  font-size: 12px; font-weight: 600; color: #5a6470; letter-spacing: 0.01em;
}
.v43-photo-box {
  display: flex; flex-direction: column; gap: 8px;
}
.v43-photo-add {
  align-self: flex-start;
  background: rgba(11, 110, 168, 0.08);
  border: 1px dashed rgba(11, 110, 168, 0.35);
  color: #0b6ea8;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease;
}
.v43-photo-add:hover { background: rgba(11, 110, 168, 0.14); }
.v43-photo-add:active { transform: scale(0.98); }
.v43-photo-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.v43-photo-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: #0b0e14;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.v43-photo-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.v43-thumb-rm {
  position: absolute; top: 2px; right: 2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.v43-thumb-rm:hover { background: rgba(0,0,0,0.72); }

/* Drift banner shown over trip-log detail */
.v43-drift-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  margin: 8px 0;
  background: rgba(107, 59, 155, 0.08);
  border-left: 3px solid rgba(107, 59, 155, 0.5);
  border-radius: 6px;
  font-size: 13px;
  color: #2a3140;
}
.v43-drift-banner b { color: #6b3b9b; }

/* ===== v44 — Accuracy logging + offline forecast ===== */
.v44-catch-fc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 146, 43, 0.14);
  color: #9a4f0b;
  border-radius: 999px;
  border: 1px solid rgba(255, 146, 43, 0.3);
  letter-spacing: 0.02em;
}
.v44-offline-banner {
  display: block;
  margin: 0 0 10px;
  padding: 6px 10px;
  background: #fff6e0;
  border: 1px solid #f2c96b;
  border-radius: 8px;
  color: #7a5510;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.02em;
}

/* ===== v45 — First-run tours + MOB drill ===== */
.v45-tour {
  position: fixed;
  z-index: var(--z-sheet);
  max-width: 260px;
  background: #1b2330;
  color: #fff;
  border-radius: 14px;
  padding: 12px 14px 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  font-size: 13px;
  line-height: 1.4;
  animation: v45-tour-in 0.24s ease-out;
}
@keyframes v45-tour-in {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.v45-tour.v45-tour-out {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s, transform .2s;
}
.v45-tour-title {
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
  color: #ffce6b;
}
.v45-tour-body { color: #d6dde8; }
.v45-tour-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.v45-tour-ok {
  background: #ffa82b;
  color: #1b2330;
  border: none;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.v45-tour-ok:active { transform: translateY(1px); }
.v45-tour-arrow { display: none; }

/* MOB drill overlay */
.v45-drill-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  background: rgba(10, 16, 24, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.v45-drill-card {
  background: #fff;
  border-radius: 16px;
  max-width: 440px;
  width: 100%;
  padding: 20px 20px 16px;
  box-shadow: 0 16px 42px rgba(0,0,0,0.4);
}
.v45-drill-banner {
  background: #ff9f2b;
  color: #3a2100;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 10px;
  font-size: 12px;
  border: 2px solid #d17b00;
}
.v45-drill-title {
  margin: 0 0 10px;
  font-size: 20px;
  color: #1b2330;
}
.v45-drill-coords {
  background: #f4f6fa;
  border-radius: 10px;
  padding: 10px 12px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 14px;
  color: #2a3140;
  line-height: 1.6;
}
.v45-drill-k {
  display: inline-block;
  min-width: 44px;
  color: #6b7684;
  font-family: inherit;
  font-weight: 600;
  margin-right: 6px;
}
.v45-drill-ts { color: #6b7684; }
.v45-drill-steps {
  margin: 12px 0 4px;
  padding-left: 20px;
  color: #2a3140;
  font-size: 14px;
  line-height: 1.5;
}
.v45-drill-steps li { margin-bottom: 4px; }
.v45-drill-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.v45-drill-close {
  background: #1b2330;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
}

/* ===== v46 — Location picker (hidden debug) ===== */
/* v47: moved to LEFT side + bumped z-index so it sits above zoom/GPS/layers */
.v46-trigger {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0) + 130px);
  left: 10px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(20, 30, 50, 0.92);
  color: #ffce6b;
  border: 1.5px solid rgba(255, 206, 107, 0.7);
  font-size: 18px;
  z-index: var(--z-panel); /* above Leaflet controls (1000) and safety pill (1100) */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.v46-trigger:active { transform: scale(0.95); }

.v46-picker {
  position: fixed;
  inset: 0;
  background: rgba(11, 27, 43, 0.7);
  z-index: var(--z-sheet);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.v46-picker-card {
  background: #1b2330;
  color: #fff;
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  animation: v46PickerIn 0.26s cubic-bezier(.2,.7,.3,1);
}
@keyframes v46PickerIn {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.v46-picker-head {
  padding: 14px 16px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.v46-picker-head strong { color: #ffce6b; letter-spacing: 0.02em; }
.v46-picker-close {
  background: transparent;
  color: #d6dde8;
  border: none;
  font-size: 22px;
  width: 32px; height: 32px;
  cursor: pointer;
}
.v46-picker-body { padding: 10px 14px 16px; overflow: auto; }
.v46-picker-hint {
  color: #a8b2c1;
  font-size: 12.5px;
  line-height: 1.45;
  margin-bottom: 10px;
}
.v46-picker-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.v46-loc {
  background: #263044;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.06);
  padding: 10px 12px;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.v46-loc:hover, .v46-loc:active { background: #2e3a52; }
.v46-loc-name { font-weight: 700; font-size: 14px; }
.v46-loc-zone { color: #8fa0b8; font-size: 11px; margin-top: 2px; }
.v46-picker-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.v48-copy-diag, .v48-clear-diag {
  background: #2b6cb0;
  color: #fff;
  border: none;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  flex: 1 1 45%;
}
.v48-clear-diag {
  background: transparent;
  color: #d6dde8;
  border: 1px solid rgba(255,255,255,0.15);
  font-weight: 500;
}
.v48-diag-status {
  font-size: 12px;
  color: #9fb3cc;
  margin-bottom: 8px;
  min-height: 16px;
  word-break: break-word;
}
.v46-audit {
  flex: 1;
  background: #ffa82b;
  color: #1b2330;
  border: none;
  padding: 10px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}
.v46-hide {
  background: transparent;
  color: #d6dde8;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
}
.v46-audit-loading {
  color: #ffce6b;
  font-size: 13px;
  padding: 14px;
  text-align: center;
}
.v46-audit-header {
  color: #ffce6b;
  font-weight: 700;
  margin: 8px 0 4px;
  letter-spacing: 0.02em;
  font-size: 13px;
}
.v46-audit-moon {
  color: #d6dde8;
  font-size: 12px;
  margin-bottom: 10px;
  padding: 6px 10px;
  background: #263044;
  border-radius: 6px;
}
.v46-audit-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  color: #d6dde8;
}
.v46-audit-tbl th {
  text-align: left;
  padding: 6px 4px;
  color: #8fa0b8;
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.v46-audit-tbl td {
  padding: 6px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  vertical-align: top;
}
.v46-audit-tbl .v46-zone {
  color: #8fa0b8;
  font-size: 10px;
}
.v46-audit-note {
  color: #8fa0b8;
  font-size: 10.5px;
  margin-top: 8px;
  text-align: center;
}
.v46-err { color: #ff7b7b; }

/* ============================================================================
   v51 — Sidebar panels (desktop only, >=1195px)
   When body.v51-sidebar-panels is set, #marinePanel and .legend have been
   reparented into #sidebar. Style them as tidy sidebar sections instead of
   floating overlays on the map. Tablet/mobile are untouched.
   ========================================================================== */
body.v51-sidebar-panels #sidebar #marinePanel,
body.v51-sidebar-panels #sidebar .legend {
  position: relative !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  /* sidebar is a flex column — stop items from being shrunk to fit */
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  align-self: stretch !important;
  margin: 12px 0 0 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03), 0 0 0 1px rgba(255,255,255,0.05) !important;
  background: rgba(14, 22, 36, 0.55) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: auto !important;
  transform: none !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}
body.v51-sidebar-panels #sidebar #marinePanel .marine-body {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: grid !important;
}

/* Marine / Morning conditions — tighter padding inside sidebar */
body.v51-sidebar-panels #sidebar #marinePanel {
  padding: 12px 14px 14px !important;
}
body.v51-sidebar-panels #sidebar #marinePanel .marine-head {
  padding: 0 !important;
  margin-bottom: 8px;
}
body.v51-sidebar-panels #sidebar #marinePanel #marineTitle {
  font-size: 14px !important;
  margin: 0 0 2px !important;
}
body.v51-sidebar-panels #sidebar #marinePanel #marineSub {
  font-size: 11.5px !important;
  margin: 0 !important;
  opacity: 0.75;
}
body.v51-sidebar-panels #sidebar #marinePanel .marine-body {
  padding: 0 !important;
}

/* Legend — tighter padding, smaller heads */
body.v51-sidebar-panels #sidebar .legend {
  padding: 12px 14px !important;
}
body.v51-sidebar-panels #sidebar .legend h4 {
  font-size: 12px !important;
  margin: 6px 0 6px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}
body.v51-sidebar-panels #sidebar .legend h4:first-child {
  margin-top: 0 !important;
}
body.v51-sidebar-panels #sidebar .legend .row {
  font-size: 11.5px !important;
  padding: 3px 0 !important;
}
body.v51-sidebar-panels #sidebar .legend hr {
  margin: 10px 0 !important;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.08);
}
body.v51-sidebar-panels #sidebar .legend .warn {
  font-size: 10px !important;
  line-height: 1.45;
  opacity: 0.7;
  margin: 8px 0 0 !important;
}

/* Map column is now free of those overlays — no z-index conflicts */
body.v51-sidebar-panels #mapWrap #marinePanel,
body.v51-sidebar-panels #mapWrap .legend {
  display: none !important;
}

/* Safety: sidebar needs to be scrollable now that it holds more content */
body.v51-sidebar-panels #sidebar {
  overflow-y: auto;
}

/* When v51 is active, stop the mark list from growing to fill and showing
   its own internal scrollbar — the whole sidebar scrolls as one column. */
body.v51-sidebar-panels #sidebar #markList {
  flex: 0 0 auto !important;
  overflow: visible !important;
  max-height: none !important;
  margin-top: 6px;
}

/* --- v51 collapse chevron on Morning Conditions + Safety Marks --- */
body.v51-sidebar-panels .v51-collapse-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  color: var(--ink-dim, #8aa);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  z-index: 3;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}
body.v51-sidebar-panels .v51-collapse-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--accent, #ffce3b);
}
body.v51-sidebar-panels .v51-collapse-btn.is-collapsed svg {
  transform: rotate(-90deg);
}
body.v51-sidebar-panels .v51-collapse-btn svg {
  transition: transform 200ms ease;
}

/* Collapsed state: hide body, keep head row visible. */
body.v51-sidebar-panels #sidebar #marinePanel.v51-collapsed .marine-body {
  display: none !important;
}
body.v51-sidebar-panels #sidebar #marinePanel.v51-collapsed {
  padding-bottom: 12px !important;
}

/* For the legend, everything EXCEPT the first h4 collapses. */
body.v51-sidebar-panels #sidebar .legend.v51-collapsed > *:not(h4):not(.v51-collapse-btn) {
  display: none !important;
}
body.v51-sidebar-panels #sidebar .legend.v51-collapsed > h4 ~ h4 {
  display: none !important;
}
body.v51-sidebar-panels #sidebar .legend.v51-collapsed {
  padding-bottom: 12px !important;
}

/* Pad panel heads so the chevron doesn't overlap titles */
body.v51-sidebar-panels #sidebar #marinePanel .marine-head,
body.v51-sidebar-panels #sidebar .legend > h4:first-child {
  padding-right: 34px !important;
}

/* --- Make the existing <details.layer-group> chevrons obvious --- */
body.v51-sidebar-panels .layer-group > summary::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.65;
  transition: transform 180ms ease, opacity 180ms ease;
  flex-shrink: 0;
  align-self: center;
}
body.v51-sidebar-panels .layer-group[open] > summary::after {
  transform: rotate(-135deg);
  opacity: 0.9;
}
body.v51-sidebar-panels .layer-group > summary:hover::after {
  opacity: 1;
}

/* ---- Vwhater.11f: 5-day wind/tide charts ---- */
.bc-5d-block {
  margin: 14px 0 4px;
}
.bc-5d-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim, #94a3b8);
  margin: 0 2px 6px;
}
.bc-5d-chart {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #1b2e44;
}

/* ============================================================================
   Vwhater.11g — Statewide wind view FAB + toast
   ============================================================================ */
.vw11g-fab {
  position: fixed;
  /* Mobile: above the thumb bar (~64px) and Navigate/Drop pin row (~48px). */
  bottom: 184px;
  right: 12px;
  z-index: var(--z-sheet);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.90);
  background: linear-gradient(135deg, #1E78C9, #0E4D8A);
  color: #fff;
  box-shadow: 0 3px 14px rgba(10,40,80,0.45), 0 0 0 3px rgba(30,120,201,0.12);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Desktop: smaller, tucked in the top-right corner so it doesn't fight the sidebar */
body:not(.v27-mobile) .vw11g-fab {
  position: fixed;
  top: 84px;
  right: 14px;
  bottom: auto;
  width: 48px;
  height: 48px;
  font-size: 13px;
  z-index: var(--z-sheet);
}
.vw11g-fab:active { transform: scale(0.94); }
.vw11g-fab:hover { box-shadow: 0 2px 14px rgba(30,120,201,0.60), 0 0 0 4px rgba(30,120,201,0.14); }
/* Hide when a sheet/modal is open so it doesn't float over dialogs */
body.v27-mobile:has(.v27-sheet.v27-sheet-open) .vw11g-fab,
body.v27-mobile:has(.v38-modal-root) .vw11g-fab,
body.v27-mobile:has(.v40-mob-overlay) .vw11g-fab,
body.v27-mobile:has(.mm-panel.open) .vw11g-fab,
body.v27-mobile:has(.mm-dlg-wrap) .vw11g-fab { display: none; }

.vw11g-hdr {
  background: linear-gradient(135deg, #1E78C9, #0E4D8A);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  margin-right: 6px;
  transition: background 0.15s ease;
}
.vw11g-hdr:hover { background: linear-gradient(135deg, #2589DA, #125FA3); }

.vw11g-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  background: rgba(15, 30, 50, 0.92);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 22px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.30);
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
  z-index: var(--z-auth);
}
.vw11g-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================================
   Vwhater.11i — Statewide Wind LIST sheet
   ============================================================================ */
.vw11i-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  top: auto;
  max-height: 82vh;
  background: #0b1a2a;
  color: #eaf2ff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.55);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(.22,.9,.32,1);
  z-index: var(--z-sheet);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.vw11i-sheet.open { transform: translateY(0); }

.vw11i-head {
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
  background: linear-gradient(180deg, #0e2540, #0b1a2a);
}
.vw11i-title { font-size: 17px; font-weight: 800; letter-spacing: 0.01em; }
.vw11i-sub   { font-size: 12px; color: #7fa3c9; margin-top: 2px; font-weight: 500; }
.vw11i-close {
  position: absolute; top: 8px; right: 10px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: none; color: #eaf2ff;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.vw11i-close:active { background: rgba(255,255,255,0.16); }

.vw11i-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 24px;
}

.vw11i-section { margin-top: 14px; }
.vw11i-section:first-child { margin-top: 6px; }
.vw11i-sec-head {
  padding: 6px 18px 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: #9cbfdf;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.vw11i-sec-count {
  background: rgba(30,120,201,0.20);
  color: #8cc8ff;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 10.5px;
  letter-spacing: 0;
  font-weight: 700;
  text-transform: none;
}

.vw11i-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
  transition: background 0.12s ease;
}
.vw11i-row:active { background: rgba(30,120,201,0.18); }
.vw11i-arrow {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  transform-origin: center;
}
.vw11i-name {
  font-size: 14px;
  font-weight: 600;
  color: #dfeaf8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vw11i-val {
  font-size: 14px;
  font-weight: 500;
  min-width: 74px;
  text-align: right;
}
.vw11i-val b { font-weight: 800; font-size: 15px; }

/* Desktop: show the sheet as a right-side panel not a bottom sheet */
@media (min-width: 900px) {
  .vw11i-sheet {
    left: auto;
    right: 0; top: 70px; bottom: 20px;
    width: 360px;
    max-height: none;
    border-radius: 14px 0 0 14px;
    transform: translateX(100%);
  }
  .vw11i-sheet.open { transform: translateX(0); }
}

/* ============================================================================
   Vwhater.11k — Fishing Info sheet (VFA regs + regional autumn tips)
   ============================================================================ */

/* Desktop header pill — sits next to vw11gHdr */
.vw11k-hdr {
  background: linear-gradient(135deg, #1E78C9, #0E4D8A);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 10px 6px 8px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  margin-right: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease;
}
.vw11k-hdr:hover { background: linear-gradient(135deg, #2589DA, #125FA3); }
.vw11k-hdr .vw11k-hdr-ico { font-size: 13px; line-height: 1; }
.vw11k-hdr .vw11k-hdr-txt { font-size: 12px; letter-spacing: 0.04em; }

/* The full sheet — mobile bottom sheet, desktop right drawer */
.vw11k-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  pointer-events: none;
}
.vw11k-sheet .vw11k-backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 15, 28, 0.55);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
.vw11k-sheet.open .vw11k-backdrop { opacity: 1; pointer-events: auto; }

.vw11k-sheet .vw11k-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: auto;
  max-height: 90vh;
  background: #0b1a2a;
  color: #eaf2ff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.60);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(.22,.9,.32,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
}
.vw11k-sheet.open .vw11k-panel { transform: translateY(0); }

.vw11k-head {
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, #0e2540, #0b1a2a);
  position: relative;
  flex: 0 0 auto;
}
.vw11k-title { display: flex; flex-direction: column; gap: 2px; }
.vw11k-title-main { font-size: 17px; font-weight: 800; letter-spacing: 0.01em; }
.vw11k-title-sub  { font-size: 12px; color: #7fa3c9; font-weight: 500; }
.vw11k-close {
  position: absolute; top: 8px; right: 10px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: none; color: #eaf2ff;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.vw11k-close:active { background: rgba(255,255,255,0.16); }

/* Tabs — horizontally scrolling */
.vw11k-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: #0a1725;
  flex: 0 0 auto;
}
.vw11k-tabs::-webkit-scrollbar { display: none; }
.vw11k-tab {
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: #b9d1ea;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.vw11k-tab:hover { background: rgba(255,255,255,0.08); color: #eaf2ff; }
.vw11k-tab.active {
  background: linear-gradient(135deg, #1E78C9, #0E4D8A);
  color: #fff;
  border-color: #1E78C9;
}
.vw11k-tab-ico { font-size: 13px; }

/* Content */
.vw11k-content {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.vw11k-body {
  padding: 14px 18px 28px;
  max-width: 840px;
  margin: 0 auto;
}

.vw11k-h3 {
  margin: 18px 0 8px;
  font-size: 13px;
  font-weight: 800;
  color: #9cbfdf;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.vw11k-h3:first-child { margin-top: 4px; }
.vw11k-h4 {
  margin: 18px 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: #7fa3c9;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.vw11k-p { font-size: 13px; color: #dceaf7; line-height: 1.45; margin: 6px 0; }
.vw11k-p-dim { font-size: 12px; color: #7fa3c9; line-height: 1.45; margin: 6px 0; }
.vw11k-p-strong { font-size: 13px; color: #f2ae4b; font-weight: 700; margin: 10px 0 2px; }
.vw11k-src { margin-top: 16px; }
.vw11k-src a, .vw11k-p a { color: #8cc8ff; text-decoration: underline; }

.vw11k-blurb {
  font-size: 13.5px;
  color: #dceaf7;
  line-height: 1.4;
  margin: 4px 0 12px;
  padding: 10px 12px;
  background: rgba(30,120,201,0.10);
  border-left: 3px solid #1E78C9;
  border-radius: 6px;
}

/* Closures */
.vw11k-closures { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.vw11k-closure {
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid #1E78C9;
  background: rgba(30,120,201,0.08);
}
.vw11k-closure.warn { border-left-color: #e08a3c; background: rgba(224,138,60,0.10); }
.vw11k-closure.ok   { border-left-color: #49a676; background: rgba(73,166,118,0.10); }
.vw11k-closure-head { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; color: #eaf2ff; }
.vw11k-closure-pill {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.10em;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  color: #b9d1ea;
  text-transform: uppercase;
}
.vw11k-closure.warn .vw11k-closure-pill { background: rgba(224,138,60,0.25); color: #ffc98a; }
.vw11k-closure.ok   .vw11k-closure-pill { background: rgba(73,166,118,0.22); color: #88e0b2; }
.vw11k-closure-detail { font-size: 12.5px; color: #c9dcee; margin-top: 4px; line-height: 1.45; }

/* Tables */
.vw11k-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vw11k-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  color: #dceaf7;
  min-width: 520px;
}
.vw11k-table.vw11k-table-sm { min-width: 0; }
.vw11k-table th, .vw11k-table td {
  padding: 7px 8px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  vertical-align: top;
}
.vw11k-table th {
  background: rgba(255,255,255,0.04);
  color: #9cbfdf;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  position: sticky; top: 0; z-index: 1;
}
.vw11k-table .vw11k-sp { font-weight: 700; color: #eaf2ff; white-space: nowrap; }
.vw11k-table .vw11k-sz { color: #b9d1ea; white-space: nowrap; }
.vw11k-table .vw11k-bag { color: #8cc8ff; font-weight: 600; white-space: nowrap; }
.vw11k-table .vw11k-note { color: #9bb5cc; font-size: 12px; line-height: 1.4; }

.vw11k-ul { margin: 6px 0 2px 20px; padding: 0; }
.vw11k-ul li { font-size: 12.5px; color: #dceaf7; line-height: 1.5; margin: 3px 0; }

/* MNP zones */
.vw11k-mnp { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 4px; }
.vw11k-mnp-group {
  padding: 8px 12px 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
}
.vw11k-mnp-group h4 {
  margin: 0 0 4px; font-size: 12px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #f2ae4b;
}
.vw11k-mnp-group ul { margin: 0 0 0 16px; padding: 0; }
.vw11k-mnp-group li { font-size: 12px; color: #c9dcee; line-height: 1.45; margin: 3px 0; }

.vw11k-details {
  margin: 6px 0 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
}
.vw11k-details summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: #8cc8ff;
  list-style: revert;
}
.vw11k-details[open] summary { margin-bottom: 4px; }

/* Species cards (per-region) */
.vw11k-map-btn {
  display: inline-block;
  background: linear-gradient(135deg, #1E78C9, #0E4D8A);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  margin: 0 0 14px;
  letter-spacing: 0.02em;
}
.vw11k-map-btn:hover { background: linear-gradient(135deg, #2589DA, #125FA3); }
.vw11k-map-btn:active { transform: scale(0.97); }

.vw11k-sp-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.vw11k-sp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.vw11k-sp-ico {
  font-size: 20px;
  line-height: 1;
  width: 28px;
  text-align: center;
}
.vw11k-sp-name {
  font-size: 14.5px;
  font-weight: 800;
  color: #eaf2ff;
  letter-spacing: 0.01em;
}
.vw11k-sp-tips {
  margin: 4px 0 0 20px;
  padding: 0;
  list-style: disc;
}
.vw11k-sp-tips li {
  font-size: 13px;
  color: #c9dcee;
  line-height: 1.5;
  margin: 4px 0;
}

.vw11k-srcs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.vw11k-src-chip {
  display: inline-block;
  background: rgba(30,120,201,0.12);
  color: #8cc8ff;
  border: 1px solid rgba(30,120,201,0.30);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.3;
}
.vw11k-src-chip:hover {
  background: rgba(30,120,201,0.22);
  color: #b5dbff;
}

/* Desktop — render as right-side drawer panel */
@media (min-width: 900px) {
  .vw11k-sheet .vw11k-panel {
    left: auto;
    right: 0; top: 70px; bottom: 20px;
    width: 540px;
    max-width: 92vw;
    max-height: none;
    border-radius: 14px 0 0 14px;
    transform: translateX(100%);
  }
  .vw11k-sheet.open .vw11k-panel { transform: translateX(0); }
  .vw11k-body { padding: 18px 22px 40px; }
  .vw11k-mnp { grid-template-columns: 1fr 1fr; }
}

/* vw11k mobile — convert bag limits table to stacked cards on small screens */
@media (max-width: 699px) {
  .vw11k-table-wrap { overflow-x: visible; }
  .vw11k-table { min-width: 0; display: block; border-collapse: collapse; }
  .vw11k-table thead { display: none; }
  .vw11k-table tbody { display: block; }
  .vw11k-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 10px;
    padding: 10px 0 9px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .vw11k-table td { display: block; padding: 0; border: none; }
  .vw11k-table .vw11k-sp { grid-column: 1 / 2; font-size: 14px; font-weight: 700; color: #eaf2ff; }
  .vw11k-table .vw11k-sz {
    grid-column: 2 / 3;
    font-size: 11.5px; color: #b9d1ea; font-weight: 600;
    white-space: nowrap;
    background: rgba(255,255,255,0.05);
    padding: 2px 7px; border-radius: 999px;
    align-self: start;
    margin-top: 1px;
  }
  .vw11k-table .vw11k-bag {
    grid-column: 1 / 3;
    font-size: 12.5px; color: #8cc8ff; font-weight: 600;
  }
  .vw11k-table .vw11k-bag::before { content: 'Bag: '; color: #7fa3c9; font-weight: 500; }
  .vw11k-table .vw11k-note {
    grid-column: 1 / 3;
    font-size: 12px; color: #9bb5cc; line-height: 1.4;
  }
  .vw11k-table .vw11k-note:empty { display: none; }
  /* Licence table stays inline */
  .vw11k-table.vw11k-table-sm { display: table; }
  .vw11k-table.vw11k-table-sm thead { display: table-header-group; }
  .vw11k-table.vw11k-table-sm tbody { display: table-row-group; }
  .vw11k-table.vw11k-table-sm tr { display: table-row; padding: 0; }
  .vw11k-table.vw11k-table-sm td,
  .vw11k-table.vw11k-table-sm th { display: table-cell; padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .vw11k-table.vw11k-table-sm td::before { content: none; }
}

/* ============================================================================
   Vwhater.11l — Statewide Wind Panel
   ============================================================================ */

.vw11l-backdrop {
  position: fixed; inset: 0;
  background: rgba(4, 14, 28, 0.55);
  backdrop-filter: blur(3px);
  z-index: var(--z-sheet);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.vw11l-backdrop.open { opacity: 1; pointer-events: auto; }

.vw11l-sheet {
  position: fixed;
  z-index: var(--z-sheet);
  background: linear-gradient(180deg, #0b1a2a 0%, #112438 100%);
  color: #e6eef8;
  display: flex;
  flex-direction: column;
  box-shadow: -16px 0 40px rgba(0,0,0,0.45);
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
}

/* Desktop: slide in from right, fixed width */
@media (min-width: 700px) {
  .vw11l-sheet {
    top: 0; right: 0; bottom: 0;
    width: 480px;
    max-width: 95vw;
    transform: translateX(110%);
  }
  .vw11l-sheet.open { transform: translateX(0); }
}

/* Mobile: slide up from bottom, 90vh */
@media (max-width: 699px) {
  .vw11l-sheet {
    left: 0; right: 0; bottom: 0;
    height: 90vh;
    border-radius: 18px 18px 0 0;
    transform: translateY(110%);
  }
  .vw11l-sheet.open { transform: translateY(0); }
}

.vw11l-hdr {
  position: relative;
  padding: 14px 52px 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, #0f2236 0%, #0b1a2a 100%);
}
.vw11l-hdr-title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 18px; letter-spacing: -0.01em;
}
.vw11l-hdr-emo { font-size: 22px; }
.vw11l-hdr-sub {
  font-size: 12px; color: #94a9c2; margin-top: 2px;
}
.vw11l-close, .vw11l-refresh {
  position: absolute; top: 10px;
  background: rgba(255,255,255,0.08);
  color: #e6eef8;
  border: none; border-radius: 50%;
  width: 32px; height: 32px;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.vw11l-close { right: 10px; }
.vw11l-refresh { right: 48px; font-size: 16px; }
.vw11l-close:hover, .vw11l-refresh:hover {
  background: rgba(255,255,255,0.16);
}

.vw11l-body {
  flex: 1; overflow-y: auto;
  padding: 14px 16px 28px;
  -webkit-overflow-scrolling: touch;
}

.vw11l-loading {
  padding: 40px 16px; text-align: center;
  color: #94a9c2; font-size: 14px;
}

/* Summary strip */
.vw11l-summary {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.vw11l-sum-chip {
  flex: 1 1 auto;
  min-width: 110px;
  padding: 10px 12px;
  border-radius: 12px;
  color: #0b1a2a;
  font-weight: 700;
  display: flex; flex-direction: column;
}
.vw11l-sum-label {
  font-size: 10px; opacity: 0.85;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.vw11l-sum-val {
  font-size: 20px; line-height: 1; margin-top: 4px;
}
.vw11l-sum-card {
  flex: 1 1 140px; min-width: 140px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column;
}
.vw11l-sum-calm { border-color: rgba(53,194,107,0.35); }
.vw11l-sum-title {
  font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a9c2;
}
.vw11l-sum-sub {
  font-size: 13px; margin-top: 3px;
  color: #e6eef8; font-weight: 600;
}

/* Region groups */
.vw11l-group {
  margin-bottom: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: hidden;
}
.vw11l-group-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(30,120,201,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap;
}
.vw11l-group-emo { font-size: 18px; }
.vw11l-group-title {
  font-weight: 700; font-size: 14px;
  flex: 1 1 auto;
}
.vw11l-group-avg {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px; font-weight: 700;
  color: #0b1a2a;
}
.vw11l-group-count {
  font-size: 11px; color: #94a9c2;
}

.vw11l-rows {
  display: flex; flex-direction: column;
}
.vw11l-row {
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  gap: 8px;
  align-items: center;
  padding: 9px 12px;
  border-top: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
  transition: background .12s;
}
.vw11l-row:first-child { border-top: none; }
.vw11l-row:hover, .vw11l-row:active {
  background: rgba(30,120,201,0.12);
}
.vw11l-name {
  font-size: 13px; font-weight: 600; color: #e6eef8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vw11l-arrow {
  font-size: 18px; line-height: 1;
  display: inline-block;
  transform-origin: center;
}
.vw11l-speed {
  padding: 3px 8px;
  border-radius: 6px;
  color: #0b1a2a;
  font-size: 12px; font-weight: 800;
  text-align: center;
  min-width: 52px;
}
.vw11l-meta {
  display: flex; gap: 6px;
  font-size: 11px; color: #94a9c2;
  white-space: nowrap;
  justify-content: flex-end;
}
.vw11l-dir { color: #e6eef8; font-weight: 600; }
.vw11l-gust { color: #f39c39; font-weight: 600; }

.vw11l-foot {
  font-size: 11px; color: #94a9c2;
  padding: 10px 4px 4px;
  text-align: center;
}

/* Mobile tweak: make rows a bit more compact, meta can wrap */
@media (max-width: 520px) {
  .vw11l-row {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "name arrow speed" "meta meta meta";
    row-gap: 4px;
  }
  .vw11l-name { grid-area: name; }
  .vw11l-arrow { grid-area: arrow; }
  .vw11l-speed { grid-area: speed; }
  .vw11l-meta { grid-area: meta; justify-content: flex-start; }
}

/* ============================================================================
   Vwhater.11m — Regional Auto-Tip (top-left toast)
   ============================================================================ */

.vw11m-tip {
  position: fixed;
  left: 12px;
  top: 88px;
  z-index: var(--z-sheet);
  max-width: 360px;
  min-width: 260px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(11,26,42,0.95), rgba(17,36,56,0.95));
  color: #e6eef8;
  border: 1px solid rgba(30,120,201,0.35);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  transform: translateX(-120%);
  opacity: 0;
  transition: transform .32s cubic-bezier(.2,.7,.2,1), opacity .2s;
  pointer-events: none;
}
.vw11m-tip.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.vw11m-tip-emo {
  font-size: 26px;
  line-height: 1;
  flex: 0 0 auto;
}
.vw11m-tip-body {
  flex: 1 1 auto;
  min-width: 0;
}
.vw11m-tip-label {
  font-weight: 700;
  font-size: 13px;
  color: #e6eef8;
  letter-spacing: -0.01em;
}
.vw11m-tip-short {
  font-size: 11.5px;
  color: #94a9c2;
  margin-top: 2px;
  line-height: 1.35;
}
.vw11m-tip-more {
  background: #1E78C9;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.01em;
  transition: background .15s;
}
.vw11m-tip-more:hover { background: #2289df; }
.vw11m-tip-close {
  background: transparent;
  color: #94a9c2;
  border: none;
  font-size: 14px;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 6px;
  transition: background .15s, color .15s;
}
.vw11m-tip-close:hover { background: rgba(255,255,255,0.08); color: #e6eef8; }

/* Mobile: pin to top, tighter */
@media (max-width: 520px) {
  .vw11m-tip {
    left: 8px; right: 8px;
    top: 76px;
    max-width: unset;
    padding: 9px 10px;
    gap: 8px;
  }
  .vw11m-tip-emo { font-size: 22px; }
  .vw11m-tip-label { font-size: 12.5px; }
  .vw11m-tip-short { font-size: 11px; }
  .vw11m-tip-more { padding: 5px 8px; font-size: 10.5px; }
}

/* ============================================================================
   Vwhater.11n — Hide legacy VIC FAB on mobile
   The big "VIC" button (old vw11g statewide-wind toggle) is redundant now that
   State winds lives in the More menu and the desktop header. Keep it visible
   on desktop for now as a quick toggle, but remove it from mobile where it
   crowds the map.
   ============================================================================ */
/* 2026-04-27: Brett removed VIC/BAY button on all devices.
   State winds still accessible via More menu. */
.vw11g-fab,
#vw11gFab,
.vw11g-hdr,
#vw11gHdr {
  display: none !important;
}

/* =============================================================================
   Vwhater.11n — Mobile 5-day chart redesign (cards replace SVG line charts)
   Only applies when body.v27-mobile. Desktop keeps the original Willyweather
   style bc-charts.js SVG (pixel-identical per user rule).
   ============================================================================= */
body.v27-mobile .bc-5d-block .bc-5d-head { display: none !important; }
body.v27-mobile .bc-5d-block { margin: 0 0 14px !important; }

body.v27-mobile .bcm-card {
  background: linear-gradient(180deg, #0f1d2d 0%, #0c1828 100%);
  border: 1px solid rgba(90, 140, 200, .18);
  border-radius: 14px;
  padding: 12px 10px 10px;
  color: #e4eef7;
  font-family: -apple-system, Segoe UI, Roboto, sans-serif;
}
body.v27-mobile .bcm-hdr {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px;
}
body.v27-mobile .bcm-title {
  font-size: 14px; margin: 0; color: #cfe0f1; font-weight: 700;
  letter-spacing: .4px;
}
body.v27-mobile .bcm-sub { font-size: 11px; color: #7e9ab7; font-weight: 600; }

body.v27-mobile .bcm-bestpill {
  background: rgba(95,209,138,.10);
  border: 1px solid rgba(95,209,138,.45);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  color: #dff0e6;
  margin: 0 0 10px;
  text-align: center;
}
body.v27-mobile .bcm-bestpill .bcm-best-k {
  font-size: 10px; letter-spacing: 1.2px; color: #9fc6b2; font-weight: 800;
}
body.v27-mobile .bcm-bestpill strong { color: #ffffff; font-weight: 800; }
body.v27-mobile .bcm-bestpill .bcm-best-val {
  color: #f3fbf5; font-weight: 700; font-variant-numeric: tabular-nums;
}

body.v27-mobile .bcm-daygrid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px;
}
body.v27-mobile .bcm-day {
  background: rgba(30, 60, 95, .30);
  border: 1px solid rgba(100, 160, 220, .14);
  border-radius: 10px;
  padding: 8px 2px 7px;
  text-align: center;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  transition: transform .08s ease, background .15s ease;
}
body.v27-mobile .bcm-day:active { transform: scale(.97); }
body.v27-mobile .bcm-day.bcm-today {
  background: rgba(30, 120, 201, .22);
}
body.v27-mobile .bcm-day.bcm-sel {
  outline: 2px solid rgba(120, 200, 255, .5);
}
body.v27-mobile .bcm-daylbl {
  font-size: 10px; color: #7ea6c8; font-weight: 800;
  letter-spacing: .6px;
}
body.v27-mobile .bcm-today .bcm-daylbl { color: #cfe4f5; }
body.v27-mobile .bcm-daydate {
  font-size: 12px; color: #d5e4f1; font-weight: 700; margin-top: 1px;
  line-height: 1.1;
}
body.v27-mobile .bcm-big {
  font-size: 24px; font-weight: 800; line-height: 1.05; margin: 4px 0 0;
  font-variant-numeric: tabular-nums;
}
body.v27-mobile .bcm-unit {
  font-size: 10px; color: #8aa6be; font-weight: 700;
  letter-spacing: .4px; margin-top: 1px;
}
body.v27-mobile .bcm-arrow {
  font-size: 18px; line-height: 1; margin: 4px auto 0;
  display: inline-block;
}
body.v27-mobile .bcm-dir {
  font-size: 11px; color: #b7cee1; font-weight: 800;
  letter-spacing: .4px; margin-top: 2px;
}

/* Tide strip */
body.v27-mobile .bcm-tidegrid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px;
}
body.v27-mobile .bcm-tday {
  background: rgba(30, 60, 95, .30);
  border: 1px solid rgba(100, 160, 220, .14);
  border-radius: 10px;
  padding: 7px 3px 6px;
  text-align: center;
}
body.v27-mobile .bcm-tday.bcm-today { background: rgba(30, 120, 201, .22); }
body.v27-mobile .bcm-tide-h {
  color: #5fb2ec; font-weight: 800; font-size: 15px; margin-top: 4px;
  font-variant-numeric: tabular-nums; line-height: 1.05;
}
body.v27-mobile .bcm-tide-l {
  color: #ffb97a; font-weight: 800; font-size: 15px; margin-top: 5px;
  font-variant-numeric: tabular-nums; line-height: 1.05;
}
body.v27-mobile .bcm-tide-h span, body.v27-mobile .bcm-tide-l span {
  font-size: 10px; color: #8aa6be; font-weight: 700; margin-left: 1px;
}
body.v27-mobile .bcm-tide-t {
  font-size: 10px; color: #a6c2da; font-weight: 700;
  letter-spacing: .3px; line-height: 1;
}

/* Detail strip (today hour-by-hour) */
body.v27-mobile .bcm-detail {
  margin-top: 10px;
  background: rgba(30, 60, 95, .20);
  border: 1px solid rgba(100, 160, 220, .10);
  border-radius: 10px;
  padding: 8px 6px 6px;
}
body.v27-mobile .bcm-detail-hdr {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
body.v27-mobile .bcm-detail-lbl {
  font-size: 11px; color: #8fb6d8; font-weight: 800; letter-spacing: .6px;
}
body.v27-mobile .bcm-detail-avg {
  font-size: 11px; color: #a6c2da; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
body.v27-mobile .bcm-scrubhint {
  font-size: 10px; color: #7a97b3; text-align: center; margin-top: 2px;
}

body.v27-mobile .bcm-legend {
  display: flex; justify-content: space-around; gap: 6px;
  margin-top: 8px; padding: 0 2px;
}
body.v27-mobile .bcm-legend span {
  font-size: 10.5px; color: #9ab5d0; display: flex; align-items: center;
  gap: 4px; font-weight: 600;
}
body.v27-mobile .bcm-legend em {
  width: 10px; height: 10px; border-radius: 3px; display: inline-block;
  font-style: normal;
}
body.v27-mobile .bcm-empty {
  padding: 14px; text-align: center; color: #8fb6d8; font-size: 12px;
}

/* Vwhater.11n · wind-against-tide chop badge on day cards */
body.v27-mobile .bcm-day { position: relative; }
body.v27-mobile .bcm-day.bcm-chop { box-shadow: inset 0 0 0 1.5px rgba(255, 84, 112, .55); }
body.v27-mobile .bcm-chop-badge {
  position: absolute; top: -6px; right: -4px;
  background: #ff5470; color: #10131c;
  font-size: 9.5px; font-weight: 800;
  padding: 2px 5px; border-radius: 8px;
  letter-spacing: .3px; line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
  white-space: nowrap;
}
body.v27-mobile .bcm-legend em[style*="#ff5470"] {
  border-radius: 999px;
}

/* Desktop 5-day chart · chop marker (bc-charts.js exposes .bc-5d-chop-label) */
.bc-5d-chop-label {
  display: inline-block;
  background: #ff5470; color: #10131c;
  font-size: 10px; font-weight: 800;
  padding: 2px 6px; border-radius: 8px;
  margin-left: 6px;
  vertical-align: middle;
}

/* =============================================================================
   Vwhater.11n2 — Readable-for-50 desktop cards + mobile size bump
   Brett: "view that, I'm fifty years old, I need glasses". The desktop 5-day
   charts are now the big-card layout (same HTML as mobile) with larger type.
   Mobile cards also get a size bump. All rules here are NOT gated on
   body.v27-mobile so they apply everywhere the .bcm-desktop class is set.
   ============================================================================= */

/* ---- Mobile size bump (non-desktop .bcm-card) --- */
body.v27-mobile .bcm-big { font-size: 30px !important; }
body.v27-mobile .bcm-daylbl { font-size: 12px !important; }
body.v27-mobile .bcm-daydate { font-size: 14px !important; }
body.v27-mobile .bcm-unit { font-size: 11px !important; }
body.v27-mobile .bcm-arrow { font-size: 22px !important; }
body.v27-mobile .bcm-dir { font-size: 13px !important; }
body.v27-mobile .bcm-title { font-size: 16px !important; }
body.v27-mobile .bcm-sub { font-size: 12px !important; }
body.v27-mobile .bcm-bestpill { font-size: 15px !important; padding: 8px 14px !important; }
body.v27-mobile .bcm-bestpill .bcm-best-k { font-size: 11px !important; }
body.v27-mobile .bcm-chop-badge { font-size: 11px !important; padding: 3px 7px !important; top: -8px !important; }
body.v27-mobile .bcm-tide-h, body.v27-mobile .bcm-tide-l { font-size: 17px !important; }
body.v27-mobile .bcm-tide-t { font-size: 11px !important; }
body.v27-mobile .bcm-legend span { font-size: 12px !important; }
body.v27-mobile .bcm-legend em { width: 12px !important; height: 12px !important; }
body.v27-mobile .bcm-detail-lbl { font-size: 13px !important; }
body.v27-mobile .bcm-detail-avg { font-size: 13px !important; }
body.v27-mobile .bcm-day { padding: 10px 2px 9px !important; }
body.v27-mobile .bcm-tday { padding: 9px 3px 8px !important; }

/* ---- Desktop variant (.bcm-card.bcm-desktop) ---- */
.bcm-card.bcm-desktop {
  background: linear-gradient(180deg, #0f1d2d 0%, #0c1828 100%);
  border: 1px solid rgba(90, 140, 200, .22);
  border-radius: 14px;
  padding: 16px 16px 14px;
  color: #e4eef7;
  font-family: -apple-system, Segoe UI, Roboto, sans-serif;
}
.bcm-card.bcm-desktop .bcm-hdr {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
.bcm-card.bcm-desktop .bcm-title {
  font-size: 20px; margin: 0; color: #eaf3fb; font-weight: 800;
  letter-spacing: .4px;
}
.bcm-card.bcm-desktop .bcm-sub { font-size: 14px; color: #8faac4; font-weight: 600; }

.bcm-card.bcm-desktop .bcm-bestpill {
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 18px;
  color: #dff0e6;
  margin: 0 0 14px;
  text-align: center;
  border-width: 1px; border-style: solid;
}
.bcm-card.bcm-desktop .bcm-bestpill .bcm-best-k {
  font-size: 12px; letter-spacing: 1.4px; color: #9fc6b2; font-weight: 800;
}
.bcm-card.bcm-desktop .bcm-bestpill strong { color: #ffffff; font-weight: 800; font-size: 18px; }
.bcm-card.bcm-desktop .bcm-bestpill .bcm-best-val {
  color: #f3fbf5; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 18px;
}

.bcm-card.bcm-desktop .bcm-daygrid,
.bcm-card.bcm-desktop .bcm-tidegrid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
}
.bcm-card.bcm-desktop .bcm-day,
.bcm-card.bcm-desktop .bcm-tday {
  background: rgba(30, 60, 95, .30);
  border: 1px solid rgba(100, 160, 220, .14);
  border-radius: 12px;
  padding: 14px 6px 12px;
  text-align: center;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform .08s ease, background .15s ease;
  position: relative;
}
.bcm-card.bcm-desktop .bcm-day:hover { background: rgba(30, 60, 95, .50); }
.bcm-card.bcm-desktop .bcm-day:active { transform: scale(.98); }
.bcm-card.bcm-desktop .bcm-day.bcm-today,
.bcm-card.bcm-desktop .bcm-tday.bcm-today { background: rgba(30, 120, 201, .22); }
.bcm-card.bcm-desktop .bcm-day.bcm-sel { outline: 2px solid rgba(120, 200, 255, .55); }
.bcm-card.bcm-desktop .bcm-day.bcm-chop { box-shadow: inset 0 0 0 2px rgba(255, 84, 112, .6); }

.bcm-card.bcm-desktop .bcm-daylbl {
  font-size: 13px; color: #9ebedd; font-weight: 800; letter-spacing: .8px;
}
.bcm-card.bcm-desktop .bcm-today .bcm-daylbl { color: #e0efff; }
.bcm-card.bcm-desktop .bcm-daydate {
  font-size: 15px; color: #e6eef7; font-weight: 700; margin-top: 2px;
}
.bcm-card.bcm-desktop .bcm-big {
  font-size: 44px; font-weight: 800; line-height: 1.05; margin: 8px 0 0;
  font-variant-numeric: tabular-nums;
}
.bcm-card.bcm-desktop .bcm-unit {
  font-size: 13px; color: #9ebedd; font-weight: 700; letter-spacing: .5px; margin-top: 3px;
}
.bcm-card.bcm-desktop .bcm-arrow {
  font-size: 30px; line-height: 1; margin: 8px auto 0; display: inline-block;
}
.bcm-card.bcm-desktop .bcm-dir {
  font-size: 15px; color: #d5e4f1; font-weight: 800; letter-spacing: .5px; margin-top: 3px;
}

/* Tide cells */
.bcm-card.bcm-desktop .bcm-tide-h { color: #5fb2ec; font-weight: 800; font-size: 24px; margin-top: 8px; font-variant-numeric: tabular-nums; line-height: 1.05; }
.bcm-card.bcm-desktop .bcm-tide-l { color: #ffb97a; font-weight: 800; font-size: 24px; margin-top: 8px; font-variant-numeric: tabular-nums; line-height: 1.05; }
.bcm-card.bcm-desktop .bcm-tide-h span, .bcm-card.bcm-desktop .bcm-tide-l span {
  font-size: 13px; color: #9ebedd; font-weight: 700; margin-left: 2px;
}
.bcm-card.bcm-desktop .bcm-tide-t {
  font-size: 13px; color: #b7cfe3; font-weight: 700; letter-spacing: .3px; line-height: 1.2; margin-top: 3px;
}

/* Chop badge */
.bcm-card.bcm-desktop .bcm-chop-badge {
  position: absolute; top: -10px; right: -6px;
  background: #ff5470; color: #10131c;
  font-size: 13px; font-weight: 800;
  padding: 4px 10px; border-radius: 10px;
  letter-spacing: .3px; line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
  white-space: nowrap;
}

/* Detail (hour-by-hour) */
.bcm-card.bcm-desktop .bcm-detail {
  margin-top: 14px;
  background: rgba(30, 60, 95, .20);
  border: 1px solid rgba(100, 160, 220, .14);
  border-radius: 12px;
  padding: 12px 12px 10px;
}
.bcm-card.bcm-desktop .bcm-detail-hdr {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.bcm-card.bcm-desktop .bcm-detail-lbl {
  font-size: 15px; color: #b7cfe3; font-weight: 800; letter-spacing: .6px;
}
.bcm-card.bcm-desktop .bcm-detail-avg {
  font-size: 15px; color: #e4eef7; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Legend */
.bcm-card.bcm-desktop .bcm-legend {
  display: flex; justify-content: space-around; gap: 10px;
  margin-top: 12px; padding: 0 4px;
}
.bcm-card.bcm-desktop .bcm-legend span {
  font-size: 13px; color: #b7cfe3; display: flex; align-items: center;
  gap: 6px; font-weight: 700;
}
.bcm-card.bcm-desktop .bcm-legend em {
  width: 14px; height: 14px; border-radius: 4px; display: inline-block; font-style: normal;
}

/* Empty state */
.bcm-card.bcm-desktop .bcm-empty {
  padding: 30px; text-align: center; color: #b7cfe3; font-size: 16px;
}

/* Hide the legacy "5-day wind/tide" heading that app.js injects when the
   card (which carries its own header) is used. We detect it with :has(). */
.bc-5d-block:has(.bcm-card.bcm-desktop) .bc-5d-head { display: none; }
.bc-5d-block:has(.bcm-card.bcm-desktop) { margin-bottom: 14px; }

/* Desktop cards inside narrow detail panel: make cards smaller but still
   readable. Use container queries by falling back to a narrower variant via
   a wrapper class. We target the panel container ID directly. */
.detail-panel #bcWind5d .bcm-card.bcm-desktop .bcm-big,
.mark-detail #bcWind5d .bcm-card.bcm-desktop .bcm-big,
.right-panel #bcWind5d .bcm-card.bcm-desktop .bcm-big {
  font-size: 34px;
}
.detail-panel #bcWind5d .bcm-card.bcm-desktop .bcm-daylbl,
.mark-detail #bcWind5d .bcm-card.bcm-desktop .bcm-daylbl,
.right-panel #bcWind5d .bcm-card.bcm-desktop .bcm-daylbl { font-size: 12px; }

/* When the card lives in a detail panel (any reasonable wrapper < 480px),
   use @container if supported. Fallback: constrain max padding. */
.bcm-card.bcm-desktop { container-type: inline-size; }
@container (max-width: 520px) {
  .bcm-card.bcm-desktop .bcm-big { font-size: 30px; }
  .bcm-card.bcm-desktop .bcm-arrow { font-size: 24px; }
  .bcm-card.bcm-desktop .bcm-day { padding: 10px 4px 10px; }
  .bcm-card.bcm-desktop .bcm-tide-h,
  .bcm-card.bcm-desktop .bcm-tide-l { font-size: 19px; }
  .bcm-card.bcm-desktop .bcm-daylbl { font-size: 11px; letter-spacing: .4px; }
  .bcm-card.bcm-desktop .bcm-daydate { font-size: 13px; }
  .bcm-card.bcm-desktop .bcm-unit { font-size: 11px; }
  .bcm-card.bcm-desktop .bcm-dir { font-size: 12px; }
  .bcm-card.bcm-desktop .bcm-daygrid,
  .bcm-card.bcm-desktop .bcm-tidegrid { gap: 5px; }
  .bcm-card.bcm-desktop { padding: 12px 10px 10px; }
  .bcm-card.bcm-desktop .bcm-bestpill { font-size: 15px; padding: 8px 14px; }
  .bcm-card.bcm-desktop .bcm-bestpill strong,
  .bcm-card.bcm-desktop .bcm-bestpill .bcm-best-val { font-size: 15px; }
  .bcm-card.bcm-desktop .bcm-title { font-size: 17px; }
  .bcm-card.bcm-desktop .bcm-sub { font-size: 12px; }
  .bcm-card.bcm-desktop .bcm-detail-lbl,
  .bcm-card.bcm-desktop .bcm-detail-avg { font-size: 13px; }
  .bcm-card.bcm-desktop .bcm-chop-badge { font-size: 11px; padding: 3px 7px; top: -8px; }
  .bcm-card.bcm-desktop .bcm-legend span { font-size: 11px; }
}

/* ============================================================================
   Hard Refresh button (Vwhater.23) — clears SW + caches, forces fresh load
   ============================================================================ */
.bc-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid #f6c23b;
  background: linear-gradient(180deg, #2a1f0a, #1a1405);
  color: #f6c23b;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.15;
  cursor: pointer;
  min-height: 34px;
  white-space: nowrap;
  transition: background 0.15s, box-shadow 0.15s, transform 0.08s;
}
.bc-refresh-btn:hover {
  background: linear-gradient(180deg, #3a2d10, #231a08);
  box-shadow: 0 0 0 2px rgba(246, 194, 59, 0.18);
}
.bc-refresh-btn:active {
  transform: translateY(1px);
}
.bc-refresh-btn.is-busy {
  opacity: 0.7;
  pointer-events: none;
}
.bc-refresh-btn .bc-rf-ic {
  font-size: 15px;
  display: inline-block;
  transform: translateY(-0.5px);
}
.bc-refresh-btn.is-busy .bc-rf-ic {
  animation: bc-rf-spin 0.8s linear infinite;
}
@keyframes bc-rf-spin {
  from { transform: rotate(0deg) translateY(-0.5px); }
  to   { transform: rotate(360deg) translateY(-0.5px); }
}
/* On narrow screens: icon only */
@media (max-width: 480px) {
  .bc-refresh-btn .bc-rf-tx { display: none; }
  .bc-refresh-btn { padding: 7px 9px; }
}

/* ============================================================================
   v45 — MOBILE THUMB-FRIENDLY OVERRIDES (Apr 26 2026)
   Bug hunt found: primary mode buttons rendered at 10.5px on iPhone SE, 6 small
   tap targets in the top-right (☰ ⚙ × etc), and 11.5px monetisation links.
   Rules: Speed/Safety/Usability — anglers tap on a moving boat with cold hands.
   Min 13px text + 40px tap targets on every actionable element on mobile.
   ============================================================================ */
@media (max-width: 740px) {
  /* Primary mode buttons — Fish Now / Navigate / Structure / Plan Trip / Squid Mode */
  .preset-btn {
    padding: 9px 12px !important;
    font-size: 13px !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
  }

  /* Top-right utility buttons (☰ menu, ⚙ settings, × close, etc) */
  .drawer-btn,
  .dev-btn,
  body.v27-mobile button[aria-label*="menu" i],
  body.v27-mobile button[aria-label*="settings" i],
  body.v27-mobile button[aria-label*="close" i] {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
  }

  /* Sign in button — gateway to Pro, must be solid */
  body.v27-mobile button.signin-btn,
  body.v27-mobile [data-action="signin"],
  body.v27-mobile button:where([class*="signin"]) {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
  }

  /* Monetisation back-link to reedysrigs.com */
  a[href*="reedysrigs.com"],
  a[href*="reedysrigs"] {
    font-size: 13px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center;
    padding: 4px 6px;
  }

  /* "Rules change — always check VFA" safety nudge — must be readable */
  .vfa-nudge,
  span:has(> a[href*="vfa.vic"]),
  body.v27-mobile a[href*="vfa.vic"] {
    font-size: 13px !important;
  }

  /* "by Reedy's Rigs" subtitle */
  body.v27-mobile .brand-mobile-only,
  body.v27-mobile .sub .brand-mobile-only {
    font-size: 12px !important;
  }

  /* Map cluster pins / chart marks — bigger thumb targets */
  body.v27-mobile .leaflet-marker-icon {
    min-width: 36px !important;
    min-height: 36px !important;
  }

  /* Filter/region labels and similar small UI text */
  body.v27-mobile label.tiny-label,
  body.v27-mobile span.tiny-label {
    font-size: 12px !important;
  }
}

/* =====================================================================
 * v63.10c — Drop-pin popup: brand-colour primary save + tap-target fix
 * Mobile only. Make the Save button the brand-yellow hero, bump sub-row
 * buttons from 38px → 44px so wet thumbs hit reliably.
 * Fixes: Save was lost in the noise; Share/Navigate/Formats failed 44x44.
 * ===================================================================== */
@media (max-width: 740px) {
  /* Make Save the obvious primary action — brand yellow, full width, big. */
  .dp32 .dp32-btn.primary {
    background: #f6c23b !important;        /* brand yellow */
    color: #0a1526 !important;              /* brand navy text */
    border: 2px solid #0a1526 !important;
    border-radius: 12px !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    min-height: 56px !important;
    width: 100% !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
    letter-spacing: 0.2px;
  }
  .dp32 .dp32-btn.primary:active {
    background: #ffd24a !important;
    transform: scale(0.98);
  }
  /* Sub-row buttons (Share / Navigate / Formats) — 44px tap target */
  .dp32 .dp32-btn.sm {
    min-height: 44px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }
  /* Coord copy button — 44px tap target too */
  .dp32 .dp32-copy {
    min-height: 44px !important;
    min-width: 56px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
  }
  /* Tighten spacing so Save is the visual centre of attention */
  .dp32 .dp32-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .dp32 .dp32-actions-row {
    margin-top: 4px;
  }
  /* v63.10f — Delete demoted to a small red text link below the row.
     Day-2 job is Navigate (yellow primary). Delete is rare; stays visible
     but no longer competes for the thumb. */
  /* v63_10n: Brett — Delete was a tiny underlined link, users couldn't find it.
     Now a proper full-width button with dark-red border so it's obvious. */
  .dp32 .dp32-btn.link-danger {
    background: rgba(184,66,58,0.08) !important;
    border: 1.5px solid #b8423a !important;
    color: #b8423a !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    margin-top: 8px !important;
    width: 100% !important;
    align-self: stretch !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }
  .dp32 .dp32-btn.link-danger:hover {
    background: rgba(184,66,58,0.16) !important;
  }
  .dp32 .dp32-btn.link-danger:active {
    color: #8a2c25 !important;
    background: rgba(184,66,58,0.22) !important;
    transform: scale(0.98);
  }
}

/* ============================================================
 * v63.10d — Saved-mark popup actions, mobile-first reorder
 * Navigate (primary, full-width yellow 56px)
 * Rename + Share (side-by-side, 44px)
 * Delete (full-width, red, 48px)
 * Desktop unchanged.
 * ============================================================ */
@media (max-width: 740px) {
  .dp-popup .dp-actions-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "nav nav"
      "rename share"
      "del del";
    gap: 8px;
    margin-top: 10px;
  }
  .dp-popup .dp-actions-v2 .dp-act-nav    { grid-area: nav; }
  .dp-popup .dp-actions-v2 .dp-act-rename { grid-area: rename; }
  .dp-popup .dp-actions-v2 .dp-act-share  { grid-area: share; }
  .dp-popup .dp-actions-v2 .dp-act-delete { grid-area: del; }

  .dp-popup .dp-actions-v2 .dp-act-nav {
    height: 56px;
    background: #f6c23b;
    color: #0a1526;
    font-weight: 800;
    font-size: 16px;
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  }
  .dp-popup .dp-actions-v2 .dp-act-rename,
  .dp-popup .dp-actions-v2 .dp-act-share {
    height: 44px;
    background: #f3f5f9;
    color: #0a1526;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid #d8dde6;
    border-radius: 8px;
  }
  .dp-popup .dp-actions-v2 .dp-act-delete {
    height: 48px;
    background: #fff1f1;
    color: #c0392b;
    font-weight: 700;
    font-size: 15px;
    border: 1px solid #f3c1bd;
    border-radius: 10px;
  }
  /* Active feedback (helps wet hands know the tap registered) */
  .dp-popup .dp-actions-v2 button:active {
    transform: scale(0.98);
    filter: brightness(0.95);
  }
}

/* =============================================================================
   2026-04-27 — Brett: move camera button from map to PC top menu.
   - Hide yellow camera FAB on PC (keep on mobile via existing v27-mobile rules
     which hide standalone FAB and route through the bottom FAB stack).
   - Hide PC topbar Camera button on mobile (mobile already has a capture button
     in the bottom FAB stack).
   ============================================================================= */
@media (min-width: 741px) {
  #bcCaptureFab,
  #bcCaptureFab-label {
    display: none !important;
  }
}
@media (max-width: 740px) {
  #bcTopbarCameraBtn {
    display: none !important;
  }
}

/* =============================================================================
   2026-04-27 — Brett: cull 3 legend disclosures (Safety marks / Chart lines /
   Fishing marks) from the mobile bottom sheet. They duplicate the IALA chart
   itself (the visible buoys ARE the legend), and add scroll bloat on phones.
   Desktop sidebar keeps the legend — v51-sidebar-panels.js relocates the
   .legend block into the PC sidebar where reference info is welcome.
   Reversible: delete this block.
   ============================================================================= */
@media (max-width: 740px) {
  .legend {
    display: none !important;
  }
}

/* ============================================================================
 * Pier marker cluster styles (added by stability fix 2026-05)
 * FIX: piers now use L.markerClusterGroup to avoid 3,564 individual DOM nodes.
 * ============================================================================ */
.pier-cluster {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50%;
  background: rgba(74, 144, 226, 0.85);
  border: 2px solid rgba(74, 144, 226, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pier-cluster-icon {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}