Group the log buttons into rows

The buttons flowed into one auto-fit grid, so how they grouped was whatever
the viewport's column count happened to produce. At two columns — every
phone — seven buttons left the last one stranded alone on a fifth row, and
between roughly 504px and 584px the grid goes to three columns and splits
"Sleep start" from "Sleep end" across a wrap, which is the one pairing that
has to stay together: the two halves are read as a unit, and one of them is
always the disabled twin of the other.

Each row is now stated outright instead. The timed pair takes a row of its
own, the one-tap moments go three across, and the two that open a dialog to
type a value take the last row. Nothing is orphaned at any width and the
pairing cannot come apart.

The rows group by what the buttons mean rather than by what tapping them
does, which puts "Ate" with the pees and poos even though it opens the grams
dialog like a weigh-in. Meaning is what you are scanning for at 3am; the
dialog is a detail you meet after the tap.

Three columns leave about 55px of text room at 320px wide, so the narrow
breakpoint that already trims the day bar trims that row's side padding too,
rather than letting a button wrap to two lines.

src/style.css

@@ -183,6 +183,9 @@ body::before {
 }
 /* Keep the single row intact on narrow phones. */
 @media (max-width: 370px) {
+  /* Three columns leave ~55px of text room on the narrowest phones; trimming
+     the side padding keeps "🍽️ Ate" on one line instead of wrapping. */
+  .action-row.three-up button { padding-left: 6px; padding-right: 6px; }
   .day-bar { gap: 4px; }
   .day-bar button:not(.bar-clock) { padding: 8px 7px; }
   .bar-clock { font-size: 0.9rem; padding: 6px 8px; gap: 5px; }
@@ -242,11 +245,20 @@ body::before {
 .big-clock.awake  { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--accent) 10%, var(--surface))); }
 .big-clock.awake  .bc-time { color: var(--accent); }
 
-.grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+/* Quick actions: a stack of explicit rows (see index.html) instead of one
+   auto-fit grid, so the grouping is the same at every width. Equal columns
+   within a row, two by default and three for the short-labelled moments. */
+.actions {
+  display: flex;
+  flex-direction: column;
   gap: 10px;
 }
+.action-row {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
+.action-row.three-up { grid-template-columns: repeat(3, 1fr); }
 
 button {
   font: inherit;