Add push reminders for sleep, pee, poo and meals

A closed PWA has no timers, so reminders are evaluated on the server: the
event log is already there (clients sync on every mutation), and a ticker
re-checks each enabled rule once a minute and pushes the ones that are due.

Two rule shapes. "sleep" measures from the last sleep-end and fires only
while the puppy is awake. "pee"/"poo"/"eat" measure from the newest event of
that type and stay quiet while the puppy is asleep — otherwise they nag all
night, and suppressing them means an overdue rule instead fires promptly on
waking, which is when it actually matters. Sleep state is derived exactly the
way currentSleepState() does in app.js, tie-break included, so both sides
always agree. Rules read the event's own timestamp rather than when it synced,
so a pee logged offline at 03:10 cancels the reminder retroactively.

Every push carries a tag, so a repeat replaces the previous notification
instead of stacking another one on the lock screen. last_fired is server-owned
and not writable by a client, so a stale device can't force a re-fire.

Web Push is implemented directly rather than pulled in as a dependency: RFC
8291 encryption in the RFC 8188 aes128gcm coding with an RFC 8292 VAPID token,
stdlib only, checked against the RFC 8291 test vector. The key is generated
into vapid.json beside the DB or supplied via -vapid-key; without one the
server logs a warning, skips registering the routes, and the client hides the
UI. Subscriptions a push service reports as 404/410 are dropped.

PNG icons are added because iOS gates push on a Home Screen install and
rejects SVG for apple-touch-icon, and Android has no notification icon
without them.

src/style.css

@@ -1406,3 +1406,62 @@ section.collapsed > :not(h2) { display: none; }
 @media (prefers-reduced-motion: reduce) {
   .confetti-piece { display: none; }
 }
+
+/* ---------- reminders ---------- */
+.settings-subhead {
+  margin: 0 0 10px;
+  font-size: 0.95rem;
+  color: var(--text);
+}
+#reminders-rules {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin: 12px 0;
+}
+.reminder-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+/* Overrides dialog's block labels: each rule is a switch and its name on one
+   line, with the interval pushed to the far end. */
+.reminder-row .reminder-name {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 0;
+  min-width: 0;
+  font-size: 0.9rem;
+  color: var(--text);
+  cursor: pointer;
+}
+.reminder-row .reminder-name input { margin-top: 0; }
+.reminder-after {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+input.reminder-mins {
+  width: 4.75rem;
+  padding: 6px 8px;
+  text-align: right;
+}
+/* The full-size switch crowds a row that also carries a number field. */
+.reminder-row input.switch {
+  width: 36px;
+  height: 22px;
+  border-radius: 11px;
+}
+.reminder-row input.switch::after {
+  top: 3px;
+  left: 3px;
+  width: 16px;
+  height: 16px;
+}
+.reminder-row input.switch:checked::after { transform: translateX(14px); }
+#reminders-test { width: 100%; }