Fix Vespers/Compline header to use evening day, not daytime day

day-nav.ts's header always resolved via resolveDay(date) regardless of
selected hour, so viewing Vespers/Compline on a day whose evening
anticipates tomorrow's First Vespers (e.g. Aug 25, 2026: St. Louis's day,
but St. Zephyrinus claims First Vespers per calendar/vespers.ts) still
showed today's saint in the header while the hour's actual content had
already switched to tomorrow's. Now uses resolveEveningDay for those two
hours specifically.

Also adds an explicit "First Vespers (of tomorrow)" / "Second Vespers (of
today)" status line to the Vespers header, via new
getVespersStatusLabel(), so the anticipation/commemoration result is
visible rather than only inferable from which saint's name shows up.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014axryJBrRswYh2niA7WCUc

src/ui/day-nav.ts

@@ -1,6 +1,7 @@
 import { getState, shiftDate, goToToday, addDays, todayIso } from '../app-state';
 import { resolveDay } from '../calendar';
-import { getDayLabel } from '../calendar/day-label';
+import { resolveEveningDay } from '../calendar/vespers';
+import { getDayLabel, getVespersStatusLabel } from '../calendar/day-label';
 import { urlFor } from '../router';
 import { formatDateLong, renderBilingual } from './format';
 
@@ -8,14 +9,21 @@ import { formatDateLong, renderBilingual } from './format';
  * weekday and the liturgical day-being-celebrated, together in one place
  * — previously the date lived here while the day-being-celebrated text
  * was repeated separately inside every hour's own view. The day-being-
- * celebrated text is hour-independent (the same LiturgicalDay for every
- * hour on a given date), so it's resolved directly here via `resolveDay`
- * rather than through any particular hour's `resolveOrdo`. */
+ * celebrated text is hour-independent for the daytime hours (the same
+ * `LiturgicalDay` for every hour on a given date) but NOT for Vespers/
+ * Compline: those two can belong to *tomorrow's* identity instead (First
+ * Vespers anticipation — see `calendar/vespers.ts`'s `resolveEveningDay`),
+ * so this header must resolve through that function for those two hours
+ * specifically, or it shows the wrong saint (previously always used plain
+ * `resolveDay`, silently mismatched against what the hour itself was
+ * actually rendering). */
 export function renderDayNav(container: HTMLElement): void {
   const { date, selectedHour, languages } = getState();
-  const day = resolveDay(date);
+  const isEveningHour = selectedHour === 'vespers' || selectedHour === 'compline';
+  const day = isEveningHour ? resolveEveningDay(date) : resolveDay(date);
   const dateLabel = formatDateLong(date);
   const dayLabel = getDayLabel(day);
+  const vespersStatus = selectedHour === 'vespers' ? getVespersStatusLabel(day) : undefined;
   const prevUrl = urlFor(addDays(date, -1), selectedHour, languages);
   const nextUrl = urlFor(addDays(date, 1), selectedHour, languages);
   const todayUrl = urlFor(todayIso(), selectedHour, languages);
@@ -26,6 +34,7 @@ export function renderDayNav(container: HTMLElement): void {
       <div class="day-nav-header">
         ${renderBilingual(dateLabel, languages, 'day-nav-date')}
         ${renderBilingual(dayLabel, languages, 'day-nav-label')}
+        ${vespersStatus ? renderBilingual(vespersStatus, languages, 'day-nav-vespers-status') : ''}
       </div>
       <a href="${nextUrl}" class="day-nav-btn" data-action="next" aria-label="Next day">&rarr;</a>
     </nav>

src/ui/styles.css

@@ -185,6 +185,12 @@ button:focus-visible {
   color: var(--color-brass);
 }
 
+.day-nav-vespers-status {
+  font-family: var(--font-ui);
+  font-size: 0.75rem;
+  color: var(--color-muted, var(--color-brass));
+}
+
 /* --------------------------------------------------------------------------
    Layout: hour list + hour view
    -------------------------------------------------------------------------- */