The run meta now shows sha · ref · state (instead of state · sha · ref),
and job headers show job_id · duration · state. State at the end makes
the structural hierarchy immediately scannable.

Assisted-by: GLM-5.1 via pi

diff --git a/templates/ci/run_detail.html b/templates/ci/run_detail.html
index 19aee8b..339d0d3 100644
--- a/templates/ci/run_detail.html
+++ b/templates/ci/run_detail.html
@@ -9,9 +9,9 @@
 {% block content %}
 <div class="ci-meta">
   <div class="ci-meta-primary">
-    <span class="{{ run.state_class() }}">{{ run.state }}</span>
-    · <span class="c-accent">{{ run.sha_short() }}</span>
+    <span class="c-accent">{{ run.sha_short() }}</span>
     · {{ run.ref_short() }}
+    · <span class="{{ run.state_class() }}">{{ run.state }}</span>
   </div>
   <div class="ci-meta-secondary">
     queued <time title="{{ run.queued_iso() }}">{{ run.queued_relative() }}</time>
@@ -24,8 +24,8 @@
 {% for job in jobs %}
 <div class="ci-job">
   <div class="ci-job-header">
-    <span class="{{ job.state_class() }}">{{ job.state }}</span>
-    · {{ job.job_id }} · {{ job.duration_display() }}{{ job.exit_display() }}
+    {{ job.job_id }} · {{ job.duration_display() }}{{ job.exit_display() }}
+    · <span class="{{ job.state_class() }}">{{ job.state }}</span>
   </div>
   {% for sh in job.sh_events %}
   <div class="ci-sh">