diff --git a/apps/client/src/todos/lib/editable-caret.test.ts b/apps/client/src/todos/lib/editable-caret.test.ts
new file mode 100644
index 0000000..380323a
--- /dev/null
+++ b/apps/client/src/todos/lib/editable-caret.test.ts
@@ -0,0 +1,98 @@
+import { describe, expect, it } from 'vitest'
+import type { QuickAddToken } from './quick-add'
+import { tokensChanged } from './editable-caret'
+
+// docs/specs/quick-add.md — what a contenteditable costs. This predicate
+// is the whole undo story: rewriting `innerHTML` empties the browser's
+// undo stack, so the marks are redrawn only when the token set actually
+// changes and left alone for every keystroke that does not move one.
+// False here means the DOM is never touched, which is what keeps ⌘Z
+// native for ordinary typing.
+//
+// The caret helpers beside this one are deliberately *not* unit tested:
+// what they assert is DOM behaviour, the client has no DOM test
+// environment (every test here is a `.ts` over extracted logic), and
+// adding one for two functions would be a fourth test arrangement in a
+// repo that already has three. They are covered in e2e/tests/quick-add,
+// against a real browser.
+
+const token = (
+  kind: QuickAddToken['kind'],
+  start: number,
+  end: number,
+): QuickAddToken => ({ kind, start, end })
+
+describe('tokensChanged', () => {
+  it('is false for the same tokens, so typing does not redraw', () => {
+    const text = 'Clean the gutters tomorrow at 3pm #Chores'
+    const before = [token('date', 18, 33), token('list', 34, 41)]
+    const after = [token('date', 18, 33), token('list', 34, 41)]
+    expect(tokensChanged(before, after, text, text)).toBe(false)
+  })
+
+  it('is false for two empty sets', () => {
+    expect(tokensChanged([], [], '', '')).toBe(false)
+  })
+
+  it('is true when a token appears', () => {
+    // Typing the "m" that completes "3pm": this is the one keystroke
+    // that costs an undo entry, and it has to redraw to earn it.
+    const before = [token('list', 34, 41)]
+    const after = [token('date', 18, 33), token('list', 34, 41)]
+    const text = 'Clean the gutters tomorrow at 3pm #Chores'
+    expect(tokensChanged(before, after, text, text)).toBe(true)
+  })
+
+  it('is true when a token disappears', () => {
+    const text = 'Clean the gutters tomorrow at 3pm #Chores'
+    const before = [token('date', 18, 33), token('list', 34, 41)]
+    const after = [token('date', 18, 33)]
+    expect(tokensChanged(before, after, text, text)).toBe(true)
+  })
+
+  it('is false when a token only slides along the line', () => {
+    // Typing a character *before* a token shifts its offsets without
+    // changing which words are marked. Found in the browser 2026-08-19:
+    // comparing raw offsets made this the common case rather than the
+    // rare one — every keystroke in the prose before a token forced a
+    // redraw, and with it lost that keystroke's undo entry, which is
+    // exactly what this predicate exists to prevent. What matters is
+    // which text is marked, not where it sits.
+    const text = 'Clean the gutters tomorrow at 3pm'
+    const shifted = 'Clean the Zgutters tomorrow at 3pm'
+    expect(
+      tokensChanged(
+        [token('date', 18, 33)],
+        [token('date', 19, 34)],
+        text,
+        shifted,
+      ),
+    ).toBe(false)
+  })
+
+  it('is true when a token moves onto different words', () => {
+    const before = [token('date', 0, 8)]
+    const after = [token('date', 9, 17)]
+    expect(
+      tokensChanged(before, after, 'tomorrow p1 today', 'tomorrow today p1'),
+    ).toBe(true)
+  })
+
+  it('is true when a token grows', () => {
+    // "tomorrow" becoming "tomorrow at 3pm" — same start, same kind, and
+    // the mark has to stretch.
+    const text = 'Clean the gutters tomorrow at 3pm'
+    const before = [token('date', 18, 26)]
+    const after = [token('date', 18, 33)]
+    expect(tokensChanged(before, after, text, text)).toBe(true)
+  })
+
+  it('is true when only the kind differs', () => {
+    // Same span, different meaning. Nothing in the app produces this
+    // today, but the mark is drawn from the token, so a set that differs
+    // only by kind is still a set that has changed.
+    const before = [token('date', 0, 2)]
+    const after = [token('priority', 0, 2)]
+    expect(tokensChanged(before, after, 'p1 milk', 'p1 milk')).toBe(true)
+  })
+})
diff --git a/apps/client/src/todos/lib/editable-caret.ts b/apps/client/src/todos/lib/editable-caret.ts
new file mode 100644
index 0000000..53b42e5
--- /dev/null
+++ b/apps/client/src/todos/lib/editable-caret.ts
@@ -0,0 +1,158 @@
+import type { QuickAddToken } from './quick-add'
+
+// docs/specs/quick-add.md — what a contenteditable costs.
+//
+// The caret in a contenteditable is a DOM position: a node plus an offset
+// into it. Everything else in quick add addresses text by a plain offset
+// into the string — `replaceToken` returns one, the parser's tokens are
+// `slice`-compatible ranges — so these two functions are the whole
+// translation layer between the two worlds, and nothing above them has to
+// know a Range exists.
+//
+// The `<input>` this replaced had `setSelectionRange` for the same job.
+
+/**
+ * Where the caret is, as an offset into the element's plain text.
+ *
+ * `null` when the selection is somewhere else on the page, which is the
+ * ordinary case while a pill menu is open.
+ *
+ * Measured by asking a Range how much text precedes the caret rather than
+ * by walking and summing node lengths ourselves: a Range counts exactly
+ * what `innerText` would return over the same span, so the two agree even
+ * when the marks split the text into many nodes.
+ */
+export function caretOffset(el: HTMLElement): number | null {
+  const selection = document.getSelection()
+  if (!selection || selection.rangeCount === 0) return null
+
+  const range = selection.getRangeAt(0)
+  if (!el.contains(range.endContainer)) return null
+
+  const toCaret = range.cloneRange()
+  toCaret.selectNodeContents(el)
+  toCaret.setEnd(range.endContainer, range.endOffset)
+  return toCaret.toString().length
+}
+
+/**
+ * Put the caret at a plain-text offset, counting through the text nodes.
+ *
+ * `>=` rather than `>` when finding the node: an offset landing exactly on
+ * a node's end belongs to that node, at its final position. Preferring the
+ * *next* node would put the caret on the far side of a mark's boundary,
+ * so typing after a token would land inside it.
+ *
+ * An offset past the end clamps to the last text node rather than throwing
+ * — the text can only have shrunk under a caret we are restoring, and the
+ * end of the line is the sane place to be.
+ */
+export function placeCaret(el: HTMLElement, offset: number): void {
+  const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT)
+  let seen = 0
+  let last: Node | null = null
+
+  // `SHOW_TEXT` guarantees every node here is a Text, but the DOM types
+  // say `Node` — narrowed by checking rather than asserted, so this stays
+  // honest if the filter ever changes.
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    const length = node.textContent?.length ?? 0
+    if (seen + length >= offset) {
+      select(node, offset - seen)
+      return
+    }
+    seen += length
+    last = node
+  }
+
+  // Nothing long enough: an empty field has no text node at all, so put
+  // the caret in the element itself rather than giving up.
+  if (last) select(last, last.textContent?.length ?? 0)
+  else select(el, 0)
+}
+
+function select(node: Node, offset: number): void {
+  const range = document.createRange()
+  range.setStart(node, offset)
+  range.collapse(true)
+  const selection = document.getSelection()
+  selection?.removeAllRanges()
+  selection?.addRange(range)
+}
+
+/**
+ * Must the marks be redrawn?
+ *
+ * **This is what keeps undo native.** Writing `innerHTML` empties the
+ * browser's undo stack — measured 2026-08-19, and the reason `⌘Z` does
+ * nothing at all in a naive highlighting editor. Answering `false` here
+ * leaves the DOM untouched, so the browser's own editing, and its undo
+ * history along with it, is never disturbed.
+ *
+ * **Compares the marked *words*, not their offsets.** Offsets were the
+ * first implementation and were wrong in use: typing anywhere before a
+ * token shifts every later token's `start` and `end`, so a keystroke in
+ * the middle of the summary counted as a change and forced a redraw. That
+ * made the redraw the common case rather than the rare one and cost an
+ * undo entry per keystroke — the exact failure this predicate exists to
+ * prevent. The marks are drawn around text, and text that has only slid
+ * along the line is still in the right DOM node.
+ * *(fixed 2026-08-19, found in the browser.)*
+ */
+export function tokensChanged(
+  before: readonly QuickAddToken[],
+  after: readonly QuickAddToken[],
+  beforeText: string,
+  afterText: string,
+): boolean {
+  if (before.length !== after.length) return true
+  return before.some((token, index) => {
+    const other = after[index]
+    return (
+      !other ||
+      token.kind !== other.kind ||
+      beforeText.slice(token.start, token.end) !==
+        afterText.slice(other.start, other.end)
+    )
+  })
+}
+
+/**
+ * Where the caret is on screen, in viewport coordinates.
+ *
+ * `null` when the selection is outside `el`, or when the browser reports
+ * no rect at all — a collapsed range at the very start of an empty element
+ * gives an empty list rather than a zero-width rect.
+ *
+ * A collapsed range has no dimensions in some engines, so this expands it
+ * by one character where it can and measures that instead. The
+ * `getClientRects()[0]` path covers the ordinary case, and is preferred
+ * because it is the caret's own line rather than a character beside it —
+ * which matters on a wrapped field, where the two can be different lines.
+ */
+export function caretRect(
+  el: HTMLElement,
+): { bottom: number; left: number } | null {
+  const selection = document.getSelection()
+  if (!selection || selection.rangeCount === 0) return null
+
+  const range = selection.getRangeAt(0)
+  if (!el.contains(range.endContainer)) return null
+
+  const direct = range.getClientRects()[0]
+  if (direct) return { bottom: direct.bottom, left: direct.left }
+
+  // Collapsed with no rect of its own: measure the character before the
+  // caret, which sits on the same line, and take its trailing edge.
+  const probe = range.cloneRange()
+  const offset = range.endOffset
+  if (offset > 0) {
+    probe.setStart(range.endContainer, offset - 1)
+    const before = probe.getClientRects()[0]
+    if (before) return { bottom: before.bottom, left: before.right }
+  }
+
+  // Nothing measurable — an empty field. Its own box is the best answer.
+  const box = el.getBoundingClientRect()
+  return { bottom: box.top + el.clientHeight, left: box.left }
+}
diff --git a/apps/client/src/todos/lib/quick-add.test.ts b/apps/client/src/todos/lib/quick-add.test.ts
index cf3dc7b..b752b7a 100644
--- a/apps/client/src/todos/lib/quick-add.test.ts
+++ b/apps/client/src/todos/lib/quick-add.test.ts
@@ -460,4 +460,15 @@ describe('regressions', () => {
     expect(result.listId).toBe('s')
     expect(result.summary).toBe('Buy milk')
   })
+
+  it('takes a day from one phrase and a time from another', () => {
+    // Reported from use 2026-08-19: "next week when 3pm" set the week and
+    // silently dropped the time, leaving "3pm" sitting in the summary
+    // describing a due the todo did not have. Only the first chrono match
+    // per segment was read, so the second was thrown away before the day
+    // and time could be taken from different phrases.
+    const result = parseQuickAdd('Call them next week when 3pm', [], NOW)
+    expect(result.due).toEqual({ date: '2026-08-21', time: '15:00' })
+    expect(result.summary).toBe('Call them when')
+  })
 })
