diff --git a/apps/ui/src/App.vue b/apps/ui/src/App.vue
index 59c398d..b24f6c8 100644
--- a/apps/ui/src/App.vue
+++ b/apps/ui/src/App.vue
@@ -191,7 +191,7 @@ void settings;
       <div class="foot">
         <div v-if="state.healthError" class="s-failed">Can't reach the server</div>
         <div v-else-if="state.health" class="row" style="gap: 4px">
-          <span v-if="authState.user" class="foot-who">{{ authState.user.username }}</span>
+          <span v-if="authState.user" class="foot-who" :title="authState.user.username">{{ authState.user.username }}</span>
           <span v-else-if="authState.root && authState.checked" class="foot-who">token access</span>
           <!-- The role, permanently, next to who you are: it is the reason half this rail is or is
                not there. Root holds no role — "token access" already says it outranks all four. -->
diff --git a/apps/ui/src/components/ActionButton.vue b/apps/ui/src/components/ActionButton.vue
index cce9442..11e4a40 100644
--- a/apps/ui/src/components/ActionButton.vue
+++ b/apps/ui/src/components/ActionButton.vue
@@ -25,13 +25,13 @@
  * attribute and `run` was emitted by nothing. Those buttons rendered, took the click, and did
  * nothing at all. Implementing the contract they were written against is the fix.
  */
