From 73e44724b58cb3754ef1a276abb6ca908effac44 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Sun, 11 Oct 2026 14:05:36 +0100
Subject: [PATCH 1/3] Polish phones: child reading mode, a cascade-proof 16px
 field floor and shared sheet tokens

- Child documents on a phone open for reading; the parent's tab-bar pencil
  and docked formatting toolbar edit the open child instead of the hidden
  parent, and the child's decision cards save from the phone save bar.
- The coarse-pointer 16px text-field floor is important, so unlayered
  `font: inherit` / `font-size: inherit` rules (question fields, the header
  rename) no longer drop fields below 16px and trigger iOS zoom.
- Comment, documents and action sheets share one scrim, grabber and set
  of sheet durations and easing from the theme. The comment sheet's scrim
  was navy because it read an oklch triplet as rgb.
- Wide-content and phone Chat markdown rules use :root[data-phone], which
  every route now sets.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/chat/markdown.css     |  18 ++-
 apps/web/src/child-phone-chrome.ts |  29 ++++
 apps/web/src/main.tsx              |   8 +-
 apps/web/src/phone-sheets.css      |  14 +-
 apps/web/src/room-workspace.tsx    |  88 +++++++++---
 apps/web/src/theme.css             |  12 +-
 e2e/responsive-child-phone.e2e.ts  | 212 +++++++++++++++++++++++++++++
 e2e/responsive-touch-fields.e2e.ts | 137 +++++++++++++++++++
 packages/editor/src/index.ts       |   1 +
 packages/editor/src/save-bar.tsx   |  42 +++++-
 packages/editor/src/styles.css     | 153 ++++++++++++---------
 packages/visuals/theme.css         |   9 +-
 12 files changed, 614 insertions(+), 109 deletions(-)
 create mode 100644 apps/web/src/child-phone-chrome.ts
 create mode 100644 e2e/responsive-child-phone.e2e.ts
 create mode 100644 e2e/responsive-touch-fields.e2e.ts

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/room-workspace.tsx b/apps/web/src/room-workspace.tsx
index 3199c7889..bf77d22e8 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,52 @@ 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";
+	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 +1134,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 +1157,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={childRoom && !childChrome ? undefined : editMode}
+				formatDock={docked ? childRoom ? childChrome?.formatDock : formatDock : undefined}
 				motionImmediately={settleMotionImmediately}
 				onScrollTop={setPlanScrollTop}
 				onState={setPlanState}
