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() {

assets/styles.css

@@ -23,6 +23,7 @@
   --color-announcement: #f2e6cc;
   --color-focus: #ffc300;
   --color-dialog: #721a3d;
+  --color-dialog-surround: #3c0f20;
   --color-overlay: rgb(24 8 16 / 72%);
   --color-shadow: rgb(24 8 16 / 45%);
   /* One design unit is one point on the supplied 1200 × 900 layout. */
@@ -309,12 +310,13 @@ address {
 }
 
 html:has(.legal-dialog[open]),
-html:has(.legal-dialog:target) {
+html:not(.legal-dialogs-enhanced):has(.legal-dialog:target) {
   overflow: hidden;
+  background-color: var(--color-dialog-surround);
 }
 
 .legal-dialog {
-  --dialog-unit: max(1px, var(--unit));
+  --dialog-unit: clamp(1px, var(--unit), calc(4px / 3));
   --dialog-gap: calc(16 * var(--dialog-unit));
   --dialog-border: calc(2 * var(--dialog-unit));
   position: fixed;
@@ -339,7 +341,7 @@ html:has(.legal-dialog:target) {
 }
 
 /* Fragment links still open the complete text if JavaScript is unavailable. */
-.legal-dialog:target:not([open]) {
+html:not(.legal-dialogs-enhanced) .legal-dialog:target:not([open]) {
   display: block;
   z-index: 3;
   box-shadow: 0 0 0 100vmax var(--color-overlay);