feat(docker): the Swarm page is laid out by node: role, what its containers use, and the services placed on each (#5303)

#5303 "Swarm page laid out by node: role, resources and the tasks placed on each"

A verdict line first, then the nodes that are down or drained and the
services short of replicas, then one card per node. A node with a Steward
agent shows what its swarm tasks use against the machine's cores and memory,
service by service. A node without one lists Swarm's placement, by count.
The services table moved to the Docker overview, where it can be filtered.

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

steward/static/steward.css

@@ -213,6 +213,17 @@ strong, b, th { font-weight: 500; }
    over a line that spans its half (docker/_service_history.html). */
 .history-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; }
 .history-pair .spark { color: var(--blue); margin-top: 0.4rem; }
+/* The Swarm page (#5303): one card per node, two or three a row on a wide
+   screen; each card's own services table. */
+.swarm-group { margin-bottom: 2rem; }
+.node-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1rem; align-items: start; }
+.node-card { margin-bottom: 0; display: flex; flex-direction: column; gap: 0.6rem; }
+.node-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 0; font-family: var(--fs-font-body); font-size: 1rem; font-weight: 500; }
+.node-card-head .chip { margin: 0; }
+.node-card-figures { margin: 0; font-size: 0.85rem; }
+.node-tasks th, .node-tasks td { padding: 0.35rem 0.5rem; font-size: 0.82rem; }
+.node-tasks .cell-name { max-width: 12rem; }
+.node-tasks .cell-name > a { display: inline-block; max-width: 100%; vertical-align: bottom; }
 
 /* Forms */
 .form-group { margin-bottom: 1rem; }