Standardize UI typography, charts and empty states

src/lib/ui/components/capacity/CapacityHosts.svelte

@@ -14,7 +14,8 @@
     }
 </script>
 
-<div class="table-wrap"><table>
+<!-- svelte-ignore a11y_no_noninteractive_tabindex (Scrollable tables must be reachable by keyboard.) -->
+<div class="table-wrap" role="region" aria-label="Host capacity comparison" tabindex="0"><table>
     <thead><tr><th>Host</th><th>Additional instances</th><th>Limited by</th><th>CPU available</th><th>Memory available</th><th>Free ports</th><th><span class="sr-only">Details</span></th></tr></thead>
     <tbody>{#each hosts as host (host.id)}
         <tr>
@@ -43,7 +44,8 @@
 </table></div>
 
 <style>
-    .table-wrap { overflow-x:auto; border:1px solid var(--border-subtle); border-radius:var(--radius-md); }
+    .table-wrap { position:relative; overflow-x:auto; border:1px solid var(--border-subtle); border-radius:var(--radius-md); }
+    .table-wrap:focus-visible { outline:2px solid var(--accent-primary); outline-offset:3px; }
     table { width:100%; min-width:800px; border-collapse:collapse; text-align:left; font-size:var(--text-sm); }
     th { padding:12px 16px; color:var(--text-secondary); font-size:var(--text-xs); font-weight:500; background:var(--surface-sunken); }
     td { padding:14px 16px; border-top:1px solid var(--border-subtle); background:var(--surface); font-variant-numeric:tabular-nums; }