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/static/steward.css

@@ -31,6 +31,10 @@
   --orange-dim: color-mix(in srgb, var(--fs-warning) 20%, transparent);
   --red: var(--fs-error-fg);
   --red-dim: color-mix(in srgb, var(--fs-error) 20%, transparent);
+  /* Info (acknowledged): lighter than the house --fs-info-fg (50%), which falls
+     to 4.18:1 on its tint over a hovered row; 40% holds 5.09:1 there. */
+  --blue: color-mix(in srgb, var(--fs-info) 40%, var(--fs-text-primary));
+  --blue-dim: color-mix(in srgb, var(--fs-info) 20%, transparent);
   --font-serif: var(--fs-font-display);
 }
 * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -172,11 +176,19 @@ input[type=text], input[type=email], input[type=password], input[type=number], i
 input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
 select { cursor: pointer; }
 textarea { resize: vertical; }
+/* Form fields: .field wraps a .field-label, the .input and an optional .field-hint. */
+.field { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.9rem; }
+.field-label { display: block; margin-bottom: 0; font-size: 0.75rem; color: var(--text-muted); }
+.field-hint { font-size: 0.75rem; color: var(--text-dim); }
+.input { width: 100%; padding: 0.4rem 0.65rem; background: var(--bg); border: 1px solid var(--border-mid); border-radius: var(--fs-radius-sm); color: var(--text); font-size: 0.88rem; font-family: inherit; }
+.input:focus { outline: none; border-color: var(--accent); }
+.input:disabled { opacity: var(--fs-disabled-opacity); }
 
 /* Buttons */
 .btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 1rem; background: var(--accent); color: var(--fs-surface-page); border: none; border-radius: 5px; cursor: pointer; font-size: 0.875rem; font-family: inherit; font-weight: 500; transition: background .15s; text-decoration: none; }
 .btn:hover { background: var(--accent-hover); color: var(--fs-surface-page); }
 .btn-sm { padding: 0.3rem 0.65rem; font-size: 0.8rem; }
+.btn-icon { padding: 0.3rem 0.5rem; line-height: 1; }
 .btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border-mid); }
 .btn-ghost:hover { background: var(--bg-elevated); color: var(--text); }
 .btn-danger { background: var(--fs-action-destructive); color: var(--fs-text-on-action); }
@@ -197,9 +209,38 @@ textarea { resize: vertical; }
 .dot-down { background: var(--red); }
 .dot-warn { background: var(--yellow); }
 .dot-dim  { background: var(--text-dim); }
+/* Tones the status_badge / status_dot macros draw (formatting.STATES). */
+.badge-ok   { background: var(--green-dim);  color: var(--green); }
+.badge-warn { background: var(--yellow-dim); color: var(--yellow); }
+.badge-crit { background: var(--red-dim);    color: var(--red); }
+.badge-info { background: var(--blue-dim);   color: var(--blue); }
+.dot-ok   { background: var(--green); }
+.dot-crit { background: var(--red); }
+.dot-info { background: var(--blue); }
+.dot-label { margin-left: 0.35rem; font-size: 0.85rem; }
+.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
 
 /* Empty state */
 .empty { color: var(--text-muted); font-size: 0.9rem; padding: 2rem; text-align: center; }
+.empty-state { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; color: var(--text-muted); font-size: 0.9rem; padding: 2rem 1rem; text-align: center; }
+
+/* Page header: title on the left, its actions on the right (page_header macro). */
+.page-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1rem; margin-bottom: 1.5rem; }
+.page-header .page-title { margin-bottom: 0; }
+.page-subtitle { margin-top: 0.3rem; color: var(--text-muted); font-size: 0.9rem; }
+.page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
+
+/* Stat tile (stat_tile macro): a label over one headline number. */
+.stat-tile { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.9rem 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--fs-radius-md); color: var(--text); min-width: 8rem; }
+a.stat-tile:hover { border-color: var(--border-mid); background: var(--bg-elevated); color: var(--text); }
+.stat-tile-label { font-size: var(--fs-size-tiny); font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--fs-tracking-tiny); }
+.stat-tile-value { font-size: 1.6rem; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
+.stat-tile-hint { font-size: 0.78rem; color: var(--text-dim); }
+.stat-ok .stat-tile-value { color: var(--green); }
+.stat-warn .stat-tile-value { color: var(--yellow); }
+.stat-crit .stat-tile-value { color: var(--red); }
+.stat-info .stat-tile-value { color: var(--blue); }
+.stat-dim .stat-tile-value { color: var(--text-dim); }
 
 /* Breadcrumbs */
 /* Breadcrumb renders as a kicker line tucked directly above the page header