/* AudioChart — dark nautical UI optimized for outdoor readability */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy: #0a1628;
  --dark-blue: #1a3a5c;
  --mid-blue: #2a5080;
  --accent: #4a9edd;
  --danger: #e05252;
  --warn: #e0a030;
  --ok: #52c052;
  --text: #e8edf4;
  --text-dim: #8a9ab0;
  --font: system-ui, -apple-system, sans-serif;

  /* "Chart & Brass" — scoped to the Zoned screen's own chrome only
     (compass, mode row, right rail, bottom HUD). Everything else in the
     app keeps the tokens above untouched. No Google Fonts: AudioChart
     must work fully offline after leaving the dock, so these fall back
     to system serif/mono faces instead of a network font request that
     would silently fail underway. */
  --brass-ink: #120d08;
  --brass-ink-2: #1b140d;
  --brass: #c79a48;
  --brass-hi: #ecc07c;
  --brass-dim: #6f5730;
  --parchment: #ece2c6;
  --parchment-dim: #a89a78;
  --brass-needle: #a83a2c;
  --font-brass-serif: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --font-brass-mono: "SF Mono", "Menlo", "Consolas", monospace;
}

html, body {
  height: 100%;
  background: var(--navy);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#response-text, #status-text {
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  padding: 0;
  gap: 0;
}

/* Sidebar is hidden — kept in DOM only for JS references */
#sidebar {
  display: none !important;
}

/* ── Desktop layout ───────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  #map-container {
    display: block !important;
    flex: 1 !important;
  }
}

/* Fullscreen modes must use column layout regardless of screen size */
#app.sketch-mode,
#app.anim-mode {
  flex-direction: column !important;
}

/* Header */
#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--dark-blue);
}

#header h1 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent);
}

#app-version {
  font-size: 0.65rem;
  font-weight: 400;
  opacity: 0.5;
  vertical-align: middle;
  letter-spacing: 0;
  cursor: pointer;
}

/* Status badges */
.badge-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.status-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--dark-blue);
  color: var(--text-dim);
  white-space: nowrap;
}

.status-badge.gps-ok { background: #1a4a1a; color: var(--ok); }
.status-badge.gps-error { background: #4a1a1a; color: var(--danger); }
.status-badge.gps-test { background: #4a2a00; color: var(--warn); }

.status-badge.coverage-land { background: #4a2a00; color: var(--warn); }
.status-badge.coverage-none { background: #4a1a1a; color: var(--danger); }

.status-badge.rp-hazard-hard { background: #4a1a1a; color: var(--danger); }
.status-badge.rp-hazard-soft { background: #4a2a00; color: var(--warn); }
.status-badge.rp-hazard-unverified { background: #4a2a00; color: var(--warn); }

/* Offline prep, location + screen menu triggers in header. #search-btn,
   #route-picker-btn, #track-picker-btn, and #sample-routes-btn share this
   same pill treatment so the whole top status bar (row 1: Map Type/
   Offline/Search/Location/Screen; row 2: Routes/Tracks/Samples) reads as
   one consistent, aligned button set — #search-btn previously had no
   dedicated rule at all and was rendering in the browser's bare default
   button style, standing out from its row. */
#offline-btn, #location-menu-btn, #screen-menu-btn, #import-menu-btn, #search-btn, #track-rec-btn,
#anchor-watch-btn, #anchor-watch-silence-btn, #route-picker-btn, #track-picker-btn, #sample-routes-btn, #paintings-list-btn,
#waypoints-panel-btn, #testsets-panel-btn {
  background: rgba(18, 13, 8, 0.94); /* --brass-ink */
  border: 1px solid var(--brass-dim);
  border-radius: 6px;
  color: var(--parchment-dim);
  font-family: var(--font-brass-serif);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 9px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
#offline-btn:hover, #location-menu-btn:hover, #screen-menu-btn:hover, #import-menu-btn:hover, #search-btn:hover, #track-rec-btn:hover, #anchor-watch-btn:hover, #anchor-watch-silence-btn:hover,
#route-picker-btn:hover, #track-picker-btn:hover, #sample-routes-btn:hover, #paintings-list-btn:hover,
#waypoints-panel-btn:hover, #testsets-panel-btn:hover { border-color: var(--brass); color: var(--brass-hi); }
#offline-btn:disabled { opacity: 0.5; cursor: default; }
#route-picker-btn:active, #track-picker-btn:active, #sample-routes-btn:active, #waypoints-panel-btn:active, #testsets-panel-btn:active { background: var(--brass-dim); }
#route-picker-btn.active, #track-picker-btn.active, #sample-routes-btn.active, #waypoints-panel-btn.active, #testsets-panel-btn.active { background: var(--brass); color: var(--brass-ink); }
#location-menu-btn.test-active { border-color: var(--danger); color: var(--danger); background: #2a0a0a; font-weight: 700; }
#location-menu-btn.test-active:hover { border-color: var(--danger); color: #ff8080; background: #3a0a0a; }

/* Location / Screen / Import dropdown menus — same panel treatment as the
   other inline-reveal rows in this bar (#test-pos-form, #anchor-watch-form). */
#map-overlay-status #location-menu,
#map-overlay-status #screen-menu,
#map-overlay-status #import-menu {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: rgba(10, 22, 40, 0.92);
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--mid-blue);
}
#location-menu button, #screen-menu button, #import-menu button {
  background: var(--mid-blue);
  border: none;
  border-radius: 6px;
  color: var(--text);
  font-size: 0.8rem;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
}
#location-menu button:hover, #screen-menu button:hover, #import-menu button:hover { background: var(--accent); color: var(--navy); }
#import-menu .import-hint { flex-basis: 100%; padding: 0 0 2px; }
#wake-lock-btn.wake-active { border-color: var(--ok); color: var(--ok); background: #0a2a16; }
#wake-lock-btn.wake-active:hover { border-color: #2a8b4c; color: #6aeea0; background: #0f3a1e; }
/* Anchor Watch — armed uses the same "actively monitoring, could alarm" red
   convention as Track recording; alarming pulses brighter via .anchor-alarming. */
#anchor-watch-silence-btn { border-color: var(--warn); color: var(--warn); background: #2a1e08; font-weight: 700; }
#anchor-watch-silence-btn:hover { border-color: var(--warn); color: #ffcf70; background: #3a2a0a; }
@keyframes anchor-btn-pulse {
  0%, 100% { background: #2a0a0a; }
  50% { background: #6a1414; }
}

/* Focus (bearing/range readout) button — the single most-tapped control while
   underway, so it lives entirely on its own: a fixed pill anchored to the
   bottom-center of the screen, clear of every other row, menu, and scrolling
   strip, in the same spot no matter what else is on screen or what state
   this button itself is in. The idea is a reach-without-looking target your
   hand learns, for wet hands/gloves/boat motion — not just a compact label. */
#focus-btn {
  /* No longer independently positioned — it's a flex child of #bottom-hud
     now (the "Zoned" layout's one consolidated HUD row instead of three
     separately floating widgets). var(--ui-pos-focus) is still the
     always-on drag offset (see _makeDraggableGroup) layered via
     transform, same as before, just with nothing left to center. */
  transform: var(--ui-pos-focus, translate(0, 0));
  /* Hidden by default, same reasoning as the text-command bar — per
     direct request, this is another Underway-specific tool (a bearing/
     range readout for the target you're steering toward) rather than
     something worth showing while docked/planning. */
  display: none;
  background: var(--brass-ink-2);
  border: 2px solid var(--brass-dim);
  border-radius: 999px;
  color: var(--parchment-dim);
  font-family: var(--font-brass-serif);
  font-size: 1.02rem;
  font-weight: 600;
  padding: 14px 22px;
  min-height: 52px;
  max-width: min(260px, calc(100% - 20px));
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
}
#app.underway-mode #focus-btn {
  display: block;
}
/* Follow and Virtual Journey are themselves a live bearing-to-next-
   waypoint readout's entire reason to exist, so #focus-btn needs to show
   for their duration regardless of the Underway switch — confirmed live:
   it was silently unreachable during a virtual journey with Underway
   off. Virtual Journey now forces Underway on itself (see
   _preVjUnderwayMode in app.js), which makes this rule's own job moot
   there, but real Follow doesn't touch the switch, so it still needs
   this. */
#app.following-active #focus-btn {
  display: block;
}
/* Virtual Journey used to hide #focus-btn here (the top-left follow-
   progress readout showing the same bearing/range to the next waypoint
   was judged redundant) — reversed per later direct request: journey
   mode (real or virtual) should always have a target button available,
   for consistency between the two. VJ already forces #app.underway-mode
   on itself (_preVjUnderwayMode in app.js), so the button now shows via
   that rule with no VJ-specific rule needed here at all. */
#focus-btn:hover { border-color: var(--brass); color: var(--brass-hi); }
#focus-btn.focus-active { border-color: #1a6b3c; color: #4ade80; background: #0a2a16; }
#focus-btn.focus-active:hover { border-color: #2a8b4c; color: #6aeea0; background: #0f3a1e; }

/* "Zoned" layout's one consolidated bottom HUD — focus/bearing, heading
   & speed, and tide used to be three independently floating widgets;
   .tide-cycle-ctrl and .heading-speed-ctrl are Leaflet controls
   re-parented in here right after creation (see the map-init code in
   app.js) since both are already position:fixed and fully escaped from
   Leaflet's own control-container layout, so moving them in the DOM is
   safe. Each child keeps its own drag group (tide/headingspeed/focus)
   for now — dragging just starts from a different default spot. */
#bottom-hud {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 1002;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 20px);
  /* No background/border/padding of its own — tried that (a shared
     translucent bar meant to read as one consolidated HUD, same idea as
     #right-rail's panel treatment) but confirmed live on a phone: a
     position:fixed flex container with flex-wrap enabled doesn't shrink
     to fit its wrapped content in any browser tested — it stretches to
     the full max-width bound instead, so the shared background rendered
     as a large, mostly-empty box once any wrapping happened (which is
     the normal case at phone width). width:fit-content does not fix
     this — confirmed with an isolated repro, not just this page. Each
     child (#focus-btn, .tide-cycle-ctrl, .heading-speed-ctrl) already
     carries its own background/border pill, so dropping the wrapper's
     own styling loses nothing but the oversized box. */
}
#app.underway-mode #bottom-hud .tide-cycle-ctrl { display: none; }
/* Same reasoning as Underway's own tide-hiding rule above, scoped to
   Virtual Journey specifically (not real Follow, where tide state is
   still worth having) — per direct report, one more thing crowding the
   screen during a rehearsal run. */
#app.vjourney-active #bottom-hud .tide-cycle-ctrl { display: none; }
/* Phone during a Virtual Journey (v909, reported with a screenshot: "how crowded my screen is on
   mobile"). Nothing is taken away that isn't shown somewhere else:
   - the Next / To end / Traveled box goes: the journey panel's status line already gives travelled
     and total, and #focus-btn now shows the next waypoint's bearing and distance in place of the
     route name (which the journey panel's title shows) — see _focusLabel in app.js;
   - the heading/speed readout is smaller (the speed is in the journey panel too);
   - the command bar loses a row and keeps clear of the target button: the Transcript tab and the
     📋 Command reference icon side by side, left of #focus-btn, the command box under them, left of
     the heading readout, both rows level with #bottom-hud's. */
@media (max-width: 600px) {
  #app.vjourney-active .follow-progress-ctrl { display: none !important; }
  #app.vjourney-active .heading-speed-ctrl { font-size: 0.9rem; padding: 3px 8px; }
  /* v911: target over heading, right-aligned, so the HUD never shares the command bar's rows (at 412 px
     the two sat side by side and the target button ran in under the command box) */
  #app.vjourney-active #bottom-hud { flex-direction: column; align-items: flex-end; gap: 6px; }
  #app.vjourney-active #focus-btn { max-width: calc(100vw - 150px); }
  #app.vjourney-active #focus-btn { font-size: 0.94rem; padding-inline: 16px; }   /* "WP 2 · 041° M · 8.6 nm" fits; the same tall reach-without-looking target */
  #app.underway-mode.vjourney-active #map-overlay-cmd { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: 5px; row-gap: 6px; bottom: 10px; }   /* inside the map, which already ends at the journey panel */
  #app.vjourney-active #map-overlay-cmd #response-area { grid-column: 1; grid-row: 1; justify-self: start; }
  #app.vjourney-active #map-overlay-cmd #response-area:not(.collapsed) { grid-column: 1 / -1; justify-self: stretch; }
  #app.vjourney-active #map-overlay-cmd #command-picker { grid-column: 2; grid-row: 1; justify-self: start; width: 34px; margin: 0; padding: 4px 5px; text-overflow: clip; }
  #app.vjourney-active #map-overlay-cmd #text-form { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  #app.vjourney-active #map-overlay-cmd #text-input { width: 132px; }
  #app.vjourney-active #map-overlay-cmd #response-area.collapsed { height: 22px; min-height: 22px; padding: 2px 8px; }
  #app.vjourney-active #response-area.collapsed::after { content: 'Transcript'; font-size: 0.7rem; }
}

/* Demo mode HUD — fixed bar showing current command */
#demo-hud {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(74,158,221,0.93);
  color: #0a1628;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 7px 14px;
  text-align: center;
  z-index: 9999;
  letter-spacing: 0.03em;
}

/* Demo mode step counter — a separate, more prominent badge from #demo-hud's
   descriptive text below, so a discrete step number ("STEP 2 OF 4") reads
   clearly to someone watching a recording, not just live. */
#demo-step-badge {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 800;
  padding: 8px 22px;
  border-radius: 20px;
  z-index: 9999;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

/* Route movie's closing "other map types" table (v661) — same confirmed-
   visible top-level placement and z-index tier as #demo-hud/#demo-step-badge
   above (see the HTML comment on those for why that matters). */
#demo-modes-table {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 10px;
  padding: 14px 16px;
  max-width: min(360px, calc(100vw - 40px));
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  color: var(--text);
}
#demo-modes-table h4 {
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: var(--accent);
  text-align: center;
  letter-spacing: 0.03em;
}
#demo-modes-table table { width: 100%; border-collapse: collapse; }
#demo-modes-table td { padding: 6px 4px; vertical-align: top; border-bottom: 1px solid var(--mid-blue); }
#demo-modes-table tr:last-child td { border-bottom: none; }
#demo-modes-table td.dmt-icon { width: 26px; font-size: 1.05rem; text-align: center; }
#demo-modes-table td.dmt-name { font-weight: 700; white-space: nowrap; padding-right: 8px; font-size: 0.85rem; }
#demo-modes-table td.dmt-desc { color: var(--text-dim); font-size: 0.78rem; line-height: 1.3; }

/* OpenCPN draw button — appears between map and response when course query runs */
#opencpn-btn {
  align-self: flex-start;
  background: var(--mid-blue);
  border: none;
  border-radius: 6px;
  color: var(--text);
  font-size: 0.8rem;
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
#opencpn-btn:hover { background: var(--accent); color: var(--navy); }
#opencpn-btn:disabled { opacity: 0.5; cursor: default; }

/* Cruise picker */
#cruise-form {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
#cruise-label {
  font-size: 0.78rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.cruise-choice {
  background: var(--mid-blue);
  border: none;
  border-radius: 6px;
  color: var(--text);
  font-size: 0.78rem;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.cruise-choice:hover { background: var(--accent); color: var(--navy); }
#cruise-cancel {
  background: #4a1a1a;
  color: var(--danger);
  border: none;
  border-radius: 6px;
  font-size: 0.78rem;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
}

/* Test position input row */
#test-pos-form {
  display: flex;
  gap: 6px;
  align-items: center;
}
#test-pos-input {
  flex: 1;
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.9rem;
  padding: 6px 10px;
  outline: none;
  -webkit-appearance: none;
}
#test-pos-input:focus { border-color: var(--accent); }
#test-pos-set, #test-pos-clear, #test-pos-cancel {
  background: var(--mid-blue);
  border: none;
  border-radius: 6px;
  color: var(--text);
  font-size: 0.8rem;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
}
#test-pos-clear, #test-pos-cancel { background: #4a1a1a; color: var(--danger); }

/* Search input row — same shape as #test-pos-form just above */
#search-form {
  display: flex;
  gap: 6px;
  align-items: center;
}
#search-input {
  flex: 1;
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.9rem;
  padding: 6px 10px;
  outline: none;
  -webkit-appearance: none;
}
#search-input:focus { border-color: var(--accent); }
#search-go, #search-cancel {
  background: var(--mid-blue);
  border: none;
  border-radius: 6px;
  color: var(--text);
  font-size: 0.8rem;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
}
#search-cancel { background: #4a1a1a; color: var(--danger); }

/* Anchor Watch radius-entry row */
#anchor-watch-form { display: flex; flex-direction: column; gap: 6px; }
#anchor-watch-label { font-size: 0.78rem; color: var(--text-dim); }
#anchor-watch-row { display: flex; gap: 6px; align-items: center; }
#anchor-watch-radius {
  width: 70px;
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.9rem;
  padding: 6px 8px;
  outline: none;
  -webkit-appearance: none;
}
#anchor-watch-radius:focus { border-color: var(--accent); }
#anchor-watch-start, #anchor-watch-cancel {
  background: var(--mid-blue);
  border: none;
  border-radius: 6px;
  color: var(--text);
  font-size: 0.8rem;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
}
#anchor-watch-cancel { background: #4a1a1a; color: var(--danger); }
#anchor-watch-note { font-size: 0.72rem; color: var(--text-dim); font-style: italic; }

/* The anchor watch radius circle drawn on the map — dashed blue while armed,
   pulsing red (via CSS animation on the SVG path, not JS) while alarming. */
.anchor-watch-circle { pointer-events: none; }
.anchor-watch-circle.anchor-watch-alarming {
  animation: anchor-circle-pulse 1s ease-in-out infinite;
}
@keyframes anchor-circle-pulse {
  0%, 100% { stroke: var(--danger); fill: var(--danger); fill-opacity: 0.06; }
  50% { stroke: var(--danger); fill: var(--danger); fill-opacity: 0.4; }
}

/* Position display */
#position-display {
  font-family: 'Menlo', 'Courier New', monospace;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text);
  padding: 10px 12px;
  background: var(--dark-blue);
  border-radius: 8px;
  text-align: center;
  min-height: 2.2rem;
  cursor: pointer;
  user-select: text;
}

