diff --git a/e2e/run.ts b/e2e/run.ts
index 8531d12..17192bc 100644
--- a/e2e/run.ts
+++ b/e2e/run.ts
@@ -391,6 +391,286 @@ async function claimed(page: Page): Promise<boolean> {
   return !cls.includes("unclaimed");
 }
 
+// ---------------------------------------------------------------------------
+// The keyboard, and what is out of its reach
+//
+// The visor moves focus through markup (visor/src/ui.rs `FocusWant`,
+// web/focus.ts), so everything below asks the DOM what actually has the
+// caret rather than trusting either side's account of it.
+// ---------------------------------------------------------------------------
+
+/** What has the keyboard, named the way an assertion can read. */
+function focused(page: Page): Promise<string> {
+  return page.evaluate(() => {
+    const a = document.activeElement;
+    if (!(a instanceof HTMLElement)) return "<none>";
+    if (a.id !== "") return "#" + a.id;
+    const cls = String(a.className).trim();
+    return a.tagName.toLowerCase() +
+      (cls === "" ? "" : "." + cls.split(/\s+/)[0]);
+  });
+}
+
+/** Is the caret inside `selector`? */
+function focusIn(page: Page, selector: string): Promise<boolean> {
+  return page.evaluate((sel) => {
+    const host = document.querySelector(sel);
+    const a = document.activeElement;
+    return host !== null && a !== null && host.contains(a);
+  }, selector);
+}
+
+/** `inert` is a presence attribute: `inert="false"` is still inert, so this
+ * asks whether it is THERE rather than what it says (visor/src/ui.rs
+ * `flag`). */
+function inert(page: Page, selector: string): Promise<boolean> {
+  return page.evaluate(
+    (sel) => document.querySelector(sel)?.hasAttribute("inert") ?? false,
+    selector,
+  );
+}
+
+/** Press Tab `times` and report every place the caret landed. */
+async function tabTour(page: Page, times: number): Promise<string[]> {
+  const seen: string[] = [];
+  for (let i = 0; i < times; i++) {
+    await page.keyboard.press("Tab");
+    seen.push(await focused(page));
+    if (await focusIn(page, "#app-zone")) seen.push("!app-zone");
+  }
+  return seen;
+}
+
+/**
+ * The measured contrast of every piece of text on screen at one point on the
+ * hue wheel, as WCAG ratios keyed by a description of the element.
+ *
+ * Measured, not computed: the sheet states `oklch`, and what a ratio is
+ * depends on how Chromium maps that into sRGB. So every colour goes through
+ * a 1×1 canvas — the browser's own parser and gamut mapping — and the
+ * translucent layers are composited there before anything is measured.
+ *
+ * `hue` drives the stylesheet's two arms directly; which arm a real visor
+ * takes is the anchor rule, which `claimed()` tests.
+ */
+function inkContrast(
+  page: Page,
+  hue: number | "unclaimed",
+): Promise<Record<string, number>> {
+  return page.evaluate((h) => {
+    const root = document.querySelector("#visor-root") as HTMLElement;
+    if (h === "unclaimed") root.classList.add("unclaimed");
+    else {
+      root.classList.remove("unclaimed");
+      root.style.setProperty("--hue", String(h));
+    }
+
+    const cv = document.createElement("canvas");
+    cv.width = cv.height = 1;
+    const g = cv.getContext("2d", { willReadFrequently: true })!;
+    const px = (css: string): number[] => {
+      g.clearRect(0, 0, 1, 1);
+      g.fillStyle = "#000";
+      g.fillStyle = css;
+      g.fillRect(0, 0, 1, 1);
+      const d = g.getImageData(0, 0, 1, 1).data;
+      return [d[0], d[1], d[2], d[3] / 255];
+    };
+    const over = (fg: number[], bg: number[]): number[] =>
+      [0, 1, 2].map((i) => fg[i] * fg[3] + bg[i] * (1 - fg[3]));
+    const lum = (c: number[]): number => {
+      const [r, gg, b] = c.map((v) => {
+        const s = v / 255;
+        return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+      });
+      return 0.2126 * r + 0.7152 * gg + 0.0722 * b;
+    };
+    /** Everything painted under `el`, its own background included, flattened
+     * onto the page's white. */
+    const behind = (el: Element): number[] => {
+      const chain: Element[] = [];
+      for (let n: Element | null = el; n !== null; n = n.parentElement) {
+        chain.push(n);
+      }
+      let acc = [255, 255, 255];
+      for (const n of chain.reverse()) {
+        acc = over(px(getComputedStyle(n).backgroundColor), acc);
+      }
+      return acc;
+    };
+
+    const out: Record<string, number> = {};
+    for (
+      const el of document.querySelectorAll(
+        "#visor-root span, #visor-root q, #visor-root button, #visor-root div",
+      )
+    ) {
+      const text = (el.textContent ?? "").trim();
+      // Leaves only: a container's own `color` is not what is drawn.
+      if (text === "" || el.querySelector("*") !== null) continue;
+      if (el.closest("[inert]") !== null) continue;
+      if (el.getClientRects().length === 0) continue;
+      const style = getComputedStyle(el);
+      if (style.visibility === "hidden") continue;
+      const bg = behind(el);
+      const fg = over(px(style.color), bg);
+      const hi = Math.max(lum(fg), lum(bg)) + 0.05;
+      const lo = Math.min(lum(fg), lum(bg)) + 0.05;
+      const cls = String(el.className).trim() || "-";
+      out[`${el.tagName.toLowerCase()}.${cls} "${text.slice(0, 24)}"`] = hi /
+        lo;
+    }
+    return out;
+  }, hue);
+}
+
+/** Every control below the 44px touch floor, on either axis. */
+function undersizedControls(page: Page): Promise<string[]> {
+  return page.evaluate(() => {
+    const bad: string[] = [];
+    for (
+      const el of document.querySelectorAll<HTMLElement>(
+        "#visor-root button, #visor-root input",
+      )
+    ) {
+      if (el.closest("[inert]") !== null) continue;
+      const box = el.getBoundingClientRect();
+      if (box.height === 0) continue;
+      const what = el.tagName === "INPUT"
+        ? `input[${(el as HTMLInputElement).type}]`
+        : `"${(el.textContent ?? "").trim().slice(0, 20)}"`;
+      if (box.height < 44 || box.width < 44) {
+        bad.push(`${what} is ${box.width.toFixed(0)}×${box.height.toFixed(0)}`);
+      }
+    }
+    return bad;
+  });
+}
+
+/** Is every long machine identifier still wholly readable — one line high,
+ * scrollable to its own end, and reachable by keyboard to do it? Chromium
+ * focuses overflowing scroll containers without a `tabindex`, which is what
+ * makes the local scroll usable at all; recent enough to be worth checking
+ * rather than assuming. */
+function unreadableIdentifiers(page: Page): Promise<string[]> {
+  return page.evaluate(() => {
+    const bad: string[] = [];
+    for (
+      const el of document.querySelectorAll<HTMLElement>(
+        "#visor-root .endpoint-id",
+      )
+    ) {
+      const where = `${el.id || "a member/peer id"}`;
+      const style = getComputedStyle(el);
+      if (style.overflowX !== "auto") {
+        bad.push(`${where}: overflow-x is ${style.overflowX}`);
+      }
+      const lines = Math.round(
+        el.getBoundingClientRect().height / parseFloat(style.lineHeight),
+      );
+      if (lines !== 1) bad.push(`${where} is ${lines} lines high`);
+      if (el.scrollWidth <= el.clientWidth) continue; // nothing to scroll
+      el.scrollLeft = el.scrollWidth;
+      const end = el.scrollLeft + el.clientWidth;
+      if (end < el.scrollWidth - 1) {
+        bad.push(`${where} cannot be scrolled to its end`);
+      }
+      el.scrollLeft = 0;
+      el.focus({ preventScroll: true });
+      if (document.activeElement !== el) {
+        bad.push(`${where} takes no focus, so a keyboard cannot scroll it`);
+      }
+      el.blur();
+    }
+    return bad;
+  });
+}
+
+/** Two boxes that share pixels. What "the member id overlaps the status"
+ * looked like: a nowrap id that would not shrink, laid over the text
+ * beside it. */
+function overlappingRows(page: Page): Promise<string[]> {
+  return page.evaluate(() => {
+    const bad: string[] = [];
+    for (
+      const row of document.querySelectorAll(
+        "#visor-root .member-row, #visor-root .peer-row, " +
+          "#visor-root .device-row, #visor-root .app-row, #visor-root .sync-self",
+      )
+    ) {
+      const kids = [...row.children].map((k) => ({
+        text: (k.textContent ?? "").trim().slice(0, 16),
+        box: k.getBoundingClientRect(),
+      })).filter((k) => k.box.width > 0 && k.box.height > 0);
+      for (let i = 0; i < kids.length; i++) {
+        for (let j = i + 1; j < kids.length; j++) {
+          const a = kids[i].box, b = kids[j].box;
+          if (
+            a.left < b.right - 0.5 && b.left < a.right - 0.5 &&
+            a.top < b.bottom - 0.5 && b.top < a.bottom - 0.5
+          ) {
+            bad.push(`"${kids[i].text}" over "${kids[j].text}"`);
+          }
+        }
+      }
+    }
+    return bad;
+  });
+}
+
+/** Anything the visor is drawing wider than the screen. A long identifier
+ * gets its own local scroll; nothing gets the page's. An element whose
+ * ancestor clips it is not overflow — the strip's two lines are `nowrap`
+ * and ellipsised on purpose — so the clipping ancestor is what is measured
+ * instead, and it is in this same sweep. */
+function sidewaysOverflow(page: Page): Promise<string[]> {
+  return page.evaluate(() => {
+    const bad: string[] = [];
+    if (document.documentElement.scrollWidth > innerWidth) {
+      bad.push(
+        `the page scrolls sideways: ${document.documentElement.scrollWidth} > ${innerWidth}`,
+      );
+    }
+    const pane = document.querySelector<HTMLElement>("#visor-drawer .pane");
+    if (pane !== null && pane.scrollWidth > pane.clientWidth) {
+      bad.push(
+        `the drawer scrolls sideways: ${pane.scrollWidth} > ${pane.clientWidth}`,
+      );
+    }
+    const clipped = (el: Element): boolean => {
+      for (let n = el.parentElement; n !== null; n = n.parentElement) {
+        const s = getComputedStyle(n);
+        if (s.overflowX !== "visible" || s.overflowY !== "visible") return true;
+      }
+      return false;
+    };
+    for (const el of document.querySelectorAll<HTMLElement>("#visor-root *")) {
+      if (el.getClientRects().length === 0 || clipped(el)) continue;
+      const right = el.getBoundingClientRect().right;
+      if (right > innerWidth + 0.5) {
+        bad.push(
+          `${el.tagName.toLowerCase()}.${el.className} reaches ${
+            right.toFixed(0)
+          }`,
+        );
+      }
+    }
+    return bad;
+  });
+}
+
+/** Screenshots for a human, when `VISOR_SHOTS` asks for them. */
+async function shot(page: Page, name: string): Promise<void> {
+  const dir = Deno.env.get("VISOR_SHOTS");
+  if (dir === undefined) return;
+  // Long enough for the drawer's own open/close animation, which is not
+  // what `paneSettled` waits on: a shot taken mid-slide is a picture of an
+  // animation rather than of a layout.
+  await page.waitForTimeout(400);
+  await Deno.mkdir(dir, { recursive: true });
+  await page.screenshot({ path: join(dir, `${name}.png`) });
+}
+
 // ---------------------------------------------------------------------------
 // Devices, as these scenarios drive it
 //
