Make the day-bar sleep pill a one-tap toggle

Once the big timer scrolls away, the pill in the day bar is the only thing
still showing the sleep state — but acting on it meant scrolling back up to
the quick actions. Tapping the pill now logs the boundary that ends the state
it displays: sleep-end while asleep, sleep-start while awake. It routes
through quickLog(), so the snackbar and its undo behave exactly as they do
from the buttons, and the state is read from currentSleepState() rather than
the cached bigClockState so a tap can't act on a stale render.

The pill becomes a real <button>, which brings keyboard operation along for
free. In standby it is visibility:hidden, so while the big card is on screen
it is neither clickable nor tab-reachable, and the toggle is live exactly when
the pill is visible.

The .day-bar button padding and :disabled rules are scoped to :not(.bar-clock)
so they don't start outranking the pill's own sizing, and the default accent
button background is reset since the asleep/awake classes paint it.

src/style.css

@@ -177,22 +177,26 @@ body::before {
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }
-.day-bar button {
+.day-bar button:not(.bar-clock) {
   padding: 8px 10px;
   flex-shrink: 0;
 }
 /* Keep the single row intact on narrow phones. */
 @media (max-width: 370px) {
   .day-bar { gap: 4px; }
-  .day-bar button { padding: 8px 7px; }
+  .day-bar button:not(.bar-clock) { padding: 8px 7px; }
   .bar-clock { font-size: 0.9rem; padding: 6px 8px; gap: 5px; }
 }
-.day-bar button:disabled {
+.day-bar button:not(.bar-clock):disabled {
   opacity: 0.4;
   cursor: not-allowed;
 }
 .bar-clock {
   display: flex;
+  /* It is a button (tapping it flips the sleep state), so undo the default
+     accent look — the asleep/awake classes below paint it. */
+  background: var(--surface);
+  color: var(--text);
   align-items: center;
   gap: 6px;
   margin-right: auto; /* pin left; the flexible gap sits between it and the day controls */