diff --git a/src/main/actions/SyncPublisherStatsAction.ts b/src/main/actions/SyncPublisherStatsAction.ts
index d587197..1f149af 100644
--- a/src/main/actions/SyncPublisherStatsAction.ts
+++ b/src/main/actions/SyncPublisherStatsAction.ts
@@ -1,3 +1,4 @@
+import { describeStatsFailure, type PublisherStatsProblem } from '../services/publisherStatsProblem.js';
 import axios from 'axios';
 import { BaseAction } from './BaseAction.js';
 import { AppDataSource } from '../data-source.js';
@@ -34,8 +35,19 @@ export interface SyncPublisherStatsOutput {
    * will recommend deleting the whole library the first time it runs.
    */
   countingSince: string | null;
+  /**
+   * Why there are no numbers, when there are none for a reason.
+   *
+   * This used to answer every failure with zeros, which is the one answer that
+   * cannot be told from an empty publisher: a server that was off, a wrong
+   * address, a token that no longer matched and a container older than the
+   * counter all drew "0 published, 0 B" and the page's own "could not reach"
+   * state never appeared. Null when the publisher answered.
+   */
+  problem: PublisherStatsProblem | null;
 }
 
+
 /**
  * Bring the publisher's view counts back onto the rows.
  *
@@ -60,6 +72,7 @@ export class SyncPublisherStatsAction extends BaseAction<void, SyncPublisherStat
       updated: 0,
       totals: { clips: 0, bytes: 0, views: 0 },
       countingSince: null,
+      problem: null,
     };
 
     const baseUrl = publisherBaseUrl();
@@ -92,7 +105,7 @@ export class SyncPublisherStatsAction extends BaseAction<void, SyncPublisherStat
           error instanceof Error ? error.message : String(error),
         );
       }
-      return empty;
+      return { ...empty, problem: describeStatsFailure(status, baseUrl) };
     }
 
     const stats = new Map((payload.clips ?? []).map((stat) => [stat.filename, stat]));
@@ -108,6 +121,7 @@ export class SyncPublisherStatsAction extends BaseAction<void, SyncPublisherStat
         updated: 0,
         totals: payload.totals ?? empty.totals,
         countingSince: payload.countingSince ?? null,
+        problem: null,
       };
     }
 
@@ -134,6 +148,7 @@ export class SyncPublisherStatsAction extends BaseAction<void, SyncPublisherStat
       updated,
       totals: payload.totals ?? empty.totals,
       countingSince: payload.countingSince ?? null,
+      problem: null,
     };
   }
 }
diff --git a/src/main/services/publisherStatsProblem.ts b/src/main/services/publisherStatsProblem.ts
new file mode 100644
index 0000000..05eeb9c
--- /dev/null
+++ b/src/main/services/publisherStatsProblem.ts
@@ -0,0 +1,31 @@
+/** Why the publisher gave no numbers. */
+export interface PublisherStatsProblem {
+  kind: 'unreachable' | 'unauthorized' | 'outdated';
+  /** A sentence for the page, in the reader's words rather than the HTTP client's. */
+  message: string;
+}
+
+/** What a failed stats request means, for somebody who has not read the code. */
+export function describeStatsFailure(status: number | undefined, baseUrl: string): PublisherStatsProblem {
+  if (status === 404) {
+    return {
+      kind: 'outdated',
+      message:
+        'Your publisher is older than the view counter, so it has nothing to report yet. ' +
+        'Update its container and this page fills in.',
+    };
+  }
+  if (status === 401 || status === 403 || status === 503) {
+    return {
+      kind: 'unauthorized',
+      message:
+        status === 503
+          ? 'The publisher has no PUBLISH_TOKEN set, so it refuses to say what it holds.'
+          : 'The publisher refused the token. It has to match PUBLISH_TOKEN on the server.',
+    };
+  }
+  return {
+    kind: 'unreachable',
+    message: `Nothing answered at ${baseUrl}. The server may be off, or the address may be wrong.`,
+  };
+}
diff --git a/src/renderer/src/components/Editor/TimelineClipMarks.vue b/src/renderer/src/components/Editor/TimelineClipMarks.vue
index b989df4..10e548a 100644
--- a/src/renderer/src/components/Editor/TimelineClipMarks.vue
+++ b/src/renderer/src/components/Editor/TimelineClipMarks.vue
@@ -64,14 +64,18 @@ const laneHeightPercent = 100 / MAX_BAND_LANES;
 
 <template>
   <!--