/* First-time welcome overlay */
#welcome-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 40, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
#welcome-box {
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 12px;
  padding: 24px;
  max-width: 420px;
  width: 100%;
}
#welcome-box h2 {
  color: var(--accent);
  font-size: 1.2rem;
  margin-bottom: 12px;
}
#welcome-box h3 {
  color: var(--text);
  font-size: 0.9rem;
  margin: 16px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
#welcome-box p {
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 8px;
}
#welcome-box em { color: var(--text); font-style: normal; }
#welcome-box ol {
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.8;
  padding-left: 20px;
}
#welcome-box ol strong { color: var(--text); }
.welcome-note {
  margin-top: 16px;
  font-size: 0.82rem !important;
  color: var(--text-dim);
}
#welcome-close {
  margin-top: 20px;
  width: 100%;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 700;
  padding: 12px;
  cursor: pointer;
}
#welcome-close:active { opacity: 0.8; }

/* Onboarding region buttons (Step 1) */
#ob-regions { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.ob-region-btn {
  background: var(--mid-blue);
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  padding: 12px;
  cursor: pointer;
  text-align: left;
}
.ob-region-btn:active { background: var(--accent); color: var(--navy); }

/* Onboarding install buttons (Step 2) */
#ob-install-btn {
  display: block; width: 100%;
  margin: 16px 0 8px;
  background: var(--accent);
  border: none; border-radius: 8px;
  color: var(--navy);
  font-size: 1rem; font-weight: 700;
  padding: 12px; cursor: pointer;
}
#ob-install-later {
  display: block; width: 100%;
  margin-top: 8px;
  background: none;
  border: 1px solid var(--mid-blue);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 0.9rem;
  padding: 10px; cursor: pointer;
}

/* Map link — shown only in test-position mode */
#map-link {
  display: block;
  text-align: center;
  font-size: 0.78rem;
  color: var(--warn);
  text-decoration: none;
  margin-top: -4px;
}
#map-link:hover { text-decoration: underline; }

/* Status / instruction line */
#status-text {
  font-size: 0.85rem;
  color: var(--text-dim);
  text-align: center;
  min-height: 1.2rem;
}

/* Voice picker */
#voice-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0 4px;
}
#voice-row span { font-size: 0.85rem; flex-shrink: 0; }
#voice-select {
  flex: 1;
  font-size: 0.75rem;
  background: var(--dark-blue);
  color: var(--text);
  border: 1px solid var(--mid-blue);
  border-radius: 4px;
  padding: 2px 4px;
}

/* Response area */
#response-area {
  position: relative;
  flex: 1;
  overflow-y: auto;
  background: var(--dark-blue);
  border-radius: 8px;
  padding: 14px;
}

#response-close-btn {
  position: sticky;
  top: 0;
  float: right;
  margin: -6px -6px 0 8px;
  background: rgba(10, 22, 40, 0.85);
  border: none;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  color: var(--text-dim);
  font-size: 0.9rem;
  cursor: pointer;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}
#response-close-btn:hover, #response-close-btn:active { color: var(--text); }

/* Collapsed "peek" state — a thin, always-visible, tappable remnant instead of
   fully vanishing, so there's never a moment where the transcript is gone with no
   obvious way to bring it back. */
#response-area.collapsed {
  flex: 0 0 auto;
  height: 26px;
  min-height: 26px;
  overflow: hidden;
  padding: 5px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
#response-area.collapsed #response-text,
#response-area.collapsed #response-close-btn { display: none; }
#response-area.collapsed::after {
  content: 'Transcript \2014 tap to expand';
  font-size: 0.72rem;
  color: var(--text-dim);
}

#response-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.transcript-line {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text);
  white-space: pre-wrap;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 6px;
}
.transcript-line:first-child { border-top: none; padding-top: 0; }
.transcript-time {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.transcript-body { flex: 1; min-width: 0; }

/* Navaid / hazard result list (tap a row to hear it) */
#navaid-list {
  display: none;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.navaid-row {
  background: none;
  border: 1px solid var(--mid-blue);
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  transition: border-color 0.1s;
}

.navaid-row:hover,
.navaid-row:active { border-color: var(--accent); }

.navaid-row-name {
  font-size: 0.85rem;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navaid-row-nav {
  font-size: 0.78rem;
  color: var(--text-dim);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Map fills the entire screen; overlays float on top */
#map-container {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  border-radius: 0;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
#leaflet-map { width: 100%; height: 100%; background: var(--navy); }
/* 3D helm view over the map during a Virtual Journey (app.js _showVj3d). z-index 1000 and
   placed right after #leaflet-map: above the map's own controls (also 1000, earlier in the
   DOM), below every later 1000+ sibling (the app's chrome and the journey banner). */
#vj3d-wrap { position: absolute; inset: 26px 0 0 0; z-index: 1000; background: var(--navy); }   /* top: below #status-title-bar (set exactly in _showVj3d) */
#vj3d-wrap[hidden] { display: none; }
#vj3d-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
#vj3d-wrap .vj3d-close { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 8px 16px; border-radius: 6px; border: 1px solid var(--mid-blue); background: var(--dark-blue); color: var(--text); font: inherit; cursor: pointer; }
#vj3d-wrap .vj3d-close[hidden] { display: none; }
/* While the 3D view plays a Virtual Journey (direct request, v851), the command bar's
   transcript peek, Command reference and command box sit over the 3D picture: shrink
   them to a small tab, the 📋 icon and a short box, a little see-through until used. */
#app.vj3d-on #map-overlay-cmd { opacity: 0.8; transition: opacity 0.2s; gap: 5px; bottom: 34px; }   /* clear of the 3D view's own credit and loading note */
#app.vj3d-on #map-version-label { display: none; }   /* it would sit on the shortened stack */
#app.vj3d-on #map-overlay-cmd:hover, #app.vj3d-on #map-overlay-cmd:focus-within { opacity: 1; }
#app.vj3d-on #map-overlay-cmd #response-area.collapsed { height: 20px; min-height: 20px; padding: 2px 8px; }
#app.vj3d-on #response-area.collapsed::after { content: 'Transcript'; font-size: 0.66rem; }
#app.vj3d-on #map-overlay-cmd #command-picker { width: 32px; margin-left: 0; padding: 4px 5px; font-size: 0.8rem; text-overflow: clip; }
#app.vj3d-on #map-overlay-cmd #text-input { width: 96px; padding: 5px 8px; font-size: 0.8rem; }
#app.vj3d-on #map-overlay-cmd #text-submit { padding: 4px 8px; font-size: 0.8rem; }
#bay3d-wrap { position: absolute; inset: 26px 0 0 0; z-index: 1980; background: var(--navy); }   /* above the chart's own controls and panels (up to 1960), below dialogs (3000+); top set in _showBay3d */
#bay3d-wrap[hidden] { display: none; }
/* a Flyover under way in Bird's-eye (v1056, requested: as clear a screen as possible, everything back after): the
   3D view covers the whole window, over the chart's bars, rail and buttons (below dialogs, 3000+); bay3d.js sets it */
#app.flyover-on #bay3d-wrap { top: 0 !important; z-index: 2998; }
/* ...but the chart's compass rose stays over it, turning with the view (v1057, requested: "add back the compass, and
   on the laptop, make it about twice as big"); just the rose, not its zoom-to-me button; no dragging it round mid-tour */
#app.bay3d-on.flyover-on .leaflet-top.leaflet-left { z-index: 2999; }
#app.flyover-on .leaflet-top.leaflet-left > :not(.compass-rose-ctrl), #app.flyover-on #zoom-to-me-btn { display: none !important; }
#app.bay3d-on.flyover-on .compass-rose-ctrl svg { pointer-events: none; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) { #app.flyover-on .compass-rose-ctrl svg { width: 140px; height: 140px; } }
/* v876: Bird's-eye keeps the chart's compass rose and zoom/pan rail over it (they drive the 3D view) */
#app.bay3d-on .leaflet-top.leaflet-left, #app.bay3d-on #left-rail-zoom-pan { z-index: 1990; }
#tilt-slider-wrap { display: none; }
#app.bay3d-on #tilt-slider-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; background: rgba(18, 13, 8, 0.94); border: 1px solid var(--brass-dim); border-radius: 8px; padding: 8px 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.6); user-select: none; }
#tilt-slider-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; color: var(--brass); font-family: var(--font-brass-mono); }
#tilt-slider { writing-mode: vertical-lr; direction: rtl; height: 90px; width: 24px; cursor: pointer; accent-color: var(--brass); background: transparent; }   /* up = toward the horizon */
/* the version over Bird's-eye too (v1011): it sat under the 3D view, where the left rail's tilt column would
   cover it anyway on a short screen; here low in the corner, below the mic button, above the 3D view's credit */
#app.bay3d-on #map-version-label { z-index: 1990; bottom: 30px; left: 96px; }   /* (v1055: beside the rail's column, not under it; on a short window its tilt slider reached the corner and covered it) */
/* the left rail's column fits a short window over Bird's-eye (v1056, requested: "make the column fit"): from the
   compass down to the mic button it needs ~775 px; shorter, the zoom and tilt sliders shorten, and shorter still the
   pan pad goes (dragging the 3D view pans it) */
@media (max-height: 800px) {
  #app.bay3d-on #left-rail-zoom-pan { gap: 6px; }
  #app.bay3d-on #zoom-slider { height: 90px; }
  #app.bay3d-on #tilt-slider { height: 60px; }
}
@media (max-height: 660px) { #app.bay3d-on #pan-controls-wrap { display: none; } }
@media (max-height: 590px) { #app.bay3d-on #zoom-slider { height: 60px; } #app.bay3d-on #tilt-slider { height: 44px; } }
#app.bay3d-on .compass-rose-ctrl svg { pointer-events: auto; cursor: grab; touch-action: none; transition: transform 0.12s linear; }   /* drag round to turn, tap for north up */
#bay3d-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
/* smooth 3D switches (v899): a view loads unseen and fades in; over the chart the wrap stays clear */
#bay3d-wrap, #vj3d-wrap { overflow: hidden; }
#bay3d-wrap iframe, #vj3d-wrap iframe { transition: opacity 0.35s ease; }
#bay3d-wrap iframe.next3d, #vj3d-wrap iframe.next3d { position: absolute; inset: 0; }
#bay3d-wrap.loading3d, #vj3d-wrap.loading3d { background: transparent; pointer-events: none; }
#view3d-loading { position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 2600; display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px; background: var(--dark-blue); color: var(--text); border: 1px solid var(--mid-blue); box-shadow: 0 2px 10px rgba(0,0,0,0.45); font-size: 0.85rem; pointer-events: none; max-width: calc(100vw - 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view3d-loading[hidden] { display: none; }
#view3d-loading .spin { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: view3d-spin 0.8s linear infinite; }
@keyframes view3d-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #view3d-loading .spin { animation-duration: 2.4s; } #bay3d-wrap iframe, #vj3d-wrap iframe { transition: none; } }
/* Bird's-eye as a map type (v879): the chart's tile row (Map Type et al.), Objects panel and bottom
   HUD stay on top of it, as they do over Chart or Satellite */
#app.bay3d-on #map-overlay-status, #app.bay3d-on #navaid-filter-panel, #app.bay3d-on #bottom-hud,
#app.bay3d-on #edit-banner, #app.bay3d-on #vjourney-banner, #app.bay3d-on #anim-banner,
#app.bay3d-on #route-picker-panel, #app.bay3d-on #sample-routes-panel, #app.bay3d-on #track-picker-panel,
#app.bay3d-on #waypoints-panel, #app.bay3d-on #testsets-panel, #app.bay3d-on #about-panel,
#app.bay3d-on #map-overlay-cmd, #app.bay3d-on #cmd-open-btn { z-index: 1990 !important; }   /* the panels the toolbar opens too (v880: Routes opened under the 3D view, so Virtual Journey couldn't be pressed); !important: the spread toolbar's own :has() z-index (1950) outranks a plain rule */
/* the command box ("/" or the mic button) over Bird's-eye too (v900): it opened under the 3D view, where
   it couldn't be typed in */
/* Node Ops can't edit in 3D: hidden while Bird's-eye previews the route being edited */
#app.bay3d-on #edit-tools-panel { display: none !important; }

#map-version-label {
  position: absolute;
  bottom: 60px;
  left: 10px;
  z-index: 1002;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 6px;
  padding: 2px 7px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
  cursor: pointer;
}

#history-era-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  background: var(--dark-blue);
  border-top: 1px solid var(--mid-blue);
}

/* Leaflet's own popup pane defaults to z-index 700 (leaflet.css), well below
   this app's custom overlay chrome (status bar, buttons, banners, the mode
   title above — all 1000+). Any popup opening near one of those visually got
   partly covered by it — reported live ("popups should rise to the top of
   the stack so they are unimpeded"). Raised above all of that passive chrome,
   but intentionally still below the truly modal 9999-tier UI (right-click
   context menu, near-point-panel) in case those and a popup ever coincide.
   Cascade order (this file loads after leaflet.css) is enough to win without
   needing !important. */
.leaflet-popup-pane { z-index: 5000; }

/* The z-index override above still leaves popups covered by (a) Leaflet's
   own floating controls (compass rose, tide cycle, heading/speed readout,
   follow-progress) and (b) this app's own overlay chrome living outside the
   map entirely (top button row, mode title, Global Ops title, status bar,
   panels) — both reported live via screenshots, the second one AFTER the
   first fix already shipped, because both categories turned out to share
   one root cause that a bigger z-index number can't touch: everything a
   popup needs to beat here is either (a) a sibling of .leaflet-map-pane
   (which popups live inside — Leaflet's control-container, confirmed via
   getComputedStyle: it sits at z-index 1000, external to map-pane's own
   z-index-400-capped stacking context created by Leaflet's pan transform),
   or (b) a sibling of #leaflet-map itself, one level further out (this
   app's own buttons/banners/panels, all direct children of #map-container
   at z-index 1000+, confirmed via DOM parentElement walk) — in neither
   case can .leaflet-popup-pane's own z-index (scoped to its own stacking
   context) ever escape upward past either sibling boundary.
   Fix: fade both categories out while any popup is open, via the
   popupopen/popupclose handlers in app.js, which toggle .popup-open on
   #map-container (the nearest common ancestor of both categories AND
   #leaflet-map). The blanket rule below covers every current and future
   direct-child overlay of #map-container automatically — deliberately NOT
   enumerated by id, after the first (enumerated, incomplete) attempt missed
   the button row and mode title. The truly modal 9999-tier UI (right-click
   context menu, near-point-panel) is untouched by design: both live outside
   #map-container entirely, as direct children of <body> (confirmed via the
   same DOM walk), so they stay above a popup if the two ever coincide. */
#map-container.popup-open > *:not(#leaflet-map) {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
#map-container.popup-open .compass-rose-ctrl,
#map-container.popup-open .tide-cycle-ctrl,
#map-container.popup-open .heading-speed-ctrl,
#map-container.popup-open .follow-progress-ctrl {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

/* ── Map overlays ──────────────────────────────────────────────────────────── */
/* Wide, short title strip — mode + GPS + coverage, one line, full width.
   Deliberately NOT button/badge-styled (flat, no border-radius, no border,
   pointer-events:none) since it reads as a title, not something to tap.
   Sits above the button row rather than inside it, so it never stretches to
   match a flex row's height the way an in-row badge would. */
#status-title-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  height: 26px;
  line-height: 26px;
  padding: 0 12px;
  background: var(--brass-ink);
  color: var(--parchment);
  font-family: var(--font-brass-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--brass-dim);
  pointer-events: none;
}
#status-title-bar.gps-test    { color: var(--warn); border-bottom-color: var(--warn); }
#status-title-bar.gps-error   { color: var(--danger); border-bottom-color: var(--danger); }
#status-title-bar.coverage-land { color: var(--warn); border-bottom-color: var(--warn); }
#status-title-bar.coverage-none { color: var(--danger); border-bottom-color: var(--danger); }

/* When the OS draws a real title-bar strip for an installed desktop app
   (Window Controls Overlay), the same content goes there instead — see
   _syncWindowControlsOverlay in app.js — so the in-page strip steps aside. */
body.wco-active #status-title-bar { display: none; }
body.wco-active #map-overlay-status { top: 10px; }

#wco-titlebar {
  display: none;
  position: fixed;
  left: env(titlebar-area-x, 0);
  top: env(titlebar-area-y, 0);
  width: env(titlebar-area-width, 100%);
  height: env(titlebar-area-height, 33px);
  -webkit-app-region: drag;
  app-region: drag;
  align-items: center;
  padding-left: 12px;
  background: var(--navy);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 99999;
}
body.wco-active #wco-titlebar { display: flex; }

/* Left offset clears the compass rose (top-left Leaflet control, ~70px wide
   plus its own margin) with roughly a tile's width of gap beyond it, per
   explicit request — the tile row's top must also match the compass rose's
   own top (see .leaflet-top below) so the two visually line up as one row. */
#map-overlay-status {
  position: absolute;
  top: 30px;
  left: 170px;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: calc(100% - 180px);
}

#status-tiles, #status-tiles-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 6px;
}

/* Mobile/tablet: use the full top width so the status tiles wrap into two
   visible rows instead of one. A single scrolling row (tried first) hid
   tiles off the right edge with no obvious affordance that more existed —
   per direct feedback, wrapping to a second line beats a horizontal scroll
   nobody could tell was there. Extended up through iPad widths (both
   orientations, up to the 12.9" Pro's 1366px landscape) since at the
   desktop 55%-max-width the tile count wraps into a tall, sparse column
   instead of the same tidy two rows phones get, needlessly pushing the row
   down the page. */
@media (max-width: 1366px) {
  #status-tiles, #status-tiles-2 {
    width: 100%;
  }
}

#map-overlay-status #test-pos-form {
  width: 100%;
  display: flex;
  gap: 6px;
  background: rgba(10, 22, 40, 0.92);
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--mid-blue);
}

#map-overlay-status #search-form {
  width: 100%;
  display: flex;
  gap: 6px;
  background: rgba(10, 22, 40, 0.92);
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--mid-blue);
}

#map-overlay-status #cruise-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(10, 22, 40, 0.92);
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--mid-blue);
}

