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/ui/Modal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useId, useRef, useState, type ReactNode } from "react";
+import { useEffect, useId, useLayoutEffect, useRef, useState, type ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
 import { X } from "lucide-react";
@@ -6,7 +6,7 @@ import { useBackToClose } from "../../lib/history";
 import { pushLayer, removeLayer, isTopmost } from "../../lib/layerStack";
 import { useFullscreenElement } from "../../lib/fullscreen";
 import { Button } from "./Button";
-import Toaster from "./Toaster";
+import Toaster, { useOverlayOrder } from "./Toaster";
 
 // Tabbable elements inside the dialog, in DOM order. `:not([tabindex="-1"])` drops programmatically
 // focusable-only nodes; the visibility filter (offsetParent) drops display:none ones (e.g. a
@@ -45,6 +45,23 @@ export default function Modal({
   // Browser/mouse Back closes the topmost modal instead of navigating away.
   useBackToClose(onClose);
   const fsRoot = useFullscreenElement();
+  // ONE container element for the dialog's whole life, MOVED between <body> and the fullscreen
+  // element rather than handed to `createPortal` as a changing container: React tears a portal down
+  // and builds it again when its container changes, and the dialog's contents went with it — a
+  // half-filled download form reset to its defaults, and focus fell to <body>, the moment the viewer
+  // left true fullscreen (deep-review round 4).
+  const [host] = useState(() => document.createElement("div"));
+  useLayoutEffect(() => {
+    const parent = fsRoot ?? document.body;
+    if (host.parentNode === parent) return;
+    // appendChild MOVES the node: the browser blurs whatever was focused inside it on the way out.
+    const focused = host.contains(document.activeElement)
+      ? (document.activeElement as HTMLElement)
+      : null;
+    parent.appendChild(host);
+    focused?.focus();
+  }, [fsRoot, host]);
+  useEffect(() => () => host.remove(), [host]);
   const panelRef = useRef<HTMLDivElement>(null);
   const titleId = useId();
   // Capture the trigger to restore focus to, during THIS render — i.e. before commit runs the
@@ -52,6 +69,7 @@ export default function Modal({
   // it later (in the effect) would capture a now-inside element that unmounts on close, stranding
   // focus on <body>. useState initializer runs exactly once, on first render.
   const [restoreTo] = useState(() => document.activeElement as HTMLElement | null);
+  const overlayOrder = useOverlayOrder();
 
   // Backdrop-click close must only fire when the press STARTED on the backdrop too. Otherwise a
   // drag that begins inside the dialog (e.g. selecting text in an input) and is released out on
@@ -170,8 +188,8 @@ export default function Modal({
       {/* Toasts raised while a dialog is open show inside it: the app's own host is under this
           scrim, where a failed share or rename was unreadable and a click on it closed the dialog
           (see ui/Toaster). */}
-      <Toaster overlay />
+      <Toaster overlay order={overlayOrder} />
     </div>,
-    fsRoot ?? document.body,
+    host,
   );
 }