fix: Chrome draws the popup in its monospace font (closes #418)

Chrome adds a stylesheet of its own to extension pages that sets the font
on body. Tailwind 4 puts its classes in a cascade layer, and a rule outside
any layer wins over them, so font-mono lost and Chrome drew the popup in
the system font. body now carries font-mono!, which marks the class
important. Both end-to-end suites check the popup's font.

The same stylesheet also makes Chrome draw the popup's text at 12px rather
than text-sm's 14px; that is unchanged here and filed as issue 456.

Model: opus-5-5

tests/e2e/firefox/run.js

@@ -108,6 +108,20 @@ step("popup loads and reaches the welcome view", async (env) => {
     assert(title === "AutistMask", "unexpected popup title: " + title);
 });
 
+// The same check as the Chrome suite's (#418), so both browsers are held to
+// the same font.
+step("the popup is drawn in the monospace font it declares", async (env) => {
+    const font = await env.driver.execute(
+        "return getComputedStyle(document.body).fontFamily;",
+    );
+    // --font-mono in src/popup/styles/main.css, as the browser writes it out.
+    assert(
+        font ===
+            'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+        "the popup is drawn in " + font + ", not in --font-mono",
+    );
+});
+
 step("wallet creation through the UI reaches the main view", async (env) => {
     const d = env.driver;
     await d.click("#btn-welcome-add");