feat(ui): share view on steward.css; breadcrumbs everywhere they belong; focus ring; tables scroll in their card (#5095)

#5095 "Share view on the shared stylesheet; breadcrumbs, focus-visible and
wide tables".

- dashboard/share_view.html loads theme.css and steward.css; its own copy of
  the old purple palette is gone. Only the read-only frame and the x/y/w/h
  grid stay inline, written in tokens. HEX_CEILING 75 -> 58.
- Breadcrumbs on settings/general, settings/thresholds, the dashboard share
  page and share-link-created. tests/test_breadcrumbs.py fails on any page
  extending base.html without a crumbs() trail, unless it is on the named
  list of section top pages, logged-out and error pages (rule 134).
- :focus-visible draws --fs-focus-ring on links, buttons, summaries, inputs
  and anything with tabindex.
- Any card holding a .table scrolls sideways (card:has(table.table)), so a
  wide table no longer widens the page at phone width; .card-flush scrolls
  too, main gets min-width:0, and .table-wrap covers a table outside a card.
- tests/test_share_view.py renders the share view: shared sheets, no hex
  colour, escaped name, widgets loading through the share token.

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

steward/templates/dashboard/share.html

@@ -1,5 +1,7 @@
 {% extends "base.html" %}
+{% from "_macros.html" import crumbs %}
 {% block title %}Share: {{ dashboard.name }} — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Dashboard", "/"), (dashboard.name, "/d/" ~ dashboard.id), ("Share", "")]) }}{% endblock %}
 {% block content %}
 <div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.5rem;">
   <h1 class="page-title" style="margin-bottom:0;">Share: {{ dashboard.name }}</h1>

steward/templates/dashboard/share_created.html

@@ -1,5 +1,7 @@
 {% extends "base.html" %}
+{% from "_macros.html" import crumbs %}
 {% block title %}Share Link Created — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Dashboard", "/"), (dashboard.name, "/d/" ~ dashboard.id), ("Share", "/d/" ~ dashboard.id ~ "/share"), ("Link created", "")]) }}{% endblock %}
 {% block content %}
 <div style="max-width:640px;">
   <h1 class="page-title">Share Link Created</h1>

steward/templates/dashboard/share_view.html

@@ -7,81 +7,34 @@
   <script src="{{ url_for('static', filename='vendor/htmx-2.0.4.min.js') }}"></script>
   <script src="{{ url_for('static', filename='vendor/chart-4.4.4.umd.min.js') }}"></script>
   <link rel="stylesheet" href="{{ url_for('static', filename='fonts/fonts.css') }}">
+  <link rel="stylesheet" href="{{ url_for('static', filename='theme.css') }}">
+  <link rel="stylesheet" href="{{ url_for('static', filename='steward.css') }}">
+  {# The palette, type and widget classes come from steward.css like every
+     other page; only the read-only page's own frame and its grid live here. #}
   <style>
-    :root {
-      --bg: #07071a; --bg-card: #0f0f24; --bg-elevated: #17172e;
-      --border: #1e1e3e; --border-mid: #28284c;
-      --text: #d2cef0; --text-muted: #6858a0; --text-dim: #282860;
-      --accent: #7c5ef4; --gold: #c9a84c;
-      --green: #26d96b; --green-dim: #0e3a1e;
-      --yellow: #e6b818; --red: #e83848; --red-dim: #3a0e14;
-      --orange: #e07828;
-      --font-serif: 'Fraunces', Georgia, serif;
+    .share-header { background: var(--bg-card); padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border-mid); min-height: 48px; }
+    .share-name { font-family: var(--fs-font-display); font-weight: 500; font-size: 1.15rem; color: var(--gold); overflow-wrap: anywhere; }
+    .share-main { max-width: 1600px; }
+    /* Same grid as the authenticated view, rendered from x/y/w/h. */
+    .dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 70px; gap: 1rem; }
+    .dash-grid > .dash-cell { margin-bottom: 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
+    .dash-cell .dash-cell-body { flex: 1; min-height: 0; overflow: auto; }
+    @media (max-width: 820px) {
+      .dash-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
+      .dash-grid > .dash-cell { grid-column: 1 / -1 !important; grid-row: auto !important; }
+      .dash-cell .dash-cell-body { overflow: visible; }
+      .share-main { padding: 1rem; }
     }
-    * { box-sizing: border-box; margin: 0; padding: 0; }
-    body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; }
-    a { color: var(--accent); text-decoration: none; }
-    code { font-family: ui-monospace, monospace; font-size: 0.875em; background: var(--bg-elevated); padding: 0.1em 0.35em; border-radius: 3px; }
-    .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; margin-bottom: 1rem; }
-    .card-flush { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 1rem; }
-    .section-title { font-family: var(--font-serif); font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
-    .table { width: 100%; border-collapse: collapse; }
-    .table th { text-align: left; padding: 0.6rem 1rem; color: var(--text-muted); font-weight: 500; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border-mid); }
-    .table td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
-    .table tbody tr:last-child td { border-bottom: none; }
-    .table tbody tr:hover td { background: var(--bg-elevated); }
-    .badge { display: inline-block; padding: 0.2em 0.55em; border-radius: 4px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; }
-    .badge-green { background: var(--green-dim); color: var(--green); }
-    .badge-red   { background: var(--red-dim);   color: #ff8090; }
-    .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
-    .dot-up   { background: var(--green); box-shadow: 0 0 4px var(--green); }
-    .dot-down { background: var(--red); }
-    .dot-warn { background: var(--yellow); }
-    .dot-dim  { background: var(--text-dim); }
-    .ping-card { padding: 0.75rem 1.25rem; }
-    .ping-row { display:flex; align-items:center; gap:1rem; padding:0.45rem 0; border-bottom:1px solid var(--border); }
-    .ping-row:last-child { border-bottom:none; }
-    .ping-meta { min-width:120px; max-width:180px; flex-shrink:1; overflow:hidden; }
-    .ping-name { font-size:0.875rem; font-weight:500; display:block; overflow-wrap:anywhere; }
-    .ping-addr { display:block; color:var(--text-muted); font-size:0.75rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
-    .ping-pills { display:flex; gap:2px; flex:1; min-width:0; overflow:hidden; align-items:center; }
-    .pill { display:inline-block; width:7px; height:22px; border-radius:2px; }
-    .pill-empty { background:var(--bg-elevated); }
-    .ping-cur { min-width:72px; text-align:right; font-size:0.85rem; font-variant-numeric:tabular-nums; }
-    .ping-cur-good { color:var(--green); } .ping-cur-warn { color:var(--yellow); }
-    .ping-cur-bad  { color:var(--orange); } .ping-cur-down { color:var(--red); font-weight:bold; }
-    .ping-cur-nd   { color:var(--text-dim); }
-    .widget-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.75rem; }
-    .widget-title { font-family:var(--font-serif); font-size:0.8rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; }
-    /* Same Grafana-style grid as the authenticated view, rendered from x/y/w/h. */
-    .dash-grid { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:70px; gap:1rem; }
-    .dash-grid > .dash-cell { margin-bottom:0; min-width:0; overflow:hidden; display:flex; flex-direction:column; }
-    .dash-cell .dash-cell-body { flex:1; min-height:0; overflow:auto; }
-    .dash-cell-body { container-type:inline-size; }
-    .host-blocks { display:grid; grid-template-columns:1fr; gap:0 1.5rem; }
-    @container (min-width:520px) { .host-blocks { grid-template-columns:1fr 1fr; } }
-    @container (min-width:900px) { .host-blocks { grid-template-columns:1fr 1fr 1fr; } }
-    @media (max-width:820px) {
-      .dash-grid { grid-template-columns:1fr; grid-auto-rows:auto; }
-      .dash-grid > .dash-cell { grid-column:1 / -1 !important; grid-row:auto !important; }
-      .dash-cell .dash-cell-body { overflow:visible; }
-    }
-    .stat-val { font-size: 2rem; font-weight: 700; line-height: 1; }
-    .stat-label { font-size: 0.8rem; color: var(--text-muted); margin-left: 0.3rem; }
-    header { background: var(--bg-card); padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-mid); height: 48px; font-family: var(--font-serif); }
-    main { padding: 1.5rem 2rem; max-width: 1600px; margin: 0 auto; }
   </style>
 </head>
 <body>
 
