status: consolidate CDN/upstream status into the header pill + tap panel

- pill label now shows KB/s when degraded ('cdn 23 KB/s'); tap opens a
  panel (replaces the transient toast) with origin/CDN state, KB/s,
  a sparkline of the ~1h /api/cdn hist, and last-updated age
- 60s poll while the page is visible (was: load/play/failure only)
- playback failure overlay appends CDN context when degraded/down
- buffer gauge + spinner untouched: client buffer state, not CDN state
- server unchanged: /api/cdn already returned everything
- tests: 3 hermetic browser tests (mocked /api/cdn via page.route —
  the throwaway server's probe runs live upstream, so its data is
  mocked out of the assertions); 37 passed
- docs: README + SPEC synced

static/style.css

@@ -163,11 +163,20 @@ button.tiny.on { border-color: var(--acc); color: var(--acc); }
   background: rgba(255, 255, 255, .1); }
 .pl-buffer i { display: block; height: 100%; width: 0;
   background: linear-gradient(90deg, var(--acc), #fbbf24); transition: width .25s ease; }
-/* header status pill: upstream site dot + CDN dot + short label */
+/* header status pill: upstream site dot + CDN dot + short label; tap = panel */
 header .pill { display: flex; align-items: center; gap: .4rem; flex: none;
+  position: relative;  /* anchors the status panel */
   font: 600 .72rem/1 system-ui, sans-serif; padding: .3rem .55rem; border-radius: 999px;
   border: 1px solid var(--bd); background: var(--card); color: var(--fg);
   cursor: help; }
+.status-panel { position: absolute; top: 100%; right: 0; z-index: 6; margin-top: .35rem;
+  padding: .5rem .65rem; border-radius: 8px; border: 1px solid var(--bd);
+  background: var(--card); color: var(--fg); font-size: .78rem; min-width: 170px;
+  display: flex; flex-direction: column; gap: .3rem; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
+.sp-row { font-variant-numeric: tabular-nums; }
+.sp-cap { color: var(--muted); font-size: .68rem; }
+.sp-svg { width: 100%; height: 28px; color: var(--acc); }
+.sp-svg polyline { fill: none; stroke: currentColor; stroke-width: 1.5; }
 header .pill i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #6b7280; }
 header .pill .o.ok, header .pill .c.ok { background: #22c55e; }
 header .pill .c.degraded { background: #f59e0b; }