feat(hosts): a host's health tiles span the card and the gaps match; Add host is a dialog on the list (#5290, #5291)

#5290 "Host page: the health tiles span the card's width; even spacing above Ansible":
the four tiles take equal quarters (halves on a phone) and their sparklines stretch
across them; the Monitors + Agent row drops the Agent card's own margin, so the gap
above Ansible is 1rem like every other.

#5291 "Add host opens as a dialog over the Hosts list": a native <dialog> on /hosts/,
opened by Add host or /hosts/?add=1. A name clash re-renders the list with it open,
the error and what was typed. GET /hosts/new is gone; hosts/form.html is Edit only.

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

steward/templates/hosts/detail.html

@@ -51,10 +51,10 @@
      hx-swap="innerHTML"></div>
 
 {# ── Monitors + Agent, side by side on wide screens, stacked when narrow ────── #}
-<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:1rem;align-items:start;margin-bottom:1rem;">
+<div class="host-pair">
 
 {# ── Monitors ─────────────────────────────────────────────────────────────── #}
-<div class="card" style="margin-bottom:0;">
+<div class="card">
   <div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:0.5rem;">
     <h3 class="section-title" style="margin-bottom:0;">Monitors</h3>
     {% if session.user_role in ['operator', 'admin'] %}
@@ -108,7 +108,7 @@
 
 {# ── Agent (host_agent management panel) ──────────────────────────────────── #}
 <div hx-get="/plugins/host_agent/panel/{{ host.id }}" hx-trigger="load" hx-swap="innerHTML">
-  <div class="card" style="margin-bottom:0;"><span style="color:var(--text-muted);font-size:0.85rem;">Loading agent…</span></div>
+  <div class="card"><span style="color:var(--text-muted);font-size:0.85rem;">Loading agent…</span></div>
 </div>
 </div>{# Monitors + Agent grid #}