-<header>
-  <span style="font-weight:500;font-size:1.15rem;color:var(--gold);">
-    {{ dashboard.name }}
-  </span>
+<header class="share-header">
+  <span class="share-name">{{ dashboard.name }}</span>
   <span style="font-size:0.78rem;color:var(--text-muted);">Steward · read-only view</span>
 </header>
 
-<main>
+<main class="share-main">
   {% if widgets %}
   <div class="dash-grid">
     {% for item in widgets %}
@@ -101,9 +54,7 @@
     {% endfor %}
   </div>
   {% else %}
-  <div style="color:var(--text-muted);text-align:center;padding:4rem;font-size:0.9rem;">
-    This dashboard has no widgets.
-  </div>
+  <div class="empty-state">This dashboard has no widgets.</div>
   {% endif %}
 </main>
 

steward/templates/settings/general.html

@@ -1,6 +1,8 @@
 {# steward/templates/settings/general.html #}
 {% extends "base.html" %}
+{% from "_macros.html" import crumbs %}
 {% block title %}Settings — General — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Settings", "/settings/"), ("General", "")]) }}{% endblock %}
 {% block content %}
 {% set active_tab = "general" %}
 {% include "settings/_tabs.html" %}

steward/templates/settings/thresholds.html

@@ -1,6 +1,8 @@
 {# steward/templates/settings/thresholds.html — tunable degraded/critical cutoffs #}
 {% extends "base.html" %}
+{% from "_macros.html" import crumbs %}
 {% block title %}Settings — Thresholds & Retention — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Settings", "/settings/"), ("Thresholds & retention", "")]) }}{% endblock %}
 {% block content %}
 {% set active_tab = "thresholds" %}
 {% include "settings/_tabs.html" %}