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/app.css

@@ -10,11 +10,11 @@
   --surface: #ffffff;
   --surface-2: #eff1f4;
   --surface-hover: #f7f8fa;
-  --border: #e2e5ea;
-  --border-strong: #cfd3da;
+  --border: #d9dde4;
+  --border-strong: #c5cad3;
   --text: #16181d;
   --muted: #5b626e;
-  --faint: #8a909b;
+  --faint: #676d79;
 
   --accent: #2f5bd3;
   --accent-text: #ffffff;
@@ -72,17 +72,21 @@
   --safe-bottom: env(safe-area-inset-bottom, 0px);
 }
 
+/* Dark palette. Applied by the OS preference unless the user chose Light in
+   Account (data-theme="light" on <html>, set by js/theme.js), and always when
+   they chose Dark. The two blocks must stay identical: CSS has no way to share
+   a declaration list between a media query and an attribute selector. */
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root:not([data-theme="light"]) {
     --bg: #0f1115;
-    --surface: #171a20;
-    --surface-2: #1f232b;
-    --surface-hover: #1c2027;
-    --border: #2a2f38;
-    --border-strong: #394050;
+    --surface: #1a1e26;
+    --surface-2: #232834;
+    --surface-hover: #20252e;
+    --border: #343b49;
+    --border-strong: #444d5f;
     --text: #e7e9ed;
     --muted: #a0a7b3;
-    --faint: #737a87;
+    --faint: #8a92a0;
 
     --accent: #6d8ff0;
     --accent-text: #0b0d12;
@@ -108,6 +112,42 @@
     --shadow-lg: 0 16px 40px rgb(0 0 0 / 55%);
   }
 }
+:root[data-theme="dark"] {
+  --bg: #0f1115;
+  --surface: #1a1e26;
+  --surface-2: #232834;
+  --surface-hover: #20252e;
+  --border: #343b49;
+  --border-strong: #444d5f;
+  --text: #e7e9ed;
+  --muted: #a0a7b3;
+  --faint: #8a92a0;
+
+  --accent: #6d8ff0;
+  --accent-text: #0b0d12;
+  --accent-soft: #1d2640;
+
+  --crit: #ff6b61;
+  --crit-soft: #3a1c1b;
+  --warn: #f0b140;
+  --warn-soft: #362a14;
+  --info: #74a3ff;
+  --info-soft: #1a2640;
+  --ok: #4cc488;
+  --ok-soft: #15301f;
+  --snooze: #a89bff;
+  --snooze-soft: #262245;
+
+  --teal: #4fc2d4;
+  --teal-soft: #0f2e33;
+  --pink: #f07fb8;
+  --pink-soft: #3a1c2d;
+
+  --shadow: 0 1px 2px rgb(0 0 0 / 40%);
+  --shadow-lg: 0 16px 40px rgb(0 0 0 / 55%);
+}
+:root[data-theme="light"] { color-scheme: light; }
+:root[data-theme="dark"] { color-scheme: dark; }
 
 *, *::before, *::after { box-sizing: border-box; }
 [hidden] { display: none !important; }
@@ -237,6 +277,10 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
 .open-pill.has-triggered { background: var(--crit-soft); color: var(--crit); }
 .open-pill.has-triggered::before { background: var(--crit); }
 .open-pill.all-acked::before { background: var(--warn); }
+/* "All clear" is a status, not an action: green with a check, no dot. */
+.open-pill.all-clear { background: var(--ok-soft); color: var(--ok); }
+.open-pill.all-clear::before { content: none; }
+.open-pill .icon { width: 14px; height: 14px; }
 
 /* Bottom tab bar on phones (Queue, On-call, Alerts, Team, More); becomes the
    left sidebar from 900px, where the desktop block below redeclares display
@@ -290,13 +334,13 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
 
 .nav-team-selector,
 .team-selector-mobile {
-  display: inline-flex; align-items: center; gap: 8px;
+  align-items: center; gap: 8px;
   border: 1px solid var(--border-strong); border-radius: 999px;
   background: var(--surface); color: var(--text);
   font-size: 13px; font-weight: 600; cursor: pointer;
   padding: 4px 12px; max-width: 100%;
 }
-.team-selector-mobile { padding: 4px 10px; font-size: 12px; max-width: 120px; }
+.team-selector-mobile { display: inline-flex; padding: 4px 10px; font-size: 12px; max-width: 120px; }
 .team-selector-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .team-selector-chevron { width: 14px; height: 14px; flex: none; color: var(--faint); margin-left: -2px; }
 
@@ -340,7 +384,8 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
   background: var(--surface); color: var(--muted);
   font-size: 13px; font-weight: 600; cursor: pointer;
 }
-.chip[aria-selected="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
+.chip[aria-selected="true"], .chip[aria-checked="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
+.theme-picker { padding: 0 0 8px; }
 .chip .count { margin-left: 4px; opacity: 0.7; }
 /* An overlay, not a flex item: absolute against .chips' own (non-scrolling)
    box stays flush with its real right edge regardless of scroll position,
@@ -650,7 +695,6 @@ details[open] > summary { margin-bottom: 8px; }
 .page-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 16px auto 12px; }
 .page-head h2 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
 
-.now-card { display: flex; align-items: center; gap: 14px; padding: 16px; margin-top: 16px; }
 .avatar {
   flex: none; display: grid; place-items: center;
   width: 44px; height: 44px; border-radius: 50%;
@@ -658,8 +702,6 @@ details[open] > summary { margin-bottom: 8px; }
   font-weight: 750; font-size: 17px; text-transform: uppercase;
 }
 .avatar.none { background: var(--surface-2); color: var(--faint); }
-.now-label { color: var(--muted); font-size: 13px; font-weight: 600; }
-.now-name { font-size: 20px; font-weight: 750; }
 .you { color: var(--accent); font-weight: 650; font-size: 13px; margin-left: 6px; }
 /* Oncall's own "you" indicator only (see you() in oncall.js) — a pill badge
    is easier to spot there than this plain accent-coloured text. */