@@ -1136,6 +1183,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 +1194,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 +1285,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 +1322,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 +1336,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 +1390,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..a70785de2 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -1250,11 +1250,11 @@ 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 document body is already 16px
+ * and keeps its smaller inline steps.
  */
 @layer base {
 	@media (pointer: coarse) {
@@ -1263,7 +1263,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..00bb5356e
--- /dev/null
+++ b/e2e/responsive-child-phone.e2e.ts
@@ -0,0 +1,212 @@
+/**
+ * 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, expect, test } from "./room";
+import { installVisualViewport, setVisualViewport } from "./visual-viewport";
+
+import type { Browser, BrowserContext, 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>,
+) {
+	let title = `Child ${crypto.randomUUID().slice(0, 8)}`;
+	let child = await seedChildChannel(
+		Number(new URL(baseURL).port),
+		room,
+		crypto.randomUUID(),
+		title,
+		CHILD_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 };
+}
+
+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();
+	}
+});
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/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..86c94f285 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,12 @@ body:has(.plan-comment-sheet-popup[data-swiping])
 	opacity: 0;
 }
 
+/* Sheets leave faster than they arrive. */
+.plan-comment-sheet-popup[data-ending-style],
+.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 +1848,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 +1902,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 +1921,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 +1930,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 +1954,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 +1964,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 +1983,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 +2091,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;

From b0bf55cc36339a3f7af2e9388a3ba88ae2276e1f Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Sun, 11 Oct 2026 14:27:57 +0100
Subject: [PATCH 2/3] Keep the caret clear of the phone formatting dock and
 close review notes

- While formatting docks above the keyboard, the document scroller pads its
  foot by the dock's row and brings the caret's block back above it, in root
  and child documents.
- A child opening over a document being edited returns that document to
  reading.
- A flicked comment sheet still sets the pace of its dismissal.
- The phone Chat composer keys off :root[data-phone].
- Drop an unreachable child fallback and note the 16px floor's tradeoff.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/chat/composer.css      |   6 +-
 apps/web/src/phone-workspace.css    |  12 +++
 apps/web/src/room-workspace.tsx     |   6 +-
 apps/web/src/theme.css              |   5 +-
 e2e/responsive-child-phone.e2e.ts   | 109 +++++++++++++++++++++++++++-
 packages/editor/src/plan-editor.tsx |  15 ++++
 packages/editor/src/styles.css      |   7 +-
 7 files changed, 149 insertions(+), 11 deletions(-)

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/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 bf77d22e8..563986457 100644
--- a/apps/web/src/room-workspace.tsx
+++ b/apps/web/src/room-workspace.tsx
@@ -965,6 +965,10 @@ export function RoomWorkspace(
 	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(
@@ -1157,7 +1161,7 @@ export function RoomWorkspace(
 				connection={status === "deleted" ? "closed" : status}
 				key={workspaceArchivedAt ? "archived" : "active"}
 				disclosureMotion={motionContract("collapse")}
-				editMode={childRoom && !childChrome ? undefined : editMode}
+				editMode={editMode}
 				formatDock={docked ? childRoom ? childChrome?.formatDock : formatDock : undefined}
 				motionImmediately={settleMotionImmediately}
 				onScrollTop={setPlanScrollTop}
diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index a70785de2..516720937 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -1253,8 +1253,9 @@ button.chat-tool-call-toggle {
  * 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 document body is already 16px
- * and keeps its smaller inline steps.
+ * 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) {
diff --git a/e2e/responsive-child-phone.e2e.ts b/e2e/responsive-child-phone.e2e.ts
index 00bb5356e..0bb616ed3 100644
--- a/e2e/responsive-child-phone.e2e.ts
+++ b/e2e/responsive-child-phone.e2e.ts
@@ -5,10 +5,10 @@
  */
 
 import { seedChildChannel } from "./database";
-import { authenticate, expect, test } from "./room";
+import { authenticate, content, expect, openIsolatedRoom, test } from "./room";
 import { installVisualViewport, setVisualViewport } from "./visual-viewport";
 
-import type { Browser, BrowserContext, Page } from "@playwright/test";
+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?";
@@ -26,6 +26,7 @@ async function openChild(
 	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(
@@ -33,7 +34,7 @@ async function openChild(
 		room,
 		crypto.randomUUID(),
 		title,
-		CHILD_SOURCE,
+		source,
 	);
 	let context = await browser.newContext({ ...options, baseURL });
 	await before?.(context);
@@ -45,6 +46,56 @@ async function openChild(
 	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" });
 }
@@ -210,3 +261,55 @@ test("a child keeps no reading mode for viewers on a phone or anyone on desktop"
 		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/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/styles.css b/packages/editor/src/styles.css
index 86c94f285..cc4e0be5f 100644
--- a/packages/editor/src/styles.css
+++ b/packages/editor/src/styles.css
@@ -1827,8 +1827,11 @@ body:has(.plan-comment-sheet-popup[data-swiping])
 	opacity: 0;
 }
 
-/* Sheets leave faster than they arrive. */
-.plan-comment-sheet-popup[data-ending-style],
+/* 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);
 }

From 3a272666e13cd6d5ff7d68a3f964fcb217988149 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Sun, 11 Oct 2026 17:55:29 +0100
Subject: [PATCH 3/3] Renew design-contract review exceptions for phone polish

preserved-values.json:
- apps/web/src/theme.css: the coarse-pointer field floor is now
  max(var(--field-text-min), 1em) (with !important), so an unlayered
  font: inherit cannot drop a touch field below 16px; 1em keeps a larger
  inherited size. Replaces the var(--field-text-min) entry.
- packages/editor/src/styles.css .plan-comment-sheet-popup: the approved
  swipe-scaled rise now uses the shared --sheet-rise-dur and --sheet-ease.
- .plan-comment-sheet-popup[data-ending-style]: the dismissal duration is
  scaled by Base UI's runtime --drawer-swipe-strength the same way, using
  --sheet-fall-dur.
- Removed the stale backdrop rgb(var(--shadow-color)) and the popup's raw
  upward box-shadow; both are tokens now (--color-scrim, --shadow-overlay).

dynamic-editor.json:
- packages/editor/src/plan-editor.tsx: the only change is an effect that
  scrolls the caret's block above the formatting dock; no class or style
  logic, and the reviewed className composition is unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../exceptions/dynamic-editor.json            |  2 +-
 .../exceptions/preserved-values.json          | 37 +++++--------------
 2 files changed, 10 insertions(+), 29 deletions(-)

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
 			]