-    Along the bottom edge, above the duration label's line but below the
-    controls, and never taking a pointer: the block underneath is draggable on
+    Along the bottom edge, on a ground of its own, and never taking a pointer.
+    It was a six pixel strip split three ways straight over the thumbnail
+    strip, so one mark was a two pixel line that disappeared into whatever
+    frame happened to be under it; twelve pixels on the card colour make each
+    row four and legible over any picture. The duration label sits above it.
+    Never taking a pointer: the block underneath is draggable on
     its whole surface and a band that swallowed a mousedown would make part of
     the clip unmovable.
   -->
   <div
     v-if="bands.length"
-    class="absolute left-0 right-0 bottom-0 h-1.5 pointer-events-none"
+    class="absolute left-0 right-0 bottom-0 h-3 bg-card/80 pointer-events-none"
     aria-hidden="true"
   >
     <div
diff --git a/src/renderer/src/components/Editor/TimelineTrack.vue b/src/renderer/src/components/Editor/TimelineTrack.vue
index 2582a19..05ee35c 100644
--- a/src/renderer/src/components/Editor/TimelineTrack.vue
+++ b/src/renderer/src/components/Editor/TimelineTrack.vue
@@ -182,7 +182,8 @@ onBeforeUnmount(stopDrag);
       </span>
 
       <span
-        class="absolute left-2 bottom-1 font-mono text-[10.5px] text-muted-600 pointer-events-none"
+        class="absolute left-2 font-mono text-[10.5px] text-muted-600 pointer-events-none"
+        :class="clip.goodBits?.length ? 'bottom-3.5' : 'bottom-1'"
       >
         {{ formatTime(clip.duration) }}
       </span>
@@ -201,7 +202,8 @@ onBeforeUnmount(stopDrag);
       <Icon
         v-if="clip.muted"
         icon="material-symbols:volume-off"
-        class="absolute right-2 bottom-1 size-3.5 block text-muted-500 pointer-events-none"
+        class="absolute right-2 size-3.5 block text-muted-500 pointer-events-none"
+        :class="clip.goodBits?.length ? 'bottom-3.5' : 'bottom-1'"
       />
 
       <button
diff --git a/src/renderer/src/components/Publish/PublisherClipRow.vue b/src/renderer/src/components/Publish/PublisherClipRow.vue
index 0189b7b..f789bc0 100644
--- a/src/renderer/src/components/Publish/PublisherClipRow.vue
+++ b/src/renderer/src/components/Publish/PublisherClipRow.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { MOTION } from '@renderer/components/Base/geometry';
+import { Icon } from '@iconify/vue';
+import { FOCUS_RING, MOTION } from '@renderer/components/Base/geometry';
 import { thumbnailUrl } from '@renderer/utils/mediaUrl';
 import { useFormat } from '@renderer/composables/ui/useFormat';
 import { formatRelativeTime } from '@renderer/helpers/dateFormat';
@@ -17,9 +18,15 @@ import type { Clip } from '@renderer/types/clip';
 interface Props {
   clip: Clip;
   selected?: boolean;
+  /**
+   * Off means the row cannot be picked at all. "Most opened" is there to be
+   * read, not cleaned up: offering to unpublish the links people actually watch
+   * put a checkbox on the one list where pressing it is the wrong idea.
+   */
+  selectable?: boolean;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), { selectable: true });
 const emit = defineEmits<{ (e: 'toggle'): void }>();
 
 const { formatBytes } = useFormat();
@@ -43,27 +50,44 @@ const watched = computed(() => {
   return {
     label: String(views),
     hint: props.clip.publisherLastViewedAt
-      ? `last ${formatRelativeTime(props.clip.publisherLastViewedAt)}`
+      ? `last opened ${formatRelativeTime(props.clip.publisherLastViewedAt)}`
       : '',
   };
 });
 </script>
 
 <template>
-  <label
+  <!--
+    A label when it can be picked, so pressing anywhere on the row picks it,
+    and a plain row when it cannot. The checkbox is the app's own drawing over
+    a visually hidden input: a native one is painted by Chromium in white on
+    the dark palette and matched nothing else on the screen.
+  -->
+  <component
+    :is="selectable ? 'label' : 'div'"
     :class="[
