Make the web UI easier to read, and add a theme toggle

Secondary text was too dim to read: --faint sat at about 4.0:1 in the dark
theme and 3.3:1 in the light one, and it carries row ages, hints and labels.
It now clears 4.5:1 in both. The dark surfaces and borders are a step
further apart so cards stand out from the page, and the light borders a
touch stronger.

Account has an Appearance section with System, Light and Dark. System is
the old behaviour. The choice is per browser, kept in localStorage, and is
applied by a small js/theme.js loaded from <head> so there is no flash of
the other theme; the CSP allows no inline script, hence a file of its own.

On-call is redesigned: a hero card for who is on call now, with when the
shift ends for the selected team, and the week as seven day cells instead of
grouped rows. Today is marked with a neutral tint and a bar rather than the
accent colour, which now means only things you can act on; your own days are
marked by the "you" badge, not a fill. On a wide screen the hero and week sit
beside your shifts under a page title. The page stays read-only: shifts are
still edited in the TUI.

Smaller fixes: the team switcher no longer appears in the phone's bottom bar
as well as the top bar (a shared rule overrode the one that hides it); the
Team and Admin tab strips fade at the edge and scroll the open section into
view, so "Sources" is no longer cut off; and "All clear" is a green status
badge with a check instead of a grey pill that looked like a button.

Web UI only: no endpoint or JSON shape changed, so nothing to mirror in
terdut-tui.

internal/web/static/js/account.js

@@ -28,6 +28,9 @@ function render() {
 
     ...passwordSection(user, hasPassword),
 
+    h('div', { class: 'page-head' }, h('h2', { text: 'Appearance' })),
+    themePicker(),
+
     h('div', { class: 'only-desktop' },
       h('div', { class: 'page-head' }, h('h2', { text: 'Keyboard' })),
       h('div', { class: 'card' }, shortcuts())),
@@ -39,6 +42,23 @@ function render() {
   );
 }
 
+// System / Light / Dark. Per browser, not per account: it lives in
+// localStorage (see js/theme.js), the same place the selected team does.
+const THEMES = [['system', 'System'], ['light', 'Light'], ['dark', 'Dark']];
+
+function themePicker() {
+  const theme = window.terdutTheme;
+  const buttons = THEMES.map(([value, text]) => h('button', {
+    class: 'chip', type: 'button', role: 'radio', text,
+    onclick: () => { theme.set(value); sync(); },
+  }));
+  const sync = () => buttons.forEach((b, i) => b.setAttribute('aria-checked', String(THEMES[i][0] === theme.get())));
+  sync();
+  return h('div', { class: 'card card-pad' },
+    h('div', { class: 'chips theme-picker', role: 'radiogroup', 'aria-label': 'Theme' }, ...buttons),
+    h('p', { class: 'muted small', text: 'System follows your device. This applies to this browser only.' }));
+}
+
 // Where this user's pages go. The onboarding checklist's first step sends
 // people here for it, and until now there was nothing here to send them to:
 // the topic could only be set with curl or by an administrator.