Match the browser/OS chrome to the theme and clear the status bar

The app now sets theme-color, color-scheme and the page background from the chosen theme,
so the iPad status-bar area no longer shows a light band over a dark theme. Every top bar
leaves room for the status bar via a safe-top class (replacing a rule that padded every
<header>). Install defaults match the paper theme.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/App.test.jsx

@@ -1405,3 +1405,18 @@ describe('Import template', () => {
     expect(await screen.findByRole('button', { name: /download template/i })).toBeEnabled();
   });
 });
+
+describe('System chrome follows the theme', () => {
+  test('the app tells the browser/OS the theme colour and scheme, and updates it when the theme changes', async () => {
+    localStorage.setItem('reader-theme', 'dark');
+    const user = userEvent.setup();
+    await renderApp();
+    const themeColor = () => document.head.querySelector('meta[name="theme-color"]')?.getAttribute('content');
+    expect(themeColor()).toBe('#262421');
+    expect(document.documentElement.style.colorScheme).toBe('dark');
+    await user.click(screen.getByRole('button', { name: /account menu/i }));
+    await user.click(screen.getByRole('button', { name: /^paper$/i }));
+    expect(themeColor()).toBe('#f1ece0');
+    expect(document.documentElement.style.colorScheme).toBe('light');
+  });
+});