fix(ui): status text readable on its tint over a hovered row, a 3:1 outline on controls, contrast as a CI guard (#5096)

An audit of 1,980 text/surface pairs (every steward.css rule and every inline
template style, tints composited over page, card and hovered row) found:

- Red, yellow and orange status text on its own 20% tint over a hovered row
  at 3.97-4.06:1 (badges, count badge, alert-error, btn-warn). --red and
  --yellow are lifted 15% toward the primary text, --orange 18%, as --blue
  already was: worst case now 4.54:1.
- Inputs, selects, ghost and range buttons outlined in --border-mid at
  1.4-1.9:1, on surfaces 1.1:1 apart, so the outline is what marks them.
  New --border-control (45% toward secondary text): 3.13:1 worst. The
  dashboard switcher and widget-drawer fields drop their inline styles for
  the shared .input class.
- The breadcrumb separator painted in a border colour (1.4-1.9:1): now
  --text-dim (4.64:1) and aria-hidden, since it is decoration.

tests/test_contrast.py resolves the tokens (color-mix and tints included)
and holds every drawn pair to 4.5:1, status text on its tint to 4.5:1 and
control outlines to 3:1, with a test that the guard catches the old pairs.

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

steward/templates/_macros.html

@@ -9,9 +9,9 @@
     {%- if loop.last -%}
       <span class="breadcrumb-cur" aria-current="page">{{ label }}</span>
     {%- elif href -%}
-      <a href="{{ href }}">{{ label }}</a><span class="breadcrumb-sep">›</span>
+      <a href="{{ href }}">{{ label }}</a><span class="breadcrumb-sep" aria-hidden="true">›</span>
     {%- else -%}
-      <span>{{ label }}</span><span class="breadcrumb-sep">›</span>
+      <span>{{ label }}</span><span class="breadcrumb-sep" aria-hidden="true">›</span>
     {%- endif -%}
   {%- endfor -%}
 </nav>

steward/templates/dashboard/_widget_drawer.html

@@ -33,26 +33,19 @@
               <label style="font-size:0.74rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;">
                 Widget title <span style="color:var(--text-dim);">(optional)</span>
               </label>
-              <input type="text" name="title" placeholder="{{ w.label }}"
-                     style="width:100%;padding:0.32rem 0.6rem;background:var(--bg);
-                            border:1px solid var(--border-mid);border-radius:4px;
-                            color:var(--text);font-size:0.85rem;">
+              <input type="text" name="title" placeholder="{{ w.label }}" class="input">
             </div>
             {% for p in w.params %}
             <div>
               <label style="font-size:0.74rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;">{{ p.label }}</label>
               {% if p.type == "select" %}
-              <select name="param_{{ p.key }}"
-                      style="width:100%;padding:0.32rem 0.6rem;background:var(--bg);
-                             border:1px solid var(--border-mid);border-radius:4px;color:var(--text);font-size:0.85rem;">
+              <select name="param_{{ p.key }}" class="input">
                 {% for opt in p.options %}
                 <option value="{{ opt.value }}" {% if opt.value == p.default %}selected{% endif %}>{{ opt.label }}</option>
                 {% endfor %}
               </select>
               {% elif p.type == "host" %}
-              <select name="param_{{ p.key }}" required
-                      style="width:100%;padding:0.32rem 0.6rem;background:var(--bg);
-                             border:1px solid var(--border-mid);border-radius:4px;color:var(--text);font-size:0.85rem;">
+              <select name="param_{{ p.key }}" required class="input">
                 <option value="">— select a host —</option>
                 {% for h in hosts %}
                 <option value="{{ h.id }}">{{ h.name }}</option>

steward/templates/dashboard/index.html

@@ -18,8 +18,7 @@
   <div style="display:flex;align-items:center;gap:0.75rem;">
     {# Dashboard switcher — shown when more than one dashboard exists #}
     {% if all_dashboards | length > 1 %}
-    <select onchange="window.location='/d/'+this.value"
-            style="font-size:0.82rem;padding:0.3rem 0.6rem;background:var(--bg-card);border:1px solid var(--border-mid);border-radius:5px;color:var(--text);cursor:pointer;">
+    <select onchange="window.location='/d/'+this.value" class="input" style="width:auto;" aria-label="Dashboard">
       {% for d in all_dashboards %}
       <option value="{{ d.id }}" {% if d.id == dashboard.id %}selected{% endif %}>{{ d.name }}</option>
       {% endfor %}