Apply the chart window to the timing panel

The 7d/14d/30d picker already drove every chart on the page, but the timing
panel was not a chart and got missed: gapsBetween defaulted to a literal 7 and
the heading said "(last 7 days)" as fixed text, so picking 30d widened the
counts and heatmap while the pee, poo and meal gaps under them stayed on a
week. Two panels describing the same events over different windows is the kind
of disagreement nobody thinks to check for.

The default is now chartDays(), read at call time so it tracks the picker
rather than freezing at load, and the heading joins the other panels in
deriving its "(last N days)" from the same place. The two sentences that
quoted seven days — the empty-row fallback and the range tooltip — say the
picked number, and the note about the faded stretch says "the window" rather
than "the week", which is no longer always true.

An explicit days argument still wins, so a future caller wanting a fixed
window is not forced through the picker.

src/app.js

@@ -727,8 +727,10 @@
 
   // Gaps (ms) between consecutive events of `type` logged within the last
   // `days` days, sorted ascending. These intervals are what tell you how
-  // often the puppy needs to go out.
-  function gapsBetween(events, type, days = 7) {
+  // often the puppy needs to go out. Defaults to the picked chart window, so
+  // the 7d/14d/30d buttons widen the timing panel along with the charts —
+  // read at call time, not at definition, so a change takes on the next render.
+  function gapsBetween(events, type, days = chartDays()) {
     const cutoff = startOfDay(new Date());
     cutoff.setDate(cutoff.getDate() - (days - 1));
     const from = cutoff.getTime();
@@ -795,7 +797,7 @@
       svg.style.display = "none";
       note.hidden = false;
       note.textContent = since == null
-        ? `No ${row.noun}s logged in the last 7 days.`
+        ? `No ${row.noun}s logged in the last ${chartDays()} days.`
         : `One ${row.noun} logged, ${formatDuration(since)} ago — log another to see the typical gap.`;
       return;
     }
@@ -840,7 +842,7 @@
     const parts = [
       `<rect class="tm-track" x="${ML}" y="${trackY}" width="${innerW}" height="${trackH}" rx="${trackH / 2}"/>`,
       bandRect(`tm-range ${row.cls}`, xShort, xLong,
-        `<title>${escapeText(`${formatDuration(shortest)}–${formatDuration(longest)} between ${row.noun}s over the last 7 days`)}</title>`),
+        `<title>${escapeText(`${formatDuration(shortest)}–${formatDuration(longest)} between ${row.noun}s over the last ${chartDays()} days`)}</title>`),
       bandRect(`tm-band ${row.cls}`, xShort, xTypical,
         `<title>${escapeText(`Typically ${formatDuration(typical)} between ${row.noun}s`)}</title>`),
     ];

src/changelog.json

@@ -1,4 +1,5 @@
 [
+  { "date": "2026-08-31", "text": "The 7d / 14d / 30d buttons now set the window for the Timing panel too. Until now the typical, shortest and longest gaps between pees, poos and meals were always measured over the last 7 days whatever you picked; switch to 30d and they are measured over 30, which settles down the typical gap once there is a month of history to draw on" },
   { "date": "2026-08-31", "text": "The charts are grouped by subject instead of all sharing one “Last 7 days” panel. Sleep hours per day is now its own Sleep panel, sitting just above the “When … sleeps” timeline with the rest of the sleep views. Daily counts and Food have joined the by-hour chart in one “Pees, poos & meals” panel, so how many a day, how much food went with them and what hours they fall in read together. Minutes walked per day has moved into the Walks panel. The 7d / 14d / 30d picker now sits in the Sleep panel and still sets the window for every one of these charts" },
   { "date": "2026-08-31", "text": "A sleep or walk pair is now tied together in the History log by a dotted rail down the side, in that pair's colour, running from the start row to the end row. Anything logged in between sits inside the bracket, so a pee taken on a walk reads as having happened during it. A pair still in progress, or one that ran over from yesterday, leaves its end of the rail open" },
   { "date": "2026-08-31", "text": "Added walks: tap 🦮 Walk start when you head out and 🏁 Walk end when you get home, and the time in between is counted as exercise. The pair gets its own row under the sleep buttons. Today's total and the number of walks show in the overview, every walk of the day is listed in a new Walks section (with the age-based rule of thumb of about five minutes per month of age, twice a day), and the daily charts gain a “Walks (minutes)” bar chart once you have logged one. Like sleep, only the boundary that makes sense is tappable — no walk running means Walk end is greyed out" },

src/index.html

@@ -191,7 +191,7 @@
       </section>
 
       <section class="timing" data-panel="timing">
-        <h2>Timing <span class="muted-note">(last 7 days)</span></h2>
+        <h2>Timing <span class="muted-note" data-chart-days-label>(last 7 days)</span></h2>
         <!-- One range chart per type, drawn by drawTimingChart: the band spans
              the shortest to the typical gap and the marker is how long it has
              been since the last one, so a marker past the band reads as due. -->
@@ -214,7 +214,7 @@
         </div>
         <!-- The axis is stretched (see drawTimingChart), so say what the middle
              of a bar means rather than leave it to be inferred. -->
-        <p class="muted-note">The middle of every bar is that type's typical gap: left of it is sooner than usual, right of it is longer, and the faded stretch runs out to the longest gap of the week.</p>
+        <p class="muted-note">The middle of every bar is that type's typical gap: left of it is sooner than usual, right of it is longer, and the faded stretch runs out to the longest gap in the window.</p>
         <p class="muted-note timing-hint" id="timing-hint"></p>
       </section>