@nomideusz/svelte-calendar 1.2.0 → 1.4.0

package/dist/views/agenda/AgendaWeek.svelte

@@ -164,9 +164,11 @@ const weekDays = $derived.by(() => {
 		out.push({
 			ms,
 			dayName: weekdayLong(ms, locale),
-			dateLabel: `${monthLong(ms, locale)} ${dayNum(ms)}`,
+			month: monthLong(ms, locale),
+			num: dayNum(ms),
 			tier,
-			isToday: ms === todayMs,
+			// A dateless weekly template (showDates=false) has no today to mark.
+			isToday: showDates && ms === todayMs,
 			events: dayEvts,
 			allDayEvents: allDayEvts,
 			timedEvents: timedEvts,
@@ -198,7 +200,7 @@ const weekDays = $derived.by(() => {
 		class:ag-card--tentative={ev.status === 'tentative'}
 		class:ag-card--full={ev.status === 'full'}
 		class:ag-card--limited={ev.status === 'limited'}
-		style:--ev-color={ev.color || 'var(--dt-accent)'}
+		style:--ev-color={ev.color || 'var(--dt-event, var(--dt-accent))'}
 		aria-label="{ev.title}{statusText(ev)}, {fmt(ev.start)} – {fmt(ev.end)}, {duration(ev)}"
 		class:ag-card--drag={dragId === String(ev.id)}
 		draggable={canDrag(ev)}
@@ -210,12 +212,6 @@ const weekDays = $derived.by(() => {
 		<div class="ag-card-body">
 			<EventContent event={ev}>
 			<span class="ag-card-title">{ev.title}</span>
-			{#if ev.subtitle}
-				<span class="ag-card-sub">{ev.subtitle}</span>
-			{/if}
-			{#if ev.location}
-				<span class="ag-card-loc">{ev.location}</span>
-			{/if}
 			<span class="ag-card-meta">
 				{#if isNow}
 					{L.until} {fmt(ev.end)}
@@ -227,6 +223,12 @@ const weekDays = $derived.by(() => {
 					<span class="ag-card-eta">{eta}</span>
 				{/if}
 			</span>
+			{#if ev.subtitle}
+				<span class="ag-card-sub">{ev.subtitle}</span>
+			{/if}
+			{#if ev.location}
+				<span class="ag-card-loc">{ev.location}</span>
+			{/if}
 			{#if ev.tags?.length}
 				<div class="ag-card-tags">
 					{#each ev.tags as tag}
@@ -255,7 +257,7 @@ const weekDays = $derived.by(() => {
 		class:ag-compact--tentative={ev.status === 'tentative'}
 		class:ag-compact--full={ev.status === 'full'}
 		class:ag-compact--limited={ev.status === 'limited'}
-		style:--ev-color={ev.color || 'var(--dt-accent)'}
+		style:--ev-color={ev.color || 'var(--dt-event, var(--dt-accent))'}
 		aria-label="{ev.title}{statusText(ev)}{done ? `, ${L.completed}` : ''}, {fmt(ev.start)}, {duration(ev)}"
 		onclick={() => handleClick(ev)}
 		onpointerenter={() => oneventhover?.(ev)}
@@ -326,8 +328,9 @@ const weekDays = $derived.by(() => {
 						onkeydown={ondayclick ? (e) => dayKeydown(e, day.ms) : undefined}
 					>
 						<div class="ag-wday-head-left">
+							{#if showDates}<span class="ag-wday-num">{day.num}</span>{/if}
 							<span class="ag-wday-name">{day.dayName}</span>
-							{#if showDates}<span class="ag-wday-date">{day.dateLabel}</span>{/if}
+							{#if showDates}<span class="ag-wday-date">{day.month}</span>{/if}
 						</div>
 						{#if dayHeaderSnippet}
 							<div class="ag-wday-custom-header">
@@ -382,13 +385,14 @@ const weekDays = $derived.by(() => {
 					onkeydown={ondayclick ? (e) => dayKeydown(e, day.ms) : undefined}
 				>
 					<div class="ag-wday-head-left">
+						{#if showDates}<span class="ag-wday-num">{day.num}</span>{/if}
 						{#if day.isToday}
-						<span class="ag-wday-badge">{L.today}</span>
-					{:else if day.tier === 'tomorrow'}
-						<span class="ag-wday-badge ag-wday-badge--muted">{L.tomorrow}</span>
+							<span class="ag-wday-badge">{L.today}</span>
+						{:else if showDates && day.tier === 'tomorrow'}
+							<span class="ag-wday-badge ag-wday-badge--muted">{L.tomorrow}</span>
 						{/if}
 						<span class="ag-wday-name">{day.dayName}</span>
-						{#if showDates}<span class="ag-wday-date">{day.dateLabel}</span>{/if}
+						{#if showDates}<span class="ag-wday-date">{day.month}</span>{/if}
 					</div>
 					{#if dayHeaderSnippet}
 						<div class="ag-wday-custom-header">
@@ -526,7 +530,7 @@ const weekDays = $derived.by(() => {
 		width: 100%;
 		min-width: 0;
 		box-sizing: border-box;
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 		font-family: var(--dt-sans, system-ui, sans-serif);
 	}
 	.ag--auto {
@@ -589,8 +593,8 @@ const weekDays = $derived.by(() => {
 	.ag-allday-chip {
 		display: flex;
 		align-items: center;
-		gap: 4px;
-		padding: 2px 8px;
+		gap: 6px;
+		padding: 4px 10px;
 		border-radius: 0;
 		border: none;
 		background: var(--ev-color);
@@ -603,7 +607,7 @@ const weekDays = $derived.by(() => {
 	}
 	.ag-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);
 	}
 	.ag-allday-chip--selected {
 		box-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff);
@@ -612,15 +616,14 @@ const weekDays = $derived.by(() => {
 		display: none;
 	}
 	.ag-allday-title {
-		font: 500 0.7rem/1.2 var(--dt-sans, system-ui, sans-serif);
+		font: 500 13.5px/1.2 var(--dt-sans, system-ui, sans-serif);
 		color: inherit;
 		white-space: nowrap;
 	}
 	.ag-allday-span {
-		font: 500 10px/1.2 var(--dt-sans, system-ui, sans-serif);
+		font: 400 12.5px/1.2 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
 		color: inherit;
-		opacity: 0.8;
 		white-space: nowrap;
 	}
 
@@ -630,11 +633,14 @@ const weekDays = $derived.by(() => {
 	.ag-card {
 		position: relative;
 		display: flex;
+		/* A <button> shrinks to its content; the NOW card sits outside the
+		   stretching slot column, so it claims the row explicitly. */
+		width: 100%;
 		align-items: stretch;
 		border-radius: 0;
 		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));
 		overflow: hidden;
 		cursor: pointer;
 		transition: background 150ms, box-shadow 150ms;
@@ -650,18 +656,18 @@ const weekDays = $derived.by(() => {
 	}
 	.ag-card:hover,
 	.ag-card:active {
-		background: var(--dt-hover, rgba(0, 0, 0, 0.04));
+		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.ag-card:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
 	}
 	.ag-card--selected {
 		box-shadow: inset 0 0 0 1px var(--ev-color);
 	}
 	.ag-card--cancelled .ag-card-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));
 	}
 	.ag-card--cancelled::before,
 	.ag-card--full::before {
@@ -670,25 +676,26 @@ const weekDays = $derived.by(() => {
 	.ag-card--tentative .ag-card-title,
 	.ag-card--limited .ag-card-title,
 	.ag-card--full .ag-card-title {
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 	.ag-card--tentative::before,
 	.ag-card--limited::before {
 		background: repeating-linear-gradient(180deg, var(--ev-color) 0 4px, transparent 4px 7px);
 	}
+	/* Planner scale: title 15/500, time 14 tabular in ink, meta 12.5 in ink-2.
+	   The body keeps a reading measure so meta never drifts across a wide row. */
 	.ag-card-body {
-		padding: 7px 10px 7px 13px;
+		padding: 8px 10px 8px 13px;
 		display: flex;
 		flex-direction: column;
-		gap: 2px;
+		gap: 3px;
 		min-width: 0;
+		max-width: 44rem;
 		flex: 1;
 	}
 	.ag-card-title {
-		font-size: 13px;
-		font-weight: 500;
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
-		line-height: 1.3;
+		font: 500 15px/1.25 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 		word-break: break-word;
 		flex: 1;
 		min-width: 0;
@@ -700,53 +707,34 @@ const weekDays = $derived.by(() => {
 	}
 	.ag-card-meta {
 		display: flex;
-		align-items: center;
-		font-size: 11px;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
-		font-family: var(--dt-sans, system-ui, sans-serif);
+		align-items: baseline;
+		flex-wrap: wrap;
+		column-gap: 8px;
+		row-gap: 2px;
+		font: 400 14px/1.2 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		line-height: 1;
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 	}
-	.ag-card-dur {
-		margin-left: 6px;
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
-	}
-	.ag-card-eta {
-		margin-left: auto;
-		font-size: 11px;
-		font-weight: 500;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
-		letter-spacing: 0.02em;
-	}
-	.ag-card-sub {
-		font-size: 11px;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
-		line-height: 1;
-	}
-	.ag-card-loc {
-		font-size: 10px;
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
-		line-height: 1;
+	.ag-card-dur,
+	.ag-card-eta,
+	.ag-card-sub,
+	.ag-card-loc,
+	.ag-card-tag {
+		font: 400 12.5px/1.2 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 	}
 	.ag-card-tags {
 		display: flex;
-		gap: 4px;
+		column-gap: 10px;
+		row-gap: 2px;
 		flex-wrap: wrap;
 	}
 	.ag-card-tag {
-		font: 500 10.5px / 1 var(--dt-sans, system-ui, sans-serif);
-		text-transform: uppercase;
-		letter-spacing: 0.04em;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
-		background: transparent;
-		border: 1px solid var(--dt-border-day, rgba(0, 0, 0, 0.6));
-		padding: 2px 5px;
-		border-radius: 0;
 		white-space: nowrap;
 	}
 	.ag-card-progress {
 		height: 3px;
-		background: var(--dt-border, rgba(0, 0, 0, 0.08));
+		background: var(--dt-border, rgba(15, 15, 15, 0.08));
 		border-radius: 0;
 		overflow: hidden;
 		margin-top: 2px;
@@ -767,21 +755,17 @@ const weekDays = $derived.by(() => {
 
 	/* ═══ Week day groups ═══ */
 	.ag-wday {
-		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));
 	}
 	.ag-wday:last-child {
 		border-bottom: none;
 	}
 	.ag-wday--today {
-		background: color-mix(in srgb, var(--dt-accent, #2563eb) 2%, transparent);
-	}
-	.ag-wday--tomorrow .ag-card {
-		opacity: 0.82;
+		background: color-mix(in srgb, var(--dt-accent, #1d4fd7) 2%, transparent);
 	}
-	/* Past days: token-based text dim instead of subtree opacity (readability) */
-	.ag-wday--past .ag-wday-name {
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
-		font-weight: 500;
+	/* Past days: quieter ink from the text tokens, no subtree opacity */
+	.ag-wday--past .ag-wday-num {
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 	}
 	.ag-wday--past .ag-wday-head {
 		padding: 8px 20px 2px;
@@ -797,8 +781,8 @@ const weekDays = $derived.by(() => {
 			135deg,
 			transparent,
 			transparent 4px,
-			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 8%, transparent) 4px,
-			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 8%, transparent) 8px
+			color-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 8%, transparent) 4px,
+			color-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 8%, transparent) 8px
 		);
 		pointer-events: none;
 	}
@@ -812,7 +796,7 @@ const weekDays = $derived.by(() => {
 	}
 	.ag-wday-head--click:focus-visible,
 	.ag-wday-empty--click:focus-visible {
-		outline: 2px solid var(--dt-accent, #2563eb);
+		outline: 2px solid var(--dt-accent, #1d4fd7);
 		outline-offset: -2px;
 		border-radius: 4px;
 	}
@@ -823,7 +807,7 @@ const weekDays = $derived.by(() => {
 		padding: 8px 20px;
 		position: sticky;
 		top: 0;
-		background: var(--dt-bg, #fff);
+		background: var(--dt-bg, #efebe9);
 		z-index: 1;
 		/* Own compositor layer: without it, fast (async) scrolling repaints
 		   the pinned header a frame late and a gap flashes above it. */
@@ -835,34 +819,40 @@ const weekDays = $derived.by(() => {
 		align-items: baseline;
 		gap: 8px;
 	}
-	.ag-wday-badge {
-		font-size: 10px;
-		font-weight: 500;
+	/* The planner's header type: the day number is the typography (40/400,
+	   narrowed), the weekday a tracked 12/500 label; today takes the accent. */
+	.ag-wday-num {
+		font: 400 40px/1 var(--dt-sans, system-ui, sans-serif);
+		font-stretch: 90%;
+		letter-spacing: -0.02em;
+		font-variant-numeric: tabular-nums;
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
+		margin-inline-end: 4px;
+	}
+	.ag-wday-badge,
+	.ag-wday-name {
+		font: 500 12px/1 var(--dt-sans, system-ui, sans-serif);
 		letter-spacing: 0.08em;
 		text-transform: uppercase;
-		color: var(--dt-accent, #2563eb);
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 	}
-	.ag-wday-badge--muted {
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+	.ag-wday--today .ag-wday-num,
+	.ag-wday--today .ag-wday-name,
+	.ag-wday-badge {
+		color: var(--dt-accent, #1d4fd7);
 	}
-	.ag-wday-name {
-		font-size: 13px;
-		font-weight: 600;
-		line-height: 1.2;
+	.ag-wday .ag-wday-badge--muted {
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 	}
 	.ag-wday-date {
-		font-size: 11px;
-		font-family: var(--dt-sans, system-ui, sans-serif);
-		font-variant-numeric: tabular-nums;
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
-		line-height: 1.2;
+		font: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 	}
 
 	.ag-wday-empty {
-		padding: 2px 20px 6px;
-		font-size: 11px;
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
-		font-style: italic;
+		padding: 2px 20px 8px;
+		font-size: 12.5px;
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 	}
 
 	/* Expanded day */
@@ -879,11 +869,10 @@ const weekDays = $derived.by(() => {
 		padding: 2px 0;
 	}
 	.ag-wslot-now {
-		font-size: 10px;
-		font-weight: 700;
+		font: 500 12px/1.2 var(--dt-sans, system-ui, sans-serif);
 		letter-spacing: 0.08em;
 		text-transform: uppercase;
-		color: var(--dt-accent, #2563eb);
+		color: var(--dt-accent, #1d4fd7);
 	}
 	.ag-wslot-cards {
 		display: flex;
@@ -896,8 +885,8 @@ const weekDays = $derived.by(() => {
 		gap: 4px;
 	}
 	.ag-wday-past-line {
-		font-size: 11px;
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+		font-size: 12.5px;
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 		padding: 6px 0 0;
 	}
 	.ag-wday-past-line--summary {
@@ -915,11 +904,11 @@ const weekDays = $derived.by(() => {
 	}
 	.ag-past-toggle:hover,
 	.ag-past-toggle:active {
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 	}
 	.ag-past-toggle:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
 		border-radius: 4px;
 	}
 	.ag-past-chevron {
@@ -931,14 +920,14 @@ const weekDays = $derived.by(() => {
 	@media (prefers-reduced-motion: reduce) {
 		.ag-past-chevron { transition: none; }
 	}
-	/* Revealed completed events: dim + strike, single token layer */
-	.ag-compact--done .ag-compact-title {
-		text-decoration: line-through;
-		text-decoration-color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
-	}
+	/* Revealed completed events: quieter ink (single token layer). Strikethrough
+	   is kept for cancelled only, so "done" and "called off" never read alike. */
+	.ag-compact--done .ag-compact-title,
 	.ag-compact--done .ag-compact-time {
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
-		font-weight: 400;
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
+	}
+	.ag-compact--done::before {
+		opacity: 0.45;
 	}
 
 	/* Compact day events */
@@ -950,9 +939,9 @@ const weekDays = $derived.by(() => {
 		position: relative;
 		display: flex;
 		align-items: baseline;
-		gap: 6px;
-		padding: 3px 0 3px 9px;
-		border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.3));
+		gap: 10px;
+		padding: 5px 0 5px 11px;
+		border-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));
 		cursor: pointer;
 		min-width: 0;
 		width: 100%;
@@ -975,33 +964,33 @@ const weekDays = $derived.by(() => {
 	}
 	.ag-compact:hover,
 	.ag-compact:active {
-		background: var(--dt-hover, rgba(0, 0, 0, 0.04));
+		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.ag-compact:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
 	}
 	.ag-compact-time {
-		font-size: 11px;
-		font-family: var(--dt-sans, system-ui, sans-serif);
+		font: 400 14px/1.3 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		font-weight: 400;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
-		min-width: 40px;
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
+		min-width: 4.4em;
 		flex-shrink: 0;
 		white-space: nowrap;
-		line-height: 1.4;
 	}
-	/* Title + location + subtitle + tags cluster. One line while it fits; on
-	   mobile the metadata wraps to a second line instead of crushing the title. */
+	/* Title + location + subtitle + tags cluster, sized to its content so the
+	   meta and duration sit beside the title instead of across a wide row.
+	   One line while it fits; on mobile the metadata wraps to a second line
+	   instead of crushing the title. */
 	.ag-compact-main {
 		display: flex;
 		align-items: baseline;
-		gap: 6px;
-		flex: 1;
+		gap: 10px;
+		flex: 0 1 auto;
 		min-width: 0;
 	}
 	.ag--mobile .ag-compact-main {
+		flex: 1;
 		flex-wrap: wrap;
 		row-gap: 2px;
 	}
@@ -1018,52 +1007,46 @@ const weekDays = $derived.by(() => {
 		max-width: 100%;
 	}
 	.ag-compact-title {
-		font-size: 12px;
-		font-weight: 500;
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
-		flex: 1;
+		font: 500 15px/1.3 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
+		flex: 0 1 auto;
 		/* The title is the row's identity — never let subtitle/tags/duration
 		   squeeze it out on narrow screens (min-width: 0 resolves to 0px). */
-		min-width: 35%;
+		min-width: 6em;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		transition: color 150ms;
-		line-height: 1.4;
+	}
+	.ag-compact-dur,
+	.ag-compact-sub,
+	.ag-compact-loc,
+	.ag-compact-tag {
+		font: 400 12.5px/1.3 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
+		white-space: nowrap;
 	}
 	.ag-compact-dur {
-		font-size: 10px;
-		font-family: var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 		flex-shrink: 0;
-		white-space: nowrap;
-		line-height: 1.4;
 	}
 	.ag-compact-sub {
-		font-size: 10px;
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 		flex-shrink: 3;
 		min-width: 0;
-		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		max-width: 120px;
-		line-height: 1.4;
+		max-width: 160px;
 	}
 	.ag-compact-loc {
-		font-size: 10px;
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 		flex-shrink: 3;
 		min-width: 0;
-		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		max-width: 100px;
+		max-width: 140px;
 	}
 	.ag-compact--cancelled .ag-compact-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));
 	}
 	.ag-compact--cancelled::before,
 	.ag-compact--full::before {
@@ -1072,42 +1055,33 @@ const weekDays = $derived.by(() => {
 	.ag-compact--tentative .ag-compact-title,
 	.ag-compact--limited .ag-compact-title,
 	.ag-compact--full .ag-compact-title {
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 	.ag-compact--tentative::before,
 	.ag-compact--limited::before {
 		background: repeating-linear-gradient(180deg, var(--ev-color) 0 4px, transparent 4px 7px);
 	}
 	.ag-compact-tag {
-		font: 500 10.5px / 1 var(--dt-sans, system-ui, sans-serif);
-		text-transform: uppercase;
-		letter-spacing: 0.04em;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
-		background: transparent;
-		border: 1px solid var(--dt-border-day, rgba(0, 0, 0, 0.6));
-		padding: 1px 4px;
-		border-radius: 0;
-		white-space: nowrap;
 		flex-shrink: 1;
 		min-width: 2.5em;
-		max-width: 80px;
+		max-width: 120px;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
 	.ag-compact-more {
-		font-size: 11px;
-		color: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 72%, transparent);
-		padding: 2px 0 0 13px;
+		font-size: 12.5px;
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
+		padding: 4px 0 0 11px;
 		cursor: pointer;
 		display: block;
 	}
 	.ag-compact-more:hover,
 	.ag-compact-more:active {
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 	}
 	.ag-compact-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);
 		border-radius: 0;
 	}
 
@@ -1116,8 +1090,8 @@ const weekDays = $derived.by(() => {
 		opacity: 0.4;
 	}
 	.ag-wday--drop {
-		background: var(--dt-hover, rgba(0, 0, 0, 0.04));
-		box-shadow: inset 0 0 0 1px var(--dt-accent, #2563eb);
+		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
+		box-shadow: inset 0 0 0 1px var(--dt-accent, #1d4fd7);
 	}
 
 	/* ═══ Timetable columns (desktop) ═══ */
@@ -1128,7 +1102,7 @@ const weekDays = $derived.by(() => {
 	/* Columns stretch to the tallest day, so the separator runs full height */
 	.ag--cols .ag-wday {
 		border-bottom: none;
-		border-inline-start: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		border-inline-start: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));
 		min-width: 0;
 	}
 	.ag--cols .ag-wday:first-child {
@@ -1181,67 +1155,16 @@ const weekDays = $derived.by(() => {
 	.ag--mobile .ag-wday-compact {
 		padding: 0 16px 12px;
 	}
+	/* Type is already on the planner scale; phones only get bigger targets. */
 	.ag--mobile .ag-card-body {
 		padding: 12px 14px;
 	}
-	.ag--mobile .ag-card-title {
-		font-size: 15px;
-	}
-	.ag--mobile .ag-card-meta {
-		font-size: 12px;
-	}
-	.ag--mobile .ag-card-sub {
-		font-size: 12px;
-	}
-	.ag--mobile .ag-card-loc {
-		font-size: 12px;
-	}
-	.ag--mobile .ag-card-eta {
-		font-size: 12px;
-	}
-	.ag--mobile .ag-card-tag {
-		font-size: 11px;
-	}
 	.ag--mobile .ag-compact {
-		padding: 8px 0;
-	}
-	.ag--mobile .ag-compact-title {
-		font-size: 15px;
-	}
-	.ag--mobile .ag-compact-time {
-		font-size: 12px;
-	}
-	.ag--mobile .ag-compact-dur {
-		font-size: 12px;
-	}
-	.ag--mobile .ag-compact-sub {
-		font-size: 12px;
-	}
-	.ag--mobile .ag-compact-loc {
-		font-size: 11px;
-	}
-	.ag--mobile .ag-compact-tag {
-		font-size: 11px;
+		padding: 8px 0 8px 11px;
 	}
 	.ag--mobile .ag-compact-more {
-		font-size: 12px;
 		padding-top: 6px;
 	}
-	.ag--mobile .ag-allday-span {
-		font-size: 11px;
-	}
-	.ag--mobile .ag-wday-badge {
-		font-size: 11px;
-	}
-	.ag--mobile .ag-wslot-now {
-		font-size: 11px;
-	}
-	.ag--mobile .ag-wday-empty {
-		font-size: 12px;
-	}
-	.ag--mobile .ag-wday-past-line {
-		font-size: 12px;
-	}
 	.ag--mobile .ag-wslot-cards--multi {
 		grid-template-columns: 1fr;
 	}