Add sleep timeline and by-hour heatmaps

Two new charts over the last 14 days, in the existing hand-rolled SVG style:

- "When he sleeps": an actogram with one row per day (oldest at top, Today
  at bottom) and a midnight-to-midnight track with sleep shaded. Sleep
  windows are clipped per day so a night crossing midnight splits across two
  rows, and today's open sleep runs to now. Tapping a row selects that day.
- "By hour of day": pee/poo/meal frequency as three 24-cell heatmap rows,
  each cell shaded by how often that event lands in that hour — surfacing
  daily rhythm the median gap can't show.

Both re-render on the one-minute tick so the current day keeps filling in.

src/index.html

@@ -171,6 +171,18 @@
         </div>
       </section>
 
+      <section class="patterns" data-panel="sleep-timeline">
+        <h2><span id="sleep-timeline-title">When sleeping</span> <span class="muted-note">(last 14 days)</span></h2>
+        <svg id="chart-sleep-timeline" class="chart-svg" viewBox="0 0 320 228" role="img" aria-label="Sleep periods per day over the last 14 days"></svg>
+        <p class="muted-note">Each row is a day, midnight to midnight; shaded = asleep. Tap a row to open that day.</p>
+      </section>
+
+      <section class="patterns" data-panel="hour-heatmap">
+        <h2>By hour of day <span class="muted-note">(last 14 days)</span></h2>
+        <svg id="chart-hour-heatmap" class="chart-svg" viewBox="0 0 320 120" role="img" aria-label="Pee, poo and meal frequency by hour of day over the last 14 days"></svg>
+        <p class="muted-note">Darker = happens more often at that hour.</p>
+      </section>
+
       <section class="weight">
         <h2>Weight</h2>
         <div class="weight-summary">