feat(ansible): runs named by what ran where, with ago, duration and one status badge (#5125)

Runs read "update.yml on web-1" (run_title over the scope label, beside
describe_scope) on the runs list, the run page's title and breadcrumb, and
the run-started panel. The list shows started |ago (full time on hover),
|duration (counting "so far" while a run is going) and a dry-run tag.

Run statuses join STATES, so the list and the run page use status_badge:
queued dim, running info (blue, so work in progress doesn't read as a
problem), success ok "Succeeded", failed crit, interrupted warn, cancelled
dim. run_started.html leaves its hard-coded colours for tokens; the run
page's facts move to the .kv list and its failures to var(--red). Template
hex colours: 54 -> 47.

Also fixes #5124's sidebar count, which CI run 8389 failed on: the stylesheet
guard allows no weight above 500, and .nav-count asked for 600.

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

steward/templates/ansible/run_started.html

@@ -1,13 +1,13 @@
-<div style="background:#0f0f1e;border:1px solid #2a2a4a;border-radius:6px;padding:1rem;">
-    <div style="display:flex;align-items:center;gap:1rem;margin-bottom:0.75rem;">
-        <span style="color:#a0a000;font-weight:bold;">RUNNING</span>
-        <span style="color:#a0a0c0;font-size:0.9rem;">{{ run.playbook_path }}</span>
-        <a href="/ansible/runs/{{ run.id }}" style="color:#6060c0;font-size:0.82rem;margin-left:auto;">Full view →</a>
+{# The run form's answer: the run just started, streaming its output in place. #}
+{% from "_macros.html" import status_badge %}
+<div class="card run-started">
+    <div class="run-started-head">
+        {{ status_badge('running') }}
+        <span>{{ title }}</span>
+        <a href="/ansible/runs/{{ run.id }}" class="run-started-link">Full view →</a>
     </div>
-    <pre id="sse-output-{{ run.id }}"
-         style="background:#080810;padding:0.75rem;border-radius:4px;font-family:monospace;font-size:0.78rem;color:#a0c0a0;max-height:400px;overflow-y:auto;white-space:pre-wrap;margin:0 0 0.5rem 0;">
-    </pre>
-    <div id="sse-status-{{ run.id }}" style="font-size:0.85rem;color:var(--text-dim);">
+    <pre id="sse-output-{{ run.id }}" class="run-output"></pre>
+    <div id="sse-status-{{ run.id }}" class="field-hint">
         Streaming output…
     </div>
     <script>