diff --git a/web/src/lib/components/ui/Hovercard.svelte b/web/src/lib/components/ui/Hovercard.svelte
index 1f4018760..685461932 100644
--- a/web/src/lib/components/ui/Hovercard.svelte
+++ b/web/src/lib/components/ui/Hovercard.svelte
@@ -1,5 +1,6 @@
 <script module lang="ts">
 	import { tv } from "tailwind-variants";
+	import { popoverAnchorName, popoverSingleton } from "./popover.svelte";
 
 	export const hovercard = tv({
 		slots: {
@@ -7,14 +8,14 @@
 			// lines up with it rather than with a full-width box
 			wrapper: "inline-flex",
 			// overflow-visible so the card's own content (e.g. a nested popover) isn't clipped
-			card: "hovercard-card fixed inset-auto z-50 m-0 h-fit overflow-visible rounded-sm border border-border-default bg-background-default text-foreground-default shadow-regular"
+			card: "hovercard-card fixed inset-auto z-50 m-0 h-fit popover-transition overflow-visible rounded-sm border border-border-default bg-background-default text-foreground-default shadow-regular"
 		}
 	});
 
 	// hovering a second trigger should swap cards, not stack them. native popover="hint"
 	// would do this for us but isn't widely supported yet, so keep a module-level
 	// singleton the way Tooltip and Dropdown do.
-	let openCard: (() => void) | undefined;
+	const cardSingleton = popoverSingleton();
 </script>
 
 <script lang="ts">
@@ -59,7 +60,7 @@
 	const uid = $props.id();
 	const cardId = `hovercard-${uid}`;
 	// anchor-name must be a unique custom ident per instance, so derive it from the id
-	const anchorName = `--hovercard-${uid.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+	const anchorName = popoverAnchorName("hovercard", uid);
 
 	let openTimer: ReturnType<typeof setTimeout> | undefined;
 	let closeTimer: ReturnType<typeof setTimeout> | undefined;
@@ -73,8 +74,7 @@
 
 	const show = () => {
 		clearTimers();
-		if (openCard && openCard !== hide) openCard();
-		openCard = hide;
+		cardSingleton.claim(hide);
 		// showPopover throws if already open, which the hover bridge can retrigger
 		if (cardEl && !cardEl.matches(":popover-open")) cardEl.showPopover();
 	};
@@ -85,7 +85,7 @@
 		// keep the card up while a nested popover (e.g. a modal launched from it) is open,
 		// otherwise clicking into it from the card would dismiss the card out from under it
 		if (cardEl.querySelector(":popover-open")) return;
-		if (openCard === hide) openCard = undefined;
+		cardSingleton.release(hide);
 		cardEl.hidePopover();
 	};
 
@@ -107,7 +107,7 @@
 		const isOpen = (event as ToggleEvent).newState === "open";
 		open = isOpen;
 		if (isOpen) onOpen?.();
-		else if (openCard === hide) openCard = undefined;
+		else cardSingleton.release(hide);
 	};
 
 	onMount(() => {
@@ -129,7 +129,7 @@
 			cardNode?.removeEventListener("pointerenter", keepOpen);
 			cardNode?.removeEventListener("pointerleave", scheduleHide);
 			clearTimers();
-			if (openCard === hide) openCard = undefined;
+			cardSingleton.release(hide);
 		};
 	});
 
@@ -180,28 +180,4 @@
 			position-try: flip-block, flip-inline;
 		}
 	}
-
-	.hovercard-card {
-		opacity: 0;
-		transition:
-			opacity 120ms ease-out,
-			overlay 120ms allow-discrete,
-			display 120ms allow-discrete;
-	}
-
-	.hovercard-card:popover-open {
-		opacity: 1;
-	}
-
-	@starting-style {
-		.hovercard-card:popover-open {
-			opacity: 0;
-		}
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.hovercard-card {
-			transition: none;
-		}
-	}
 </style>