/* right clears #bottom-hud (focus/bearing + heading/speed + tide, all in
   one row now under the "Zoned" layout — see #bottom-hud) so the command
   bar doesn't compete with it for the same corner. Widened from 212px
   (tuned for a single tide-or-heading-speed lane) since the combined row
   can run wider, especially with a long focus-target name; #bottom-hud
   also wraps to a second line rather than overlapping if it still runs
   out of room on a narrow screen.

   Hidden by default — per direct report, the transcript/command-reference/
   text-input stack piled up against the tide widget into an unreadable
   mess on a phone. This text-command interface is really an Underway
   tool (a quick typed query while the map itself is doing the real work),
   so it now only appears once Underway is switched on — see the
   #app.underway-mode override below, higher-specificity so it wins over
   this bare-ID rule without needing !important (which is reserved here
   for edit/anim mode's hard override, so it still wins even if Underway
   happens to also be on). */
#map-overlay-cmd {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 300px; /* clears #bottom-hud's width on desktop */
  z-index: 1001;
  display: none;
  flex-direction: column;
  gap: 8px;
}
#app.underway-mode #map-overlay-cmd {
  display: flex;
}
/* Same fix as #app.following-active #focus-btn above, and for the same
   reason: this bar is the ONLY way to issue any command (typed, or
   dictated via the phone keyboard's own mic) — including the Follow/
   Virtual Journey-specific "next waypoint" and "bearing to waypoint N".
   Gating it purely on the manual Underway toggle silently made those
   commands unreachable during a virtual journey run with Underway off,
   same as #focus-btn was. */
#app.following-active #map-overlay-cmd {
  display: flex;
}
/* On a phone-width screen, reserving 300px on the right leaves almost no
   room for the command input at all — confirmed live, this is what "the
   text box to enter the destination was obscured" turned out to be.
   #bottom-hud wraps to a short stack at this width (see its own
   flex-wrap), so instead of reserving horizontal space for it, give the
   command bar the full width and lift it clear of #bottom-hud's stacked
   height vertically instead. */
@media (max-width: 640px) {
  /* 170px, not a tightly-measured number: #bottom-hud can wrap its three
     chips (focus pill, heading/speed, tide-with-slider) across more than
     one row at this width, and the tide chip alone can run ~130-150px
     tall. Erring generous here costs a little map real estate; erring
     tight recreates the exact "input obscured" bug this exists to fix. */
  #map-overlay-cmd { right: 10px; bottom: 170px; }
}

/* #map-overlay-cmd establishes its own stacking context (position + z-index),
   so #response-area's own z-index can never win against an outside sibling
   like #focus-btn (z-index:1002) on its own — the parent has to rise instead.
   Only while the transcript is actually expanded, so it doesn't otherwise sit
   above everything all the time. */
#map-overlay-cmd:has(#response-area:not(.collapsed)) {
  z-index: 1500;
}

/* Direct follow-up (2026-09-30, reported live on a Pixel phone):
   #command-picker/#text-input below were already narrowed the same day
   (see their own comments), but this one was left at the parent's
   default flex-column stretch — full #map-overlay-cmd width, which on a
   phone is nearly the whole screen. align-self overrides that stretch,
   same technique as the other two; kept noticeably wider than the
   picker/input (it holds read sentences, not short option/input text),
   bounded by vw so it can't still run edge-to-edge on a narrower phone
   than this was measured against. */
#map-overlay-cmd #response-area {
  align-self: flex-start;
  width: 260px;
  max-width: 80vw;
  background: rgba(26, 58, 92, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 8px;
  padding: 12px;
  max-height: 40vh;
  max-height: 40dvh;
  overflow-y: auto;
}
/* Direct follow-up: the shrunken/peek state should be as narrow as
   possible — shrink to fit just its own "tap to expand" label, not the
   260px the EXPANDED transcript above needs for reading full lines.
   Needs the same #map-overlay-cmd #response-area.collapsed specificity
   (two ID selectors) to actually beat that rule's own width:260px —
   a plain #response-area.collapsed (one ID + one class) loses that
   fight regardless of source order. */
#map-overlay-cmd #response-area.collapsed {
  width: fit-content;
  max-width: 80vw;
}

#map-overlay-cmd #text-form {
  display: flex;
  gap: 8px;
}

#map-overlay-cmd #text-input {
  background: rgba(26, 58, 92, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#map-overlay-cmd #command-picker {
  background: rgba(26, 58, 92, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Was a fixed circular button (right edge, part of the Global Ops column)
   that cycled one mode per tap; per explicit request, now a pulldown living
   with the other status tiles at the top instead — showing every mode at
   once beats several taps to reach a non-adjacent one. */
#map-layer-select {
  background: rgba(18, 13, 8, 0.94); /* --brass-ink */
  border: 1px solid var(--brass-dim);
  border-radius: 6px;
  color: var(--parchment-dim);
  font-family: var(--font-brass-serif);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 9px;
  cursor: pointer;
  white-space: nowrap;
}
#map-layer-select:hover { border-color: var(--brass); color: var(--brass-hi); }

/* ⊙ Zoom to me — a small button on the compass's lower-right edge
   (2026-10-07; was in the removed right-hand panel). The compass itself
   ignores clicks (pointer-events:none, so the map under it stays usable),
   so this one opts back in. */
.compass-rose-ctrl { position: relative; }
#zoom-to-me-btn {
  position: absolute;
  right: -10px;
  bottom: -8px;
  width: 30px;
  height: 30px;
  padding: 0;
  pointer-events: auto;
  background: var(--brass-ink-2);
  color: var(--brass);
  border: 1px solid var(--brass);
  border-radius: 50%;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
#zoom-to-me-btn:hover { color: var(--brass-hi); border-color: var(--brass-hi); }
#zoom-to-me-btn:active { background: var(--brass-dim); }

/* What's running — track recording, anchor watch (see #active-strip in
   index.html). Sits where the removed right-hand panel did: below the
   Objects panel, right edge — a spot nothing else uses in any mode. Above
   other overlays so a Stop/Silence button can never be covered. */
#active-strip {
  position: absolute;
  top: 118px;
  right: 10px;
  z-index: 1150;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  max-width: calc(100% - 110px);
  pointer-events: none;
}
#active-strip > * { pointer-events: auto; }
.as-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 10px;
  background: rgba(18, 13, 8, 0.94);
  border: 1px solid var(--danger);
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
  color: var(--parchment);
  font-size: 0.82rem;
}
.as-chip { max-width: 100%; box-sizing: border-box; }
.as-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Phone: wrap rather than run off the left edge (an alarm's text must be
   readable, not ellipsized away). */
@media (max-width: 600px) {
  #active-strip { max-width: calc(100% - 20px); }
  .as-text { white-space: normal; line-height: 1.25; }
  .as-chip { border-radius: 14px; }
}
#as-rec .as-text::first-letter { color: var(--danger); }
#as-anchor { border-color: var(--brass); }
#as-anchor.alarming { border-color: var(--danger); background: #3a0a0a; animation: anchor-btn-pulse 1s ease-in-out infinite; }
#active-strip .as-chip button {
  flex-shrink: 0;
  background: var(--brass-ink-2);
  color: var(--parchment);
  border: 1px solid var(--brass-dim);
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
#active-strip .as-chip button:hover { border-color: var(--brass); }
#active-strip #anchor-watch-silence-btn { border-color: var(--warn); color: var(--warn); background: #2a1e08; }
#active-strip #anchor-watch-form {
  width: min(300px, calc(100vw - 120px));
  background: rgba(10, 22, 40, 0.94);
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--mid-blue);
}
/* Node Ops' Re-route (moved from the removed right-hand panel). */
#reroute-btn.working, #etp-simplify.working { background: var(--brass); color: var(--brass-ink); }


#track-picker-panel {
  display: none;
  position: absolute;
  top: 10px;
  bottom: 70px; /* clear the command bar/text-input row docked at the bottom, same as #route-picker-panel */
  right: 10px;
  /* Direct follow-up: "all windows such as Test Sets window should come up
     on top of all other buttons and ui elements" — same "above every other
     panel/banner" tier #route-picker-panel already uses (see its own
     comment), just never applied here when this panel was split out. */
  z-index: 1900;
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 200px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-width: min(320px, calc(100vw - 80px));
  box-shadow: 0 2px 12px rgba(0,0,0,0.7);
  font-size: 0.85rem;
  color: var(--text);
  flex-direction: column;
  gap: 6px;
}
#track-picker-panel.open { display: flex; }

/* Waypoints/Test Sets panels (v754) — promoted from nested right-click
   context-menu submenus to standalone top-row panels, per direct
   request: "I want them to become buttons that are always visible, in
   the rows of buttons at the top of the screen." Same footprint as
   #track-picker-panel above (same rationale). */
#waypoints-panel,
#testsets-panel {
  display: none;
  position: absolute;
  top: 10px;
  bottom: 70px;
  right: 10px;
  /* Direct follow-up: "all windows such as Test Sets window should come up
     on top of all other buttons and ui elements" — same "above every other
     panel/banner" tier #route-picker-panel already uses (see its own
     comment), just never applied here when this panel was split out. */
  z-index: 1900;
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 200px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-width: min(320px, calc(100vw - 80px));
  box-shadow: 0 2px 12px rgba(0,0,0,0.7);
  font-size: 0.85rem;
  color: var(--text);
  flex-direction: column;
  gap: 6px;
}
#waypoints-panel.open,
#testsets-panel.open { display: flex; }

/* Override the old nested-submenu look (dim, indented, no border-radius —
   #map-ctx-wp-submenu button etc.) now that these are the PRIMARY content
   of a standalone panel, not a secondary indented level under a parent
   item. Higher specificity (two IDs) than the old rules, so no !important
   needed. Matches the action-button look used elsewhere (.navaid-popup-brg
   etc.) for visual consistency with the rest of the app's floating panels. */
#waypoints-panel #map-ctx-wp-submenu,
#testsets-panel #map-ctx-testsets-submenu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: none;
}
#waypoints-panel #map-ctx-wp-submenu button,
#testsets-panel #map-ctx-testsets-submenu button {
  padding: 7px 10px;
  font-size: 0.82rem;
  color: var(--text);
  background: var(--mid-blue);
  border-radius: 6px;
}
#waypoints-panel #map-ctx-wp-submenu button:hover,
#waypoints-panel #map-ctx-wp-submenu button:active,
#testsets-panel #map-ctx-testsets-submenu button:hover,
#testsets-panel #map-ctx-testsets-submenu button:active {
  background: var(--accent);
  color: var(--navy);
}
/* .ctx-wp-del/.ctx-ts-del already force var(--danger) with !important
   (existing rule, unaffected by relocation) — no override needed here. */
#tp-search {
  width: 100%;
  box-sizing: border-box;
  background: var(--mid-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.82rem;
  padding: 5px 8px;
}
#tp-search::placeholder { color: var(--text-dim); }
/* Start/stop recording, at the top of the Tracks window (moved from the
   removed right-hand panel, 2026-10-07). */
#tp-record {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 6px;
  background: #2a0a0a;
  border: 1px solid var(--danger);
  border-radius: 6px;
  color: #ff8080;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 8px;
  cursor: pointer;
}
#tp-record:hover { background: #3a0a0a; }
#tp-search:focus { outline: none; border-color: var(--accent); }
#tp-track-list {
  max-height: 40dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#route-picker-panel {
  display: none;
  position: absolute;
  top: 10px;
  bottom: 70px; /* clear the command bar/text-input row docked at the bottom */
  right: 10px;
  /* Above every other panel/banner (Node Ops, optimizing overlay, etc.) so it's
     never obscured when open — only the transient right-click context menu
     stays above it, by deliberate convention. */
  z-index: 1900;
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 200px;
  /* top+bottom both set (rather than a bottom anchor + max-height) so the
     panel actively fills most of the vertical viewport when open, instead
     of just sizing to its content and capping at some maximum. */
  overflow-y: auto;
  /* Without this, a touch swipe inside a nested overflow:auto panel
     floating over the Leaflet map can fail to actually initiate momentum
     scrolling on iOS Safari — a real, reported case: the sample-routes
     list (5 verbose entries, genuinely taller than the panel) looked
     "stuck" on a phone even though desktop mouse-wheel scrolling over the
     exact same DOM worked fine. */
  -webkit-overflow-scrolling: touch;
  max-width: min(320px, calc(100vw - 80px));
  box-shadow: 0 2px 12px rgba(0,0,0,0.7);
  font-size: 0.85rem;
  color: var(--text);
  flex-direction: column;
  gap: 6px;
}
#route-picker-panel.open { display: flex; }

/* Same footprint as #route-picker-panel (same rationale for every rule
   below), but its own standalone panel — not nested inside Routes — so
   the user can leave it open across an entire sample-route movie and on
   into watching the next one, per the v649 discoverability fix. One
   z-index tier above Routes so it always wins the stack on the rare
   occasion both happen to be open at once (a movie's own Step 4 briefly
   opens Routes to start Virtual Journey, which then closes Routes again
   itself — see _startVirtualJourney). Deliberately has no
   _map.on('click', ...) auto-close, unlike every other panel here — the
   user asked for this one to stay up until they close it themselves. */
#sample-routes-panel {
  display: none;
  position: absolute;
  top: 10px;
  bottom: 70px;
  right: 10px;
  z-index: 1901;
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 200px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-width: min(320px, calc(100vw - 80px));
  box-shadow: 0 2px 12px rgba(0,0,0,0.7);
  font-size: 0.85rem;
  color: var(--text);
  flex-direction: column;
  gap: 6px;
}
#sample-routes-panel.open { display: flex; }
/* Compact mode: while a route is being Followed or run as a Virtual
   Journey, its Stop control is really all that's needed here — the full
   top:10/bottom:70 span (see above) exists to fit a scrollable list of
   dozens of routes, and there's no reason to keep covering the Underway
   switch (top-right) and most of the map for that one row. Drop the top
   anchor so the panel just hugs its (now much smaller) content instead,
   hung from the bottom-right corner. */
#route-picker-panel.compact {
  top: auto;
  max-height: min(50vh, calc(100vh - 90px));
}
#route-picker-panel.compact .nf-new-route,
#route-picker-panel.compact .rp-search-row,
#route-picker-panel.compact #rp-bulk-bar,
#route-picker-panel.compact .nf-actions,
#route-picker-panel.compact .nf-sync-bar,
#route-picker-panel.compact #rp-sync-status,
#route-picker-panel.compact #rp-cleanup-dupes {
  display: none;
}
#rp-compact-toggle {
  display: none;
  background: none;
  border: 1px solid var(--mid-blue);
  border-radius: 4px;
  color: var(--text-dim);
  font-size: 0.68rem;
  padding: 2px 6px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
}
#rp-compact-toggle:hover { border-color: var(--accent); color: var(--text); }
#rp-compact-toggle.active { border-color: var(--accent); color: var(--accent); }
#app.following-active #rp-compact-toggle { display: inline-block; }
.rp-search-row {
  display: flex;
  gap: 6px;
  padding: 0 10px 6px;
  align-items: center;
}
#rp-search {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  background: var(--mid-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.82rem;
  padding: 5px 8px;
}
#rp-search::placeholder { color: var(--text-dim); }
#rp-search:focus { outline: none; border-color: var(--accent); }
#rp-sort {
  flex-shrink: 0;
  background: var(--mid-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.75rem;
  padding: 5px 4px;
}
#rp-select-toggle {
  flex-shrink: 0;
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.75rem;
  padding: 5px 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#rp-select-toggle.active { border-color: var(--accent); color: var(--accent); }
#rp-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 10px 6px;
}
#rp-bulk-bar button {
  flex: 1 1 40%;
  background: var(--dark-blue);
  color: var(--text);
  border: 1px solid var(--mid-blue);
  border-radius: 6px;
  padding: 6px 4px;
  font-size: 0.78rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#rp-bulk-bar button:disabled { opacity: 0.4; cursor: not-allowed; }