@@ -1992,6 +2272,442 @@ const scenarios: Scenario[] = [
       );
     },
   },
+
+  {
+    // The drawer by keyboard alone: a way OUT of an open pane, and a
+    // guarantee that Tab cannot walk under the scrim into the app.
+    name: "drawer-keyboard",
+    async run(ctx, origin) {
+      const page = await open(ctx, origin);
+      await visorReady(page);
+      await launchTodoMvc(page);
+      // The app has the screen: the drawer is gone and the zone is live.
+      await page.waitForFunction(
+        () => document.querySelector("#visor-drawer") === null,
+        undefined,
+        { timeout: 10_000 },
+      );
+      eq(await inert(page, "#app-zone"), false, "the app zone stayed inert");
+
+      // Raise the running app's sheet from the strip, by keyboard.
+      await appsButton(page).focus();
+      await page.keyboard.press("Enter");
+      await paneSettled(page);
+      check(
+        await focusIn(page, "#visor-drawer .pane"),
+        `opening a pane left the keyboard at ${await focused(page)}`,
+      );
+
+      // `inert` and not a `tabindex` sweep: the app zone holds a frame whose
+      // contents this side cannot enumerate.
+      eq(
+        await inert(page, "#app-zone"),
+        true,
+        "the app zone is reachable under the scrim",
+      );
+      const tour = await tabTour(page, 12);
+      check(
+        !tour.includes("!app-zone"),
+        `Tab reached the app under the scrim: ${tour.join(" → ")}`,
+      );
+      // ...and the strip is not walled off: an open pane is not a modal.
+      check(
+        tour.includes("#visor-app") || tour.includes("#visor-self"),
+        `an open pane trapped the keyboard away from the strip: ${
+          tour.join(" → ")
+        }`,
+      );
+
+      eq(
+        await drawer(page).locator(".pane-dismiss").textContent(),
+        "Return to app",
+        "the running app's sheet offered no way back to it",
+      );
+
+      // Escape is that button by another name, and the caret goes back to
+      // the half of the strip that raised the pane.
+      await page.keyboard.press("Escape");
+      await page.waitForFunction(
+        () => document.querySelector("#visor-drawer") === null,
+        undefined,
+        { timeout: 10_000 },
+      );
+      eq(await focused(page), "#visor-app", "the keyboard was left nowhere");
+      eq(
+        await inert(page, "#app-zone"),
+        false,
+        "the app stayed unreachable after the drawer closed",
+      );
+
+      // Reopen: the animation ran both ways and the pane still takes the
+      // caret — the case a one-shot focus would get wrong.
+      await page.keyboard.press("Enter");
+      await paneSettled(page);
+      check(
+        await focusIn(page, "#visor-drawer .pane"),
+        `reopening left the keyboard at ${await focused(page)}`,
+      );
+      await shot(page, "desktop-app-sheet");
+    },
+  },
+
+  {
+    // The same claims where the drawer is pinned (so "out" is the app list)
+    // and with the animations taken away: every close waits on
+    // `animationend`, and a zero-duration animation still has to fire one.
+    name: "drawer-keyboard-reduced-motion",
+    async run(_ctx, origin, browser) {
+      const ctx = await browser.newContext({ reducedMotion: "reduce" });
+      try {
+        const page = await open(ctx, origin);
+        await visorReady(page);
+        // Nothing behind the drawer, so it offers no way out at all.
+        await paneSettled(page);
+        eq(
+          await drawer(page).locator(".pane-dismiss").count(),
+          0,
+          "the resting app list offered a dismissal to nowhere",
+        );
+
+        await settingsButton(page).focus();
+        await page.keyboard.press("Enter");
+        await paneSettled(page);
+        eq(
+          await drawer(page).locator(".pane-dismiss").textContent(),
+          "Back to apps",
+          "a pinned settings sheet offered no way back",
+        );
+        check(
+          await focusIn(page, "#visor-drawer .pane"),
+          `opening settings left the keyboard at ${await focused(page)}`,
+        );
+
+        // Escape lands on the app list rather than shutting the drawer: the
+        // visor rests there (visor/src/state.rs `reduce`, pinned).
+        await page.keyboard.press("Escape");
+        await paneSettled(page);
+        check(
+          await drawer(page).locator(".app-row").count() > 0,
+          "Escape from a pinned sheet did not land on the app list",
+        );
+        check(
+          await focusIn(page, "#visor-drawer .pane"),
+          `the switch left the keyboard at ${await focused(page)}`,
+        );
+
+        // A launch is a close the user did not press, and it still has to
+        // hand the app zone back without the animation it waits on.
+        await launchTodoMvc(page);
+        await page.waitForFunction(
+          () => document.querySelector("#visor-drawer") === null,
+          undefined,
+          { timeout: 10_000 },
+        );
+        eq(
+          await inert(page, "#app-zone"),
+          false,
+          "the drawer left the app zone inert behind it",
+        );
+      } finally {
+        await ctx.close();
+      }
+    },
+  },
+
+  {
+    // The unsaved-changes dialog is the one modal thing in the visor: three
+    // answers, none safe to guess. So it is named, the caret is put in it,
+    // nothing outside it can be reached or pressed until it is answered, and
+    // every way of answering leaves the caret somewhere sensible.
+    name: "drawer-confirm-focus",
+    async run(ctx, origin) {
+      const page = await open(ctx, origin);
+      await visorReady(page);
+      await openSettingsSheet(page);
+      const field = drawer(page).locator("label").filter({
+        hasText: /^device petname$/,
+      }).locator("input");
+      const confirm = page.locator("#visor-confirm");
+
+      await field.fill("half typed");
+      await appsButton(page).click();
+      await confirm.waitFor({ timeout: 10_000 });
+
+      // Named, or a screen reader announces a dialog about nothing.
+      eq(await confirm.getAttribute("role"), "dialog", "the dialog's role");
+      eq(
+        await confirm.getAttribute("aria-label"),
+        "unsaved changes",
+        "the dialog's accessible name",
+      );
+      check(
+        await focusIn(page, "#visor-confirm"),
+        `the dialog did not take the keyboard; it is at ${await focused(page)}`,
+      );
+      eq(await inert(page, "#visor-strip"), true, "the strip under a dialog");
+      eq(await inert(page, "#visor-drawer"), true, "the drawer under a dialog");
+
+      // Escape cancels the DIALOG and nothing else: the draft is still the
+      // user's, the sheet has not moved, and the caret goes back where it
+      // was when the dialog appeared.
+      await page.keyboard.press("Escape");
+      await confirm.waitFor({ state: "detached", timeout: 10_000 });
+      eq(await field.inputValue(), "half typed", "Escape dropped the draft");
+      eq(
+        await inert(page, "#visor-strip"),
+        false,
+        "the strip stayed inert after the dialog went",
+      );
+      eq(
+        await focused(page),
+        "#visor-app",
+        "cancelling by Escape left the keyboard nowhere",
+      );
+      // The sheet the draft belongs to is still the one on screen.
+      eq(
+        await drawer(page).locator(".pane").getAttribute("aria-label"),
+        "settings",
+        "Escape took the transition it was asked about",
+      );
+
+      // Held: with everything else inert there is nowhere for Tab to go but
+      // the three answers. (Past the last it leaves for the browser's own
+      // chrome and comes back, which is not a way into the visor.)
+      await appsButton(page).click();
+      await confirm.waitFor({ timeout: 10_000 });
+      const tour = await tabTour(page, 8);
+      for (const where of ["#visor-app", "#visor-self", "!app-zone"]) {
+        check(
+          !tour.includes(where),
+          `Tab escaped the dialog to ${where}: ${tour.join(" → ")}`,
+        );
+      }
+
+      // Cancel, the button, means what Escape meant.
+      await confirm.getByRole("button", { name: "Cancel", exact: true })
+        .click();
+      await confirm.waitFor({ state: "detached", timeout: 10_000 });
+      eq(await field.inputValue(), "half typed", "Cancel dropped the draft");
+      eq(
+        await focused(page),
+        "#visor-app",
+        "Cancel left the keyboard nowhere",
+      );
+
+      // Revert answers the dialog AND takes the transition it was asking
+      // about — so the caret follows the transition rather than going back
+      // to a strip half the user has now left.
+      await appsButton(page).click();
+      await confirm.waitFor({ timeout: 10_000 });
+      await confirm.getByRole("button", { name: "Revert", exact: true })
+        .click();
+      await paneSettled(page);
+      check(
+        await drawer(page).locator(".app-row").count() > 0,
+        "Revert did not go on to the transition it was asked about",
+      );
+      check(
+        await focusIn(page, "#visor-drawer .pane"),
+        `Revert left the keyboard at ${await focused(page)}`,
+      );
+
+      // Save, likewise, and the kernel is the one that remembers it. The
+      // transition waits on the kernel here — `save_draft` calls one
+      // `set-*` per changed field and only then takes the parked action —
+      // so the caret rests on the strip half in the meantime and follows
+      // the pane when it finally arrives. Waiting on the app list rather
+      // than on `paneSettled`: the Settings pane is itself "settled" for
+      // as long as the save is in flight.
+      await openSettingsSheet(page);
+      await field.fill("the workbench");
+      await appsButton(page).click();
+      await confirm.waitFor({ timeout: 10_000 });
+      await confirm.getByRole("button", { name: "Save", exact: true }).click();
+      await drawer(page).locator(".app-row").first().waitFor({
+        timeout: 15_000,
+      });
+      await paneSettled(page);
+      check(
+        await focusIn(page, "#visor-drawer .pane"),
+        `Save left the keyboard at ${await focused(page)}`,
+      );
+      await strip(page).getByText("the workbench").waitFor({ timeout: 15_000 });
+
+      // With an app running there is a scrim as well, and it is a press
+      // target: pressing it while the dialog stands used to replace the
+      // parked transition, so "Revert" closed the drawer instead of opening
+      // the sheet the user had actually asked for.
+      await launchTodoMvc(page);
+      await openSettingsSheet(page);
+      await field.fill("typed over the app");
+      await appsButton(page).click();
+      await confirm.waitFor({ timeout: 10_000 });
+      eq(await inert(page, "#visor-scrim"), true, "the scrim under a dialog");
+      await page.locator("#visor-scrim").click({ force: true });
+      await page.waitForTimeout(300);
+      eq(
+        await page.locator("#visor-confirm").count(),
+        1,
+        "a scrim press answered the dialog",
+      );
+      await confirm.getByRole("button", { name: "Revert", exact: true })
+        .click();
+      await paneSettled(page);
+      eq(
+        await drawer(page).locator(".pane").getAttribute("aria-label"),
+        "the running app",
+        "the scrim press replaced the transition the dialog was asked about",
+      );
+    },
+  },
+
+  {
+    // Two handheld widths. The Devices section is long machine identifiers
+    // next to short framework-voice facts about them, which is the shape
+    // that used to lay one over the other. Nothing may be answered by
+    // hiding: the whole identifier stays readable, in its own local scroll,
+    // while neither the page nor the drawer scrolls sideways.
+    name: "visor-narrow-layout",
+    async run(ctx, origin) {
+      const page = await open(ctx, origin);
+      await visorReady(page);
+      // A person's own words, at the length people use.
+      await setDeviceName(page, "Ada's very own workbench in the back room");
+      await drawer(page).locator("label").filter({ hasText: /^your petname$/ })
+        .locator("input").fill("Ada Lovelace-Byron the Elder");
+      await saveDraft(page);
+
+      // The unnamed case is the one that overlapped: with no petname, a
+      // device is shown by its endpoint id — tens of characters of machine
+      // text beside "this device" and an age.
+      const id = await endpointId(page);
+      check(id.length > 20, `the endpoint id is implausibly short: ${id}`);
+      await waitInDevices(
+        page,
+        "this device in its own group",
+        async () => await devicesSheet(page).locator(".member-row").count() > 0,
+        { refresh: true },
+      );
+
+      // Where the long identifiers are, and so what the pictures show.
+      await devicesSheet(page).scrollIntoViewIfNeeded();
+      for (const width of [390, 320]) {
+        await page.setViewportSize({ width, height: 780 });
+        // A resize is a layout, not a render; give it one.
+        await page.waitForTimeout(300);
+        const over = await sidewaysOverflow(page);
+        check(over.length === 0, `at ${width}px: ${over.join("; ")}`);
+        const laid = await overlappingRows(page);
+        check(
+          laid.length === 0,
+          `at ${width}px rows overlap: ${laid.join("; ")}`,
+        );
+        // Every id on screen — this device's endpoint, and the same id
+        // again as the unnamed member row — is one line, whole, scrollable
+        // to its end, and focusable so a keyboard can do the scrolling.
+        const ids = await unreadableIdentifiers(page);
+        check(ids.length === 0, `at ${width}px: ${ids.join("; ")}`);
+        await shot(page, `mobile-${width}-settings`);
+      }
+
+      const shown = devicesSheet(page).locator("#visor-endpoint-id");
+      eq(await shown.textContent(), id, "the endpoint id was truncated");
+      check(
+        await shown.evaluate((el) => el.scrollWidth > el.clientWidth),
+        "at 320px the endpoint id fits, so this proves nothing about the " +
+          "local scroll it is supposed to have",
+      );
+      eq(
+        await devicesSheet(page).locator(".member-row .endpoint-id").count(),
+        1,
+        "no unnamed member id was on screen to check",
+      );
+    },
+  },
+
+  {
+    // The strip stays saturated by ruling, so its text carries the whole
+    // burden of being readable — at every hue a user can pick, and in the
+    // grey the visor wears before it is claimed.
+    name: "visor-contrast-and-touch",
+    async run(ctx, origin) {
+      const page = await open(ctx, origin);
+      await visorReady(page);
+      await page.setViewportSize({ width: 390, height: 780 });
+      await openSettingsSheet(page);
+      // Both halves of the strip are on screen at once, one pressed and one
+      // not: the pressed half is lightened by a translucent overlay, so it
+      // is a different background under the same ink.
+      const painted = await page.locator("#visor-root").getAttribute("style");
+
+      const worst = new Map<string, number>();
+      const wheel: Array<number | "unclaimed"> = ["unclaimed"];
+      for (let h = 0; h < 360; h++) wheel.push(h);
+      for (const hue of wheel) {
+        for (
+          const [what, ratio] of Object.entries(await inkContrast(page, hue))
+        ) {
+          const key = `${what} @${hue}`;
+          if (ratio < (worst.get(key) ?? Infinity)) worst.set(key, ratio);
+        }
+      }
+      check(worst.size > 20, `only ${worst.size} pieces of text were measured`);
+      const failing = [...worst].filter(([, r]) => r < 4.5)
+        .sort((a, b) => a[1] - b[1]);
+      check(
+        failing.length === 0,
+        `${failing.length} text(s) below 4.5:1, worst ${
+          failing.slice(0, 4).map(([k, r]) => `${k} = ${r.toFixed(2)}`).join(
+            "; ",
+          )
+        }`,
+      );
+      // Put the device's own colour back: the sweep drove the sheet
+      // directly, and the rest of this is about the real visor.
+      await page.locator("#visor-root").evaluate(
+        (el, style) => el.setAttribute("style", style ?? ""),
+        painted,
+      );
+
+      // The ring is drawn outside its control, so one colour works on the
+      // strip and in the drawer alike.
+      await page.keyboard.press("Tab");
+      const ring = await page.evaluate(() => {
+        const a = document.activeElement as HTMLElement;
+        const s = getComputedStyle(a);
+        return { style: s.outlineStyle, width: parseFloat(s.outlineWidth) };
+      });
+      check(
+        ring.style !== "none" && ring.width >= 2,
+        `the focus ring is ${JSON.stringify(ring)}`,
+      );
+
+      const small = await undersizedControls(page);
+      check(small.length === 0, `under the touch floor: ${small.join("; ")}`);
+      await shot(page, "mobile-390-settings-touch");
+
+      // Desktop: the same floor, and fields that stay a field's width
+      // rather than spanning the window.
+      await page.setViewportSize({ width: 1280, height: 800 });
+      await page.waitForTimeout(300);
+      const wide = await undersizedControls(page);
+      check(wide.length === 0, `under the touch floor: ${wide.join("; ")}`);
+      const stretched = await page.evaluate(() =>
+        [...document.querySelectorAll<HTMLInputElement>("#visor-root input")]
+          .filter((el) => el.getBoundingClientRect().width > 400)
+          .map((el) =>
+            `input[${el.type}] is ${
+              el.getBoundingClientRect().width.toFixed(0)
+            }px`
+          )
+      );
+      check(
+        stretched.length === 0,
+        `fields span the window: ${stretched.join("; ")}`,
+      );
+      await shot(page, "desktop-settings");
+    },
+  },
 ];
 
 // ---------------------------------------------------------------------------
