polish(transcribe): review nits — kbd size, focus ring, guard, action doc (#327)

Review follow-up (Leonie, Felix, Markus): bump cheatsheet key caps to text-sm
for the 60+ audience, add a focus-visible ring to the close button, simplify
the draw-hint guard to {#if drawArmed} (the $effect already clears it outside
edit mode), and document why the transcribeShortcuts action ignores its node
and binds to window.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/lib/document/transcription/ShortcutCheatsheet.svelte

@@ -57,7 +57,7 @@ function handleBackdropClick(event: MouseEvent) {
 			type="button"
 			onclick={onClose}
 			aria-label={m.cheatsheet_close()}
-			class="flex h-11 w-11 items-center justify-center rounded-sm text-ink-2 hover:bg-muted"
+			class="flex h-11 w-11 items-center justify-center rounded-sm text-ink-2 hover:bg-muted focus-visible:ring-2 focus-visible:ring-brand-mint focus-visible:outline-none"
 		>
 			<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
 				<path stroke-linecap="round" stroke-width="2" d="M6 6l12 12M18 6L6 18" />
@@ -71,7 +71,7 @@ function handleBackdropClick(event: MouseEvent) {
 				{#each group as shortcut (shortcut.cap)}
 					<div class="flex items-center justify-between gap-4">
 						<kbd
-							class="rounded border border-line bg-muted px-1.5 py-0.5 font-mono text-xs text-ink shadow-sm"
+							class="rounded border border-line bg-muted px-2 py-0.5 font-mono text-sm text-ink shadow-sm"
 							>{shortcut.cap}</kbd
 						>
 						<span class="flex-1 text-right font-serif text-sm text-ink">{shortcut.label}</span>

frontend/src/lib/shared/actions/transcribeShortcuts.ts

@@ -27,6 +27,10 @@ function isEditableTarget(target: EventTarget | null): boolean {
 	return tag === 'INPUT' || tag === 'TEXTAREA' || target.isContentEditable;
 }
 
+// `node` is unused: the listener is global (window) so a shortcut fires no
+// matter where focus sits on the page. It is still authored as a Svelte action
+// (`use:transcribeShortcuts`) so its lifecycle is tied to the host element's
+// mount/unmount and `destroy()` reliably removes the listener.
 export function transcribeShortcuts(_node: HTMLElement, initial: TranscribeShortcutOptions) {
 	let options = initial;
 

frontend/src/routes/documents/[id]/+page.svelte

@@ -422,7 +422,7 @@ onMount(() => {
 		{/if}
 	</div>
 
-	{#if drawArmed && panelMode === 'edit'}
+	{#if drawArmed}
 		<div
 			class="pointer-events-none absolute bottom-4 left-1/2 z-50 -translate-x-1/2 rounded-full bg-ink px-4 py-2 font-sans text-xs text-white shadow-lg"
 			role="status"