feat(design): dialogs open by purpose and keep their commit row pinned (E28 S3f1)

Modal takes a required initialFocus (field / close / action), a field that
loads late takes the focus while it still rests on the close button, and
ModalFooter portals a dialog's commit row under the scrolling body from any
depth. The header and footer fades follow the body's scroll timeline, and the
viewport's interactive-widget=resizes-content keeps the footer above an
on-screen keyboard.

frontend/index.html

@@ -2,7 +2,13 @@
 <html lang="en" data-theme="dark" data-scheme="midnight">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!-- resizes-content: the on-screen keyboard shrinks the layout viewport, not only the visual one,
+         so a dialog's pinned footer (DESIGN C4) sits above the keyboard instead of under it. Chrome's
+         default since 108 only shrinks the visual viewport; Safari ignores the key. -->
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, interactive-widget=resizes-content"
+    />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <!-- OG:START — the server replaces this block for /watch/{token} so shared links unfurl with
          the video's title/channel/thumbnail; every other route keeps these generic defaults. -->