fix(ui): a toast host ranks by when its overlay opened, and an overlay keeps its Escape, its dialog and its navigation straight

Deep-review round 4, the overlays.

- Toast hosts were ranked by mount time, and PlayerModal swaps its host on every fullscreen change:
  leaving true fullscreen with the download dialog open put the player's host back on top, so toasts
  were drawn under that dialog's scrim and a click on one closed the dialog. Each overlay takes a
  rank once, when it opens (`useOverlayOrder`), and hands it to every host it renders.
- A dialog open while fullscreen is left keeps a stable portal container (moved, not re-created):
  React tore the portal down when `fsRoot` changed, resetting a half-filled form and dropping focus
  to <body>. Focus is put back after the move.
- The onboarding wizard is a layer, not a raw document listener: one Escape used to dismiss the
  error dialog over it AND end onboarding, skipping the write-scope step.
- `navigateTo` (a toast's "View", clicked inside the player's own host) goes over the overlays it
  unmounts, so the player's Back-to-close cleanup no longer pops the page it just opened — the same
  fix Shift+W already had. The access-requests toast action too.
- The live region arms itself a task after it takes over inherited toasts: React flushes effects in
  the same task as that render, so the "silent inheritance" arming was a no-op.
- The overlay-host guard matches class tokens in any order (PlexPlayer's root was never checked),
  globs `ui/` too (ui/Modal was not checked either), and requires the rank.

frontend/src/components/PlayerModal.tsx

@@ -48,7 +48,7 @@ import { fullscreenElement } from "../lib/fullscreen";
 import { dispatch, isActivationTarget, useKeyScope } from "../lib/keymap";
 import { closeThenNavigate, useBackToClose } from "../lib/history";
 import ChannelNameLink from "./ChannelNameLink";
-import Toaster from "./ui/Toaster";
+import Toaster, { useOverlayOrder } from "./ui/Toaster";
 import { afterRemoval } from "../lib/playerQueue";
 import {
   useNativeControlsYield,
@@ -379,6 +379,10 @@ export default function PlayerModal({
     staleTime: 5 * 60_000,
   });
 
+  // Its toast hosts' rank (see ui/Toaster): the player's two hosts — the stage one in true fullscreen,
+  // the outer one otherwise — swap on every fullscreen change, and must not outrank a dialog opened
+  // over the player by doing so.
+  const overlayOrder = useOverlayOrder();
   // This player is a dismissable layer: register it so a Modal or popover opened ABOVE it (e.g. the
   // download dialog, or — after S4 — an anchored menu) takes Escape first and this player defers.
   const layerIdRef = useRef<number | null>(null);
@@ -583,10 +587,9 @@ export default function PlayerModal({
               bar — that stays reachable by hovering the video's bottom edge, just above ours. Always
               visible (no auto-hide) so there's no guessing whether it will appear and no fight with the
               seek bar over the same pixels. stopPropagation so a click here doesn't toggle playback;
-              the exit button also re-arms our shortcuts. Add-to-playlist works in true fullscreen (its
-              popover portals INTO the fullscreen element); download stays hidden there because it opens
-              a Modal, which still portals to <body> — outside the fullscreen element. */}
-            {isFullscreen && <Toaster overlay />}
+              the exit button also re-arms our shortcuts. Both of its dialogs work in true fullscreen:
+              add-to-playlist's popover and download's Modal portal INTO the fullscreen element. */}
+            {isFullscreen && <Toaster overlay order={overlayOrder} />}
             {(maximized || isFullscreen) && (
               <div
                 onClick={(e) => e.stopPropagation()}
@@ -965,7 +968,7 @@ export default function PlayerModal({
       {/* Toasts raised while the player is open (a failed Remove, a lost connection) — the app's own
           Toaster is underneath this scrim. See ui/Toaster. In true fullscreen it moves into the
           stage, the element holding the lock: out here it was painted under it, i.e. not at all. */}
-      {!isFullscreen && <Toaster overlay />}
+      {!isFullscreen && <Toaster overlay order={overlayOrder} />}
     </div>,
     document.body,
   );