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/history.html

@@ -1,12 +1,10 @@
 {% extends "base.html" %}
-{% from "_macros.html" import crumbs %}
+{% from "_macros.html" import crumbs, page_header %}
 {% block title %}Alert History — Steward{% endblock %}
 {% block breadcrumb %}{{ crumbs([("Alerts", "/alerts/"), ("History", "")]) }}{% endblock %}
 {% block content %}
-<div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;margin-bottom:1.25rem;">
-  <h1 class="page-title" style="margin-bottom:0;">Alert History</h1>
-  <div style="display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;">
-    <select id="history-rule" name="rule" aria-label="Rule"
+{% call page_header("Alert history", "Every change of state, newest first: the value against the rule's condition, whether the email and webhook went out, and the Ansible run an action started.") %}
+    <select id="history-rule" name="rule" aria-label="Rule" class="input" style="width:auto;"
             hx-get="/alerts/history" hx-target="#history-rows" hx-include="#time-range"
             hx-trigger="change" hx-push-url="false"
             onchange="var u=new URL(window.location); this.value ? u.searchParams.set('rule', this.value) : u.searchParams.delete('rule'); history.replaceState({}, '', u);">
@@ -16,13 +14,7 @@
       {% endfor %}
     </select>
     {% include "_time_range.html" %}
-  </div>
-</div>
-
-<p style="color:var(--text-muted);font-size:0.88rem;margin-bottom:1.25rem;">
-  Every change of state, newest first: what the value was against the rule's condition, whether
-  the email and webhook went out, and the Ansible run an action started.
-</p>
+{% endcall %}
 
 <div id="history-rows"
      hx-get="/alerts/history" hx-trigger="rangeChange from:body"