fix(person-mention): distinguish keyboard-highlighted row from hover

Leonie #5507 concern 3: hover and aria-selected both used bg-canvas, so
a tablet user sweeping the trackpad couldn't tell where the keyboard
cursor was. Use bg-brand-mint/20 + a 2px ring-inset for the highlighted
row — keeps hover affordance, adds a distinct keyboard-cursor token
that meets WCAG 1.4.11 Non-Text Contrast.

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

frontend/src/lib/components/PersonMentionEditor.svelte

@@ -215,7 +215,12 @@ const popupOpen = $derived(query !== null);
 					<div
 						class={[
 							'flex min-h-[44px] cursor-pointer flex-col gap-1 px-3 py-2.5 text-left hover:bg-canvas',
-							i === highlightedIndex && 'bg-canvas'
+							// Keyboard-highlighted row gets a stronger token than hover so
+							// keyboard users (and tablet stylus users sweeping over rows)
+							// can tell the cursor position apart from a hover (Leonie #5507 §3,
+							// WCAG 1.4.11 Non-Text Contrast).
+							i === highlightedIndex &&
+								'bg-brand-mint/20 ring-2 ring-brand-mint ring-inset'
 						]}
 						role="option"
 						aria-selected={i === highlightedIndex}