/* ==========================================================================
 * BayCast v63.9.24 — Vwhater.6
 * Bottom bar + Drop-pin FAB + Navigate button + heading arrow.
 * Mobile-only. Desktop untouched (all rules scoped to body.v27-mobile).
 * ======================================================================= */

@media (max-width: 740px) {
  /* ---- New dark bottom bar (overrides v36 light styling) --------------- */
  body.v27-mobile #v36Thumb.v64-bar {
    background: linear-gradient(180deg, #0a1523 0%, #081220 100%);
    border-top: 1px solid #1b2e44;
    box-shadow: 0 -6px 18px rgba(0,0,0,0.35);
    padding: 8px 6px calc(env(safe-area-inset-bottom, 0px) + 8px);
    /* v64: force 4 equal columns. The base #v36Thumb is display:grid with
       3 columns by default; we add a 4th for the Camera tab. */
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 0 !important;
    column-gap: 0 !important;
  }

  body.v27-mobile #v36Thumb.v64-bar .v64-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 58px;
    padding: 6px 4px;
    background: transparent !important;
    border: none;
    border-radius: 10px;
    color: #e6edf5;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    transition: color 120ms ease, background-color 120ms ease, transform 80ms ease;
  }
  body.v27-mobile #v36Thumb.v64-bar .v64-btn svg {
    color: #e6edf5;
    stroke: #e6edf5;
    transition: color 120ms ease, transform 120ms ease;
  }
  body.v27-mobile #v36Thumb.v64-bar .v64-btn-lbl {
    font: 700 12px/1 -apple-system, system-ui, sans-serif;
    letter-spacing: 0.2px;
    color: #e6edf5;
    transition: color 120ms ease;
  }

  /* Pressed (haptic flash) */
  body.v27-mobile #v36Thumb.v64-bar .v64-btn:active,
  body.v27-mobile #v36Thumb.v64-bar .v64-btn.v36-thumb-press {
    background: rgba(246, 194, 59, 0.08) !important;
    transform: scale(0.96);
  }

  /* Active tab — orange icon + label + 2px orange underline */
  body.v27-mobile #v36Thumb.v64-bar .v64-btn-active {
    color: #f6c23b;
  }
  body.v27-mobile #v36Thumb.v64-bar .v64-btn-active svg {
    color: #f6c23b; stroke: #f6c23b;
  }
  body.v27-mobile #v36Thumb.v64-bar .v64-btn-active .v64-btn-lbl {
    color: #f6c23b;
  }
  body.v27-mobile #v36Thumb.v64-bar .v64-btn-active::after {
    content: '';
    position: absolute;
    left: 22%; right: 22%;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: #f6c23b;
  }

  /* ---- Orange Drop-pin FAB ------------------------------------------- */
  /* Sits above the bottom bar, right side. Big, obvious, orange — so the
     most-used action is a single thumb reach away on the Map tab. */
  /* Vwhater.10: trimmed size so it doesn't crowd the centered Navigate btn.
     Still meets Apple HIG 44pt min tap target. */
  body.v27-mobile #v64DropFab {
    position: fixed;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 94px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 13px 9px 10px;
    background: linear-gradient(180deg, #ffd166 0%, #f6c23b 100%);
    color: #0a1523;
    border: none;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.26), 0 1px 0 rgba(255,255,255,0.5) inset;
    font: 700 13px/1 -apple-system, system-ui, sans-serif;
    letter-spacing: 0.2px;
    z-index: var(--z-map-controls);
    -webkit-tap-highlight-color: transparent;
    transition: transform 120ms ease, box-shadow 120ms ease, background 200ms ease;
  }
  body.v27-mobile #v64DropFab svg { width: 18px; height: 18px; }
  body.v27-mobile #v64DropFab svg { color: #0a1523; stroke: #0a1523; }
  body.v27-mobile #v64DropFab:active {
    transform: scale(0.96);
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  }
  body.v27-mobile #v64DropFab.v64-drop-fab-active {
    background: linear-gradient(180deg, #ff7f50 0%, #ff5a36 100%);
    color: #fff;
  }
  body.v27-mobile #v64DropFab.v64-drop-fab-active svg { color: #fff; stroke: #fff; }
  body.v27-mobile #v64DropFab.v64-drop-fab-active .v64-drop-fab-lbl { color: #fff; }
  .v64-drop-fab-lbl { color: inherit; }

  /* Hide the Drop-pin FAB when any sheet is open — Map tab context only */
  body.v27-mobile:has(#v27Sheet.v27-sheet-open) #v64DropFab,
  body.v27-mobile:has(.v63fc-scrim) #v64DropFab,
  body.v27-mobile:has(#detail:not(.hidden)) #v64DropFab,
  /* 2026-05-05 ROOT-CAUSE FIX: #bcMobDropPin (the current drop-pin button)
     was missing from this established hide pattern. Every other floating
     button in the codebase already gets hidden when #detail is open via
     this exact selector style. The pin was the ONE FAB without the rule —
     so it bled through the panel. Adding it here completes the pattern. */
  body.v27-mobile:has(#v27Sheet.v27-sheet-open) #bcMobDropPin,
  body.v27-mobile:has(.v63fc-scrim) #bcMobDropPin,
  body.v27-mobile:has(#detail:not(.hidden)) #bcMobDropPin {
    display: none !important;
  }

  /* 2026-05-05 ROOT-CAUSE FIX for "can't exit detail panel" on mobile.
     Hamburger #toggleSidebar is fixed at top:8, right:10, 44x44px — it
     occupies y: 8-52, right: 10-54. Close X was at top:8, right:8 (28x28),
     same coordinates — hamburger covered it. Hamburger uses inline JS-set
     !important styles that CSS cannot override.
     Solution: drop the close X below the hamburger's vertical range and
     make it bigger so it's an obvious tap target. y >= 60 clears the
     hamburger entirely. Right edge of card-head, vertically below the row
     of share/log-catch/bite-forecast buttons. */
  body.v27-mobile #detail #closeDetail {
    top: calc(env(safe-area-inset-top, 0px) + 60px) !important;
    right: 12px !important;
    width: 40px !important;
    height: 40px !important;
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    font-size: 24px !important;
    border-radius: 12px !important;
    z-index: 100 !important;
  }

  /* ---- Navigate button (centered, above bar) ------------------------- */
  /* Brett rule: arrow should be centered. Sits centered horizontally
     above the bottom tab bar, between the left edge and the Drop-pin FAB. */
  body.v27-mobile #v64NavBtn {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px 9px 10px;
    background: rgba(10, 21, 35, 0.92);
    color: #e6edf5;
    border: 1px solid #1b2e44;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    font: 600 13px/1 -apple-system, system-ui, sans-serif;
    letter-spacing: 0.2px;
    z-index: var(--z-map-controls);
    -webkit-tap-highlight-color: transparent;
    transition: transform 120ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
  }
  body.v27-mobile #v64NavBtn svg { color: #e6edf5; stroke: #e6edf5; }
  body.v27-mobile #v64NavBtn:active { transform: translateX(-50%) scale(0.96); }
  body.v27-mobile #v64NavBtn.v64-nav-btn-active {
    background: #f6c23b;
    color: #0a1523;
    border-color: #f6c23b;
  }
  body.v27-mobile #v64NavBtn.v64-nav-btn-active svg { color: #0a1523; stroke: #0a1523; }

  /* Hide Navigate button when any sheet is open */
  body.v27-mobile:has(#v27Sheet.v27-sheet-open) #v64NavBtn,
  body.v27-mobile:has(.v63fc-scrim) #v64NavBtn,
  body.v27-mobile:has(#detail:not(.hidden)) #v64NavBtn {
    display: none !important;
  }

  /* ---- Hide the legacy right-side FAB column on mobile ----------------
   * Drop pin is now the orange FAB; Layers stays reachable via More sheet;
   * My-location is replaced by Navigate. Keeps the map uncluttered.
   * (Camera FAB from v63_9_22-mobile-fixes.css is separately positioned
   *  and stays visible.) */
  body.v27-mobile .v27-fabs { display: none !important; }
}

