Freeze the day picker at the top of the page

The day bar moves above everything else and sticks while scrolling, so
switching days never requires scrolling back up. A fixed strip painted
over the safe-area inset keeps content from peeking through above the
stuck bar on notched phones in standalone mode.

src/changelog.json

@@ -1,4 +1,5 @@
 [
+  { "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" },
   { "date": "2026-07-12", "text": "Browse the full changelog from the bottom of the page" },

src/index.html

@@ -77,6 +77,13 @@
     </header>
 
     <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>
+      </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>
@@ -107,13 +114,6 @@
         </div>
       </section>
 
-      <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>
-      </section>
-
       <section class="overview" data-panel="overview">
         <h2 id="overview-title">Today's overview</h2>
         <div class="stats">

src/style.css

@@ -122,15 +122,28 @@ section {
   padding: 16px;
 }
 
-.big-clock {
+/* Paints over the notch/status-bar strip so content scrolling behind the
-  text-align: center;
+   sticky day bar never peeks through above it. Zero-height where there is no
-  padding: 24px 16px;
+   safe-area inset. */
+body::before {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: env(safe-area-inset-top, 0px);
+  background: var(--bg);
+  z-index: 65;
 }
 
 .day-bar {
+  position: sticky;
+  top: env(safe-area-inset-top, 0px);
+  z-index: 60;
   display: flex;
   gap: 8px;
   align-items: center;
+  flex-wrap: wrap;
   padding: 8px 10px;
 }
 .day-bar input[type="date"] {
@@ -146,6 +159,10 @@ section {
   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;