feat(hosts): one health header, graded by one set of thresholds (#5122)

The host page's vitals strip becomes its health header: Live or Stale,
then one sentence — "Memory 93% is past its critical threshold", "Every
reading is within its thresholds", or, for a stale host, "No report since
20m ago; the readings below are from then" — and last seen as |ago. CPU,
memory, root disk and load per core follow as stat tiles graded by
Settings → Thresholds, with their sparklines.

The full-metrics page drew its bars and gauges at a hard-coded 70/90
(temperatures 70/85) while every other page used the configured cutoffs
(80/90 by default), so a 75 % CPU was amber here and fine everywhere else.
bar() now takes the metric kind and colours its .meter-fill through
status_class; gauges, temperatures and per-core bars do the same.

The host's monitor rows move onto the Monitors list's shapes: a status dot,
the name linking to the monitor's page, Ping/TCP/DNS/HTTP, pill-up/
pill-down, latency and uptime through status_class, labelled icon buttons.
HEX_CEILING drops to 54.

New formatting.worst_reading(readings, thresholds) picks the reading
furthest past its cutoff, the first of equals winning.

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

steward/static/steward.css

@@ -268,6 +268,16 @@ a.stat-tile:hover { border-color: var(--border-mid); background: var(--bg-elevat
 /* A label/value list: <dl class="kv"><dt>…</dt><dd>…</dd></dl>. */
 .kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; font-size: 0.88rem; }
 .kv dt { color: var(--text-muted); }
+/* The host page's health header (_host_vitals.html). */
+.host-health-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem; margin-bottom: 0.75rem; }
+.host-health-summary { font-size: 0.92rem; }
+/* A filled bar for a percentage; the fill takes its grade from status_class. */
+.meter { height: 8px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
+.meter-fill { height: 100%; }
+.meter-ok { background: var(--green); }
+.meter-warn { background: var(--yellow); }
+.meter-crit { background: var(--red); }
+.meter-unknown { background: var(--text-dim); }
 .problem-detail { color: var(--text-muted); font-size: 0.82rem; }
 
 /* Breadcrumbs */