Cap legal dialog size and match mobile navigation colors

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);