feat(keys): j/k walk the feed, s finds the search box, g jumps to a module

A feed card cost ~10 Tab stops, so the tenth card sat ~135 Tabs from the top of the page, and the
only keyboard focus ring (a 60% accent outline on the thumbnail) all but vanished on the dark glass.
First slice of the E11 keyboard layer (S4a); Home, Plex and the tables follow in S4b/S4c.

- `lib/listNav`: one window listener over every registered list, walked in document order. `j`/`k`
  step item to item (on into the next list — owner decision D4), the arrows move around a grid, Enter
  clicks the item's own `data-nav-open` element, so it opens exactly like a click. An item root is
  never a Tab stop: it gets `tabindex=-1` only while the keyboard is on it, and keeps it until the next
  item takes it, so the player's focus restore lands back on the card. The first `j` takes the first
  card you can see, not the top of the list.
- `VirtualGrid` takes part with `keyboardNav` (column count + scrolling an unmounted row in);
  `VirtualFeed` turns it on, so the feed, the library and the channel page all have it.
- Keymap: two-step sequences (`g h`) whose pending step belongs to the scope that started it; the
  page-level scopes (`page`, `search`, `list`) are quiet while a layer that owns the keyboard is open,
  enforced in `dispatch`. A test pins the owner's rule that none of them needs a modifier on the
  Hungarian layout.
- `g h/f/c/p/x/n/m/d/s/,` jump to a module this account can reach; `s` focuses the header search box
  and selects the old query; Escape in it hands the keyboard back to the page (Plex's typeahead spends
  its first Escape on its panel).
- Hover popovers are passive layers: an open tooltip still takes Escape first but no longer silences
  the page keys.
- Focus ring (owner decision D2 = B): solid 2px accent around the whole item; the app-wide button/
  link/row ring goes from 60% to solid too. The item keeps a transparent resting outline because the
  video card transitions `all` — without it every `j` flashed a 3px white ring (measured in Chrome).
- Help sheet: the new keys, in a fixed order after the surface's own; a `g` chord only for a reachable
  module; opened over a player or dialog it leaves out the page-level keys and the context-menu key,
  which nothing can reach there (the latter pre-existing since E10).
- CLAUDE.md: a canonical-patterns row for list/grid keys (`useListNav` + `navItemAttrs` +
  `data-nav-open`, not a private arrow-key handler).

frontend/src/components/VideoCard.tsx

@@ -18,6 +18,7 @@ import Avatar from "./ui/Avatar";
 import AddToPlaylist from "./AddToPlaylist";
 import DownloadButton from "./DownloadButton";
 import VideoInfoCard from "./VideoInfoCard";
+import { navItemAttrs } from "../lib/listNav";
 import clsx from "clsx";
 import type { Video, VideoStatus } from "../lib/api";
 import { FEED_VIEW_SPEC, type FeedView } from "../lib/feedView";
@@ -388,6 +389,7 @@ function VideoCard({
   onToggleSave,
   onOpen,
   menuProps,
+  navIndex,
 }: {
   video: Video;
   view: FeedView;
@@ -403,6 +405,8 @@ function VideoCard({
    *  blow past this component's memo for every card in the virtualized feed on every parent
    *  render. The card calls it with the video it already has. */
   menuProps?: (v: Video) => Record<string, unknown>;
+  /** Its position in a keyboard-navigable list (`lib/listNav`) — omit outside one (Home's rails). */
+  navIndex?: number;
 }) {
   const { t, i18n } = useTranslation();
   const { openChannel } = useNavigationActions();
@@ -465,6 +469,9 @@ function VideoCard({
       target="_blank"
       rel="noreferrer"
       onClick={(e) => openInApp(e, video, onOpen)}
+      // Enter on a keyboard-selected card clicks THIS link (lib/listNav), so it opens exactly like a
+      // click: the in-app player, resuming where the reader left off.
+      data-nav-open=""
       title={titleClamped ? (video.title ?? undefined) : undefined}
       className={clsx(
         "font-medium leading-snug hover:text-accent",
@@ -534,6 +541,7 @@ function VideoCard({
           data-testid="video-card"
           data-video-id={video.id}
           {...menuProps?.(video)}
+          {...(navIndex !== undefined && navItemAttrs(navIndex))}
           className={clsx(rowShell, "flex items-center gap-3 px-3 py-2", watched && "opacity-55")}
         >
           {/* Actions lead: this is where the eye already is (the title is the thing you read), so
@@ -597,6 +605,7 @@ function VideoCard({
         data-testid="video-card"
         data-video-id={video.id}
         {...menuProps?.(video)}
+        {...(navIndex !== undefined && navItemAttrs(navIndex))}
         className={clsx(rowShell, "flex gap-3 p-2", watched && "opacity-55")}
       >
         <Thumb
@@ -631,6 +640,7 @@ function VideoCard({
       data-testid="video-card"
       data-video-id={video.id}
       {...menuProps?.(video)}
+      {...(navIndex !== undefined && navItemAttrs(navIndex))}
       className={clsx(
         "cv-card group glass-card glass-hover rounded-2xl transition-all duration-150",
         "flex flex-col",