@nomideusz/svelte-calendar 1.2.0 → 1.4.0

package/dist/views/mobile/MobileDay.svelte

@@ -12,6 +12,7 @@ import { createClock } from "../../core/clock.svelte.js";
 import { HOUR_MS, sod, addDaysMs, diffDays, isAllDay, segmentForDay } from "../../core/time.js";
 import { fmtHParts, fmtTime } from "../../core/locale.js";
 import { createSwipe } from "./swipe.js";
+import { dateLong } from "../shared/format.js";
 let { height = null, events = [], style = "", locale, focusDate, oneventclick, oneventcreate, selectedEventId = null, readOnly = false, visibleHours } = $props();
 // ── Context ────────────────────────────────────────
 const ctx = useCalendarContext();
@@ -475,7 +476,7 @@ $effect(() => {
 	style={style || undefined}
 	style:height={autoHeight ? undefined : (height ? `${height}px` : '100%')}
 	role="region"
-	aria-label={L.dayPlanner}
+	aria-label="{L.dayPlanner}, {dateLong(dayMs, locale)}"
 	ontouchstart={swipe.ontouchstart}
 	ontouchmove={swipe.ontouchmove}
 	ontouchend={swipe.ontouchend}
@@ -580,7 +581,7 @@ $effect(() => {
 						style:height="{p.height}px"
 						style:left={p.left}
 						style:width={p.width}
-						style:--ev-color={p.ev.color ?? 'var(--dt-accent)'}
+						style:--ev-color={p.ev.color ?? 'var(--dt-event, var(--dt-accent))'}
 						onclick={(e) => { e.stopPropagation(); if (suppressEventClick) { suppressEventClick = false; return; } oneventclick?.(p.ev); }}
 						onpointerenter={() => oneventhover?.(p.ev)}
 						aria-label="{p.ev.title}{statusText(p.ev)}, {fmtTime(p.ev.start, locale)} – {fmtTime(p.ev.end, locale)}{p.isCurrent ? `, ${L.inProgress}` : ''}{p.isNext ? `, ${L.upNext}` : ''}"
@@ -588,11 +589,11 @@ $effect(() => {
 						<div class="mb-ev-stripe"></div>
 						<div class="mb-ev-body">
 							<EventContent event={p.ev}>
-							<!-- Line thresholds must track real content height (title 18 +
-							     time 13 + sub 14 + loc 12 + tags 19 + padding 8) — showing
+							<!-- Line thresholds must track real content height (title 19 +
+							     time 14 + sub 14 + loc 13 + tags 19 + padding 8) — showing
 							     a line the block can't hold clips text at both ends. -->
 							<span class="mb-ev-title">{p.ev.title}</span>
-							{#if p.height > 32}
+							{#if p.height > 36}
 								<span class="mb-ev-time">{fmtTime(p.ev.start, locale)} – {fmtTime(p.ev.end, locale)}</span>
 							{/if}
 							{#if p.ev.subtitle && p.height > 56}
@@ -670,7 +671,7 @@ $effect(() => {
 		user-select: none;
 		font-variant-numeric: tabular-nums;
 		overflow: hidden;
-		background: var(--dt-bg, #fff);
+		background: var(--dt-bg, #efebe9);
 		-webkit-tap-highlight-color: transparent;
 		touch-action: pan-y pinch-zoom;
 	}
@@ -698,7 +699,7 @@ $effect(() => {
 		padding: 4px 8px;
 		overflow-x: auto;
 		scrollbar-width: none;
-		border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		border-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));
 		flex-shrink: 0;
 		align-items: center;
 	}
@@ -744,7 +745,7 @@ $effect(() => {
 	}
 	.mb-allday-chip:focus-visible {
 		outline: none;
-		box-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff), 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff), 0 0 0 2px var(--dt-accent, #1d4fd7);
 	}
 
 	/* The band is the colour; no dot. */
@@ -753,7 +754,7 @@ $effect(() => {
 	}
 
 	.mb-allday-title {
-		font: 500 12px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 500 13.5px/1 var(--dt-sans, system-ui, sans-serif);
 		color: inherit;
 		white-space: nowrap;
 		max-width: 100px;
@@ -762,15 +763,15 @@ $effect(() => {
 	}
 
 	.mb-allday-span {
-		font: 400 11px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
 		color: inherit;
 		opacity: 0.75;
 	}
 
 	.mb-allday-more {
-		font: 500 12px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		font: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 		white-space: nowrap;
 		flex-shrink: 0;
 		padding: 0 6px;
@@ -792,7 +793,7 @@ $effect(() => {
 	}
 	.mb-allday-more:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
 	}
 
 	/* ─── Grid ───────────────────────────────────────── */
@@ -803,14 +804,14 @@ $effect(() => {
 		overscroll-behavior: contain;
 		-webkit-overflow-scrolling: touch;
 		scrollbar-width: thin;
-		scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.1)) transparent;
+		scrollbar-color: var(--dt-scrollbar, rgba(15, 15, 15, 0.1)) transparent;
 		position: relative;
 		padding-top: 8px;
 	}
 	.mb--auto .mb-grid { overflow-y: visible; }
 	.mb-grid:focus-visible {
 		outline: none;
-		box-shadow: inset 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: inset 0 0 0 2px var(--dt-accent, #1d4fd7);
 	}
 
 	.mb-grid-inner {
@@ -830,7 +831,7 @@ $effect(() => {
 	}
 	.mb-empty-text {
 		font: 500 13px/1.4 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 
 	/* ─── Hour row ───────────────────────────────────── */
@@ -846,12 +847,12 @@ $effect(() => {
 		visibility: hidden;
 	}
 	.mb-hour-label small {
-		font-size: 9px;
-		font-weight: 600;
+		font-size: 10px;
+		font-weight: 500;
 		vertical-align: top;
 		margin-left: 1px;
 		letter-spacing: 0;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 	.mb-hour-label {
 		width: 40px;
@@ -859,11 +860,11 @@ $effect(() => {
 		   start at — content-box pushed digits flush under the event edge */
 		box-sizing: border-box;
 		flex-shrink: 0;
-		font: 700 15px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 400 15px/1 var(--dt-sans, system-ui, sans-serif);
 		font-stretch: 90%;
 		font-variant-numeric: tabular-nums;
 		letter-spacing: -0.02em;
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 		text-align: right;
 		padding-right: 8px;
 		padding-top: 0;
@@ -874,14 +875,14 @@ $effect(() => {
 	.mb-hour-line {
 		flex: 1;
 		height: 1px;
-		background: var(--dt-border, rgba(0, 0, 0, 0.08));
+		background: var(--dt-border, rgba(15, 15, 15, 0.08));
 	}
 
 	.mb-hour--blocked {
 		background: repeating-linear-gradient(
 			-45deg,
-			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 3%, transparent),
-			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 3%, transparent) 4px,
+			color-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 3%, transparent),
+			color-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 3%, transparent) 4px,
 			transparent 4px,
 			transparent 8px
 		);
@@ -892,18 +893,20 @@ $effect(() => {
 		left: 44px;
 		top: 50%;
 		transform: translateY(-50%);
-		font: 500 10px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		font: 500 11px/1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 		text-transform: uppercase;
 		letter-spacing: 0.04em;
 	}
 
 	/* ─── Now line ───────────────────────────────────── */
+	/* No stacking context of its own: the plate and the dot sit above the
+	   events, the line under them (the event it crosses is opaque), so the
+	   line never strikes through a title. */
 	.mb-now {
 		position: absolute;
 		left: 0;
 		right: 0;
-		z-index: 10;
 		display: flex;
 		align-items: center;
 		pointer-events: none;
@@ -911,18 +914,32 @@ $effect(() => {
 
 	/* The clock is a reversed plate on the accent, as in the desktop gutter. */
 	.mb-now-label {
+		position: relative;
+		z-index: 10;
 		width: 40px;
 		box-sizing: border-box;
 		flex-shrink: 0;
 		padding: 0 4px 0 0;
 		text-align: right;
+		white-space: nowrap;
+	}
+	.mb-now-label::after {
+		content: '';
+		position: absolute;
+		right: -4px;
+		top: 50%;
+		width: 8px;
+		height: 8px;
+		margin-top: -4px;
+		border-radius: 50%;
+		background: var(--dt-accent, #1d4fd7);
 	}
 	.mb-now-label span {
 		display: inline-block;
 		padding: 2px 3px;
 		border-radius: 0;
-		background: var(--dt-accent, #2563eb);
-		font: 700 10px/1.2 var(--dt-sans, system-ui, sans-serif);
+		background: var(--dt-accent, #1d4fd7);
+		font: 500 11px/1.2 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
 		color: var(--dt-btn-text, #ffffff);
 	}
@@ -930,20 +947,10 @@ $effect(() => {
 	.mb-now-line {
 		flex: 1;
 		height: 0;
-		border-top: 2px solid var(--dt-accent, #2563eb);
+		border-top: 2px solid var(--dt-accent, #1d4fd7);
 		box-shadow: none;
 		position: relative;
-	}
-
-	.mb-now-line::before {
-		content: '';
-		position: absolute;
-		left: -4px;
-		top: -4px;
-		width: 10px;
-		height: 10px;
-		border-radius: 50%;
-		background: var(--dt-accent, #2563eb);
+		z-index: 4;
 	}
 
 	/* ─── Events ─────────────────────────────────────── */
@@ -954,7 +961,7 @@ $effect(() => {
 		cursor: pointer;
 		background: transparent;
 		border: none;
-		border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.3));
+		border-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));
 		box-sizing: border-box;
 		display: flex;
 		align-items: stretch;
@@ -967,7 +974,7 @@ $effect(() => {
 	}
 	.mb-event:hover,
 	.mb-event:active {
-		background: var(--dt-hover, rgba(0, 0, 0, 0.04));
+		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	/* Short blocks keep their duration-proportional height, but get a 44px
 	   transparent hit-slop so taps still land. */
@@ -990,21 +997,33 @@ $effect(() => {
 	.mb-event--selected {
 		box-shadow: inset 0 0 0 1px var(--ev-color);
 	}
-	.mb-event--current {
-		background: var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
+	/* The event in progress is the one the now line crosses: its wash is
+	   laid over the paper, opaque, so the line runs beneath its text. */
+	.mb-event.mb-event--current {
+		background:
+			linear-gradient(var(--dt-accent-dim, rgba(29, 79, 215, 0.12)), var(--dt-accent-dim, rgba(29, 79, 215, 0.12))),
+			var(--dt-paper, none),
+			var(--dt-bg, #efebe9);
+	}
+	.mb-event.mb-event--current:hover,
+	.mb-event.mb-event--current:active {
+		background:
+			linear-gradient(var(--dt-hover, rgba(15, 15, 15, 0.04)), var(--dt-hover, rgba(15, 15, 15, 0.04))),
+			var(--dt-paper, none),
+			var(--dt-bg, #efebe9);
 	}
 	/* Printed states: a cancelled class is struck through; a tentative or
 	   limited one is set in grey with a dashed bar — never a bare opacity. */
 	.mb-event--cancelled .mb-ev-title {
 		text-decoration: line-through;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 	.mb-event--cancelled .mb-ev-stripe {
 		opacity: 0.45; /* decorative bar only */
 	}
 	.mb-event--tentative .mb-ev-title,
 	.mb-event--full .mb-ev-title {
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 	.mb-event--tentative .mb-ev-stripe,
 	.mb-event--limited .mb-ev-stripe {
@@ -1084,17 +1103,17 @@ $effect(() => {
 		right: 4px;
 		z-index: 40;
 		border-radius: 0;
-		background: color-mix(in srgb, var(--dt-accent, #2563eb) 12%, transparent);
-		border: 1px dashed color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
+		background: color-mix(in srgb, var(--dt-accent, #1d4fd7) 12%, transparent);
+		border: 1px dashed color-mix(in srgb, var(--dt-accent, #1d4fd7) 55%, transparent);
 		display: flex;
 		align-items: flex-start;
 		overflow: hidden;
 		pointer-events: none;
 	}
 	.mb-create-ghost-time {
-		font: 700 11px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 500 11px/1 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		color: var(--dt-accent, #2563eb);
+		color: var(--dt-accent, #1d4fd7);
 		padding: 4px 8px;
 		white-space: nowrap;
 	}
@@ -1118,29 +1137,29 @@ $effect(() => {
 
 	.mb-ev-title {
 		font: 500 15px/1.25 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
 
 	.mb-ev-time {
-		font: 400 12px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 400 14px/1 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 	}
 
 	.mb-ev-sub {
-		font: 400 12px/1.1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		font: 400 12.5px/1.1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
 
 	.mb-ev-loc {
-		font: 400 11px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		font: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -1178,7 +1197,7 @@ $effect(() => {
 		position: absolute;
 		top: 4px;
 		right: 4px;
-		font: 600 11px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 500 11px/1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--ev-color, var(--dt-accent));
 		background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 15%, transparent);
 		padding: 2px 5px;
@@ -1194,6 +1213,6 @@ $effect(() => {
 	/* ─── Focus ──────────────────────────────────────── */
 	.mb-event:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
 	}
 </style>

package/dist/views/mobile/MobileWeek.svelte

@@ -10,7 +10,8 @@ import EventContent from "../shared/EventContent.svelte";
 import { createClock } from "../../core/clock.svelte.js";
 import { sod, addDaysMs, isAllDay } from "../../core/time.js";
 import { startOfWeek as sowFn } from "../../core/time.js";
-import { fmtTime as _fmtTime, weekdayShort } from "../../core/locale.js";
+import { fmtTime as _fmtTime, fmtWeekRange, weekdayShort } from "../../core/locale.js";
+import { dateLong } from "../shared/format.js";
 import { createSwipe } from "./swipe.js";
 let { mondayStart = true, locale, height = null, events = [], style = "", focusDate, oneventclick, selectedEventId = null } = $props();
 // ── Context ────────────────────────────────────────
@@ -52,7 +53,8 @@ const dayCells = $derived.by(() => {
 		const jsDay = d.getDay();
 		const isoDay = jsDay === 0 ? 7 : jsDay;
 		if (hideSet.has(isoDay)) continue;
-		const isToday = ms === todayMs;
+		// A dateless weekly template (showDates=false) has no today to mark.
+		const isToday = showDates && ms === todayMs;
 		const isPast = equalDays ? false : ms < todayMs;
 		const isWeekend = jsDay === 0 || jsDay === 6;
 		const isDisabled = disabledSet.has(ms);
@@ -98,7 +100,9 @@ function evTimeLabel(ev) {
 /** Visible time on a day row: the start, or "until 01:00" on the day an
 *  overnight event runs into. */
 function evRowTime(ev, dayMs) {
-	if (inAllDayStrip(ev)) return L.allDay;
+	// A multi-day band says "All day" once, on its first row this week;
+	// every row's aria-label still says it.
+	if (inAllDayStrip(ev)) return dayCells.find((c) => c.events.includes(ev))?.ms === dayMs ? L.allDay : "";
 	if (ev.start.getTime() < dayMs) return `${L.until} ${fmtTime(ev.end)}`;
 	return fmtTime(ev.start);
 }
@@ -165,7 +169,9 @@ function handleDayKeydown(e, dayMs) {
 	style={style || undefined}
 	style:height={autoHeight ? undefined : (height ? `${height}px` : '100%')}
 	role="region"
-	aria-label={L.weekAhead}
+	aria-label="{L.weekAhead}{dayCells.length
+		? `, ${fmtWeekRange(dayCells[0].ms, locale, dayCells[dayCells.length - 1].ms)}`
+		: ''}"
 	ontouchstart={swipe.ontouchstart}
 	ontouchmove={swipe.ontouchmove}
 	ontouchend={swipe.ontouchend}
@@ -195,7 +201,7 @@ function handleDayKeydown(e, dayMs) {
 					disabled={cell.isDisabled}
 					onclick={() => handleDayTap(cell.ms)}
 					onkeydown={(e) => handleDayKeydown(e, cell.ms)}
-					aria-label="{cell.dayName} {cell.dayNum}{cell.isToday ? `, ${L.today}` : ''}"
+					aria-label="{dateLong(cell.ms, locale)}{cell.isToday ? `, ${L.today}` : ''}"
 				></button>
 				<!-- Date column -->
 				<div class="mw-date">
@@ -221,7 +227,7 @@ function handleDayKeydown(e, dayMs) {
 								class:mw-ev--tentative={ev.status === 'tentative'}
 								class:mw-ev--full={ev.status === 'full'}
 								class:mw-ev--limited={ev.status === 'limited'}
-								style:--ev-color={ev.color ?? 'var(--dt-accent)'}
+								style:--ev-color={ev.color ?? (inAllDayStrip(ev) ? 'var(--dt-accent)' : 'var(--dt-event, var(--dt-accent))')}
 								onclick={(e) => { e.stopPropagation(); oneventclick?.(ev); }}
 								onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); oneventclick?.(ev); } }}
 								onpointerenter={() => oneventhover?.(ev)}
@@ -265,7 +271,7 @@ function handleDayKeydown(e, dayMs) {
 		user-select: none;
 		font-variant-numeric: tabular-nums;
 		overflow: hidden;
-		background: var(--dt-bg, #fff);
+		background: var(--dt-bg, #efebe9);
 		-webkit-tap-highlight-color: transparent;
 		touch-action: pan-y pinch-zoom;
 	}
@@ -279,7 +285,7 @@ function handleDayKeydown(e, dayMs) {
 		overscroll-behavior: contain;
 		-webkit-overflow-scrolling: touch;
 		scrollbar-width: thin;
-		scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.1)) transparent;
+		scrollbar-color: var(--dt-scrollbar, rgba(15, 15, 15, 0.1)) transparent;
 	}
 	.mw--auto .mw-list { overflow-y: visible; }
 	.mw-list--animate {
@@ -305,33 +311,34 @@ function handleDayKeydown(e, dayMs) {
 		text-align: left;
 		width: 100%;
 		-webkit-tap-highlight-color: transparent;
-		border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		border-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));
 		min-height: 56px;
 	}
 	.mw-row:last-child {
 		border-bottom: none;
 	}
 	.mw-row:has(.mw-row-target:active) {
-		background: var(--dt-hover, rgba(0, 0, 0, 0.04));
+		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.mw-row--today {
-		background: color-mix(in srgb, var(--dt-accent, #2563eb) 4%, transparent);
+		background: color-mix(in srgb, var(--dt-accent, #1d4fd7) 4%, transparent);
 	}
 	/* Token-based dim (not subtree opacity) so past rows stay legible/tappable */
 	.mw-row--past {
-		background: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 3%, transparent);
+		background: color-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 3%, transparent);
 	}
 	.mw-row--past :global(.mw-ev-title),
+	.mw-row--past :global(.mw-ev-time),
 	.mw-row--past .mw-day-num {
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 	.mw-row--disabled {
 		background-image: repeating-linear-gradient(
 			135deg,
 			transparent,
 			transparent 6px,
-			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent) 6px,
-			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent) 12px
+			color-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent) 6px,
+			color-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent) 12px
 		);
 	}
 	.mw-row-target {
@@ -349,7 +356,7 @@ function handleDayKeydown(e, dayMs) {
 	}
 	.mw-row-target:focus-visible {
 		outline: none;
-		box-shadow: inset 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: inset 0 0 0 2px var(--dt-accent, #1d4fd7);
 	}
 
 	/* ─── Date column ────────────────────────────────── */
@@ -366,22 +373,25 @@ function handleDayKeydown(e, dayMs) {
 	}
 
 	.mw-day-name {
-		font: 600 11px/1 var(--dt-sans, system-ui, sans-serif);
-		letter-spacing: 0.06em;
+		font: 500 12px/1 var(--dt-sans, system-ui, sans-serif);
+		letter-spacing: 0.08em;
 		text-transform: uppercase;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 	.mw-day-name--today {
-		color: var(--dt-accent, #2563eb);
+		color: var(--dt-accent, #1d4fd7);
 	}
 
+	/* The date is the typography: large and regular, narrowed like the planner's */
 	.mw-day-num {
-		font: 700 18px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		font: 400 22px/1 var(--dt-sans, system-ui, sans-serif);
+		font-stretch: 90%;
+		font-variant-numeric: tabular-nums;
+		letter-spacing: -0.02em;
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 	}
 	.mw-day-num--today {
-		color: var(--dt-accent, #2563eb);
-		font-weight: 500;
+		color: var(--dt-accent, #1d4fd7);
 	}
 
 	/* ─── Events column ──────────────────────────────── */
@@ -400,7 +410,7 @@ function handleDayKeydown(e, dayMs) {
 
 	.mw-empty {
 		font: 400 13px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 
 	/* ─── Event chip ─────────────────────────────────── */
@@ -416,20 +426,20 @@ function handleDayKeydown(e, dayMs) {
 		transition: background 120ms;
 		-webkit-tap-highlight-color: transparent;
 		border: none;
-		border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.3));
+		border-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));
 		text-align: left;
 		padding: 0;
 		pointer-events: auto;
 	}
 	.mw-ev:hover,
 	.mw-ev:active {
-		background: var(--dt-hover, rgba(0, 0, 0, 0.04));
+		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.mw-ev--selected {
 		box-shadow: inset 0 0 0 1px var(--ev-color);
 	}
 	.mw-ev--current {
-		background: var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
+		background: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));
 	}
 	/* All day: a solid band on the event colour, no tint. */
 	.mw-ev--allday {
@@ -453,14 +463,14 @@ function handleDayKeydown(e, dayMs) {
 	   limited one is set in grey with a dashed bar — never a bare opacity. */
 	.mw-ev--cancelled .mw-ev-title {
 		text-decoration: line-through;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 	.mw-ev--cancelled .mw-ev-stripe {
 		opacity: 0.45; /* decorative bar only */
 	}
 	.mw-ev--tentative .mw-ev-title,
 	.mw-ev--full .mw-ev-title {
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 	.mw-ev--tentative .mw-ev-stripe,
 	.mw-ev--limited .mw-ev-stripe {
@@ -493,7 +503,7 @@ function handleDayKeydown(e, dayMs) {
 
 	.mw-ev-title {
 		font: 500 15px/1.25 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -502,16 +512,16 @@ function handleDayKeydown(e, dayMs) {
 	}
 
 	.mw-ev-time {
-		font: 400 12px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 400 14px/1 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 		white-space: nowrap;
 		flex-shrink: 0;
 	}
 
 	.mw-ev-more {
-		font: 500 12px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		font: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 		padding: 2px 4px;
 		min-height: 32px;
 		border: none;
@@ -535,13 +545,13 @@ function handleDayKeydown(e, dayMs) {
 	}
 	.mw-ev-more:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
 	}
 
 	/* ─── Chevron ────────────────────────────────────── */
 	.mw-chevron {
 		flex-shrink: 0;
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+		color: var(--dt-text-3, rgba(15, 15, 15, 0.38));
 		position: relative;
 		z-index: 1;
 		pointer-events: none;
@@ -550,6 +560,6 @@ function handleDayKeydown(e, dayMs) {
 	/* ─── Focus ──────────────────────────────────────── */
 	.mw-ev:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
 	}
 </style>