Make info panels collapsible with remembered state

Each main section with a data-panel key can now be folded by clicking its
heading (rotating chevron, keyboard-accessible via role/tabindex/aria-expanded
and Enter/Space). Collapsed keys are persisted in localStorage and restored on
load, so the layout stays how you left it across reloads.

State is device-global like the theme (a single non-namespaced key, not
per-user data), and only collapsed panels are stored — so any panel added
later defaults to open.

src/app.js

@@ -1216,10 +1216,6 @@
     const ageText = formatAge(cfg.birthday);
     ageEl.textContent = ageText;
     ageEl.hidden = !ageText;
-    // Use the puppy's name in the sleep-timeline heading rather than assuming a
-    // gender; fall back to a neutral phrase when no name is configured.
-    const sleepTitle = document.getElementById("sleep-timeline-title");
-    if (sleepTitle) sleepTitle.textContent = cfg.name ? `When ${cfg.name} sleeps` : "When sleeping";
   }
 
   function render() {

src/index.html

@@ -172,7 +172,7 @@
       </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>
+        <h2>When he sleeps <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>