fix(ui): dimmed backdrop and a bigger close button on the advice panel

The panel read as floating in the page rather than sitting over it, and
the close button was a 26px target - too small to hit reliably on a
phone.

The backdrop is a large spread shadow rather than a pseudo element,
which would paint behind the panel's own background.

Also: Escape closes the panel, clicking away closes it, and the button
is a real button so it works with a keyboard.

src/flask/static/css/app.css

@@ -965,7 +965,12 @@ table.data .comment { color: var(--text-muted); font-size: .84rem; }
     font-size: 1.1rem;
     line-height: 1;
     cursor: pointer;
-    padding: 0 .15rem;
+    /* A 44px touch target, which is the smallest that is comfortable
+       on a phone.  The negative margin pulls the panel's padding back
+       in so the button does not push the layout around, but the
+       padding is still what makes it easy to hit. */
+    padding: .9rem;
+    margin: -.9rem -.9rem -.9rem 0;
 }
 
 .advice-pop__close:hover {
@@ -993,6 +998,16 @@ table.data .comment { color: var(--text-muted); font-size: .84rem; }
         width: auto;
     }
 
+    /* A dimmed backdrop, so the panel reads as sitting over the page
+       rather than floating in it.
+
+       A large spread shadow is used rather than a pseudo element, which
+       would paint behind the panel's own background. */
+    .advice-pop {
+        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55),
+                    0 12px 32px rgba(0, 0, 0, .55);
+    }
+
     /* On a phone the panel is centred on the screen rather than
        anchored to the trigger - there is not the room to float it
        beside the cell, and the trigger may be near the edge. */