#rp-bulk-bar button.rp-bulk-danger { border-color: #a33; color: #ff8a8a; }
#rp-bulk-bar button.rp-bulk-danger:not(:disabled):hover { background: #3a0a0a; }
.rp-row-checkbox {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.rp-row.selected { background: var(--mid-blue); box-shadow: inset 0 0 0 1px var(--accent); }
#rp-route-list {
  flex: 1 1 auto;
  min-height: 0; /* let a flex child actually shrink/scroll instead of overflowing its column */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rp-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
.rp-row:hover, .rp-row:active { background: var(--mid-blue); }
.rp-row-name {
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
/* Name gets the flexible space (with a hard ellipsis truncation, not
   another stacked line) so date/hazard badges/corner buttons usually
   line up at the same right-hand position across every row instead of
   floating wherever a long name happens to end. BUG (found live,
   reproduced with 2 hazard badges + date + the activate pill in a
   ~300px panel): `flex: 1` alone means a flex-basis of 0%, so when the
   fixed-width siblings (activate pill, date, flex-shrink:0) plus badges
   already exceed the row's width on their own, there is no leftover
   "free space" for this element's flex-grow to claim — it silently
   renders at literal 0px, not just a narrow ellipsis, hiding the name
   entirely. `min-width` below is the fix: it guarantees the name a real
   minimum share of the row regardless of how many badges are present;
   `flex-wrap` on `.rp-row-name` lets whatever doesn't fit (extra hazard
   badges) drop to a second line instead, so name visibility never loses
   to badge count again. */
.rp-row-name-text {
  flex: 1;
  min-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-row-date-inline {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-dim);
}
/* The activate control: a real, separately-tappable button (not a plain
   ::before label riding on the row's own click) — a tap here toggles this
   route/track's shown-on-map state and nothing else, and a tap anywhere
   else on the row only expands/collapses the details below it. Spelled-out
   text, not just a symbol, so its effect is legible without knowing the
   ✓/✗ convention first. See .rp-corner-btn-danger below for where Delete
   moved — nothing destructive lives anywhere near this button or the rest
   of the row's own tap target. */
.rp-activate-btn {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 9px;
  min-height: 28px;
  border-radius: 999px;
  border: 1.5px solid #1a6b3c;
  color: #4ade80;
  background: #0a2a16;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.rp-activate-btn:hover { border-color: #2a8b4c; color: #6aeea0; }
.rp-activate-btn.hidden {
  border-color: var(--danger);
  color: #ff8080;
  background: #2a0a0a;
}
.rp-activate-btn.hidden:hover { background: #3a0a0a; }
.rp-row.hidden .rp-row-name {
  color: var(--text-dim);
}
.rp-corner { display: none; margin-left: auto; align-self: flex-end; gap: 6px; }
.rp-row.expanded .rp-corner { display: flex; }
.rp-corner-btn {
  background: none;
  border: 1px solid var(--mid-blue);
  border-radius: 4px;
  color: var(--text-dim);
  font-size: 0.72rem;
  padding: 2px 6px;
  cursor: pointer;
}
/* Delete used to be an always-visible "×" inline in the name row, right
   next to the On map/Hidden mark — confirmed reported as too easy to hit
   by accident while trying to just activate a route. Now it's the last
   corner button, only reachable after expanding the row, with its own
   danger color so it doesn't get confused with the routine actions next
   to it — a stray tap on a collapsed row can no longer delete anything. */
.rp-corner-btn-danger {
  border-color: var(--danger);
  color: var(--danger);
}
.rp-corner-btn-danger:hover { background: var(--danger); color: #fff; }
.rp-corner-btn:hover { border-color: var(--accent); color: var(--text); }
.rp-rename-input {
  flex: 1;
  min-width: 0;
  background: var(--mid-blue);
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--text);
  font-size: 0.85rem;
  padding: 1px 4px;
}
.rp-row-places {
  font-size: 0.75rem;
  color: var(--text-dim);
  padding-left: 18px;
}
.rp-legs {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 2px 18px;
}
.rp-row.expanded .rp-legs { display: flex; }
.rp-leg-row {
  font-size: 0.75rem;
  color: var(--text-dim);
}
.rp-follow-btn {
  display: block;
  margin: 6px 0 0 18px;
  background: none;
  border: 1px solid var(--mid-blue);
  border-radius: 4px;
  color: var(--text-dim);
  font-size: 0.75rem;
  padding: 3px 8px;
  cursor: pointer;
}
.rp-follow-btn:hover { border-color: var(--accent); color: var(--text); }
.rp-follow-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.rp-follow-btn.following {
  border-color: var(--danger);
  color: var(--danger);
  background: #2a0a0a;
  font-weight: 700;
}
.rp-vj-btn {
  display: block;
  margin: 6px 0 0 18px;
  background: none;
  border: 1px solid #f5c842;
  border-radius: 4px;
  color: #f5c842;
  font-size: 0.75rem;
  padding: 3px 8px;
  cursor: pointer;
}
.rp-vj-btn:hover { background: rgba(245, 200, 66, 0.15); }
.rp-vj-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.rp-empty {
  font-size: 0.82rem;
  color: var(--text-dim);
  text-align: center;
  padding: 10px 0;
  font-style: italic;
}
/* ── Copy-waypoints overlay ──────────────────────────────────────────────── */
#wpt-copy-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
}
#wpt-copy-overlay.open { display: flex; }
#wpt-copy-panel {
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 10px;
  padding: 14px;
  width: min(420px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.8);
}
#wpt-copy-panel .nf-title { cursor: default; }
#wpt-copy-close {
  background: none;
  border: none;
  color: var(--muted, #8899aa);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
#wpt-copy-close:hover { color: var(--text); }
#wpt-copy-text {
  flex: 1;
  min-height: 200px;
  max-height: 50vh;
  background: var(--mid-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 6px;
  color: var(--text);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.78rem;
  padding: 8px;
  resize: vertical;
  user-select: text;
  -webkit-user-select: text;
}
#wpt-copy-btn {
  background: var(--dark-blue);
  color: var(--text);
  border: 1px solid var(--mid-blue);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.82rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#wpt-copy-btn:hover { border-color: var(--accent); color: var(--text); }
#wpt-copy-btn.copied { border-color: var(--accent); color: var(--accent); }

/* Same dimmed modal treatment as #wpt-copy-overlay — shown when a typed
   AutoRoute/Draw-Route destination name matches more than one real place
   (Maine reuses island names constantly), so the user picks the right one
   instead of the app silently guessing. */
#place-disambig-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
}
#place-disambig-overlay.open { display: flex; }
#place-disambig-panel {
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 10px;
  padding: 14px;
  width: min(340px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.8);
}
#place-disambig-panel .nf-title { cursor: default; }
#place-disambig-close {
  background: none;
  border: none;
  color: var(--muted, #8899aa);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
#place-disambig-close:hover { color: var(--text); }
#place-disambig-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  max-height: 60vh;
}
#place-disambig-list button {
  background: var(--mid-blue);
  color: var(--text);
  border: 1px solid var(--mid-blue);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#place-disambig-list button:hover,
#place-disambig-list button:active { border-color: var(--accent); background: var(--accent); color: var(--navy); }

/* Generic on-page window.prompt() replacement — see _showTextPrompt in
   app.js. Same look/structure as #place-disambig-overlay just above. */
#text-prompt-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
}
#text-prompt-overlay.open { display: flex; }
#text-prompt-panel {
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 10px;
  padding: 14px;
  width: min(340px, calc(100vw - 40px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.8);
}
#text-prompt-panel .nf-title { cursor: default; }
#text-prompt-close {
  background: none;
  border: none;
  color: var(--muted, #8899aa);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
#text-prompt-close:hover { color: var(--text); }
#text-prompt-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--mid-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.95rem;
  padding: 8px 10px;
}
#text-prompt-input:focus { outline: none; border-color: var(--accent); }
#text-prompt-panel .nf-actions button:last-child { background: var(--accent); color: var(--navy); border-color: var(--accent); }

/* Same modal tier as #place-disambig-overlay/#text-prompt-overlay (z-index
   3000 — above every ordinary floating widget/panel in the app, which all
   stay well under 2000) so an important status message can never end up
   silently buried behind one. Unlike those two, the whole backdrop (not
   just an explicit close control) dismisses it — this is a pure notice,
   nothing to choose, so "tap anywhere to dismiss" is the whole interaction. */
#coverage-alert-overlay, #boat-plan-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#coverage-alert-overlay.open, #boat-plan-overlay.open { display: flex; }
#coverage-alert-panel, #boat-plan-panel {
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 10px;
  padding: 18px;
  width: min(360px, calc(100vw - 40px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.8);
  cursor: default;
  text-align: center;
}
#coverage-alert-text, #boat-plan-text {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.4;
}
#coverage-alert-dismiss, #boat-plan-reroute, #boat-plan-keep {
  background: var(--accent);
  color: var(--navy);
  border: none;
  border-radius: 6px;
  padding: 8px 24px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
#boat-plan-overlay { cursor: default; }
.boat-plan-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
#boat-plan-keep { background: transparent; color: var(--text); border: 1px solid var(--mid-blue); }

/* Same modal tier/backdrop-dismiss convention as #coverage-alert-overlay
   just above, but the panel itself stops click propagation (see
   paintings-table-panel's own listener in app.js) since its rows hold
   real links that need a normal click, not a dismiss. */
#paintings-table-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#paintings-table-overlay.open { display: flex; }
#paintings-table-panel {
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 10px;
  padding: 10px 14px 14px;
  width: min(640px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 80px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.8);
  cursor: default;
}
#paintings-table-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#paintings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  color: var(--text);
}
#paintings-table th {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--mid-blue);
  color: var(--muted, #8899aa);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  position: sticky;
  top: 0;
  background: var(--dark-blue);
}
#paintings-table td {
  padding: 7px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  vertical-align: top;
}
#paintings-table tr:last-child td { border-bottom: none; }
#paintings-table a {
  color: var(--accent);
  text-decoration: none;
}
#paintings-table a:hover { text-decoration: underline; }
.paintings-table-thumb {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--mid-blue);
}
.paintings-table-thumb:hover { border-color: var(--accent); }

#rp-close {
  background: none;
  border: none;
  color: var(--muted, #8899aa);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
#rp-close:hover { color: var(--text); }

/* Shrink-to-title button added by _makeCollapsible() to every open/close
   floating panel (Routes, Tracks, Samples, Waypoints, Test Sets, About). */
/* A visible chip, not a bare glyph — v764's muted, borderless ▴ was too
   faint to notice in the title bar. */
.nf-shrink-btn {
  background: rgba(74, 158, 221, 0.15);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  min-width: 34px;
  min-height: 28px;
  margin-right: 6px;
  padding: 0 8px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.nf-shrink-btn:hover { background: rgba(74, 158, 221, 0.3); color: var(--text); }
.panel-collapsed > :not(.nf-title) { display: none !important; }
.panel-collapsed {
  /* Most of these panels are sized by pinning both top and bottom; drop
     the bottom pin so the box shrinks to its title. */
  bottom: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
.panel-collapsed > .nf-title { margin-bottom: 0; }

/* Direct request: "keep the Objects menu always on the screen, but be
   able to shrink to just a title, in place" — no more open/closed via a
   separate button (#navaid-filter-btn removed); always display:flex,
   collapse/expand toggles #nf-body instead (same mechanism as Node Ops'
   own #etp-title/#edit-tools-body — see that comment for the pattern this
   mirrors). Also narrowed to about half its old rendered width (~130px
   min-width, content pushed it out to ~280px in practice) per direct
   follow-up. */
#navaid-filter-panel {
  display: flex;
  position: absolute;
  top: 70px;
  right: 10px;
  /* Direct follow-up: "all windows such as Test Sets window should come up
     on top of all other buttons and ui elements" — same "above every other
     panel/banner" tier #route-picker-panel already uses (see its own
     comment), just never applied here when this panel was split out. */
  z-index: 1900;
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 10px;
  padding: 10px 14px;
  width: 140px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.7);
  font-size: 0.85rem;
  color: var(--text);
  flex-direction: column;
  gap: 6px;
}
#navaid-filter-panel.collapsed #nf-body { display: none !important; }
/* Shrunk, it's a small tab up in the toolbar's row at the right edge, out of the way (v1026, requested: "Let's get
   the shrunk objects menu more out of the way"); a panel dragged elsewhere keeps its own place (inline top/left) */
#navaid-filter-panel.collapsed { top: 34px; width: auto; padding: 3px 9px; border-radius: 6px; gap: 0; box-shadow: 0 1px 5px rgba(0,0,0,0.5); opacity: 0.85; }
#navaid-filter-panel.collapsed:hover { opacity: 1; }
@media (max-width: 640px) { #navaid-filter-panel.collapsed { top: 70px; right: 8px; } }   /* (a phone's toolbar fills its row: just under it) */
#navaid-filter-panel.collapsed .nf-title { font-size: 0.62rem; margin: 0; padding: 0; border: 0; }
.nf-title-collapsible::after { content: '  \25B4'; } /* up chevron — tap to collapse */
.nf-title-collapsible.collapsed::after { content: '  \25BE'; } /* down chevron — tap to expand */

#about-panel {
  display: none;
  position: absolute;
  bottom: 100px;
  left: 10px;
  /* Direct follow-up: "all windows such as Test Sets window should come up
     on top of all other buttons and ui elements" — same "above every other
     panel/banner" tier #route-picker-panel already uses (see its own
     comment), just never applied here when this panel was split out. */
  z-index: 1900;
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 180px;
  max-width: 260px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 2px 12px rgba(0,0,0,0.7);
  font-size: 0.85rem;
  color: var(--text);
  flex-direction: column;
  gap: 4px;
}
#about-panel.open { display: flex; }
#about-version {
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
}
.nf-sub-heading {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #8899aa);
  margin: 6px 0 2px;
}
.about-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.about-list li { line-height: 1.4; }
.nf-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.nf-title:active { cursor: grabbing; }
.nf-title-actions { display: flex; align-items: center; gap: 4px; }
#navaid-filter-panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.nf-sub {
  font-size: 0.75rem;
  color: var(--muted, #8899aa);
  padding-left: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* A top-level setting (unlike the Depths-overlay sub-items it sits near),
   so no nested-under-a-checkbox indent. */
.nf-draft-row { padding-left: 0; }
#navaid-filter-panel .nf-divider {
  border-top: 1px solid var(--mid-blue);
  margin: 6px 0;
}
/* Your boat · draft (v920): one row per boat, a radio for the one you're sailing and her draft */
#nf-boats { display: grid; grid-template-columns: auto 1fr 40px; align-items: center; gap: 4px 6px; font-size: 0.75rem; line-height: 1.15; }
#nf-boats .nf-sub-heading { grid-column: 1 / -1; }
#navaid-filter-panel #nf-boats .nf-boat-row { display: contents; }
#navaid-filter-panel #nf-boats .nf-boat-row input[type=number] { width: 40px; box-sizing: border-box; }
#nf-boats .nf-boat-row input[type=radio] { margin: 0; accent-color: var(--accent); }
#nf-draft-ft, #nf-route-timeout-s, #nf-boats input[type=number] {
  width: 52px;
  background: var(--mid-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 4px;
  color: var(--text);
  font-size: 0.78rem;
  padding: 2px 4px;
  -moz-appearance: textfield;
}
#nf-draft-ft::-webkit-inner-spin-button, #nf-route-timeout-s::-webkit-inner-spin-button,
#nf-draft-ft::-webkit-outer-spin-button, #nf-route-timeout-s::-webkit-outer-spin-button { opacity: 1; }
#nf-tide-status { font-style: italic; }
.nf-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.nf-actions button {
  flex: 1;
  padding: 5px 0;
  border-radius: 6px;
  font-size: 0.8rem;
  background: var(--mid-blue);
  border: none;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nf-actions button:active { background: var(--accent); color: var(--navy); }

.nf-sync-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--mid-blue);
}
.nf-sync-wifi {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--muted, #8899aa);
  cursor: pointer;
  user-select: none;
  flex: 1;
}
.nf-sync-bar button {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  background: var(--mid-blue);
  border: none;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nf-sync-bar button:active { background: var(--accent); color: var(--navy); }
.nf-sync-status {
  font-size: 0.7rem;
  font-style: italic;
  color: var(--muted, #8899aa);
  margin-top: 3px;
  min-height: 1em;
}
#rp-cleanup-dupes {
  width: 100%;
  margin-top: 6px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  background: var(--mid-blue);
  border: none;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#rp-cleanup-dupes:active { background: var(--accent); color: var(--navy); }

.nf-new-route {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 10px 2px;
}
.nf-new-route button {
  flex: 1 1 40%;
  background: var(--dark-blue);
  color: var(--text);
  border: 1px solid var(--mid-blue);
  border-radius: 6px;
  padding: 6px 4px;
  font-size: 0.8rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nf-new-route button:active { background: var(--mid-blue); }
#rp-sample-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 10px 6px;
}
.rp-sample-heading {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  padding: 4px 2px 2px;
}
.rp-sample-item {
  display: flex;
  align-items: stretch;
  gap: 6px;
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 6px;
  overflow: hidden;
}
.rp-sample-item-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: none;
  border: none;
  padding: 6px 8px;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font-size: 0.85rem;
  -webkit-tap-highlight-color: transparent;
}
.rp-sample-item-main:hover, .rp-sample-item-main:active { background: var(--mid-blue); }
.rp-sample-item-name { font-weight: 600; }
.rp-sample-item-note {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-dim);
}
.rp-sample-item-watch {
  flex-shrink: 0;
  align-self: center;
  margin-right: 6px;
  background: var(--accent);
  color: var(--navy);
  border: none;
  border-radius: 14px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.rp-sample-item-watch:hover, .rp-sample-item-watch:active { filter: brightness(1.1); }
#rp-sketch {
  border-color: var(--accent);
  color: var(--accent);
}

/* Navaid overlay popup menu */
.navaid-popup-wrapper .leaflet-popup-content-wrapper {
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.7);
  padding: 0;
}
.navaid-popup-wrapper .leaflet-popup-content {
  margin: 0;
}
.navaid-popup-wrapper .leaflet-popup-tip {
  background: var(--dark-blue);
}
.navaid-popup-wrapper .leaflet-popup-close-button {
  color: var(--text);
  font-size: 16px;
  top: 6px;
  right: 8px;
}
#near-point-panel {
  display: none;
  position: fixed;
  z-index: 9999;
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 10px;
  padding: 8px 10px;
  min-width: 240px;
  max-width: 340px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
