diff --git a/e2e/admin-home.spec.ts b/e2e/admin-home.spec.ts
index d2e1de5..5842e5d 100644
--- a/e2e/admin-home.spec.ts
+++ b/e2e/admin-home.spec.ts
@@ -243,17 +243,17 @@ test.describe('mobile', () => {
     await advancedToggle(page).click()
     await page.getByRole('button', { name: 'Device', exact: true }).click()
 
-    // Network and Security are collapsible, closed by default; open both.
+    // Network and After a power cut are collapsible, closed by default; open both.
     await page.getByText('Network', { exact: true }).click()
     await expect(page.getByLabel('WiFi SSID')).toBeVisible()
     await expect(page.getByLabel('WiFi password')).toBeVisible()
     await expect(page.getByRole('button', { name: 'Save to device', exact: true })).toBeVisible()
 
-    await page.getByText('Security', { exact: true }).click()
-    await expect(page.getByRole('heading', { name: 'Boot PIN', exact: true })).toBeVisible()
-    const unattendedWarning = page.getByText(/A boot PIN is typed over the USB cable/)
+    await page.getByText('After a power cut', { exact: true }).click()
+    await page.locator('summary', { hasText: 'Boot PIN' }).click()
+    const unattendedWarning = page.getByText(/a signer with a boot PIN stays locked/)
     await expect(unattendedWarning).toBeVisible()
-    await expect(unattendedWarning).toContainText('signing and remote management cannot resume')
+    await expect(unattendedWarning).toContainText('Signing and remote management stop')
     await expect(unattendedWarning).toContainText('use a vault key with phone unlock instead')
 
     const overflow = await page.evaluate(
diff --git a/src/app.css b/src/app.css
index 818920b..09744ad 100644
--- a/src/app.css
+++ b/src/app.css
@@ -145,6 +145,7 @@ body {
 }
 .field-input::placeholder { color: #555; }
 .field-input:focus { outline: none; border-color: var(--green-dim); }
+.field-input:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
 .field-input:disabled { opacity: 0.4; }
 select.field-input { cursor: pointer; }
 .field-hint { font-size: 0.8rem; color: var(--text-dim); line-height: 1.5; }
diff --git a/src/components/DevicePanel.svelte b/src/components/DevicePanel.svelte
index 256ae51..8d12be9 100644
--- a/src/components/DevicePanel.svelte
+++ b/src/components/DevicePanel.svelte
@@ -1,14 +1,17 @@
 <script lang="ts">
-  // Device — everything about the hardware and how it's reached: connection
-  // details, network mode, firmware, security (PIN, bridge secret), the bridge,
-  // and the danger zone. Replaces the old Connectivity, Firmware and Danger
-  // tabs plus the device half of Settings.
+  // Device — one question answered first ("is my signer all right, and if
+  // not, what do I do?"), then everything else grouped into one list:
+  // after-a-power-cut recovery (modes, phones, vault key, boot PIN), firmware,
+  // backup, network (incl. the bridge secret), display and light, diagnostics,
+  // bridge, and the danger zone.
   import { tick } from 'svelte'
   import {
     device, serialTransport, httpTransport, bridgeRestart, mgmtRevokeClient,
     relaySetLogQuiet, ensureBridgeAuth, usbDisplayFlip, setDisplayFlip,
   } from '../lib/device.svelte.js'
-  import { deviceSummaryRows, type DeviceSummaryInput, type SummaryRowId } from '../lib/device-summary.js'
+  import {
+    deviceSummaryRows, attentionRows, type DeviceSummaryInput, type AttentionRowId,
+  } from '../lib/device-summary.js'
   import { FrameType, buildSetPin, buildSetBridgeSecret, buildFactoryReset } from '../lib/frame.js'
   import { getFirmwareVersion } from '../lib/device.svelte.js'
   import { storageGauge } from '../lib/storage-gauge.js'
@@ -30,6 +33,8 @@
   import Backup from './Backup.svelte'
   import PasswordReveal from './PasswordReveal.svelte'
   import ConfirmButton from './ConfirmButton.svelte'
+  import VaultUnlock from './VaultUnlock.svelte'
+  import TogglePair from './TogglePair.svelte'
 
   const overUsb = $derived(device.mode === 'serial')
   const overBridge = $derived(device.mode === 'http')
@@ -54,10 +59,6 @@
     return () => window.removeEventListener(PAIRING_BACKUP_EVENT, refresh)
   })
 
-  function backupTime(at: number): string {
-    return new Date(at).toLocaleString()
-  }
-
   function modeLabel(): string {
     if (device.mode === 'serial') return 'USB cable'
     if (device.mode === 'relay') return 'WiFi'
@@ -108,7 +109,7 @@
   }
   // Update nudge: firmware updating shouldn't rely on the owner scrolling to
   // the Firmware section unprompted. When the bundle is newer than what the
-  // connected signer reports, a banner at the top points them there.
+  // connected signer reports, a Needs-attention card points them there.
   let updateInfo = $state<UpdateCheck | null>(null)
   let firmwareSection = $state<HTMLElement | null>(null)
   const runningVersion = $derived(device.mode === 'relay'
@@ -164,6 +165,10 @@
   const trimmed = $derived(device.mode === 'relay' && device.relayStatus?.truncated === true)
   const kb = (n: number) => `${Math.round(n / 1024)} KB`
 
+  // A relay signer that stopped answering status polls: what's on screen may
+  // be stale, and the global status card already offers Retry/Disconnect.
+  const statusLost = $derived(device.mode === 'relay' && device.relayStatus === null && !!device.error)
+
   // Quiet logging: warnings only, which also calms activity LEDs wired to the
   // log UART (the T-Display's blue light flashes with every log line).
   let logQuietPending = $state(false)
@@ -179,6 +184,7 @@
   let pinStatus = $state<string | null>(null)
   let pinPending = $state(false)
   let showPin = $state(false)
+  const pinValid = $derived(pinValue.length >= 4 && pinValue.length <= 8 && /^\d+$/.test(pinValue))
 
   async function handleSetPin() {
     if (pinValue && (pinValue.length < 4 || pinValue.length > 8 || !/^\d+$/.test(pinValue))) {
@@ -262,7 +268,7 @@
     finally { bridgeBusy = false }
   }
 
-  // --- Encrypt at rest / vault key (USB only) ---
+  // --- Vault key (Encrypt at rest, USB only) ---
   // The vault key encrypts the signer's stored seeds and lives only with the
   // host (this browser), never on the device. The firmware gives no read-back
   // of "encrypted but unlocked", so the card goes by what this browser holds:
@@ -303,7 +309,7 @@
     vaultStatus = null
     try {
       await ensureBridgeAuth()
-      device.awaitingButton = 'Confirm on your signer: it shows “Encrypt at rest?” — press its button within 30 seconds.'
+      device.awaitingButton = 'Confirm on your signer: it shows “Encrypt at rest?”. Press its button within 30 seconds.'
       try {
         await serialVaultSet(serialTransport, key)
       } finally {
@@ -317,11 +323,11 @@
       // this, usbHealth's at_rest would stay stale until the next reconnect
       // and the override above would never get to stand down.
       void getFirmwareVersion().then((info) => { if (info) usbHealth = info })
-      vaultStatus = 'Encryption at rest is on. The key stays in this browser — keep your off-site copy safe.'
+      vaultStatus = 'Encryption at rest is on. The key stays in this browser, so keep your off-site copy safe.'
     } catch (e) {
       // The key is already stored (and visible below) whatever happened; a
       // missed ACK after the signer re-encrypted its seeds cannot orphan it.
-      vaultStatus = `${e instanceof Error ? e.message : 'Failed'} — your vault key is shown above and kept in this browser. If the signer sealed itself anyway, it will ask for this key on next boot.`
+      vaultStatus = `${e instanceof Error ? e.message : 'Failed'}. Your vault key is shown above and kept in this browser. If the signer sealed itself anyway, it will ask for this key on next boot.`
     } finally {
       vaultPending = false
     }
@@ -333,7 +339,7 @@
     vaultStatus = null
     try {
       await ensureBridgeAuth()
-      device.awaitingButton = 'Confirm on your signer: it shows “Disable encryption?” — press its button within 30 seconds.'
+      device.awaitingButton = 'Confirm on your signer: it shows “Disable encryption?”. Press its button within 30 seconds.'
       try {
         await serialVaultSet(serialTransport, null)
       } finally {
@@ -429,38 +435,57 @@
    *  value this build does not recognise, not for lack of any report. */
   const atRestUnrecognised = $derived(currentMode === null && encryptionKnown === null && atRestReport !== undefined)
   let chosenMode = $state<UnlockMode | null>(null)
-  let modesSection = $state<HTMLElement | null>(null)
+  let howItUnlocksHeading = $state<HTMLElement | null>(null)
+  let switchButtonEls = $state<(HTMLButtonElement | null)[]>([null, null, null])
   let noEncryptionAck = $state(false)
   let clearPinAck = $state(false)
   let clearPinConfirming = $state(false)
 
   const NO_ENCRYPTION_RISK = 'Anyone who takes the board can copy every key off it over USB in minutes. If it is taken, I treat every identity on it as stolen.'
+  const noEncryptionRiskText = $derived(
+    NO_ENCRYPTION_RISK + ((effectivePhoneCount ?? 0) > 0 ? ' Every phone stops being able to unlock it.' : ''),
+  )
 
   const MODES: { id: UnlockMode; name: string; after: string; taken: string }[] = [
-    {
-      id: 'none',
-      name: 'No encryption',
-      after: 'Signs again straight away.',
-      taken: 'They can copy every key off it over USB in minutes. Treat every identity on it as stolen.',
-    },
     {
       id: 'phone',
       name: 'Phone unlock',
-      after: 'Your phone shows a notification: one tap and its screen lock.',
+      after: 'Your phone shows a notification. One tap and its screen lock.',
       taken: 'Keys stay sealed unless you tap a prompt you were not expecting.',
     },
     {
       id: 'sapwood',
       name: 'Sapwood or PIN only',
-      after: 'Unlock from Sapwood, or type the PIN on the cable. The slowest recovery.',
+      after: 'Unlock from Sapwood, or type the PIN over the cable. The slowest recovery.',
       taken: 'Keys stay sealed.',
     },
+    {
+      id: 'none',
+      name: 'No encryption',
+      after: 'Signs again straight away.',
+      taken: 'Every key can be copied off it.',
+    },
   ]
 
+  function switchToMode(i: number) {
+    chosenMode = MODES[i].id
+    noEncryptionAck = false
+    void tick().then(() => {
+      const container = document.getElementById(`mode-steps-${MODES[i].id}`)
+      const focusable = container?.querySelector<HTMLElement>('input, button, [tabindex="-1"]')
+      focusable?.focus()
+    })
+  }
+
+  function cancelSwitch(i: number) {
+    chosenMode = null
+    void tick().then(() => switchButtonEls[i]?.focus())
+  }
+
   function showNoEncryption() {
     chosenMode = 'none'
     noEncryptionAck = false
-    void openAndScroll(() => { modesOpen = true }, () => modesSection)
+    void openAndScroll(() => { modesOpen = true }, () => howItUnlocksHeading)
   }
 
   // --- Danger zone ---
@@ -504,7 +529,7 @@
   async function handleReset() {
     resetPending = true
     resetResult = null
-    device.awaitingButton = 'Hold the signer’s button to confirm the wipe — it then erases and verifies every region, which can take up to a minute.'
+    device.awaitingButton = 'Hold the signer’s button to confirm the wipe. It then erases and verifies every region, which can take up to a minute.'
     try {
       const frame = overBridge
         ? await httpTransport.factoryReset()
@@ -524,14 +549,13 @@
     }
   }
 
-  // --- "Your signer" summary: one row per concern, worst first. Each row's
-  // button opens the matching section below and scrolls to it. ---
+  // --- Needs attention + section open state: each card's action opens and
+  // scrolls to the matching section below. ---
   let backupSection = $state<HTMLElement | null>(null)
   let diagnosticsSection = $state<HTMLElement | null>(null)
 
   let firmwareOpen = $state(false)
   let modesOpen = $state(false)
-  let securityOpen = $state(false)
   let backupOpen = $state(false)
   let networkOpen = $state(false)
   let displayOpen = $state(false)
@@ -539,19 +563,34 @@
   let bridgeOpen = $state(false)
   let dangerOpen = $state(false)
 
+  // The bench job's own section starts open when there is nothing to unlock
+  // with yet and the mode calls for a phone: the owner's very next action is
+  // "Add a phone", so do not make them click twice to see it.
+  let modesOpenInit = false
+  $effect(() => {
+    if (modesOpenInit) return
+    if ((effectivePhoneCount ?? null) === 0 && (currentMode === 'phone' || currentMode === 'sapwood')) {
+      modesOpen = true
+      modesOpenInit = true
+    }
+  })
+
   async function openAndScroll(open: () => void, target: () => HTMLElement | null) {
     open()
     await tick()
-    target()?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    const reduceMotion = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches
+    target()?.scrollIntoView({ behavior: reduceMotion ? 'auto' : 'smooth', block: 'start' })
   }
 
-  function handleSummaryAction(id: SummaryRowId) {
+  function handleAttentionAction(id: AttentionRowId) {
     if (id === 'firmware') void openAndScroll(() => { firmwareOpen = true }, () => firmwareSection)
-    else if (id === 'power-cut') void openAndScroll(() => { modesOpen = true }, () => modesSection)
+    else if (id === 'not-encrypted') void openAndScroll(() => { modesOpen = true }, () => howItUnlocksHeading)
     else if (id === 'backup') void openAndScroll(() => { backupOpen = true }, () => backupSection)
-    else void openAndScroll(() => { diagnosticsOpen = true }, () => diagnosticsSection)
+    else void openAndScroll(() => { diagnosticsOpen = true }, () => diagnosticsSection) // storage, health
   }
 
+  const locked = $derived(overUsb && device.masters.some((m) => m.locked === true))
+
   const summaryInput = $derived<DeviceSummaryInput>({
     updateAvailable: !!updateInfo?.upgrade,
     updateVersion: updateInfo?.latest ?? null,
@@ -563,531 +602,553 @@
     phoneCount: effectivePhoneCount,
     atRestUnrecognised,
     overUsb,
+    locked,
     needsBackup: pairingBackup.needsBackup,
     lastExportAt: pairingBackup.lastExportAt,
     crash: !!lastReset?.crash,
     fragmented,
     recovering: !!recoveryReason,
     storageState: storage?.state ?? null,
-    modeLabel: modeLabel(),
+    storagePct: storage?.pct ?? null,
+    statusLost,
   })
   const summaryRows = $derived(deviceSummaryRows(summaryInput))
-
-  const powerCutStateWord = $derived(
-    currentMode === 'phone' ? 'Phone unlock'
-      : currentMode === 'sapwood' ? 'Sapwood or PIN only'
-        : currentMode === 'none' ? 'No encryption'
-          : 'Unknown',
-  )
-  const securityStateWord = $derived(!overUsb ? 'USB only' : vaultStored ? 'Encrypted' : 'Not encrypted')
-  const backupStateWord = $derived(!overUsb ? 'USB only' : pairingBackup.needsBackup ? 'Needed' : 'Backed up')
+  const attention = $derived(attentionRows(summaryInput))
+
+  const powerCutStateWord = $derived(summaryRows.find((r) => r.id === 'power-cut')?.text ?? '')
+  const powerCutDot = $derived(summaryRows.find((r) => r.id === 'power-cut')?.dot ?? 'unknown')
+  const firmwareStateWord = $derived(summaryRows.find((r) => r.id === 'firmware')?.text ?? '')
+  const firmwareDot = $derived(summaryRows.find((r) => r.id === 'firmware')?.dot ?? 'unknown')
+  const backupStateWord = $derived(summaryRows.find((r) => r.id === 'backup')?.text ?? '')
+  const backupDot = $derived(summaryRows.find((r) => r.id === 'backup')?.dot ?? 'unknown')
   const networkStateWord = $derived(
     device.mode === 'relay' ? 'WiFi' : device.mode === 'serial' ? 'USB cable' : device.mode === 'http' ? 'Bridge' : '',
   )
   const displayStateWord = $derived(screenFlip === null ? '' : screenFlip ? 'Flipped' : 'Upright')
   const diagnosticsStateWord = $derived(
-    lastReset?.crash || fragmented || (storage && storage.state !== 'ok') ? 'Attention' : 'OK',
+    lastReset?.crash || fragmented || (storage && storage.state !== 'ok') ? 'Needs a look' : 'OK',
   )
   const bridgeStateWord = $derived(typeof device.bridgeInfo?.mode === 'string' ? device.bridgeInfo.mode : '')
 </script>
 
 <div class="device-panel">
-  {#if pairingBackup.needsBackup}
-    <section class="card pairing-backup-warning" aria-live="polite">
-      <h2 class="section-title">Pairing backup required</h2>
-      <p class="hint">
-        {#if pairingBackup.lastExportAt}
-          App pairings changed after this browser's recorded encrypted backup ({backupTime(pairingBackup.lastExportAt)}).
-        {:else}
-          App pairings changed and this browser has not recorded a completed encrypted pairing backup.
-        {/if}
-        A reset or reflash would make the affected apps pair again. {#if overUsb}Export a fresh backup below and keep its passphrase separately.{:else}Connect this signer by USB to export a fresh backup; the signer will ask for a physical button confirmation.{/if}
-      </p>
-    </section>
-  {/if}
+  <VaultUnlock />
 
-  <!-- Your signer: one bold row per concern, worst first. -->
-  <section class="your-signer">
-    <h2 class="section-title">Your signer</h2>
-    <div class="summary-rows">
-      {#each summaryRows as row (row.id)}
-        <div class="summary-row">
-          <span class="summary-lead">
+  {#if attention.length}
+    <section class="attention-block" aria-label="Needs attention">
+      {#each attention as row, i (row.id)}
+        <div class="card attention-card attention-{row.dot}">
+          <div class="attention-lead">
             <span class="dot dot-{row.dot}" aria-hidden="true"></span>
-            <span class="summary-label">{row.label}</span>
-          </span>
-          <span class="summary-text">{row.text}</span>
+            <span class="attention-label">{row.label}</span>
+          </div>
+          <p class="attention-text">{row.text}</p>
           {#if row.actionLabel}
-            <button class="btn btn-secondary btn-sm summary-action" onclick={() => handleSummaryAction(row.id)}>
-              {row.actionLabel}
-            </button>
+            <button
+              class={i === 0 ? 'btn btn-primary btn-sm attention-action' : 'btn btn-secondary btn-sm attention-action'}
+              onclick={() => handleAttentionAction(row.id)}
+            >{row.actionLabel}</button>
           {/if}
         </div>
       {/each}
-    </div>
-  </section>
-
-  <!-- Firmware -->
-  <details class="device-section" bind:this={firmwareSection} bind:open={firmwareOpen}>
-    <summary><span class="summary-title">Firmware</span><span class="summary-state">{updateInfo?.upgrade ? 'Update available' : 'Up to date'}</span></summary>
-    <OtaUpdate heading={false} />
-  </details>
+    </section>
+  {/if}
 
-  <!-- After a power cut: modes and phones -->
-  {#if overUsb || device.mode === 'relay'}
-    <details class="device-section" bind:this={modesSection} bind:open={modesOpen}>
-      <summary><span class="summary-title">After a power cut</span><span class="summary-state">{powerCutStateWord}</span></summary>
-      <p class="hint">How this signer recovers its keys after a restart. Pick the option that suits
-        where it lives.</p>
-      <div class="modes">
-        {#each MODES as mode (mode.id)}
-          <div class="card mode" class:mode-current={currentMode === mode.id}>
-            <div class="mode-head">
-              <span class="mode-name">{mode.name}</span>
-              {#if currentMode === mode.id}<span class="tag tag--green">current</span>{/if}
-            </div>
-            <p class="hint-sm"><span class="mode-label">After a power cut:</span> {mode.after}</p>
-            <p class="hint-sm"><span class="mode-label">If someone takes the board:</span> {mode.taken}</p>
-            {#if currentMode !== mode.id && chosenMode !== mode.id}
-              <button class="btn btn-ghost btn-sm" onclick={() => { chosenMode = mode.id; noEncryptionAck = false }}>
-                Switch to this
-              </button>
-            {/if}
-            {#if chosenMode === mode.id && currentMode !== mode.id}
-              <div class="mode-steps">
-                {#if mode.id === 'phone'}
-                  {#if currentMode === null}
-                    <p class="hint-sm">Phone unlock needs encryption on. Turn on Encrypt at rest
-                      (Security{overUsb ? ', below' : ', over the USB cable'}), then add a phone
-                      below over the cable. Add two if you can, so one lost abroad does not leave
-                      the signer locked.</p>
-                  {:else}
-                    <p class="hint-sm">Add a phone below{overUsb ? '' : ', with the signer on the USB cable'}. Encryption is already on.</p>
-                  {/if}
-                {:else if mode.id === 'sapwood'}
-                  {#if (effectivePhoneCount ?? 0) > 0}
-                    <p class="hint-sm">Revoke each phone below. Encryption stays on.</p>
-                  {:else}
-                    <p class="hint-sm">Turn on Encrypt at rest (Security{overUsb ? ', below' : ', over the USB cable'}), or set a boot PIN.</p>
-                  {/if}
-                {:else}
-                  {#if !overUsb}
-                    <p class="hint-sm">Turning encryption off needs the signer on the USB cable.</p>
-                  {:else}
-                    <label class="hint-sm ack">
-                      <input type="checkbox" bind:checked={noEncryptionAck} disabled={vaultPending} />
-                      {NO_ENCRYPTION_RISK}{#if (effectivePhoneCount ?? 0) > 0}&#32;Every phone stops being able to unlock it.{/if}
-                    </label>
-                    {#if vaultStored}
-                      <button class="btn btn-danger btn-sm" disabled={!noEncryptionAck || vaultPending}
-                        onclick={async () => {
-                          await handleVaultDisable()
-                          if (!vaultStored) chosenMode = null
-                          noEncryptionAck = false
-                        }}>
-                        {vaultPending ? 'Waiting for the button…' : 'Turn encryption off'}
+  <div class="section-group">
+    <!-- After a power cut: modes, phones, vault key, boot PIN -->
+    {#if overUsb || device.mode === 'relay'}
+      <details class="section-row" bind:open={modesOpen}>
+        <summary>
+          <h3 class="section-row-title">After a power cut</h3>
+          <span class="section-row-state"><span class="dot dot-{powerCutDot}" aria-hidden="true"></span>{powerCutStateWord}</span>
+        </summary>
+        <p class="hint">How this signer gets its keys back after a restart.</p>
+        <div class="power-cut-grid">
+          <div class="power-cut-left">
+            <UnlockPhones bind:count={phoneCount} refresh={phonesRefresh} />
+          </div>
+          <div class="power-cut-right">
+            <h4 class="sub-title" bind:this={howItUnlocksHeading} tabindex="-1">How it unlocks</h4>
+            <div class="mode-list">
+              {#each MODES as mode, i (mode.id)}
+                <div class="mode-row">
+                  <div class="mode-row-head">
+                    <span class="mode-name">{mode.name}</span>
+                    {#if currentMode === mode.id}<span class="tag tag--green">Current</span>{/if}
+                    {#if currentMode !== mode.id && chosenMode !== mode.id}
+                      <button class="btn btn-secondary btn-sm mode-switch" bind:this={switchButtonEls[i]}
+                        onclick={() => switchToMode(i)}>
+                        Switch
                       </button>
-                      {#if vaultStatus}<p class="hint-sm status">{vaultStatus}</p>{/if}
-                    {:else}
-                      <p class="hint-sm">This browser holds no vault key for the signer. If it has a
-                        boot PIN, clear the PIN in Security, below.</p>
                     {/if}
+                  </div>
+                  <p class="hint-sm"><span class="mode-label">After a power cut:</span> {mode.after}</p>
+                  <p class="hint-sm"><span class="mode-label">If someone takes the board:</span> {mode.taken}</p>
+                  {#if chosenMode === mode.id && currentMode !== mode.id}
+                    <div class="mode-steps" id={`mode-steps-${mode.id}`}>
+                      {#if mode.id === 'phone'}
+                        {#if currentMode === null}
+                          <p class="hint-sm" tabindex="-1">Phone unlock needs encryption on.
+                            {#if overUsb}Turn it on under Vault key, below,{:else}Connect by USB to turn encryption on, then{/if}
+                            then add a phone over the cable. Add two if you can, so losing one does
+                            not leave the signer locked.</p>
+                        {:else}
+                          <p class="hint-sm" tabindex="-1">Add a phone above{overUsb ? '' : ', with the signer on the USB cable'}. Encryption is already on.</p>
+                        {/if}
+                      {:else if mode.id === 'sapwood'}
+                        {#if (effectivePhoneCount ?? 0) > 0}
+                          <p class="hint-sm" tabindex="-1">Revoke each phone above. Encryption stays on.</p>
+                        {:else}
+                          <p class="hint-sm" tabindex="-1">Turn on encryption under Vault key, below, or set a boot PIN.</p>
+                        {/if}
+                      {:else}
+                        {#if !overUsb}
+                          <p class="hint-sm" tabindex="-1">Turning encryption off needs the signer on the USB cable.</p>
+                        {:else}
+                          <label class="hint-sm ack">
+                            <input type="checkbox" bind:checked={noEncryptionAck} disabled={vaultPending} />
+                            {noEncryptionRiskText}
+                          </label>
+                          {#if vaultStored}
+                            <button class="btn btn-danger btn-sm" disabled={!noEncryptionAck || vaultPending}
+                              onclick={async () => {
+                                await handleVaultDisable()
+                                if (!vaultStored) chosenMode = null
+                                noEncryptionAck = false
+                              }}>
+                              {vaultPending ? 'Waiting for the button…' : 'Turn encryption off'}
+                            </button>
+                            {#if vaultStatus}<p class="hint-sm status">{vaultStatus}</p>{/if}
+                          {:else}
+                            <p class="hint-sm">This browser holds no vault key for the signer. If it
+                              has a boot PIN, clear the PIN below.</p>
+                          {/if}
+                        {/if}
+                      {/if}
+                      <button class="btn btn-ghost btn-sm" onclick={() => cancelSwitch(i)}>Cancel</button>
+                    </div>
                   {/if}
+                </div>
+              {/each}
+            </div>
+            {#if currentMode === null}
+              {#if atRestUnrecognised}
+                <p class="hint-sm">Your signer reported a setting this version of Sapwood doesn't
+                  know. Update Sapwood.</p>
+              {:else if overUsb}
+                <p class="hint-sm">This browser holds no vault key for the signer, and the signer
+                  does not say whether it has a boot PIN. With neither, it runs without encryption.</p>
+              {:else}
+                <p class="hint-sm">Over WiFi, Sapwood can tell only from the phones listed to the
+                  side. Connect by USB to see whether this browser holds the signer's vault key.</p>
+              {/if}
+            {/if}
+            <details class="disclosure">
+              <summary>Why is there no automatic phone unlock?</summary>
+              <p class="hint-sm">Anyone holding the board can make it ask for its key, and a phone
+                that answered by itself would hand it over: no safer than no encryption, while
+                looking safer.</p>
+            </details>
+
+            {#if !overUsb}
+              <h4 class="sub-title">Vault key</h4>
+              <p class="hint">The boot PIN and vault key are changed over USB. Plug the signer into
+                this computer and connect by cable.</p>
+            {:else}
+              <h4 class="sub-title">Vault key</h4>
+              <p class="hint">Encrypts the keys stored on the signer. The key lives in this browser,
+                never on the signer, so a stolen signer yields only ciphertext.</p>
+              {#if vaultLocked}
+                <p class="warn-text">This signer is locked. Unlock it above before changing
+                  encryption.</p>
+              {:else if !vaultDeviceKey}
+                <p class="hint-sm">Add an identity to the signer first.</p>
+              {:else if vaultEscrowKey}
+                <div class="vault-escrow">
+                  <p class="warn-text">Store this vault key somewhere safe outside this browser,
+                    such as a password manager or on paper, before you seal the signer. Without it,
+                    a sealed signer cannot be unlocked.</p>
+                  <div class="uri-box"><code>{vaultEscrowKey}</code></div>
+                  <div class="inline-form">
+                    <button class="btn btn-secondary btn-sm" disabled={vaultPending}
+                      onclick={async () => { vaultCopied = await copyText(vaultEscrowKey ?? '') }}>
+                      {vaultCopied ? 'Copied ✓' : 'Copy'}
+                    </button>
+                    <button class="btn btn-secondary btn-sm" disabled={vaultPending}
+                      onclick={() => {
+                        const url = URL.createObjectURL(new Blob([`${vaultEscrowKey}\n`], { type: 'text/plain' }))
+                        const a = document.createElement('a')
+                        a.href = url
+                        a.download = `heartwood-vault-key-${vaultDeviceKey?.slice(0, 8) ?? 'signer'}.txt`
+                        a.click()
+                        URL.revokeObjectURL(url)
+                      }}>
+                      Download
+                    </button>
+                  </div>
+                  <label class="hint-sm vault-escrow-tick">
+                    <input type="checkbox" bind:checked={vaultEscrowTick} disabled={vaultPending} />
+                    I have stored this key outside this browser
+                  </label>
+                  <div class="inline-form">
+                    <button class="btn btn-primary btn-sm"
+                      disabled={vaultPending || !vaultEscrowTick}
+                      onclick={handleVaultSeal}>
+                      {vaultPending ? 'Waiting for the button…' : 'Seal the signer now'}
+                    </button>
+                    <button class="btn btn-ghost btn-sm" disabled={vaultPending}
+                      onclick={() => { if (vaultDeviceKey) removeVaultKey(vaultDeviceKey); vaultEscrowKey = null }}>
+                      Discard key
+                    </button>
+                  </div>
+                </div>
+              {:else if vaultStored}
+                <p class="hint-sm">This browser holds a vault key for this signer.</p>
+                <div class="vault-escrow">
+                  <p class="hint-sm">Store this somewhere safe off-site (e.g. password manager). It
+                    unlocks your signer if this browser's storage is lost.</p>
+                  {#if vaultShowKey}
+                    <div class="uri-box"><code>{vaultStored}</code></div>
+                  {/if}
+                  <div class="inline-form">
+                    <button class="btn btn-secondary btn-sm" disabled={vaultPending}
+                      onclick={() => (vaultShowKey = !vaultShowKey)}>
+                      {vaultShowKey ? 'Hide vault key' : 'Reveal vault key'}
+                    </button>
+                    <button class="btn btn-secondary btn-sm" disabled={vaultPending} onclick={handleVaultCopy}>
+                      {vaultCopied ? 'Copied ✓' : 'Copy'}
+                    </button>
+                    <button class="btn btn-secondary btn-sm" disabled={vaultPending} onclick={handleVaultDownload}>
+                      Download
+                    </button>
+                  </div>
+                </div>
+                <button class="btn btn-secondary btn-sm" disabled={vaultPending} onclick={showNoEncryption}>
+                  Disable encryption
+                </button>
+              {:else}
+                <ConfirmButton
+                  label="Encrypt at rest"
+                  question="Generate a vault key and encrypt this signer's stored keys? You will back the key up before anything is sealed."
+                  confirmLabel="Yes, generate the key"
+                  busyLabel="Working…"
+                  busy={vaultPending}
+                  buttonClass="btn btn-secondary btn-sm"
+                  onconfirm={handleVaultGenerate}
+                />
+                <details class="disclosure vault-import">
+                  <summary>Restore a vault key saved elsewhere</summary>
+                  <p class="hint-sm">Paste a vault key you escrowed from another browser so this one
+                    can unlock the signer too.</p>
+                  <div class="inline-form">
+                    <input
+                      class="field-input"
+                      bind:value={vaultImport}
+                      placeholder="64 hex characters"
+                      maxlength="64"
+                      spellcheck="false"
+                      autocomplete="off"
+                      disabled={vaultPending}
+                    />
+                    <button class="btn btn-secondary btn-sm" disabled={vaultPending || !normaliseVaultKeyHex(vaultImport)}
+                      onclick={handleVaultImport}>
+                      Save in this browser
+                    </button>
+                  </div>
+                </details>
+              {/if}
+              {#if vaultStatus}<p class="hint-sm status">{vaultStatus}</p>{/if}
+
+              <details class="disclosure boot-pin">
+                <summary>Boot PIN</summary>
+                <p class="warn-text">After any restart, a signer with a boot PIN stays locked until
+                  someone types the PIN over the USB cable. Signing and remote management stop, and
+                  it refuses remote network changes. For a signer you leave running elsewhere, use a
+                  vault key with phone unlock instead.</p>
+                <div class="field">
+                  <label class="field-label" for="boot-pin-input">Boot PIN</label>
+                  <div class="inline-form">
+                    <div class="pw-wrap">
+                      <input
+                        id="boot-pin-input"
+                        type={showPin ? 'text' : 'password'}
+                        class="field-input"
+                        inputmode="numeric"
+                        autocomplete="off"
+                        bind:value={pinValue}
+                        oninput={() => { clearPinAck = false; clearPinConfirming = false }}
+                        placeholder="4 to 8 digits"
+                        maxlength="8"
+                        disabled={pinPending}
+                      />
+                      <PasswordReveal bind:shown={showPin} disabled={pinPending} />
+                    </div>
+                    <button class="btn btn-secondary" disabled={pinPending || !pinValid} onclick={handleSetPin}>
+                      {pinPending ? 'Waiting…' : 'Set PIN'}
+                    </button>
+                    <button class="btn btn-ghost btn-sm" disabled={pinPending || !!pinValue}
+                      onclick={() => { clearPinConfirming = true; clearPinAck = false }}>
+                      Clear PIN
+                    </button>
+                  </div>
+                  <p class="field-hint">4 to 8 digits</p>
+                </div>
+                {#if clearPinConfirming}
+                  <label class="hint-sm ack">
+                    <input type="checkbox" bind:checked={clearPinAck} disabled={pinPending} />
+                    Clearing a PIN turns encryption off and stops every phone unlocking it. {NO_ENCRYPTION_RISK}
+                  </label>
+                  <div class="inline-form">
+                    <button class="btn btn-danger btn-sm" disabled={pinPending || !clearPinAck} onclick={handleSetPin}>
+                      {pinPending ? 'Waiting…' : 'Clear the PIN'}
+                    </button>
+                    <button class="btn btn-ghost btn-sm" disabled={pinPending}
+                      onclick={() => { clearPinConfirming = false; clearPinAck = false }}>Cancel</button>
+                  </div>
                 {/if}
-                <button class="btn btn-ghost btn-sm" onclick={() => { chosenMode = null }}>Cancel</button>
-              </div>
+                {#if pinStatus}<p class="hint-sm status">{pinStatus}</p>{/if}
+              </details>
             {/if}
           </div>
-        {/each}
-      </div>
-      {#if currentMode === null}
-        {#if atRestUnrecognised}
-          <p class="hint-sm">Your signer reported a setting this version of Sapwood doesn't know.
-            Update Sapwood.</p>
-        {:else if overUsb}
-          <p class="hint-sm">This browser holds no vault key for the signer, and the signer does not
-            say whether it has a boot PIN. With neither, it runs without encryption.</p>
-        {:else}
-          <p class="hint-sm">Over WiFi, Sapwood can tell only from the phones listed below. Connect
-            by USB to see whether this browser holds the signer's vault key.</p>
-        {/if}
-      {/if}
-      <details class="disclosure">
-        <summary>Why is there no automatic phone unlock?</summary>
-        <p class="hint-sm">Anyone holding the board can make it ask for its key, and a phone that
-          answered by itself would hand it over: no safer than no encryption, while looking safer.</p>
+        </div>
       </details>
-      <div class="phones">
-        <UnlockPhones bind:count={phoneCount} refresh={phonesRefresh} />
-      </div>
+    {/if}
+
+    <!-- Firmware -->
+    <details class="section-row" bind:this={firmwareSection} bind:open={firmwareOpen}>
+      <summary>
+        <h3 class="section-row-title">Firmware</h3>
+        <span class="section-row-state"><span class="dot dot-{firmwareDot}" aria-hidden="true"></span>{firmwareStateWord}</span>
+      </summary>
+      <OtaUpdate heading={false} />
     </details>
-  {/if}
 
-  <!-- Security (USB only) -->
-  <details class="device-section" bind:open={securityOpen}>
-    <summary><span class="summary-title">Security</span><span class="summary-state">{securityStateWord}</span></summary>
-    {#if !overUsb}
-      <p class="hint">The boot PIN, bridge secret and encryption at rest are changed over USB.
-        Plug the signer into this computer and connect by cable.</p>
+    <!-- Backup and restore app pairings -->
+    {#if overUsb}
+      <details class="section-row" bind:this={backupSection} bind:open={backupOpen}>
+        <summary>
+          <h3 class="section-row-title">Backup</h3>
+          <span class="section-row-state"><span class="dot dot-{backupDot}" aria-hidden="true"></span>{backupStateWord}</span>
+        </summary>
+        <Backup heading={false} />
+      </details>
     {:else}
-      <h3 class="sub-title">Boot PIN</h3>
-      <p class="hint">Locks the device at boot. It must be unlocked before it signs anything.
-        The device asks for its button to confirm.</p>
-      <p class="warn-text">A boot PIN is typed over the USB cable, so after any reboot or power cut
-        a signer in another location stays locked until someone reaches it: signing and remote
-        management cannot resume, and the signer refuses remote network activation in this mode.
-        For an unattended signer, use a vault key with phone unlock instead (After a power cut,
-        above).</p>
-      <div class="inline-form">
-        <div class="pw-wrap">
-          <input
-            type={showPin ? 'text' : 'password'}
-            class="field-input"
-            bind:value={pinValue}
-            oninput={() => { clearPinAck = false; clearPinConfirming = false }}
-            placeholder="4–8 digits (empty to clear)"
-            maxlength="8"
-            disabled={pinPending}
-          />
-          <PasswordReveal bind:shown={showPin} disabled={pinPending} />
-        </div>
-        {#if pinValue || !clearPinConfirming}
-          <button class="btn btn-secondary" disabled={pinPending}
-            onclick={() => { if (pinValue) void handleSetPin(); else { clearPinConfirming = true; clearPinAck = false } }}>
-            {pinPending ? 'Waiting…' : pinValue ? 'Set PIN' : 'Clear PIN'}
-          </button>
-        {/if}
-      </div>
-      {#if !pinValue && clearPinConfirming}
-        <label class="hint-sm ack">
-          <input type="checkbox" bind:checked={clearPinAck} disabled={pinPending} />
-          Clearing a PIN turns encryption off and stops every phone unlocking it. {NO_ENCRYPTION_RISK}
-        </label>
-        <div class="inline-form">
-          <button class="btn btn-danger btn-sm" disabled={pinPending || !clearPinAck} onclick={handleSetPin}>
-            {pinPending ? 'Waiting…' : 'Clear the PIN'}
-          </button>
-          <button class="btn btn-ghost btn-sm" disabled={pinPending}
-            onclick={() => { clearPinConfirming = false; clearPinAck = false }}>Cancel</button>
-        </div>
-      {/if}
-      {#if pinStatus}<p class="hint-sm status">{pinStatus}</p>{/if}
-
-      <h3 class="sub-title">Encrypt at rest</h3>
-      <p class="hint">Encrypts the signer's stored keys with a vault key held by this browser, never
-        by the device: a stolen device yields only ciphertext.</p>
-      {#if vaultLocked}
-        <p class="warn-text">This signer is locked. Unlock it from the banner on Home before
-          changing encryption.</p>
-      {:else if !vaultDeviceKey}
-        <p class="hint-sm">Add an identity to the signer first.</p>
-      {:else if vaultEscrowKey}
-        <div class="vault-escrow">
-          <p class="warn-text">Your vault key: store it somewhere safe off this browser
-            (password manager, printed) <strong>before</strong> the signer is sealed. Without it,
-            a sealed signer cannot be unlocked.</p>
-          <div class="uri-box"><code>{vaultEscrowKey}</code></div>
-          <div class="inline-form">
-            <button class="btn btn-secondary btn-sm" disabled={vaultPending}
-              onclick={async () => { vaultCopied = await copyText(vaultEscrowKey ?? '') }}>
-              {vaultCopied ? 'Copied ✓' : 'Copy'}
-            </button>
-            <button class="btn btn-secondary btn-sm" disabled={vaultPending}
-              onclick={() => {
-                const url = URL.createObjectURL(new Blob([`${vaultEscrowKey}\n`], { type: 'text/plain' }))
-                const a = document.createElement('a')
-                a.href = url
-                a.download = `heartwood-vault-key-${vaultDeviceKey?.slice(0, 8) ?? 'signer'}.txt`
-                a.click()
-                URL.revokeObjectURL(url)
-              }}>
-              Download
-            </button>
-          </div>
-          <label class="hint-sm vault-escrow-tick">
-            <input type="checkbox" bind:checked={vaultEscrowTick} disabled={vaultPending} />
-            I have stored this key outside this browser
-          </label>
-          <div class="inline-form">
-            <button class="btn btn-primary btn-sm"
-              disabled={vaultPending || !vaultEscrowTick}
-              onclick={handleVaultSeal}>
-              {vaultPending ? 'Waiting for the button…' : 'Seal the signer now'}
-            </button>
-            <button class="btn btn-ghost btn-sm" disabled={vaultPending}
-              onclick={() => { if (vaultDeviceKey) removeVaultKey(vaultDeviceKey); vaultEscrowKey = null }}>
-              Discard key
-            </button>
-          </div>
-        </div>
-      {:else if vaultStored}
-        <p class="hint-sm">This browser holds a vault key for this signer.</p>
-        <div class="vault-escrow">
-          <p class="hint-sm">Store this somewhere safe off-site (e.g. password manager). It
-            unlocks your signer if this browser's storage is lost.</p>
-          {#if vaultShowKey}
-            <div class="uri-box"><code>{vaultStored}</code></div>
-          {/if}
-          <div class="inline-form">
-            <button class="btn btn-secondary btn-sm" disabled={vaultPending}
-              onclick={() => (vaultShowKey = !vaultShowKey)}>
-              {vaultShowKey ? 'Hide vault key' : 'Reveal vault key'}
-            </button>
-            <button class="btn btn-secondary btn-sm" disabled={vaultPending} onclick={handleVaultCopy}>
-              {vaultCopied ? 'Copied ✓' : 'Copy'}
-            </button>
-            <button class="btn btn-secondary btn-sm" disabled={vaultPending} onclick={handleVaultDownload}>
-              Download
-            </button>
-          </div>
-        </div>
-        <button class="btn btn-secondary btn-sm" disabled={vaultPending} onclick={showNoEncryption}>
-          Disable encryption
-        </button>
-      {:else}
-        <ConfirmButton
-          label="Encrypt at rest"
-          question="Generate a vault key and encrypt this signer's stored keys? You will back the key up before anything is sealed."
-          confirmLabel="Yes, generate the key"
-          busyLabel="Working…"
-          busy={vaultPending}
-          buttonClass="btn btn-secondary btn-sm"
-          onconfirm={handleVaultGenerate}
-        />
-        <details class="disclosure vault-import">
-          <summary>Restore a vault key saved elsewhere</summary>
-          <p class="hint-sm">Paste a vault key you escrowed from another browser so this one can
-            unlock the signer too.</p>
-          <div class="inline-form">
-            <input
-              class="field-input"
-              bind:value={vaultImport}
-              placeholder="64 hex characters"
-              maxlength="64"
-              spellcheck="false"
-              autocomplete="off"
-              disabled={vaultPending}
-            />
-            <button class="btn btn-secondary btn-sm" disabled={vaultPending || !normaliseVaultKeyHex(vaultImport)}
-              onclick={handleVaultImport}>
-              Save in this browser
-            </button>
-          </div>
-        </details>
-      {/if}
-      {#if vaultStatus}<p class="hint-sm status">{vaultStatus}</p>{/if}
-
-      <details class="disclosure advanced-block">
-        <summary>Advanced: bridge secret</summary>
-        <p class="hint">Shared secret for bridge authentication (device-decrypts mode). Needs the
-          button; cannot be set while a bridge session is active.</p>
-        <div class="inline-form">
-          <div class="pw-wrap">
-            <input
-              type={showSecret ? 'text' : 'password'}
-              class="field-input"
-              bind:value={secretValue}
-              placeholder="64 hex chars (32 bytes)"
-              maxlength="64"
-              disabled={secretPending}
-            />
-            <PasswordReveal bind:shown={showSecret} disabled={secretPending} />
-          </div>
-          <button class="btn btn-secondary" disabled={secretPending || secretValue.length !== 64} onclick={handleSetBridgeSecret}>
-            {secretPending ? 'Waiting…' : 'Set secret'}
-          </button>
-        </div>
-        {#if secretStatus}<p class="hint-sm status">{secretStatus}</p>{/if}
+      <details class="section-row" bind:open={backupOpen}>
+        <summary>
+          <h3 class="section-row-title">Backup</h3>
+          <span class="section-row-state"><span class="dot dot-{backupDot}" aria-hidden="true"></span>{backupStateWord}</span>
+        </summary>
+        <p class="hint">App pairings and the bridge secret are backed up over USB. The signer asks
+          for a button press.</p>
       </details>
     {/if}
-  </details>
 
-  <!-- Backup and restore app pairings (USB only) -->
-  {#if overUsb}
-    <details class="device-section" bind:this={backupSection} bind:open={backupOpen}>
-      <summary><span class="summary-title">Backup</span><span class="summary-state">{backupStateWord}</span></summary>
-      <Backup heading={false} />
+    <!-- Network mode -->
+    <details class="section-row" bind:open={networkOpen}>
+      <summary>
+        <h3 class="section-row-title">Network</h3>
+        <span class="section-row-state">{networkStateWord}</span>
+      </summary>
+      <Connectivity heading={false} />
+      {#if overUsb}
+        <details class="disclosure advanced-block">
+          <summary>Advanced: bridge secret</summary>
+          <p class="hint">Shared secret for bridge authentication (device-decrypts mode). Needs the
+            button; cannot be set while a bridge session is active.</p>
+          <div class="field">
+            <label class="field-label" for="bridge-secret-input">Bridge secret</label>
+            <div class="inline-form">
+              <div class="pw-wrap">
+                <input
+                  id="bridge-secret-input"
+                  type={showSecret ? 'text' : 'password'}
+                  class="field-input"
+                  autocapitalize="off"
+                  spellcheck="false"
+                  bind:value={secretValue}
+                  placeholder="64 hexadecimal characters"
+                  maxlength="64"
+                  disabled={secretPending}
+                />
+                <PasswordReveal bind:shown={showSecret} disabled={secretPending} />
+              </div>
+              <button class="btn btn-secondary" disabled={secretPending || secretValue.length !== 64} onclick={handleSetBridgeSecret}>
+                {secretPending ? 'Waiting…' : 'Set secret'}
+              </button>
+            </div>
+            <p class="field-hint">64 hexadecimal characters</p>
+          </div>
+          {#if secretStatus}<p class="hint-sm status">{secretStatus}</p>{/if}
+        </details>
+      {/if}
     </details>
-  {/if}
-
-  <!-- Network mode -->
-  <details class="device-section" bind:open={networkOpen}>
-    <summary><span class="summary-title">Network</span><span class="summary-state">{networkStateWord}</span></summary>
-    <Connectivity heading={false} />
-  </details>
 
-  <!-- Display and light -->
-  <details class="device-section" bind:open={displayOpen}>
-    <summary><span class="summary-title">Display and light</span><span class="summary-state">{displayStateWord}</span></summary>
-    <p class="hint">Screen orientation and the activity light's log detail.</p>
-    {#if device.mode === 'relay' && typeof device.relayStatus?.log_quiet === 'boolean'}
-      <div class="log-quiet">
-        <span class="lq-label">Activity light and log detail</span>
-        <div class="lq-buttons">
-          <button
-            class="btn btn-sm"
-            class:btn-secondary={device.relayStatus.log_quiet}
-            class:lq-on={!device.relayStatus.log_quiet}
-            disabled={logQuietPending || !device.relayStatus.log_quiet}
-            onclick={() => setLogQuiet(false)}
-          >Detailed</button>
-          <button
-            class="btn btn-sm"
-            class:btn-secondary={!device.relayStatus.log_quiet}
-            class:lq-on={device.relayStatus.log_quiet}
-            disabled={logQuietPending || device.relayStatus.log_quiet}
-            onclick={() => setLogQuiet(true)}
-          >Quiet</button>
+    <!-- Display and light -->
+    <details class="section-row" bind:open={displayOpen}>
+      <summary>
+        <h3 class="section-row-title">Display and light</h3>
+        <span class="section-row-state">{displayStateWord}</span>
+      </summary>
+      <p class="hint">Screen orientation and the activity light's log detail.</p>
+      {#if device.mode === 'relay' && typeof device.relayStatus?.log_quiet === 'boolean'}
+        <div class="log-quiet">
+          <span class="lq-label">Activity light and log detail</span>
+          <TogglePair
+            label="Activity light and log detail"
+            onLabel="Detailed"
+            offLabel="Quiet"
+            value={!device.relayStatus.log_quiet}
+            pending={logQuietPending}
+            onchange={(detailed) => setLogQuiet(!detailed)}
+          />
+          <p class="hint-sm no-gap">The signer's blue activity light flashes with its log output. Quiet keeps
+            warnings only, so the light stays dark in normal use.</p>
         </div>
-        <p class="hint-sm no-gap">The signer's blue activity light flashes with its log output. Quiet keeps
-          warnings only, so the light stays dark in normal use.</p>
-      </div>
-    {/if}
-    {#if screenFlip !== null}
-      <div class="log-quiet">
-        <span class="lq-label">Screen orientation</span>
-        <div class="lq-buttons">
-          <button
-            class="btn btn-sm"
-            class:btn-secondary={screenFlip}
-            class:lq-on={!screenFlip}
-            disabled={flipPending || !screenFlip}
-            onclick={() => turnScreen(false)}
-          >Upright</button>
-          <button
-            class="btn btn-sm"
-            class:btn-secondary={!screenFlip}
-            class:lq-on={screenFlip}
-            disabled={flipPending || screenFlip}
-            onclick={() => turnScreen(true)}
-          >Flipped</button>
+      {/if}
+      {#if screenFlip !== null}
+        <div class="log-quiet">
+          <span class="lq-label">Screen orientation</span>
+          <TogglePair
+            label="Screen orientation"
+            onLabel="Upright"
+            offLabel="Flipped"
+            value={!screenFlip}
+            pending={flipPending}
+            onchange={(upright) => turnScreen(!upright)}
+          />
+          <p class="hint-sm no-gap">Turn the picture round if the signer sits the other way up, for the
+            other hand or a case. The button labels on its cards move with it. On the signer itself: hold its
+            button on the DEVICE page.</p>
         </div>
-        <p class="hint-sm no-gap">Turn the picture round if the signer sits the other way up, for the
-          other hand or a case. The button labels on its cards move with it. On the signer itself: hold its
-          button on the DEVICE page.</p>
-      </div>
-    {/if}
-  </details>
+      {/if}
+    </details>
 
-  <!-- Diagnostics -->
-  <details class="device-section" bind:this={diagnosticsSection} bind:open={diagnosticsOpen}>
-    <summary><span class="summary-title">Diagnostics</span><span class="summary-state">{diagnosticsStateWord}</span></summary>
-    <p class="hint">Live numbers from the signer: connection, memory and storage.</p>
-    <table class="kv-table"><tbody>
-      <tr><td class="label">Connected over</td><td>{modeLabel()}</td></tr>
-      <tr><td class="label">Address</td><td class="mono">{device.portInfo || '--'}</td></tr>
-      <tr><td class="label">Identities</td><td>{device.masters.filter((m) => !m.persona).length}</td></tr>
-      <tr><td class="label">Apps</td><td>{device.slots.length}</td></tr>
-      {#if typeof health.uptime_s === 'number'}
-        <tr><td class="label">Signer up</td><td>{formatUptime(health.uptime_s)}</td></tr>
+    <!-- Diagnostics -->
+    <details class="section-row" bind:this={diagnosticsSection} bind:open={diagnosticsOpen}>
+      <summary>
+        <h3 class="section-row-title">Diagnostics</h3>
+        <span class="section-row-state">{diagnosticsStateWord}</span>
+      </summary>
+      <p class="hint">Live numbers from the signer.</p>
+      <table class="kv-table"><tbody>
+        <tr><td class="label">Connected over</td><td>{modeLabel()}</td></tr>
+        <tr><td class="label">Address</td><td class="mono">{device.portInfo || '--'}</td></tr>
+        <tr><td class="label">Identities</td><td>{device.masters.filter((m) => !m.persona).length}</td></tr>
+        <tr><td class="label">Apps</td><td>{device.slots.length}</td></tr>
+        {#if typeof health.uptime_s === 'number'}
+          <tr><td class="label">Signer up</td><td>{formatUptime(health.uptime_s)}</td></tr>
+        {/if}
+        {#if lastReset}
+          <tr><td class="label">Last restart</td><td class:crash-reset={lastReset.crash}>{recoveryReason ? 'self-recovery restart' : lastReset.text}</td></tr>
+        {/if}
+        {#if typeof freeHeap === 'number' && typeof largestBlock === 'number'}
+          <tr>
+            <td class="label">Free memory</td>
+            <td class:crash-reset={fragmented}>
+              {kb(freeHeap)}{#if fragmented} · fragmented (largest block {kb(largestBlock)}){/if}
+            </td>
+          </tr>
+        {/if}
+        {#if typeof maxSignBytes === 'number'}
+          <tr><td class="label">Max signed message</td><td>
+            {formatBytes(maxSignBytes)}{#if typeof maxSignBytesObject === 'number' && maxSignBytesObject > maxSignBytes}
+              · {formatBytes(maxSignBytesObject)} for apps that ask for the compact reply{/if}
+          </td></tr>
+        {/if}
+        {#if storage}
+          <tr>
+            <td class="label">Identity and app storage</td>
+            <td class:crash-reset={storage.state !== 'ok'}>
+              <span class="gauge-track"><span
+                class="gauge-fill gauge-{storage.state}"
+                style={`width:${storage.pct}%`}
+              ></span></span>
+              {storage.label}
+            </td>
+          </tr>
+        {/if}
+      </tbody></table>
+      {#if storage?.state === 'warn'}
+        <p class="hint-sm crash-hint">The signer's storage is filling up. Identities, personas, app pairings
+          and settings share it. Removing an unused persona or app pairing frees space.</p>
       {/if}
-      {#if lastReset}
-        <tr><td class="label">Last restart</td><td class:crash-reset={lastReset.crash}>{recoveryReason ? 'self-recovery restart' : lastReset.text}</td></tr>
+      {#if storage?.state === 'full'}
+        <p class="hint-sm crash-hint">The signer's storage is nearly full. It will refuse new personas before
+          app pairings stop working, so remove an unused persona or app pairing now.</p>
       {/if}
-      {#if typeof freeHeap === 'number' && typeof largestBlock === 'number'}
-        <tr>
-          <td class="label">Free memory</td>
-          <td class:crash-reset={fragmented}>
-            {kb(freeHeap)}{#if fragmented} · fragmented (largest block {kb(largestBlock)}){/if}
-          </td>
-        </tr>
+      {#if lastReset?.crash}
+        <p class="hint-sm crash-hint">The signer's last restart was not planned.{#if health.crashed_during} It crashed while
+          handling <strong>{health.crashed_during}</strong>.{/if} If this repeats, note the pattern; the request log
+          below restarts empty each boot.</p>
       {/if}
-      {#if typeof maxSignBytes === 'number'}
-        <tr><td class="label">Max signed message</td><td>
-          {formatBytes(maxSignBytes)}{#if typeof maxSignBytesObject === 'number' && maxSignBytesObject > maxSignBytes}
-            · {formatBytes(maxSignBytesObject)} for apps that ask for the compact reply{/if}
-        </td></tr>
+      {#if fragmented}
+        <details class="disclosure">
+          <summary>Why is the memory fragmented?</summary>
+          <p class="hint-sm crash-hint">The signer's largest free block is small relative to total free.
+            This can happen after a burst of decryptions; it clears on the next restart. Newer firmware
+            frees the TLS buffers between messages to avoid it.</p>
+        </details>
       {/if}
-      {#if storage}
-        <tr>
-          <td class="label">Identity &amp; app storage</td>
-          <td class:crash-reset={storage.state !== 'ok'}>
-            <span class="gauge-track"><span
-              class="gauge-fill gauge-{storage.state}"
-              style={`width:${storage.pct}%`}
-            ></span></span>
-            {storage.label}
-          </td>
-        </tr>
+      {#if trimmed}
+        <p class="hint-sm crash-hint">The signer trimmed this status to its vital fields because its memory
+          was too fragmented to send the full report. The request log paused this poll instead of the signer
+          crashing, and resumes once the memory recovers.</p>
       {/if}
-    </tbody></table>
-    {#if storage?.state === 'warn'}
-      <p class="hint-sm crash-hint">The signer's storage is filling up. Identities, personas, app pairings
-        and settings share it. Removing an unused persona or app pairing frees space.</p>
-    {/if}
-    {#if storage?.state === 'full'}
-      <p class="hint-sm crash-hint">The signer's storage is nearly full. It will refuse new personas before
-        app pairings stop working, so remove an unused persona or app pairing now.</p>
-    {/if}
-    {#if lastReset?.crash}
-      <p class="hint-sm crash-hint">The signer's last restart was not planned.{#if health.crashed_during}&#32;It crashed while
-        handling <strong>{health.crashed_during}</strong>.{/if} If this repeats, note the pattern; the request log
-        below restarts empty each boot.</p>
-    {/if}
-    {#if fragmented}
-      <details class="disclosure">
-        <summary>Why is the memory fragmented?</summary>
-        <p class="hint-sm crash-hint">The signer's largest free block is small relative to total free.
-          This can happen after a burst of decryptions; it clears on the next restart. Newer firmware
-          frees the TLS buffers between messages to avoid it.</p>
-      </details>
-    {/if}
-    {#if trimmed}
-      <p class="hint-sm crash-hint">The signer trimmed this status to its vital fields because its memory
-        was too fragmented to send the full report. The request log paused this poll instead of the signer
-        crashing, and resumes once the memory recovers.</p>
-    {/if}
-    {#if recoveryReason}
-      <details class="disclosure">
-        <summary>Why did the signer restart itself?</summary>
-        <p class="hint-sm crash-hint">Its relay service was unusable for several minutes
-          (<strong>{recoveryReason}</strong>), usually memory too fragmented to place TLS or publish
-          buffers. It now recovers on its own instead of staying unreachable until a power-cycle; if
-          this repeats often, the memory readings above tell the story.</p>
+      {#if recoveryReason}
+        <details class="disclosure">
+          <summary>Why did the signer restart itself?</summary>
+          <p class="hint-sm crash-hint">Its relay service was unusable for several minutes
+            (<strong>{recoveryReason}</strong>), usually memory too fragmented to place TLS or publish
+            buffers. It now recovers on its own instead of staying unreachable until a power-cycle; if
+            this repeats often, the memory readings above tell the story.</p>
+        </details>
+      {/if}
+    </details>
+
+    <!-- Bridge (bridge mode only) -->
+    {#if overBridge && device.bridgeInfo}
+      <details class="section-row" bind:open={bridgeOpen}>
+        <summary>
+          <h3 class="section-row-title">Bridge</h3>
+          <span class="section-row-state">{bridgeStateWord}</span>
+        </summary>
+        <table class="kv-table"><tbody>
+          <tr><td class="label">Mode</td><td>{device.bridgeInfo.mode}</td></tr>
+          <tr><td class="label">Uptime</td><td>{formatUptime(device.bridgeInfo.uptime_secs as number)}</td></tr>
+          <tr>
+            <td class="label">Relays</td>
+            <td>
+              {#each (device.bridgeInfo.relays as string[]) as relay}
+                <div class="mono">{relay}</div>
+              {/each}
+            </td>
+          </tr>
+        </tbody></table>
+        <p class="hint bridge-hint">The bridge holds the USB port. Stop it to connect directly over USB
+          (then reload Sapwood and connect by cable).</p>
+        <div class="inline-form">
+          <ConfirmButton
+            label="Stop bridge"
+            question="Stop the bridge? You'll need to restart it manually."
+            confirmLabel="Yes, stop it"
+            busyLabel="Stopping…"
+            busy={bridgeBusy}
+            buttonClass="btn btn-warn btn-sm"
+            onconfirm={handleBridgeStop}
+          />
+          <ConfirmButton
+            label="Restart bridge"
+            question="Restart the bridge? Relay connections drop briefly."
+            confirmLabel="Yes, restart"
+            busyLabel="Restarting…"
+            busy={bridgeBusy}
+            buttonClass="btn btn-secondary btn-sm"
+            onconfirm={handleBridgeRestart}
+          />
+        </div>
       </details>
     {/if}
-  </details>
-
-  <!-- Bridge (bridge mode only) -->
-  {#if overBridge && device.bridgeInfo}
-    <details class="device-section" bind:open={bridgeOpen}>
-      <summary><span class="summary-title">Bridge</span><span class="summary-state">{bridgeStateWord}</span></summary>
-      <table class="kv-table"><tbody>
-        <tr><td class="label">Mode</td><td>{device.bridgeInfo.mode}</td></tr>
-        <tr><td class="label">Uptime</td><td>{formatUptime(device.bridgeInfo.uptime_secs as number)}</td></tr>
-        <tr>
-          <td class="label">Relays</td>
-          <td>
-            {#each (device.bridgeInfo.relays as string[]) as relay}
-              <div class="mono">{relay}</div>
-            {/each}
-          </td>
-        </tr>
-      </tbody></table>
-      <p class="hint bridge-hint">The bridge holds the USB port. Stop it to connect directly over USB
-        (then reload Sapwood and connect by cable).</p>
-      <div class="inline-form">
-        <ConfirmButton
-          label="Stop bridge"
-          question="Stop the bridge? You'll need to restart it manually."
-          confirmLabel="Yes, stop it"
-          busyLabel="Stopping…"
-          busy={bridgeBusy}
-          buttonClass="btn btn-warn btn-sm"
-          onconfirm={handleBridgeStop}
-        />
-        <ConfirmButton
-          label="Restart bridge"
-          question="Restart the bridge? Relay connections drop briefly."
-          confirmLabel="Yes, restart"
-          busyLabel="Restarting…"
-          busy={bridgeBusy}
-          buttonClass="btn btn-secondary btn-sm"
-          onconfirm={handleBridgeRestart}
-        />
-      </div>
-    </details>
-  {/if}
+  </div>
 
   <!-- Set up another device -->
   <p class="hint flash-line">Flash another board: install or re-flash firmware in the guided
@@ -1155,50 +1216,73 @@
 
   .log-quiet { margin-top: 0.9rem; }
   .lq-label { display: block; font-size: 0.8rem; color: var(--text-dim); margin-bottom: 0.4rem; }
-  .lq-buttons { display: flex; gap: 0.5rem; margin-bottom: 0.4rem; }
-  .lq-on { border-color: var(--green-dim); color: var(--green); background: #08130d; }
 
   .device-panel {
-    display: flex; flex-direction: column; gap: 1.75rem;
+    display: flex; flex-direction: column; gap: 1.5rem;
     /* Room above the docked mobile tab bar so the last section (Danger
        zone) is never hidden behind it. */
     padding-bottom: 2rem;
   }
-  .pairing-backup-warning { border-color: var(--amber); background: #1a1508; }
-  .pairing-backup-warning .section-title { color: var(--amber); }
-
-  /* "Your signer": bold, spaced-out rows, worst concern first. The heading
-     reads as the headline: same weight as a section summary, a touch bigger. */
-  .your-signer { display: flex; flex-direction: column; gap: 0.25rem; }
-  .your-signer > .section-title { font-size: 1.2rem; font-weight: 700; color: #fff; margin-bottom: 1rem; }
-  .summary-rows { display: flex; flex-direction: column; gap: 1rem; }
-  .summary-row {
-    display: flex; align-items: center; gap: 0.75rem;
-    padding: 0.9rem 1rem;
-    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
+
+  /* Needs attention: 0 to n cards, worst first, spaced not boxed-within-boxed. */
+  .attention-block { display: flex; flex-direction: column; gap: 0.75rem; }
+  .attention-card {
+    display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start;
+    border-left-width: 3px; border-left-style: solid;
   }
-  .summary-lead { flex: 0 0 13.5rem; display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
-  .dot {
-    flex: none; width: 0.7rem; height: 0.7rem; border-radius: 50%;
+  .attention-problem { border-left-color: var(--red); }
+  .attention-attention { border-left-color: var(--amber); }
+  .attention-lead { display: flex; align-items: center; gap: 0.5rem; }
+  .attention-label { font-size: 1rem; font-weight: 600; color: var(--text); }
+  .attention-text { margin: 0; font-size: 0.85rem; color: var(--text-dim); }
+  .attention-action { margin-top: 0.2rem; }
+
+  @media (min-width: 1024px) {
+    .attention-card { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; }
+    .attention-lead { flex: 0 0 auto; }
+    .attention-text { flex: 1 1 auto; }
+    .attention-action { margin-top: 0; margin-left: auto; }
   }
+
+  .dot { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; }
   .dot-ok { background: var(--green); }
-  .dot-unknown { background: var(--text-muted); }
+  .dot-unknown { background: transparent; border: 2px solid var(--text-muted); }
   .dot-attention { background: var(--amber); }
   .dot-problem { background: var(--red); }
-  .summary-label { font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .summary-text { flex: 1 1 auto; min-width: 0; font-size: 1rem; font-weight: 600; color: var(--text); }
-  .summary-action { flex: none; margin-left: auto; }
-
-  /* Phone width: dot+label on their own line, then the state text, then a
-     full-width button. The dot never sits alone on a line. */
-  @media (max-width: 480px) {
-    .summary-row { flex-direction: column; align-items: stretch; gap: 0.4rem; }
-    .summary-lead { flex: none; }
-    .summary-text { flex: none; }
-    .summary-action { margin-left: 0; width: 100%; }
+
+  /* Grouped section list: one border, rows split by dividers. */
+  .section-group {
+    border: 1px solid var(--border); border-radius: 6px;
+  }
+  .section-row { padding: 0 1rem; }
+  .section-row + .section-row { border-top: 1px solid var(--border); }
+  .section-row > summary {
+    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
+    gap: 0.3rem 1rem; padding: 0.9rem 0; cursor: pointer; list-style: none;
+  }
+  .section-row > summary::-webkit-details-marker { display: none; }
+  .section-row-title {
+    margin: 0; font-size: 1rem; font-weight: 600; color: var(--text); display: inline-flex; align-items: center;
+    white-space: nowrap;
+  }
+  .section-row-title::before {
+    content: '▸'; display: inline-block; margin-right: 0.6rem; color: var(--text-muted);
+    transition: transform 0.15s;
+  }
+  .section-row[open] > summary .section-row-title::before { transform: rotate(90deg); }
+  .section-row-state {
+    /* A long state drops under the title on a phone rather than squeezing it. */
+    font-size: 0.85rem; color: var(--text-dim); margin-left: auto; text-align: right;
+    display: inline-flex; align-items: center; gap: 0.4rem;
+  }
+  .section-row > :not(summary) { padding: 0 0 1.25rem; }
+  .section-row :global(.hint),
+  .section-row :global(.hint-sm) { max-width: 68ch; }
+
+  @media (prefers-reduced-motion: reduce) {
+    .section-row-title::before { transition: none; }
   }
 
-  /* Collapsible sections: bold, roomy summaries with a state word docked right. */
   .device-section {
     border: 1px solid var(--border); border-radius: 8px;
     padding: 0 1.1rem;
@@ -1210,18 +1294,13 @@
   .device-section > summary::-webkit-details-marker { display: none; }
   .device-section--danger { border-color: #442222; }
   .summary-title { font-size: 1.05rem; font-weight: 700; color: #fff; }
-  .summary-title::before {
-    content: '▸'; display: inline-block; margin-right: 0.6rem; color: var(--text-muted);
-    transition: transform 0.15s;
-  }
-  .device-section[open] > summary .summary-title::before { transform: rotate(90deg); }
-  .summary-state { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
   .device-section > :not(summary) { padding-bottom: 1.1rem; }
   .advanced-block { margin-top: 1.1rem; }
   .flash-line { margin: 0; }
 
   .sub-title { font-size: 0.9rem; font-weight: 600; color: var(--text); margin: 1.1rem 0 0.4rem; }
   .sub-title:first-of-type { margin-top: 0; }
+  .sub-title:focus { outline: 2px solid var(--green); outline-offset: 2px; }
 
   .inline-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
   .inline-form .field-input { font-size: 0.85rem; padding: 0.45rem 0.7rem; }
@@ -1229,17 +1308,24 @@
 
   .bridge-hint { margin-top: 0.8rem; }
 
-  .modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; margin: 0.8rem 0; }
-  .mode { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; }
-  .mode-current { border-color: var(--green-dim); }
-  .mode-head { display: flex; gap: 0.5rem; align-items: center; }
+  .power-cut-grid { display: flex; flex-direction: column; gap: 1.5rem; }
+  .power-cut-left, .power-cut-right { min-width: 0; }
+  @media (min-width: 1024px) {
+    .power-cut-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
+  }
+
+  .mode-list { display: flex; flex-direction: column; margin: 0.6rem 0; }
+  .mode-row { padding: 0.7rem 0; border-top: 1px solid var(--border); }
+  .mode-row:first-child { border-top: none; }
+  .mode-row-head { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
   .mode-name { font-weight: 600; color: var(--text); }
+  .mode-switch { margin-left: auto; }
   .mode-label { color: var(--text); }
-  .mode-steps { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; margin-top: 0.3rem; }
+  .mode-steps { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; margin-top: 0.5rem; }
   .ack { display: flex; gap: 0.5rem; align-items: flex-start; margin-top: 0.4rem; }
   .ack input { margin-top: 0.2rem; flex: none; }
-  .phones { margin-top: 1.2rem; }
 
+  .boot-pin { margin-top: 1.1rem; }
   .vault-escrow {
     display: flex; flex-direction: column; gap: 0.6rem;
     margin: 0.6rem 0 0.9rem;
@@ -1262,7 +1348,18 @@
   @media (max-width: 640px) {
     .danger-row { flex-wrap: wrap; }
     .inline-form .pw-wrap { width: 100%; }
-    .summary-row { padding: 0.8rem 0.85rem; }
+    .section-row { padding: 0 0.85rem; }
     .device-section { padding: 0 0.85rem; }
   }
+
+  /* Touch targets: scoped to this tab only (Q4). */
+  @media (any-pointer: coarse), (max-width: 640px) {
+    .device-panel :global(.btn) { min-height: 44px; }
+    .device-panel :global(button.btn-sm) { min-height: 44px; }
+    /* Padding, not flex: flex would drop the disclosure marker. */
+    .device-panel :global(summary) { min-height: 44px; box-sizing: border-box; padding-block: 0.7rem; }
+    .device-panel :global(button),
+    .device-panel :global(summary) { touch-action: manipulation; }
+    .device-panel :global(.btn:active:not(:disabled)) { transform: translateY(1px); }
+  }
 </style>
diff --git a/src/components/DevicePanel.test.ts b/src/components/DevicePanel.test.ts
index 824cea8..988edcd 100644
--- a/src/components/DevicePanel.test.ts
+++ b/src/components/DevicePanel.test.ts
@@ -21,6 +21,7 @@ vi.mock('../lib/device.svelte.js', async () => {
   const state: Record<string, unknown> = {
     connected: true, mode: 'relay', error: null, masters: [], slots: [],
     relayStatus: null, bridgeAuthed: false, connectionGeneration: 0,
+    vaultRelayTarget: null, vaultUnlockRequest: null, vaultReconnect: null,
   }
   const device = new Proxy(state, {
     get(target, property, receiver) {
@@ -45,6 +46,9 @@ vi.mock('../lib/device.svelte.js', async () => {
     usbDisplayFlip: vi.fn().mockResolvedValue(null),
     setDisplayFlip: vi.fn(),
     getFirmwareVersion: vi.fn().mockResolvedValue(null),
+    refreshMasters: vi.fn().mockResolvedValue(undefined),
+    sendVaultKeyOverRelay: vi.fn().mockResolvedValue(undefined),
+    vaultRelayDevicePub: vi.fn(() => ''),
     listUnlockPhones: vi.fn(),
     revokeUnlockPhone: vi.fn(),
     setAnnounceOperator: vi.fn(),
@@ -111,6 +115,7 @@ describe('DevicePanel: the session override on a fresh firmware report', () => {
     // Without the fix, the session's own "PIN set" snapshot would win forever
     // and this would stay "Waits for Sapwood" even once FIRMWARE_INFO
     // disagreed; the retired override lets the fresh report show through.
-    await waitFor(() => expect(screen.getByText('Not encrypted: anyone holding it can read the keys')).toBeTruthy())
+    await waitFor(() => expect(screen.getAllByText('Not encrypted').length).toBeGreaterThan(0))
+    expect(screen.getByText('Anyone holding it can read the keys.')).toBeTruthy()
   })
 })
diff --git a/src/components/PhoneHandoff.svelte b/src/components/PhoneHandoff.svelte
index 93e9cdb..3a928ea 100644
--- a/src/components/PhoneHandoff.svelte
+++ b/src/components/PhoneHandoff.svelte
@@ -338,8 +338,9 @@
   .handoff { margin-top: 1.5rem; }
   .handoff .section-title { font-size: 0.95rem; color: var(--green); }
   .field { margin-bottom: 0.9rem; }
-  .qr { width: 184px; padding: 12px; background: #fff; border-radius: 6px; margin-bottom: 0.9rem; }
+  .qr { width: 220px; padding: 12px; background: #fff; border-radius: 6px; margin-bottom: 0.9rem; }
   .qr :global(svg) { display: block; width: 100%; height: auto; }
+  @media (max-height: 500px) { .qr { width: 180px; } }
   .handoff-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
   .plain-link {
     display: block; margin: 0.9rem 0 0; padding: 0; width: 100%;
diff --git a/src/components/TogglePair.svelte b/src/components/TogglePair.svelte
new file mode 100644
index 0000000..4284d55
--- /dev/null
+++ b/src/components/TogglePair.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+  // Two mutually exclusive states shown as a pressed/unpressed button pair
+  // (Upright/Flipped, Detailed/Quiet, On/Off): the selected option stays
+  // enabled and full-opacity, with aria-pressed carrying state to assistive
+  // tech instead of colour or disablement alone.
+  interface Props {
+    label: string
+    onLabel: string
+    offLabel: string
+    /** true selects onLabel, false selects offLabel. */
+    value: boolean
+    pending?: boolean
+    /** Disables switching to "on" specifically (e.g. no phones to turn the
+     *  announcement off for). */
+    onDisabled?: boolean
+    onchange: (value: boolean) => void
+  }
+  let { label, onLabel, offLabel, value, pending = false, onDisabled = false, onchange }: Props = $props()
+
+  function press(next: boolean) {
+    if (next === value) return // pressing the pressed button does nothing
+    onchange(next)
+  }
+</script>
+
+<div class="toggle-pair" role="group" aria-label={label}>
+  <button
+    type="button"
+    class="btn btn-sm"
+    class:btn-secondary={!value}
+    class:lq-on={value}
+    aria-pressed={value}
+    disabled={pending}
+    onclick={() => press(true)}
+  >{onLabel}</button>
+  <button
+    type="button"
+    class="btn btn-sm"
+    class:btn-secondary={value}
+    class:lq-on={!value}
+    aria-pressed={!value}
+    disabled={pending || onDisabled}
+    onclick={() => press(false)}
+  >{offLabel}</button>
+</div>
+
+<style>
+  .toggle-pair { display: flex; gap: 0.5rem; }
+  .lq-on { border-color: var(--green-dim); color: var(--green); background: #08130d; opacity: 1; }
+</style>
diff --git a/src/components/UnlockPhones.svelte b/src/components/UnlockPhones.svelte
index 53892d0..f80d876 100644
--- a/src/components/UnlockPhones.svelte
+++ b/src/components/UnlockPhones.svelte
@@ -3,7 +3,7 @@
   // signer after a restart with a tap. Add one by scanning the code Cambium
   // shows, list them, revoke one. No secret passes through Sapwood: the board
   // seals each phone's unlock secret to a key only that phone holds.
-  import { onDestroy, untrack } from 'svelte'
+  import { onDestroy, tick, untrack } from 'svelte'
   import { SimplePool } from 'nostr-tools/pool'
   import { encodeQR } from '@paulmillr/qr'
   import {
@@ -22,6 +22,8 @@
   } from '../lib/enrol-invite.js'
   import ConfirmButton from './ConfirmButton.svelte'
   import QrScanner from './QrScanner.svelte'
+  import WordPairs from './WordPairs.svelte'
+  import TogglePair from './TogglePair.svelte'
 
   /** Fallback relays for a fresh invite: the ones Sapwood already uses for
    *  this signer over the relay, its USB-reported WiFi relays, or failing
@@ -164,6 +166,9 @@
   let working = $state<string | null>(null)
   let result = $state<EnrolResult | null>(null)
   let addError = $state<string | null>(null)
+  /** Which of the two "invite-aborted" stories to tell: someone else answered,
+   *  or nobody did. */
+  let abortReason = $state<'two-phones' | 'no-relays' | null>(null)
   /** Set once the board has been asked: its enrolment key is then spent. */
   let codeSpent = $state(false)
   /** A record the board may have kept with nobody holding its secret: the
@@ -212,7 +217,8 @@
       code = inviteState.code
       step = 'confirm'
     } else if (inviteState.status === 'aborted') {
-      addError = 'Two phones answered this code. Someone else may have seen it. Nothing was added; start again.'
+      addError = 'Someone else may have seen the code. Nothing was added. Cancel on your phone, then make a new code.'
+      abortReason = 'two-phones'
       stopInvite()
       step = 'invite-aborted'
     }
@@ -225,6 +231,7 @@
     code = null
     result = null
     addError = null
+    abortReason = null
     codeSpent = false
     scanSpent = false
     orphanId = null
@@ -243,6 +250,7 @@
       zeroInviteSecret(made)
       stopInvite()
       addError = 'None of the relays answered, so the phone could not reply. Check this computer\'s connection and try again.'
+      abortReason = 'no-relays'
       step = 'invite-aborted'
       return
     }
@@ -274,6 +282,7 @@
     code = null
     result = null
     addError = null
+    abortReason = null
     codeSpent = false
     scanSpent = false
     orphanId = null
@@ -353,8 +362,7 @@
         enrol: async (enrolPubkey) => {
           codeSpent = true
           if (code) markCodeSpent(code)
-          return enrolUnlockPhone(enrolPubkey, label,
-            `Check the signer: it shows ADD PHONE and five words, two at a time over about 12 seconds before it will accept a hold. Compare the five words with your phone, then hold its button.`)
+          return enrolUnlockPhone(enrolPubkey, label, 'Signer: compare the five words, then hold its button.')
         },
         onBoard: () => {
           working = isRelay
@@ -378,13 +386,55 @@
       if (codeSpent) void load(true)
     }
   }
+
+  // --- 7.2 Add a phone: the constant enrolment card ---
+  // The heading and live region exist from the first render of the card (any
+  // step but 'idle'). Every step change sets both and moves focus to the
+  // heading, so the compare-and-confirm bench flow announces itself to
+  // assistive tech without the owner hunting for what changed.
+  const confirmWords = $derived(code ? requestWords(code.enrolPubkey) : [])
+
+  const phase = $derived(
+    step === 'invite' ? (invite ? 'invite-ready' : 'invite-opening') : step,
+  )
+
+  let cardHeadingEl = $state<HTMLHeadingElement | null>(null)
+  let cardHeadingText = $state('')
+  let liveText = $state('')
+
+  $effect(() => {
+    const p = phase
+    const label = code?.label ?? 'The phone'
+    if (p === 'invite-opening') { cardHeadingText = 'Add a phone'; liveText = 'Opening relays.' }
+    else if (p === 'invite-ready') { cardHeadingText = 'Scan this with Cambium'; liveText = 'Code ready. It expires in 10 minutes.' }
+    else if (p === 'invite-expired') { cardHeadingText = 'Code expired'; liveText = 'Code expired.' }
+    else if (p === 'invite-aborted') {
+      cardHeadingText = abortReason === 'no-relays' ? 'Could not reach the relays' : 'Two phones answered'
+      liveText = abortReason === 'no-relays' ? 'Could not reach the relays.' : 'Stopped: two phones answered.'
+    } else if (p === 'scan' || p === 'paste') { cardHeadingText = 'Add a phone'; liveText = '' }
+    else if (p === 'confirm') { cardHeadingText = `${label} wants to unlock this signer`; liveText = `${label} answered. Compare the five words.` }
+    else if (p === 'working') { cardHeadingText = 'Check the signer'; liveText = 'Sent to the signer. Hold its button when the words match.' }
+    else if (p === 'done') { cardHeadingText = `${label} added`; liveText = result ? `${label} added. Check code ${result.checkCode}.` : '' }
+    else if (p === 'orphan') { cardHeadingText = 'A stray record may be left'; liveText = '' }
+    else if (p === 'failed') { cardHeadingText = 'Not added'; liveText = '' }
+    if (p !== 'idle') void tick().then(() => cardHeadingEl?.focus())
+  })
+
+  // Announce the countdown only at its two milestones and at expiry (the
+  // heading effect above covers expiry): a live region that spoke every
+  // second would be unusable.
+  $effect(() => {
+    const s = inviteSecondsLeft
+    if (phase !== 'invite-ready') return
+    if (s === 300) liveText = 'Five minutes left to scan the code.'
+    else if (s === 60) liveText = 'One minute left to scan the code.'
+  })
 </script>
 
 <div class="unlock-phones">
   <h3 class="sub-title">Phones that can unlock</h3>
-  <p class="hint">A phone running Cambium can unlock this signer after a power cut: it shows
-    a notification, and one tap plus the phone's screen lock sends the unlock. Nothing on the
-    wire names the phone. A lost phone is revoked here without changing anything else.</p>
+  <p class="hint">A phone running Cambium can unlock this signer after a power cut. Nothing on the
+    wire names the phone. Revoking a lost phone changes nothing else.</p>
 
   {#if support === 'checking'}
     <p class="hint-sm">Asking the signer…</p>
@@ -421,16 +471,17 @@
           </li>
         {/each}
       </ul>
-      <p class="hint-sm">{list.phones.length} of {list.max}.{#if list.phones.length === 1}
+      <p class="hint-sm">{list.phones.length} of {list.max} phones.{#if list.phones.length === 1}
         Add a second device (a spare, or a family member's phone) so losing this one abroad does not
-        leave the signer locked.{/if}</p>
+        leave the signer locked.{:else if list.phones.length >= list.max}
+        This signer holds {list.max} phones, its limit. Revoke one to add another.{/if}</p>
     {/if}
     {#if revokeStatus}<p class="hint-sm status">{revokeStatus}</p>{/if}
 
     {#if step === 'idle'}
       {#if canAdd}
         <div class="inline-form">
-          <button class="btn btn-primary btn-sm" disabled={list.phones.length >= list.max}
+          <button class="btn btn-primary add-phone-btn" disabled={list.phones.length >= list.max}
             onclick={startInvite}>Add a phone</button>
         </div>
         <details class="disclosure">
@@ -447,6 +498,134 @@
       {/if}
     {/if}
 
+    {#if step !== 'idle'}
+      <div class="enrol card">
+        <h4 class="enrol-heading" tabindex="-1" bind:this={cardHeadingEl}>{cardHeadingText}</h4>
+        <p role="status" aria-live="polite" class="enrol-live">{liveText}</p>
+
+        {#if step === 'invite'}
+          {#if !invite}
+            <p class="hint-sm">Opening relays…</p>
+          {:else}
+            <div class="invite-layout">
+              <div class="qr invite-qr">{@html inviteQr}</div>
+              <div class="invite-steps">
+                <ol class="hint-sm">
+                  <li>Open Cambium on the phone.</li>
+                  <li>Open this signer's screen.</li>
+                  <li>Tap Set up phone unlock, then Scan Sapwood's code.</li>
+                </ol>
+                <p class="hint-sm countdown">Expires in {formatCountdown(inviteSecondsLeft)}</p>
+                <button class="btn btn-secondary btn-sm" onclick={() => { stopInvite(); step = 'idle' }}>Cancel</button>
+              </div>
+            </div>
+          {/if}
+        {:else if step === 'invite-expired'}
+          <p class="hint-sm">Codes last 10 minutes. Cancel on the phone, then make a new code.</p>
+          <div class="inline-form">
+            <button class="btn btn-primary btn-sm" onclick={startInvite}>New code</button>
+            <button class="btn btn-ghost btn-sm" onclick={() => { step = 'idle' }}>Close</button>
+          </div>
+        {:else if step === 'invite-aborted'}
+          <p class="warn-text">{addError}</p>
+          <div class="inline-form">
+            <button class="btn btn-primary btn-sm" onclick={startInvite}>New code</button>
+            <button class="btn btn-ghost btn-sm" onclick={() => { step = 'idle' }}>Close</button>
+          </div>
+        {:else if step === 'scan' || step === 'paste'}
+          <p class="hint-sm">On the phone, open Cambium and tap “Set up phone unlock” under this
+            signer. It shows a code; nothing in it is secret. Its “Copy code” button gives the text
+            to paste here.</p>
+          {#if step === 'scan'}
+            <QrScanner onresult={accept} oncancel={() => { step = 'paste' }} />
+            {#if scanSpent}
+              <p class="warn-text">That code was already used here. Start again on the phone for a new one.</p>
+            {/if}
+          {:else}
+            <textarea class="field-input code-input" rows="3" spellcheck="false" autocomplete="off"
+              placeholder="heartwood-unlock:enrol?v=1&amp;…" bind:value={pasted}></textarea>
+            {#if pasted.trim() && !pastedCode}
+              <p class="warn-text">That is not a phone-unlock code from Cambium.</p>
+            {:else if pastedSpent}
+              <p class="warn-text">This code was already used here. Start again on the phone for a new one.</p>
+            {/if}
+            <div class="inline-form">
+              <button class="btn btn-secondary btn-sm" disabled={!pastedCode || pastedSpent}
+                onclick={() => accept(pasted)}>Use this code</button>
+              <button class="btn btn-ghost btn-sm" onclick={() => startAdd('scan')}>Scan instead</button>
+            </div>
+          {/if}
+          <button class="btn btn-ghost btn-sm" onclick={() => { step = 'idle' }}>Cancel</button>
+        {:else if step === 'confirm' && code}
+          <p class="hint-sm">Check Cambium shows these five words, in this order.</p>
+          <WordPairs words={confirmWords} />
+          <p class="hint-sm">Next, the signer shows the same words, two at a time. Hold its button
+            only if all three screens match.</p>
+          <div class="inline-form">
+            <button class="btn btn-primary btn-sm" onclick={continueFromConfirm}>Send to the signer</button>
+            <button class="btn btn-ghost btn-sm" onclick={() => { stopInvite(); step = 'idle' }}>Cancel</button>
+          </div>
+          <details class="disclosure">
+            <summary>Why compare with the phone, not only this page?</summary>
+            <p class="hint-sm">Whoever relayed the request could have swapped the words shown here.
+              The phone and the signer cannot both be swapped, so their match is the check that
+              counts. The check code afterwards only confirms the phone received the hand-off.</p>
+            <table class="kv-table"><tbody>
+              <tr><td class="label">Phone</td><td>{code.label}</td></tr>
+              <tr><td class="label">Relays</td><td>
+                {#each code.relays as relay}<div class="mono">{relay}</div>{/each}
+              </td></tr>
+            </tbody></table>
+          </details>
+        {:else if step === 'working'}
+          <p class="hint-sm">Wait for ADD PHONE. It shows the words two at a time, and its button only
+            works once all five have shown. Hold it if they match these and the phone.</p>
+          <WordPairs words={confirmWords} />
+          {#if working}<p class="hint-sm status">{working}</p>{/if}
+        {:else if step === 'done' && result}
+          <p class="hint-sm">Check code</p>
+          <p class="check-code mono">{result.checkCode}</p>
+          <p class="hint-sm">Cambium and the signer show the same code. If all three match, confirm
+            on the phone with its screen lock.</p>
+          <div class="inline-form">
+            <button class="btn btn-secondary btn-sm" onclick={() => { step = 'idle' }}>Done</button>
+            <ConfirmButton
+              label="Codes don't match: revoke"
+              question={`Revoke record ${result.id}? The phone that answered can no longer unlock this signer.`}
+              confirmLabel="Yes, revoke"
+              busyLabel="Revoking…"
+              busy={revoking === result.id}
+              buttonClass="btn btn-secondary btn-sm"
+              onconfirm={() => {
+                const r = result
+                const label = code?.label ?? 'the phone'
+                if (r) void revoke(r.id, label)
+                step = 'idle'
+              }}
+            />
+          </div>
+        {:else if step === 'orphan' && orphanId !== null}
+          <p class="warn-text">{addError ?? `The signer never answered in time, but it may have kept a record nobody holds (record ${orphanId}): its secret never reached this browser, so it cannot reach the phone either.`}</p>
+          <p class="hint-sm">Revoke it, then start again with a new code from the phone.</p>
+          <div class="inline-form">
+            <button class="btn btn-secondary btn-sm" disabled={orphanBusy}
+              onclick={() => revokeOrphan(orphanId!)}>{orphanBusy ? 'Revoking…' : `Revoke record ${orphanId}`}</button>
+            <button class="btn btn-ghost btn-sm" onclick={() => { step = 'idle'; orphanId = null }}>Close</button>
+          </div>
+        {:else if step === 'failed'}
+          <p class="warn-text">{addError}</p>
+          <div class="inline-form">
+            {#if codeSpent}
+              <button class="btn btn-secondary btn-sm" onclick={() => startAdd('scan')}>Scan a new code</button>
+            {:else}
+              <button class="btn btn-secondary btn-sm" onclick={add}>Try again</button>
+            {/if}
+            <button class="btn btn-ghost btn-sm" onclick={() => { step = 'idle' }}>Close</button>
+          </div>
+        {/if}
+      </div>
+    {/if}
+
     <details class="disclosure announce">
       <summary>Sapwood's own unlock message</summary>
       <p class="hint-sm">When it is locked, the signer also posts a message tagged with your operator
@@ -454,121 +633,18 @@
         can link the signer's restarts. Phone messages carry no such tag. If your phones are enough,
         turn it off; Sapwood can still unlock over USB. It stays on while no phone is set up, or a
         locked signer could only be unlocked over the cable.</p>
-      <div class="lq-buttons">
-        <button class="btn btn-sm" class:btn-secondary={!list.announceOperator} class:lq-on={list.announceOperator}
-          disabled={announcePending || list.announceOperator} onclick={() => changeAnnounce(true)}>On</button>
-        <button class="btn btn-sm" class:btn-secondary={list.announceOperator} class:lq-on={!list.announceOperator}
-          disabled={announcePending || !list.announceOperator || list.phones.length === 0}
-          onclick={() => changeAnnounce(false)}>Off</button>
-      </div>
+      <TogglePair
+        label="Sapwood's own unlock message"
+        onLabel="On"
+        offLabel="Off"
+        value={list.announceOperator}
+        pending={announcePending}
+        onDisabled={list.phones.length === 0}
+        onchange={changeAnnounce}
+      />
       {#if announceStatus}<p class="hint-sm status">{announceStatus}</p>{/if}
     </details>
   {/if}
-
-  {#if step !== 'idle'}
-    <div class="add card">
-      {#if step === 'invite'}
-        {#if !invite}
-          <p class="hint-sm">Opening relays…</p>
-        {:else}
-          <h4 class="invite-title">Scan this with Cambium</h4>
-          <p class="hint-sm">On the phone, open Cambium, go to this signer's screen, and tap
-            "Set up phone unlock", then "Scan Sapwood's code".</p>
-          <div class="qr invite-qr">{@html inviteQr}</div>
-          <p class="hint-sm countdown">Waiting for the phone. Expires in {formatCountdown(inviteSecondsLeft)}.</p>
-        {/if}
-        <button class="btn btn-ghost btn-sm" onclick={() => { stopInvite(); step = 'idle' }}>Cancel</button>
-      {:else if step === 'invite-expired'}
-        <p class="warn-text">Code expired, make a new one.</p>
-        <div class="inline-form">
-          <button class="btn btn-primary btn-sm" onclick={startInvite}>New code</button>
-          <button class="btn btn-ghost btn-sm" onclick={() => { step = 'idle' }}>Close</button>
-        </div>
-      {:else if step === 'invite-aborted'}
-        <p class="warn-text">{addError}</p>
-        <div class="inline-form">
-          <button class="btn btn-primary btn-sm" onclick={startInvite}>New code</button>
-          <button class="btn btn-ghost btn-sm" onclick={() => { step = 'idle' }}>Close</button>
-        </div>
-      {:else if step === 'scan' || step === 'paste'}
-        <p class="hint-sm">On the phone, open Cambium and tap “Set up phone unlock” under this
-          signer. It shows a code; nothing in it is secret. Its “Copy code” button gives the text
-          to paste here.</p>
-        {#if step === 'scan'}
-          <QrScanner onresult={accept} oncancel={() => { step = 'paste' }} />
-          {#if scanSpent}
-            <p class="warn-text">That code was already used here. Start again on the phone for a new one.</p>
-          {/if}
-        {:else}
-          <textarea class="field-input code-input" rows="3" spellcheck="false" autocomplete="off"
-            placeholder="heartwood-unlock:enrol?v=1&amp;…" bind:value={pasted}></textarea>
-          {#if pasted.trim() && !pastedCode}
-            <p class="warn-text">That is not a phone-unlock code from Cambium.</p>
-          {:else if pastedSpent}
-            <p class="warn-text">This code was already used here. Start again on the phone for a new one.</p>
-          {/if}
-          <div class="inline-form">
-            <button class="btn btn-secondary btn-sm" disabled={!pastedCode || pastedSpent}
-              onclick={() => accept(pasted)}>Use this code</button>
-            <button class="btn btn-ghost btn-sm" onclick={() => startAdd('scan')}>Scan instead</button>
-          </div>
-        {/if}
-        <button class="btn btn-ghost btn-sm" onclick={() => { step = 'idle' }}>Cancel</button>
-      {:else if step === 'confirm' && code}
-        <table class="kv-table"><tbody>
-          <tr><td class="label">Phone</td><td>{code.label}</td></tr>
-          <tr><td class="label">Waiting on</td><td>
-            {#each code.relays as relay}<div class="mono">{relay}</div>{/each}
-          </td></tr>
-        </tbody></table>
-        <p class="hint-sm">The signer shows ADD PHONE and five words, two at a time over about
-          12 seconds before it will accept a hold.</p>
-        <div class="words-preview">
-          <p class="words-headline">Check your phone shows these same five words</p>
-          <p class="mono words">{requestWords(code.enrolPubkey).join(' ')}</p>
-          <p class="hint-sm">Compare them with your phone's own screen, and with the signer's
-            card, before holding the button: that is the check that matters, since whoever
-            relayed the request could have swapped the words shown here. A check code appears
-            afterwards too, but it only confirms the phone got the hand-off; it does not defend
-            against a swapped phone.</p>
-        </div>
-        <div class="inline-form">
-          <button class="btn btn-primary btn-sm" onclick={continueFromConfirm}>Continue</button>
-          <button class="btn btn-ghost btn-sm" onclick={() => { stopInvite(); step = 'idle' }}>Cancel</button>
-        </div>
-      {:else if step === 'working'}
-        <p class="hint-sm">{working}</p>
-      {:else if step === 'done' && result}
-        <p class="success-text">The signer added {code?.label} as record {result.id}.</p>
-        <p class="hint-sm">This check code confirms the phone got it: the five words you compared
-          before holding the button are what defended against a swapped phone. The phone should show
-          the same six characters:</p>
-        <p class="check-code mono">{result.checkCode}</p>
-        <p class="hint-sm">If they match, confirm on the phone with its screen lock. If they do
-          not, someone else answered the phone first: revoke record {result.id} now and start
-          again.</p>
-        <button class="btn btn-secondary btn-sm" onclick={() => { step = 'idle' }}>Finished</button>
-      {:else if step === 'orphan' && orphanId !== null}
-        <p class="warn-text">{addError ?? `The signer never answered in time, but it may have kept a record nobody holds (record ${orphanId}): its secret never reached this browser, so it cannot reach the phone either.`}</p>
-        <p class="hint-sm">Revoke it, then start again with a new code from the phone.</p>
-        <div class="inline-form">
-          <button class="btn btn-secondary btn-sm" disabled={orphanBusy}
-            onclick={() => revokeOrphan(orphanId!)}>{orphanBusy ? 'Revoking…' : `Revoke record ${orphanId}`}</button>
-          <button class="btn btn-ghost btn-sm" onclick={() => { step = 'idle'; orphanId = null }}>Close</button>
-        </div>
-      {:else if step === 'failed'}
-        <p class="warn-text">{addError}</p>
-        <div class="inline-form">
-          {#if codeSpent}
-            <button class="btn btn-secondary btn-sm" onclick={() => startAdd('scan')}>Scan a new code</button>
-          {:else}
-            <button class="btn btn-secondary btn-sm" onclick={add}>Try again</button>
-          {/if}
-          <button class="btn btn-ghost btn-sm" onclick={() => { step = 'idle' }}>Close</button>
-        </div>
-      {/if}
-    </div>
-  {/if}
 </div>
 
 <style>
@@ -582,18 +658,24 @@
   .phone-name { font-weight: 600; color: var(--text); }
   .phone-id { color: var(--text-dim); font-size: 0.8rem; flex: 1; }
   .inline-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.6rem; }
-  .add { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.8rem; align-items: flex-start; }
+  .add-phone-btn { width: 100%; }
+  .enrol { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.8rem; align-items: flex-start; }
+  .enrol-heading { font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--text); }
+  .enrol-heading:focus { outline: 2px solid var(--green); outline-offset: 2px; }
+  /* Announced, not shown: every step already says the same on screen. */
+  .enrol-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
   .code-input { width: 100%; box-sizing: border-box; font-size: 0.8rem; resize: vertical; }
-  .check-code { font-size: 2rem; letter-spacing: 0.2em; color: var(--green); margin: 0.2rem 0; }
-  .words-preview { border-top: 1px solid var(--border); padding-top: 0.6rem; margin-top: 0.2rem; }
-  .words-headline { font-weight: 700; margin: 0 0 0.3rem; }
-  .words { font-size: 1.4rem; font-weight: 700; letter-spacing: 0.05em; margin: 0 0 0.5rem; }
+  .check-code { font-size: 2rem; font-weight: 600; letter-spacing: 0.2em; color: var(--green); margin: 0.2rem 0; font-variant-numeric: slashed-zero; }
   .status { margin-top: 0.6rem; color: var(--text-dim); }
   .announce { margin-top: 1rem; }
-  .lq-buttons { display: flex; gap: 0.5rem; margin: 0.4rem 0; }
-  .lq-on { border-color: var(--green-dim); color: var(--green); background: #08130d; }
-  .invite-title { font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--text); }
-  .qr { width: 220px; padding: 12px; background: #fff; border-radius: 6px; margin: 0.4rem 0; }
+  .qr { width: 220px; padding: 12px; background: #fff; border-radius: 6px; margin: 0.4rem 0; flex: none; }
   .qr :global(svg) { display: block; width: 100%; height: auto; }
   .countdown { font-weight: 600; }
+  .invite-layout { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
+  .invite-steps { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; min-width: 12rem; flex: 1; }
+  .invite-steps ol { margin: 0; padding-left: 1.1rem; }
+
+  @media (max-height: 500px) {
+    .qr { width: 180px; }
+  }
 </style>
diff --git a/src/components/UnlockPhones.test.ts b/src/components/UnlockPhones.test.ts
index f86bc3b..6918ad7 100644
--- a/src/components/UnlockPhones.test.ts
+++ b/src/components/UnlockPhones.test.ts
@@ -174,10 +174,10 @@ describe('UnlockPhones', () => {
     await fireEvent.click(screen.getByRole('button', { name: 'Paste a code' }))
     await fireEvent.input(screen.getByRole('textbox'), { target: { value: CODE } })
     await fireEvent.click(screen.getByRole('button', { name: 'Use this code' }))
-    await fireEvent.click(screen.getByRole('button', { name: 'Continue' }))
+    await fireEvent.click(screen.getByRole('button', { name: 'Send to the signer' }))
     expect(await screen.findByText('9B6 164')).toBeTruthy()
     expect(api.enrolUnlockPhone).toHaveBeenCalledOnce()
-    expect(api.enrolUnlockPhone).toHaveBeenCalledWith(P, 'Pixel 8', expect.stringMatching(/ADD PHONE/))
+    expect(api.enrolUnlockPhone).toHaveBeenCalledWith(P, 'Pixel 8', expect.stringMatching(/compare the five words/i))
     expect(relays.ensureRelay).toHaveBeenCalledWith('wss://relay.example', expect.anything())
     const [urls, event] = relays.publish.mock.calls[0] as unknown as [string[], { kind: number; tags: string[][] }]
     expect(urls).toEqual(['wss://relay.example'])
@@ -185,7 +185,7 @@ describe('UnlockPhones', () => {
     expect(event.tags).toEqual([['h', R]])
 
     // Finished, then the same code again: refused here, not sent twice.
-    await fireEvent.click(screen.getByRole('button', { name: 'Finished' }))
+    await fireEvent.click(screen.getByRole('button', { name: 'Done' }))
     await fireEvent.click(await screen.findByText('Phone shows a code instead? Paste it'))
     await fireEvent.click(screen.getByRole('button', { name: 'Paste a code' }))
     await fireEvent.input(screen.getByRole('textbox'), { target: { value: CODE } })
@@ -209,7 +209,7 @@ describe('UnlockPhones', () => {
     await fireEvent.click(screen.getByRole('button', { name: 'Paste a code' }))
     await fireEvent.input(screen.getByRole('textbox'), { target: { value: CODE.replace(P, 'c3'.repeat(32)) } })
     await fireEvent.click(screen.getByRole('button', { name: 'Use this code' }))
-    await fireEvent.click(screen.getByRole('button', { name: 'Continue' }))
+    await fireEvent.click(screen.getByRole('button', { name: 'Send to the signer' }))
     expect(await screen.findByText(/Each code works once/)).toBeTruthy()
     expect(screen.getByRole('button', { name: 'Scan a new code' })).toBeTruthy()
     expect(screen.queryByRole('button', { name: 'Try again' })).toBeNull()
@@ -254,12 +254,13 @@ describe('UnlockPhones', () => {
     await fireEvent.input(screen.getByRole('textbox'), { target: { value: codeWith(p) } })
     await fireEvent.click(screen.getByRole('button', { name: 'Use this code' }))
     // Sapwood's own copy of the request-code words: for reference only.
-    expect(screen.getByText('release jar chimney acoustic depart')).toBeTruthy()
-    expect(screen.getByText(/Compare them with your phone's own screen/)).toBeTruthy()
-    await fireEvent.click(screen.getByRole('button', { name: 'Continue' }))
+    expect(screen.getByText('release')).toBeTruthy()
+    expect(screen.getByText('depart')).toBeTruthy()
+    expect(screen.getByText('Check Cambium shows these five words, in this order.')).toBeTruthy()
+    await fireEvent.click(screen.getByRole('button', { name: 'Send to the signer' }))
     expect(await screen.findByText('9B6 164')).toBeTruthy()
     expect(api.enrolUnlockPhone).toHaveBeenCalledOnce()
-    expect(api.enrolUnlockPhone).toHaveBeenCalledWith(p, 'Pixel 8', expect.stringMatching(/ADD PHONE/))
+    expect(api.enrolUnlockPhone).toHaveBeenCalledWith(p, 'Pixel 8', expect.stringMatching(/compare the five words/i))
     // Sent exactly once: the hand-off is only ever published the once.
     const [urls, event] = relays.publish.mock.calls[0] as unknown as [string[], { kind: number; tags: string[][] }]
     expect(urls).toEqual(['wss://relay.example'])
@@ -282,7 +283,7 @@ describe('UnlockPhones', () => {
     await fireEvent.click(screen.getByRole('button', { name: 'Paste a code' }))
     await fireEvent.input(screen.getByRole('textbox'), { target: { value: codeWith(p) } })
     await fireEvent.click(screen.getByRole('button', { name: 'Use this code' }))
-    await fireEvent.click(screen.getByRole('button', { name: 'Continue' }))
+    await fireEvent.click(screen.getByRole('button', { name: 'Send to the signer' }))
     expect(await screen.findByRole('button', { name: 'Revoke record 99' })).toBeTruthy()
     expect(screen.getByText(/nobody holds/)).toBeTruthy()
     await fireEvent.click(screen.getByRole('button', { name: 'Revoke record 99' }))
@@ -300,7 +301,7 @@ describe('UnlockPhones', () => {
     await fireEvent.click(screen.getByRole('button', { name: 'Paste a code' }))
     await fireEvent.input(screen.getByRole('textbox'), { target: { value: codeWith(p) } })
     await fireEvent.click(screen.getByRole('button', { name: 'Use this code' }))
-    await fireEvent.click(screen.getByRole('button', { name: 'Continue' }))
+    await fireEvent.click(screen.getByRole('button', { name: 'Send to the signer' }))
     expect(await screen.findByText(/never answered in time/)).toBeTruthy()
     expect(screen.queryByText(/nobody holds/)).toBeNull()
   })
@@ -320,11 +321,11 @@ describe('UnlockPhones', () => {
       const p = '11'.repeat(32)
       opts.onevent(inviteReply(codeWith(p)))
 
-      expect(await screen.findByText('Check your phone shows these same five words')).toBeTruthy()
-      expect(screen.getByText('Pixel 8')).toBeTruthy()
-      await fireEvent.click(screen.getByRole('button', { name: 'Continue' }))
+      expect(await screen.findByText('Pixel 8 wants to unlock this signer')).toBeTruthy()
+      expect(screen.getAllByText('Pixel 8').length).toBeGreaterThan(0)
+      await fireEvent.click(screen.getByRole('button', { name: 'Send to the signer' }))
       expect(await screen.findByText('9B6 164')).toBeTruthy()
-      expect(api.enrolUnlockPhone).toHaveBeenCalledWith(p, 'Pixel 8', expect.stringMatching(/ADD PHONE/))
+      expect(api.enrolUnlockPhone).toHaveBeenCalledWith(p, 'Pixel 8', expect.stringMatching(/compare the five words/i))
     })
 
     it('ignores a repeat of the identical reply', async () => {
@@ -335,9 +336,9 @@ describe('UnlockPhones', () => {
 
       const p = '22'.repeat(32)
       opts.onevent(inviteReply(codeWith(p)))
-      await screen.findByText('Check your phone shows these same five words')
+      await screen.findByText('Pixel 8 wants to unlock this signer')
       opts.onevent(inviteReply(codeWith(p)))
-      expect(screen.getByText('Check your phone shows these same five words')).toBeTruthy()
+      expect(screen.getByText('Pixel 8 wants to unlock this signer')).toBeTruthy()
       expect(screen.queryByText(/Two phones answered/)).toBeNull()
     })
 
@@ -348,10 +349,10 @@ describe('UnlockPhones', () => {
       const opts = relays.subscribe.mock.calls[0][2]
 
       opts.onevent(inviteReply(codeWith('33'.repeat(32))))
-      await screen.findByText('Check your phone shows these same five words')
+      await screen.findByText('Pixel 8 wants to unlock this signer')
       opts.onevent(inviteReply(codeWith('44'.repeat(32))))
 
-      expect(await screen.findByText(/Two phones answered this code/)).toBeTruthy()
+      expect(await screen.findByText('Two phones answered')).toBeTruthy()
       expect(screen.getByRole('button', { name: 'New code' })).toBeTruthy()
       expect(api.enrolUnlockPhone).not.toHaveBeenCalled()
     })
@@ -374,7 +375,7 @@ describe('UnlockPhones', () => {
       await screen.findByText('Scan this with Cambium')
       const opts = relays.subscribe.mock.calls[0][2]
       opts.onevent(inviteReply(codeWith('55'.repeat(32)), 'ff'.repeat(16)))
-      expect(screen.queryByText('Check your phone shows these same five words')).toBeNull()
+      expect(screen.queryByText('Pixel 8 wants to unlock this signer')).toBeNull()
     })
   })
 })
diff --git a/src/components/VaultUnlock.svelte b/src/components/VaultUnlock.svelte
index 86ff4f3..218db49 100644
--- a/src/components/VaultUnlock.svelte
+++ b/src/components/VaultUnlock.svelte
@@ -110,7 +110,7 @@
       }
       const seconds = Math.round(vaultUnlockTimeoutMs(lockedSlots) / 1000)
       const count = lockedSlots === null ? 'each identity' : `${lockedSlots} ${lockedSlots === 1 ? 'identity' : 'identities'}`
-      device.awaitingButton = `Unlocking — the signer unseals ${count} with a slow key derivation on purpose, about 25 seconds each. This waits up to ${seconds} seconds; leave the cable in.`
+      device.awaitingButton = `Unlocking: the signer unseals ${count} with a slow key derivation on purpose, about 25 seconds each. This waits up to ${seconds} seconds; leave the cable in.`
       try {
         await serialVaultUnlock(serialTransport, keyHex, lockedSlots)
       } finally {
@@ -134,7 +134,7 @@
   async function unlockRelay(keyHex: string | undefined, remember: boolean) {
     busy = true
     status = null
-    device.awaitingButton = 'Sending the vault key — the signer unseals each identity with a slow key derivation on purpose, about 25 seconds each, then rejoins its relays.'
+    device.awaitingButton = 'Sending the vault key: the signer unseals each identity with a slow key derivation on purpose, about 25 seconds each, then rejoins its relays.'
     try {
       await sendVaultKeyOverRelay(keyHex)
       if (remember && keyHex && deviceKey) {
@@ -158,7 +158,7 @@
     <h2 class="vault-title">Signer is locked</h2>
     <p class="hint no-gap">
       Its keys are encrypted at rest, so it signs nothing until it is unlocked.
-      It shows <strong>“Locked — Await unlock”</strong>.
+      It shows <strong>“Locked: Await unlock”</strong>.
     </p>
     {#if storedKey}
       <div class="vault-actions">
@@ -196,8 +196,8 @@
   <section class="card card--warn vault-banner" role="alert">
     <h2 class="vault-title">Signer is locked</h2>
     <p class="hint no-gap">
-      Your signer is locked and asking for its vault key — unlock? Only do this if you know
-      it just rebooted.
+      Your signer is locked and asking for its vault key. Unlock it only if you know it just
+      restarted.
     </p>
     {#if storedKey}
       <div class="vault-actions">
@@ -237,7 +237,7 @@
 {:else if device.vaultReconnect}
   <section class="card card--live vault-banner" role="status">
     <p class="hint no-gap">
-      Vault key sent. Waiting for the signer to unseal and rejoin its relays — about 25 seconds an
+      Vault key sent. Waiting for the signer to unseal and rejoin its relays, about 25 seconds an
       identity, then ~20 seconds to reconnect. Dialling it again every 10 seconds
       (attempt {device.vaultReconnect.attempt}, {reconnectElapsed}s so far).
     </p>
diff --git a/src/components/VaultUnlock.test.ts b/src/components/VaultUnlock.test.ts
index d0ceecd..9719f00 100644
--- a/src/components/VaultUnlock.test.ts
+++ b/src/components/VaultUnlock.test.ts
@@ -144,7 +144,7 @@ describe('VaultUnlock banner', () => {
     state.vaultUnlockRequest = { unlockPub: UNLOCK_PUB, lastSeen: Date.now() }
     storeVaultKey(HEX, VAULT_KEY)
     render(VaultUnlock)
-    expect(screen.getByText(/Only do this if you know it just rebooted/)).toBeTruthy()
+    expect(screen.getByText(/Unlock it only if you know it just restarted/)).toBeTruthy()
     await fireEvent.click(screen.getByText('Unlock'))
     expect(vi.mocked(sendVaultKeyOverRelay)).toHaveBeenCalledWith(undefined)
   })
diff --git a/src/components/WordPairs.svelte b/src/components/WordPairs.svelte
new file mode 100644
index 0000000..39134fc
--- /dev/null
+++ b/src/components/WordPairs.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  // The five-word compare, shown once in `confirm` and again (unmoved) in
+  // `working`: never break a word across lines, group in pairs, whole numbers
+  // read like handwriting (no dotted/slashed confusion with letters).
+  interface Props {
+    words: string[]
+  }
+  let { words }: Props = $props()
+</script>
+
+<ol class="word-pairs">
+  {#each words as word, i (i)}
+    <li><span class="word-no">{i + 1}</span> <span class="word">{word}</span></li>
+  {/each}
+</ol>
+
+<style>
+  .word-pairs {
+    list-style: none; margin: 0.6rem 0; padding: 0;
+    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.9rem;
+  }
+  .word-pairs li {
+    display: inline-flex; align-items: baseline; gap: 0.35rem;
+    white-space: nowrap;
+  }
+  /* Wider gap after the 2nd and 4th word: three visual groups of "1-2 / 3-4 / 5",
+     matching the board's own paging. */
+  .word-pairs li:nth-child(2n) { margin-right: 0.5rem; }
+  .word-no { font-size: 0.8rem; color: var(--text-muted); }
+  .word {
+    font-size: 1.5rem; font-weight: 600; color: var(--green);
+    white-space: nowrap; word-break: normal; font-variant-numeric: slashed-zero;
+  }
+</style>
diff --git a/src/lib/device-summary.test.ts b/src/lib/device-summary.test.ts
index 906d629..d1956f3 100644
--- a/src/lib/device-summary.test.ts
+++ b/src/lib/device-summary.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { deviceSummaryRows, type DeviceSummaryInput } from './device-summary.js'
+import { deviceSummaryRows, attentionRows, type DeviceSummaryInput } from './device-summary.js'
 
 function base(overrides: Partial<DeviceSummaryInput> = {}): DeviceSummaryInput {
   return {
@@ -10,38 +10,46 @@ function base(overrides: Partial<DeviceSummaryInput> = {}): DeviceSummaryInput {
     phoneCount: null,
     atRestUnrecognised: false,
     overUsb: true,
+    locked: false,
     needsBackup: false,
     lastExportAt: Date.parse('2026-09-01T00:00:00Z'),
     crash: false,
     fragmented: false,
     recovering: false,
     storageState: 'ok',
-    modeLabel: 'USB cable',
+    storagePct: null,
+    statusLost: false,
     ...overrides,
   }
 }
 
 describe('deviceSummaryRows', () => {
-  it('reports firmware up to date and no storage row when everything is ok', () => {
+  it('reports firmware up to date, in fixed section order', () => {
     const rows = deviceSummaryRows(base())
+    expect(rows.map((r) => r.id)).toEqual(['power-cut', 'firmware', 'backup'])
     expect(rows.find((r) => r.id === 'firmware')).toEqual({
-      id: 'firmware', label: 'Firmware', dot: 'ok', text: 'Up to date (v0.18.0)', actionLabel: null,
+      id: 'firmware', label: 'Firmware', dot: 'ok', text: 'Up to date (v0.18.0)',
     })
-    expect(rows.find((r) => r.id === 'storage')).toBeUndefined()
   })
 
-  it('flags an available update with an Update action', () => {
+  it('gives an unknown version a grey dot, never green', () => {
+    const rows = deviceSummaryRows(base({ runningVersion: null }))
+    const row = rows.find((r) => r.id === 'firmware')!
+    expect(row.dot).toBe('unknown')
+    expect(row.text).toBe('Version unknown')
+  })
+
+  it('flags an available update on the firmware row', () => {
     const rows = deviceSummaryRows(base({ updateAvailable: true, updateVersion: '0.19.0' }))
     expect(rows.find((r) => r.id === 'firmware')).toEqual({
-      id: 'firmware', label: 'Firmware', dot: 'attention', text: 'Update available: v0.19.0', actionLabel: 'Update',
+      id: 'firmware', label: 'Firmware', dot: 'attention', text: 'Update available: v0.19.0',
     })
   })
 
   it('describes phone unlock with a phone count', () => {
     const rows = deviceSummaryRows(base({ unlockMode: 'phone', phoneCount: 2 }))
     expect(rows.find((r) => r.id === 'power-cut')).toEqual({
-      id: 'power-cut', label: 'After a power cut', dot: 'ok',
-      text: 'Unlocks from your phone (2 phones)', actionLabel: 'Change',
+      id: 'power-cut', label: 'After a power cut', dot: 'ok', text: 'Unlocks from your phone (2 phones)',
     })
   })
 
@@ -50,38 +58,36 @@ describe('deviceSummaryRows', () => {
     expect(rows.find((r) => r.id === 'power-cut')?.text).toBe('Unlocks from your phone (1 phone)')
   })
 
-  it('marks no encryption as a problem', () => {
+  it('marks no encryption as a problem, row text just "Not encrypted"', () => {
     const rows = deviceSummaryRows(base({ unlockMode: 'none' }))
     expect(rows.find((r) => r.id === 'power-cut')).toEqual({
-      id: 'power-cut', label: 'After a power cut', dot: 'problem',
-      text: 'Not encrypted: anyone holding it can read the keys',
-      actionLabel: 'Change',
+      id: 'power-cut', label: 'After a power cut', dot: 'problem', text: 'Not encrypted',
     })
   })
 
-  it('names the transport for an unknown mode over WiFi, with a neutral dot', () => {
-    const rows = deviceSummaryRows(base({ unlockMode: null, overUsb: false, modeLabel: 'WiFi' }))
+  it('gives a locked signer a problem row reading "Locked"', () => {
+    const rows = deviceSummaryRows(base({ locked: true, unlockMode: null }))
     expect(rows.find((r) => r.id === 'power-cut')).toEqual({
-      id: 'power-cut', label: 'After a power cut', dot: 'unknown',
-      text: 'Unknown over WiFi. Connect by USB to check', actionLabel: 'Change',
+      id: 'power-cut', label: 'After a power cut', dot: 'problem', text: 'Locked',
     })
   })
 
-  it('gives a different unknown reason over USB, still neutral', () => {
-    const rows = deviceSummaryRows(base({ unlockMode: null, overUsb: true }))
-    const row = rows.find((r) => r.id === 'power-cut')!
-    expect(row.dot).toBe('unknown')
-    expect(row.text).toBe('Unknown: no vault key held here')
+  it('names an unknown mode over WiFi and over USB, both neutral', () => {
+    const wifi = deviceSummaryRows(base({ unlockMode: null, overUsb: false }))
+    expect(wifi.find((r) => r.id === 'power-cut')).toEqual({
+      id: 'power-cut', label: 'After a power cut', dot: 'unknown', text: 'Unknown: connect by USB to check',
+    })
+    const usb = deviceSummaryRows(base({ unlockMode: null, overUsb: true }))
+    expect(usb.find((r) => r.id === 'power-cut')).toEqual({
+      id: 'power-cut', label: 'After a power cut', dot: 'unknown', text: 'Unknown: no vault key held here',
+    })
   })
 
-  it('names an unrecognised firmware report distinctly, over USB or WiFi', () => {
-    const usb = deviceSummaryRows(base({ unlockMode: null, overUsb: true, atRestUnrecognised: true }))
-    const wifi = deviceSummaryRows(base({ unlockMode: null, overUsb: false, modeLabel: 'WiFi', atRestUnrecognised: true }))
-    for (const rows of [usb, wifi]) {
-      const row = rows.find((r) => r.id === 'power-cut')!
-      expect(row.dot).toBe('unknown')
-      expect(row.text).toBe("Your signer reported a setting this version of Sapwood doesn't know. Update Sapwood.")
-    }
+  it('names an unrecognised firmware report distinctly', () => {
+    const rows = deviceSummaryRows(base({ unlockMode: null, atRestUnrecognised: true }))
+    const row = rows.find((r) => r.id === 'power-cut')!
+    expect(row.dot).toBe('unknown')
+    expect(row.text).toBe('Update Sapwood to read this setting')
   })
 
   it('reads a fresh backup with its date, green', () => {
@@ -89,90 +95,109 @@ describe('deviceSummaryRows', () => {
     const row = rows.find((r) => r.id === 'backup')!
     expect(row.dot).toBe('ok')
     expect(row.text).toContain('Backed up')
-    expect(row.actionLabel).toBe('Back up')
   })
 
-  it('asks for a backup when one is needed', () => {
-    const rows = deviceSummaryRows(base({ needsBackup: true }))
-    expect(rows.find((r) => r.id === 'backup')).toEqual({
-      id: 'backup', label: 'Backup', dot: 'attention', text: 'Back up needed', actionLabel: 'Back up',
+  it('reports backup needed, over USB or WiFi', () => {
+    expect(deviceSummaryRows(base({ needsBackup: true })).find((r) => r.id === 'backup')).toEqual({
+      id: 'backup', label: 'Backup', dot: 'attention', text: 'Backup needed',
+    })
+    expect(deviceSummaryRows(base({ overUsb: false, needsBackup: true })).find((r) => r.id === 'backup')).toEqual({
+      id: 'backup', label: 'Backup', dot: 'attention', text: 'Backup needed',
     })
   })
 
-  it('asks for a backup when none has ever been recorded', () => {
-    const rows = deviceSummaryRows(base({ lastExportAt: null }))
+  it('points a WiFi signer at USB for backup, neutral', () => {
+    const rows = deviceSummaryRows(base({ overUsb: false }))
     expect(rows.find((r) => r.id === 'backup')).toEqual({
-      id: 'backup', label: 'Backup', dot: 'attention', text: 'Back up needed', actionLabel: 'Back up',
+      id: 'backup', label: 'Backup', dot: 'unknown', text: 'Connect by USB to back up',
     })
   })
+})
 
-  it('points a WiFi signer at USB for backup, neutral (not green) and with no action button', () => {
-    const rows = deviceSummaryRows(base({ overUsb: false, modeLabel: 'WiFi' }))
-    expect(rows.find((r) => r.id === 'backup')).toEqual({
-      id: 'backup', label: 'Backup', dot: 'unknown', text: 'Connect by USB to back up', actionLabel: null,
-    })
+describe('attentionRows', () => {
+  it('is empty when nothing needs attention', () => {
+    expect(attentionRows(base())).toEqual([])
   })
 
-  it('flags a needed backup over WiFi as amber, not neutral', () => {
-    const rows = deviceSummaryRows(base({ overUsb: false, modeLabel: 'WiFi', needsBackup: true }))
-    expect(rows.find((r) => r.id === 'backup')).toEqual({
-      id: 'backup', label: 'Backup', dot: 'attention', text: 'Back up needed: connect by USB', actionLabel: null,
-    })
+  it('flags no encryption as a problem card, with a "Choose how it unlocks" action', () => {
+    const rows = attentionRows(base({ unlockMode: 'none' }))
+    expect(rows).toEqual([{
+      id: 'not-encrypted', dot: 'problem', label: 'Not encrypted',
+      text: 'Anyone holding it can read the keys.', actionLabel: 'Choose how it unlocks',
+    }])
   })
 
-  it('reports a plain connection when nothing is wrong', () => {
-    const rows = deviceSummaryRows(base())
-    expect(rows.find((r) => r.id === 'connection')).toEqual({
-      id: 'connection', label: 'Connection', dot: 'ok', text: 'Connected over USB cable', actionLabel: 'Details',
-    })
+  it('does not flag a locked signer as "not encrypted"', () => {
+    expect(attentionRows(base({ locked: true, unlockMode: null }))).toEqual([])
   })
 
-  it('names crash, fragmentation and recovery, but never storage', () => {
-    const rows = deviceSummaryRows(base({ crash: true, fragmented: true, recovering: true, storageState: 'full' }))
-    const row = rows.find((r) => r.id === 'connection')!
-    expect(row.dot).toBe('attention')
-    expect(row.text).toBe(
-      'Connected over USB cable: last restart was a crash, memory is fragmented, recovering from a restart',
-    )
-    expect(row.text).not.toContain('storage')
+  it('offers an Update action over USB, and How to update over WiFi', () => {
+    const usb = attentionRows(base({ updateAvailable: true, updateVersion: '0.19.0' }))
+    expect(usb).toEqual([{
+      id: 'firmware', dot: 'attention', label: 'Update available',
+      text: 'v0.19.0 is ready to install.', actionLabel: 'Update',
+    }])
+    const wifi = attentionRows(base({ updateAvailable: true, updateVersion: '0.19.0', overUsb: false }))
+    expect(wifi).toEqual([{
+      id: 'firmware', dot: 'attention', label: 'Update available',
+      text: 'v0.19.0 is ready. Updates need the USB cable.', actionLabel: 'How to update',
+    }])
   })
 
-  it('does not cite storage in the connection row even when storage alone is warn', () => {
-    const rows = deviceSummaryRows(base({ storageState: 'warn' }))
-    const row = rows.find((r) => r.id === 'connection')!
-    expect(row.dot).toBe('ok')
-    expect(row.text).toBe('Connected over USB cable')
+  it('names the backup date when one is on record, over USB', () => {
+    const rows = attentionRows(base({ needsBackup: true, lastExportAt: Date.parse('2026-09-01T00:00:00Z') }))
+    expect(rows[0].text).toContain('Pairings changed since your last backup on')
+    expect(rows[0].actionLabel).toBe('Back up')
   })
 
-  it('reports disconnected as a problem with no action', () => {
-    const rows = deviceSummaryRows(base({ modeLabel: 'Disconnected' }))
-    expect(rows.find((r) => r.id === 'connection')).toEqual({
-      id: 'connection', label: 'Connection', dot: 'problem', text: 'Disconnected', actionLabel: null,
-    })
+  it('says no backup is on record when none exists', () => {
+    const rows = attentionRows(base({ needsBackup: true, lastExportAt: null }))
+    expect(rows[0].text).toBe('Pairings changed and this browser has no backup on record.')
   })
 
-  it('adds a storage row only when it is warn or full', () => {
-    expect(deviceSummaryRows(base({ storageState: 'ok' })).find((r) => r.id === 'storage')).toBeUndefined()
-    expect(deviceSummaryRows(base({ storageState: 'warn' })).find((r) => r.id === 'storage')).toEqual({
-      id: 'storage', label: 'Storage', dot: 'attention', text: 'Filling up', actionLabel: 'Details',
-    })
-    expect(deviceSummaryRows(base({ storageState: 'full' })).find((r) => r.id === 'storage')).toEqual({
-      id: 'storage', label: 'Storage', dot: 'problem', text: 'Nearly full', actionLabel: 'Details',
+  it('gives a WiFi backup card no button, and the USB-cable copy', () => {
+    const rows = attentionRows(base({ overUsb: false, needsBackup: true }))
+    expect(rows).toEqual([{
+      id: 'backup', dot: 'attention', label: 'Back up your app pairings',
+      text: 'Connect by USB to back up. The signer asks for a button press.', actionLabel: null,
+    }])
+  })
+
+  it('shows the storage percentage, and problem dot only when full', () => {
+    const warn = attentionRows(base({ storageState: 'warn', storagePct: 87 }))
+    expect(warn[0]).toEqual({
+      id: 'storage', dot: 'attention', label: 'Storage 87% full',
+      text: 'Remove an unused persona or app pairing to free space.', actionLabel: 'Details',
     })
+    const full = attentionRows(base({ storageState: 'full', storagePct: 98 }))
+    expect(full[0].dot).toBe('problem')
+    expect(full[0].label).toBe('Storage 98% full')
+  })
+
+  it('is null (absent) when nothing needs a health card', () => {
+    expect(attentionRows(base())).toHaveLength(0)
+  })
+
+  it('joins several health reasons with a space, as a Health card, not Connection', () => {
+    const rows = attentionRows(base({ crash: true, fragmented: true, recovering: true }))
+    expect(rows).toEqual([{
+      id: 'health', dot: 'attention', label: 'Health',
+      text: 'The last restart was a crash. Memory is fragmented. It restarted itself to recover.',
+      actionLabel: 'Details',
+    }])
+  })
+
+  it('flags a stopped relay as "Not answering", with no button', () => {
+    const rows = attentionRows(base({ statusLost: true }))
+    expect(rows).toEqual([{
+      id: 'status-lost', dot: 'problem', label: 'Not answering',
+      text: 'The signer stopped answering over WiFi. What you see may be out of date.', actionLabel: null,
+    }])
   })
 
-  it('orders problems first, then attention, then unknown, then ok rows', () => {
-    const rows = deviceSummaryRows(base({
-      unlockMode: 'none', // problem
-      storageState: 'warn', // attention, standalone row
-      overUsb: false, // backup becomes 'unknown'
-      modeLabel: 'WiFi',
-    }))
-    const rank = (d: string) => (d === 'problem' ? 0 : d === 'attention' ? 1 : d === 'unknown' ? 2 : 3)
-    const dots = rows.map((r) => r.dot)
-    for (let i = 1; i < dots.length; i++) {
-      expect(rank(dots[i])).toBeGreaterThanOrEqual(rank(dots[i - 1]))
-    }
-    expect(rows[0].id).toBe('power-cut')
+  it('orders problem cards before attention cards', () => {
+    const rows = attentionRows(base({ unlockMode: 'none', storageState: 'warn', storagePct: 50 }))
+    expect(rows.map((r) => r.dot)).toEqual(['problem', 'attention'])
+    expect(rows[0].id).toBe('not-encrypted')
   })
 })
diff --git a/src/lib/device-summary.ts b/src/lib/device-summary.ts
index b8b87dd..e9b10c7 100644
--- a/src/lib/device-summary.ts
+++ b/src/lib/device-summary.ts
@@ -1,7 +1,7 @@
-// "Your signer" summary rows: the handful of plain-English lines at the top
-// of the Device panel, one per concern, ordered so anything needing
-// attention comes first. Pure so the ordering and wording are unit-tested
-// without a rendered component.
+// Device tab summary logic: the section-row status words (always shown, one
+// per section) and the Needs-attention cards (0 to n, shown only for the
+// handful of concerns that need a decision). Pure so the wording and ordering
+// are unit-tested without a rendered component.
 
 import type { UnlockMode } from './phone-unlock.js'
 
@@ -10,15 +10,27 @@ import type { UnlockMode } from './phone-unlock.js'
  *  state). It must never read as green. */
 export type SummaryDot = 'ok' | 'unknown' | 'attention' | 'problem'
 
-export type SummaryRowId = 'firmware' | 'power-cut' | 'backup' | 'connection' | 'storage'
+export type SummaryRowId = 'firmware' | 'power-cut' | 'backup'
 
+/** A section row's status word, shown beside its title whether the section
+ *  is open or not. */
 export interface SummaryRow {
   id: SummaryRowId
   /** The fixed, bold concern label shown before the state text, e.g. "Firmware". */
   label: string
   dot: SummaryDot
   text: string
-  /** Label for the row's one primary button, or null when there is nothing to do. */
+}
+
+export type AttentionRowId = 'not-encrypted' | 'firmware' | 'backup' | 'storage' | 'health' | 'status-lost'
+
+/** A Needs-attention card: only ever `problem` or `attention`. */
+export interface AttentionRow {
+  id: AttentionRowId
+  dot: SummaryDot
+  label: string
+  text: string
+  /** Label for the card's one button, or null when there is nothing to press. */
   actionLabel: string | null
 }
 
@@ -37,6 +49,9 @@ export interface DeviceSummaryInput {
    *  at all. Distinguishes "update Sapwood" from "connect by USB to check". */
   atRestUnrecognised: boolean
   overUsb: boolean
+  /** The signer is locked over USB (VaultUnlock owns the unlock itself; this
+   *  only changes the After-a-power-cut row's status). */
+  locked: boolean
   needsBackup: boolean
   lastExportAt: number | null
   /** The signer's last restart was a crash. */
@@ -46,109 +61,152 @@ export interface DeviceSummaryInput {
   /** The signer restarted itself to recover from a wedged relay service. */
   recovering: boolean
   storageState: 'ok' | 'warn' | 'full' | null
-  /** "USB cable" / "WiFi" / "Bridge" / "Disconnected". */
-  modeLabel: string
+  storagePct: number | null
+  /** A relay signer stopped answering status polls: what is on screen may be
+   *  stale. Never true over USB or bridge, where a dropped connection is
+   *  obvious immediately. */
+  statusLost: boolean
 }
 
 function severityRank(dot: SummaryDot): number {
   return dot === 'problem' ? 0 : dot === 'attention' ? 1 : dot === 'unknown' ? 2 : 3
 }
 
+function formatDate(at: number): string {
+  return new Date(at).toLocaleDateString(undefined, { dateStyle: 'medium' })
+}
+
 function firmwareRow(input: DeviceSummaryInput): SummaryRow {
   if (input.updateAvailable && input.updateVersion) {
-    return {
-      id: 'firmware', label: 'Firmware', dot: 'attention',
-      text: `Update available: v${input.updateVersion}`, actionLabel: 'Update',
-    }
+    return { id: 'firmware', label: 'Firmware', dot: 'attention', text: `Update available: v${input.updateVersion}` }
   }
   if (input.runningVersion) {
-    return {
-      id: 'firmware', label: 'Firmware', dot: 'ok',
-      text: `Up to date (v${input.runningVersion})`, actionLabel: null,
-    }
+    return { id: 'firmware', label: 'Firmware', dot: 'ok', text: `Up to date (v${input.runningVersion})` }
   }
-  return { id: 'firmware', label: 'Firmware', dot: 'ok', text: 'Version unknown', actionLabel: null }
+  // Unknown must never read green (F7): nothing here has been confirmed up to date.
+  return { id: 'firmware', label: 'Firmware', dot: 'unknown', text: 'Version unknown' }
 }
 
 function powerCutRow(input: DeviceSummaryInput): SummaryRow {
   const label = 'After a power cut'
+  if (input.locked) {
+    return { id: 'power-cut', label, dot: 'problem', text: 'Locked' }
+  }
   if (input.unlockMode === 'phone') {
     const n = input.phoneCount ?? 0
-    return {
-      id: 'power-cut', label, dot: 'ok',
-      text: `Unlocks from your phone (${n} phone${n === 1 ? '' : 's'})`,
-      actionLabel: 'Change',
-    }
+    return { id: 'power-cut', label, dot: 'ok', text: `Unlocks from your phone (${n} phone${n === 1 ? '' : 's'})` }
   }
   if (input.unlockMode === 'sapwood') {
-    return { id: 'power-cut', label, dot: 'ok', text: 'Waits for Sapwood', actionLabel: 'Change' }
+    return { id: 'power-cut', label, dot: 'ok', text: 'Waits for Sapwood or its PIN' }
   }
   if (input.unlockMode === 'none') {
-    return {
-      id: 'power-cut', label, dot: 'problem',
-      text: 'Not encrypted: anyone holding it can read the keys',
-      actionLabel: 'Change',
-    }
+    return { id: 'power-cut', label, dot: 'problem', text: 'Not encrypted' }
   }
-  const text = input.atRestUnrecognised
-    ? "Your signer reported a setting this version of Sapwood doesn't know. Update Sapwood."
-    : input.overUsb
-      ? 'Unknown: no vault key held here'
-      : `Unknown over ${input.modeLabel}. Connect by USB to check`
-  return { id: 'power-cut', label, dot: 'unknown', text, actionLabel: 'Change' }
-}
-
-function backupDate(at: number): string {
-  return new Date(at).toLocaleDateString()
+  if (input.atRestUnrecognised) {
+    return { id: 'power-cut', label, dot: 'unknown', text: 'Update Sapwood to read this setting' }
+  }
+  if (input.overUsb) {
+    return { id: 'power-cut', label, dot: 'unknown', text: 'Unknown: no vault key held here' }
+  }
+  return { id: 'power-cut', label, dot: 'unknown', text: 'Unknown: connect by USB to check' }
 }
 
 function backupRow(input: DeviceSummaryInput): SummaryRow {
   const label = 'Backup'
   if (!input.overUsb) {
     return input.needsBackup
-      ? { id: 'backup', label, dot: 'attention', text: 'Back up needed: connect by USB', actionLabel: null }
-      : { id: 'backup', label, dot: 'unknown', text: 'Connect by USB to back up', actionLabel: null }
+      ? { id: 'backup', label, dot: 'attention', text: 'Backup needed' }
+      : { id: 'backup', label, dot: 'unknown', text: 'Connect by USB to back up' }
   }
   if (!input.needsBackup && input.lastExportAt) {
-    return { id: 'backup', label, dot: 'ok', text: `Backed up ${backupDate(input.lastExportAt)}`, actionLabel: 'Back up' }
+    return { id: 'backup', label, dot: 'ok', text: `Backed up ${formatDate(input.lastExportAt)}` }
+  }
+  return { id: 'backup', label, dot: 'attention', text: 'Backup needed' }
+}
+
+/**
+ * The section-row status words, in the tab's fixed display order (After a
+ * power cut, Firmware, Backup). Network, Display and Diagnostics compute
+ * their own row words directly in the component; they carry no attention
+ * cards of their own.
+ */
+export function deviceSummaryRows(input: DeviceSummaryInput): SummaryRow[] {
+  return [powerCutRow(input), firmwareRow(input), backupRow(input)]
+}
+
+function notEncryptedAttention(input: DeviceSummaryInput): AttentionRow | null {
+  // A locked signer's encryption mode cannot be read, so it is reported as
+  // "Locked" (via the row, and via VaultUnlock's own banner), never as "Not
+  // encrypted": the two are different problems needing different actions.
+  if (input.locked || input.unlockMode !== 'none') return null
+  return {
+    id: 'not-encrypted', dot: 'problem', label: 'Not encrypted',
+    text: 'Anyone holding it can read the keys.', actionLabel: 'Choose how it unlocks',
   }
-  return { id: 'backup', label, dot: 'attention', text: 'Back up needed', actionLabel: 'Back up' }
 }
 
-function connectionRow(input: DeviceSummaryInput): SummaryRow {
-  const label = 'Connection'
-  if (input.modeLabel === 'Disconnected') {
-    return { id: 'connection', label, dot: 'problem', text: 'Disconnected', actionLabel: null }
+function firmwareAttention(input: DeviceSummaryInput): AttentionRow | null {
+  if (!input.updateAvailable || !input.updateVersion) return null
+  return input.overUsb
+    ? { id: 'firmware', dot: 'attention', label: 'Update available', text: `v${input.updateVersion} is ready to install.`, actionLabel: 'Update' }
+    : { id: 'firmware', dot: 'attention', label: 'Update available', text: `v${input.updateVersion} is ready. Updates need the USB cable.`, actionLabel: 'How to update' }
+}
+
+function backupAttention(input: DeviceSummaryInput): AttentionRow | null {
+  if (!input.needsBackup) return null
+  if (!input.overUsb) {
+    return {
+      id: 'backup', dot: 'attention', label: 'Back up your app pairings',
+      text: 'Connect by USB to back up. The signer asks for a button press.', actionLabel: null,
+    }
   }
-  // Storage has its own row when it needs attention; naming it here too would
-  // repeat the same fact twice on the page.
-  const reasons: string[] = []
-  if (input.crash) reasons.push('last restart was a crash')
-  if (input.fragmented) reasons.push('memory is fragmented')
-  if (input.recovering) reasons.push('recovering from a restart')
-  const text = reasons.length
-    ? `Connected over ${input.modeLabel}: ${reasons.join(', ')}`
-    : `Connected over ${input.modeLabel}`
-  return { id: 'connection', label, dot: reasons.length ? 'attention' : 'ok', text, actionLabel: 'Details' }
+  const text = input.lastExportAt
+    ? `Pairings changed since your last backup on ${formatDate(input.lastExportAt)}.`
+    : 'Pairings changed and this browser has no backup on record.'
+  return { id: 'backup', dot: 'attention', label: 'Back up your app pairings', text, actionLabel: 'Back up' }
 }
 
-function storageRow(input: DeviceSummaryInput): SummaryRow | null {
+function storageAttention(input: DeviceSummaryInput): AttentionRow | null {
   if (input.storageState !== 'warn' && input.storageState !== 'full') return null
+  const pct = input.storagePct ?? 0
   return {
     id: 'storage',
-    label: 'Storage',
     dot: input.storageState === 'full' ? 'problem' : 'attention',
-    text: input.storageState === 'full' ? 'Nearly full' : 'Filling up',
+    label: `Storage ${pct}% full`,
+    text: 'Remove an unused persona or app pairing to free space.',
     actionLabel: 'Details',
   }
 }
 
+function healthAttention(input: DeviceSummaryInput): AttentionRow | null {
+  const reasons: string[] = []
+  if (input.crash) reasons.push('The last restart was a crash.')
+  if (input.fragmented) reasons.push('Memory is fragmented.')
+  if (input.recovering) reasons.push('It restarted itself to recover.')
+  if (!reasons.length) return null
+  return { id: 'health', dot: 'attention', label: 'Health', text: reasons.join(' '), actionLabel: 'Details' }
+}
+
+function statusLostAttention(input: DeviceSummaryInput): AttentionRow | null {
+  if (!input.statusLost) return null
+  return {
+    id: 'status-lost', dot: 'problem', label: 'Not answering',
+    text: 'The signer stopped answering over WiFi. What you see may be out of date.', actionLabel: null,
+  }
+}
+
 /**
- * The "Your signer" rows, in display order: anything needing attention
- * (problem, then attention, then unknown) comes before rows that are simply ok.
+ * The Needs-attention cards, worst first (problem, then attention). Absent
+ * entirely when nothing needs a decision.
  */
-export function deviceSummaryRows(input: DeviceSummaryInput): SummaryRow[] {
-  const rows = [firmwareRow(input), powerCutRow(input), backupRow(input), connectionRow(input), storageRow(input)]
-    .filter((row): row is SummaryRow => row !== null)
+export function attentionRows(input: DeviceSummaryInput): AttentionRow[] {
+  const rows = [
+    notEncryptedAttention(input),
+    statusLostAttention(input),
+    firmwareAttention(input),
+    backupAttention(input),
+    storageAttention(input),
+    healthAttention(input),
+  ].filter((row): row is AttentionRow => row !== null)
   return [...rows].sort((a, b) => severityRank(a.dot) - severityRank(b.dot))
 }
diff --git a/src/lib/version.test.ts b/src/lib/version.test.ts
index c59bb46..7fdd8b9 100644
--- a/src/lib/version.test.ts
+++ b/src/lib/version.test.ts
@@ -16,11 +16,24 @@ describe('compareVersions', () => {
     expect(compareVersions('v0.14.0', '0.14.0')).toBe(0)
   })
 
-  it('ignores a pre-release suffix for ordering', () => {
-    expect(compareVersions('0.14.0-rc1', '0.14.0')).toBe(0)
+  it('orders a pre-release below its own release (SemVer 2.0 §11)', () => {
+    expect(compareVersions('0.14.0-rc1', '0.14.0')).toBeLessThan(0)
+    expect(compareVersions('0.14.0', '0.14.0-rc1')).toBeGreaterThan(0)
     expect(compareVersions('0.14.0-rc1', '0.13.9')).toBeGreaterThan(0)
   })
 
+  it('orders pre-release identifiers numerically, not lexically', () => {
+    expect(compareVersions('0.18.0-beta.17', '0.18.0-beta.19')).toBeLessThan(0)
+    expect(compareVersions('0.18.0-beta.9', '0.18.0-beta.10')).toBeLessThan(0)
+    expect(compareVersions('0.18.0-beta.19', '0.18.0-beta.19')).toBe(0)
+  })
+
+  it('ignores build metadata, with or without a pre-release', () => {
+    expect(compareVersions('0.14.0+abc123', '0.14.0')).toBe(0)
+    expect(compareVersions('0.18.0-beta.19+abc123', '0.18.0-beta.19')).toBe(0)
+    expect(compareVersions('0.18.0-beta.17+abc123', '0.18.0-beta.19')).toBeLessThan(0)
+  })
+
   it('returns null rather than guessing at unparseable input', () => {
     expect(compareVersions('', '0.14.0')).toBeNull()
     expect(compareVersions('unknown', '0.14.0')).toBeNull()
@@ -48,4 +61,16 @@ describe('isUpgrade', () => {
     expect(isUpgrade('0.14.0', null)).toBe(false)
     expect(isUpgrade('unknown', '0.14.0')).toBe(false)
   })
+
+  it('treats a newer beta as an upgrade over an older beta on the same release', () => {
+    expect(isUpgrade('0.18.0-beta.17', '0.18.0-beta.19')).toBe(true)
+  })
+
+  it('treats the final release as an upgrade over its own beta', () => {
+    expect(isUpgrade('0.18.0-beta.19', '0.18.0')).toBe(true)
+  })
+
+  it('does not offer a beta as an upgrade over its own final release', () => {
+    expect(isUpgrade('0.18.0', '0.18.0-beta.19')).toBe(false)
+  })
 })
diff --git a/src/lib/version.ts b/src/lib/version.ts
index 8cbf06d..e2dd95a 100644
--- a/src/lib/version.ts
+++ b/src/lib/version.ts
@@ -7,16 +7,48 @@
 // so silently reverts whatever the newer build fixed. Compare properly and only
 // offer a genuine upgrade.
 
-/** Parse "0.14.0" (or "v0.14.0", or "0.14.0-rc1") into comparable parts, or
+interface ParsedVersion {
+  core: number[]
+  /** Dot-separated pre-release identifiers, or null when there is no pre-release. */
+  prerelease: string[] | null
+}
+
+/** Parse "0.14.0" (or "v0.14.0", or "0.14.0-beta.17") into comparable parts, or
  *  null when it is not a version we can reason about. */
-function parse(version: string): number[] | null {
-  const cleaned = version.trim().replace(/^v/i, '')
-  // Pre-release suffixes are dropped for ordering: the numeric release is what
-  // the manifest and the device agree on, and treating "0.14.0-rc1" as 0.14.0
-  // is closer to right than refusing to compare at all.
-  const core = cleaned.split(/[-+]/)[0] ?? ''
-  if (!/^\d+(\.\d+)*$/.test(core)) return null
-  return core.split('.').map(Number)
+function parse(version: string): ParsedVersion | null {
+  // A build-metadata suffix (+...) plays no part in precedence (SemVer 2.0 §10).
+  const cleaned = version.trim().replace(/^v/i, '').split('+')[0] ?? ''
+  const [core, ...rest] = cleaned.split('-')
+  if (!core || !/^\d+(\.\d+)*$/.test(core)) return null
+  const prereleaseRaw = rest.length > 0 ? rest.join('-') : null
+  return {
+    core: core.split('.').map(Number),
+    prerelease: prereleaseRaw ? prereleaseRaw.split('.') : null,
+  }
+}
+
+/** Compare a single pair of pre-release identifiers per SemVer 2.0 §11.4. */
+function compareIdentifier(a: string, b: string): number {
+  const aNumeric = /^\d+$/.test(a)
+  const bNumeric = /^\d+$/.test(b)
+  if (aNumeric && bNumeric) return Number(a) - Number(b)
+  // Numeric identifiers always have lower precedence than alphanumeric ones.
+  if (aNumeric) return -1
+  if (bNumeric) return 1
+  if (a === b) return 0
+  return a < b ? -1 : 1
+}
+
+/** Compare two pre-release identifier lists per SemVer 2.0 §11.4. */
+function comparePrerelease(a: string[], b: string[]): number {
+  const len = Math.max(a.length, b.length)
+  for (let i = 0; i < len; i++) {
+    if (a[i] === undefined) return -1 // fewer fields: lower precedence
+    if (b[i] === undefined) return 1
+    const cmp = compareIdentifier(a[i], b[i])
+    if (cmp !== 0) return cmp
+  }
+  return 0
 }
 
 /**
@@ -24,18 +56,24 @@ function parse(version: string): number[] | null {
  * than `b`, zero when they are equal, positive when `a` is newer. Returns null
  * when either side is unparseable, so callers can decline to act rather than
  * guess.
+ *
+ * A pre-release has lower precedence than its release (SemVer 2.0 §11):
+ * `0.18.0-beta.17` < `0.18.0-beta.19` < `0.18.0`.
  */
 export function compareVersions(a: string, b: string): number | null {
   const pa = parse(a)
   const pb = parse(b)
   if (!pa || !pb) return null
-  const len = Math.max(pa.length, pb.length)
+  const len = Math.max(pa.core.length, pb.core.length)
   for (let i = 0; i < len; i++) {
     // "0.14" and "0.14.0" are the same version.
-    const diff = (pa[i] ?? 0) - (pb[i] ?? 0)
+    const diff = (pa.core[i] ?? 0) - (pb.core[i] ?? 0)
     if (diff !== 0) return diff
   }
-  return 0
+  if (pa.prerelease === null && pb.prerelease === null) return 0
+  if (pa.prerelease === null) return 1 // a is a release, b is a pre-release: a is newer
+  if (pb.prerelease === null) return -1
+  return comparePrerelease(pa.prerelease, pb.prerelease)
 }
 
 /**