Add meal gaps to the timing panel

Meals have the same shape as the pee and poo intervals already shown here —
gapsBetween() is type-agnostic, so it is two more rows and one more call. The
window, the median-based "typical" and the em-dash empty state all come along
unchanged.

The heading drops "Bathroom", which stops being accurate once feeding is in
the panel. data-panel stays "timing", so a collapsed panel stays collapsed
across the rename.

The hint keeps keying off pees: it is advice about when to take the puppy out,
which meal spacing has nothing to say about. Only its empty-state text widens.

src/app.js

@@ -695,6 +695,7 @@
   function renderTiming(events) {
     const peeGaps = gapsBetween(events, "pee");
     const pooGaps = gapsBetween(events, "poo");
+    const eatGaps = gapsBetween(events, "eat");
     const show = (id, ms) => {
       document.getElementById(id).textContent = ms == null ? "—" : formatDuration(ms);
     };
@@ -702,6 +703,8 @@
     show("gap-pee-min", peeGaps[0] ?? null);
     show("gap-poo",     median(pooGaps));
     show("gap-poo-min", pooGaps[0] ?? null);
+    show("gap-eat",     median(eatGaps));
+    show("gap-eat-min", eatGaps[0] ?? null);
 
     const hint = document.getElementById("timing-hint");
     const typicalPee = median(peeGaps);
@@ -710,7 +713,7 @@
         `Based on ${peeGaps.length} pee gap${peeGaps.length === 1 ? "" : "s"}. ` +
         `Aim to take the puppy out a little before the typical ${formatDuration(typicalPee)} mark.`;
     } else {
-      hint.textContent = "Log a few more pees and poos to see typical timings.";
+      hint.textContent = "Log a few more pees, poos and meals to see typical timings.";
     }
   }