.npp-header { display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.npp-header button { background: none; border: none; color: var(--text); font-size: 16px; cursor: pointer; }
.near-point-table { border-collapse: collapse; width: 100%; font-size: 0.8rem; color: var(--text); }
.near-point-table th, .near-point-table td { padding: 4px 6px; text-align: left; color: var(--text); }
.near-point-table thead th { color: var(--text-dim); font-weight: 600; border-bottom: 1px solid var(--mid-blue); }
.npp-row-name { cursor: default; }
#npp-hide-others { width: 100%; margin-top: 6px; }
.navaid-popup {
  display: flex;
  flex-direction: column;
  min-width: 160px;
  padding: 10px 12px 8px;
  gap: 6px;
}
.navaid-popup-name {
  font-size: 0.78rem;
  font-weight: bold;
  color: var(--text);
  border-bottom: 1px solid var(--mid-blue);
  padding-bottom: 6px;
  margin-bottom: 2px;
}
/* Search pins' resolved place/coords — shown under their SP00N name so the
   auto-generated addressable id doesn't lose the "why did I drop this"
   context, without that context being part of the name itself. */
.navaid-popup-note {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: -4px;
}
/* Filled in on popupopen from the marker's live getLatLng(), not baked in
   at render time — stays correct after a drag without needing to rebuild
   the whole popup. */
.navaid-popup-coords {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-family: var(--font-brass-mono, monospace);
  margin-bottom: 2px;
}
/* Which side to leave a lateral mark on (v731) — deliberately the most
   visually prominent line in the popup, per direct request ("the clearer
   the better"): this is the one thing worth reading at a glance while
   underway, more than the name itself. */
.navaid-popup-side {
  font-size: 0.76rem;
  font-weight: bold;
  line-height: 1.4;
  padding: 5px 7px;
  border-radius: 5px;
  border: 1px solid;
}
.navaid-popup-side.port {
  color: #4dd05a;
  background: rgba(77, 208, 90, 0.12);
  border-color: rgba(77, 208, 90, 0.4);
}
.navaid-popup-side.starboard {
  color: #ff5c5c;
  background: rgba(255, 92, 92, 0.12);
  border-color: rgba(255, 92, 92, 0.4);
}
.navaid-popup-side.junction {
  color: #f5c518;
  background: rgba(245, 197, 24, 0.12);
  border-color: rgba(245, 197, 24, 0.4);
}
.navaid-popup-side.safewater {
  color: #7ec8e3;
  background: rgba(126, 200, 227, 0.12);
  border-color: rgba(126, 200, 227, 0.4);
}
/* The inbound/outbound pair inside a port/starboard box. Plain by
   default — both directions always shown, since the mark alone doesn't
   say which applies. .active marks whichever one a confident live-heading
   guess (see _computeLikelyInboundOutbound) currently favors; the OTHER
   line stays fully visible too, just visually quieter, never hidden. */
.navaid-side-line {
  opacity: 0.7;
}
.navaid-side-line.active {
  opacity: 1;
  text-decoration: underline;
}
/* Rotated to the real compass bearing of travel that line's rule applies
   to (see _chainAscendingBearing) — replaces the word "Inbound"/
   "Outbound" with a picture of which way that means, direct follow-up
   request since the words alone read as confusing. 0deg = up = north,
   rotates clockwise with bearing, same convention as this app's other
   compass-relative icons (e.g. the boat icon). */
.navaid-side-arrow {
  display: inline-block;
  font-weight: 900;
  margin-right: 2px;
}
/* Plain compass word next to the rotated arrow (v752) — the arrow
   alone asked the reader to estimate an angle from a spinning glyph;
   this states the real direction in words, e.g. "(heading northwest)". */
.navaid-side-dir {
  font-weight: normal;
  font-style: italic;
  opacity: 0.75;
}
.navaid-side-hint {
  font-size: 0.66rem;
  font-weight: normal;
  font-style: italic;
  opacity: 0.75;
  margin-top: 3px;
}
/* Plain-language shape/colour/characteristic line (v732) — what a
   mariner checks by eye to confirm they've found the right mark. */
.navaid-popup-identity {
  font-size: 0.74rem;
  color: var(--text-dim);
}
/* On-map "Inbound" direction arrow (v751) — reintroduced after v745
   removed the earlier arrow feature, this time geometrically accurate
   per consecutive same-chain buoy pair rather than one per whole
   channel (see _findInboundChainPairs). Same plain-glyph, no-background
   visual language as the earlier v740 arrows — that style itself was
   never the complaint, only chain-vs-buoy inconsistency and coverage. */
.navaid-inbound-arrow {
  color: #2266cc;
  font-size: 18px;
  font-weight: 900;
  /* font-weight is already at its CSS max (900) — a text glyph has no
     more room to get bolder that way, so text-stroke adds real extra
     line weight on top, per direct request ("twice as thick"). */
  -webkit-text-stroke: 1.2px #2266cc;
  text-stroke: 1.2px #2266cc;
  text-shadow:
    -1px -1px 0 #fff, 1px -1px 0 #fff,
    -1px  1px 0 #fff, 1px  1px 0 #fff,
    0 1px 3px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  cursor: pointer;
}
/* Labeled info rows (v745) — "Location & Context" / "Navigation Rule" /
   official chart remark, replacing the on-map arrows (v738-744, dropped
   per direct request: "not working... forget the arrows... I want to
   see the full information... when I click on it"). Label above value,
   thin separator between rows, matching the two-column reference layout
   the request itself provided. */
.navaid-popup-row {
  border-top: 1px solid var(--mid-blue);
  padding-top: 6px;
  margin-top: 2px;
}
.navaid-popup-row-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  margin-bottom: 2px;
}
.navaid-popup-row-value {
  font-size: 0.76rem;
  color: var(--text);
  line-height: 1.35;
}
/* Official chart remark (S-57 INFORM, straight from NOAA/USCG source
   data — see preprocess/s57_to_geojson.py's own comment) — visually
   distinct from every other row here since it's the one line that is
   NOT computed/derived by this app, verbatim from the chart supplier. */
.navaid-popup-official {
  font-size: 0.76rem;
  color: var(--text);
  font-style: italic;
  padding: 4px 7px;
  border-left: 3px solid #f5c518;
  background: rgba(245, 197, 24, 0.08);
}
.navaid-popup-brg,
.navaid-popup-copy,
.navaid-popup-copy-loc,
.navaid-popup-focus,
.navaid-popup-rename,
.navaid-popup-autoroute,
.navaid-popup-bring-boat,
.navaid-popup-objects,
.navaid-popup-routes-near,
.navaid-popup-tracks-near,
.navaid-popup-add-testset,
.navaid-popup-testset-pick,
.navaid-popup-delete,
.ts-popup-pos,
.ts-popup-autoroute,
.ts-popup-delete {
  background: var(--mid-blue);
  border: none;
  border-radius: 6px;
  color: var(--text);
  padding: 7px 10px;
  font-size: 0.82rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}
.navaid-popup-brg:active,
.navaid-popup-copy:active,
.navaid-popup-copy-loc:active,
.navaid-popup-focus:active,
.navaid-popup-autoroute:active,
.navaid-popup-rename:active,
.navaid-popup-bring-boat:active,
.navaid-popup-objects:active,
.navaid-popup-routes-near:active,
.navaid-popup-tracks-near:active,
.navaid-popup-add-testset:active,
.navaid-popup-testset-pick:active,
.ts-popup-pos:active,
.ts-popup-autoroute:active { background: var(--accent); color: var(--navy); }
/* Red danger accent, same convention as #delete-route-btn — this one's a
   real, unconfirmed-undo delete rather than a view/focus action. */
.navaid-popup-delete,
.ts-popup-delete { color: #e05252; }
.navaid-popup-delete:active,
.ts-popup-delete:active { background: #e05252; color: #fff; }
.map-tooltip {
  background: var(--dark-blue) !important;
  border: 1px solid var(--mid-blue) !important;
  color: var(--text) !important;
  font-size: 0.75rem;
  padding: 2px 6px;
  white-space: nowrap;
  box-shadow: none !important;
}
.map-tooltip::before { border-top-color: var(--mid-blue) !important; }

/* Tap-shown tooltip for plain HTML buttons (v756) — direct request,
   with the real motivating case: the browser's native `title` attribute
   tooltip only ever appears on mouse HOVER, which does not exist on a
   touch-only device (confirmed relevant: the user's own device is a
   Galaxy tablet) — every #edit-banner button already had a real `title`
   describing it, but on touch that text was simply unreachable. Shown
   on touchstart, positioned above its button (clamped to the viewport,
   same technique as .tour-callout, simplified — no arrow/auto-flip
   needed for a one-line label), auto-hides after a couple seconds.
   pointer-events:none so it never blocks the button's own real tap. */
.btn-tap-tooltip {
  position: fixed;
  z-index: 10000;
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 6px;
  padding: 5px 9px;
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.3;
  max-width: 220px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  pointer-events: none;
}

/* "Take a Tour" callouts — same CSS-triangle-pointer technique as
   .map-tooltip above, but these anchor to arbitrary top-chrome DOM
   elements (buttons, panels), not Leaflet markers, so they're a real
   fixed-position element with their own positioning logic (tour.js), not
   a Leaflet tooltip. z-index 10000 sits one above the general 9999
   floating-chrome tier (#map-context-menu, #demo-hud) and below
   #opencpn-btn's 99999 topmost tier. */
.tour-callout {
  position: fixed;
  z-index: 10000;
  max-width: 280px;
  background: var(--dark-blue);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 12px 14px;
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.4;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  cursor: move;
}
.tour-callout::before {
  content: '';
  position: absolute;
  left: var(--tour-arrow-offset, 20px);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
}
.tour-callout[data-tour-arrow="bottom"]::before { top: -7px; border-bottom: 7px solid var(--dark-blue); }
.tour-callout[data-tour-arrow="top"]::before { bottom: -7px; border-top: 7px solid var(--dark-blue); }
.tour-callout-untargeted::before { display: none; }
.tour-callout-text { margin-bottom: 10px; }
.tour-callout-controls { display: flex; align-items: center; gap: 8px; }
.tour-callout-spacer { flex: 1; }
.tour-btn {
  background: none;
  border: 1px solid var(--mid-blue);
  color: var(--text);
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 0.8rem;
  cursor: pointer;
}
.tour-btn:hover, .tour-btn:active { background: var(--mid-blue); }
.tour-btn-next { border-color: var(--accent); color: var(--accent); }
.tour-btn-skip { border-color: transparent; color: var(--text-dim); }

/* Semi-transparent label for the computed fix position on the map */
.fix-coord-label {
  background: rgba(20, 35, 55, 0.65);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 3px;
  color: #fff;
  font-size: 0.75rem;
  padding: 2px 7px;
  white-space: nowrap;
  pointer-events: none;
}

/* Map right-click context menu */
#boat-context-menu {
  position: fixed;
  z-index: 9999;
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 6px;
  padding: 4px 0;
  display: none;
  min-width: 160px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
#boat-context-menu button {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}
#boat-context-menu button:hover,
#boat-context-menu button:active { background: var(--mid-blue); }

#map-context-menu {
  position: fixed;
  z-index: 9999;
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 6px;
  padding: 4px 0;
  display: none;
  min-width: 180px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.6);
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
}
#map-context-menu button {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}
#map-context-menu button:hover,
#map-context-menu button:active {
  background: var(--mid-blue);
}
/* Objects/Routes/Tracks-within radius pickers — standalone floating panels
   (opened from a marker's own popup via _openNearPointFlyout in app.js),
   not nested inside #map-context-menu, so unlike the list below they carry
   their own full positioning/look rather than inheriting it from a parent
   menu. JS only ever toggles display + sets left/top. */
#map-ctx-objects-submenu,
#map-ctx-routes-near-submenu,
#map-ctx-tracks-near-submenu {
  position: fixed;
  z-index: 10000;
  display: none;
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 6px;
  padding: 4px 0;
  min-width: 180px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.6);
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
}
#map-ctx-objects-submenu button,
#map-ctx-routes-near-submenu button,
#map-ctx-tracks-near-submenu button {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}
#map-ctx-objects-submenu button:hover,
#map-ctx-objects-submenu button:active,
#map-ctx-routes-near-submenu button:hover,
#map-ctx-routes-near-submenu button:active,
#map-ctx-tracks-near-submenu button:hover,
#map-ctx-tracks-near-submenu button:active {
  background: var(--mid-blue);
}
#map-ctx-wp-submenu,
#map-ctx-track-submenu,
#map-ctx-route-submenu,
#map-ctx-testsets-submenu {
  display: none;
  border-top: 1px solid var(--mid-blue);
}
#map-ctx-route-parent {
  border-top: 1px solid var(--mid-blue);
}
#map-ctx-route-submenu button {
  padding-left: 28px;
  font-size: 0.85rem;
  color: var(--text-dim);
}
#map-ctx-route-submenu button:hover,
#map-ctx-route-submenu button:active {
  color: var(--text);
  background: var(--mid-blue);
}
#map-ctx-route-delete,
#map-ctx-route-clear-all { color: var(--danger) !important; }

/* Sketch route mode — map + banner fill the entire screen */
#app.sketch-mode #sidebar,
#app.sketch-mode #anim-banner {
  display: none !important;
}
#app.sketch-mode #map-container {
  flex: 1 !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  cursor: crosshair;
}
#app.sketch-mode #leaflet-map {
  cursor: crosshair !important;
}
/* Edit route mode — same full-screen layout. Everything not essential to
   editing hides for the duration, same treatment as underway-mode: the
   map-type/location/screen tiles, the whole right rail (routes/tracks/
   anchor watch/icons — none of that applies mid-edit), and the zoom/pan
   controls (pinch/drag on the map covers both). Per direct feedback that
   these were all just clutter competing with the map while editing. */
#app.edit-mode #sidebar,
#app.edit-mode #sketch-banner,
#app.edit-mode #left-rail-zoom-pan,
#app.edit-mode #navaid-filter-panel {
  display: none !important;
}
/* ...except Map Type (v879, requested): the tile row stays, showing only the Map Type pulldown,
   so the chart under an edit can switch (Chart, Satellite, or Bird's-eye to preview it in 3D) */
#app.edit-mode #map-overlay-status > :not(#card-stack-bar),
#app.edit-mode #card-stack-handle,
#app.edit-mode #card-stack > :not(#map-layer-select) {
  display: none !important;
}
/* the stack lays its cards out with inline left/width; alone, Map Type sits at the start, full width */
#app.edit-mode #card-stack { width: 132px !important; display: block !important; }
#app.edit-mode #card-stack > #map-layer-select { left: 0 !important; width: 132px !important; position: absolute !important; }
#app.edit-mode #map-container {
  flex: 1 !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
}
/* ── Edit tools panel ──────────────────────────────────────────────── */
#edit-tools-panel {
  position: absolute;
  bottom: 12px;
  left: 10px;
  z-index: 1005;
  display: flex;
  flex-direction: column;
  background: rgba(10, 22, 40, 0.92);
  border: 1px solid var(--mid-blue);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  min-width: 120px;
}
/* Both the collapse/expand toggle AND the drag handle for the whole panel
   (see _makeDraggable in app.js) — this floats over the map during
   editing and can end up sitting on top of whatever you're trying to
   work on, so it needs to be movable on the fly, not just collapsible. */
.etp-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--mid-blue);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.etp-title:active { cursor: grabbing; }
.etp-title::after { content: '  \25B4'; } /* up chevron — tap to collapse */
#etp-title.collapsed::after { content: '  \25BE'; } /* down chevron — tap to expand */
/* Collapsing hides just the button list, not the title — the title is the
   panel's only visible surface once collapsed (and its drag handle), so it
   can't disappear along with the rest the way it briefly did when it lived
   as a separate tile up in #right-rail (removed — see edit-mode's hide
   list above). */
#edit-tools-panel.collapsed #edit-tools-body { display: none !important; }
/* Direct request: symbol-only buttons (was symbol + word, e.g. "✛ Add") —
   a row of small square icon buttons reads better than a column of
   near-empty full-width bars once the word's gone; the full description
   that used to be the visible label is still there as both buttons'
   native `title` and (for touch, where `title` never shows) the tap-
   tooltip wired up alongside these ids in app.js. */
#edit-tools-body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
}
#edit-tools-panel button {
  background: var(--dark-blue);
  color: var(--text);
  border: 1px solid var(--mid-blue);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
#edit-tools-panel button:active { background: var(--mid-blue); }
#edit-tools-panel button.active {
  background: var(--accent);
  color: var(--navy);
  border-color: var(--accent);
}
#etp-animate { color: var(--accent); border-color: var(--accent); }
#etp-animate:active { background: var(--accent); color: var(--navy); }

/* Hide command bar while editing */
#app.edit-mode #map-overlay-cmd { display: none !important; }
/* #edit-banner is a normal-flow sibling of the Leaflet map inside
   #map-container, so entering edit mode shrinks the map to make room for
   it at the bottom of the viewport — but #bottom-hud is position:fixed to
   the VIEWPORT's own bottom edge, not to the map's shrunk box, so it
   doesn't move up to get out of the way. Confirmed live on a phone: the
   tide widget sat directly under/behind the edit-banner's button row.
   Same treatment as the command bar above — hide rather than try to
   compute a clearance that has to track edit-banner's own wrapped height. */
#app.edit-mode #bottom-hud { display: none !important; }

.edit-vertex-marker {
  /* NOT position:relative — found via bisection to be the actual root
     cause of a real, dramatic bug: this class name is passed straight
     through as L.divIcon's own `className`, landing on the exact DOM
     element Leaflet manages via its own .leaflet-marker-icon class
     (position:absolute, required for Leaflet's positioning system to
     work at all). Same specificity + defined later in this stylesheet
     meant this silently won, knocking every vertex out of Leaflet's
     absolute-position-plus-transform system entirely — they fell back to
     wherever normal document flow put them (worse for higher indices,
     since each stacks after every prior sibling), with Leaflet's zoom
     transform still layered on top of that wrong base position. That's
     exactly why zooming in seemed to partially help (the transform part
     was always correct) without ever fully fixing it, and why it was
     catastrophic at low zoom (a fixed-pixel flow error is a huge real
     distance once each pixel covers miles). .leaflet-marker-icon's own
     position:absolute is already a valid positioning context for the
     .edit-vertex-overnight-badge child below — nothing here needs to set
     its own position at all. */
  width: 22px;
  height: 22px;
  background: #fff;
  border: 3px solid #c8a000;
  border-radius: 50%;
  cursor: grab;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.edit-vertex-num {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #7a5f00;
  pointer-events: none;
  user-select: none;
}
.edit-vertex-delete .edit-vertex-num { color: #c0392b; }
.edit-vertex-overnight .edit-vertex-num { color: #9b59b6; }
.edit-vertex-overnight-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  font-size: 10px;
  line-height: 1;
  background: #fff;
  border: 2px solid #9b59b6;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
@keyframes new-vertex-flash {
  0%, 100% { box-shadow: 0 0 0 2px rgba(200,160,0,0.5); background: #fff; }
  50%       { box-shadow: 0 0 0 7px rgba(200,160,0,0.15); background: #f5c842; }
}
.edit-vertex-new {
  animation: new-vertex-flash 0.7s ease-in-out infinite;
}
@keyframes route-dest-name-flash {
  0%, 100% { background: #fff; box-shadow: none; }
  50%      { background: #f5c842; box-shadow: 0 0 0 4px rgba(245,200,66,0.5); }
}
#route-dest-name-btn.flash-attention {
  animation: route-dest-name-flash 0.6s ease-in-out 3;
}
@keyframes anim-overnight-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.8; }
}
.anim-overnight-flash {
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, 0.85);
  border: 3px solid #9b59b6;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  animation: anim-overnight-pulse 0.6s ease-in-out 2;
}
.edit-vertex-delete {
  border-color: #c0392b;
  background: #f8d7d7;
  cursor: not-allowed;
}
.edit-vertex-overnight {
  border-color: #9b59b6;
  background: #f3e5f8;
}
/* Selected for "Fix selected nodes" — wins visually over overnight/etc if combined,
   since an active selection is the thing the user is about to act on right now. */
.edit-vertex-selected {
  border-color: #2e86de;
  background: #d2e9ff;
}
.edit-vertex-selected .edit-vertex-num { color: #14508f; }
.focus-place-marker {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: grab;
  box-sizing: border-box;
  border: 3px solid;
}
/* Idle — calm continuous pulse while not near anything. Pulses box-shadow rather than
   opacity/scale so the marker itself never dims while the user is tracking it. */
@keyframes focus-place-idle-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(74,158,221,0.35); }
  50%      { box-shadow: 0 0 0 8px rgba(74,158,221,0.10); }
}
.focus-place-idle {
  background: #4a9edd;
  border-color: #14314f;
  animation: focus-place-idle-pulse 1.6s ease-in-out infinite;
}
/* Locked-on — faster, more intense looped box-shadow flash than the idle pulse, using the
   same green as #focus-btn.focus-active so "locked on" matches the focus button's language.
   Deliberately avoids animating `transform` — Leaflet uses that property (translate3d) to
   position the marker itself, so a transform-based animation here would fight it and leave
   the icon rendered in the wrong place. */
@keyframes focus-place-lock-flash {
  0%, 100% { box-shadow: 0 0 0 3px rgba(74,222,128,0.65); }
  40%      { box-shadow: 0 0 0 11px rgba(74,222,128,0.15); }
}
.focus-place-locked {
  background: #4ade80;
  border-color: #0a2a16;
  animation: focus-place-lock-flash 0.5s ease-in-out infinite;
}
.sim-track-handle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: grab;
  box-sizing: border-box;
  border: 3px solid #0a3a52;
  background: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56,189,248,0.35);
}
.route-endpoint-marker {
  width: 14px;
  height: 14px;
  background: #fff;
  border: 3px solid #2a7ae2;
  border-radius: 50%;
  cursor: pointer;
  box-sizing: border-box;
}
.route-overnight-marker {
  width: 16px;
  height: 16px;
  /* Translucent, not solid — per direct request, so it reads as a light
     tag rather than a solid disc that can visually block whatever's
     directly underneath or right next to it (another marker, a hazard)
     when the mouse/finger is working nearby. */
  background: rgba(255, 255, 255, 0.55);
  border: 3px solid #9b59b6;
  border-radius: 50%;
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
}
.vj-waypoint-marker {
  /* Border color kept in sync with the VJ-active polyline color in
     app.js's _refreshSavedRouteLayers (#1e8a5c). */
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.55);
  border: 2px solid #1e8a5c;
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none; /* informational only, unlike the endpoint markers */
}
/* Bearing + distance labels — placed off-route via leader line */
.route-label-box {
  position: absolute;
  transform: translate(-50%, -50%);
  background: transparent;
  color: #000000;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  border: none;
  white-space: nowrap;
  pointer-events: none;
}
/* Coordinate labels at endpoints */
.route-coord-label-box {
  position: absolute;
  transform: translate(-50%, -50%);
  background: transparent;
  color: #000000;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 3px;
  border: none;
  white-space: nowrap;
  pointer-events: none;
}
.leaflet-tooltip.edit-coord-tip {
  pointer-events: auto;
  user-select: text;
  cursor: text;
}
.route-name-label {
  background: rgba(15, 35, 70, 0.80);
  color: #f0f4ff;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  cursor: pointer;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.route-name-label:hover {
  background: rgba(245, 200, 66, 0.92);
  color: #0f2346;
}