-      'grid grid-cols-[1.25rem_4rem_1fr_auto_auto] items-center gap-3 px-2 py-2 rounded-md cursor-pointer',
+      'grid items-center gap-3 px-2 py-2 rounded-md',
+      selectable ? 'grid-cols-[1.25rem_4rem_1fr_auto_auto] cursor-pointer' : 'grid-cols-[4rem_1fr_auto_auto]',
       MOTION,
-      selected ? 'bg-accent-sunk' : 'hover:bg-muted-50',
+      selected ? 'bg-accent-sunk' : selectable ? 'hover:bg-muted-50' : '',
     ]"
   >
-    <input
-      type="checkbox"
-      class="size-4"
-      :checked="selected"
-      :aria-label="`Select ${title}`"
-      @change="emit('toggle')"
-    />
+    <span v-if="selectable" class="relative inline-flex size-5 items-center justify-center">
+      <input
+        type="checkbox"
+        :class="['peer absolute inset-0 opacity-0 cursor-pointer', FOCUS_RING]"
+        :checked="selected"
+        :aria-label="`Select ${title}`"
+        @change="emit('toggle')"
+      />
+      <Icon
+        :icon="selected ? 'material-symbols:check-box' : 'material-symbols:check-box-outline-blank'"
+        :class="[
+          'size-5 block pointer-events-none rounded-sm peer-focus-visible:focus-ring',
+          selected ? 'text-accent' : 'text-muted-400',
+        ]"
+      />
+    </span>
 
     <img
       :src="thumbnailUrl(clip.id)"