diff --git a/visor/src/style.rs b/visor/src/style.rs
index 312f195..01fd674 100644
--- a/visor/src/style.rs
+++ b/visor/src/style.rs
@@ -11,6 +11,12 @@
 //! (docs/design.md "Devices"). So the palette cascades — strip, drawer,
 //! buttons and voices all shift together — while the fact that decides
 //! whether anything is painted at all stays one expression in one place.
+//!
+//! Two rules the e2e gates measure rather than this file asserting them:
+//! every selector is under `#visor-root`, because the `<style>` element
+//! lands in the page's own document and a bare `button {}` would dress the
+//! host page; and text states an opaque colour rather than fading, so its
+//! contrast does not depend on what happens to be behind it.
 
 pub(crate) const CSS: &str = r#"
 /* The two arms of the anchor rule, and the only place either is spelled.
@@ -19,15 +25,20 @@ pub(crate) const CSS: &str = r#"
    shape in grey rather than a second design. */
 #visor-root {
   position: relative;
-  font: 14px/1.4 system-ui, sans-serif;
+  font: 14px/1.5 system-ui, sans-serif;
   color: oklch(0.22 0.02 var(--hue));
+  max-width: 100%;
   /* The strip is saturated on purpose: it is the line between trusted and
      untrusted pixels, and should read as one. Everything behind it is a
      pale tint of the same hue, with the chroma spent on the accent alone. */
   --strip: oklch(0.62 0.14 var(--hue));
   --strip-edge: oklch(0.45 0.09 var(--hue));
