refactor(web): centralize OKLCH palette

3 files changed, 105 insertions, 45 deletions

diff --git a/web/static/style.css b/web/static/style.css
index 7bb63aa..b24fd21 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -1,47 +1,86 @@
-:root { color-scheme: light; font-family: system-ui, sans-serif; background: #f5f3ee; color: #1d2a22; }
+:root {
+  color-scheme: light;
+  font-family: system-ui, sans-serif;
+
+  --palette-forest: oklch(27% 0.065 155);
+  --palette-leaf: oklch(51% 0.14 154);
+  --palette-coral: oklch(65% 0.17 48);
+  --palette-paper: oklch(96% 0.015 90);
+  --palette-ink: oklch(25% 0.04 155);
+  --palette-white: oklch(100% 0 0);
+
+  --color-background: var(--palette-paper);
+  --color-foreground: var(--palette-ink);
+  --color-forest: var(--palette-forest);
+  --color-leaf: var(--palette-leaf);
+  --color-accent: var(--palette-coral);
+  --color-surface: var(--palette-white);
+  --color-on-dark: var(--palette-white);
+  --color-muted: oklch(from var(--palette-ink) calc(l + 0.2) calc(c * 0.35) h);
+  --color-subtle: oklch(from var(--palette-ink) calc(l + 0.25) calc(c * 0.2) h);
+  --color-border: oklch(from var(--palette-forest) calc(l + 0.6) calc(c * 0.12) h);
+  --color-border-subtle: oklch(from var(--palette-forest) calc(l + 0.65) calc(c * 0.12) h);
+  --color-input-border: oklch(from var(--palette-forest) calc(l + 0.55) calc(c * 0.16) h);
+  --color-secondary-surface: oklch(from var(--palette-leaf) calc(l + 0.43) calc(c * 0.16) h);
+  --color-notice-surface: oklch(from var(--palette-leaf) calc(l + 0.39) calc(c * 0.2) h);
+  --color-notice-text: oklch(from var(--palette-forest) calc(l + 0.18) calc(c * 0.8) h);
+  --color-error-surface: oklch(from var(--palette-coral) calc(l + 0.31) calc(c * 0.25) h);
+  --color-error-text: oklch(from var(--palette-coral) calc(l - 0.28) calc(c * 0.8) h);
+  --color-panel-shadow: oklch(from var(--palette-forest) l c h / 5%);
+  --color-focus: oklch(from var(--palette-leaf) l c h / 40%);
+  --color-plot-surface: oklch(from var(--palette-paper) calc(l + 0.03) calc(c * 0.35) h);
+  --color-plot-surface-overlay: oklch(from var(--color-plot-surface) l c h / 90%);
+  --color-plot-grid: var(--color-border-subtle);
+  --color-accent-fill: oklch(from var(--palette-coral) l c h / 12%);
+  --color-climb-label: oklch(from var(--palette-coral) calc(l - 0.21) calc(c * 0.72) h);
+  --color-crossing: oklch(from var(--palette-leaf) l c h / 60%);
+  --color-crossing-label: var(--color-notice-text);
+  --color-hover-line: oklch(from var(--palette-forest) l c h / 60%);
+}
+
 * { box-sizing: border-box; }
-body { margin: 0; }
-a { color: #18794e; }
-.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem max(1rem, calc((100vw - 70rem) / 2)); background: #173b2a; color: #fff; }
-.site-header a { color: #fff; text-decoration: none; }
+body { margin: 0; background: var(--color-background); color: var(--color-foreground); }
+a { color: var(--color-leaf); }
+.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem max(1rem, calc((100vw - 70rem) / 2)); background: var(--color-forest); color: var(--color-on-dark); }
+.site-header a { color: var(--color-on-dark); text-decoration: none; }
 .brand { font-weight: 750; letter-spacing: .02em; }
 .nav { display: flex; gap: 1rem; font-size: .95rem; }
 .container { width: min(70rem, calc(100% - 2rem)); margin: 0 auto; padding: 2.5rem 0 4rem; }
-.eyebrow { margin: 0 0 .4rem; color: #18794e; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
+.eyebrow { margin: 0 0 .4rem; color: var(--color-leaf); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
 h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; }
-.lead { max-width: 42rem; color: #5b675f; }
-.panel { margin-top: 2rem; padding: 1.25rem; border: 1px solid #d9ded8; border-radius: 1rem; background: #fff; box-shadow: 0 1rem 2.5rem #173b2a0d; }
+.lead { max-width: 42rem; color: var(--color-muted); }
+.panel { margin-top: 2rem; padding: 1.25rem; border: 1px solid var(--color-border); border-radius: 1rem; background: var(--color-surface); box-shadow: 0 1rem 2.5rem var(--color-panel-shadow); }
 .toolbar { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
-.button { display: inline-block; border: 0; border-radius: .65rem; padding: .7rem 1rem; background: #d96932; color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
-.button.secondary { background: #e8eee9; color: #173b2a; }
-label { display: grid; gap: .35rem; color: #5b675f; font-size: .85rem; font-weight: 650; }
-input { border: 1px solid #c8d0c9; border-radius: .55rem; padding: .65rem .7rem; font: inherit; color: inherit; background: #fff; }
+.button { display: inline-block; border: 0; border-radius: .65rem; padding: .7rem 1rem; background: var(--color-accent); color: var(--color-on-dark); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
+.button.secondary { background: var(--color-secondary-surface); color: var(--color-forest); }
+label { display: grid; gap: .35rem; color: var(--color-muted); font-size: .85rem; font-weight: 650; }
+input { border: 1px solid var(--color-input-border); border-radius: .55rem; padding: .65rem .7rem; font: inherit; color: inherit; background: var(--color-surface); }
 .form-row { display: flex; align-items: end; gap: .75rem; flex-wrap: wrap; }
 .sync-progress { display: grid; gap: .7rem; margin-top: 1.25rem; }
 .progress-heading { display: flex; justify-content: space-between; gap: 1rem; }
-progress { width: 100%; height: .8rem; accent-color: #d96932; }
-.notice { margin: 1rem 0 0; border-radius: .6rem; padding: .75rem 1rem; background: #e5f3e9; color: #17633f; }
-.error { margin: 1rem 0 0; border-radius: .6rem; padding: .75rem 1rem; background: #fbe8df; color: #8c3517; }
+progress { width: 100%; height: .8rem; accent-color: var(--color-accent); }
+.notice { margin: 1rem 0 0; border-radius: .6rem; padding: .75rem 1rem; background: var(--color-notice-surface); color: var(--color-notice-text); }
+.error { margin: 1rem 0 0; border-radius: .6rem; padding: .75rem 1rem; background: var(--color-error-surface); color: var(--color-error-text); }
 table { width: 100%; border-collapse: collapse; }
-th, td { padding: .85rem .5rem; border-bottom: 1px solid #e5e9e5; text-align: left; }
-th { color: #68746c; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
+th, td { padding: .85rem .5rem; border-bottom: 1px solid var(--color-border-subtle); text-align: left; }
+th { color: var(--color-subtle); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
 .sort-link { color: inherit; text-decoration: none; }
-.sort-link:hover, .sort-link:focus-visible, th.active .sort-link { color: #d96932; }
+.sort-link:hover, .sort-link:focus-visible, th.active .sort-link { color: var(--color-accent); }
 .sort-indicator { display: inline-block; margin-left: .2rem; }
 .numeric { text-align: right; white-space: nowrap; }
-.empty { padding: 2.5rem 1rem; text-align: center; color: #68746c; }
+.empty { padding: 2.5rem 1rem; text-align: center; color: var(--color-subtle); }
 .map-panel { padding: 0; overflow: hidden; }
 .ride-map { min-height: 24rem; height: min(65vh, 40rem); }
 .profile-panel { padding-bottom: 1rem; }
 .profile-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
 .profile-heading h2 { margin: 0; font-size: 1.2rem; }
-.profile-heading p { margin: 0; color: #68746c; font-size: .9rem; }
+.profile-heading p { margin: 0; color: var(--color-subtle); font-size: .9rem; }
 .profile-chart { margin-top: 1rem; }
-.profile-chart canvas { display: block; width: 100%; height: 22rem; border-radius: .65rem; background: #fbfcfa; outline: none; }
-.profile-chart canvas:focus-visible { box-shadow: 0 0 0 .2rem #18794e66; }
-.profile-hover { display: block; min-height: 1.4rem; margin: .7rem 0 0; color: #5b675f; font-size: .9rem; }
+.profile-chart canvas { display: block; width: 100%; height: 22rem; border-radius: .65rem; background: var(--color-plot-surface); outline: none; }
+.profile-chart canvas:focus-visible { box-shadow: 0 0 0 .2rem var(--color-focus); }
+.profile-hover { display: block; min-height: 1.4rem; margin: .7rem 0 0; color: var(--color-muted); font-size: .9rem; }
 dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0; }
-dt { color: #68746c; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
+dt { color: var(--color-subtle); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
 dd { margin: .25rem 0 0; font-size: 1.2rem; font-weight: 700; }
 @media (max-width: 700px) { .container { width: min(100% - 1rem, 70rem); padding-top: 1.5rem; } .site-header { padding-inline: 1rem; } th:nth-child(n+4), td:nth-child(n+4) { display: none; } .panel { padding: .8rem; } }
 @media (max-width: 500px) { dl { grid-template-columns: repeat(2, 1fr); } }
diff --git a/web/templates.templ b/web/templates.templ
index efc7213..8e7c0f1 100644
--- a/web/templates.templ
+++ b/web/templates.templ
@@ -97,6 +97,27 @@ templ RideDetailContent(data RideDetailView) {
 				const canvas = document.getElementById("ride-profile-chart");
 				const hoverOutput = document.getElementById("ride-profile-hover");
 				if (!mapElement || !routeElement || !profileElement || !canvas || !hoverOutput) return;
+				const colorProbe = document.createElement("span");
+				colorProbe.hidden = true;
+				document.body.append(colorProbe);
+				const resolveColor = (name) => {
+					colorProbe.style.color = `var(${name})`;
+					return getComputedStyle(colorProbe).color;
+				};
+				const colors = {
+					accent: resolveColor("--color-accent"),
+					forest: resolveColor("--color-forest"),
+					subtle: resolveColor("--color-subtle"),
+					plotSurface: resolveColor("--color-plot-surface"),
+					plotSurfaceOverlay: resolveColor("--color-plot-surface-overlay"),
+					grid: resolveColor("--color-plot-grid"),
+					accentFill: resolveColor("--color-accent-fill"),
+					climbLabel: resolveColor("--color-climb-label"),
+					crossing: resolveColor("--color-crossing"),
+					crossingLabel: resolveColor("--color-crossing-label"),
+					hoverLine: resolveColor("--color-hover-line"),
+				};
+				colorProbe.remove();
 				const route = JSON.parse(routeElement.textContent);
 				const profile = JSON.parse(profileElement.textContent);
 				const map = L.map(mapElement);
@@ -106,7 +127,7 @@ templ RideDetailContent(data RideDetailView) {
 				});
 				tiles.addTo(map);
 				const routeLayer = L.geoJSON(route, {
-					style: { color: "#d96932", weight: 4, opacity: 0.9 },
+					style: { color: colors.accent, weight: 4, opacity: 0.9 },
 				}).addTo(map);
 				const bounds = routeLayer.getBounds();
 				if (bounds.isValid()) {
@@ -116,8 +137,8 @@ templ RideDetailContent(data RideDetailView) {
 				const points = profile.points || [];
 				if (points.length === 0) return;
 				const routeCursor = L.circleMarker([points[0].latitude, points[0].longitude], {
-					color: "#173b2a",
-					fillColor: "#d96932",
+					color: colors.forest,
+					fillColor: colors.accent,
 					fillOpacity: 0,
 					opacity: 0,
 					radius: 7,
@@ -176,7 +197,7 @@ templ RideDetailContent(data RideDetailView) {
 					state.plot = { left: 52, right: rect.width - 20, top: 24, bottom: rect.height - 34 };
 					const plot = state.plot;
 					context.clearRect(0, 0, rect.width, rect.height);
-					context.fillStyle = "#fbfcfa";
+					context.fillStyle = colors.plotSurface;
 					context.fillRect(0, 0, rect.width, rect.height);
 
 					context.font = "12px system-ui, sans-serif";
@@ -185,13 +206,13 @@ templ RideDetailContent(data RideDetailView) {
 						const fraction = step / 4;
 						const y = plot.top + fraction * (plot.bottom - plot.top);
 						const elevation = maxElevation - fraction * (maxElevation - minElevation);
-						context.strokeStyle = "#e5e9e5";
+						context.strokeStyle = colors.grid;
 						context.lineWidth = 1;
 						context.beginPath();
 						context.moveTo(plot.left, y);
 						context.lineTo(plot.right, y);
 						context.stroke();
-						context.fillStyle = "#68746c";
+						context.fillStyle = colors.subtle;
 						context.textAlign = "right";
 						context.fillText(formatElevation(elevation), plot.left - 8, y);
 					}
@@ -199,10 +220,10 @@ templ RideDetailContent(data RideDetailView) {
 					for (const climb of profile.climbs || []) {
 						const startX = clamp(xForDistance(climb.startKm), plot.left, plot.right);
 						const endX = clamp(xForDistance(climb.endKm), plot.left, plot.right);
-						context.fillStyle = "#d9693230";
+						context.fillStyle = colors.accentFill;
 						context.fillRect(startX, plot.top, Math.max(endX - startX, 1), plot.bottom - plot.top);
 						const label = climb.name || `${climb.category} ${Math.round(climb.score)}`;
-						context.fillStyle = "#8c421f";
+						context.fillStyle = colors.climbLabel;
 						context.textAlign = "center";
 						context.textBaseline = "top";
 						context.fillText(label, clamp((startX + endX) / 2, plot.left + 24, plot.right - 24), plot.top + 4);
@@ -210,7 +231,7 @@ templ RideDetailContent(data RideDetailView) {
 
 					for (const crossing of profile.crossings || []) {
 						const x = xForDistance(crossing.distanceKm);
-						context.strokeStyle = "#18794e99";
+						context.strokeStyle = colors.crossing;
 						context.lineWidth = 1;
 						context.setLineDash([4, 3]);
 						context.beginPath();
@@ -225,7 +246,7 @@ templ RideDetailContent(data RideDetailView) {
 					for (const point of points) context.lineTo(xForDistance(point.distanceKm), yForElevation(point.elevationM));
 					context.lineTo(xForDistance(points[points.length - 1].distanceKm), plot.bottom);
 					context.closePath();
-					context.fillStyle = "#d9693220";
+					context.fillStyle = colors.accentFill;
 					context.fill();
 					context.beginPath();
 					for (let i = 0; i < points.length; i++) {
@@ -233,7 +254,7 @@ templ RideDetailContent(data RideDetailView) {
 						if (i === 0) context.moveTo(xForDistance(point.distanceKm), yForElevation(point.elevationM));
 						else context.lineTo(xForDistance(point.distanceKm), yForElevation(point.elevationM));
 					}
-					context.strokeStyle = "#d96932";
+					context.strokeStyle = colors.accent;
 					context.lineWidth = 2.5;
 					context.stroke();
 					for (const crossing of profile.crossings || []) {
@@ -242,15 +263,15 @@ templ RideDetailContent(data RideDetailView) {
 						const labelWidth = context.measureText(label).width;
 						const labelX = clamp(x, plot.left + labelWidth / 2 + 3, plot.right - labelWidth / 2 - 3);
 						const labelY = plot.top - 6;
-						context.fillStyle = "#fbfcfae6";
+						context.fillStyle = colors.plotSurfaceOverlay;
 						context.fillRect(labelX - labelWidth / 2 - 3, labelY - 15, labelWidth + 6, 16);
-						context.fillStyle = "#17633f";
+						context.fillStyle = colors.crossingLabel;
 						context.textAlign = "center";
 						context.textBaseline = "bottom";
 						context.fillText(label, labelX, labelY);
 					}
 
-					context.fillStyle = "#68746c";
+					context.fillStyle = colors.subtle;
 					context.textAlign = "center";
 					context.textBaseline = "top";
 					for (let step = 0; step <= 4; step++) {
@@ -262,7 +283,7 @@ templ RideDetailContent(data RideDetailView) {
 						const point = points[state.hoveredIndex];
 						const x = xForDistance(point.distanceKm);
 						const y = yForElevation(point.elevationM);
-						context.strokeStyle = "#173b2a99";
+						context.strokeStyle = colors.hoverLine;
 						context.lineWidth = 1;
 						context.setLineDash([3, 3]);
 						context.beginPath();
@@ -270,7 +291,7 @@ templ RideDetailContent(data RideDetailView) {
 						context.lineTo(x, plot.bottom);
 						context.stroke();
 						context.setLineDash([]);
-						context.fillStyle = "#173b2a";
+						context.fillStyle = colors.forest;
 						context.beginPath();
 						context.arc(x, y, 5, 0, 2 * Math.PI);
 						context.fill();
diff --git a/web/templates_templ.go b/web/templates_templ.go
index 93bc9e3..6991c73 100644
--- a/web/templates_templ.go
+++ b/web/templates_templ.go
@@ -498,7 +498,7 @@ func RideDetailContent(data RideDetailView) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" <script src=\"https://unpkg.com/leaflet@1.9.4/dist/leaflet.js\"></script> <script>\n\t\t\t(() => {\n\t\t\t\tconst mapElement = document.getElementById(\"ride-map\");\n\t\t\t\tconst routeElement = document.getElementById(\"ride-route\");\n\t\t\t\tconst profileElement = document.getElementById(\"ride-profile\");\n\t\t\t\tconst canvas = document.getElementById(\"ride-profile-chart\");\n\t\t\t\tconst hoverOutput = document.getElementById(\"ride-profile-hover\");\n\t\t\t\tif (!mapElement || !routeElement || !profileElement || !canvas || !hoverOutput) return;\n\t\t\t\tconst route = JSON.parse(routeElement.textContent);\n\t\t\t\tconst profile = JSON.parse(profileElement.textContent);\n\t\t\t\tconst map = L.map(mapElement);\n\t\t\t\tconst tiles = L.tileLayer(\"https://tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n\t\t\t\t\tmaxZoom: 19,\n\t\t\t\t\tattribution: '&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors',\n\t\t\t\t});\n\t\t\t\ttiles.addTo(map);\n\t\t\t\tconst routeLayer = L.geoJSON(route, {\n\t\t\t\t\tstyle: { color: \"#d96932\", weight: 4, opacity: 0.9 },\n\t\t\t\t}).addTo(map);\n\t\t\t\tconst bounds = routeLayer.getBounds();\n\t\t\t\tif (bounds.isValid()) {\n\t\t\t\t\tmap.fitBounds(bounds, { padding: [24, 24], maxZoom: 15 });\n\t\t\t\t}\n\n\t\t\t\tconst points = profile.points || [];\n\t\t\t\tif (points.length === 0) return;\n\t\t\t\tconst routeCursor = L.circleMarker([points[0].latitude, points[0].longitude], {\n\t\t\t\t\tcolor: \"#173b2a\",\n\t\t\t\t\tfillColor: \"#d96932\",\n\t\t\t\t\tfillOpacity: 0,\n\t\t\t\t\topacity: 0,\n\t\t\t\t\tradius: 7,\n\t\t\t\t\tweight: 3,\n\t\t\t\t\tinteractive: false,\n\t\t\t\t}).addTo(map);\n\n\t\t\t\tconst context = canvas.getContext(\"2d\");\n\t\t\t\tif (!context) return;\n\t\t\t\tconst state = { hoveredIndex: -1, plot: null, width: 0, height: 0 };\n\t\t\t\tconst minDistance = points[0].distanceKm;\n\t\t\t\tconst maxDistance = points[points.length - 1].distanceKm;\n\t\t\t\tlet minElevation = points[0].elevationM;\n\t\t\t\tlet maxElevation = points[0].elevationM;\n\t\t\t\tfor (const point of points) {\n\t\t\t\t\tminElevation = Math.min(minElevation, point.elevationM);\n\t\t\t\t\tmaxElevation = Math.max(maxElevation, point.elevationM);\n\t\t\t\t}\n\t\t\t\tconst elevationPadding = Math.max((maxElevation - minElevation) * 0.1, 20);\n\t\t\t\tminElevation -= elevationPadding;\n\t\t\t\tmaxElevation += elevationPadding;\n\n\t\t\t\tconst formatDistance = (distance) => `${distance.toFixed(distance < 10 ? 1 : 0)} km`;\n\t\t\t\tconst formatElevation = (elevation) => `${Math.round(elevation)} m`;\n\t\t\t\tconst clamp = (value, min, max) => Math.max(min, Math.min(max, value));\n\t\t\t\tconst xForDistance = (distance) => {\n\t\t\t\t\tconst span = Math.max(maxDistance - minDistance, 1);\n\t\t\t\t\treturn state.plot.left + (distance - minDistance) / span * (state.plot.right - state.plot.left);\n\t\t\t\t};\n\t\t\t\tconst yForElevation = (elevation) => {\n\t\t\t\t\tconst span = Math.max(maxElevation - minElevation, 1);\n\t\t\t\t\treturn state.plot.bottom - (elevation - minElevation) / span * (state.plot.bottom - state.plot.top);\n\t\t\t\t};\n\t\t\t\tconst nearestPointIndex = (distance) => {\n\t\t\t\t\tlet low = 0;\n\t\t\t\t\tlet high = points.length - 1;\n\t\t\t\t\twhile (low < high) {\n\t\t\t\t\t\tconst middle = Math.floor((low + high) / 2);\n\t\t\t\t\t\tif (points[middle].distanceKm < distance) low = middle + 1;\n\t\t\t\t\t\telse high = middle;\n\t\t\t\t\t}\n\t\t\t\t\tif (low === 0) return low;\n\t\t\t\t\tconst previous = points[low - 1];\n\t\t\t\t\treturn distance - previous.distanceKm < points[low].distanceKm - distance ? low - 1 : low;\n\t\t\t\t};\n\n\t\t\t\tconst draw = () => {\n\t\t\t\t\tconst rect = canvas.getBoundingClientRect();\n\t\t\t\t\tif (rect.width === 0 || rect.height === 0) return;\n\t\t\t\t\tconst ratio = window.devicePixelRatio || 1;\n\t\t\t\t\tcanvas.width = Math.floor(rect.width * ratio);\n\t\t\t\t\tcanvas.height = Math.floor(rect.height * ratio);\n\t\t\t\t\tcontext.setTransform(ratio, 0, 0, ratio, 0, 0);\n\t\t\t\t\tstate.width = rect.width;\n\t\t\t\t\tstate.height = rect.height;\n\t\t\t\t\tstate.plot = { left: 52, right: rect.width - 20, top: 24, bottom: rect.height - 34 };\n\t\t\t\t\tconst plot = state.plot;\n\t\t\t\t\tcontext.clearRect(0, 0, rect.width, rect.height);\n\t\t\t\t\tcontext.fillStyle = \"#fbfcfa\";\n\t\t\t\t\tcontext.fillRect(0, 0, rect.width, rect.height);\n\n\t\t\t\t\tcontext.font = \"12px system-ui, sans-serif\";\n\t\t\t\t\tcontext.textBaseline = \"middle\";\n\t\t\t\t\tfor (let step = 0; step <= 4; step++) {\n\t\t\t\t\t\tconst fraction = step / 4;\n\t\t\t\t\t\tconst y = plot.top + fraction * (plot.bottom - plot.top);\n\t\t\t\t\t\tconst elevation = maxElevation - fraction * (maxElevation - minElevation);\n\t\t\t\t\t\tcontext.strokeStyle = \"#e5e9e5\";\n\t\t\t\t\t\tcontext.lineWidth = 1;\n\t\t\t\t\t\tcontext.beginPath();\n\t\t\t\t\t\tcontext.moveTo(plot.left, y);\n\t\t\t\t\t\tcontext.lineTo(plot.right, y);\n\t\t\t\t\t\tcontext.stroke();\n\t\t\t\t\t\tcontext.fillStyle = \"#68746c\";\n\t\t\t\t\t\tcontext.textAlign = \"right\";\n\t\t\t\t\t\tcontext.fillText(formatElevation(elevation), plot.left - 8, y);\n\t\t\t\t\t}\n\n\t\t\t\t\tfor (const climb of profile.climbs || []) {\n\t\t\t\t\t\tconst startX = clamp(xForDistance(climb.startKm), plot.left, plot.right);\n\t\t\t\t\t\tconst endX = clamp(xForDistance(climb.endKm), plot.left, plot.right);\n\t\t\t\t\t\tcontext.fillStyle = \"#d9693230\";\n\t\t\t\t\t\tcontext.fillRect(startX, plot.top, Math.max(endX - startX, 1), plot.bottom - plot.top);\n\t\t\t\t\t\tconst label = climb.name || `${climb.category} ${Math.round(climb.score)}`;\n\t\t\t\t\t\tcontext.fillStyle = \"#8c421f\";\n\t\t\t\t\t\tcontext.textAlign = \"center\";\n\t\t\t\t\t\tcontext.textBaseline = \"top\";\n\t\t\t\t\t\tcontext.fillText(label, clamp((startX + endX) / 2, plot.left + 24, plot.right - 24), plot.top + 4);\n\t\t\t\t\t}\n\n\t\t\t\t\tfor (const crossing of profile.crossings || []) {\n\t\t\t\t\t\tconst x = xForDistance(crossing.distanceKm);\n\t\t\t\t\t\tcontext.strokeStyle = \"#18794e99\";\n\t\t\t\t\t\tcontext.lineWidth = 1;\n\t\t\t\t\t\tcontext.setLineDash([4, 3]);\n\t\t\t\t\t\tcontext.beginPath();\n\t\t\t\t\t\tcontext.moveTo(x, plot.top);\n\t\t\t\t\t\tcontext.lineTo(x, plot.bottom);\n\t\t\t\t\t\tcontext.stroke();\n\t\t\t\t\t\tcontext.setLineDash([]);\n\t\t\t\t\t}\n\n\t\t\t\t\tcontext.beginPath();\n\t\t\t\t\tcontext.moveTo(xForDistance(points[0].distanceKm), plot.bottom);\n\t\t\t\t\tfor (const point of points) context.lineTo(xForDistance(point.distanceKm), yForElevation(point.elevationM));\n\t\t\t\t\tcontext.lineTo(xForDistance(points[points.length - 1].distanceKm), plot.bottom);\n\t\t\t\t\tcontext.closePath();\n\t\t\t\t\tcontext.fillStyle = \"#d9693220\";\n\t\t\t\t\tcontext.fill();\n\t\t\t\t\tcontext.beginPath();\n\t\t\t\t\tfor (let i = 0; i < points.length; i++) {\n\t\t\t\t\t\tconst point = points[i];\n\t\t\t\t\t\tif (i === 0) context.moveTo(xForDistance(point.distanceKm), yForElevation(point.elevationM));\n\t\t\t\t\t\telse context.lineTo(xForDistance(point.distanceKm), yForElevation(point.elevationM));\n\t\t\t\t\t}\n\t\t\t\t\tcontext.strokeStyle = \"#d96932\";\n\t\t\t\t\tcontext.lineWidth = 2.5;\n\t\t\t\t\tcontext.stroke();\n\t\t\t\t\tfor (const crossing of profile.crossings || []) {\n\t\t\t\t\t\tconst x = xForDistance(crossing.distanceKm);\n\t\t\t\t\t\tconst label = `${crossing.name} ${Math.round(crossing.passElevationM)} m`;\n\t\t\t\t\t\tconst labelWidth = context.measureText(label).width;\n\t\t\t\t\t\tconst labelX = clamp(x, plot.left + labelWidth / 2 + 3, plot.right - labelWidth / 2 - 3);\n\t\t\t\t\t\tconst labelY = plot.top - 6;\n\t\t\t\t\t\tcontext.fillStyle = \"#fbfcfae6\";\n\t\t\t\t\t\tcontext.fillRect(labelX - labelWidth / 2 - 3, labelY - 15, labelWidth + 6, 16);\n\t\t\t\t\t\tcontext.fillStyle = \"#17633f\";\n\t\t\t\t\t\tcontext.textAlign = \"center\";\n\t\t\t\t\t\tcontext.textBaseline = \"bottom\";\n\t\t\t\t\t\tcontext.fillText(label, labelX, labelY);\n\t\t\t\t\t}\n\n\t\t\t\t\tcontext.fillStyle = \"#68746c\";\n\t\t\t\t\tcontext.textAlign = \"center\";\n\t\t\t\t\tcontext.textBaseline = \"top\";\n\t\t\t\t\tfor (let step = 0; step <= 4; step++) {\n\t\t\t\t\t\tconst distance = minDistance + step / 4 * (maxDistance - minDistance);\n\t\t\t\t\t\tcontext.fillText(formatDistance(distance), xForDistance(distance), plot.bottom + 10);\n\t\t\t\t\t}\n\n\t\t\t\t\tif (state.hoveredIndex >= 0) {\n\t\t\t\t\t\tconst point = points[state.hoveredIndex];\n\t\t\t\t\t\tconst x = xForDistance(point.distanceKm);\n\t\t\t\t\t\tconst y = yForElevation(point.elevationM);\n\t\t\t\t\t\tcontext.strokeStyle = \"#173b2a99\";\n\t\t\t\t\t\tcontext.lineWidth = 1;\n\t\t\t\t\t\tcontext.setLineDash([3, 3]);\n\t\t\t\t\t\tcontext.beginPath();\n\t\t\t\t\t\tcontext.moveTo(x, plot.top);\n\t\t\t\t\t\tcontext.lineTo(x, plot.bottom);\n\t\t\t\t\t\tcontext.stroke();\n\t\t\t\t\t\tcontext.setLineDash([]);\n\t\t\t\t\t\tcontext.fillStyle = \"#173b2a\";\n\t\t\t\t\t\tcontext.beginPath();\n\t\t\t\t\t\tcontext.arc(x, y, 5, 0, 2 * Math.PI);\n\t\t\t\t\t\tcontext.fill();\n\t\t\t\t\t}\n\t\t\t\t};\n\n\t\t\t\tconst clearHover = () => {\n\t\t\t\t\tstate.hoveredIndex = -1;\n\t\t\t\t\trouteCursor.setStyle({ opacity: 0, fillOpacity: 0 });\n\t\t\t\t\thoverOutput.textContent = \"Hover or focus the profile to inspect elevation.\";\n\t\t\t\t\tdraw();\n\t\t\t\t};\n\t\t\t\tconst showPoint = (index) => {\n\t\t\t\t\tstate.hoveredIndex = clamp(index, 0, points.length - 1);\n\t\t\t\t\tconst point = points[state.hoveredIndex];\n\t\t\t\t\trouteCursor.setLatLng([point.latitude, point.longitude]);\n\t\t\t\t\trouteCursor.setStyle({ opacity: 1, fillOpacity: 0.9 });\n\t\t\t\t\thoverOutput.textContent = `${formatDistance(point.distanceKm)} · ${formatElevation(point.elevationM)}`;\n\t\t\t\t\tdraw();\n\t\t\t\t};\n\t\t\t\tcanvas.addEventListener(\"pointermove\", (event) => {\n\t\t\t\t\tif (!state.plot) return;\n\t\t\t\t\tconst rect = canvas.getBoundingClientRect();\n\t\t\t\t\tconst x = event.clientX - rect.left;\n\t\t\t\t\tif (x < state.plot.left || x > state.plot.right) {\n\t\t\t\t\t\tclearHover();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tconst distance = minDistance + (x - state.plot.left) / (state.plot.right - state.plot.left) * (maxDistance - minDistance);\n\t\t\t\t\tshowPoint(nearestPointIndex(distance));\n\t\t\t\t});\n\t\t\t\tcanvas.addEventListener(\"pointerleave\", clearHover);\n\t\t\t\tcanvas.addEventListener(\"pointercancel\", clearHover);\n\t\t\t\tcanvas.addEventListener(\"keydown\", (event) => {\n\t\t\t\t\tif (event.key !== \"ArrowLeft\" && event.key !== \"ArrowRight\") return;\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tconst direction = event.key === \"ArrowRight\" ? 1 : -1;\n\t\t\t\t\tconst index = state.hoveredIndex < 0 ? (direction > 0 ? 0 : points.length - 1) : state.hoveredIndex + direction;\n\t\t\t\t\tshowPoint(index);\n\t\t\t\t});\n\t\t\t\twindow.addEventListener(\"resize\", draw);\n\t\t\t\tdraw();\n\t\t\t})();\n\t\t</script>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" <script src=\"https://unpkg.com/leaflet@1.9.4/dist/leaflet.js\"></script> <script>\n\t\t\t(() => {\n\t\t\t\tconst mapElement = document.getElementById(\"ride-map\");\n\t\t\t\tconst routeElement = document.getElementById(\"ride-route\");\n\t\t\t\tconst profileElement = document.getElementById(\"ride-profile\");\n\t\t\t\tconst canvas = document.getElementById(\"ride-profile-chart\");\n\t\t\t\tconst hoverOutput = document.getElementById(\"ride-profile-hover\");\n\t\t\t\tif (!mapElement || !routeElement || !profileElement || !canvas || !hoverOutput) return;\n\t\t\t\tconst colorProbe = document.createElement(\"span\");\n\t\t\t\tcolorProbe.hidden = true;\n\t\t\t\tdocument.body.append(colorProbe);\n\t\t\t\tconst resolveColor = (name) => {\n\t\t\t\t\tcolorProbe.style.color = `var(${name})`;\n\t\t\t\t\treturn getComputedStyle(colorProbe).color;\n\t\t\t\t};\n\t\t\t\tconst colors = {\n\t\t\t\t\taccent: resolveColor(\"--color-accent\"),\n\t\t\t\t\tforest: resolveColor(\"--color-forest\"),\n\t\t\t\t\tsubtle: resolveColor(\"--color-subtle\"),\n\t\t\t\t\tplotSurface: resolveColor(\"--color-plot-surface\"),\n\t\t\t\t\tplotSurfaceOverlay: resolveColor(\"--color-plot-surface-overlay\"),\n\t\t\t\t\tgrid: resolveColor(\"--color-plot-grid\"),\n\t\t\t\t\taccentFill: resolveColor(\"--color-accent-fill\"),\n\t\t\t\t\tclimbLabel: resolveColor(\"--color-climb-label\"),\n\t\t\t\t\tcrossing: resolveColor(\"--color-crossing\"),\n\t\t\t\t\tcrossingLabel: resolveColor(\"--color-crossing-label\"),\n\t\t\t\t\thoverLine: resolveColor(\"--color-hover-line\"),\n\t\t\t\t};\n\t\t\t\tcolorProbe.remove();\n\t\t\t\tconst route = JSON.parse(routeElement.textContent);\n\t\t\t\tconst profile = JSON.parse(profileElement.textContent);\n\t\t\t\tconst map = L.map(mapElement);\n\t\t\t\tconst tiles = L.tileLayer(\"https://tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n\t\t\t\t\tmaxZoom: 19,\n\t\t\t\t\tattribution: '&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors',\n\t\t\t\t});\n\t\t\t\ttiles.addTo(map);\n\t\t\t\tconst routeLayer = L.geoJSON(route, {\n\t\t\t\t\tstyle: { color: colors.accent, weight: 4, opacity: 0.9 },\n\t\t\t\t}).addTo(map);\n\t\t\t\tconst bounds = routeLayer.getBounds();\n\t\t\t\tif (bounds.isValid()) {\n\t\t\t\t\tmap.fitBounds(bounds, { padding: [24, 24], maxZoom: 15 });\n\t\t\t\t}\n\n\t\t\t\tconst points = profile.points || [];\n\t\t\t\tif (points.length === 0) return;\n\t\t\t\tconst routeCursor = L.circleMarker([points[0].latitude, points[0].longitude], {\n\t\t\t\t\tcolor: colors.forest,\n\t\t\t\t\tfillColor: colors.accent,\n\t\t\t\t\tfillOpacity: 0,\n\t\t\t\t\topacity: 0,\n\t\t\t\t\tradius: 7,\n\t\t\t\t\tweight: 3,\n\t\t\t\t\tinteractive: false,\n\t\t\t\t}).addTo(map);\n\n\t\t\t\tconst context = canvas.getContext(\"2d\");\n\t\t\t\tif (!context) return;\n\t\t\t\tconst state = { hoveredIndex: -1, plot: null, width: 0, height: 0 };\n\t\t\t\tconst minDistance = points[0].distanceKm;\n\t\t\t\tconst maxDistance = points[points.length - 1].distanceKm;\n\t\t\t\tlet minElevation = points[0].elevationM;\n\t\t\t\tlet maxElevation = points[0].elevationM;\n\t\t\t\tfor (const point of points) {\n\t\t\t\t\tminElevation = Math.min(minElevation, point.elevationM);\n\t\t\t\t\tmaxElevation = Math.max(maxElevation, point.elevationM);\n\t\t\t\t}\n\t\t\t\tconst elevationPadding = Math.max((maxElevation - minElevation) * 0.1, 20);\n\t\t\t\tminElevation -= elevationPadding;\n\t\t\t\tmaxElevation += elevationPadding;\n\n\t\t\t\tconst formatDistance = (distance) => `${distance.toFixed(distance < 10 ? 1 : 0)} km`;\n\t\t\t\tconst formatElevation = (elevation) => `${Math.round(elevation)} m`;\n\t\t\t\tconst clamp = (value, min, max) => Math.max(min, Math.min(max, value));\n\t\t\t\tconst xForDistance = (distance) => {\n\t\t\t\t\tconst span = Math.max(maxDistance - minDistance, 1);\n\t\t\t\t\treturn state.plot.left + (distance - minDistance) / span * (state.plot.right - state.plot.left);\n\t\t\t\t};\n\t\t\t\tconst yForElevation = (elevation) => {\n\t\t\t\t\tconst span = Math.max(maxElevation - minElevation, 1);\n\t\t\t\t\treturn state.plot.bottom - (elevation - minElevation) / span * (state.plot.bottom - state.plot.top);\n\t\t\t\t};\n\t\t\t\tconst nearestPointIndex = (distance) => {\n\t\t\t\t\tlet low = 0;\n\t\t\t\t\tlet high = points.length - 1;\n\t\t\t\t\twhile (low < high) {\n\t\t\t\t\t\tconst middle = Math.floor((low + high) / 2);\n\t\t\t\t\t\tif (points[middle].distanceKm < distance) low = middle + 1;\n\t\t\t\t\t\telse high = middle;\n\t\t\t\t\t}\n\t\t\t\t\tif (low === 0) return low;\n\t\t\t\t\tconst previous = points[low - 1];\n\t\t\t\t\treturn distance - previous.distanceKm < points[low].distanceKm - distance ? low - 1 : low;\n\t\t\t\t};\n\n\t\t\t\tconst draw = () => {\n\t\t\t\t\tconst rect = canvas.getBoundingClientRect();\n\t\t\t\t\tif (rect.width === 0 || rect.height === 0) return;\n\t\t\t\t\tconst ratio = window.devicePixelRatio || 1;\n\t\t\t\t\tcanvas.width = Math.floor(rect.width * ratio);\n\t\t\t\t\tcanvas.height = Math.floor(rect.height * ratio);\n\t\t\t\t\tcontext.setTransform(ratio, 0, 0, ratio, 0, 0);\n\t\t\t\t\tstate.width = rect.width;\n\t\t\t\t\tstate.height = rect.height;\n\t\t\t\t\tstate.plot = { left: 52, right: rect.width - 20, top: 24, bottom: rect.height - 34 };\n\t\t\t\t\tconst plot = state.plot;\n\t\t\t\t\tcontext.clearRect(0, 0, rect.width, rect.height);\n\t\t\t\t\tcontext.fillStyle = colors.plotSurface;\n\t\t\t\t\tcontext.fillRect(0, 0, rect.width, rect.height);\n\n\t\t\t\t\tcontext.font = \"12px system-ui, sans-serif\";\n\t\t\t\t\tcontext.textBaseline = \"middle\";\n\t\t\t\t\tfor (let step = 0; step <= 4; step++) {\n\t\t\t\t\t\tconst fraction = step / 4;\n\t\t\t\t\t\tconst y = plot.top + fraction * (plot.bottom - plot.top);\n\t\t\t\t\t\tconst elevation = maxElevation - fraction * (maxElevation - minElevation);\n\t\t\t\t\t\tcontext.strokeStyle = colors.grid;\n\t\t\t\t\t\tcontext.lineWidth = 1;\n\t\t\t\t\t\tcontext.beginPath();\n\t\t\t\t\t\tcontext.moveTo(plot.left, y);\n\t\t\t\t\t\tcontext.lineTo(plot.right, y);\n\t\t\t\t\t\tcontext.stroke();\n\t\t\t\t\t\tcontext.fillStyle = colors.subtle;\n\t\t\t\t\t\tcontext.textAlign = \"right\";\n\t\t\t\t\t\tcontext.fillText(formatElevation(elevation), plot.left - 8, y);\n\t\t\t\t\t}\n\n\t\t\t\t\tfor (const climb of profile.climbs || []) {\n\t\t\t\t\t\tconst startX = clamp(xForDistance(climb.startKm), plot.left, plot.right);\n\t\t\t\t\t\tconst endX = clamp(xForDistance(climb.endKm), plot.left, plot.right);\n\t\t\t\t\t\tcontext.fillStyle = colors.accentFill;\n\t\t\t\t\t\tcontext.fillRect(startX, plot.top, Math.max(endX - startX, 1), plot.bottom - plot.top);\n\t\t\t\t\t\tconst label = climb.name || `${climb.category} ${Math.round(climb.score)}`;\n\t\t\t\t\t\tcontext.fillStyle = colors.climbLabel;\n\t\t\t\t\t\tcontext.textAlign = \"center\";\n\t\t\t\t\t\tcontext.textBaseline = \"top\";\n\t\t\t\t\t\tcontext.fillText(label, clamp((startX + endX) / 2, plot.left + 24, plot.right - 24), plot.top + 4);\n\t\t\t\t\t}\n\n\t\t\t\t\tfor (const crossing of profile.crossings || []) {\n\t\t\t\t\t\tconst x = xForDistance(crossing.distanceKm);\n\t\t\t\t\t\tcontext.strokeStyle = colors.crossing;\n\t\t\t\t\t\tcontext.lineWidth = 1;\n\t\t\t\t\t\tcontext.setLineDash([4, 3]);\n\t\t\t\t\t\tcontext.beginPath();\n\t\t\t\t\t\tcontext.moveTo(x, plot.top);\n\t\t\t\t\t\tcontext.lineTo(x, plot.bottom);\n\t\t\t\t\t\tcontext.stroke();\n\t\t\t\t\t\tcontext.setLineDash([]);\n\t\t\t\t\t}\n\n\t\t\t\t\tcontext.beginPath();\n\t\t\t\t\tcontext.moveTo(xForDistance(points[0].distanceKm), plot.bottom);\n\t\t\t\t\tfor (const point of points) context.lineTo(xForDistance(point.distanceKm), yForElevation(point.elevationM));\n\t\t\t\t\tcontext.lineTo(xForDistance(points[points.length - 1].distanceKm), plot.bottom);\n\t\t\t\t\tcontext.closePath();\n\t\t\t\t\tcontext.fillStyle = colors.accentFill;\n\t\t\t\t\tcontext.fill();\n\t\t\t\t\tcontext.beginPath();\n\t\t\t\t\tfor (let i = 0; i < points.length; i++) {\n\t\t\t\t\t\tconst point = points[i];\n\t\t\t\t\t\tif (i === 0) context.moveTo(xForDistance(point.distanceKm), yForElevation(point.elevationM));\n\t\t\t\t\t\telse context.lineTo(xForDistance(point.distanceKm), yForElevation(point.elevationM));\n\t\t\t\t\t}\n\t\t\t\t\tcontext.strokeStyle = colors.accent;\n\t\t\t\t\tcontext.lineWidth = 2.5;\n\t\t\t\t\tcontext.stroke();\n\t\t\t\t\tfor (const crossing of profile.crossings || []) {\n\t\t\t\t\t\tconst x = xForDistance(crossing.distanceKm);\n\t\t\t\t\t\tconst label = `${crossing.name} ${Math.round(crossing.passElevationM)} m`;\n\t\t\t\t\t\tconst labelWidth = context.measureText(label).width;\n\t\t\t\t\t\tconst labelX = clamp(x, plot.left + labelWidth / 2 + 3, plot.right - labelWidth / 2 - 3);\n\t\t\t\t\t\tconst labelY = plot.top - 6;\n\t\t\t\t\t\tcontext.fillStyle = colors.plotSurfaceOverlay;\n\t\t\t\t\t\tcontext.fillRect(labelX - labelWidth / 2 - 3, labelY - 15, labelWidth + 6, 16);\n\t\t\t\t\t\tcontext.fillStyle = colors.crossingLabel;\n\t\t\t\t\t\tcontext.textAlign = \"center\";\n\t\t\t\t\t\tcontext.textBaseline = \"bottom\";\n\t\t\t\t\t\tcontext.fillText(label, labelX, labelY);\n\t\t\t\t\t}\n\n\t\t\t\t\tcontext.fillStyle = colors.subtle;\n\t\t\t\t\tcontext.textAlign = \"center\";\n\t\t\t\t\tcontext.textBaseline = \"top\";\n\t\t\t\t\tfor (let step = 0; step <= 4; step++) {\n\t\t\t\t\t\tconst distance = minDistance + step / 4 * (maxDistance - minDistance);\n\t\t\t\t\t\tcontext.fillText(formatDistance(distance), xForDistance(distance), plot.bottom + 10);\n\t\t\t\t\t}\n\n\t\t\t\t\tif (state.hoveredIndex >= 0) {\n\t\t\t\t\t\tconst point = points[state.hoveredIndex];\n\t\t\t\t\t\tconst x = xForDistance(point.distanceKm);\n\t\t\t\t\t\tconst y = yForElevation(point.elevationM);\n\t\t\t\t\t\tcontext.strokeStyle = colors.hoverLine;\n\t\t\t\t\t\tcontext.lineWidth = 1;\n\t\t\t\t\t\tcontext.setLineDash([3, 3]);\n\t\t\t\t\t\tcontext.beginPath();\n\t\t\t\t\t\tcontext.moveTo(x, plot.top);\n\t\t\t\t\t\tcontext.lineTo(x, plot.bottom);\n\t\t\t\t\t\tcontext.stroke();\n\t\t\t\t\t\tcontext.setLineDash([]);\n\t\t\t\t\t\tcontext.fillStyle = colors.forest;\n\t\t\t\t\t\tcontext.beginPath();\n\t\t\t\t\t\tcontext.arc(x, y, 5, 0, 2 * Math.PI);\n\t\t\t\t\t\tcontext.fill();\n\t\t\t\t\t}\n\t\t\t\t};\n\n\t\t\t\tconst clearHover = () => {\n\t\t\t\t\tstate.hoveredIndex = -1;\n\t\t\t\t\trouteCursor.setStyle({ opacity: 0, fillOpacity: 0 });\n\t\t\t\t\thoverOutput.textContent = \"Hover or focus the profile to inspect elevation.\";\n\t\t\t\t\tdraw();\n\t\t\t\t};\n\t\t\t\tconst showPoint = (index) => {\n\t\t\t\t\tstate.hoveredIndex = clamp(index, 0, points.length - 1);\n\t\t\t\t\tconst point = points[state.hoveredIndex];\n\t\t\t\t\trouteCursor.setLatLng([point.latitude, point.longitude]);\n\t\t\t\t\trouteCursor.setStyle({ opacity: 1, fillOpacity: 0.9 });\n\t\t\t\t\thoverOutput.textContent = `${formatDistance(point.distanceKm)} · ${formatElevation(point.elevationM)}`;\n\t\t\t\t\tdraw();\n\t\t\t\t};\n\t\t\t\tcanvas.addEventListener(\"pointermove\", (event) => {\n\t\t\t\t\tif (!state.plot) return;\n\t\t\t\t\tconst rect = canvas.getBoundingClientRect();\n\t\t\t\t\tconst x = event.clientX - rect.left;\n\t\t\t\t\tif (x < state.plot.left || x > state.plot.right) {\n\t\t\t\t\t\tclearHover();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tconst distance = minDistance + (x - state.plot.left) / (state.plot.right - state.plot.left) * (maxDistance - minDistance);\n\t\t\t\t\tshowPoint(nearestPointIndex(distance));\n\t\t\t\t});\n\t\t\t\tcanvas.addEventListener(\"pointerleave\", clearHover);\n\t\t\t\tcanvas.addEventListener(\"pointercancel\", clearHover);\n\t\t\t\tcanvas.addEventListener(\"keydown\", (event) => {\n\t\t\t\t\tif (event.key !== \"ArrowLeft\" && event.key !== \"ArrowRight\") return;\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tconst direction = event.key === \"ArrowRight\" ? 1 : -1;\n\t\t\t\t\tconst index = state.hoveredIndex < 0 ? (direction > 0 ? 0 : points.length - 1) : state.hoveredIndex + direction;\n\t\t\t\t\tshowPoint(index);\n\t\t\t\t});\n\t\t\t\twindow.addEventListener(\"resize\", draw);\n\t\t\t\tdraw();\n\t\t\t})();\n\t\t</script>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -569,7 +569,7 @@ func SyncContent(data SyncPageData) templ.Component {
 			var templ_7745c5c3_Var31 string
 			templ_7745c5c3_Var31, templ_7745c5c3_Err = templ.JoinStringErrs(data.Notice)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates.templ`, Line: 330, Col: 52}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates.templ`, Line: 351, Col: 52}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var31))
 			if templ_7745c5c3_Err != nil {
@@ -593,7 +593,7 @@ func SyncContent(data SyncPageData) templ.Component {
 			var templ_7745c5c3_Var32 string
 			templ_7745c5c3_Var32, templ_7745c5c3_Err = templ.JoinStringErrs(data.Error)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates.templ`, Line: 335, Col: 49}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates.templ`, Line: 356, Col: 49}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var32))
 			if templ_7745c5c3_Err != nil {
@@ -635,7 +635,7 @@ func SyncContent(data SyncPageData) templ.Component {
 			var templ_7745c5c3_Var34 string
 			templ_7745c5c3_Var34, templ_7745c5c3_Err = templ.JoinStringErrs(data.From)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates.templ`, Line: 346, Col: 64}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates.templ`, Line: 367, Col: 64}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var34))
 			if templ_7745c5c3_Err != nil {
@@ -648,7 +648,7 @@ func SyncContent(data SyncPageData) templ.Component {
 			var templ_7745c5c3_Var35 string
 			templ_7745c5c3_Var35, templ_7745c5c3_Err = templ.JoinStringErrs(data.To)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates.templ`, Line: 347, Col: 58}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates.templ`, Line: 368, Col: 58}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var35))
 			if templ_7745c5c3_Err != nil {