diff --git a/apps/client/src/todos/lib/quick-add.ts b/apps/client/src/todos/lib/quick-add.ts
index 4feb5c5..6ac8e74 100644
--- a/apps/client/src/todos/lib/quick-add.ts
+++ b/apps/client/src/todos/lib/quick-add.ts
@@ -281,58 +281,69 @@ export function parseQuickAdd(
   // is reported and no date text is stripped from the summary
   // (see `QuickAddOptions.noDates`).
   for (const segment of options.noDates ? [] : gapsBetween(text, tokens)) {
-    const [parsed] = chrono.parse(segment.text, now, { forwardDate: true })
-    if (!parsed) continue
-    const start = parsed.start
-    // **"Now" is not a due date.** A todo scheduled for this instant is
-    // overdue as soon as it exists, which nobody means, so a match that
-    // resolves to the reference instant is discarded rather than written.
-    //
-    // This also removes a whole family of false positives rather than
-    // listing them. chrono's casual parser reads a determiner followed by
-    // a unit letter — "the s", "a s", "the m" — as *now*, so typing "sort
-    // out the shed" invented a due date of today at the current minute the
-    // moment "the s" was on screen, then took those words out of the
-    // summary. Every one of those resolves to the reference instant, so
-    // one rule about meaning catches them all; matching the phrases would
-    // have been a list that the next casual pattern escapes.
-    // *(added 2026-08-14, found in review.)*
-    if (isNow(start, now)) continue
-    // The same family, for the few that land a minute out rather than on
-    // the instant — see `isPhantomDate`.
-    if (isPhantomDate(parsed.text)) continue
-    // `isCertain('hour')` is the all-day/timed distinction
-    // (docs/specs/todos.md — due times): a date chrono inferred rather
-    // than read is not a time the user asked for.
-    const namesTime = start.isCertain('hour')
-    if (namesTime) clock ??= start.date()
-    // A bare time ("3pm") also resolves to a day — today's — which must
-    // not outrank an explicit one stated elsewhere in the line. Only a
-    // match that actually names a day sets it.
-    const namesDay =
-      start.isCertain('day') ||
-      start.isCertain('weekday') ||
-      start.isCertain('month')
-    if (namesDay) day ??= start.date()
-    // **A match that sets nothing is not a match.** chrono recognises
-    // spans that name no date component at all — "this week" and "this
-    // year" both come back with an empty `knownValues` — so neither of
-    // the two branches above fires. Highlighting it anyway marked the
-    // words and then took them out of the summary, leaving a todo that
-    // had lost "this week" and gained no due date.
-    //
-    // "This week" is ambiguous in any case: chrono resolves it to
-    // tomorrow, which is nobody's reading of it. Leaving the words in the
-    // title is the honest outcome.
-    // *(added 2026-08-17, reported from use.)*
-    if (!namesDay && !namesTime) continue
-    // Offset back into the original string, since chrono indexed the
-    // segment rather than the whole line.
-    tokens.push({
-      kind: 'date',
-      start: segment.offset + parsed.index,
-      end: segment.offset + parsed.index + parsed.text.length,
-    })
+    // **Every match in the segment, not just the first.** `day` and
+    // `clock` are separate for exactly this case — a line can name a day
+    // in one phrase and a time in another — but taking only
+    // `chrono.parse(...)[0]` threw the second away before either could see
+    // it. "next week when 3pm" set the week and dropped the time, leaving
+    // "3pm" in the summary reporting a due the todo did not have. The
+    // `??=` below still means the first day and the first time win, which
+    // is the rule that was always intended.
+    // *(fixed 2026-08-19, reported from use.)*
+    for (const parsed of chrono.parse(segment.text, now, {
+      forwardDate: true,
+    })) {
+      const start = parsed.start
+      // **"Now" is not a due date.** A todo scheduled for this instant is
+      // overdue as soon as it exists, which nobody means, so a match that
+      // resolves to the reference instant is discarded rather than written.
+      //
+      // This also removes a whole family of false positives rather than
+      // listing them. chrono's casual parser reads a determiner followed by
+      // a unit letter — "the s", "a s", "the m" — as *now*, so typing "sort
+      // out the shed" invented a due date of today at the current minute the
+      // moment "the s" was on screen, then took those words out of the
+      // summary. Every one of those resolves to the reference instant, so
+      // one rule about meaning catches them all; matching the phrases would
+      // have been a list that the next casual pattern escapes.
+      // *(added 2026-08-14, found in review.)*
+      if (isNow(start, now)) continue
+      // The same family, for the few that land a minute out rather than on
+      // the instant — see `isPhantomDate`.
+      if (isPhantomDate(parsed.text)) continue
+      // `isCertain('hour')` is the all-day/timed distinction
+      // (docs/specs/todos.md — due times): a date chrono inferred rather
+      // than read is not a time the user asked for.
+      const namesTime = start.isCertain('hour')
+      if (namesTime) clock ??= start.date()
+      // A bare time ("3pm") also resolves to a day — today's — which must
+      // not outrank an explicit one stated elsewhere in the line. Only a
+      // match that actually names a day sets it.
+      const namesDay =
+        start.isCertain('day') ||
+        start.isCertain('weekday') ||
+        start.isCertain('month')
+      if (namesDay) day ??= start.date()
+      // **A match that sets nothing is not a match.** chrono recognises
+      // spans that name no date component at all — "this week" and "this
+      // year" both come back with an empty `knownValues` — so neither of
+      // the two branches above fires. Highlighting it anyway marked the
+      // words and then took them out of the summary, leaving a todo that
+      // had lost "this week" and gained no due date.
+      //
+      // "This week" is ambiguous in any case: chrono resolves it to
+      // tomorrow, which is nobody's reading of it. Leaving the words in the
+      // title is the honest outcome.
+      // *(added 2026-08-17, reported from use.)*
+      if (!namesDay && !namesTime) continue
+      // Offset back into the original string, since chrono indexed the
+      // segment rather than the whole line.
+      tokens.push({
+        kind: 'date',
+        start: segment.offset + parsed.index,
+        end: segment.offset + parsed.index + parsed.text.length,
+      })
+    }
   }
 
   // A time with no day means today — chrono's own reading, and the one a
diff --git a/apps/client/src/todos/quick-add-field/quick-add-field.module.css b/apps/client/src/todos/quick-add-field/quick-add-field.module.css
new file mode 100644
index 0000000..c8decc8
--- /dev/null
+++ b/apps/client/src/todos/quick-add-field/quick-add-field.module.css
@@ -0,0 +1,86 @@
+/* docs/specs/quick-add.md — the field wraps, and grows.
+   See quick-add-field.tsx. */
+
+/* The line you type a todo into.
+ *
+ * One element, not two. It was an `<input>` under a shadow layer holding
+ * the same text at the same metrics, which is what made the marks
+ * unpaddable: padding a token in the shadow moved that layer's text and
+ * nothing else. A contenteditable has no second layer to fall out of
+ * register with, so the marks below can be drawn as marks rather than as
+ * a box-shadow trick.
+ *
+ * It wraps and grows without bound — no `max-height`, no scrolling. A cap
+ * here would put the text back behind a scroll edge, which is the thing
+ * this change exists to remove; the *modal* carries the cap instead
+ * (quick-add-modal.module.css — `.popup`), so the pills and the buttons
+ * stay reachable while every line of the todo stays visible. */
+.field {
+  font: inherit;
+  font-size: var(--text-lg);
+  line-height: 1.5;
+  padding: var(--space-2);
+  border: 0;
+  /* No focus ring, matching the notes field below it and the `<input>` this
+     replaced.
+   *
+     The global `:focus-visible` rule (styles/global.css) draws a 2px accent
+     outline on anything focusable, and exempts `input`, `select` and
+     `textarea` — the elements that carry a border to change instead. A
+     contenteditable `div` is in none of those lists, so it picked up a ring
+     the old field never had, around the one element in this modal that is
+     always focused the moment it opens. Two framed fields stacked is the
+     form this modal exists to replace.
+     *(added 2026-08-19, reported from use.)* */
+  outline: none;
+  color: var(--ink);
+  caret-color: var(--ink);
+  /* `pre-wrap` keeps the runs of spaces someone types between tokens, and
+     wraps at the edge. `break-word` is the guard against a single
+     unbroken 200-character string — a pasted URL — widening the modal
+     past the viewport instead of breaking. */
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  /* An empty field is still a line tall, so the modal does not jolt when
+     the first character lands. */
+  min-height: calc(1.5 * var(--text-lg));
+}
+
+.field:focus-visible {
+  outline: none;
+}
+
+/* The placeholder, drawn rather than declared: `::placeholder` applies to
+   form controls, and this is not one. `:empty` is exactly right here —
+   the element holds one text node while it has any text at all, and none
+   when it does not. */
+.field:empty::before {
+  content: attr(data-placeholder);
+  color: var(--faint);
+  /* Without this the caret sits *after* the placeholder rather than at
+     the start of the line. */
+  pointer-events: none;
+}
+
+/* A recognised token: *marked* text, not a chip.
+ *
+ * Padded and softly rounded, which the shadow-layer arrangement could not
+ * do at any price — see the spec. `--radius-sm` rather than
+ * `--radius-full`: a pill-shaped run of words sitting in a line of prose
+ * reads as an object you could pick up and move, and this is your own
+ * text that the parser has understood, not a chip.
+ *
+ * Tinted `--accent` at the same 12% the preview pills use: the mark and
+ * the pill below it are two views of one token, so they share a hue. */
+.token {
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+  padding: 2px 5px;
+  border-radius: var(--radius-sm);
+  /* A mark that wraps across two lines is drawn complete on both. Without
+     this the padding and the rounded corners are applied to the whole
+     inline box once, so the fragment on the second line loses its left
+     edge and the first loses its right. */
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
diff --git a/apps/client/src/todos/quick-add-field/quick-add-field.tsx b/apps/client/src/todos/quick-add-field/quick-add-field.tsx
new file mode 100644
index 0000000..a46d1b9
--- /dev/null
+++ b/apps/client/src/todos/quick-add-field/quick-add-field.tsx
@@ -0,0 +1,345 @@
+import {
+  useLayoutEffect,
+  useRef,
+  type ClipboardEvent,
+  type FormEvent,
+  type KeyboardEvent,
+  type ReactNode,
+  type RefObject,
+} from 'react'
+import { caretOffset, placeCaret, tokensChanged } from '../lib/editable-caret'
+import type { QuickAddToken } from '../lib/quick-add'
+import styles from './quick-add-field.module.css'
+
+/**
+ * The longest a summary may be.
+ *
+ * A todo's summary is a *title*; prose belongs in the notes field below,
+ * which is what that field is for. Without a bound the cost of every
+ * keystroke grows with the text — the whole line is re-parsed and the
+ * marks can be redrawn — which was measured at ~12ms per keystroke at
+ * 4,000 characters on a fast machine, so several times that on an
+ * ordinary one. 500 is far past any real todo and short enough that the
+ * per-keystroke work stays flat.
+ * *(added 2026-08-19, reported from use: holding ⌘V made typing crawl.)*
+ */
+const MAX_SUMMARY = 500
+
+interface QuickAddFieldProps {
+  value: string
+  onChange: (value: string) => void
+  onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void
+  /** Whether the field holds focus, so the caller can close its menus. */
+  onFocusChange: (focused: boolean) => void
+  placeholder: string
+  tokens: readonly QuickAddToken[]
+  /** Where a pill rewrite wants the caret, or null to leave it alone. */
+  caretTo: RefObject<number | null>
+  fieldRef: RefObject<HTMLDivElement | null>
+}
+
+/**
+ * The line you type a todo into (docs/specs/quick-add.md — the field
+ * wraps, and grows).
+ *
+ * A contenteditable rather than a form control, for one reason: the
+ * recognised tokens are marked *inside* the text, and a padded mark is
+ * only possible when the marks are real elements in the element you type
+ * into. The `<input>` this replaced kept its marks in a shadow layer
+ * underneath, which cannot pad a token without sliding that layer out of
+ * register with the text above it — measured at 34px across three tokens
+ * then, and 52px again against a wrapping `<textarea>`, because the fault
+ * is the second layer rather than the tag.
+ *
+ * What that costs is spelled out in the spec and handled here: Enter,
+ * paste, the caret and the undo stack are all this component's problem
+ * now. It takes a string and calls back with a string, and knows nothing
+ * about the grammar, the pills or the modal around it.
+ */
+export function QuickAddField(props: QuickAddFieldProps): ReactNode {
+  const { value, tokens, caretTo, fieldRef } = props
+  // What the DOM currently shows, so the next render can ask whether the
+  // marks it holds are still the right ones.
+  const drawn = useRef<{ text: string; tokens: readonly QuickAddToken[] }>({
+    text: '',
+    tokens: [],
+  })
+  const composing = useRef(false)
+
+  // Draw the marks — and, crucially, *don't* when nothing needs drawing.
+  //
+  // Writing `innerHTML` empties the browser's undo stack (measured
+  // 2026-08-19), so the one rule that keeps ⌘Z native is to touch the DOM
+  // only when the token set actually changed. Ordinary typing moves no
+  // token, so this returns early for the great majority of keystrokes and
+  // the browser's own editing is left completely alone.
+  //
+  // A layout effect, not an event handler: the marks must be right for
+  // *any* way the text changed — a pill rewrite and the reset on reopen
+  // as much as a keystroke — and they must land before paint or the mark
+  // visibly lags the character by a frame.
+  useLayoutEffect(() => {
+    const el = fieldRef.current
+    if (!el) return
+
+    // Never rewrite the DOM mid-composition. An IME holds uncommitted
+    // text in the element while it is being composed, and replacing it
+    // cancels the composition — the classic contenteditable bug on
+    // Japanese, Chinese and Korean keyboards, and on Android autocorrect.
+    if (composing.current) return
+
+    const requested = caretTo.current
+    const marksStillRight = !tokensChanged(
+      drawn.current.tokens,
+      tokens,
+      drawn.current.text,
+      value,
+    )
+    // The browser already put the typed character in the DOM, so when the
+    // marks are unchanged there is nothing left to do — and doing nothing
+    // is the whole point: no `innerHTML`, no lost undo. This is the path
+    // almost every keystroke takes.
+    //
+    // `marksAreDrawnCorrectly` asks the DOM rather than trusting the
+    // token comparison, because the browser edits inside these spans: type
+    // at the end of a mark and it *extends* that span, so `p2` becomes
+    // `p2 zzz` while the token still says `p2` at the same offsets. The
+    // comparison sees no change and skips the redraw that would fix it.
+    // Checking what is actually drawn cannot drift that way.
+    // *(fixed 2026-08-19, reported from use: a mark swallowed the rest of
+    // the line.)*
+    if (
+      readText(el) === value &&
+      marksStillRight &&
+      marksAreDrawnCorrectly(el, value, tokens)
+    ) {
+      drawn.current = { text: value, tokens }
+      // Still honour a caret a pill asked for: replacing a token with an
+      // identical one — picking the list that is already chosen — changes
+      // neither text nor marks, and the caret still has to move.
+      if (requested !== null) {
+        caretTo.current = null
+        el.focus()
+        placeCaret(el, requested)
+      }
+      return
+    }
+
+    const at = requested ?? caretOffset(el)
+    el.innerHTML = markup(value, tokens)
+    drawn.current = { text: value, tokens }
+    caretTo.current = null
+    if (at === null) return
+
+    // A caret a pill *asked* for is placed whether or not the field holds
+    // focus at this instant. The menu that made the request is still
+    // closing and takes focus back for a frame after calling `.focus()`,
+    // so gating this on `document.activeElement` dropped the caret to the
+    // start of the line and the next character typed landed there.
+    // Otherwise only restore a caret we are re-rendering under, since
+    // moving the selection into an unfocused field would steal it.
+    // *(fixed 2026-08-19, found in the browser.)*
+    if (requested !== null) {
+      el.focus()
+      placeCaret(el, at)
+    } else if (document.activeElement === el) {
+      placeCaret(el, at)
+    }
+  }, [value, tokens, caretTo, fieldRef])
+
+  // Focus on mount, which is what the `<input>`'s `autoFocus` did for free.
+  //
+  // React's `autoFocus` is a form-control attribute and does nothing on a
+  // contenteditable, so without this the modal opened with focus still on
+  // the button that opened it and the first thing typed went nowhere.
+  // A layout effect, so focus lands before paint rather than a frame after
+  // the field appears. *(added 2026-08-19, found in the browser.)*
+  useLayoutEffect(() => {
+    fieldRef.current?.focus()
+  }, [fieldRef])
+
+  // Tell the caller whether this field holds focus, so it can close the
+  // autocomplete when it does not.
+  //
+  // Native `focusin`/`focusout` on the element rather than React's
+  // `onFocus`/`onBlur`: measured 2026-08-19, neither React's synthetic
+  // handlers *nor* native `focus`/`blur` fire on this element at all,
+  // though `document.activeElement` does move to it. `focusin`/`focusout`
+  // bubble, which is what makes them survive whatever is swallowing the
+  // non-bubbling pair.
+  const { onFocusChange } = props
+  useLayoutEffect(() => {
+    const el = fieldRef.current
+    if (!el) return undefined
+    const gained = (): void => {
+      onFocusChange(true)
+    }
+    const lost = (): void => {
+      onFocusChange(false)
+    }
+    el.addEventListener('focusin', gained)
+    el.addEventListener('focusout', lost)
+    return () => {
+      el.removeEventListener('focusin', gained)
+      el.removeEventListener('focusout', lost)
+    }
+  }, [fieldRef, onFocusChange])
+
+  // No newline may reach this field, by any route.
+  //
+  // `plaintext-only` and the modal's own Enter handling already cover the
+  // two keys, so this is the backstop for everything else that can insert
+  // a break — a dictation engine, an Android keyboard's newline, a
+  // drag-and-drop. A native listener rather than React's `onBeforeInput`,
+  // which is a legacy synthetic event that never fires for these input
+  // types: verified in the browser 2026-08-19, where the React handler saw
+  // nothing at all and was doing no work.
+  useLayoutEffect(() => {
+    const el = fieldRef.current
+    if (!el) return undefined
+    const block = (event: InputEvent): void => {
+      if (
+        event.inputType === 'insertParagraph' ||
+        event.inputType === 'insertLineBreak'
+      ) {
+        event.preventDefault()
+        return
+      }
+      // At the cap, refuse anything that would add to the text. Deleting,
+      // and replacing a selection with something no longer, both stay
+      // available — otherwise a full field could not be edited at all.
+      const adds =
+        event.inputType.startsWith('insert') ||
+        event.inputType === 'insertFromPaste'
+      if (!adds) return
+      const selected = document.getSelection()?.toString().length ?? 0
+      const incoming = event.data?.length ?? 0
+      if (readText(el).length - selected + incoming > MAX_SUMMARY) {
+        event.preventDefault()
+      }
+    }
+    el.addEventListener('beforeinput', block)
+    return () => {
+      el.removeEventListener('beforeinput', block)
+    }
+  }, [fieldRef])
+
+  return (
+    <div
+      ref={fieldRef}
+      className={styles['field']}
+      contentEditable="plaintext-only"
+      suppressContentEditableWarning
+      role="textbox"
+      aria-multiline="true"
+      aria-label="Add a todo"
+      data-placeholder={props.placeholder}
+      spellCheck={false}
+      autoCorrect="off"
+      autoCapitalize="off"
+      onInput={(event: FormEvent<HTMLDivElement>) => {
+        props.onChange(readText(event.currentTarget))
+      }}
+      onCompositionStart={() => {
+        composing.current = true
+      }}
+      onCompositionEnd={(event) => {
+        composing.current = false
+        // The committed text arrives with the composition ending rather
+        // than through a further `input`, so read it here or the last
+        // character of every composed word is lost.
+        props.onChange(readText(event.currentTarget))
+      }}
+      onPaste={(event: ClipboardEvent<HTMLDivElement>) => {
+        // A contenteditable pastes HTML by default, stylesheet and all.
+        // Take the plain text and insert it through the browser so the
+        // paste keeps its own place on the undo stack.
+        event.preventDefault()
+        const text = event.clipboardData.getData('text/plain')
+        if (!text) return
+        // Newlines would make a multi-line summary out of a paste when no
+        // keystroke can, so they collapse to spaces.
+        const flat = text.replace(/\s*\n+\s*/g, ' ')
+        // Truncated to what will fit rather than refused: pasting a long
+        // passage into a title is a mistake worth softening, and the first
+        // 500 characters are the part that was wanted.
+        const room = MAX_SUMMARY - readText(event.currentTarget).length
+        if (room <= 0) return
+        insertText(flat.slice(0, room))
+      }}
+      onKeyDown={props.onKeyDown}
+    />
+  )
+}
+
+/**
+ * Do the spans in the DOM hold exactly the text the tokens name?
+ *
+ * The token comparison alone is not enough, because the browser edits
+ * *inside* these spans. Typing at the trailing edge of a mark extends it —
+ * `p2` becomes `p2 zzz` — while the token still reads `p2` at the same
+ * offsets, so nothing in the comparison notices and the redraw that would
+ * fix it never runs. Asking what is drawn is the check that cannot drift.
+ *
+ * Compares the marked strings in order, which is what the reader sees; the
+ * exact node boundaries are the browser's business.
+ */
+function marksAreDrawnCorrectly(
+  el: HTMLElement,
+  value: string,
+  tokens: readonly QuickAddToken[],
+): boolean {
+  const drawnMarks = [...el.querySelectorAll('span')]
+  if (drawnMarks.length !== tokens.length) return false
+  return tokens.every(
+    (token, index) =>
+      drawnMarks[index]?.textContent === value.slice(token.start, token.end),
+  )
+}
+
+/**
+ * The element's text, as a plain string.
+ *
+ * `textContent` rather than `innerText`: `innerText` is layout-aware, so
+ * it reports the *rendered* text and appends a trailing newline in some
+ * engines — which would feed a phantom character back into the value on
+ * every keystroke. The marks are inline spans, so `textContent` already
+ * reads exactly the characters that were typed. The `\n` guard covers a
+ * break that survives `plaintext-only` on older engines.
+ */
+function readText(el: HTMLElement): string {
+  return (el.textContent ?? '').replace(/\n/g, ' ')
+}
+
+/** `execCommand` is deprecated but is the only insert that keeps undo. */
+function insertText(text: string): void {
+  document.execCommand('insertText', false, text)
+}
+
+/**
+ * The marks, as HTML.
+ *
+ * Built as a string rather than as React children because React does not
+ * own this element's contents — the browser edits them directly, and a
+ * React-rendered tree would be reconciled against a DOM the user has
+ * already changed. This is the one place the app writes HTML by hand, so
+ * every interpolation is escaped.
+ */
+function markup(text: string, tokens: readonly QuickAddToken[]): string {
+  let html = ''
+  let cursor = 0
+  for (const token of tokens) {
+    if (token.end <= cursor) continue
+    const start = Math.max(token.start, cursor)
+    if (start > cursor) html += escape(text.slice(cursor, start))
+    html += `<span class="${styles['token'] ?? ''}">${escape(
+      text.slice(start, token.end),
+    )}</span>`
+    cursor = token.end
+  }
+  return html + escape(text.slice(cursor))
+}
+
+function escape(text: string): string {
+  return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
diff --git a/apps/client/src/todos/quick-add-modal/quick-add-modal.module.css b/apps/client/src/todos/quick-add-modal/quick-add-modal.module.css
index c694cec..dbb6a01 100644
--- a/apps/client/src/todos/quick-add-modal/quick-add-modal.module.css
+++ b/apps/client/src/todos/quick-add-modal/quick-add-modal.module.css
@@ -26,13 +26,71 @@
 /* Sits at a launcher's height rather than centred: a box that lands under
    the vertical middle reads as a dialog interrupting the page, while one
    nearer the top reads as a field you have summoned. Alfred and Raycast
-   both do this, and the difference is most of why they feel quick. */
-.popup {
+   both do this, and the difference is most of why they feel quick.
+ *
+   **Rises when it is tall enough to need to.** The field wraps without
+   bound, so a long todo — or an ordinary one on a short window — can make
+   this box taller than the room below 18vh, and a fixed top would push
+   Cancel and Add todo off the bottom of the screen.
+ *
+   Done with flex rather than a measured `top`: the popup is a flex item
+   filling the viewport, aligned to a `margin-top: 18vh` that `auto`
+   margins and a `min-height` collapse as it grows. A short modal keeps its
+   launcher height exactly; a tall one rises, and stops `--space-4` from
+   the top edge. No JavaScript, no measurement, and nothing to keep in sync
+   on resize. Capping the height and scrolling inside was tried first and
+   was worse in every way — see the note below.
+   *(added 2026-08-19, reported from use.)* */
+.popupLayer {
   position: fixed;
-  top: 18vh;
-  left: 50%;
-  transform: translateX(-50%);
+  inset: 0;
   z-index: var(--z-overlay-stacked);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* `safe` matters: a plain `center` on a box taller than its container
+     overflows *both* ways, putting the top of the modal above the top of
+     the screen and out of reach. `safe` falls back to flex-start there,
+     which is exactly the "pin it to the top" behaviour a tall modal wants.
+     Together with the `18vh` padding below, that is the whole rule: short
+     modals sit at the launcher height, tall ones rise and stop at the
+     padding. */
+  justify-content: flex-start;
+  /* `--space-4` all round is the hard limit a tall modal stops at. The
+     launcher height itself is the spacer below, which collapses as the
+     box grows. */
+  padding: var(--space-4);
+  /* Scrollable as a last resort: a modal taller than the whole viewport
+     (a small window, or the text at its 500-character cap) has to go
+     somewhere, and scrolling the layer keeps every part of it reachable
+     without the popup itself ever clipping its own autocomplete. */
+  overflow-y: auto;
+  /* The layer is only a positioner: clicks pass through it to the backdrop
+     beneath, while the popup itself takes them normally. */
+  pointer-events: none;
+}
+
+/* The collapsible launcher-height spacer. `flex-basis` is what it wants,
+   `flex-shrink` is what lets the popup take it back. */
+.popupSpacer {
+  flex: 0 1 18vh;
+  min-height: 0;
+}
+
+.popup {
+  pointer-events: auto;
+  /* The containing block for the `#` autocomplete, which is absolutely
+     positioned against this box. Without it the nearest positioned
+     ancestor is `.popupLayer` — added for the rise-when-tall placement —
+     and the menu's offsets, measured from this box, were applied against
+     that one instead: the menu landed in the top-left corner of the
+     screen, out by exactly the popup's own position.
+     *(fixed 2026-08-19, reported from use.)* */
+  position: relative;
+  /* Never squashed by the flex line it sits in: a tall box keeps its full
+     height and the layer scrolls instead of the box shrinking. */
+  flex-shrink: 0;
+  margin-block: 0;
   width: min(34rem, calc(100vw - 2 * var(--space-4)));
   border: 1px solid var(--line);
   border-radius: var(--radius-md);
@@ -42,6 +100,19 @@
      rather than replacing it. */
   box-shadow: var(--shadow-lg, 0 12px 32px rgb(0 0 0 / 0.18));
   padding: var(--space-3);
+  /* **No `max-height`, and nothing scrolls.** The field wraps and grows
+     without bound and the modal simply grows with it.
+   *
+     A `max-height: 64vh` with `overflow-y: auto` was tried and removed the
+     same day. It made the popup a scroll container, which *clips* the
+     absolutely-positioned `#` autocomplete — so on a one-line todo the
+     menu was cut off at the popup's edge. Escaping that with fixed
+     positioning was worse again: the menu detached from the field and
+     landed in the far corner, over a modal now wearing scrollbars on both
+     axes. Every one of those problems is downstream of the cap, so the cap
+     is what goes. A todo long enough to fill the screen is not a case
+     worth breaking the common one for.
+     *(added and removed 2026-08-19, reported from use.)* */
   transition:
     opacity var(--duration-base) var(--ease),
     transform var(--duration-base) var(--ease);
@@ -52,7 +123,7 @@
   opacity: 0;
   /* Rises into place. Paired with the top placement it reads as the field
      arriving, not as a panel sliding in. */
-  transform: translateX(-50%) translateY(-0.5rem);
+  transform: translateY(-0.5rem);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -63,93 +134,14 @@
 
   .popup[data-starting-style],
   .popup[data-ending-style] {
-    transform: translateX(-50%);
+    transform: none;
   }
 }
 
-/* The input and its dimming layer, stacked in one box.
-
-   Two elements holding the same text at the same metrics: the shadow paints
-   the tokens grey, the input sits transparent on top so the caret, the
-   selection and every native editing gesture stay real. Any divergence in
-   font, padding or letter-spacing between the two shows up immediately as
-   drifting text, which is why both inherit from this parent rather than
-   setting their own. */
-.field {
-  position: relative;
-  display: grid;
-}
-
-.shadow,
-.input {
-  grid-area: 1 / 1;
-  font: inherit;
-  font-size: var(--text-lg);
-  line-height: 1.5;
-  padding: var(--space-2);
-  border: 0;
-  /* No wrapping in either layer: the input is a single line, and a shadow
-     that wrapped would slide out of register with it. */
-  white-space: pre;
-  overflow: hidden;
-}
-
-.shadow {
-  color: var(--ink);
-  pointer-events: none;
-  /* The caret is the input's; this layer must never show one. */
-  user-select: none;
-}
-
-.input {
-  background: transparent;
-  /* Transparent ink, visible caret: the shadow below is what you read. */
-  color: transparent;
-  caret-color: var(--ink);
-  outline: none;
-}
-
-.input::placeholder {
-  color: var(--faint);
-}
-
-/* A recognised token: *marked* text, not a chip.
-
-   It used to be dimmed to `--faint`, which read as "this part didn't
-   count" when the opposite is true — a mark is the parser telling you it
-   understood. Highlighting rather than removing, because removing the
-   token as you typed would fight the cursor (docs/specs/quick-add.md).
-   *(changed 2026-08-14 in review.)*
-
-   Deliberately square and unpadded. This span sits in the shadow layer,
-   and every glyph in it has to stay in exact register with the
-   transparent `<input>` above — an input cannot pad individual
-   characters, so padding here moves this layer's text and nothing else.
-   Measured in review: 4px padding plus 2px margin on three tokens put the
-   caret 34px from the text it belonged to, compounding with each token.
-   So the mark extends the token's own box and no further, which is also
-   why it wears no radius: a rounded corner on a box drawn tight to the
-   glyphs reads as a clipped chip rather than as a highlighter.
-
-   Tinted `--accent` at the same 12% the preview pills use: the mark and
-   the pill below it are two views of one token, so they share a hue. */
-.token {
-  color: var(--accent);
-  background: color-mix(in srgb, var(--accent) 12%, transparent);
-  /* Proud of the glyphs vertically only, so the mark reads as a stroke of
-     highlighter rather than a tight box around the letters.
-
-     Vertical *only* is what keeps adjacent tokens legible as separate
-     marks. A uniform 2px spread also grows the mark sideways, which is
-     enough to bridge the single space between two tokens: measured in
-     review, "tomorrow at 3pm #Chores p1" left 0.73px between marks and
-     read as one continuous block. Confining the spread to the y axis
-     leaves that space unmarked — 4.73px of clear ground — so three
-     tokens read as three. */
-  box-shadow:
-    0 2px 0 0 color-mix(in srgb, var(--accent) 12%, transparent),
-    0 -2px 0 0 color-mix(in srgb, var(--accent) 12%, transparent);
-}
+/* The field itself now lives in quick-add-field/, along with the mark
+   styling that used to sit here. It moved out with the shadow layer:
+   what was two elements pretending to be one is a single contenteditable,
+   and its rules belong beside it. *(moved 2026-08-19.)* */
 
 /* The `#` autocomplete's floating box.
 
@@ -162,10 +154,19 @@
    list are one control with one look (quick-add-modal.tsx).
    *(changed 2026-08-14, found in review.)* */
 .inlineMenu {
+  /* Absolutely positioned inside `.popup`, and anchored from a measurement
+     of the field rather than a fixed offset (quick-add-modal.tsx —
+     `menuAnchor`): the field wraps now, so its bottom edge moves and a
+     hardcoded `3.25rem` put the menu over the text the moment it did.
+   *
+     `absolute` rather than `fixed`. Fixed was tried while the popup had a
+     `max-height`, to escape the clipping that scroll container caused, and
+     it detached the menu from the field entirely — it landed in the corner
+     of the viewport. The popup no longer scrolls, so there is nothing to
+     escape from. *(fixed 2026-08-19, reported from use.)* */
   position: absolute;
-  /* Under the input, inset by the popup's padding so its edge lines up
-     with the field's text rather than the popup's border. */
-  top: calc(var(--space-3) + 3.25rem);
+  /* `top` is set inline from the measurement; `left` lines the menu's edge
+     up with the field's text rather than the popup's border. */
   left: var(--space-3);
   z-index: 1;
   list-style: none;
diff --git a/apps/client/src/todos/quick-add-modal/quick-add-modal.tsx b/apps/client/src/todos/quick-add-modal/quick-add-modal.tsx
index 841252d..b028cde 100644
--- a/apps/client/src/todos/quick-add-modal/quick-add-modal.tsx
+++ b/apps/client/src/todos/quick-add-modal/quick-add-modal.tsx
@@ -15,6 +15,8 @@ import { LuCircleHelp, LuPlus } from 'react-icons/lu'
 import { cx } from '../../styles/cx'
 import { fieldsToDue } from '../lib/due-fields'
 import { featuresOf, kindExplanation } from '../../lists/lib/list-kind'
+import { caretRect } from '../lib/editable-caret'
+import { QuickAddField } from '../quick-add-field/quick-add-field'
 import { Preview } from '../quick-add-preview/quick-add-preview'
 import {
   parseQuickAdd,
@@ -23,6 +25,16 @@ import {
 } from '../lib/quick-add'
 import styles from './quick-add-modal.module.css'
 
+/** Stable identity, so the closed field's `tokens` prop does not change
+ *  every render and re-run the field's draw effect. */
+const EMPTY_TOKENS: readonly QuickAddToken[] = []
+
+/** Matches `.inlineMenu`'s own `min-width`, for the fallback measurement. */
+const MENU_MIN_WIDTH = 128
+
+/** How close to the window's edge the autocomplete may sit. */
+const MENU_VIEWPORT_MARGIN = 8
+
 /**
  * Quick add (docs/specs/quick-add.md) — one field that creates a todo.
  *
@@ -72,7 +84,14 @@ export function QuickAddModal(props: QuickAddModalProps) {
   // one value rather than an `open` flag plus an index, so the two can
   // never disagree about whether a row is highlighted.
   const [activeIndex, setActiveIndex] = useState<number | null>(null)
-  const inputRef = useRef<HTMLInputElement>(null)
+  const inputRef = useRef<HTMLDivElement>(null)
+  // The autocomplete, so its real width can be measured for the clamp.
+  const menuRef = useRef<HTMLUListElement>(null)
+  // Flips once the menu is in the DOM, which is what re-runs the placement
+  // effect with a box it can actually measure. A ref alone cannot: writing
+  // to one does not re-render, so the first (unmeasurable) pass would be
+  // the only one.
+  const [menuMounted, setMenuMounted] = useState(false)
   const notesRef = useRef<HTMLTextAreaElement>(null)
   // Where to put the caret after a pill rewrites the text. A ref rather
   // than state: it is consumed once by the effect below and must not
@@ -138,7 +157,73 @@ export function QuickAddModal(props: QuickAddModalProps) {
       .map((hit) => hit.item)
   }, [listQuery, props.lists, fuse])
 
-  const menuOpen = suggestions.length > 0 && activeIndex !== null
+  // Whether the field holds focus. The autocomplete hangs off the token
+  // being typed, so it has no business being on screen when nobody is
+  // typing — it used to stay open over the controls below after a click
+  // elsewhere, because "is there a `#token`" was the only condition.
+  // *(fixed 2026-08-19, reported from use.)*
+  const [fieldFocused, setFieldFocused] = useState(true)
+
+  const menuOpen =
+    suggestions.length > 0 && activeIndex !== null && fieldFocused
+
+  // Where the autocomplete sits: under the caret, like any other
+  // autocomplete.
+  //
+  // Both coordinates come from the caret's own rect rather than the
+  // field's box. The offset started as a hardcoded `3.25rem` from the
+  // popup's top, which assumed a field exactly one line tall — once it
+  // wrapped, the menu landed over the text. Following the field's bottom
+  // edge fixed that but left the menu pinned to the left margin, far from
+  // the `#` being typed on a long line. The caret is what the menu is
+  // about, so it is what the menu hangs off.
+  // *(changed 2026-08-19, reported from use.)*
+  const [menuAt, setMenuAt] = useState<{ top: number; left: number } | null>(
+    null,
+  )
+
+  useLayoutEffect(() => {
+    if (!menuOpen) return
+    const field = inputRef.current
+    const popup = field?.closest<HTMLElement>(`.${styles['popup'] ?? ''}`)
+    const menu = menuRef.current
+    if (!field || !popup) return
+    const popupBox = popup.getBoundingClientRect()
+    const caret = caretRect(field)
+    // No caret rect — the selection is elsewhere, or collapsed in a way
+    // the browser reports as empty — so fall back to the field's own
+    // bottom-left, which is where the menu used to sit unconditionally.
+    const fieldBox = field.getBoundingClientRect()
+    const anchor = caret ?? { bottom: fieldBox.bottom, left: fieldBox.left }
+
+    // **Clamped against the viewport, using the menu's real width.**
+    //
+    // Two bugs in one line before this. The clamp was against the *popup*
+    // and used the menu's `min-width` rather than what it actually
+    // measures, so a menu with room to spare was still nudged left off the
+    // caret — while one near the right edge of a narrow window ran past
+    // the screen and took a horizontal scrollbar with it. The modal is not
+    // the boundary that matters; the window is, and a menu is free to
+    // overhang the modal's edge as long as it stays on screen.
+    //
+    // `menuRef` is measured rather than assumed: the box is sized by its
+    // contents (`width: max-content`), so its width depends on the longest
+    // list name and cannot be known ahead of time.
+    // *(fixed 2026-08-19, reported from use.)*
+    // The first pass runs before the menu is in the DOM, so it measures
+    // nothing and falls back to the minimum; `menuMounted` below re-runs
+    // this once the box exists and its real width can be read.
+    const width = menu?.getBoundingClientRect().width ?? MENU_MIN_WIDTH
+    const rightLimit = window.innerWidth - MENU_VIEWPORT_MARGIN - width
+    const left = Math.max(
+      MENU_VIEWPORT_MARGIN,
+      Math.min(anchor.left, rightLimit),
+    )
+    setMenuAt({
+      top: anchor.bottom - popupBox.top,
+      left: left - popupBox.left,
+    })
+  }, [menuOpen, text, menuMounted])
 
   // Reset when the modal opens, not when it closes: closing animates, and
   // clearing on the way out empties the field in front of the user.
@@ -169,15 +254,11 @@ export function QuickAddModal(props: QuickAddModalProps) {
     if (notesOpen) notesRef.current?.focus()
   }, [notesOpen])
 
-  // Put the caret where a pill asked for it, once the new value has been
-  // rendered. Setting `selectionStart` in the handler would apply it to
-  // the *old* value and be overwritten by React's own update.
-  useLayoutEffect(() => {
-    const at = caretTo.current
-    if (at === null) return
-    caretTo.current = null
-    inputRef.current?.setSelectionRange(at, at)
-  }, [text])
+  // The caret a pill asks for is applied by the field itself, in the same
+  // layout effect that draws the marks — the two have to happen together
+  // or the caret is placed into a DOM that is about to be replaced.
+  // *(moved into quick-add-field 2026-08-19; it was a `setSelectionRange`
+  // here while the field was an `<input>`.)*
 
   // Grow and shrink the notes field to fit what is in it.
   //
@@ -244,7 +325,17 @@ export function QuickAddModal(props: QuickAddModalProps) {
     // Replace the partial token with the full name, and leave a trailing
     // space so typing continues rather than extending the token.
     const start = text.lastIndexOf('#')
-    setText(`${text.slice(0, start)}#${list.displayName} `)
+    const next = `${text.slice(0, start)}#${list.displayName} `
+    setText(next)
+    // Caret after the trailing space, so typing carries on from the name
+    // just chosen. The pill path below has always done this; this one did
+    // not, and got away with it while the field was an `<input>` whose
+    // caret the browser kept at the end of the value on its own. A
+    // contenteditable is redrawn around the new token instead, which left
+    // the caret stranded wherever it had been — arrow keys and clicking
+    // could not recover it, though `⌘→` could.
+    // *(fixed 2026-08-19, reported from use.)*
+    caretTo.current = next.length
     setActiveIndex(null)
     inputRef.current?.focus()
   }
@@ -339,7 +430,7 @@ export function QuickAddModal(props: QuickAddModalProps) {
     props.onOpenChange(false)
   }
 
-  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
     // Ctrl+N/P move the selection, matching readline — the hands stay on
     // the home row through an interaction whose whole point is speed.
     // Arrows do the same, so nothing has to be learned first
@@ -384,7 +475,14 @@ export function QuickAddModal(props: QuickAddModalProps) {
     // the keyboard path is the same deliberate choice the pointer makes.
     // *(changed 2026-08-14, found in review.)*
 
-    if (event.key === 'Enter') {
+    // `!shiftKey`, matching the notes field below. Shift+Enter belongs to
+    // notes (docs/specs/quick-add.md — the footer lists it), and this
+    // branch used to catch it too, so Shift+Enter from the summary
+    // submitted the todo. The old `<input>` hid it: the field cleared as
+    // the modal closed, so it read as "the shortcut did nothing" rather
+    // than as an accidental submit.
+    // *(fixed 2026-08-19, surfaced by the wrapping field's own e2e test.)*
+    if (event.key === 'Enter' && !event.shiftKey) {
       event.preventDefault()
       submit()
     }
@@ -394,46 +492,52 @@ export function QuickAddModal(props: QuickAddModalProps) {
     <Dialog.Root open={props.open} onOpenChange={props.onOpenChange}>
       <Dialog.Portal>
         <Dialog.Backdrop className={styles['backdrop']} />
-        <Dialog.Popup className={styles['popup']} finalFocus={props.triggerRef}>
-          {/* Named for screen readers without drawing a heading: the
+        {/* A positioning layer between the backdrop and the popup, so the
+            modal can rise as the field grows rather than running off the
+            bottom of the screen (quick-add-modal.module.css —
+            `.popupLayer`). *(added 2026-08-19.)* */}
+        <div className={styles['popupLayer']}>
+          {/* Collapsible spacer: holds the popup at the launcher height and
+              gives that space back as it grows, so a tall modal rises
+              instead of running off the bottom. */}
+          <div className={styles['popupSpacer']} />
+          <Dialog.Popup
+            className={styles['popup']}
+            finalFocus={props.triggerRef}
+          >
+            {/* Named for screen readers without drawing a heading: the
               field's own placeholder is the visible label, and a title bar
               would make this a form again. */}
-          <Dialog.Title className={styles['srOnly']}>Add a todo</Dialog.Title>
-          <div className={styles['field']}>
-            {/* The dimming layer sits *under* a transparent input, so the
-                caret and selection stay native while recognised tokens are
-                greyed. Both are the same text at the same metrics, so they
-                line up exactly. */}
-            {/* Emptied once closed. The text is only cleared on *open* (see
-                the reset effect — clearing on the way out would blank the
-                field in front of you mid-animation), which left the closed
-                popup holding a copy of the last summary in the DOM. It is
-                `aria-hidden`, but that hides it from the accessibility tree
-                only: a plain DOM text query still finds it, so a test —
-                and anything else reading text — saw the same summary twice,
-                once on the row and once here. The input above keeps its
-                value either way, so nothing visible changes.
-                *(added 2026-08-14.)* */}
-            <div className={styles['shadow']} aria-hidden="true">
-              {props.open ? renderDimmed(text, parsed.tokens) : null}
-            </div>
-            <input
-              ref={inputRef}
-              className={styles['input']}
-              value={text}
-              onChange={(event) => setText(event.target.value)}
+            <Dialog.Title className={styles['srOnly']}>Add a todo</Dialog.Title>
+            {/* One element, marks and all: what you type into *is* what
+              shows the marks, so a recognised token can be padded. It used
+              to be a transparent `<input>` over a shadow layer holding the
+              same text, which is the arrangement that made padding
+              impossible (docs/specs/quick-add.md — the mark is padded
+              because the field is a contenteditable).
+              *(changed 2026-08-19.)* */}
+            <QuickAddField
+              fieldRef={inputRef}
+              // Emptied once closed. The text is cleared on *open* rather
+              // than on close, because clearing on the way out blanks the
+              // field in front of you mid-animation — but the popup stays
+              // mounted through that animation, and this field's contents
+              // are now real text nodes rather than an `<input>`'s value.
+              // So a plain text query finds the summary twice: once on the
+              // row it just created, once still sitting here. The shadow
+              // layer this replaced had the same problem and the same fix.
+              // *(added 2026-08-19: it broke four e2e specs with "resolved
+              // to 2 elements".)*
+              value={props.open ? text : ''}
+              tokens={props.open ? parsed.tokens : EMPTY_TOKENS}
+              caretTo={caretTo}
+              onChange={setText}
               onKeyDown={onKeyDown}
+              onFocusChange={setFieldFocused}
               placeholder={example}
-              aria-label="Add a todo"
-              autoComplete="off"
-              autoCorrect="off"
-              spellCheck={false}
-              // eslint-disable-next-line jsx-a11y/no-autofocus
-              autoFocus
             />
-          </div>
 
-          {/* The `#` autocomplete, floating over the modal rather than
+            {/* The `#` autocomplete, floating over the modal rather than
               sitting in its flow.
 
               It used to be a block between the input and the notes row,
@@ -443,41 +547,52 @@ export function QuickAddModal(props: QuickAddModalProps) {
               overlays instead, and it wears the same popup and row styles
               the pill menus use so the two ways of choosing a list look
               like one control. *(changed 2026-08-14, found in review.)* */}
-          {menuOpen && (
-            <ul className={cx(styles['menuPopup'], styles['inlineMenu'])}>
-              {suggestions.map((list, index) => (
-                <li key={list.id}>
-                  <button
-                    type="button"
-                    className={cx(
-                      styles['menuItem'],
-                      index === activeIndex && styles['menuItemActive'],
-                    )}
-                    // Pointer-down rather than click: the input must not
-                    // lose focus before the choice is applied.
-                    onMouseDown={(event) => {
-                      event.preventDefault()
-                      accept(list)
-                    }}
-                  >
-                    <span
+            {menuOpen && (
+              <ul
+                ref={(node) => {
+                  menuRef.current = node
+                  setMenuMounted(node !== null)
+                }}
+                className={cx(styles['menuPopup'], styles['inlineMenu'])}
+                style={
+                  menuAt === null
+                    ? undefined
+                    : { top: menuAt.top, left: menuAt.left }
+                }
+              >
+                {suggestions.map((list, index) => (
+                  <li key={list.id}>
+                    <button
+                      type="button"
                       className={cx(
-                        styles['dot'],
-                        list.color === undefined && styles['dotEmpty'],
+                        styles['menuItem'],
+                        index === activeIndex && styles['menuItemActive'],
                       )}
-                      {...(list.color === undefined
-                        ? {}
-                        : { style: { background: list.color } })}
-                      aria-hidden="true"
-                    />
-                    {list.displayName}
-                  </button>
-                </li>
-              ))}
-            </ul>
-          )}
-
-          {/* Notes: the one thing the grammar does not cover, because prose
+                      // Pointer-down rather than click: the input must not
+                      // lose focus before the choice is applied.
+                      onMouseDown={(event) => {
+                        event.preventDefault()
+                        accept(list)
+                      }}
+                    >
+                      <span
+                        className={cx(
+                          styles['dot'],
+                          list.color === undefined && styles['dotEmpty'],
+                        )}
+                        {...(list.color === undefined
+                          ? {}
+                          : { style: { background: list.color } })}
+                        aria-hidden="true"
+                      />
+                      {list.displayName}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            )}
+
+            {/* Notes: the one thing the grammar does not cover, because prose
               does not belong on a line with tokens in it
               (docs/specs/quick-add.md — the full form).
 
@@ -486,63 +601,63 @@ export function QuickAddModal(props: QuickAddModalProps) {
               "go to the next thing", so the field it reveals is the next
               thing rather than a new gesture to learn — and the button is
               the same affordance for a finger. */}
-          {notesOpen ? (
-            <textarea
-              ref={notesRef}
-              className={styles['notes']}
-              value={notes}
-              onChange={(event) => setNotes(event.target.value)}
-              onKeyDown={(event) => {
-                // Enter submits from here too, so notes never cost a reach
-                // for the mouse. Shift+Enter is a newline, which is the
-                // convention every message box has taught — and is
-                // explained in the footer's help popover rather than by a
-                // line under this field, which was a second permanent
-                // sentence for a rule most people already know.
-                // *(moved 2026-08-14.)*
-                if (event.key === 'Enter' && !event.shiftKey) {
-                  event.preventDefault()
-                  submit()
-                }
-              }}
-              placeholder="Notes"
-              aria-label="Notes"
-              // One line to start; the effect above grows it from there.
-              // `rows={2}` held an empty field two lines tall, which is
-              // the reserved space an auto-growing field exists to avoid.
-              rows={1}
+            {notesOpen ? (
+              <textarea
+                ref={notesRef}
+                className={styles['notes']}
+                value={notes}
+                onChange={(event) => setNotes(event.target.value)}
+                onKeyDown={(event) => {
+                  // Enter submits from here too, so notes never cost a reach
+                  // for the mouse. Shift+Enter is a newline, which is the
+                  // convention every message box has taught — and is
+                  // explained in the footer's help popover rather than by a
+                  // line under this field, which was a second permanent
+                  // sentence for a rule most people already know.
+                  // *(moved 2026-08-14.)*
+                  if (event.key === 'Enter' && !event.shiftKey) {
+                    event.preventDefault()
+                    submit()
+                  }
+                }}
+                placeholder="Notes"
+                aria-label="Notes"
+                // One line to start; the effect above grows it from there.
+                // `rows={2}` held an empty field two lines tall, which is
+                // the reserved space an auto-growing field exists to avoid.
+                rows={1}
+              />
+            ) : (
+              <button
+                type="button"
+                className={styles['notesTrigger']}
+                // Activating this *is* the deliberate act — by click, tap,
+                // Enter or Space — so focus follows into the field it
+                // reveals. Tab alone only moves here; it does not fire.
+                // The focusing itself is an effect below, not a callback:
+                // see `notesOpen`.
+                onClick={() => setNotesOpen(true)}
+              >
+                <LuPlus aria-hidden="true" size={12} />
+                Notes
+              </button>
+            )}
+
+            <Preview
+              parsed={parsed}
+              list={targetList}
+              lists={props.lists}
+              noDueDates={noDueDates}
+              dueDatesOffList={dueDatesOffList}
+              now={now}
+              needsList={needsList}
+              onSetDate={setDate}
+              onSetTime={setTime}
+              onSetList={setList}
+              onSetPriority={setPriority}
             />
-          ) : (
-            <button
-              type="button"
-              className={styles['notesTrigger']}
-              // Activating this *is* the deliberate act — by click, tap,
-              // Enter or Space — so focus follows into the field it
-              // reveals. Tab alone only moves here; it does not fire.
-              // The focusing itself is an effect below, not a callback:
-              // see `notesOpen`.
-              onClick={() => setNotesOpen(true)}
-            >
-              <LuPlus aria-hidden="true" size={12} />
-              Notes
-            </button>
-          )}
-
-          <Preview
-            parsed={parsed}
-            list={targetList}
-            lists={props.lists}
-            noDueDates={noDueDates}
-            dueDatesOffList={dueDatesOffList}
-            now={now}
-            needsList={needsList}
-            onSetDate={setDate}
-            onSetTime={setTime}
-            onSetList={setList}
-            onSetPriority={setPriority}
-          />
-
-          {/* The footer: what went wrong, or what the keys do, and the
+
+            {/* The footer: what went wrong, or what the keys do, and the
               button.
 
               **A message, not just the marked pill.** Enter used to move
@@ -553,24 +668,24 @@ export function QuickAddModal(props: QuickAddModalProps) {
               **The hint is a line, not the placeholder**, because a
               placeholder is gone by the time you have typed enough to want
               a second line — exactly when Shift+Enter matters. */}
-          <div className={styles['footer']}>
-            {/* Everything true at once, rather than one message replacing
+            <div className={styles['footer']}>
+              {/* Everything true at once, rather than one message replacing
                 another. "Enter to add" stays true while notes has focus and
                 while the list is missing; swapping it out read as the rule
                 having *changed* when in fact something was added to it.
                 So the Shift line joins it where it applies, and the error
                 sits above both rather than in place of them.
                 *(changed 2026-08-14: these took turns.)* */}
-            <div className={styles['footerMessages']}>
-              {needsList && (
-                <p
-                  className={cx(styles['note'], styles['noteError'])}
-                  role="alert"
-                >
-                  Choose a list for this todo
-                </p>
-              )}
-              {/* The keyboard rules, behind a popover rather than printed
+              <div className={styles['footerMessages']}>
+                {needsList && (
+                  <p
+                    className={cx(styles['note'], styles['noteError'])}
+                    role="alert"
+                  >
+                    Choose a list for this todo
+                  </p>
+                )}
+                {/* The keyboard rules, behind a popover rather than printed
                   in the footer.
 
                   Two permanent sentences of instruction sat under a modal
@@ -579,74 +694,75 @@ export function QuickAddModal(props: QuickAddModalProps) {
                   "Keyboard" trigger keeps the answer one click away for
                   the day you want it and silent afterwards.
                   *(changed 2026-08-14.)* */}
-              <Popover.Root>
-                <Popover.Trigger className={styles['helpTrigger']}>
-                  <LuCircleHelp aria-hidden="true" size={13} />
-                  Keyboard
-                </Popover.Trigger>
-                <Popover.Portal>
-                  {/* Below the trigger, left edges aligned. It opened
+                <Popover.Root>
+                  <Popover.Trigger className={styles['helpTrigger']}>
+                    <LuCircleHelp aria-hidden="true" size={13} />
+                    Keyboard
+                  </Popover.Trigger>
+                  <Popover.Portal>
+                    {/* Below the trigger, left edges aligned. It opened
                       upwards, which put it over the pills and the input —
                       the things it is describing. Downwards it covers only
                       the page behind the modal. *(changed 2026-08-14.)* */}
-                  <Popover.Positioner
-                    className={styles['menuPositioner']}
-                    side="bottom"
-                    align="start"
-                    sideOffset={6}
-                  >
-                    <Popover.Popup className={styles['helpPopup']}>
-                      {/* Real keycaps, composed from the shared component's
+                    <Popover.Positioner
+                      className={styles['menuPositioner']}
+                      side="bottom"
+                      align="start"
+                      sideOffset={6}
+                    >
+                      <Popover.Popup className={styles['helpPopup']}>
+                        {/* Real keycaps, composed from the shared component's
                           classes (`helpCap`) so a key here is drawn like a
                           key everywhere else in the app. */}
-                      <dl className={styles['helpList']}>
-                        <dt>
-                          <kbd className={styles['helpCap']}>Enter</kbd>
-                        </dt>
-                        <dd>Add the todo</dd>
-                        <dt>
-                          <kbd className={styles['helpCap']}>Shift</kbd> +{' '}
-                          <kbd className={styles['helpCap']}>Enter</kbd>
-                        </dt>
-                        <dd>A new line, in notes</dd>
-                        <dt>
-                          <kbd className={styles['helpCap']}>Esc</kbd>
-                        </dt>
-                        <dd>Close without adding</dd>
-                      </dl>
-                    </Popover.Popup>
-                  </Popover.Positioner>
-                </Popover.Portal>
-              </Popover.Root>
-            </div>
-            {/* Cancel, then Add — the pair a dialog is expected to end
+                        <dl className={styles['helpList']}>
+                          <dt>
+                            <kbd className={styles['helpCap']}>Enter</kbd>
+                          </dt>
+                          <dd>Add the todo</dd>
+                          <dt>
+                            <kbd className={styles['helpCap']}>Shift</kbd> +{' '}
+                            <kbd className={styles['helpCap']}>Enter</kbd>
+                          </dt>
+                          <dd>A new line, in notes</dd>
+                          <dt>
+                            <kbd className={styles['helpCap']}>Esc</kbd>
+                          </dt>
+                          <dd>Close without adding</dd>
+                        </dl>
+                      </Popover.Popup>
+                    </Popover.Positioner>
+                  </Popover.Portal>
+                </Popover.Root>
+              </div>
+              {/* Cancel, then Add — the pair a dialog is expected to end
                 with, and the only visible way out of this one. There is no
                 header and so no ✕, which is deliberate (a title bar would
                 make this a form again), but that left Escape and clicking
                 the scrim as the sole exits — neither of which is visible,
                 and Escape is not reachable on a phone at all.
                 *(added 2026-08-14, on review.)* */}
-            {/* The two actions travel together on the right. The footer
+              {/* The two actions travel together on the right. The footer
                 is `space-between` — the hint or error on the left, the
                 actions on the right — so without this group Cancel would
                 be pushed into the middle of the row, reading as unrelated
                 to the button it belongs with. */}
-            <div className={styles['footerActions']}>
-              <Dialog.Close className={styles['cancel']}>Cancel</Dialog.Close>
-              {/* Enter still submits — this is the same action, reachable
+              <div className={styles['footerActions']}>
+                <Dialog.Close className={styles['cancel']}>Cancel</Dialog.Close>
+                {/* Enter still submits — this is the same action, reachable
                   by a finger. Not disabled when the form is incomplete: a
                   dead button explains nothing, while pressing it produces
                   the message above. *(added 2026-08-14.)* */}
-              <button
-                type="button"
-                className={styles['submit']}
-                onClick={submit}
-              >
-                Add todo
-              </button>
+                <button
+                  type="button"
+                  className={styles['submit']}
+                  onClick={submit}
+                >
+                  Add todo
+                </button>
+              </div>
             </div>
-          </div>
-        </Dialog.Popup>
+          </Dialog.Popup>
+        </div>
       </Dialog.Portal>
     </Dialog.Root>
   )
@@ -718,23 +834,3 @@ function activeListQuery(text: string): string | null {
  * that duplicates the user's own words is worth one guard.
  * *(hardened 2026-08-14, found in review.)*
  */
-function renderDimmed(
-  text: string,
-  tokens: readonly { start: number; end: number }[],
-) {
-  const parts: React.ReactNode[] = []
-  let cursor = 0
-  for (const [index, token] of tokens.entries()) {
-    if (token.end <= cursor) continue
-    const start = Math.max(token.start, cursor)
-    if (start > cursor) parts.push(text.slice(cursor, start))
-    parts.push(
-      <span key={index} className={styles['token']}>
-        {text.slice(start, token.end)}
-      </span>,
-    )
-    cursor = token.end
-  }
-  parts.push(text.slice(cursor))
-  return parts
-}
diff --git a/docs/specs/quick-add.md b/docs/specs/quick-add.md
index 52abfcb..6c9d5f4 100644
--- a/docs/specs/quick-add.md
+++ b/docs/specs/quick-add.md
@@ -140,18 +140,22 @@ The same applies to the list pill, which writes the token the same way.
 
 ## What the modal looks like
 
-A launcher, in the Alfred/Raycast sense: **one prominent input, a row of
+A launcher, in the Alfred/Raycast sense: **one prominent field, a row of
 pills under it showing what the parse produced, and a footer.**
 
 ```
 ┌──────────────────────────────────────────────┐
-│  Clean the gutters tomorrow at 3pm #chores   │
+│  Clean the front gutters and downpipes       │
+│  before the rain tomorrow at 3pm #chores p1  │
 │  + Notes                                     │
 │  [● Chores ▾] [Tomorrow ▾] [3:00pm ▾] [High ▾]│
 │  ⓘ Keyboard          [ Cancel ] [ Add todo ]│
 └──────────────────────────────────────────────┘
 ```
 
+The field wraps and grows downward; everything below it moves down with
+it.
+
 **The footer carries the only two visible ways out.** There is no header,
 and so no ✕ — a title bar would make this a form again — which left
 Escape and clicking the scrim as the only exits. Neither is visible, and
@@ -183,27 +187,61 @@ type. Removing them would fight the cursor; marking shows what has been
 understood without moving anything.
 
 They are *marked text*, not chips: a tinted `--accent` background at the
-same 12% the preview pills use, square, and with no padding of their own.
-*(changed 2026-08-14: they were dimmed to `--faint`, which read as "this
-part didn't count" when the opposite is true — a mark is the parser
-saying it understood.)*
-
-The mark cannot be padded, and this is a hard constraint rather than a
-preference. What you type into is a real `<input>`; the marks live in a
-shadow layer beneath it holding the same text at the same metrics, and an
-`<input>` cannot pad individual characters. Padding the shadow's tokens
-therefore moves that layer's text and nothing else — measured in review,
-4px of padding plus 2px of margin across three tokens put the caret 34px
-from the glyphs it belonged to, worsening with each token. So the mark is
-drawn with a `box-shadow` spread, which paints outside the inline box
-without contributing layout.
-
-That spread is **vertical only**. A uniform spread also grows the mark
-sideways by enough to bridge the single space between two tokens: with
-one, `tomorrow at 3pm #Chores p1` left 0.73px between marks and read as a
-single continuous block. Confining it to the y axis leaves the spaces
-unmarked — 4.73px of clear ground — so adjacent tokens read as separate
-marks while the text stays in exact register. *(added 2026-08-14.)*
+same 12% the preview pills use, padded by 2px and 5px and rounded to
+`--radius-sm`. *(changed 2026-08-14: they were dimmed to `--faint`, which
+read as "this part didn't count" when the opposite is true — a mark is the
+parser saying it understood.)*
+
+**The mark is padded because the field is a contenteditable.** It was
+square and unpadded for as long as the field was an `<input>` with a
+shadow layer beneath it, because that arrangement cannot pad a token
+without moving the layer it lives in — the drift was measured at 34px
+across three tokens then, and 52px when re-measured against a wrapping
+`<textarea>` in 2026-08-19. That is a property of the shadow layer rather
+than of the `<input>`, so it survived every variation of the two-layer
+approach and only went away when the second layer did. The marks are now
+real elements in the one element you type into, so padding them moves
+nothing. They carry `box-decoration-break: clone` so a mark broken across
+a line wrap is drawn complete on both lines rather than losing its right
+edge on the first. *(changed 2026-08-19.)*
+
+Rounding stops at `--radius-sm`. A full `--radius-full` was drawn and
+rejected: it makes the mark the same shape as the preview pill below it,
+and a pill-shaped thing sitting in a line of prose reads as an object you
+could pick up and move, which this is not — it is a run of your own text
+that the parser has understood. *(added 2026-08-19.)*
+
+### The field wraps, and grows
+
+**A long todo wraps onto as many lines as it needs.** The field started as
+a single line that scrolled sideways, and that was wrong in a way that got
+worse the more the feature was used: text ran off the left edge with no
+scrollbar to say so and no way back except walking the caret through it.
+
+**The pills are what made it acute.** They rewrite the text as the single
+source of truth ([the pills are controls](#the-pills-are-controls-and-they-edit-the-text)),
+so choosing "Chores" from a menu can lengthen the line by more than it had
+to spare — the line grew without a keystroke, and the words that fell off
+the front were ones you never chose to hide. A control that hides your text
+as a side effect of doing what you asked is the part that could not stand.
+*(fixed 2026-08-19, reported from use.)*
+
+**The field itself is unbounded and the modal is what yields.** The field
+grows with its content and never scrolls, so no line of a todo is ever out
+of view; the popup takes a `max-height` of `64vh` and scrolls internally
+once the whole modal would otherwise outgrow the viewport. Bounding the
+field instead was drawn and rejected — a cap on the field puts the text
+back behind a scroll edge, which is the thing being fixed, and it does it
+at exactly the length where the todo is hardest to read. Bounding the modal
+moves the scroll to the frame around the text, where the pills and the two
+buttons stay reachable at any length and short todos, which is nearly all
+of them, never see a scrollbar at all.
+
+Wrapping is why the field is a contenteditable rather than a `<textarea>`.
+A textarea wraps perfectly well, and would have been the smaller change,
+but it keeps the shadow layer and therefore keeps the unpadded mark: both
+were measured, and the textarea drifted 52px. Wrapping and a padded mark
+are one change or neither.
 
 **The placeholder is a different example each time it opens**, drawn from
 a list of about eighteen covering the whole grammar between them — bare
@@ -252,6 +290,98 @@ typing. A picker answers every date.
 and is not readable against a single row — and these menus are opened to
 *check* a value as often as to change one.
 
+### The summary has a length, and the modal has a place
+
+**500 characters.** A summary is a *title*; prose belongs in the notes
+field below it. Without a bound, the cost of every keystroke grew with the
+text — the whole line is re-parsed and the marks can be redrawn — measured
+at ~12ms per keystroke at 4,000 characters on a fast machine, so several
+times that on an ordinary one, which is what holding `⌘V` felt like. A
+paste past the limit is **truncated rather than refused**: pasting a
+passage into a title is a slip worth softening, and the first 500
+characters are the part that was wanted. *(added 2026-08-19, reported from
+use.)*
+
+**The modal rises rather than scrolling.** It sits at the launcher height
+while it fits, and moves up as the field grows so the pills and the two
+buttons stay on screen; only a modal taller than the whole viewport
+scrolls, and then the layer around it scrolls rather than the box itself.
+
+A `max-height` with an inner scrollbar was tried first and was wrong in
+three ways at once: it clipped the `#` autocomplete, which is absolutely
+positioned inside the popup; escaping that with fixed positioning detached
+the menu from the field entirely; and it put a scrollbar on the common
+case to serve a rare one. The placement is a collapsible spacer in a flex
+layer — it asks for the launcher height and gives it back as the box
+grows — so there is no measurement to keep in sync and nothing to
+recompute on resize. *(added 2026-08-19, reported from use.)*
+
+### What a contenteditable costs, and what it does not
+
+A contenteditable hands you the rendering you want and takes back the
+editing behaviour an `<input>` gives for free. Each of these is owned code
+with a test behind it rather than something the platform does.
+
+**Undo is preserved by not rewriting the DOM.** Measured 2026-08-19:
+replacing `innerHTML` empties the browser's undo stack, so `⌘Z` after a
+mark re-render does nothing at all, while ordinary typing, typing *inside*
+a mark, and direct text-node writes all leave undo working. The rule that
+falls out of that is **re-render the marks only when the set of tokens
+changes**, never per keystroke. Most keystrokes change no token — typing
+the middle of a word neither creates nor destroys a mark — so the DOM is
+untouched for the great majority of edits and undo behaves natively.
+
+**"Changed" means the marked words, not their offsets.** The first cut
+compared each token's `start` and `end`, which looks equivalent and is
+not: typing anywhere *before* a token shifts every later token along, so a
+keystroke in the middle of the summary counted as a change and redrew. The
+rare case had become the common one, and the guarantee was worth nothing.
+Comparing the marked text instead is what makes the early return fire —
+verified in the browser by tagging the mark elements and typing: the same
+nodes survive. *(fixed 2026-08-19, found in use.)*
+
+**The exception is honest rather than hidden**: the one keystroke that
+completes or breaks a token (the `m` that turns `3p` into `3pm`) does
+re-render, and loses its own undo entry. `⌘Z` from there undoes the
+keystroke before it. This is a real if narrow regression against the old
+`<input>`, it is the residue of a trade made deliberately, and it is
+written down here so the next person to find it knows it was chosen and
+not missed.
+
+**Enter still submits and `Shift+Enter` still belongs to notes.** A
+contenteditable inserts a line break on Enter by default, so both are
+intercepted. The field wrapping does not make it a multi-line *input*: a
+todo summary is one line of text that happens to be drawn on several, and
+there is no key that puts a newline in it.
+
+Writing the test for that found a bug older than this change: the Enter
+branch did not check `shiftKey`, so **Shift+Enter from the summary
+submitted the todo**. The `<input>` hid it — the field cleared as the
+modal closed, so it read as a shortcut that did nothing rather than as an
+accidental submit — and the wrapping field, which keeps its text visible
+through the close, is what made it obvious. *(fixed 2026-08-19.)*
+
+**Paste is forced to plain text.** A contenteditable pastes HTML by
+default, with the source's fonts, colours and markup intact — paste a
+sentence from a web page into an unguarded one and you get its stylesheet.
+The handler takes `text/plain` and inserts that.
+
+**The caret is addressed by text offset**, the same unit `replaceToken`
+already works in, translated to and from a DOM `Range` at the edges. The
+`<input>`'s `setSelectionRange` has no equivalent here. Verified that an
+offset survives a mark re-render unchanged (20 → 20).
+
+**The placeholder is drawn by CSS** on the empty state, since
+`::placeholder` applies to form controls only.
+
+**Focus on open is explicit.** `autoFocus` is a form-control attribute and
+does nothing here, so without an effect the modal opened with focus still
+on the button that opened it and the first thing typed went nowhere.
+Likewise a caret a pill asks for is placed *and* focused: the menu that
+requested it is still closing and holds focus for a frame after the modal
+calls `focus()`, so gating on "is the field focused right now" dropped the
+caret to the start of the line. *(both found in the browser 2026-08-19.)*
+
 ### Notes
 
 The grammar deliberately does not cover notes: prose does not belong on a
@@ -262,10 +392,12 @@ It is collapsed until asked for, so the common case is still one field.
 deliberate act, and Tab means "move to the next control", not "create one".
 Activating it, by pointer or by Enter/Space, focuses the field.
 
-The field is styled as the summary input's smaller sibling — no border, no
+The field is styled as the summary field's smaller sibling — no border, no
 focus ring, transparent — because two framed fields stacked would be the
 form this modal exists to replace. It **grows and shrinks with its
-content** and has no resize handle.
+content** and has no resize handle. It stays an ordinary `<textarea>`:
+notes are prose with nothing to mark in them, so none of the reasons the
+summary field gave up being a form control apply here.
 
 ### The footer
 
@@ -381,6 +513,14 @@ became a todo called "Do the thing", due never.
 have set. Leaving the words in the title is the honest outcome: the todo
 says what you typed. *(fixed 2026-08-17, reported from use.)*
 
+**A day and a time can come from different phrases.** "Call them next
+week when 3pm" sets both, because the day and the time are tracked
+separately and the first of each wins. Only the first chrono match in a
+segment used to be read, so the second was discarded before either could
+be taken from it — the line above set the week, dropped the time, and left
+"3pm" in the summary describing a due the todo did not have.
+*(fixed 2026-08-19, reported from use.)*
+
 **Offline** changes nothing. The parse is entirely client-side, and the
 created todo queues through the outbox like any other
 ([sync-and-offline](./sync-and-offline.md)).
@@ -424,9 +564,21 @@ preset.)*
 - `todos/quick-add-preview/` — the interpretation line, which arranges
   those pills and says what each does when chosen.
 - `todos/lib/quick-add-labels.ts` — the date and time label formatters.
+- `todos/quick-add-field/` — the editable itself: the contenteditable, the
+  mark rendering, and the key and paste handling that a form control would
+  otherwise have given for free. It takes a string and calls back with a
+  string, and knows nothing about the grammar, the pills or the modal.
+- `todos/lib/editable-caret.ts` — the two pure functions that convert
+  between a caret offset in the plain text and a DOM `Range`, plus the
+  predicate that decides whether a token set has changed enough to warrant
+  a re-render. Pure and DOM-only, so they are unit-testable without React.
 
 *(split 2026-08-15: `quick-add-modal.tsx` had reached 1257 lines, four
-times the ~300-line soft ceiling in CLAUDE.md.)*
+times the ~300-line soft ceiling in CLAUDE.md. Split again 2026-08-19: the
+field came out as its own component rather than growing the modal back
+past the ceiling it had just been brought under, and because an editing
+surface with its own keyboard, paste and caret rules is a second concern
+by any reading.)*
 - `todos/add-todo-trigger/` — the in-list ghost row, which opens the same
   modal with `defaultListId` set.
 
@@ -448,6 +600,14 @@ depends on the day it runs ([testing](./testing.md)):
 - `isCertain('hour')` maps to the right due kind, all-day vs timed;
 - an empty summary after stripping is refused.
 
+The caret and re-render helpers are unit tested too, against a real DOM
+rather than a mock, since what is being asserted *is* DOM behaviour: an
+offset survives a round trip through a `Range` and back, an offset inside
+a mark resolves into that mark's text node rather than beside it, and the
+re-render predicate says no for a keystroke that leaves the token set
+alone and yes for one that changes it. That predicate is what keeps undo
+native, so it is the piece worth pinning down.
+
 E2E owns the wiring, not the grammar — `e2e/tests/quick-add.spec.ts`, one
 spec rather than a re-enumeration of the parser cases:
 
@@ -459,7 +619,13 @@ spec rather than a re-enumeration of the parser cases:
 - notes are deliberate — they do not open by tabbing;
 - the preview pills use the annotation face, not the reader's serif;
 - the pill menus and the help popover are styled and paint above the
-  modal.
+  modal;
+- **a long line wraps instead of scrolling away**: the field is taller
+  than one line, the first word typed is still on screen, and the buttons
+  are still clickable. This is the regression the whole change exists to
+  prevent, and it is asserted on geometry rather than on a class name;
+- Enter submits from a wrapped line rather than adding a fifth line to it,
+  and pasted text arrives as plain text.
 
 That last one is regression coverage, not a design assertion. Eight
 classes were once deleted from the stylesheet by a bad edit and nothing
diff --git a/e2e/tests/mobile.spec.ts b/e2e/tests/mobile.spec.ts
index b2c7af6..0196c75 100644
--- a/e2e/tests/mobile.spec.ts
+++ b/e2e/tests/mobile.spec.ts
@@ -64,7 +64,16 @@ test('mobile: a modal opened from the drawer stacks above it', async ({
 }) => {
   await login(page)
 
-  /** Every painted full-viewport layer, as z-index, lowest first. */
+  /**
+   * Every painted full-viewport layer, as z-index, lowest first.
+   *
+   * `pointer-events` is what separates a scrim from a positioner: quick
+   * add's popup sits inside a full-viewport flex layer that exists only to
+   * place it (quick-add-modal.module.css — `.popupLayer`), which paints
+   * nothing and lets every click through to the scrim beneath. Counting it
+   * would make an overlay stack of two look like three.
+   * *(refined 2026-08-19, when that layer was added.)*
+   */
   const layers = () =>
     page.evaluate(() =>
       [...document.querySelectorAll('body *')]
@@ -73,7 +82,8 @@ test('mobile: a modal opened from the drawer stacks above it', async ({
           return (
             style.position === 'fixed' &&
             style.inset === '0px' &&
-            style.zIndex !== 'auto'
+            style.zIndex !== 'auto' &&
+            style.pointerEvents !== 'none'
           )
         })
         .map((element) => Number(getComputedStyle(element).zIndex))
diff --git a/e2e/tests/quick-add.spec.ts b/e2e/tests/quick-add.spec.ts
index 299549c..1a769b6 100644
--- a/e2e/tests/quick-add.spec.ts
+++ b/e2e/tests/quick-add.spec.ts
@@ -32,6 +32,25 @@ const modal = (page: Page) => page.getByRole('dialog', { name: 'Add a todo' })
 /** Its one text field. */
 const field = (page: Page) => page.getByRole('textbox', { name: 'Add a todo' })
 
+/**
+ * Assert the field's text.
+ *
+ * `toHaveValue` does not work here: the field is a contenteditable, not a
+ * form control, so it has no `value` — Playwright fails with "Not an input
+ * element". Its text is real text nodes, which is also why the marks can be
+ * padded (docs/specs/quick-add.md). *(changed 2026-08-19.)*
+ */
+async function expectFieldText(
+  page: Page,
+  expected: string | RegExp,
+): Promise<void> {
+  await expect
+    .poll(async () => (await field(page).textContent()) ?? '')
+    .toEqual(
+      typeof expected === 'string' ? expected : expect.stringMatching(expected),
+    )
+}
+
 /**
  * A menu pill — list or priority — by its accessible name.
  *
@@ -158,7 +177,7 @@ test('choosing from a pill rewrites the text', async ({ page }) => {
   // part of the contract: without it the line ends in a `#token`, which is
   // what opens the inline autocomplete, so choosing a list reopened the
   // picker over the choice just made.
-  await expect(field(page)).toHaveValue(`Fix the fence #${second} `)
+  await expectFieldText(page, `Fix the fence #${second} `)
   await expect(pill(page, new RegExp(`^List: ${second}`))).toBeVisible()
 
   // And the menu that would have reopened is not there.
@@ -188,7 +207,7 @@ test('typing # offers the lists, and Ctrl+N moves through them', async ({
 
   // Accepting writes the whole name and a trailing space, so typing
   // continues rather than extending the token.
-  await expect(field(page)).toHaveValue(new RegExp(`#${list} $`))
+  await expectFieldText(page, new RegExp(`#${list} $`))
 })
 
 // docs/specs/quick-add.md — when there is nowhere to file it. Enter used to
@@ -490,3 +509,167 @@ test('a second list token is ordinary text', async ({ page }) => {
     page.getByText(`Buy milk #${second}`, { exact: true }),
   ).toBeVisible()
 })
+
+// docs/specs/quick-add.md — the field wraps, and grows.
+//
+// The regression this exists to prevent: the field was one line that
+// scrolled sideways, so a long todo pushed its own beginning out of view
+// with no scrollbar to say so and no way back but walking the caret. The
+// pills made it acute, because choosing a list *lengthens the text* — the
+// words vanished without a keystroke.
+//
+// Asserted on geometry rather than on a class name: what matters is that
+// the text is on screen and the buttons are reachable, which is true or
+// false regardless of how the CSS achieves it.
+test('a long todo wraps instead of scrolling out of sight', async ({
+  page,
+}) => {
+  await login(page)
+  const list = uniqueName('wrap')
+  await createList(page, list)
+  await openQuickAdd(page)
+
+  // The `#list` token is deliberately *not* last: a line ending in
+  // `#name` opens the inline autocomplete, where Enter picks a suggestion
+  // rather than submitting. Same trap the second-token test documents.
+  const long =
+    `Clean the front gutters and downpipes #${list} before the rain ` +
+    'properly sets in and the leaves block the whole lot again'
+  await field(page).fill(long)
+
+  const box = field(page)
+  // Taller than a single line: the text wrapped rather than running off
+  // the side. The exact line count depends on the viewport, so this asks
+  // only that it grew.
+  const height = await box.evaluate((el) => el.getBoundingClientRect().height)
+  const lineHeight = await box.evaluate((el) =>
+    parseFloat(getComputedStyle(el).lineHeight),
+  )
+  expect(height).toBeGreaterThan(lineHeight * 1.5)
+
+  // Nothing is clipped horizontally — the failure mode being fixed.
+  const overflow = await box.evaluate((el) => ({
+    scrollWidth: el.scrollWidth,
+    clientWidth: el.clientWidth,
+  }))
+  expect(overflow.scrollWidth).toBeLessThanOrEqual(overflow.clientWidth + 1)
+
+  // The first word is still visible, not scrolled away to the left.
+  await expect(box).toContainText('Clean the front gutters')
+
+  // And the buttons the modal exists to reach are still on screen.
+  const submit = modal(page).getByRole('button', { name: 'Add todo' })
+  await expect(submit).toBeInViewport()
+
+  // The whole line still submits and round-trips.
+  await page.keyboard.press('Enter')
+  await expect(modal(page)).toBeHidden()
+  await waitForSync(page)
+  await expect(
+    page.getByText(/Clean the front gutters and downpipes/),
+  ).toBeVisible()
+})
+
+// Enter submits from a wrapped line rather than adding another line to it.
+// A contenteditable inserts a break on Enter by default, so this is the
+// assertion that it does not: a todo summary is one line of text that
+// happens to be drawn on several.
+test('Enter submits a wrapped line rather than breaking it', async ({
+  page,
+}) => {
+  await login(page)
+  const list = uniqueName('nobreak')
+  await createList(page, list)
+  await openQuickAdd(page)
+
+  const line =
+    `Ring the plumber about the tap #${list} that has been dripping ` +
+    'since the weekend'
+  await field(page).fill(line)
+
+  // Shift+Enter belongs to the notes field: it must not put a newline in
+  // the summary, and it must not submit. Both were wrong — the Enter
+  // branch did not check `shiftKey`, so this submitted the todo, which
+  // the old `<input>` hid by clearing as the modal closed.
+  await page.keyboard.press('Shift+Enter')
+  await expect(modal(page)).toBeVisible()
+  await expectFieldText(page, line)
+
+  await page.keyboard.press('Enter')
+  await expect(modal(page)).toBeHidden()
+  await waitForSync(page)
+
+  // One todo, its summary intact and on one logical line.
+  await expect(
+    page.getByText('Ring the plumber about the tap that has been dripping'),
+  ).toBeVisible()
+})
+
+// docs/specs/quick-add.md — the marks. Three bugs reported together from
+// use on 2026-08-19, all of them consequences of the browser editing
+// inside the mark spans rather than around them.
+test('a mark does not swallow what is typed after it', async ({ page }) => {
+  await login(page)
+  const list = uniqueName('mark')
+  await createList(page, list)
+  await openQuickAdd(page)
+
+  // Type the priority token, then keep typing from the end of the line —
+  // which is the trailing edge of that token's mark. The browser extends
+  // the span it is editing, so without a redraw the mark grows to cover
+  // everything after it: "p2" became "p2 askdjnfas asdf ask".
+  await field(page).pressSequentially(`Create a thing #${list} p2`)
+  await field(page).pressSequentially(' askdjnfas asdf ask')
+
+  const marks = modal(page).locator('[role="textbox"] span')
+  await expect(marks).toHaveCount(2)
+  await expect(marks.nth(0)).toHaveText(`#${list}`)
+  await expect(marks.nth(1)).toHaveText('p2')
+})
+
+// Choosing from the `#` autocomplete leaves the caret after the name, so
+// typing carries on from there. The `<input>` kept the caret at the end of
+// its value on its own; a contenteditable is redrawn around the new token,
+// which stranded it wherever it had been.
+test('accepting a list suggestion puts the caret after it', async ({
+  page,
+}) => {
+  await login(page)
+  const list = uniqueName('caret')
+  await createList(page, list)
+  await openQuickAdd(page)
+
+  await field(page).pressSequentially(`Do a thing #${list.slice(0, 6)}`)
+  // Scoped to the autocomplete: the list pill carries the same name once a
+  // list is chosen, so a modal-wide lookup matches two buttons.
+  await expect(
+    modal(page).locator('ul[class*="inlineMenu"]').getByRole('button', {
+      name: list,
+    }),
+  ).toBeVisible()
+  await page.keyboard.press('Enter')
+
+  // Typing continues from the end rather than from where the caret was.
+  await field(page).pressSequentially('after')
+  await expectFieldText(page, `Do a thing #${list} after`)
+})
+
+// The autocomplete hangs off the token being typed, so it has no business
+// being on screen when the field does not hold focus — it used to sit over
+// the pills and the buttons after a click elsewhere.
+test('the list autocomplete closes when the field loses focus', async ({
+  page,
+}) => {
+  await login(page)
+  const list = uniqueName('blur')
+  await createList(page, list)
+  await openQuickAdd(page)
+
+  await field(page).pressSequentially('Thing #')
+  const menu = modal(page).locator('ul[class*="inlineMenu"]')
+  await expect(menu).toBeVisible()
+
+  // Focus a real control elsewhere in the modal.
+  await modal(page).getByRole('button', { name: 'Cancel' }).focus()
+  await expect(menu).toBeHidden()
+})
diff --git a/mise.toml b/mise.toml
new file mode 100644
index 0000000..1b278fe
--- /dev/null
+++ b/mise.toml
@@ -0,0 +1,14 @@
+# The toolchain for local development.
+#
+# Bun is pinned here so a checkout runs the same version the lockfile was
+# resolved against, and so `bun` resolves at all: mise's shim fails outright
+# when no version is set for a tool, which takes down anything that spawns
+# `bun` through a fresh shell — Playwright's `webServer` among them, so the
+# e2e suite could not start.
+#
+# This governs local development only. CI installs bun through
+# `oven-sh/setup-bun` (.github/workflows/ci.yml) and the image builds from
+# `oven/bun` (Dockerfile), so neither reads this file; keep the version in
+# step with them when it moves.
+[tools]
+bun = "1.3.14"