Add inline color legends next to chart title for all modes

Legends sit between the title and the mode selector dropdown:
- Grade: colored swatches with percentage thresholds
- Elevation: gradient bar from low (green) to high (red)
- Surface: text hint about surface coloring

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

packages/i18n/src/locales/de.ts

@@ -102,6 +102,7 @@ export default {
       elevation: "Höhe",
       surface: "Untergrund",
       grade: "Steigung",
+      surfaceLegend: "Farbe nach Straßenbelag",
       surfaceUnavailable: "Untergrunddaten für dieses Profil nicht verfügbar",
     },
     rateLimitExceeded: "Zu viele Anfragen. Bitte versuche es später erneut.",
@@ -110,6 +111,8 @@ export default {
       loss: "Höhenmeter abwärts",
       profile: "Höhenprofil",
       grade: "Steigungsprofil",
+      low: "Tief",
+      high: "Hoch",
     },
     landing: {
       startPlanning: "Planung starten",

packages/i18n/src/locales/en.ts

@@ -102,6 +102,7 @@ export default {
       elevation: "Elevation",
       surface: "Surface",
       grade: "Grade",
+      surfaceLegend: "Color by road surface type",
       surfaceUnavailable: "Surface data not available for this profile",
     },
     rateLimitExceeded: "Too many requests. Please try again later.",
@@ -110,6 +111,8 @@ export default {
       loss: "Elevation Loss",
       profile: "Elevation Profile",
       grade: "Grade Profile",
+      low: "Low",
+      high: "High",
     },
     landing: {
       startPlanning: "Start Planning",