diff --git a/configurator/src/App.svelte b/configurator/src/App.svelte
index d8308f17..72c0820f 100644
--- a/configurator/src/App.svelte
+++ b/configurator/src/App.svelte
@@ -67,6 +67,16 @@
   let previewMotion = $state<"normal" | "slow" | "none">("normal");
   let previewTemplate = $state<PreviewTemplate>("color");
 
+  // Lifecycle / reference tools have no live visual sample, so the preview used
+  // to sit there showing an irrelevant Color gallery over half the screen.
+  // For these the preview is hidden and the panel takes the full width instead.
+  // (Accessibility keeps the preview — its contrast checker reads the rendered
+  // colours from the iframe.)
+  const FULLWIDTH_DOMAINS = new Set(["changes", "themes", "setup", "cheatsheet"]);
+  let hidePreview = $derived(FULLWIDTH_DOMAINS.has(domain));
+  // A tool screen has nothing to fold to, so keep the mobile view on controls.
+  $effect(() => { if (hidePreview) untrack(() => { mobileView = "controls"; }); });
+
   // Derived
   let overridesCount = $derived(Object.keys(overrides).length);
   let domainBadges = $derived(overridesByDomain(overrides));
@@ -317,11 +327,14 @@
 
   <!-- Mobile fold toggle: switch between the controls panel and the live
        preview. Lives right under the header (not at the bottom) so it's
