@nomideusz/svelte-calendar 0.6.4 → 0.6.7

package/dist/views/agenda/AgendaDay.svelte

@@ -444,11 +444,11 @@
 		left: 50%;
 		transform: translateX(-50%);
 		z-index: 20;
-		font: 600 11px/1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		font: 600 11px/1 var(--dt-sans, system-ui, sans-serif);
 		letter-spacing: 0.04em;
 		text-transform: uppercase;
 		color: var(--dt-text, rgba(226, 232, 240, 0.85));
-		background: color-mix(in srgb, var(--dt-surface, #10141c) 85%, transparent);
+		background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
 		backdrop-filter: blur(6px);
 		-webkit-backdrop-filter: blur(6px);
 		padding: 8px 16px;
@@ -466,7 +466,7 @@
 		z-index: 20;
 		display: flex;
 		gap: 2px;
-		background: color-mix(in srgb, var(--dt-surface, #10141c) 85%, transparent);
+		background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
 		backdrop-filter: blur(6px);
 		-webkit-backdrop-filter: blur(6px);
 		border-radius: 8px;
@@ -478,7 +478,7 @@
 		background: transparent;
 		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
 		cursor: pointer;
-		font: 600 11px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		font: 600 11px / 1 var(--dt-sans, system-ui, sans-serif);
 		padding: 6px 12px;
 		border-radius: 6px;
 		letter-spacing: 0.04em;
@@ -505,7 +505,7 @@
 		pointer-events: none;
 	}
 	.ag-nav-pill:focus-visible {
-		outline: 2px solid color-mix(in srgb, var(--dt-accent, #ef4444) 55%, transparent);
+		outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
 		outline-offset: 2px;
 	}
 
@@ -527,8 +527,13 @@
 	.ag--auto { height: auto; overflow: visible; }
 
 	.ag--disabled {
-		opacity: 0.4;
-		pointer-events: none;
+		background-image: repeating-linear-gradient(
+			135deg,
+			transparent,
+			transparent 6px,
+			color-mix(in srgb, var(--dt-text, rgba(255, 255, 255, 0.92)) 4%, transparent) 6px,
+			color-mix(in srgb, var(--dt-text, rgba(255, 255, 255, 0.92)) 4%, transparent) 12px
+		);
 	}
 
 	/* ═══ Body ═══ */
@@ -581,22 +586,22 @@
 		gap: 5px;
 		padding: 3px 10px;
 		border-radius: 6px;
-		background: color-mix(in srgb, var(--ev-color) 12%, var(--dt-surface, #10141c));
+		background: color-mix(in srgb, var(--ev-color) 12%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		border: 1px solid color-mix(in srgb, var(--ev-color) 20%, transparent);
 		cursor: pointer;
 		transition: background 0.15s, border-color 0.15s;
 	}
 	.ag-allday-chip:hover {
-		background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, #10141c));
+		background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		border-color: color-mix(in srgb, var(--ev-color) 35%, transparent);
 	}
 	.ag-allday-chip:focus-visible {
-		outline: 2px solid var(--dt-accent, #ff6b4a);
+		outline: 2px solid var(--dt-accent, #2563eb);
 		outline-offset: 2px;
 	}
 	.ag-allday-chip--selected {
 		border-color: var(--ev-color);
-		background: color-mix(in srgb, var(--ev-color) 18%, var(--dt-surface, #10141c));
+		background: color-mix(in srgb, var(--ev-color) 18%, var(--dt-surface, var(--dt-bg, #ffffff)));
 	}
 	.ag-allday-dot {
 		width: 6px;
@@ -616,23 +621,23 @@
 		display: flex;
 		align-items: stretch;
 		border-radius: 10px;
-		background: color-mix(in srgb, var(--ev-color) 15%, var(--dt-surface, #191919));
+		background: color-mix(in srgb, var(--ev-color) 15%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		border: 1px solid color-mix(in srgb, var(--ev-color) 10%, var(--dt-border, rgba(255, 255, 255, 0.06)));
 		overflow: hidden;
 		cursor: pointer;
 		transition: background 150ms, border-color 150ms;
 	}
 	.ag-card:hover {
-		background: color-mix(in srgb, var(--ev-color) 25%, var(--dt-surface, #191919));
+		background: color-mix(in srgb, var(--ev-color) 25%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		border-color: color-mix(in srgb, var(--ev-color) 40%, transparent);
 	}
 	.ag-card:focus-visible {
-		outline: 2px solid var(--dt-accent, #ff6b4a);
+		outline: 2px solid var(--dt-accent, #2563eb);
 		outline-offset: 2px;
 	}
 	.ag-card--selected {
 		border-color: var(--ev-color);
-		background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, #191919));
+		background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, var(--dt-bg, #ffffff)));
 	}
 	.ag-card--cancelled {
 		opacity: 0.5;
@@ -724,12 +729,12 @@
 		font-size: 9px;
 		font-weight: 600;
 		letter-spacing: 0.04em;
-		color: var(--dt-accent, #ff6b4a);
+		color: var(--dt-accent, #2563eb);
 		flex-shrink: 0;
 		white-space: nowrap;
 	}
 	.ag-card--hero {
-		background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, #191919));
+		background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		border-color: color-mix(in srgb, var(--ev-color) 30%, transparent);
 	}
 	.ag-card--hero .ag-card-title {
@@ -738,7 +743,7 @@
 	}
 	.ag-card--hero .ag-card-eta {
 		font-size: 11px;
-		background: color-mix(in srgb, var(--dt-accent, #ff6b4a) 18%, transparent);
+		background: color-mix(in srgb, var(--dt-accent, #2563eb) 18%, transparent);
 		padding: 2px 7px;
 		border-radius: 4px;
 	}
@@ -766,7 +771,7 @@
 		font-size: 14px;
 	}
 	.ag-card--first {
-		background: color-mix(in srgb, var(--ev-color) 20%, var(--dt-surface, #191919));
+		background: color-mix(in srgb, var(--ev-color) 20%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		border-color: color-mix(in srgb, var(--ev-color) 25%, transparent);
 	}
 	.ag-card--first .ag-card-title {
@@ -876,24 +881,24 @@
 		font-size: 10px;
 		font-weight: 600;
 		font-family: var(--dt-mono, monospace);
-		color: var(--dt-accent, #ff6b4a);
+		color: var(--dt-accent, #2563eb);
 		margin-left: 4px;
 	}
 	.ag-q-now {
 		padding: 8px 10px;
 		border-radius: 8px;
-		background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 15%, var(--dt-surface, #191919));
+		background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 15%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		border: 1px solid color-mix(in srgb, var(--ev-color, var(--dt-accent)) 15%, transparent);
 		cursor: pointer;
 		transition: background 150ms, border-color 150ms;
 		margin-right: 10px;
 	}
 	.ag-q-now:hover {
-		background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 25%, var(--dt-surface, #191919));
+		background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 25%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		border-color: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 35%, transparent);
 	}
 	.ag-q-now:focus-visible {
-		outline: 2px solid var(--dt-accent, #ff6b4a);
+		outline: 2px solid var(--dt-accent, #2563eb);
 		outline-offset: 2px;
 	}
 	.ag-q-now--selected {
@@ -903,7 +908,7 @@
 		width: 6px;
 		height: 6px;
 		border-radius: 50%;
-		background: var(--ev-color, var(--dt-accent, #ff6b4a));
+		background: var(--ev-color, var(--dt-accent, #2563eb));
 		margin-bottom: 6px;
 		animation: ag-pulse 2.5s ease-in-out infinite;
 	}
@@ -935,7 +940,7 @@
 	}
 	.ag-q-now-fill {
 		height: 100%;
-		background: var(--ev-color, var(--dt-accent, #ff6b4a));
+		background: var(--ev-color, var(--dt-accent, #2563eb));
 		border-radius: 1px;
 		transition: width 1s linear;
 	}
@@ -975,7 +980,7 @@
 		opacity: 0.6;
 	}
 	.ag-q-done-item:focus-visible {
-		outline: 2px solid var(--dt-accent, #ff6b4a);
+		outline: 2px solid var(--dt-accent, #2563eb);
 		outline-offset: 2px;
 		opacity: 0.6;
 	}
@@ -1025,7 +1030,7 @@
 		opacity: 1;
 	}
 	.ag-log-row:focus-visible {
-		outline: 2px solid var(--dt-accent, #ff6b4a);
+		outline: 2px solid var(--dt-accent, #2563eb);
 		outline-offset: 2px;
 	}
 	.ag-log-row--selected {
@@ -1096,7 +1101,7 @@
 	}
 	.ag-compact-row:hover .ag-compact-row-title { color: var(--dt-text); }
 	.ag-compact-row:focus-visible {
-		outline: 2px solid var(--dt-accent, #ff6b4a);
+		outline: 2px solid var(--dt-accent, #2563eb);
 		outline-offset: 2px;
 	}
 	.ag-compact-row-dot {

package/dist/views/agenda/AgendaWeek.svelte

@@ -484,7 +484,7 @@
 		z-index: 20;
 		display: flex;
 		gap: 2px;
-		background: color-mix(in srgb, var(--dt-surface, #10141c) 85%, transparent);
+		background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
 		backdrop-filter: blur(6px);
 		-webkit-backdrop-filter: blur(6px);
 		border-radius: 8px;
@@ -496,7 +496,7 @@
 		background: transparent;
 		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
 		cursor: pointer;
-		font: 600 11px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		font: 600 11px / 1 var(--dt-sans, system-ui, sans-serif);
 		padding: 6px 12px;
 		border-radius: 6px;
 		letter-spacing: 0.04em;
@@ -523,7 +523,7 @@
 		pointer-events: none;
 	}
 	.ag-nav-pill:focus-visible {
-		outline: 2px solid color-mix(in srgb, var(--dt-accent, #ef4444) 55%, transparent);
+		outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
 		outline-offset: 2px;
 	}
 
@@ -552,6 +552,8 @@
 		min-width: 0;
 		overflow-y: auto;
 		overflow-x: hidden;
+		box-sizing: border-box;
+		padding-top: 44px;
 		scrollbar-width: thin;
 		scrollbar-color: var(--dt-border) transparent;
 	}
@@ -579,22 +581,22 @@
 		gap: 4px;
 		padding: 2px 8px;
 		border-radius: 5px;
-		background: color-mix(in srgb, var(--ev-color) 12%, var(--dt-surface, #10141c));
+		background: color-mix(in srgb, var(--ev-color) 12%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		border: 1px solid color-mix(in srgb, var(--ev-color) 18%, transparent);
 		cursor: pointer;
 		transition: background 0.15s, border-color 0.15s;
 	}
 	.ag-allday-chip:hover {
-		background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, #10141c));
+		background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		border-color: color-mix(in srgb, var(--ev-color) 30%, transparent);
 	}
 	.ag-allday-chip:focus-visible {
-		outline: 2px solid var(--dt-accent, #ff6b4a);
+		outline: 2px solid var(--dt-accent, #2563eb);
 		outline-offset: 2px;
 	}
 	.ag-allday-chip--selected {
 		border-color: var(--ev-color);
-		background: color-mix(in srgb, var(--ev-color) 18%, var(--dt-surface, #10141c));
+		background: color-mix(in srgb, var(--ev-color) 18%, var(--dt-surface, var(--dt-bg, #ffffff)));
 	}
 	.ag-allday-dot {
 		width: 5px;
@@ -614,23 +616,23 @@
 		display: flex;
 		align-items: stretch;
 		border-radius: 6px;
-		background: color-mix(in srgb, var(--ev-color) 12%, var(--dt-surface, #191919));
+		background: color-mix(in srgb, var(--ev-color) 12%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		border: 1px solid color-mix(in srgb, var(--ev-color) 8%, var(--dt-border, rgba(255, 255, 255, 0.06)));
 		overflow: hidden;
 		cursor: pointer;
 		transition: background 150ms, border-color 150ms;
 	}
 	.ag-card:hover {
-		background: color-mix(in srgb, var(--ev-color) 20%, var(--dt-surface, #191919));
+		background: color-mix(in srgb, var(--ev-color) 20%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		border-color: color-mix(in srgb, var(--ev-color) 30%, transparent);
 	}
 	.ag-card:focus-visible {
-		outline: 2px solid var(--dt-accent, #ff6b4a);
+		outline: 2px solid var(--dt-accent, #2563eb);
 		outline-offset: 2px;
 	}
 	.ag-card--selected {
 		border-color: var(--ev-color);
-		background: color-mix(in srgb, var(--ev-color) 20%, var(--dt-surface, #191919));
+		background: color-mix(in srgb, var(--ev-color) 20%, var(--dt-surface, var(--dt-bg, #ffffff)));
 	}
 	.ag-card--cancelled {
 		opacity: 0.5;
@@ -727,7 +729,7 @@
 		border-bottom: 1px solid var(--dt-border, rgba(255, 255, 255, 0.06));
 	}
 	.ag-wday--today {
-		background: color-mix(in srgb, var(--dt-accent, #ff6b4a) 2%, transparent);
+		background: color-mix(in srgb, var(--dt-accent, #2563eb) 2%, transparent);
 	}
 	.ag-wday--tomorrow .ag-card {
 		opacity: 0.82;
@@ -739,8 +741,6 @@
 		padding: 8px 20px;
 	}
 	.ag-wday--disabled {
-		opacity: 0.35;
-		pointer-events: none;
 		position: relative;
 	}
 	.ag-wday--disabled::after {
@@ -776,8 +776,8 @@
 		font-weight: 600;
 		letter-spacing: 0.08em;
 		text-transform: uppercase;
-		color: var(--dt-accent, #ff6b4a);
-		background: color-mix(in srgb, var(--dt-accent, #ff6b4a) 12%, transparent);
+		color: var(--dt-accent, #2563eb);
+		background: color-mix(in srgb, var(--dt-accent, #2563eb) 12%, transparent);
 		padding: 2px 7px;
 		border-radius: 3px;
 	}
@@ -824,7 +824,7 @@
 		font-weight: 700;
 		letter-spacing: 0.08em;
 		text-transform: uppercase;
-		color: var(--dt-accent, #ff6b4a);
+		color: var(--dt-accent, #2563eb);
 	}
 	.ag-wslot-cards {
 		display: flex;
@@ -866,7 +866,7 @@
 		color: var(--dt-text);
 	}
 	.ag-compact:focus-visible {
-		outline: 2px solid var(--dt-accent, #ff6b4a);
+		outline: 2px solid var(--dt-accent, #2563eb);
 		outline-offset: 2px;
 	}
 	.ag-compact-dot {

package/dist/views/mobile/MobileDay.svelte

@@ -6,12 +6,10 @@
   Events positioned absolutely within hour lanes.
 -->
 <script lang="ts">
-	import { onMount, tick, untrack } from 'svelte';
+	import { onMount } from 'svelte';
 	import { useCalendarContext } from '../shared/context.svelte.js';
 	import { createClock } from '../../core/clock.svelte.js';
 	import type { TimelineEvent, BlockedSlot } from '../../core/types.js';
-	import type { DragState } from '../../engine/drag.svelte.js';
-	import type { ViewState } from '../../engine/view-state.svelte.js';
 	import { DAY_MS, HOUR_MS, sod, isAllDay, isMultiDay, segmentForDay } from '../../core/time.js';
 	import type { DaySegment } from '../../core/time.js';
 	import { fmtH, fmtTime, getLabels } from '../../core/locale.js';
@@ -181,8 +179,8 @@
 			ev: info.ev,
 			top: info.top,
 			height: info.height,
-			left: `calc(${GUTTER_W}px + ${(info.col / info.totalCols) * 100}% * (1 - ${GUTTER_W} / var(--mb-grid-w, 300)))`,
-			width: `calc((100% - ${GUTTER_W}px) / ${info.totalCols} - 2px)`,
+			left: `calc(${GUTTER_W}px + ${(info.col / info.totalCols) * 100}% - ${(GUTTER_W * info.col) / info.totalCols}px)`,
+			width: `calc(${100 / info.totalCols}% - ${GUTTER_W / info.totalCols + 2}px)`,
 			isCurrent: info.isCurrent,
 			isNext: info.isNext,
 			col: info.col,
@@ -316,7 +314,6 @@
 		onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleGridClick(e as unknown as MouseEvent); }}
 		role="grid"
 		tabindex="-1"
-		style:--mb-grid-w="300"
 	>
 		<div class="mb-grid-inner" style:height="{gridHeight}px">
 			<!-- Hour lanes -->

package/dist/views/mobile/MobileWeek.svelte

@@ -9,7 +9,6 @@
 	import { useCalendarContext } from '../shared/context.svelte.js';
 	import { createClock } from '../../core/clock.svelte.js';
 	import type { TimelineEvent } from '../../core/types.js';
-	import type { ViewState } from '../../engine/view-state.svelte.js';
 	import { DAY_MS, sod, isAllDay, isMultiDay } from '../../core/time.js';
 	import { startOfWeek as sowFn } from '../../core/time.js';
 	import { fmtTime as _fmtTime, weekdayShort, getLabels } from '../../core/locale.js';
@@ -186,6 +185,12 @@
 			viewState.setView(dayView);
 		}
 	}
+
+	function handleDayKeydown(e: KeyboardEvent, dayMs: number) {
+		if (e.key !== 'Enter' && e.key !== ' ') return;
+		e.preventDefault();
+		handleDayTap(dayMs);
+	}
 </script>
 
 <div
@@ -202,15 +207,21 @@
 	<!-- Vertical day list -->
 	<div class="mw-list" role="list">
 		{#each dayCells as cell (cell.ms)}
-			<button
+			<div
 				class="mw-row"
 				class:mw-row--today={cell.isToday}
 				class:mw-row--past={cell.isPast}
 				class:mw-row--weekend={cell.isWeekend}
 				class:mw-row--disabled={cell.isDisabled}
-				onclick={() => handleDayTap(cell.ms)}
-				aria-label="{cell.dayName} {cell.dayNum}"
+				role="listitem"
 			>
+				<button
+					class="mw-row-target"
+					disabled={cell.isDisabled}
+					onclick={() => handleDayTap(cell.ms)}
+					onkeydown={(e) => handleDayKeydown(e, cell.ms)}
+					aria-label="{cell.dayName} {cell.dayNum}"
+				></button>
 				<!-- Date column -->
 				<div class="mw-date">
 					<span class="mw-day-name" class:mw-day-name--today={cell.isToday}>{cell.dayName}</span>
@@ -225,7 +236,8 @@
 						<span class="mw-empty">{L.noEvents}</span>
 					{:else}
 						{#each cell.events.slice(0, MAX_EVENTS) as ev (ev.id)}
-							<div
+							<button
+								type="button"
 								class="mw-ev"
 								class:mw-ev--selected={selectedEventId === ev.id}
 								class:mw-ev--allday={isAllDay(ev) || isMultiDay(ev)}
@@ -235,8 +247,6 @@
 								class:mw-ev--full={ev.status === 'full'}
 								class:mw-ev--limited={ev.status === 'limited'}
 								style:--ev-color={ev.color ?? 'var(--dt-accent)'}
-								role="button"
-								tabindex="0"
 								onclick={(e) => { e.stopPropagation(); oneventclick?.(ev); }}
 								onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); oneventclick?.(ev); } }}
 								onpointerenter={() => oneventhover?.(ev)}
@@ -250,7 +260,7 @@
 										<span class="mw-ev-time">{fmtTime(ev.start)}</span>
 									{/if}
 								</div>
-							</div>
+							</button>
 						{/each}
 						{#if cell.totalCount > MAX_EVENTS}
 							<span class="mw-ev-more">{L.nMore(cell.totalCount - MAX_EVENTS)}</span>
@@ -260,7 +270,7 @@
 
 				<!-- Chevron -->
 				<svg class="mw-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14" aria-hidden="true"><path d="M6 3l5 5-5 5"/></svg>
-			</button>
+			</div>
 		{/each}
 	</div>
 </div>
@@ -294,10 +304,9 @@
 		display: flex;
 		align-items: center;
 		gap: 12px;
+		position: relative;
 		padding: 10px 12px;
-		border: none;
 		background: transparent;
-		cursor: pointer;
 		transition: background 120ms;
 		text-align: left;
 		width: 100%;
@@ -308,7 +317,7 @@
 	.mw-row:last-child {
 		border-bottom: none;
 	}
-	.mw-row:active {
+	.mw-row:has(.mw-row-target:active) {
 		background: color-mix(in srgb, var(--dt-accent, #2563eb) 6%, transparent);
 	}
 	.mw-row--today {
@@ -318,8 +327,30 @@
 		opacity: 0.5;
 	}
 	.mw-row--disabled {
-		opacity: 0.3;
-		pointer-events: none;
+		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
+		);
+	}
+	.mw-row-target {
+		position: absolute;
+		inset: 0;
+		z-index: 0;
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		padding: 0;
+		-webkit-tap-highlight-color: transparent;
+	}
+	.mw-row-target:disabled {
+		cursor: default;
+	}
+	.mw-row-target:focus-visible {
+		outline: 2px solid var(--dt-accent, #2563eb);
+		outline-offset: -2px;
 	}
 
 	/* ─── Date column ────────────────────────────────── */
@@ -330,6 +361,9 @@
 		width: 40px;
 		flex-shrink: 0;
 		gap: 2px;
+		position: relative;
+		z-index: 1;
+		pointer-events: none;
 	}
 
 	.mw-day-name {
@@ -365,6 +399,8 @@
 		display: flex;
 		flex-direction: column;
 		gap: 4px;
+		position: relative;
+		z-index: 2;
 	}
 
 	.mw-empty {
@@ -462,13 +498,12 @@
 	.mw-chevron {
 		flex-shrink: 0;
 		color: var(--dt-text-3, rgba(0, 0, 0, 0.2));
+		position: relative;
+		z-index: 1;
+		pointer-events: none;
 	}
 
 	/* ─── Focus ──────────────────────────────────────── */
-	.mw-row:focus-visible {
-		outline: 2px solid var(--dt-accent, #2563eb);
-		outline-offset: -2px;
-	}
 	.mw-ev:focus-visible {
 		outline: 2px solid var(--ev-color, var(--dt-accent));
 		outline-offset: 1px;