fix(popover): visible accent highlight on the active menu item (R8 S2 UAT)

The tag editor's active row barely differed from the menu background. Drive
the highlight off the roving `data-active` attribute (reliable across click-
vs key-open, unlike :focus-visible, which a click-open's programmatic focus
doesn't trip) and tint it with the accent. `bg-accent/NN` can't be used —
the theme's --accent is a hex var and Tailwind v3 can't inject alpha into it
— so use a color-mix arbitrary value, matching the app's glass idiom.

frontend/src/components/AnchoredPopover.tsx

@@ -186,7 +186,15 @@ type ItemRole = "menuitem" | "menuitemradio" | "option";
 
 /** One keyboard-navigable option inside a menu/listbox `PopoverSurface`. Self-registers for roving
  *  focus + typeahead and applies the correct ARIA. Use `menuitemradio`+`checked` for a toggle,
- *  `option`+`selected` for a listbox choice, plain `menuitem` for an action. */
+ *  `option`+`selected` for a listbox choice, plain `menuitem` for an action.
+ *
+ *  The active (roving) item carries `data-active` — style the highlight off THAT, not `:focus-visible`:
+ *  a click-opened menu focuses the first item programmatically, which does NOT reliably trip the
+ *  focus-visible heuristic, so a `:focus-visible` highlight can stay invisible until the first arrow
+ *  key. The recommended recipe is an accent tint — and note `bg-accent/NN` does NOT work here (the
+ *  theme's `--accent` is a hex var, and Tailwind v3 can't inject alpha into it), so use a color-mix
+ *  arbitrary value like the app's own glass idiom:
+ *  `data-[active]:bg-[color-mix(in_srgb,var(--accent)_24%,transparent)] data-[active]:text-fg`. */
 export function PopoverItem({
   children,
   onSelect,
@@ -230,6 +238,8 @@ export function PopoverItem({
       type="button"
       // Roving tabindex: only the active item is in the Tab order; arrows move focus between them.
       tabIndex={active ? 0 : -1}
+      // Highlight hook: reliable across click- vs key-open (see the note above), unlike :focus-visible.
+      data-active={active ? "true" : undefined}
       disabled={disabled}
       className={className}
       {...ariaProps}

frontend/src/components/ChannelTags.tsx

@@ -72,8 +72,8 @@ function TagEditorMenu({
               checked={on}
               onSelect={() => onToggle(tg.id)}
               label={tg.name}
-              className={`w-full flex items-center gap-2 text-left text-xs px-2 py-1.5 rounded-md outline-none transition focus-visible:bg-card ${
+              className={`w-full flex items-center gap-2 text-left text-xs px-2 py-1.5 rounded-md outline-none transition hover:bg-card data-[active]:bg-[color-mix(in_srgb,var(--accent)_24%,transparent)] data-[active]:text-fg ${
-                on ? "text-fg" : "text-muted hover:bg-card"
+                on ? "text-fg" : "text-muted"
               }`}
             >
               <span