Cap legal dialog size and match mobile navigation colors

assets/legal.mjs

@@ -1,8 +1,12 @@
 const dialogs = new Map(
   [...document.querySelectorAll('.legal-dialog')].map(dialog => [dialog.id, dialog]),
 );
+const themeColor = document.querySelector('meta[name="theme-color"]');
 let returnFocus;
 
+// Native dialogs own visibility; :target is reserved for the no-script fallback.
+document.documentElement.classList.add('legal-dialogs-enhanced');
+
 function syncDialog() {
   const next = dialogs.get(location.hash.slice(1));
   let closed = false;
@@ -23,6 +27,11 @@ function syncDialog() {
     returnFocus?.focus({ preventScroll: true });
     returnFocus = undefined;
   }
+
+  // Match the browser navigation area to the canvas surrounding the dialog.
+  if (themeColor) {
+    themeColor.content = getComputedStyle(document.documentElement).backgroundColor;
+  }
 }
 
 function dismissDialog() {