/* ---- Leaflet heading arrow marker (mobile nav mode) ------------------- */
/* The marker is a divIcon; these rules apply whenever the icon is present. */
.v64-heading-icon { background: transparent !important; border: none !important; }
.v64-heading-wrap {
  position: relative;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
}
.v64-heading-dot {
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%);
  background: #2b82ff;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(43, 130, 255, 0.18), 0 1px 4px rgba(0,0,0,0.3);
}
.v64-heading-arrow {
  position: absolute;
  left: 50%; top: 50%;
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  display: flex; align-items: flex-start; justify-content: center;
  transition: transform 120ms ease;
  transform-origin: center center;
  pointer-events: none;
}
.v64-heading-arrow svg {
  width: 18px; height: 18px;
  color: #2b82ff; stroke: #2b82ff;
  fill: #2b82ff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
  /* Arrow points up by default; translate upward so the tip sits just above
     the dot, leaving the dot as the anchor point. */
  transform: translateY(-14px);
}

/* v63.9.25 Vwhater.7: hide orphan custom mobile zoom control (#v27Zoom).
   Pinch-to-zoom works fine on mobile; the custom +/- buttons were left over
   from the pre-Vwhater.6 layout where the camera FAB used to share that
   column. Scoped to body.v27-mobile so desktop is untouched. */
body.v27-mobile #v27Zoom,
body.v27-mobile #v27ZoomIn,
body.v27-mobile #v27ZoomOut {
  display: none !important;
}