Replace the big clock with a timer pill in the frozen day bar

The full-width asleep/awake card becomes a compact colored pill next to
the day controls: state emoji plus the live counter, with "since" moved
to the tooltip. One glance at the pinned bar now gives both the day and
the current state.

src/app.js

@@ -674,28 +674,27 @@
   let bigClockSince = 0;
 
   function renderBigClock(events) {
-    const card  = document.getElementById("big-clock");
-    const label = document.getElementById("bc-label");
-    const time  = document.getElementById("bc-time");
-    const since = document.getElementById("bc-since");
+    const pill = document.getElementById("bar-clock");
+    const icon = document.getElementById("bar-clock-icon");
+    const time = document.getElementById("bar-clock-time");
     const { state, since: ts } = currentSleepState(events);
     bigClockState = state;
     bigClockSince = ts;
     if (!state) {
-      card.hidden = true;
+      pill.hidden = true;
       return;
     }
-    card.hidden = false;
-    card.classList.toggle("asleep", state === "asleep");
-    card.classList.toggle("awake",  state === "awake");
-    label.textContent = state === "asleep" ? "Asleep for" : "Awake for";
+    pill.hidden = false;
+    pill.classList.toggle("asleep", state === "asleep");
+    pill.classList.toggle("awake",  state === "awake");
+    icon.textContent = state === "asleep" ? "😴" : "☀️";
+    pill.title = `${state === "asleep" ? "Asleep" : "Awake"} since ${formatTime(ts)}`;
     time.textContent = formatCounter(Date.now() - ts);
-    since.textContent = `since ${formatTime(ts)}`;
   }
 
   function tickBigClock() {
     if (!bigClockState) return;
-    const time = document.getElementById("bc-time");
+    const time = document.getElementById("bar-clock-time");
     if (time) time.textContent = formatCounter(Date.now() - bigClockSince);
   }
 

src/changelog.json

@@ -1,4 +1,5 @@
 [
+  { "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" },
   { "date": "2026-07-13", "text": "Attach multiple photos to an event — the photo picker now also offers the gallery with multi-select" },
   { "date": "2026-07-13", "text": "Track food by weight: logging a meal asks for grams (optional), with a daily total in the overview and a weekly chart" },

src/index.html

@@ -82,12 +82,12 @@
         <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 id="big-clock" class="big-clock" hidden>
-        <div class="bc-label" id="bc-label">—</div>
-        <div class="bc-time" id="bc-time">0:00</div>
-        <div class="bc-since" id="bc-since"></div>
+        <!-- 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>
       </section>
 
       <section class="quick-actions">

src/style.css

@@ -159,34 +159,20 @@ body::before {
   opacity: 0.4;
   cursor: not-allowed;
 }
-.big-clock {
-  text-align: center;
-  padding: 24px 16px;
-}
-.big-clock .bc-label {
-  font-size: 0.8rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--muted);
-  margin-bottom: 6px;
-}
-.big-clock .bc-time {
-  font-size: 3.25rem;
+.bar-clock {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 12px;
+  border-radius: 999px;
   font-weight: 700;
+  font-size: 0.9rem;
   font-variant-numeric: tabular-nums;
-  line-height: 1.05;
-  letter-spacing: -0.01em;
+  flex-shrink: 0;
 }
-.big-clock .bc-since {
-  margin-top: 6px;
-  font-size: 0.8rem;
-  color: var(--muted);
-  font-variant-numeric: tabular-nums;
-}
-.big-clock.asleep { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--sleep) 10%, var(--surface))); }
-.big-clock.asleep .bc-time { color: var(--sleep); }
-.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); }
+.bar-clock[hidden] { display: none; }
+.bar-clock.asleep { background: color-mix(in srgb, var(--sleep) 18%, var(--surface)); color: var(--sleep); }
+.bar-clock.awake  { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--accent); }
 
 .grid {
   display: grid;