Add an offline-data status dot to the topbar

Small green/gray indicator reusing the existing /api/offline-tiles
check, showing at a glance whether this server has offline map data.
Closes out the top banner TODO item — DEM elevation and a hamburger
menu are intentionally left out (no DEM layer yet, and the sidebar
isn't mobile-collapsed).

TODO.adoc

@@ -20,7 +20,7 @@ independence from connectivity.
 
 * [ ] Map Park4Night/OSM place types to NPS pictograms (campground, primitive camp, drinking water, dump station, viewpoint, picnic table) for instant recognition without reading text
 * [ ] Restyle popovers, side panels, and point detail views after the NPS Unigrid layout system (Massimo Vignelli) with Frutiger/Rawlinson Roadside-style typography
-** [ ] Top black banner (full width): NPS-style logo + "MAPTOOL" on the left, location telemetry (DMS/DD coordinates, DEM elevation) in the center, hamburger menu + offline-data status on the right, white sans-serif type
+** [x] Top black banner (full width): "MAPTOOL" on the left, live map-center coordinates in the center, offline-data status dot on the right, white sans-serif type — DEM elevation and a hamburger menu skipped (no DEM layer yet; sidebar isn't mobile-collapsed, so nothing for a hamburger to reveal)
 ** [ ] Point detail/sidepanel: black header banner with white location name and an NPS pictogram in the corner; amenities (water, waste, power, slope) shown as a pictogram grid, no extra text; action buttons for "route here" (Valhalla), "start leveling", "save offline"
 ** [x] Filter panel as a "Unigrid Matrix" — an icon grid to toggle categories on/off, styled like the legend on an official NPS paper map, instead of plain dropdowns
 * [ ] Custom vector style (MVT/MapLibre) using the NPS color palette — muted natural tones for forests, water, and contours — so POIs and routes stand out at high zoom

public/css/style.css

@@ -34,6 +34,18 @@ html, body {
   color: #bbb;
 }
 
+.topbar__offline-status {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #666;
+  flex-shrink: 0;
+}
+
+.topbar__offline-status--ready {
+  background: #2a9d8f;
+}
+
 .topbar__auth {
   margin-left: auto;
   display: flex;

public/js/map.js

@@ -442,6 +442,7 @@ function applyStyle(name) {
 // the Online/Offline switch itself doesn't make sense (there's nothing to
 // switch to), so it's removed entirely rather than left sitting there
 // offering a choice that can't work.
+const offlineStatus = document.querySelector(".topbar__offline-status");
 fetch("/api/offline-tiles")
   .then((response) => response.json())
   .then(({ available }) => {
@@ -451,6 +452,9 @@ fetch("/api/offline-tiles")
       layerToggle.remove();
       map.removeControl(mapLayersButton);
     }
+    offlineStatus.hidden = false;
+    offlineStatus.classList.toggle("topbar__offline-status--ready", available);
+    offlineStatus.title = available ? "Offline map data ready" : "No offline map data on this server";
   })
   .catch(() => {
     // Backend check failed; keep the online style and leave the switch as

views/index.erb

@@ -2,6 +2,7 @@
   <header class="topbar">
     <span class="topbar__brand" title="rev <%= revision %>">MapTool</span>
     <span class="topbar__coords"></span>
+    <span class="topbar__offline-status" hidden></span>
     <div class="topbar__auth">
       <% if logged_in %>
         <span><%= user %></span>