Turn the GPX category legend into a clickable Unigrid filter matrix

Legend items are now toggle buttons (icon grid, not a color-swatch
list) that hide/show that category's waypoints on the map. Filtering
re-slices each file's source data rather than using a layer filter,
since MapLibre clusters a GeoJSON source's full data regardless of
what a layer filter hides.

public/css/style.css

@@ -494,10 +494,13 @@ html, body {
 
 .gpx-legend {
   flex-shrink: 0;
-  max-height: 140px;
+  max-height: 160px;
   overflow-y: auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2px 8px;
   padding: 8px 12px;
-  border-top: 1px solid #eee;
+  border-top: 1px solid #1a1a1a;
 }
 
 .gpx-legend[hidden] {
@@ -508,7 +511,42 @@ html, body {
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 2px 0;
+  padding: 3px 4px;
+  border: none;
+  border-radius: 3px;
+  background: none;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  color: #1a1a1a;
+  overflow: hidden;
+}
+
+.gpx-legend__item:hover {
+  background: #f0f0f0;
+}
+
+.gpx-legend__item--hidden {
+  opacity: 0.35;
+}
+
+.gpx-legend__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.gpx-legend__icon {
+  display: flex;
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  color: #1a1a1a;
+}
+
+.gpx-legend__icon svg {
+  width: 100%;
+  height: 100%;
 }
 
 .gpx-legend__swatch {