Make the food chart y-axis much finer

The grams axis now targets ~10 segments instead of ~4, so a 240 g day
gets 25 g gridlines; steps stay round numbers at any scale.

src/app.js

@@ -873,9 +873,10 @@
 
   // Grams axis: 0-based with a "nice" step so tick labels stay round whatever
   // the daily totals are (tens of grams for a tiny puppy, hundreds+ later).
+  // Aims for ~10 segments so day-to-day differences of a few grams show.
   function niceAxisGrams(rawMax) {
-    if (!(rawMax > 0)) return { yMax: 100, steps: 2 };
+    if (!(rawMax > 0)) return { yMax: 100, steps: 4 };
-    const rawStep = rawMax / 4;
+    const rawStep = rawMax / 10;
     const mag  = Math.pow(10, Math.floor(Math.log10(rawStep)));
     const norm = rawStep / mag;
     const step = (norm <= 1 ? 1 : norm <= 2 ? 2 : norm <= 2.5 ? 2.5 : norm <= 5 ? 5 : 10) * mag;

src/changelog.json

@@ -1,4 +1,6 @@
 [
+  { "date": "2026-07-13", "text": "Much finer y-axis on the food chart" },
+  { "date": "2026-07-13", "text": "The awake/asleep timer is bigger and sits first in the top bar" },
   { "date": "2026-07-13", "text": "The sleep, daily counts and food charts now cover the last 14 days instead of 7" },
   { "date": "2026-07-13", "text": "The awake/asleep timer lives in the frozen top bar" },
   { "date": "2026-07-13", "text": "The day picker is a bar frozen at the top of the page" },

src/index.html

@@ -78,16 +78,16 @@
 
     <main>
       <section class="day-bar">
-        <button type="button" id="day-prev" class="ghost" aria-label="Previous day">←</button>
-        <input type="date" id="day-picker" />
-        <button type="button" id="day-today" class="ghost">Today</button>
-        <button type="button" id="day-next" class="ghost" aria-label="Next day">→</button>
         <!-- Compact asleep/awake counter (the old big clock); hidden until a
              sleep event exists. Hover/long-press shows "since" via title. -->
         <div id="bar-clock" class="bar-clock" hidden>
           <span id="bar-clock-icon" aria-hidden="true"></span>
           <span id="bar-clock-time"></span>
         </div>
+        <button type="button" id="day-prev" class="ghost" aria-label="Previous day">←</button>
+        <input type="date" id="day-picker" />
+        <button type="button" id="day-today" class="ghost">Today</button>
+        <button type="button" id="day-next" class="ghost" aria-label="Next day">→</button>
       </section>
 
       <section class="quick-actions">

src/style.css

@@ -162,11 +162,11 @@ body::before {
 .bar-clock {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
-  padding: 7px 12px;
+  padding: 8px 16px;
   border-radius: 999px;
   font-weight: 700;
-  font-size: 0.9rem;
+  font-size: 1.15rem;
   font-variant-numeric: tabular-nums;
   flex-shrink: 0;
 }