diff --git a/apps/web/src/chat/composer.css b/apps/web/src/chat/composer.css
index 94b4aa178..16e58b690 100644
--- a/apps/web/src/chat/composer.css
+++ b/apps/web/src/chat/composer.css
@@ -287,8 +287,8 @@
  * transcript keeps the space above the keyboard. Every phone-only rule lives
  * in this block, behind this one condition.
  */
-/* Landscape phones too; the shared `:root[data-phone]` hook can replace this condition. */
-@media (pointer: coarse) and (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
+/* The phone class, landscape phones too. */
+:root[data-phone] {
 	.chat-composer {
 		padding-inline: 0.5rem;
 		/* The home indicator's inset, but not while the keyboard covers it. */
@@ -343,7 +343,7 @@
 	.chat-composer[data-planner="off"] .composer-mode-trigger {
 		display: none;
 	}
-	:root[data-plan-coarse-pointer] .chat-composer .composer-surface button:not([role="option"]) {
+	&[data-plan-coarse-pointer] .chat-composer .composer-surface button:not([role="option"]) {
 		min-width: var(--composer-pill-control);
 		min-height: var(--composer-pill-control);
 	}
diff --git a/apps/web/src/chat/markdown.css b/apps/web/src/chat/markdown.css
index a2839539f..00a3693e1 100644
--- a/apps/web/src/chat/markdown.css
+++ b/apps/web/src/chat/markdown.css
@@ -95,14 +95,12 @@
 }
 
 /* Phones read Chat at the document's prose size, and a code block wraps rather than scrolling sideways. */
-@media (pointer: coarse) and (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
-	.chat-markdown {
-		font-size: var(--text-base);
-		line-height: var(--text-base--line-height);
-	}
-
-	.chat-markdown pre {
-		overflow-x: visible;
-		white-space: pre-wrap;
-	}
+:root[data-phone] .chat-markdown {
+	font-size: var(--text-base);
+	line-height: var(--text-base--line-height);
+}
+
+:root[data-phone] .chat-markdown pre {
+	overflow-x: visible;
+	white-space: pre-wrap;
 }
diff --git a/apps/web/src/child-phone-chrome.ts b/apps/web/src/child-phone-chrome.ts
new file mode 100644
index 000000000..a22b0d163
--- /dev/null
+++ b/apps/web/src/child-phone-chrome.ts
@@ -0,0 +1,29 @@
+/**
+ * A child document on a phone borrows its parent's tab bar.
+ *
+ * The child opens over the parent's Document tab, so the bar's trailing control edits the
+ * child, not the parent hidden beneath it, and the child's formatting docks where the parent's
+ * would. The parent owns the bar; the child reports how it is held and how to toggle it.
+ */
+
+import { createContext } from "react";
+
+/** How an open child is held, for the parent's bar to show. */
+export type ChildEditState = { docked: boolean; editing: boolean };
+
+export type ChildPhoneChrome = {
+	/** Host for the docked formatting toolbar, present while the child reports it docked. */
+	formatDock: HTMLElement | null;
+	/** Undefined while the child has no reading mode, such as for a viewer. */
+	report: (state: ChildEditState | undefined, toggle?: () => void) => void;
+	/** Bring the parent's Document tab, which holds the child, forward. */
+	showDocument: () => void;
+	/** Whether the child is on screen: the Document tab is showing. */
+	visible: boolean;
+};
+
+export const ChildPhoneChromeContext = createContext<ChildPhoneChrome | undefined>(undefined);
+
+export function sameEditState(a?: ChildEditState, b?: ChildEditState): boolean {
+	return a?.docked === b?.docked && a?.editing === b?.editing;
+}
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index 5ad3f0f97..a044ba804 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -26,11 +26,16 @@ if (!root) throw new Error("missing #root");
 function Root() {
 	useFocusInput();
 	useMotionInput();
-	usePointerCapabilities();
 	useVisualViewport();
 	return <App />;
 }
 
+/** Every route, development pages included, mirrors the phone class into CSS. */
+function PointerCapabilities() {
+	usePointerCapabilities();
+	return null;
+}
+
 let content = isDesignAuditRoute(location.pathname, import.meta.env.DEV)
 	? import("./design-audit/page").then(({ DesignAuditPage }) => <DesignAuditPage />)
 	: isDiagramGalleryRoute(location.pathname, import.meta.env.DEV)
@@ -47,6 +52,7 @@ void Promise.all([content, import("./icon-tooltip"), agentation]).then(
 	([value, { IconTooltip }, feedback]) => {
 		createRoot(root).render(
 			<StrictMode>
+				<PointerCapabilities />
 				{value}
 				<IconTooltip />
 				{feedback}
diff --git a/apps/web/src/phone-sheets.css b/apps/web/src/phone-sheets.css
index 37ec6996d..1db9f2431 100644
--- a/apps/web/src/phone-sheets.css
+++ b/apps/web/src/phone-sheets.css
@@ -9,7 +9,7 @@
 	z-index: 70;
 	background: var(--color-scrim);
 	opacity: calc(1 - var(--drawer-swipe-progress, 0));
-	transition: opacity var(--sheet-rise-dur) var(--tab-slide-ease);
+	transition: opacity var(--sheet-rise-dur) var(--sheet-ease);
 }
 
 .phone-sheet-backdrop[data-starting-style],
@@ -35,7 +35,7 @@
 	pointer-events: auto;
 	overscroll-behavior: contain;
 	transform: translateY(var(--drawer-swipe-movement-y, 0px));
-	transition: transform var(--sheet-rise-dur) var(--tab-slide-ease);
+	transition: transform var(--sheet-rise-dur) var(--sheet-ease);
 }
 
 :is(.documents-sheet, .action-sheet)[data-swiping] {
@@ -53,12 +53,12 @@
 
 .phone-sheet-grabber {
 	display: block;
-	width: calc(var(--spacing) * 9);
-	height: var(--spacing);
+	width: var(--sheet-grabber-width);
+	height: var(--sheet-grabber-height);
 	flex: none;
-	margin: calc(var(--spacing) * 1.5) auto 0;
+	margin: var(--sheet-grabber-inset) auto 0;
 	border-radius: var(--radius-full);
-	background: var(--color-gray-300);
+	background: var(--color-grabber);
 }
 
 /* A 44px target around the small filled circle iOS sheets close with. */
@@ -120,7 +120,7 @@
 	inset: 0;
 	background: var(--color-scrim);
 	opacity: 0;
-	transition: opacity var(--sheet-rise-dur) var(--tab-slide-ease);
+	transition: opacity var(--sheet-rise-dur) var(--sheet-ease);
 }
 
 .documents-sheet[data-nested-drawer-open]::after {
diff --git a/apps/web/src/phone-workspace.css b/apps/web/src/phone-workspace.css
index 606e24ce8..140ec09b5 100644
--- a/apps/web/src/phone-workspace.css
+++ b/apps/web/src/phone-workspace.css
@@ -76,6 +76,18 @@
 	scroll-padding-block: calc(var(--phone-top-chrome) + var(--spacing) * 4) 30%;
 }
 
+/*
+ * While formatting docks above the keyboard, the caret's block stops short of the dock. The
+ * workspace already ends at the keyboard (`--app-height`), so only the dock's row is added.
+ */
+.workspace-root[data-workspace-phone]:has(.phone-tab-row[data-phone-tab-toolbar])
+	.plan
+	[data-plan-scroll] {
+	scroll-padding-bottom: calc(
+		var(--phone-tab-bar-height) + var(--phone-tab-bar-offset) + var(--spacing) * 3
+	);
+}
+
 /* Focus and find-in-page scrolling stop below the top bar, never under it. */
 .workspace-root[data-workspace-phone]
 	:is([data-plan-decisions-scroll], [data-build-view-scroll], [data-chat-scroll]) {
diff --git a/apps/web/src/room-workspace.tsx b/apps/web/src/room-workspace.tsx
index 3199c7889..563986457 100644
--- a/apps/web/src/room-workspace.tsx
+++ b/apps/web/src/room-workspace.tsx
@@ -1,4 +1,13 @@
-import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import {
+	useCallback,
+	useContext,
+	useEffect,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+	useState,
+	useSyncExternalStore,
+} from "react";
 import { flushSync } from "react-dom";
 import { documentPath } from "@chopin/protocol/document-url";
 import { ArchiveIcon, CheckIcon, ChevronIcon, DocumentIcon, PencilIcon } from "@chopin/icons";
@@ -9,6 +18,7 @@ import {
 	countUnanswered,
 	cursor,
 	Decisions,
+	DecisionSaveHost,
 	documentEditMode,
 	documentHasPlanningContent,
 	Face,
@@ -30,6 +40,7 @@ import {
 
 import { BuildView } from "./build-view";
 import { Chat } from "./chat/chat";
+import { ChildPhoneChromeContext, sameEditState } from "./child-phone-chrome";
 import { ChildProvenance } from "./child-provenance";
 import { shouldShowResearchActionError, useResearchOfferLinks } from "./chat/research-offer";
 import type { ResearchDraftController } from "./chat/research-draft-controller";
@@ -506,7 +517,9 @@ export function RoomWorkspace(
 		[chatActive],
 	);
 	let planVisible = workspacePresentation.documentVisible && view === "plan";
-	let editorFocused = useEditorFocus(frame);
+	// A child is not inside a workspace frame of its own, so its own surface scopes its editor.
+	let childSurface = useRef<HTMLDivElement>(null);
+	let editorFocused = useEditorFocus(presentation.type === "child" ? childSurface : frame);
 	let latestPlanVisible = useRef(planVisible);
 	latestPlanVisible.current = planVisible;
 	let latestBusy = useRef(chatActivity.busy);
@@ -948,16 +961,56 @@ export function RoomWorkspace(
 		arrived.current = true;
 		if (opensEditing({ empty: planState.empty })) setEditing(true);
 	}, [planState.synced, planState.empty]);
+	// A child on a phone borrows its parent's tab bar (see child-phone-chrome.ts).
+	let childChrome = useContext(ChildPhoneChromeContext);
+	let childRoom = presentation.type === "child";
+	let childOpen = presentation.type === "parent-with-child";
+	// A child opening over this document takes the pencil, so this one goes back to reading.
+	useEffect(() => {
+		if (childOpen) setEditing(false);
+	}, [childOpen]);
+	let [childEdit, setChildEdit] = useState<{ docked: boolean; editing: boolean }>();
+	let childToggle = useRef<() => void>(undefined);
+	let reportChildEdit = useCallback(
+		(state?: { docked: boolean; editing: boolean }, toggle?: () => void) => {
+			childToggle.current = toggle;
+			setChildEdit(current => sameEditState(current, state) ? current : state);
+		},
+		[],
+	);
+	// What this room's own editor shows: a child is on screen only while its parent's Document is.
+	let shown = childRoom ? !!childChrome?.visible : planVisible && !childOpen;
 	// Only the document's own keyboard gets formatting: never Chat, a comment reply, or the title.
-	let docked = editMode === "editing" && keyboardOpen && planVisible && editorFocused;
+	let docked = editMode === "editing" && keyboardOpen && shown && editorFocused;
 	let toggleEditing = () => {
 		// Synchronous, so the editor takes focus inside the tap and iOS raises the keyboard.
 		flushSync(() => {
 			setEditing(!editing);
 			// Chat opens over the document without changing `view`, so ask what is on screen.
-			if (!editing && !planVisible) selectDestination("plan");
+			if (editing || shown) return;
+			if (childRoom) childChrome?.showDocument();
+			else selectDestination("plan");
 		});
 	};
+	let latestToggle = useRef(toggleEditing);
+	latestToggle.current = toggleEditing;
+	let reportEdit = childChrome?.report;
+	useLayoutEffect(() => {
+		reportEdit?.(
+			editMode ? { docked, editing: editMode === "editing" } : undefined,
+			() => latestToggle.current(),
+		);
+	}, [docked, editMode, reportEdit]);
+	useEffect(() => () => reportEdit?.(undefined), [reportEdit]);
+	let childChromeValue = useMemo(
+		() => ({
+			formatDock,
+			report: reportChildEdit,
+			showDocument: () => latestSelectDestination.current("plan"),
+			visible: planVisible,
+		}),
+		[formatDock, planVisible, reportChildEdit],
+	);
 	let actOnResearchOffer = (
 		offerId: string,
 		choice: "research" | "dismiss" | "resume",
@@ -1085,8 +1138,6 @@ export function RoomWorkspace(
 			/>
 		</>
 	);
-	// A child room renders its document alone, with no tab bar for the edit toggle.
-	let childRoom = presentation.type === "child";
 	let plan = (
 		<GitHubReferencesProvider value={githubReferences}>
 			<PlanEditor
@@ -1110,8 +1161,8 @@ export function RoomWorkspace(
 				connection={status === "deleted" ? "closed" : status}
 				key={workspaceArchivedAt ? "archived" : "active"}
 				disclosureMotion={motionContract("collapse")}
-				editMode={childRoom ? undefined : editMode}
-				formatDock={!childRoom && docked ? formatDock : undefined}
+				editMode={editMode}
+				formatDock={docked ? childRoom ? childChrome?.formatDock : formatDock : undefined}
 				motionImmediately={settleMotionImmediately}
 				onScrollTop={setPlanScrollTop}
 				onState={setPlanState}
@@ -1136,6 +1187,7 @@ export function RoomWorkspace(
 				className="child-document flex h-full min-h-0 flex-col bg-page"
 				data-workspace-room={room}
 				data-workspace-surface="child"
+				ref={childSurface}
 			>
 				<p aria-live="polite" className="sr-only" role="status">
 					<span key={announcement.sequence}>{announcement.text}</span>
@@ -1146,14 +1198,20 @@ export function RoomWorkspace(
 					className="child-document-scroll min-h-0 flex-1"
 					data-document-view="plan"
 				>
-					{plan}
+					{/* With no Decisions pane, a phone saves the child's cards from a bar of its own. */}
+					<DecisionSaveHost phone={phone}>{plan}</DecisionSaveHost>
 				</section>
 			</div>
 		);
 	}
 
+	// The tab bar's pencil edits the document on screen: an open child, or else this one.
+	let barEdit = childOpen
+		? childEdit && { ...childEdit, toggle: () => childToggle.current?.() }
+		: editMode && { docked, editing: editMode === "editing", toggle: toggleEditing };
+
 	return (
-		<>
+		<ChildPhoneChromeContext.Provider value={childChromeValue}>
 			<p aria-live="polite" className="sr-only" role="status">
 				<span key={announcement.sequence}>{announcement.text}</span>
 			</p>
@@ -1231,7 +1289,7 @@ export function RoomWorkspace(
 							archivedAt={workspaceArchivedAt}
 							canManage={effectiveCanManage}
 							editing={titleEdit}
-							editingDocument={editMode === "editing"}
+							editingDocument={!!barEdit?.editing}
 							label={metadata.title}
 							onAction={action => onDocumentAction(room, action)}
 							onEditingChange={setTitleEdit}
@@ -1268,12 +1326,12 @@ export function RoomWorkspace(
 				}
 				status={statusNotices}
 				ids={workspaceIds}
-				phoneAction={editMode && (
+				phoneAction={barEdit && (
 					<button
-						aria-label={editing ? "Done editing" : "Edit document"}
+						aria-label={barEdit.editing ? "Done editing" : "Edit document"}
 						className="phone-tab-action"
-						data-editing={editing || undefined}
-						onClick={toggleEditing}
+						data-editing={barEdit.editing || undefined}
+						onClick={barEdit.toggle}
 						type="button"
 					>
 						<PencilIcon aria-hidden="true" data-edit-icon="edit" size={24} />
@@ -1282,7 +1340,7 @@ export function RoomWorkspace(
 				)}
 				// Formatting rides above the keyboard while typing. With the keyboard down the tabs
 				// return, and a selection gets the ordinary bubble instead.
-				phoneToolbar={docked && <div className="h-full" ref={setFormatDock} />}
+				phoneToolbar={barEdit?.docked && <div className="h-full" ref={setFormatDock} />}
 				identity={room}
 				mode={mode}
 				presence={<RoomMembers members={members} ring="page" />}
@@ -1336,6 +1394,6 @@ export function RoomWorkspace(
 				unanswered={unanswered}
 				view={view}
 			/>
-		</>
+		</ChildPhoneChromeContext.Provider>
 	);
 }
diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index 49f1dd1c5..516720937 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -1250,11 +1250,12 @@ button.chat-tool-call-toggle {
 
 /*
  * Text fields on touch never drop below the 16px that stops iOS zooming in on focus.
- * Field classes outrank any element selector, so the small type steps are raised on
- * the field itself: whichever rule sizes it resolves to 16px and larger steps keep
- * their size. The document body is already 16px and keeps its smaller inline steps.
- * In the base layer so the floor never outranks a field's own larger size, and
- * specific enough to beat the preflight that makes fields inherit their container's.
+ * The small type steps are raised on the field itself, so a field sized by a token, and
+ * its placeholder, resolve to 16px. Important, because an unlayered `font: inherit` or
+ * `font-size: inherit` would otherwise beat any layered floor; `1em` is the size such a
+ * field inherits, so one set in larger type keeps it. The tradeoff: a field given a larger
+ * size by its own class would fall back to its inherited size here. The document body is
+ * already 16px and keeps its smaller inline steps.
  */
 @layer base {
 	@media (pointer: coarse) {
@@ -1263,7 +1264,7 @@ button.chat-tool-call-toggle {
 			--text-xs: var(--field-text-min);
 			--text-sm: var(--field-text-min);
 			--text-base: var(--field-text-min);
-			font-size: var(--field-text-min);
+			font-size: max(var(--field-text-min), 1em) !important;
 		}
 	}
 }
diff --git a/e2e/responsive-child-phone.e2e.ts b/e2e/responsive-child-phone.e2e.ts
new file mode 100644
index 000000000..0bb616ed3
--- /dev/null
+++ b/e2e/responsive-child-phone.e2e.ts
@@ -0,0 +1,315 @@
+/**
+ * A child document on a phone reads like its parent: it opens for reading, the tab bar's pencil
+ * edits the child rather than the parent beneath it, formatting docks above the keyboard, and its
+ * decisions save from the phone's bar. Desktop children and viewers are unchanged.
+ */
+
+import { seedChildChannel } from "./database";
+import { authenticate, content, expect, openIsolatedRoom, test } from "./room";
+import { installVisualViewport, setVisualViewport } from "./visual-viewport";
+
+import type { Browser, BrowserContext, Locator, Page } from "@playwright/test";
+
+const PHONE = { hasTouch: true, isMobile: true, viewport: { width: 390, height: 844 } };
+const PROMPT = "Where should room state live?";
+const CHILD_SOURCE = `# Source review
+
+This child compares where unsent edits could live.
+
+Second paragraph for the caret.
+`;
+
+async function openChild(
+	browser: Browser,
+	baseURL: string,
+	room: string,
+	handle: string,
+	options: Parameters<Browser["newContext"]>[0],
+	before?: (context: BrowserContext) => Promise<void>,
+	source = CHILD_SOURCE,
+) {
+	let title = `Child ${crypto.randomUUID().slice(0, 8)}`;
+	let child = await seedChildChannel(
+		Number(new URL(baseURL).port),
+		room,
+		crypto.randomUUID(),
+		title,
+		source,
+	);
+	let context = await browser.newContext({ ...options, baseURL });
+	await before?.(context);
+	let page = await context.newPage();
+	await authenticate(page, handle, baseURL);
+	await page.goto(child.path);
+	let surface = page.getByRole("region", { name: `Child document: ${title}` });
+	await expect(surface.locator("[data-plan-synced]")).toBeAttached({ timeout: 20_000 });
+	return { context, page, surface };
+}
+
+const LONG = (name: string) =>
+	`# ${name}\n\n${
+		Array.from({ length: 30 }, (_, index) => `${name} passage ${index + 1}.`).join("\n\n")
+	}\n`;
+
+function fakeKeyboard(context: BrowserContext) {
+	return installVisualViewport(context, {
+		height: 844,
+		offsetLeft: 0,
+		offsetTop: 0,
+		pageLeft: 0,
+		pageTop: 0,
+		scale: 1,
+		width: 390,
+	});
+}
+
+/**
+ * Edit from a paragraph low on the screen, then raise the keyboard: the formatting dock comes
+ * up over where that paragraph was, and the paragraph must end up above the dock.
+ */
+async function expectCaretClearOfDock(page: Page, editor: Locator) {
+	let paragraphs = editor.locator(":scope > p");
+	let low = await paragraphs.evaluateAll(items =>
+		items.findIndex(item => {
+			let box = item.getBoundingClientRect();
+			return box.top > 560 && box.bottom < 740;
+		})
+	);
+	expect(low).toBeGreaterThanOrEqual(0);
+	let paragraph = paragraphs.nth(low);
+	await paragraph.tap();
+	await pencil(page).tap();
+	await expect(editor).toBeFocused();
+	await setVisualViewport(page, { event: "resize", height: 500 });
+	let dock = page.getByRole("toolbar", { name: "Formatting" });
+	await expect(dock).toBeVisible();
+	await dock.evaluate(element =>
+		Promise.all(
+			element.closest("[data-phone-tab-row]")!.getAnimations({ subtree: true })
+				.map(animation => animation.finished),
+		)
+	);
+	await expect.poll(async () => {
+		let row = (await dock.boundingBox())!;
+		let block = (await paragraph.boundingBox())!;
+		return block.y + block.height <= row.y && block.y >= 0;
+	}).toBe(true);
+}
+
+function pencil(page: Page) {
+	return page.getByRole("button", { name: "Edit document" });
+}
+
+function done(page: Page) {
+	return page.getByRole("button", { name: "Done editing" });
+}
+
+function childText(surface: ReturnType<Page["getByRole"]>) {
+	return surface.getByRole("textbox", { name: "editable markdown" });
+}
+
+function parentText(page: Page) {
+	return page.locator('[data-document-view="plan"]:not([data-workspace-surface="child"] *)')
+		.getByRole("textbox", { name: "editable markdown" });
+}
+
+test("a child opens for reading on a phone and the tab bar's pencil edits it", async ({ baseURL, browser, room, seed }) => {
+	await seed("# Parent\n\nThe parent stays put beneath its child.\n");
+	let { context, page, surface } = await openChild(browser, baseURL!, room, "ana", PHONE);
+	try {
+		await expect(childText(surface)).toHaveAttribute("contenteditable", "false");
+		// One pencil, in the parent's tab bar, sized for a thumb.
+		await expect(pencil(page)).toHaveCount(1);
+		let tabs = page.getByRole("navigation", { name: "Workspace view" });
+		await expect(tabs).toBeVisible();
+		expect((await pencil(page).boundingBox())!.width).toBeGreaterThanOrEqual(44);
+
+		// Tapping prose reads; it raises no keyboard.
+		await surface.getByText("Second paragraph").tap();
+		expect(
+			await page.evaluate(() => (document.activeElement as HTMLElement | null)?.isContentEditable),
+		)
+			.toBeFalsy();
+
+		await pencil(page).tap();
+		await expect(childText(surface)).toHaveAttribute("contenteditable", "true");
+		await expect(childText(surface)).toBeFocused();
+		await expect(done(page)).toBeVisible();
+		await expect(page.locator(".phone-top-bar-mode")).toHaveText("Editing");
+		// The parent beneath keeps reading.
+		await expect(parentText(page)).toHaveAttribute("contenteditable", "false");
+		await page.keyboard.type("Typed ");
+		await expect(childText(surface)).toContainText("Typed ");
+
+		// From another tab, the pencil brings the child back before editing it.
+		await done(page).tap();
+		await expect(childText(surface)).toHaveAttribute("contenteditable", "false");
+		await tabs.getByRole("button", { name: /^Chat/ }).tap();
+		await expect(page.getByRole("complementary", { name: "Chat" })).toBeVisible();
+		await pencil(page).tap();
+		await expect(surface).toBeVisible();
+		await expect(childText(surface)).toHaveAttribute("contenteditable", "true");
+		await expect(childText(surface)).toBeFocused();
+	} finally {
+		await context.close();
+	}
+});
+
+test("a child's formatting docks above the keyboard in the parent's bar", async ({ baseURL, browser, room, seed }) => {
+	await seed("# Parent\n\nThe parent stays put beneath its child.\n");
+	let { context, page, surface } = await openChild(
+		browser,
+		baseURL!,
+		room,
+		"ana",
+		PHONE,
+		context =>
+			installVisualViewport(context, {
+				height: 844,
+				offsetLeft: 0,
+				offsetTop: 0,
+				pageLeft: 0,
+				pageTop: 0,
+				scale: 1,
+				width: 390,
+			}),
+	);
+	try {
+		await surface.getByText("Second paragraph").tap();
+		await pencil(page).tap();
+		await setVisualViewport(page, { event: "resize", height: 500 });
+		let dock = page.getByRole("toolbar", { name: "Formatting" });
+		await expect(dock).toBeVisible();
+		await expect(page.getByRole("navigation", { name: "Workspace view" })).toBeHidden();
+		await dock.getByRole("button", { name: "Bold" }).tap();
+		await page.keyboard.type("loud");
+		await expect(childText(surface).locator("strong, b").filter({ hasText: "loud" }))
+			.toHaveCount(1);
+		await expect(childText(surface)).toBeFocused();
+
+		await dock.getByRole("button", { name: "Hide keyboard" }).tap();
+		await setVisualViewport(page, { event: "resize", height: 844 });
+		await expect(dock).toHaveCount(0);
+		await expect(page.getByRole("navigation", { name: "Workspace view" })).toBeVisible();
+	} finally {
+		await context.close();
+	}
+});
+
+test("a child's decisions save from the phone's bar", async ({ baseURL, browser, room, seed }) => {
+	await seed("# Parent\n\nThe parent stays put beneath its child.\n");
+	let { context, page, surface } = await openChild(browser, baseURL!, room, "ana", PHONE);
+	try {
+		let card = surface.locator("article[data-plan-sidecar-questionnaire]")
+			.filter({ has: page.getByRole("heading", { name: PROMPT }) });
+		await card.scrollIntoViewIfNeeded();
+		await expect(card.getByRole("button", { name: "Save", exact: true })).toHaveCount(0);
+		let bar = surface.locator(".decision-save-bar");
+		await expect(bar).not.toHaveAttribute("data-open");
+
+		await card.getByText("In SQLite", { exact: true }).tap();
+		let region = surface.getByRole("region", { name: "Unsaved answers" });
+		await expect(region.getByRole("status")).toHaveText("1 unsaved answer");
+		let save = region.getByRole("button", { name: "Save", exact: true });
+		expect((await save.boundingBox())!.height).toBeGreaterThanOrEqual(44);
+		// It rests above the tab bar, not under it.
+		await region.evaluate(element =>
+			Promise.all(element.getAnimations().map(animation => animation.finished))
+		);
+		let tabs = (await page.getByRole("navigation", { name: "Workspace view" }).boundingBox())!;
+		let rest = (await region.boundingBox())!;
+		expect(rest.y + rest.height).toBeLessThanOrEqual(tabs.y);
+
+		await region.getByRole("button", { name: "Clear", exact: true }).tap();
+		await expect(bar).not.toHaveAttribute("data-open");
+		await expect(card.getByRole("radio", { name: /In SQLite/ })).not.toBeChecked();
+
+		await card.getByText("In SQLite", { exact: true }).tap();
+		await save.tap();
+		await expect(bar).not.toHaveAttribute("data-open");
+		await expect(card.getByRole("radio", { name: /In SQLite/ })).toHaveCount(0);
+	} finally {
+		await context.close();
+	}
+});
+
+test("a child keeps no reading mode for viewers on a phone or anyone on desktop", async ({ baseURL, browser, room, seed }) => {
+	await seed("# Parent\n\nThe parent stays put beneath its child.\n");
+	let viewer = await openChild(browser, baseURL!, room, "readonly", PHONE);
+	try {
+		await expect(childText(viewer.surface)).toHaveAttribute("contenteditable", "false");
+		await expect(viewer.page.getByRole("navigation", { name: "Workspace view" })).toBeVisible();
+		await expect(pencil(viewer.page)).toHaveCount(0);
+		await expect(done(viewer.page)).toHaveCount(0);
+	} finally {
+		await viewer.context.close();
+	}
+
+	let desktop = await openChild(browser, baseURL!, room, "ana", {
+		viewport: { width: 1440, height: 900 },
+	});
+	try {
+		await expect(childText(desktop.surface)).toHaveAttribute("contenteditable", "true");
+		await expect(pencil(desktop.page)).toHaveCount(0);
+		await expect(desktop.surface.locator(".decision-save-bar")).toHaveCount(0);
+		let card = desktop.surface.locator("article[data-plan-sidecar-questionnaire]")
+			.filter({ has: desktop.page.getByRole("heading", { name: PROMPT }) });
+		await card.scrollIntoViewIfNeeded();
+		await card.getByText("In SQLite", { exact: true }).click();
+		await expect(card.getByRole("button", { name: "Save", exact: true })).toBeVisible();
+	} finally {
+		await desktop.context.close();
+	}
+});
+
+test("opening a child ends the parent's editing; the child opens for reading", async ({ baseURL, join, room, seed }) => {
+	await seed("# Parent\n\nThe parent stays put beneath its child.\n");
+	let title = `Child ${crypto.randomUUID().slice(0, 8)}`;
+	await seedChildChannel(
+		Number(new URL(baseURL!).port),
+		room,
+		crypto.randomUUID(),
+		title,
+		CHILD_SOURCE,
+	);
+	let page = await join("ana", PHONE);
+	await pencil(page).tap();
+	await expect(content(page)).toHaveAttribute("contenteditable", "true");
+
+	await page.locator(".phone-top-bar").getByRole("button", { name: "Documents", exact: true })
+		.click();
+	await page.getByRole("dialog", { name: "Documents" }).getByRole("link", { name: title }).click();
+	let surface = page.getByRole("region", { name: `Child document: ${title}` });
+	await expect(childText(surface)).toHaveAttribute("contenteditable", "false");
+	await expect(parentText(page)).toHaveAttribute("contenteditable", "false");
+	await expect(pencil(page)).toBeVisible();
+	await expect(done(page)).toHaveCount(0);
+});
+
+test("the formatting dock keeps the caret's block clear in a root document", async ({ baseURL, browser, room, seed }) => {
+	await seed(LONG("Root"));
+	let { close, page } = await openIsolatedRoom(browser, baseURL!, room, "ana", PHONE, fakeKeyboard);
+	try {
+		await expectCaretClearOfDock(page, content(page));
+	} finally {
+		await close();
+	}
+});
+
+test("the formatting dock keeps the caret's block clear in a child document", async ({ baseURL, browser, room, seed }) => {
+	await seed("# Parent\n\nThe parent stays put beneath its child.\n");
+	let { context, page, surface } = await openChild(
+		browser,
+		baseURL!,
+		room,
+		"ana",
+		PHONE,
+		fakeKeyboard,
+		LONG("Child"),
+	);
+	try {
+		await expectCaretClearOfDock(page, childText(surface));
+	} finally {
+		await context.close();
+	}
+});
diff --git a/e2e/responsive-touch-fields.e2e.ts b/e2e/responsive-touch-fields.e2e.ts
new file mode 100644
index 000000000..3e95ab702
--- /dev/null
+++ b/e2e/responsive-touch-fields.e2e.ts
@@ -0,0 +1,137 @@
+/**
+ * iOS zooms the page into a focused text field set below 16px. On touch, every field a person
+ * can type into resolves to 16px or more, wherever it is styled: the document, Chat, Decisions,
+ * renaming, commenting and search, on a phone and on a touch tablet. Desktop keeps its sizes.
+ */
+
+import { chatInput } from "./chat-input";
+import { content, expect, test } from "./room";
+
+import type { Page } from "@playwright/test";
+
+const PHONE = { hasTouch: true, isMobile: true, viewport: { width: 390, height: 844 } };
+const TABLET = { hasTouch: true, isMobile: true, viewport: { width: 1194, height: 834 } };
+const SOURCE = `# Field notes
+
+Members lose edits when the train goes into a tunnel.
+
+Second paragraph for a comment.
+`;
+
+/** Every visible field that would zoom on focus, by what it is and the size it resolves to. */
+async function smallFields(page: Page): Promise<string[]> {
+	return page.evaluate(() => {
+		let fields = document.querySelectorAll<HTMLElement>(
+			"textarea, select, input:not([type=checkbox], [type=radio], [type=range], [type=color],"
+				+ " [type=file], [type=hidden]), [contenteditable]:not([contenteditable=false])",
+		);
+		return [...fields]
+			// A nested editor is focused through its outermost editable root.
+			.filter(field =>
+				!field.parentElement?.closest("[contenteditable]:not([contenteditable=false])")
+			)
+			.filter(field => {
+				let box = field.getBoundingClientRect();
+				return box.width > 0 && box.height > 0 && getComputedStyle(field).visibility !== "hidden";
+			})
+			.map(field => ({ field, size: parseFloat(getComputedStyle(field).fontSize) }))
+			.filter(({ size }) => size < 16)
+			.map(({ field, size }) =>
+				`${field.tagName.toLowerCase()} ${
+					field.getAttribute("aria-label") ?? field.getAttribute("placeholder") ?? field.className
+				}: ${size}px`
+			);
+	});
+}
+
+async function selectPassage(page: Page) {
+	await content(page).first().locator("p").filter({ hasText: "Second paragraph" }).selectText();
+}
+
+test("phone: every text field is at least 16px", async ({ join, seed }) => {
+	await seed(SOURCE);
+	let page = await join("ana", PHONE);
+	let tabs = page.getByRole("navigation", { name: "Workspace view" });
+
+	await page.getByRole("button", { name: "Edit document" }).tap();
+	await expect(content(page)).toHaveAttribute("contenteditable", "true");
+	expect(await smallFields(page)).toEqual([]);
+	await page.getByRole("button", { name: "Done editing" }).tap();
+
+	await selectPassage(page);
+	await page.getByRole("button", { name: "Comment on this passage", exact: true }).click();
+	let draft = page.getByRole("dialog", { name: "New comment" });
+	await expect(draft.getByPlaceholder("Add a comment")).toBeVisible();
+	expect(await smallFields(page)).toEqual([]);
+	await page.keyboard.press("Escape");
+	await expect(draft).toHaveCount(0);
+
+	await tabs.getByRole("button", { name: /^Chat/ }).tap();
+	await expect(chatInput(page)).toBeVisible();
+	expect(await smallFields(page)).toEqual([]);
+
+	await tabs.getByRole("button", { name: /^Decisions/ }).tap();
+	let decisions = page.locator('[data-document-view="decisions"]');
+	await decisions.getByRole("button", { name: "Add an option" }).first().tap();
+	await expect(decisions.locator(".question-field").first()).toBeVisible();
+	expect(await smallFields(page)).toEqual([]);
+
+	await tabs.getByRole("button", { name: "Document", exact: true }).tap();
+	await page.locator(".phone-top-bar").getByRole("button", { name: /^Actions for / }).click();
+	await page.getByRole("dialog", { name: /^Actions for / })
+		.getByRole("button", { name: "Rename", exact: true }).click();
+	await expect(page.getByRole("textbox", { name: "Document title" })).toBeFocused();
+	expect(await smallFields(page)).toEqual([]);
+	await page.keyboard.press("Escape");
+
+	await page.locator(".phone-top-bar").getByRole("button", { name: "Documents", exact: true })
+		.click();
+	await expect(page.getByRole("searchbox", { name: "Search documents" })).toBeVisible();
+	expect(await smallFields(page)).toEqual([]);
+});
+
+test("touch tablet: every text field is at least 16px", async ({ join, seed }) => {
+	await seed(SOURCE);
+	let page = await join("ana", TABLET);
+	await expect(content(page)).toHaveAttribute("contenteditable", "true");
+	expect(await smallFields(page)).toEqual([]);
+
+	await selectPassage(page);
+	await page.getByRole("button", { name: "Comment on this passage", exact: true }).click();
+	let draft = page.getByRole("dialog", { name: "New comment" });
+	await expect(draft.getByPlaceholder("Add a comment")).toBeVisible();
+	expect(await smallFields(page)).toEqual([]);
+	await page.keyboard.press("Escape");
+	await expect(draft).toHaveCount(0);
+
+	let views = page.getByRole("group", { name: "Document view" });
+	await views.getByRole("button", { name: /^Decisions/ }).click();
+	let decisions = page.locator('[data-document-view="decisions"]');
+	await decisions.getByRole("button", { name: "Add an option" }).first().click();
+	await expect(decisions.locator(".question-field").first()).toBeVisible();
+	expect(await smallFields(page)).toEqual([]);
+	await views.getByRole("button", { name: "Document", exact: true }).click();
+
+	// The desktop header's inline rename, which is smaller type than a field may be on touch.
+	await page.getByRole("banner").getByRole("button", { name: /^Actions for / }).click();
+	await page.getByRole("menuitem", { name: "Rename", exact: true }).click();
+	let title = page.getByRole("textbox", { name: "Document title" });
+	await expect(title).toBeFocused();
+	expect(await smallFields(page)).toEqual([]);
+	await title.press("Escape");
+
+	await page.keyboard.press("ControlOrMeta+k");
+	await expect(page.getByRole("textbox", { name: "Search documents" })).toBeFocused();
+	expect(await smallFields(page)).toEqual([]);
+});
+
+test("desktop keeps the header rename at its own small size", async ({ join, seed }) => {
+	await seed(SOURCE);
+	let page = await join("ana", { viewport: { width: 1440, height: 900 } });
+	await page.getByRole("banner").getByRole("button", { name: /^Actions for / }).click();
+	await page.getByRole("menuitem", { name: "Rename", exact: true }).click();
+	let title = page.getByRole("textbox", { name: "Document title" });
+	await expect(title).toBeFocused();
+	expect(await title.evaluate(element => parseFloat(getComputedStyle(element).fontSize)))
+		.toBeLessThan(16);
+});
diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts
index 3cb5f2644..92bca8dc6 100644
--- a/packages/editor/src/index.ts
+++ b/packages/editor/src/index.ts
@@ -53,6 +53,7 @@ export {
 export type { PlanQuestionnaireState, QuestionnaireEntry } from "./questionnaires";
 export { MAX_RESEARCH_BRIEF, ResearchLauncher } from "./research-launcher";
 export type { ResearchLaunchBlock, ResearchLaunchResult } from "./research-launcher";
+export { DecisionSaveHost } from "./save-bar";
 export { SendAction } from "./send-action";
 export { PlanStatus } from "./status";
 export type { PlanStatusProps } from "./status";
diff --git a/packages/editor/src/plan-editor.tsx b/packages/editor/src/plan-editor.tsx
index 97af2dbfa..5adb2cab1 100644
--- a/packages/editor/src/plan-editor.tsx
+++ b/packages/editor/src/plan-editor.tsx
@@ -297,6 +297,21 @@ export function PlanEditor(
 		return () => observer.disconnect();
 	}, [generation, hasPreface, wire]);
 
+	// The formatting dock rises over the foot of the document; bring the caret's block back above
+	// it, once the host's scroll padding for the dock has applied.
+	let dockShown = !!formatDock;
+	useEffect(() => {
+		if (!dockShown) return;
+		let frame = requestAnimationFrame(() => {
+			let element = scroller.current;
+			let node = getSelection()?.focusNode;
+			let block = node instanceof Element ? node : node?.parentElement;
+			if (!element || !block || !element.contains(block)) return;
+			block.closest(".plan-content > *")?.scrollIntoView({ block: "nearest" });
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [dockShown]);
+
 	useEffect(() => () => changes.dispose(), [changes]);
 
 	useEffect(() => {
diff --git a/packages/editor/src/save-bar.tsx b/packages/editor/src/save-bar.tsx
index bf7b49874..3b1db7d91 100644
--- a/packages/editor/src/save-bar.tsx
+++ b/packages/editor/src/save-bar.tsx
@@ -7,9 +7,17 @@
  * so a collaborator's draft is never counted, cleared or saved from here.
  */
 
-import { createContext, useEffect, useRef, useSyncExternalStore } from "react";
+import {
+	createContext,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+	useSyncExternalStore,
+} from "react";
 
 import type { PendingAnswers } from "@chopin/question/react";
+import type { ReactNode } from "react";
 
 export class PendingAnswersStore {
 	#cards = new Map<string, PendingAnswers>();
@@ -195,3 +203,35 @@ export function SaveBar(
 		</div>
 	);
 }
+
+/**
+ * Decision cards answered in place, outside the Decisions pane, as a child document's are.
+ * On a phone they save from one bar at the foot of this surface, as the pane's cards do.
+ */
+export function DecisionSaveHost({ children, phone }: { children: ReactNode; phone: boolean }) {
+	let [store] = useState(() => new PendingAnswersStore());
+	let host = useRef<HTMLDivElement>(null);
+	let showCard = useCallback((card: string) => {
+		let target = host.current?.querySelector<HTMLElement>(
+			`[data-plan-sidecar-questionnaire="${CSS.escape(card)}"]`,
+		);
+		if (!target) return;
+		target.scrollIntoView({ block: "center" });
+		target.tabIndex = -1;
+		target.focus({ preventScroll: true });
+	}, []);
+	// The bar is leaving with focus inside it: hand focus to the surface that holds the cards.
+	let leave = useCallback(() => {
+		host.current?.parentElement?.closest<HTMLElement>("[tabindex]")?.focus({ preventScroll: true });
+	}, []);
+	return (
+		<div className="decision-save-host" data-phone={phone ? "" : undefined} ref={host}>
+			<PendingAnswersContext.Provider value={phone ? store : undefined}>
+				{children}
+			</PendingAnswersContext.Provider>
+			{phone && (
+				<SaveBar onFailed={showCard} onFocusLeave={leave} onIncomplete={showCard} store={store} />
+			)}
+		</div>
+	);
+}
diff --git a/packages/editor/src/styles.css b/packages/editor/src/styles.css
index 78e65fe86..cc4e0be5f 100644
--- a/packages/editor/src/styles.css
+++ b/packages/editor/src/styles.css
@@ -575,58 +575,58 @@
 }
 
 /*
- * Wide authored blocks on a phone: a coarse pointer on a small screen, and a
- * narrow document. The media query is the phone class, kept identical to
- * `isPhone` in pointer.ts, so it also holds where no shell sets
- * `:root[data-phone]`. Narrow desktop windows keep their scroll lanes untouched.
+ * Wide authored blocks on a phone (`:root[data-phone]`), in a narrow document. Narrow
+ * desktop windows keep their scroll lanes untouched.
  */
-@media (pointer: coarse) and (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
-	@container (max-width: 40rem) {
-		/* A wide table fades the side that still hides columns, as a drawn diagram does. */
-		.plan-content table {
-			--plan-table-fade: calc(var(--spacing) * 8);
-		}
+@container (max-width: 40rem) {
+	/* A wide table fades the side that still hides columns, as a drawn diagram does. */
+	:root[data-phone] .plan-content table {
+		--plan-table-fade: calc(var(--spacing) * 8);
+	}
 
-		.plan-content table[data-more="end"] {
-			mask-image: linear-gradient(to right, black calc(100% - var(--plan-table-fade)), transparent);
-		}
+	:root[data-phone] .plan-content table[data-more="end"] {
+		mask-image: linear-gradient(to right, black calc(100% - var(--plan-table-fade)), transparent);
+	}
 
-		.plan-content table[data-more="start"] {
-			mask-image: linear-gradient(to right, transparent, black var(--plan-table-fade));
-		}
+	:root[data-phone] .plan-content table[data-more="start"] {
+		mask-image: linear-gradient(to right, transparent, black var(--plan-table-fade));
+	}
 
-		.plan-content table[data-more="both"] {
-			mask-image: linear-gradient(
-				to right,
-				transparent,
-				black var(--plan-table-fade),
-				black calc(100% - var(--plan-table-fade)),
-				transparent
-			);
-		}
+	:root[data-phone] .plan-content table[data-more="both"] {
+		mask-image: linear-gradient(
+			to right,
+			transparent,
+			black var(--plan-table-fade),
+			black calc(100% - var(--plan-table-fade)),
+			transparent
+		);
+	}
 
-		/*
-		 * Code wraps rather than scrolling a few characters at a time. The
-		 * coloured copy is drawn in a shadow root, so it reads this switch
-		 * instead of the rule; a plain-text fence is laid out by hand and
-		 * keeps its lines.
-		 */
-		.plan-content .planCode:not([data-plan-text]) .plan-code-view {
-			--plan-code-overflow: wrap;
-		}
+	/*
+	 * Code wraps rather than scrolling a few characters at a time. The
+	 * coloured copy is drawn in a shadow root, so it reads this switch
+	 * instead of the rule; a plain-text fence is laid out by hand and
+	 * keeps its lines.
+	 */
+	:root[data-phone] .plan-content .planCode:not([data-plan-text]) .plan-code-view {
+		--plan-code-overflow: wrap;
+	}
 
-		.plan-content .planCode:not([data-plan-text]) .plan-code-view > diffs-container {
-			min-inline-size: 0;
-		}
+	:root[data-phone]
+		.plan-content
+		.planCode:not([data-plan-text])
+		.plan-code-view
+		> diffs-container {
+		min-inline-size: 0;
+	}
 
-		.plan-content .planCode:not([data-plan-text]) [data-plan-source] {
-			overflow-wrap: anywhere;
-		}
+	:root[data-phone] .plan-content .planCode:not([data-plan-text]) [data-plan-source] {
+		overflow-wrap: anywhere;
+	}
 
-		/* A diagram below its readability floor offers a full-screen reading. */
-		.plan-content .plan-diagram-actions {
-			display: flex;
-		}
+	/* A diagram below its readability floor offers a full-screen reading. */
+	:root[data-phone] .plan-content .plan-diagram-actions {
+		display: flex;
 	}
 }
 
@@ -1492,15 +1492,16 @@
 	right: 0;
 }
 
+/* The scrim every phone sheet shares, lighter while this sheet rests at its medium detent. */
 .plan-comment-sheet-backdrop {
-	--backdrop-opacity: 0.24;
-	--backdrop-opacity-large: 0.36;
+	--backdrop-opacity: var(--sheet-scrim-medium);
+	--backdrop-opacity-large: 1;
 	position: fixed;
 	inset: 0;
 	z-index: 70;
-	background: rgb(var(--shadow-color));
+	background: var(--color-scrim);
 	opacity: var(--backdrop-opacity);
-	transition: opacity var(--duration-base) var(--ease-out);
+	transition: opacity var(--sheet-rise-dur) var(--sheet-ease);
 }
 
 /* Pulled up to the large detent, the sheet sets the document further back. */
@@ -1563,16 +1564,16 @@ body:has(.plan-comment-sheet-popup[data-swiping])
 	overflow: hidden;
 	padding-right: env(safe-area-inset-right, 0px);
 	padding-left: env(safe-area-inset-left, 0px);
-	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+	border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
 	background: var(--color-page);
-	box-shadow: 0 -1rem 3rem rgb(var(--shadow-color) / 22%);
+	box-shadow: var(--shadow-overlay);
 	font-size: var(--text-sm);
 	line-height: var(--text-sm--line-height);
 	transform: translateY(
 		calc(var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px))
 	);
-	transition: transform calc(var(--drawer-swipe-strength, 1) * var(--duration-base))
-		var(--ease-out);
+	transition: transform calc(var(--drawer-swipe-strength, 1) * var(--sheet-rise-dur))
+		var(--sheet-ease);
 }
 
 /* The finger owns the sheet while it drags; the spring takes over on release. */
@@ -1582,12 +1583,12 @@ body:has(.plan-comment-sheet-popup[data-swiping])
 
 .plan-comment-sheet-grabber {
 	display: block;
-	width: 2.25rem;
-	height: 0.25rem;
+	width: var(--sheet-grabber-width);
+	height: var(--sheet-grabber-height);
 	flex: none;
-	margin: 0.5rem auto 0;
+	margin: var(--sheet-grabber-inset) auto 0;
 	border-radius: var(--radius-full);
-	background: var(--color-gray-300);
+	background: var(--color-grabber);
 }
 
 /* One row: what the sheet is about, and its close, with no title above it. */
@@ -1725,7 +1726,7 @@ body:has(.plan-comment-sheet-popup[data-swiping])
 	border-top: var(--edge-width) solid var(--color-edge);
 	background: var(--color-page);
 	transform: translateY(calc(-1 * var(--plan-comment-sheet-lift)));
-	transition: transform var(--duration-base) var(--ease-out);
+	transition: transform var(--sheet-rise-dur) var(--sheet-ease);
 }
 
 .plan-comment-sheet-popup[data-swiping] .plan-comment-thread-compose {
@@ -1826,6 +1827,15 @@ body:has(.plan-comment-sheet-popup[data-swiping])
 	opacity: 0;
 }
 
+/* Sheets leave faster than they arrive; a flick still sets the pace of a dismissal. */
+.plan-comment-sheet-popup[data-ending-style] {
+	transition-duration: calc(var(--drawer-swipe-strength, 1) * var(--sheet-fall-dur));
+}
+
+.plan-comment-sheet-backdrop[data-ending-style] {
+	transition-duration: var(--sheet-fall-dur);
+}
+
 @media (prefers-reduced-motion: reduce) {
 	.plan-comment-card {
 		animation: none;
@@ -1841,6 +1851,8 @@ body:has(.plan-comment-sheet-popup[data-swiping])
 
 	.plan-comment-sheet-backdrop,
 	.plan-comment-sheet-popup,
+	.plan-comment-sheet-popup[data-ending-style],
+	.plan-comment-sheet-backdrop[data-ending-style],
 	.plan-comment-sheet-content .plan-comment-thread-compose {
 		transition-duration: 0ms;
 	}
@@ -1893,8 +1905,18 @@ body:has(.plan-comment-sheet-popup[data-swiping])
 	padding-block-start: calc(var(--spacing) * 4);
 }
 
+/* Cards answered in place outside the pane, such as a child document's, save from the same bar. */
+.decision-save-host {
+	height: 100%;
+	min-height: 0;
+}
+
+.decision-save-host[data-phone] {
+	position: relative;
+}
+
 /* Save lives in the bar, so the card footer keeps only a quiet way out. */
-.plan-decisions[data-phone] .question-discard-quiet {
+:is(.plan-decisions, .decision-save-host)[data-phone] .question-discard-quiet {
 	margin-inline: calc(var(--spacing) * -2) auto;
 	color: var(--color-text-tertiary);
 	font-size: var(--text-xs);
@@ -1902,7 +1924,7 @@ body:has(.plan-comment-sheet-popup[data-swiping])
 }
 
 /* Leave the hint and the next row visible above the keyboard. */
-.plan-decisions[data-phone] .question-field {
+:is(.plan-decisions, .decision-save-host)[data-phone] .question-field {
 	scroll-margin-block-end: calc(var(--keyboard-inset, 0px) + var(--spacing) * 20);
 }
 
@@ -1911,7 +1933,7 @@ body:has(.plan-comment-sheet-popup[data-swiping])
 }
 
 /* `--phone-bottom-chrome` is the height of any bar below this one, above the safe area. */
-.plan-decisions[data-phone] .decision-save-bar {
+:is(.plan-decisions, .decision-save-host)[data-phone] .decision-save-bar {
 	position: absolute;
 	z-index: 2;
 	inset-inline: calc(var(--spacing) * 3);
@@ -1935,7 +1957,7 @@ body:has(.plan-comment-sheet-popup[data-swiping])
 		opacity var(--save-bar-close-dur) var(--ease-out);
 }
 
-.plan-decisions[data-phone] .decision-save-bar[data-open] {
+:is(.plan-decisions, .decision-save-host)[data-phone] .decision-save-bar[data-open] {
 	opacity: 1;
 	pointer-events: auto;
 	transform: none;
@@ -1945,7 +1967,8 @@ body:has(.plan-comment-sheet-popup[data-swiping])
 }
 
 /* A text field has the keyboard up; the bar would only crowd it. */
-.plan-decisions[data-phone]:has(.question-field:focus) .decision-save-bar[data-open] {
+:is(.plan-decisions, .decision-save-host)[data-phone]:has(.question-field:focus)
+	.decision-save-bar[data-open] {
 	opacity: 0;
 	pointer-events: none;
 	transform: translateY(calc(100% + var(--spacing) * 6));
@@ -1963,7 +1986,7 @@ body:has(.plan-comment-sheet-popup[data-swiping])
 	color: var(--color-danger-text);
 }
 
-.plan-decisions[data-phone] .decision-save-bar-button {
+:is(.plan-decisions, .decision-save-host)[data-phone] .decision-save-bar-button {
 	min-height: var(--control-target-coarse);
 	padding-inline: calc(var(--spacing) * 4);
 	font-size: var(--text-sm);
@@ -2071,9 +2094,10 @@ body:has(.plan-comment-sheet-popup[data-swiping])
 }
 
 @media (prefers-reduced-motion: reduce) {
-	.plan-decisions[data-phone] .decision-save-bar,
-	.plan-decisions[data-phone] .decision-save-bar[data-open],
-	.plan-decisions[data-phone]:has(.question-field:focus) .decision-save-bar[data-open] {
+	:is(.plan-decisions, .decision-save-host)[data-phone] .decision-save-bar,
+	:is(.plan-decisions, .decision-save-host)[data-phone] .decision-save-bar[data-open],
+	:is(.plan-decisions, .decision-save-host)[data-phone]:has(.question-field:focus)
+		.decision-save-bar[data-open] {
 		transform: none;
 		transition: opacity var(--duration-fast) var(--ease-out);
 	}
diff --git a/packages/visuals/theme.css b/packages/visuals/theme.css
index 2d44fdabe..56d562ddd 100644
--- a/packages/visuals/theme.css
+++ b/packages/visuals/theme.css
@@ -94,8 +94,9 @@
 	--color-chat-pane: color-mix(in srgb, var(--color-ground) 30%, var(--color-page));
 	/* Phone chrome floats over content: a translucent page that blurs what scrolls beneath. */
 	--color-glass: color-mix(in oklch, var(--color-page) 72%, transparent);
-	/* Dims the page beneath a phone sheet. */
+	/* Dims the page beneath a phone sheet. Every sheet shares it, and one grabber. */
 	--color-scrim: oklch(var(--shadow-color) / 32%);
+	--color-grabber: var(--color-gray-300);
 
 	/* Petrol is the only accent: action, focus, presence and links all agree. */
 	--color-brand: oklch(0.50006 0.08514 210.06); /* #06707e */
@@ -260,6 +261,11 @@
 	--sheet-gap: calc(var(--spacing) * 2);
 	--sheet-max-width: 35rem;
 	--action-sheet-row-height: calc(var(--spacing) * 14);
+	--sheet-grabber-width: calc(var(--spacing) * 9);
+	--sheet-grabber-height: var(--spacing);
+	--sheet-grabber-inset: calc(var(--spacing) * 1.5);
+	/* A sheet resting at its medium detent dims the page by this share of the scrim. */
+	--sheet-scrim-medium: 0.75;
 
 	/* Empty states share one illustration and copy rhythm. */
 	--empty-state-icon-frame-size: calc(var(--spacing) * 14);
@@ -377,6 +383,7 @@
 	/* Sheets rise on the same spring-like curve and leave faster than they arrive. */
 	--sheet-rise-dur: 420ms;
 	--sheet-fall-dur: 260ms;
+	--sheet-ease: var(--tab-slide-ease);
 	--sheet-page-dur: 350ms;
 	--route-swap-out-dur: 80ms;
 	--route-swap-in-dur: 150ms;
diff --git a/scripts/design-contract/exceptions/dynamic-editor.json b/scripts/design-contract/exceptions/dynamic-editor.json
index ad0f33db1..2b2561a5a 100644
--- a/scripts/design-contract/exceptions/dynamic-editor.json
+++ b/scripts/design-contract/exceptions/dynamic-editor.json
@@ -361,7 +361,7 @@
 				2
 			]
 		],
-		"sourceHash": "8e4ca42841041f65cac8c8d3e3380c793019a7c7cf9992871d5fcd88afe6d511"
+		"sourceHash": "37474a2d7f35a9d3ac00f2e9cc05a55e528a463de3572bdf9c45a2e3ab96db1c"
 	},
 	{
 		"file": "packages/editor/src/collaboration.tsx",
diff --git a/scripts/design-contract/exceptions/preserved-values.json b/scripts/design-contract/exceptions/preserved-values.json
index bd3512b34..7b3ff29f8 100644
--- a/scripts/design-contract/exceptions/preserved-values.json
+++ b/scripts/design-contract/exceptions/preserved-values.json
@@ -134,39 +134,20 @@
 	},
 	{
 		"file": "packages/editor/src/styles.css",
-		"reason": "Existing sheet backdrop consumes the legacy shadow channels through rgb(); preserve current appearance and flag the color-space mismatch for separate review.",
+		"reason": "Sheet rise multiplies the shared sheet duration by the gesture library's runtime swipe-strength scalar (Base UI's --drawer-swipe-strength); preserve proportional gesture response.",
 		"cases": [
 			[
-				"color",
-				"background",
-				"rgb(var(--shadow-color))",
-				"CSS > .plan-comment-sheet-backdrop",
-				1
-			]
-		]
-	},
-	{
-		"file": "packages/editor/src/styles.css",
-		"reason": "Bottom-sheet upward shadow has established geometry distinct from shared downward surface shadows; retained pending dedicated visual review.",
-		"cases": [
-			[
-				"shadow",
-				"box-shadow",
-				"0 -1rem 3rem rgb(var(--shadow-color) / 22%)",
+				"motion",
+				"transition",
+				"transform calc(var(--drawer-swipe-strength, 1) * var(--sheet-rise-dur))\n\t\tvar(--sheet-ease)",
 				"CSS > .plan-comment-sheet-popup",
 				1
-			]
-		]
-	},
-	{
-		"file": "packages/editor/src/styles.css",
-		"reason": "Drawer duration multiplies a shared duration by the gesture library runtime swipe-strength scalar; preserve proportional gesture response.",
-		"cases": [
+			],
 			[
 				"motion",
-				"transition",
-				"transform calc(var(--drawer-swipe-strength, 1) * var(--duration-base))\n\t\tvar(--ease-out)",
-				"CSS > .plan-comment-sheet-popup",
+				"transition-duration",
+				"calc(var(--drawer-swipe-strength, 1) * var(--sheet-fall-dur))",
+				"CSS > .plan-comment-sheet-popup[data-ending-style]",
 				1
 			]
 		]
@@ -455,7 +436,7 @@
 			[
 				"typography",
 				"font-size",
-				"var(--field-text-min)",
+				"max(var(--field-text-min), 1em)",
 				"CSS > @layer base > @media (pointer: coarse) > :is(textarea, select, input:not([type=\"checkbox\"], [type=\"radio\"], [type=\"range\"], [type=\"color\"], [type=\"file\"]), [contenteditable]:not([contenteditable=\"false\"], .plan-content))",
 				1
 			]