diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 4d4f1afb2..e538a7ecf 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -119,8 +119,11 @@ jobs:
       - name: Diagram gallery (rendering and keyboard behaviour)
         run: bun run diagrams:test
 
-      # Build once, and reject development previews before the long browser suite.
+      # Build once, and reject development previews before the long browser suite. The browser
+      # suite reuses this build, so it carries the same child-motion toggle as scripts/e2e.ts.
       - run: bun run build
+        env:
+          VITE_CHILD_MOTION_TOGGLE: "on"
 
       - name: Verify design audit stays out of production
         run: bun scripts/check-design-production.ts
diff --git a/apps/web/src/anchored-child-surface.tsx b/apps/web/src/anchored-child-surface.tsx
index 9c566efd1..b71c8f4e9 100644
--- a/apps/web/src/anchored-child-surface.tsx
+++ b/apps/web/src/anchored-child-surface.tsx
@@ -1,10 +1,16 @@
 import { childDocumentPath, documentPath } from "@chopin/protocol/document-url";
-import { useLayoutEffect, useRef } from "react";
+import { MagnifierIcon } from "@chopin/icons";
+import { Fragment, useLayoutEffect, useRef } from "react";
+
+import { closeChild, openChild, rememberOpener } from "./child-motion-driver";
+import { openerRect } from "./child-origin";
 
 export { childCloseAction, childFocusTransition, childHistoryState } from "./child-history";
+export { animationsSettled } from "./child-motion-driver";
 export { childPresentation } from "./document-workspace-state";
 