+  /* Dark ink is what lets the strip keep its saturated colour: light ink on
+     a mid-lightness plate falls near 3:1 at some hues, this holds above
+     4.5:1 at every one of them, pressed half or not. */
+  --strip-ink: oklch(0.16 0.04 var(--hue));
   --drawer: oklch(0.95 0.02 var(--hue));
-  --accent: oklch(0.52 0.12 var(--hue));
+  --accent: oklch(0.48 0.12 var(--hue));
   --accent-ink: oklch(0.98 0.01 var(--hue));
   --edge: oklch(0.8 0.04 var(--hue));
   --quiet: oklch(0.45 0.04 var(--hue));
@@ -39,8 +50,9 @@ pub(crate) const CSS: &str = r#"
   color: oklch(0.22 0 0);
   --strip: oklch(0.62 0 0);
   --strip-edge: oklch(0.45 0 0);
+  --strip-ink: oklch(0.16 0 0);
   --drawer: oklch(0.95 0 0);
-  --accent: oklch(0.52 0 0);
+  --accent: oklch(0.48 0 0);
   --accent-ink: oklch(0.98 0 0);
   --edge: oklch(0.8 0 0);
   --quiet: oklch(0.45 0 0);
@@ -49,6 +61,14 @@ pub(crate) const CSS: &str = r#"
   --field: oklch(0.99 0 0);
 }
 
+/* The ring sits OUTSIDE its control, so it is drawn against the strip or the
+   drawer rather than against a button's own fill — which is what lets one
+   colour be visible on all of them. */
+#visor-root :focus-visible {
+  outline: 3px solid var(--strip-ink);
+  outline-offset: 2px;
+}
+
 /* Fixed height on all three axes so no content can push the anchor
    around. */
 #visor-strip {
@@ -59,22 +79,29 @@ pub(crate) const CSS: &str = r#"
   position: relative; z-index: 3;
   background: var(--strip);
   border-bottom: 1px solid var(--strip-edge);
-  /* Light on the saturated strip; the pale drawer keeps the dark ink. */
-  color: var(--accent-ink);
+  color: var(--strip-ink);
 }
-#visor-strip .framework { color: inherit; opacity: 0.8; }
+/* Italic, not faded. Two ids on purpose: the voice rules at the foot of the
+   sheet are `#visor-root .framework` — equal specificity and later in source
+   order — so an override of equal weight would silently lose. */
+#visor-root #visor-strip .framework { color: inherit; }
 
-/* The two halves. Each is a whole button so the target is the half, not
-   the glyph: one is "what is running", the other "who this is". */
-#visor-app, #visor-self {
+/* The two halves. Each is a whole button so the target is the half, not the
+   glyph. Two ids again: `#visor-root button` (an id and an element) outranks
+   a bare `#visor-app`, and the halves are not drawer buttons. */
+#visor-root #visor-app, #visor-root #visor-self {
   flex: 1; min-width: 0;
   display: flex; align-items: center; gap: 8px;
+  color: var(--strip-ink);
   background: none; border: 0; border-radius: 8px;
   padding: 4px 8px; text-align: left;
 }
