Add activity type and a click-to-open track profile panel

Track properties gain activity_type (FIT: sport enum from the
session/sport message, Garmin's own table; GPX: <trk><type> passed
through as-is) alongside the existing distance/elevation/duration.

Clicking a track line now opens a bottom panel with a chart per
metric the track actually has (elevation always; speed/cadence/heart
rate only when present — FIT's record fields or GPX's device
extensions). TrackStats.build_profile computes cumulative distance
the same way for both formats so they're directly comparable. One
pointermove listener drives a synchronized crosshair across every
chart, a single tooltip listing all series, and a map marker at the
hovered point's position — hovering the chart shows where on the
track that moment was.

public/css/style.css

@@ -504,3 +504,115 @@ html, body {
   color: #888;
   font-size: 12px;
 }
+
+.profile-panel {
+  position: fixed;
+  left: 52px;
+  right: 0;
+  bottom: 0;
+  max-height: 45vh;
+  display: flex;
+  flex-direction: column;
+  background: #fcfcfb;
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
+  z-index: 10;
+}
+
+.profile-panel[hidden] {
+  display: none;
+}
+
+.profile-panel__header {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  padding: 10px 14px;
+  border-bottom: 1px solid #e1e0d9;
+}
+
+.profile-panel__title {
+  font-size: 14px;
+}
+
+.profile-panel__stats {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #52514e;
+  font-size: 13px;
+}
+
+.profile-panel__close {
+  border: none;
+  background: none;
+  font-size: 18px;
+  line-height: 1;
+  padding: 0 4px;
+  cursor: pointer;
+  color: #898781;
+}
+
+.profile-panel__charts {
+  position: relative;
+  overflow-y: auto;
+  padding: 8px 14px 14px;
+}
+
+.profile-chart {
+  padding-top: 8px;
+}
+
+.profile-chart + .profile-chart {
+  border-top: 1px solid #e1e0d9;
+}
+
+.profile-chart__label {
+  font-size: 11px;
+  color: #898781;
+  margin-bottom: 2px;
+}
+
+.profile-chart__unit {
+  font-weight: normal;
+}
+
+.profile-chart__svg {
+  display: block;
+  width: 100%;
+  cursor: crosshair;
+}
+
+.profile-chart__crosshair {
+  stroke: #898781;
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+
+.profile-panel__tooltip {
+  position: absolute;
+  top: 0;
+  z-index: 1;
+  pointer-events: none;
+  background: #0b0b0b;
+  color: #fff;
+  border-radius: 4px;
+  padding: 6px 8px;
+  font-size: 12px;
+  white-space: nowrap;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+}
+
+.profile-panel__tooltip[hidden] {
+  display: none;
+}
+
+.profile-panel__tooltip-distance {
+  font-weight: 600;
+  margin-bottom: 2px;
+}
+
+.profile-panel__tooltip-label {
+  color: #c3c2b7;
+}