/* ── Davy Jones hazard icon ───────────────────────────────────────────────── */
@keyframes davy-jones-pulse {
  0%, 100% { transform: scale(1);    opacity: 1;    }
  50%       { transform: scale(1.5);  opacity: 0.25; }
}
.davy-jones-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #ffffff;
  text-shadow: 0 0 4px #000, 0 0 8px #000, 0 0 16px rgba(255, 220, 0, 0.8);
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  animation: davy-jones-pulse 0.8s ease-in-out infinite;
}

#sketch-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--warn);
  color: var(--navy);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 8px 12px;
  flex-shrink: 0;
}
#sketch-done-btn {
  background: var(--ok);
  color: var(--navy);
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
#sketch-route-btn {
  background: var(--accent);
  color: var(--navy);
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
#sketch-cancel-btn {
  background: var(--navy);
  color: var(--text);
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.85rem;
  cursor: pointer;
}
#draw-banner, #route-dest-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--navy);
  color: #f5a623;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 8px 12px;
  flex-shrink: 0;
  border-top: 2px solid #f5a623;
}
#route-dest-name-btn, #route-dest-cancel-btn {
  background: rgba(245,166,35,0.15);
  color: #f5a623;
  border: 1px solid #f5a623;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.85rem;
  cursor: pointer;
}
#draw-cancel-btn {
  background: rgba(245,166,35,0.15);
  color: #f5a623;
  border: 1px solid #f5a623;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.85rem;
  cursor: pointer;
}
#draw-confirm-btn {
  background: var(--ok);
  color: var(--navy);
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
#sim-track-banner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--navy);
  color: #38bdf8;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 8px 12px;
  flex-shrink: 0;
  border-top: 2px solid #38bdf8;
  max-height: 45dvh;
  overflow-y: auto;
}
#sim-track-banner input[type="number"] {
  width: 4.5em;
  background: var(--navy);
  color: var(--text);
  border: 1px solid #38bdf8;
  border-radius: 6px;
  padding: 3px 5px;
  font-size: 0.85rem;
  text-align: right;
}
#sim-track-banner input:disabled,
#sim-track-banner .track-chip:disabled {
  opacity: 0.5;
  cursor: default;
}
/* #vjourney-banner is a normal-flow sibling of the map, so it shrinks the
   map to make room for itself — but #bottom-hud (and #focus-btn inside it)
   is position:fixed to the VIEWPORT's own bottom-right corner, so it doesn't
   move up on its own and ends up rendered underneath the banner. Unlike
   #edit-banner's same conflict (see #app.edit-mode #bottom-hud above), the
   fix here can't be "just hide it" — Virtual Journey exists specifically to
   keep #focus-btn live during playback — so instead #app.js keeps
   --vjourney-h synced to the banner's actual (variable-height) box and
   #bottom-hud rides up above it. */
#app.vjourney-active #bottom-hud { bottom: calc(10px + var(--vjourney-h, 0px)); }

/* Same layout as #sim-track-banner (shares .track-speed-row/.track-chip/
   .track-chips-scroll) — a distinct accent (amber, not cyan) so the two
   playback banners read as different features at a glance. */
#vjourney-banner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--navy);
  color: #f5c842;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 8px 12px;
  flex-shrink: 0;
  border-top: 2px solid #f5c842;
  max-height: 45dvh;
  overflow-y: auto;
}
/* Above phone width — same breakpoint as the zoom slider/pan controls it
   tucks in beside — trade the full-width docked bar (reported as taking
   up way too much of the screen) for a narrow card in the left instrument
   rail instead. position:fixed (not absolute) so it doesn't care where in
   the DOM it lives, same as #bottom-hud; _syncLeftRailStack keeps its
   `top` just below #pan-controls-wrap, whatever that currently is. */
@media (min-width: 768px) {
  #vjourney-banner {
    position: fixed;
    left: 10px;
    width: 220px;
    z-index: 1000;
    border: 1px solid #f5c842;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.6);
    max-height: calc(100vh - 420px);
  }
}
#vjourney-banner input[type="number"] {
  width: 4.5em;
  background: var(--navy);
  color: var(--text);
  border: 1px solid #f5c842;
  border-radius: 6px;
  padding: 3px 5px;
  font-size: 0.85rem;
  text-align: right;
}
#vjourney-pause-btn, #vjourney-stop-btn {
  background: var(--dark-blue);
  color: var(--text);
  border: 1px solid #f5c842;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
#vjourney-pause-btn:active, #vjourney-stop-btn:active { background: #f5c842; color: var(--navy); }
/* Speed+Rate share a row, and Status+Pause/Stop/On-map share a row — was
   5 stacked full-width rows (reported as taking up too much of the
   screen during a journey); down to 3 including the title. flex-wrap
   keeps this from overflowing on a narrow phone screen, where it just
   falls back to roughly the old row-per-group look. */
.vjourney-row-wrap { flex-wrap: wrap; row-gap: 4px; }
.vjourney-rate-label { margin-left: 8px; }
.vjourney-controls { display: flex; gap: 5px; flex-wrap: wrap; }
/* Depth sounder (v865): the bottom profile scrolls right to left like a sounder's trace, the
   depth reads big beside it; amber within 3 ft of the keel, red within 1 ft. */
#vjourney-sounder { position: relative; height: 44px; border: 1px solid #f5c842; border-radius: 6px;
  background: #06131f; overflow: hidden; }
#vjourney-sounder canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#vjourney-sounder .vjs-read { position: absolute; right: 6px; top: 1px; display: flex; align-items: baseline; gap: 2px;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 4px #000, 0 0 2px #000; }
#vjourney-sounder .vjs-val { font-size: 1.6rem; font-weight: 700; color: #7fe3ff; }
#vjourney-sounder .vjs-unit { font-size: 0.75rem; color: #7fe3ff; }
#vjourney-sounder .vjs-note { position: absolute; left: 6px; bottom: 2px; font-size: 0.65rem; font-weight: 500;
  color: #cfd8e3; text-shadow: 0 0 3px #000; }
#vjourney-sounder.warn .vjs-val, #vjourney-sounder.warn .vjs-unit { color: #f5c842; }
#vjourney-sounder.alarm .vjs-val, #vjourney-sounder.alarm .vjs-unit { color: #ff5b4d; }
#vjourney-sounder.alarm { border-color: #ff5b4d; }
/* v886: fold (▴/▾) beside ✕; folded keeps the title and the status line with Pause/Stop */
#vjourney-banner .vj-head-btns { display: flex; align-items: center; flex-shrink: 0; }
#vjourney-fold-btn { min-width: 28px; min-height: 24px; font-size: 0.85rem; margin-right: 4px; color: #f5c842; border-color: #f5c842; background: rgba(245, 200, 66, 0.12); }
#vjourney-banner.vj-folded > .vjourney-row-wrap:has(#vjourney-speed-input),
#vjourney-banner.vj-folded #vjourney-sounder,
#vjourney-banner.vj-folded #vjourney-3d-btn, #vjourney-banner.vj-folded #vjourney-activate-btn { display: none !important; }
/* Free Sailing (v890) borrows this panel: its own title and a course row; no route, so no On map (⛰ 3D opens Drone, v891) */
#vjourney-banner .vj-title-fs, #vjourney-banner #fs-course-row { display: none; }
#vjourney-banner.fs-mode .vj-title-fs { display: inline; }
#vjourney-banner.fs-mode #fs-course-row { display: flex; }
#vjourney-banner.fs-mode .vj-title-vj, #vjourney-banner.fs-mode #vjourney-activate-btn { display: none !important; }
#vjourney-banner.vj-folded #fs-course-row { display: none !important; }
#vjourney-banner.fs-mode #fs-course-row { flex-wrap: nowrap; gap: 3px; align-items: center; }
#fs-course-row .fs-turn { padding: 2px 8px; }
/* The ship's wheel (v901): over the chart and both 3D views (Bird's-eye is 1980), under dialogs (3000+) */
#fs-wheel { position: fixed; left: 50%; bottom: calc(44px + var(--vjourney-h, 0px)); transform: translateX(-50%); z-index: 1995;
  display: flex; flex-direction: column; align-items: center; gap: 2px; user-select: none; -webkit-user-select: none; }
#fs-wheel[hidden] { display: none; }
#fs-wheel svg { width: 150px; height: 150px; touch-action: none; cursor: grab; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.55)); }
#fs-wheel svg:active { cursor: grabbing; }
#fs-wheel .fsw-grip { cursor: move; touch-action: none; padding: 0 12px; border-radius: 6px 6px 0 0; font-size: 0.8rem; line-height: 1.3;
  color: #f5c842; background: rgba(6, 19, 31, 0.75); }
#fs-wheel .fsw-rudder { padding: 1px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; color: #f5c842;
  background: rgba(6, 19, 31, 0.8); font-variant-numeric: tabular-nums; }
#fs-wheel .fsw-rudder.hard { color: #ff5b4d; }
@media (max-width: 767px) { #fs-wheel { bottom: calc(96px + var(--vjourney-h, 0px)); } #fs-wheel svg { width: 120px; height: 120px; } }
#fs-course-input { flex: 0 0 3.1em; width: 3.1em; padding-inline: 2px; text-align: center; }
@media (min-width: 768px) { #vjourney-banner > .track-speed-row:first-child { cursor: move; touch-action: none; } }
#vjourney-close-btn {
  background: none;
  border: none;
  color: #f5c842;
  font-size: 1rem;
  cursor: pointer;
}
#sim-track-start-btn {
  background: var(--ok);
  color: var(--navy);
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
#sim-track-start-btn.sim-track-running {
  background: var(--danger);
  color: #fff;
}
#sim-track-close-btn {
  background: rgba(56,189,248,0.12);
  color: #38bdf8;
  border: 1px solid #38bdf8;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.85rem;
  cursor: pointer;
}
.try-routes-banner {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(20, 30, 50, 0.92);
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}
.try-routes-cancel-btn {
  background: #e05252;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 0.8rem;
  -webkit-tap-highlight-color: transparent;
}
.try-routes-cancel-btn:active { background: #c23e3e; }

.optimizing-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1500;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.optimizing-boat {
  font-size: 3rem;
  display: block;
  animation: boat-spin 3s linear infinite;
  transform-origin: center center;
}
@keyframes boat-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.optimizing-text {
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 700;
  color: #3399ff;
  text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 0 14px rgba(0,0,0,0.7);
  white-space: nowrap;
  letter-spacing: 0.03em;
}
#edit-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #4a90d9;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 8px 12px;
  flex-shrink: 0;
}
#edit-save-btn {
  background: var(--ok);
  color: var(--navy);
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
#edit-cancel-btn {
  background: var(--navy);
  color: var(--text);
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.85rem;
  cursor: pointer;
}
/* Red danger color kept as-is when this lived in #right-rail-icons —
   semantic, not part of any reskin — just resized to fit as a normal
   #edit-banner button instead of a 48px round icon tile. */
#delete-route-btn {
  background: var(--navy);
  color: #e05252;
  border: 1px solid #e05252;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.85rem;
  cursor: pointer;
}
#delete-route-btn:active { background: #e05252; color: #fff; }
#edit-hazards-btn {
  background: var(--navy);
  color: var(--text);
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.85rem;
  cursor: pointer;
}

/* Draggable widgets — offset via a CSS variable set in JS
   (_makeDraggableGroup, see _initDraggableGroups), so it doesn't matter
   whether the element underneath is positioned bottom/right, top/left, or
   lives inside Leaflet's own control-container flex layout; the transform
   just visually nudges it from wherever it already sits. Only three groups
   are draggable at all: focus (#focus-btn, styled elsewhere), tide, and the
   right rail. */
.tide-cycle-ctrl                   { transform: var(--ui-pos-tide, translate(0,0)); }

#edit-hazards-btn.active {
  background: #e88a00;
  color: #fff;
}
/* Track panel */
#map-ctx-track-parent {
  border-top: 1px solid var(--mid-blue);
}
.track-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px 8px 4px;
  border-bottom: 1px solid var(--mid-blue);
}
.track-section {
  padding: 4px 8px 3px;
  border-bottom: 1px solid var(--mid-blue);
}
.track-section:last-child { border-bottom: none; }
.track-section-label {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 3px;
}
.track-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.track-chips-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  overflow-x: auto;
  flex: 1;
  padding-bottom: 2px;
}
.track-chip {
  padding: 3px 8px !important;
  font-size: 0.78rem !important;
  background: var(--navy) !important;
  border: 1px solid var(--mid-blue) !important;
  border-radius: 12px !important;
  color: var(--text-dim) !important;
  width: auto !important;
  flex-shrink: 0;
}
.track-chip.selected {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--navy) !important;
  font-weight: 700;
}
.track-route-section select {
  width: 100%;
  background: var(--navy);
  color: var(--text);
  border: 1px solid var(--mid-blue);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 0.82rem;
  margin-bottom: 4px;
}
.track-speed-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.track-speed-row input {
  width: 55px;
  background: var(--navy);
  color: var(--text);
  border: 1px solid var(--mid-blue);
  border-radius: 6px;
  padding: 3px 5px;
  font-size: 0.82rem;
  text-align: right;
}
#track-route-go {
  display: block;
  width: 100%;
  padding: 6px !important;
  background: var(--accent) !important;
  color: var(--navy) !important;
  font-weight: 700;
  border-radius: 6px !important;
  border: none !important;
}
#track-simulate-heading {
  display: block;
  width: 100%;
  padding: 6px !important;
  background: #38bdf8 !important;
  color: var(--navy) !important;
  font-weight: 700;
  border-radius: 6px !important;
  border: none !important;
  margin: 4px 0 !important;
}
/* Named-passage labels (Merchant Row, Fox Islands Thorofare, etc. — see
   NOTABLE_PASSAGES/_renderPassageLabels in app.js) — permanent text drawn
   right on the water like a real chart's own sea-area names, in every map
   mode. The white halo (double text-shadow, no blur spread) keeps it
   legible over both light chart tiles and satellite imagery without a
   solid background box, the way real charts knock out italic labels
   against the water. pointer-events:none so it never blocks map drag/tap;
   the marker itself is also created non-interactive in app.js. */
.passage-label {
  display: inline-block;
  transform: translate(-50%, -50%);
  font-style: italic;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--dark-blue);
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* Leaflet's own top-corner controls (compass, tide cycle, heading/speed,
   follow-progress) default to top:0 of the map — with our own opaque
   status-title-bar overlay also anchored at the top and painted above them
   (higher z-index), that let the compass render partly hidden underneath,
   reading as if it'd been clipped off the top of the page. top:30px here
   deliberately matches #map-overlay-status's own top:30px exactly, per
   explicit request that the tile row's top line up with the compass
   rose's top — every widget/tile should keep a small margin from the
   screen edge, and here that margin is shared between the two so they
   read as one aligned row. */
.leaflet-top {
  top: 30px;
}
.leaflet-left {
  left: 10px;
}
/* Compass rose control — margin zeroed and taken over entirely by
   .leaflet-top/.leaflet-left above (leaflet.css's own
   .leaflet-top .leaflet-control / .leaflet-left .leaflet-control margins
   would otherwise win by specificity and throw off the exact alignment
   with the tile row). */
