Show the longest gap in the timing charts

The bar gains a faded stretch from the typical gap out to the longest one of
the window, behind the solid shortest-to-typical part. Where the solid ends is
the median, so the boundary marks "typical" without another mark on the track.

Extending the linear axis to reach it does not work. Gaps are heavily skewed —
one long overnight gap a night against daytime gaps a tenth its length — and
on a linear scale the everyday range collapsed into the first tenth of the
track, to the point that four different "since" values rendered as the same
picture. So the axis is stretched the way the sleep trend's is above 10h: the
typical gap is pinned to the middle, shortest-to-typical takes the left half
and typical-to-longest the right. Every row then reads the same way, left of
centre sooner than usual and right of centre longer, however extreme that
row's tail is. A note in the panel says as much, since a stretched axis is not
something to leave to inference.

The right edge now being the longest gap retires the old cap at twice the
typical: the marker's chevron means "past the longest gap yet" rather than
past an arbitrary cutoff.

src/style.css

@@ -371,6 +371,10 @@ button.danger { background: var(--danger); }
 .timing-chart .tm-word { fill: var(--muted); }
 .timing-chart .tm-track { fill: var(--border); }
 .timing-chart .tm-tick { stroke: var(--muted); stroke-width: 1; opacity: 0.45; }
+.timing-chart .tm-band { fill-opacity: 1; }
+/* The full spread sits behind the solid shortest-to-typical stretch, faded so
+   the everyday half of the range stays the one that reads first. */
+.timing-chart .tm-range { fill-opacity: 0.32; }
 .timing-chart .tm-pee { fill: var(--pee); }
 .timing-chart .tm-poo { fill: var(--poo); }
 .timing-chart .tm-eat { fill: var(--eat); }