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/style.css

@@ -739,3 +739,20 @@ input.switch:checked::after { transform: translateX(18px); }
   flex-shrink: 0;
 }
 .snackbar-action:hover { filter: none; background: var(--accent-soft); }
+
+/* ---------- pattern charts (sleep timeline + hour heatmap) ---------- */
+.chart-svg .stl-track {
+  fill: var(--bg);
+  stroke: var(--border);
+  stroke-width: 0.5;
+}
+.chart-svg .stl-sleep { fill: var(--sleep); }
+.chart-svg .stl-today { fill: var(--accent); font-weight: 600; }
+.chart-svg .stl-hit { fill: transparent; cursor: pointer; }
+.chart-svg .stl-hit:hover { fill: var(--accent); fill-opacity: 0.08; }
+
+.chart-svg .hm-cell { stroke: none; }
+.chart-svg .hm-pee { fill: var(--pee); }
+.chart-svg .hm-poo { fill: var(--poo); }
+.chart-svg .hm-eat { fill: var(--eat); }
+