Prompt to reload when a new version is available

The service worker used to skipWaiting() on install and claim clients on
activate, so a new build's assets swapped in silently and a long-open tab
kept running stale JS. Switch to the standard update flow: the worker now
waits until the page sends it a SKIP_WAITING message, and the page shows a
"A new version is available — Reload / Later" banner when a new worker
reaches "installed" while one is already controlling the tab (that
controller check suppresses the first-install prompt).

Reload posts SKIP_WAITING and reloads on controllerchange (guarded against
a reload loop and against the initial clients.claim on a fresh install);
Later dismisses until the next update. Since browsers only auto-check on
navigation, also poll registration.update() hourly and on visibilitychange.
Bump the cache to v9 so the old cache is cleaned up on activate.

src/style.css

@@ -663,3 +663,36 @@ input.switch::after {
 }
 input.switch:checked { background: var(--accent); }
 input.switch:checked::after { transform: translateX(18px); }
+
+/* ---------- update banner ---------- */
+.update-banner {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 70;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: calc(10px + env(safe-area-inset-top, 0)) 16px 10px;
+  background: var(--accent);
+  color: #fff;
+  box-shadow: var(--shadow);
+}
+.update-banner[hidden] { display: none; }
+.update-banner-msg { font-size: 0.9rem; font-weight: 600; }
+.update-banner-actions { display: flex; gap: 8px; }
+.update-banner-btn {
+  background: #fff;
+  color: var(--accent);
+  font-weight: 700;
+  padding: 6px 14px;
+}
+.update-banner-btn.ghostish {
+  background: transparent;
+  color: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.6);
+}
+.update-banner-btn:hover { filter: brightness(0.97); }