fix(player): marks give way to newer lists, Watch later items mark, and auto-advance has its own glyphs

A session's marks are weighed per field against when each page of a never-refetched list was read:
a page read before the mark (a Show more / Load more on its way) takes it, one read after keeps the
server's word. The live search lays them over its rows too, not only the related list.

Items of the built-in Watch later list ARE the bookmark, so adding, removing and moving them go
through features/video/videoWrites and mark the video; the contract test covers those writes and
catches a write that is named without being called on the spot.

The player's watched toggle follows a mark confirmed elsewhere since it opened (the related row's
menu, a notice's Undo); Restart on the related row after a description link goes back to it.
The file viewer tells the help sheet its keys wait under a layer; refusalReason replaces the last
two open-coded reads.

Auto-advance wears list glyphs of its own (the skip arrows are Previous / Next beside it), and the
auto-advance and loop cycles are `lit`, not toggles: no aria-pressed, the name says the mode. Both
places render from one list of controls, so the docked tooltips name the mode too. The English cap
message and admin hint quote "Show more"; the hint says refunds are limited.

frontend/src/components/ui/buttonStyles.ts

@@ -60,6 +60,11 @@ const BUTTON_VARIANTS: Record<ButtonVariant, string> = {
 // accent"); the layer utilities leave it alone, so it stays solid under the pointer too.
 const PRESSED =
   "aria-pressed:bg-accent aria-pressed:text-accent-fg aria-pressed:border-accent aria-pressed:no-underline";
+// A mode cycle that is not off (`lit`: auto-advance Next, loop One) looks pressed but is no toggle —
+// its name says the mode, and aria-pressed would announce a two-state switch whose name changes on
+// every press. Keyed to an attribute like PRESSED, so it outranks the variant's own colours.
+const LIT =
+  "data-lit:bg-accent data-lit:text-accent-fg data-lit:border-accent data-lit:no-underline";
 
 // B1, the whole ladder: explicit heights, so a toolbar's `sm` button, search pill, dropdown trigger and
 // small icon button all line up at 28. A call site picks a rung; it does not invent one. rem-derived, so
@@ -122,6 +127,7 @@ const ICON_VARIANTS: Record<IconButtonVariant, string> = {
 // An icon toggle that is on shows it in the glyph (watched, saved, a selected track), not as a solid
 // fill: a solid accent square in a row of quiet glyphs outshouts the row's primary action.
 const ICON_PRESSED = "aria-pressed:text-chosen";
+const ICON_LIT = "data-lit:text-chosen";
 
 const ICON_SIZES: Record<IconButtonSize, string> = {
   sm: "size-7 [&>svg]:size-4",
@@ -138,17 +144,20 @@ export function buttonClass({
   round = false,
   fullWidth = false,
   pressed,
+  lit,
 }: {
   variant: ButtonVariant;
   size: ButtonSize;
   round?: boolean;
   fullWidth?: boolean;
   pressed?: boolean;
+  lit?: boolean;
 }) {
   return clsx(
     BASE,
     BUTTON_VARIANTS[variant],
     pressed !== undefined && PRESSED,
+    lit !== undefined && LIT,
     SIZES[size],
     size !== "none" && (round || variant === "media" ? "rounded-full" : "rounded-lg"),
     // The coarse-pointer target (DESIGN.md A3) lives HERE, not in the call sites — on every variant.
@@ -165,17 +174,20 @@ export function iconButtonClass({
   size,
   round = false,
   pressed,
+  lit,
 }: {
   variant: IconButtonVariant;
   size: IconButtonSize;
   round?: boolean;
   pressed?: boolean;
+  lit?: boolean;
 }) {
   return clsx(
     "inline-grid shrink-0 place-items-center transition touch-target aria-expanded:text-chosen disabled:opacity-50 disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:cursor-not-allowed",
     ICON_VARIANTS[variant],
     round || variant === "media" ? "rounded-full" : "rounded-lg",
     pressed !== undefined && ICON_PRESSED,
+    lit !== undefined && ICON_LIT,
     ICON_SIZES[size],
   );
 }