@@ -80,9 +104,9 @@ const watched = computed(() => {
       {{ formatBytes(clip.sizeBytes) }}
     </div>
 
-    <div class="w-28 text-right">
+    <div class="w-36 text-right">
       <div class="font-mono text-sm tabular-nums text-foreground">{{ watched.label }}</div>
       <div class="text-[11px] text-muted-400">{{ watched.hint }}</div>
     </div>
-  </label>
+  </component>
 </template>
diff --git a/src/renderer/src/components/Settings/PublisherCard.vue b/src/renderer/src/components/Settings/PublisherCard.vue
index 12e49ea..bbe8bd7 100644
--- a/src/renderer/src/components/Settings/PublisherCard.vue
+++ b/src/renderer/src/components/Settings/PublisherCard.vue
@@ -167,20 +167,27 @@ async function testPublisher(): Promise<void> {
       <p v-else-if="publisherState === 'unreachable'" class="!mt-2 !text-danger-ink">
         No answer from that address.
       </p>
-    </div>
 
-    <!--
-      A different question from compressing a trim, which is why it is a
-      different switch and now on a different page: what goes to a public link
-      is a copy, so shrinking it costs nothing on disk. Hidden when there is no
-      publisher, since a setting for a feature you do not have is noise.
-    -->
-    <SettingToggle
-      v-if="settings.publisherBaseUrl"
-      label="Compress clips when publishing"
-      description="The file on disk is untouched; only the copy behind the public link is re-encoded, so it downloads in a fifth of the time. Off uploads the recording as it is."
-      :model-value="settings.compressPublished !== false"
-      @update:model-value="saveCompressPublished($event)"
-    />
+      <!--
+        Inside the card, so the hairline under the card is under this too. It
+        sat outside it, which put the Claude heading straight under its
+        description with no rule between two unrelated things.
+      -->
+      <div class="mt-3">
+        <!--
+          A different question from compressing a trim, which is why it is a
+          different switch and now on a different page: what goes to a public link
+          is a copy, so shrinking it costs nothing on disk. Hidden when there is no
+          publisher, since a setting for a feature you do not have is noise.
+        -->
+        <SettingToggle
+          v-if="settings.publisherBaseUrl"
+          label="Compress clips when publishing"
+          description="The file on disk is untouched; only the copy behind the public link is re-encoded, so it downloads in a fifth of the time. Off uploads the recording as it is."
+          :model-value="settings.compressPublished !== false"
+          @update:model-value="saveCompressPublished($event)"
+        />
+      </div>
+    </div>
   </div>
 </template>
diff --git a/src/renderer/src/components/Settings/RecordingSettings.vue b/src/renderer/src/components/Settings/RecordingSettings.vue
index 932fbf4..dd0c1f0 100644
--- a/src/renderer/src/components/Settings/RecordingSettings.vue
+++ b/src/renderer/src/components/Settings/RecordingSettings.vue
@@ -399,8 +399,18 @@ function openGuide(): void {
           <p class="text-sm text-muted-500 max-w-[62ch]">
             OBS is still recording at
             <span class="text-foreground">{{ qualityInObs ?? 'something else' }}</span
-            >. This lands the next time the setup is written, which cannot happen while OBS is
-            open.
+            >.
+            <!--
+              Two sentences, because the way to finish it depends on whether OBS
+              is running. It used to say "cannot happen while OBS is open" when
+              OBS was closed and the button beside it would write it right now.
+            -->
+            <template v-if="status?.running">
+              GoodBit cannot change it while OBS is open, so close OBS and write it then.
+            </template>
+            <template v-else>
+              Write it to OBS and the next recording uses it.
+            </template>
           </p>
         </div>
         <BaseButton
diff --git a/src/renderer/src/components/Storage/BurstCluster.vue b/src/renderer/src/components/Storage/BurstCluster.vue
index 2c51cba..84a4eaf 100644
--- a/src/renderer/src/components/Storage/BurstCluster.vue
+++ b/src/renderer/src/components/Storage/BurstCluster.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import BasePanel from '@renderer/components/Base/BasePanel.vue';
 import { computed } from 'vue';
-import { Icon } from '@iconify/vue';
-import { ICON_BOX, SECTION_HEADER } from '@renderer/components/Base/geometry';
+import { SECTION_HEADER } from '@renderer/components/Base/geometry';
 import BaseButton from '@renderer/components/Base/BaseButton.vue';
 import StorageClipTile from './StorageClipTile.vue';
 import { useFormat } from '@renderer/composables/ui/useFormat';
@@ -83,11 +82,11 @@ const publishedDoomed = computed(() => doomed.value.filter((clip) => clip.publis
 
       <BaseButton
         tone="danger"
+        icon="material-symbols:delete-outline"
         class="ml-auto"
         :disabled="deleting || doomed.length === 0"
         @click="emit('delete', doomed)"
       >
-        <Icon icon="material-symbols:delete-outline" :class="ICON_BOX" />
         Delete the other {{ doomed.length }}
       </BaseButton>
     </div>
diff --git a/src/renderer/src/components/Storage/BurstSection.vue b/src/renderer/src/components/Storage/BurstSection.vue
index 3d48c70..63d96e7 100644
--- a/src/renderer/src/components/Storage/BurstSection.vue
+++ b/src/renderer/src/components/Storage/BurstSection.vue
@@ -54,7 +54,15 @@ const emit = defineEmits<{
     </BaseEmptyState>
 
     <template v-else>
-      <ReclaimSummary :bytes="data.reclaimableBytes" :clips="data.totalClips" />
+      <!--
+        The clips that would go, not every clip in a burst: keeping one of each
+        is the point, so "1.2 MB across 3 clips" about three saves of which two
+        go was a count of the wrong thing.
+      -->
+      <ReclaimSummary
+        :bytes="data.reclaimableBytes"
+        :clips="data.totalClips - data.clusters.length"
+      />
 
       <div class="mt-6 space-y-4">
         <BurstClusterCard
diff --git a/src/renderer/src/components/Storage/GraveyardSection.vue b/src/renderer/src/components/Storage/GraveyardSection.vue
index 96af79d..ce0b7df 100644
--- a/src/renderer/src/components/Storage/GraveyardSection.vue
+++ b/src/renderer/src/components/Storage/GraveyardSection.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Icon } from '@iconify/vue';
-import { ICON_BOX, SECTION_HEADER } from '@renderer/components/Base/geometry';
+import { computed } from 'vue';
+import { SECTION_HEADER } from '@renderer/components/Base/geometry';
 import BaseButton from '@renderer/components/Base/BaseButton.vue';
 import BaseEmptyState from '@renderer/components/Base/BaseEmptyState.vue';
 import StorageClipTile from './StorageClipTile.vue';
@@ -39,6 +39,14 @@ const emit = defineEmits<{
 
 const { formatBytes } = useFormat();
 
+/** What the ticked clips weigh, for the bar that deletes them. */
+const selectedBytes = computed(() =>
+  (props.data?.groups ?? [])
+    .flatMap((group) => group.clips)
+    .filter((clip) => props.selected.has(clip.id))
+    .reduce((sum, clip) => sum + (clip.sizeBytes ?? 0), 0),
+);
+
 function groupSelected(clips: Clip[]): boolean {
   return clips.length > 0 && clips.every((clip) => props.selected.has(clip.id));
 }
@@ -107,10 +115,9 @@ function groupSelected(clips: Clip[]): boolean {
       </div>
 
       <!--
-        The delete, written here beside the sentence explaining what it
-        destroys rather than reached for from a shared danger token. There is
-        deliberately no danger button in `geometry.ts` for exactly that reason:
-        making one easy to reach for is how it ends up on the wrong button.
+        The delete, outlined in danger and never filled, and it says how much
+        it frees as well as how many: the whole screen is about space, and the
+        count alone made somebody add up sizes by eye.
       -->
       <div
         v-if="selected.size"
@@ -118,14 +125,17 @@ function groupSelected(clips: Clip[]): boolean {
       >
         <span class="text-sm text-foreground">
           {{ selected.size }} selected
+          <span class="font-mono text-xs tabular-nums text-muted-500">
+            · {{ formatBytes(selectedBytes) }}
+          </span>
         </span>
         <BaseButton
           tone="danger"
+          icon="material-symbols:delete-outline"
           class="ml-auto"
           :disabled="deleting"
           @click="emit('delete')"
         >
-          <Icon icon="material-symbols:delete-outline" :class="ICON_BOX" />
           Delete selected
         </BaseButton>
       </div>
diff --git a/src/renderer/src/components/Storage/StorageClipTile.vue b/src/renderer/src/components/Storage/StorageClipTile.vue
index f09a6a5..c822d2d 100644
--- a/src/renderer/src/components/Storage/StorageClipTile.vue
+++ b/src/renderer/src/components/Storage/StorageClipTile.vue
@@ -52,20 +52,37 @@ const title = computed(() => props.clip.displayName?.trim() || props.clip.filena
   <button
     type="button"
     :class="[
-      'group relative block w-full text-left rounded-md overflow-hidden border',
+      'group relative block w-full text-left rounded-md overflow-hidden border border-border',
       FOCUS_RING,
       MOTION,
+      /*
+       * Picked is a ring, painted as a shadow outside the box, rather than a
+       * border colour: a one pixel hairline turning red was the only sign a
+       * tile had been picked, and across a grid of forty it did not read.
+       */
       keeper
-        ? 'border-accent'
+        ? 'ring-2 ring-accent'
         : selected
-          ? 'border-danger'
-          : 'border-border hover:border-line-strong',
+          ? 'ring-2 ring-danger'
+          : 'hover:border-line-strong',
     ]"
     :aria-pressed="mode === 'keep' ? keeper : selected"
     @click="emit('toggle')"
   >
     <div class="aspect-21/9 bg-video-bed relative">
-      <img :src="thumbnailUrl(clip.id)" :alt="title" class="size-full object-cover" />
+      <!--
+        The ones about to go are dimmed, so the one being kept is the picture
+        the eye lands on. Opacity only, which is the one property allowed to
+        move with a state.
+      -->
+      <img
+        :src="thumbnailUrl(clip.id)"
+        :alt="title"
+        :class="[
+          'size-full object-cover transition-opacity duration-150',
+          mode === 'keep' && !keeper ? 'opacity-50' : '',
+        ]"
+      />
 
       <!--
         The one thing that reaches outside this machine. A published clip has a
@@ -101,16 +118,22 @@ const title = computed(() => props.clip.displayName?.trim() || props.clip.filena
         />
         {{ keeper ? 'Keeping' : 'Deleting' }}
       </BaseChip>
-      <Icon
+      <!--
+        On a scrim of its own. White on the frame vanished into every bright
+        thumbnail, which is a lot of them: the box to press was the one thing on
+        the tile that could not always be seen.
+      -->
+      <span
         v-else
-        :icon="
-          selected ? 'material-symbols:check-box' : 'material-symbols:check-box-outline-blank'
-        "
-        :class="[
-          'absolute top-1.5 left-1.5 size-5 block drop-shadow',
-          selected ? 'text-danger' : 'text-on-video',
-        ]"
-      />
+        class="absolute top-1.5 left-1.5 inline-flex rounded-sm bg-scrim p-0.5"
+      >
+        <Icon
+          :icon="
+            selected ? 'material-symbols:check-box' : 'material-symbols:check-box-outline-blank'
+          "
+          :class="['size-5 block', selected ? 'text-danger' : 'text-on-video']"
+        />
+      </span>
     </div>
 
     <div class="px-2 py-1.5">
diff --git a/src/renderer/src/composables/clips/usePublisherStats.ts b/src/renderer/src/composables/clips/usePublisherStats.ts
index f54a852..a3ad7bc 100644
--- a/src/renderer/src/composables/clips/usePublisherStats.ts
+++ b/src/renderer/src/composables/clips/usePublisherStats.ts
@@ -32,6 +32,7 @@ export function usePublisherStats() {
   const clips = ref<Clip[]>([]);
   const loading = ref(false);
   const error = ref<string | null>(null);
+  const problem = ref<PublisherStats['problem']>(null);
 
   const configured = computed(() => Boolean(settings.value.publisherBaseUrl));
 
@@ -49,8 +50,19 @@ export function usePublisherStats() {
        * to ask again: a second fetch would draw yesterday's numbers first and
        * then change them under the reader.
        */
-      stats.value = await syncPublisherStats();
-      clips.value = stats.value.clips ?? [];
+      const answer = await syncPublisherStats();
+      // A publisher that did not answer is said so, not drawn as an empty one:
+      // "0 published" about a server that was off is a wrong number.
+      if (answer.problem) {
+        stats.value = null;
+        clips.value = [];
+        problem.value = answer.problem;
+        error.value = answer.problem.message;
+        return;
+      }
+      problem.value = null;
+      stats.value = answer;
+      clips.value = answer.clips ?? [];
     } catch (cause) {
       error.value = cause instanceof Error ? cause.message : String(cause);
     } finally {
@@ -129,6 +141,7 @@ export function usePublisherStats() {
     clips,
     loading,
     error,
+    problem,
     configured,
     warmedUp,
     daysUntilWarm,
diff --git a/src/renderer/src/services/clips.ts b/src/renderer/src/services/clips.ts
index a0997c8..db2cc08 100644
--- a/src/renderer/src/services/clips.ts
+++ b/src/renderer/src/services/clips.ts
@@ -273,6 +273,8 @@ export interface PublisherStats {
   totals: { clips: number; bytes: number; views: number };
   /** When the publisher started counting. Null means it never has. */
   countingSince: string | null;
+  /** Why there are no numbers, when the publisher did not answer. */
+  problem: { kind: 'unreachable' | 'unauthorized' | 'outdated'; message: string } | null;
 }
 
 /**
diff --git a/src/renderer/src/views/PublisherPage.vue b/src/renderer/src/views/PublisherPage.vue
index c55cd69..646c535 100644
--- a/src/renderer/src/views/PublisherPage.vue
+++ b/src/renderer/src/views/PublisherPage.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
-import { Icon } from '@iconify/vue';
-import { ICON_BOX, SECTION_HEADER } from '@renderer/components/Base/geometry';
+import { SECTION_HEADER } from '@renderer/components/Base/geometry';
 import BaseButton from '@renderer/components/Base/BaseButton.vue';
 import BaseEmptyState from '@renderer/components/Base/BaseEmptyState.vue';
 import { useRouter } from 'vue-router';
@@ -48,6 +47,18 @@ function openPublisherSettings(): void {
  * reader's own domain and paths into every command. Same address the
  * Publisher card in Settings links to.
  */
+/** The heading and glyph for each way the publisher can fail to answer. */
+const problemView = computed(() => {
+  switch (saver.problem.value?.kind) {
+    case 'outdated':
+      return { title: 'This publisher cannot count yet', icon: 'material-symbols:update' };
+    case 'unauthorized':
+      return { title: 'The publisher refused the token', icon: 'material-symbols:lock-outline' };
+    default:
+      return { title: 'Could not reach the publisher', icon: 'material-symbols:cloud-off-outline' };
+  }
+});
+
 function openGuide(): void {
   void window.goodbit?.openExternal('https://darrellvs.github.io/goodbit/publisher.html');
 }
@@ -115,7 +126,7 @@ function unpublishSelected(): void {
 </script>
 
 <template>
-  <div class="space-y-8 pb-16">
+  <div class="px-12 py-6 space-y-8 pb-16">
     <!--
       No publisher is not an error. It is the ordinary state for anybody who
       has never set one up, and this screen is the only place that can say what
@@ -158,19 +169,27 @@ function unpublishSelected(): void {
         v-else-if="saver.error.value"
         size="panel"
         tone="warning"
-        icon="material-symbols:cloud-off-outline"
-        title="Could not reach the publisher"
+        :icon="problemView.icon"
+        :title="problemView.title"
         :description="saver.error.value"
       >
         <!--
-          Both ways out, because they are the two causes: the server is off or
-          asleep, which trying again fixes, or the address or token is wrong,
-          which only Settings can.
+          The way out depends on what went wrong. Off or asleep is fixed by
+          trying again; a wrong address or token only by Settings; an old
+          container only on the server, which the guide walks through.
         -->
         <template #actions>
           <BaseButton @click="saver.load()">Try again</BaseButton>
-          <BaseButton tone="quiet" @click="openPublisherSettings">
-            Check the address
+          <BaseButton
+            v-if="saver.problem.value?.kind === 'outdated'"
+            tone="quiet"
+            icon="material-symbols:open-in-new"
+            @click="openGuide"
+          >
+            How to update it
+          </BaseButton>
+          <BaseButton v-else tone="quiet" @click="openPublisherSettings">
+            {{ saver.problem.value?.kind === 'unauthorized' ? 'Check the token' : 'Check the address' }}
           </BaseButton>
         </template>
       </BaseEmptyState>
@@ -248,8 +267,7 @@ function unpublishSelected(): void {
               v-for="clip in saver.mostWatched.value.slice(0, 10)"
               :key="clip.id"
               :clip="clip"
-              :selected="selected.has(clip.id)"
-              @toggle="toggle(clip.id)"
+              :selectable="false"
             />
           </div>
         </section>
@@ -268,10 +286,10 @@ function unpublishSelected(): void {
           </span>
           <BaseButton
             class="ml-auto"
+            icon="material-symbols:cloud-off-outline"
             :disabled="working"
             @click="unpublishSelected"
           >
-            <Icon icon="material-symbols:cloud-off-outline" :class="ICON_BOX" />
             Take off the publisher
           </BaseButton>
         </div>
diff --git a/src/renderer/src/views/StorageSaverPage.vue b/src/renderer/src/views/StorageSaverPage.vue
index f9d395e..69a67ac 100644
--- a/src/renderer/src/views/StorageSaverPage.vue
+++ b/src/renderer/src/views/StorageSaverPage.vue
@@ -51,7 +51,7 @@ function toggleGroup(game: string): void {
 </script>
 
 <template>
-  <div class="space-y-10 pb-16">
+  <div class="px-12 py-6 space-y-10 pb-16">
     <p v-if="saver.error.value" class="text-sm text-danger-ink">{{ saver.error.value }}</p>
 
     <GraveyardSection
diff --git a/tests/e2e/screens.spec.ts b/tests/e2e/screens.spec.ts
index 9726f40..96c90cd 100644
--- a/tests/e2e/screens.spec.ts
+++ b/tests/e2e/screens.spec.ts
@@ -262,6 +262,78 @@ test.describe('layout', () => {
     expect(overflow.sidebarOverflow).toBeLessThanOrEqual(1);
   });
 
+  /*
+   * Every page carries its own gutter on its root, `px-12`, and the page
+   * header above it is inset by the same amount. Storage Saver and Publisher
+   * shipped without it: the title was inset and every panel, heading and tile
+   * under it ran flush from the sidebar to the window edge. Nothing measured
+   * that, because nothing on those pages overflowed or changed size.
+   *
+   * So: whatever paints inside the page, text or a hairline, sits within the
+   * header's inset on both sides.
+   */
+  test('a page keeps the gutter its header has', async () => {
+    const paged = ROUTES.filter((r) => !r.name.startsWith('settings') && r.name !== 'editor');
+    for (const route of paged) {
+      await ctx.page.evaluate((h) => {
+        window.location.hash = h;
+      }, route.hash);
+      await ctx.page.waitForTimeout(1200);
+
+      const found = await ctx.page.evaluate(() => {
+        const main = document.querySelector('main');
+        // The page header sits above `main`, in the layout, not inside the page.
+        const title = document.querySelector('h1');
+        if (!main || !title) return { inspected: 0, outside: [] as string[] };
+        const box = main.getBoundingClientRect();
+        const inset = title.getBoundingClientRect().left - box.left;
+        const left = box.left + inset - 1;
+        // The scrollbar lives inside `main` and is not the page's to pad.
+        const right = box.left + main.clientWidth - inset + 1;
+
+        const outside: string[] = [];
+        let inspected = 0;
+        for (const el of main.querySelectorAll<HTMLElement>('*')) {
+          const r = el.getBoundingClientRect();
+          if (r.width < 1 || r.height < 1) continue;
+          const style = getComputedStyle(el);
+          if (style.visibility === 'hidden' || Number(style.opacity) === 0) continue;
+          const hasText = [...el.childNodes].some(
+            (n) => n.nodeType === Node.TEXT_NODE && n.textContent!.trim(),
+          );
+          // A border counts only when it can be seen: the clip name field is
+          // outset on purpose with a transparent one, so its text lines up.
+          const seen = (width: string, colour: string) =>
+            parseFloat(width) > 0 && !/rgba\([^)]*,\s*0\)|transparent/.test(colour);
+          const hasBorder =
+            seen(style.borderLeftWidth, style.borderLeftColor) ||
+            seen(style.borderRightWidth, style.borderRightColor);
+          if (!hasText && !hasBorder) continue;
+          // Today's carousel scrolls sideways, so its later tiles are past the
+          // edge by design. Something a scroller inside the page clips is that
+          // scroller's business; the scroller itself is still measured.
+          let clipped = false;
+          for (let up = el.parentElement; up && up !== main; up = up.parentElement) {
+            if (getComputedStyle(up).overflowX === 'visible') continue;
+            const c = up.getBoundingClientRect();
+            if (r.left < c.left - 1 || r.right > c.right + 1) clipped = true;
+            break;
+          }
+          if (clipped) continue;
+          inspected++;
+          if (r.left < left || r.right > right) {
+            outside.push(`${el.tagName.toLowerCase()} "${(el.textContent ?? '').trim().slice(0, 40)}" at ${Math.round(r.left)}..${Math.round(r.right)}, gutter ${Math.round(left)}..${Math.round(right)}`);
+          }
+        }
+        return { inspected, outside: outside.slice(0, 5) };
+      });
+
+      // An empty walk and a clean walk look the same; this page drew something.
+      expect(found.inspected, `${route.name}: nothing inspected`).toBeGreaterThan(3);
+      expect(found.outside, `${route.name} runs past its gutter`).toEqual([]);
+    }
+  });
+
   test('no screen is taller than the window', async () => {
     // The two routes that need a clip id are the two most likely to overflow:
     // both put a video on the page, and a video is as tall as it is asked to
diff --git a/tests/unit/main/publisherStatsProblem.spec.ts b/tests/unit/main/publisherStatsProblem.spec.ts
new file mode 100644
index 0000000..2c3992d
--- /dev/null
+++ b/tests/unit/main/publisherStatsProblem.spec.ts
@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest';
+import { describeStatsFailure } from '../../../src/main/services/publisherStatsProblem';
+
+/*
+ * Every failure used to come back as zeros, which reads as an empty publisher.
+ * Each one now names itself, and the page picks its way out from the kind.
+ */
+describe('describeStatsFailure', () => {
+  it('reads no answer at all as unreachable, and names the address', () => {
+    const problem = describeStatsFailure(undefined, 'http://localhost:4199');
+    expect(problem.kind).toBe('unreachable');
+    expect(problem.message).toContain('http://localhost:4199');
+  });
+
+  it('reads a 404 as a publisher older than the counter', () => {
+    expect(describeStatsFailure(404, 'x').kind).toBe('outdated');
+  });
+
+  it('reads a refused token as unauthorized', () => {
+    expect(describeStatsFailure(401, 'x').kind).toBe('unauthorized');
+    expect(describeStatsFailure(403, 'x').kind).toBe('unauthorized');
+  });
+
+  it('says so when the server has no token at all', () => {
+    const problem = describeStatsFailure(503, 'x');
+    expect(problem.kind).toBe('unauthorized');
+    expect(problem.message).toContain('PUBLISH_TOKEN');
+  });
+
+  it('reads a server error as unreachable rather than as a token problem', () => {
+    expect(describeStatsFailure(500, 'x').kind).toBe('unreachable');
+  });
+});