.leaflet-top.leaflet-left .compass-rose-ctrl {
  pointer-events: none;
  margin: 0 8px 8px 0;
  opacity: 0.88;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
}
.tide-cycle-ctrl {
  /* auto, not none — this chip is draggable any time now (see
     _initDraggableGroups' alwaysOn 'tide' group), so it needs to actually
     receive touch/mouse events on its own background, not just pass them
     through to the map. It already paints an opaque background over
     whatever's underneath, so there's no real map interaction being lost
     here — "drag me" replaces "tap through to the map" as this exact
     footprint's behavior. */
  pointer-events: auto;
  margin: 8px;
  opacity: 0.95;
  /* Previously borderless/backgroundless — the one HUD chip with no chip
     around it, sitting next to two bordered ones. Giving it the same
     ink/brass panel treatment as its siblings is a real fix, not just a
     recolor: all three now read as one consistent chip family instead of
     two pills and a floating widget. */
  background: rgba(18, 13, 8, 0.85);
  border: 1px solid var(--brass-dim);
  border-radius: 10px;
  padding: 4px 10px;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.heading-speed-ctrl {
  pointer-events: none;
  margin: 0 8px 8px;
  font-size: 1.15rem;
  font-weight: 700;
  font-family: var(--font-brass-mono);
  letter-spacing: 0.3px;
  color: var(--brass-hi);
  background: rgba(18, 13, 8, 0.85);
  border: 1px solid var(--brass-dim);
  border-radius: 10px;
  padding: 5px 12px;
  text-align: center;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5));
}
.follow-progress-ctrl {
  pointer-events: none;
  /* margin-top well beyond the compass rose's own 8px margin-bottom above
     it — per direct report, the two were crowding together on desktop with
     only 8px of (collapsed, since both are in the same block-stacked
     Leaflet corner) separation. */
  margin: 24px 0 0 8px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: Arial, sans-serif;
  letter-spacing: 0.2px;
  color: var(--text);
  background: rgba(20,40,70,0.85);
  border: 1px solid #2a5080;
  border-radius: 10px;
  padding: 5px 10px;
  text-align: left;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5));
  line-height: 1.4;
}
.tide-slider-row {
  pointer-events: all;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 132px;
}
.tide-slider-row input[type=range] {
  width: 120px;
  accent-color: var(--brass);
  cursor: pointer;
  height: 16px;
}
.tide-play-row {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 120px;
}
.tide-offset-label {
  font-size: 9px;
  color: var(--parchment-dim);
  font-family: var(--font-brass-mono);
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
#tide-play-btn {
  background: var(--brass-ink-2);
  border: 1px solid var(--brass-dim);
  color: var(--brass);
  font-size: 9px;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  line-height: 18px;
  text-align: center;
  flex-shrink: 0;
  pointer-events: all;
}
#tide-play-btn:hover { background: var(--brass-dim); }

/* Both are flex children of #bottom-hud now (the "Zoned" layout's one
   consolidated HUD row) rather than independently fixed-position
   widgets — no more position/left/right/bottom of their own, and their
   old standalone margins are zeroed so they don't double up with
   #bottom-hud's own gap. */
.tide-cycle-ctrl,
.heading-speed-ctrl {
  margin: 0;
}
/* Animation fullscreen mode */
#app.anim-mode #sidebar,
#app.anim-mode #sketch-banner {
  display: none !important;
}
/* Per explicit request: basically every floating control disappears while
   the boat animates, except the compass rose — a clean view of the chart
   and the moving boat, nothing else competing for attention. #anim-banner
   itself (the "RouteName · N kts" strip and its Cancel button) is the one
   piece of chrome that's actually part of the animation, so it's left alone. */
#app.anim-mode #map-overlay-status,
#app.anim-mode #map-overlay-cmd,
#app.anim-mode #status-title-bar,
#app.anim-mode #underway-btn,
#app.anim-mode #wco-titlebar,
#app.anim-mode #map-version-label,
#app.anim-mode #edit-tools-panel,
#app.anim-mode #left-rail-zoom-pan,
#app.anim-mode #navaid-filter-panel,
#app.anim-mode .follow-progress-ctrl,
#app.anim-mode #bottom-hud {
  display: none !important;
}
#app.anim-mode #map-container {
  flex: 1 !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
}

/* Underway mode — a pure visibility toggle (#underway-btn, see app.js),
   modeled directly on anim-mode above: hide everything except the
   compass and the essentials, but
   unlike anim-mode this doesn't touch app state at all (no edit/follow/
   animation mode change) and the user flips it back themselves rather
   than it ending on its own. Tide is hidden too (see the #bottom-hud
   rule above) — the "Zoned" mockup this was built from kept the
   compass and just the two numbers that matter underway (bearing/range,
   heading/speed); if tide turns out to be missed underway, revisit
   before adding anything else back. */
/* v884, requested ("we always need access while underway to all controls that govern the boat
   and also affect the weather, day or night"): underway, and so in a Virtual Journey, Map Type
   (to change view: Satellite, Bird's-eye, where Weather sets wind, fog and day or night) and
   the zoom/pan rail now stay; the rest of the tile row still hides, as in edit mode. */
#app.underway-mode #map-overlay-status > :not(#card-stack-bar),
#app.underway-mode #card-stack-handle,
#app.underway-mode #card-stack > :not(#map-layer-select) {
  display: none !important;
}
#app.underway-mode #card-stack { width: 132px !important; display: block !important; }
#app.underway-mode #card-stack > #map-layer-select { left: 0 !important; width: 132px !important; position: absolute !important; }
/* One button, not two, and deliberately NOT a child of #map-overlay-status
   (which vanishes entirely in underway-mode above) — this is the one
   control that has to be reachable in both states without a menu dive,
   so it lives at the top-level of #map-container instead, overlaid on the
   right end of #status-title-bar's strip (that title bar is one of the
   few things underway-mode never hides). Its label/title swap between
   "Underway"/"Docked" in app.js as the mode toggles. */
/* A real slide switch, not a tap-button — per direct request. <label>
   wraps a visually-hidden checkbox; #underway-track/#underway-thumb do
   the actual drawing. Checking it (slide right) is "Underway"; the app.js
   change handler drives the same _setUnderwayMode(on) as before. */
#underway-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  position: absolute;
  top: 2px;
  right: 10px;
  /* Higher than every overlay panel (#route-picker-panel and friends top
     out at 1900) — this is the one control meant to be reachable no
     matter what else is open, so nothing persistent should be able to
     render on top of it. Confirmed live: the Routes panel did exactly
     that. Still well under the transient right-click context menu
     (9999) and #wco-titlebar (99999, see below) — those are genuinely
     supposed to win while they're up. */
  z-index: 1950;
  background: var(--brass-ink-2);
  border: 1px solid var(--brass-dim);
  border-radius: 999px;
  padding: 3px 10px 3px 12px;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* When the OS draws a real title-bar strip for an installed desktop app
   (Window Controls Overlay, see #wco-titlebar/body.wco-active below),
   #map-container's own top:0 now coincides with that reserved strip —
   #wco-titlebar (z-index 99999, has to win there for native window
   dragging/controls) would otherwise render right over this button,
   since it never got the same top-offset adjustment #map-overlay-status
   already gets a few lines down. Move it below the reserved strip
   instead of trying to out-stack it. */
body.wco-active #underway-btn { top: 10px; }
#underway-btn-label {
  color: var(--parchment-dim);
  font-family: var(--font-brass-serif);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
#underway-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
#underway-track {
  display: inline-block;
  width: 30px;
  height: 16px;
  background: var(--brass-dim);
  border-radius: 10px;
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s;
}
#underway-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--parchment);
  transition: transform 0.15s;
}
#underway-checkbox:checked ~ #underway-track { background: var(--brass); }
#underway-checkbox:checked ~ #underway-track #underway-thumb {
  transform: translateX(14px);
  background: var(--brass-ink);
}
/* Label sits BEFORE the checkbox in the DOM, so a sibling combinator off
   :checked can't reach it — :has() reaches back up to the shared <label>
   instead (already relied on elsewhere in this file, e.g.
   #map-overlay-cmd:has(#response-area:not(.collapsed))). */
#underway-btn:has(#underway-checkbox:checked) #underway-btn-label { color: var(--brass-hi); }
#underway-checkbox:focus-visible ~ #underway-track { outline: 2px solid var(--brass); outline-offset: 2px; }
#underway-btn:hover { border-color: var(--brass); color: var(--brass-hi); }

#anim-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1a3a5c;
  border-top: 2px solid var(--accent);
  color: var(--text);
  font-size: 0.9rem;
  padding: 8px 14px;
  flex-shrink: 0;
  gap: 12px;
}
#anim-banner-text { flex: 1; }
#anim-speed-input {
  width: 3.5em;
  background: var(--mid-blue);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 4px 5px;
  font-size: 0.85rem;
  text-align: right;
  flex-shrink: 0;
}
#anim-settings-btn {
  background: var(--mid-blue);
  color: var(--text);
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
}
#anim-stop-btn {
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
#region-offer-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1a3a5c;
  border-top: 2px solid var(--accent);
  color: var(--text);
  font-size: 0.9rem;
  padding: 8px 14px;
  flex-shrink: 0;
  gap: 12px;
}
#region-offer-text { flex: 1; }
#region-offer-download-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
#region-offer-dismiss-btn {
  background: var(--mid-blue);
  color: var(--text);
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.85rem;
  cursor: pointer;
  flex-shrink: 0;
}
#region-offer-download-btn:disabled,
#region-offer-dismiss-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
/* Marker flash animation — triggered when list row is tapped */
@keyframes marker-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%       { opacity: 0.4; transform: scale(1.5); }
}
.marker-speaking {
  animation: marker-pulse 0.7s ease-in-out infinite;
  transform-origin: center;
}
@keyframes marker-flash {
  0%   { opacity: 1;   transform: scale(1);   }
  25%  { opacity: 0.1; transform: scale(2);   }
  60%  { opacity: 1;   transform: scale(1.2); }
  100% { opacity: 1;   transform: scale(1);   }
}
.marker-flash {
  animation: marker-flash 0.5s ease-out;
  transform-origin: center;
}

/* Bare boat emoji for animation (no circle) */
@keyframes boat-rock {
  0%, 100% { transform: rotate(0deg); }
  25%       { transform: rotate(-9deg); }
  75%       { transform: rotate(9deg); }
}
.anim-boat {
  font-size: 24px;
  line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.9));
  transform-origin: center center;
}
.anim-boat-rock {
  display: inline-block;
  animation: boat-rock 2.4s ease-in-out infinite;
  transform-origin: center bottom;
}

/* Boat icon for current position */
.boat-marker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #4a9edd;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.7);
  /* Without these, a tap on the emoji/text inside this marker can trigger
     the browser's OWN touch behavior instead of ours: iOS's
     "-webkit-touch-callout" popup, or a text-selection/"Look Up" menu on
     Android, or the marker eating a pinch/scroll gesture meant for the map. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

.boat-marker.boat-bare {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));
}
.boat-emoji {
  font-size: 22px;
  line-height: 1;
}
.boat-label {
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  line-height: 1;
  margin-top: 1px;
}

/* User waypoint square marker */
.wp-marker {
  width: 14px;
  height: 14px;
  background: #e0c030;
  border: 2px solid #222;
  box-sizing: border-box;
}
.search-pin-marker {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
#map-ctx-wp-submenu button,
#map-ctx-testsets-submenu button {
  padding-left: 28px;
  font-size: 0.85rem;
  color: var(--text-dim);
}
#map-ctx-wp-submenu button:hover,
#map-ctx-wp-submenu button:active,
#map-ctx-testsets-submenu button:hover,
#map-ctx-testsets-submenu button:active {
  color: var(--text);
  background: var(--mid-blue);
}
.ctx-wp-actions,
.ctx-ts-actions {
  display: none;
  border-top: 1px solid var(--mid-blue);
  border-bottom: 1px solid var(--mid-blue);
}
.ctx-wp-actions button,
.ctx-ts-actions button {
  padding-left: 44px;
}
.ctx-wp-del,
.ctx-ts-del {
  color: var(--danger) !important;
}
.import-hint {
  font-size: 0.7rem;
  color: #aaa;
  padding: 2px 8px 4px;
  font-family: monospace;
  word-break: break-all;
}

/* Command reference picker — sits above #text-form. Picking an option
   fills its template into #text-input for editing (see the change
   handler in app.js) rather than submitting directly, matching the
   existing .history-pill click-to-populate pattern used for recent
   commands. Direct follow-up (2026-09-30): was full-width (matching
   #text-input below it), which made it stretch out edge-to-edge and
   overlap #map-version-label sitting at the same bottom-left corner —
   sized to its own placeholder text instead ("only wide enough to show
   their titles"), not left to auto-size (a plain browser auto-width
   would size to its WIDEST option, e.g. the long "fix [landmark 1]
   [bearing 1]..." entry, not the short placeholder actually shown).
   align-self overrides the parent's flex-column stretch. Narrowing it
   alone wasn't enough — measured live, both elements start at the exact
   same x:10/left edge with overlapping Y ranges (#map-version-label is
   independently `position:fixed; bottom:60px; left:10px`), so the
   picker also needs its own left offset clearing the badge's ~48px
   width, not just a narrower box that still starts under it. */
#command-picker {
  flex-shrink: 0;
  align-self: flex-start;
  width: 130px;   /* 2nd direct follow-up, reported live on a Pixel phone —
                     200px was still "too wide"; 40vw below is the real
                     binding constraint on a narrow phone either way. */
  max-width: 40vw;
  margin-left: 64px; /* clears #map-version-label's real ~48px width + a small gap */
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.85rem;
  padding: 8px 10px;
  outline: none;
  -webkit-appearance: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#command-picker:focus { border-color: var(--accent); }

/* Text input */
/* Direct follow-up (2026-09-30): "make command reference and type a
   command shrunken windows much narrower" — the first pass only
   narrowed #command-picker above it; this row was still stretching
   full-width via flex:1. align-self overrides the parent
   #map-overlay-cmd's flex-column stretch, same technique. */
#text-form {
  display: flex;
  align-self: flex-start;
  gap: 8px;
  flex-shrink: 0;
}

#text-input {
  width: 130px;   /* 2nd direct follow-up, see #command-picker's own comment */
  max-width: 40vw;
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  padding: 10px 12px;
  outline: none;
  -webkit-appearance: none;
}

#text-input::placeholder { color: var(--text-dim); }
#text-input:focus { border-color: var(--accent); }

#text-submit {
  background: var(--mid-blue);
  border: none;
  border-radius: 8px;
  color: var(--accent);
  font-size: 1.1rem;
  padding: 0 16px;
  cursor: pointer;
  flex-shrink: 0;
}

#text-submit:active { background: var(--accent); color: var(--navy); }

/* Query history */
#history-area {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-height: 0;
}

#history-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  max-height: 8rem;
  overflow-y: auto;
}

.history-pill {
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 14px;
  color: var(--text-dim);
  font-size: 0.78rem;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color 0.1s, color 0.1s;
}

.history-pill:active,
.history-pill:hover { border-color: var(--accent); color: var(--text); }

#history-clear {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 4px 6px;
  flex-shrink: 0;
  align-self: flex-start;
}
#history-clear:hover { color: var(--danger); }


/* ── Zoom slider + pan controls wrapper (desktop map overlay) ────────────── */
/* Both instruments are flex children of ONE positioned wrapper, stacked with
   a real CSS `gap` — not two independently `position:absolute; top: Npx`
   siblings whose non-overlap depended on a JS-computed pixel guess
   (_syncLeftRailStack in app.js) staying in sync with each one's actual
   rendered height. That JS still runs, and still matters — it positions
   this wrapper's own `top` relative to the Leaflet compass control above
   it, which genuinely does change height (e.g. the route-follow readout
   stacks below the compass) — but pan-on-top-of-zoom specifically is now
   structurally impossible regardless of whether that JS ran recently,
   reported live as still happening after an edit-mode round trip that
   didn't re-sync. */
#left-rail-zoom-pan {
  display: none;
  position: absolute;
  left: 10px;
  /* Sits directly under the compass rose — the "Zoned" layout's left
     orientation rail: compass, zoom, pan, read as one instrument column
     even though the compass stays a separate Leaflet control (not
     something to freely re-parent — see #right-rail's comment for the
     same reasoning). */
  top: 110px;
  z-index: 1000;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
@media (min-width: 768px) {
  #left-rail-zoom-pan { display: flex; }
}
#zoom-slider-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(18, 13, 8, 0.94); /* --brass-ink */
  border: 1px solid var(--brass-dim);
  border-radius: 8px;
  padding: 8px 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
  user-select: none;
}
#zoom-slider-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--brass);
  font-family: var(--font-brass-mono);
  text-align: center;
}
#zoom-slider {
  writing-mode: vertical-lr;
  direction: rtl;
  height: 150px;
  width: 24px;
  cursor: pointer;
  accent-color: var(--brass);
  background: transparent;
}

#zoom-boats-btn {
  font: 700 0.68rem var(--font-brass-mono);
  color: var(--brass);
  background: transparent;
  border: 1px solid var(--brass-dim);
  border-radius: 5px;
  padding: 2px 3px;
  cursor: pointer;
  white-space: nowrap;
}
#zoom-boats-btn:hover { background: rgba(224, 168, 67, 0.18); }

/* ── Pan controls ─────────────────────────────────────────────────────────── */
#pan-controls-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(18, 13, 8, 0.94); /* --brass-ink */
  border: 1px solid var(--brass-dim);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
  user-select: none;
}
.pan-row { display: flex; gap: 4px; }
.pan-btn {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--brass-dim);
  border-radius: 4px;
  color: var(--brass);
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.pan-btn:active { background: rgba(255,255,255,0.1); }



/* ══════════════════════════════════════════════════════════════════════
   App splash screen — shown at cold start while the map/chart data
   initializes, hidden once loadLeaflet()/_ensureMap() finish (see
   _hideAppSplash in app.js). A brass compass-instrument medallion built
   from real Geology-layer chart data (Little Thorofare / Fox Islands
   Thorofare), the same ⛵ glyph Animate uses, and the app's own existing
   "Chart & Brass" tokens above — no new fonts, no network dependency,
   works offline on first launch same as everything else here.
   ══════════════════════════════════════════════════════════════════════ */
#app-splash {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 4vh, 2rem);
  padding: 2rem 1rem;
  background: radial-gradient(ellipse at 50% 38%, var(--brass-ink-2) 0%, var(--brass-ink) 62%, #080502 100%);
  color: var(--parchment);
  transition: opacity 0.5s ease;
}
#app-splash.splash-hidden { opacity: 0; pointer-events: none; }

.splash-card-wrap { position: relative; width: clamp(200px, 56vw, 320px); aspect-ratio: 1; }
.splash-tickring {
  position: absolute; inset: -18px; border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, var(--brass-ink) 0deg 0.5deg, transparent 0.5deg 15deg),
    repeating-conic-gradient(from 0deg, var(--brass) 0.5deg 1.1deg, transparent 1.1deg 15deg),
    radial-gradient(circle, var(--brass-hi) 0%, var(--brass) 55%, var(--brass-dim) 100%);
  box-shadow: 0 3px 10px rgba(0,0,0,0.6), inset 0 1px 2px rgba(255,255,255,0.35), inset 0 -2px 3px rgba(0,0,0,0.4);
}
.splash-tickring::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--brass-ink); box-shadow: inset 0 3px 6px rgba(0,0,0,0.55); }

