layout shifts

src/routes/layout.css

@@ -132,4 +132,30 @@
 	body {
 		@apply bg-background text-foreground;
 	}
+
+	/* Added around a theme change only (see routes/+layout.svelte), so the whole
+	   page cross-fades between light and dark instead of snapping. It is off the
+	   rest of the time: a permanent global transition would smear every hover
+	   and every chart repaint. */
+	:root.theme-transition,
+	:root.theme-transition *,
+	:root.theme-transition *::before,
+	:root.theme-transition *::after {
+		transition:
+			background-color 400ms ease,
+			border-color 400ms ease,
+			color 400ms ease,
+			fill 400ms ease,
+			stroke 400ms ease,
+			box-shadow 400ms ease !important;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:root.theme-transition,
+		:root.theme-transition *,
+		:root.theme-transition *::before,
+		:root.theme-transition *::after {
+			transition: none !important;
+		}
+	}
 }