Add medals, HRV status dots, smooth segment hover, side-by-side map/timeline, HR zone times

- Silver/bronze medals (not just gold) on route & segment leaderboards
- Colour HRV nightly-avg trend dots: orange unbalanced, red low
- Project segment-hover dot smoothly along the track line (interpolated)
- Show map and activity timeline side by side, half width each
- Show time spent in each HR zone next to the percentage

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/components/activity/HRZoneBar.jsx

@@ -1,3 +1,5 @@
+import { formatDuration } from '../../utils/format'
+
 const ZONE_CONFIG = [
   { key: 'z1', label: 'Z1 Recovery', color: '#60a5fa' },
   { key: 'z2', label: 'Z2 Base', color: '#34d399' },
@@ -6,7 +8,9 @@ const ZONE_CONFIG = [
   { key: 'z5', label: 'Z5 Max', color: '#f43f5e' },
 ]
 
-export default function HRZoneBar({ zones }) {
+// zones holds the % of time in each zone; multiply by the activity's active time
+// to show the approximate time spent in each.
+export default function HRZoneBar({ zones, totalSeconds }) {
   return (
     <div className="space-y-2">
       {/* Stacked bar */}
@@ -34,6 +38,9 @@ export default function HRZoneBar({ zones }) {
               <div className="w-2.5 h-2.5 rounded-sm" style={{ backgroundColor: color }} />
               <span className="text-xs text-gray-400">{label}</span>
               <span className="text-xs font-medium text-white">{pct}%</span>
+              {totalSeconds > 0 && (
+                <span className="text-xs text-gray-500">{formatDuration(Math.round((pct / 100) * totalSeconds))}</span>
+              )}
             </div>
           )
         })}