.splash-rivets { position: absolute; inset: -18px; pointer-events: none; }
.splash-rivets span {
  position: absolute; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--brass-hi), var(--brass-dim) 85%);
  box-shadow: 0 1px 1px rgba(0,0,0,0.6), inset 0 0 1px rgba(255,255,255,0.5);
}
.splash-rivets .r0 { top: 0%;     left: 50%; }
.splash-rivets .r1 { top: 14.6%; left: 85.4%; }
.splash-rivets .r2 { top: 50%;   left: 100%; }
.splash-rivets .r3 { top: 85.4%; left: 85.4%; }
.splash-rivets .r4 { top: 100%;  left: 50%; }
.splash-rivets .r5 { top: 85.4%; left: 14.6%; }
.splash-rivets .r6 { top: 50%;   left: 0%; }
.splash-rivets .r7 { top: 14.6%; left: 14.6%; }

.splash-compass-rose { position: absolute; inset: -11px; transform: rotate(-15deg); pointer-events: none; }
.splash-compass-rose span {
  position: absolute;
  font-family: var(--font-brass-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: #ffe9b0;
  -webkit-text-stroke: 1.2px var(--brass-ink);
  paint-order: stroke fill;
  text-shadow: 0 2px 3px rgba(0,0,0,0.6);
}
.splash-compass-rose .c-n { top: 0; left: 50%; transform: translate(-50%, -50%) rotate(15deg); }
.splash-compass-rose .c-e { top: 50%; right: 0; transform: translate(50%, -50%) rotate(15deg); }
.splash-compass-rose .c-s { bottom: 0; left: 50%; transform: translate(-50%, 50%) rotate(15deg); }
.splash-compass-rose .c-w { top: 50%; left: 0; transform: translate(-50%, -50%) rotate(15deg); }

.splash-compass-cross { position: absolute; inset: 0; transform: rotate(-15deg); pointer-events: none; z-index: 4; }
.splash-compass-cross span { position: absolute; background: rgba(18,13,8,0.55); }
.splash-compass-cross .cross-v { top: 4%; left: 50%; width: 1px; height: 92%; transform: translateX(-50%); }
.splash-compass-cross .cross-h { top: 50%; left: 4%; width: 92%; height: 1px; transform: translateY(-50%); }

.splash-card {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background-image: url(data:image/jpeg;base64,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);
  background-size: cover;
  background-position: 44% 40%;
  box-shadow: 0 0 0 2px var(--brass), 0 0 0 5px var(--brass-ink), 0 18px 46px rgba(0,0,0,0.55);
}
.splash-route-overlay { position: absolute; inset: 0; z-index: 4; }
.splash-route-path {
  stroke: var(--brass-needle); stroke-width: 2.2; stroke-dasharray: 6 5; fill: none;
  stroke-dashoffset: 90;
  animation: splash-draw-route 1.6s 0.3s cubic-bezier(.3,.7,.3,1) forwards;
}
@keyframes splash-draw-route { to { stroke-dashoffset: 0; } }

.splash-hub {
  position: absolute; left: 50%; top: 50%; width: 16%; height: 16%;
  transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; z-index: 5;
}
.splash-boat-emoji {
  font-size: clamp(1.5rem, 5.2vw, 2.2rem);
  line-height: 1;
  transform: scaleX(-1);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.splash-wordmark-block { text-align: center; z-index: 2; }
.splash-wordmark {
  font-family: var(--font-brass-serif);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 4.8vw, 1.8rem);
  letter-spacing: 0.14em;
  color: var(--parchment);
  margin: 0;
}
.splash-wordmark::before, .splash-wordmark::after {
  content: "⚓"; font-size: 0.5em; color: var(--brass); margin: 0 0.4em; position: relative; top: -0.08em;
}
.splash-subtitle {
  font-family: var(--font-brass-serif);
  font-style: italic;
  font-size: clamp(0.85rem, 2.2vw, 1rem);
  color: var(--brass-hi);
  margin: 0.35em 0 0;
}
.splash-readout-row {
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-brass-mono);
  font-size: 0.7rem; letter-spacing: 0.05em; color: var(--parchment-dim);
  z-index: 2;
}
.splash-sweep { position: relative; width: 60px; height: 1px; background: rgba(236,192,124,0.25); overflow: hidden; }
.splash-sweep::after { content: ""; position: absolute; inset: 0; width: 20px; background: var(--brass-hi); animation: splash-sweep-move 2.6s ease-in-out infinite; }
@keyframes splash-sweep-move { 0%{transform:translateX(-20px);opacity:0;} 15%{opacity:1;} 85%{opacity:1;} 100%{transform:translateX(60px);opacity:0;} }

@media (prefers-reduced-motion: reduce) {
  .splash-route-path { animation: none !important; stroke-dashoffset: 0 !important; }
  .splash-sweep::after { animation: none !important; transform: translateX(24px); opacity: 1; }
}

/* ── Card-stack toolbar (js/card_stack.js) ─────────────────────────────────
   The top-row buttons as one row of overlapping cards: each card's left
   edge (its symbol) shows, the card under the cursor/finger rises to full
   width. Positions (left/z-index) are set by card_stack.js; the !important
   overrides below normalize the buttons' differing per-id pill styles into
   identical cards. Design: design/card-stack-toolbar.html. */
#card-stack {
  position: relative;
  height: 34px;
  flex-shrink: 0;
  touch-action: none; /* the stack owns slide gestures that start on it */
}
#card-stack .stack-card {
  position: absolute !important;
  top: 0;
  width: 132px;
  height: 34px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 10px 0 6px !important;
  text-align: left;
  background: rgba(18, 13, 8, 0.96) !important;
  border: 1px solid var(--brass-dim) !important;
  border-radius: 8px !important;
  color: var(--parchment-dim) !important;
  font-family: var(--font-brass-serif);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  box-shadow: -3px 0 8px rgba(0, 0, 0, 0.55);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  -webkit-tap-highlight-color: transparent;
}
#card-stack .stack-card.active {
  background: var(--brass) !important;
  color: var(--brass-ink) !important;
}
#card-stack .stack-card.stack-raised {
  z-index: 60 !important;
  transform: translateY(-2px) scale(1.04);
  border-color: var(--brass) !important;
  color: var(--brass-hi) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7);
}
#card-stack .stack-card.active.stack-raised { color: var(--brass-ink) !important; }
/* Phones: start right after the compass instead of 170px in, so the stack
   has ~290px to work with rather than ~220px. */
@media (max-width: 600px) {
  #map-overlay-status {
    left: 100px;
    max-width: calc(100% - 110px);
  }
}

/* Tide widget shrink control (see _TideCycle in app.js). */
.tide-cycle-ctrl { position: relative; }
.tide-shrink-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  background: rgba(18, 13, 8, 0.9);
  border: 1px solid var(--brass-dim);
  border-radius: 6px;
  color: var(--brass);
  font-family: var(--font-brass-serif);
  font-size: 0.8rem;
  font-weight: 700;
  min-width: 28px;
  min-height: 24px;
  padding: 0 6px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tide-shrink-btn:hover { border-color: var(--brass); color: var(--brass-hi); }
.tide-cycle-ctrl.tide-collapsed > :not(.tide-shrink-btn) { display: none !important; }
.tide-cycle-ctrl.tide-collapsed { padding: 0 !important; min-width: 0 !important; width: auto !important; }
.tide-cycle-ctrl.tide-collapsed .tide-shrink-btn {
  position: static;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 10px;
}

/* Handle that spreads the card stack into two rows / folds it back. */
#card-stack-bar {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
#card-stack-handle {
  flex: 0 0 auto;
  width: 26px;
  height: 34px;
  padding: 0;
  background: rgba(18, 13, 8, 0.96);
  border: 1px solid var(--brass);
  border-radius: 8px;
  color: var(--brass-hi);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#card-stack-handle:hover { background: var(--brass-ink-2); }
#card-stack .stack-break { display: none; }
/* Spread: ordinary wrapping rows of full buttons, no overlap. */
#card-stack.stack-spread {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  height: auto;
  width: auto;
  /* Shrink to the toolbar's max-width and wrap, instead of growing to one
     long line (seen at iPhone width: it ran off to 1400px). */
  flex: 1 1 auto;
  min-width: 0;
  touch-action: auto;
}
/* Spread is a temporary "show me everything" view — on a phone it wraps to
   ~6 rows, so lift it above the Objects panel (1900) and Actions rail. */
#map-overlay-status:has(#card-stack.stack-spread) { width: calc(100% - 110px); z-index: 1950; }
/* v772: that full-width box is invisible but was catching clicks meant for
   the floating windows underneath it (their shrink/close buttons stopped
   responding on desktop). Only the buttons themselves take clicks... */
#map-overlay-status:has(#card-stack.stack-spread),
#map-overlay-status:has(#card-stack.stack-spread) #card-stack-bar,
#card-stack.stack-spread { pointer-events: none; }
#card-stack.stack-spread > *,
#map-overlay-status:has(#card-stack.stack-spread) #card-stack-handle,
#map-overlay-status:has(#card-stack.stack-spread) > :not(#card-stack-bar) { pointer-events: auto; }
/* ...and a window you open always sits above the toolbar. */
#waypoints-panel.open, #testsets-panel.open, #about-panel.open,
#route-picker-panel.open, #sample-routes-panel.open, #track-picker-panel.open { z-index: 1960; }
@media (min-width: 601px) {
  #map-overlay-status:has(#card-stack.stack-spread) { width: calc(100% - 180px); }
}
#card-stack.stack-spread .stack-break { display: block; flex-basis: 100%; height: 0; }
#card-stack.stack-spread .stack-card {
  position: static !important;
  width: auto;
  padding: 0 10px !important;
  box-shadow: none;
}

/* Zoom + pan shrink-as-a-unit toggle (see _setZoomPanCollapsed). */
#zoom-pan-toggle {
  align-self: stretch;
  min-height: 24px;
  padding: 2px 6px;
  background: rgba(18, 13, 8, 0.94);
  border: 1px solid var(--brass-dim);
  border-radius: 8px;
  color: var(--brass);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
#zoom-pan-toggle:hover { border-color: var(--brass); color: var(--brass-hi); }
#left-rail-zoom-pan.zp-collapsed > :not(#zoom-pan-toggle) { display: none !important; }
#left-rail-zoom-pan.zp-collapsed #zoom-pan-toggle { padding: 6px 8px; }

/* SP popup "Add to Test Set…" choices — indented under their button. */
.navaid-popup-testset-choices { margin: 2px 0 2px 12px; }
.navaid-popup-testset-choices .navaid-popup-testset-pick { margin-top: 4px; background: var(--dark-blue); border: 1px solid var(--mid-blue); }

/* ?longtest= results table (see _showLongtestResults). */
#longtest-results {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 20000;
  width: min(560px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow: auto;
  background: rgba(10, 22, 40, 0.97);
  border: 1px solid var(--mid-blue);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font-size: 0.85rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.7);
}
#longtest-results .lt-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
#longtest-results .lt-head span { color: var(--text-dim); flex: 1; }
#longtest-results .lt-head button { background: none; border: none; color: var(--text); font-size: 1.1rem; cursor: pointer; min-width: 32px; min-height: 32px; }
#longtest-results table { width: 100%; border-collapse: collapse; }
#longtest-results th, #longtest-results td { text-align: left; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.08); }
#longtest-results .lt-pass td:nth-child(4) { color: #6fd08c; }
#longtest-results .lt-warn td:nth-child(4) { color: #f5c518; }
#longtest-results .lt-fail td:nth-child(4) { color: #ff6b6b; font-weight: 700; }
#longtest-results .lt-err { color: #ff6b6b; }

/* "Navigate with care" notice (see _initDisclaimer in app.js). Above
   everything, including the Longtest results table (20000). */
#disclaimer-overlay {
  position: fixed;
  inset: 0;
  z-index: 30000;
  background: rgba(10, 22, 40, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#disclaimer-box {
  width: min(520px, 100%);
  max-height: calc(100% - 32px);
  overflow-y: auto;
  background: var(--dark-blue);
  border: 1px solid var(--mid-blue);
  border-top: 4px solid #f5a623;
  border-radius: 12px;
  padding: 20px 22px;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.5;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
}
#disclaimer-box h2 { margin: 0 0 10px; color: #f5a623; font-size: 1.25rem; }
#disclaimer-box p { margin: 0 0 10px; }
#disclaimer-box ul { margin: 0 0 12px; padding-left: 20px; }
#disclaimer-box li { margin-bottom: 6px; }
#disclaimer-box .disclaimer-fine { font-size: 0.8rem; color: var(--text-dim); }
#disclaimer-box a { color: var(--accent); }
#disclaimer-accept {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 6px;
  background: var(--accent);
  color: var(--navy);
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.about-legal { margin-top: 10px; font-size: 0.8rem; }
.about-legal a { color: var(--accent); }

/* Command box on demand (#cmd-open-btn, _setCmdOpen in app.js). */
#app.cmd-open #map-overlay-cmd { display: flex; }
#cmd-open-btn {
  position: absolute;
  left: 10px;
  bottom: 96px;
  z-index: 1002;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(18, 13, 8, 0.94);
  border: 1px solid var(--brass-dim);
  color: var(--brass);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  -webkit-tap-highlight-color: transparent;
}
#cmd-open-btn svg { display: block; margin: auto; }
/* While the box is open it moves next to ▶ — see _placeCmdOpenBtn. */
#cmd-open-btn:hover { border-color: var(--brass); color: var(--brass-hi); }
#cmd-open-btn.active { background: var(--brass); color: var(--brass-ink); }
#cmd-open-btn.ptt { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#cmd-open-btn.talking { background: #c0392b; color: #fff; border-color: #fff; box-shadow: 0 0 0 6px rgba(192, 57, 43, 0.35); }
/* Underway already shows the box; edit/animation modes hide it. */
#app.underway-mode #cmd-open-btn,
#app.following-active #cmd-open-btn,
#app.edit-mode #cmd-open-btn,
#app.anim-mode #cmd-open-btn { display: none; }

/* Voice status strip for the Android app's hold-volume-down-to-talk
   (audioChartVoiceStatus / audioChartVoiceCommand in app.js). */
#voice-hud {
  position: absolute;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2500;
  max-width: calc(100% - 32px);
  padding: 8px 14px;
  border-radius: 18px;
  background: rgba(10, 22, 40, 0.94);
  border: 1px solid var(--accent);
  color: var(--text);
  font-size: 0.95rem;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* 🛏 "After a waypoint I click…" — waiting for the user to pick a node. */
.overnight-picking, .overnight-picking .edit-vertex-marker { cursor: crosshair !important; }

/* Node Ops ＋ Add bar — see #append-bar in index.html. */
#append-bar {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: calc(100% - 24px);
  padding: 8px 10px;
  background: rgba(10, 22, 40, 0.95);
  border: 1px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.6);
  color: var(--parchment);
  font-size: 0.85rem;
}
#append-bar input {
  width: 170px;
  background: var(--mid-blue);
  border: 1px solid var(--mid-blue);
  border-radius: 6px;
  color: var(--text);
  padding: 5px 8px;
  font-size: 0.85rem;
}
#append-bar button {
  background: var(--dark-blue);
  color: var(--text);
  border: 1px solid var(--mid-blue);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.82rem;
  cursor: pointer;
}
#append-go { background: var(--accent) !important; color: var(--navy) !important; font-weight: 700; }
.append-picking, .append-picking .leaflet-interactive { cursor: crosshair !important; }

/* ── Clear view (v911, requested with a screenshot: "I need a way to unclutter the screen while
   underway, in mobile"). One button, top right under the Underway switch, while Underway or a journey
   is on: it hides the chart's menus, the command bar, the zoom rail and the 3D views' own buttons
   (they watch for this class, see helm3d.js/bay3d.js), and folds the journey panel; what's left is the
   view, the compass, the status line, the target and heading readouts, and anything running (anchor
   watch, recording) — plus this button, to bring it all back. Remembered. ── */
#clear-view-btn { display: none; position: fixed; right: 10px; top: 32px; z-index: 1996; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--brass-dim); background: rgba(18, 13, 8, 0.85); color: var(--brass-hi); font: 600 0.78rem/1.1 var(--font-brass-mono, monospace);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5); cursor: pointer; -webkit-tap-highlight-color: transparent; }
#app.underway-mode #clear-view-btn, #app.vjourney-active #clear-view-btn { display: block; }
#app.clear-view #clear-view-btn { background: var(--brass, #c9a04a); color: #1b1408; }
#app.clear-view:is(.underway-mode, .vjourney-active) :is(#map-overlay-cmd, #map-overlay-status, #navaid-filter-panel, #left-rail-zoom-pan,
  #tilt-slider-wrap, #cmd-open-btn, #map-version-label, .follow-progress-ctrl, #card-stack-handle) { display: none !important; }

/* a vessel brought over from Bird's-eye (v1000): a ringed pin, her name, her marks */
.vessel-pin span { display: block; width: 26px; height: 26px; box-sizing: border-box; border-radius: 50%; border: 3px solid #e8482f; background: rgba(232, 72, 47, 0.25); box-shadow: 0 0 0 2px #fff; animation: vessel-pin-pulse 1.6s ease-out infinite; }
@keyframes vessel-pin-pulse { 0% { box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(232, 72, 47, 0.6); } 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 16px rgba(232, 72, 47, 0); } }
.vessel-pin-tip { font-weight: 600; }
.vessel-mark-tip { font-size: 11px; padding: 1px 5px; }
#vessel-bar { position: fixed; top: calc(70px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 1500; max-width: calc(100vw - 32px); box-sizing: border-box; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: rgba(18, 13, 8, 0.94); color: #f1e6cf; border: 1px solid var(--brass-dim); border-radius: 8px; padding: 6px 10px; font-size: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.6); }
#vessel-bar small { opacity: 0.75; }
#vessel-bar button { font: inherit; color: inherit; background: rgba(255,255,255,0.12); border: 0; border-radius: 4px; padding: 4px 10px; cursor: pointer; }