-#visor-self { flex-direction: row-reverse; text-align: right; }
-#visor-app[aria-pressed="true"], #visor-self[aria-pressed="true"] { background: oklch(1 0 0 / 0.18); }
-#visor-divider { width: 1px; align-self: stretch; margin: 5px; background: var(--edge); }
+#visor-root #visor-self { flex-direction: row-reverse; text-align: right; }
+/* `box-shadow: none`: the drawer's pressed dress is an inset outline, which
+   on a half the width of the strip reads as a stray box. Here the lightening
+   is the whole of it. */
+#visor-root #visor-app[aria-pressed="true"], #visor-root #visor-self[aria-pressed="true"] { background: oklch(1 0 0 / 0.18); box-shadow: none; }
+#visor-divider { width: 1px; align-self: stretch; margin: 5px; background: var(--strip-edge); }
 #visor-app-glyph, #visor-circle {
   flex: none;
   display: flex; align-items: center; justify-content: center;
@@ -83,9 +110,9 @@ pub(crate) const CSS: &str = r#"
 #visor-app-glyph { width: 40px; height: 40px; font-size: 28px; border-radius: 6px; }
 /* The plate: a light mark on the saturated strip. */
 #visor-circle { width: 28px; height: 28px; border-radius: 50%; background: var(--plate); color: var(--plate-ink); }
-.stack { flex: 1; min-width: 0; }
-.stack .top, .stack .bottom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.stack .bottom { font-size: 12px; }
+#visor-root .stack { flex: 1; min-width: 0; }
+#visor-root .stack .top, #visor-root .stack .bottom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+#visor-root .stack .bottom { font-size: 12px; }
 
 /* The drawer is in normal flow, above the strip: it pushes the strip (and
    the app zone under it) down when it opens rather than covering the app.
@@ -110,15 +137,19 @@ pub(crate) const CSS: &str = r#"
    slides out. The drawer's height is fixed and the pane scrolls inside it,
    so no sheet's length can move anything.
 
+   `overflow-x: hidden`: the long machine texts each carry their own local
+   horizontal scroll, so nothing may make the drawer or the page scroll
+   sideways.
+
    The four backgrounds are the local/scroll shadow technique: the first two
    are drawer-coloured covers pinned to the content (`local`), the second
    two are shadows pinned to the viewport (`scroll`). Where there is more
    content above or below, the cover has scrolled away and the shadow shows
    — so "there is more" is visible without a scrollbar being trusted to say
    it. */
-.pane {
+#visor-root .pane {
   position: absolute; inset: 0;
-  overflow-y: auto;
+  overflow-y: auto; overflow-x: hidden;
   padding: 12px;
   box-sizing: border-box;
   background:
@@ -130,10 +161,12 @@ pub(crate) const CSS: &str = r#"
   background-attachment: local, local, scroll, scroll;
   background-color: var(--drawer);
 }
-.pane.enter-from-right { animation: visor-enter-right 200ms ease-out; }
-.pane.enter-from-left { animation: visor-enter-left 200ms ease-out; }
-.pane.leave-to-left { animation: visor-leave-left 200ms ease-in forwards; }
-.pane.leave-to-right { animation: visor-leave-right 200ms ease-in forwards; }
+/* Where the caret lands when a pane opens; quiet, since it is a container. */
+#visor-root .pane:focus-visible { outline: 2px dashed var(--quiet); outline-offset: -6px; }
+#visor-root .pane.enter-from-right { animation: visor-enter-right 200ms ease-out; }
+#visor-root .pane.enter-from-left { animation: visor-enter-left 200ms ease-out; }
+#visor-root .pane.leave-to-left { animation: visor-leave-left 200ms ease-in forwards; }
+#visor-root .pane.leave-to-right { animation: visor-leave-right 200ms ease-in forwards; }
 
 @keyframes visor-drawer-open { from { height: 0; } }
 @keyframes visor-drawer-close { to { height: 0; } }
@@ -157,53 +190,102 @@ pub(crate) const CSS: &str = r#"
   padding: 12px;
   box-sizing: border-box;
   background: var(--drawer);
-  border-top: 1px solid var(--edge);
+  border-top: 2px solid var(--strip-ink);
 }
+#visor-confirm:focus { outline: none; }
+#visor-confirm .framework { font-weight: 600; font-size: 16px; flex: 1 1 100%; }
 
 /* The line at the top of every pane. Only the pane that is staying
    carries the id — during a slide there are two of these on screen. */
-.notice { margin-bottom: 8px; min-height: 1.4em; }
+#visor-root .notice { margin-bottom: 8px; min-height: 1.4em; overflow-wrap: break-word; }
 
-button { font: inherit; color: var(--accent-ink); background: var(--accent); border: 1px solid var(--accent); border-radius: 6px; padding: 6px 10px; cursor: pointer; }
-button[aria-pressed="true"] { border-color: var(--plate-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); }
-button[disabled] { opacity: 0.5; cursor: default; }
+/* Controls are at least 44px on both axes; the strip's pinned 56px is
+   unaffected, its halves being taller than that already. */
+#visor-root button {
+  font: inherit; color: var(--accent-ink); background: var(--accent);
+  border: 1px solid var(--accent); border-radius: 6px;
+  padding: 8px 12px; min-height: 44px;
+  cursor: pointer;
+  max-width: 100%;
+}
+/* After the base rule, not before: an exit is not the thing to do here, and
+   these declarations have to be the ones that win. */
+#visor-root .pane-dismiss {
+  margin-bottom: 12px;
+  background: var(--plate); color: var(--plate-ink);
+  border-color: var(--edge);
+}
+#visor-root button[aria-pressed="true"] { border-color: var(--plate-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); }
+/* Disabled is said with the fill and the cursor rather than with an opacity. */
+#visor-root button[disabled] { background: var(--edge); color: var(--plate-ink); border-color: var(--edge); cursor: default; }
 /* The colour slider is the hue wheel itself, unrolled: a gradient
    interpolated in oklch around the long way so it visits every hue once at
    the strip's lightness/chroma, and the thumb sits on the one chosen. It
    names hues 0 and 360 — every hue, which is why it reveals none (see the
-   stylesheet test). */
-input[type="range"] {
+   stylesheet test).
+
+   The control is 44px tall while the track it paints stays a 14px band
+   centred in it: `background-size` separates the target from the
+   decoration. */
+#visor-root input[type="range"] {
   appearance: none; -webkit-appearance: none;
-  flex: 1; min-width: 120px; max-width: 320px; height: 14px; margin: 0;
-  border-radius: 7px; border: 1px solid var(--edge);
-  background: linear-gradient(to right in oklch longer hue, oklch(0.62 0.14 0), oklch(0.62 0.14 360));
+  flex: 1 1 12ch; min-width: 120px; max-width: 320px;
+  height: 44px; margin: 0;
+  border: 0; background-color: transparent;
+  background-image: linear-gradient(to right in oklch longer hue, oklch(0.62 0.14 0), oklch(0.62 0.14 360));
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 100% 14px;
   accent-color: var(--accent);
 }
-input[type="range"]::-webkit-slider-thumb {
+#visor-root input[type="range"]::-webkit-slider-thumb {
   appearance: none; -webkit-appearance: none;
-  width: 22px; height: 22px; border-radius: 50%;
+  width: 24px; height: 24px; border-radius: 50%;
   background: var(--strip); border: 2px solid var(--plate);
   box-shadow: 0 0 0 1px var(--strip-edge);
 }
-input[type="range"]::-moz-range-thumb {
-  width: 18px; height: 18px; border-radius: 50%;
+#visor-root input[type="range"]::-moz-range-thumb {
+  width: 20px; height: 20px; border-radius: 50%;
   background: var(--strip); border: 2px solid var(--plate);
   box-shadow: 0 0 0 1px var(--strip-edge);
 }
-input[type="text"], input[type="password"] { font: inherit; color: inherit; background: var(--field); border: 1px solid var(--edge); border-radius: 6px; padding: 6px 8px; }
-label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
+#visor-root input[type="text"], #visor-root input[type="password"] {
+  font: inherit; color: inherit; background: var(--field);
+  border: 1px solid var(--edge); border-radius: 6px;
+  padding: 8px; min-height: 44px; box-sizing: border-box;
+  /* Shrinks to nothing rather than pushing a row wider than the drawer, and
+     stops growing at a field's worth: a petname box spanning a 1280px window
+     is harder to read, not easier. */
+  min-width: 0; max-width: min(24rem, 100%);
+}
+#visor-root label input { flex: 1 1 16ch; }
+#visor-root .sheet > input { align-self: stretch; }
+#visor-root label {
+  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
+  margin-bottom: 12px;
+  align-self: stretch;
+}
+#visor-root label > span:first-child { flex: 0 0 auto; }
 
