Split the page into five tabs

Fourteen panels sat in one column, so reaching the weight curve meant scrolling
past sleep, timing, walks and counts. The page had only grown — walks, walk
patterns, training and the excluded-day marker all landed on the same scroll —
and folding panels away, while it helps, is a per-panel fiddle you then have to
undo to look at anything.

They are grouped by subject now: Today (overview, sleep & wake, history), Sleep,
Walks, Habits (pee/poo/meal timing and counts) and Growth (weight, training,
notes). No tab holds more than three. The day bar and the log buttons stay above
them on every tab, because logging has to be one tap from wherever you are, and
the tab bar sticks under the day bar — two stacked stickies need the second's
offset to be the first's height, so that height is measured and published as
--day-bar-h rather than guessed.

What gets hidden is the wrapper, never the sections inside it. walk-timeline and
walk-trend carry their own hidden, set by renderWalkPatterns once a walk exists,
and hiding them directly would clobber it.

render() still draws every panel on every pass, hidden tabs included. Nothing
measures layout — the charts scale through their viewBox, and the one
getBoundingClientRect belongs to the timer pill — so drawing into a hidden
wrapper is safe, and a tab is never briefly stale when you arrive on it. That
pill's own check gains an explicit "is the card's tab showing": a hidden element
measures as zeroes, which gave the right answer here by coincidence rather than
by rule.

Back returns to Today from any tab in one press, and a second press leaves.
Exactly one history entry is ever live, armed on leaving Today and spent on
returning — including when the return is a tap on the Today tab, which would
otherwise strand the entry and make the next press appear to do nothing. An
entry per switch is what a browser does unaided, and is why tabbed apps get a
reputation for trapping you.

Folding is untouched and composes: tabs group, folding tunes what shows within a
group. Both selectors that reach for panels are descendant selectors, so the
extra nesting cost them nothing.

The reordering was scripted rather than done by hand — fourteen sections moving
between five wrappers is how you silently lose one — and a check now asserts
every panel sits in exactly one tab, that buttons and wrappers correspond, and
that the aria pairs are wired. The first run of that script dropped three
explanatory comments along the way, which is exactly the sort of thing it exists
to catch.

src/style.css

@@ -164,6 +164,48 @@ main {
   padding: 16px 0 32px;
 }
 
+/* ---------- tabs ---------- */
+/* Sticks directly under the day bar, whose measured height JS publishes as
+   --day-bar-h (its contents, and so its height, differ between phones). The
+   fallback keeps the bar usable for the frame before that lands. */
+.tabs {
+  position: sticky;
+  top: calc(env(safe-area-inset-top, 0px) + var(--day-bar-h, 52px));
+  z-index: 55; /* under the day bar, over the panels */
+  display: flex;
+  gap: 4px;
+  padding: 6px 4px;
+  margin: -8px 0 0;
+  background: var(--bg);
+}
+.tabs .tab {
+  flex: 1;
+  min-width: 0;
+  padding: 8px 4px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  background: transparent;
+  color: var(--muted);
+  border-radius: var(--radius);
+  /* Five labels across a 360px phone: let them shrink rather than wrap. */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tabs .tab.active {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+.tabs .tab:hover { filter: none; }
+
+/* main's own gap sits between the pinned blocks and the tab area; each tab
+   then spaces its own panels the same way. */
+.tab-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
 section {
   background: var(--surface);
   border-radius: var(--radius);