-import type { ReactNode, Ref } from "react";
+import type { CSSProperties, ReactNode } from "react";
+import type { ChildMotionStyle } from "./child-motion";
 import type { ChildPresentation } from "./document-workspace-state";
 
 export type {
@@ -47,63 +53,93 @@ export function rebaseChildHistoryState(
 }
 
 export function AnchoredChildSurface(
-	{
-		child,
-		childLabel,
-		focusKey,
-		onBackdropClick,
-		parent,
-		parentRef,
-		presentation,
-	}: {
-		child?: ReactNode;
-		childLabel: string;
+	{ entries, focusKey, motion, onClosed, origin, presentation }: {
+		entries: { id: string; label: string; node: ReactNode }[];
 		focusKey?: string;
-		onBackdropClick?: () => void;
-		parent: ReactNode;
-		parentRef?: Ref<HTMLDivElement>;
+		motion: ChildMotionStyle;
+		onClosed: () => void;
+		origin?: () => Element | undefined;
 		presentation: ChildPresentation;
 	},
 ) {
-	let childVisible = presentation !== "closed";
-	let surface = useRef<HTMLElement>(null);
+	let layer = useRef<HTMLDivElement>(null);
 	let focused = useRef<string | undefined>(undefined);
+	let closed = useRef(onClosed);
+	closed.current = onClosed;
+	let depth = entries.length;
 	useLayoutEffect(() => {
-		if (presentation !== "open") {
-			if (presentation === "closed") focused.current = undefined;
-			return;
-		}
-		if (!focusKey || focused.current === focusKey) return;
+		if (presentation !== "open" || !focusKey || focused.current === focusKey) return;
 		focused.current = focusKey;
-		surface.current?.focus({ preventScroll: true });
+		layer.current?.querySelector<HTMLElement>(":scope > .anchored-child-card:last-of-type")
+			?.focus({ preventScroll: true });
 	}, [focusKey, presentation]);
+	let latestOrigin = useRef(origin);
+	latestOrigin.current = origin;
+	let generation = useRef(0);
+	let opening = useRef<{ card: HTMLElement; opener?: Element; rect?: DOMRect; at: number }>(
+		undefined,
+	);
+	let front = () =>
+		layer.current?.querySelector<HTMLElement>(":scope > .anchored-child-card:last-of-type");
+	useLayoutEffect(() => {
+		let card = front();
+		if (!card) return;
+		let token = ++generation.current;
+		if (presentation === "open") {
+			let opener = latestOrigin.current?.();
+			let rect = openerRect(opener);
+			opening.current = { at: performance.now(), card, opener, rect };
+			rememberOpener(card, opener);
+			openChild(card, rect, motion);
+			return;
+		}
+		opening.current = undefined;
+		if (presentation !== "closing") return;
+		// The root may have replaced the opener since the open; prefer the one it shows now.
+		let live = latestOrigin.current?.();
+		if (live?.isConnected) rememberOpener(card, live);
+		let done = () => {
+			if (generation.current === token) closed.current();
+		};
+		void closeChild(card, motion).then(done, done);
+	}, [presentation]);
+	let cardKey = entries.at(-1)?.id;
+	useLayoutEffect(() => {
+		// A canonical URL can rekey the open card; the new one carries on from the same moment.
+		let card = front();
+		let open = opening.current;
+		if (!card || !open || open.card === card || presentation !== "open") return;
+		opening.current = { ...open, card };
+		rememberOpener(card, open.opener);
+		openChild(card, open.rect, motion);
+		let elapsed = performance.now() - open.at;
+		for (let animation of layer.current?.getAnimations({ subtree: true }) ?? []) {
+			animation.currentTime = elapsed;
+		}
+	}, [cardKey]);
 	return (
-		<div
-			className="anchored-child-host"
-			data-child-presentation={presentation}
-			data-child-visible={childVisible || undefined}
-		>
-			<div className="anchored-child-parent" ref={parentRef}>
-				{parent}
-			</div>
-			{presentation === "open" && onBackdropClick && (
-				<div
-					aria-hidden="true"
-					className="anchored-child-backdrop"
-					data-child-backdrop
-					onClick={onBackdropClick}
-				/>
-			)}
-			{childVisible && (
-				<section
-					aria-label={`Child document: ${childLabel}`}
-					className="anchored-child-surface"
-					ref={surface}
-					tabIndex={-1}
-				>
-					{child}
-				</section>
-			)}
+		<div className="anchored-child-layer" data-child-motion={motion} ref={layer}>
+			{entries.map((entry, index) => (
+				<Fragment key={entry.id}>
+					{motion === "lift" && <div aria-hidden="true" className="anchored-child-shadow" />}
+					<section
+						aria-label={`Child document: ${entry.label}`}
+						className="anchored-child-card"
+						style={{ "--level": index + 1, "--depth": depth } as CSSProperties}
+						tabIndex={-1}
+					>
+						<div className="anchored-child-content">
+							{motion === "lift" && (
+								<div className="anchored-child-title">
+									<MagnifierIcon aria-hidden="true" size={14} />
+									<span>{entry.label}</span>
+								</div>
+							)}
+							{entry.node}
+						</div>
+					</section>
+				</Fragment>
+			))}
 		</div>
 	);
 }
diff --git a/apps/web/src/child-motion-driver.ts b/apps/web/src/child-motion-driver.ts
new file mode 100644
index 000000000..3b8124d35
--- /dev/null
+++ b/apps/web/src/child-motion-driver.ts
@@ -0,0 +1,362 @@
+import {
+	CHILD_MOTION_STORAGE_KEY,
+	childMotionStyle,
+	clipInset,
+	motionOrigin,
+	rectTransform,
+	settledBox,
+	zoomStart,
+} from "./child-motion";
+
+import type { Box, ChildMotionStyle } from "./child-motion";
+
+let toggleEnabled = import.meta.env.DEV || import.meta.env.VITE_CHILD_MOTION_TOGGLE === "on";
+
+export function readChildMotionStyle() {
+	let stored: string | null = null;
+	try {
+		stored = localStorage.getItem(CHILD_MOTION_STORAGE_KEY);
+	} catch {
+		// Storage can be unavailable; Lift is the default.
+	}
+	return childMotionStyle(toggleEnabled, stored);
+}
+
+/** Resolves once every animation has finished or been cancelled, so a close never sticks. */
+export function animationsSettled(animations: { finished: Promise<unknown> }[]): Promise<void> {
+	return Promise.allSettled(animations.map(animation => animation.finished)).then(() => {});
+}
+
+/** Registered time tokens compute to seconds (`0.6s`), unregistered ones keep their units. */
+function milliseconds(value: string, fallback: number) {
+	let amount = Number.parseFloat(value);
+	if (!Number.isFinite(amount) || amount <= 0) return fallback;
+	return /\ds\s*$/.test(value) ? amount * 1000 : amount;
+}
+
+function tokens(element: Element) {
+	let style = getComputedStyle(element);
+	return {
+		open: milliseconds(style.getPropertyValue("--child-open-dur"), 600),
+		close: milliseconds(style.getPropertyValue("--child-close-dur"), 250),
+		easing: style.getPropertyValue("--child-ease").trim() || "ease-out",
+		radius: style.getPropertyValue("--radius-panel").trim() || "12px",
+		reduced: matchMedia("(prefers-reduced-motion: reduce)").matches,
+	};
+}
+
+/** Freeze an element's in-flight values, then drop its animations, so the next move starts here. */
+function settle(element: HTMLElement) {
+	let style = getComputedStyle(element);
+	let now = { clipPath: style.clipPath, opacity: style.opacity, transform: style.transform };
+	for (let animation of element.getAnimations()) animation.cancel();
+	return now;
+}
+
+function usable(box: Box) {
+	return Number.isFinite(box.width) && Number.isFinite(box.height) && box.width >= 1
+		&& box.height >= 1;
+}
+
+function scaleOf(transform: string) {
+	return transform === "none" ? 1 : new DOMMatrixReadOnly(transform).a;
+}
+
+/** Big enough to scale from: a sliver would round Zoom's scale to zero. */
+function landable(rect: Box, box: Box) {
+	return usable(rect) && rect.width >= box.width / 100;
+}
+
+/** The opener's rect inside the card, or the card's lower centre; never a degenerate box. */
+function originIn(opener: Box | undefined, box: Box) {
+	let from = motionOrigin(opener, box);
+	return landable(from, box) ? from : motionOrigin(undefined, box);
+}
+
+function parts(card: HTMLElement) {
+	let shadow = card.previousElementSibling;
+	return {
+		content: card.querySelector<HTMLElement>(":scope > .anchored-child-content"),
+		face: card.querySelector<HTMLElement>(":scope > .anchored-child-face"),
+		shadow: shadow instanceof HTMLElement && shadow.classList.contains("anchored-child-shadow")
+			? shadow
+			: null,
+	};
+}
+
+/** The stack element that recedes for this style: the whole root card, or its plan for Zoom. */
+function receding(card: HTMLElement, motion: ChildMotionStyle) {
+	let stack = card.closest<HTMLElement>(".workspace-document-stack");
+	return motion === "lift"
+		? stack?.querySelector<HTMLElement>(":scope > .workspace-document-panel") ?? null
+		: stack?.querySelector<HTMLElement>(
+			'[data-document-view="plan"]:not(.workspace-child-slot *)',
+		) ?? null;
+}
+
+/** Compact always presents with the stack bar, so the stack's attribute is the style in force. */
+function effective(card: HTMLElement, requested: ChildMotionStyle): ChildMotionStyle {
+	let stack = card.closest<HTMLElement>(".workspace-document-stack");
+	return stack?.dataset.childMotion === "zoom" ? "zoom" : requested;
+}
+
+/** The card an opener belongs to: a research card's open control covers the whole card. */
+function cardOf(opener: Element): HTMLElement | undefined {
+	let card = opener.closest("[data-research-ready]") ?? opener;
+	return card instanceof HTMLElement ? card : undefined;
+}
+
+/**
+ * The opener's card as the root document shows it now. The root can replace its content while a
+ * child is open, so a detached opener is found again by its accessible name.
+ */
+function rootSlot(opener: Element | undefined, stack: Element | null): HTMLElement | undefined {
+	if (!opener || !stack) return undefined;
+	let live: Element | null | undefined = opener.isConnected ? opener : undefined;
+	let label = opener.getAttribute("aria-label");
+	if (!live && label) {
+		live = [...stack.querySelectorAll(`[aria-label="${CSS.escape(label)}"]`)].find(element =>
+			!element.closest(".workspace-child-slot")
+		);
+	}
+	let slot = live ? cardOf(live) : undefined;
+	return slot?.offsetParent && stack.contains(slot) && !slot.closest(".workspace-child-slot")
+		? slot
+		: undefined;
+}
+
+/** A still copy of the opener drawn inside the card at `at`, so the card reads as the opener. */
+function faceOf(card: HTMLElement, slot: HTMLElement, at: Box, box: Box) {
+	let face = slot.cloneNode(true) as HTMLElement;
+	// A copy would replay its parts' entrances, so it keeps each part as it looks now instead.
+	let originals = [slot, ...slot.querySelectorAll<HTMLElement>("*")];
+	let copies = [face, ...face.querySelectorAll<HTMLElement>("*")];
+	originals.forEach((original, index) => {
+		let copy = copies[index];
+		if (!copy) return;
+		let style = getComputedStyle(original);
+		Object.assign(copy.style, {
+			animation: "none",
+			opacity: style.opacity,
+			transform: style.transform,
+			transition: "none",
+		});
+	});
+	face.classList.add("anchored-child-face");
+	face.removeAttribute("id");
+	for (let element of face.querySelectorAll("[id]")) element.removeAttribute("id");
+	face.inert = true;
+	face.setAttribute("aria-hidden", "true");
+	Object.assign(face.style, {
+		left: `${at.left - box.left}px`,
+		top: `${at.top - box.top}px`,
+		width: `${at.width}px`,
+		height: `${at.height}px`,
+	});
+	card.append(face);
+	return face;
+}
+
+let openers = new WeakMap<HTMLElement, Element>();
+
+/** Remember the opener so a close can find its slot again. */
+export function rememberOpener(card: HTMLElement, opener: Element | null | undefined) {
+	if (opener) openers.set(card, opener);
+}
+
+export function openChild(
+	card: HTMLElement,
+	opener: DOMRect | undefined,
+	requested: ChildMotionStyle,
+) {
+	let t = tokens(card);
+	// Reduced motion keeps the stylesheet's crossfade, which settling would cancel.
+	if (t.reduced) return;
+	let motion = effective(card, requested);
+	let { content, face, shadow } = parts(card);
+	let was = settle(card);
+	let shift = content ? settle(content) : undefined;
+	let cast = shadow ? settle(shadow) : undefined;
+	let faded = face ? Number(settle(face).opacity) : 0;
+	face?.remove();
+	let box = card.getBoundingClientRect();
+	if (!usable(box)) return;
+	let from = originIn(opener, box);
+	let fallback = motionOrigin(undefined, box);
+	let fromOpener = from.left !== fallback.left || from.top !== fallback.top
+		|| from.width !== fallback.width;
+	let parent = receding(card, motion);
+	if (parent && motion === "zoom") {
+		let style = getComputedStyle(parent);
+		// Moving the pivot of a plan that is still pushed in would make it jump.
+		if (scaleOf(style.transform) === 1) {
+			let p = parent.getBoundingClientRect();
+			parent.style.transformOrigin = `${from.left - p.left + from.width / 2}px ${
+				from.top - p.top + from.height / 2
+			}px`;
+		}
+	}
+	let eased = { duration: t.open, easing: t.easing };
+	let full = `inset(0px 0px 0px 0px round ${t.radius})`;
+	if (motion === "lift") {
+		let fresh = was.clipPath === "none";
+		card.animate([
+			{ clipPath: fresh ? clipInset(from, box, t.radius) : was.clipPath },
+			{ clipPath: clipInset(box, box, t.radius) },
+		], eased);
+		// The clicked card may already be detached; its copy still shows what was clicked.
+		let raw = openers.get(card);
+		let slot = fresh && fromOpener && raw ? cardOf(raw) : undefined;
+		// Opacity runs linearly: under the ease-out curve it would land in the first third.
+		if (content) {
+			content.animate([
+				{
+					transform: fresh
+						? `translate(${from.left - box.left}px, ${from.top - box.top}px)`
+						: shift!.transform,
+				},
+				{ transform: "none" },
+			], eased);
+			content.animate(
+				fresh
+					? [{ opacity: 0 }, { opacity: 0, offset: 0.3 }, { opacity: 1, offset: 0.8 }, {
+						opacity: 1,
+					}]
+					: [{ opacity: Number(shift!.opacity) }, { opacity: 1 }],
+				{ duration: t.open },
+			);
+		}
+		if (slot) {
+			let lifted = faceOf(card, slot, from, box);
+			lifted.animate([
+				{ transform: "none" },
+				{ transform: `translate(${box.left - from.left}px, ${box.top - from.top}px)` },
+			], eased);
+			lifted.animate([{ opacity: 1 }, { opacity: 1, offset: 0.3 }, { opacity: 0, offset: 0.65 }, {
+				opacity: 0,
+			}], { duration: t.open, fill: "forwards" }).onfinish = () => lifted.remove();
+		} else if (faded > 0 && face) {
+			// A reopen mid-close lets the returning face go rather than snapping it away.
+			card.append(face);
+			face.animate([{ opacity: faded }, { opacity: 0 }], { duration: t.open / 3, fill: "forwards" })
+				.onfinish = () => face.remove();
+		}
+		shadow?.animate([
+			{ transform: fresh ? rectTransform(from, box) : cast!.transform },
+			{ transform: "none" },
+		], eased);
+		return;
+	}
+	let fresh = was.transform === "none" && was.clipPath === "none";
+	card.style.transformOrigin = "0 0";
+	card.animate([
+		fresh
+			? { ...zoomStart(from, box, t.radius), opacity: 0 }
+			: {
+				clipPath: was.clipPath === "none" ? full : was.clipPath,
+				opacity: Number(was.opacity),
+				transform: was.transform,
+			},
+		{ opacity: 1, offset: 0.2 },
+		{ clipPath: full, opacity: 1, transform: "none" },
+	], eased);
+	content?.animate(
+		fresh
+			? [{ opacity: 0 }, { opacity: 0, offset: 0.25 }, { opacity: 1, offset: 0.75 }, { opacity: 1 }]
+			: [{ opacity: Number(shift!.opacity) }, { opacity: 1 }],
+		{ duration: t.open },
+	);
+}
+
+export function closeChild(card: HTMLElement, requested: ChildMotionStyle): Promise<void> {
+	let t = tokens(card);
+	// Reduced motion closes with the stylesheet's fade-out; wait for it rather than cancel it.
+	if (t.reduced) return animationsSettled(card.getAnimations());
+	let motion = effective(card, requested);
+	let { content, face, shadow } = parts(card);
+	let was = settle(card);
+	let shift = content ? settle(content) : undefined;
+	let cast = shadow ? settle(shadow) : undefined;
+	let faded = face ? Number(settle(face).opacity) : 0;
+	face?.remove();
+	let box = card.getBoundingClientRect();
+	if (!usable(box)) return Promise.resolve();
+	let parent = receding(card, motion);
+	let slot = rootSlot(openers.get(card), card.closest(".workspace-document-stack"));
+	let target: Box | undefined;
+	if (slot && parent) {
+		// Aim at where the card will be once the root has finished settling, not where it is now.
+		let style = getComputedStyle(parent);
+		let scale = scaleOf(style.transform);
+		let p = parent.getBoundingClientRect();
+		let [ox = 0, oy = 0] = style.transformOrigin.split(" ").map(Number.parseFloat);
+		// A scale about (ox, oy) leaves that point fixed at the layout box's left + ox.
+		let pivot = { x: p.left + ox * scale, y: p.top + oy * scale };
+		let settled = Number.isFinite(scale) && scale > 0
+			? settledBox(slot.getBoundingClientRect(), scale, pivot)
+			: undefined;
+		if (settled && landable(settled, box)) target = settled;
+	}
+	let eased = { duration: t.close, easing: t.easing, fill: "forwards" as const };
+	let linear = { duration: t.close, fill: "forwards" as const };
+	let from = was.clipPath === "none" ? clipInset(box, box, t.radius) : was.clipPath;
+	let animations: Animation[] = [];
+	if (!target) {
+		// Nowhere to land: fade where it stands, holding any half-grown frame.
+		let held = { clipPath: was.clipPath, transform: was.transform };
+		animations.push(
+			card.animate([{ ...held, opacity: Number(was.opacity) }, { ...held, opacity: 0 }], eased),
+		);
+		if (content) {
+			let still = { opacity: Number(shift!.opacity), transform: shift!.transform };
+			animations.push(content.animate([still, still], eased));
+		}
+		if (shadow) {
+			let still = { transform: cast!.transform };
+			animations.push(shadow.animate([{ ...still, opacity: 1 }, { ...still, opacity: 0 }], eased));
+		}
+	} else if (motion === "lift") {
+		animations.push(
+			card.animate([{ clipPath: from }, { clipPath: clipInset(target, box, t.radius) }], eased),
+		);
+		if (content) {
+			animations.push(content.animate([
+				{ transform: shift!.transform },
+				{ transform: `translate(${target.left - box.left}px, ${target.top - box.top}px)` },
+			], eased));
+			animations.push(content.animate([
+				{ opacity: Number(shift!.opacity) },
+				{ opacity: 0, offset: 0.5 },
+				{ opacity: 0 },
+			], linear));
+		}
+		let returning = faceOf(card, slot!, target, box);
+		animations.push(returning.animate([
+			{ opacity: faded },
+			{ opacity: faded, offset: 0.2 },
+			{ opacity: 1, offset: 0.55 },
+			{ opacity: 1 },
+		], linear));
+		if (shadow) {
+			animations.push(shadow.animate([
+				{ transform: cast!.transform },
+				{ transform: rectTransform(target, box) },
+			], eased));
+		}
+	} else {
+		card.style.transformOrigin = "0 0";
+		animations.push(card.animate([
+			{ clipPath: from, opacity: Number(was.opacity), transform: was.transform },
+			{ opacity: 1, offset: 0.8 },
+			{ ...zoomStart(target, box, t.radius), opacity: 0 },
+		], eased));
+		if (content) {
+			animations.push(content.animate([
+				{ opacity: Number(shift!.opacity) },
+				{ opacity: 0, offset: 0.4 },
+				{ opacity: 0 },
+			], linear));
+		}
+	}
+	return animationsSettled(animations);
+}
diff --git a/apps/web/src/child-motion.test.ts b/apps/web/src/child-motion.test.ts
new file mode 100644
index 000000000..3aba89f16
--- /dev/null
+++ b/apps/web/src/child-motion.test.ts
@@ -0,0 +1,80 @@
+import { describe, expect, it } from "bun:test";
+
+import {
+	childMotionStyle,
+	clipInset,
+	motionOrigin,
+	pileLayout,
+	rectTransform,
+	settledBox,
+	zoomStart,
+} from "./child-motion";
+
+let panel = { left: 100, top: 50, width: 800, height: 600 };
+
+describe("child motion origin", () => {
+	it("uses an opener whose centre is in the panel, clamped to it", () => {
+		expect(motionOrigin({ left: 150, top: 300, width: 400, height: 80 }, panel))
+			.toEqual({ left: 150, top: 300, width: 400, height: 80 });
+		expect(motionOrigin({ left: 80, top: 600, width: 400, height: 80 }, panel))
+			.toEqual({ left: 100, top: 600, width: 380, height: 50 });
+	});
+
+	it("falls back to the lower centre for a sidebar row, a hidden opener, or none", () => {
+		let fallback = { left: 300, top: 530, width: 400, height: 120 };
+		expect(motionOrigin(undefined, panel)).toEqual(fallback);
+		expect(motionOrigin({ left: 0, top: 200, width: 90, height: 28 }, panel)).toEqual(fallback);
+		expect(motionOrigin({ left: 0, top: 0, width: 0, height: 0 }, panel)).toEqual(fallback);
+	});
+});
+
+describe("child motion geometry", () => {
+	it("clips an element at `box` down to `rect`, never with negative insets", () => {
+		expect(clipInset({ left: 150, top: 300, width: 400, height: 80 }, panel, "12px"))
+			.toBe("inset(250px 350px 270px 50px round 12px)");
+		expect(clipInset({ left: 0, top: 0, width: 2000, height: 2000 }, panel, "0px"))
+			.toBe("inset(0px 0px 0px 0px round 0px)");
+	});
+
+	it("maps a box laid out at `to` onto `from` from the top left", () => {
+		expect(rectTransform({ left: 150, top: 300, width: 400, height: 60 }, panel))
+			.toBe("translate(50px, 250px) scale(0.5, 0.1)");
+	});
+
+	it("starts a zoom at the opener with a uniform scale and a matching bottom clip", () => {
+		expect(zoomStart({ left: 300, top: 240, width: 200, height: 50 }, panel, "12px")).toEqual({
+			transform: "translate(200px, 190px) scale(0.25)",
+			clipPath: "inset(0px 0px 400px 0px round calc(12px / 0.25))",
+		});
+	});
+
+	it("finds where a slot lands once a receding parent returns to scale 1", () => {
+		// The parent is at scale 0.97 about its top centre (500, 50).
+		let pivot = { x: 500, y: 50 };
+		let seen = { left: 209, top: 341, width: 388, height: 77.6 };
+		let settled = settledBox(seen, 0.97, pivot);
+		expect(settled.left).toBeCloseTo(200, 5);
+		expect(settled.top).toBeCloseTo(350, 5);
+		expect(settled.width).toBeCloseTo(400, 5);
+		expect(settled.height).toBeCloseTo(80, 5);
+		expect(settledBox(seen, 1, pivot)).toEqual(seen);
+	});
+
+	it("stacks cards so only each covered card's bar peeks", () => {
+		// Root bar 46px, card bar 36px.
+		expect(pileLayout(0, 1, 46, 36)).toEqual({ top: 0, scale: 0.97 });
+		expect(pileLayout(1, 1, 46, 36)).toEqual({ top: 46, scale: 1 });
+		expect(pileLayout(2, 3, 46, 36)).toEqual({ top: 82, scale: 0.97 });
+		expect(pileLayout(0, 3, 46, 36)).toEqual({ top: 0, scale: 0.91 });
+	});
+});
+
+describe("child motion style", () => {
+	it("honours Zoom only where the toggle is enabled", () => {
+		expect(childMotionStyle(true, "zoom")).toBe("zoom");
+		expect(childMotionStyle(true, "lift")).toBe("lift");
+		expect(childMotionStyle(false, "zoom")).toBe("lift");
+		expect(childMotionStyle(true, null)).toBe("lift");
+		expect(childMotionStyle(true, "wobble")).toBe("lift");
+	});
+});
diff --git a/apps/web/src/child-motion.ts b/apps/web/src/child-motion.ts
new file mode 100644
index 000000000..b99e3ba24
--- /dev/null
+++ b/apps/web/src/child-motion.ts
@@ -0,0 +1,91 @@
+/** Pure geometry for nested documents opening inside the root's document stack. */
+
+export type Box = { left: number; top: number; width: number; height: number };
+export type ChildMotionStyle = "lift" | "zoom";
+
+export const CHILD_MOTION_STORAGE_KEY = "chopin:dev:child-motion";
+/** Each covered card shrinks this much more than the one above it. */
+const RECEDE_STEP = 0.03;
+
+export function childMotionStyle(enabled: boolean, stored: string | null): ChildMotionStyle {
+	return enabled && stored === "zoom" ? "zoom" : "lift";
+}
+
+function px(value: number): string {
+	return `${Math.round(value * 100) / 100 || 0}px`;
+}
+
+function ratio(value: number): number {
+	return Math.round(value * 1000) / 1000;
+}
+
+export function motionOrigin(opener: Box | undefined, panel: Box): Box {
+	let right = panel.left + panel.width;
+	let bottom = panel.top + panel.height;
+	if (opener && opener.width > 0 && opener.height > 0) {
+		let x = opener.left + opener.width / 2;
+		let y = opener.top + opener.height / 2;
+		if (x >= panel.left && x <= right && y >= panel.top && y <= bottom) {
+			let left = Math.max(opener.left, panel.left);
+			let top = Math.max(opener.top, panel.top);
+			return {
+				left,
+				top,
+				width: Math.min(opener.left + opener.width, right) - left,
+				height: Math.min(opener.top + opener.height, bottom) - top,
+			};
+		}
+	}
+	return {
+		left: panel.left + panel.width * 0.25,
+		top: panel.top + panel.height * 0.8,
+		width: panel.width * 0.5,
+		height: panel.height * 0.2,
+	};
+}
+
+export function clipInset(rect: Box, box: Box, radius: string): string {
+	let top = Math.max(0, rect.top - box.top);
+	let right = Math.max(0, box.left + box.width - rect.left - rect.width);
+	let bottom = Math.max(0, box.top + box.height - rect.top - rect.height);
+	let left = Math.max(0, rect.left - box.left);
+	return `inset(${px(top)} ${px(right)} ${px(bottom)} ${px(left)} round ${radius})`;
+}
+
+export function rectTransform(from: Box, to: Box): string {
+	return `translate(${px(from.left - to.left)}, ${px(from.top - to.top)}) scale(${
+		ratio(from.width / to.width)
+	}, ${ratio(from.height / to.height)})`;
+}
+
+/** A child layer drawn at the opener: uniform scale, clipped to the opener's aspect. */
+export function zoomStart(origin: Box, box: Box, radius: string) {
+	let scale = ratio(origin.width / box.width);
+	return {
+		transform: `translate(${px(origin.left - box.left)}, ${
+			px(origin.top - box.top)
+		}) scale(${scale})`,
+		clipPath: `inset(0px 0px ${
+			px(box.height - origin.height / scale)
+		} 0px round calc(${radius} / ${scale}))`,
+	};
+}
+
+/** Where `rect`, seen inside a parent at `scale` about `pivot`, lands at scale 1. */
+export function settledBox(rect: Box, scale: number, pivot: { x: number; y: number }): Box {
+	if (scale === 1) return rect;
+	return {
+		left: pivot.x + (rect.left - pivot.x) / scale,
+		top: pivot.y + (rect.top - pivot.y) / scale,
+		width: rect.width / scale,
+		height: rect.height / scale,
+	};
+}
+
+export function pileLayout(level: number, depth: number, rootBar: number, bar: number) {
+	let behind = Math.max(0, depth - level);
+	return {
+		top: Math.min(level, 1) * rootBar + Math.max(level - 1, 0) * bar,
+		scale: ratio(1 - behind * RECEDE_STEP),
+	};
+}
diff --git a/apps/web/src/child-origin.ts b/apps/web/src/child-origin.ts
new file mode 100644
index 000000000..1a1410439
--- /dev/null
+++ b/apps/web/src/child-origin.ts
@@ -0,0 +1,11 @@
+let clicked = new WeakMap<Element, DOMRect>();
+
+/** Keep the opener's rect from the click: the root can replace it before the child lays out. */
+export function rememberOriginRect(opener: Element | undefined) {
+	if (opener?.isConnected) clicked.set(opener, opener.getBoundingClientRect());
+}
+
+export function openerRect(opener: Element | undefined): DOMRect | undefined {
+	if (!opener) return undefined;
+	return opener.isConnected ? opener.getBoundingClientRect() : clicked.get(opener);
+}
diff --git a/apps/web/src/document-workspace-host.tsx b/apps/web/src/document-workspace-host.tsx
index 8c5a27055..b4a50c120 100644
--- a/apps/web/src/document-workspace-host.tsx
+++ b/apps/web/src/document-workspace-host.tsx
@@ -8,6 +8,7 @@ import {
 	rebaseChildHistoryState,
 } from "./anchored-child-surface";
 import { readDocumentRecovery, rememberChannel } from "./channel-recovery";
+import { readChildMotionStyle } from "./child-motion-driver";
 import { prepareDocumentLoad } from "./document-loader";
 import { documentRouteIdentity } from "./document-route-swap";
 import {
@@ -70,6 +71,12 @@ function workspaceProps(
 	};
 }
 
+function parentScroller(host: HTMLElement | null): HTMLElement | null {
+	return host?.querySelector<HTMLElement>(
+		'[data-document-view="plan"] [data-plan-scroll]:not(.workspace-child-slot *)',
+	) ?? null;
+}
+
 // How long after a request the outgoing document may wait for this one to sync. Past
 // it, the header and body would disagree with the sidebar for too long.
 const REVEAL_LIMIT = 200;
@@ -77,6 +84,7 @@ const REVEAL_LIMIT = 200;
 export default function DocumentWorkspaceHost(
 	{
 		agent,
+		childOrigin,
 		Failure,
 		layerKey,
 		Loading,
@@ -90,6 +98,7 @@ export default function DocumentWorkspaceHost(
 		user,
 	}: {
 		agent: boolean;
+		childOrigin?: () => Element | undefined;
 		Failure: ComponentType<{
 			channel?: { title?: string; slug?: string };
 			error: unknown;
@@ -111,6 +120,7 @@ export default function DocumentWorkspaceHost(
 			resolution?: {
 				canonicalPath: string;
 				channel: Api.Channel;
+				requestKey: DocumentRouteIdentity;
 				routeKey: DocumentRouteIdentity;
 			},
 		) => void;
@@ -138,6 +148,10 @@ export default function DocumentWorkspaceHost(
 	let closingFocus = useRef<ChildFocusToken | undefined>(undefined);
 	let parentScrollTop = useRef<number | undefined>(undefined);
 	let parentSurface = useRef<HTMLDivElement>(null);
+	// The card's key follows the child route, not the loaded channel, so loading never remounts
+	// it, and it outlives the route while the card closes.
+	let childKey = useRef<string | undefined>(undefined);
+	if (route.page === "child") childKey.current = route.childSlug;
 
 	useEffect(() => {
 		let active = true;
@@ -148,7 +162,7 @@ export default function DocumentWorkspaceHost(
 		let currentState = stateRef.current;
 		let current = currentState.status === "ready" ? currentState.loaded : undefined;
 		if (requestedRoute.page === "child" && current && !current.child) {
-			let scroller = parentSurface.current?.querySelector<HTMLElement>("[data-plan-scroll]");
+			let scroller = parentScroller(parentSurface.current);
 			if (scroller) parentScrollTop.current = scroller.scrollTop;
 		}
 		let address = {
@@ -197,6 +211,7 @@ export default function DocumentWorkspaceHost(
 			let resolution = {
 				canonicalPath: prepared.pathname,
 				channel: (child ?? parent).channel,
+				requestKey: documentRouteIdentity(requestedRoute),
 				routeKey,
 			};
 			// The outgoing document stays on screen until this one has synced, briefly.
@@ -229,7 +244,7 @@ export default function DocumentWorkspaceHost(
 
 	useLayoutEffect(() => {
 		if (!loaded || parentScrollTop.current === undefined) return;
-		let scroller = parentSurface.current?.querySelector<HTMLElement>("[data-plan-scroll]");
+		let scroller = parentScroller(parentSurface.current);
 		if (scroller) scroller.scrollTop = parentScrollTop.current;
 		if (presentation === "closed") parentScrollTop.current = undefined;
 	}, [loaded, presentation]);
@@ -276,13 +291,10 @@ export default function DocumentWorkspaceHost(
 		send(action);
 	}, [onChildClosing, route, send]);
 
-	useEffect(() => {
-		if (presentation !== "closing") return;
-		let timer = window.setTimeout(() => {
-			send({ type: "closed" });
-		}, 190);
-		return () => window.clearTimeout(timer);
-	}, [presentation, send]);
+	let childClosed = useCallback(() => {
+		if (stateRef.current.presentation === "closing") send({ type: "closed" });
+	}, [send]);
+	let motion = readChildMotionStyle();
 
 	useEffect(() => {
 		if (presentation !== "open") return;
@@ -290,13 +302,23 @@ export default function DocumentWorkspaceHost(
 			if (event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
 			// Escape dismisses the innermost thing first: a field gives up focus, then the next one closes.
 			let target = event.target instanceof Element ? event.target : undefined;
+			// Root Chat and the top bar stay live beside the child, so Escape there is theirs alone.
+			let rootWorkspace = document.querySelector(".workspace-child-slot")?.closest(
+				".workspace-root",
+			);
+			if (
+				target && rootWorkspace?.contains(target) && !target.closest(".workspace-document-stack")
+			) {
+				return;
+			}
 			if (target?.closest(DISMISSIBLE_TARGET)) {
 				event.preventDefault();
-				document.querySelector<HTMLElement>(".anchored-child-surface")?.focus({
+				document.querySelector<HTMLElement>(".anchored-child-card:last-of-type")?.focus({
 					preventScroll: true,
 				});
 				return;
 			}
+			if (document.querySelector(".workspace-child-slot[hidden]")) return;
 			event.preventDefault();
 			let current = stateRef.current;
 			if (current.status === "ready") {
@@ -383,22 +405,6 @@ export default function DocumentWorkspaceHost(
 	let childVisible = presentation !== "closed";
 	let childLabel = loaded.child?.channel.title ?? (route.page === "child" ? route.childSlug : "");
 	let closeChild = () => onChildClose(loaded.parent.channel.id, parentPath);
-	let parent = (
-		<Suspense fallback={<Loading label="Opening document…" />}>
-			<RoomWorkspace
-				{...workspaceProps(
-					loaded.parent,
-					agent,
-					user,
-					childVisible
-						? { childLabel, onChildClose: closeChild, type: "parent-with-child" }
-						: { type: "document" },
-					parentMetadataChanged,
-				)}
-				key={loaded.parent.channel.id}
-			/>
-		</Suspense>
-	);
 	let child = loaded.child
 		? (
 			<Suspense fallback={<Loading label="Opening child document…" />}>
@@ -428,18 +434,52 @@ export default function DocumentWorkspaceHost(
 			? <Failure error={error} onRetry={retryFailure} />
 			: <Loading label="Opening child document…" />
 		: undefined;
-	return (
+	let layer = (
 		<AnchoredChildSurface
-			child={child}
-			childLabel={childLabel}
+			entries={[{
+				id: childKey.current ?? "child",
+				label: childLabel,
+				node: child,
+			}]}
 			focusKey={loaded.child?.channel.id ?? (route.page === "child"
 				? `${route.parentSlug}/${route.childSlug}`
 				: undefined)}
-			onBackdropClick={closeChild}
-			parent={parent}
-			parentRef={parentSurface}
+			motion={motion}
+			onClosed={childClosed}
+			origin={childOrigin}
 			presentation={presentation}
-			key={loaded.parent.channel.id}
 		/>
 	);
+	let nested = {
+		child: layer,
+		childState: presentation === "closing" ? "closing" as const : "open" as const,
+		motion,
+		onChildClose: closeChild,
+		path: [
+			{ id: loaded.parent.channel.id, label: loaded.parent.channel.title },
+			{ id: loaded.child?.channel.id ?? "child", label: childLabel },
+		],
+		type: "parent-with-child" as const,
+	};
+	return (
+		<div
+			className="anchored-child-host"
+			data-child-presentation={presentation}
+			key={loaded.parent.channel.id}
+			ref={parentSurface}
+		>
+			<Suspense fallback={<Loading label="Opening document…" />}>
+				<RoomWorkspace
+					{...workspaceProps(
+						loaded.parent,
+						agent,
+						user,
+						childVisible ? nested : { type: "document" },
+						parentMetadataChanged,
+					)}
+					key={loaded.parent.channel.id}
+				/>
+			</Suspense>
+		</div>
+	);
 }
diff --git a/apps/web/src/hosted.test.ts b/apps/web/src/hosted.test.ts
index 8cdbe405c..ec1a00d0e 100644
--- a/apps/web/src/hosted.test.ts
+++ b/apps/web/src/hosted.test.ts
@@ -6,6 +6,7 @@ import { ApiError } from "./api";
 import {
 	anchoredChildPaths,
 	AnchoredChildSurface,
+	animationsSettled,
 	childCloseAction,
 	childFocusTransition,
 	childHistoryState,
@@ -253,105 +254,44 @@ describe("anchored child lifecycle", () => {
 		).toBe(3);
 	});
 
-	it("keeps the parent shell visible around separate workspace rooms", () => {
-		let markup = renderToStaticMarkup(createElement(AnchoredChildSurface, {
-			child: createElement("div", { "data-workspace-room": "child-room" }),
-			childLabel: "Source review",
-			onBackdropClick() {},
-			parent: createElement("div", { "data-workspace-room": "parent-room" }),
-			presentation: "open",
-		}));
-		let closing = renderToStaticMarkup(createElement(AnchoredChildSurface, {
-			child: createElement("div"),
-			childLabel: "Source review",
-			onBackdropClick() {},
-			parent: createElement("div"),
-			presentation: "closing",
-		}));
-
-		expect(markup).not.toContain('inert=""');
-		expect(markup).not.toContain('aria-label="Back to Release plan"');
-		expect(markup).toContain('class="anchored-child-backdrop"');
-		expect(markup).toContain('aria-hidden="true"');
-		expect(markup).not.toContain('<button aria-hidden="true" class="anchored-child-backdrop"');
-		expect(markup).toContain(
-			'<div aria-hidden="true" class="anchored-child-backdrop" data-child-backdrop="true"></div>',
-		);
-		expect(markup).toContain('data-child-backdrop="true"');
-		expect(closing).not.toContain("data-child-backdrop");
-		expect(markup).toContain('data-workspace-room="parent-room"');
-		expect(markup).toContain('data-workspace-room="child-room"');
-		expect(markup).not.toContain("Expand");
+	it("settles a child close when an animation is cancelled", async () => {
+		let cancelled = Promise.reject(new DOMException("The animation was aborted", "AbortError"));
+		cancelled.catch(() => {});
+		let settled = false;
+		await animationsSettled([{ finished: cancelled }, { finished: Promise.resolve() }])
+			.then(() => {
+				settled = true;
+			});
+		expect(settled).toBe(true);
 	});
 
-	it("obscures only the parent paper frame", () => {
-		let markup = renderToStaticMarkup(createElement(Workspace, {
-			chat: createElement("div", null, "Chat"),
-			controls: createElement("div", null, "Controls"),
-			chatActivity: { busy: false, unread: 0 },
-			decisions: createElement("div", null, "Decisions"),
-			header: createElement("header", null, "Parent header"),
-			identity: "parent-room",
-			ids: workspaceIds,
-			mode: "compact",
-			onChatOpen() {},
-			onDesktopChatOpen() {},
-			onDestination() {},
-			plan: createElement("div", null, "Parent paper"),
-			presentation: {
-				childLabel: "Source review",
-				onChildClose() {},
-				type: "parent-with-child",
-			},
-			state: { chatOpen: false, desktopChatOpen: false },
-			unanswered: 0,
-			view: "plan",
+	it("draws a Lift card with a title bar and a Zoom layer without one", () => {
+		let entry = {
+			id: "child-room",
+			label: "Source review",
+			node: createElement("div", { "data-workspace-room": "child-room" }),
+		};
+		let lift = renderToStaticMarkup(createElement(AnchoredChildSurface, {
+			entries: [entry],
+			motion: "lift",
+			onClosed() {},
+			presentation: "open",
 		}));
-		let outer = markup.slice(0, markup.indexOf(">") + 1);
-		let frame = markup.match(/<div[^>]*class="workspace-frame[^"]*"[^>]*>/)?.[0];
-
-		expect(frame).toContain('aria-hidden="true"');
-		expect(frame).toContain('data-paper-obscured="true"');
-		expect(frame).toContain('inert=""');
-		expect(outer).not.toContain("aria-hidden");
-		expect(outer).not.toContain("inert");
-		expect(markup).toContain("Parent header");
-	});
-
-	it("renders a collapsed child Chat toggle before the document controls", () => {
-		let markup = renderToStaticMarkup(createElement(Workspace, {
-			chat: createElement("div", null, "Child chat"),
-			controls: createElement("div", null, "Document controls"),
-			chatActivity: { busy: true, unread: 2 },
-			decisions: createElement("div", null, "Decisions"),
-			header: createElement("header", null, "Child header"),
-			identity: "child-room",
-			ids: workspaceIds,
-			mode: "split",
-			onChatOpen() {},
-			onDesktopChatOpen() {},
-			onDestination() {},
-			plan: createElement("div", null, "Child paper"),
-			presentation: { label: "Source review", onClose() {}, type: "child" },
-			state: { chatOpen: false, desktopChatOpen: false },
-			unanswered: 0,
-			view: "plan",
+		let zoom = renderToStaticMarkup(createElement(AnchoredChildSurface, {
+			entries: [entry],
+			motion: "zoom",
+			onClosed() {},
+			presentation: "open",
 		}));
-		let toolbar = markup.slice(
-			markup.indexOf('data-document-toolbar="true"'),
-			markup.indexOf('data-document-view="plan"'),
-		);
 
-		expect(markup).toContain("Child chat");
-		expect(markup).toContain('aria-label="Show chat, Planner working"');
-		expect(markup).toContain('aria-label="Close Source review"');
-		expect(toolbar).toContain('aria-label="Show chat, Planner working"');
-		expect(toolbar).toContain('aria-label="Close Source review"');
-		expect(toolbar.indexOf("Show chat")).toBeLessThan(toolbar.indexOf("Document controls"));
-		expect(toolbar.indexOf("Show chat")).toBeLessThan(
-			toolbar.indexOf("Close Source review"),
-		);
-		expect(markup.indexOf("<main")).toBeLessThan(markup.indexOf("<aside"));
+		expect(lift).toContain('class="anchored-child-layer" data-child-motion="lift"');
+		expect(lift).toContain('style="--level:1;--depth:1"');
+		expect(lift).toContain('aria-label="Child document: Source review"');
+		expect(lift).toContain('<div class="anchored-child-title">');
+		expect(lift).toContain(">Source review</span>");
+		expect(zoom).not.toContain("anchored-child-title");
+		expect(zoom).not.toContain("anchored-child-shadow");
+		expect(zoom).toContain('data-workspace-room="child-room"');
 	});
 
 	let splitProps = {
@@ -373,6 +313,83 @@ describe("anchored child lifecycle", () => {
 		view: "plan" as const,
 	};
 
+	let withChild = (
+		motion: "lift" | "zoom",
+		view: "plan" | "decisions" = "plan",
+		expanded = false,
+	) =>
+		renderToStaticMarkup(createElement(Workspace, {
+			...splitProps,
+			controls: createElement("button", { type: "button" }, "Decisions"),
+			presentation: {
+				child: createElement("div", { "data-layer": "" }, "Child layer"),
+				childState: "open",
+				motion,
+				onChildClose() {},
+				path: [{ id: "room", label: "Root" }, { id: "child-room", label: "Source review" }],
+				type: "parent-with-child",
+			},
+			state: { chatOpen: false, desktopChatOpen: !expanded },
+			view,
+		}));
+
+	it("Lift covers the root sheet below its tab row and leaves Chat and the top bar live", () => {
+		let markup = withChild("lift");
+		let main = markup.match(/<main[^>]*>/)?.[0];
+		let swap = markup.match(/<div[^>]*data-workspace-document-swap[^>]*>/)?.[0];
+		let toolbar = markup.match(/<div[^>]*data-document-toolbar[^>]*>/)?.[0];
+		let stack = markup.slice(markup.indexOf("workspace-document-stack"), markup.indexOf("<aside"));
+
+		expect(markup).toContain('data-child-motion="lift"');
+		expect(main).toContain('data-child-covered="true"');
+		expect(swap).toContain('inert=""');
+		expect(toolbar).not.toContain("inert");
+		expect(toolbarOf(markup)).toContain("People here: ana");
+		expect(stack).toContain("workspace-child-scrim");
+		expect(stack.indexOf("</main>")).toBeLessThan(stack.indexOf("Child layer"));
+		expect(markup).not.toContain('aria-label="Document stack"');
+		expect(markup.match(/<aside[^>]*>/)?.[0]).not.toContain("inert");
+		expect(markup).not.toMatch(/<div[^>]*class="workspace-frame[^"]*"[^>]*inert/);
+		expect(markup).not.toContain("data-paper-obscured");
+	});
+
+	it("Lift makes the peeking tab row itself a keyboard control back to the root", () => {
+		let toolbar = toolbarOf(withChild("lift"));
+		let back = toolbar.match(/<button[^>]*aria-label="Back to Root"[^>]*>/)?.[0];
+
+		expect(back).toBeDefined();
+		expect(back).toContain("workspace-tab-row-return");
+		expect(back).not.toContain("tabindex");
+		expect(toolbar.indexOf("Back to Root")).toBeLessThan(toolbar.indexOf(">Decisions<"));
+		expect(toolbarOf(withChild("zoom"))).not.toContain("workspace-tab-row-return");
+	});
+
+	it("keeps the top bar visible over an expanded root while a child is open", () => {
+		let markup = withChild("lift", "plan", true);
+		let slot = markup.match(/<div[^>]*class="workspace-header-slot[^"]*"[^>]*>/)?.[0];
+
+		expect(markup).toContain('data-document-expanded="true"');
+		expect(markup).not.toContain("data-header-hidden");
+		expect(slot).not.toContain("inert");
+	});
+
+	it("Zoom keeps the root tabs and stack bar live and hides the child off Document", () => {
+		let document = withChild("zoom");
+		let decisions = withChild("zoom", "decisions");
+		let plan = document.match(/<section[^>]*data-document-view="plan"[^>]*>/)?.[0];
+
+		expect(document).toContain('aria-label="Document stack"');
+		expect(document).toContain('aria-label="Back to Root"');
+		expect(document).toContain('aria-current="page">Source review<');
+		expect(plan).toContain("data-child-recede");
+		expect(plan).toContain('inert=""');
+		expect(document.match(/<main[^>]*>/)?.[0]).not.toContain("data-child-covered");
+		expect(decisions.match(/<div[^>]*workspace-child-slot[^>]*>/)?.[0]).toContain("hidden");
+		// Off Document the bar stays, and its child crumb becomes a button back to Document.
+		expect(decisions).toContain('aria-label="Document stack"');
+		expect(decisions).toMatch(/<button aria-current="page"[^>]*><span[^>]*>Source review</);
+	});
+
 	it("orders the tab row expand, tabs, presence, with no Chat header", () => {
 		let markup = renderToStaticMarkup(createElement(Workspace, {
 			...splitProps,
@@ -411,71 +428,6 @@ describe("anchored child lifecycle", () => {
 		expect(markup).not.toContain('aria-label="Resize chat"');
 	});
 
-	it("gives a compact child all three workspace destinations", () => {
-		let markup = renderToStaticMarkup(createElement(Workspace, {
-			chat: createElement("div", null, "Child chat"),
-			controls: createElement("div", null, "Document controls"),
-			chatActivity: { busy: false, unread: 0 },
-			decisions: createElement("div", null, "Decisions"),
-			header: createElement("header", null, "Child header"),
-			identity: "child-room",
-			ids: workspaceIds,
-			mode: "compact",
-			onChatOpen() {},
-			onDesktopChatOpen() {},
-			onDestination() {},
-			plan: createElement("div", null, "Child paper"),
-			presentation: { label: "Source review", onClose() {}, type: "child" },
-			state: { chatOpen: false, desktopChatOpen: false },
-			unanswered: 0,
-			view: "plan",
-		}));
-		let navigation = markup.slice(
-			markup.indexOf('aria-label="Workspace view"'),
-			markup.indexOf("</nav>"),
-		);
-
-		expect(navigation).toContain("grid-cols-3");
-		expect(navigation).toContain(">Chat<");
-		expect(navigation).toContain(">Document<");
-		expect(navigation).toContain(">Decisions<");
-	});
-
-	it("offers an X close control only inside a child document toolbar", () => {
-		let base = {
-			controls: createElement("div", null, "Document controls"),
-			chatActivity: { busy: false, unread: 0 },
-			decisions: createElement("div", null, "Decisions"),
-			header: createElement("header", null, "Workspace header"),
-			ids: workspaceIds,
-			mode: "split" as const,
-			onChatOpen() {},
-			onDesktopChatOpen() {},
-			onDestination() {},
-			plan: createElement("div", null, "Paper"),
-			state: { chatOpen: false, desktopChatOpen: false },
-			unanswered: 0,
-			view: "plan" as const,
-		};
-		let child = renderToStaticMarkup(createElement(Workspace, {
-			...base,
-			identity: "child-room",
-			presentation: { label: "Source review", onClose() {}, type: "child" },
-		}));
-		let parent = renderToStaticMarkup(createElement(Workspace, {
-			...base,
-			identity: "parent-room",
-			presentation: { type: "document" },
-		}));
-
-		expect(child).toContain('aria-label="Close Source review"');
-		expect(child).toContain('data-child-document-close="true"');
-		expect(child).toContain('<line x1="14" x2="4" y1="4" y2="14"></line>');
-		expect(child).toContain('height="14"');
-		expect(child).toContain('width="14"');
-		expect(parent).not.toContain("data-child-document-close");
-	});
-
 	it("marks an in-app child push without discarding existing history state", () => {
 		expect(childHistoryState({ navigation: 4 }, "/documents/octo-org/score/parent?view=plan#note"))
 			.toEqual({
diff --git a/apps/web/src/hosted.tsx b/apps/web/src/hosted.tsx
index 5bc6e96e0..50b449532 100644
--- a/apps/web/src/hosted.tsx
+++ b/apps/web/src/hosted.tsx
@@ -4,6 +4,7 @@ import { parseChildDocumentPath, parseDocumentPath } from "@chopin/protocol/docu
 
 import * as Api from "./api";
 import { childCloseAction, childFocusTransition, childHistoryState } from "./child-history";
+import { rememberOriginRect } from "./child-origin";
 import { documentRouteIdentity, transitionDocumentRoute } from "./document-route-swap";
 import { motionContract } from "./motion-contract";
 import { motionImmediately } from "./motion-input";
@@ -71,6 +72,8 @@ type DocumentRouteRequest = {
 export type DocumentRouteResolution = {
 	canonicalPath: string;
 	channel: Api.Channel;
+	/** The route identity this resolution answered, which a canonical rename can change. */
+	requestKey: DocumentRouteIdentity;
 	routeKey: DocumentRouteIdentity;
 };
 type DocumentRouteLayer = DocumentRouteSwapState<
@@ -155,6 +158,7 @@ function Loading({ label = "Loading" }: { label?: string }) {
 function DocumentRouteSwap(
 	{
 		agent,
+		childOrigin,
 		onCanonicalPath,
 		onChildClose,
 		onChildClosing,
@@ -163,6 +167,7 @@ function DocumentRouteSwap(
 		user,
 	}: {
 		agent: boolean;
+		childOrigin: () => Element | undefined;
 		onCanonicalPath: (pathname: string) => void;
 		onChildClose: (parentId: string, parentPath: string, opener?: ResearchOpener) => void;
 		onChildClosing: (parentId: string, parentPath: string) => ChildFocusToken;
@@ -218,8 +223,11 @@ function DocumentRouteSwap(
 	let published = useRef<DocumentRouteResolution | undefined>(undefined);
 	useEffect(() => {
 		let resolution = state.current.resolution;
-		// An outgoing route that resolves after a newer request must not canonicalize over it.
+		// An outgoing route that resolves after a newer request must not canonicalize over it. A
+		// parent and its child share a layer, so a child that resolves after a return to its
+		// parent arrives on the current layer and is told apart by the route it answered.
 		if (!resolution || state.pending || published.current === resolution) return;
+		if (resolution.requestKey !== state.current.routeKey) return;
 		published.current = resolution;
 		onCanonicalPath(resolution.canonicalPath);
 		void onDocumentLoaded(resolution.channel, resolution.routeKey);
@@ -228,6 +236,7 @@ function DocumentRouteSwap(
 		onDocumentLoaded,
 		state.current.key,
 		state.current.resolution,
+		state.current.routeKey,
 		state.pending,
 	]);
 
@@ -257,6 +266,7 @@ function DocumentRouteSwap(
 								<Suspense fallback={<Loading label="Opening document…" />}>
 									<DocumentWorkspaceHost
 										agent={agent}
+										childOrigin={childOrigin}
 										Failure={Failure}
 										layerKey={layer.key}
 										Loading={Loading}
@@ -299,6 +309,9 @@ export function HostedApp(
 	let hostedRouteRef = useRef(route);
 	hostedRouteRef.current = route;
 	let childOpener = useRef<ResearchOpener | undefined>(undefined);
+	// The root document can replace a research card's opener while the child's first commit lays
+	// out, so the clicked element and its rect are kept from the click itself.
+	let childOriginElement = useRef<HTMLElement | undefined>(undefined);
 	let childFocus = useRef<ChildFocusState>({ generation: 0 });
 	let childFocusFrame = useRef<number | undefined>(undefined);
 	let cancelChildFocusFrame = useCallback(() => {
@@ -347,6 +360,8 @@ export function HostedApp(
 				let active = document.activeElement;
 				childOpener.current = options.opener
 					?? { current: active instanceof HTMLElement ? active : null };
+				childOriginElement.current = childOpener.current.current ?? undefined;
+				rememberOriginRect(childOriginElement.current);
 			}
 			if (siblingChild) history.replaceState(history.state, "", next);
 			else if (inAppChild) {
@@ -379,7 +394,10 @@ export function HostedApp(
 			parentPath,
 		});
 		let started = next !== current;
-		if (started) childOpener.current = undefined;
+		if (started) {
+			childOpener.current = undefined;
+			childOriginElement.current = undefined;
+		}
 		return { started, token: { generation: next.generation, parentId } };
 	}, [cancelChildFocusFrame, moveChildFocus]);
 	let closeChild = useCallback((parentId: string, parentPath: string, opener?: ResearchOpener) => {
@@ -430,6 +448,12 @@ export function HostedApp(
 			}
 		});
 	}, [cancelChildFocusFrame, moveChildFocus]);
+	let childOrigin = useCallback(
+		() =>
+			childOpener.current?.current ?? childOriginElement.current
+				?? childFocus.current.attempt?.opener?.current ?? undefined,
+		[],
+	);
 
 	useEffect(() => {
 		let changed = () => {
@@ -465,6 +489,7 @@ export function HostedApp(
 			workspace = (
 				<DocumentRouteSwap
 					agent={agent}
+					childOrigin={childOrigin}
 					onCanonicalPath={canonicalPath}
 					onChildClose={closeChild}
 					onChildClosing={childClosing}
diff --git a/apps/web/src/navigation-chrome.test.ts b/apps/web/src/navigation-chrome.test.ts
index 754b93f3c..07c62cbe5 100644
--- a/apps/web/src/navigation-chrome.test.ts
+++ b/apps/web/src/navigation-chrome.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test";
-import { ChevronIcon, DocumentIcon } from "@chopin/icons";
+import { DocumentIcon } from "@chopin/icons";
 import { createElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 
@@ -179,7 +179,6 @@ describe("the Figma navigation chrome", () => {
 			onAction() {},
 			onEditingChange() {},
 			onRenamed() {},
-			presentation: { type: "document" },
 			room: "room-one",
 		}));
 		let members = renderToStaticMarkup(createElement(RoomMembers, {
@@ -201,7 +200,6 @@ describe("the Figma navigation chrome", () => {
 			onAction: () => {},
 			onEditingChange: () => {},
 			onRenamed: () => {},
-			presentation: { type: "document" as const },
 			room: "room-one",
 		};
 		let markup = renderToStaticMarkup(createElement(Header, props));
@@ -232,7 +230,6 @@ describe("the Figma navigation chrome", () => {
 			onAction() {},
 			onEditingChange() {},
 			onRenamed() {},
-			presentation: { type: "document" },
 			room: "room-one",
 		}));
 
@@ -243,34 +240,6 @@ describe("the Figma navigation chrome", () => {
 		expect(markup).not.toContain(">Save</button>");
 	});
 
-	test("turns the parent title into a child-document breadcrumb", () => {
-		let markup = renderToStaticMarkup(createElement(Header, {
-			canManage: true,
-			label: "Release plan",
-			members: [{ handle: "MaggieAppleton", client: "tab-one" }],
-			onAction() {},
-			onEditingChange() {},
-			onRenamed() {},
-			room: "room-one",
-			presentation: {
-				childLabel: "Source review",
-				onChildClose() {},
-				type: "parent-with-child",
-			},
-		}));
-
-		expect(markup).not.toContain('aria-label="Back to Release plan"');
-		expect(markup).toContain('aria-label="Return to Release plan"');
-		expect(markup).toContain('aria-label="Child document: Source review"');
-		expect(markup).toContain('aria-label="People here: MaggieAppleton"');
-		expect(markup).not.toContain('aria-label="Actions for Release plan"');
-		expect(markup).toContain(renderToStaticMarkup(createElement(ChevronIcon, {
-			className: "document-breadcrumb-separator shrink-0",
-		})));
-		expect(markup).toContain('class="document-breadcrumb-separator shrink-0"');
-		expect(markup).not.toContain(">›</span>");
-	});
-
 	test("labels archived headers while keeping management actions from viewers", () => {
 		let props = {
 			archivedAt: "2026-08-23T00:00:00.000Z",
@@ -279,7 +248,6 @@ describe("the Figma navigation chrome", () => {
 			onAction: () => {},
 			onEditingChange: () => {},
 			onRenamed: () => {},
-			presentation: { type: "document" as const },
 			room: "room-one",
 		};
 		let manager = renderToStaticMarkup(createElement(Header, { ...props, canManage: true }));
diff --git a/apps/web/src/navigation.css b/apps/web/src/navigation.css
index bceb79cb4..ec4ee9b10 100644
--- a/apps/web/src/navigation.css
+++ b/apps/web/src/navigation.css
@@ -50,138 +50,215 @@
 
 /* With the top bar hidden, the sheet clears the floating Show sidebar trigger itself. */
 .navigation-content[data-project-sidebar-trigger]
-	.workspace-root[data-document-expanded]:not(.anchored-child-surface .workspace-root)
+	.workspace-root[data-document-expanded]
 	> .workspace-frame {
 	/* Padding, not margin: the frame's width picks split or compact and must not shrink here. */
 	padding-left: calc(44px - var(--spacing) * 3);
 }
 
-.anchored-child-host,
-.anchored-child-parent {
+.anchored-child-host {
 	position: relative;
 	height: 100%;
 	min-height: 0;
 }
 
-/* A calm dim over the live parent; opacity is the only thing that animates. */
-.anchored-child-parent::after {
-	content: "";
+.workspace-child-slot {
 	position: absolute;
 	z-index: 20;
-	inset: var(--document-shell-header-height) 0 0;
-	background: color-mix(in srgb, var(--color-text-primary) 12%, transparent);
-	opacity: 0;
+	inset: 0;
 	pointer-events: none;
-	transition: opacity var(--modal-close-dur) var(--motion-smooth-out);
 }
 
-.anchored-child-host[data-child-visible] .anchored-child-parent::after {
-	opacity: 1;
-	transition-duration: var(--modal-open-dur);
+.anchored-child-layer {
+	position: absolute;
+	inset: 0;
 }
 
-.anchored-child-host[data-child-presentation="closing"] .anchored-child-parent::after {
-	opacity: 0;
-	transition-duration: var(--modal-close-dur);
+.anchored-child-card,
+.anchored-child-shadow {
+	position: absolute;
+	inset: calc(
+		min(var(--level, 1), 1) * var(--panel-header-height) +
+			max(var(--level, 1) - 1, 0) * var(--child-bar-height)
+	) 0 0;
+	border-radius: var(--radius-panel);
+	pointer-events: auto;
 }
 
-.anchored-child-backdrop {
-	position: absolute;
-	z-index: 30;
-	inset: var(--document-shell-header-height) 0 0;
-	background: transparent;
-	cursor: pointer;
-	touch-action: manipulation;
+.anchored-child-shadow {
+	box-shadow: var(--shadow-overlay);
+	outline: var(--edge-width) solid var(--color-edge);
+	pointer-events: none;
+	transform-origin: 0 0;
 }
 
-/* The sheet is the only frame; the child workspace fills it edge to edge. */
-.anchored-child-surface {
-	position: absolute;
-	z-index: 40;
-	inset: calc(var(--document-shell-header-height) + 12px) 24px 24px;
+.anchored-child-card {
 	overflow: hidden;
-	border: var(--edge-width) solid var(--color-edge);
-	border-radius: var(--radius-xl);
 	background: var(--color-page);
-	box-shadow: var(--shadow-overlay);
-	transform-origin: 50% 100%;
-	animation: anchored-child-enter var(--modal-open-dur) var(--modal-ease) both;
 }
 
-.anchored-child-host[data-child-presentation="closing"] .anchored-child-surface {
-	animation: anchored-child-exit var(--modal-close-dur) var(--modal-ease) both;
+.anchored-child-content {
+	display: flex;
+	height: 100%;
+	flex-direction: column;
 }
 
-.anchored-child-surface .room-header {
-	display: none;
+.anchored-child-content > :last-child {
+	min-height: 0;
+	flex: 1;
 }
 
-.anchored-child-surface > [data-workspace-surface="child"] {
-	background: transparent;
+.anchored-child-face {
+	position: absolute;
+	margin: 0;
+	pointer-events: none;
 }
 
-.anchored-child-surface .workspace-root .workspace-frame,
-.anchored-child-surface
-	.workspace-root[data-workspace-mode="split"][data-workspace-mode="split"]
-	.workspace-frame {
-	margin: 0;
-	border-radius: 0;
-	box-shadow: none;
+.anchored-child-title {
+	display: flex;
+	height: var(--child-bar-height);
+	flex-shrink: 0;
+	align-items: center;
+	gap: 0.5rem;
+	padding-inline: 1rem;
+	border-bottom: var(--edge-width) solid var(--color-divider);
+	background: var(--color-page);
+	color: var(--color-text-primary);
+	font-size: var(--text-xs);
+	font-weight: 500;
 }
 
-/* The child sheet is already paper; its workspace keeps no second sheet or header gap. */
-.anchored-child-surface .workspace-root.workspace-root .workspace-document-panel {
-	margin-top: 0;
-	border-radius: 0;
-	box-shadow: none;
+.anchored-child-title svg {
+	flex-shrink: 0;
+	color: var(--color-text-tertiary);
 }
 
-.anchored-child-surface .workspace-root.workspace-root .workspace-chat-panel {
-	padding-top: 0;
+.anchored-child-title span {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
-@keyframes anchored-child-enter {
-	from {
-		opacity: 0;
-		transform: translateY(var(--drawer-distance)) scale(var(--modal-scale));
-	}
-	to {
-		opacity: 1;
-		transform: none;
-	}
+/* Lift: the root sheet recedes about its top centre; only what is under its tab row dims. */
+.workspace-root.workspace-root
+	.workspace-document-stack[data-child-motion="lift"]
+	> .workspace-document-panel {
+	transform-origin: top center;
+	transition: transform var(--child-close-dur) var(--child-ease);
 }
 
-@keyframes anchored-child-exit {
-	from {
-		opacity: 1;
-		transform: none;
-	}
-	to {
+.workspace-root.workspace-root
+	.workspace-document-stack
+	> .workspace-document-panel[data-child-covered] {
+	transform: scale(calc(1 - var(--child-recede-step)));
+	cursor: pointer;
+	transition-duration: var(--child-open-dur);
+}
+
+.workspace-child-scrim {
+	position: absolute;
+	inset: var(--panel-header-height) 0 0;
+	background: var(--color-ground);
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity var(--child-close-dur) var(--child-ease);
+}
+
+/* The dim trails the grow slightly and lands with it. */
+.workspace-document-panel[data-child-covered] > .workspace-child-scrim {
+	opacity: var(--child-scrim-opacity);
+	transition-duration: var(--child-scrim-dur);
+	transition-delay: var(--child-scrim-lag-dur);
+}
+
+.workspace-document-panel[data-child-covered] [data-document-toolbar] {
+	color: var(--color-text-secondary);
+}
+
+/* Zoom: a slim stack bar under the tabs; the root's plan pushes in towards the opener. The bar
+ * overlays the plan rather than sitting in flow, so the plan never shifts as it comes and goes. */
+.workspace-stack-bar {
+	position: absolute;
+	z-index: 1;
+	top: var(--panel-header-height);
+	height: var(--child-bar-height);
+	padding-inline: var(--panel-toolbar-padding-inline);
+	background: var(--color-page);
+	inset-inline: 0;
+	transition: opacity var(--child-close-dur) var(--child-ease);
+
+	@starting-style {
 		opacity: 0;
-		transform: translateY(var(--drawer-distance)) scale(var(--modal-scale-close));
 	}
 }
 
-@media (max-width: 1197px) {
-	.anchored-child-surface {
-		inset: var(--document-shell-header-height) 0 0;
-		border: 0;
-		border-radius: 0;
-		box-shadow: none;
-	}
+.workspace-root[data-workspace-mode="compact"] .workspace-stack-bar {
+	top: 0;
+}
+
+.workspace-stack-bar[data-closing] {
+	opacity: 0;
+}
+
+/* Off Document the bar stays over the root's view, which steps down beneath it. */
+.workspace-document-panel[data-child-stack]
+	:is([data-document-view="decisions"], [data-document-view="build"]) {
+	padding-top: var(--child-bar-height);
+}
+
+.workspace-stack-path [aria-current] {
+	color: var(--color-text-primary);
+	font-weight: 500;
+}
+
+.workspace-document-stack[data-child-motion="zoom"] [data-document-view="plan"] {
+	transition:
+		opacity var(--child-close-dur) var(--child-ease),
+		transform var(--child-close-dur) var(--child-ease);
+}
+
+.workspace-document-stack [data-document-view="plan"][data-child-recede] {
+	opacity: 0;
+	transform: scale(var(--child-zoom-push));
+	transition-duration: var(--child-open-dur);
+}
+
+.workspace-document-stack[data-child-motion="zoom"] .anchored-child-card {
+	inset: calc(var(--panel-header-height) + var(--child-bar-height)) 0 0;
+	border-radius: 0 0 var(--radius-panel) var(--radius-panel);
+}
+
+/* Compact has no tab row to peek, so a Lift child takes Zoom's stack-bar chrome. */
+.workspace-root[data-workspace-mode="compact"] .workspace-document-stack .anchored-child-card {
+	inset: var(--child-bar-height) 0 0;
+	border-radius: 0;
+}
+
+.workspace-document-stack:not([data-child-motion="lift"])
+	:is(.anchored-child-title, .anchored-child-shadow) {
+	display: none;
 }
 
 @media (prefers-reduced-motion: reduce) {
-	.anchored-child-parent::after {
+	.workspace-root.workspace-root .workspace-document-stack > .workspace-document-panel,
+	.workspace-child-scrim,
+	.workspace-stack-bar,
+	.workspace-document-stack [data-document-view="plan"] {
 		transition: none;
 	}
 
-	.anchored-child-surface {
-		animation-name: anchored-child-fade;
-		animation-duration: var(--duration-fast);
+	.workspace-root.workspace-root
+		.workspace-document-stack
+		> .workspace-document-panel[data-child-covered],
+	.workspace-document-stack [data-document-view="plan"][data-child-recede] {
+		transform: none;
 	}
 
-	.anchored-child-host[data-child-presentation="closing"] .anchored-child-surface {
+	.anchored-child-card {
+		animation: anchored-child-fade var(--duration-fast) var(--modal-ease) both;
+	}
+
+	.anchored-child-host[data-child-presentation="closing"] .anchored-child-card {
 		animation-name: anchored-child-fade-out;
 	}
 
@@ -1367,13 +1444,6 @@
 	white-space: nowrap;
 }
 
-.document-parent-breadcrumb {
-	flex: 0 1 auto;
-	justify-content: flex-start;
-	font-weight: 500;
-	color: var(--color-text-secondary);
-}
-
 .document-project-prefix {
 	min-width: 0;
 	max-width: var(--label-measure-compact);
@@ -1395,17 +1465,6 @@
 	}
 }
 
-.document-breadcrumb-separator {
-	opacity: var(--opacity-quiet);
-}
-
-.document-child-breadcrumb {
-	min-width: 0;
-	flex: 1 1 auto;
-	font-weight: 400;
-	color: var(--color-text-primary);
-}
-
 /* A research child's provenance reads like the research card's own status line. */
 .child-provenance-line {
 	display: flex;
diff --git a/apps/web/src/room-workspace.tsx b/apps/web/src/room-workspace.tsx
index cc1e57e8d..b019824fe 100644
--- a/apps/web/src/room-workspace.tsx
+++ b/apps/web/src/room-workspace.tsx
@@ -77,7 +77,7 @@ import type { HostedWorkspaceProps } from "./hosted";
 import type { Status } from "./wire";
 import type { ChatDestination } from "./conversation-plan/source";
 import type { SourceDestination } from "./conversation-plan/card-parts";
-import type { WorkspaceDocumentView, WorkspacePresentation } from "./workspace-model";
+import type { WorkspaceDocumentView } from "./workspace-model";
 
 type ManagedHello = Session.Hello & { archivedAt?: string; canManage: boolean };
 type ManagedChannel = Session.Channel & { archivedAt?: string; canManage: boolean };
@@ -143,7 +143,6 @@ export function Header(
 		onAction,
 		onEditingChange,
 		onRenamed,
-		presentation,
 		project,
 		room,
 	}: {
@@ -155,7 +154,6 @@ export function Header(
 		onAction: (action: DocumentAction) => void;
 		onEditingChange: (editing?: TitleEdit) => void;
 		onRenamed: (channel: DocumentMetadata) => void;
-		presentation: WorkspacePresentation;
 		project?: { id: string; name: string };
 		room: string;
 	},
@@ -188,7 +186,7 @@ export function Header(
 				className="flex min-w-0 flex-1 items-center gap-0.5"
 			>
 				<DocumentIcon className="shrink-0" />
-				{project && presentation.type !== "parent-with-child" && (
+				{project && (
 					<>
 						<span className="document-project-prefix truncate text-xs font-medium">
 							{project.name}
@@ -196,80 +194,55 @@ export function Header(
 						<span aria-hidden="true" className="document-project-separator text-xs">/</span>
 					</>
 				)}
-				{presentation.type === "parent-with-child"
-					? (
-						<>
+				<div className="title-control min-w-0 text-xs font-medium">
+					{editing && canManage && !archivedAt
+						? (
+							<DocumentRename
+								channel={{ id: room, title: label }}
+								inline
+								onCancel={finishEdit}
+								replay={editing === "new"}
+								onRenamed={detail => {
+									onRenamed(detail.channel);
+									finishEdit();
+								}}
+							/>
+						)
+						: canManage && !archivedAt
+						? (
 							<button
-								aria-label={`Return to ${label}`}
-								className="document-parent-breadcrumb btn btn-compact btn-ghost min-w-0"
-								onClick={presentation.onChildClose}
+								aria-label={`Rename ${label}`}
+								className="title-control-label document-title-trigger"
+								onClick={() => onEditingChange("rename")}
+								onKeyDown={event => {
+									if (event.key !== "F2") return;
+									event.preventDefault();
+									onEditingChange("rename");
+								}}
+								ref={title}
 								type="button"
 							>
 								<span className="truncate">{label}</span>
 							</button>
-							<ChevronIcon
-								aria-hidden="true"
-								className="document-breadcrumb-separator shrink-0"
-							/>
-							<span
-								aria-label={`Child document: ${presentation.childLabel}`}
-								className="document-child-breadcrumb truncate text-xs"
-							>
-								{presentation.childLabel}
-							</span>
-						</>
-					)
-					: (
-						<div className="title-control min-w-0 text-xs font-medium">
-							{editing && canManage && !archivedAt
-								? (
-									<DocumentRename
-										channel={{ id: room, title: label }}
-										inline
-										onCancel={finishEdit}
-										replay={editing === "new"}
-										onRenamed={detail => {
-											onRenamed(detail.channel);
-											finishEdit();
-										}}
-									/>
-								)
-								: canManage && !archivedAt
-								? (
-									<button
-										aria-label={`Rename ${label}`}
-										className="title-control-label document-title-trigger"
-										onClick={() => onEditingChange("rename")}
-										onKeyDown={event => {
-											if (event.key !== "F2") return;
-											event.preventDefault();
-											onEditingChange("rename");
-										}}
-										ref={title}
-										type="button"
-									>
-										<span className="truncate">{label}</span>
-									</button>
-								)
-								: <span className="title-control-label truncate">{label}</span>}
-							{canManage && (
-								<DocumentActionsMenu
-									align="start"
-									channel={{ archivedAt, title: label }}
-									className="title-control-action"
-									onAction={action =>
-										action === "rename" ? onEditingChange("rename") : onAction(action)}
-									trigger={
-										<ChevronIcon
-											aria-hidden="true"
-											className="rotate-90"
-											size={12}
-										/>
-									}
+						)
+						: <span className="title-control-label truncate">{label}</span>}
+					{canManage && (
+						<DocumentActionsMenu
+							align="start"
+							channel={{ archivedAt, title: label }}
+							className="title-control-action"
+							onAction={action =>
+								action === "rename" ? onEditingChange("rename") : onAction(action)}
+							trigger={
+								<ChevronIcon
+									aria-hidden="true"
+									className="rotate-90"
+									size={12}
 								/>
-							)}
-						</div>
+							}
+						/>
 					)}
+				</div>
 				{archivedAt && (
 					<span className="document-archived-status">
 						<Badge icon={ArchiveIcon} label="Archived" size="sm" textSize="2xs" tone="warning" />
@@ -509,6 +482,10 @@ export function RoomWorkspace(
 	let latestBusy = useRef(chatActivity.busy);
 	latestBusy.current = chatActivity.busy;
 	let [documentWatch, setDocumentWatch] = useState(QUIET_DOCUMENT);
+	// Read through a ref: the host's callback changes as its route does, and the socket below must
+	// not reconnect (remounting the editor and losing its scroll) when a child opens over it.
+	let latestMetadataChanged = useRef(onMetadataChanged);
+	latestMetadataChanged.current = onMetadataChanged;
 	let updateMetadata = useCallback((next: WorkspaceMetadata) => {
 		let previous = metadataRef.current;
 		let metadata = newestDocumentMetadata(previous, next);
@@ -521,8 +498,8 @@ export function RoomWorkspace(
 			currentRepository,
 		);
 		onDocumentChanged(room, metadata);
-		if (onMetadataChanged) {
-			onMetadataChanged(metadata);
+		if (latestMetadataChanged.current) {
+			latestMetadataChanged.current(metadata);
 			return;
 		}
 		let previousPath = documentPath(
@@ -536,7 +513,7 @@ export function RoomWorkspace(
 		if (location.pathname !== path) {
 			history.replaceState(history.state, "", `${path}${location.search}${location.hash}`);
 		}
-	}, [onDocumentChanged, onMetadataChanged, room, userId]);
+	}, [onDocumentChanged, room, userId]);
 
 	useEffect(() => {
 		setDecisionView(state => advanceDecisionView(state, hasPlanContent, unanswered));
@@ -843,7 +820,7 @@ export function RoomWorkspace(
 		setWire(socket);
 
 		let off = [
-			conversationStore.listen(socket),
+			...(profile.chat ? [conversationStore.listen(socket)] : []),
 			socket.on<ManagedHello>("session:hello", frame => {
 				let editable = frame.canEdit && !frame.archivedAt;
 				let accessChanged = latestCanEdit.current !== editable
@@ -899,6 +876,7 @@ export function RoomWorkspace(
 		research,
 		researchEnabled,
 		room,
+		profile.chat,
 		profile.surface,
 		threads,
 		cardMeta,
@@ -975,6 +953,129 @@ export function RoomWorkspace(
 	let acceptedComments =
 		threadState.threads.filter(item => item.thread.status === "accepted" && !item.applied).length;
 
+	let statusNotices = (
+		<>
+			{!!planState.lost && planState.lost !== lostSeen && (
+				<div className="plan-status" data-level="alert" role="alert">
+					<span className="plan-status-text">
+						<span
+							aria-hidden="true"
+							className="plan-status-label"
+							data-tooltip={LOST_EDITS}
+							data-tooltip-verbatim=""
+						>
+							Edits not saved
+						</span>
+						<span aria-hidden="true" className="plan-status-detail">{LOST_EDITS}</span>
+						<span className="sr-only">{LOST_EDITS}</span>
+					</span>
+					<button
+						className="btn btn-sm btn-ghost"
+						onClick={() =>
+							setLostSeen(planState.lost ?? 0)}
+						type="button"
+					>
+						Dismiss
+					</button>
+				</div>
+			)}
+			{/* Apart from PlanStatus, which would announce its end as "Reconnected". */}
+			{planState.refused && (
+				<div className="plan-status" data-level="notice">
+					<span aria-hidden="true" className="plan-status-dot" />
+					<span aria-hidden="true" className="plan-status-text">
+						<span
+							className="plan-status-label"
+							data-tooltip={UNDO_REFUSALS[planState.refused.reason]}
+							data-tooltip-verbatim=""
+						>
+							Can't undo
+						</span>
+						<span className="plan-status-detail">
+							{UNDO_REFUSALS[planState.refused.reason]}
+						</span>
+					</span>
+				</div>
+			)}
+			<span aria-atomic="true" aria-live="polite" className="sr-only" role="status">
+				{planState.refused && `Can't undo. ${UNDO_REFUSALS[planState.refused.reason]}`}
+			</span>
+			<PlanStatus
+				connection={status === "deleted" ? "closed" : treatAsConnected ? undefined : status}
+				failed={planState.failed}
+				onReconnect={wire && reconnects < RECONNECTS_BEFORE_RELOAD
+					? () => {
+						setReconnects(count => count + 1);
+						wire.reconnect();
+					}
+					: undefined}
+				synced={planState.synced}
+			/>
+		</>
+	);
+	let plan = (
+		<GitHubReferencesProvider value={githubReferences}>
+			<PlanEditor
+				experiments={experiments}
+				afterword={
+					<InlineInvestigations
+						store={experiments}
+						userId={userId}
+						canEdit={!!workspaceCanEdit && status === "connected"}
+						locked={implementation.locked}
+					/>
+				}
+				cardMeta={cardMeta}
+				evidence={showEvidence}
+				onCardSource={showCardSource}
+				hasCardSource={hasCardSource}
+				// A child has no Decisions pane to open, so its decisions stay inline.
+				onShowDecision={presentation.type === "child" ? undefined : showDecision}
+				planner={agent}
+				commentPresentation={mode === "split" ? "popover" : "sheet"}
+				connection={status === "deleted" ? "closed" : status}
+				key={workspaceArchivedAt ? "archived" : "active"}
+				disclosureMotion={motionContract("collapse")}
+				motionImmediately={settleMotionImmediately}
+				onScrollTop={setPlanScrollTop}
+				onState={setPlanState}
+				preface={presentation.type === "child" && presentation.parent
+					? <ChildProvenance channelId={room} parent={presentation.parent} />
+					: undefined}
+				questionMotion={QUESTION_MOTION}
+				questions={questions}
+				readOnly={!workspaceCanEdit || implementation.locked}
+				research={profile.research ? research : undefined}
+				researchLauncher={researchLauncher}
+				scrollTop={planScrollTop}
+				threads={threads}
+				user={user}
+				wire={wire}
+			/>
+		</GitHubReferencesProvider>
+	);
+	if (presentation.type === "child") {
+		return (
+			<div
+				className="child-document flex h-full min-h-0 flex-col bg-page"
+				data-workspace-room={room}
+				data-workspace-surface="child"
+			>
+				<p aria-live="polite" className="sr-only" role="status">
+					<span key={announcement.sequence}>{announcement.text}</span>
+				</p>
+				<div className="child-document-status">{statusNotices}</div>
+				<section
+					aria-label="Document"
+					className="child-document-scroll min-h-0 flex-1"
+					data-document-view="plan"
+				>
+					{plan}
+				</section>
+			</div>
+		);
+	}
+
 	return (
 		<>
 			<p aria-live="polite" className="sr-only" role="status">
@@ -1000,9 +1101,6 @@ export function RoomWorkspace(
 							: !workspaceCanEdit
 							? "You have read-only access to this document."
 							: undefined}
-						emptyNotice={presentation.type === "child"
-							? "Discuss this report here. Messages stay with the report."
-							: undefined}
 						onShowDecisions={() => selectDestination("decisions")}
 						onResearch={researchEnabled ? startResearch : undefined}
 						onShowResearch={showResearchDraft}
@@ -1059,7 +1157,6 @@ export function RoomWorkspace(
 						onAction={action => onDocumentAction(room, action)}
 						onEditingChange={setTitleEdit}
 						onRenamed={updateMetadata}
-						presentation={presentation}
 						project={{ id: repository.id, name: repository.name }}
 						room={room}
 					/>
@@ -1076,66 +1173,7 @@ export function RoomWorkspace(
 						/>
 					</>
 				}
-				status={
-					<>
-						{!!planState.lost && planState.lost !== lostSeen && (
-							<div className="plan-status" data-level="alert" role="alert">
-								<span className="plan-status-text">
-									<span
-										aria-hidden="true"
-										className="plan-status-label"
-										data-tooltip={LOST_EDITS}
-										data-tooltip-verbatim=""
-									>
-										Edits not saved
-									</span>
-									<span aria-hidden="true" className="plan-status-detail">{LOST_EDITS}</span>
-									<span className="sr-only">{LOST_EDITS}</span>
-								</span>
-								<button
-									className="btn btn-sm btn-ghost"
-									onClick={() =>
-										setLostSeen(planState.lost ?? 0)}
-									type="button"
-								>
-									Dismiss
-								</button>
-							</div>
-						)}
-						{/* Apart from PlanStatus, which would announce its end as "Reconnected". */}
-						{planState.refused && (
-							<div className="plan-status" data-level="notice">
-								<span aria-hidden="true" className="plan-status-dot" />
-								<span aria-hidden="true" className="plan-status-text">
-									<span
-										className="plan-status-label"
-										data-tooltip={UNDO_REFUSALS[planState.refused.reason]}
-										data-tooltip-verbatim=""
-									>
-										Can't undo
-									</span>
-									<span className="plan-status-detail">
-										{UNDO_REFUSALS[planState.refused.reason]}
-									</span>
-								</span>
-							</div>
-						)}
-						<span aria-atomic="true" aria-live="polite" className="sr-only" role="status">
-							{planState.refused && `Can't undo. ${UNDO_REFUSALS[planState.refused.reason]}`}
-						</span>
-						<PlanStatus
-							connection={status === "deleted" ? "closed" : treatAsConnected ? undefined : status}
-							failed={planState.failed}
-							onReconnect={wire && reconnects < RECONNECTS_BEFORE_RELOAD
-								? () => {
-									setReconnects(count => count + 1);
-									wire.reconnect();
-								}
-								: undefined}
-							synced={planState.synced}
-						/>
-					</>
-				}
+				status={statusNotices}
 				ids={workspaceIds}
 				identity={room}
 				mode={mode}
@@ -1183,46 +1221,7 @@ export function RoomWorkspace(
 						wire={wire}
 					/>
 				}
-				plan={
-					<GitHubReferencesProvider value={githubReferences}>
-						<PlanEditor
-							experiments={experiments}
-							afterword={
-								<InlineInvestigations
-									store={experiments}
-									userId={userId}
-									canEdit={!!workspaceCanEdit && status === "connected"}
-									locked={implementation.locked}
-								/>
-							}
-							cardMeta={cardMeta}
-							evidence={showEvidence}
-							onCardSource={showCardSource}
-							hasCardSource={hasCardSource}
-							onShowDecision={showDecision}
-							planner={agent}
-							commentPresentation={mode === "split" ? "popover" : "sheet"}
-							connection={status === "deleted" ? "closed" : status}
-							key={workspaceArchivedAt ? "archived" : "active"}
-							disclosureMotion={motionContract("collapse")}
-							motionImmediately={settleMotionImmediately}
-							onScrollTop={setPlanScrollTop}
-							onState={setPlanState}
-							preface={presentation.type === "child" && presentation.parent
-								? <ChildProvenance channelId={room} parent={presentation.parent} />
-								: undefined}
-							questionMotion={QUESTION_MOTION}
-							questions={questions}
-							readOnly={!workspaceCanEdit || implementation.locked}
-							research={profile.research ? research : undefined}
-							researchLauncher={researchLauncher}
-							scrollTop={planScrollTop}
-							threads={threads}
-							user={user}
-							wire={wire}
-						/>
-					</GitHubReferencesProvider>
-				}
+				plan={plan}
 				state={workspace}
 				presentation={presentation}
 				unanswered={unanswered}
diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index 9f17ef2ba..49f1dd1c5 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -627,7 +627,7 @@ body {
 	border-color: var(--color-divider);
 }
 
-.workspace-root[data-workspace-mode="split"] .workspace-frame > main {
+.workspace-root[data-workspace-mode="split"] .workspace-frame > .workspace-document-stack {
 	min-width: 9rem;
 }
 
@@ -675,8 +675,11 @@ body {
 	padding-inline-end: calc(var(--spacing) * 2);
 }
 
-.workspace-root[data-workspace-mode="split"] .workspace-document-panel {
+.workspace-root[data-workspace-mode="split"] .workspace-document-stack {
 	margin-top: calc(var(--spacing) * 3);
+}
+
+.workspace-root[data-workspace-mode="split"] .workspace-document-panel {
 	overflow: hidden;
 	border-radius: var(--radius-panel);
 	background: var(--color-page);
@@ -690,6 +693,29 @@ body {
 	outline-offset: calc(-1 * var(--edge-width));
 }
 
+/*
+ * A covered Lift sheet's tab row is one Back control. The button fills the row beneath its
+ * controls, so a click between tabs and keyboard focus both reach it.
+ */
+[data-document-toolbar]:has(> .workspace-tab-row-return) {
+	position: relative;
+}
+
+[data-document-toolbar]:has(> .workspace-tab-row-return) > * {
+	position: relative;
+}
+
+[data-document-toolbar] > .workspace-tab-row-return {
+	position: absolute;
+	inset: 0;
+	cursor: pointer;
+}
+
+.workspace-tab-row-return:focus-visible {
+	outline: var(--focus-ring-width) solid var(--focus-ring-color);
+	outline-offset: calc(-1 * var(--focus-ring-width));
+}
+
 .workspace-surface-toggle-slot {
 	padding-inline-end: var(--spacing);
 	margin-inline-end: var(--spacing);
diff --git a/apps/web/src/theme.test.ts b/apps/web/src/theme.test.ts
index 57319a26a..8d56e1217 100644
--- a/apps/web/src/theme.test.ts
+++ b/apps/web/src/theme.test.ts
@@ -461,7 +461,23 @@ describe("child document shell", () => {
 			/\.room-header\s*\{[^}]*height:\s*var\(--document-shell-header-height\)/s,
 		);
 		expect(NAVIGATION).toMatch(
-			/@media \(max-width: 1197px\)[^{]*\{.*?\.anchored-child-surface\s*\{[^}]*inset:\s*var\(--document-shell-header-height\) 0 0/s,
+			/\.workspace-root\[data-workspace-mode="compact"\][^{]*\.anchored-child-card\s*\{[^}]*inset:\s*var\(--child-bar-height\) 0 0/s,
 		);
 	});
+
+	it("declares each child motion token once", () => {
+		for (
+			let token of [
+				"--child-open-dur",
+				"--child-close-dur",
+				"--child-scrim-dur",
+				"--child-scrim-lag-dur",
+				"--child-ease",
+				"--child-recede-step",
+				"--child-scrim-opacity",
+				"--child-zoom-push",
+				"--child-bar-height",
+			]
+		) expect(THEME.match(new RegExp(`${token}:`, "g"))?.length).toBe(1);
+	});
 });
diff --git a/apps/web/src/workspace-model.test.ts b/apps/web/src/workspace-model.test.ts
index 27f9efa0e..74695cbb6 100644
--- a/apps/web/src/workspace-model.test.ts
+++ b/apps/web/src/workspace-model.test.ts
@@ -21,6 +21,7 @@ describe("adaptive workspace", () => {
 	it("derives child capabilities from the workspace presentation", () => {
 		expect(workspaceProfile(childPresentation))
 			.toEqual({
+				chat: false,
 				implementation: false,
 				persistChat: false,
 				persistPaneSize: false,
@@ -52,10 +53,11 @@ describe("adaptive workspace", () => {
 		expect(initialDocumentView(workspaceProfile(documentPresentation), "tasks")).toBe("plan");
 	});
 
-	it("limits a child to Document, Decisions, and Chat", () => {
+	it("gives a child no Chat, tabs, or persistence of its own", () => {
 		let capabilities = workspaceProfile(childPresentation);
 
 		expect(capabilities).toEqual({
+			chat: false,
 			implementation: false,
 			persistChat: false,
 			persistPaneSize: false,
@@ -63,15 +65,11 @@ describe("adaptive workspace", () => {
 			research: false,
 			surface: "child",
 		});
-		expect(workspaceDestinations(capabilities.implementation)).toEqual([
-			"chat",
-			"plan",
-			"decisions",
-		]);
 	});
 
 	it("keeps the parent's research and implementation capabilities", () => {
 		expect(workspaceProfile(documentPresentation)).toEqual({
+			chat: true,
 			implementation: true,
 			persistChat: true,
 			persistPaneSize: true,
diff --git a/apps/web/src/workspace-model.ts b/apps/web/src/workspace-model.ts
index 83e953b7b..c85cee85d 100644
--- a/apps/web/src/workspace-model.ts
+++ b/apps/web/src/workspace-model.ts
@@ -1,12 +1,24 @@
+import type { ReactNode } from "react";
 import type { DecisionView, ResearchOpener } from "@chopin/editor";
 
+import type { ChildMotionStyle } from "./child-motion";
+
 export type WorkspaceMode = "compact" | "split";
 
 export type WorkspaceSurface = "document" | "child";
 
 export type WorkspacePresentation =
 	| { type: "document" }
-	| { childLabel: string; onChildClose: () => void; type: "parent-with-child" }
+	| {
+		/** The host's layer, drawn in the root's document stack. */
+		child: ReactNode;
+		childState: "open" | "closing";
+		motion: ChildMotionStyle;
+		onChildClose: () => void;
+		/** Root first, open child last. */
+		path: { id: string; label: string }[];
+		type: "parent-with-child";
+	}
 	| { label: string; onClose: () => void; parent?: ChildParent; type: "child" };
 
 /** The document a child opened from, and a way back to the place that produced it. */
@@ -17,6 +29,8 @@ export type ChildParent = {
 };
 
 export type WorkspaceProfile = {
+	/** Only a root document has a Chat. */
+	chat: boolean;
 	implementation: boolean;
 	persistChat: boolean;
 	persistPaneSize: boolean;
@@ -67,6 +81,7 @@ export function workspaceProfile(
 ): WorkspaceProfile {
 	let child = presentation.type === "child";
 	return {
+		chat: !child,
 		implementation: !child,
 		persistChat: !child,
 		persistPaneSize: !child,
diff --git a/apps/web/src/workspace-sizing.css b/apps/web/src/workspace-sizing.css
index 9f0a32b7e..266d85b56 100644
--- a/apps/web/src/workspace-sizing.css
+++ b/apps/web/src/workspace-sizing.css
@@ -3,7 +3,7 @@
 	margin-right: calc(var(--spacing) * 3 + env(safe-area-inset-right));
 }
 
-.workspace-root[data-workspace-mode="split"] .workspace-frame > .workspace-document-panel {
+.workspace-root[data-workspace-mode="split"] .workspace-frame > .workspace-document-stack {
 	min-width: 450px;
 }
 
diff --git a/apps/web/src/workspace.tsx b/apps/web/src/workspace.tsx
index 04997ca68..9d31a9692 100644
--- a/apps/web/src/workspace.tsx
+++ b/apps/web/src/workspace.tsx
@@ -4,7 +4,7 @@ import { useEffect, useId, useLayoutEffect, useReducer, useRef, useState } from
 import { Count } from "@chopin/editor/count";
 import { ContentSwapLayer } from "@chopin/editor/content-swap";
 import { useTransitionPresence } from "@chopin/editor/transition-presence";
-import { CloseIcon, CollapseIcon, ExpandIcon } from "@chopin/icons";
+import { ArrowLeftIcon, ChevronIcon, CollapseIcon, ExpandIcon } from "@chopin/icons";
 
 import {
 	CHAT_CHOICE_STORAGE_KEY,
@@ -258,12 +258,19 @@ export function Workspace(
 	};
 	let root = useRef<HTMLDivElement>(null);
 	let presentation = presentWorkspace(state, mode, view);
-	let childPresentation = workspacePresentation.type === "child"
+	let nested = workspacePresentation.type === "parent-with-child"
 		? workspacePresentation
 		: undefined;
-	let paperObscured = workspacePresentation.type === "parent-with-child";
-	// A child's own header is hidden, so the parent's carries its breadcrumb and Return control.
-	let headerHidden = presentation.documentExpanded && !paperObscured;
+	let childOpen = !!nested;
+	// The top bar stays while a child is open, so the root's title and actions remain over Chat.
+	let headerHidden = presentation.documentExpanded && !childOpen;
+	let lift = nested?.motion === "lift" && mode === "split";
+	let childClosing = nested?.childState === "closing";
+	let liftCovered = lift && !childClosing;
+	// Compact has no in-sheet tab row to peek, so it always uses the stack bar. It stays on every
+	// view, so a child left open under Decisions or Build is still in sight and one click away.
+	let stackBar = !!nested && !lift;
+	let planCovered = stackBar && view === "plan";
 	let immediately = motionImmediately();
 	let contentSwapMotion = motionContract("content-swap");
 	let chatPresence = useTransitionPresence(
@@ -364,7 +371,7 @@ export function Workspace(
 		if (mode !== "split" || stranded) dismissChat();
 		else onDesktopChatOpen(false);
 	};
-	let chatShortcutEnabled = !!chat && !paperObscured;
+	let chatShortcutEnabled = !!chat;
 	useEffect(() => {
 		if (!chatShortcutEnabled) return;
 		return listenForShortcuts(() => ({ "toggle-chat": () => toggleChat.current() }));
@@ -457,125 +464,208 @@ export function Workspace(
 			)}
 
 			<div
-				aria-hidden={paperObscured || undefined}
 				ref={frame}
 				className={`workspace-frame relative flex min-h-0 flex-1 ${
 					mode === "split"
 						? "mx-3 mb-3"
 						: "m-2 overflow-hidden rounded-panel bg-page shadow-resting ring-hairline"
 				}`}
-				data-paper-obscured={paperObscured || undefined}
-				inert={paperObscured}
 			>
-				<main
-					aria-hidden={!presentation.documentVisible || undefined}
-					className="workspace-document-panel relative min-w-0 w-full flex-1"
+				<div
+					className="workspace-document-stack relative flex min-w-0 flex-1"
+					data-child-motion={nested ? (lift ? "lift" : "zoom") : undefined}
 					hidden={documentPresence.phase === "closed"}
-					inert={!presentation.documentVisible}
 				>
-					<div className="relative flex h-full flex-col overflow-hidden">
-						{mode === "split" && (
-							<div
-								className="panel-header flex shrink-0 items-center overflow-x-auto overflow-y-hidden px-(--panel-toolbar-padding-inline) hairline-b"
-								data-document-toolbar
-								onFocusCapture={event => {
-									if (!(event.target instanceof HTMLElement)) return;
-									let control = event.target.getBoundingClientRect();
-									let toolbar = event.currentTarget.getBoundingClientRect();
-									if (control.left < toolbar.left) {
-										event.currentTarget.scrollLeft += Math.floor(control.left - toolbar.left);
-									} else if (control.right > toolbar.right) {
-										event.currentTarget.scrollLeft += Math.ceil(control.right - toolbar.right);
-									}
-								}}
-							>
-								{chat && (
-									<span className="workspace-surface-toggle-slot flex shrink-0 items-center">
-										<SurfaceToggle
-											activity={chatActivity}
-											buttonRef={edgeTab}
-											controls={ids.pane.chat}
-											expanded={presentation.documentExpanded}
-											onToggle={presentation.documentExpanded ? showDesktopChat : dismissChat}
+					<main
+						aria-hidden={!presentation.documentVisible || undefined}
+						className="workspace-document-panel relative min-w-0 w-full flex-1"
+						data-child-covered={liftCovered || undefined}
+						data-child-stack={stackBar || undefined}
+						inert={!presentation.documentVisible}
+						onClickCapture={liftCovered
+							? event => {
+								// The surface toggle and presence keep their own jobs under a Lift child.
+								let target = event.target instanceof Element ? event.target : undefined;
+								if (
+									target?.closest(".workspace-surface-toggle-slot, [data-toolbar-trailing]")
+								) return;
+								nested!.onChildClose();
+							}
+							: undefined}
+					>
+						<div className="relative flex h-full flex-col overflow-hidden">
+							{mode === "split" && (
+								<div
+									className="panel-header flex shrink-0 items-center overflow-x-auto overflow-y-hidden px-(--panel-toolbar-padding-inline) hairline-b"
+									data-document-toolbar
+									onFocusCapture={event => {
+										if (!(event.target instanceof HTMLElement)) return;
+										let control = event.target.getBoundingClientRect();
+										let toolbar = event.currentTarget.getBoundingClientRect();
+										if (control.left < toolbar.left) {
+											event.currentTarget.scrollLeft += Math.floor(control.left - toolbar.left);
+										} else if (control.right > toolbar.right) {
+											event.currentTarget.scrollLeft += Math.ceil(control.right - toolbar.right);
+										}
+									}}
+								>
+									{lift && (
+										// The covered row is one control: a click anywhere on it, or on a tab, returns
+										// through `<main>`'s capture handler, so this button needs no handler of its own.
+										// It stays mounted and focusable while closing so focus never falls to the body
+										// before it returns to the opener; `inert` would blur it just the same.
+										<button
+											aria-disabled={childClosing || undefined}
+											aria-label={`Back to ${nested!.path[0]!.label}`}
+											className="workspace-tab-row-return"
+											tabIndex={childClosing ? -1 : undefined}
+											type="button"
 										/>
-									</span>
-								)}
-								{controls}
-								<div className="ml-auto flex shrink-0 items-center gap-2 pl-2">
-									{status}
-									{presence}
-									{childPresentation && (
-										<div className="flex shrink-0 items-center">
-											<button
-												aria-label={`Close ${childPresentation.label}`}
-												className="btn btn-icon btn-ghost -mr-1 shrink-0"
-												data-child-document-close
-												data-tooltip="Close document"
-												onClick={childPresentation.onClose}
-												type="button"
-											>
-												<CloseIcon aria-hidden="true" size={14} />
-											</button>
-										</div>
 									)}
+									{chat && (
+										<span className="workspace-surface-toggle-slot flex shrink-0 items-center">
+											<SurfaceToggle
+												activity={chatActivity}
+												buttonRef={edgeTab}
+												controls={ids.pane.chat}
+												expanded={presentation.documentExpanded}
+												onToggle={presentation.documentExpanded ? showDesktopChat : dismissChat}
+											/>
+										</span>
+									)}
+									{controls}
+									<div
+										className="ml-auto flex shrink-0 items-center gap-2 pl-2"
+										data-toolbar-trailing
+									>
+										{status}
+										{presence}
+									</div>
 								</div>
-							</div>
-						)}
-						{mode !== "split" && status && <div className="workspace-status-row">{status}</div>}
-						<div
-							className="workspace-document-swap content-swap-stack relative min-h-0 flex-1"
-							data-workspace-document-swap
-							ref={documentSwap}
-						>
-							<ContentSwapLayer
-								active={presentation.documentVisible && presentation.documentView === "plan"}
-								className="workspace-document-layer min-h-0"
-								immediately={immediately}
-								motion={contentSwapMotion}
-							>
-								<section
-									aria-labelledby={ids.heading.plan}
-									className="h-full min-h-0"
-									data-document-view="plan"
+							)}
+							{stackBar && (
+								<nav
+									aria-label="Document stack"
+									className="workspace-stack-bar hairline-b flex shrink-0 items-center gap-1"
+									data-closing={childClosing || undefined}
+									inert={childClosing || undefined}
 								>
-									<h2 className="sr-only" id={ids.heading.plan} tabIndex={-1}>Document</h2>
-									{plan}
-								</section>
-							</ContentSwapLayer>
-							<ContentSwapLayer
-								active={presentation.documentVisible && presentation.documentView === "decisions"}
-								className="workspace-document-layer min-h-0"
-								immediately={immediately}
-								motion={contentSwapMotion}
+									<button
+										aria-label={`Back to ${nested!.path.at(-2)!.label}`}
+										className="btn btn-icon btn-ghost"
+										onClick={nested!.onChildClose}
+										type="button"
+									>
+										<ArrowLeftIcon aria-hidden="true" size={14} />
+									</button>
+									<ol className="workspace-stack-path flex min-w-0 items-center gap-1 text-xs">
+										{nested!.path.map((entry, index) => (
+											<li className="flex min-w-0 items-center gap-1" key={entry.id}>
+												{index > 0 && <ChevronIcon aria-hidden="true" size={12} />}
+												{index === nested!.path.length - 1
+													? view === "plan"
+														? <span aria-current="page">{entry.label}</span>
+														: (
+															<button
+																aria-current="page"
+																className="btn btn-compact btn-ghost min-w-0"
+																onClick={() => {
+																	onDestination("plan");
+																	requestAnimationFrame(() => {
+																		root.current?.querySelector<HTMLElement>(
+																			".anchored-child-card:last-of-type",
+																		)?.focus({ preventScroll: true });
+																	});
+																}}
+																type="button"
+															>
+																<span className="truncate">{entry.label}</span>
+															</button>
+														)
+													: (
+														<button
+															className="btn btn-compact btn-ghost min-w-0"
+															onClick={nested!.onChildClose}
+															type="button"
+														>
+															<span className="truncate">{entry.label}</span>
+														</button>
+													)}
+											</li>
+										))}
+									</ol>
+								</nav>
+							)}
+							{mode !== "split" && status && (
+								<div className="workspace-status-row" inert={planCovered || undefined}>
+									{status}
+								</div>
+							)}
+							<div
+								className="workspace-document-swap content-swap-stack relative min-h-0 flex-1"
+								data-workspace-document-swap
+								inert={liftCovered || undefined}
+								ref={documentSwap}
 							>
-								<section
-									aria-labelledby={ids.heading.decisions}
-									className="h-full min-h-0"
-									data-document-view="decisions"
+								<ContentSwapLayer
+									active={presentation.documentVisible && presentation.documentView === "plan"}
+									className="workspace-document-layer min-h-0"
+									immediately={immediately}
+									motion={contentSwapMotion}
 								>
-									{decisions}
-								</section>
-							</ContentSwapLayer>
-							{profile.implementation && (
+									<section
+										aria-labelledby={ids.heading.plan}
+										className="h-full min-h-0"
+										data-child-recede={(planCovered && !childClosing) || undefined}
+										data-document-view="plan"
+										inert={planCovered || undefined}
+									>
+										<h2 className="sr-only" id={ids.heading.plan} tabIndex={-1}>Document</h2>
+										{plan}
+									</section>
+								</ContentSwapLayer>
 								<ContentSwapLayer
-									active={presentation.documentVisible && presentation.documentView === "build"}
+									active={presentation.documentVisible && presentation.documentView === "decisions"}
 									className="workspace-document-layer min-h-0"
 									immediately={immediately}
 									motion={contentSwapMotion}
 								>
 									<section
-										aria-labelledby={ids.heading.build}
+										aria-labelledby={ids.heading.decisions}
 										className="h-full min-h-0"
-										data-document-view="build"
+										data-document-view="decisions"
 									>
-										<h2 className="sr-only" id={ids.heading.build} tabIndex={-1}>Build</h2>
-										{build}
+										{decisions}
 									</section>
 								</ContentSwapLayer>
-							)}
+								{profile.implementation && (
+									<ContentSwapLayer
+										active={presentation.documentVisible && presentation.documentView === "build"}
+										className="workspace-document-layer min-h-0"
+										immediately={immediately}
+										motion={contentSwapMotion}
+									>
+										<section
+											aria-labelledby={ids.heading.build}
+											className="h-full min-h-0"
+											data-document-view="build"
+										>
+											<h2 className="sr-only" id={ids.heading.build} tabIndex={-1}>Build</h2>
+											{build}
+										</section>
+									</ContentSwapLayer>
+								)}
+							</div>
 						</div>
-					</div>
-				</main>
+						{/* Always mounted, so the dim can transition in behind a newly opened child. */}
+						{mode === "split" && <div aria-hidden="true" className="workspace-child-scrim" />}
+					</main>
+					{nested && (
+						<div className="workspace-child-slot" hidden={!lift && view !== "plan"}>
+							{nested.child}
+						</div>
+					)}
+				</div>
 				{/* `hidden` preserves pane state and subscriptions after its closing transition. */}
 				{chat && (
 					<aside
diff --git a/e2e/conversation-plan-layout.e2e.ts b/e2e/conversation-plan-layout.e2e.ts
index 4ae949840..46c73ccee 100644
--- a/e2e/conversation-plan-layout.e2e.ts
+++ b/e2e/conversation-plan-layout.e2e.ts
@@ -16,7 +16,7 @@ test("Chat grows to available space and preserves a preferred width across narro
 	await join("ana");
 	let chat = chatPane(page);
 	let handle = page.getByRole("separator", { name: "Resize chat" });
-	let document = page.locator(".workspace-frame > main");
+	let document = page.locator(".workspace-frame > .workspace-document-stack > main");
 	await handle.press("End");
 	let preferred = Number(await handle.getAttribute("aria-valuemax"));
 	expect(preferred).toBeGreaterThan(750);
diff --git a/e2e/implementation-launcher.e2e.ts b/e2e/implementation-launcher.e2e.ts
index 2be225d7b..ae021ecee 100644
--- a/e2e/implementation-launcher.e2e.ts
+++ b/e2e/implementation-launcher.e2e.ts
@@ -407,9 +407,13 @@ test("a child document has no Build view", async ({ seed, join: enter, room, bas
 	let control = page.getByRole("group", { name: "Document view" });
 	await expect(control.getByRole("button", { name: "Build", exact: true })).toBeVisible();
 	await page.goto(child.path);
-	await expect(content(page)).toContainText("A child is never built.");
-	await expect(control.getByRole("button", { name: /^Decisions/ })).toBeVisible();
-	await expect(control.getByRole("button", { name: "Build", exact: true })).toHaveCount(0);
+	// The views belong to the root; the child card has none of its own.
+	let card = page.getByRole("region", { name: /^Child document:/ });
+	await expect(card.getByRole("textbox", { name: "editable markdown" })).toContainText(
+		"A child is never built.",
+	);
+	await expect(card.getByRole("group", { name: "Document view" })).toHaveCount(0);
+	await expect(card.getByRole("button", { name: "Build", exact: true })).toHaveCount(0);
 	await expect(buildView(page)).toHaveCount(0);
 });
 
diff --git a/e2e/research-child-motion.e2e.ts b/e2e/research-child-motion.e2e.ts
new file mode 100644
index 000000000..519ba0b79
--- /dev/null
+++ b/e2e/research-child-motion.e2e.ts
@@ -0,0 +1,376 @@
+import { seedChildChannel } from "./database";
+import {
+	markResearchPublished,
+	seedCompletedResearchWorkspace,
+} from "./research-recovery-database";
+import { expect, test } from "./room";
+import { researchReportSource } from "../apps/server/src/research/publication";
+
+import type { Page } from "@playwright/test";
+
+type Frame = {
+	dim: number;
+	scale: number;
+	left: number;
+	top: number;
+	width: number;
+	opacity: number;
+	at: number;
+	faces: number;
+};
+
+const PARENT = `# Parent document
+
+${Array.from({ length: 12 }, (_, index) => `Parent passage ${index + 1}.`).join("\n\n")}
+`;
+
+async function seedReadyCard(
+	baseURL: string,
+	room: string,
+	seed: (source: string) => Promise<unknown>,
+): Promise<{ title: string }> {
+	let port = Number(new URL(baseURL).port);
+	let title = `Motion research ${room.slice(0, 8)}`;
+	let workspaceId = `workspace-${crypto.randomUUID()}`;
+	let answerJobId = `job-${crypto.randomUUID()}`;
+	let originMessageId = crypto.randomUUID();
+	let brief = "Compare the evidence for a stable research document.";
+	let sources = [{ title: "Primary public source", url: "https://example.com/source" }];
+	let report = {
+		title,
+		summary: "A complete report grounded in the discovered sources.",
+		findings: [{ text: "The source supports the report.", sourceUrls: [sources[0]!.url] }],
+		caveats: ["The evidence has a limited scope."],
+	};
+	let child = await seedChildChannel(
+		port,
+		room,
+		crypto.randomUUID(),
+		title,
+		researchReportSource(report, sources),
+	);
+	await seed(`${PARENT}\n<Research id="${workspaceId}" />\n`);
+	await seedCompletedResearchWorkspace(port, room, {
+		workspaceId,
+		answerJobId,
+		plannerOriginMessageId: originMessageId,
+		question: brief,
+		report: {
+			title,
+			summary: report.summary,
+			finding: report.findings[0]!.text,
+			caveat: report.caveats[0]!,
+			source: sources[0]!,
+		},
+	});
+	await markResearchPublished(port, room, workspaceId, child.id);
+	return { title };
+}
+
+/** Samples the open card's visible (clipped) box, the scrim, and the root's scale each frame. */
+async function sampleFrames(page: Page, ms: number) {
+	await page.evaluate(limit => {
+		let frames: Frame[] = [];
+		Object.assign(window, { __childFrames: frames, __childDone: false });
+		let start = performance.now();
+		let sample = () => {
+			let card = document.querySelector<HTMLElement>(".anchored-child-card");
+			let scrim = document.querySelector<HTMLElement>(".workspace-child-scrim");
+			let root = document.querySelector<HTMLElement>(
+				".workspace-document-stack > .workspace-document-panel",
+			);
+			if (card && scrim && root) {
+				let box = card.getBoundingClientRect();
+				let clip = getComputedStyle(card).clipPath;
+				// Computed insets collapse to the one-, two- or three-value shorthand.
+				let sides = ((/^inset\(([^)]*?)(?: round|\))/.exec(clip)?.[1] ?? "")
+					.match(/-?[\d.]+(?:e-?\d+)?/g) ?? []).map(Number);
+				let [top = 0, right = top, , left = right] = sides;
+				let transform = getComputedStyle(root).transform;
+				frames.push({
+					dim: Number(getComputedStyle(scrim).opacity),
+					scale: transform === "none" ? 1 : new DOMMatrixReadOnly(transform).a,
+					left: box.left + left,
+					top: box.top + top,
+					width: box.width - left - right,
+					opacity: Number(getComputedStyle(card).opacity),
+					at: performance.now() - start,
+					faces: document.querySelectorAll(".anchored-child-face").length,
+				});
+			}
+			if (performance.now() - start < limit) requestAnimationFrame(sample);
+			else Object.assign(window, { __childDone: true });
+		};
+		requestAnimationFrame(sample);
+	}, ms);
+	return async () => {
+		await page.waitForFunction(() => (window as unknown as { __childDone: boolean }).__childDone);
+		return page.evaluate(() => (window as unknown as { __childFrames: Frame[] }).__childFrames);
+	};
+}
+
+async function setup(page: Page, style: "lift" | "zoom" = "lift") {
+	await page.setViewportSize({ width: 1440, height: 900 });
+	await page.addInitScript(value => {
+		try {
+			localStorage.setItem("chopin:dev:child-motion", value);
+		} catch {}
+	}, style);
+}
+
+let stackWidth = (page: Page) =>
+	page.locator(".workspace-document-stack").evaluate(element =>
+		element.getBoundingClientRect().width
+	);
+
+/** Waits until the open motion has fully landed: scrim dimmed, card unclipped, nothing running. */
+let openSettled = (page: Page) =>
+	page.waitForFunction(() => {
+		let card = document.querySelector<HTMLElement>(".anchored-child-card");
+		let scrim = document.querySelector<HTMLElement>(".workspace-child-scrim");
+		if (!card || !scrim) return false;
+		let layer = card.parentElement!;
+		return getComputedStyle(scrim).opacity === "0.45"
+			&& /^(none|inset\(0px 0px 0px 0px)/.test(getComputedStyle(card).clipPath)
+			&& layer.getAnimations({ subtree: true }).length === 0;
+	});
+
+let cards = (page: Page) => page.locator(".anchored-child-card");
+
+test("Lift grows from the research card and the dim trails the grow", async ({ baseURL, join, room, seed, page }) => {
+	await setup(page);
+	let { title } = await seedReadyCard(baseURL!, room, seed);
+	let opened = await join("ana");
+	let card = opened.getByRole("article", { name: "Research" }).filter({ hasText: title });
+	let opener = opened.getByRole("button", { name: `Open ${title}`, exact: true });
+	await expect(opener).toBeVisible();
+	let cardBox = (await card.boundingBox())!;
+	let read = await sampleFrames(opened, 900);
+	await opener.click();
+	await expect(cards(opened)).toHaveCount(1);
+	let frames = await read();
+	expect(frames.length).toBeGreaterThan(10);
+	let first = frames[0]!;
+	let last = frames.at(-1)!;
+	expect(Math.abs(first.top - cardBox.y)).toBeLessThan(Math.abs(last.top - cardBox.y));
+	expect(first.width).toBeLessThan((cardBox.width + last.width) / 2);
+	for (let frame of frames) {
+		if (frame.width <= cardBox.width + 4) expect(frame.dim).toBeLessThan(0.05);
+	}
+	// The dim never leads the grow.
+	for (let frame of frames) {
+		if (frame.at <= 80) expect(frame.dim).toBeLessThan(0.05);
+	}
+	expect(last.dim).toBeCloseTo(0.45, 1);
+	expect(last.scale).toBeCloseTo(0.97, 2);
+	let finalWidth = last.width;
+	expect(finalWidth).toBeGreaterThan(cardBox.width + 100);
+	let progress = (frame: Frame) => (frame.width - cardBox.width) / (finalWidth - cardBox.width);
+	expect(1 - first.scale).toBeLessThanOrEqual(0.03 * Math.max(0, progress(first)) + 0.011);
+	for (let frame of frames) {
+		expect(1 - frame.scale).toBeLessThanOrEqual(0.03 * Math.max(0, progress(frame)) + 0.011);
+	}
+	// The dim, as a share of its final 0.45, never gets ahead of the grow's share.
+	for (let frame of frames) {
+		expect(frame.dim / 0.45).toBeLessThanOrEqual(Math.max(0, progress(frame)) + 0.02);
+	}
+	// Open progress is monotonic within tolerance.
+	for (let index = 1; index < frames.length; index++) {
+		expect(frames[index]!.width).toBeGreaterThanOrEqual(frames[index - 1]!.width - 2);
+	}
+	await expect(opened.getByRole("complementary", { name: "Chat" })).toBeVisible();
+	await expect(opened.locator(".anchored-child-face")).toHaveCount(0);
+});
+
+test("closing mid-grow shrinks from the current frame", async ({ baseURL, join, room, seed, page }) => {
+	await setup(page);
+	let { title } = await seedReadyCard(baseURL!, room, seed);
+	let opened = await join("ana");
+	let opener = opened.getByRole("button", { name: `Open ${title}`, exact: true });
+	await expect(opener).toBeVisible();
+	let read = await sampleFrames(opened, 1200);
+	await opener.click();
+	await expect(cards(opened)).toHaveCount(1);
+	await opened.waitForTimeout(160);
+	await opened.keyboard.press("Escape");
+	await expect(cards(opened)).toHaveCount(0);
+	await expect(opener).toBeFocused();
+	let frames = await read();
+	let width = await stackWidth(opened);
+	for (let index = 1; index < frames.length; index++) {
+		expect(Math.abs(frames[index]!.width - frames[index - 1]!.width)).toBeLessThan(width * 0.2);
+	}
+	expect(Math.max(...frames.map(frame => frame.width))).toBeLessThan(width * 0.98);
+	// Reversal starts from the current frame: after the peak the card only shrinks.
+	let widths = frames.map(frame => frame.width);
+	let peak = widths.indexOf(Math.max(...widths));
+	expect(peak).toBeGreaterThan(2);
+	expect(peak).toBeLessThan(widths.length - 3);
+	for (let index = peak + 1; index < widths.length; index++) {
+		expect(widths[index]!).toBeLessThanOrEqual(widths[index - 1]! + 2);
+	}
+	// At most the opener's frozen face exists mid-motion, never a stack of them.
+	for (let frame of frames) expect(frame.faces).toBeLessThanOrEqual(1);
+	await expect(opened.locator(".anchored-child-face")).toHaveCount(0);
+	await expect(opened.locator("[data-child-presentation=closing]")).toHaveCount(0);
+});
+
+test("browser Back mid-open closes cleanly", async ({ baseURL, join, room, seed, page }) => {
+	await setup(page);
+	let { title } = await seedReadyCard(baseURL!, room, seed);
+	let opened = await join("ana");
+	let opener = opened.getByRole("button", { name: `Open ${title}`, exact: true });
+	await expect(opener).toBeVisible();
+	await opener.click();
+	await expect(cards(opened)).toHaveCount(1);
+	await opened.waitForTimeout(160);
+	await opened.goBack();
+	await expect(cards(opened)).toHaveCount(0);
+	await expect(opener).toBeFocused();
+	await expect(opened.locator(".anchored-child-face")).toHaveCount(0);
+	await expect(opened.locator("[data-child-presentation=closing]")).toHaveCount(0);
+});
+
+test("a settled close lands on the card's settled position", async ({ baseURL, join, room, seed, page }) => {
+	await setup(page);
+	let { title } = await seedReadyCard(baseURL!, room, seed);
+	let opened = await join("ana");
+	let card = opened.getByRole("article", { name: "Research" }).filter({ hasText: title });
+	let opener = opened.getByRole("button", { name: `Open ${title}`, exact: true });
+	await expect(opener).toBeVisible();
+	await opener.click();
+	await expect(cards(opened)).toHaveCount(1);
+	await openSettled(opened);
+	let read = await sampleFrames(opened, 600);
+	await opened.keyboard.press("Escape");
+	await expect(cards(opened)).toHaveCount(0);
+	await expect(opener).toBeFocused();
+	let cardBox = (await card.boundingBox())!;
+	let frames = await read();
+	let last = frames.at(-1)!;
+	expect(Math.abs(last.left - cardBox.x)).toBeLessThan(4);
+	expect(Math.abs(last.top - cardBox.y)).toBeLessThan(4);
+	expect(Math.abs(last.width - cardBox.width)).toBeLessThan(4);
+});
+
+test("Back then Forward during a close finishes fully open", async ({ baseURL, join, room, seed, page }) => {
+	await setup(page);
+	let { title } = await seedReadyCard(baseURL!, room, seed);
+	let opened = await join("ana");
+	let opener = opened.getByRole("button", { name: `Open ${title}`, exact: true });
+	await expect(opener).toBeVisible();
+	await opener.click();
+	await expect(cards(opened)).toHaveCount(1);
+	await openSettled(opened);
+	let read = await sampleFrames(opened, 1200);
+	await opened.goBack();
+	await opened.waitForTimeout(60);
+	// The close is under way: the dim has started to fall from its settled value.
+	expect(Number(
+		await opened.locator(".workspace-child-scrim")
+			.evaluate(scrim => getComputedStyle(scrim).opacity),
+	)).toBeLessThan(0.45);
+	await opened.goForward();
+	await openSettled(opened);
+	let frames = await read();
+	expect(frames.at(-1)!.faces).toBe(0);
+	for (let frame of frames) expect(frame.faces).toBeLessThanOrEqual(1);
+	await expect(cards(opened)).toHaveCount(1);
+	await expect(cards(opened)).toBeVisible();
+	await expect.poll(() => cards(opened).evaluate(card => getComputedStyle(card).clipPath))
+		.toMatch(/^(none|inset\(0px 0px 0px 0px)/);
+	await expect.poll(() =>
+		opened.locator(".workspace-child-scrim").evaluate(scrim => getComputedStyle(scrim).opacity)
+	).toBe("0.45");
+	await expect(opened.locator(".anchored-child-face")).toHaveCount(0);
+	await expect(opened.locator("[data-child-presentation=closing]")).toHaveCount(0);
+});
+
+test("a sidebar row rises from the lower centre and closes by fading", async ({ baseURL, join, room, seed, page }) => {
+	await setup(page);
+	let { title } = await seedReadyCard(baseURL!, room, seed);
+	let opened = await join("ana");
+	let row = opened.getByRole("complementary", { name: "Projects" })
+		.getByRole("link", { name: title, exact: true });
+	await expect(row).toBeVisible();
+	let read = await sampleFrames(opened, 900);
+	await row.click();
+	await expect(cards(opened)).toHaveCount(1);
+	let frames = await read();
+	let first = frames[0]!;
+	let last = frames.at(-1)!;
+	for (let frame of frames) {
+		for (let value of Object.values(frame)) expect(Number.isFinite(value)).toBe(true);
+	}
+	let box = (await cards(opened).boundingBox())!;
+	expect(Math.abs(first.left + first.width / 2 - (box.x + box.width / 2))).toBeLessThan(16);
+	expect(first.top).toBeGreaterThan(box.y + box.height * 0.5);
+	expect(last.width).toBeGreaterThan(first.width);
+	let closing = await sampleFrames(opened, 400);
+	await opened.keyboard.press("Escape");
+	await expect(cards(opened)).toHaveCount(0);
+	let after = await closing();
+	let tail = after.slice(-6);
+	expect(tail.length).toBeGreaterThan(2);
+	expect(tail.at(-1)!.opacity).toBeLessThan(tail[0]!.opacity);
+	for (let frame of tail) expect(Math.abs(frame.width - last.width)).toBeLessThan(2);
+});
+
+test("reduced motion crossfades without transform animation", async ({ baseURL, join, room, seed, page }) => {
+	await setup(page);
+	await page.emulateMedia({ reducedMotion: "reduce" });
+	let { title } = await seedReadyCard(baseURL!, room, seed);
+	let opened = await join("ana");
+	let opener = opened.getByRole("button", { name: `Open ${title}`, exact: true });
+	await expect(opener).toBeVisible();
+	// A short fade can end between two polls; a listener installed before the click cannot miss it.
+	await opened.evaluate(() => {
+		let names: string[] = [];
+		(window as unknown as { __childAnimations: string[] }).__childAnimations = names;
+		document.addEventListener("animationstart", event => {
+			let target = event.target as Element | null;
+			if (target?.closest(".anchored-child-layer, .workspace-document-stack")) {
+				names.push(event.animationName);
+			}
+		}, true);
+	});
+	let started = () =>
+		opened.evaluate(() => (window as unknown as { __childAnimations: string[] }).__childAnimations);
+	let transformed = () =>
+		opened.evaluate(() => {
+			let found = new Set<string>();
+			for (let animation of document.getAnimations()) {
+				let effect = animation.effect as KeyframeEffect | null;
+				if (!effect?.target?.closest(".anchored-child-layer, .workspace-document-stack")) continue;
+				for (let keyframe of effect.getKeyframes()) {
+					for (let key of ["transform", "clipPath", "scale"]) {
+						if (key in keyframe && keyframe[key] != null && keyframe[key] !== "none") {
+							found.add(`prop:${key}`);
+						}
+					}
+				}
+			}
+			return [...found];
+		});
+	let rootTransform = () =>
+		opened.locator(".workspace-document-stack > .workspace-document-panel")
+			.evaluate(root => getComputedStyle(root).transform);
+	let props = new Set<string>();
+	let watch = async () => {
+		for (let name of await transformed()) props.add(name);
+		expect(await rootTransform()).toBe("none");
+	};
+	await opener.click();
+	await expect(cards(opened)).toHaveCount(1);
+	await watch();
+	await expect.poll(started).toContain("anchored-child-fade");
+	await expect.poll(() => cards(opened).evaluate(card => getComputedStyle(card).clipPath))
+		.toMatch(/^(none|inset\(0px 0px 0px 0px)/);
+	await watch();
+	await opened.keyboard.press("Escape");
+	await expect.poll(started).toContain("anchored-child-fade-out");
+	await watch();
+	await expect(cards(opened)).toHaveCount(0);
+	await expect(opener).toBeFocused();
+	expect([...props]).toEqual([]);
+});
diff --git a/e2e/research-child-recovery.e2e.ts b/e2e/research-child-recovery.e2e.ts
index fe9c25856..1e1e2b0c2 100644
--- a/e2e/research-child-recovery.e2e.ts
+++ b/e2e/research-child-recovery.e2e.ts
@@ -475,6 +475,8 @@ test("inline research publishes one ordinary child and opens it", async ({ baseU
 	let childLink = sidebar.getByRole("link", { name: childTitle, exact: true });
 	await expect(childLink).toBeVisible();
 	await expect(childLink).toHaveAttribute("href", child.path);
+	await expect.poll(() => catalogueReads).toBe(readsBeforePublication + 1);
+	await opened.waitForTimeout(300);
 	expect(catalogueReads).toBe(readsBeforePublication + 1);
 	await expect.poll(() => countChildChannels(databasePort, room)).toBe(1);
 
@@ -484,7 +486,17 @@ test("inline research publishes one ordinary child and opens it", async ({ baseU
 	let surface = opened.getByRole("region", { name: `Child document: ${childTitle}` });
 	await expect(opened).toHaveURL(url => url.pathname === child.path);
 	await expect(surface.locator(`[data-workspace-room="${child.id}"]`)).toBeVisible();
-	await surface.getByRole("button", { name: `Close ${childTitle}`, exact: true }).click();
+	await expect(surface.getByRole("button", { name: `Close ${childTitle}` })).toHaveCount(0);
+	await expect(surface.getByText("Discuss this report here.")).toHaveCount(0);
+	// Lift's peeking root tab row is the way back; Enter on it closes and refocuses the opener.
+	let back = opened.getByRole("button", { name: /^Back to / });
+	await surface.evaluate(async element => {
+		let finite = element.getAnimations({ subtree: true })
+			.filter(animation => animation.effect?.getComputedTiming().iterations !== Infinity);
+		await Promise.allSettled(finite.map(animation => animation.finished));
+	});
+	await back.focus();
+	await opened.keyboard.press("Enter");
 	await expect(surface).toHaveCount(0);
 	await expect(open).toBeFocused();
 });
@@ -653,8 +665,8 @@ test("a ready research card and its Chat notice survive reconnect without anothe
 	await expect(provenance.getByText(brief, { exact: true })).toBeHidden();
 	await briefToggle.click();
 	await expect(provenance.getByText(brief, { exact: true })).toBeVisible();
-	await expect(surface.getByRole("complementary", { name: "Chat" }))
-		.toContainText("Discuss this report here.");
+	await expect(surface.getByRole("complementary", { name: "Chat" })).toHaveCount(0);
+	await expect(opened.getByRole("complementary", { name: "Chat" })).toBeVisible();
 	await provenance.getByRole("button", { name: parentTitle, exact: true }).click();
 	await expect(surface).toHaveCount(0);
 	await expect(
diff --git a/e2e/research-child-surface.e2e.ts b/e2e/research-child-surface.e2e.ts
index 5e3776e58..08d1c4a56 100644
--- a/e2e/research-child-surface.e2e.ts
+++ b/e2e/research-child-surface.e2e.ts
@@ -27,6 +27,36 @@ const LINKED_CHILD_SOURCE = `# Source review
 [Child source](https://example.com/child-source)
 `;
 
+function rootSheet(page: Page, room: string) {
+	return page.locator(
+		`[data-workspace-room="${room}"] > .workspace-frame > .workspace-document-stack > .workspace-document-panel`,
+	);
+}
+
+/** Lift's peeking tab row in split, or the stack bar's Back in compact. Both return to the root. */
+async function returnToRoot(page: Page, room: string) {
+	let back = page.getByRole("navigation", { name: "Document stack" })
+		.getByRole("button", { name: `Back to Test ${room.slice(0, 8)}` });
+	let rowReturn = rootSheet(page, room).locator("[data-document-toolbar]")
+		.getByRole("button", { name: `Back to Test ${room.slice(0, 8)}` });
+	await expect(back.or(rowReturn)).toBeVisible();
+	if (await back.isVisible()) await back.click();
+	else {
+		// Click an empty stretch of the peeking row: tab buttons switch views, not just return.
+		let tabs = rootSheet(page, room).locator("[data-document-toolbar]");
+		let gap = await tabs.evaluate(row => {
+			let box = row.getBoundingClientRect();
+			for (let x = box.left + 4; x < box.right; x += 4) {
+				let hit = document.elementFromPoint(x, box.top + box.height / 2);
+				if (hit?.classList.contains("workspace-tab-row-return")) return x - box.left;
+			}
+			return null;
+		});
+		expect(gap).not.toBeNull();
+		await tabs.click({ position: { x: gap!, y: (await tabs.boundingBox())!.height / 2 } });
+	}
+}
+
 function port(baseURL: string): number {
 	return Number(new URL(baseURL).port);
 }
@@ -127,78 +157,35 @@ test("a parent-owned child keeps the parent chrome and nested geometry", async (
 	let surface = page.getByRole("region", { name: `Child document: ${childTitle}` });
 	await expect(page).toHaveURL(url => url.pathname === child.path);
 	await expect(surface.locator(`[data-workspace-room="${child.id}"]`)).toBeVisible();
+	let sheet = rootSheet(page, room);
+	let tabs = sheet.locator("[data-document-toolbar]");
 	let parentHeader = parent.locator(".room-header");
-	let parentPaper = parent.locator(".workspace-frame");
 	await expect(page.locator(".room-header:visible")).toHaveCount(1);
-	await expect(parentHeader.getByRole("button", { name: `Back to Test ${room.slice(0, 8)}` }))
-		.toHaveCount(0);
-	await expect(parentHeader.getByRole("button", { name: `Return to Test ${room.slice(0, 8)}` }))
+	await expect(page.locator(".workspace-header-slot")).toBeVisible();
+	await expect(parentHeader.getByRole("button", { name: /^Return to / })).toHaveCount(0);
+	await expect(parentHeader).not.toContainText(childTitle);
+	await expect(sheet.locator("[data-workspace-document-swap]")).toHaveAttribute("inert", "");
+	await expect(tabs).not.toHaveAttribute("inert", "");
+	await expect(tabs.getByRole("group", { includeHidden: true, name: /People here:/ }))
 		.toBeVisible();
-	await expect(parentHeader.getByText(childTitle, { exact: true })).toBeVisible();
-	await expect(parentHeader).toBeVisible();
+	await expect(surface.locator(".anchored-child-title")).toHaveText(childTitle);
 	await expect(
-		parent.locator("[data-document-toolbar]").getByRole("group", {
-			includeHidden: true,
-			name: /People here:/,
-		}),
-	).toBeVisible();
-	await expect(parentPaper).toHaveAttribute("inert", "");
-	await expect(parentPaper).toHaveAttribute("aria-hidden", "true");
-	await expect(parentPaper).toHaveCSS("filter", "none");
-	await expect(parentPaper).toHaveCSS("opacity", "1");
-	await expect.poll(() =>
-		page.locator(".anchored-child-parent").evaluate(
-			element => getComputedStyle(element, "::after").opacity,
-		)
-	).toBe("1");
+		surface.getByRole("button", { name: /^(Document|Decisions|Show chat|Expand document)/ }),
+	).toHaveCount(0);
 	await expect(surface.locator(".room-header")).toBeHidden();
-	await surface.evaluate(async element => {
-		await Promise.all(element.getAnimations().map(animation => animation.finished));
-	});
-	let parentBox = await parentPaper.boundingBox();
-	let childBox = await surface.boundingBox();
-	let headerBox = await parentHeader.boundingBox();
-	expect(parentBox).not.toBeNull();
-	expect(childBox).not.toBeNull();
-	expect(headerBox).not.toBeNull();
+	await page.waitForFunction(() => document.getAnimations().every(a => a.playState !== "running"));
+	expect(await sheet.evaluate(element => getComputedStyle(element).transform)).not.toBe("none");
+	await expect(sheet.locator(".workspace-child-scrim")).toHaveCSS("opacity", "0.45");
+	let tabsBox = (await tabs.boundingBox())!;
+	let cardBox = (await surface.boundingBox())!;
+	let sheetBox = (await sheet.boundingBox())!;
+	let headerBox = (await parentHeader.boundingBox())!;
 	// The visible header row sits above the expanded parent sheet's tab row.
-	let parentTab = await parentPaper.getByRole("button", {
-		exact: true,
-		includeHidden: true,
-		name: "Decisions",
-	}).first().boundingBox();
-	expect(parentTab).not.toBeNull();
-	expect(headerBox!.y + headerBox!.height).toBeLessThanOrEqual(parentTab!.y);
-	expect(childBox!.x).toBeGreaterThan(parentBox!.x);
-	expect(childBox!.y).toBeGreaterThan(parentBox!.y);
-	expect(childBox!.x + childBox!.width).toBeLessThan(parentBox!.x + parentBox!.width);
-	expect(childBox!.y + childBox!.height).toBeLessThan(parentBox!.y + parentBox!.height);
-	expect(childBox!.y).toBeGreaterThanOrEqual(headerBox!.y + headerBox!.height + 12);
-	expect(await surface.evaluate(element => getComputedStyle(element).boxShadow)).not.toBe("none");
-
-	let childClose = surface.getByRole("button", { name: `Close ${childTitle}`, exact: true });
-	let childChatToggle = surface.getByRole("button", {
-		name: "Show chat",
-		exact: true,
-	});
-	await expect(childChatToggle).toBeVisible();
-	let closeHandle = await childClose.elementHandle();
-	expect(closeHandle).not.toBeNull();
-	expect(
-		await childChatToggle.evaluate(
-			(toggle, close) => {
-				let toolbar = toggle.closest("[data-document-toolbar]");
-				return toolbar !== null && toolbar === close?.closest("[data-document-toolbar]");
-			},
-			closeHandle,
-		),
-	).toBe(true);
-	let chatToggleBox = await childChatToggle.boundingBox();
-	let childCloseBox = await childClose.boundingBox();
-	expect(chatToggleBox).not.toBeNull();
-	expect(childCloseBox).not.toBeNull();
-	expect(chatToggleBox!.x + chatToggleBox!.width)
-		.toBeLessThanOrEqual(childCloseBox!.x);
+	expect(headerBox.y + headerBox.height).toBeLessThanOrEqual(tabsBox.y);
+	expect(cardBox.y).toBeGreaterThanOrEqual(tabsBox.y + tabsBox.height - 1);
+	expect(cardBox.width).toBeGreaterThan(sheetBox.width);
+	expect(await page.locator(".anchored-child-shadow").evaluate(e => getComputedStyle(e).boxShadow))
+		.not.toBe("none");
 
 	let resize = page.getByRole("separator", { name: "Resize Projects sidebar" });
 	let resizeBox = await resize.boundingBox();
@@ -211,12 +198,12 @@ test("a parent-owned child keeps the parent chrome and nested geometry", async (
 	await expect(resize).toHaveAttribute("aria-valuenow", String(sidebarWidth + 32));
 	await expect(surface).toBeVisible();
 
-	await childClose.click();
+	await returnToRoot(page, room);
 	await expect(surface).toHaveCount(0);
 	await expect(childLink).toBeFocused();
 });
 
-test("a child isolates chat and decisions across every parent-owned close path", async ({ baseURL, join, page, room, seed }) => {
+test("the root's Chat stays live while a child is open, across every close path", async ({ baseURL, join, page, room, seed }) => {
 	test.slow();
 	await seed(PARENT_SOURCE);
 	let childTitle = `Isolated source ${room.slice(0, 8)}`;
@@ -231,6 +218,7 @@ test("a child isolates chat and decisions across every parent-owned close path",
 	await page.setViewportSize({ width: 1920, height: 1080 });
 	await join("ana");
 	let parent = page.locator(`[data-workspace-room="${room}"]`);
+	let sheet = rootSheet(page, room);
 	let parentChat = parent.getByRole("complementary", {
 		name: "Chat",
 		includeHidden: true,
@@ -249,118 +237,187 @@ test("a child isolates chat and decisions across every parent-owned close path",
 	await childLink.focus();
 	await childLink.click();
 	let surface = page.getByRole("region", { name: `Child document: ${childTitle}` });
-	let parentHeader = parent.locator(".room-header");
-	let childClose = surface.getByRole("button", { name: `Close ${childTitle}`, exact: true });
-	let childChat = surface.getByRole("complementary", { name: "Chat" });
-	// The parent has Chat open, so the child opens with its own Chat open too.
-	await expect(childChat).toBeVisible();
-	await expect(childChat.getByText("Discuss this report here.", { exact: false })).toBeVisible();
-	await expect(childChat).not.toContainText(parentRoomMessage);
+	await expect(surface).toBeVisible();
+	await expect(surface.getByRole("complementary", { name: "Chat" })).toHaveCount(0);
+	await expect(parentChat).not.toHaveAttribute("inert", "");
 	await expect(parentChat).toContainText(parentRoomMessage);
-	let childRoomMessage = `Child room message ${room.slice(0, 8)}`;
-	let childPlannerMessage = `@chopin Child Planner message ${room.slice(0, 8)}`;
-	let childPlannerTranscript = childPlannerMessage.replace("@chopin ", "");
-	let childDraft = chatInput(childChat);
-	await childDraft.fill(childRoomMessage);
-	await childChat.getByRole("button", { name: "Send message" }).click();
-	await expect(childChat.getByText(childRoomMessage, { exact: true })).toBeVisible();
-	await expect.poll(chatSends).toContainEqual({
-		channelId: child.id,
-		text: childRoomMessage,
-		to: "room",
-	});
-	await childDraft.fill(childPlannerMessage);
-	await childChat.getByRole("button", { name: "Send message" }).click();
-	await expect(childChat.getByText(childPlannerTranscript, { exact: true })).toBeVisible();
-	await expect.poll(chatSends).toContainEqual({
-		channelId: child.id,
-		text: childPlannerMessage,
-		to: "planner",
-	});
-	await expect(parentChat).not.toContainText(childRoomMessage);
-	await expect(parentChat).not.toContainText(childPlannerTranscript);
-	await surface.locator("[data-document-toolbar]").getByRole("button", {
-		name: "Expand document",
-		exact: true,
-	}).click();
-	await expect(childChat).toBeHidden();
+	let whileOpen = `Root message while child open ${room.slice(0, 8)}`;
+	await parentDraft.fill(whileOpen);
+	await parentChat.getByRole("button", { name: "Send message" }).click();
+	await expect(parentChat.getByText(whileOpen, { exact: true })).toBeVisible();
+	await expect.poll(chatSends).toContainEqual({ channelId: room, text: whileOpen, to: "room" });
+	expect(chatSends().some(send => send.channelId === child.id)).toBe(false);
 
 	let childEditor = surface.getByRole("textbox", { name: "editable markdown" });
+	await page.waitForFunction(() => document.getAnimations().every(a => a.playState !== "running"));
 	await childEditor.locator("p").first().selectText();
-	await page.getByRole("button", { name: "Comment on this passage", exact: true })
-		.evaluate(button => (button as HTMLButtonElement).click());
-	let commentDraft = page.getByRole("dialog", { name: "New comment" });
+	await surface.getByRole("button", { name: "Comment on this passage", exact: true }).click();
+	let commentDraft = surface.getByRole("dialog", { name: "New comment" });
 	await expect(commentDraft.getByPlaceholder("Add a comment")).toBeFocused();
 	await page.keyboard.press("Escape");
 	await expect(commentDraft).toHaveCount(0);
-	await surface.getByRole("button", { name: "Decisions", exact: true }).click();
-	await expect(surface.locator('[data-document-view="decisions"]')).toBeVisible();
-	await expect(parent).toContainText("Parent passage 36.");
+	await expect(surface).toBeVisible();
 
-	await childClose.evaluate(button => {
-		(button as HTMLButtonElement).click();
-		(button as HTMLButtonElement).click();
-	});
-	await expect(surface).toHaveCount(0);
-	await expect(childLink).toBeFocused();
-	await page.waitForTimeout(250);
-	await expect(page).toHaveURL(url => url.pathname === child.path.replace(/\/children\/.*$/, ""));
-	await expect.poll(() => parentScroll.evaluate(element => element.scrollTop)).toBe(
-		parentScrollTop,
-	);
-	await expect(parentChat).toContainText(parentRoomMessage);
+	async function expectClosed() {
+		await expect(surface).toHaveCount(0);
+		await expect(childLink).toBeFocused();
+		await expect(page).toHaveURL(url => url.pathname === child.path.replace(/\/children\/.*$/, ""));
+		await expect.poll(() => parentScroll.evaluate(element => element.scrollTop)).toBe(
+			parentScrollTop,
+		);
+		await expect(parentChat).toContainText(parentRoomMessage);
+	}
+	async function reopen() {
+		await childLink.click();
+		await expect(surface).toBeVisible();
+	}
+
+	// 1. The peeking tab row, closed twice in one task: only one close happens.
+	await sheet.locator("[data-document-toolbar]")
+		.getByRole("button", { name: `Back to Test ${room.slice(0, 8)}` }).evaluate(button => {
+			(button as HTMLButtonElement).click();
+			(button as HTMLButtonElement).click();
+		});
+	await expectClosed();
 
-	await childLink.click();
-	await expect(surface).toBeVisible();
-	// Closing the child's Chat is not saved; it reopens with the parent's state.
-	await expect(childChat).toBeVisible();
-	await expect(childChat).not.toContainText(parentRoomMessage);
-	await expect(parentChat).toContainText(parentRoomMessage);
-	await expect(childChat.getByText(childRoomMessage, { exact: true })).toBeVisible();
-	await expect(childChat.getByText(childPlannerTranscript, { exact: true })).toBeVisible();
-	await surface.locator("[data-document-toolbar]").getByRole("button", {
-		name: "Expand document",
+	// 2. Escape.
+	await reopen();
+	await page.keyboard.press("Escape");
+	await expectClosed();
+
+	// 3. Browser Back.
+	await reopen();
+	await page.goBack();
+	await expectClosed();
+
+	// 4. A root tab returns and also switches the root's view.
+	await reopen();
+	await sheet.locator("[data-document-toolbar]").getByRole("button", {
+		name: "Decisions",
 		exact: true,
 	}).click();
-	await parentHeader.getByRole("button", { name: `Return to Test ${room.slice(0, 8)}` }).click();
 	await expect(surface).toHaveCount(0);
-	await expect(childLink).toBeFocused();
+	await expect(parent.locator('[data-document-view="decisions"]')).toBeVisible();
+	await sheet.locator("[data-document-toolbar]").getByRole("button", {
+		name: "Document",
+		exact: true,
+	}).click();
+	await expect(parent.locator('[data-document-view="plan"]')).toBeVisible();
+	await reopen();
+	await expect(chatSends().filter(send => send.channelId === child.id)).toHaveLength(0);
+});
 
-	await childLink.click();
+test("Escape in root Chat stays in Chat while a child is open", async ({ baseURL, join, page, room, seed }) => {
+	await seed(PARENT_SOURCE);
+	let childTitle = `Chat escape source ${room.slice(0, 8)}`;
+	await seedChildChannel(port(baseURL!), room, crypto.randomUUID(), childTitle, CHILD_SOURCE);
+	await page.setViewportSize({ width: 1440, height: 900 });
+	await join("ana");
+	let parentChat = page.locator(`[data-workspace-room="${room}"]`)
+		.getByRole("complementary", { name: "Chat" });
+	await page.getByRole("complementary", { name: "Projects" })
+		.getByRole("link", { name: childTitle, exact: true }).click();
+	let surface = page.getByRole("region", { name: `Child document: ${childTitle}` });
 	await expect(surface).toBeVisible();
-	await parentHeader.getByRole("button", { name: `Return to Test ${room.slice(0, 8)}` }).click();
-	await expect(surface).toHaveCount(0);
-	await expect(childLink).toBeFocused();
 
-	await childLink.click();
+	let draft = chatInput(parentChat);
+	await draft.fill(`Draft while child open ${room.slice(0, 8)}`);
+	await draft.focus();
+	await page.keyboard.press("Escape");
+	await expect(draft).toBeFocused();
 	await expect(surface).toBeVisible();
-	await surface.getByRole("button", { name: "Document", exact: true }).click();
-	let headerBox = await parentHeader.boundingBox();
-	let surfaceBox = await surface.boundingBox();
-	let backdrop = page.locator("[data-child-backdrop]");
-	let backdropBox = await backdrop.boundingBox();
-	let sidebarBox = await sidebar.boundingBox();
-	expect(headerBox).not.toBeNull();
-	expect(surfaceBox).not.toBeNull();
-	expect(backdropBox).not.toBeNull();
-	expect(sidebarBox).not.toBeNull();
-	expect(backdropBox!.x).toBeGreaterThanOrEqual(sidebarBox!.x + sidebarBox!.width);
-	expect(backdropBox!.y).toBeGreaterThanOrEqual(headerBox!.y + headerBox!.height);
-	await page.mouse.click(surfaceBox!.x - 6, surfaceBox!.y + 20);
-	await expect(surface).toHaveCount(0);
-	await expect(childLink).toBeFocused();
 
+	let send = parentChat.getByRole("button", { name: "Send message" });
+	await send.focus();
+	await page.keyboard.press("Escape");
+	await expect(send).toBeFocused();
+	await expect(surface).toBeVisible();
+});
+
+test("Tab from an open child never reaches covered root content, and root Chat stays reachable", async ({ baseURL, join, page, room, seed }) => {
+	await seed(PARENT_SOURCE);
+	let childTitle = `Tab source ${room.slice(0, 8)}`;
+	await seedChildChannel(port(baseURL!), room, crypto.randomUUID(), childTitle, CHILD_SOURCE);
+	await page.setViewportSize({ width: 1440, height: 900 });
+	await join("ana");
+	let parent = page.locator(`[data-workspace-room="${room}"]`);
+	let parentChat = parent.getByRole("complementary", { name: "Chat" });
+	await page.getByRole("complementary", { name: "Projects" })
+		.getByRole("link", { name: childTitle, exact: true }).click();
+	let surface = page.getByRole("region", { name: `Child document: ${childTitle}` });
+	await expect(surface).toBeFocused();
+	let reachedChat = false;
+	for (let press = 0; press < 60; press++) {
+		await page.keyboard.press("Tab");
+		let where = await page.evaluate(() => {
+			let active = document.activeElement;
+			return {
+				chat: active !== null && active.closest("[data-workspace-room] aside") !== null,
+				covered: active?.closest("[data-workspace-document-swap]") !== null
+					&& active?.closest(".anchored-child-card") === null,
+			};
+		});
+		expect(where.covered).toBe(false);
+		if (where.chat) reachedChat = true;
+	}
+	expect(reachedChat).toBe(true);
+	await expect(parentChat).toBeVisible();
+});
+
+test("Lift keeps the child for the surface toggle and presence, returns for the row and a tab", async ({ baseURL, join, page, room, seed }) => {
+	await seed(PARENT_SOURCE);
+	let childTitle = `Lift source ${room.slice(0, 8)}`;
+	await seedChildChannel(port(baseURL!), room, crypto.randomUUID(), childTitle, CHILD_SOURCE);
+	await page.setViewportSize({ width: 1440, height: 900 });
+	await join("ana");
+	let parent = page.locator(`[data-workspace-room="${room}"]`);
+	let tabs = rootSheet(page, room).locator("[data-document-toolbar]");
+	let childLink = page.getByRole("complementary", { name: "Projects" })
+		.getByRole("link", { name: childTitle, exact: true });
+	let surface = page.getByRole("region", { name: `Child document: ${childTitle}` });
+	await childLink.focus();
 	await childLink.click();
 	await expect(surface).toBeVisible();
-	await page.keyboard.press("Escape");
+	await page.waitForFunction(() => document.getAnimations().every(a => a.playState !== "running"));
+
+	let toggle = tabs.locator(".workspace-surface-toggle-slot button");
+	await toggle.click();
+	await toggle.click();
+	await expect(surface).toBeVisible();
+	await tabs.getByRole("group", { includeHidden: true, name: /People here:/ })
+		.click({ force: true });
+	await expect(surface).toBeVisible();
+
+	// Enter on the return control closes once and hands focus back to the opener.
+	let back = tabs.getByRole("button", { name: `Back to Test ${room.slice(0, 8)}` });
+	await back.focus();
+	let focusTrail = await page.evaluateHandle(() => {
+		let trail = { body: false, done: false };
+		let watch = () => {
+			let closing = document.querySelector(".anchored-child-card") !== null;
+			if (closing && document.activeElement === document.body) trail.body = true;
+			if (!trail.done) requestAnimationFrame(watch);
+		};
+		watch();
+		return trail;
+	});
+	await page.keyboard.press("Enter");
 	await expect(surface).toHaveCount(0);
 	await expect(childLink).toBeFocused();
+	// Focus stays on the return control through the 250ms close, then lands on the opener.
+	expect(
+		await focusTrail.evaluate(trail => {
+			trail.done = true;
+			return trail.body;
+		}),
+	).toBe(false);
+	await expect(page).toHaveURL(url => url.pathname.endsWith(`/test-${room.slice(0, 8)}`));
 
 	await childLink.click();
 	await expect(surface).toBeVisible();
-	await page.goBack();
+	await tabs.getByRole("button", { name: "Decisions", exact: true }).click();
 	await expect(surface).toHaveCount(0);
-	await expect(childLink).toBeFocused();
+	await expect(parent.locator('[data-document-view="decisions"]')).toBeVisible();
 });
 
 test("an in-app child preserves and restores its mounted parent", async ({ baseURL, join, page, room, seed }) => {
@@ -406,16 +463,12 @@ test("an in-app child preserves and restores its mounted parent", async ({ baseU
 	await expect(surface).toBeVisible();
 	await expect(surface).toBeFocused();
 	await expect(parent).toHaveAttribute("data-mount-token", "preserved");
-	await expect(parent.locator(".workspace-frame")).toHaveAttribute("inert", "");
-	await expect(parent.locator(".workspace-frame")).toHaveAttribute("aria-hidden", "true");
-	let childChatToggle = surface.getByRole("button", {
-		name: "Show chat",
-		exact: true,
-	});
-	let childChat = surface.getByRole("complementary", { name: "Chat" });
-	await expect(childChat).toBeVisible();
+	let sheet = rootSheet(page, room);
+	await expect(sheet.locator("[data-workspace-document-swap]")).toHaveAttribute("inert", "");
+	await expect(sheet.locator("[data-document-toolbar]")).not.toHaveAttribute("inert", "");
+	await expect(surface.getByRole("complementary", { name: "Chat" })).toHaveCount(0);
 	await expect(parentChat).toBeVisible();
-	await expect(surface.getByRole("button", { name: "Decisions", exact: true })).toBeVisible();
+	await expect(surface.getByRole("button", { name: "Decisions", exact: true })).toHaveCount(0);
 	await expect(surface.getByRole("button", { name: "Background Work", exact: true })).toHaveCount(
 		0,
 	);
@@ -424,20 +477,9 @@ test("an in-app child preserves and restores its mounted parent", async ({ baseU
 	);
 	await expect(surface.locator(`[data-workspace-room="${child.id}"]`)).toBeVisible();
 	await expect(surface.locator('[data-document-view="plan"]')).toBeVisible();
-	await expect(surface.locator('[data-document-view="decisions"]')).toBeHidden();
-	await surface.locator("[data-document-toolbar]").getByRole("button", {
-		name: "Expand document",
-		exact: true,
-	}).click();
-	await expect(childChat).toBeHidden();
+	await expect(surface.locator('[data-document-view="decisions"]')).toHaveCount(0);
 	await expect(parentChat).toBeVisible();
 
-	await surface.getByRole("button", { name: "Decisions", exact: true }).click();
-	await expect(surface.locator('[data-document-view="decisions"]')).toBeVisible();
-	await expect(parent.locator('[data-document-view="decisions"]')).toBeHidden();
-	await surface.getByRole("button", { name: "Document", exact: true }).click();
-	await expect(childChatToggle).toBeVisible();
-
 	await page.keyboard.press("Escape");
 	await expect(page).toHaveURL(url =>
 		url.pathname.endsWith(`/test-${room.slice(0, 8)}`)
@@ -451,7 +493,6 @@ test("an in-app child preserves and restores its mounted parent", async ({ baseU
 
 	await childLink.click();
 	await expect(surface).toBeVisible();
-	await expect(childChat).toBeVisible();
 	await expect(parentChat).toBeVisible();
 	await page.goBack();
 	await expect(surface).toHaveCount(0);
@@ -459,8 +500,7 @@ test("an in-app child preserves and restores its mounted parent", async ({ baseU
 
 	await childLink.click();
 	await expect(surface).toBeVisible();
-	await parent.locator(".room-header")
-		.getByRole("button", { name: `Return to Test ${room.slice(0, 8)}` }).click();
+	await returnToRoot(page, room);
 	await expect(surface).toHaveCount(0);
 	await expect(childLink).toBeFocused();
 });
@@ -482,6 +522,8 @@ test("an in-app child opens and submits its own comment composer", async ({ base
 		.getByRole("link", { name: childTitle, exact: true })
 		.click();
 	let surface = page.getByRole("region", { name: `Child document: ${childTitle}` });
+	await expect(surface).toBeFocused();
+	await page.waitForFunction(() => document.getAnimations().every(a => a.playState !== "running"));
 	await surface.getByRole("textbox", { name: "editable markdown" })
 		.getByText(passage, { exact: true })
 		.selectText();
@@ -533,14 +575,13 @@ test("a delayed sibling route removes the previous editable child immediately",
 	await childLink(secondTitle).click();
 	await expect(page).toHaveURL(url => url.pathname === second.path);
 	await expect(page.locator(`[data-workspace-room="${first.id}"]`)).toHaveCount(0);
-	await expect(page.locator(".anchored-child-surface")).toContainText("Opening child document…");
+	await expect(page.locator(".anchored-child-card")).toContainText("Opening child document…");
 
 	release();
 	let secondSurface = page.getByRole("region", { name: `Child document: ${secondTitle}` });
 	await expect(secondSurface.locator(`[data-workspace-room="${second.id}"]`)).toBeVisible();
 	await expect(secondSurface).toBeFocused();
-	await page.locator(`[data-workspace-room="${room}"] .room-header`)
-		.getByRole("button", { name: `Return to Test ${room.slice(0, 8)}` }).click();
+	await returnToRoot(page, room);
 	await expect(page).toHaveURL(url =>
 		url.pathname.endsWith(`/test-${room.slice(0, 8)}`)
 		&& url.search === "?view=plan"
@@ -608,6 +649,7 @@ test("a delayed sibling route removes the previous editable child immediately",
 	});
 	await expect(firstSurface).toBeFocused();
 	await expect(childLink(secondTitle)).not.toBeFocused();
+	await page.waitForFunction(() => document.getAnimations().every(a => a.playState !== "running"));
 	await page.keyboard.press("Escape");
 	await expect(firstSurface).toHaveCount(0);
 	await expect(childLink(firstTitle)).toBeFocused();
@@ -654,8 +696,7 @@ test("a direct child keeps direct-entry history when opening a sibling", async (
 	let secondSurface = page.getByRole("region", { name: `Child document: ${secondTitle}` });
 	await expect(secondSurface.locator(`[data-workspace-room="${second.id}"]`)).toBeVisible();
 	expect(await page.evaluate(() => history.length)).toBe(historyLength);
-	await page.locator(`[data-workspace-room="${room}"] .room-header`)
-		.getByRole("button", { name: `Return to Test ${room.slice(0, 8)}` }).click();
+	await returnToRoot(page, room);
 	await expect(page).toHaveURL(url =>
 		url.pathname.endsWith(`/test-${room.slice(0, 8)}`)
 		&& url.search === ""
@@ -683,16 +724,12 @@ test("a recovered child id enters the canonical anchored child workspace", async
 	let surface = page.getByRole("region", { name: `Child document: ${childTitle}` });
 	await expect(parent).toBeVisible();
 	await expect(surface.locator(`[data-workspace-room="${child.id}"]`)).toBeVisible();
-	// With no saved preference, Chat starts open in the parent and so in the child.
-	await expect(surface.getByRole("complementary", { name: "Chat" })).toBeVisible();
-	let close = surface.getByRole("button", { name: `Close ${childTitle}`, exact: true });
-	await expect(close).toBeVisible();
-	await expect(
-		parent.locator(".room-header").getByRole("button", {
-			name: `Return to Test ${room.slice(0, 8)}`,
-			exact: true,
-		}),
-	).toBeVisible();
+	// With no saved preference, Chat starts open in the parent; the child never mounts one.
+	await expect(surface.getByRole("complementary", { name: "Chat" })).toHaveCount(0);
+	await expect(parent.getByRole("complementary", { name: "Chat" })).toBeVisible();
+	await expect(parent.locator(".room-header").getByRole("button", { name: /^Return to / }))
+		.toHaveCount(0);
+	await expect(surface.locator(".anchored-child-title")).toHaveText(childTitle);
 
 	let editor = surface.getByRole("textbox", { name: "editable markdown", exact: true });
 	await editor.click();
@@ -702,7 +739,7 @@ test("a recovered child id enters the canonical anchored child workspace", async
 	await expect(surface.getByRole("button", { name: "Search public web", exact: true }))
 		.toHaveCount(0);
 
-	await close.click();
+	await returnToRoot(page, room);
 	await expect(page).toHaveURL(url => url.pathname.endsWith(`/test-${room.slice(0, 8)}`));
 	await expect(surface).toHaveCount(0);
 });
@@ -776,12 +813,12 @@ test("a child load failure preserves its mounted parent through back and retry",
 		.getByRole("link", { name: childTitle, exact: true });
 
 	await childLink.click();
-	let surface = page.locator(".anchored-child-surface");
+	let surface = page.locator(".anchored-child-card");
 	await expect(surface).toContainText("Couldn't open this document");
 	await expect(parent).toHaveAttribute("data-mount-token", "preserved");
-	await expect(parent.locator(".workspace-frame")).toHaveAttribute("inert", "");
-	await parent.locator(".room-header")
-		.getByRole("button", { name: `Return to Test ${room.slice(0, 8)}` }).click();
+	await expect(rootSheet(page, room).locator("[data-workspace-document-swap]"))
+		.toHaveAttribute("inert", "");
+	await returnToRoot(page, room);
 	await expect(surface).toHaveCount(0);
 	await expect(parent).toHaveAttribute("data-mount-token", "preserved");
 
@@ -811,18 +848,20 @@ test("a direct compact child fills the canvas and reduces motion to a crossfade"
 	let surface = page.getByRole("region", { name: `Child document: ${childTitle}` });
 	await expect(surface).toBeVisible();
 	await expect(surface).toBeFocused();
-	let navigation = surface.getByRole("navigation", { name: "Workspace view" });
-	let destinations = navigation.getByRole("button");
-	await expect(destinations).toHaveCount(3);
-	await expect(navigation.getByRole("button", { name: /^Chat/ })).toBeVisible();
-	await expect(navigation.getByRole("button", { name: "Document", exact: true })).toBeVisible();
-	await expect(navigation.getByRole("button", { name: /^Decisions/ })).toBeVisible();
-	await navigation.getByRole("button", { name: /^Chat/ }).click();
-	await expect(surface.getByRole("complementary", { name: "Chat" })).toBeVisible();
-	await expect(surface.locator('[data-document-view="plan"]')).toBeHidden();
-	await navigation.getByRole("button", { name: "Document", exact: true }).click();
-	await expect(surface.getByRole("complementary", { name: "Chat" })).toBeHidden();
-	await expect(surface.locator('[data-document-view="plan"]')).toBeVisible();
+	let stack = page.getByRole("navigation", { name: "Document stack" });
+	await expect(stack.getByText(childTitle, { exact: true })).toHaveAttribute(
+		"aria-current",
+		"page",
+	);
+	await expect(surface.getByRole("navigation", { name: "Workspace view" })).toHaveCount(0);
+	let rootNavigation = page.locator(
+		`[data-workspace-room="${room}"] > nav[aria-label="Workspace view"]`,
+	);
+	await rootNavigation.getByRole("button", { name: /^Chat/ }).click();
+	await expect(page.getByRole("complementary", { name: "Chat" })).toBeVisible();
+	await expect(surface).toBeHidden();
+	await rootNavigation.getByRole("button", { name: "Document", exact: true }).click();
+	await expect(surface).toBeVisible();
 	let projects = page.getByRole("button", { name: "Show sidebar" });
 	await projects.click();
 	let drawer = page.getByRole("dialog", { name: "Projects" });
@@ -832,50 +871,33 @@ test("a direct compact child fills the canvas and reduces motion to a crossfade"
 	await expect(surface).toBeVisible();
 	let parentHeader = page.locator('[data-workspace-surface="document"] .room-header');
 	await expect(page.locator(".room-header:visible")).toHaveCount(1);
-	await expect(parentHeader.getByText(childTitle, { exact: true })).toBeVisible();
 	await expect(surface.locator(".room-header")).toBeHidden();
-	await expect(parentHeader.getByRole("button", { name: `Back to Test ${room.slice(0, 8)}` }))
-		.toHaveCount(0);
-	await expect(parentHeader.getByRole("button", { name: `Return to Test ${room.slice(0, 8)}` }))
-		.toBeVisible();
-	let childCrumb = parentHeader.getByText(childTitle, { exact: true });
-	let members = parentHeader.getByRole("group", { name: /People here:/ });
-	await expect(childCrumb).toHaveCSS("text-overflow", "ellipsis");
-	let crumbBox = await childCrumb.boundingBox();
-	let membersBox = await members.boundingBox();
-	expect(crumbBox).not.toBeNull();
-	expect(membersBox).not.toBeNull();
-	expect(crumbBox!.x + crumbBox!.width).toBeLessThanOrEqual(membersBox!.x);
-	let parentPaper = page.locator('[data-workspace-surface="document"] .workspace-frame');
-	await expect(parentPaper).toHaveCSS("transform", "none");
-	expect(
-		await page.locator(".anchored-child-parent").evaluate(
-			element => getComputedStyle(element, "::after").transitionProperty,
-		),
-	).toBe("none");
+	await expect(parentHeader.getByRole("button", { name: /^Return to / })).toHaveCount(0);
+	await expect(parentHeader).not.toContainText(childTitle);
+	let stackBox = (await stack.boundingBox())!;
+	let stackedCard = (await surface.boundingBox())!;
+	expect(stackedCard.y).toBeGreaterThanOrEqual(stackBox.y + stackBox.height - 1);
+	expect(await surface.evaluate(element => getComputedStyle(element).animationName))
+		.toBe("anchored-child-fade");
+	await expect(surface.locator(".anchored-child-title")).toBeHidden();
 	let headerBox = await parentHeader.boundingBox();
 	let childBox = await surface.boundingBox();
 	expect(headerBox).not.toBeNull();
 	expect(childBox).not.toBeNull();
-	expect(Math.round(childBox!.y)).toBe(Math.round(headerBox!.y + headerBox!.height));
+	expect(childBox!.y).toBeGreaterThanOrEqual(headerBox!.y + headerBox!.height);
+	// The card fills the root sheet's width and fades in place; it does not travel.
+	let sheetBox = (await rootSheet(page, room).boundingBox())!;
 	let geometry = await surface.evaluate(element => {
-		let style = getComputedStyle(element);
 		let box = element.getBoundingClientRect();
-		return {
-			animationName: style.animationName,
-			left: box.left,
-			right: innerWidth - box.right,
-			transform: style.transform,
-		};
+		return { left: box.left, right: box.right, transform: getComputedStyle(element).transform };
 	});
 	expect(geometry).toEqual({
-		animationName: "anchored-child-fade",
-		left: 0,
-		right: 0,
+		left: sheetBox.x,
+		right: sheetBox.x + sheetBox.width,
 		transform: "none",
 	});
 
-	await parentHeader.getByRole("button", { name: `Return to Test ${room.slice(0, 8)}` }).click();
+	await returnToRoot(page, room);
 	await expect(surface).toHaveCSS("animation-name", "anchored-child-fade-out");
 	await expect(page).toHaveURL(url => url.pathname.endsWith(`/test-${room.slice(0, 8)}`));
 });
@@ -915,3 +937,60 @@ test("Escape in a child editor dismisses the innermost thing before the sheet",
 	await expect(surface).toHaveCount(0);
 	await expect(page).toHaveURL(url => url.pathname.endsWith(`/test-${room.slice(0, 8)}`));
 });
+
+test("Zoom keeps an open child across root tab switches without remounting it", async ({ baseURL, join, page, room, seed }) => {
+	await seed(PARENT_SOURCE);
+	let childTitle = `Zoomed source ${room.slice(0, 8)}`;
+	let long = `${CHILD_SOURCE}\n${
+		Array.from({ length: 30 }, (_, i) => `Child passage ${i + 1}.`).join("\n\n")
+	}\n`;
+	let child = await seedChildChannel(port(baseURL!), room, crypto.randomUUID(), childTitle, long);
+	let mounts = await recordRoomMounts(page);
+	await page.addInitScript(() => localStorage.setItem("chopin:dev:child-motion", "zoom"));
+	await page.setViewportSize({ width: 1440, height: 900 });
+	await join("ana");
+	await page.getByRole("complementary", { name: "Projects" })
+		.getByRole("link", { name: childTitle, exact: true }).click();
+	let surface = page.getByRole("region", { name: `Child document: ${childTitle}` });
+	let stack = page.getByRole("navigation", { name: "Document stack" });
+	await expect(surface).toBeVisible();
+	await expect(stack.getByText(childTitle, { exact: true })).toHaveAttribute(
+		"aria-current",
+		"page",
+	);
+	let scroller = surface.locator("[data-plan-scroll]");
+	// A scroll set while the child is still loading or growing can be reset, so set it until it holds.
+	await expect.poll(() =>
+		scroller.evaluate(element => {
+			element.scrollTop = 120;
+			return element.scrollTop;
+		})
+	).toBe(120);
+	let tabs = rootSheet(page, room).locator("[data-document-toolbar]");
+	await tabs.getByRole("button", { name: /^Decisions/ }).click();
+	await expect(surface).toBeHidden();
+	// The stack bar stays in sight off Document, so the open child is never lost.
+	await expect(stack).toBeVisible();
+	// Decisions shows the root's decisions while the child stays open underneath.
+	await expect(rootSheet(page, room).locator('[data-document-view="decisions"]')).toBeVisible();
+	await expect(page.locator(`[data-workspace-room="${child.id}"] [data-document-view="decisions"]`))
+		.toHaveCount(0);
+	await page.keyboard.press("Escape");
+	await expect(stack).toBeVisible();
+	await stack.getByRole("button", { name: childTitle, exact: true }).click();
+	await expect(surface).toBeVisible();
+	await expect(surface).toBeFocused();
+	await expect(tabs.getByRole("button", { name: /^Document/ })).toHaveAttribute(
+		"aria-pressed",
+		"true",
+	);
+	await expect(page).toHaveURL(url => url.pathname === child.path);
+	await expect.poll(() => scroller.evaluate(element => element.scrollTop)).toBe(120);
+	expect((await mounts.mounts()).filter(entry => entry === `mount ${child.id}`)).toHaveLength(1);
+
+	// Back from another view still returns to the root, which keeps that view.
+	await tabs.getByRole("button", { name: /^Decisions/ }).click();
+	await stack.getByRole("button", { name: `Back to Test ${room.slice(0, 8)}` }).click();
+	await expect(surface).toHaveCount(0);
+	await expect(rootSheet(page, room).locator('[data-document-view="decisions"]')).toBeVisible();
+});
diff --git a/e2e/sidebar-decision-counts.e2e.ts b/e2e/sidebar-decision-counts.e2e.ts
index 8cfbfc558..1938a70a0 100644
--- a/e2e/sidebar-decision-counts.e2e.ts
+++ b/e2e/sidebar-decision-counts.e2e.ts
@@ -791,7 +791,10 @@ test("deleting an archived child updates the project total for a viewer in its p
 	);
 	try {
 		await editor.page.goto(`${parentPath}/children/${testChannelSlug(child)}`);
-		await ready(editor.page);
+		// The root stays mounted beneath the open child, so two editors are present.
+		for (let editable of [content(editor.page).first(), content(editor.page).last()]) {
+			await expect(editable).toHaveAttribute("contenteditable", "true", { timeout: 20_000 });
+		}
 		await expect.poll(() => storedCount(editor.page, ARCHIVED_CHILD.name, parent)).toBe(2);
 		await expect.poll(() => storedCount(editor.page, ARCHIVED_CHILD.name, child)).toBe(2);
 
diff --git a/packages/visuals/theme.css b/packages/visuals/theme.css
index b60baae66..753a19ef0 100644
--- a/packages/visuals/theme.css
+++ b/packages/visuals/theme.css
@@ -343,6 +343,16 @@
 	--page-slide-dur: 250ms;
 	--page-slide-distance: 8px;
 	--page-blur: 3px;
+	/* Nested documents: a slow, settled open and a quick close. */
+	--child-open-dur: var(--duration-linger);
+	--child-close-dur: 250ms;
+	--child-scrim-dur: 528ms;
+	--child-scrim-lag-dur: 72ms;
+	--child-ease: var(--ease-out);
+	--child-recede-step: 0.03;
+	--child-scrim-opacity: 0.45;
+	--child-zoom-push: 1.06;
+	--child-bar-height: calc(var(--spacing) * 9);
 	--route-swap-out-dur: 80ms;
 	--route-swap-in-dur: 150ms;
 	--icon-swap-dur: 250ms;
diff --git a/scripts/design-contract/exceptions/dynamic-web.json b/scripts/design-contract/exceptions/dynamic-web.json
index 5c9a32af3..c2959a07c 100644
--- a/scripts/design-contract/exceptions/dynamic-web.json
+++ b/scripts/design-contract/exceptions/dynamic-web.json
@@ -42,13 +42,13 @@
 	},
 	{
 		"file": "apps/web/src/document-workspace-host.tsx",
-		"reason": "Workspace assembly supplies document/session callbacks and data, not design values; scanner does not execute the workspaceProps function.",
+		"reason": "Workspace assembly supplies document/session callbacks and data, not design values; scanner does not execute the workspaceProps function. Its returned keys contain no className or style; the parent presentation carries the child layer node, a finite \"open\" | \"closing\" state, a finite \"lift\" | \"zoom\" motion that Workspace renders only as a data attribute, path labels, and a close callback.",
 		"cases": [
 			[
 				"dynamic",
 				"*",
-				"workspaceProps(\n\t\t\t\t\tloaded.parent,\n\t\t\t\t\tagent,\n\t\t\t\t\tuser,\n\t\t\t\t\tchildVisible\n\t\t\t\t\t\t? { childLabel, onChildClose: closeChild, type: \"parent-with-child\" }\n\t\t\t\t\t\t: { type: \"document\" },\n\t\t\t\t\tparentMetadataChanged,\n\t\t\t\t)",
-				"unresolved JSX props > DocumentWorkspaceHost > parent > <RoomWorkspace>",
+				"workspaceProps(\n\t\t\t\t\t\tloaded.parent,\n\t\t\t\t\t\tagent,\n\t\t\t\t\t\tuser,\n\t\t\t\t\t\tchildVisible ? nested : { type: \"document\" },\n\t\t\t\t\t\tparentMetadataChanged,\n\t\t\t\t\t)",
+				"unresolved JSX props > DocumentWorkspaceHost > <RoomWorkspace>",
 				1
 			],
 			[
@@ -59,7 +59,7 @@
 				1
 			]
 		],
-		"sourceHash": "890443cedd0584c3e57e5295f4fafff7f0bc8231c818cb706c061d097991b49a"
+		"sourceHash": "e6a7f2b1c2e4bc8c306ce61527c8fca07a7608ad7f3d0907f75f33eac16273c6"
 	},
 	{
 		"file": "apps/web/src/document-rename.tsx",
@@ -276,7 +276,7 @@
 				1
 			]
 		],
-		"sourceHash": "d3cbe78671d49dcc93ea6503f08492036ce88472fc45fd9528e268569e36e37a"
+		"sourceHash": "f271af3baeb3b11d21422e597dea3da8a51f7a5e445327bd06323d10a2c93af7"
 	},
 	{
 		"file": "apps/web/src/navigation-dialog.tsx",
diff --git a/scripts/e2e.ts b/scripts/e2e.ts
index 75d95610e..f8c7fb6fd 100644
--- a/scripts/e2e.ts
+++ b/scripts/e2e.ts
@@ -38,7 +38,9 @@ if (supplied.some(Boolean) && !supplied.every(Boolean)) {
 }
 let managed = !supplied[0];
 try {
-	if (process.env.E2E_SKIP_BUILD !== "1") await run(["bun", "run", "build"]);
+	if (process.env.E2E_SKIP_BUILD !== "1") {
+		await run(["bun", "run", "build"], { VITE_CHILD_MOTION_TOGGLE: "on" });
+	}
 	if (managed) {
 		await run([...COMPOSE, "up", "-d", "--wait", ...SERVICES]);
 	}