feat(ui): status_badge, status_dot, stat_tile, empty_state, page_header, icon_button and form classes (#5094)

#5094 "Status and layout macros, and form classes".

- formatting.STATES: one state -> (tone, label) map for up, down, stale,
  firing, pending, acknowledged, no_data, ok, warn, crit, resolved and
  inactive; status_info() reads it (an unmapped state is drawn dim under its
  own name). required() lets a macro refuse a missing argument.
- _macros.html: status_badge and status_dot (a dot always carries its label,
  sr-only unless shown), stat_tile, empty_state, page_header (actions via a
  call block) and icon_button, which raises without a label.
- steward.css: tone classes (badge-/dot-/stat- ok, warn, crit, info, dim),
  .sr-only, .page-header, .stat-tile, .empty-state, .btn-icon and the form
  classes .field, .field-label, .field-hint and .input. Info text is a 40%
  mix (--blue): the house --fs-info-fg falls to 4.18:1 on its tint over a
  hovered row, 40% holds 5.09:1.
- First users: the Alerts list, history and maintenance pages (headers,
  state badges, empty states) and the alert forms' hints; the inline inp/lbl
  style sets on the monitor and host forms become .input / .field-label.
- tests/core/test_macros.py renders each macro through the app environment.

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

steward/templates/alerts/list.html

@@ -1,7 +1,12 @@
 {% extends "base.html" %}
 {% block title %}Alerts — Steward{% endblock %}
+{% from "_macros.html" import page_header, status_badge, empty_state %}
 {% block content %}
-<h1 class="page-title">Alerts</h1>
+{% call page_header("Alerts") %}
+    <a class="btn btn-ghost" href="/alerts/history">History</a>
+    <a class="btn btn-ghost" href="/alerts/maintenance">Maintenance</a>
+    <a class="btn" href="/alerts/rules/new">New rule</a>
+{% endcall %}
 
 {% if active %}
 <h2 class="section-title" style="margin-bottom:1rem;">Active</h2>
@@ -20,18 +25,11 @@
             {% for state, rule in active %}
             <tr>
                 <td>
-                    {% if state.state.value == 'firing' %}
-                    <span class="badge badge-red">FIRING</span>
-                    {% elif state.state.value == 'acknowledged' %}
-                    <span class="badge badge-yellow">ACK</span>
-                    {% elif state.state.value == 'pending' %}
-                    <span class="badge badge-dim">PENDING</span>
-                    {% endif %}
+                    {{ status_badge(state.state) }}
                     {% if state.no_data_since %}
-                    <span class="badge badge-yellow"
-                          title="No sample since {{ state.last_sample_at.strftime('%Y-%m-%d %H:%M UTC') if state.last_sample_at else 'the rule started watching' }}">NO DATA</span>
+                    {{ status_badge('no_data', title="No sample since " ~ (state.last_sample_at.strftime('%Y-%m-%d %H:%M UTC') if state.last_sample_at else 'the rule started watching')) }}
                     <div style="font-size:0.72rem;color:var(--text-dim);margin-top:0.2rem;">
-                      since {{ state.no_data_since.strftime("%Y-%m-%d %H:%M") }} UTC
+                      since {{ state.no_data_since|ago }}
                     </div>
                     {% endif %}
                 </td>
@@ -51,17 +49,10 @@
     </table>
 </div>
 {% else %}
-<p style="color:var(--text-muted);margin-bottom:2rem;">No active alerts.</p>
+<div class="card" style="margin-bottom:2rem;">{{ empty_state("No active alerts. Every rule is quiet.") }}</div>
 {% endif %}
 
-<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;">
-    <h2 class="section-title">Rules</h2>
-    <div style="display:flex;gap:0.5rem;">
-        <a class="btn btn-ghost" href="/alerts/history">History</a>
-        <a class="btn btn-ghost" href="/alerts/maintenance">Maintenance</a>
-        <a class="btn" href="/alerts/rules/new">New Rule</a>
-    </div>
-</div>
+<h2 class="section-title" style="margin-bottom:1rem;">Rules</h2>
 {% if rules %}
 <div class="card-flush">
     <table class="table">
@@ -108,6 +99,6 @@
     </table>
 </div>
 {% else %}
-<p style="color:var(--text-muted);">No alert rules configured.</p>
+<div class="card">{{ empty_state("No alert rules yet.", "New rule", "/alerts/rules/new") }}</div>
 {% endif %}
 {% endblock %}