Label the summary day

app/assets/stylesheets/events.css

@@ -90,20 +90,22 @@
     margin-block-start: calc(var(--events-day-header-height) / 2);
     position: relative;
     z-index: var(--z-events-day-header);
+  }
 
-    time {
-      align-items: center;
-      background-color: var(--color-ink);
-      block-size: var(--events-day-header-height);
-      border-radius: 0.2em;
-      display: flex;
-      inline-size: fit-content;
-      inset: 0 auto auto 50%;
-      margin-inline: auto;
-      padding-inline: 1.5ch;
-      position: absolute;
-      translate: -50% -50%;
-    }
+  .events__day-time {
+    align-items: center;
+    background-color: var(--color-ink);
+    block-size: var(--events-day-header-height);
+    border-radius: 0.2em;
+    color: var(--color-ink-inverted);
+    display: flex;
+    gap: 0.4ch;
+    inline-size: fit-content;
+    inset: 0 auto auto 50%;
+    margin-inline: auto;
+    padding-inline: 1.5ch;
+    position: absolute;
+    translate: -50% -50%;
   }
 
   .events__columns {

app/views/events/_day.html.erb

@@ -2,7 +2,10 @@
   data-related-element-highlight-class="event--related">
   <% if day_timeline.has_activity? %>
     <h2 class="events__day-header">
-      <%= local_datetime_tag day_timeline.day, style: :agoorweekday, class: "txt-reversed" %>
+      <span class="events__day-time">
+        <span>Summary for</span>
+        <%= local_datetime_tag day_timeline.day, style: :agoorweekday %>
+      </span>
     </h2>
 
     <%= render "events/day_timeline/summary", day_timeline: day_timeline if day_timeline.summarizable?%>