-.app-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
-.app-row-title { flex: 1; min-width: 0; }
+/* Rows wrap rather than overlap: a name and some framework-voice facts about
+   it do not fit on one 320px line, so the facts follow under the name. */
+#visor-root .app-row, #visor-root .device-row,
+#visor-root .member-row, #visor-root .peer-row, #visor-root .sync-self {
+  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
+  align-self: stretch; padding: 6px 0;
+}
+#visor-root .app-row-title, #visor-root .device-row-name, #visor-root .member-row-name {
+  flex: 1 1 12ch; min-width: 0;
+}
 
-/* The device ceremonies: unseal, keep, the entry picker, erase. Minimal
-   on purpose — this chrome is slated for a redesign. */
-.sheet { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--edge); }
-.sheet-head { margin-bottom: 4px; }
-.sheet-error { margin-top: 2px; }
-.choice { display: flex; gap: 8px; }
-.device-row { display: flex; align-items: center; gap: 8px; align-self: stretch; }
-.device-row-name { flex: 1; min-width: 0; }
+/* The device ceremonies: unseal, keep, the entry picker, erase. */
+#visor-root .sheet { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--edge); }
+/* Larger and weighted, and still in whichever voice the sentence belongs to:
+   the framework's italic is not traded away for a heading style. */
+#visor-root .sheet-head { font-size: 16px; margin-bottom: 4px; }
+#visor-root .sheet-head .framework, #visor-root .sheet-head .user { font-weight: 600; }
+#visor-root .sheet-error { margin-top: 2px; }
+#visor-root .choice { display: flex; flex-wrap: wrap; gap: 8px; }
 
 /* Sync. An endpoint id is machine text, not a voice: monospace so it can be
    read off a screen character by character, and `user-select: all` so one
@@ -216,27 +298,34 @@ label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
    has open. A wrapping id would be one line as a placeholder and two or
    three as an id, and everything below it in the drawer — "Other devices",
    erase — would jump under the pointer at an arbitrary moment. One line
-   either way makes that swap layout-neutral. `user-select: all` still takes
-   the whole id, scrolled or not. */
-.sync-self { display: flex; align-items: center; gap: 8px; }
-.endpoint-id {
+   either way makes that swap layout-neutral.
+
+   `min-width: 0` and `max-width: 100%` are what make the scroll local:
+   without them the nowrap text sets the row's minimum width and pushes the
+   drawer sideways at 320px instead of scrolling inside its own box.
+   `tabindex="0"` on the element itself is not needed — Chromium focuses
+   overflowing scroll containers for the keyboard — but the e2e gate checks
+   that, since it is a recent behaviour. */
+#visor-root .endpoint-id {
   font-family: ui-monospace, monospace;
   user-select: all;
   white-space: nowrap;
   overflow-x: auto;
+  overscroll-behavior-x: contain;
+  display: block;
+  flex: 1 1 12ch;
+  min-width: 0; max-width: 100%;
 }
-.peer-row { display: flex; align-items: center; gap: 8px; align-self: stretch; }
-.member-row { display: flex; align-items: center; gap: 8px; align-self: stretch; }
-.member-row-name { flex: 1; min-width: 0; }
 
 /* Pairing. The code is 79 characters shown in groups of four: monospace so
    the groups line up, selectable as a whole, and wrapped at the spaces
    between groups (the only place it may break — a group broken mid-way is
    a group read wrong). */
-.pairing-code {
+#visor-root .pairing-code {
   font-family: ui-monospace, monospace;
   user-select: all;
   align-self: stretch;
+  max-width: 100%;
   line-height: 1.6;
 }
 
@@ -245,26 +334,29 @@ label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
    off this screen and another agreeing they match, so they are sized to be
    read across a desk, spaced so no two digits run together, and selectable
    like every other machine text here. */
-.pairing-sas {
+#visor-root .pairing-sas {
   font-family: ui-monospace, monospace;
   font-size: 40px;
   letter-spacing: 6px;
   user-select: all;
+  max-width: 100%;
 }
 
 /* The three voices. polyvisor speaking. */
-.framework { color: var(--quiet); font-style: italic; }
-/* The user's own words, echoed: upright, weighted, never quoted. */
-.user { font-weight: 600; font-style: normal; color: inherit; }
+#visor-root .framework { color: var(--quiet); font-style: italic; overflow-wrap: break-word; }
+/* The user's own words, echoed: upright, weighted, never quoted. A long name
+   wraps rather than being truncated or laid over the facts beside it. */
+#visor-root .user { font-weight: 600; font-style: normal; color: inherit; overflow-wrap: break-word; }
 /* A publisher's words: plated, monospace, quoted, so foreign text is
    visibly foreign wherever it lands. The plate is derived from the hue
    like everything else, but far lighter than the drawer it sits on, so it
    stays a plate at every hue. */
-.app {
+#visor-root .app {
   font-family: ui-monospace, monospace;
   background: var(--plate); color: var(--plate-ink);
   border: 1px solid var(--edge);
   border-radius: 4px; padding: 1px 5px;
+  overflow-wrap: break-word;
   quotes: '"' '"';
 }
 "#;
@@ -326,10 +418,14 @@ mod tests {
             );
         }
         assert!(chromatic > 0, "the stylesheet paints nothing from the hue");
-        // The palette both arms of the rule define, spelled once each.
+        // The palette both arms of the rule define, spelled once each — the
+        // strip's ink included, since a strip that kept its colour and lost
+        // its ink would be unreadable in exactly one of them.
         assert!(CSS.contains("#visor-root.unclaimed"));
         assert!(CSS.contains("--strip: oklch(0.62 0.14 var(--hue));"));
         assert!(CSS.contains("--strip: oklch(0.62 0 0);"));
+        assert!(CSS.contains("--strip-ink: oklch(0.16 0.04 var(--hue));"));
+        assert!(CSS.contains("--strip-ink: oklch(0.16 0 0);"));
         // No second colour syntax to smuggle a hue through.
         assert!(!CSS.contains("hsl("));
     }
diff --git a/visor/src/ui.rs b/visor/src/ui.rs
index de025ac..0745464 100644
--- a/visor/src/ui.rs
+++ b/visor/src/ui.rs
@@ -26,6 +26,7 @@
 //! colour, so the hue reaches the DOM through exactly one expression, and
 //! that expression is unreachable unless `device.status` said `open`.
 
+use dioxus::html::Key;
 use dioxus::prelude::*;
 
 use crate::kernel::{
@@ -180,6 +181,74 @@ enum Notice {
     Ended { app: AppText, reason: String },
 }
 
+/// Where the visor is asking the browser to put the keyboard.
+///
+/// The visor cannot move focus itself: the pinned stream-dom receiver's
+/// `MountedData` is `()` with `set_focus` unsupported. So focus is markup —
+/// one element carries `data-visor-focus` with a generation number, and
+/// `web/focus.ts` obeys it when that number advances. Rust keeps the
+/// decision (which element, and whether a transition is worth a move at
+/// all); the glue keeps the `.focus()` call and the one fact only a DOM
+/// has, namely whether the caret is still the visor's to move.
+///
+/// The generation is what keeps ordinary work quiet: a status read landing,
+/// a keystroke, an animation ending all re-render with the same number.
+#[derive(Clone, Copy, PartialEq, Eq, Debug, Default)]
+enum FocusWant {
+    /// Not asking — the state at boot, so a page load leaves the caret
+    /// wherever the browser put it.
+    #[default]
+    Nowhere,
+    Pane,
+    /// The half of the strip the drawer was raised from, because it closed.
+    Strip {
+        self_half: bool,
+    },
+    Confirm,
+}
+
+/// Which half of the strip a tenant belongs to, and so which half the
+/// keyboard returns to when its drawer closes: `Devices` is reached from
+/// `Settings` (the right half's) and `AppInfo` from the app list.
+fn raised_by_self_half(t: Tenant) -> bool {
+    matches!(t, Tenant::Settings | Tenant::Unseal | Tenant::Devices)
+}
+
+/// The way out of a pane, in words — a scrim press is a mouse gesture and
+/// the strip is not a toggle, so without this a keyboard cannot leave an
+/// open drawer. `None` for the two panes with nowhere to go: the app list
+/// with nothing running (where the visor rests) and the unseal ceremony
+/// (every other kernel call is `unavailable` until it succeeds).
+fn dismissal(t: Tenant, running: bool) -> Option<(&'static str, Action)> {
+    if running {
+        Some(("Return to app", Action::Close))
+    } else if t == Tenant::Apps || t == Tenant::Unseal {
+        None
+    } else {
+        Some(("Back to apps", Action::Show(Tenant::Apps)))
+    }
+}
+
+/// What a pane is, for a screen reader that has just been moved into one.
+fn pane_label(t: Tenant) -> &'static str {
+    match t {
+        Tenant::Apps => "apps",
+        Tenant::AppInfo => "the running app",
+        Tenant::Settings => "settings",
+        Tenant::Unseal => "unseal this device",
+        Tenant::Devices => "other devices",
+    }
+}
+
+// CONTRACT: `inert` is a presence attribute — `inert="false"` is still
+// inert — and stream-dom-dioxus writes `AttributeValue::Bool(false)` as the
+// string "false", removing an attribute only for `AttributeValue::None`
+// (writer.rs:738 and :724; its `is_bool_attr` list does not include
+// `inert`). So every `inert` here is an `Option<&str>`, never a `bool`.
+fn flag(yes: bool) -> Option<&'static str> {
+    yes.then_some("")
+}
+
 /// Launch `app` and give its frame the screen, with `route` as what the
 /// frame answers `polyvisor:app/route.get` with (internal.wit
 /// `shell.open-frame`): "" for a press on the app list, and the route a
