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/monitors/_fields.html

@@ -1,45 +1,43 @@
 {# Shared type-specific monitor form fields. Every field is rendered; a tiny
    script (mtoggle) shows only the ones relevant to the selected type. #}
 {% macro type_fields(config={}) %}
-{% set inp = "width:100%;padding:0.4rem 0.65rem;background:var(--bg);border:1px solid var(--border-mid);border-radius:4px;color:var(--text);font-size:0.88rem;" %}
-{% set lbl = "font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;" %}
 
 {# tcp #}
 <div class="mfield" data-types="tcp">
-  <label style="{{ lbl }}">Port</label>
-  <input type="number" name="port" value="{{ config.get('port', 80) }}" min="1" max="65535" style="{{ inp }}">
+  <label class="field-label">Port</label>
+  <input type="number" name="port" value="{{ config.get('port', 80) }}" min="1" max="65535" class="input">
 </div>
 
 {# dns #}
 <div class="mfield" data-types="dns">
-  <label style="{{ lbl }}">Expected IP <span style="color:var(--text-dim);">(optional)</span></label>
+  <label class="field-label">Expected IP <span style="color:var(--text-dim);">(optional)</span></label>
   <input type="text" name="expected_ip" value="{{ config.get('expected_ip') or '' }}"
-         placeholder="e.g. 192.0.2.10" autocomplete="off" style="{{ inp }}">
+         placeholder="e.g. 192.0.2.10" autocomplete="off" class="input">
 </div>
 
 {# http #}
 <div class="mfield" data-types="http">
-  <label style="{{ lbl }}">Method</label>
-  <select name="method" style="{{ inp }}">
+  <label class="field-label">Method</label>
+  <select name="method" class="input">
     {% for opt in ["GET", "HEAD", "POST"] %}
     <option value="{{ opt }}" {% if config.get('method', 'GET') == opt %}selected{% endif %}>{{ opt }}</option>
     {% endfor %}
   </select>
 </div>
 <div class="mfield" data-types="http">
-  <label style="{{ lbl }}">Expected status</label>
+  <label class="field-label">Expected status</label>
   <input type="number" name="expected_status" value="{{ config.get('expected_status', 200) }}"
-         min="100" max="599" style="{{ inp }}">
+         min="100" max="599" class="input">
 </div>
 <div class="mfield" data-types="http">
-  <label style="{{ lbl }}">Timeout (s)</label>
+  <label class="field-label">Timeout (s)</label>
   <input type="number" name="timeout_seconds" value="{{ config.get('timeout_seconds', 10) }}"
-         min="1" max="60" style="{{ inp }}">
+         min="1" max="60" class="input">
 </div>
 <div class="mfield" data-types="http">
-  <label style="{{ lbl }}">Content match <span style="color:var(--text-dim);">(substring)</span></label>
+  <label class="field-label">Content match <span style="color:var(--text-dim);">(substring)</span></label>
   <input type="text" name="content_match" value="{{ config.get('content_match', '') }}"
-         placeholder="optional" autocomplete="off" style="{{ inp }}">
+         placeholder="optional" autocomplete="off" class="input">
 </div>
 <div class="mfield" data-types="http" style="display:flex;flex-direction:column;gap:0.3rem;justify-content:flex-end;">
   <label style="display:flex;align-items:center;gap:0.4rem;font-size:0.82rem;cursor:pointer;">