feat: installable offline app, plus export and import

Two things that were deliberately left out of 2.0.0.

Export writes every stored day to a JSON file. Import reads one back, and
only ever adds: a task whose id is already there is left alone, so
importing the same file twice does nothing and importing into a list
you're using can't lose work. That is also why it needs no confirmation
dialog. The trade is that import restores rather than reverts.

Both sit in a quiet line under the task list rather than the header, since
they get used about twice a year and the header is what you look at all
day.

For the PWA half, the service worker is about fifty lines with no
dependency, because the strategy falls out of how Vite builds. Documents
go network first and fall back to cache, so a deploy is picked up as soon
as you're online and nobody ends up stuck on an old build. Fingerprinted
assets go cache first and are kept, since their names change when their
contents do. No build-time asset manifest needed.

Icons are SVG in the manifest, which stays sharp at any size and costs
about a kilobyte, plus one 180px PNG because iOS wants a raster
apple-touch-icon. Two theme-color metas so the phone status bar follows
the theme, and safe-area padding on the header, without which the header
sits under the clock once installed on an iPhone.

Verified against the production build: worker registers and claims the
page, shell and assets land in cache, and with the server stopped the app
still loads, adds a task and persists it.

src/style.css

@@ -46,7 +46,9 @@ body {
 .header {
   background-color: var(--bg-surface);
   border-bottom: 1px solid var(--border);
-  padding: 24px 48px;
+  /* The extra top padding is the iOS status bar when the app is installed to
+     the home screen. Without it the header sits underneath the clock. */
+  padding: calc(24px + env(safe-area-inset-top)) 48px 24px;
   position: sticky;
   top: 0;
   z-index: 100;
@@ -149,7 +151,7 @@ body {
 }
 
 .main {
-  padding: 40px 0;
+  padding: 40px 0 calc(40px + env(safe-area-inset-bottom));
 }
 
 .container {
@@ -471,9 +473,76 @@ html.dark .task-item.dragging {
   margin: 0;
 }
 
+/* Deliberately quiet. Export and import get reached for once in a blue moon,
+   so they sit below the list in secondary text rather than taking a slot in
+   the header next to things you use constantly. */
+.data-footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 32px;
+  padding-top: 16px;
+  border-top: 1px solid var(--border);
+  font-size: 13px;
+  color: var(--text-secondary);
+  flex-wrap: wrap;
+}
+
+.data-link {
+  background: transparent;
+  border: none;
+  padding: 4px 6px;
+  margin: 0;
+  border-radius: 4px;
+  font-family: var(--font-family);
+  font-size: 13px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: color 200ms ease, background-color 200ms ease;
+}
+
+.data-link:hover {
+  color: var(--accent);
+  background-color: var(--hover);
+}
+
+.data-sep {
+  color: var(--border);
+}
+
+.data-status {
+  margin-left: 4px;
+  opacity: 0;
+  transition: opacity 200ms ease;
+}
+
+.data-status:not(:empty) {
+  opacity: 1;
+}
+
+.data-status.error {
+  color: #d14343;
+}
+
+html.dark .data-status.error {
+  color: #ff8a8a;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 @media (max-width: 768px) {
   .header {
-    padding: 16px 24px;
+    padding: calc(16px + env(safe-area-inset-top)) 24px 16px;
   }
 
   .header-content {
@@ -514,7 +583,7 @@ html.dark .task-item.dragging {
 
 @media (max-width: 480px) {
   .header {
-    padding: 12px 16px;
+    padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
   }
 
   .container {