-       visible without scrolling and doesn't compete with the status bar. -->
-  <div class="md:hidden flex items-stretch border-b border-black/8 dark:border-white/8 bg-slate-50 dark:bg-[#0d0d14] shrink-0">
-    {@render foldToggleButton("controls", SlidersHorizontal, "Controls")}
-    {@render foldToggleButton("preview", Eye, "Preview")}
-  </div>
+       visible without scrolling and doesn't compete with the status bar.
+       Hidden on tool screens, which have no preview to fold to. -->
+  {#if !hidePreview}
+    <div class="md:hidden flex items-stretch border-b border-black/8 dark:border-white/8 bg-slate-50 dark:bg-[#0d0d14] shrink-0">
+      {@render foldToggleButton("controls", SlidersHorizontal, "Controls")}
+      {@render foldToggleButton("preview", Eye, "Preview")}
+    </div>
+  {/if}
 
   <!-- Main body: sidebar + left panel + preview -->
   <div class="flex flex-1 min-h-0">
@@ -329,15 +342,17 @@
     <div class={`shrink-0 ${mobileView === "preview" ? "hidden md:flex" : "flex"}`}>
       <SidebarNav
         activeId={domain}
-        onSelect={(d) => { domain = d; }}
+        onSelect={(d) => { domain = d; focusRequest = null; }}
         overridesByDomain={domainBadges}
       />
     </div>
 
-    <!-- Left domain panel — fills remaining row width on mobile (the icon
-         rail above already claims its own space, so w-full here would mean
-         100% of the whole row and overflow past it), fixed 360px on desktop -->
-    <div class={`flex-1 min-w-0 md:flex-none md:w-[360px] bg-slate-50 dark:bg-[#0c0c15] border-r border-black/8 dark:border-white/8 flex-col min-h-0 ${mobileView === "preview" ? "hidden md:flex" : "flex"}`}>
+    <!-- Left domain panel — fixed 360px alongside the preview, but full width
+         on tool screens where the preview is hidden. On mobile it fills the row
+         (the icon rail already claims its own space). -->
+    <div class={`min-w-0 bg-slate-50 dark:bg-[#0c0c15] border-r border-black/8 dark:border-white/8 flex-col min-h-0 ${
+      hidePreview ? "flex-1 flex" : `flex-1 md:flex-none md:w-[360px] ${mobileView === "preview" ? "hidden md:flex" : "flex"}`
+    }`}>
       <!-- Panel heading -->
       <div class="h-9 flex items-center px-4 border-b border-black/6 dark:border-white/6 shrink-0 gap-2">
         <span data-testid="panel-heading" class="text-[11px] font-bold text-slate-700 dark:text-slate-300 uppercase tracking-widest flex-1">
@@ -367,26 +382,30 @@
           onReset={handleReset}
           onBulkChange={handleBulkChange}
           onApplyTheme={handleApplyTheme}
-          onSelectDomain={(d) => { domain = d; }}
+          onSelectDomain={(d) => { domain = d; focusRequest = null; }}
           onResetAll={handleResetAll}
         />
       </div>
     </div>
 
-    <!-- Right: live preview — full screen on mobile when folded open -->
-    <div class={`flex-1 flex-col min-h-0 min-w-0 ${mobileView === "controls" ? "hidden md:flex" : "flex"}`}>
-      <PreviewPanel
-        {overrides}
-        {previewTheme}
-        {previewWidth}
-        {previewMotion}
-        {previewTemplate}
-        onThemeChange={(t) => { previewTheme = t; }}
-        onWidthChange={(w) => { previewWidth = w; }}
-        onMotionChange={(m) => { previewMotion = m; }}
-        onTemplateChange={(t) => { previewTemplate = t; }}
-      />
-    </div>
+    <!-- Right: live preview — full screen on mobile when folded open. Omitted
+         entirely on tool screens (Changes / Presets / Install & export /
+         Reference), which have no live sample. -->
+    {#if !hidePreview}
+      <div class={`flex-1 flex-col min-h-0 min-w-0 ${mobileView === "controls" ? "hidden md:flex" : "flex"}`}>
+        <PreviewPanel
+          {overrides}
+          {previewTheme}
+          {previewWidth}
+          {previewMotion}
+          {previewTemplate}
+          onThemeChange={(t) => { previewTheme = t; }}
+          onWidthChange={(w) => { previewWidth = w; }}
+          onMotionChange={(m) => { previewMotion = m; }}
+          onTemplateChange={(t) => { previewTemplate = t; }}
+        />
+      </div>
+    {/if}
   </div>
 
   <!-- Status bar -->
@@ -403,6 +422,7 @@
       onNavigate={(d, token) => {
         domain = d;
         if (token) { focusNonce += 1; focusRequest = { token, nonce: focusNonce }; }
+        else focusRequest = null;
         // On mobile, deep-linking into a token means we want the controls side.
         mobileView = "controls";
       }}
diff --git a/configurator/src/components/CommandPalette.svelte b/configurator/src/components/CommandPalette.svelte
index 708a5ac1..bbd9c555 100644
--- a/configurator/src/components/CommandPalette.svelte
+++ b/configurator/src/components/CommandPalette.svelte
@@ -102,7 +102,7 @@
         <div class="px-4 py-8 text-center text-[11px] text-slate-400 dark:text-slate-600">No matches for "{query}"</div>
       {:else}
         {#each results as r, i (r.kind === "nav" ? `nav:${r.id}` : `tok:${r.token.name}`)}
-          {#if i === 0}
+          {#if i === 0 && navCount > 0}
             <div class="px-4 pt-2 pb-1 text-[8px] font-bold uppercase tracking-widest text-slate-400 dark:text-slate-600">Go to</div>
           {/if}
           {#if r.kind === "token" && i === navCount}
diff --git a/configurator/src/components/panels/BordersPanel.svelte b/configurator/src/components/panels/BordersPanel.svelte
index 52c8bbb9..d7b3e6ec 100644
--- a/configurator/src/components/panels/BordersPanel.svelte
+++ b/configurator/src/components/panels/BordersPanel.svelte
@@ -5,6 +5,8 @@
   import ColorInput from '../inputs/ColorInput.svelte';
   import Section from '../inputs/Section.svelte';
   import { SPACE_SCALE, RADIUS_SCALE, BORDER_WIDTH_SCALE, type VarOption } from '../../lib/variableScales';
+  import ScaleShadowNotice from '../inputs/ScaleShadowNotice.svelte';
+  import { scaleShadows } from '../../lib/tokenModel';
 
   let { overrides, onSet, onReset }: {
     overrides: Record<string, string>;
@@ -56,6 +58,13 @@
   let dividerColor = $derived(overrides["--sf-divider-color"] ?? "");
   let mediaRadius  = $derived(parseNum(overrides["--sf-media-radius"]?.replace("rem",""), 0));
 
+  // Fixed per-step overrides that shadow the radius / border-width scale knobs
+  // (the same detached-scale state the Type & Spacing panels already warn about;
+  // generalised here via tokenModel.scaleShadows).
+  let radiusShadow = $derived(scaleShadows(overrides).find((s) => s.family.id === "radius")?.shadowedSteps ?? []);
+  let borderShadow = $derived(scaleShadows(overrides).find((s) => s.family.id === "border-width")?.shadowedSteps ?? []);
+  const clearSteps = (steps: string[]) => steps.forEach(onReset);
+
   function getStyleCurrent(tokenName: string, defaultVal: string): string {
     return overrides[tokenName] ?? defaultVal;
   }
@@ -98,6 +107,7 @@
 
   <!-- BORDER SCALE -->
   <Section title="Border widths" bind:open={showBorderWidths}>
+      <ScaleShadowNotice tokens={borderShadow} scaleLabel="border-width" onClear={() => clearSteps(borderShadow)} />
       <SliderRow
         label="Border scale" value={borderScale} min={0} max={4} step={0.25}
         help="Multiplier applied to all border widths. 0 hides all borders."
@@ -223,6 +233,7 @@
 
   <!-- RADIUS -->
   <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Radius</div>
+  <ScaleShadowNotice tokens={radiusShadow} scaleLabel="radius" onClear={() => clearSteps(radiusShadow)} />
 
   <!-- Fine-tune radius steps collapsible -->
   <div>
diff --git a/configurator/src/components/panels/MotionPanel.svelte b/configurator/src/components/panels/MotionPanel.svelte
index a8577fdc..efbdd3c5 100644
--- a/configurator/src/components/panels/MotionPanel.svelte
+++ b/configurator/src/components/panels/MotionPanel.svelte
@@ -4,6 +4,8 @@
   import SliderRow from '../inputs/SliderRow.svelte';
   import Toggle from '../inputs/Toggle.svelte';
   import Section from '../inputs/Section.svelte';
+  import ScaleShadowNotice from '../inputs/ScaleShadowNotice.svelte';
+  import { scaleShadows } from '../../lib/tokenModel';
   import { themeState } from '../../lib/theme.svelte';
 
   // <option> only reliably accepts a background via inline style (no dark:
@@ -62,6 +64,10 @@
   let demoDuration = $state("--sf-duration-normal");
 
   let showDurations = $state(false);
+
+  // Absolute per-duration overrides that shadow the global --sf-motion-scale
+  // knob (same detached-scale warning as Type/Spacing, via tokenModel).
+  let motionShadow = $derived(scaleShadows(overrides).find((s) => s.family.id === "motion")?.shadowedSteps ?? []);
   let showEasing = $state(false);
   let showStagger = $state(false);
   let showAdvanced = $state(false);
@@ -166,6 +172,7 @@
 
   <!-- DURATIONS (with inline preview) -->
   <Section title="Durations" bind:open={showDurations}>
+      <ScaleShadowNotice tokens={motionShadow} scaleLabel="duration" onClear={() => motionShadow.forEach(onReset)} />
       <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
         Named duration tokens. Drag to set an absolute ms value, overriding the global scale.
         {#if motionDisabled}<span class="text-amber-600 dark:text-amber-400"> (No effect while motion is disabled.)</span>{/if}