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

@@ -1,20 +1,11 @@
 {% extends "base.html" %}
-{% from "_macros.html" import crumbs %}
+{% from "_macros.html" import crumbs, page_header, status_badge, empty_state %}
 {% block title %}Maintenance Windows — Steward{% endblock %}
 {% block breadcrumb %}{{ crumbs([("Alerts", "/alerts/"), ("Maintenance", "")]) }}{% endblock %}
 {% block content %}
-<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
-  <h1 class="page-title" style="margin-bottom:0;">Maintenance Windows</h1>
-  <div style="display:flex;gap:0.5rem;">
-    <a class="btn" href="/alerts/maintenance/new">New Window</a>
-  </div>
-</div>
-
-<p style="color:var(--text-muted);font-size:0.88rem;margin-bottom:1.5rem;">
-  During an active window, alerts in its scope still change state and show on the Alerts page,
-  but send no notifications and run no Ansible actions. Each event a window mutes says so in
-  the alert's history. An alert that is still firing when the window ends notifies then, and runs its action.
-</p>
+{% call page_header("Maintenance windows", "During an active window, alerts in its scope still change state and show on the Alerts page, but send no notifications and run no Ansible actions. Each event a window mutes says so in the alert's history. An alert that is still firing when the window ends notifies then, and runs its action.") %}
+    <a class="btn" href="/alerts/maintenance/new">New window</a>
+{% endcall %}
 
 {% if windows %}
 <div class="card-flush">
@@ -51,13 +42,9 @@
           {{ w.end_at.strftime("%Y-%m-%d %H:%M") }} UTC
         </td>
         <td style="text-align:center;">
-          {% if is_active %}
-          <span class="badge badge-yellow">active</span>
-          {% elif is_upcoming %}
-          <span class="badge badge-dim">upcoming</span>
-          {% else %}
-          <span style="color:var(--text-dim);font-size:0.8rem;">expired</span>
-          {% endif %}
+          {% if is_active %}{{ status_badge('warn', 'Active') }}
+          {% elif is_upcoming %}{{ status_badge('pending', 'Upcoming') }}
+          {% else %}{{ status_badge('inactive', 'Expired') }}{% endif %}
         </td>
         <td class="td-actions">
           <form method="post" action="/alerts/maintenance/{{ w.id }}/delete" style="display:inline;">{{ csrf_field() }}
@@ -71,8 +58,6 @@
   </table>
 </div>
 {% else %}
-<div class="card" style="text-align:center;padding:3rem;">
-  <p style="color:var(--text-muted);">No maintenance windows configured.</p>
-</div>
+<div class="card">{{ empty_state("No maintenance windows yet.", "New window", "/alerts/maintenance/new") }}</div>
 {% endif %}
 {% endblock %}