Show clicked hiking trail info in a docked panel, not a popup

A map-anchored Popup on a trail click routinely overlapped the very
line it described. Follows the same click -> docked panel pattern
gpx.js already uses for a track line click (TrackProfilePanel) rather
than inventing a new one: a fixed #trail-panel docks to the right edge
on desktop and the bottom edge on narrow viewports (this file's first
@media breakpoint), so the trail stays fully visible either way.

routeHtml()'s own markup is reused unchanged for the panel body —
.trail-panel__body's padding matches .maplibregl-popup-content's own
(15px 10px) so the header's canceling negative margin still lines up.
The popup-identity staleness guard for the async Overpass lookup is
replaced with a plain request token, since there's no longer a fresh
Popup instance to key off of.

public/css/style.css

@@ -397,6 +397,68 @@ html, body {
   visibility: visible;
 }
 
+/* Docked detail panel for a clicked hiking trail — replaces a map-anchored
+   Popup (which routinely covered up the very trail line it described) with
+   a fixed side panel, same "click info moves off the map" idea
+   track_profile.js already established for clicking a GPX track line
+   (TrackProfilePanel). .trail-panel__body gets the exact padding
+   .maplibregl-popup-content used (15px 10px) so routeHtml()'s own output —
+   built for that popup, including its header's canceling negative margin —
+   renders here unchanged; no separate panel-flavored template needed. */
+.trail-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 300px;
+  max-width: 90vw;
+  background: #fff;
+  border-left: 1px solid #ddd;
+  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
+  z-index: 10;
+}
+
+.trail-panel__body {
+  height: 100%;
+  box-sizing: border-box;
+  overflow-y: auto;
+  padding: 15px 10px;
+  font-size: 13px;
+}
+
+.trail-panel__close {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  border: none;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.85);
+  font-size: 18px;
+  line-height: 1;
+  padding: 2px 7px;
+  cursor: pointer;
+}
+
+/* First breakpoint in this file. Below it the same panel docks to the
+   bottom edge instead of the right one — a fixed-width side panel would
+   otherwise eat most of a phone-width map, the exact "popup dominates the
+   screen" problem this panel was meant to fix in the first place. */
+@media (max-width: 640px) {
+  .trail-panel {
+    top: auto;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: auto;
+    max-width: none;
+    max-height: 50vh;
+    border-left: none;
+    border-top: 1px solid #ddd;
+    border-radius: 8px 8px 0 0;
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
+  }
+}
+
 .offline-data-panel__body {
   padding: 8px 12px;
 }