Add polygon notes (Area mode) to the user overlay tool

notes.js: Point/Area mode toggle mirroring measure.js's UX — Area
mode accumulates clicked vertices with a live dashed-preview polygon
(own small preview source/layers), a Finish button once 3+ corners
are placed, then the same save form as Point mode.

gpx.js's _addLayers now also renders Polygon features from a file's
"lines" source (fill + outline, filtered by geometry-type — the
existing line layer already only draws LineString, so this is just
two more layers on the same source, not a new bucket) with
popup-on-click like a waypoint, not the track line's hover-summary/
profile-panel behavior. Without this a saved polygon wouldn't have
rendered back on reload.

Fixed along the way: .notes-panel__form/.notes-panel__modes both set
their own `display`, which silently wins over the browser's default
`[hidden] { display: none }` (author styles always beat user-agent
ones) — same gotcha .gpx-panel__action[hidden] already has a comment
about. The form was never actually invisible before being opened.

Verified live: real polygon file (fill/outline render, click ->
popup) and the full Area-mode draw flow (mode switch, live preview,
Finish, form) via headless Chrome. Full test suite: 104 runs, 0
failures — one new backend test confirms a Polygon feature round-
trips through POST /api/gpx/notes.

Known gap (noted in TODO.adoc): the category filter matrix only
re-slices the points source, so toggling "Note" off hides point notes
but not polygon ones.

public/css/style.css

@@ -774,17 +774,63 @@ html, body {
   display: none;
 }
 
+.notes-panel__modes {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 6px;
+}
+
+.notes-panel__mode {
+  flex: 1;
+  width: auto;
+  height: auto;
+  padding: 4px 8px;
+  border: none;
+  border-radius: 4px;
+  background: #f0f0f0;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.notes-panel__mode.active {
+  background: #dbe9ff;
+  font-weight: 600;
+}
+
 .notes-panel__hint {
-  margin: 0;
+  margin: 0 0 6px;
   color: #888;
 }
 
+.notes-panel__finish {
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: 6px;
+  padding: 4px 8px;
+  border: none;
+  border-radius: 4px;
+  background: #1a5fb4;
+  color: #fff;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+
 .notes-panel__form {
   display: flex;
   flex-direction: column;
   gap: 6px;
 }
 
+/* Same "author display wins over the UA [hidden] rule" gotcha as
+   .gpx-panel__action[hidden] above — both this and .notes-panel__modes set
+   their own "display", so hiding them needs an explicit override too. */
+.notes-panel__form[hidden],
+.notes-panel__modes[hidden] {
+  display: none;
+}
+
 .notes-panel__text {
   width: 100%;
   box-sizing: border-box;