-import { onBeforeUnmount, ref } from 'vue';
+import { computed, onBeforeUnmount, ref, useId } from 'vue';
 
 const props = defineProps<{
   pending?: boolean;
   disabled?: boolean;
   variant?: 'primary' | 'danger' | 'ghost';
-  /** Shown as a native tooltip; use it to say WHY a disabled control is disabled. */
+  /** Says WHY a disabled control is disabled; read out as the control's description. */
   title?: string;
   /** When set, the click is two-stage and this is the question asked in between. */
   confirm?: string;
@@ -39,6 +39,17 @@ const props = defineProps<{
 
 const emit = defineEmits<{ (e: 'run'): void }>();
 
+/**
+ * BLOCKED BY A PRECONDITION, not natively disabled. `disabled` takes the button out of the tab
+ * order, and with it the `title` that explains why — so keyboard, touch and screen-reader users
+ * met a dead control with no reason attached. `aria-disabled` keeps it focusable and the reason
+ * reachable; `onClick` does the blocking the attribute used to do.
+ *
+ * `pending` stays natively disabled: transiently unavailable, nothing to explain.
+ */
+const blocked = computed(() => Boolean(props.disabled && props.title && !props.pending));
+const whyId = useId();
+
 const armed = ref(false);
 let timer: ReturnType<typeof setTimeout> | null = null;
 
@@ -48,7 +59,15 @@ function disarm(): void {
   timer = null;
 }
 
-function onClick(): void {
+function onClick(e: MouseEvent): void {
+  if (props.pending || props.disabled) {
+    // An aria-disabled button still takes clicks and still submits a form. preventDefault kills the
+    // implicit submit; stopImmediatePropagation drops the parent's own fallthrough @click, which
+    // Vue merges onto this element after this handler.
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    return;
+  }
   if (!props.confirm) return; // plain button: the parent's own @click handles it
   if (armed.value) {
     disarm();
@@ -67,7 +86,9 @@ onBeforeUnmount(disarm);
 <template>
   <button
     :class="[variant, armed && 'armed']"
-    :disabled="pending || disabled"
+    :disabled="pending || (disabled && !title)"
+    :aria-disabled="blocked || undefined"
+    :aria-describedby="blocked ? whyId : undefined"
     :title="title"
     :aria-busy="pending ? 'true' : undefined"
     @click="onClick"
@@ -77,5 +98,32 @@ onBeforeUnmount(disarm);
     <span v-if="armed">{{ confirm }}</span>
     <slot v-else />
     <span v-if="pending" class="progress" aria-hidden="true" />
+    <!-- Teleported, not a second root node: a fragment root would stop the calling view's scoped
+         styles from reaching this button, and left inside it the reason would join the button's
+         accessible NAME instead of describing it. -->
+    <Teleport v-if="blocked" to="body">
+      <span :id="whyId" class="ab-why">{{ title }}</span>
+    </Teleport>
   </button>
 </template>
+
+<style scoped>
+/* app.css paints `button:disabled`; a blocked button is aria-disabled instead, so it repaints the
+   same look here — minus the focus ring, which a now-focusable button needs. */
+button[aria-disabled='true'] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+button[aria-disabled='true']:not(:focus-visible) {
+  box-shadow: none;
+}
+.ab-why {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+</style>
diff --git a/apps/ui/src/components/CommandPalette.vue b/apps/ui/src/components/CommandPalette.vue
index 68ac358..4cc461c 100644
--- a/apps/ui/src/components/CommandPalette.vue
+++ b/apps/ui/src/components/CommandPalette.vue
@@ -15,6 +15,7 @@
  * and an operator who has to remember the exact spelling is back to using the sidebar. Ties break
  * toward earlier and more contiguous matches, so an exact prefix always wins.
  */
+import { Search } from 'lucide-vue-next';
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { api } from '../api/client';
@@ -169,10 +170,7 @@ defineExpose({ show });
     <div v-if="open" class="scrim palette-scrim" @click.self="hide">
       <div class="palette" role="dialog" aria-modal="true" aria-label="Command palette">
         <div class="palette-q">
-          <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
-            <circle cx="11" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="2" />
-            <path d="M16.5 16.5 21 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
-          </svg>
+          <Search :size="16" aria-hidden="true" />
           <input
             ref="input"
             v-model="q"
@@ -195,6 +193,7 @@ defineExpose({ show });
               class="palette-row"
               :data-on="i === cursor"
               @click="choose(r.it)"
+              @focus="cursor = i"
               @mousemove="cursor = i"
             >
               <span class="palette-label">{{ r.it.label }}</span>
diff --git a/apps/ui/src/components/EquivalentCommand.vue b/apps/ui/src/components/EquivalentCommand.vue
index 0dd260d..19aeb6c 100644
--- a/apps/ui/src/components/EquivalentCommand.vue
+++ b/apps/ui/src/components/EquivalentCommand.vue
@@ -58,7 +58,7 @@ async function copy(): Promise<void> {
     await navigator.clipboard.writeText(text.value);
     toast('ok', 'Copied.');
   } catch {
-    toast('error', 'Could not copy — your browser blocked clipboard access.');
+    toast('error', 'Copy failed — select it and copy by hand.');
   }
 }
 </script>
@@ -74,11 +74,12 @@ async function copy(): Promise<void> {
 
     <Transition name="fade">
       <div v-if="open" class="eqc-panel">
-        <div class="eqc-tabs" role="tablist">
+        <!-- Two toggles, not a tablist: no tabpanel, no roving tabindex, no arrow keys. `role="tab"`
+             would promise an APG keyboard contract nothing here implements. -->
+        <div class="eqc-tabs">
           <button
             class="ghost sm"
-            role="tab"
-            :aria-selected="tab === 'curl'"
+            :aria-pressed="tab === 'curl'"
             :data-on="tab === 'curl'"
             @click="tab = 'curl'"
           >
@@ -87,8 +88,7 @@ async function copy(): Promise<void> {
           <button
             v-if="cli"
             class="ghost sm"
-            role="tab"
-            :aria-selected="tab === 'cli'"
+            :aria-pressed="tab === 'cli'"
             :data-on="tab === 'cli'"
             @click="tab = 'cli'"
           >
diff --git a/apps/ui/src/components/ErrorNote.vue b/apps/ui/src/components/ErrorNote.vue
index 9ecb798..409f6cd 100644
--- a/apps/ui/src/components/ErrorNote.vue
+++ b/apps/ui/src/components/ErrorNote.vue
@@ -16,7 +16,7 @@ defineProps<{ text: string; title?: string }>();
 
 <template>
   <div class="banner failed" role="alert">
-    <b>{{ title ?? 'The server refused this.' }}</b>
+    <b>{{ title ?? 'That did not work.' }}</b>
     <pre class="raw">{{ text }}</pre>
   </div>
 </template>
diff --git a/apps/ui/src/components/InfoHint.vue b/apps/ui/src/components/InfoHint.vue
index 774a0ae..777a39f 100644
--- a/apps/ui/src/components/InfoHint.vue
+++ b/apps/ui/src/components/InfoHint.vue
@@ -73,7 +73,6 @@ onBeforeUnmount(() => {
         v-if="pinned || hovered"
         class="hint-bub"
         :class="[props.align === 'end' ? 'to-end' : 'to-start', props.side === 'top' ? 'above' : 'below']"
-        role="tooltip"
       >
         <slot />
       </span>
diff --git a/apps/ui/src/components/LogViewer.vue b/apps/ui/src/components/LogViewer.vue
index 0d45997..ecac8e6 100644
--- a/apps/ui/src/components/LogViewer.vue
+++ b/apps/ui/src/components/LogViewer.vue
@@ -72,7 +72,7 @@ async function copy(): Promise<void> {
     await navigator.clipboard.writeText(text);
     toast('ok', 'Copied.');
   } catch {
-    toast('error', 'Could not copy — your browser blocked clipboard access.');
+    toast('error', 'Copy failed — select it and copy by hand.');
   }
 }
 
@@ -94,7 +94,17 @@ onBeforeUnmount(() => {});
       <slot name="actions" />
     </div>
 
-    <div ref="box" class="lv-box" role="log" aria-live="polite" @scroll.passive="onScroll">
+    <!-- `tabindex="0"`: Safari does not make an overflow scroller focusable on its own, so without
+         it the log is unscrollable without a mouse. A focusable region needs a name. -->
+    <div
+      ref="box"
+      class="lv-box"
+      role="log"
+      aria-label="Log output"
+      aria-live="polite"
+      tabindex="0"
+      @scroll.passive="onScroll"
+    >
       <p v-if="!rows.length" class="lv-empty">{{ emptyText ?? 'No output.' }}</p>
       <template v-for="r in rows" :key="r.key">
         <div v-if="r.separator" class="lv-sep"><span>{{ r.text }}</span></div>
diff --git a/apps/ui/src/components/RefreshButton.vue b/apps/ui/src/components/RefreshButton.vue
index 9f563c5..074e759 100644
--- a/apps/ui/src/components/RefreshButton.vue
+++ b/apps/ui/src/components/RefreshButton.vue
@@ -40,7 +40,7 @@ async function go(): Promise<void> {
 
 <template>
   <button
-    class="ghost sm refresh"
+    class="ghost refresh"
     :disabled="spinning || busy"
     :title="title ?? 'Read this again from the server'"
     :aria-busy="spinning ? 'true' : undefined"
diff --git a/apps/ui/src/components/SelectMenu.vue b/apps/ui/src/components/SelectMenu.vue
index bdb6527..6882dc0 100644
--- a/apps/ui/src/components/SelectMenu.vue
+++ b/apps/ui/src/components/SelectMenu.vue
@@ -85,7 +85,7 @@ const value = defineModel<string>({ required: true });
                   d="m5 13 4 4L19 7"
                   fill="none"
                   stroke="currentColor"
-                  stroke-width="2.5"
+                  stroke-width="2"
                   stroke-linecap="round"
                   stroke-linejoin="round"
                 />
diff --git a/apps/ui/src/components/ShortcutSheet.vue b/apps/ui/src/components/ShortcutSheet.vue
index c7ea9c1..6f56dad 100644
--- a/apps/ui/src/components/ShortcutSheet.vue
+++ b/apps/ui/src/components/ShortcutSheet.vue
@@ -1,5 +1,16 @@
 <script setup lang="ts">
-/** The `?` sheet. Closes on Escape (handled globally), on the scrim, and on its own button. */
+/**
+ * The `?` sheet.
+ *
+ * Reka owns modality, and that is the whole point of it not being a hand-rolled scrim any more:
+ * the previous version declared `aria-modal="true"` while doing none of what that promises —
+ * opening it left focus on `<body>`, and three Tabs put you on a nav link BEHIND the sheet. Reka
+ * brings the focus trap, focus restore on close, the scroll lock and Escape, and it is already
+ * this app's idiom (`HelpModal`, `FindingsModal`).
+ */
+import {
+  DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogClose,
+} from 'reka-ui';
 import { SHORTCUTS } from '../composables/useShortcuts';
 
 defineProps<{ open: boolean }>();
@@ -7,20 +18,14 @@ const emit = defineEmits<{ close: [] }>();
 </script>
 
 <template>
-  <Transition name="fade">
-    <div
-      v-if="open"
-      class="scrim"
-      role="dialog"
-      aria-modal="true"
-      aria-label="Keyboard shortcuts"
-      @click.self="emit('close')"
-    >
-      <div class="sheet">
+  <DialogRoot :open="open" @update:open="(v: boolean) => !v && emit('close')">
+    <DialogPortal>
+      <DialogOverlay class="scrim help-scrim" />
+      <DialogContent class="sheet" aria-label="Keyboard shortcuts">
         <div class="row">
-          <h2 style="font-size: var(--t-lg); font-weight: 650">Keyboard shortcuts</h2>
+          <DialogTitle style="font-size: var(--t-lg); font-weight: 650">Keyboard shortcuts</DialogTitle>
           <span class="grow" />
-          <button class="ghost sm" @click="emit('close')">Close</button>
+          <DialogClose class="ghost sm">Close</DialogClose>
         </div>
         <dl>
           <template v-for="s in SHORTCUTS" :key="s.keys">
@@ -30,7 +35,7 @@ const emit = defineEmits<{ close: [] }>();
             <dd>{{ s.what }}</dd>
           </template>
         </dl>
-      </div>
-    </div>
-  </Transition>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
 </template>
diff --git a/apps/ui/src/composables/useDeploymentActions.ts b/apps/ui/src/composables/useDeploymentActions.ts
index 88da2ac..56388f5 100644
--- a/apps/ui/src/composables/useDeploymentActions.ts
+++ b/apps/ui/src/composables/useDeploymentActions.ts
@@ -115,7 +115,7 @@ export async function act(
       void router.push(`/jobs/${encodeURIComponent(job.id)}`);
       return;
     }
-    actionError.value = 'The action was accepted, but the response carried nothing to follow.';
+    actionError.value = 'Started, but no job to follow — check Jobs.';
     return;
   }
   if (r.status === 409) return onConflict(r.body);
diff --git a/apps/ui/src/styles/app.css b/apps/ui/src/styles/app.css
index 3f7ad40..58a8ecb 100644
--- a/apps/ui/src/styles/app.css
+++ b/apps/ui/src/styles/app.css
@@ -72,7 +72,8 @@ a:hover {
 code,
 .mono {
   font-family: var(--mono);
-  font-size: 0.92em;
+  /* max(): 0.92em compounds below the 12px floor when the host is --t-xs. */
+  font-size: max(0.92em, var(--t-xs));
 }
 
 /* Focus must stay visible. An ops tool is used by keyboard under pressure. */
@@ -158,7 +159,7 @@ a:focus-visible {
   display: flex;
   flex-direction: column;
   gap: var(--s4);
-  box-shadow: var(--shadow);
+  box-shadow: var(--hairline), var(--shadow);
 }
 
 .brand {
@@ -167,7 +168,7 @@ a:focus-visible {
   gap: var(--s2);
   font-size: var(--t-lg);
   font-weight: 650;
-  letter-spacing: -0.01em;
+  letter-spacing: var(--track-title);
   color: var(--fg);
 }
 .brand:hover {
@@ -271,14 +272,21 @@ a:focus-visible {
   .rail nav {
     flex-direction: row;
     flex: 1;
-    justify-content: space-around;
+    /* `space-around` CENTRES negative free space, so both ends fell outside the bar and the fixed
+       rail put them beyond body scroll too. Start-aligned and scrollable keeps every link reachable. */
+    justify-content: flex-start;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  .rail nav::-webkit-scrollbar {
+    display: none;
   }
   .navlink {
     flex-direction: column;
     gap: 2px;
     font-size: var(--t-xs);
     padding: var(--s1) var(--s2);
-    min-width: 56px;
+    flex: 0 0 auto;
     align-items: center;
   }
   .navlink .count {
@@ -381,7 +389,7 @@ h3 {
 
 .grid-2 {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
   gap: var(--s4);
   align-items: start;
 }
@@ -415,13 +423,13 @@ button,
   transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
     box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
 }
-button:hover:not(:disabled),
-.btn:hover:not(:disabled) {
+button:hover:not(:disabled):not([aria-disabled='true']),
+.btn:hover:not(:disabled):not([aria-disabled='true']) {
   border-color: color-mix(in srgb, var(--fg-mute) 60%, var(--line));
   background: color-mix(in srgb, var(--hover) 100%, var(--panel-2));
   text-decoration: none;
 }
-button:active:not(:disabled) {
+button:active:not(:disabled):not([aria-disabled='true']) {
   transform: translateY(1px);
   /* The catch-light goes out and an inset shadow replaces it: pressed things do not catch light. */
   box-shadow: inset 0 2px 4px var(--press);
@@ -433,14 +441,14 @@ button:disabled {
 }
 button.primary {
   /* A slight vertical gradient — flat fills read as stickers; lit-from-above reads as a control. */
-  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff) 0%, var(--accent) 100%);
+  background: var(--accent-grad);
   border-color: color-mix(in srgb, var(--accent) 75%, #000);
-  color: #fff;
+  color: var(--accent-fg);
   box-shadow: var(--hairline-strong), var(--elev-2),
     0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent);
 }
-button.primary:hover:not(:disabled) {
-  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #fff) 0%, color-mix(in srgb, var(--accent) 94%, #fff) 100%);
+button.primary:hover:not(:disabled):not([aria-disabled='true']) {
+  background: var(--accent-grad-hover);
   border-color: color-mix(in srgb, var(--accent) 75%, #000);
   /* The glow says "this is the one" without adding a second colour to the page. */
   box-shadow: var(--hairline-strong), var(--elev-2),
@@ -451,15 +459,19 @@ button.danger {
   border-color: color-mix(in srgb, var(--fail) 45%, transparent);
   color: var(--fail);
 }
-button.danger:hover:not(:disabled) {
+button.danger:hover:not(:disabled):not([aria-disabled='true']) {
   background: color-mix(in srgb, var(--fail) 26%, transparent);
   border-color: color-mix(in srgb, var(--fail) 62%, transparent);
 }
 button.ghost {
   background: transparent;
+}
+/* Not a bare `box-shadow: none`: that selector outranks `:focus-visible` above and deleted the
+   focus ring on every ghost button — which is the style dense rows and tables use. */
+button.ghost:not(:focus-visible) {
   box-shadow: none;
 }
-button.ghost:hover:not(:disabled) {
+button.ghost:hover:not(:disabled):not([aria-disabled='true']) {
   background: var(--hover);
 }
 button.sm,
@@ -490,6 +502,10 @@ button .progress {
   transform-origin: left;
 }
 
+/* `input:not([type])` is in every list below on purpose: an <input> with no type attribute IS a
+   text input, but `input[type='text']` does not match it — ten of them in this app were rendering
+   with no border, no radius, no focus treatment and a 22.5px browser-default height. */
+input:not([type]),
 input[type='text'],
 input[type='password'],
 input[type='search'],
@@ -502,10 +518,10 @@ select {
   letter-spacing: var(--track-body);
   color: var(--fg);
   background: var(--sunk);
-  border: 1px solid var(--line);
+  border: 1px solid var(--line-control);
   border-radius: var(--r1);
   padding: var(--s2) var(--s3);
-  min-height: 32px;
+  min-height: var(--control-h);
   width: 100%;
   min-width: 0;
   /*
@@ -515,6 +531,25 @@ select {
   box-shadow: inset 0 1px 2px var(--press);
   transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
 }
+
+/*
+ * SINGLE-LINE controls hold the toolbar height exactly. `min-height` could never do it: 13.5px at
+ * 1.5 line-height + 16px padding + 2px border is 38.25px, so the floor never bound and every input
+ * sat 4px taller than the button beside it — which is what `.phead >` and a hand-written
+ * `align-self: end` were separately patching. `textarea` is excluded because it must grow.
+ */
+input:not([type]),
+input[type='text'],
+input[type='password'],
+input[type='search'],
+input[type='url'],
+input[type='email'],
+input[type='number'],
+select {
+  height: var(--control-h);
+  padding-block: var(--s1);
+}
+input:not([type]):hover,
 input[type='text']:hover,
 input[type='password']:hover,
 input[type='search']:hover,
@@ -525,6 +560,7 @@ textarea:hover,
 select:hover {
   border-color: color-mix(in srgb, var(--fg-mute) 55%, var(--line));
 }
+input:not([type]):focus,
 input[type='text']:focus,
 input[type='password']:focus,
 input[type='search']:focus,
@@ -541,7 +577,7 @@ select:focus {
 textarea {
   font-family: var(--mono);
   font-size: var(--t-sm);
-  line-height: 1.55;
+  line-height: var(--lh-body);
   resize: vertical;
   /* A spec is whitespace-significant; wrapping is fine, but never reflow the indentation. */
   white-space: pre;
@@ -660,9 +696,21 @@ label {
   font-size: var(--t-xs);
   color: var(--fg-mute);
   text-transform: uppercase;
-  letter-spacing: 0.06em;
+  letter-spacing: var(--track-caps);
 }
 @media (max-width: 560px) {
+  input:not([type]),
+  input[type='text'],
+  input[type='password'],
+  input[type='search'],
+  input[type='url'],
+  input[type='email'],
+  input[type='number'],
+  textarea,
+  select {
+    /* iOS Safari zooms the whole page when a focused input is under 16px. */
+    font-size: 16px;
+  }
   .kv {
     grid-template-columns: minmax(0, 1fr) auto;
   }
@@ -678,6 +726,7 @@ label {
   align-items: center;
   gap: 5px;
   font: 500 var(--t-xs) / 1 var(--sans);
+  font-variant-numeric: tabular-nums;
   padding: 4px 8px;
   border-radius: var(--r-full);
   background: var(--neutral-soft);
@@ -741,7 +790,6 @@ label {
 
 .banner {
   border: 1px solid var(--line);
-  border-left-width: 3px;
   border-radius: var(--r2);
   padding: var(--s3) var(--s4);
   margin: var(--s3) 0;
@@ -756,26 +804,29 @@ label {
   color: var(--fg-dim);
 }
 .banner.ok {
-  border-left-color: var(--ok);
   background: var(--ok-soft);
 }
 .banner.failed {
-  border-left-color: var(--fail);
   background: var(--fail-soft);
 }
 .banner.leaked,
 .banner.warn {
-  border-left-color: var(--leak);
   background: var(--leak-soft);
 }
 .banner.info {
-  border-left-color: var(--accent);
   background: var(--accent-soft);
 }
-.banner.plain {
-  border-left-color: var(--fg-mute);
-}
 
+/* Prose caps itself; the page does not (ui-rules.md "Width"). --measure was unused until now. */
+.hint,
+.banner {
+  max-width: var(--measure);
+  text-wrap: pretty;
+}
+/* Inside a .field the gap already separates them; the standalone margin would stack to 20px. */
+.field > .hint {
+  margin-top: 0;
+}
 .hint {
   font-size: var(--t-sm);
   color: var(--fg-mute);
@@ -885,7 +936,7 @@ td.name {
     content: attr(data-label);
     font: 600 var(--t-xs) / 1.6 var(--sans);
     text-transform: uppercase;
-    letter-spacing: 0.06em;
+    letter-spacing: var(--track-caps);
     color: var(--fg-mute);
     text-align: left;
     flex: none;
@@ -901,6 +952,7 @@ td.name {
   }
   table.cards td[data-label=''] {
     justify-content: flex-end;
+    flex-wrap: wrap;
   }
 }
 
@@ -1092,13 +1144,15 @@ td.name {
   min-height: 0;
   background: transparent;
   border: 1px solid transparent;
-  box-shadow: none;
   width: 100%;
 }
-.clist-item:hover:not(:disabled) {
+.clist-item:hover:not(:disabled):not([aria-disabled='true']) {
   background: var(--hover);
   border-color: var(--line-soft);
 }
+.clist-item:not(:focus-visible) {
+  box-shadow: none;
+}
 .clist-item.on {
   background: var(--panel-2);
   border-color: var(--line);
@@ -1115,6 +1169,7 @@ td.name {
   color: var(--fg-mute);
   max-width: 100%;
   overflow: hidden;
+  white-space: nowrap;
   text-overflow: ellipsis;
 }
 .clist-state {
@@ -1255,6 +1310,16 @@ pre.log mark {
     grid-template-columns: repeat(6, 1fr);
   }
 }
+/*
+ * And the other end of the same rule. At 320px three tiles get ~50px of content, so "ISOLATED",
+ * "SHARED", "RUNNING" and "UNKNOWN" all elided — the exact failure the comment above rejects.
+ * 2x3 gives ~85px, which fits every label this panel has.
+ */
+@container (max-width: 340px) {
+  .stats {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
 .stat {
   background: var(--panel-2);
   border: 1px solid var(--line-soft);
@@ -1268,14 +1333,6 @@ pre.log mark {
   letter-spacing: var(--track-display);
   font-variant-numeric: tabular-nums;
 }
-/*
- * A zero is NOT news. Rendered at the same weight as a real count it competes for attention with
- * the numbers that actually changed, and a dashboard where everything shouts says nothing.
- */
-.stat[data-zero='true'] .v {
-  color: var(--fg-mute);
-  font-weight: 500;
-}
 .stat .k {
   font-size: var(--t-xs);
   color: var(--fg-mute);
@@ -1296,6 +1353,17 @@ pre.log mark {
 .stat.leak .v {
   color: var(--leak);
 }
+/*
+ * A zero is NOT news. Rendered at the same weight as a real count it competes for attention with
+ * the numbers that actually changed, and a dashboard where everything shouts says nothing.
+ *
+ * AFTER the semantic colours deliberately: they have equal specificity, so source order decides,
+ * and a zero must read as absence whatever its tile means.
+ */
+.stat[data-zero='true'] .v {
+  color: var(--fg-mute);
+  font-weight: 500;
+}
 
 /* ------------------------------------------------------------------ tabs */
 
@@ -1305,10 +1373,6 @@ pre.log mark {
   border-bottom: 1px solid var(--line);
   margin-bottom: var(--s4);
   overflow-x: auto;
-  scrollbar-width: none;
-}
-.tabs::-webkit-scrollbar {
-  display: none;
 }
 .tabs a {
   padding: var(--s2) var(--s3);
@@ -1538,7 +1602,8 @@ pre.log mark {
   margin-left: auto;
   background: none;
   border: 0;
-  min-height: 0;
+  min-height: 24px;
+  min-width: 24px;
   padding: 2px 6px;
   color: var(--fg-mute);
 }
@@ -1567,14 +1632,21 @@ pre.log mark {
   padding: var(--s4);
 }
 .sheet {
+  position: fixed;
+  z-index: 71;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: var(--r3);
-  box-shadow: var(--shadow);
+  /* The catch-light pairs with the shadow — tokens.css: remove either and the panel flattens. */
+  box-shadow: var(--hairline-strong), var(--elev-4);
   padding: var(--s5);
-  width: min(460px, 100%);
+  width: min(460px, calc(100vw - var(--s5)));
   max-height: 80vh;
   overflow: auto;
+  animation: help-in var(--dur-slow) var(--ease-spring);
 }
 .sheet dl {
   display: grid;
@@ -1630,6 +1702,7 @@ kbd {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  position: relative;
   width: 18px;
   height: 18px;
   min-height: 0;
@@ -1641,6 +1714,12 @@ kbd {
   cursor: pointer;
   transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
 }
+/* The visual box stays 18px; the TARGET reaches the 24px minimum. */
+.hint-btn::after {
+  content: '';
+  position: absolute;
+  inset: -3px;
+}
 .hint-btn:hover,
 .hint-btn.on {
   color: var(--accent);
@@ -1657,7 +1736,7 @@ kbd {
   background: var(--panel-2);
   border: 1px solid var(--line);
   border-radius: var(--r2);
-  box-shadow: var(--shadow);
+  box-shadow: var(--hairline), var(--shadow);
   color: var(--fg-dim);
   font: 400 var(--t-sm) / 1.5 var(--sans);
   text-transform: none;
@@ -1744,7 +1823,7 @@ kbd {
   letter-spacing: var(--track-title);
   color: var(--fg);
 }
-.palette-q input:focus {
+.palette-q input:focus:not(:focus-visible) {
   outline: none;
   border: none;
   box-shadow: none;
@@ -1769,10 +1848,9 @@ kbd {
   text-align: left;
   background: none;
   border: none;
-  box-shadow: none;
   border-radius: var(--r1);
   padding: var(--s2) var(--s3);
-  min-height: 34px;
+  min-height: var(--control-h);
   color: var(--fg);
 }
 /*
@@ -1780,6 +1858,9 @@ kbd {
  * highlight — two lit rows at once (one hovered, one selected) is the classic palette bug where
  * Enter does something other than what the eye is on.
  */
+.palette-row:not(:focus-visible) {
+  box-shadow: none;
+}
 .palette-row[data-on='true'] {
   background: var(--accent-soft);
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent);
@@ -1813,8 +1894,10 @@ kbd {
   color: var(--fg-mute);
   font-size: var(--t-xs);
 }
-kbd {
-  font: 500 11px / 1 var(--mono);
+/* Scoped: unscoped, this beat the keycap rule above on every <kbd> in the app, at a raw 11px. */
+.palette-foot kbd {
+  font: 500 var(--t-xs) / 1 var(--mono);
+  font-variant-numeric: tabular-nums;
   color: var(--fg-dim);
   background: var(--sunk);
   border: 1px solid var(--line);
@@ -1888,7 +1971,7 @@ kbd {
   border-radius: var(--r1);
   box-shadow: inset 0 1px 2px var(--press);
   color: var(--fg-mute);
-  min-height: 34px;
+  min-height: var(--control-h);
   transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
 }
 .searchbox:focus-within {
@@ -1899,11 +1982,13 @@ kbd {
   /* The box is the field now — the input inside it carries no chrome of its own. */
   border: none;
   background: none;
-  box-shadow: none;
   padding: 0;
   min-height: 0;
 }
-.searchbox input:focus {
+.searchbox input:not(:focus-visible) {
+  box-shadow: none;
+}
+.searchbox input:focus:not(:focus-visible) {
   outline: none;
   border: none;
   box-shadow: none;
@@ -1915,13 +2000,13 @@ kbd {
 /* Sized to its content, so a filter does not stretch to fill a toolbar. */
 select.compact {
   width: auto;
-  min-height: 34px;
+  min-height: var(--control-h);
   padding-inline-end: var(--s5);
 }
 
 /* Every control in a toolbar agrees on height, or the row reads as assembled from spare parts. */
 .phead > .check {
-  min-height: 34px;
+  min-height: var(--control-h);
 }
 
 /* ------------------------------------------------------------------ select menu */
@@ -1941,7 +2026,7 @@ select.compact {
   align-items: center;
   gap: var(--s2);
   justify-content: space-between;
-  min-height: 34px;
+  min-height: var(--control-h);
   padding: 0 var(--s2) 0 var(--s3);
   background: var(--sunk);
   border: 1px solid var(--line);
@@ -1952,7 +2037,7 @@ select.compact {
   color: var(--fg);
   cursor: pointer;
 }
-.selm-trigger:hover:not(:disabled) {
+.selm-trigger:hover:not(:disabled):not([aria-disabled='true']) {
   border-color: color-mix(in srgb, var(--fg-mute) 55%, var(--line));
 }
 .selm-trigger[data-state='open'] {
@@ -1992,7 +2077,7 @@ select.compact {
   gap: var(--s2);
   padding: var(--s2);
   min-height: 30px;
-  border-radius: calc(var(--r1) - 2px);
+  border-radius: var(--r1);
   font-size: var(--t-sm);
   cursor: pointer;
   white-space: nowrap;
@@ -2069,14 +2154,14 @@ input[type='radio']::before {
 input[type='checkbox']::before {
   width: 11px;
   height: 11px;
-  background: #fff;
+  background: var(--accent-fg);
   clip-path: polygon(14% 47%, 0 61%, 40% 100%, 100% 22%, 85% 9%, 39% 71%);
 }
 input[type='radio']::before {
   width: 7px;
   height: 7px;
   border-radius: var(--r-full);
-  background: #fff;
+  background: var(--accent-fg);
 }
 input[type='checkbox']:checked,
 input[type='radio']:checked {
@@ -2268,13 +2353,14 @@ input[type='radio']:disabled {
 .lv-row.ok .lv-msg {
   color: var(--ok);
 }
-/* Per-service hues for compose logs — stable, muted, and legible in both themes. */
-.lv-row.svc-0 .lv-gutter { color: #7aa2f7; }
-.lv-row.svc-1 .lv-gutter { color: #9ece6a; }
-.lv-row.svc-2 .lv-gutter { color: #e0af68; }
-.lv-row.svc-3 .lv-gutter { color: #bb9af7; }
-.lv-row.svc-4 .lv-gutter { color: #7dcfff; }
-.lv-row.svc-5 .lv-gutter { color: #f7768e; }
+/* Per-service hues for compose logs. Tokenised per theme: the literals here were a dark-only set
+   that measured 1.72-2.65:1 on a light panel — the comment claimed both themes, the values did not. */
+.lv-row.svc-0 .lv-gutter { color: var(--svc-0); }
+.lv-row.svc-1 .lv-gutter { color: var(--svc-1); }
+.lv-row.svc-2 .lv-gutter { color: var(--svc-2); }
+.lv-row.svc-3 .lv-gutter { color: var(--svc-3); }
+.lv-row.svc-4 .lv-gutter { color: var(--svc-4); }
+.lv-row.svc-5 .lv-gutter { color: var(--svc-5); }
 .lv-sep {
   display: flex;
   align-items: center;
@@ -2310,14 +2396,6 @@ input[type='radio']:disabled {
     transform: rotate(360deg);
   }
 }
-@media (prefers-reduced-motion: reduce) {
-  .refresh-icon.spin {
-    animation: none;
-  }
-}
-:root[data-motion='none'] .refresh-icon.spin {
-  animation: none;
-}
 
 /*
  * The vitals strip — a control plane's instrument row, under the page title.
@@ -2332,7 +2410,7 @@ input[type='radio']:disabled {
   flex-wrap: wrap;
   gap: var(--s1) var(--s3);
   margin-top: var(--s2);
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-family: var(--mono);
   font-size: var(--t-xs);
   font-variant-numeric: tabular-nums;
   color: var(--fg-mute);
diff --git a/apps/ui/src/styles/tokens.css b/apps/ui/src/styles/tokens.css
index 9168200..fd3429c 100644
--- a/apps/ui/src/styles/tokens.css
+++ b/apps/ui/src/styles/tokens.css
@@ -47,13 +47,29 @@
   --sunk: #11141a;
   --line: #2b323d;
   --line-soft: #21262f;
+  /*
+   * A CONTROL's edge, which is not a panel's. tokens.css's "the shadow carries the edge" note
+   * covers panels; an input gets an INSET shadow, which draws no outer edge at all, so its border
+   * was the only boundary — at 1.34:1 against the panel. WCAG 1.4.11 wants 3:1.
+   */
+  --line-control: #69748a;
 
   --fg: #eef2f8;
   --fg-dim: #a4afbe;
-  --fg-mute: #78838f;
+  --fg-mute: #858f9c;
 
   --accent: #4a9dff;
   --accent-soft: rgba(74, 157, 255, 0.18);
+  /*
+   * THE INK ON AN ACCENT FILL, and the fill's own gradient.
+   *
+   * White on this blue is 2.78:1 — it was the shipped default. Dark ink is 6.81:1, so the fill
+   * stays bright and the LIFT goes on the top stop: lightening only ever helps dark ink.
+   * Light inverts both (white ink, so the fill must not lighten) — see that block.
+   */
+  --accent-fg: #0e1116;
+  --accent-grad: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff) 0%, var(--accent) 100%);
+  --accent-grad-hover: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #fff) 0%, color-mix(in srgb, var(--accent) 94%, #fff) 100%);
   --ok: #35d17e;
   --ok-soft: rgba(53, 209, 126, 0.17);
   --fail: #ff6159;
@@ -82,6 +98,12 @@
   --hover-strong: rgba(255, 255, 255, 0.07);
   --press: rgba(0, 0, 0, 0.18);
 
+  --svc-0: #7aa2f7;
+  --svc-1: #9ece6a;
+  --svc-2: #e0af68;
+  --svc-3: #bb9af7;
+  --svc-4: #7dcfff;
+  --svc-5: #f7768e;
   --skel: linear-gradient(90deg, #1c212a 0%, #262d38 50%, #1c212a 100%);
 }
 
@@ -99,13 +121,20 @@
     --sunk: #eef1f5;
     --line: #dfe3e9;
     --line-soft: #eaedf1;
+    --line-control: #7b8592;
 
     --fg: #14181e;
     --fg-dim: #57616f;
-    --fg-mute: #7d8794;
-
-    --accent: #1f6feb;
-    --accent-soft: rgba(31, 111, 235, 0.1);
+    --fg-mute: #636c77;
+
+    --accent: #1257c9;
+    --accent-soft: rgba(18, 87, 201, 0.1);
+    /* White ink, so the fill DROPS its bottom stop instead of lifting its top — still lit from
+       above, and white never falls below 6.50:1. The hue is darkened from #1f6feb because the old
+       one also failed as TEXT on every light surface (4.09:1). */
+    --accent-fg: #ffffff;
+    --accent-grad: linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 88%, #000) 100%);
+    --accent-grad-hover: linear-gradient(180deg, color-mix(in srgb, var(--accent) 94%, #000) 0%, color-mix(in srgb, var(--accent) 80%, #000) 100%);
     --ok: #1a7f37;
     --ok-soft: rgba(26, 127, 55, 0.1);
     --fail: #cf222e;
@@ -129,6 +158,12 @@
     --hover-strong: rgba(16, 24, 40, 0.06);
     --press: rgba(16, 24, 40, 0.07);
 
+    --svc-0: #185ff7;
+    --svc-1: #507725;
+    --svc-2: #94621b;
+    --svc-3: #8141f5;
+    --svc-4: #0071b4;
+    --svc-5: #d9072e;
     --skel: linear-gradient(90deg, #e9edf2 0%, #f6f8fa 50%, #e9edf2 100%);
   }
 }
@@ -146,13 +181,20 @@
   --sunk: #eef1f5;
   --line: #dfe3e9;
   --line-soft: #eaedf1;
+  --line-control: #7b8592;
 
   --fg: #14181e;
   --fg-dim: #57616f;
-  --fg-mute: #7d8794;
-
-  --accent: #1f6feb;
-  --accent-soft: rgba(31, 111, 235, 0.1);
+  --fg-mute: #636c77;
+
+  --accent: #1257c9;
+  --accent-soft: rgba(18, 87, 201, 0.1);
+  /* White ink, so the fill DROPS its bottom stop instead of lifting its top — still lit from
+     above, and white never falls below 6.50:1. The hue is darkened from #1f6feb because the old
+     one also failed as TEXT on every light surface (4.09:1). */
+  --accent-fg: #ffffff;
+  --accent-grad: linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 88%, #000) 100%);
+  --accent-grad-hover: linear-gradient(180deg, color-mix(in srgb, var(--accent) 94%, #000) 0%, color-mix(in srgb, var(--accent) 80%, #000) 100%);
   --ok: #1a7f37;
   --ok-soft: rgba(26, 127, 55, 0.1);
   --fail: #cf222e;
@@ -175,6 +217,12 @@
   --hover-strong: rgba(16, 24, 40, 0.06);
   --press: rgba(16, 24, 40, 0.07);
 
+  --svc-0: #185ff7;
+  --svc-1: #507725;
+  --svc-2: #94621b;
+  --svc-3: #8141f5;
+  --svc-4: #0071b4;
+  --svc-5: #d9072e;
   --skel: linear-gradient(90deg, #e9edf2 0%, #f6f8fa 50%, #e9edf2 100%);
 }
 
diff --git a/apps/ui/src/views/ConfigView.vue b/apps/ui/src/views/ConfigView.vue
index f4357cf..64f8b2d 100644
--- a/apps/ui/src/views/ConfigView.vue
+++ b/apps/ui/src/views/ConfigView.vue
@@ -179,9 +179,8 @@ async function run(mode: 'preview' | 'apply'): Promise<void> {
     <ErrorNote v-if="error" :text="error" title="This configuration was not applied." />
 
     <p class="dim">
-      To <em>take</em> an export, run <code>pstack pull config -o host.sealed</code> on a machine
-      that holds this host's <code>PSTACK_TOKEN</code>. It is deliberately not possible from a
-      browser session: one click would otherwise hand over every credential on the host.
+      Take an export with <code>pstack pull config -o host.sealed</code> on a machine holding this
+      host's <code>PSTACK_TOKEN</code>.
     </p>
   </div>
 </template>
diff --git a/apps/ui/src/views/ControlView.vue b/apps/ui/src/views/ControlView.vue
index 1c3f396..99abf10 100644
--- a/apps/ui/src/views/ControlView.vue
+++ b/apps/ui/src/views/ControlView.vue
@@ -195,30 +195,30 @@ async function redeployAll(): Promise<void> {
       <!-- Unknown is not empty: a dead docker means nothing here is KNOWN. The distinction is the
            point (invariant 10); the sentence explaining it is not. -->
       <div v-if="!view.reachable" class="banner warn"><b>Docker isn't answering.</b> Nothing here is known.</div>
-      <table v-else-if="view.containers.length" class="cards">
-        <thead>
-          <tr>
-            <th>Service</th>
-            <th>Image</th>
-            <th>State</th>
-            <th>Restarts</th>
-            <th>Memory limit</th>
-            <th>Started</th>
-            <th></th>
+      <table v-else-if="view.containers.length" role="table" class="cards">
+        <thead role="rowgroup">
+          <tr role="row">
+            <th role="columnheader">Service</th>
+            <th role="columnheader">Image</th>
+            <th role="columnheader">State</th>
+            <th role="columnheader">Restarts</th>
+            <th role="columnheader">Memory limit</th>
+            <th role="columnheader">Started</th>
+            <th role="columnheader"></th>
           </tr>
         </thead>
-        <tbody class="stagger">
-          <tr v-for="(c, i) in view.containers" :key="c.id" :style="{ '--i': i }">
-            <td class="name" data-label="service">
+        <tbody role="rowgroup" class="stagger">
+          <tr v-for="(c, i) in view.containers" :key="c.id" role="row" :style="{ '--i': i }">
+            <td role="cell" class="name" data-label="service">
               {{ c.service || c.name }}
-              <span v-if="c.service === 'pstack'" class="badge info" title="the container answering this page">this API</span>
+              <span v-if="c.service === 'pstack'" class="badge info" title="the container answering this page">This API</span>
             </td>
-            <td data-label="image" class="mono mute">{{ c.image }}</td>
-            <td data-label="state">
+            <td role="cell" data-label="image" class="mono mute">{{ c.image }}</td>
+            <td role="cell" data-label="state">
               <span :class="c.state === 'running' ? 's-ok' : 's-failed'">{{ sentence(c.state) }}</span>
               <span v-if="c.health" class="mute" style="font-size: var(--t-sm)"> · {{ c.health }}</span>
             </td>
-            <td data-label="restarts">
+            <td role="cell" data-label="restarts">
               <span :class="c.restartCount > 0 ? 'badge warn' : 'mute'">{{ c.restartCount }}</span>
               <span
                 v-if="c.oomKilled"
@@ -227,9 +227,9 @@ async function redeployAll(): Promise<void> {
                 >OOM</span
               >
             </td>
-            <td data-label="memory" class="mono mute">{{ mem(c.memLimitBytes) }}</td>
-            <td data-label="started" class="mute">{{ c.startedAt ? ago(c.startedAt) : '—' }}</td>
-            <td data-label="">
+            <td role="cell" data-label="memory" class="mono mute">{{ mem(c.memLimitBytes) }}</td>
+            <td role="cell" data-label="started" class="mute">{{ c.startedAt ? ago(c.startedAt) : '—' }}</td>
+            <td role="cell" data-label="">
               <ActionButton
                 v-if="c.service && c.service !== 'pstack'"
                 variant="ghost"
@@ -284,7 +284,7 @@ async function redeployAll(): Promise<void> {
         </li>
       </ul>
 
-      <div v-if="can('maintainer')" class="row" style="align-items: flex-end; gap: var(--s3); flex-wrap: wrap">
+      <div v-if="can('maintainer')" class="row" style="gap: var(--s3); flex-wrap: wrap">
         <div class="field inline" style="flex: 1 1 18rem">
           <label for="new-domain">Add a domain</label>
           <input
diff --git a/apps/ui/src/views/DashboardView.vue b/apps/ui/src/views/DashboardView.vue
index f9b3c2c..3ecd1c5 100644
--- a/apps/ui/src/views/DashboardView.vue
+++ b/apps/ui/src/views/DashboardView.vue
@@ -119,28 +119,28 @@ const recentJobs = computed(() => state.jobs.slice(0, 8));
             <b>Nothing is running in this project.</b>
           </div>
 
-          <table v-if="control.services.length" class="cards">
-            <thead>
-              <tr>
-                <th>Service</th>
-                <th>State</th>
-                <th>Health</th>
-                <th>Image</th>
+          <table v-if="control.services.length" role="table" class="cards">
+            <thead role="rowgroup">
+              <tr role="row">
+                <th role="columnheader">Service</th>
+                <th role="columnheader">State</th>
+                <th role="columnheader">Health</th>
+                <th role="columnheader">Image</th>
               </tr>
             </thead>
-            <tbody class="stagger">
-              <tr v-for="(s, i) in control.services" :key="s.name" :style="{ '--i': i }">
-                <td class="name" data-label="service">{{ s.name }}</td>
-                <td data-label="state" :class="s.state === 'running' ? 's-ok' : 's-failed'">
+            <tbody role="rowgroup" class="stagger">
+              <tr v-for="(s, i) in control.services" :key="s.name" role="row" :style="{ '--i': i }">
+                <td role="cell" class="name" data-label="service">{{ s.name }}</td>
+                <td role="cell" data-label="state" :class="s.state === 'running' ? 's-ok' : 's-failed'">
                   {{ s.state || '—' }}
                 </td>
-                <td
+                <td role="cell"
                   data-label="health"
                   :class="s.health === 'healthy' ? 's-ok' : s.health ? 's-failed' : ''"
                 >
                   {{ s.health || '—' }}
                 </td>
-                <td class="name dim" data-label="image">{{ s.image || '—' }}</td>
+                <td role="cell" class="name dim" data-label="image">{{ s.image || '—' }}</td>
               </tr>
             </tbody>
           </table>
diff --git a/apps/ui/src/views/DeploymentDetailView.vue b/apps/ui/src/views/DeploymentDetailView.vue
index fdcdec5..f5e2750 100644
--- a/apps/ui/src/views/DeploymentDetailView.vue
+++ b/apps/ui/src/views/DeploymentDetailView.vue
@@ -84,12 +84,12 @@ watch(
       </div>
       <span class="grow" />
       <span v-if="dep.detail" class="badge" :class="dep.detail.kind">{{ sentence(dep.detail.kind) }}</span>
-      <span v-if="dep.detail?.busy === true" class="badge busy"><span class="dot pulse" />busy</span>
+      <span v-if="dep.detail?.busy === true" class="badge busy"><span class="dot pulse" />Busy</span>
       <span
         v-else-if="dep.detail?.asleep"
         class="badge asleep"
         :title="`asleep since ${new Date(dep.detail.asleep.since).toLocaleString()} (${dep.detail.asleep.reason})`"
-        ><span class="dot" />asleep</span
+        ><span class="dot" />Asleep</span
       >
       <span v-if="dep.detail?.orchestrator === 'swarm'" class="badge" title="deployed as a swarm stack">swarm</span>
       <!--
@@ -133,7 +133,7 @@ watch(
       </div>
     </div>
 
-    <ErrorNote v-if="actionError" :text="actionError" title="The action was refused." />
+    <ErrorNote v-if="actionError" :text="actionError" />
     <ConflictNote
       v-if="conflict"
       :conflict="conflict"
diff --git a/apps/ui/src/views/DeploymentsView.vue b/apps/ui/src/views/DeploymentsView.vue
index 8f121d9..05e4cfe 100644
--- a/apps/ui/src/views/DeploymentsView.vue
+++ b/apps/ui/src/views/DeploymentsView.vue
@@ -6,6 +6,7 @@
  * host's worth of previews — a few dozen rows, already in memory from the shell's poll.
  */
 import { computed, ref } from 'vue';
+import { Search } from 'lucide-vue-next';
 import { sentence } from '../composables/useFormat';
 import { loadDeployments, state, summary } from '../composables/useControlPlane';
 
@@ -63,10 +64,7 @@ const unresolvedRows = computed(() => state.deployments.filter((d) => d.unresolv
           place you are already looking, and the select's own options say what it filters.
         -->
         <div class="searchbox">
-          <svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">
-            <circle cx="11" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="2" />
-            <path d="M16.5 16.5 21 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
-          </svg>
+          <Search :size="16" aria-hidden="true" />
           <input
             id="q"
             v-model="q"
@@ -97,19 +95,19 @@ const unresolvedRows = computed(() => state.deployments.filter((d) => d.unresolv
       <SkeletonList v-else-if="!state.deploymentsLoaded" :rows="4" tall />
 
       <template v-else>
-        <table class="cards">
-          <thead>
-            <tr>
-              <th>ID</th>
-              <th>Kind</th>
-              <th>Stack</th>
-              <th>State</th>
-              <th>Updated</th>
+        <table role="table" class="cards">
+          <thead role="rowgroup">
+            <tr role="row">
+              <th role="columnheader">ID</th>
+              <th role="columnheader">Kind</th>
+              <th role="columnheader">Stack</th>
+              <th role="columnheader">State</th>
+              <th role="columnheader">Updated</th>
             </tr>
           </thead>
-          <tbody class="stagger">
-            <tr v-for="(d, i) in rows" :key="d.id" :style="{ '--i': i }">
-              <td data-label="id">
+          <tbody role="rowgroup" class="stagger">
+            <tr v-for="(d, i) in rows" :key="d.id" role="row" :style="{ '--i': i }">
+              <td role="cell" data-label="id">
                 <RouterLink :to="`/deployments/${encodeURIComponent(d.id)}`">
                   {{ d.id }}
                 </RouterLink>
@@ -117,24 +115,27 @@ const unresolvedRows = computed(() => state.deployments.filter((d) => d.unresolv
                   spec: {{ d.specName }}
                 </div>
               </td>
-              <td data-label="kind"><span class="badge" :class="d.kind">{{ sentence(d.kind) }}</span></td>
-              <td class="name dim" data-label="stack">
+              <td role="cell" data-label="kind"><span class="badge" :class="d.kind">{{ sentence(d.kind) }}</span></td>
+              <td role="cell" class="name dim" data-label="stack">
                 <span v-if="d.stack">{{ d.stack }}</span>
                 <!--
                   No stack name means the spec could not be resolved with the variables this
                   listing had. It is not an error state for the deployment — it is a missing input.
                 -->
                 <span v-else class="badge warn" title="the spec could not be resolved without variables">
-                  needs variables
+                  Needs variables
                 </span>
               </td>
-              <td data-label="state"><RunStateBadge :busy="d.busy" :running="d.running" :asleep="d.asleep" /></td>
-              <td class="dim nowrap" data-label="updated"><RelativeTime :at="d.updatedAt" /></td>
+              <td role="cell" data-label="state"><RunStateBadge :busy="d.busy" :running="d.running" :asleep="d.asleep" /></td>
+              <td role="cell" class="dim nowrap" data-label="updated"><RelativeTime :at="d.updatedAt" /></td>
             </tr>
-            <tr v-if="!rows.length">
-              <td colspan="5" class="mute">
+            <tr v-if="!rows.length" role="row">
+              <td role="cell" colspan="5" class="mute">
                 <template v-if="state.deployments.length">
                   Nothing matches this filter.
+                  <button class="ghost sm" @click="q = ''; kind = 'all'; onlyLive = false">
+                    Clear filters
+                  </button>
                 </template>
                 <template v-else>
                   Nothing submitted yet — <RouterLink to="/submit">submit a spec</RouterLink> to
@@ -150,13 +151,9 @@ const unresolvedRows = computed(() => state.deployments.filter((d) => d.unresolv
           <b>{{ d.id }}</b> could not be resolved:
           <span class="mono">{{ d.unresolved }}</span>
           <p>
-            This listing resolves every spec with the <em>same</em> (empty) request variables, so a
-            spec with a <code>${VAR}</code> the server does not already hold will always appear
-            here.
             <RouterLink :to="`/deployments/${encodeURIComponent(d.id)}/config`">
               Set its variables
             </RouterLink>
-            and the detail view will resolve.
           </p>
         </div>
       </template>
diff --git a/apps/ui/src/views/JobsView.vue b/apps/ui/src/views/JobsView.vue
index 9fa37bc..234a769 100644
--- a/apps/ui/src/views/JobsView.vue
+++ b/apps/ui/src/views/JobsView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 /** Job history. Polled by the shell already, so this view only filters what is in memory. */
 import { computed, ref } from 'vue';
+import { Search } from 'lucide-vue-next';
 import { loadJobs, state } from '../composables/useControlPlane';
 import { actionLabel, took } from '../composables/useFormat';
 import StateBadge from '../components/StateBadge.vue';
@@ -67,10 +68,7 @@ const rows = computed(() => {
            and two list pages with two different toolbars reads as two different products. -->
       <div class="phead">
         <div class="searchbox">
-          <svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">
-            <circle cx="11" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="2" />
-            <path d="M16.5 16.5 21 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
-          </svg>
+          <Search :size="16" aria-hidden="true" />
           <input
             id="jq"
             v-model="q"
@@ -100,22 +98,22 @@ const rows = computed(() => {
       </div>
 
       <p v-if="state.jobsError" class="s-failed">{{ state.jobsError }}</p>
-      <SkeletonList v-else-if="!state.jobsLoaded" :rows="5" />
+      <SkeletonList v-else-if="!state.jobsLoaded" :rows="5" tall />
 
-      <table v-else class="cards">
-        <thead>
-          <tr>
-            <th>State</th>
-            <th>Action</th>
-            <th>Stack</th>
-            <th>Started</th>
-            <th>Took</th>
-            <th>Steps</th>
+      <table v-else role="table" class="cards">
+        <thead role="rowgroup">
+          <tr role="row">
+            <th role="columnheader">State</th>
+            <th role="columnheader">Action</th>
+            <th role="columnheader">Stack</th>
+            <th role="columnheader">Started</th>
+            <th role="columnheader">Took</th>
+            <th role="columnheader">Steps</th>
           </tr>
         </thead>
-        <tbody class="stagger">
-          <tr v-for="(j, i) in rows" :key="j.id" :style="{ '--i': i }">
-            <td data-label="state">
+        <tbody role="rowgroup" class="stagger">
+          <tr v-for="(j, i) in rows" :key="j.id" role="row" :style="{ '--i': i }">
+            <td role="cell" data-label="state">
               <RouterLink :to="`/jobs/${encodeURIComponent(j.id)}`">
                 <StateBadge :state="j.state" />
               </RouterLink>
@@ -132,17 +130,20 @@ const rows = computed(() => {
                 <template v-else>never ran</template>
               </div>
             </td>
-            <td data-label="action">{{ actionLabel(j.action) }}</td>
-            <td class="name" data-label="stack">
+            <td role="cell" data-label="action">{{ actionLabel(j.action) }}</td>
+            <td role="cell" class="name" data-label="stack">
               <RouterLink :to="`/jobs/${encodeURIComponent(j.id)}`">{{ j.stack }}</RouterLink>
             </td>
-            <td class="dim nowrap" data-label="started"><RelativeTime :at="j.startedAt" /></td>
-            <td class="dim nowrap" data-label="took">{{ took(j.startedAt, j.endedAt) }}</td>
-            <td class="dim" data-label="steps">{{ j.outcome ? j.outcome.steps.length : '—' }}</td>
+            <td role="cell" class="dim nowrap" data-label="started"><RelativeTime :at="j.startedAt" /></td>
+            <td role="cell" class="dim nowrap" data-label="took">{{ took(j.startedAt, j.endedAt) }}</td>
+            <td role="cell" class="dim" data-label="steps">{{ j.outcome ? j.outcome.steps.length : '—' }}</td>
           </tr>
-          <tr v-if="!rows.length">
-            <td colspan="6" class="mute">
-              <template v-if="state.jobs.length">Nothing matches this filter.</template>
+          <tr v-if="!rows.length" role="row">
+            <td role="cell" colspan="6" class="mute">
+              <template v-if="state.jobs.length">
+                Nothing matches this filter.
+                <button class="ghost sm" @click="q = ''; only = 'all'">Clear filters</button>
+              </template>
               <template v-else>No jobs recorded.</template>
             </td>
           </tr>
diff --git a/apps/ui/src/views/LoginView.vue b/apps/ui/src/views/LoginView.vue
index 6166058..7558819 100644
--- a/apps/ui/src/views/LoginView.vue
+++ b/apps/ui/src/views/LoginView.vue
@@ -109,7 +109,7 @@ async function submit(): Promise<void> {
           <input id="p" v-model="password" type="password" autocomplete="current-password" />
         </div>
 
-        <div v-if="error" class="banner failed" style="margin-top: var(--s3)">
+        <div v-if="error" role="alert" class="banner failed" style="margin-top: var(--s3)">
           <p>{{ error }}</p>
         </div>
 
diff --git a/apps/ui/src/views/NotFoundView.vue b/apps/ui/src/views/NotFoundView.vue
index 5f6693c..ab7d4b1 100644
--- a/apps/ui/src/views/NotFoundView.vue
+++ b/apps/ui/src/views/NotFoundView.vue
@@ -20,11 +20,7 @@ const route = useRoute();
     </div>
 
     <section class="panel">
-      <p class="mute">
-        If you followed a link to a deployment that has since been forgotten, it will not resolve —
-        the control plane only knows deployments that are still in its registry.
-      </p>
-      <div class="row" style="margin-top: 12px; gap: 8px">
+      <div class="row">
         <RouterLink class="btn" to="/">Dashboard</RouterLink>
         <RouterLink class="btn" to="/deployments">Deployments</RouterLink>
         <RouterLink class="btn" to="/jobs">Jobs</RouterLink>
diff --git a/apps/ui/src/views/NotifiersView.vue b/apps/ui/src/views/NotifiersView.vue
index 171d63c..1bac1bf 100644
--- a/apps/ui/src/views/NotifiersView.vue
+++ b/apps/ui/src/views/NotifiersView.vue
@@ -127,7 +127,7 @@ async function setEnabled(n: NotifierRow, enabled: boolean): Promise<void> {
 async function remove(n: NotifierRow): Promise<void> {
   const r = await api.del(`/api/notifiers/${n.id}`);
   if (!r.ok) {
-    listError.value = problem(r, 'delete this notifier');
+    listError.value = problem(r, 'remove this notifier');
     return;
   }
   if (openDeliveries.value === n.id) openDeliveries.value = null;
@@ -235,7 +235,7 @@ async function redeliver(d: DeliveryRow): Promise<void> {
         <b>Signing secret for “{{ revealed.name }}” — shown once. Copy it now.</b>
         <pre class="code">{{ revealed.secret }}</pre>
         <div class="row">
-          <button class="btn" @click="revealed = null">I have stored it</button>
+          <button class="btn" @click="revealed = null">Dismiss</button>
         </div>
       </div>
 
@@ -244,20 +244,20 @@ async function redeliver(d: DeliveryRow): Promise<void> {
           <h2 class="section">Registered</h2>
         </div>
 
-        <SkeletonList v-if="!loaded" :rows="2" />
-        <table v-else-if="notifiers.length" class="cards">
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Events</th>
-              <th>Last delivery</th>
-              <th></th>
+        <SkeletonList v-if="!loaded" :rows="2" tall />
+        <table v-else-if="notifiers.length" role="table" class="cards">
+          <thead role="rowgroup">
+            <tr role="row">
+              <th role="columnheader">Name</th>
+              <th role="columnheader">Events</th>
+              <th role="columnheader">Last delivery</th>
+              <th role="columnheader"></th>
             </tr>
           </thead>
-          <tbody class="stagger">
+          <tbody role="rowgroup" class="stagger">
             <template v-for="(n, i) in notifiers" :key="n.id">
-              <tr :style="{ '--i': i }">
-                <td class="name" data-label="name">
+              <tr role="row" :style="{ '--i': i }">
+                <td role="cell" class="name" data-label="name">
                   {{ n.name }}
                   <div class="mute" style="font-size: var(--t-sm)">
                     <!-- Chat types keep the URL under `webhookUrl`, and the server masks it (it is
@@ -265,11 +265,11 @@ async function redeliver(d: DeliveryRow): Promise<void> {
                     {{ sentence(n.type) }} · {{ String(n.config.url ?? n.config.webhookUrl ?? '') }}
                   </div>
                 </td>
-                <td data-label="events">
-                  <span v-if="n.events.includes('*')" class="badge">all events</span>
+                <td role="cell" data-label="events">
+                  <span v-if="n.events.includes('*')" class="badge">All events</span>
                   <span v-else>{{ n.events.join(', ') }}</span>
                 </td>
-                <td data-label="last delivery">
+                <td role="cell" data-label="last delivery">
                   <span v-if="!n.lastStatus" class="mute">never</span>
                   <span v-else :class="n.lastStatus === 'ok' ? 's-ok' : 's-failed'">
                     {{ n.lastStatus }}
@@ -278,9 +278,9 @@ async function redeliver(d: DeliveryRow): Promise<void> {
                     <RelativeTime :at="n.lastAt" />
                   </div>
                 </td>
-                <td data-label="">
+                <td role="cell" data-label="">
                   <div class="row" style="justify-content: flex-end">
-                    <span v-if="!n.enabled" class="badge off">disabled</span>
+                    <span v-if="!n.enabled" class="badge off">Disabled</span>
                     <button class="ghost sm" @click="showDeliveries(n)">
                       {{ openDeliveries === n.id ? 'Hide' : 'Deliveries' }}
                     </button>
@@ -288,12 +288,12 @@ async function redeliver(d: DeliveryRow): Promise<void> {
                     <button class="ghost sm" @click="setEnabled(n, !n.enabled)">
                       {{ n.enabled ? 'Disable' : 'Enable' }}
                     </button>
-                    <ActionButton variant="danger" @click="remove(n)">Remove</ActionButton>
+                    <ActionButton variant="danger" :confirm="`Remove ${n.name}?`" @run="remove(n)">Remove</ActionButton>
                   </div>
                 </td>
               </tr>
-              <tr v-if="openDeliveries === n.id" :key="`d${n.id}`">
-                <td colspan="4">
+              <tr v-if="openDeliveries === n.id" :key="`d${n.id}`" role="row">
+                <td role="cell" colspan="4">
                   <div class="row" style="margin-bottom: var(--s2)">
                     <span v-if="queued > 0" class="badge busy">
                       <span class="dot pulse" />{{ queued }} queued
@@ -391,11 +391,11 @@ async function redeliver(d: DeliveryRow): Promise<void> {
           </label>
         </div>
 
-        <ErrorNote v-if="formError" :text="formError" title="Could not register this notifier." />
+        <ErrorNote v-if="formError" :text="formError" title="Could not add this notifier." />
 
         <div class="row" style="margin-top: var(--s4)">
           <ActionButton variant="primary" :pending="saving" :disabled="!canSave" @click="create">
-            {{ saving ? 'Registering…' : 'Register' }}
+            {{ saving ? 'Adding…' : 'Add notifier' }}
           </ActionButton>
         </div>
 
diff --git a/apps/ui/src/views/PublicLogsView.vue b/apps/ui/src/views/PublicLogsView.vue
index 969a4b3..beb76b0 100644
--- a/apps/ui/src/views/PublicLogsView.vue
+++ b/apps/ui/src/views/PublicLogsView.vue
@@ -197,7 +197,7 @@ onBeforeUnmount(() => {
       <span v-if="state" class="badge" :class="state.cls">{{ state.text }}</span>
     </div>
 
-    <div v-if="fatal" class="banner failed">
+    <div v-if="fatal" role="alert" class="banner failed">
       <b>{{ fatal }}</b>
       <p>Ask whoever shared it for a new link.</p>
     </div>
@@ -222,17 +222,17 @@ onBeforeUnmount(() => {
           <b>Docker did not answer.</b>
           <p>What is running could not be listed — not the same as nothing running.</p>
         </div>
-        <table v-else-if="runtime?.containers.length" class="cards" style="margin-top: var(--s3)">
-          <thead>
-            <tr><th>Service</th><th>Container</th><th>State</th><th>Health</th><th v-if="runtime.containers.some((c) => c.node)">Node</th></tr>
+        <table v-else-if="runtime?.containers.length" role="table" class="cards" style="margin-top: var(--s3)">
+          <thead role="rowgroup">
+            <tr role="row"><th role="columnheader">Service</th><th role="columnheader">Container</th><th role="columnheader">State</th><th role="columnheader">Health</th><th v-if="runtime.containers.some((c) => c.node)" role="columnheader">Node</th></tr>
           </thead>
-          <tbody>
-            <tr v-for="c in runtime.containers" :key="c.id">
-              <td data-label="service">{{ c.service ?? '—' }}</td>
-              <td data-label="container" class="mono">{{ c.name }}</td>
-              <td data-label="state"><span :class="c.state === 'running' ? 's-ok' : 's-failed'">{{ sentence(c.state) }}</span></td>
-              <td data-label="health">{{ c.health ? sentence(c.health) : '—' }}</td>
-              <td v-if="runtime.containers.some((x) => x.node)" data-label="node">{{ c.node ?? '—' }}</td>
+          <tbody role="rowgroup">
+            <tr v-for="c in runtime.containers" :key="c.id" role="row">
+              <td role="cell" data-label="service">{{ c.service ?? '—' }}</td>
+              <td role="cell" data-label="container" class="mono">{{ c.name }}</td>
+              <td role="cell" data-label="state"><span :class="c.state === 'running' ? 's-ok' : 's-failed'">{{ sentence(c.state) }}</span></td>
+              <td role="cell" data-label="health">{{ c.health ? sentence(c.health) : '—' }}</td>
+              <td v-if="runtime.containers.some((x) => x.node)" role="cell" data-label="node">{{ c.node ?? '—' }}</td>
             </tr>
           </tbody>
         </table>
diff --git a/apps/ui/src/views/RegistriesView.vue b/apps/ui/src/views/RegistriesView.vue
index 8826ff3..79a1c51 100644
--- a/apps/ui/src/views/RegistriesView.vue
+++ b/apps/ui/src/views/RegistriesView.vue
@@ -77,7 +77,7 @@ async function save(): Promise<void> {
   password.value = '';
   // The server's key, not the typed one: Docker Hub canonicalises, and the list below reloads with
   // whatever it stored — so the toast does not have to explain the difference.
-  toast('ok', `Stored for ${r.body.registry || host.value}.`);
+  toast('ok', `Added ${r.body.registry || host.value}.`);
   host.value = '';
   username.value = '';
   void load();
@@ -134,12 +134,12 @@ async function forget(registry: string): Promise<void> {
       <SkeletonList v-if="!loaded" :rows="2" />
       <ul v-else-if="entries.length" class="kvlist">
         <li v-for="e in entries" :key="e.registry">
-          <span class="k break" style="width: 220px"><b>{{ e.registry }}</b></span>
+          <span class="k break"><b>{{ e.registry }}</b></span>
           <span class="v row">
             <span>{{ e.username ?? 'unknown user' }}</span>
-            <span v-if="e.viaHelper" class="badge warn">via helper</span>
+            <span v-if="e.viaHelper" class="badge warn">Via helper</span>
             <span class="grow" />
-            <ActionButton :disabled="!settings.token" variant="danger" @click="forget(e.registry)">
+            <ActionButton :disabled="!settings.token" variant="danger" :confirm="`Forget ${e.registry}?`" @run="forget(e.registry)">
               Forget
             </ActionButton>
           </span>
@@ -177,13 +177,13 @@ async function forget(registry: string): Promise<void> {
         <div class="mute hint">Stored write-only, as reversible base64 — never shown again.</div>
       </div>
 
-      <ErrorNote v-if="formError" :text="formError" title="Could not store this credential." />
+      <ErrorNote v-if="formError" :text="formError" title="Could not add this credential." />
 
       <div class="row" style="margin-top: var(--s4)">
         <ActionButton variant="primary" :pending="saving" :disabled="!canSave" @click="save">
-          {{ saving ? 'Storing…' : 'Store' }}
+          {{ saving ? 'Adding…' : 'Add credential' }}
         </ActionButton>
-        <span v-if="!settings.token" class="mute">Storing needs an access token.</span>
+        <span v-if="!settings.token" class="mute">Adding needs an access token.</span>
       </div>
     </section>
   </div>
diff --git a/apps/ui/src/views/RoutingView.vue b/apps/ui/src/views/RoutingView.vue
index 8f00d7d..2f66012 100644
--- a/apps/ui/src/views/RoutingView.vue
+++ b/apps/ui/src/views/RoutingView.vue
@@ -216,7 +216,6 @@ async function remove(): Promise<void> {
       </div>
       <span class="grow" />
       <button v-if="writable" class="btn primary" @click="startNew">New file</button>
-      <span class="grow" />
       <RefreshButton :run="refreshAll" />
     </div>
 
@@ -244,7 +243,7 @@ async function remove(): Promise<void> {
       </div>
 
       <div v-else-if="live.length" class="table-scroll">
-        <table class="cards tbl-fixed t-live">
+        <table role="table" class="cards tbl-fixed t-live">
           <!--
             Host-wide, so every identifier here is longer than its per-deployment equivalent: routers
             and projects both carry the stack name. URL still wraps rather than clips — it is the one
@@ -256,17 +255,17 @@ async function remove(): Promise<void> {
             <col style="width: 20%" />
             <col style="width: 22%" />
           </colgroup>
-          <thead>
-            <tr>
-              <th>URL</th>
-              <th>Forwards to</th>
-              <th>Deployment</th>
-              <th>Router</th>
+          <thead role="rowgroup">
+            <tr role="row">
+              <th role="columnheader">URL</th>
+              <th role="columnheader">Forwards to</th>
+              <th role="columnheader">Deployment</th>
+              <th role="columnheader">Router</th>
             </tr>
           </thead>
-          <tbody class="stagger">
-            <tr v-for="(r, i) in live" :key="`${r.container}-${r.router}`" :style="{ '--i': i }">
-              <td class="cell-wrap" data-label="url">
+          <tbody role="rowgroup" class="stagger">
+            <tr v-for="(r, i) in live" :key="`${r.container}-${r.router}`" role="row" :style="{ '--i': i }">
+              <td role="cell" class="cell-wrap" data-label="url">
                 <div v-for="h in r.hosts" :key="h">
                   <a v-if="!h.startsWith('(pattern)')" :href="`https://${h}`" target="_blank" rel="noreferrer">
                     {{ h }}
@@ -275,10 +274,10 @@ async function remove(): Promise<void> {
                 </div>
                 <span v-if="!r.hosts.length" class="mute">no host in the rule</span>
               </td>
-              <td data-label="forwards to">
+              <td role="cell" data-label="forwards to">
                 <RouteTarget :route="r" />
               </td>
-              <td data-label="deployment">
+              <td role="cell" data-label="deployment">
                 <RouterLink
                   v-if="r.project"
                   class="cell-clip"
@@ -289,7 +288,7 @@ async function remove(): Promise<void> {
                 </RouterLink>
                 <span v-else class="mute">—</span>
               </td>
-              <td class="dim" data-label="router">
+              <td role="cell" class="dim" data-label="router">
                 <span class="cell-clip" :title="r.router">{{ r.router }}</span>
               </td>
             </tr>
@@ -345,7 +344,7 @@ async function remove(): Promise<void> {
     <section v-if="openName !== null" class="panel">
       <div class="phead">
         <h2 class="section">{{ openName === '' ? 'New file' : openName }}</h2>
-        <span v-if="dirty" class="badge warn">unsaved</span>
+        <span v-if="dirty" class="badge warn">Unsaved</span>
         <span class="grow" />
         <button class="ghost sm" @click="close">Close</button>
       </div>
@@ -376,7 +375,7 @@ async function remove(): Promise<void> {
           <textarea id="content" v-model="draft" rows="18" spellcheck="false" />
         </div>
 
-        <ErrorNote v-if="fileError" :text="fileError" title="Traefik would not accept this." />
+        <ErrorNote v-if="fileError" :text="fileError" />
 
         <div class="row" style="margin-top: var(--s4)">
           <ActionButton variant="primary" :pending="saving" :disabled="!canSave" @click="save">
diff --git a/apps/ui/src/views/SettingsView.vue b/apps/ui/src/views/SettingsView.vue
index 2f1dc4f..645cac9 100644
--- a/apps/ui/src/views/SettingsView.vue
+++ b/apps/ui/src/views/SettingsView.vue
@@ -307,7 +307,7 @@ const roleOptions = ROLES.map((r) => ({ value: r, label: sentence(r), hint: ROLE
       <h2 class="phead-title">This host</h2>
       <p class="mute hint">Stored on the server, in force for everybody.</p>
 
-      <ErrorNote v-if="hostError" :text="hostError" title="Host settings." />
+      <ErrorNote v-if="hostError" :text="hostError" title="Could not read the host settings." />
 
       <template v-if="host">
         <div class="field">
diff --git a/apps/ui/src/views/SpecDetailView.vue b/apps/ui/src/views/SpecDetailView.vue
index 02e57bd..5851fa1 100644
--- a/apps/ui/src/views/SpecDetailView.vue
+++ b/apps/ui/src/views/SpecDetailView.vue
@@ -97,13 +97,12 @@ const users = computed(() => state.deployments.filter((d) => d.specName === prop
           </li>
           <li>
             <span class="k">Used by</span>
-            <span class="v">
+            <span class="v row">
               <template v-if="users.length">
                 <RouterLink
                   v-for="d in users"
                   :key="d.id"
                   :to="`/deployments/${encodeURIComponent(d.id)}`"
-                  style="margin-right: 10px"
                   >{{ d.id }}</RouterLink
                 >
               </template>
diff --git a/apps/ui/src/views/SpecsView.vue b/apps/ui/src/views/SpecsView.vue
index 488f5d0..006a245 100644
--- a/apps/ui/src/views/SpecsView.vue
+++ b/apps/ui/src/views/SpecsView.vue
@@ -92,7 +92,7 @@ const shown = computed(() => {
     </section>
 
     <section v-else class="panel">
-      <SkeletonList v-if="!loaded" :rows="3" />
+      <SkeletonList v-if="!loaded" :rows="3" tall />
 
       <template v-else-if="specs.length">
         <div class="field" style="max-width: 320px; margin-bottom: var(--s4)">
@@ -100,44 +100,47 @@ const shown = computed(() => {
           <input id="q" v-model="needle" type="search" placeholder="name or description" />
         </div>
 
-        <table class="cards" data-testid="specs.list">
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Kind</th>
-              <th>
+        <table role="table" class="cards" data-testid="specs.list">
+          <thead role="rowgroup">
+            <tr role="row">
+              <th role="columnheader">Name</th>
+              <th role="columnheader">Kind</th>
+              <th role="columnheader">
                 needs
                 <InfoHint label="what needs means">
                   Variables the spec uses but does not set.
                 </InfoHint>
               </th>
-              <th>Used by</th>
-              <th>Updated</th>
+              <th role="columnheader">Used by</th>
+              <th role="columnheader">Updated</th>
             </tr>
           </thead>
-          <tbody class="stagger">
-            <tr v-for="(s, i) in shown" :key="s.name" :style="{ '--i': i }">
-              <td class="name" data-label="name">
+          <tbody role="rowgroup" class="stagger">
+            <tr v-for="(s, i) in shown" :key="s.name" role="row" :style="{ '--i': i }">
+              <td role="cell" class="name" data-label="name">
                 <RouterLink :to="`/specs/${encodeURIComponent(s.name)}`">{{ s.name }}</RouterLink>
                 <div v-if="s.description" class="mute" style="font-size: var(--t-sm)">
                   {{ s.description }}
                 </div>
               </td>
-              <td data-label="kind">
+              <td role="cell" data-label="kind">
                 <span class="badge" :class="s.kind">{{ sentence(s.kind) }}</span>
               </td>
-              <td data-label="needs">
+              <td role="cell" data-label="needs">
                 <span v-if="s.requiredVars.length">{{ s.requiredVars.join(', ') }}</span>
                 <span v-else class="mute">none</span>
               </td>
-              <td data-label="used by">
+              <td role="cell" data-label="used by">
                 <span v-if="users.get(s.name)?.length">{{ users.get(s.name)!.length }}</span>
                 <span v-else class="mute">none</span>
               </td>
-              <td class="dim nowrap" data-label="updated"><RelativeTime :at="s.updatedAt" /></td>
+              <td role="cell" class="dim nowrap" data-label="updated"><RelativeTime :at="s.updatedAt" /></td>
             </tr>
-            <tr v-if="!shown.length">
-              <td colspan="5" class="mute">No spec matches “{{ needle }}”.</td>
+            <tr v-if="!shown.length" role="row">
+              <td role="cell" colspan="5" class="mute">
+                No spec matches “{{ needle }}”.
+                <button class="ghost sm" @click="needle = ''">Clear search</button>
+              </td>
             </tr>
           </tbody>
         </table>
diff --git a/apps/ui/src/views/SsoView.vue b/apps/ui/src/views/SsoView.vue
index ee75c23..1ef48b6 100644
--- a/apps/ui/src/views/SsoView.vue
+++ b/apps/ui/src/views/SsoView.vue
@@ -316,7 +316,7 @@ async function save(): Promise<void> {
     return;
   }
   formError.value = '';
-  toast('ok', 'Saved.');
+  toast('ok', e.originalKey ? 'Saved.' : `Added ${body.key}.`);
   editing.value = null;
   void load();
 }
@@ -336,7 +336,7 @@ async function copyCallback(): Promise<void> {
     await navigator.clipboard.writeText(callbackUrl.value);
     toast('ok', 'Copied.');
   } catch {
-    toast('error', 'Copy failed.');
+    toast('error', 'Copy failed — select it and copy by hand.');
   }
 }
 
@@ -383,7 +383,7 @@ function rulesLine(c: SsoConfig): string {
       <button v-if="loaded && !listError && !editing && !showPicker" class="primary" @click="picking = true">Add provider</button>
     </div>
 
-    <ErrorNote v-if="listError" :text="listError" title="Single sign-on." />
+    <ErrorNote v-if="listError" :text="listError" title="Could not read the sign-on settings." />
     <SkeletonList v-if="!loaded" :rows="4" />
 
     <!-- ============================ the form: one provider ============================ -->
diff --git a/apps/ui/src/views/SubmitView.vue b/apps/ui/src/views/SubmitView.vue
index acb36d9..c9d9948 100644
--- a/apps/ui/src/views/SubmitView.vue
+++ b/apps/ui/src/views/SubmitView.vue
@@ -389,13 +389,13 @@ function loadExample(): void {
             spellcheck="false"
             autocomplete="off"
           />
+          <span class="hint mute">
+            Lower case
+            <InfoHint label="allowed characters in a deployment id">
+              <code>[a-z0-9][a-z0-9._-]{0,63}</code>
+            </InfoHint>
+          </span>
         </div>
-        <span class="mute" style="align-self: end; padding-bottom: 10px">
-          Lower case
-          <InfoHint label="allowed characters in a deployment id">
-            <code>[a-z0-9][a-z0-9._-]{0,63}</code>
-          </InfoHint>
-        </span>
       </div>
 
       <!-- Offered only when this server actually has stored specs. -->
diff --git a/apps/ui/src/views/SwarmView.vue b/apps/ui/src/views/SwarmView.vue
index 5559423..f63598b 100644
--- a/apps/ui/src/views/SwarmView.vue
+++ b/apps/ui/src/views/SwarmView.vue
@@ -85,7 +85,7 @@ async function copy(): Promise<void> {
     await navigator.clipboard.writeText(revealed.value);
     toast('ok', 'Copied.');
   } catch {
-    toast('error', 'Could not copy.');
+    toast('error', 'Copy failed — select it and copy by hand.');
   }
 }
 
@@ -135,33 +135,33 @@ onBeforeUnmount(() => {
           <b>Docker reported a problem.</b>
           <p class="mono">{{ info.error }}</p>
         </div>
-        <table v-if="info.nodes.length" class="cards">
-          <thead>
-            <tr>
-              <th>Hostname</th>
-              <th>Role</th>
-              <th>Status</th>
-              <th>Availability</th>
-              <th>Engine</th>
-              <th>Id</th>
+        <table v-if="info.nodes.length" role="table" class="cards">
+          <thead role="rowgroup">
+            <tr role="row">
+              <th role="columnheader">Hostname</th>
+              <th role="columnheader">Role</th>
+              <th role="columnheader">Status</th>
+              <th role="columnheader">Availability</th>
+              <th role="columnheader">Engine</th>
+              <th role="columnheader">Id</th>
             </tr>
           </thead>
-          <tbody class="stagger">
-            <tr v-for="(n, i) in info.nodes" :key="n.id" :style="{ '--i': i }">
-              <td class="name" data-label="hostname">
+          <tbody role="rowgroup" class="stagger">
+            <tr v-for="(n, i) in info.nodes" :key="n.id" role="row" :style="{ '--i': i }">
+              <td role="cell" class="name" data-label="hostname">
                 {{ n.hostname || '—' }}
-                <span v-if="n.self" class="badge info" title="the node this control plane runs on">this node</span>
+                <span v-if="n.self" class="badge info" title="the node this control plane runs on">This node</span>
               </td>
-              <td data-label="role">
+              <td role="cell" data-label="role">
                 <span class="badge" :class="n.role === 'manager' ? 'isolated' : ''">{{ sentence(n.role) }}</span>
                 <span v-if="n.managerStatus" class="mute" style="font-size: var(--t-sm)"> {{ n.managerStatus }}</span>
               </td>
-              <td data-label="status">
+              <td role="cell" data-label="status">
                 <span :class="n.status === 'ready' ? 's-ok' : 's-failed'">{{ sentence(n.status) }}</span>
               </td>
-              <td data-label="availability">{{ sentence(n.availability || 'unknown') }}</td>
-              <td data-label="engine" class="mono">{{ n.engineVersion || '—' }}</td>
-              <td data-label="id" class="mono mute">{{ n.id.slice(0, 12) }}</td>
+              <td role="cell" data-label="availability">{{ sentence(n.availability || 'unknown') }}</td>
+              <td role="cell" data-label="engine" class="mono">{{ n.engineVersion || '—' }}</td>
+              <td role="cell" data-label="id" class="mono mute">{{ n.id.slice(0, 12) }}</td>
             </tr>
           </tbody>
         </table>
@@ -183,7 +183,7 @@ onBeforeUnmount(() => {
         </li>
       </ul>
 
-      <div class="row" style="flex-wrap: wrap; gap: var(--s3); align-items: flex-end">
+      <div class="row" style="flex-wrap: wrap; gap: var(--s3)">
         <div class="field inline">
           <label for="join-format">Format</label>
           <SelectMenu
diff --git a/apps/ui/src/views/UsersView.vue b/apps/ui/src/views/UsersView.vue
index 275e2b9..4402693 100644
--- a/apps/ui/src/views/UsersView.vue
+++ b/apps/ui/src/views/UsersView.vue
@@ -36,6 +36,9 @@ import { api, problem } from '../api/client';
 import { ROLES, type Role, type User, type UsersResponse } from '../api/types';
 import { authState, can, checkAuth } from '../composables/useAuth';
 import { sentence } from '../composables/useFormat';
+import {
+  DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogClose,
+} from 'reka-ui';
 import { toast } from '../composables/useToasts';
 import ActionButton from '../components/ActionButton.vue';
 import EquivalentCommand from '../components/EquivalentCommand.vue';
@@ -118,7 +121,7 @@ async function createUser(): Promise<void> {
     listError.value = problem(r, 'create this account');
     return;
   }
-  toast('ok', `Created ${r.body.user.username}.`);
+  toast('ok', `Added ${r.body.user.username}.`);
   newUser.value = { username: '', password: '', role: 'viewer' };
   void load();
 }
@@ -214,7 +217,7 @@ async function removeToken(t: Token): Promise<void> {
       <RefreshButton :run="load" />
     </div>
 
-    <ErrorNote v-if="listError" :text="listError" title="Something went wrong." />
+    <ErrorNote v-if="listError" :text="listError" title="Could not load the accounts." />
 
     <div v-if="revealed" class="banner ok">
       <b>{{ revealed.what }} — copy it now.</b>
@@ -223,7 +226,7 @@ async function removeToken(t: Token): Promise<void> {
       <p>{{ revealed.note }}</p>
       <pre class="code">{{ revealed.value }}</pre>
       <div class="row">
-        <button @click="revealed = null">I have stored it</button>
+        <button @click="revealed = null">Dismiss</button>
       </div>
     </div>
 
@@ -235,21 +238,21 @@ async function removeToken(t: Token): Promise<void> {
           <span class="mute" style="font-size: var(--t-xs)">{{ users.length }}</span>
         </div>
 
-        <SkeletonList v-if="!loaded" :rows="3" />
+        <SkeletonList v-if="!loaded" :rows="3" tall />
         <!-- `cards` + `data-label` per cell: below 640px the same markup renders as cards. Without
              it the row's two buttons pushed the table past the viewport and got clipped. -->
-        <table v-else-if="users.length" class="cards">
-          <thead>
-            <tr>
-              <th>User</th>
-              <th>Role</th>
-              <th>Added</th>
-              <th aria-label="Actions" />
+        <table v-else-if="users.length" role="table" class="cards">
+          <thead role="rowgroup">
+            <tr role="row">
+              <th role="columnheader">User</th>
+              <th role="columnheader">Role</th>
+              <th role="columnheader">Added</th>
+              <th role="columnheader" aria-label="Actions" />
             </tr>
           </thead>
-          <tbody>
-            <tr v-for="u in users" :key="u.id">
-              <td class="name" data-label="user">
+          <tbody role="rowgroup">
+            <tr v-for="u in users" :key="u.id" role="row">
+              <td role="cell" class="name" data-label="user">
                 <b>{{ u.username }}</b>
                 <span v-if="u.id === authState.user?.id" class="badge info">you</span>
               </td>
@@ -257,7 +260,7 @@ async function removeToken(t: Token): Promise<void> {
                    person, and a dialog for a four-option choice is a page-blocking ceremony. Anyone
                    else reads the role as text — `sentence()` at render only, never on the value.
                    A role this build does not know still shows: it falls through to `placeholder`. -->
-              <td data-label="role">
+              <td role="cell" data-label="role">
                 <span
                   v-if="can('admin')"
                   class="role-pick"
@@ -274,8 +277,8 @@ async function removeToken(t: Token): Promise<void> {
                 </span>
                 <span v-else>{{ sentence(u.role) }}</span>
               </td>
-              <td class="dim nowrap" data-label="added"><RelativeTime :at="u.createdAt" /></td>
-              <td class="right nowrap" data-label="">
+              <td role="cell" class="dim nowrap" data-label="added"><RelativeTime :at="u.createdAt" /></td>
+              <td role="cell" class="right nowrap" data-label="">
                 <!-- Your own password is yours at any role; someone else's is an admin operation. -->
                 <button
                   v-if="u.id === authState.user?.id || can('admin')"
@@ -343,23 +346,23 @@ async function removeToken(t: Token): Promise<void> {
           <h2 class="section">Your API tokens</h2>
         </div>
 
-        <SkeletonList v-if="!loaded" :rows="2" />
-        <table v-else-if="tokens.length" class="cards">
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Last used</th>
-              <th aria-label="Actions" />
+        <SkeletonList v-if="!loaded" :rows="2" tall />
+        <table v-else-if="tokens.length" role="table" class="cards">
+          <thead role="rowgroup">
+            <tr role="row">
+              <th role="columnheader">Name</th>
+              <th role="columnheader">Last used</th>
+              <th role="columnheader" aria-label="Actions" />
             </tr>
           </thead>
-          <tbody>
-            <tr v-for="t in tokens" :key="t.id">
-              <td class="name" data-label="name"><b>{{ t.name }}</b></td>
-              <td class="dim nowrap" data-label="last used">
+          <tbody role="rowgroup">
+            <tr v-for="t in tokens" :key="t.id" role="row">
+              <td role="cell" class="name" data-label="name"><b>{{ t.name }}</b></td>
+              <td role="cell" class="dim nowrap" data-label="last used">
                 <RelativeTime v-if="t.lastUsedAt" :at="t.lastUsedAt" />
                 <span v-else class="mute">never</span>
               </td>
-              <td class="right nowrap" data-label="">
+              <td role="cell" class="right nowrap" data-label="">
                 <ActionButton
                   class="danger sm"
                   :confirm="`Revoke ${t.name}?`"
@@ -394,11 +397,13 @@ async function removeToken(t: Token): Promise<void> {
       </section>
     </div>
 
-    <!-- Password change: a dialog, because it is a distinct decision about one row. -->
-    <Transition name="fade">
-      <div v-if="pwFor" class="scrim" @click.self="pwFor = null">
-        <div class="sheet" role="dialog" aria-modal="true" aria-label="Change password">
-          <h3>Change password for {{ pwFor.username }}</h3>
+    <!-- Password change: a dialog, because it is a distinct decision about one row. Reka owns
+         modality — hand-rolling it declared `aria-modal` without the focus trap it promises. -->
+    <DialogRoot :open="!!pwFor" @update:open="(v: boolean) => !v && (pwFor = null)">
+      <DialogPortal>
+        <DialogOverlay class="scrim help-scrim" />
+        <DialogContent v-if="pwFor" class="sheet" aria-label="Change password">
+          <DialogTitle as="h3">Change password for {{ pwFor.username }}</DialogTitle>
           <!-- The interlock, one line: this ends every session and revokes every personal token. -->
           <p class="hint">
             Signs {{ pwFor.id === authState.user?.id ? 'you' : 'them' }} out everywhere and revokes
@@ -412,11 +417,11 @@ async function removeToken(t: Token): Promise<void> {
             <button class="primary" :disabled="pwValue.length < 8" @click="changePassword">
               Change password
             </button>
-            <button class="ghost" @click="pwFor = null">Cancel</button>
+            <DialogClose class="ghost">Cancel</DialogClose>
           </div>
-        </div>
-      </div>
-    </Transition>
+        </DialogContent>
+      </DialogPortal>
+    </DialogRoot>
   </div>
 </template>
 
diff --git a/apps/ui/src/views/VariablesView.vue b/apps/ui/src/views/VariablesView.vue
index add7374..dd5d935 100644
--- a/apps/ui/src/views/VariablesView.vue
+++ b/apps/ui/src/views/VariablesView.vue
@@ -98,7 +98,7 @@ async function save(): Promise<void> {
     return;
   }
   listError.value = '';
-  toast('ok', `Stored ${form.value.name}.`);
+  toast('ok', `${editing.value ? 'Saved' : 'Added'} ${form.value.name}.`);
   cancelEdit();
   void load();
 }
@@ -156,7 +156,7 @@ async function remove(e: Entry): Promise<void> {
       <RefreshButton :run="load" />
     </div>
 
-    <ErrorNote v-if="listError" :text="listError" title="Something went wrong." />
+    <ErrorNote v-if="listError" :text="listError" title="Could not load the variables." />
 
     <section v-if="unsupported" class="panel">
       <div class="banner plain">
@@ -174,22 +174,22 @@ async function remove(e: Entry): Promise<void> {
             <span class="mute" style="font-size: var(--t-xs)">{{ vars.length }}</span>
           </div>
 
-          <SkeletonList v-if="!loaded" :rows="2" />
-          <table v-else-if="vars.length" class="cards">
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th>Value</th>
-                <th>Updated</th>
-                <th aria-label="Actions" />
+          <SkeletonList v-if="!loaded" :rows="2" tall />
+          <table v-else-if="vars.length" role="table" class="cards">
+            <thead role="rowgroup">
+              <tr role="row">
+                <th role="columnheader">Name</th>
+                <th role="columnheader">Value</th>
+                <th role="columnheader">Updated</th>
+                <th role="columnheader" aria-label="Actions" />
               </tr>
             </thead>
-            <tbody>
-              <tr v-for="e in vars" :key="e.name">
-                <td class="name" data-label="name"><code>{{ e.name }}</code></td>
-                <td class="break" data-label="value">{{ e.value }}</td>
-                <td class="dim nowrap" data-label="updated"><RelativeTime :at="e.updatedAt" /></td>
-                <td class="right nowrap" data-label="">
+            <tbody role="rowgroup">
+              <tr v-for="e in vars" :key="e.name" role="row">
+                <td role="cell" class="name" data-label="name"><code>{{ e.name }}</code></td>
+                <td role="cell" class="break" data-label="value">{{ e.value }}</td>
+                <td role="cell" class="dim nowrap" data-label="updated"><RelativeTime :at="e.updatedAt" /></td>
+                <td role="cell" class="right nowrap" data-label="">
                   <button class="ghost sm" @click="startEdit(e)">Edit</button>
                   <ActionButton class="danger sm" :confirm="`Delete ${e.name}?`" @run="remove(e)">
                     Delete
@@ -212,20 +212,20 @@ async function remove(e: Entry): Promise<void> {
             <span class="mute" style="font-size: var(--t-xs)">{{ secrets.length }}</span>
           </div>
 
-          <SkeletonList v-if="!loaded" :rows="2" />
-          <table v-else-if="secrets.length" class="cards">
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th>Updated</th>
-                <th aria-label="Actions" />
+          <SkeletonList v-if="!loaded" :rows="2" tall />
+          <table v-else-if="secrets.length" role="table" class="cards">
+            <thead role="rowgroup">
+              <tr role="row">
+                <th role="columnheader">Name</th>
+                <th role="columnheader">Updated</th>
+                <th role="columnheader" aria-label="Actions" />
               </tr>
             </thead>
-            <tbody>
-              <tr v-for="e in secrets" :key="e.name">
-                <td class="name" data-label="name"><code>{{ e.name }}</code></td>
-                <td class="dim nowrap" data-label="updated"><RelativeTime :at="e.updatedAt" /></td>
-                <td class="right nowrap" data-label="">
+            <tbody role="rowgroup">
+              <tr v-for="e in secrets" :key="e.name" role="row">
+                <td role="cell" class="name" data-label="name"><code>{{ e.name }}</code></td>
+                <td role="cell" class="dim nowrap" data-label="updated"><RelativeTime :at="e.updatedAt" /></td>
+                <td role="cell" class="right nowrap" data-label="">
                   <button class="ghost sm" @click="startEdit(e)">Replace</button>
                   <ActionButton class="danger sm" :confirm="`Delete ${e.name}?`" @run="remove(e)">
                     Delete
@@ -271,6 +271,8 @@ async function remove(e: Entry): Promise<void> {
                 spellcheck="false"
                 autocomplete="off"
                 :disabled="!!editing"
+                aria-describedby="var-name-err"
+                :aria-invalid="!!form.name && !NAME.test(form.name)"
               />
             </label>
             <label class="field grow">
@@ -284,7 +286,12 @@ async function remove(e: Entry): Promise<void> {
               />
             </label>
           </div>
-          <p v-if="form.name && !NAME.test(form.name)" class="s-failed" style="margin-top: var(--s2)">
+          <p
+            v-if="form.name && !NAME.test(form.name)"
+            id="var-name-err"
+            class="s-failed"
+            style="margin-top: var(--s2)"
+          >
             Letters, digits and _ only, not starting with a digit.
           </p>
 
diff --git a/apps/ui/src/views/tabs/AxesTab.vue b/apps/ui/src/views/tabs/AxesTab.vue
index 0f1e4ac..27f5c45 100644
--- a/apps/ui/src/views/tabs/AxesTab.vue
+++ b/apps/ui/src/views/tabs/AxesTab.vue
@@ -21,24 +21,24 @@ const HOOKS: HookName[] = ['up', 'assert_live', 'down', 'assert_gone'];
 
     <p v-if="!dep.detail" class="mute">Unavailable until the spec resolves.</p>
     <template v-else>
-      <table class="cards">
-        <thead>
-          <tr>
-            <th>Axis</th>
-            <th>
+      <table role="table" class="cards">
+        <thead role="rowgroup">
+          <tr role="row">
+            <th role="columnheader">Axis</th>
+            <th role="columnheader">
               hooks
               <InfoHint label="what the four hooks do">
                 <code>up</code> provisions · <code>assert_live</code> checks it exists ·
                 <code>down</code> destroys · <code>assert_gone</code> proves it is gone.
               </InfoHint>
             </th>
-            <th>Teardown provable?</th>
+            <th role="columnheader">Teardown provable?</th>
           </tr>
         </thead>
-        <tbody class="stagger">
-          <tr v-for="(a, i) in dep.detail.axes" :key="a.name" :style="{ '--i': i }">
-            <td class="name" data-label="axis">{{ a.name }}</td>
-            <td data-label="hooks">
+        <tbody role="rowgroup" class="stagger">
+          <tr v-for="(a, i) in dep.detail.axes" :key="a.name" role="row" :style="{ '--i': i }">
+            <td role="cell" class="name" data-label="axis">{{ a.name }}</td>
+            <td role="cell" data-label="hooks">
               <span
                 v-for="h in HOOKS"
                 :key="h"
@@ -48,7 +48,7 @@ const HOOKS: HookName[] = ['up', 'assert_live', 'down', 'assert_gone'];
                 >{{ h }}</span
               >
             </td>
-            <td data-label="provable">
+            <td role="cell" data-label="provable">
               <span v-if="a.verifiable" class="badge ok">assert_gone</span>
               <span
                 v-else
@@ -58,8 +58,8 @@ const HOOKS: HookName[] = ['up', 'assert_live', 'down', 'assert_gone'];
               >
             </td>
           </tr>
-          <tr v-if="!dep.detail.axes.length">
-            <td colspan="3" class="mute">No axes.</td>
+          <tr v-if="!dep.detail.axes.length" role="row">
+            <td role="cell" colspan="3" class="mute">No axes.</td>
           </tr>
         </tbody>
       </table>
diff --git a/apps/ui/src/views/tabs/ConfigTab.vue b/apps/ui/src/views/tabs/ConfigTab.vue
index 3f26ca2..ca9f342 100644
--- a/apps/ui/src/views/tabs/ConfigTab.vue
+++ b/apps/ui/src/views/tabs/ConfigTab.vue
@@ -79,22 +79,22 @@ const clashes = computed(() => conflictingVars(dep.vars, storedVars.value));
 
       <p v-if="!dep.detail" class="mute">Unavailable until the spec resolves.</p>
       <template v-else>
-        <table class="cards">
-          <thead>
-            <tr>
-              <th>Key</th>
-              <th>Value</th>
-              <th>Visibility</th>
-              <th>Length</th>
+        <table role="table" class="cards">
+          <thead role="rowgroup">
+            <tr role="row">
+              <th role="columnheader">Key</th>
+              <th role="columnheader">Value</th>
+              <th role="columnheader">Visibility</th>
+              <th role="columnheader">Length</th>
             </tr>
           </thead>
-          <tbody>
-            <tr v-for="e in dep.detail.env" :key="e.key">
-              <td class="name" data-label="key">{{ e.key }}</td>
-              <td class="name" :class="{ masked: e.visibility === 'masked' }" data-label="value">
+          <tbody role="rowgroup">
+            <tr v-for="e in dep.detail.env" :key="e.key" role="row">
+              <td role="cell" class="name" data-label="key">{{ e.key }}</td>
+              <td role="cell" class="name" :class="{ masked: e.visibility === 'masked' }" data-label="value">
                 {{ e.value }}
               </td>
-              <td data-label="visibility">
+              <td role="cell" data-label="visibility">
                 <span class="badge" :class="e.visibility === 'masked' ? 'warn' : ''">
                   {{ sentence(e.visibility) }}
                 </span>
@@ -104,13 +104,13 @@ const clashes = computed(() => conflictingVars(dep.vars, storedVars.value));
                 var is the interesting case: declared, never set — usually a hook about to fail on
                 an empty credential.
               -->
-              <td class="dim" data-label="length">
+              <td role="cell" class="dim" data-label="length">
                 {{ e.length }} chars
                 <span v-if="e.length === 0" class="badge warn" style="margin-left: 6px">never set</span>
               </td>
             </tr>
-            <tr v-if="!dep.detail.env.length">
-              <td colspan="4" class="mute">This spec declares no <code>env:</code> block.</td>
+            <tr v-if="!dep.detail.env.length" role="row">
+              <td role="cell" colspan="4" class="mute">This spec declares no <code>env:</code> block.</td>
             </tr>
           </tbody>
         </table>
diff --git a/apps/ui/src/views/tabs/DangerTab.vue b/apps/ui/src/views/tabs/DangerTab.vue
index f4ea6aa..63f7224 100644
--- a/apps/ui/src/views/tabs/DangerTab.vue
+++ b/apps/ui/src/views/tabs/DangerTab.vue
@@ -84,7 +84,7 @@ async function copyShare(): Promise<void> {
     await navigator.clipboard.writeText(shareLink.value.url);
     toast('ok', 'Link copied.');
   } catch {
-    toast('error', 'Copy failed.');
+    toast('error', 'Copy failed — select it and copy by hand.');
   }
 }
 
@@ -229,7 +229,7 @@ async function forget(): Promise<void> {
         <div class="row">
           <button @click="copyShare">Copy</button>
           <a :href="shareLink.url" target="_blank" rel="noopener">Open ↗</a>
-          <button @click="shareLink = null">Done</button>
+          <button @click="shareLink = null">Dismiss</button>
         </div>
       </div>
       <ErrorNote v-if="shareError" :text="shareError" title="No link was created." />
@@ -297,9 +297,13 @@ async function forget(): Promise<void> {
               :placeholder="dep.detail.stack"
               spellcheck="false"
               autocomplete="off"
+              :aria-describedby="`confirm-${dep.id}-err`"
+              :aria-invalid="!!forceTyped && !forceArmed"
             />
           </div>
-          <p v-if="forceTyped && !forceArmed" class="s-failed">Does not match.</p>
+          <p v-if="forceTyped && !forceArmed" :id="`confirm-${dep.id}-err`" class="s-failed">
+            Does not match.
+          </p>
         </div>
 
         <!--
@@ -325,7 +329,7 @@ async function forget(): Promise<void> {
           <b>Stopped mid-run.</b> What it created before stopping is still there — run Verify.
         </div>
 
-        <ErrorNote v-if="actionError" :text="actionError" title="The action was refused." />
+        <ErrorNote v-if="actionError" :text="actionError" />
         <ConflictNote v-if="conflict" :conflict="conflict" :job-id="conflictJobId" />
       </template>
     </section>
diff --git a/apps/ui/src/views/tabs/LogsTab.vue b/apps/ui/src/views/tabs/LogsTab.vue
index 7c6fd46..067eef7 100644
--- a/apps/ui/src/views/tabs/LogsTab.vue
+++ b/apps/ui/src/views/tabs/LogsTab.vue
@@ -306,7 +306,6 @@ const stateTone = (c: RuntimeContainer): string =>
         Timestamps
       </label>
       <button
-        :class="following ? 'danger' : ''"
         :disabled="!dep.detail?.compose"
         :title="following ? 'Stop streaming' : 'Stream new lines as they arrive'"
         @click="toggleFollow"
@@ -329,7 +328,7 @@ const stateTone = (c: RuntimeContainer): string =>
     <p v-else-if="!dep.detail.compose" class="mute">No <code>compose:</code> section.</p>
 
     <template v-else>
-      <div v-if="error" class="banner failed">{{ error }}</div>
+      <div v-if="error" role="alert" class="banner failed">{{ error }}</div>
 
       <!--
         `ok: false` means compose exited non-zero. Usually "no such project" because the stack was
@@ -362,7 +361,7 @@ const stateTone = (c: RuntimeContainer): string =>
               {{ c.service ?? c.name }}
               <span v-if="c.restartCount > 0" class="badge warn">{{ c.restartCount }}×</span>
             </span>
-            <span class="clist-sub mono">{{ c.name }}</span>
+            <span class="clist-sub mono" :title="c.name">{{ c.name }}</span>
             <span class="clist-state" :class="stateTone(c)">
               {{ sentence(c.health ?? c.state) }}
             </span>
diff --git a/apps/ui/src/views/tabs/RequiresTab.vue b/apps/ui/src/views/tabs/RequiresTab.vue
index c1ca2f0..450c446 100644
--- a/apps/ui/src/views/tabs/RequiresTab.vue
+++ b/apps/ui/src/views/tabs/RequiresTab.vue
@@ -17,20 +17,20 @@ import { dep } from '../../composables/useDeployment';
         the host; only the name and its authored hint are sent here.
       </p>
 
-      <table class="cards">
-        <thead>
-          <tr>
-            <th>Requirement</th>
-            <th>Hint shown on failure</th>
+      <table role="table" class="cards">
+        <thead role="rowgroup">
+          <tr role="row">
+            <th role="columnheader">Requirement</th>
+            <th role="columnheader">Hint shown on failure</th>
           </tr>
         </thead>
-        <tbody class="stagger">
-          <tr v-for="(r, i) in dep.detail.requires" :key="r.name" :style="{ '--i': i }">
-            <td class="name" data-label="requirement">{{ r.name }}</td>
-            <td class="dim" data-label="hint">{{ r.hint || '— (no hint authored)' }}</td>
+        <tbody role="rowgroup" class="stagger">
+          <tr v-for="(r, i) in dep.detail.requires" :key="r.name" role="row" :style="{ '--i': i }">
+            <td role="cell" class="name" data-label="requirement">{{ r.name }}</td>
+            <td role="cell" class="dim" data-label="hint">{{ r.hint || '— (no hint authored)' }}</td>
           </tr>
-          <tr v-if="!dep.detail.requires.length">
-            <td colspan="2" class="mute">
+          <tr v-if="!dep.detail.requires.length" role="row">
+            <td role="cell" colspan="2" class="mute">
               None declared — an isolated deployment that borrows shared infrastructure usually
               wants at least one.
             </td>
diff --git a/apps/ui/src/views/tabs/RuntimeTab.vue b/apps/ui/src/views/tabs/RuntimeTab.vue
index a1eef6f..bba1f94 100644
--- a/apps/ui/src/views/tabs/RuntimeTab.vue
+++ b/apps/ui/src/views/tabs/RuntimeTab.vue
@@ -101,6 +101,9 @@ function taskOf(name: string): string {
  */
 const busy = ref('');
 
+/** The verb a person reads. Docker's own stays on the wire and in the error toast. */
+const ACTING = { start: 'Starting', stop: 'Stopping', restart: 'Restarting' } as const;
+
 async function act(c: RuntimeContainer, action: 'start' | 'stop' | 'restart'): Promise<void> {
   busy.value = `${action}:${c.name}`;
   const r = await api.post<{ note?: string }>(
@@ -113,7 +116,7 @@ async function act(c: RuntimeContainer, action: 'start' | 'stop' | 'restart'): P
     toast('error', problem(r, `${action} ${c.name}`));
     return;
   }
-  toast('ok', r.body.note ?? `${c.name}: ${action} done.`);
+  toast('ok', r.body.note ?? `${ACTING[action]} ${c.name}.`);
   // Read the table back rather than assuming the new state: a container that exits again immediately
   // is exactly the case worth seeing, and the 8s poll would show it a beat later anyway.
   void load();
@@ -142,7 +145,7 @@ function urlFor(c: RuntimeContainer): string | null {
 <template>
   <div>
     <ErrorNote v-if="error" :text="error" title="Could not inspect this deployment." />
-    <SkeletonList v-if="loading && !rt" :rows="5" />
+    <SkeletonList v-if="loading && !rt" :rows="5" tall />
 
     <template v-else-if="rt">
       <!--
@@ -182,7 +185,7 @@ function urlFor(c: RuntimeContainer): string | null {
           </div>
 
           <div v-if="rt.routes.length" class="table-scroll">
-            <table class="cards tbl-fixed t-routes">
+            <table role="table" class="cards tbl-fixed t-routes">
               <!--
                 The widths, as percentages of whatever the panel gives us. URL is the widest because
                 it is the value people read, and it WRAPS: a hostname's tail is which PR it is.
@@ -193,17 +196,17 @@ function urlFor(c: RuntimeContainer): string | null {
                 <col style="width: 26%" />
                 <col style="width: 14%" />
               </colgroup>
-              <thead>
-                <tr>
-                  <th>URL</th>
-                  <th>Forwards to</th>
-                  <th>Router</th>
-                  <th>TLS</th>
+              <thead role="rowgroup">
+                <tr role="row">
+                  <th role="columnheader">URL</th>
+                  <th role="columnheader">Forwards to</th>
+                  <th role="columnheader">Router</th>
+                  <th role="columnheader">TLS</th>
                 </tr>
               </thead>
-              <tbody class="stagger">
-                <tr v-for="(r, i) in rt.routes" :key="r.router" :style="{ '--i': i }">
-                  <td class="cell-wrap" data-label="url">
+              <tbody role="rowgroup" class="stagger">
+                <tr v-for="(r, i) in rt.routes" :key="r.router" role="row" :style="{ '--i': i }">
+                  <td role="cell" class="cell-wrap" data-label="url">
                     <div v-for="h in r.hosts" :key="h">
                       <a v-if="!h.startsWith('(pattern)')" :href="`https://${h}`" target="_blank" rel="noreferrer">
                         {{ h }}
@@ -212,22 +215,22 @@ function urlFor(c: RuntimeContainer): string | null {
                     </div>
                     <span v-if="!r.hosts.length" class="mute">no host in the rule</span>
                   </td>
-                  <td data-label="forwards to">
+                  <td role="cell" data-label="forwards to">
                     <RouteTarget :route="r" />
                     <!-- Under swarm this is the SERVICE name; either way it is matched, not read. -->
                     <div class="mute cell-clip" style="font-size: var(--t-sm)" :title="r.container">
                       {{ r.container }}
                     </div>
                   </td>
-                  <td data-label="router">
+                  <td role="cell" data-label="router">
                     <div class="cell-clip" :title="r.router">{{ r.router }}</div>
                     <div v-if="r.priority" class="mute" style="font-size: var(--t-sm)">
                       priority {{ r.priority }}
                     </div>
                   </td>
-                  <td data-label="tls">
+                  <td role="cell" data-label="tls">
                     <span v-if="r.tls" class="badge ok">{{ r.certresolver || 'inherited' }}</span>
-                    <span v-else class="badge off">off</span>
+                    <span v-else class="badge off">Off</span>
                   </td>
                 </tr>
               </tbody>
@@ -255,7 +258,7 @@ function urlFor(c: RuntimeContainer): string | null {
           </div>
 
           <div v-if="rt.containers.length" class="table-scroll">
-            <table class="cards tbl-fixed t-containers" :class="{ swarm: hasNode }">
+            <table role="table" class="cards tbl-fixed t-containers" :class="{ swarm: hasNode }">
               <!--
                 THE NODE `<col>` CARRIES THE SAME `v-if` AS ITS `<th>`, and has to: one without the
                 other shifts every column after it by one, which is the header-drift bug rebuilt by
@@ -277,31 +280,31 @@ function urlFor(c: RuntimeContainer): string | null {
                 <col />
                 <col style="width: 288px" />
               </colgroup>
-              <thead>
-                <tr>
-                  <th>Service</th>
+              <thead role="rowgroup">
+                <tr role="row">
+                  <th role="columnheader">Service</th>
                   <!-- Where, then how it is doing — the order the cells are in. They disagreed, so
                        under swarm (the only time this column exists) every state read as a node. -->
-                  <th v-if="hasNode">Node</th>
-                  <th>State</th>
-                  <th>Ports</th>
-                  <th>Networks</th>
-                  <th>Image</th>
-                  <th aria-label="Actions" />
+                  <th v-if="hasNode" role="columnheader">Node</th>
+                  <th role="columnheader">State</th>
+                  <th role="columnheader">Ports</th>
+                  <th role="columnheader">Networks</th>
+                  <th role="columnheader">Image</th>
+                  <th role="columnheader" aria-label="Actions" />
                 </tr>
               </thead>
-              <tbody class="stagger">
-                <tr v-for="(c, i) in rt.containers" :key="c.id" :style="{ '--i': i }">
-                  <td class="name" data-label="service">
+              <tbody role="rowgroup" class="stagger">
+                <tr v-for="(c, i) in rt.containers" :key="c.id" role="row" :style="{ '--i': i }">
+                  <td role="cell" class="name" data-label="service">
                     <div class="cell-clip" :title="c.service ?? c.name">{{ c.service ?? c.name }}</div>
                     <div class="mute task cell-clip" :title="c.name">{{ taskOf(c.name) }}</div>
                   </td>
-                  <td v-if="hasNode" data-label="node">
+                  <td v-if="hasNode" role="cell" data-label="node">
                     <div class="cell-clip" :title="c.node ?? undefined">{{ c.node ?? '—' }}</div>
                     <!-- A task on another node: listed from the manager, out of reach of exec/stop. -->
-                    <span v-if="c.remote" class="badge" title="on another node — logs reach it, a shell and stop/start do not">remote</span>
+                    <span v-if="c.remote" class="badge" title="on another node — logs reach it, a shell and stop/start do not">Remote</span>
                   </td>
-                  <td data-label="state">
+                  <td role="cell" data-label="state">
                     <span :class="c.state === 'running' ? 's-ok' : 's-failed'">{{ sentence(c.state) }}</span>
                     <!--
                       Health is only reported while it is RUNNING. Docker keeps the last probe result on
@@ -317,14 +320,14 @@ function urlFor(c: RuntimeContainer): string | null {
                       {{ sentence(c.health) }}
                     </div>
                   </td>
-                  <td data-label="ports">
+                  <td role="cell" data-label="ports">
                     <div v-for="p in c.ports" :key="`${p.containerPort}/${p.protocol}`">
                       <span class="mono">{{ p.containerPort }}</span>
                       <span v-if="p.hostPort" class="mute"> ← host {{ p.hostPort }}</span>
                     </div>
                     <span v-if="!c.ports.length" class="mute">none exposed</span>
                   </td>
-                  <td data-label="networks">
+                  <td role="cell" data-label="networks">
                     <div v-for="n in c.networks" :key="n" class="cell-clip" :title="n">
                       <span :class="n === 'preview-ingress' ? 's-ok' : ''">{{ n }}</span>
                     </div>
@@ -334,7 +337,7 @@ function urlFor(c: RuntimeContainer): string | null {
                   </td>
                   <!-- Clipped, not wrapped: an image reference is matched against one you know, and
                        `registry.example.com/team/app@sha256:…` costs three rows to say nothing new. -->
-                  <td class="dim" data-label="image">
+                  <td role="cell" class="dim" data-label="image">
                     <span class="cell-clip" :title="c.image">{{ c.image }}</span>
                   </td>
                   <!--
@@ -342,7 +345,7 @@ function urlFor(c: RuntimeContainer): string | null {
                     that does it. Open goes to the URL Traefik actually assembled for THIS container
                     (see `urlFor`), so it is absent rather than wrong when no router points here.
                   -->
-                  <td class="row-actions" data-label="">
+                  <td role="cell" class="row-actions" data-label="">
                     <!--
                       One container, not the service and not the stack. Start appears only when it is
                       not running and Stop only when it is, so the control on screen is the one that
@@ -351,7 +354,7 @@ function urlFor(c: RuntimeContainer): string | null {
                     <!-- None of these reach a task on another node; docker's verbs are node-local. -->
                     <!-- And none of them reach a one-shot job's row, which stands for the SERVICE:
                          there is no container behind its name, so the verbs could only fail. -->
-                    <span v-if="c.job" class="badge" title="a one-shot job — no container to start, stop, or shell into">one-shot</span>
+                    <span v-if="c.job" class="badge" title="a one-shot job — no container to start, stop, or shell into">One-shot</span>
                     <span v-else-if="c.remote" class="mute" style="font-size: var(--t-sm)" title="on another node — redeploy the stack, or act on the worker itself">
                       on {{ c.node }}
                     </span>
diff --git a/apps/ui/src/views/tabs/TerminalTab.vue b/apps/ui/src/views/tabs/TerminalTab.vue
index 975a10b..7b60c33 100644
--- a/apps/ui/src/views/tabs/TerminalTab.vue
+++ b/apps/ui/src/views/tabs/TerminalTab.vue
@@ -91,7 +91,7 @@ async function connect() {
     // half — CR to NL — is done server-side; see `crToNl` in api.ts.
     convertEol: true,
     fontSize: 13,
-    fontFamily: 'var(--font-mono, ui-monospace, monospace)',
+    fontFamily: 'var(--mono, ui-monospace, monospace)',
     cursorBlink: true,
     theme: { background: '#0b0e14' },
   });
@@ -179,15 +179,15 @@ onBeforeUnmount(teardown);
 
     <ErrorNote v-if="loadError" :text="loadError" title="Could not list containers." />
 
-    <div class="row wrap" style="gap: var(--s3); align-items: end">
-      <label class="field">
-        <span>Container</span>
-        <SelectMenu v-model="container" label="Container" :disabled="state === 'open' || state === 'connecting'" :options="containerOptions" />
-      </label>
-      <label class="field">
-        <span>Shell</span>
-        <SelectMenu v-model="shell" label="Shell" :disabled="state === 'open' || state === 'connecting'" :options="SHELLS.map((s) => ({ value: s, label: s }))" />
-      </label>
+    <div class="row wrap" style="gap: var(--s3)">
+      <div class="field inline">
+        <label for="term-container">Container</label>
+        <SelectMenu id="term-container" v-model="container" label="Container" :disabled="state === 'open' || state === 'connecting'" :options="containerOptions" />
+      </div>
+      <div class="field inline">
+        <label for="term-shell">Shell</label>
+        <SelectMenu id="term-shell" v-model="shell" label="Shell" :disabled="state === 'open' || state === 'connecting'" :options="SHELLS.map((s) => ({ value: s, label: s }))" />
+      </div>
       <button
         v-if="state !== 'open'"
         class="primary"
@@ -198,7 +198,7 @@ onBeforeUnmount(teardown);
       </button>
       <button v-else @click="disconnect">Close shell</button>
       <span class="grow" />
-      <span v-if="state === 'open'" class="badge ok"><span class="dot pulse" />connected</span>
+      <span v-if="state === 'open'" class="badge ok"><span class="dot pulse" />Connected</span>
     </div>
 
     <p v-if="!running.length && !loadError" class="hint">Nothing is running.</p>
diff --git a/docs/ui-rules.md b/docs/ui-rules.md
index fea0fe5..f74a8a4 100644
--- a/docs/ui-rules.md
+++ b/docs/ui-rules.md
@@ -90,7 +90,38 @@ What caps itself instead:
 - A destructive row action uses `ActionButton`'s `confirm`: the first click arms it, the label
   becomes the question, the second click acts. Not `window.confirm` (a native panel this app avoids
   everywhere else) and not a modal (page-blocking for a decision already on screen).
-- A disabled control carries `title` saying **why** it is disabled.
+- A blocked control says **why**, in text a keyboard or screen-reader user can reach. `title` alone
+  does not: a natively `disabled` button leaves the tab order, so its tooltip is mouse-only. Use
+  `ActionButton`'s handling — `aria-disabled` plus a described reason — or put the reason beside the
+  control. A `title` is a supplement, never the only copy of the reason.
+
+## Accessibility
+
+These are the rules the drift kept finding a way around. Each one is here because it broke.
+
+- **One focus ring, and nothing may delete it.** `:focus-visible` sets `box-shadow: var(--ring)`
+  globally. A class selector with a bare `box-shadow: none` has EQUAL specificity and, declared
+  later, silently wins — that is exactly how every ghost button, container-list row and command
+  palette row lost its ring. If a control must drop its shadow, scope it: `.x:not(:focus-visible)`.
+- **Dialogs use reka's `DialogRoot`/`DialogPortal`/`DialogOverlay`/`DialogContent`.** Never a
+  hand-rolled scrim with `role="dialog" aria-modal="true"` — that attribute promises a focus trap,
+  focus restore on close, a scroll lock and Escape, and hand-rolled versions delivered none of them.
+- **Error text reaches assistive tech or it does not exist.** Use `ErrorNote` (it carries
+  `role="alert"`), or put `role="alert"` on the element yourself. Field-tied validation instead gets
+  an `id`, `aria-describedby` on the input, and `aria-invalid`.
+- **No ARIA is better than bad ARIA.** `role="tab"` promises an APG keyboard contract; two toggle
+  buttons want `aria-pressed`. A `role="tooltip"` nothing references via `aria-describedby` does
+  nothing at all.
+- **Targets are at least 24×24.** A smaller visual box is fine — grow the target with a
+  `::after { inset: -Npx }` overlay rather than the box.
+- **A scroll container takes `tabindex="0"`.** Safari does not make overflow scrollers focusable, so
+  without it a mouse-free user cannot scroll a log.
+- **`display: block` on a table strips its roles.** `table.cards` card mode does exactly that, so
+  those tables assert `role="table"/"rowgroup"/"row"/"cell"` in markup — CSS cannot restore what
+  `display` removed.
+- **Contrast is measured, not judged.** Body text 4.5:1, large text and control boundaries 3:1, in
+  BOTH themes, against the surface the thing actually renders on. `--fg-mute` shipped for months at
+  3.2:1 in light because nobody computed it.
 
 ## Chrome