ui: update chip + per-host button

- Surface UpdateAvailable + TargetVersion on the dashboard host row,
  the host_chrome header, and the JSON Host shape.
- New host_update_chip partial renders an amber out-of-date pill
  next to the agent-version display when the host's agent trails
  the server.
- Host detail right-rail gains an admin-only Update agent button
  (disabled when host is offline or already updating).
- New .update-chip and .btn-amber CSS tokens; tailwind output
  refreshed.

web/styles/input.css

@@ -104,6 +104,65 @@
   .btn-lg { font-size: 13px; padding: 9px 14px; }
   .btn-block { width: 100%; justify-content: center; }
 
+  /* Amber action — used for the per-host "Update agent" button and
+     the fleet-update Start button. Same warning palette as the
+     update-chip below. */
+  .btn-amber {
+    color: oklch(0.18 0.01 80);
+    background: var(--warn);
+    border-color: var(--warn);
+  }
+  .btn-amber:hover { filter: brightness(1.08); }
+  .btn-amber:disabled, .btn-amber[disabled] {
+    opacity: 0.45; cursor: not-allowed; pointer-events: none;
+  }
+
+  /* Update-available chip — small amber pill rendered next to a host's
+     agent version (in the row OS column and in the host detail
+     header). Hidden when the host is up to date. */
+  .update-chip {
+    display: inline-flex; align-items: center; gap: 4px;
+    padding: 1px 6px;
+    border-radius: 3px;
+    font-size: 10px; font-weight: 500;
+    line-height: 1.4;
+    color: oklch(0.18 0.01 80);
+    background: color-mix(in oklch, var(--warn), transparent 30%);
+    border: 1px solid color-mix(in oklch, var(--warn), transparent 50%);
+    white-space: nowrap;
+  }
+
+  /* Hero tile — large, clickable summary card on the dashboard.
+     Today only used by the "N hosts behind" tile; the existing
+     four summary boxes use bespoke grid markup. Add more variants
+     as adjacent dashboard tiles adopt this. */
+  .hero-tile {
+    display: flex; flex-direction: column; gap: 4px;
+    padding: 14px 16px;
+    border-radius: 7px;
+    border: 1px solid var(--line-soft);
+    background: var(--panel);
+    text-decoration: none;
+    transition: filter 120ms ease, background 120ms ease;
+  }
+  .hero-tile:hover { filter: brightness(1.08); }
+  .hero-tile .hero-num {
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-size: 22px; font-weight: 500;
+    letter-spacing: -0.01em;
+    color: var(--ink);
+  }
+  .hero-tile .hero-label {
+    font-size: 11.5px;
+    color: var(--ink-mute);
+  }
+  .hero-tile--amber {
+    background: color-mix(in oklch, var(--warn), transparent 88%);
+    border-color: color-mix(in oklch, var(--warn), transparent 60%);
+  }
+  .hero-tile--amber .hero-num   { color: oklch(0.86 0.13 80); }
+  .hero-tile--amber .hero-label { color: oklch(0.78 0.08 80); }
+
   /* ---------- nav tabs ---------- */
   .nav-tab {
     font-size: 13px; padding: 18px 0;