@@ -673,25 +715,49 @@ details[open] > summary { margin-bottom: 8px; }
    caught by the unrelated .label > span styling meant for label chips. */
 .week-nav .week-label { font-size: 14px; font-weight: 650; min-width: 11.5em; text-align: center; white-space: nowrap; }
 .week-label small { color: var(--faint); font-weight: 600; font-size: 11px; margin-left: 2px; }
-.days { list-style: none; margin: 0 auto; padding: 0; }
-.day { display: grid; grid-template-columns: 3.2em 4.2em 1fr; align-items: center; gap: 8px; min-height: 50px; padding: 0 14px; }
-.day + .day { border-top: 1px solid var(--border); }
-.day-name { font-weight: 650; }
-.day-date { color: var(--faint); font-size: 13px; }
-.day-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.day-who.nobody { color: var(--faint); font-style: italic; }
-/* A run of several days held by the same person (or left empty), replacing
-   what used to be one identical row per day — see weekRuns() in oncall.js. */
-.day.range { grid-template-columns: 1fr auto; }
-.day-range { font-weight: 650; }
-.day.today { background: var(--accent-soft); }
-.day.today:first-child { border-radius: var(--radius) var(--radius) 0 0; }
-.day.today:last-child { border-radius: 0 0 var(--radius) var(--radius); }
-.day.today .day-name, .day.today .day-range { color: var(--accent); }
-.day.past { opacity: 0.6; }
-/* Highlights whichever row is yours, same soft tint as .today — they already
-   read fine layered (today's own row is almost always one of yours too). */
-.day.mine { background: var(--accent-soft); }
+.oncall-title h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; margin: 8px 0 0; }
+.oncall-title p { margin: 2px 0 0; font-size: 14px; }
+.oncall-grid { display: grid; gap: 0; }
+.oncall-main, .oncall-side { min-width: 0; }
+.hero-list { display: grid; gap: 12px; }
+
+.hero { display: grid; gap: 14px; padding: 18px; margin-top: 16px; }
+.hero-top { display: flex; align-items: center; gap: 16px; }
+.hero-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
+.hero-avatar { width: 64px; height: 64px; font-size: 24px; }
+.hero-name { font-size: 24px; font-weight: 650; letter-spacing: -0.01em; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
+.hero-until { color: var(--muted); font-size: 15px; margin-top: 2px; }
+
+.week-card { margin-top: 16px; padding: 16px 12px 12px; }
+.week-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; padding: 0 4px; }
+.week-head h2 { margin: 0; font-size: 15px; font-weight: 650; }
+/* Bordered, so the arrows read as buttons. 40px: a touch target without
+   crowding the date between them. */
+.week-arrow { width: 40px; min-height: 40px; border: 1px solid var(--border-strong); }
+.strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
+.strip-day {
+  position: relative; min-width: 0;
+  display: flex; flex-direction: column; align-items: center; gap: 4px;
+  padding: 10px 0 8px; border: 1px solid transparent; border-radius: var(--radius);
+}
+.strip-name { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
+.strip-date { font-size: 15px; font-weight: 650; }
+.strip-avatar { width: 32px; height: 32px; font-size: 13px; }
+.strip-who { max-width: 100%; padding: 0 2px; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.strip-who.nobody { font-style: italic; color: var(--faint); }
+.strip-day.past { opacity: 0.6; }
+/* "Current", not "selected": a neutral tint, a bar and aria-current, so it
+   reads as a marker and not as a pressed button. The accent stays for things
+   you can act on. */
+.strip-day.today { background: var(--surface-2); border-color: var(--border-strong); }
+.strip-day.today::before {
+  content: ""; position: absolute; top: -1px; left: 12px; right: 12px; height: 3px;
+  border-radius: 0 0 3px 3px; background: var(--text);
+}
+.strip-day.today .strip-name { color: var(--text); }
+.strip-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; padding: 10px 4px 0; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
+.strip-legend span { display: inline-flex; align-items: center; gap: 6px; }
+.strip-legend .strip-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
 
 .shift-list { list-style: none; margin: 0; padding: 0; }
 .shift-list li { display: flex; justify-content: space-between; padding: 12px 14px; }
@@ -1038,6 +1104,11 @@ button.rota-week:hover { background: var(--surface-2); color: var(--text); }
   overflow-x: auto; scrollbar-width: none;
 }
 .subnav::-webkit-scrollbar { display: none; }
+/* A fade on the right edge says "there is more" where the strip overflows;
+   the desktop width fits every entry, so it is phone-only. */
+@media (max-width: 899px) {
+  .subnav { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
+}
 .subnav-link {
   flex: none;
   padding: 8px 12px; margin-bottom: -1px;
@@ -1097,3 +1168,10 @@ button.rota-week:hover { background: var(--surface-2); color: var(--text); }
 @media (min-width: 900px) {
   .stat-tiles { grid-template-columns: repeat(3, 1fr); }
 }
+
+/* On-call, wide: the hero and the week on the left, your shifts on the right.
+   .view-page > * caps its children at 760px, so the grid lifts that. */
+@media (min-width: 900px) {
+  #view-oncall > .oncall-grid { max-width: 1080px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 0 24px; align-items: start; }
+  #view-oncall > .oncall-title { max-width: 1080px; }
+}