Web: visual design pass (issue #26)

Addresses the screenshot-review feedback in #26. No framework or build
step added — all of this stays within the existing plain HTML/CSS/
vanilla-JS + go:embed architecture.

- Nav: re-enable the bottom tab bar that was already built and
  switched off (Queue/On-call/Alerts/Team + a "More" sheet for
  Stats/Admin/Account), replacing the hamburger on phone width.
- Queue: chip counts, a scroll fade on the filter row, a
  "Triggered Xh ago" + severity label per row, a chevron on the team
  switcher so it reads as a dropdown.
- On-call: collapse repeated same-person days into shift bars (week
  view and "your shifts" both), show the week as a date range with
  the ISO week number as secondary text, split "Current shift" out
  from "Next shifts" with "ends in Nd", a pill badge + row highlight
  for "you".
- Incident detail: fix the actual bug behind the duplicate
  "acknowledged" timeline entries (acknowledgeIncident's UPDATE had no
  guard on the incident's current status, so acknowledging an
  already-acknowledged incident silently re-logged the event — now
  idempotent, with regression tests on both the authenticated route
  and the ntfy ack-button route). Relabel escalation re-pages so they
  don't look like the same page landing twice. Copy the primary action
  up near the top. Label the "···" button. Group the timeline by
  phase (triggered/acknowledged/resolved). Add an "at a glance"
  summary row (duration/severity/responsible) and collapse the group
  labels by default.
- Team overview: reword the vague copy ("One owner." etc.) into plain
  labels.
- Empty states: fill in missing icons/one-liners across queue,
  alerts, stats and the incident timeline.
- CSS: fix card padding bugs, verify link contrast already passes AA,
  introduce a --fs-* type-scale token set and migrate the few
  genuinely isolated cases onto it (left sizes tied to a fixed shape,
  a deliberately prominent display, or a non-negotiable constraint
  like the iOS-zoom-prevention input size as documented exceptions
  rather than guess at a render this change can't see).

Verified with the full fmt/lint/test/helm-lint gate, plus a live
instance against the test DB with seeded incidents and schedule data
to trace the on-call grouping and timeline phase-splitting logic
against real API responses.

🤖 Generated with [Claude Code](https://claude.ai/code)

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

internal/web/static/app.css

@@ -47,12 +47,27 @@
   --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 
+  /* A ~4-size type scale, per issue #26's "use one type scale" ask. This
+     file still has a dozen one-off font-size values below; migrating the
+     low-risk, purely cosmetic ones (standalone titles with no dimensional
+     or functional constraint) onto these tokens is a start, not the whole
+     job — the rest (sizes tied to a fixed shape like the avatar circle, to
+     a deliberately prominent display like a stat tile or the on-call name,
+     or to a non-negotiable constraint like the 16px that stops iOS zooming
+     into an input) stay as either their own pixel value or a documented
+     exception, since guessing at those without seeing them render risks
+     trading one inconsistency for a worse one. */
+  --fs-xs: 12px;
+  --fs-sm: 13px;
+  --fs-base: 14px;
+  --fs-lg: 18px;
+  --fs-xl: 21px;
+
   --topbar-h: 52px;
-  /* No bottom tab bar on any breakpoint any more — mobile uses the hamburger
-     menu in the topbar, desktop the sidebar — so this stays 0. Kept as a
-     variable rather than deleted since .view, .toast and .nav's own height
-     calc still read it. */
-  --tabbar-h: 0px;
+  /* The phone-width bottom tab bar's height. Unused above 900px: the
+     desktop block overrides .nav/.view/.toast directly rather than reading
+     this back down to 0. */
+  --tabbar-h: 58px;
   --safe-top: env(safe-area-inset-top, 0px);
   --safe-bottom: env(safe-area-inset-bottom, 0px);
 }
@@ -212,9 +227,6 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
   font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
 }
-#menu-btn { position: relative; }
-.nav-badge.menu-btn-badge { top: 2px; left: auto; right: 2px; }
-
 .open-pill {
   display: inline-flex; align-items: center; gap: 6px;
   padding: 3px 10px; border-radius: 999px;
@@ -226,11 +238,11 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
 .open-pill.has-triggered::before { background: var(--crit); }
 .open-pill.all-acked::before { background: var(--warn); }
 
-/* Hidden on phones — mobile navigates through the hamburger menu in the
-   topbar instead (see #menu-btn / openNavMenu in app.js). Reappears as the
-   left sidebar from 900px, where the desktop block below redeclares display. */
+/* Bottom tab bar on phones (Queue, On-call, Alerts, Team, More); becomes the
+   left sidebar from 900px, where the desktop block below redeclares display
+   and shows every section flat, .nav-link-secondary included. */
 .nav {
-  display: none;
+  display: flex;
   position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
   height: calc(var(--tabbar-h) + var(--safe-bottom));
   padding-bottom: var(--safe-bottom);
@@ -240,8 +252,15 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
   border-top: 1px solid var(--border);
 }
 .nav-brand { display: none; }
+/* Hidden here (shown from 900px below): on the phone bar the team switcher
+   lives in the topbar instead, as #team-selector-mobile. */
+.nav-team-selector { display: none; }
+.nav-link-secondary { display: none; }
 .nav-link {
   position: relative;
+  /* flex: 1 spreads the tabs evenly across the bar's width; the desktop
+     block below cancels it back to a natural-width row item. */
+  flex: 1 1 0;
   display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
   color: var(--faint); font-size: 11px; font-weight: 600;
   /* min-width lets a column shrink below its label's natural width, which is
@@ -276,6 +295,7 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
 }
 .team-selector-mobile { 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; }
 
 /* A team's identity colour — not a status, so never the severity palette. Six
    colours, then they repeat; teamColorClass() in format.js picks one by the
@@ -318,6 +338,14 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
 }
 .chip[aria-selected="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
 .chip .count { margin-left: 4px; opacity: 0.7; }
+/* Pinned to the visible right edge of the scrolling row (sticky, not
+   absolute, so it tracks the scroll position rather than the content). */
+.chips-fade {
+  position: sticky; right: -1px; flex: none;
+  width: 24px; margin-left: -24px;
+  background: linear-gradient(to right, transparent, var(--bg));
+  pointer-events: none;
+}
 
 /* ---------- lists ---------- */
 
@@ -381,7 +409,7 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
 .empty {
   padding: 48px 16px; text-align: center; color: var(--muted);
 }
-.empty strong { display: block; color: var(--text); font-size: 16px; margin-bottom: 4px; }
+.empty strong { display: block; color: var(--text); font-size: var(--fs-lg); margin-bottom: 4px; }
 .empty .icon { width: 36px; height: 36px; color: var(--ok); margin-bottom: 8px; }
 
 .load-error {
@@ -434,8 +462,12 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
 .detail-head .copy { margin-left: auto; }
 .clip-buffer { position: fixed; top: 0; left: 0; opacity: 0; pointer-events: none; }
 .detail-head .crumb { font-weight: 600; color: var(--muted); font-size: 14px; }
-.detail-title { font-size: 21px; font-weight: 750; letter-spacing: -0.01em; margin: 16px 0 8px; overflow-wrap: anywhere; }
+.detail-title { font-size: var(--fs-xl); font-weight: 750; letter-spacing: -0.01em; margin: 16px 0 8px; overflow-wrap: anywhere; }
 .detail-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
+/* A copy of the sticky actionbar's primary button, right under the status
+   it responds to — see quickActions() in incident.js. */
+.detail-quick-actions { margin-bottom: 14px; }
+.detail-quick-actions .btn-primary { font-size: 16px; min-height: 44px; }
 
 .card {
   background: var(--surface);
@@ -450,6 +482,9 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
 .facts dt { color: var(--muted); }
 .facts dd { margin: 0; overflow-wrap: anywhere; }
 .facts .sub { color: var(--faint); }
+.facts dd.fact-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.fact-chip { display: inline-flex; align-items: center; gap: 4px; }
+.fact-icon { width: 15px; height: 15px; color: var(--faint); }
 
 .section { margin-top: 22px; }
 .section-title {
@@ -481,6 +516,17 @@ details > summary::before { content: "▸ "; }
 details[open] > summary::before { content: "▾ "; }
 details[open] > summary { margin-bottom: 8px; }
 
+/* One .tl-phase per status the incident has been through (see
+   timelinePhases() in incident.js) — each with its own .timeline <ol>, so
+   the existing :first-child/:last-child rail-capping below gives each phase
+   its own self-contained connecting line rather than one running through
+   the headings. */
+.tl-phase + .tl-phase { border-top: 1px solid var(--border); }
+.tl-phase-title {
+  padding: 10px 14px 0;
+  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
+  color: var(--faint);
+}
 .timeline { list-style: none; margin: 0; padding: 4px 0; }
 .tl-item {
   position: relative;
@@ -513,7 +559,7 @@ details[open] > summary { margin-bottom: 8px; }
 }
 .note-fix { background: var(--ok-soft); border-left: 3px solid var(--ok); }
 .similar { list-style: none; margin: 0; padding: 0; }
-.similar-item { padding: 10px 0; }
+.similar-item { padding: 10px 14px; }
 .similar-item + .similar-item { border-top: 1px solid var(--border, var(--surface-2)); }
 .check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
 .note-actions { display: flex; justify-content: flex-end; }
@@ -552,7 +598,7 @@ details[open] > summary { margin-bottom: 8px; }
 @keyframes sheet-up { from { transform: translateY(24px); opacity: 0.6; } }
 .sheet-inner { padding: 8px 16px calc(16px + var(--safe-bottom)); }
 .sheet-grab { width: 40px; height: 4px; margin: 0 auto 12px; border-radius: 2px; background: var(--border-strong); }
-.sheet-title { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
+.sheet-title { font-size: var(--fs-lg); font-weight: 700; margin: 0 0 4px; }
 .sheet-text { color: var(--muted); margin: 0 0 14px; font-size: 14px; }
 .sheet-form { display: grid; gap: 12px; }
 .sheet-actions { display: flex; gap: 8px; margin-top: 16px; }
@@ -604,9 +650,18 @@ details[open] > summary { margin-bottom: 8px; }
 .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. */
+.you-badge { margin-left: 6px; }
 
 .week-nav { display: flex; align-items: center; gap: 4px; }
 .week-nav .label { font-size: 14px; font-weight: 650; min-width: 9em; text-align: center; }
+/* The week-nav button that shows the date range, "28 Sep – 4 Oct", with the
+   ISO week number as secondary text inside it — a separate class from
+   .label above (team.js's month-nav uses that one) so its <small> isn't
+   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; 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); }
@@ -614,11 +669,18 @@ details[open] > summary { margin-bottom: 8px; }
 .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 { color: var(--accent); }
+.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); }
 
 .shift-list { list-style: none; margin: 0; padding: 0; }
 .shift-list li { display: flex; justify-content: space-between; padding: 12px 14px; }
@@ -675,9 +737,11 @@ kbd {
     display: flex; align-items: center; gap: 10px;
     padding: 4px 10px 18px; font-size: 18px; font-weight: 750; letter-spacing: -0.01em;
   }
-  .nav-team-selector { margin: -8px 10px 14px; width: calc(100% - 20px); }
+  .nav-team-selector { display: inline-flex; margin: -8px 10px 14px; width: calc(100% - 20px); }
+  .nav-link-secondary { display: flex; }
+  .nav-more-btn { display: none; }
   .nav-link {
-    flex-direction: row; justify-content: flex-start; gap: 12px;
+    flex: none; flex-direction: row; justify-content: flex-start; gap: 12px;
     min-height: 40px; padding: 0 10px; border-radius: var(--radius-sm);
     color: var(--muted); font-size: 14px;
   }
@@ -701,6 +765,7 @@ kbd {
      is hidden, so the chips wrap here instead: Archived stays reachable. */
   .pane-list .chips { flex-wrap: wrap; overflow-x: visible; }
   .pane-list .chip-sep { display: none; }
+  .chips-fade { display: none; }
   .view-queue:not(.has-detail) .pane-detail { display: block; }
 
   /* On desktop the list stays visible next to the detail. */
@@ -966,6 +1031,7 @@ button.rota-week:hover { background: var(--surface-2); color: var(--text); }
 .overview-head { display: flex; align-items: baseline; gap: 8px; }
 .overview-count { margin-left: auto; color: var(--muted); font-size: 18px; font-weight: 700; }
 .overview-item p { margin: 4px 0 0; }
+.overview-note-icon { width: 13px; height: 13px; vertical-align: -2px; color: var(--ok); }
 
 /* ---------- stats page ---------- */