diff --git a/config/scripts/mobile-web-app-editable-host-font-size.mjs b/config/scripts/mobile-web-app-editable-host-font-size.mjs
new file mode 100644
index 00000000000..3add346cce2
--- /dev/null
+++ b/config/scripts/mobile-web-app-editable-host-font-size.mjs
@@ -0,0 +1,309 @@
+/**
+ * The 16 px floor for an editable the page styles with CSS rather than with a `TextInput` prop.
+ *
+ * `mobile-web-app-text-input-font-size-seam.mjs` reads the floor and holds every `TextInput` in a
+ * route's closure to it. It cannot see the rich Markdown editor: that surface is a
+ * `contenteditable` element in a string of markup, sized by a rule in a stylesheet the same module
+ * emits, and the walk there matches JSX `TextInput` tags and `style` props. So the editor shipped
+ * at 14 px and was measured at 14 px in both engines — the exact condition the floor exists for,
+ * because iOS zooms the page on focus of any editable under 16 px, never zooms back, and
+ * `keyboard-occlusion.web.ts` then answers 0 for the rest of the session at a scale other than 1.
+ *
+ * The rule is over the closure rather than over a list of known editors, for the same reason the
+ * `TextInput` one is: the next editable host is the one nobody remembers to add.
+ */
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { textInputFontSizeFloor } from './mobile-web-app-text-input-font-size-seam.mjs'
+
+/** The seam's export, which is how a size states the floor rather than restating the number. */
+const SEAM_EXPORT = 'TEXT_INPUT_FONT_SIZE'
+
+/**
+ * Each editable tag in a markup string, whole.
+ *
+ * The tag is what an editable *is*; its id is optional and is read out of the tag afterwards. A
+ * pattern that started from the id matched only the hosts that have one, so a file holding a named
+ * host and an anonymous one reported the named host and said nothing about the other.
+ */
+const EDITABLE_TAG = /<[A-Za-z][^>]*\bcontenteditable="true"[^>]*>/g
+
+/** The id a matched tag carries, or null for one that carries none. */
+const TAG_ID = /\bid="([A-Za-z][\w-]*)"/
+
+function readOrNull(path) {
+  try {
+    return readFileSync(path, 'utf8')
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Every editable host a closure declares, as `{ file, id }`, one entry per tag.
+ *
+ * The completeness half of the verdict below: an empty offender list is only evidence when the
+ * walk found the editables it is judging. A host with no id lands here with `id: null` and is
+ * reported as unresolved rather than passing, and it does so whether or not a named host sits
+ * beside it in the same file.
+ */
+export function editableHostsIn(mobileDir, closure) {
+  const found = []
+  for (const file of closure.local) {
+    const source = readOrNull(join(mobileDir, file))
+    if (source === null || !source.includes('contenteditable="true"')) {
+      continue
+    }
+    for (const [tag] of source.matchAll(EDITABLE_TAG)) {
+      found.push({ file, id: TAG_ID.exec(tag)?.[1] ?? null })
+    }
+  }
+  return found.sort((left, right) =>
+    left.file === right.file
+      ? String(left.id).localeCompare(String(right.id))
+      : left.file < right.file
+        ? -1
+        : 1
+  )
+}
+
+/** The selector as a pattern, with the boundary that keeps `#editor` off `#editor-notes`. */
+function selectorPattern(selector) {
+  return `${selector.replace(/[$()*+.?[\\\]^{|}]/g, '\\$&')}(?![\\w-])`
+}
+
+/** The declarations of the rule whose block opens at `open`, or null for one that never closes. */
+function blockFrom(source, open) {
+  let depth = 1
+  for (let at = open; at < source.length; at += 1) {
+    if (source[at] === '{') {
+      depth += 1
+      continue
+    }
+    if (source[at] === '}') {
+      depth -= 1
+      if (depth === 0) {
+        return source.slice(open, at)
+      }
+    }
+  }
+  return null
+}
+
+/**
+ * Every rule in a stylesheet string whose selector list mentions the selector, in source order.
+ *
+ * The list runs from a line start, the end of the rule before it, a comma, or the backtick the
+ * template literal opens with, up to the `{`; requiring the selector somewhere inside it is what
+ * keeps the surrounding TypeScript's own braces out of the walk. Kept as a list rather than
+ * collapsed to one selector because a comma binds every selector in it to the same declarations,
+ * so the host can be hiding in any of them.
+ *
+ * Textual, and flat: the sheets this reads have no at-rules and no nesting, which is the same
+ * assumption `document-style-scoping.ts` makes and refuses to exceed.
+ */
+function rulesMentioning(source, selector) {
+  const pattern = new RegExp(
+    `(?:^|[},\`])([^{};\`]*${selectorPattern(selector)}[^{};\`]*)\\{`,
+    'dgm'
+  )
+  const rules = []
+  for (let match = pattern.exec(source); match !== null; match = pattern.exec(source)) {
+    // Counted rather than matched to the first `}`: a declaration reading the seam is written
+    // `${TEXT_INPUT_FONT_SIZE}px`, whose own closing brace would have ended the block one
+    // declaration early and left the size looking absent.
+    const declarations = blockFrom(source, match.index + match[0].length)
+    if (declarations === null) {
+      continue
+    }
+    const list = match[1]
+    rules.push({
+      selectors: list
+        .split(',')
+        .map((one) => one.trim())
+        .filter((one) => one !== ''),
+      declarations,
+      // The selector's own start, not the anchor's: the anchor is the previous rule's `}`, a line up.
+      index: match.indices[1][0] + (list.length - list.trimStart().length)
+    })
+  }
+  return rules
+}
+
+/** The last compound of a selector — the element the rule is about, not one of its ancestors. */
+function subjectCompound(selector) {
+  return selector.split(/[\s>+~]+/).at(-1) ?? ''
+}
+
+/**
+ * The `font-size` the cascade actually uses out of one rule.
+ *
+ * A rule may declare the property more than once, and CSS takes the last of equal importance, with
+ * `!important` outranking every declaration that is not. Reading the first one reported
+ * `font-size: 16px; font-size: 14px;` as compliant for a surface the browser renders at 14 px.
+ *
+ * The flag is stripped from the value it returns, so a compliant size that carries it is read as
+ * the size it sets rather than as a shape this walk does not model.
+ */
+function winningFontSize(declarations) {
+  const found = []
+  // Split on the separator rather than matching a value pattern: a size read from the seam is
+  // written `${TEXT_INPUT_FONT_SIZE}px`, whose own closing brace ends any value pattern that
+  // excludes one, and the last declaration in a rule need not carry a trailing semicolon.
+  for (const piece of declarations.split(';')) {
+    const match = /(?:^|[^\w-])font-size:\s*([\s\S]*)$/.exec(piece)
+    if (match === null) {
+      continue
+    }
+    const raw = match[1].trim()
+    found.push({
+      text: raw.replace(/\s*!\s*important$/i, '').trim(),
+      important: /!\s*important$/i.test(raw)
+    })
+  }
+  if (found.length === 0) {
+    return null
+  }
+  return found.findLast((one) => one.important) ?? found.at(-1)
+}
+
+/**
+ * What the winning `font-size` is worth: a literal, a seam substitution, or something else.
+ *
+ * Null for a rule that declares no size at all, which is unresolved rather than a pass: the value
+ * an editable then takes comes from a rule this walk does not read — the host element's own, or the
+ * page's root — so it can be 14 px and the census cannot prove otherwise. Where the `TextInput`
+ * half treats an absent prop as inheritance and lets it through, that policy is main's and about a
+ * prop; this is CSS, and the inherited value is genuinely out of view.
+ */
+function readFontSize(mobileDir, source, declarations) {
+  const winning = winningFontSize(declarations)
+  if (winning === null) {
+    return null
+  }
+  const text = winning.text
+  const literal = /^(\d+(?:\.\d+)?)px$/.exec(text)
+  if (literal !== null) {
+    return { text, onSeam: Number(literal[1]) >= textInputFontSizeFloor(mobileDir) }
+  }
+  // A substitution, which is only the seam when this module imported the seam's export: the same
+  // name declared locally, or imported from somewhere else, is exactly the regression the seam
+  // exists to stop wearing its name.
+  const substituted = /^\$\{([A-Za-z_$][\w$]*)\}px$/.exec(text)
+  if (substituted === null) {
+    return { text, onSeam: false }
+  }
+  const imported = new RegExp(
+    `import\\s*\\{[^}]*\\b${SEAM_EXPORT}\\b[^}]*\\}\\s*from\\s*'[^']*text-input-font-size'`
+  )
+  return { text, onSeam: substituted[1] === SEAM_EXPORT && imported.test(source) }
+}
+
+/**
+ * Every rule in a sheet that applies exactly this selector, in source order.
+ *
+ * All of them rather than the first: rules of equal specificity are ranked by source order, so a
+ * sheet that declares 16 px and then 14 px renders at 14 px, and reading only the first one called
+ * that surface compliant.
+ */
+function exactRules(source, selector) {
+  return rulesMentioning(source, selector).filter((rule) => rule.selectors.includes(selector))
+}
+
+/**
+ * Every rule in a sheet that sizes the host through a selector this walk cannot rank against the
+ * exact one.
+ *
+ * A subject of higher specificity that still targets the host (`main#editor`, `#editor.x`,
+ * `div > #editor`, `#editor:empty`) beats the exact rule, and this census does no specificity
+ * arithmetic: such a rule declaring `font-size` makes the host unresolved rather than compliant. A
+ * descendant (`#editor p`) is about another element and a pseudo-element (`#editor:empty::before`)
+ * is a box the host generates, so neither one is in the way.
+ */
+function unrankableHostRules(source, selector) {
+  return rulesMentioning(source, selector).filter(
+    (rule) =>
+      winningFontSize(rule.declarations) !== null &&
+      rule.selectors.some(
+        (one) =>
+          one !== selector &&
+          !one.includes('::') &&
+          new RegExp(selectorPattern(selector)).test(subjectCompound(one))
+      )
+  )
+}
+
+/**
+ * Where each editable host's size is declared, as `{ at, size }`.
+ *
+ * The size is looked for in the same module the markup came from and in the modules directly beside
+ * it: a document's markup and its stylesheet are two exports of one program, so the rule is stated
+ * over that program's own directory rather than over the whole closure or over its subtree.
+ */
+function editableHostSizes(mobileDir, closure) {
+  const resolutions = []
+  for (const host of editableHostsIn(mobileDir, closure)) {
+    if (host.id === null) {
+      resolutions.push({ at: host.file, size: null })
+      continue
+    }
+    const directory = host.file.slice(0, host.file.lastIndexOf('/'))
+    // The immediate directory, not the subtree: the walk stops at the first file whose sheet opens
+    // the host's selector, and the closure's order is the bundler's rather than alphabetical, so a
+    // sheet one directory down could answer for the sibling the host actually gets.
+    const siblings = closure.local.filter(
+      (file) => file.slice(0, file.lastIndexOf('/')) === directory
+    )
+    const selector = `#${host.id}`
+    let resolved = null
+    for (const file of siblings) {
+      const source = readOrNull(join(mobileDir, file))
+      if (source === null) {
+        continue
+      }
+      const exact = exactRules(source, selector)
+      if (exact.length === 0) {
+        continue
+      }
+      const unrankable = unrankableHostRules(source, selector)
+      const named = unrankable[0] ?? exact[0]
+      resolved = {
+        at: `${file}:${source.slice(0, named.index).split('\n').length}`,
+        // Joined in source order because that is the cascade among rules of equal specificity, and
+        // `winningFontSize` already reads the last of equal importance out of a declaration string.
+        size:
+          unrankable.length > 0
+            ? null
+            : readFontSize(mobileDir, source, exact.map((one) => one.declarations).join(';'))
+      }
+      break
+    }
+    resolutions.push(resolved ?? { at: `${host.file} (#${host.id})`, size: null })
+  }
+  return resolutions
+}
+
+/**
+ * Every editable host whose size this walk could not follow to a rule, as it names it.
+ *
+ * A hole rather than a pass: an editable planted with no id, one whose selector no stylesheet
+ * beside it opens, or one a higher-specificity rule sizes out of this walk's reach, is a surface
+ * the rule cannot judge and has to say so.
+ */
+export function unresolvedEditableHostStyles(mobileDir, closure) {
+  return editableHostSizes(mobileDir, closure)
+    .filter((entry) => entry.size === null)
+    .map((entry) => entry.at)
+    .sort()
+}
+
+/** Every editable host in a closure sized below the floor and off the seam, as `path:line`. */
+export function editableHostFontSizeOffenders(mobileDir, closure) {
+  return [
+    ...new Set(
+      editableHostSizes(mobileDir, closure)
+        .filter((entry) => entry.size !== null && !entry.size.onSeam)
+        .map((entry) => entry.at)
+    )
+  ].sort()
+}
diff --git a/config/scripts/mobile-web-app-editable-host-font-size.test.mjs b/config/scripts/mobile-web-app-editable-host-font-size.test.mjs
new file mode 100644
index 00000000000..21d7ff09b17
--- /dev/null
+++ b/config/scripts/mobile-web-app-editable-host-font-size.test.mjs
@@ -0,0 +1,293 @@
+/**
+ * The editable-host rule, over the tree it ships against and over fixtures of its own.
+ *
+ * Two halves, because an offender list is only evidence when the walk read something. The first
+ * runs the rule over the rich Markdown editor's real modules and says which line carries the size;
+ * the second drives the readings the real tree does not have — a size below the floor, a name that
+ * merely spells the seam's, an editable with no id — against a fixture tree whose only reason to
+ * exist is that those readings have to be observable somewhere.
+ */
+import { mkdtemp, mkdir, rm, writeFile } from 'node:fs/promises'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { afterAll, beforeAll, describe, expect, it } from 'vitest'
+import {
+  editableHostFontSizeOffenders,
+  editableHostsIn,
+  unresolvedEditableHostStyles
+} from './mobile-web-app-editable-host-font-size.mjs'
+
+const mobileDir = fileURLToPath(new URL('../../mobile', import.meta.url))
+
+/** The editor's own two modules, as a closure naming nothing else. */
+const EDITOR_CLOSURE = {
+  local: [
+    'src/components/rich-markdown/document-markup.ts',
+    'src/components/rich-markdown/document-style.ts'
+  ]
+}
+
+/** The seam's web half, copied into a fixture tree so the floor is read rather than restated. */
+const SEAM_SOURCE = `export const TEXT_INPUT_FONT_SIZE_FLOOR = 16\n`
+
+let fixtureDir = null
+
+/** A fixture tree with the seam in it, plus whatever markup and stylesheet a case needs. */
+async function fixture(name, markup, style) {
+  const root = join(fixtureDir, name)
+  await mkdir(join(root, 'src/platform'), { recursive: true })
+  await mkdir(join(root, 'src/doc'), { recursive: true })
+  await writeFile(join(root, 'src/platform/text-input-font-size.web.ts'), SEAM_SOURCE, 'utf8')
+  await writeFile(join(root, 'src/doc/markup.ts'), markup, 'utf8')
+  await writeFile(join(root, 'src/doc/style.ts'), style, 'utf8')
+  return { root, closure: { local: ['src/doc/markup.ts', 'src/doc/style.ts'] } }
+}
+
+/** The same tree with a second stylesheet one directory down, and a closure that reads it first. */
+async function fixtureWithNested(name, markup, style, nestedStyle) {
+  const { root } = await fixture(name, markup, style)
+  await mkdir(join(root, 'src/doc/nested'), { recursive: true })
+  await writeFile(join(root, 'src/doc/nested/style.ts'), nestedStyle, 'utf8')
+  return {
+    root,
+    // Nested first, which is what makes this a measurement: the closure's order is the bundler's,
+    // so a walk that accepted any file under the directory would stop here.
+    closure: { local: ['src/doc/nested/style.ts', 'src/doc/markup.ts', 'src/doc/style.ts'] }
+  }
+}
+
+beforeAll(async () => {
+  fixtureDir = await mkdtemp(join(tmpdir(), 'orca-editable-host-'))
+})
+
+afterAll(async () => {
+  if (fixtureDir) {
+    await rm(fixtureDir, { recursive: true, force: true })
+  }
+})
+
+describe('the editable-host font-size rule', () => {
+  it('finds the editor the TextInput census cannot see', () => {
+    // The precondition every verdict below needs: this walk reads the editor's real markup and
+    // names the surface the page mounts.
+    expect(editableHostsIn(mobileDir, EDITOR_CLOSURE)).toEqual([
+      { file: 'src/components/rich-markdown/document-markup.ts', id: 'editor' }
+    ])
+  })
+
+  it('follows the surface to the rule in the stylesheet beside it', () => {
+    expect(unresolvedEditableHostStyles(mobileDir, EDITOR_CLOSURE)).toEqual([])
+    expect(editableHostFontSizeOffenders(mobileDir, EDITOR_CLOSURE)).toEqual([])
+  })
+
+  it('reds on an editable under the floor', async () => {
+    const { root, closure } = await fixture(
+      'under',
+      'export const MARKUP = \'<main id="editor" contenteditable="true"></main>\'\n',
+      'export function style() {\n  return `    #editor {\n      font-size: 14px;\n    }`\n}\n'
+    )
+    expect(editableHostFontSizeOffenders(root, closure)).toEqual(['src/doc/style.ts:2'])
+  })
+
+  it('accepts a literal that already clears the floor, and a size read from the seam', async () => {
+    const literal = await fixture(
+      'literal',
+      'export const MARKUP = \'<main id="editor" contenteditable="true"></main>\'\n',
+      'export function style() {\n  return `    #editor {\n      font-size: 18px;\n    }`\n}\n'
+    )
+    expect(editableHostFontSizeOffenders(literal.root, literal.closure)).toEqual([])
+
+    const bound = await fixture(
+      'bound',
+      'export const MARKUP = \'<main id="editor" contenteditable="true"></main>\'\n',
+      "import { TEXT_INPUT_FONT_SIZE } from '../platform/text-input-font-size'\n" +
+        'export function style() {\n  return `    #editor {\n      font-size: ${TEXT_INPUT_FONT_SIZE}px;\n    }`\n}\n'
+    )
+    expect(editableHostFontSizeOffenders(bound.root, bound.closure)).toEqual([])
+  })
+
+  it('refuses a name that only spells the seam’s', async () => {
+    // A local `const TEXT_INPUT_FONT_SIZE = 14` two lines up is exactly the regression the seam
+    // exists to stop, wearing its name.
+    const { root, closure } = await fixture(
+      'local',
+      'export const MARKUP = \'<main id="editor" contenteditable="true"></main>\'\n',
+      'const TEXT_INPUT_FONT_SIZE = 14\n' +
+        'export function style() {\n  return `    #editor {\n      font-size: ${TEXT_INPUT_FONT_SIZE}px;\n    }`\n}\n'
+    )
+    expect(editableHostFontSizeOffenders(root, closure)).toEqual(['src/doc/style.ts:3'])
+  })
+
+  it('counts a no-id editable beside a named one, rather than only the named one', async () => {
+    // The tag is what an editable is, and its id is optional: a walk that started from the id
+    // matched the named host and never saw the one beside it, so a file holding both reported the
+    // named one as clean and said nothing at all about the other.
+    const { root, closure } = await fixture(
+      'mixed',
+      'export const NAMED = \'<main id="editor" contenteditable="true"></main>\'\n' +
+        'export const ANONYMOUS = \'<section contenteditable="true"></section>\'\n',
+      'export function style() {\n  return `    #editor {\n      font-size: 18px;\n    }`\n}\n'
+    )
+    expect(editableHostsIn(root, closure)).toEqual([
+      { file: 'src/doc/markup.ts', id: 'editor' },
+      { file: 'src/doc/markup.ts', id: null }
+    ])
+    expect(unresolvedEditableHostStyles(root, closure)).toEqual(['src/doc/markup.ts'])
+  })
+
+  it('reads the sheet beside the markup, not one a directory down', async () => {
+    // The walk stops at the first file whose sheet opens `#editor`, and the closure's order is the
+    // bundler's rather than alphabetical, so a nested sheet could answer for a sibling that is the
+    // one the host actually gets.
+    const { root, closure } = await fixtureWithNested(
+      'nested',
+      'export const MARKUP = \'<main id="editor" contenteditable="true"></main>\'\n',
+      'export function style() {\n  return `    #editor {\n      font-size: 14px;\n    }`\n}\n',
+      'export function nested() {\n  return `    #editor {\n      font-size: 18px;\n    }`\n}\n'
+    )
+    expect(editableHostFontSizeOffenders(root, closure)).toEqual(['src/doc/style.ts:2'])
+  })
+
+  it('reports an editable it cannot judge rather than passing it', async () => {
+    const noId = await fixture(
+      'no-id',
+      'export const MARKUP = \'<main contenteditable="true"></main>\'\n',
+      'export function style() {\n  return `    main { font-size: 18px; }`\n}\n'
+    )
+    expect(unresolvedEditableHostStyles(noId.root, noId.closure)).toEqual(['src/doc/markup.ts'])
+    expect(editableHostFontSizeOffenders(noId.root, noId.closure)).toEqual([])
+
+    const noRule = await fixture(
+      'no-rule',
+      'export const MARKUP = \'<main id="editor" contenteditable="true"></main>\'\n',
+      'export function style() {\n  return `    main { font-size: 18px; }`\n}\n'
+    )
+    expect(unresolvedEditableHostStyles(noRule.root, noRule.closure)).toEqual([
+      'src/doc/markup.ts (#editor)'
+    ])
+  })
+
+  it('reads the declaration CSS uses, not the first one in the rule', async () => {
+    // Equal importance, so the last one wins. A walk that stopped at the first read 16 px and
+    // called a 14 px surface compliant.
+    const { root, closure } = await fixture(
+      'repeated',
+      'export const MARKUP = \'<main id="editor" contenteditable="true"></main>\'\n',
+      'export function style() {\n  return `    #editor {\n      font-size: 16px;\n' +
+        '      font-size: 14px;\n    }`\n}\n'
+    )
+    expect(editableHostFontSizeOffenders(root, closure)).toEqual(['src/doc/style.ts:2'])
+  })
+
+  it('lets an important declaration outrank a later one, as the cascade does', async () => {
+    const important = await fixture(
+      'important-wins',
+      'export const MARKUP = \'<main id="editor" contenteditable="true"></main>\'\n',
+      'export function style() {\n  return `    #editor {\n      font-size: 18px !important;\n' +
+        '      font-size: 14px;\n    }`\n}\n'
+    )
+    expect(editableHostFontSizeOffenders(important.root, important.closure)).toEqual([])
+
+    // And an important declaration is still read as the size it sets, rather than as a shape the
+    // walk does not model: without stripping the flag, a compliant `!important` size on the seam
+    // would have been reported as an offender.
+    const offending = await fixture(
+      'important-offends',
+      'export const MARKUP = \'<main id="editor" contenteditable="true"></main>\'\n',
+      'export function style() {\n  return `    #editor {\n      font-size: 14px !important;\n    }`\n}\n'
+    )
+    expect(editableHostFontSizeOffenders(offending.root, offending.closure)).toEqual([
+      'src/doc/style.ts:2'
+    ])
+  })
+
+  it('cannot judge an editable that declares no size, and says so', async () => {
+    // Inheritance is not a pass here. The value would come from a rule in a file this walk does not
+    // read — the host element's own, or the page's root — so "no declaration" is "cannot say" and
+    // belongs in the unresolved list, which the closure census holds at empty.
+    const { root, closure } = await fixture(
+      'inherits',
+      'export const MARKUP = \'<main id="editor" contenteditable="true"></main>\'\n',
+      'export function style() {\n  return `    #editor {\n      padding: 8px;\n    }`\n}\n'
+    )
+    expect(unresolvedEditableHostStyles(root, closure)).toEqual(['src/doc/style.ts:2'])
+    // Not an offender either: an offender is a size this walk read and found under the floor.
+    expect(editableHostFontSizeOffenders(root, closure)).toEqual([])
+  })
+
+  it('reads every exact rule in the sheet, in source order, as the cascade does', async () => {
+    // Equal specificity, so the last rule wins. Reading only the first called a 14 px surface
+    // compliant because a compliant rule happened to sit above it.
+    const later = await fixture(
+      'later-exact',
+      'export const MARKUP = \'<main id="editor" contenteditable="true"></main>\'\n',
+      'export function style() {\n  return `    #editor {\n      font-size: 18px;\n    }\n' +
+        '    #editor {\n      font-size: 14px;\n    }`\n}\n'
+    )
+    expect(editableHostFontSizeOffenders(later.root, later.closure)).toEqual(['src/doc/style.ts:2'])
+  })
+
+  it('takes source order rather than the lowest exact rule in the sheet', async () => {
+    // The control the reading above needs: the same two rules the other way round are compliant,
+    // so the verdict is the cascade rather than "any rule under the floor anywhere in the sheet".
+    const earlier = await fixture(
+      'earlier-exact',
+      'export const MARKUP = \'<main id="editor" contenteditable="true"></main>\'\n',
+      'export function style() {\n  return `    #editor {\n      font-size: 14px;\n    }\n' +
+        '    #editor {\n      font-size: 18px;\n    }`\n}\n'
+    )
+    expect(editableHostFontSizeOffenders(earlier.root, earlier.closure)).toEqual([])
+  })
+
+  it('cannot rank a higher-specificity subject rule, and says so rather than passing', async () => {
+    // `main#editor` outranks `#editor` and this census does no specificity arithmetic, so a rule
+    // like it declaring a size is a hole, named at its own line.
+    const { root, closure } = await fixture(
+      'subject-specificity',
+      'export const MARKUP = \'<main id="editor" contenteditable="true"></main>\'\n',
+      'export function style() {\n  return `    #editor {\n      font-size: 18px;\n    }\n' +
+        '    main#editor {\n      font-size: 14px;\n    }`\n}\n'
+    )
+    expect(unresolvedEditableHostStyles(root, closure)).toEqual(['src/doc/style.ts:5'])
+    // Not an offender either: an offender is a size this walk read and could rank.
+    expect(editableHostFontSizeOffenders(root, closure)).toEqual([])
+  })
+
+  it('splits a selector list, so a host riding in one still reaches the verdict', async () => {
+    const { root, closure } = await fixture(
+      'subject-in-list',
+      'export const MARKUP = \'<main id="editor" contenteditable="true"></main>\'\n',
+      'export function style() {\n  return `    #editor {\n      font-size: 18px;\n    }\n' +
+        '    h1, main#editor {\n      font-size: 14px;\n    }`\n}\n'
+    )
+    expect(unresolvedEditableHostStyles(root, closure)).toEqual(['src/doc/style.ts:5'])
+  })
+
+  it('reads the host’s own id, not a longer one that starts with it', async () => {
+    // The selector list is now read whole, so `#editor` has to stop at an id boundary: without one,
+    // a rule for the element beside the host would have made the host unresolved.
+    const { root, closure } = await fixture(
+      'neighbour-id',
+      'export const MARKUP = \'<main id="editor" contenteditable="true"></main>\'\n',
+      'export function style() {\n  return `    #editor {\n      font-size: 18px;\n    }\n' +
+        '    #editor-notes {\n      font-size: 14px;\n    }`\n}\n'
+    )
+    expect(unresolvedEditableHostStyles(root, closure)).toEqual([])
+    expect(editableHostFontSizeOffenders(root, closure)).toEqual([])
+  })
+
+  it('leaves a descendant rule and a pseudo-element rule out of the way', async () => {
+    // Neither one is the host: `#editor p` is about another element, and `::before` is a box the
+    // host generates. Counting either as a hole would report the shipped sheet unresolved.
+    const { root, closure } = await fixture(
+      'not-the-host',
+      'export const MARKUP = \'<main id="editor" contenteditable="true"></main>\'\n',
+      'export function style() {\n  return `    #editor {\n      font-size: 18px;\n    }\n' +
+        '    #editor::before {\n      font-size: 12px;\n    }\n' +
+        '    #editor p {\n      font-size: 0.9em;\n    }`\n}\n'
+    )
+    expect(unresolvedEditableHostStyles(root, closure)).toEqual([])
+    expect(editableHostFontSizeOffenders(root, closure)).toEqual([])
+  })
+})
diff --git a/config/scripts/mobile-web-app-rich-markdown-render.test.mjs b/config/scripts/mobile-web-app-rich-markdown-render.test.mjs
new file mode 100644
index 00000000000..46bc797267a
--- /dev/null
+++ b/config/scripts/mobile-web-app-rich-markdown-render.test.mjs
@@ -0,0 +1,674 @@
+/**
+ * The rich Markdown editor in the page, in a real browser, under the policy the shell ships.
+ *
+ * The native component puts a hand-written document inside a `WebView` and talks to it over
+ * `postMessage` and `injectJavaScript`. The page has no WebView, so it mounts the same modules and
+ * calls them. That makes four claims this file measures rather than asserts: that all fifteen
+ * toolbar commands change the document under the shipped header with no violation; that `ready`
+ * and `change` reach the component through its own seam and never through the shell's bridge
+ * object; that a remount leaves nothing of the first mount behind (rulings 20 and 21); and that the
+ * surface is on the 16 px floor and the two URL commands are answered by a modal rather than by the
+ * `null` both shells return from `window.prompt`.
+ *
+ * Both engines, because the shell is WKWebView on one platform and a Chromium WebView on the other,
+ * and `document.execCommand` — which the whole program is built on — is the engine's.
+ */
+import { Buffer } from 'node:buffer'
+import { mkdir, mkdtemp, rm, writeFile } from 'node:fs/promises'
+import { join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { afterAll, beforeAll, describe, expect, it } from 'vitest'
+import * as esbuild from 'esbuild'
+import { chromium, webkit } from 'playwright-core'
+import { MOBILE_WEB_APP_ROOT_RESET, lucideBarrelPlugin } from './build-mobile-web-app-bundle.mjs'
+import { mobileWebAppDependenciesPresent } from './mobile-web-app-bundle-dependencies.mjs'
+import { textInputFontSizeFloor } from './mobile-web-app-text-input-font-size-seam.mjs'
+import {
+  createBundleServer,
+  installCspViolationRecorder,
+  installListenerRecorder,
+  installSchedulerRecorder,
+  readShellCsp
+} from './mobile-web-app-render-harness.mjs'
+
+const mobileDir = fileURLToPath(new URL('../../mobile', import.meta.url))
+const componentDir = join(mobileDir, 'src/components')
+
+/**
+ * The surface's floor, read out of the seam's own module rather than retyped.
+ *
+ * The number was a literal `16` under a comment claiming it was read, which is the shape the seam
+ * exists to prevent: a theme that raised the body size past the floor would move what the page
+ * computes and leave this asserting the old number. `textInputFontSizeFloor` is the same reader the
+ * closure census uses, and it throws rather than defaulting when the seam is gone.
+ */
+const FLOOR = textInputFontSizeFloor(mobileDir)
+
+/** Every command, with how to set the document up for it and what it must produce. */
+const COMMANDS = [
+  { label: 'H1', command: 'heading1', select: 'all', expect: 'h1' },
+  { label: 'H2', command: 'heading2', select: 'all', expect: 'h2' },
+  { label: 'H3', command: 'heading3', select: 'all', expect: 'h3' },
+  { label: 'Bold', command: 'bold', select: 'word', expect: 'b,strong' },
+  { label: 'Italic', command: 'italic', select: 'word', expect: 'i,em' },
+  { label: 'Strike', command: 'strike', select: 'word', expect: 'strike,s,del' },
+  { label: 'Bullet list', command: 'bulletList', select: 'all', expect: 'ul' },
+  { label: 'Numbered list', command: 'orderedList', select: 'all', expect: 'ol' },
+  { label: 'Checklist', command: 'taskList', select: 'all', expect: 'ul[data-type="taskList"]' },
+  { label: 'Quote', command: 'quote', select: 'all', expect: 'blockquote' },
+  { label: 'Inline code', command: 'inlineCode', select: 'word', expect: 'code' },
+  { label: 'Code block', command: 'codeBlock', select: 'all', expect: 'pre' }
+]
+
+/** Paragraph is the fifteenth, and it is the only one whose proof is a document it undoes. */
+const PARAGRAPH = { label: 'Body', command: 'paragraph' }
+
+/**
+ * The two that need a URL, and the element each inserts.
+ *
+ * The image's URL is this server's own, because an inserted `<img>` is fetched: a name that does
+ * not resolve put a load failure in the console, and WebKit reports it where chromium does not.
+ * Serving it is also the stronger reading — the element the command inserted actually painted
+ * under the shipped policy rather than merely appearing in the markup.
+ */
+const IMAGE_PATH = '/inserted.png'
+const URL_COMMANDS = [
+  { label: 'Link', title: 'Link URL', path: '/linked', expect: 'a[href]' },
+  { label: 'Image', title: 'Image URL', path: IMAGE_PATH, expect: 'img' }
+]
+
+/** One transparent pixel, served for the image the Image command inserts. */
+const PIXEL = Buffer.from(
+  'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFAAH/q842iQAAAABJRU5ErkJggg==',
+  'base64'
+)
+
+const ENGINES = [
+  {
+    name: 'chromium',
+    // CI runs this against the runner's Google Chrome rather than paying for a download, the same
+    // override shape as every other render check here.
+    launch: () => {
+      const executablePath = process.env.ORCA_MOBILE_WEB_RENDER_BROWSER
+      return chromium.launch({ headless: true, ...(executablePath ? { executablePath } : {}) })
+    }
+  },
+  { name: 'webkit', launch: () => webkit.launch({ headless: true }) }
+]
+
+/**
+ * The page under test: the real component, mounted by the real React, with a handle on its props.
+ *
+ * Not a re-implementation. The controller, the mount, the document's own modules and the toolbar
+ * are all the behaviour under test, and a probe that called `runCommand` itself would prove nothing
+ * about any of them.
+ *
+ * `content` is fed back from `onChange`, which is what `MarkdownReader` does: a harness that held
+ * the prop still would have the controller replacing the document under every edit.
+ */
+const PAGE_ENTRY = `
+import { createElement, useEffect, useRef, useState } from 'react'
+import { createRoot } from 'react-dom/client'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
+import { MobileRichMarkdownEditor } from './MobileRichMarkdownEditor'
+
+/**
+ * What the route's own navigator supplies and a bare mount does not: react-navigation wraps every
+ * screen in a safe-area provider, and the URL modal's drawer reads the insets from it. Without one
+ * the modal throws where the page has no problem at all.
+ */
+const METRICS = {
+  frame: { x: 0, y: 0, width: 390, height: 844 },
+  insets: { top: 0, left: 0, right: 0, bottom: 0 }
+}
+
+function Harness() {
+  const [state, setState] = useState({
+    mounted: true,
+    generation: 0,
+    content: '',
+    secondContent: '',
+    editable: true,
+    both: false
+  })
+  const handle = useRef(null)
+  useEffect(() => {
+    globalThis.__orcaEditor = {
+      set: (next) => setState((previous) => ({ ...previous, ...next })),
+      changes: [],
+      secondChanges: [],
+      links: [],
+      insets: [],
+      dismiss: () => handle.current?.dismissKeyboard()
+    }
+    document.body.setAttribute('data-ready', 'yes')
+  }, [])
+  // Each editor holds its own content, which is what makes the two-surface case a measurement:
+  // sharing one prop would show the second's edit on the first whatever the document did.
+  const editor = (key, withHandle, content, onChanged) =>
+    createElement(MobileRichMarkdownEditor, {
+      key,
+      ref: withHandle ? handle : undefined,
+      content,
+      editable: state.editable,
+      onChange: onChanged,
+      onOpenLink: (url) => globalThis.__orcaEditor.links.push(url),
+      onKeyboardInsetChange: (bottom) => globalThis.__orcaEditor.insets.push(bottom)
+    })
+  return createElement(
+    SafeAreaProvider,
+    { initialMetrics: METRICS },
+    createElement(
+      'div',
+      { style: { display: 'flex', flexDirection: 'row', height: '100vh' } },
+      state.mounted
+        ? createElement(
+            'div',
+            { id: 'first-surface', style: { flex: 1, display: 'flex', minHeight: 0 } },
+            editor('first-' + state.generation, true, state.content, (next) => {
+              globalThis.__orcaEditor.changes.push(next)
+              setState((previous) => ({ ...previous, content: next }))
+            })
+          )
+        : null,
+      state.both
+        ? createElement(
+            'div',
+            { id: 'second-surface', style: { flex: 1, display: 'flex', minHeight: 0 } },
+            editor('second', false, state.secondContent, (next) => {
+              globalThis.__orcaEditor.secondChanges.push(next)
+              setState((previous) => ({ ...previous, secondContent: next }))
+            })
+          )
+        : null
+    )
+  )
+}
+
+createRoot(document.getElementById('root')).render(createElement(Harness))
+`
+
+/**
+ * A recorder over `window.ReactNativeWebView`, installed before the bundle runs.
+ *
+ * Ruling 19's claim on the page is an absence, and an absence needs an instrument: on the shell
+ * that object is the bridge's, so an editor message posted through it would put editor JSON into
+ * the bridge's own channel. Defined rather than left undefined, so "the page never reaches for it"
+ * is measured against something that would have answered.
+ */
+function installBridgeObjectRecorder() {
+  globalThis.__orcaBridgeReads = []
+  const bridge = {
+    postMessage: (message) => globalThis.__orcaBridgeReads.push(`post ${String(message)}`)
+  }
+  Object.defineProperty(globalThis, 'ReactNativeWebView', {
+    configurable: true,
+    get: () => {
+      globalThis.__orcaBridgeReads.push('read')
+      return bridge
+    }
+  })
+}
+
+const bundles = mobileWebAppDependenciesPresent()
+const describeEditor = bundles ? describe : describe.skip
+
+let scratch = null
+let server = null
+let origin = null
+
+beforeAll(async () => {
+  if (!bundles) {
+    return
+  }
+  // Inside mobile/ rather than the system temp dir: the entry resolves the component beside it,
+  // and esbuild resolves a bare specifier from the importer upward.
+  await mkdir(join(mobileDir, '.tmp'), { recursive: true })
+  scratch = await mkdtemp(join(mobileDir, '.tmp', 'rich-markdown-render-'))
+  const outDir = join(scratch, 'bundle')
+  await mkdir(outDir, { recursive: true })
+  await esbuild.build({
+    absWorkingDir: mobileDir,
+    stdin: {
+      contents: PAGE_ENTRY,
+      resolveDir: componentDir,
+      loader: 'ts',
+      sourcefile: 'rich-markdown-check.ts'
+    },
+    bundle: true,
+    format: 'esm',
+    outdir: outDir,
+    entryNames: 'rich-markdown-check',
+    target: ['es2022'],
+    jsx: 'automatic',
+    logLevel: 'silent',
+    nodePaths: [join(mobileDir, 'node_modules')],
+    alias: { 'react-native': 'react-native-web' },
+    // The barrel re-exports a `LucideProvider` its own context module does not export, which is the
+    // same shape the app bundle carries this plugin for.
+    plugins: [lucideBarrelPlugin],
+    // `.web.jsx` and `.web.js` are here for the reason the app bundle has them: without them
+    // `react-native-svg`, which the toolbar's icons pull in, resolves its Fabric components and
+    // fails on `codegenNativeComponent`.
+    resolveExtensions: ['.web.tsx', '.web.ts', '.web.jsx', '.web.js', '.tsx', '.ts', '.jsx', '.js'],
+    // Four of `MOBILE_WEB_APP_SHIMS`, because this entry reaches the same React Native modules the
+    // app bundle does: RN ships untranspiled JSX in `.js`, reads `process.env` at module scope, and
+    // assumes a Metro `global` — measured, `isFabric` threw `global is not defined` before the page
+    // mounted at all, and every case in this file failed at `data-ready`.
+    loader: { '.js': 'jsx' },
+    banner: {
+      js: "globalThis.process ??= { env: { NODE_ENV: 'production', EXPO_OS: 'web' }, platform: 'web', version: '', nextTick: (fn) => setTimeout(fn, 0) };"
+    },
+    define: {
+      global: 'globalThis',
+      __DEV__: 'false',
+      'process.env.NODE_ENV': '"production"',
+      'process.env.EXPO_OS': '"web"'
+    }
+  })
+  await writeFile(
+    join(outDir, 'index.html'),
+    // The root reset the shipped document carries: every box below the mount is `flex: 1`, so
+    // without a definite height on all three the editor measures 0 and paints nothing.
+    `<!doctype html><html><head><meta charset="utf-8">${MOBILE_WEB_APP_ROOT_RESET}</head>` +
+      '<body><div id="root"></div>' +
+      '<script type="module" src="/rich-markdown-check.js"></script></body></html>'
+  )
+  const served = await createBundleServer({
+    outDir,
+    cspHeader: await readShellCsp(),
+    handleRequest: (_request, response, path) => {
+      if (path !== IMAGE_PATH) {
+        return false
+      }
+      response.writeHead(200, { 'content-type': 'image/png' })
+      response.end(PIXEL)
+      return true
+    }
+  })
+  server = served.server
+  origin = served.origin
+}, 600_000)
+
+afterAll(async () => {
+  server?.close()
+  if (scratch) {
+    // This run's directory only: `mobile/.tmp` is a shared ignored root and another suite may hold
+    // one of its own.
+    await rm(scratch, { recursive: true, force: true })
+  }
+})
+
+async function openPage(browser) {
+  const page = await browser.newPage({ viewport: { width: 390, height: 844 } })
+  const consoleErrors = []
+  page.on('console', (message) => {
+    if (message.type() === 'error') {
+      consoleErrors.push(message.text())
+    }
+  })
+  page.on('pageerror', (error) => consoleErrors.push(`pageerror: ${error.message}`))
+  await page.addInitScript(installBridgeObjectRecorder)
+  await page.addInitScript(installCspViolationRecorder)
+  await page.addInitScript(installListenerRecorder)
+  await page.addInitScript(installSchedulerRecorder)
+  await page.goto(`${origin}/`, { waitUntil: 'domcontentloaded' })
+  await page.waitForFunction(() => document.body.dataset.ready === 'yes')
+  await page.waitForSelector('#first-surface #editor')
+  return { page, consoleErrors }
+}
+
+/**
+ * Sets the content through the component's prop and waits for the document to hold that markup.
+ *
+ * The oracle is the surface's whole `innerHTML`, not its text. Text cannot tell one block type from
+ * another — `### body text here` and `body text here` read the same — so a run that waited on text
+ * passed while the document was still the one the command before it left, and the next case selected
+ * a range inside an element that was not there any more. Measured: `setEnd` threw
+ * `IndexSizeError` in chromium and the fifteen-command loop timed out in webkit.
+ */
+async function setContent(page, markdown, html) {
+  await page.evaluate((next) => globalThis.__orcaEditor.set({ content: next }), markdown)
+  await page.waitForFunction(
+    (expected) => document.querySelector('#first-surface #editor')?.innerHTML === expected,
+    html,
+    { timeout: 15_000 }
+  )
+}
+
+/**
+ * The same, for the two documents whose markup this file does not write down.
+ *
+ * A checklist and a link render nested markup whose exact serialization is the engine's, so the
+ * wait names the element the case is about to act on instead.
+ */
+async function setContentWithin(page, markdown, selector) {
+  await page.evaluate((next) => globalThis.__orcaEditor.set({ content: next }), markdown)
+  await page.waitForFunction(
+    (expected) =>
+      document.querySelector('#first-surface #editor')?.querySelector(expected) !== null,
+    selector,
+    { timeout: 15_000 }
+  )
+}
+
+/**
+ * The plain paragraph a command case starts from, numbered so no two are the same.
+ *
+ * The content prop is what resets the document, and the controller only pushes when it differs
+ * from what the editor last reported. One command breaks that: WebKit's `insertUnorderedList`
+ * nests the `<ul>` inside the `<p>` it was given, and the serializer walks back out with the same
+ * text — so re-setting the same string after it is a no-op, and the next command ran against the
+ * list rather than against a paragraph.
+ */
+const bodyFor = (index) => `body text ${String(index)}`
+
+/** The surface's markup, which is what every command is read off. */
+function readSurface(page, surface = '#first-surface') {
+  return page.evaluate((id) => document.querySelector(`${id} #editor`)?.innerHTML ?? null, surface)
+}
+
+/** Selects the whole surface, or its first word, through the browser's own selection. */
+async function select(page, how) {
+  await page.evaluate((mode) => {
+    const editor = document.querySelector('#first-surface #editor')
+    editor.focus()
+    const selection = window.getSelection()
+    selection.removeAllRanges()
+    const range = document.createRange()
+    if (mode === 'all') {
+      range.selectNodeContents(editor)
+    } else {
+      const text = editor.querySelector('p')?.firstChild ?? editor.firstChild
+      range.setStart(text, 0)
+      range.setEnd(text, 4)
+    }
+    selection.addRange(range)
+  }, how)
+}
+
+/** One toolbar press, as a user makes it. */
+async function press(page, label) {
+  await page.locator(`[aria-label="${label}"]`).click()
+}
+
+describeEditor(
+  'the rich Markdown editor on the page',
+  () => {
+    for (const engine of ENGINES) {
+      describe(engine.name, () => {
+        let browser = null
+
+        beforeAll(async () => {
+          browser = await engine.launch()
+        }, 180_000)
+
+        afterAll(async () => {
+          await browser?.close()
+        })
+
+        it('mounts the document, reports ready through the seam and never touches the bridge', async () => {
+          const { page, consoleErrors } = await openPage(browser)
+          try {
+            await setContent(page, '# Title', '<h1>Title</h1>')
+            expect(await readSurface(page)).toBe('<h1>Title</h1>')
+            // The document's `ready` is what made the controller push that content, so the markup
+            // above is the seam working end to end.
+            expect(await page.evaluate(() => globalThis.__orcaBridgeReads)).toEqual([])
+            expect(await page.evaluate(() => globalThis.__orcaCspViolations)).toEqual([])
+            expect(consoleErrors).toEqual([])
+            // Never: the screen's own `keyboard-occlusion.web.ts` measures the same viewport with
+            // the same formula, and a report here would lift its bar twice.
+            expect(await page.evaluate(() => globalThis.__orcaEditor.insets)).toEqual([])
+          } finally {
+            await page.close()
+          }
+        }, 600_000)
+
+        it('sits on the 16 px floor, which is what stops iOS zooming and never zooming back', async () => {
+          const { page } = await openPage(browser)
+          try {
+            const size = await page.evaluate(
+              () => getComputedStyle(document.querySelector('#first-surface #editor')).fontSize
+            )
+            // At or above, not equal to the floor: the seam is `Math.max(bodySize, floor)`, so a
+            // theme whose body size passes the floor raises what the page computes and still keeps
+            // the rule. Equality against the floor would be the stale literal again, one module
+            // further away.
+            expect(Number.parseFloat(size)).toBeGreaterThanOrEqual(FLOOR)
+            // And the sheet reaches only the editor. The oracle is one of the document's own
+            // variables, which its `:root` rule declares and everything under it reads: set on the
+            // host, and nowhere else. A sheet appended unscoped would have it on the root element,
+            // where it would recolour every screen the shell can show.
+            const variable = await page.evaluate(() => ({
+              onRoot: getComputedStyle(document.documentElement)
+                .getPropertyValue('--editor-surface')
+                .trim(),
+              onHost: getComputedStyle(document.querySelector('.orca-rich-markdown-document-host'))
+                .getPropertyValue('--editor-surface')
+                .trim()
+            }))
+            expect(variable.onHost).not.toBe('')
+            expect(variable.onRoot).toBe('')
+          } finally {
+            await page.close()
+          }
+        }, 600_000)
+
+        it('runs every one of the fifteen commands against the document', async () => {
+          const { page, consoleErrors } = await openPage(browser)
+          try {
+            for (const [index, entry] of COMMANDS.entries()) {
+              const body = bodyFor(index)
+              await setContent(page, body, `<p>${body}</p>`)
+              // The precondition each command needs: what it is about to produce is not there yet.
+              // Without it a command the controller never delivered would pass on the document the
+              // one before it left.
+              expect(
+                await page.evaluate(
+                  (selector) =>
+                    document.querySelector('#first-surface #editor')?.querySelector(selector),
+                  entry.expect
+                ),
+                `${entry.label} was already applied before it ran`
+              ).toBeNull()
+              await select(page, entry.select)
+              await press(page, entry.label)
+              await page.waitForFunction(
+                (selector) =>
+                  document.querySelector('#first-surface #editor')?.querySelector(selector) !==
+                  null,
+                entry.expect,
+                { timeout: 15_000 }
+              )
+            }
+
+            // Paragraph is the fifteenth and the only one whose effect is to undo another's: it is
+            // a true no-op on a `<p>`, which is why a run that starts from one measures nothing.
+            await setContent(page, '# Title', '<h1>Title</h1>')
+            await select(page, 'all')
+            await press(page, PARAGRAPH.label)
+            await page.waitForFunction(
+              () =>
+                document.querySelector('#first-surface #editor')?.querySelector('h1') === null &&
+                document.querySelector('#first-surface #editor')?.querySelector('p') !== null,
+              null,
+              { timeout: 15_000 }
+            )
+
+            expect(await page.evaluate(() => globalThis.__orcaCspViolations)).toEqual([])
+            expect(consoleErrors).toEqual([])
+          } finally {
+            await page.close()
+          }
+        }, 600_000)
+
+        it('answers Link and Image from a modal rather than from a prompt that returns null', async () => {
+          const { page, consoleErrors } = await openPage(browser)
+          try {
+            for (const [index, entry] of URL_COMMANDS.entries()) {
+              const body = bodyFor(index)
+              await setContent(page, body, `<p>${body}</p>`)
+              await select(page, 'word')
+              await press(page, entry.label)
+              // The seam both shells could not answer: neither implements the delegate
+              // `window.prompt` needs, so on the phone these two commands silently do nothing.
+              await expect
+                .poll(() => page.locator(`text=${entry.title}`).count(), { timeout: 15_000 })
+                .toBeGreaterThan(0)
+              const field = page.locator('input[placeholder="https://"]')
+              await field.waitFor({ state: 'visible', timeout: 15_000 })
+              await field.fill(`${origin}${entry.path}`)
+              await page.locator('text=Insert').first().click()
+              await page.waitForFunction(
+                (selector) =>
+                  document.querySelector('#first-surface #editor')?.querySelector(selector) !==
+                  null,
+                entry.expect,
+                { timeout: 15_000 }
+              )
+            }
+            // The inserted image painted: `naturalWidth` is 0 for an element the browser refused
+            // or never fetched, which is what a policy that did not admit it would leave.
+            expect(
+              await page.evaluate(
+                () => document.querySelector('#first-surface #editor img')?.naturalWidth ?? 0
+              )
+            ).toBeGreaterThan(0)
+            expect(await page.evaluate(() => globalThis.__orcaCspViolations)).toEqual([])
+            expect(consoleErrors).toEqual([])
+          } finally {
+            await page.close()
+          }
+        }, 600_000)
+
+        it('reports one change per checkbox tap and one per inline code', async () => {
+          const { page } = await openPage(browser)
+          try {
+            await setContentWithin(page, '- [ ] one', 'input[type="checkbox"]')
+            await page.evaluate(() => {
+              globalThis.__orcaEditor.changes.length = 0
+            })
+            await page.locator('#first-surface #editor input[type="checkbox"]').first().click()
+            await page.waitForFunction(() => globalThis.__orcaEditor.changes.length > 0)
+            // One tap raises click, input and change, and each of the three used to report.
+            expect(await page.evaluate(() => globalThis.__orcaEditor.changes)).toHaveLength(1)
+            expect(await page.evaluate(() => globalThis.__orcaEditor.changes[0])).toContain('[x]')
+
+            await setContent(page, bodyFor(0), `<p>${bodyFor(0)}</p>`)
+            await select(page, 'word')
+            await page.evaluate(() => {
+              globalThis.__orcaEditor.changes.length = 0
+            })
+            await press(page, 'Inline code')
+            await page.waitForFunction(() => globalThis.__orcaEditor.changes.length > 0)
+            expect(await page.evaluate(() => globalThis.__orcaEditor.changes)).toHaveLength(1)
+          } finally {
+            await page.close()
+          }
+        }, 600_000)
+
+        it('opens a link through the host rather than navigating the page', async () => {
+          const { page } = await openPage(browser)
+          try {
+            await setContentWithin(page, '[a](https://example.com/a)', 'a[href]')
+            await page.locator('#first-surface #editor a').first().click()
+            await page.waitForFunction(() => globalThis.__orcaEditor.links.length > 0)
+            expect(await page.evaluate(() => globalThis.__orcaEditor.links)).toEqual([
+              'https://example.com/a'
+            ])
+            expect(page.url()).toBe(`${origin}/`)
+          } finally {
+            await page.close()
+          }
+        }, 600_000)
+
+        it('leaves no listener, timer or frame of the first mount in the second', async () => {
+          const { page, consoleErrors } = await openPage(browser)
+          const listeners = () => page.evaluate(() => globalThis.__orcaListeners.snapshot())
+          try {
+            await setContent(page, 'first document', '<p>first document</p>')
+
+            // A first mount installs listeners no dispose can take off — react-native-web's
+            // responder system arms itself on the first `View` the page renders — so the baseline a
+            // per-mount leak would move is the snapshot after one whole cycle, not before it.
+            await page.evaluate(() => globalThis.__orcaEditor.set({ mounted: false }))
+            await page.waitForFunction(() => document.querySelector('#first-surface') === null)
+            const afterOneCycle = await listeners()
+            // The precondition that makes the comparison below non-vacuous: the recorder is reading
+            // real listeners, so a snapshot of nothing cannot pass as a snapshot of no leak.
+            expect(Object.keys(afterOneCycle).length).toBeGreaterThan(0)
+
+            await page.evaluate(() => {
+              globalThis.__orcaScheduler.watching = true
+              globalThis.__orcaEditor.set({ mounted: true, generation: 1 })
+            })
+            await page.waitForSelector('#first-surface #editor')
+            await setContent(page, 'second document', '<p>second document</p>')
+            await select(page, 'all')
+            await press(page, 'Bold')
+            await page.waitForFunction(
+              () =>
+                document.querySelector('#first-surface #editor')?.querySelector('b,strong') !== null
+            )
+
+            // The second mount is live, and the page is listening to exactly what it was after the
+            // first cycle. A mount that registered anything of its own would show up here.
+            expect(await listeners()).toEqual(afterOneCycle)
+            expect(await page.evaluate(() => globalThis.__orcaScheduler.leaked)).toEqual([])
+            expect(await page.evaluate(() => globalThis.__orcaCspViolations)).toEqual([])
+            expect(consoleErrors).toEqual([])
+            // The sheet stays in the head across mounts, and there is one of it.
+            expect(
+              await page.evaluate(
+                () => document.querySelectorAll('#orca-rich-markdown-document-style').length
+              )
+            ).toBe(1)
+          } finally {
+            await page.close()
+          }
+        }, 600_000)
+
+        it('gives two editors on one page their own surfaces', async () => {
+          const { page, consoleErrors } = await openPage(browser)
+          try {
+            await setContent(page, 'first only', '<p>first only</p>')
+            await page.evaluate(() =>
+              globalThis.__orcaEditor.set({ both: true, secondContent: 'second only' })
+            )
+            await page.waitForSelector('#second-surface #editor')
+            // The markup's id is the same in both hosts, so a page-wide read would have handed the
+            // second document the first one's surface: one would be empty and the other would hold
+            // both documents' content and both documents' listeners.
+            await page.waitForFunction(() =>
+              (document.querySelector('#second-surface #editor')?.textContent ?? '').includes(
+                'second only'
+              )
+            )
+            expect(await readSurface(page, '#first-surface')).toContain('first only')
+            expect(await readSurface(page, '#second-surface')).not.toContain('first only')
+
+            await page.evaluate(() => {
+              const editor = document.querySelector('#second-surface #editor')
+              editor.innerHTML = '<p>typed in the second</p>'
+              editor.dispatchEvent(new Event('input', { bubbles: true }))
+            })
+            await page.waitForFunction(() =>
+              globalThis.__orcaEditor.secondChanges.includes('typed in the second')
+            )
+            // The edit reached the second editor's own host, and the first document neither
+            // reported it nor lost its content.
+            expect(await page.evaluate(() => globalThis.__orcaEditor.changes)).not.toContain(
+              'typed in the second'
+            )
+            expect(await readSurface(page, '#first-surface')).toContain('first only')
+            expect(consoleErrors).toEqual([])
+          } finally {
+            await page.close()
+          }
+        }, 600_000)
+      })
+    }
+  },
+  1_800_000
+)
diff --git a/config/scripts/mobile-web-app-session-terminal-closure.test.mjs b/config/scripts/mobile-web-app-session-terminal-closure.test.mjs
index 7b1aa65deda..6522ecc5220 100644
--- a/config/scripts/mobile-web-app-session-terminal-closure.test.mjs
+++ b/config/scripts/mobile-web-app-session-terminal-closure.test.mjs
@@ -4,6 +4,11 @@ import { describe, expect, it } from 'vitest'
 import { mobileWebAppRouteClosure } from './build-mobile-web-app-bundle.mjs'
 import { mobileWebAppDependenciesPresent } from './mobile-web-app-bundle-dependencies.mjs'
 import { mobileWebAppRouteChunkClosure } from './mobile-web-app-route-chunk-closure.mjs'
+import {
+  editableHostFontSizeOffenders,
+  editableHostsIn,
+  unresolvedEditableHostStyles
+} from './mobile-web-app-editable-host-font-size.mjs'
 import {
   textInputFontSizeOffenders,
   unresolvedTextInputStyles
@@ -216,7 +221,33 @@ const MERMAID_PACKAGE = 'node_modules/mermaid/'
  * entered the page bundle between C7.7's measurement on `f07bf8544c` and its merge. Named by
  * diffing the closure at `f07bf8544c` against `2739246058`; nothing on the C7.7 side moved.
  *
- * Then ruling 36 gave the screen to the microphone and two local modules left:
+ * Then C7.10 item C put the rich Markdown editor on the page, and the list moved again. Its own
+ * reading, both sides measured with `mobileWebAppRouteClosure(SESSION_ROUTE)` at base `9267423f22`
+ * with all five postinstall generators run first:
+ *
+ *   modules        4333 -> 4360   (+27)
+ *   local modules   991 -> 1018   (+27)
+ *
+ * Every one of the 27 is local and none is vendored, because the editor is the app's own code
+ * rather than a library: the document's 24 modules under `src/components/rich-markdown/` — which
+ * C7.6's plain field did not reach at all — plus the page's mount, the toolbar both siblings render,
+ * and the controller and keyboard-inset module the native component already had. Nothing leaves:
+ * the web sibling replaces its own native file, which was never in this closure. Named by diffing
+ * the two `local` lists rather than inferred from the total.
+ *
+ * `terminal-webview-html/document-style-scoping.ts` is in the reading on both sides and costs
+ * nothing: the terminal's own mount already brings it, and the editor's mount imports the second
+ * export it grew rather than a module of its own.
+ *
+ * What the generation weighs, measured the same way on both sides: 8,028,418 -> 8,056,166 bytes
+ * (+27,748) across 109 assets, against the 9 MiB ceiling in `verify-mobile-web-app-bundle.mjs` —
+ * 85.1% of it before and 85.4% after. The script count does not move at all (67, against the
+ * 76 the chunk fence allows for 15 routes) and neither does the entry's static closure
+ * (1,612,052 bytes against a 3 MiB bound): the editor is code the session route already reached
+ * for, not a new chunk boundary.
+ *
+ * Main's own paragraph for the same pin, kept because the two provenances are independent: ruling
+ * 36 gave the screen to the microphone and two local modules left,
  * `src/hooks/mobile-dictation-keep-awake.ts` and
  * `src/hooks/mobile-dictation-foreground-keep-awake.ts`, the page's wake-tag owner and its Android
  * foreground re-acquire. Both are deleted rather than moved — the device module that opens the
@@ -225,11 +256,6 @@ const MERMAID_PACKAGE = 'node_modules/mermaid/'
  *   modules        4333 -> 4331   (-2)
  *   local modules   991 ->  989   (-2)
  *
- * Measured on this merge rather than subtracted from the line above, and the two local lists
- * diffed to name the difference: those two leave and nothing joins. The same measurement, taken
- * before #22067 landed, is how this branch read main's pin of 4,330 as three modules stale — the
- * three the paragraph above names.
- *
  * Then the two other table parsers gave up their own row splitters and read the editor's
  * `src/components/rich-markdown/markdown-table-rows.ts` instead, which the session page reaches
  * through the PR comment renderer. It is the one module that joins, and the only one it can be: it
@@ -246,8 +272,28 @@ const MERMAID_PACKAGE = 'node_modules/mermaid/'
  *
  *   modules        4332 -> 4333   (+1)
  *   local modules   990 ->  991   (+1)
+ *
+ * C7.10 item C then put the whole of that directory on the page, and the merge of the two is
+ * measured rather than summed — which is what this reading keeps having to do. The arithmetic of
+ * 4,358 on this branch and 4,332 on main double-counts `markdown-table-rows.ts`: main reached it
+ * first through the comment renderer, and it is also one of the 27 the editor brings. Measured on
+ * the merged head with every generator run first:
+ *
+ *   modules        4333 -> 4359   (+26)
+ *   local modules   991 -> 1017   (+26)
+ *
+ * and the two local lists diffed against main's, which names the difference module by module: the
+ * editor's own 26, with `markdown-table-rows.ts` already on both sides and the dictation pair
+ * already gone from both. 26 rather than 27 for exactly that reason — main reached the row splitter
+ * first, so it is not this branch's to add twice.
+ *
+ * The 4,333 the merge is measured against is main's corrected reading, not the 4,332 it pinned at
+ * `059ee59a48`: that census failed, `expected [ …(4333) ] to have a length of 4332`, because the
+ * icon above joined beside the row splitter and was not counted. #22119 (`197550c952`) repinned
+ * main to 4,333 with the paragraph above, and folding it here moves nothing — the icon was already
+ * on both sides of the +26, so the pin below is this merge's own measurement, unchanged.
  */
-const SESSION_ROUTE_MODULES = 4333
+const SESSION_ROUTE_MODULES = 4359
 
 /** What the page enters this route through once the route is a switch with a `.web.tsx` sibling. */
 const ROUTE_ENTRY = [
@@ -335,6 +381,19 @@ describeClosure(
       expect(unresolvedTextInputStyles(mobileDir, closure)).toEqual([])
       expect(textInputFontSizeOffenders(mobileDir, closure)).toHaveLength(EXPECTED_OFFENDERS)
     }, 300_000)
+
+    it('holds the editables the TextInput census cannot see to the same floor', async () => {
+      const closure = await mobileWebAppRouteClosure(SESSION_ROUTE)
+      // The rich Markdown editor's surface is a `contenteditable` in a markup string, sized by a
+      // rule in a stylesheet: `modulesDeclaringTextInput` matches JSX tags and never sees it, so it
+      // shipped at 14 px and was measured at 14 px in both engines. The same floor, read by a rule
+      // that starts from the markup instead of from a prop.
+      expect(editableHostsIn(mobileDir, closure)).toEqual([
+        { file: 'src/components/rich-markdown/document-markup.ts', id: 'editor' }
+      ])
+      expect(unresolvedEditableHostStyles(mobileDir, closure)).toEqual([])
+      expect(editableHostFontSizeOffenders(mobileDir, closure)).toEqual([])
+    }, 300_000)
   },
   900_000
 )
diff --git a/mobile/src/components/MobileRichMarkdownEditor.tsx b/mobile/src/components/MobileRichMarkdownEditor.tsx
index 022908bbb6e..197092b7159 100644
--- a/mobile/src/components/MobileRichMarkdownEditor.tsx
+++ b/mobile/src/components/MobileRichMarkdownEditor.tsx
@@ -5,30 +5,13 @@ import {
   useImperativeHandle,
   useMemo,
   useRef,
-  type ComponentType,
   type ForwardedRef
 } from 'react'
-import { Keyboard, Pressable, ScrollView, StyleSheet, View } from 'react-native'
+import { Keyboard, StyleSheet, View } from 'react-native'
 import { openExternalLink } from '../platform/external-link'
-import {
-  Bold,
-  Code2,
-  FileCode2,
-  Heading1,
-  Heading2,
-  Heading3,
-  ImageIcon,
-  Italic,
-  Link,
-  List,
-  ListOrdered,
-  ListTodo,
-  Pilcrow,
-  Quote,
-  Strikethrough
-} from 'lucide-react-native'
 import WebView, { type WebViewMessageEvent } from 'react-native-webview'
-import { colors, radii, spacing } from '../theme/mobile-theme'
+import { colors } from '../theme/mobile-theme'
+import { MobileRichMarkdownToolbar } from './MobileRichMarkdownToolbar'
 import type {
   MobileRichMarkdownCommand,
   MobileRichMarkdownEditorMessage,
@@ -55,30 +38,6 @@ export type MobileRichMarkdownEditorHandle = {
   dismissKeyboard: () => void
 }
 
-type ToolbarItem = {
-  command: MobileRichMarkdownCommand
-  label: string
-  icon: ComponentType<{ size?: number; color?: string }>
-}
-
-const TOOLBAR_ITEMS: ToolbarItem[] = [
-  { command: 'paragraph', label: 'Body', icon: Pilcrow },
-  { command: 'heading1', label: 'H1', icon: Heading1 },
-  { command: 'heading2', label: 'H2', icon: Heading2 },
-  { command: 'heading3', label: 'H3', icon: Heading3 },
-  { command: 'bold', label: 'Bold', icon: Bold },
-  { command: 'italic', label: 'Italic', icon: Italic },
-  { command: 'strike', label: 'Strike', icon: Strikethrough },
-  { command: 'bulletList', label: 'Bullet list', icon: List },
-  { command: 'orderedList', label: 'Numbered list', icon: ListOrdered },
-  { command: 'taskList', label: 'Checklist', icon: ListTodo },
-  { command: 'quote', label: 'Quote', icon: Quote },
-  { command: 'link', label: 'Link', icon: Link },
-  { command: 'image', label: 'Image', icon: ImageIcon },
-  { command: 'inlineCode', label: 'Inline code', icon: Code2 },
-  { command: 'codeBlock', label: 'Code block', icon: FileCode2 }
-]
-
 function MobileRichMarkdownEditorInner(
   {
     content,
@@ -171,34 +130,7 @@ function MobileRichMarkdownEditorInner(
 
   return (
     <View style={styles.container}>
-      <View style={styles.toolbar}>
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={styles.toolbarContent}
-          keyboardShouldPersistTaps="handled"
-        >
-          {TOOLBAR_ITEMS.map((item) => {
-            const Icon = item.icon
-            return (
-              <Pressable
-                key={item.command}
-                disabled={!editable}
-                accessibilityRole="button"
-                accessibilityLabel={item.label}
-                onPress={() => runCommand(item.command)}
-                style={({ pressed }) => [
-                  styles.toolbarButton,
-                  pressed && editable ? styles.toolbarButtonPressed : null,
-                  !editable ? styles.toolbarButtonDisabled : null
-                ]}
-              >
-                <Icon size={15} color={editable ? colors.textPrimary : colors.textMuted} />
-              </Pressable>
-            )
-          })}
-        </ScrollView>
-      </View>
+      <MobileRichMarkdownToolbar editable={editable} onCommand={runCommand} />
       <WebView
         ref={webViewRef}
         source={{ html, baseUrl: EDITOR_DOCUMENT_URL }}
@@ -228,32 +160,6 @@ const styles = StyleSheet.create({
     minHeight: 0,
     backgroundColor: colors.bgBase
   },
-  toolbar: {
-    minHeight: 42,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: colors.borderSubtle,
-    backgroundColor: colors.bgPanel
-  },
-  toolbarContent: {
-    alignItems: 'center',
-    gap: 6,
-    paddingHorizontal: spacing.sm,
-    paddingVertical: 6
-  },
-  toolbarButton: {
-    minWidth: 30,
-    height: 30,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: radii.button,
-    paddingHorizontal: spacing.xs
-  },
-  toolbarButtonPressed: {
-    backgroundColor: colors.bgRaised
-  },
-  toolbarButtonDisabled: {
-    opacity: 0.55
-  },
   webView: {
     flex: 1,
     minHeight: 0,
diff --git a/mobile/src/components/MobileRichMarkdownEditor.web.tsx b/mobile/src/components/MobileRichMarkdownEditor.web.tsx
index d82fb8cf1a5..a69207d89ee 100644
--- a/mobile/src/components/MobileRichMarkdownEditor.web.tsx
+++ b/mobile/src/components/MobileRichMarkdownEditor.web.tsx
@@ -1,7 +1,30 @@
-import { forwardRef, memo, useImperativeHandle, useRef, type ForwardedRef } from 'react'
-import { StyleSheet, Text, TextInput, View } from 'react-native'
-import { colors, spacing, typography } from '../theme/mobile-theme'
-import { TEXT_INPUT_FONT_SIZE } from '../platform/text-input-font-size'
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  type ForwardedRef
+} from 'react'
+import { StyleSheet, View } from 'react-native'
+import { colors } from '../theme/mobile-theme'
+import { openExternalLink } from '../platform/external-link'
+import { MobileRichMarkdownToolbar } from './MobileRichMarkdownToolbar'
+import { TextInputModal } from './TextInputModal'
+import {
+  mountRichMarkdownWebDocument,
+  type RichMarkdownWebDocument
+} from './rich-markdown/rich-markdown-web-document-mount'
+import { RICH_MARKDOWN_URL_PROMPT_LABELS } from './rich-markdown/document-host-seams'
+import { useMobileRichMarkdownEditorController } from './use-mobile-rich-markdown-editor-controller'
+import type {
+  RichMarkdownEditorApi,
+  RichMarkdownUrlPromptKind
+} from './rich-markdown/document-host-seams'
+import type { MobileRichMarkdownEditorMessage } from './mobile-rich-markdown-editor-contract'
 // The native component's own props and handle, so a change to either fails here rather than
 // drifting.
 import type {
@@ -10,51 +33,181 @@ import type {
 } from './MobileRichMarkdownEditor'
 
 /**
- * Web sibling: the Markdown source in a plain field, which is the state the rich editor degrades
- * to when its document is unreachable.
+ * Web sibling: the same editor, with the WebView taken out.
  *
- * The native one is a ProseMirror document inside a `WebView`, and `react-native-webview` is a
- * native component with no browser counterpart — importing it runs a codegen lookup that throws,
- * and the route manifest imports every route, so one such import takes the whole page down rather
- * than one editor.
+ * `react-native-webview` has no web build that renders anything, so what the page does instead is
+ * mount the document itself — the modules under `rich-markdown/` are the program the WebView's
+ * script is bundled from, called here with the page's own hooks. The toolbar above it is the same
+ * row of fifteen the phone renders, and the controller between the two is the same controller, so
+ * `MarkdownReader` and the screen around it cannot tell which of the two they have.
  *
- * A DOM editor is reachable and is deliberately not here (ruling 8): the toolbar's fifteen
- * commands are the rich document's, and reimplementing them against `contenteditable` is a
- * different surface with its own escaping and its own proof, not a smaller version of this one.
- * What the page keeps is the whole of what the screen around it needs — the text, every edit
- * reported through `onChange`, and Save, Discard, Copy and Refresh unchanged. What it loses is
- * the formatting toolbar and the rendered view, recorded as a degradation.
+ * Two seams are the page's rather than the window's. Messages go to `handleMessage` directly and
+ * never through `window.ReactNativeWebView`, which on the page is the *shell's* bridge. The URL the
+ * Link and Image commands need comes from `TextInputModal`: `window.prompt` was measured to return
+ * null in both shells — neither implements the delegate the dialog needs — so on the phone those
+ * two commands silently do nothing, and here they ask.
  *
- * `onKeyboardInsetChange` is never called, which is correct rather than missing: it exists because
- * native `Keyboard` events under-report a WebView's covered area, and here the screen's own
- * `keyboard-occlusion.web.ts` measurement is the only one there is.
+ * `onKeyboardInsetChange` is accepted and never called, which is correct rather than missing. It
+ * exists because native `Keyboard` events under-report a WebView's covered area; on the page the
+ * document's `visualViewport` reads and the screen's `keyboard-occlusion.web.ts` are the same
+ * measurement of the same viewport with the same formula, so driving the prop would lift the
+ * screen's own bar twice. The mount supplies no inset source, so there is nothing to report.
  */
 function MobileRichMarkdownEditorWebInner(
-  { content, editable, onChange }: MobileRichMarkdownEditorComponentProps,
+  { content, editable, onChange, onOpenLink }: MobileRichMarkdownEditorComponentProps,
   ref: ForwardedRef<MobileRichMarkdownEditorHandle>
 ) {
-  const inputRef = useRef<TextInput>(null)
+  const hostRef = useRef<View>(null)
+  const documentRef = useRef<RichMarkdownWebDocument | null>(null)
+  // The document reports itself ready from inside the mount call, so the controller answers it —
+  // setting the content and the editable flag — while the effect below is still on the line that
+  // built the document and `documentRef` is null. Those are the calls this holds, replayed the
+  // moment there is a handle. Dropping them would leave the editor empty for good.
+  const beforeMountRef = useRef<((send: RichMarkdownEditorApi) => void)[]>([])
+  const receiveRef = useRef<((message: MobileRichMarkdownEditorMessage) => void) | null>(null)
+  const [urlPromptKind, setUrlPromptKind] = useState<RichMarkdownUrlPromptKind | null>(null)
+  // The modal's half of `promptForUrl`: the command is waiting on this, and it is answered once,
+  // by a submit, a cancel, or the unmount below.
+  const pendingUrlRef = useRef<((url: string | null) => void) | null>(null)
+  // What the user typed, held until the drawer has gone. Measured in WebKit: answering while the
+  // field still had the focus left `execCommand` acting on a document that did not hold the
+  // selection, and Link and Image inserted nothing at all.
+  const answeredUrlRef = useRef<string | null>(null)
 
-  // Blur rather than `Keyboard.dismiss`: react-native-web's `Keyboard` is a stub, and the caret is
-  // in this field rather than in a document that has to be told to give it up.
-  useImperativeHandle(ref, () => ({ dismissKeyboard: () => inputRef.current?.blur() }), [])
+  const send = useCallback((call: (api: RichMarkdownEditorApi) => void) => {
+    const mounted = documentRef.current
+    if (mounted) {
+      call(mounted.send)
+      return
+    }
+    beforeMountRef.current.push(call)
+  }, [])
+
+  const transport = useMemo(
+    () => ({
+      setMarkdown: (markdown: string, generation: number) =>
+        send((api) => {
+          api.setMarkdown(markdown, generation)
+        }),
+      setEditable: (nextEditable: boolean) =>
+        send((api) => {
+          api.setEditable(nextEditable)
+        }),
+      runCommand: (command: Parameters<RichMarkdownEditorApi['runCommand']>[0]) =>
+        send((api) => {
+          void api.runCommand(command)
+        })
+    }),
+    [send]
+  )
+
+  const openLink = useCallback(
+    (url: string) => {
+      if (onOpenLink) {
+        onOpenLink(url)
+        return
+      }
+      openExternalLink(url)
+    },
+    [onOpenLink]
+  )
+
+  const { handleMessage, runCommand } = useMobileRichMarkdownEditorController({
+    content,
+    editable,
+    onChange,
+    onOpenLink: openLink,
+    transport
+  })
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      dismissKeyboard: () => {
+        send((api) => {
+          api.dismissKeyboard()
+        })
+      }
+    }),
+    [send]
+  )
+
+  // In an effect, not during render: React may replay or discard render work, and the document
+  // reads this ref from a callback that outlives the render that mounted it. The mount effect
+  // below is declared after this one, so the first read already sees a sink.
+  useEffect(() => {
+    receiveRef.current = handleMessage
+  }, [handleMessage])
+
+  /** Closes the modal, keeping the answer for the moment the field no longer has the focus. */
+  const answerUrlPrompt = useCallback((url: string | null) => {
+    answeredUrlRef.current = url
+    setUrlPromptKind(null)
+  }, [])
+
+  /** The drawer has gone: the document may have its caret back, and its command may run. */
+  const releaseUrlPrompt = useCallback(() => {
+    const pending = pendingUrlRef.current
+    const url = answeredUrlRef.current
+    pendingUrlRef.current = null
+    answeredUrlRef.current = null
+    pending?.(url)
+  }, [])
+
+  const promptForUrl = useCallback(
+    (kind: RichMarkdownUrlPromptKind) =>
+      new Promise<string | null>((resolve) => {
+        // A second ask while one is open cancels the first, so no command is left awaiting a modal
+        // that has been replaced.
+        pendingUrlRef.current?.(null)
+        answeredUrlRef.current = null
+        pendingUrlRef.current = resolve
+        setUrlPromptKind(kind)
+      }),
+    []
+  )
+
+  useEffect(() => {
+    // oxlint-disable-next-line typescript/consistent-type-assertions -- SAFETY: react-native-web renders View as a div and forwards the ref to it; this module only ever runs in that build.
+    const host = hostRef.current as unknown as HTMLElement | null
+    if (!host) {
+      return
+    }
+    const live = mountRichMarkdownWebDocument(host, {
+      postToHost: (message) => receiveRef.current?.(message),
+      promptForUrl
+    })
+    documentRef.current = live
+    for (const call of beforeMountRef.current) {
+      call(live.send)
+    }
+    beforeMountRef.current = []
+    return () => {
+      documentRef.current = null
+      // Answered before the document goes, so a command awaiting the modal resumes into a stopped
+      // document — which refuses it — rather than holding this mount's scope for good.
+      pendingUrlRef.current?.(null)
+      pendingUrlRef.current = null
+      live.dispose()
+    }
+    // Mounted once, with `promptForUrl` read from the closure rather than named as a dependency:
+    // re-running this would throw away a live document and the caret in it, and every callback
+    // prop above changes identity on each render.
+  }, [])
 
   return (
     <View style={styles.container}>
-      <View style={styles.notice}>
-        <Text style={styles.noticeText}>markdown source</Text>
-      </View>
-      <TextInput
-        ref={inputRef}
-        style={styles.input}
-        value={content}
-        editable={editable}
-        onChangeText={onChange}
-        multiline
-        textAlignVertical="top"
-        autoCapitalize="none"
-        autoCorrect={false}
-        accessibilityLabel="Markdown source"
+      <MobileRichMarkdownToolbar editable={editable} onCommand={runCommand} />
+      <View ref={hostRef} style={styles.host} />
+      <TextInputModal
+        visible={urlPromptKind !== null}
+        title={urlPromptKind === null ? '' : RICH_MARKDOWN_URL_PROMPT_LABELS[urlPromptKind]}
+        placeholder="https://"
+        submitLabel="Insert"
+        keyboardType="url"
+        onSubmit={answerUrlPrompt}
+        onCancel={() => answerUrlPrompt(null)}
+        onAfterClose={releaseUrlPrompt}
       />
     </View>
   )
@@ -62,31 +215,8 @@ function MobileRichMarkdownEditorWebInner(
 
 export const MobileRichMarkdownEditor = memo(forwardRef(MobileRichMarkdownEditorWebInner))
 
-// The native component's own frame, so the degradation sits where the editor sat rather than
-// looking like a second design.
+// The native component's own frame, so the editor sits where the editor sat.
 const styles = StyleSheet.create({
   container: { flex: 1, minHeight: 0, backgroundColor: colors.bgBase },
-  notice: {
-    minHeight: 42,
-    justifyContent: 'center',
-    paddingHorizontal: spacing.sm,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: colors.borderSubtle,
-    backgroundColor: colors.bgPanel
-  },
-  noticeText: {
-    color: colors.textSecondary,
-    fontSize: typography.metaSize,
-    fontFamily: typography.monoFamily
-  },
-  input: {
-    flex: 1,
-    minHeight: 0,
-    padding: spacing.md,
-    color: colors.textPrimary,
-    fontFamily: typography.monoFamily,
-    // The 16px seam: an input under it makes iOS zoom the page on focus and never zoom back, and
-    // the keyboard seam reads that scale as "no keyboard" for the rest of the session.
-    fontSize: TEXT_INPUT_FONT_SIZE
-  }
+  host: { flex: 1, minHeight: 0, backgroundColor: colors.bgBase }
 })
diff --git a/mobile/src/components/MobileRichMarkdownToolbar.test.tsx b/mobile/src/components/MobileRichMarkdownToolbar.test.tsx
new file mode 100644
index 00000000000..9f5ebbb5f42
--- /dev/null
+++ b/mobile/src/components/MobileRichMarkdownToolbar.test.tsx
@@ -0,0 +1,112 @@
+import { createElement } from 'react'
+import { act, create, type ReactTestRenderer } from 'react-test-renderer'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('react-native', () => ({
+  Pressable: 'Pressable',
+  ScrollView: 'ScrollView',
+  StyleSheet: { create: (styles: unknown) => styles, hairlineWidth: 1 },
+  View: 'View'
+}))
+
+vi.mock('lucide-react-native', () => ({
+  Bold: 'Bold',
+  Code2: 'Code2',
+  FileCode2: 'FileCode2',
+  Heading1: 'Heading1',
+  Heading2: 'Heading2',
+  Heading3: 'Heading3',
+  ImageIcon: 'ImageIcon',
+  Italic: 'Italic',
+  Link: 'Link',
+  List: 'List',
+  ListOrdered: 'ListOrdered',
+  ListTodo: 'ListTodo',
+  Pilcrow: 'Pilcrow',
+  Quote: 'Quote',
+  Strikethrough: 'Strikethrough'
+}))
+
+import {
+  MOBILE_RICH_MARKDOWN_TOOLBAR_COMMANDS,
+  MobileRichMarkdownToolbar
+} from './MobileRichMarkdownToolbar'
+import type { MobileRichMarkdownCommand } from './mobile-rich-markdown-editor-contract'
+
+/**
+ * The one row of controls both surfaces render.
+ *
+ * The WebView turns a press into an injected `runCommand` and the page turns it into a call, and
+ * neither difference belongs in the row. What is pinned here is the thing a second copy would have
+ * drifted on: that the row names every command the contract has, exactly once, so an editor whose
+ * document answers a command the toolbar cannot reach is a compile error rather than a control
+ * nobody has.
+ */
+const CONTRACT_COMMANDS: MobileRichMarkdownCommand[] = [
+  'paragraph',
+  'heading1',
+  'heading2',
+  'heading3',
+  'bold',
+  'italic',
+  'strike',
+  'bulletList',
+  'orderedList',
+  'taskList',
+  'quote',
+  'inlineCode',
+  'codeBlock',
+  'link',
+  'image'
+]
+
+let renderer: ReactTestRenderer | null = null
+
+afterEach(() => {
+  act(() => renderer?.unmount())
+  renderer = null
+})
+
+function render(editable: boolean, onCommand: (command: MobileRichMarkdownCommand) => void) {
+  act(() => {
+    renderer = create(createElement(MobileRichMarkdownToolbar, { editable, onCommand }))
+  })
+  return renderer!.root.findAll((node) => String(node.type) === 'Pressable')
+}
+
+describe('the rich Markdown toolbar', () => {
+  it('names every command in the contract, once', () => {
+    expect([...MOBILE_RICH_MARKDOWN_TOOLBAR_COMMANDS].sort()).toEqual([...CONTRACT_COMMANDS].sort())
+    expect(new Set(MOBILE_RICH_MARKDOWN_TOOLBAR_COMMANDS).size).toBe(15)
+  })
+
+  it('renders one labelled button per command and reports the press', () => {
+    const onCommand = vi.fn()
+    const buttons = render(true, onCommand)
+    expect(buttons).toHaveLength(15)
+    expect(buttons.map((button) => button.props.accessibilityLabel)).toEqual([
+      'Body',
+      'H1',
+      'H2',
+      'H3',
+      'Bold',
+      'Italic',
+      'Strike',
+      'Bullet list',
+      'Numbered list',
+      'Checklist',
+      'Quote',
+      'Link',
+      'Image',
+      'Inline code',
+      'Code block'
+    ])
+    act(() => buttons[4]?.props.onPress())
+    expect(onCommand.mock.calls).toEqual([['bold']])
+  })
+
+  it('disables every button against a document that cannot be edited', () => {
+    const buttons = render(false, vi.fn())
+    expect(buttons.filter((button) => button.props.disabled !== true)).toEqual([])
+  })
+})
diff --git a/mobile/src/components/MobileRichMarkdownToolbar.tsx b/mobile/src/components/MobileRichMarkdownToolbar.tsx
new file mode 100644
index 00000000000..30edf8053f3
--- /dev/null
+++ b/mobile/src/components/MobileRichMarkdownToolbar.tsx
@@ -0,0 +1,123 @@
+import { memo, type ComponentType } from 'react'
+import { Pressable, ScrollView, StyleSheet, View } from 'react-native'
+import {
+  Bold,
+  Code2,
+  FileCode2,
+  Heading1,
+  Heading2,
+  Heading3,
+  ImageIcon,
+  Italic,
+  Link,
+  List,
+  ListOrdered,
+  ListTodo,
+  Pilcrow,
+  Quote,
+  Strikethrough
+} from 'lucide-react-native'
+import { colors, radii, spacing } from '../theme/mobile-theme'
+import type { MobileRichMarkdownCommand } from './mobile-rich-markdown-editor-contract'
+
+type ToolbarItem = {
+  command: MobileRichMarkdownCommand
+  label: string
+  icon: ComponentType<{ size?: number; color?: string }>
+}
+
+/**
+ * The fifteen commands, in the order they are pressed in.
+ *
+ * Shared rather than declared twice because both surfaces drive the same document: inside the
+ * WebView the press becomes an injected `runCommand` and on the page it is a call, but the row of
+ * controls is the same row and a command added to the contract has to appear on both.
+ */
+const TOOLBAR_ITEMS: ToolbarItem[] = [
+  { command: 'paragraph', label: 'Body', icon: Pilcrow },
+  { command: 'heading1', label: 'H1', icon: Heading1 },
+  { command: 'heading2', label: 'H2', icon: Heading2 },
+  { command: 'heading3', label: 'H3', icon: Heading3 },
+  { command: 'bold', label: 'Bold', icon: Bold },
+  { command: 'italic', label: 'Italic', icon: Italic },
+  { command: 'strike', label: 'Strike', icon: Strikethrough },
+  { command: 'bulletList', label: 'Bullet list', icon: List },
+  { command: 'orderedList', label: 'Numbered list', icon: ListOrdered },
+  { command: 'taskList', label: 'Checklist', icon: ListTodo },
+  { command: 'quote', label: 'Quote', icon: Quote },
+  { command: 'link', label: 'Link', icon: Link },
+  { command: 'image', label: 'Image', icon: ImageIcon },
+  { command: 'inlineCode', label: 'Inline code', icon: Code2 },
+  { command: 'codeBlock', label: 'Code block', icon: FileCode2 }
+]
+
+/** The commands alone, for a caller that drives the row rather than renders it. */
+export const MOBILE_RICH_MARKDOWN_TOOLBAR_COMMANDS = TOOLBAR_ITEMS.map((item) => item.command)
+
+export const MobileRichMarkdownToolbar = memo(function MobileRichMarkdownToolbar({
+  editable,
+  onCommand
+}: {
+  editable: boolean
+  onCommand: (command: MobileRichMarkdownCommand) => void
+}) {
+  return (
+    <View style={styles.toolbar}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.toolbarContent}
+        keyboardShouldPersistTaps="handled"
+      >
+        {TOOLBAR_ITEMS.map((item) => {
+          const Icon = item.icon
+          return (
+            <Pressable
+              key={item.command}
+              disabled={!editable}
+              accessibilityRole="button"
+              accessibilityLabel={item.label}
+              onPress={() => onCommand(item.command)}
+              style={({ pressed }) => [
+                styles.toolbarButton,
+                pressed && editable ? styles.toolbarButtonPressed : null,
+                !editable ? styles.toolbarButtonDisabled : null
+              ]}
+            >
+              <Icon size={15} color={editable ? colors.textPrimary : colors.textMuted} />
+            </Pressable>
+          )
+        })}
+      </ScrollView>
+    </View>
+  )
+})
+
+const styles = StyleSheet.create({
+  toolbar: {
+    minHeight: 42,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: colors.borderSubtle,
+    backgroundColor: colors.bgPanel
+  },
+  toolbarContent: {
+    alignItems: 'center',
+    gap: 6,
+    paddingHorizontal: spacing.sm,
+    paddingVertical: 6
+  },
+  toolbarButton: {
+    minWidth: 30,
+    height: 30,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: radii.button,
+    paddingHorizontal: spacing.xs
+  },
+  toolbarButtonPressed: {
+    backgroundColor: colors.bgRaised
+  },
+  toolbarButtonDisabled: {
+    opacity: 0.55
+  }
+})
diff --git a/mobile/src/components/TextInputModal.tsx b/mobile/src/components/TextInputModal.tsx
index 3fd007d6a5c..709d1ecd26e 100644
--- a/mobile/src/components/TextInputModal.tsx
+++ b/mobile/src/components/TextInputModal.tsx
@@ -24,6 +24,8 @@ type Props = {
   keyboardType?: KeyboardTypeOptions
   onSubmit: (value: string) => void
   onCancel: () => void
+  /** Called once the drawer has gone, which is when the field stops holding the focus. */
+  onAfterClose?: () => void
 }
 
 export function TextInputModal({
@@ -37,7 +39,8 @@ export function TextInputModal({
   allowEmpty = false,
   keyboardType,
   onSubmit,
-  onCancel
+  onCancel,
+  onAfterClose
 }: Props) {
   const [value, setValue] = useState(defaultValue)
   const [previousVisible, setPreviousVisible] = useState(visible)
@@ -64,7 +67,7 @@ export function TextInputModal({
   const canSubmit = allowEmpty || value.trim().length > 0
 
   return (
-    <BottomDrawer visible={visible} onClose={onCancel}>
+    <BottomDrawer visible={visible} onClose={onCancel} onAfterClose={onAfterClose}>
       <View style={styles.header}>
         <Text style={styles.title}>{title}</Text>
         {message ? <Text style={styles.message}>{message}</Text> : null}
diff --git a/mobile/src/components/mobile-webview-editor-web-fallbacks.test.tsx b/mobile/src/components/mobile-webview-editor-web-fallbacks.test.tsx
index 0466845a9df..b0b20cf2cb9 100644
--- a/mobile/src/components/mobile-webview-editor-web-fallbacks.test.tsx
+++ b/mobile/src/components/mobile-webview-editor-web-fallbacks.test.tsx
@@ -5,20 +5,19 @@
  * importing it runs a codegen lookup that throws, and the route manifest imports every route, so
  * one such import takes the whole bundle down rather than one editor.
  *
- * The two are no longer in the same state. Ruling 26 makes C7.6's fallbacks debt rather than done,
- * and C7.10's PR A has already paid it for the HTML preview: it renders the artifact in a sealed
- * `srcdoc` frame with the toggle intact, so what is pinned for it here is the frame's shape and the
- * toggle's two positions. What a browser does with that frame is not a question this renderer can
- * answer and is measured in `mobile-web-app-html-preview-render.test.mjs` instead. The rich Markdown
- * editor is still the plain field, and its degradation is still what is pinned below.
+ * Ruling 26 makes C7.6's fallbacks debt rather than done, and both are paid now. The preview
+ * renders the artifact in a sealed `srcdoc` frame with the toggle intact; the rich Markdown editor
+ * mounts the same document program the WebView runs, under the same fifteen-command toolbar. What a
+ * browser does with either — the frame's sandbox, the editor's commands, its listeners across a
+ * remount — is not a question this renderer can answer, and is measured in
+ * `mobile-web-app-html-preview-render.test.mjs` and
+ * `mobile-web-app-rich-markdown-render.test.mjs` instead. What is pinned here is the shape above
+ * the document: that the plain field is gone, that the toolbar is the one both siblings render, and
+ * that the two props the page answers differently are answered differently.
  */
-import { createElement, createRef } from 'react'
+import { createElement } from 'react'
 import { act, create, type ReactTestRenderer } from 'react-test-renderer'
 import { afterEach, describe, expect, it, vi } from 'vitest'
-// The unsuffixed path, which is what the component imports: under vitest that is the native
-// module, and the page's `.web.ts` is what the C7.2 closure census judges against the 16px floor.
-import { TEXT_INPUT_FONT_SIZE } from '../platform/text-input-font-size'
-
 vi.mock('react-native', async () => {
   const React = await import('react')
   const host =
@@ -46,10 +45,34 @@ vi.mock('react-native', async () => {
 // The preview's toggle carries two icons, and `lucide-react-native` imports a `LucideProvider` its
 // own context module does not export, so the real barrel does not load under vitest at all.
 vi.mock('lucide-react-native', () => ({
+  Bold: () => null,
   Code: () => null,
-  Eye: () => null
+  Code2: () => null,
+  Eye: () => null,
+  FileCode2: () => null,
+  Heading1: () => null,
+  Heading2: () => null,
+  Heading3: () => null,
+  ImageIcon: () => null,
+  Italic: () => null,
+  Link: () => null,
+  List: () => null,
+  ListOrdered: () => null,
+  ListTodo: () => null,
+  Pilcrow: () => null,
+  Quote: () => null,
+  Strikethrough: () => null
 }))
 
+// The modal is a bottom drawer with an animation and a portal, none of which this file is about:
+// what it pins is that the editor carries one and that it is shut.
+vi.mock('./TextInputModal', async () => {
+  const React = await import('react')
+  return {
+    TextInputModal: (props: Record<string, unknown>) => React.createElement('TextInputModal', props)
+  }
+})
+
 // Mocked so the native sibling can be rendered beside the web one for the toggle case below: the real
 // import is the codegen lookup this whole file exists because of.
 vi.mock('react-native-webview', async () => {
@@ -63,7 +86,6 @@ vi.mock('react-native-webview', async () => {
 import { MobileHtmlPreview, MOBILE_HTML_PREVIEW_SANDBOX } from './MobileHtmlPreview.web'
 import { MobileHtmlPreview as PhoneHtmlPreview } from './MobileHtmlPreview'
 import { MobileRichMarkdownEditor } from './MobileRichMarkdownEditor.web'
-import type { MobileRichMarkdownEditorHandle } from './MobileRichMarkdownEditor'
 
 const renderers: ReactTestRenderer[] = []
 
@@ -94,27 +116,20 @@ afterEach(() => {
 })
 
 describe('the rich markdown editor on the page', () => {
-  it('renders the source in one editable field and reports every edit', () => {
-    const onChange = vi.fn()
+  it('renders no plain field, because the document it degraded to is gone', () => {
     const renderer = render(
       createElement(MobileRichMarkdownEditor, {
         content: '# Title\n\nbody',
         editable: true,
-        onChange
+        onChange: vi.fn()
       })
     )
-
-    const inputs = findHosts(renderer, 'TextInput')
-    expect(inputs).toHaveLength(1)
-    expect(inputs[0]?.props.value).toBe('# Title\n\nbody')
-    expect(inputs[0]?.props.editable).toBe(true)
-    act(() => inputs[0]?.props.onChangeText('# Title\n\nedited'))
-    expect(onChange.mock.calls).toEqual([['# Title\n\nedited']])
+    // The whole of C7.6's sibling: one `TextInput` holding the Markdown source, and a notice bar
+    // over it saying so. Both go, because the page runs the real document now.
+    expect(findHosts(renderer, 'TextInput')).toEqual([])
   })
 
-  it('renders no toolbar, which is the degradation rather than an omission', () => {
-    // Fifteen commands drive a rich document this page does not have; a toolbar that could not
-    // run them would be fifteen controls that do nothing.
+  it('renders the fifteen-command toolbar the phone renders', () => {
     const renderer = render(
       createElement(MobileRichMarkdownEditor, {
         content: 'body',
@@ -122,11 +137,13 @@ describe('the rich markdown editor on the page', () => {
         onChange: vi.fn()
       })
     )
-    expect(findHosts(renderer, 'Pressable')).toEqual([])
-    expect(findHosts(renderer, 'ScrollView')).toEqual([])
+    const buttons = findHosts(renderer, 'Pressable')
+    expect(buttons).toHaveLength(15)
+    expect(buttons.map((node) => node.props.accessibilityLabel)).toContain('Image')
+    expect(buttons.filter((node) => node.props.disabled === true)).toEqual([])
   })
 
-  it('locks the field when the document is not editable', () => {
+  it('disables every command against a document that cannot be edited', () => {
     const renderer = render(
       createElement(MobileRichMarkdownEditor, {
         content: 'body',
@@ -134,12 +151,15 @@ describe('the rich markdown editor on the page', () => {
         onChange: vi.fn()
       })
     )
-    expect(findHosts(renderer, 'TextInput')[0]?.props.editable).toBe(false)
+    const buttons = findHosts(renderer, 'Pressable')
+    expect(buttons).toHaveLength(15)
+    expect(buttons.filter((node) => node.props.disabled !== true)).toEqual([])
   })
 
-  it('sits on the text-input seam rather than on a size of its own', () => {
-    // The floor itself is the `.web.ts` sibling's and is judged by the closure census; what is
-    // pinned here is that this field is bound to the seam at all, which is what makes it move.
+  it('keeps the URL modal mounted and closed until a command asks for one', () => {
+    // The seam `window.prompt` could not be: both shells cancel the dialog without showing it, so
+    // Link and Image did nothing at all on the phone. Whether the modal opens on a command is the
+    // render check's to measure; that the page carries one, shut, is this file's.
     const renderer = render(
       createElement(MobileRichMarkdownEditor, {
         content: 'body',
@@ -147,28 +167,12 @@ describe('the rich markdown editor on the page', () => {
         onChange: vi.fn()
       })
     )
-    expect(findHosts(renderer, 'TextInput')[0]?.props.style.fontSize).toBe(TEXT_INPUT_FONT_SIZE)
+    const modals = findHosts(renderer, 'TextInputModal')
+    expect(modals).toHaveLength(1)
+    expect(modals[0]?.props.visible).toBe(false)
   })
 
-  it('dismisses the keyboard by blurring the field the caret is actually in', () => {
-    // The native handle calls into the WebView's document; here the caret is in this field, and
-    // react-native-web's `Keyboard.dismiss` is a stub that would have done nothing.
-    const ref = createRef<MobileRichMarkdownEditorHandle>()
-    const blur = vi.fn()
-    render(
-      createElement(MobileRichMarkdownEditor, {
-        ref,
-        content: 'body',
-        editable: true,
-        onChange: vi.fn()
-      }),
-      { blur }
-    )
-    act(() => ref.current?.dismissKeyboard())
-    expect(blur).toHaveBeenCalledTimes(1)
-  })
-
-  it('never calls onKeyboardInsetChange, because there is no WebView to measure', () => {
+  it('never calls onKeyboardInsetChange, because the screen measures the same viewport', () => {
     const onKeyboardInsetChange = vi.fn()
     render(
       createElement(MobileRichMarkdownEditor, {
diff --git a/mobile/src/components/rich-markdown/document-host-root.test.ts b/mobile/src/components/rich-markdown/document-host-root.test.ts
new file mode 100644
index 00000000000..b9834a94273
--- /dev/null
+++ b/mobile/src/components/rich-markdown/document-host-root.test.ts
@@ -0,0 +1,112 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { createRichMarkdownEditorDocument } from './create-rich-markdown-editor-document'
+import { RICH_MARKDOWN_EDITOR_MARKUP } from './document-markup'
+import type { MobileRichMarkdownEditorMessage } from '../mobile-rich-markdown-editor-contract'
+import type { RichMarkdownEditorDocument } from './document-host-seams'
+
+/**
+ * Two editor documents on one page, each reading the surface its own host carries.
+ *
+ * The markup gives the surface an id, and inside the WebView that is unambiguous because the
+ * document *is* the page. On the page it is not: a stack transition keeps the outgoing session
+ * screen mounted while the incoming one starts, so two hosts carry `#editor` at once and a
+ * page-wide read hands both documents whichever came first in the tree. The second editor then
+ * types into the first, and stopping either takes the listeners off the same element.
+ *
+ * So the root is the seventh seam, exactly as it is the terminal's ninth: the WebView names none
+ * of them and gets the whole page, and the page names the element the mount planted the markup in.
+ */
+const startedDocuments: RichMarkdownEditorDocument[] = []
+
+/** One host element with the document's markup in it, and a document started against it. */
+function mountedIn(id: string) {
+  const host = document.createElement('div')
+  host.id = id
+  host.innerHTML = RICH_MARKDOWN_EDITOR_MARKUP
+  document.body.appendChild(host)
+  const posts: MobileRichMarkdownEditorMessage[] = []
+  const started = createRichMarkdownEditorDocument({
+    root: host,
+    postToHost: (message) => posts.push(message),
+    keyboardInsetSource: () => null,
+    promptForUrl: () => Promise.resolve(null)
+  })
+  startedDocuments.push(started)
+  return { host, posts, started }
+}
+
+/** The editable surface inside one host, by the id the markup gives it. */
+function surfaceOf(host: HTMLElement) {
+  return host.querySelector<HTMLElement>('#editor')!
+}
+
+afterEach(() => {
+  while (startedDocuments.length > 0) {
+    startedDocuments.pop()!.stop()
+  }
+  document.body.innerHTML = ''
+  vi.unstubAllGlobals()
+})
+
+describe('two editor documents on one page', () => {
+  it('writes each host content into that host, and never into the other', () => {
+    const first = mountedIn('first')
+    const second = mountedIn('second')
+
+    first.started.send.setMarkdown('# first', 1)
+    second.started.send.setMarkdown('# second', 1)
+
+    expect(surfaceOf(first.host).textContent).toBe('first')
+    expect(surfaceOf(second.host).textContent).toBe('second')
+  })
+
+  it('serializes the surface it was started against rather than the page’s first one', () => {
+    const first = mountedIn('first')
+    const second = mountedIn('second')
+    surfaceOf(first.host).innerHTML = '<p>from the first</p>'
+    surfaceOf(second.host).innerHTML = '<p>from the second</p>'
+
+    expect(first.started.send.currentMarkdown()).toBe('from the first')
+    expect(second.started.send.currentMarkdown()).toBe('from the second')
+  })
+
+  it('reports an edit in the second host to the second host’s own host', () => {
+    const first = mountedIn('first')
+    const second = mountedIn('second')
+    first.posts.length = 0
+    second.posts.length = 0
+
+    surfaceOf(second.host).innerHTML = '<p>typed</p>'
+    surfaceOf(second.host).dispatchEvent(new Event('input', { bubbles: true }))
+
+    expect(second.posts).toEqual([{ type: 'change', markdown: 'typed', generation: 0 }])
+    expect(first.posts).toEqual([])
+  })
+
+  it('leaves the other document live when one of the two is stopped', () => {
+    const first = mountedIn('first')
+    const second = mountedIn('second')
+    first.started.stop()
+    second.posts.length = 0
+
+    surfaceOf(second.host).innerHTML = '<p>still here</p>'
+    surfaceOf(second.host).dispatchEvent(new Event('input', { bubbles: true }))
+
+    expect(second.posts).toEqual([{ type: 'change', markdown: 'still here', generation: 0 }])
+  })
+
+  it('reads the whole page when no root is named, which is what the WebView gets', () => {
+    document.body.innerHTML = RICH_MARKDOWN_EDITOR_MARKUP
+    const posts: MobileRichMarkdownEditorMessage[] = []
+    const started = createRichMarkdownEditorDocument({
+      postToHost: (message) => posts.push(message),
+      keyboardInsetSource: () => null
+    })
+    startedDocuments.push(started)
+
+    started.send.setMarkdown('# native', 1)
+
+    expect(document.querySelector('#editor')!.textContent).toBe('native')
+  })
+})
diff --git a/mobile/src/components/rich-markdown/document-host-seams.ts b/mobile/src/components/rich-markdown/document-host-seams.ts
index 1d61ddc972e..1948b2f525a 100644
--- a/mobile/src/components/rich-markdown/document-host-seams.ts
+++ b/mobile/src/components/rich-markdown/document-host-seams.ts
@@ -4,7 +4,7 @@ import type {
 } from '../mobile-rich-markdown-editor-contract'
 
 /**
- * The six seams between the editor document and whatever is hosting it, as the document's own
+ * The seven seams between the editor document and whatever is hosting it, as the document's own
  * defaults.
  *
  * Inside the WebView the host is React Native and every seam is the window read the hand-written
@@ -65,6 +65,20 @@ export type RichMarkdownEditorHostSeams = {
   getSelection: () => Selection | null
   /** `editor-commands`, `editor-selection`: the document ranges, elements and `execCommand` come from. */
   getDocument: () => Document
+  /**
+   * `editor-surface`: where this document's own markup is, which is the last thing two of them
+   * shared.
+   *
+   * The surface's id is in the markup every host plants, so a page-wide read hands both documents
+   * whichever host came first in the tree — and two at once is not a corner on the page, because a
+   * stack transition keeps the outgoing screen mounted while the incoming one starts. Inside the
+   * WebView the document *is* the page, so it names nothing and gets the whole of it.
+   *
+   * Null rather than `document` as the default, because this is the one seam whose value is data: a
+   * default of `document` would be read when the scope is built rather than when the surface is,
+   * and the rule for every seam above it is that the window read happens at the call.
+   */
+  root: ParentNode | null
 }
 
 /**
@@ -90,8 +104,13 @@ export function postToReactNativeWebView(message: MobileRichMarkdownEditorMessag
   }
 }
 
-/** The labels the WebView's dialog carried, which is the whole of what the prompt kind means there. */
-const URL_PROMPT_LABELS: Record<RichMarkdownUrlPromptKind, string> = {
+/**
+ * What each command asks for, which is the whole of what the prompt kind means.
+ *
+ * Exported because the page asks the same question through a modal, and an editor that said
+ * "Link URL" on the phone and something else on the page would be two editors.
+ */
+export const RICH_MARKDOWN_URL_PROMPT_LABELS: Record<RichMarkdownUrlPromptKind, string> = {
   link: 'Link URL',
   image: 'Image URL'
 }
@@ -104,7 +123,7 @@ const URL_PROMPT_LABELS: Record<RichMarkdownUrlPromptKind, string> = {
  * the page passes its own and this default is what the native document keeps until it does.
  */
 export function promptWindowForUrl(kind: RichMarkdownUrlPromptKind) {
-  return Promise.resolve(window.prompt(URL_PROMPT_LABELS[kind]))
+  return Promise.resolve(window.prompt(RICH_MARKDOWN_URL_PROMPT_LABELS[kind]))
 }
 
 /** The WebView's own measurement: what `visualViewport` says the keyboard covers. */
diff --git a/mobile/src/components/rich-markdown/document-scope.ts b/mobile/src/components/rich-markdown/document-scope.ts
index e8865098216..90924ea9ef3 100644
--- a/mobile/src/components/rich-markdown/document-scope.ts
+++ b/mobile/src/components/rich-markdown/document-scope.ts
@@ -84,7 +84,8 @@ function createRichMarkdownEditorHostSeams(): RichMarkdownEditorHostSeams {
     keyboardInsetSource: windowVisualViewportInset,
     clearTimer: clearWindowTimer,
     getSelection: windowSelection,
-    getDocument: windowDocument
+    getDocument: windowDocument,
+    root: null
   }
 }
 
diff --git a/mobile/src/components/rich-markdown/document-style.ts b/mobile/src/components/rich-markdown/document-style.ts
index 5a4d116ad5d..b8199f0cc83 100644
--- a/mobile/src/components/rich-markdown/document-style.ts
+++ b/mobile/src/components/rich-markdown/document-style.ts
@@ -1,4 +1,5 @@
 import { colors } from '../../theme/mobile-theme'
+import { TEXT_INPUT_FONT_SIZE } from '../../platform/text-input-font-size'
 
 /**
  * The editor document's stylesheet: the theme variables and every rule that reads them.
@@ -6,6 +7,12 @@ import { colors } from '../../theme/mobile-theme'
  * A function rather than a constant because the variables are the app's own theme values, read
  * when the document is built. The native host wraps it in the document's `<style>`; a page mounting
  * these modules scopes it to the host element it planted the markup in.
+ *
+ * The surface's size comes from the text-input seam rather than from a number here, and that is
+ * where the two hosts differ: the phone keeps the app's body size because a WebView has no page to
+ * zoom, and the page gets the seam's raise because iOS zooms on focus of any editable under 16 px,
+ * never zooms back, and `keyboard-occlusion.web.ts` reads that scale as "no keyboard" for the rest
+ * of the session. One binding, so a floor that moved would move both halves together.
  */
 export function richMarkdownEditorStyle(): string {
   return `    :root {
@@ -37,7 +44,7 @@ export function richMarkdownEditorStyle(): string {
       min-height: 100vh;
       padding: 18px 16px 112px;
       outline: none;
-      font-size: 14px;
+      font-size: ${TEXT_INPUT_FONT_SIZE}px;
       line-height: 1.7;
       word-wrap: break-word;
       overflow-wrap: anywhere;
diff --git a/mobile/src/components/rich-markdown/editor-commands.ts b/mobile/src/components/rich-markdown/editor-commands.ts
index 76edab42c6f..64a499c48aa 100644
--- a/mobile/src/components/rich-markdown/editor-commands.ts
+++ b/mobile/src/components/rich-markdown/editor-commands.ts
@@ -1,5 +1,10 @@
 import { emitChange, syncTaskCheckboxesDisabled } from './editor-content'
-import { restoreSelectionOrEnd, wrapSelection } from './editor-selection'
+import {
+  rememberSelection,
+  restoreRememberedSelection,
+  restoreSelectionOrEnd,
+  wrapSelection
+} from './editor-selection'
 import { editorElement } from './editor-surface'
 import { isSafeUrl } from './markdown-escaping'
 import type { MobileRichMarkdownCommand } from '../mobile-rich-markdown-editor-contract'
@@ -43,6 +48,10 @@ function acceptsCommands(scope: RichMarkdownEditorScope, generation: number): bo
  *
  * The generation is read before the wait rather than passed in, which is the same instant:
  * nothing between `runCommand`'s own read and this one yields.
+ *
+ * The caret is saved before the wait and put back after it, because the dialog is what takes it:
+ * the page's modal focuses its own field, and `execCommand` on a document that does not hold the
+ * selection inserts nothing.
  */
 async function insertUrl(
   scope: RichMarkdownEditorScope,
@@ -50,8 +59,10 @@ async function insertUrl(
   command: 'createLink' | 'insertImage'
 ) {
   const generation = scope.documentGeneration
+  rememberSelection(scope)
   const url = await scope.promptForUrl(kind)
   if (url && isSafeUrl(url) && acceptsCommands(scope, generation)) {
+    restoreRememberedSelection(scope)
     exec(scope, command, url)
   }
 }
diff --git a/mobile/src/components/rich-markdown/editor-selection.test.ts b/mobile/src/components/rich-markdown/editor-selection.test.ts
index c4293daf0ce..fafb3690682 100644
--- a/mobile/src/components/rich-markdown/editor-selection.test.ts
+++ b/mobile/src/components/rich-markdown/editor-selection.test.ts
@@ -16,7 +16,9 @@ import type { RichMarkdownEditorDocument } from './document-host-seams'
  */
 const started: RichMarkdownEditorDocument[] = []
 
-function runtime(options: { caret?: 'paragraph-3' | null } = {}) {
+function runtime(
+  options: { caret?: 'paragraph-3' | null; promptForUrl?: () => Promise<string | null> } = {}
+) {
   document.body.innerHTML = RICH_MARKDOWN_EDITOR_MARKUP
   const editor = document.getElementById('editor')!
   editor.innerHTML =
@@ -47,7 +49,8 @@ function runtime(options: { caret?: 'paragraph-3' | null } = {}) {
 
   const document_ = createRichMarkdownEditorDocument({
     postToHost: () => {},
-    keyboardInsetSource: () => null
+    keyboardInsetSource: () => null,
+    ...(options.promptForUrl ? { promptForUrl: options.promptForUrl } : {})
   })
   started.push(document_)
 
@@ -145,3 +148,53 @@ describe('the editor document caret, across a keyboard dismissal', () => {
     expect(editor.selectedContainer()).toBe('editor-end')
   })
 })
+
+describe('the editor document caret, across the host’s URL dialog', () => {
+  /** A host that answers the way a modal does: it takes the focus, then it answers. */
+  const modalThatTakesTheFocus = () => {
+    const field = document.createElement('input')
+    document.body.appendChild(field)
+    field.focus()
+    window.getSelection()?.removeAllRanges()
+    return Promise.resolve('https://example.com/a')
+  }
+
+  it('puts the caret back where the dialog found it, so the command has one to act on', async () => {
+    // The page's modal focuses its own field, and `execCommand` on a document that does not hold
+    // the selection inserts nothing: measured in both engines, Link and Image did nothing at all.
+    const editor = runtime({ caret: 'paragraph-3', promptForUrl: modalThatTakesTheFocus })
+    await editor.handle.runCommand('link')
+    expect(editor.focused()).toBe(true)
+    expect(editor.selectedContainer()).toBe('paragraph-3')
+  })
+
+  it('falls back to the end when the dialog outlived the content it was opened over', async () => {
+    // The host can replace the content while its dialog is open, which detaches the nodes the
+    // remembered caret was in.
+    let replaceContent = () => {}
+    const editor = runtime({
+      caret: 'paragraph-3',
+      promptForUrl: () => {
+        replaceContent()
+        return modalThatTakesTheFocus()
+      }
+    })
+    replaceContent = editor.detachContent
+    await editor.handle.runCommand('link')
+    expect(editor.selectedContainer()).toBe('editor-end')
+  })
+
+  it('runs no command when the dialog is cancelled, and leaves the caret alone', async () => {
+    const editor = runtime({
+      caret: 'paragraph-3',
+      promptForUrl: () => {
+        window.getSelection()?.removeAllRanges()
+        return Promise.resolve(null)
+      }
+    })
+    await editor.handle.runCommand('link')
+    // Nothing restored, because nothing is going to run: the restore is the command's, not the
+    // dialog's.
+    expect(editor.selectedContainer()).toBe(null)
+  })
+})
diff --git a/mobile/src/components/rich-markdown/editor-selection.ts b/mobile/src/components/rich-markdown/editor-selection.ts
index f5af6e93ce0..9cba8a256cc 100644
--- a/mobile/src/components/rich-markdown/editor-selection.ts
+++ b/mobile/src/components/rich-markdown/editor-selection.ts
@@ -75,12 +75,36 @@ export function restoreSelectionOrEnd(scope: RichMarkdownEditorScope) {
   if (selection.rangeCount > 0) {
     return
   }
+  collapseToEnd(scope)
+}
+
+/** The caret at the end of the document, which is where a command with nothing to act on goes. */
+function collapseToEnd(scope: RichMarkdownEditorScope) {
   const range = scope.getDocument().createRange()
   range.selectNodeContents(editorElement(scope))
   range.collapse(false)
   applySelectionRange(scope, range)
 }
 
+/**
+ * Puts the caret back where the host's dialog found it.
+ *
+ * A command that has to ask for a URL gives the caret up while it waits: the page's modal takes
+ * focus into its own field, and `execCommand` on a document that does not hold the selection
+ * inserts nothing at all — measured in both engines, with Link and Image doing nothing on a page
+ * whose modal had just answered. Unconditional, unlike `restoreSelectionOrEnd`, because the wait
+ * itself is the blur and there is nothing for a flag to tell it.
+ */
+export function restoreRememberedSelection(scope: RichMarkdownEditorScope) {
+  focusEditor(scope)
+  const saved = scope.savedSelectionRange
+  if (saved && editorElement(scope).contains(saved.commonAncestorContainer)) {
+    applySelectionRange(scope, saved)
+    return
+  }
+  collapseToEnd(scope)
+}
+
 /**
  * Wraps the selection in one element, for the formats `execCommand` has no verb for.
  *
diff --git a/mobile/src/components/rich-markdown/editor-surface.ts b/mobile/src/components/rich-markdown/editor-surface.ts
index 586e8050f6c..d787f19fd14 100644
--- a/mobile/src/components/rich-markdown/editor-surface.ts
+++ b/mobile/src/components/rich-markdown/editor-surface.ts
@@ -14,11 +14,15 @@ export function editorElement(scope: RichMarkdownEditorScope): HTMLElement {
 }
 
 /**
- * Reads the surface out of the host's page, once per document.
+ * Reads the surface out of the host's own root, once per document.
  *
  * At start rather than where the modules are parsed (ruling 20): an ES module body runs once per
  * page, so a read there would hand every later mount the first one's element.
+ *
+ * `querySelector` under the root rather than `getElementById`, because a root may be an element:
+ * the page's host carries the markup, and only the WebView's document is a whole document.
  */
 export function startEditorSurface(scope: RichMarkdownEditorScope) {
-  scope.editor = scope.getDocument().getElementById(RICH_MARKDOWN_EDITOR_ELEMENT_ID)
+  const root = scope.root ?? scope.getDocument()
+  scope.editor = root.querySelector<HTMLElement>(`#${RICH_MARKDOWN_EDITOR_ELEMENT_ID}`)
 }
diff --git a/mobile/src/components/rich-markdown/page-stylesheet.test.ts b/mobile/src/components/rich-markdown/page-stylesheet.test.ts
new file mode 100644
index 00000000000..055b55c96b2
--- /dev/null
+++ b/mobile/src/components/rich-markdown/page-stylesheet.test.ts
@@ -0,0 +1,86 @@
+import { describe, expect, it } from 'vitest'
+import { scopeDocumentStyleToHost } from '../../terminal/terminal-webview-html/document-style-scoping'
+import { richMarkdownEditorStyle } from './document-style'
+
+/**
+ * The editor's sheet, held under the element the page mounts it in.
+ *
+ * Inside the WebView the document owns its page, so the sheet says `:root`, `*`, `html` and `body`
+ * and means all four. Appended to the head of a React Native Web application those four restyle
+ * every screen the shell can show, so ruling 19's rule for `window.onerror` applies to CSS: the
+ * page mount may style only what it owns.
+ *
+ * Where this differs from the terminal's half is what happens to those four. The terminal drops
+ * them and repaints through a seam, because the colour it was setting belongs to the application.
+ * The editor has no such seam and needs none: the host element *is* the editor's page, so the
+ * document's own rules move onto it — the variables the whole sheet reads, the surface colour, the
+ * font, the box model — and a bare `p` or `code` still reaches only what is inside it.
+ */
+const PREFIX = '.orca-rich-markdown-document-host'
+
+/** Every selector in a sheet, one per entry, as the rewrite leaves them. */
+function selectorsOf(css: string): string[] {
+  return [...css.matchAll(/(?:^|\})\s*([^{}]+)\{/g)].flatMap((match) =>
+    match[1]!.split(',').map((one) => one.trim())
+  )
+}
+
+describe('the editor stylesheet on the page', () => {
+  it('reaches nothing outside the host', () => {
+    const selectors = selectorsOf(scopeDocumentStyleToHost(richMarkdownEditorStyle(), PREFIX))
+    expect(selectors.length).toBeGreaterThan(40)
+    expect(selectors.filter((one) => one !== PREFIX && !one.startsWith(`${PREFIX} `))).toEqual([])
+  })
+
+  it('moves the document’s own rules onto the host rather than dropping them', () => {
+    const scoped = scopeDocumentStyleToHost(richMarkdownEditorStyle(), PREFIX)
+    // The variables every other rule reads. Dropped, the sheet would render unstyled while every
+    // selector in it still looked correctly scoped.
+    expect(scoped).toContain('--foreground:')
+    const rootRules = scoped
+      .split('}')
+      .filter((rule) => rule.includes('--foreground:') || rule.includes('overscroll-behavior:'))
+    expect(rootRules.length).toBeGreaterThan(0)
+    for (const rule of rootRules) {
+      expect(rule.trimStart().startsWith(PREFIX)).toBe(true)
+    }
+  })
+
+  it('keeps the universal rule as the host and everything in it', () => {
+    const scoped = scopeDocumentStyleToHost('* { box-sizing: border-box; }', PREFIX)
+    expect(selectorsOf(scoped)).toEqual([PREFIX, `${PREFIX} *`])
+  })
+
+  it('collapses the document’s three names to one host selector', () => {
+    expect(
+      selectorsOf(scopeDocumentStyleToHost(':root, html, body { color: red; }', PREFIX))
+    ).toEqual([PREFIX])
+  })
+
+  it('refuses a document-level selector it cannot move, rather than scoping it wrongly', () => {
+    // `.host body p` matches nothing and `.host p` is not what `body p` said. Either reading is a
+    // silent change to the sheet, so the shape is refused instead.
+    expect(() => scopeDocumentStyleToHost('body p { color: red; }', PREFIX)).toThrow(
+      'cannot be moved onto a host'
+    )
+  })
+
+  it('refuses a descendant of the document root, which reads as no leading element at all', () => {
+    // `:root` starts with a colon, so the leading-element read answers the empty string and the
+    // selector fell through to `.host :root .foo` — a rule that matches nothing, silently.
+    for (const selector of [':root .foo', ':root > .foo', ':root.theme']) {
+      expect(() => scopeDocumentStyleToHost(`${selector} { color: red; }`, PREFIX)).toThrow(
+        'cannot be moved onto a host'
+      )
+    }
+    // The bare name is still the host itself, which is the case the sheet actually has.
+    expect(scopeDocumentStyleToHost(':root { color: red; }', PREFIX)).toContain(`${PREFIX} {`)
+  })
+
+  it('refuses a sheet whose shape it cannot rewrite, as the other half does', () => {
+    expect(() =>
+      scopeDocumentStyleToHost('@media (min-width: 1px) { .a { color: red; } }', PREFIX)
+    ).toThrow('at-rules cannot be scoped')
+    expect(() => scopeDocumentStyleToHost('.a { color: red;', PREFIX)).toThrow('never closes')
+  })
+})
diff --git a/mobile/src/components/rich-markdown/rich-markdown-web-document-mount.test.ts b/mobile/src/components/rich-markdown/rich-markdown-web-document-mount.test.ts
new file mode 100644
index 00000000000..a1e9dd37d0b
--- /dev/null
+++ b/mobile/src/components/rich-markdown/rich-markdown-web-document-mount.test.ts
@@ -0,0 +1,164 @@
+// @vitest-environment happy-dom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  RICH_MARKDOWN_HOST_CLASS,
+  mountRichMarkdownWebDocument,
+  type RichMarkdownWebDocument
+} from './rich-markdown-web-document-mount'
+import type { MobileRichMarkdownEditorMessage } from '../mobile-rich-markdown-editor-contract'
+
+/**
+ * The page's mount of the editor document, as a unit.
+ *
+ * What it owns is everything between the component and the factory: the sheet planted once per
+ * page and reaching only inside the host, the markup the document reads its surface out of, and
+ * the dispose that has to leave the page as it found it. Rulings 20 and 21 are the point of the
+ * last one — a second mount must not inherit the first's listeners, and the first's must not go on
+ * reporting into a host that has gone.
+ *
+ * What a browser makes of the sheet is not a question this environment can answer and is measured
+ * in `config/scripts/mobile-web-app-rich-markdown-render.test.mjs` instead.
+ */
+const mounted: RichMarkdownWebDocument[] = []
+
+function mount(posts: MobileRichMarkdownEditorMessage[] = [], url: string | null = null) {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+  const live = mountRichMarkdownWebDocument(host, {
+    postToHost: (message) => posts.push(message),
+    promptForUrl: () => Promise.resolve(url)
+  })
+  mounted.push(live)
+  return { host, live, posts }
+}
+
+const surfaceIn = (host: HTMLElement) => host.querySelector<HTMLElement>('#editor')
+
+beforeEach(() => {
+  document.body.innerHTML = ''
+  document.head.innerHTML = ''
+})
+
+afterEach(() => {
+  while (mounted.length > 0) {
+    mounted.pop()!.dispose()
+  }
+  vi.restoreAllMocks()
+})
+
+describe('the editor document mounted in the page', () => {
+  it('plants the markup in the host and reports itself ready through the seam', () => {
+    const { host, posts } = mount()
+    expect(surfaceIn(host)?.getAttribute('contenteditable')).toBe('true')
+    expect(posts).toEqual([{ type: 'ready' }])
+    // Never the shell's bridge: on the page that object is the host's own channel.
+    expect(window.ReactNativeWebView).toBeUndefined()
+  })
+
+  it('never reports a keyboard inset, because the screen measures the same viewport', () => {
+    // The seam supplies no source, so the document has nothing to observe and nothing to post. A
+    // report here would lift the screen's own bar a second time.
+    const { posts } = mount()
+    window.dispatchEvent(new Event('resize'))
+    expect(posts.filter((message) => message.type === 'keyboardInset')).toEqual([])
+  })
+
+  it('injects one sheet for the page, held entirely under the host class', () => {
+    mount()
+    mount()
+    const sheets = document.querySelectorAll('#orca-rich-markdown-document-style')
+    expect(sheets).toHaveLength(1)
+    const text = sheets[0]!.textContent ?? ''
+    expect(text.length).toBeGreaterThan(1000)
+    const selectors = [...text.matchAll(/(?:^|\})\s*([^{}]+)\{/g)].flatMap((match) =>
+      match[1]!.split(',').map((one) => one.trim())
+    )
+    expect(selectors.length).toBeGreaterThan(40)
+    expect(selectors.filter((one) => !one.startsWith(`.${RICH_MARKDOWN_HOST_CLASS}`))).toEqual([])
+  })
+
+  it('gives the host back on dispose, so every rule of the sheet matches nothing', () => {
+    const { host, live } = mount()
+    expect(host.classList.contains(RICH_MARKDOWN_HOST_CLASS)).toBe(true)
+    live.dispose()
+    mounted.pop()
+    expect(host.innerHTML).toBe('')
+    expect(host.classList.contains(RICH_MARKDOWN_HOST_CLASS)).toBe(false)
+  })
+
+  it('leaves no listener of the first mount reporting into the second', () => {
+    const first = mount()
+    const firstSurface = surfaceIn(first.host)!
+    first.live.dispose()
+    mounted.pop()
+    first.posts.length = 0
+
+    const second = mount()
+    second.posts.length = 0
+    surfaceIn(second.host)!.innerHTML = '<p>second</p>'
+    surfaceIn(second.host)!.dispatchEvent(new Event('input', { bubbles: true }))
+
+    expect(second.posts).toEqual([{ type: 'change', markdown: 'second', generation: 0 }])
+    // The precondition the empty list needs: the detached surface is still an element events can
+    // be dispatched on, so nothing reporting from it is the listeners being gone rather than the
+    // event never happening.
+    firstSurface.innerHTML = '<p>first</p>'
+    firstSurface.dispatchEvent(new Event('input', { bubbles: true }))
+    expect(first.posts).toEqual([])
+  })
+
+  it('gives the host back when the document fails to start, rather than leaving a dead one', () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    // The one failure the start sequence has: a surface it cannot read. Faked at the element read
+    // rather than at the factory, so the unwind under test is the real one.
+    vi.spyOn(host, 'querySelector').mockReturnValue(null)
+
+    expect(() =>
+      mountRichMarkdownWebDocument(host, {
+        postToHost: () => {},
+        promptForUrl: () => Promise.resolve(null)
+      })
+    ).toThrow()
+    expect(host.innerHTML).toBe('')
+    expect(host.classList.contains(RICH_MARKDOWN_HOST_CLASS)).toBe(false)
+  })
+
+  it('answers the URL commands from the host rather than from a dialog the shell never shows', async () => {
+    // `execCommand` is the browser's and happy-dom has none, so what the command *does* is the
+    // render check's to measure; what this can say is that the URL comes from the host's seam and
+    // reaches the command with it.
+    const executed: [string, string | undefined][] = []
+    Object.defineProperty(document, 'execCommand', {
+      configurable: true,
+      value: (command: string, _ui: boolean, value?: string) => {
+        executed.push([command, value])
+        return true
+      }
+    })
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const promptForUrl = vi.fn(() => Promise.resolve('https://example.com/a'))
+    const live = mountRichMarkdownWebDocument(host, { postToHost: () => {}, promptForUrl })
+    mounted.push(live)
+
+    await live.send.runCommand('image')
+
+    expect(promptForUrl.mock.calls).toEqual([['image']])
+    expect(executed).toContainEqual(['insertImage', 'https://example.com/a'])
+  })
+
+  it('runs nothing when the host cancels, which is what the shell used to do for every URL', async () => {
+    const executed: string[] = []
+    Object.defineProperty(document, 'execCommand', {
+      configurable: true,
+      value: (command: string) => {
+        executed.push(command)
+        return true
+      }
+    })
+    const { live } = mount([], null)
+    await live.send.runCommand('link')
+    expect(executed).toEqual([])
+  })
+})
diff --git a/mobile/src/components/rich-markdown/rich-markdown-web-document-mount.ts b/mobile/src/components/rich-markdown/rich-markdown-web-document-mount.ts
new file mode 100644
index 00000000000..c6fcb9728e5
--- /dev/null
+++ b/mobile/src/components/rich-markdown/rich-markdown-web-document-mount.ts
@@ -0,0 +1,122 @@
+import { createRichMarkdownEditorDocument } from './create-rich-markdown-editor-document'
+import { RICH_MARKDOWN_EDITOR_MARKUP } from './document-markup'
+import { richMarkdownEditorStyle } from './document-style'
+import { scopeDocumentStyleToHost } from '../../terminal/terminal-webview-html/document-style-scoping'
+import type { RichMarkdownEditorApi, RichMarkdownUrlPromptKind } from './document-host-seams'
+import type { MobileRichMarkdownEditorMessage } from '../mobile-rich-markdown-editor-contract'
+
+/**
+ * The rich Markdown editor document, mounted in the page instead of in a WebView.
+ *
+ * Same program: the factory the WebView's script is bundled from, called here with the page's own
+ * hooks instead of the WebView's window. What the WebView's HTML gave the document — a stylesheet,
+ * the markup it reads its surface out of, a `postMessage` back to React Native and a `prompt` for
+ * the two commands that need a URL — this supplies instead, through the seams and the host element.
+ *
+ * A call is a document. Nothing here is shared between two of them and nothing is reset: each call
+ * builds its own scope and reads its own surface, so a second editor on the page cannot reach the
+ * first one's state and a stale callback from a mount that has gone reads the scope it closed over.
+ */
+
+export type RichMarkdownWebDocument = {
+  /** What the WebView reaches through its injected global, held directly. */
+  send: RichMarkdownEditorApi
+  dispose: () => void
+}
+
+/** What the page has to answer that the window cannot. */
+export type RichMarkdownWebDocumentHooks = {
+  postToHost: (message: MobileRichMarkdownEditorMessage) => void
+  promptForUrl: (kind: RichMarkdownUrlPromptKind) => Promise<string | null>
+}
+
+const STYLE_ELEMENT_ID = 'orca-rich-markdown-document-style'
+
+/** The class the host carries, and the prefix every injected rule is held under. */
+export const RICH_MARKDOWN_HOST_CLASS = 'orca-rich-markdown-document-host'
+
+/**
+ * The stylesheet, planted in the head once per page and reaching only inside the host.
+ *
+ * The document's rules are written against element names — `h1`, `p`, `code`, `pre`, `a` — so the
+ * sheet the WebView's `<head>` carries would restyle every screen the shell can show and keep
+ * doing it after the editor is gone. `scopeDocumentStyleToHost` holds all of them under the host's
+ * class, the document's own four included: the host element *is* this editor's page, so the
+ * variables the sheet reads, its surface colour and its font belong on it.
+ *
+ * Left in the head after unmount, like the terminal's: it matches nothing once the host has
+ * dropped the class, and the next mount wants it back.
+ */
+function ensureDocumentStyle() {
+  if (document.getElementById(STYLE_ELEMENT_ID)) {
+    return
+  }
+  const style = document.createElement('style')
+  style.id = STYLE_ELEMENT_ID
+  style.textContent = scopeDocumentStyleToHost(
+    richMarkdownEditorStyle(),
+    `.${RICH_MARKDOWN_HOST_CLASS}`
+  )
+  document.head.appendChild(style)
+}
+
+/**
+ * The document, mounted: style, markup, one call, and the handle that stops it.
+ *
+ * Synchronous, because the modules are a static import and building a document is a function call.
+ * A caller's cleanup can therefore never arrive before there is something to clean up.
+ */
+export function mountRichMarkdownWebDocument(
+  host: HTMLElement,
+  hooks: RichMarkdownWebDocumentHooks
+): RichMarkdownWebDocument {
+  ensureDocumentStyle()
+  host.classList.add(RICH_MARKDOWN_HOST_CLASS)
+  host.innerHTML = RICH_MARKDOWN_EDITOR_MARKUP
+  const started = startDocumentOrGiveTheHostBack(host, hooks)
+  return {
+    send: started.send,
+    dispose: () => {
+      started.stop()
+      host.innerHTML = ''
+      // The sheet stays in the head; the class does not, so every rule in it matches nothing again
+      // the moment the editor is gone.
+      host.classList.remove(RICH_MARKDOWN_HOST_CLASS)
+    }
+  }
+}
+
+/**
+ * The call, and the host given back if it throws.
+ *
+ * A start that throws is unwound inside the factory, which leaves the document stopped and the
+ * page holding this function's own two edits: the markup and the class. Neither has an owner once
+ * there is no handle.
+ */
+function startDocumentOrGiveTheHostBack(host: HTMLElement, hooks: RichMarkdownWebDocumentHooks) {
+  try {
+    return createRichMarkdownEditorDocument({
+      // The mount's own element, so two editors on one page read their own surfaces: the markup's
+      // id is the same in both hosts, and a stack transition keeps the outgoing screen mounted
+      // while the incoming one starts.
+      root: host,
+
+      // Ruling 19: on the page `window.ReactNativeWebView` is the *shell's* bridge, so an editor
+      // message posted through it would put editor JSON into the bridge's own channel.
+      postToHost: hooks.postToHost,
+
+      // Measured to return null in both shells, neither of which implements the delegate the
+      // dialog needs, so Link and Image did nothing at all. The page answers with a modal.
+      promptForUrl: hooks.promptForUrl,
+
+      // None, deliberately. The document's `visualViewport` reads and the screen's own
+      // `keyboard-occlusion.web.ts` are the same measurement of the same viewport with the same
+      // formula, so reporting an inset here would lift the screen's bar twice.
+      keyboardInsetSource: () => null
+    })
+  } catch (error) {
+    host.innerHTML = ''
+    host.classList.remove(RICH_MARKDOWN_HOST_CLASS)
+    throw error
+  }
+}
diff --git a/mobile/src/terminal/terminal-webview-html/document-style-scoping.ts b/mobile/src/terminal/terminal-webview-html/document-style-scoping.ts
index 9df1b9b0a39..77884abd8e4 100644
--- a/mobile/src/terminal/terminal-webview-html/document-style-scoping.ts
+++ b/mobile/src/terminal/terminal-webview-html/document-style-scoping.ts
@@ -1,5 +1,5 @@
 /**
- * The terminal's own rules, rewritten to reach only what the host element contains.
+ * A document's own rules, rewritten to reach only what the host element contains.
  *
  * Inside the WebView the document owns its page, so its stylesheet says `*`, `html` and `body`
  * and means it. On the page the document is a guest: the same sheet, appended to the head of a
@@ -12,9 +12,15 @@
  * `document.getElementById`, which does not cross a shadow boundary, and xterm's own sheet is
  * written against `.xterm` in the same document. Both would need a different program.
  *
- * The rewrite is textual because the input is: two flat stylesheets this repository writes or
+ * The rewrite is textual because the input is: flat stylesheets this repository writes or
  * generates, with no at-rules and no nesting. Anything else throws rather than passing a rule
  * through unscoped, and `document-style-scoping.test.ts` holds that.
+ *
+ * Two page mounts use it and they want opposite things from the document's own rules, which is why
+ * there are two exports rather than a flag. The terminal drops them, because the colour `html, body`
+ * was setting belongs to the application and a seam repaints the host instead. The rich Markdown
+ * editor moves them onto the host, because the host element *is* that editor's page: its variables,
+ * its surface colour and its font are what every other rule in the sheet reads.
  */
 
 /** A rule's selector list and its declaration block, as the source text writes them. */
@@ -90,3 +96,62 @@ export function scopeStyleToHost(css: string, prefix: string): string {
     })
     .join('\n')
 }
+
+/** The three names a document uses for itself, all of which the host element answers to. */
+const DOCUMENT_ROOT_SELECTORS = ['html', 'body', ':root']
+
+/**
+ * Whether a selector starts at the document rather than being one of its names.
+ *
+ * `leadingElement` splits on `:`, so it answers the empty string for anything beginning `:root` and
+ * the check below would have let `:root .foo` through to `${prefix} :root .foo` — a rule that
+ * matches nothing, silently. `html` and `body` are read the way they always were.
+ */
+function startsAtDocumentRoot(selector: string): boolean {
+  return (
+    DOCUMENT_ROOT_SELECTORS.includes(leadingElement(selector)) || /^:root(?![\w-])/.test(selector)
+  )
+}
+
+/**
+ * One selector as the host's subtree spells it.
+ *
+ * `*` becomes the host and everything in it, because that is what the document meant by it — the
+ * box model it sets has to reach the element the padding is on. A name for the document itself
+ * becomes the host. Anything else hangs under the host.
+ *
+ * A selector that only *starts* at the document (`body p`) throws: `${prefix} body p` matches
+ * nothing and `${prefix} p` is not what it said, so either rewrite would change the sheet in
+ * silence.
+ */
+function hostSelectors(selector: string, prefix: string): string[] {
+  const one = selector.trim()
+  if (one === '*') {
+    return [prefix, `${prefix} *`]
+  }
+  if (DOCUMENT_ROOT_SELECTORS.includes(one)) {
+    return [prefix]
+  }
+  if (startsAtDocumentRoot(one)) {
+    throw new Error(`a selector under the document cannot be moved onto a host: ${one}`)
+  }
+  return [`${prefix} ${one}`]
+}
+
+/**
+ * The same stylesheet with the whole document held under `prefix`, its own rules included.
+ *
+ * The counterpart of `scopeStyleToHost` for a document whose host element is the page it thought
+ * it had. Duplicates are collapsed, so `html, body { … }` is one rule on one selector rather than
+ * the same selector written twice.
+ */
+export function scopeDocumentStyleToHost(css: string, prefix: string): string {
+  return parseStyleRules(css)
+    .map((rule) => {
+      const scoped = [
+        ...new Set(rule.selectors.split(',').flatMap((one) => hostSelectors(one, prefix)))
+      ].join(',\n')
+      return `${scoped} ${rule.declarations}`
+    })
+    .join('\n')
+}