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/run.js

@@ -93,6 +93,20 @@ test("popup loads and reaches the welcome view", async (env) => {
     assert(title === "AutistMask", "unexpected popup title: " + title);
 });
 
+// Chrome's own stylesheet for extension pages sets the font on body; see the
+// comment above <body> in src/popup/index.html.
+test("the popup is drawn in the monospace font it declares (#418)", async (env) => {
+    const font = await env.page.evaluate(
+        () => 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",
+    );
+});
+
 // The empirical half of #182. The manifest change is only a claim about
 // what the CSP permits; this is the observation. Two things have to hold
 // together, and the run covers both: the popup realm compiles WASM (here),