Make the timer pill bigger and put it first in the day bar

src/changelog.json

@@ -1,4 +1,5 @@
 [
+  { "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;
 }