Fix meta-row color regression, show Services/Activities as icon tags

The gray color from the previous commit landed on .gpx-popup__meta (the
whole row, label and value both) instead of just .gpx-popup__meta-label —
only the label was supposed to be muted, the value should read as normal
text same as the description above it.

While in there: Services/Activities were showing park4night's own raw,
comma-separated codes ("animaux, point_eau, wc_public"), which don't mean
anything to a reader on their own. PARK4NIGHT_TAGS (icons.js) maps the
codes p4n2gpx's exports actually use to a human label and, where the
National Park Service's icon set (already used for POI_ICONS) has a
reasonable match, a small icon — formatTags (gpx.js) renders each as an
icon+label tag instead of raw text. A code not in that table just falls
back to its own raw text, so nothing is ever hidden.

public/js/gpx.js

@@ -8,6 +8,7 @@ import {
   ROUTE_ICON,
   MAP_MARKER_ICON,
   POI_ICONS,
+  PARK4NIGHT_TAGS,
 } from "/js/icons.js";
 import { notifySidePanelOpen, onlyOneSidePanelOpen } from "/js/panels.js";
 import { formatActivityType } from "/js/track_profile.js";
@@ -828,12 +829,7 @@ function formatDescription(description) {
   const bodyText = body.join("\n").trim();
   if (bodyText) parts.push(`<p class="gpx-popup__description">${linkify(bodyText).replace(/\n/g, "<br>")}</p>`);
   if (meta.length > 0) {
-    const rows = meta
-      .map(
-        ([, label, value]) =>
-          `<div class="gpx-popup__meta-row"><span class="gpx-popup__meta-label">${escapeHtml(label)}</span> ${escapeHtml(value)}</div>`,
-      )
-      .join("");
+    const rows = meta.map(([, label, value]) => formatMetaRow(label, value)).join("");
     parts.push(`<div class="gpx-popup__meta">${rows}</div>`);
   }
   links.forEach((url) => parts.push(`<p class="gpx-popup__link">${urlToLink(url)}</p>`));
@@ -841,6 +837,33 @@ function formatDescription(description) {
   return parts.join("");
 }
 
+// Services/Activities get rendered as icon+label tags (PARK4NIGHT_TAGS,
+// icons.js) rather than their raw comma-separated park4night codes — "vtt,
+// eaux_vives, peche" told a reader nothing on its own. Rating (or anything
+// else matching DESCRIPTION_META_LINE) stays plain text; a park4night code
+// this app hasn't catalogued yet just falls back to showing its raw text,
+// same as before PARK4NIGHT_TAGS existed, so nothing is ever hidden.
+function formatMetaRow(label, value) {
+  const isTagList = /^(services|activities)$/i.test(label);
+  const valueHtml = isTagList
+    ? `<div class="gpx-popup__tags">${formatTags(value)}</div>`
+    : ` ${escapeHtml(value)}`;
+  return `<div class="gpx-popup__meta-row"><span class="gpx-popup__meta-label">${escapeHtml(label)}</span>${valueHtml}</div>`;
+}
+
+function formatTags(value) {
+  return value
+    .split(",")
+    .map((code) => code.trim())
+    .filter(Boolean)
+    .map((code) => {
+      const tag = PARK4NIGHT_TAGS[code];
+      const icon = tag?.icon ? `<span class="gpx-popup__tag-icon">${tag.icon}</span>` : "";
+      return `<span class="gpx-popup__tag">${icon}${escapeHtml(tag?.label ?? code)}</span>`;
+    })
+    .join("");
+}
+
 // Turns bare URLs in untrusted text into safe <a> links: the string is
 // split on the URL pattern and every piece is escaped — including the URL
 // itself, both as href and as link text — before any HTML is assembled, so