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

@@ -105,7 +105,7 @@ code { font-family: var(--fs-font-mono); font-size: 0.875em; background: var(--b
 .nav-scrim { display: none; }
 
 /* Layout */
-main { padding: 1.5rem 2rem; max-width: 1400px; margin: 0 auto; width: 100%; box-sizing: border-box; position: relative; z-index: 1; }
+main { padding: 1.5rem 2rem; max-width: 1400px; margin: 0 auto; width: 100%; min-width: 0; box-sizing: border-box; position: relative; z-index: 1; }
 
 /* Responsive: sidebar slides off-canvas under 900px, toggled by ☰ */
 @media (max-width: 900px) {
@@ -147,7 +147,13 @@ main { padding: 1.5rem 2rem; max-width: 1400px; margin: 0 auto; width: 100%; box
 
 /* Cards */
 .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; }
+.card-flush { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; overflow-x: auto; overflow-y: hidden; margin-bottom: 1rem; }
+/* A table wider than the screen scrolls sideways inside its card instead of
+   widening the page at phone width. Any card holding a table does this, so no
+   page has to remember a wrapper; .table-wrap is for a table outside a card.
+   (Only cards with a table: a plain card can hold a popover that must not clip.) */
+.card:has(table.table) { overflow-x: auto; }
+.table-wrap { overflow-x: auto; }
 
 /* Typography */
 .page-title { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 500; color: var(--text); line-height: var(--fs-leading-heading); margin-bottom: 1.5rem; }
@@ -174,6 +180,10 @@ input[type=text], input[type=email], input[type=password], input[type=number], i
   transition: border-color .15s;
 }
 input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
+/* Keyboard focus is always visible: the design system's ring on anything
+   that takes focus. */
+a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
+input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--fs-focus-ring); }
 select { cursor: pointer; }
 textarea { resize: vertical; }
 /* Form fields: .field wraps a .field-label, the .input and an optional .field-hint. */