Put the day's food breakdown inside the Meals card

The total sat in the Meals card and the per-kind split sat in a row beneath the
whole stats grid, so the two halves of the same figure were in different
places. The split now goes under the total it adds up to.

I argued against this when the row went in, on the grounds that a 90px tile
cannot hold a breakdown. That was true of the shape I had in mind — "Dry 260 g
· Fresh 100 g" inline is about 110px — and not of the one that belongs there:
stacked, a line per kind, it is about 60px.

A single kind gets no line of its own. The total is already that kind's figure,
so the name joins it — "540 g · Dry" — rather than repeating the number
underneath. Same rule the chart's day readout uses, and for the same reason.

A day with no kinds on its meals leaves the tile exactly as it was, which is
the overview anyone not using kinds keeps.

The changelog entry for this has shipped and said the breakdown appears "under
the stat tiles". It does not any more, so it is corrected in place: leaving a
description that is now wrong would be worse than editing an entry some readers
have already seen.

checks/food-kinds.mjs

@@ -122,44 +122,65 @@ suite("the palette wraps rather than running out");
      "…and the palette wraps, so two share rather than one having none");
 }
 
-// ---------------------------------------------- the day's split in the overview
-// The Meals tile keeps the day's total; this is the breakdown under it. The
-// case that matters is the one where it must not appear at all.
+// ---------------------------------------------- the day's split in the Meals tile
+// The tile holds the day's total; this puts the per-kind figures under it, so
+// the parts and the sum they make are read in one place. The case that matters
+// is the one where none of it should appear.
 {
   let kinds = [];
-  let el = { hidden: false, textContent: "" };
+  let kindsEl, gramsEl;
   const view = load({
     names: ["NO_KIND", "renderDayFoodKinds"],
     stubs: {
-      document: { getElementById: () => el },
+      document: {
+        getElementById: () => kindsEl,
+        createElement: () => ({ textContent: "", appendChild() {} }),
+      },
       liveFoodKinds: () => kinds,
       foodKindNames: () => new Map(kinds.map(k => [k.id, k.name])),
     },
   });
   const meal = (grams, foodKindId = "") => ({ type: "eat", grams, foodKindId });
-  const show = (evs) => { el = { hidden: false, textContent: "" }; view.renderDayFoodKinds(evs); return el; };
+  const show = (evs) => {
+    const lines = [];
+    kindsEl = {
+      hidden: false, textContent: "",
+      appendChild: (n) => lines.push(n.textContent),
+    };
+    gramsEl = { textContent: "" };
+    const total = evs.filter(e => e.type === "eat" && e.grams > 0)
+      .reduce((s, e) => s + e.grams, 0);
+    view.renderDayFoodKinds(evs, gramsEl, total);
+    return { lines, grams: gramsEl.textContent, hidden: kindsEl.hidden };
+  };
 
-  suite("the day's food split");
+  suite("the day's food in the Meals tile");
   {
     kinds = [];
-    eq(show([meal(180), meal(120)]).hidden, true,
-       "meals with no kind show no breakdown — the tile's total already says it");
-    eq(show([]).hidden, true, "a day with no meals shows nothing");
+    const plain = show([meal(180), meal(120)]);
+    eq(plain.hidden, true, "meals with no kind add nothing under the total");
+    eq(plain.grams, "", "…and leave the tile's own total line alone");
+    eq(show([]).hidden, true, "a day with no meals adds nothing");
+
+    kinds = [{ id: "d", name: "Dry" }];
+    const one = show([meal(300, "d"), meal(240, "d")]);
+    eq(one.hidden, true, "one kind adds no lines — it would only repeat the total");
+    eq(one.grams, "540 g · Dry", "…the total carries its name instead");
 
     kinds = [{ id: "d", name: "Dry" }, { id: "f", name: "Fresh" }];
-    const both = show([meal(200, "d"), meal(100, "f"), meal(60, "d")]);
-    eq(both.hidden, false, "once a meal carries a kind, the breakdown appears");
-    eq(both.textContent, "Dry 260 g · Fresh 100 g", "…summed per kind, in the chart's order");
+    const two = show([meal(200, "d"), meal(100, "f"), meal(60, "d")]);
+    eq(two.hidden, false, "two kinds do get their own lines");
+    eq(two.lines, ["Dry 260 g", "Fresh 100 g"], "…summed per kind, in the chart's order");
 
-    eq(show([meal(200, "d"), meal(50)]).textContent, "Dry 200 g · No kind 50 g",
-       "unlabelled food on a day that has kinds is named, not dropped");
+    eq(show([meal(200, "d"), meal(50)]).lines, ["Dry 200 g", "No kind 50 g"],
+       "unlabelled food alongside a kind is named, not dropped");
 
     kinds = [];
-    eq(show([meal(90, "gone")]).textContent, "Deleted kind 90 g",
+    eq(show([meal(90, "gone")]).grams, "90 g · Deleted kind",
        "a kind deleted since still labels its food rather than vanishing");
 
     kinds = [{ id: "d", name: "Dry" }];
-    eq(show([meal(0, "d"), meal(120, "d")]).textContent, "Dry 120 g",
+    eq(show([meal(0, "d"), meal(120, "d")]).grams, "120 g · Dry",
        "a meal logged without an amount adds nothing to the split");
   }
 }