/* On-trail navigation HUD (components/trail-navigator.js).
   Mobile-first, designed to be glanceable in bright sun while walking:
   high-contrast dark card, large type, pinned top-center clear of the
   bottom map controls, and respecting the notch via safe-area insets. */

.trail-nav-hud {
  position: absolute;
  /* Sit just below the header so the off-route alert never renders under the
     logo/nav or the Dynamic Island. z-index above the header (2000) keeps this
     safety message on top of everything; it stays pointer-events:none so taps
     still reach the controls beneath it.
     --tnh-base = the breakpoint's header clearance; --tnh-pill-shift keeps us
     off the offline pill (below); --verify-banner-h is published by
     components/verify-email-banner.js and is 0px unless that banner is up.
     The env() term below is the SINGLE owner of the notch: --verify-banner-h
     deliberately excludes the safe-area inset (the banner's own padding pays it),
     so keeping env() here is right in both states — it clears the notch when the
     banner is down and completes the banner's height when it is up. Don't
     "de-duplicate" the two terms; they are not the same quantity. */
  --tnh-base: 64px;
  --tnh-pill-shift: 0px;
  top: calc(
    var(--tnh-base) + var(--tnh-pill-shift) + env(safe-area-inset-top, 0px) +
      var(--verify-banner-h, 0px)
  );
  left: 50%;
  transform: translateX(-50%);
  z-index: 2100;
  width: min(92vw, 460px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(17, 22, 19, 0.92);
  color: #fff;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 16px;
  line-height: 1.3;
  pointer-events: none; /* the HUD is informational; don't block map gestures */
}

.trail-nav-hud[hidden] {
  display: none;
}

.tnh-route {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.tnh-route-icon {
  flex: 0 0 auto;
  font-size: 18px;
}

.tnh-route-text {
  flex: 1 1 auto;
}

/* On-route = calm green; off-route = high-alert amber with a subtle pulse. */
.tnh-route.is-on .tnh-route-text {
  color: #7fe0a0;
}
.tnh-route.is-off {
  animation: tnh-pulse 1.4s ease-in-out infinite;
}
.tnh-route.is-off .tnh-route-text {
  color: #ffd24a;
}

.tnh-poi {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #d8e0db;
}
.tnh-poi[hidden] {
  display: none;
}

.tnh-poi-arrow {
  flex: 0 0 auto;
  display: inline-block;
  font-size: 16px;
  color: #8fd0ff;
  transition: transform 0.3s ease;
}

.tnh-meta {
  font-size: 12px;
  color: #9aa6a0;
}
.tnh-meta:empty {
  display: none;
}

@keyframes tnh-pulse {
  0%, 100% { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45); }
  50% { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(255, 210, 74, 0.5); }
}

/* Respect reduced-motion: drop the off-route pulse. */
@media (prefers-reduced-motion: reduce) {
  .tnh-route.is-off {
    animation: none;
  }
  .tnh-poi-arrow {
    transition: none;
  }
}

/* Tablet/desktop: a touch smaller and less wide. */
@media (min-width: 769px) {
  .trail-nav-hud {
    width: min(420px, 40vw);
    font-size: 15px;
    /* Desktop header (72px logo) is taller — drop the HUD a little further. */
    --tnh-base: 88px;
  }
}

/* The offline "Save map offline" pill docks top-RIGHT at the SAME offset on
   phones (#offline-pill-dock, components/offline-download.js) while this card
   spans min(92vw, 460px) — on a 390px phone that is ~15px to ~375px, straight
   over the pill, on exactly the trails that have a downloadable pack.
   Step down by the pill's own height (38px, fixed by #offline-dl-btn) plus a
   12px gap. Shifting the HUD rather than the pill is the exact fix: the pill's
   height is a known constant, whereas this card grows a row whenever the
   off-route line or a long POI name wraps, so any pill offset would be a guess.
   The selector matches only while the pill is IN the dock — on desktop it moves
   into .map-bottom-controls and there is no collision. */
.map-shell:has(#offline-pill-dock #offline-dl-btn:not([hidden])) .trail-nav-hud {
  --tnh-pill-shift: 50px;
}