fix(devices): pairing input moves into the Add Device modal

The pairing field sat at the bottom of the Devices page, below the
device grid — unreachable on any account with more than a screenful of
devices (the user's dev account has ~480 accumulated test devices;
scrolling 224k px to reach the field is a non-starter). The Add Device
button at the top of the page is where pairing intent already lives,
so the code input and Find device button now sit inside the Connect a
KOReader Device modal as instruction step 6, with the confirm card
swapping into the same modal (container keeps the pairing-lookup ids;
the htmx error-toast listener scopes to #add-device-modal now).

Verified live: modal renders the full instruction list + input, a
wrong code swaps the templ error partial inside the modal, and claim
still HX-Refreshes on success (modal state resets with the reload,
paired device appears in the grid).

ui-controls glossary where-fields and the COVERAGE row updated with
the control's new home.

templates/devices.templ

@@ -157,33 +157,6 @@ templ Devices(user User, devices []handlers.DeviceInfo, errorMessage string, bas
 						</div>
 					}
 				</div>
-				<div id="pairing-section" class="mt-12">
-				<h2 class="text-lg font-bold tracking-tight mb-1" style="color: var(--text-primary)">Pair a Device</h2>
-				<p class="text-sm mb-3" style="color: var(--text-secondary)">
-					On your e-reader, open the Bookhoard sync menu and tap <strong>Register device</strong> — then enter the
-					6-digit code it shows below. Only someone holding the device can see the code, so nobody
-					else can claim (or interfere with) your registration.
-				</p>
-				<form hx-post="/devices/pairing/lookup" hx-target="#pairing-lookup-result" hx-swap="innerHTML" class="flex items-center gap-2 flex-wrap">
-					<input
-						type="text"
-						name="pairing_code"
-						inputmode="numeric"
-						maxlength="7"
-						pattern="[0-9 ]*"
-						autocomplete="off"
-						placeholder="e.g. 583 912"
-						required
-						class="input max-w-44 font-mono text-base tracking-widest"
-						aria-label="Pairing code"
-					/>
-					<button type="submit" class="btn btn-primary text-sm">
-						@Icon("search", "h-4 w-4")
-						Find device
-					</button>
-				</form>
-				<div id="pairing-lookup-result" class="mt-2" aria-live="polite"></div>
-			</div>
 			</div>
 				<div id="add-device-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4" style="background-color: var(--surface-overlay);">
 			<div class="card p-6 w-full max-w-md" style="box-shadow: var(--shadow-pop);">
@@ -233,9 +206,28 @@ templ Devices(user User, devices []handlers.DeviceInfo, errorMessage string, bas
 							</li>
 							<li class="flex gap-3">
 								<span class="flex-shrink-0 grid place-items-center h-5 w-5 rounded-full text-xs font-bold" style="background-color: var(--accent-muted); color: var(--accent);">6</span>
-								<span>Type that code into the <strong>Pair a Device</strong> field on this page and confirm — the device finishes connecting by itself.</span>
+								<span>Enter the code below and click <strong>Find device</strong>, then confirm on the card that appears — the device finishes connecting by itself.</span>
 							</li>
 						</ol>
+						<form hx-post="/devices/pairing/lookup" hx-target="#pairing-lookup-result" hx-swap="innerHTML" class="flex items-center gap-2 flex-wrap">
+							<input
+								type="text"
+								name="pairing_code"
+								inputmode="numeric"
+								maxlength="7"
+								pattern="[0-9 ]*"
+								autocomplete="off"
+								placeholder="e.g. 583 912"
+								required
+								class="input max-w-44 font-mono text-base tracking-widest"
+								aria-label="Pairing code"
+							/>
+							<button type="submit" class="btn btn-primary text-sm">
+								@Icon("search", "h-4 w-4")
+								Find device
+							</button>
+						</form>
+						<div id="pairing-lookup-result" aria-live="polite"></div>
 						<div class="rounded-md p-3 text-xs flex items-start gap-2" style="background-color: var(--accent-muted); color: var(--text-secondary);">
 							@Icon("info", "h-4 w-4 flex-shrink-0 mt-0.5")
 							<span>Only someone holding the device can read the code, so only the right account can claim it. Codes expire after 5 minutes.</span>