@@ -507,6 +576,13 @@ pub(crate) fn Visor() -> Element {
     let mut closing = use_signal(|| false);
     // The tenant sliding out under the new one, and whether it goes left.
     let mut leaving = use_signal(|| None::<(Tenant, bool)>);
+    // Where the keyboard should be, and a generation that advances only
+    // when the visor itself caused the move (see [`FocusWant`]).
+    let mut focus = use_signal(|| (0u32, FocusWant::default()));
+    let ask_focus = use_callback(move |want: FocusWant| {
+        let next = focus.peek().0.wrapping_add(1);
+        focus.set((next, want));
+    });
 
     // Two orderings, both between a spawned read and a user's write. They
     // are `CopyValue` rather than `Signal` on purpose: a generation is
@@ -592,21 +668,28 @@ pub(crate) fn Visor() -> Element {
         let from = drawer().tenant();
         let next = drawer().reduce(action, pinned);
         match (from, next.tenant()) {
-            (Some(_), None) => {
+            (Some(t), None) => {
                 leaving.set(None);
                 closing.set(true);
+                ask_focus.call(FocusWant::Strip {
+                    self_half: raised_by_self_half(t),
+                });
             }
             (Some(a), Some(b)) if a != b => {
                 closing.set(false);
                 leaving.set(Some((a, b.ordinal() > a.ordinal())));
                 drawer.set(next);
+                ask_focus.call(FocusWant::Pane);
             }
             (None, Some(_)) => {
                 closing.set(false);
                 drawer.set(next);
+                ask_focus.call(FocusWant::Pane);
             }
             // The tenant showing is the one asked for. Still cancels a
             // close in flight: pressing the half you just left reopens it.
+            // No focus move: a press that changes nothing must not take the
+            // caret off whatever the user was in.
             _ => closing.set(false),
         }
         if from == next.tenant() {
@@ -644,8 +727,18 @@ pub(crate) fn Visor() -> Element {
     // did not ask for and cannot be asked about, so a dirty draft is simply
     // dropped there.
     let request = use_callback(move |action: Action| {
+        // While the dialog stands it is the only thing that may act. A press
+        // that arrives now is input queued before it appeared — a scrim
+        // click, a strip press already in flight — and taking it would
+        // silently replace the transition the dialog is asking about.
+        if pending().is_some() {
+            return;
+        }
         if draft() != seed() {
             pending.set(Some(action));
+            // Everything else is inert under the dialog, so the keyboard has
+            // to be put inside it or there is nothing focusable on screen.
+            ask_focus.call(FocusWant::Confirm);
         } else {
             apply.call(action);
         }
@@ -971,6 +1064,26 @@ pub(crate) fn Visor() -> Element {
         None => "pane",
     };
 
+    // At most one element carries `data-visor-focus`, so the glue never has
+    // to choose; its value is the generation `web/focus.ts` acts on.
+    let (focus_gen, focus_want) = focus();
+    let focus_tag = |want: FocusWant| (focus_want == want).then(|| focus_gen.to_string());
+    let focus_pane = focus_tag(FocusWant::Pane);
+    let focus_confirm = focus_tag(FocusWant::Confirm);
+    let focus_app_half = focus_tag(FocusWant::Strip { self_half: false });
+    let focus_self_half = focus_tag(FocusWant::Strip { self_half: true });
+
+    // `inert` is the whole of the dialog's trap: with strip, scrim and
+    // drawer inert there is nowhere for Tab to go but its three answers. An
+    // ordinary open pane is not a modal and traps nothing.
+    let confirming = pending().is_some();
+    // The app zone is the page's element, not this tree's, so the glue
+    // mirrors this marker onto it (`web/focus.ts`). True throughout the
+    // drawer's open and close animations, since it is on screen for both.
+    let app_inert = flag(tenant.is_some() || confirming);
+    // The exit the pane offers, which Escape is the keyboard spelling of.
+    let escape = tenant.and_then(|t| dismissal(t, running)).map(|(_, a)| a);
+
     // One pane's worth of drawer. Rendered twice while a switch is
     // animating — the tenant coming in and the one going out — so it is a
     // closure rather than an arm inlined in the tree. `current` is which of
@@ -1007,7 +1120,20 @@ pub(crate) fn Visor() -> Element {
             )
         };
 
+        // Only the pane that is staying offers the way out; the one sliding
+        // away is inert and about to be gone.
+        let exit = if current { dismissal(t, running) } else { None };
+
         rsx! {
+            // First in the pane, so it is the first thing Tab reaches.
+            if let Some((label, action)) = exit {
+                button {
+                    class: "pane-dismiss",
+                    onclick: move |_| request.call(action),
+                    "{label}"
+                }
+            }
+
             // Whatever happened that the user did not ask for. It lives at
             // the top of every pane because the strip has no room to say
             // it any more and no business moving to make some.
@@ -1151,7 +1277,36 @@ pub(crate) fn Visor() -> Element {
         // on the visor's side of that line — above the strip — and pushes
         // the strip, and the app zone under it, down rather than covering
         // it.
-        div { id: "visor-root", class: "{root_class}", style: painted,
+        div {
+            id: "visor-root",
+            class: "{root_class}",
+            style: painted,
+            "data-visor-app-inert": app_inert,
+            // One listener for the whole tree, and not a document one: the
+            // visor's world grants no page-level key capability, and a key
+            // pressed with the caret in an app's frame is that app's. The
+            // drawer moves the caret into its pane as it opens, so by the
+            // time there is something to dismiss the focus is in here.
+            // Residue: a caret tabbed right out of the visor into browser
+            // chrome is out of reach until it comes back.
+            onkeydown: move |e: KeyboardEvent| {
+                if e.key() != Key::Escape {
+                    return;
+                }
+                // In the dialog, Escape cancels the dialog ALONE: the parked
+                // transition is not taken and the draft is untouched.
+                if pending().is_some() {
+                    e.stop_propagation();
+                    pending.set(None);
+                    return;
+                }
+                // Otherwise it is the dismissal button by another name, and
+                // takes the same dirty-draft guard.
+                if let Some(action) = escape {
+                    e.stop_propagation();
+                    request.call(action);
+                }
+            },
             // The trusted pixels depend on nothing the page provides, so
             // the visor ships its own stylesheet as part of its own tree.
             style { "{CSS}" }
@@ -1162,11 +1317,20 @@ pub(crate) fn Visor() -> Element {
                 // where the visor rests, and a scrim over an empty app
                 // zone would be a dismissal to nowhere.
                 if running {
-                    div { id: "visor-scrim", onclick: move |_| request.call(Action::Close) }
+                    div {
+                        id: "visor-scrim",
+                        // A press target as much as the strip is, so it goes
+                        // inert under the dialog with everything else.
+                        inert: flag(confirming),
+                        onclick: move |_| request.call(Action::Close),
+                    }
                 }
                 div {
                     id: "visor-drawer",
                     class: "{drawer_class}",
+                    // Under the dialog, or shut but still sliding: Tab must
+                    // not walk into a pane that is leaving.
+                    inert: flag(confirming || shutting),
                     onanimationend: move |_| {
                         // `closing` is the whole discriminator: the bridge
                         // reports no animation name, and the close path
@@ -1182,15 +1346,32 @@ pub(crate) fn Visor() -> Element {
                         div {
                             key: "{from:?}",
                             class: if forward { "pane leave-to-left" } else { "pane leave-to-right" },
+                            // Still painted, no longer part of the page.
+                            inert: flag(true),
                             onanimationend: move |_| leaving.set(None),
                             {sheet_for(from, false)}
                         }
                     }
-                    div { key: "{t:?}", class: "{entering}", {sheet_for(t, true)} }
+                    // `tabindex="-1"`: the caret can be put here without the
+                    // pane becoming a tab stop; the name is what a screen
+                    // reader announces on arrival.
+                    div {
+                        key: "{t:?}",
+                        class: "{entering}",
+                        tabindex: "-1",
+                        role: "group",
+                        aria_label: pane_label(t),
+                        "data-visor-focus": focus_pane,
+                        {sheet_for(t, true)}
+                    }
                 }
             }
 
-            div { id: "visor-strip",
+            div {
+                id: "visor-strip",
+                // Under the dialog only: an open pane is not a modal, so the
+                // strip stays reachable from one.
+                inert: flag(confirming),
                 // Left half: what is running. Both halves need a kernel
                 // that answers, so neither is offered before the seal
                 // opens; the ceremony the boot raised is what the user has
@@ -1199,6 +1380,7 @@ pub(crate) fn Visor() -> Element {
                     id: "visor-app",
                     disabled: "{locked}",
                     aria_pressed: "{on_apps}",
+                    "data-visor-focus": focus_app_half,
                     onclick: move |_| {
                         request.call(Action::Show(if running { Tenant::AppInfo } else { Tenant::Apps }))
                     },
@@ -1227,6 +1409,7 @@ pub(crate) fn Visor() -> Element {
                     id: "visor-self",
                     disabled: "{locked}",
                     aria_pressed: "{on_self}",
+                    "data-visor-focus": focus_self_half,
                     onclick: move |_| request.call(Action::Show(Tenant::Settings)),
                     div { id: "visor-circle", "{user_glyph}" }
                     div { class: "stack",
@@ -1255,7 +1438,15 @@ pub(crate) fn Visor() -> Element {
             // answers are the three things a user could mean, and none of
             // them is "lose it quietly".
             if let Some(action) = pending() {
-                div { id: "visor-confirm", role: "dialog",
+                div {
+                    id: "visor-confirm",
+                    role: "dialog",
+                    aria_modal: "true",
+                    aria_label: "unsaved changes",
+                    // Focusable, so the caret lands on the dialog rather than
+                    // on one of three answers none of which is safe to guess.
+                    tabindex: "-1",
+                    "data-visor-focus": focus_confirm,
                     span { class: "{Voice::Framework.class()}", "unsaved changes" }
                     button {
                         onclick: move |_| {
diff --git a/web/boot.ts b/web/boot.ts
index 48afae4..3dcb5d8 100644
--- a/web/boot.ts
+++ b/web/boot.ts
@@ -9,6 +9,7 @@
 import { artifactsFromEnvelope } from "@polyengine/runtime/embedder";
 import { ComponentException } from "@polyengine/protocol";
 
+import { attachVisorFocus } from "./focus.ts";
 import { mountProducer } from "./mount.ts";
 import { popupReturn } from "./oauth.ts";
 import { proxyInterfaces } from "./rpc.ts";
@@ -911,6 +912,12 @@ async function main(): Promise<void> {
     onError: (err) => fatal(String((err as Error)?.message ?? err)),
   });
 
+  // The visor's focus requests, and the app zone's inertness while the
+  // drawer covers it (web/focus.ts). Attached after the mount because the
+  // observer wants the element the producer will write into; the module's
+  // first pass runs at once, so nothing already committed is missed.
+  attachVisorFocus(el("visor"), el("app-zone"));
+
   // ...and one that arrived DURING the mount, which paints into the same
   // node. The mount had already claimed the element by then, so the text has
   // to be restated rather than merely flagged.
diff --git a/web/focus.ts b/web/focus.ts
new file mode 100644
index 0000000..b13b8f5
--- /dev/null
+++ b/web/focus.ts
@@ -0,0 +1,105 @@
+// Where the keyboard goes, when the visor says so.
+//
+// The visor is a stream-dom producer and cannot move focus itself: the
+// pinned receiver's `MountedData` is `()` with `set_focus` unsupported. So
+// the visor states its intent in markup and this module carries it out.
+// Two attributes, both written by visor/src/ui.rs:
+//
+//   * `data-visor-focus` on at most one element, valued with a generation
+//     number that advances only when the visor itself caused a transition
+//     worth moving the caret for. Anything else re-renders with the same
+//     number and moves nothing.
+//   * `data-visor-app-inert` on `#visor-root`, mirrored onto `#app-zone` —
+//     the app zone is the page's element, not the visor's tree, so the
+//     visor cannot mark it itself, and something has to or Tab walks out of
+//     an open drawer into the app under the scrim.
+//
+// `inert` is a presence attribute (`inert="false"` is still inert), hence
+// `toggleAttribute` rather than a stringified boolean.
+
+/**
+ * Serve the visor's focus requests for as long as the page lives. `visor` is
+ * the element the producer is mounted into, `appZone` the one app frames go
+ * into.
+ */
+export function attachVisorFocus(
+  visor: HTMLElement,
+  appZone: HTMLElement,
+): void {
+  /** The last generation served — advanced even when the move below is
+   * declined, because a request is spent when it is made. Deferring one
+   * would fire it later, on an unrelated commit, which is the focus theft
+   * this avoids. */
+  let lastGen = -1;
+  /** Was the dialog up at the previous commit? Distinct from
+   * `beforeDialog === null`, which is also "it was up, and the caret was not
+   * ours to remember". */
+  let dialogUp = false;
+  let beforeDialog: HTMLElement | null = null;
+
+  /** Still on the page and not inside something inert — `focus()` on an
+   * inert element silently does nothing. */
+  const reachable = (el: HTMLElement | null): el is HTMLElement =>
+    el !== null && el.isConnected && el.closest("[inert]") === null;
+
+  /** Is the caret the visor's to move? It is not when it sits in an app's
+   * frame: a drawer opening because a session ended elsewhere must not
+   * reach in and take it. */
+  const ours = (): boolean => {
+    const active = document.activeElement;
+    return active === null || active === document.body ||
+      visor.contains(active);
+  };
+
+  // `preventScroll`: the target is already on screen, and scrolling the page
+  // to it would move the strip, which is the one thing that does not move.
+  const put = (el: HTMLElement) => el.focus({ preventScroll: true });
+
+  function settle(): void {
+    const root = visor.querySelector("#visor-root");
+    appZone.toggleAttribute(
+      "inert",
+      root?.hasAttribute("data-visor-app-inert") ?? false,
+    );
+
+    const dialog = visor.querySelector<HTMLElement>("#visor-confirm");
+    if (dialog !== null && !dialogUp) {
+      dialogUp = true;
+      const active = document.activeElement;
+      beforeDialog = active instanceof HTMLElement && visor.contains(active)
+        ? active
+        : null;
+    }
+
+    let moved = false;
+    const target = visor.querySelector<HTMLElement>("[data-visor-focus]");
+    const gen = target === null ? Number.NaN : Number(target.dataset.visorFocus);
+    if (target !== null && Number.isFinite(gen) && gen > lastGen) {
+      lastGen = gen;
+      if (ours() && reachable(target)) {
+        put(target);
+        moved = true;
+      }
+    }
+
+    if (dialog === null && dialogUp) {
+      dialogUp = false;
+      const back = beforeDialog;
+      beforeDialog = null;
+      // Cancel answered nothing and nothing moved, so the caret goes back
+      // where it was. Save and Revert go on to a transition, and that
+      // transition's own request wins: it is about where the user is now.
+      if (!moved && ours() && reachable(back)) put(back);
+    }
+  }
+
+  // stream-dom applies a chunk of mutations synchronously, so the callback
+  // runs once per chunk with the commit already whole.
+  new MutationObserver(settle).observe(visor, {
+    subtree: true,
+    childList: true,
+    attributes: true,
+    attributeFilter: ["data-visor-focus", "data-visor-app-inert", "inert"],
+  });
+  settle();
+}