diff --git a/configurator/src/App.svelte b/configurator/src/App.svelte
index a86c6827..ad073452 100644
--- a/configurator/src/App.svelte
+++ b/configurator/src/App.svelte
@@ -4,7 +4,7 @@
    *
    * Layout (desktop ≥ 1100px):
    *   ┌─────────────────────────────────────────────────────────────────┐
-   *   │ Header (brand · search · basic/advanced · theme · preview)       │
+   *   │ Header (brand · search · undo/redo · theme · preview)            │
    *   ├──────────┬──┬────────────────────────────────────┬──┬───────────┤
    *   │          │  │                                    │  │           │
    *   │ Sidebar  │↔│       Domain panel / WCAG tool     │↔│  Preview  │
@@ -23,7 +23,7 @@
    * State lives in the shared `ui` store; this component just wires the
    * active domain to its panel.
    */
-  import { DOMAINS, DOMAIN_BY_ID, BASIC_DOMAIN_IDS } from './lib/domains.js';
+  import { DOMAINS, DOMAIN_BY_ID } from './lib/domains.js';
   import { ui, undo, redo, overrides, loadSharedConfig } from './lib/store.svelte.js';
   import { buildShareUrl } from './lib/share.js';
   import { UI_STORAGE_KEY } from './lib/uiState.js';
@@ -97,20 +97,10 @@
     try { localStorage.setItem(WIDTHS_KEY, JSON.stringify({ sidebar: sidebarWidth, preview: previewWidth })); } catch { /* ignore */ }
   }
 
-  const home = $derived(ui.mode === 'basic' && ui.domain === 'home');
+  const home = $derived(ui.domain === 'home');
   const domain = $derived(DOMAIN_BY_ID.get(ui.domain) ?? DOMAIN_BY_ID.get('colors'));
   const tool = $derived(domain?.tool ?? '');
 
-  // Keep the active domain valid for the current mode: Home exists only in
-  // Basic, and Basic hides the non-checklist domains (Motion, Effects, …).
-  $effect(() => {
-    if (ui.mode === 'advanced' && ui.domain === 'home') {
-      ui.domain = 'colors';
-    } else if (ui.mode === 'basic' && ui.domain !== 'home' && !BASIC_DOMAIN_IDS.includes(ui.domain)) {
-      ui.domain = 'home';
-    }
-  });
-
   // Keep the contrast-probe host in sync with the user's cascade so every
   // ContrastBadge resolves `var(...)`, `light-dark()` and `oklch(from ...)`
   // expressions correctly. setProbeContext is internally idempotent.
@@ -157,7 +147,7 @@
   // Persist the navigation prefs so a reload restores where the user was.
   // Restore (with validation) happens in store.svelte.js via sanitiseUiState.
   $effect(() => {
-    const snapshot = JSON.stringify({ mode: ui.mode, domain: ui.domain, outputMode: ui.outputMode, uiTheme: ui.uiTheme, bundle: ui.bundle });
+    const snapshot = JSON.stringify({ domain: ui.domain, outputMode: ui.outputMode, uiTheme: ui.uiTheme, bundle: ui.bundle });
     try {
       localStorage.setItem(UI_STORAGE_KEY, snapshot);
     } catch {
@@ -183,9 +173,8 @@
     return () => mql.removeEventListener('change', onChange);
   });
 
-  // Keyboard shortcuts: '/' focuses the search box; 'b'/'a' switch mode;
-  // '[' / ']' cycle domains; 'Escape' clears the search; Ctrl+Z / Ctrl+Shift+Z
-  // step the override history.
+  // Keyboard shortcuts: '/' focuses the search box; '[' / ']' cycle domains;
+  // 'Escape' clears the search; Ctrl+Z / Ctrl+Shift+Z step the override history.
   function onKey(e) {
     // Ctrl/Cmd + Z handlers run regardless of focus context — undo/redo
     // is a global affordance, even while typing in an input.
@@ -222,15 +211,9 @@
     } else if (e.key === '/') {
       e.preventDefault();
       document.querySelector('#cfg-search')?.focus();
-    } else if (e.key === 'b' || e.key === 'B') {
-      ui.mode = 'basic';
-    } else if (e.key === 'a' || e.key === 'A') {
-      ui.mode = 'advanced';
     } else if (e.key === '[' || e.key === ']') {
-      // Cycle the domains visible in the current mode.
-      const ids = ui.mode === 'basic'
-        ? ['home', ...BASIC_DOMAIN_IDS]
-        : DOMAINS.map((d) => d.id);
+      // Cycle Overview + the full domain taxonomy.
+      const ids = ['home', ...DOMAINS.map((d) => d.id)];
       const i = ids.indexOf(ui.domain);
       if (i !== -1) {
         const next = (i + (e.key === ']' ? 1 : -1) + ids.length) % ids.length;
diff --git a/configurator/src/components/DomainPanel.svelte b/configurator/src/components/DomainPanel.svelte
index 96240e54..be570765 100644
--- a/configurator/src/components/DomainPanel.svelte
+++ b/configurator/src/components/DomainPanel.svelte
@@ -2,16 +2,24 @@
   /**
    * One domain tab (Colors, Typography, Spacing, …).
    *
-   * BASIC mode  → intro copy + curated essential rows + the domain's basic
-   *               generator (e.g. fluid spacing scale). No quick knobs —
-   *               global multipliers are a power tool, not a starting point.
-   * ADVANCED   → essentials + every generator + the FULL domain catalogue
-   *               (grouped, searchable, tier-filtered, modified-only filter),
-   *               capped by a collapsed "Power knobs" group for the global
-   *               multipliers, so nothing is ever out of reach.
+   * The panel has two stacked zones, in the same order for every category:
    *
-   * Reuses the existing TokenRow / TokenEditor / OklchPicker / ScaleGenerator,
-   * so each domain is just curation — no bespoke per-field code.
+   *   SETTINGS (always visible, inputs-first) — the system inputs a typical
+   *     project sets: one-click presets, brand colors, font stacks, scale
+   *     generators and the global "Scaling" multipliers. Curated via
+   *     lib/basics.js + domains.js so each domain is just curation, no
+   *     bespoke per-field code.
+   *
+   *   ALL VARIABLES (progressive disclosure) — a collapsed disclosure holding
+   *     the FULL domain catalogue (grouped, with tier / modified / usage
+   *     filters), so every token is one click away. Domains with no curated
+   *     Settings surface (e.g. Misc) render the catalogue inline instead of
+   *     hiding it behind a redundant click.
+   *
+   * An active search collapses the panel to the filtered catalogue alone —
+   * search means "find any token in this category", curated forms aside.
+   *
+   * Reuses the existing TokenRow / TokenEditor / OklchPicker / ScaleGenerator.
    */
   import { allTokens, groupTokens, matchesQuery, tokenByName } from '../lib/model.js';
   import { domainOf, KNOBS_BY_DOMAIN, DOCS_BASE_URL } from '../lib/domains.js';
@@ -26,11 +34,11 @@
   import QuickKnobs from './QuickKnobs.svelte';
   import StylePresetRow from './StylePresetRow.svelte';
 
-  /** @type {{ domain: { id:string, label:string, icon:string, blurb:string, intro?:string, powerIntro?:string, essentials?:string[], basicGenerators?:string[], advancedGenerators?:string[], brandColors?:boolean } }} */
+  /** @type {{ domain: { id:string, label:string, icon:string, blurb:string, intro?:string, scaleIntro?:string, essentials?:string[], basicGenerators?:string[], brandColors?:boolean, docsPath?:string } }} */
   let { domain } = $props();
 
-  const advanced = $derived(ui.mode === 'advanced');
   const query = $derived(ui.query.trim().toLowerCase());
+  const searching = $derived(query.length > 0);
 
   // Curated essential rows — only those present in the active catalogue.
   const essentials = $derived(
@@ -39,7 +47,7 @@
       .filter(Boolean)
   );
 
-  // Friendly Basic groups (lib/basics.js): label + help per control, with
+  // Friendly curated groups (lib/basics.js): label + help per control, with
   // controls whose token is missing from the catalogue dropped defensively
   // (tests/basics.test.js makes that a CI failure, never a silent gap).
   const basicGroups = $derived(
@@ -56,10 +64,10 @@
   // Every token in this domain.
   const domainTokens = $derived(allTokens.filter((t) => domainOf(t) === domain.id));
 
-  // Advanced list: tier + modified + usage + search filters, then grouped.
+  // All-variables catalogue: tier + modified + usage + search filters, grouped.
   // Use property-access (overrides[t.name]) instead of `in` so Svelte 5's
   // state proxy triggers reactivity via the `get` trap on every key check.
-  const advancedVisible = $derived(
+  const catalogueVisible = $derived(
     domainTokens.filter((t) => {
       if (t.tier === 'INTERNAL' && !ui.showInternal) return false;
       if (ui.onlyModified && overrides[t.name] == null) return false;
@@ -68,47 +76,35 @@
       return matchesQuery(t, query);
     })
   );
-  const grouped = $derived(groupTokens(advancedVisible));
-
-  // The curated Basic surface for this domain: essentials plus the brand
-  // light/dark pair tokens. Basic search renders matches from this set only;
-  // everything else is one click away via the "more in Advanced" affordance.
-  const basicSurface = $derived.by(() => {
-    const s = new Set(domain.essentials ?? []);
-    if (domain.brandColors) {
-      for (const { key } of BRAND_COLOR_KEYS) {
-        s.add(`--sf-color-${key}-light`);
-        s.add(`--sf-color-${key}-dark`);
-      }
-    }
-    return s;
-  });
-
-  // Basic mode + active search: matches across the whole domain, split into
-  // curated-surface hits (rendered) and the advanced-only remainder (count).
-  const basicSearch = $derived.by(() => {
-    if (advanced || !query) return null;
-    const hits = domainTokens.filter((t) => {
-      if (t.tier === 'INTERNAL' && !ui.showInternal) return false;
-      return matchesQuery(t, query);
-    });
-    const shown = hits.filter((t) => basicSurface.has(t.name));
-    return { shown, hiddenCount: hits.length - shown.length };
-  });
+  const grouped = $derived(groupTokens(catalogueVisible));
 
   // Only label each group's category when more than one is present in this
   // domain (otherwise the repeated "Core tokens" prefix is just noise).
   const categoryCount = $derived(new Set(grouped.map((c) => c.category)).size);
 
-  const basicGenerators = $derived(domain.basicGenerators ?? []);
+  const generators = $derived(domain.basicGenerators ?? []);
 
-  // Power knobs for this domain (global multipliers that cascade through
-  // many derived tokens — see lib/domains.js → KNOBS_BY_DOMAIN). Advanced
-  // only: they sit in a collapsed, visually fenced group below the catalogue.
+  // Scaling knobs for this domain (global multipliers that cascade through
+  // many derived tokens — see lib/domains.js → KNOBS_BY_DOMAIN). They sit in
+  // the Settings zone as a "Scaling" group.
   const knobs = $derived(KNOBS_BY_DOMAIN[domain.id] ?? []);
-  const totalDriven = $derived(knobs.reduce((n, k) => n + (k.driving ?? 1), 0));
 
-  // Modified tokens within this domain — surfaced as a collapsible block.
+  // Does this domain expose a curated Settings surface above the raw
+  // catalogue? When it does not (e.g. Misc), the All-variables list is the
+  // whole panel and renders inline rather than behind a disclosure.
+  const hasSettings = $derived(
+    !!domain.brandColors ||
+    !!STYLE_PRESETS_BY_DOMAIN[domain.id] ||
+    basicGroups.length > 0 ||
+    essentials.length > 0 ||
+    generators.length > 0 ||
+    knobs.length > 0
+  );
+
+  // "Show all variables" disclosure state (only meaningful when hasSettings).
+  let showAll = $state(false);
+
+  // Modified tokens within this domain — drives the header "Reset N" button.
   const modifiedHere = $derived(
     domainTokens.filter((t) => overrides[t.name] != null)
   );
@@ -130,6 +126,66 @@
   </header>
 {/snippet}
 
+{#snippet filters()}
+  <div class="allvars__filters">
+    <div class="cfg-seg panel__usage-seg" role="group" aria-label="Usage filter">
+      <button
+        class="cfg-seg__btn"
+        class:cfg-seg__btn--on={ui.usageFilter === 'all'}
+        onclick={() => (ui.usageFilter = 'all')}
+        aria-pressed={ui.usageFilter === 'all'}
+        title="Show all tokens"
+      >All</button>
+      <button
+        class="cfg-seg__btn"
+        class:cfg-seg__btn--on={ui.usageFilter === 'configure'}
+        onclick={() => (ui.usageFilter = 'configure')}
+        aria-pressed={ui.usageFilter === 'configure'}
+        title="Show only configure tokens — literal inputs you SET in :root"
+      >Configure</button>
+      <button
+        class="cfg-seg__btn"
+        class:cfg-seg__btn--on={ui.usageFilter === 'consume'}
+        onclick={() => (ui.usageFilter = 'consume')}
+        aria-pressed={ui.usageFilter === 'consume'}
+        title="Show only consume tokens — derived outputs you READ in component CSS"
+      >Consume</button>
+    </div>
+    <label class="panel__check" title="Restrict to tokens with an active override">
+      <input type="checkbox" bind:checked={ui.onlyModified} />
+      <span>Modified only</span>
+    </label>
+    <label class="panel__check" title="Show INTERNAL-tier implementation tokens">
+      <input type="checkbox" bind:checked={ui.showInternal} />
+      <span>Internal</span>
+    </label>
+  </div>
+{/snippet}
+
+{#snippet catalogue()}
+  {#if grouped.length === 0}
+    {#if searching}
+      <p class="panel__empty">
+        No <strong>{domain.label.toLowerCase()}</strong> tokens match <code>{ui.query}</code>.
+      </p>
+    {:else}
+      <p class="panel__empty">No tokens match the current filters.</p>
+    {/if}
+  {:else}
+    {#each grouped as cat (cat.category)}
+      {#each cat.groups as group (group.name)}
+        <TokenGroup
+          name={group.name}
+          tokens={group.tokens}
+          description={group.description}
+          showCategory={categoryCount > 1}
+          category={cat.category}
+        />
+      {/each}
+    {/each}
+  {/if}
+{/snippet}
+
 <section class="panel">
   <header class="panel__head">
     <div class="panel__title-wrap">
@@ -141,39 +197,6 @@
     </div>
 
     <div class="panel__actions">
-      {#if advanced}
-        <div class="cfg-seg panel__usage-seg" role="group" aria-label="Usage filter">
-          <button
-            class="cfg-seg__btn"
-            class:cfg-seg__btn--on={ui.usageFilter === 'all'}
-            onclick={() => (ui.usageFilter = 'all')}
-            aria-pressed={ui.usageFilter === 'all'}
-            title="Show all tokens"
-          >All</button>
-          <button
-            class="cfg-seg__btn"
-            class:cfg-seg__btn--on={ui.usageFilter === 'configure'}
-            onclick={() => (ui.usageFilter = 'configure')}
-            aria-pressed={ui.usageFilter === 'configure'}
-            title="Show only configure tokens — literal inputs you SET in :root"
-          >Configure</button>
-          <button
-            class="cfg-seg__btn"
-            class:cfg-seg__btn--on={ui.usageFilter === 'consume'}
-            onclick={() => (ui.usageFilter = 'consume')}
-            aria-pressed={ui.usageFilter === 'consume'}
-            title="Show only consume tokens — derived outputs you READ in component CSS"
-          >Consume</button>
-        </div>
-        <label class="panel__check" title="Restrict to tokens with an active override">
-          <input type="checkbox" bind:checked={ui.onlyModified} />
-          <span>Modified only</span>
-        </label>
-        <label class="panel__check" title="Show INTERNAL-tier implementation tokens">
-          <input type="checkbox" bind:checked={ui.showInternal} />
-          <span>Internal</span>
-        </label>
-      {/if}
       {#if modifiedHere.length}
         <button
           class="cfg-btn cfg-btn--sm cfg-btn--danger"
@@ -185,60 +208,35 @@
   </header>
 
   <div class="panel__body">
-    {#if basicSearch}
-      <!-- Basic mode + active search: curated hits + an Advanced affordance. -->
-      {#if basicSearch.shown.length === 0 && basicSearch.hiddenCount === 0}
-        <p class="panel__empty">
-          No <strong>{domain.label.toLowerCase()}</strong> tokens match
-          <code>{ui.query}</code>. Try Advanced mode to widen filters.
-        </p>
-      {:else}
-        {#if basicSearch.shown.length}
-          <section class="cfg-card panel__card">
-            {@render cardHead('Search results', basicSearch.shown.length)}
-            <div class="panel__card-rows">
-              {#each basicSearch.shown as token (token.name)}
-                <TokenRow {token} />
-              {/each}
-            </div>
-          </section>
-        {/if}
-        {#if basicSearch.hiddenCount > 0}
-          <button
-            class="panel__more"
-            onclick={() => (ui.mode = 'advanced')}
-            title="Switch to Advanced mode — your search is kept"
-          >
-            {basicSearch.hiddenCount} more match{basicSearch.hiddenCount === 1 ? '' : 'es'} in Advanced →
-          </button>
-        {/if}
-      {/if}
+    {#if searching}
+      <!-- Active search: the filtered catalogue is the whole panel — search
+           means "find any token in this category". -->
+      {@render filters()}
+      {@render catalogue()}
     {:else}
+      <!-- ── SETTINGS (inputs-first) ─────────────────────────────────────── -->
+
       <!-- Orientation copy: what this domain controls, whether typical
-           projects change it. Basic mode only — Advanced users know. -->
-      {#if !advanced && domain.intro}
+           projects change it. -->
+      {#if domain.intro}
         <p class="panel__intro">{domain.intro}</p>
       {/if}
 
-      <!-- One-click style presets (Basic borders/shadows) -->
-      {#if !advanced && STYLE_PRESETS_BY_DOMAIN[domain.id]}
+      <!-- One-click style presets (borders / shadows) -->
+      {#if STYLE_PRESETS_BY_DOMAIN[domain.id]}
         <StylePresetRow
           title={STYLE_PRESETS_BY_DOMAIN[domain.id].title}
           presets={STYLE_PRESETS_BY_DOMAIN[domain.id].presets}
         />
       {/if}
 
-      <!-- Basic-mode curated surfaces (brand colors, basic groups, essentials).
-           All three are hidden in Advanced mode — the full filtered catalogue
-           below covers every token, so duplicating them here would bypass the
-           Modified-only and Internal filters and confuse the user. -->
-      {#if domain.brandColors && !advanced}
-        <!-- Brand colors domain: light/dark pair rows for every brand color -->
+      <!-- Curated input surfaces: brand colors, friendly forms, or essentials. -->
+      {#if domain.brandColors}
         <section class="cfg-card panel__card">
           {@render cardHead(
             'Brand & status colors',
             BRAND_COLOR_KEYS.length,
-            advanced ? '' : 'Set light-mode values — dark mode is auto-derived. Click the dark swatch to pin a custom value.'
+            'Set light-mode values — dark mode is auto-derived. Click the dark swatch to pin a custom value.'
           )}
           <div class="panel__card-rows">
             {#each BRAND_COLOR_KEYS as { key, label } (key)}
@@ -246,8 +244,7 @@
             {/each}
           </div>
         </section>
-      {:else if !advanced && basicGroups.length}
-        <!-- Curated Basic forms: friendly labels, help text, ⓘ raw-token info. -->
+      {:else if basicGroups.length}
         {#each basicGroups as group (group.title)}
           <section class="cfg-card panel__card">
             {@render cardHead(group.title, group.controls.length)}
@@ -258,16 +255,9 @@
             </div>
           </section>
         {/each}
-      {:else if !advanced && essentials.length}
-        <!-- In Advanced mode the full filtered catalogue covers everything;
-             showing essentials here would bypass the Modified-only / Internal
-             filters and confuse the user with duplicated unfiltered rows. -->
+      {:else if essentials.length}
         <section class="cfg-card panel__card">
-          {@render cardHead(
-            'Essentials',
-            essentials.length,
-            `Curated for most projects · switch to Advanced (A) for the full ${domainTokens.length}-token catalogue.`
-          )}
+          {@render cardHead('Essentials', essentials.length, 'Curated for most projects.')}
           <div class="panel__card-rows">
             {#each essentials as token (token.name)}
               <TokenRow {token} />
@@ -276,50 +266,34 @@
         </section>
       {/if}
 
-      <!-- Basic generators (e.g. fluid spacing scale) -->
-      {#each basicGenerators as g (g)}
+      <!-- Scale generators (fluid type / display / space ramps) -->
+      {#each generators as g (g)}
         <ScaleGenerator kinds={[g]} />
       {/each}
 
-      {#if advanced}
-        <!-- Full domain catalogue, grouped -->
-        {#if grouped.length === 0}
-          <p class="panel__empty">No tokens match the current search and filters.</p>
-        {:else}
-          {#each grouped as cat (cat.category)}
-            {#each cat.groups as group (group.name)}
-              <TokenGroup
-                name={group.name}
-                tokens={group.tokens}
-                description={group.description}
-                showCategory={categoryCount > 1}
-                category={cat.category}
-              />
-            {/each}
-          {/each}
-        {/if}
-
-        <!-- Power knobs: global multipliers with atomic reach. Deliberately
-             last and collapsed — one drag here moves dozens of tokens. -->
-        {#if knobs.length}
-          <details class="power">
-            <summary class="power__summary">
-              <span class="power__bolt" aria-hidden="true">⚡</span>
-              <span class="power__title">Power knobs</span>
-              <span class="power__chip">drives {totalDriven} token{totalDriven === 1 ? '' : 's'}</span>
-            </summary>
-            {#if domain.powerIntro}
-              <p class="power__intro">{domain.powerIntro}</p>
-            {/if}
-            <QuickKnobs {knobs} title="Global multipliers" blurb="" />
-          </details>
-        {/if}
-      {:else if !domain.brandColors && essentials.length === 0 && basicGenerators.length === 0}
-        <!-- Domain has no curated essentials (e.g. Effects, Misc). Surface
-             the full advanced list anyway so Basic isn't a dead end. -->
-        <p class="panel__hint">
-          This domain has no curated basics — switch to <strong>Advanced</strong> (A) to edit the full catalogue.
-        </p>
+      <!-- Scaling: global multipliers that cascade through many tokens. -->
+      {#if knobs.length}
+        <QuickKnobs {knobs} title="Scaling" blurb={domain.scaleIntro ?? ''} />
+      {/if}
+
+      <!-- ── ALL VARIABLES (progressive disclosure) ──────────────────────── -->
+      {#if hasSettings}
+        <details class="allvars" bind:open={showAll}>
+          <summary class="allvars__summary">
+            <span class="allvars__chev" aria-hidden="true">›</span>
+            <span class="allvars__title">{showAll ? 'Hide' : 'Show'} all variables</span>
+            <span class="allvars__count">{domainTokens.length} token{domainTokens.length === 1 ? '' : 's'}</span>
+          </summary>
+          <div class="allvars__body">
+            {@render filters()}
+            {@render catalogue()}
+          </div>
+        </details>
+      {:else}
+        <!-- No curated Settings surface (e.g. Misc): show the catalogue inline
+             so the category is never a dead end. -->
+        {@render filters()}
+        {@render catalogue()}
       {/if}
 
       {#if domain.docsPath}
@@ -443,31 +417,14 @@
     border-radius: var(--cfg-radius-s);
   }
 
-  .panel__more {
-    align-self: center;
-    padding: 8px 16px;
-    font-size: 12.5px;
-    color: var(--cfg-text-muted);
-    background: var(--cfg-surface-2);
-    border: 1px dashed var(--cfg-border-strong);
-    border-radius: var(--cfg-radius-s);
-    cursor: pointer;
-    transition: color 0.12s, border-color 0.12s;
-  }
-  .panel__more:hover {
-    color: var(--cfg-text);
-    border-color: var(--cfg-accent-strong);
-  }
-
-  /* Power knobs — visually fenced: these multipliers cascade through dozens
-     of tokens, so the group reads as "handle with intent". */
-  .power {
-    border: 1px solid rgba(240, 173, 78, 0.45);
+  /* All-variables disclosure — the full domain catalogue, one click away. */
+  .allvars {
+    border: 1px solid var(--cfg-border);
     border-radius: var(--cfg-radius);
-    background: rgba(240, 173, 78, 0.06);
+    background: var(--cfg-surface);
     overflow: clip;
   }
-  .power__summary {
+  .allvars__summary {
     display: flex;
     align-items: center;
     gap: 10px;
@@ -476,38 +433,44 @@
     list-style: none;
     user-select: none;
   }
-  .power__summary::-webkit-details-marker { display: none; }
-  .power__summary:hover { background: rgba(240, 173, 78, 0.1); }
-  .power__bolt { font-size: 14px; }
-  .power__title {
+  .allvars__summary::-webkit-details-marker { display: none; }
+  .allvars__summary:hover { background: var(--cfg-surface-2); }
+  .allvars__chev {
+    font-size: 16px;
+    line-height: 1;
+    color: var(--cfg-text-faint);
+    transition: transform 0.15s;
+  }
+  .allvars[open] .allvars__chev { transform: rotate(90deg); }
+  .allvars__title {
     font-size: 12.5px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.06em;
+    color: var(--cfg-text);
   }
-  .power__chip {
+  .allvars__count {
     font-family: var(--cfg-mono);
-    font-size: 10.5px;
-    color: rgb(240, 173, 78);
-    border: 1px solid rgba(240, 173, 78, 0.45);
-    border-radius: 999px;
-    padding: 1px 8px;
+    font-size: 11px;
+    color: var(--cfg-text-faint);
   }
-  .power__intro {
-    margin: 0;
-    padding: 0 16px 10px;
-    font-size: 12.5px;
-    line-height: 1.55;
-    color: var(--cfg-text-muted);
+  .allvars__body {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px;
+    border-top: 1px solid var(--cfg-border);
   }
-  .power > :global(.knobs) {
-    border: 0;
-    border-top: 1px solid rgba(240, 173, 78, 0.25);
-    border-radius: 0;
+
+  /* Filter bar above the catalogue (usage segment + modified/internal toggles). */
+  .allvars__filters {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
   }
 
-  .panel__empty,
-  .panel__hint {
+  .panel__empty {
     color: var(--cfg-text-faint);
     font-size: 13.5px;
     padding: 20px 4px;
diff --git a/configurator/src/components/Header.svelte b/configurator/src/components/Header.svelte
index 6a13a93e..4225a833 100644
--- a/configurator/src/components/Header.svelte
+++ b/configurator/src/components/Header.svelte
@@ -4,11 +4,9 @@
    *
    * Contents (left → right):
    *   • Brand mark + product title + framework version pill
-   *   • Global search input (filters tokens across the active domain;
-   *     also triggers cross-domain matches in advanced mode via the panel)
-   *   • Basic / Advanced segmented control (global mode toggle)
-   *   • Light / Dark preview-theme toggle
-   *   • Sidebar / Preview pane toggles
+   *   • Global search input (filters the active domain's All-variables list)
+   *   • Undo / redo
+   *   • Share-link / Light-Dark theme / Sidebar / Preview pane toggles
    *
    * Below ~760px the labels collapse to icons but every control stays
    * reachable. Keyboard shortcut: `/` focuses the search box.
@@ -95,23 +93,6 @@
       >↷</button>
     </div>
 
-    <div class="cfg-seg" role="group" aria-label="Complexity mode">
-      <button
-        class="cfg-seg__btn"
-        class:cfg-seg__btn--on={ui.mode === 'basic'}
-        onclick={() => (ui.mode = 'basic')}
-        aria-pressed={ui.mode === 'basic'}
-        title="Basic — the curated essentials most projects need (B)"
-      >Basic</button>
-      <button
-        class="cfg-seg__btn"
-        class:cfg-seg__btn--on={ui.mode === 'advanced'}
-        onclick={() => (ui.mode = 'advanced')}
-        aria-pressed={ui.mode === 'advanced'}
-        title="Advanced — every token, generator and viewport knob (A)"
-      >Advanced</button>
-    </div>
-
     <button
       class="cfg-btn cfg-btn--ghost cfg-btn--icon hdr__pane hdr__share"
       class:hdr__share--ok={shareCopied}
diff --git a/configurator/src/components/Home.svelte b/configurator/src/components/Home.svelte
index 7561ad51..f0931e35 100644
--- a/configurator/src/components/Home.svelte
+++ b/configurator/src/components/Home.svelte
@@ -1,18 +1,18 @@
 <script>
   /**
-   * Home — the Basic-mode landing screen.
+   * Overview — the landing screen.
    *
-   * A project setup checklist: one large row per Basic domain (Colors,
-   * Typography, Spacing, Layout, Borders, Shadows) plus the Themes tool.
-   * Each row shows what the domain controls and how many of its tokens are
-   * customised, so the screen doubles as orientation ("what do I change per
-   * project?") and progress tracking ("what have I already touched?").
+   * A project setup checklist: one large row per highlighted domain (Colors,
+   * Typography, Spacing, Layout, Borders, Shadows) plus the Themes / Install
+   * tools. Each row shows what the domain controls and how many of its tokens
+   * are customised, so the screen doubles as orientation ("what do I change
+   * per project?") and progress tracking ("what have I already touched?").
    */
-  import { DOMAINS, BASIC_DOMAIN_IDS } from '../lib/domains.js';
+  import { DOMAINS, OVERVIEW_DOMAIN_IDS } from '../lib/domains.js';
   import { modifiedCountsByDomain } from '../lib/model.js';
   import { ui, overrides, openOutputDrawer } from '../lib/store.svelte.js';
 
-  const rows = $derived(DOMAINS.filter((d) => BASIC_DOMAIN_IDS.includes(d.id)));
+  const rows = $derived(DOMAINS.filter((d) => OVERVIEW_DOMAIN_IDS.includes(d.id)));
 
   // Domain id → number of currently-overridden tokens (same map as Sidebar).
   const mods = $derived.by(() => modifiedCountsByDomain(overrides));
@@ -28,9 +28,9 @@
     <h2 class="home__title">Set up your design</h2>
     <p class="home__lead">
       Work through the panels below — they cover everything most projects
-      change from the framework defaults. Everything else already has a good
-      default and stays reachable in <strong>Advanced</strong> mode
-      (<kbd class="cfg-kbd">A</kbd>).
+      change from the framework defaults. Every other token already has a good
+      default and is one click away under each category's
+      <strong>All variables</strong> section.
     </p>
     {#if totalMods > 0}
       <button class="home__export" onclick={openOutputDrawer} title="Open the output drawer with your override CSS">
diff --git a/configurator/src/components/Sidebar.svelte b/configurator/src/components/Sidebar.svelte
index d1bd9498..d5da2a4b 100644
--- a/configurator/src/components/Sidebar.svelte
+++ b/configurator/src/components/Sidebar.svelte
@@ -2,27 +2,21 @@
   /**
    * Category sidebar (left rail).
    *
-   * In Basic mode lists the Home screen plus the per-project checklist domains
-   * (Colors, Typography, Spacing, Layout, Borders, Shadows, Themes); Advanced
-   * mode lists the full taxonomy. Each row carries the per-domain override
-   * count. When the
+   * Lists the Overview (home) screen followed by the full domain taxonomy —
+   * every category is always reachable (depth lives inside each panel, not in
+   * the navigation). Each row carries the per-domain override count. When the
    * sidebar is collapsed (ui.sidebarOpen = false) it shrinks to an icon-only
    * rail; on narrow viewports it always renders in icon-only mode.
    *
    * The category icons are short Unicode glyphs/emoji to avoid pulling in an
    * icon font — keeps the configurator a single self-contained bundle.
    */
-  import { DOMAINS, BASIC_DOMAIN_IDS, domainOf } from '../lib/domains.js';
+  import { DOMAINS, domainOf } from '../lib/domains.js';
   import { allTokens, modifiedCountsByDomain } from '../lib/model.js';
   import { ui, overrides } from '../lib/store.svelte.js';
 
-  // Basic mode shows the per-project checklist only (6 domains + Themes),
-  // prefixed with the Home screen. Advanced shows the full taxonomy.
-  const visibleDomains = $derived(
-    ui.mode === 'basic'
-      ? DOMAINS.filter((d) => BASIC_DOMAIN_IDS.includes(d.id))
-      : DOMAINS
-  );
+  // The flat IA always shows the full taxonomy.
+  const visibleDomains = DOMAINS;
 
   // Domain id → number of tokens it owns (used as the tab count badge).
   const totals = $derived.by(() => {
@@ -41,22 +35,20 @@
 
 <aside class="side" class:side--narrow={!ui.sidebarOpen} aria-label="Categories">
   <ul class="side__list">
-    {#if ui.mode === 'basic'}
-      <li>
-        <button
-          class="side__item"
-          class:side__item--on={ui.domain === 'home'}
-          onclick={() => (ui.domain = 'home')}
-          aria-current={ui.domain === 'home' ? 'page' : undefined}
-          title="Home — project setup checklist"
-        >
-          <span class="side__icon" aria-hidden="true">🏠</span>
-          <span class="side__label">
-            <span class="side__name">Home</span>
-          </span>
-        </button>
-      </li>
-    {/if}
+    <li>
+      <button
+        class="side__item"
+        class:side__item--on={ui.domain === 'home'}
+        onclick={() => (ui.domain = 'home')}
+        aria-current={ui.domain === 'home' ? 'page' : undefined}
+        title="Overview — project setup checklist"
+      >
+        <span class="side__icon" aria-hidden="true">🏠</span>
+        <span class="side__label">
+          <span class="side__name">Overview</span>
+        </span>
+      </button>
+    </li>
     {#each visibleDomains as d (d.id)}
       <li>
         <button
@@ -85,7 +77,7 @@
 
   {#if ui.sidebarOpen}
     <footer class="side__foot">
-      <p class="side__hint"><kbd class="cfg-kbd">/</kbd> search · <kbd class="cfg-kbd">B</kbd>asic / <kbd class="cfg-kbd">A</kbd>dvanced · <kbd class="cfg-kbd">[</kbd> <kbd class="cfg-kbd">]</kbd> next domain · <kbd class="cfg-kbd">⌘Z</kbd> undo</p>
+      <p class="side__hint"><kbd class="cfg-kbd">/</kbd> search · <kbd class="cfg-kbd">[</kbd> <kbd class="cfg-kbd">]</kbd> next domain · <kbd class="cfg-kbd">⌘Z</kbd> undo</p>
     </footer>
   {/if}
 </aside>
diff --git a/configurator/src/lib/domains.js b/configurator/src/lib/domains.js
index 941ca6fc..7afaa2a4 100644
--- a/configurator/src/lib/domains.js
+++ b/configurator/src/lib/domains.js
@@ -3,11 +3,11 @@
  *
  * Splits the full token catalogue (~840 tokens) into the user-facing domains
  * the UI navigates (Colors, Typography, Spacing, Layout, Borders, Shadows,
- * Motion, Effects, …). Each domain ships a small curated set of "basic"
- * essentials — the handful of tokens a typical user always touches — plus
- * optional in-place generators (modular type / display / space scale, etc.).
- * Advanced mode then exposes the FULL catalogue for that domain so nothing is
- * ever out of reach.
+ * Motion, Effects, …). Each domain leads with a curated Settings surface —
+ * the system inputs a typical user touches (brand colors, font stacks, scale
+ * generators, global multipliers) — and a collapsed "All variables" section
+ * underneath exposes the FULL catalogue for that domain, so nothing is ever
+ * out of reach.
  *
  * Classification is deterministic: each domain owns a list of token-name
  * prefixes/regexes plus a list of namespaces, evaluated in the order the
@@ -28,14 +28,13 @@ import { basicControlTokens } from './basics.js';
 export const DOCS_BASE_URL = 'https://github.com/codeslash-dev/SLASHED/blob/main/';
 
 /**
- * Domains surfaced in BASIC mode (plus the synthetic Home screen).
- *
- * Basic is a per-project checklist: the 11 brand/status colors, the fluid
- * type/space generators and a handful of layout/border/shadow anchors.
- * Everything else lives in Advanced. 'themes' is the one tool that stays —
- * presets are the friendliest entry point into the override model.
+ * Domains highlighted on the Overview (home) screen as the per-project
+ * setup checklist: the 11 brand/status colors, the fluid type/space
+ * generators and a handful of layout/border/shadow anchors, plus the
+ * Themes/Install tools. Every domain is always reachable from the sidebar —
+ * this list only decides what the Overview surfaces as "start here".
  */
-export const BASIC_DOMAIN_IDS = [
+export const OVERVIEW_DOMAIN_IDS = [
   'colors',
   'typography',
   'spacing',
@@ -60,8 +59,8 @@ const OVERRIDES = {
  *
  * A "knob" is a single token whose value cascades through many other tokens
  * (e.g. `--sf-space-scale=1` drives 45 spacing tokens). Surfacing these as
- * dedicated sliders at the top of each panel is the headline DX win — one
- * drag, dozens of derived values move.
+ * dedicated sliders in each panel's Settings ("Scaling" group) is a headline
+ * DX win — one drag, dozens of derived values move.
  *
  * The `driving` count is the number of tokens that reference this knob in
  * the active framework catalogue (measured against api-index.generated.json).
@@ -108,31 +107,31 @@ export const KNOBS_BY_DOMAIN = {
  *   label         - display label
  *   icon          - single emoji shown in the tab and section header
  *   blurb         - one-line summary shown above the panel
- *   intro         - 1–2 sentence orientation copy shown atop the BASIC panel
+ *   intro         - 1–2 sentence orientation copy shown atop the panel
  *                   (what this domain controls and whether typical projects
  *                   change it)
- *   powerIntro    - one-line warning copy above the Power-knobs group in
- *                   Advanced (required for any domain with quick knobs)
+ *   scaleIntro    - one-line explainer above the Settings "Scaling" group
+ *                   (required for any domain with scaling knobs)
  *   docsPath      - repo-relative path to the matching framework doc,
  *                   linked from the panel footer
  *   tool          - non-token tool slot: 'wcag' renders the WCAG panel
- *   essentials    - curated "basic" token names (rendered as editor rows in
- *                   basic + advanced); names absent from the active catalogue
- *                   are skipped silently. For the Basic checklist domains the
- *                   list derives from lib/basics.js (the richer labelled
- *                   shape) so there is exactly one source of truth
- *   basicGenerators / advancedGenerators
- *                 - which scale generator ramps to surface (one of
- *                   'type' | 'display' | 'space')
+ *   essentials    - curated token names rendered as Settings editor rows;
+ *                   names absent from the active catalogue are skipped
+ *                   silently. For the curated checklist domains the list
+ *                   derives from lib/basics.js (the richer labelled shape) so
+ *                   there is exactly one source of truth
+ *   basicGenerators
+ *                 - which scale generator ramps to surface in Settings (one
+ *                   of 'type' | 'display' | 'space')
  *   namespaces    - api-index `namespace` values that belong to this domain
  *   patterns      - additional token-name regexes that map into this domain
  *
  * @type {Array<{
  *   id: string, label: string, icon: string, blurb: string,
- *   intro?: string, powerIntro?: string,
+ *   intro?: string, scaleIntro?: string,
  *   tool?: string,
  *   essentials?: string[],
- *   basicGenerators?: string[], advancedGenerators?: string[],
+ *   basicGenerators?: string[],
  *   namespaces?: string[], patterns?: RegExp[]
  * }>}
  */
@@ -144,7 +143,7 @@ export const DOMAINS = [
     icon: '🎨',
     blurb: 'Brand & status sources, semantic surfaces, links, focus and dark-mode contrast.',
     intro: 'Set the 11 brand and status source colors — shades, surfaces, links and dark mode all derive from them automatically. The highest-impact panel for any project.',
-    powerIntro: 'These thresholds retune how the framework picks light or dark text on every colored surface. Small changes ripple across the whole palette — change with care.',
+    scaleIntro: 'These thresholds retune how the framework picks light or dark text on every colored surface. Small changes ripple across the whole palette — change with care.',
     namespaces: [
       'color', 'palette',
       'primary', 'secondary', 'tertiary', 'action', 'neutral', 'base',
@@ -188,7 +187,7 @@ export const DOMAINS = [
     icon: '🔤',
     blurb: 'Font families, fluid type ramp, headings, prose and inline text behaviour.',
     intro: 'Pick your font stacks, then tune the fluid type ramp with the generator — a few inputs recalibrate every text size between your smallest and largest viewports.',
-    powerIntro: '--sf-text-scale multiplies the entire fluid text ramp at once. Prefer the generator above unless you want a uniform global resize.',
+    scaleIntro: '--sf-text-scale multiplies the entire fluid text ramp at once. Prefer the generator above unless you want a uniform global resize.',
     namespaces: [
       'font', 'text', 'leading', 'tracking', 'prose',
       'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
@@ -222,7 +221,7 @@ export const DOMAINS = [
     icon: '📏',
     blurb: 'Fluid spacing scale, gaps, section padding and content rhythm.',
     intro: 'Tune the fluid spacing ramp with the generator, plus the rhythm tokens most layouts read (section padding, gutters, content gaps).',
-    powerIntro: '--sf-space-scale multiplies all 45 fluid spacing tokens in one drag. Prefer the generator above unless you want a uniform global squeeze or stretch.',
+    scaleIntro: '--sf-space-scale multiplies all 45 fluid spacing tokens in one drag. Prefer the generator above unless you want a uniform global squeeze or stretch.',
     namespaces: ['space', 'gap', 'section', 'fluid', 'flow', 'gutter', 'component'],
     patterns: [
       /^--sf-space-/,
@@ -289,7 +288,7 @@ export const DOMAINS = [
     icon: '⬜',
     blurb: 'Corner radius, border widths and dividers.',
     intro: 'Set the corner radius steps and the default border styling referenced across the framework.',
-    powerIntro: '--sf-radius-scale multiplies every radius step at once (set it to 0 for fully sharp corners).',
+    scaleIntro: '--sf-radius-scale multiplies every radius step at once (set it to 0 for fully sharp corners).',
     namespaces: ['border', 'radius', 'divider', 'outline'],
     patterns: [
       /^--sf-border(\b|[-_])/,
@@ -307,7 +306,7 @@ export const DOMAINS = [
     icon: '🌒',
     blurb: 'Elevation shadow ramp, drop / text / scroll shadows and glow.',
     intro: 'Tune the four elevation steps used across the framework. Shadow opacity is boosted automatically in dark mode.',
-    powerIntro: '--sf-shadow-strength drives the opacity of all 14 shadow tokens, including the automatic dark-mode boost.',
+    scaleIntro: '--sf-shadow-strength drives the opacity of all 14 shadow tokens, including the automatic dark-mode boost.',
     // Order MATTERS — these patterns run before typography/colors so that
     // `--sf-text-shadow-*` and `--sf-shadow-color` end up here.
     patterns: [
@@ -325,7 +324,7 @@ export const DOMAINS = [
     label: 'Motion',
     icon: '🎞️',
     blurb: 'Durations, easings, transition and animation presets.',
-    powerIntro: '--sf-motion-scale multiplies every duration in the framework (set it to 0 to disable motion entirely).',
+    scaleIntro: '--sf-motion-scale multiplies every duration in the framework (set it to 0 to disable motion entirely).',
     namespaces: ['duration', 'ease', 'transition', 'animation', 'motion', 'scroll'],
     patterns: [
       /^--sf-duration-/,
diff --git a/configurator/src/lib/store.svelte.js b/configurator/src/lib/store.svelte.js
index d9967f39..6dfad727 100644
--- a/configurator/src/lib/store.svelte.js
+++ b/configurator/src/lib/store.svelte.js
@@ -37,17 +37,15 @@ export const overrides = $state(loadOverrides());
  */
 export const storage = $state({ ok: true });
 
-/** UI state: active domain tab, basic/advanced mode, search, filters, preview. */
+/** UI state: active domain tab, search, filters, preview. */
 const savedUi = loadUiState();
 export const ui = $state({
   /**
    * Active domain tab id (see lib/domains.js): 'typography' | 'colors' | …
-   * `'home'` is the synthetic Basic-mode landing screen (setup checklist).
+   * `'home'` is the synthetic Overview landing screen (setup checklist).
    */
   domain: savedUi.domain ?? 'home',
-  /** Global complexity mode: 'basic' shows curated essentials, 'advanced' all. */
-  mode: savedUi.mode ?? 'basic',
-  /** Free-text filter, applied to advanced lists. */
+  /** Free-text filter, applied to each panel's All-variables catalogue. */
   query: '',
   /** Show the api-index INTERNAL tier (one or two implementation tokens). */
   showInternal: false,
@@ -108,10 +106,10 @@ export const savedThemes = $state(loadSavedThemes());
 // ───────────────────────────── persistence ────────────────────────────────
 
 /**
- * Load the persisted UI preferences (mode / domain / output format),
+ * Load the persisted UI preferences (domain / output format / theme / bundle),
  * validated against the live taxonomy. Persisting happens in App.svelte
- * via an $effect over the same three fields.
- * @returns {{ mode?: string, domain?: string, outputMode?: string }}
+ * via an $effect over the same fields.
+ * @returns {{ domain?: string, outputMode?: 'layer'|'root', uiTheme?: 'light'|'dark', bundle?: string }}
  */
 function loadUiState() {
   if (typeof localStorage === 'undefined') return {};
diff --git a/configurator/src/lib/uiState.js b/configurator/src/lib/uiState.js
index 828c0f3c..3e459887 100644
--- a/configurator/src/lib/uiState.js
+++ b/configurator/src/lib/uiState.js
@@ -6,19 +6,20 @@
  * (older app versions, hand edits, corruption), so everything is checked
  * against the live taxonomy before it reaches the ui store.
  */
-import { BASIC_DOMAIN_IDS, DOMAIN_BY_ID } from './domains.js';
+import { DOMAIN_BY_ID } from './domains.js';
 import { BUNDLE_ORDER } from './bundles.js';
 
 export const UI_STORAGE_KEY = 'slashed-configurator/ui/v1';
 
 /**
  * Validate a raw localStorage payload into a partial ui-state patch.
- * Unknown / invalid fields are dropped; an invalid domain for the saved
- * mode is dropped too (the App-level guard would bounce it anyway, but a
- * clean restore avoids a visible redirect flash).
+ * Unknown / invalid fields are dropped; an unknown domain id is dropped too
+ * (the App-level fallback would bounce it anyway, but a clean restore avoids
+ * a visible redirect flash). A legacy `mode` field from older app versions is
+ * simply ignored — the flat IA has no complexity mode.
  *
  * @param {string|null} raw JSON string from localStorage (or null)
- * @returns {{ mode?: 'basic'|'advanced', domain?: string, outputMode?: 'layer'|'root' }}
+ * @returns {{ domain?: string, outputMode?: 'layer'|'root', uiTheme?: 'light'|'dark', bundle?: string }}
  */
 export function sanitiseUiState(raw) {
   const out = {};
@@ -31,16 +32,9 @@ export function sanitiseUiState(raw) {
   }
   if (!parsed || typeof parsed !== 'object') return out;
 
-  if (parsed.mode === 'basic' || parsed.mode === 'advanced') out.mode = parsed.mode;
-
-  const mode = out.mode ?? 'basic';
   const domain = parsed.domain;
-  if (typeof domain === 'string') {
-    const valid =
-      mode === 'basic'
-        ? domain === 'home' || BASIC_DOMAIN_IDS.includes(domain)
-        : DOMAIN_BY_ID.has(domain);
-    if (valid) out.domain = domain;
+  if (typeof domain === 'string' && (domain === 'home' || DOMAIN_BY_ID.has(domain))) {
+    out.domain = domain;
   }
 
   if (parsed.outputMode === 'layer' || parsed.outputMode === 'root') {
diff --git a/configurator/tests-e2e/a11y.spec.js b/configurator/tests-e2e/a11y.spec.js
index c1a40a8c..40deeff9 100644
--- a/configurator/tests-e2e/a11y.spec.js
+++ b/configurator/tests-e2e/a11y.spec.js
@@ -7,13 +7,17 @@ import { test, expect } from '@playwright/test';
 import { watchErrors, gotoClean, sideItem } from './helpers.js';
 
 const WIDTHS = [1600, 1000, 768, 480, 360];
-const BASIC_LABELS = ['Home', 'Colors', 'Typography', 'Spacing', 'Layout', 'Borders', 'Shadows', 'Themes', 'Install'];
+const NAV_LABELS = [
+  'Overview', 'Colors', 'Gradients', 'Typography', 'Spacing', 'Layout',
+  'Borders', 'Shadows', 'Motion', 'Effects', 'WCAG', 'Themes', 'Install',
+  'Misc', 'Cheatsheet',
+];
 
-test('no horizontal overflow on any basic panel at any width', async ({ page }) => {
+test('no horizontal overflow on any panel at any width', async ({ page }) => {
   for (const width of WIDTHS) {
     await page.setViewportSize({ width, height: 900 });
     await gotoClean(page);
-    for (const label of BASIC_LABELS) {
+    for (const label of NAV_LABELS) {
       await sideItem(page, label).click();
       const overflow = await page.evaluate(
         () => document.scrollingElement.scrollWidth - window.innerWidth
@@ -23,11 +27,12 @@ test('no horizontal overflow on any basic panel at any width', async ({ page })
   }
 });
 
-test('no horizontal overflow on advanced colors + cheatsheet at any width', async ({ page }) => {
+test('no horizontal overflow with the full catalogue expanded', async ({ page }) => {
   for (const width of WIDTHS) {
     await page.setViewportSize({ width, height: 900 });
     await gotoClean(page);
-    await page.keyboard.press('a');
+    await sideItem(page, 'Colors').click();
+    await page.locator('details.allvars summary').click();
     for (const label of ['Colors', 'Cheatsheet']) {
       await sideItem(page, label).click();
       const overflow = await page.evaluate(
@@ -40,7 +45,7 @@ test('no horizontal overflow on advanced colors + cheatsheet at any width', asyn
 
 test('every button exposes an accessible name', async ({ page }) => {
   await gotoClean(page);
-  for (const label of ['Home', 'Colors', 'Borders']) {
+  for (const label of ['Overview', 'Colors', 'Borders']) {
     await sideItem(page, label).click();
     const nameless = await page.evaluate(() =>
       [...document.querySelectorAll('button')]
@@ -53,8 +58,7 @@ test('every button exposes an accessible name', async ({ page }) => {
 
 test('segmented controls expose aria-pressed; info buttons aria-expanded', async ({ page }) => {
   await gotoClean(page);
-  // Header mode segment + output drawer segments: exactly one pressed each.
-  await expect(page.locator('[aria-label="Complexity mode"] [aria-pressed="true"]')).toHaveCount(1);
+  // Output drawer segments: exactly one pressed each.
   await expect(page.locator('.out [aria-label="Output view"] [aria-pressed="true"]')).toHaveCount(1);
   await expect(page.locator('.out [aria-label="Output format"] [aria-pressed="true"]')).toHaveCount(1);
   // ⓘ popover toggles aria-expanded and reveals the raw token.
@@ -67,17 +71,19 @@ test('segmented controls expose aria-pressed; info buttons aria-expanded', async
   await expect(row.locator('.row__raw')).toContainText('--sf-container-prose');
 });
 
-test('basic search scopes to the curated surface with an advanced jump', async ({ page }) => {
+test('search filters the catalogue and shows an empty state for no match', async ({ page }) => {
   const errors = watchErrors(page);
   await gotoClean(page);
   await sideItem(page, 'Spacing').click();
+  // A query collapses the panel to the filtered catalogue; the usage filter
+  // bar and at least one matching row are visible.
   await page.fill('#cfg-search', 'gap');
-  const more = page.locator('.panel__more');
-  await expect(more).toBeVisible();
-  await more.click();
-  await expect(page.locator('#cfg-search')).toHaveValue('gap'); // query survives the mode switch
-  await page.keyboard.press('b');
-  await sideItem(page, 'Spacing').click();
+  await expect(page.locator('.allvars__filters')).toBeVisible();
+  // Scope to catalogue rows (TokenGroup .group) — not any row on the page.
+  // During search the catalogue renders directly in the body, not inside the
+  // collapsed details, so .group .row is the correct cross-context selector.
+  await expect(page.locator('.group .row').first()).toBeVisible();
+  // A query with no matches shows the empty state, not a dead panel.
   await page.fill('#cfg-search', 'zzz-nothing-matches');
   await expect(page.locator('.panel__empty')).toBeVisible();
   expect(errors).toEqual([]);
diff --git a/configurator/tests-e2e/axe.spec.js b/configurator/tests-e2e/axe.spec.js
index 7c96d797..43c03825 100644
--- a/configurator/tests-e2e/axe.spec.js
+++ b/configurator/tests-e2e/axe.spec.js
@@ -36,7 +36,7 @@ for (const theme of ['dark', 'light']) {
       await expect(page.locator('html')).toHaveAttribute('data-theme', 'light');
     }
 
-    // Home (Basic landing).
+    // Overview (landing).
     expect(await audit(page)).toEqual([]);
 
     // Install panel (new bundle picker).
diff --git a/configurator/tests-e2e/import-export.spec.js b/configurator/tests-e2e/import-export.spec.js
index f864abc5..e43422bb 100644
--- a/configurator/tests-e2e/import-export.spec.js
+++ b/configurator/tests-e2e/import-export.spec.js
@@ -52,7 +52,7 @@ test('layer / :root format toggle reshapes the export', async ({ page }) => {
 test('hostile input value is sanitised before it reaches storage', async ({ page }) => {
   await gotoClean(page);
   await sideItem(page, 'Colors').click();
-  const input = page.locator('input[aria-label="--sf-color-primary-light value"]');
+  const input = page.locator('input.bcr__input[aria-label="--sf-color-primary-light value"]');
   await input.fill(';} body{background:red} :root{');
   await input.press('Enter');
   const value = (await page.evaluate(
diff --git a/configurator/tests-e2e/presets.spec.js b/configurator/tests-e2e/presets.spec.js
index 87d3201d..82554587 100644
--- a/configurator/tests-e2e/presets.spec.js
+++ b/configurator/tests-e2e/presets.spec.js
@@ -1,5 +1,5 @@
 /**
- * Style preset rows (Basic borders/shadows) and power knobs (Advanced):
+ * Style preset rows (borders / shadows) and the Settings "Scaling" knobs:
  * default detection, no cross-preset leftovers, single-undo-step semantics,
  * the shadow-strength encode/decode round-trip.
  */
@@ -34,44 +34,32 @@ test('hand-edited values show NO active preset (never a wrong one)', async ({ pa
   await gotoClean(page);
   await sideItem(page, 'Shadows').click();
   await page.locator('.presets__btn', { hasText: 'Strong' }).click();
-  await page.keyboard.press('a');
-  // Open the power-knobs section and hand-edit --sf-shadow-strength to a value
-  // that differs from what the Strong preset set, deactivating it.
-  const power = page.locator('details.power');
-  await power.locator('summary').click();
-  const knob = power.locator('.knob', { hasText: '--sf-shadow-strength' });
+  // Hand-edit --sf-shadow-strength to a value that differs from Strong,
+  // deactivating it. The knob lives in the Settings "Scaling" group.
+  const knob = page.locator('.knobs .knob', { hasText: '--sf-shadow-strength' });
   await knob.locator('input[type="number"]').fill('0.05');
   await knob.locator('input[type="number"]').press('Enter');
-  await page.keyboard.press('b');
-  await sideItem(page, 'Shadows').click();
   await expect(page.locator('.presets__btn[aria-pressed="true"]')).toHaveCount(0);
 });
 
-test('power knobs live only in Advanced, collapsed at the panel bottom', async ({ page }) => {
+test('scaling knobs live in Settings for scale domains, absent otherwise', async ({ page }) => {
   await gotoClean(page);
-  for (const label of ['Colors', 'Typography', 'Spacing', 'Borders', 'Shadows']) {
-    await sideItem(page, label).click();
-    await expect(page.locator('.knobs'), `${label}: no knobs in Basic`).toHaveCount(0);
-  }
-  await page.keyboard.press('a');
   await sideItem(page, 'Spacing').click();
-  const power = page.locator('details.power');
-  await expect(power).toHaveCount(1);
-  expect(await power.evaluate((el) => el.open)).toBe(false);
-  await power.locator('summary').click();
-  const knob = power.locator('.knob', { hasText: '--sf-space-scale' });
+  const knobs = page.locator('.knobs');
+  await expect(knobs).toBeVisible();
+  const knob = knobs.locator('.knob', { hasText: '--sf-space-scale' });
   await knob.locator('input[type="number"]').fill('1.3');
   await knob.locator('input[type="number"]').press('Enter');
   expect((await readOverrides(page))['--sf-space-scale']).toBe('1.3');
+  // Layout has no scaling knobs.
+  await sideItem(page, 'Layout').click();
+  await expect(page.locator('.knobs')).toHaveCount(0);
 });
 
 test('shadow-strength knob round-trips its dark-mode calc() encoding', async ({ page }) => {
   await gotoClean(page);
-  await page.keyboard.press('a');
   await sideItem(page, 'Shadows').click();
-  const power = page.locator('details.power');
-  await power.locator('summary').click();
-  const knob = power.locator('.knob', { hasText: '--sf-shadow-strength' });
+  const knob = page.locator('.knobs .knob', { hasText: '--sf-shadow-strength' });
   await knob.locator('input[type="number"]').fill('0.2');
   await knob.locator('input[type="number"]').press('Enter');
   expect((await readOverrides(page))['--sf-shadow-strength']).toBe('calc(0.2 + var(--sf-is-dark) * 0.17)');
diff --git a/configurator/tests-e2e/preview.spec.js b/configurator/tests-e2e/preview.spec.js
index 1cb7b200..348e7330 100644
--- a/configurator/tests-e2e/preview.spec.js
+++ b/configurator/tests-e2e/preview.spec.js
@@ -86,7 +86,7 @@ test('preview is live: editing a brand color repaints the sample button', async
   await page.locator('.side__item', { hasText: 'Colors' }).first().click();
   const btn = page.locator('.pv__btn--primary').first();
   const before = await btn.evaluate((el) => getComputedStyle(el).backgroundColor);
-  const input = page.locator('input[aria-label="--sf-color-primary-light value"]');
+  const input = page.locator('input.bcr__input[aria-label="--sf-color-primary-light value"]');
   await input.fill('oklch(0.5 0.2 140)');
   await input.press('Enter');
   await expect
diff --git a/configurator/tests-e2e/shell.spec.js b/configurator/tests-e2e/shell.spec.js
index 6e3d5deb..e0f986fb 100644
--- a/configurator/tests-e2e/shell.spec.js
+++ b/configurator/tests-e2e/shell.spec.js
@@ -1,18 +1,24 @@
 /**
- * Shell: Home landing, per-mode sidebar composition, mode/domain guards,
- * keyboard cycling — console-clean at desktop / narrow / phone widths.
+ * Shell: Overview landing, the flat (single-list) sidebar, the per-panel
+ * "Show all variables" disclosure, keyboard cycling and persistence —
+ * console-clean at desktop / narrow / phone widths.
  */
 import { test, expect } from '@playwright/test';
 import { watchErrors, gotoClean, sideItem } from './helpers.js';
 
-const BASIC_LABELS = ['Home', 'Colors', 'Typography', 'Spacing', 'Layout', 'Borders', 'Shadows', 'Themes', 'Install'];
-const ADVANCED_LABELS = ['Colors', 'Typography', 'Spacing', 'Layout', 'Borders', 'Shadows', 'Motion', 'Effects', 'WCAG', 'Themes', 'Install', 'Misc', 'Cheatsheet'];
+// Overview + the full domain taxonomy — every category is always reachable.
+const NAV_LABELS = [
+  'Overview', 'Colors', 'Gradients', 'Typography', 'Spacing', 'Layout',
+  'Borders', 'Shadows', 'Motion', 'Effects', 'WCAG', 'Themes', 'Install',
+  'Misc', 'Cheatsheet',
+];
 
-test('basic lands on Home with the setup checklist', async ({ page }) => {
+test('lands on the Overview with the setup checklist', async ({ page }) => {
   const errors = watchErrors(page);
   await gotoClean(page);
   await expect(page.locator('.home__title')).toHaveText('Set up your design');
-  await expect(page.locator('.side__item')).toHaveCount(BASIC_LABELS.length);
+  // The flat sidebar always shows Overview + every domain.
+  await expect(page.locator('.side__item')).toHaveCount(NAV_LABELS.length);
   await expect(page.locator('.home__row')).toHaveCount(8);
   // Clean slate: exactly one "start here" pointer, themes row reads "presets".
   await expect(page.locator('.home__count--start')).toHaveCount(1);
@@ -20,52 +26,57 @@ test('basic lands on Home with the setup checklist', async ({ page }) => {
   expect(errors).toEqual([]);
 });
 
-test('every destination renders console-clean in both modes at 3 widths', async ({ page }) => {
+test('every destination renders console-clean at 3 widths', async ({ page }) => {
   const errors = watchErrors(page);
   for (const width of [1600, 1000, 480]) {
     await page.setViewportSize({ width, height: 900 });
     await gotoClean(page);
-    for (const label of BASIC_LABELS) await sideItem(page, label).click();
-    await page.keyboard.press('a');
-    for (const label of ADVANCED_LABELS) await sideItem(page, label).click();
-    await page.keyboard.press('b');
+    for (const label of NAV_LABELS) await sideItem(page, label).click();
   }
   expect(errors).toEqual([]);
 });
 
-test('mode guards: home<->colors redirects, basic hides non-checklist domains', async ({ page }) => {
+test('every category panel leads with Settings, with All variables collapsed below', async ({ page }) => {
   await gotoClean(page);
-  await page.keyboard.press('a');
-  await expect(page.locator('.panel__title')).toHaveText('Colors');
-  await sideItem(page, 'Motion').click();
-  await page.keyboard.press('b');
-  await expect(page.locator('.home__title')).toBeVisible();
-  await expect(sideItem(page, 'Motion')).toHaveCount(0);
+  await sideItem(page, 'Colors').click();
+  // Inputs-first: the brand-colors card is visible before any raw catalogue.
+  await expect(page.locator('.panel__card', { hasText: 'Brand & status colors' })).toBeVisible();
+  // The full catalogue lives in a collapsed disclosure.
+  const allvars = page.locator('details.allvars');
+  await expect(allvars).toHaveCount(1);
+  expect(await allvars.evaluate((el) => el.open)).toBe(false);
+  await allvars.locator('summary').click();
+  expect(await allvars.evaluate((el) => el.open)).toBe(true);
+  await expect(allvars.locator('.allvars__body')).toBeVisible();
+});
+
+test('a domain with no curated Settings shows the catalogue inline', async ({ page }) => {
+  await gotoClean(page);
+  await sideItem(page, 'Misc').click();
+  // Misc has no curated inputs, so it never hides behind a disclosure.
+  await expect(page.locator('details.allvars')).toHaveCount(0);
+  await expect(page.locator('.allvars__filters')).toBeVisible();
 });
 
-test('[ and ] cycle the mode-appropriate domain list with wrap-around', async ({ page }) => {
+test('[ and ] cycle Overview + every domain with wrap-around', async ({ page }) => {
   const errors = watchErrors(page);
   await gotoClean(page);
   await page.keyboard.press(']');
   await expect(page.locator('.panel__title')).toHaveText('Colors');
   await page.keyboard.press('[');
   await expect(page.locator('.home__title')).toBeVisible();
-  await page.keyboard.press('['); // wraps backwards to the last basic domain (Install)
-  await expect(page.locator('main')).toContainText(/install/i);
-  // 20 forward presses in basic stay inside the checklist and end on a valid view
-  for (let i = 0; i < 20; i++) await page.keyboard.press(']');
+  await page.keyboard.press('['); // wraps backwards to the last domain (Cheatsheet)
   await expect(page.locator('.side__item.side__item--on')).toHaveCount(1);
+  await expect(page.locator('.side__item.side__item--on')).toContainText('Cheatsheet');
   expect(errors).toEqual([]);
 });
 
-test('mode, domain and output format persist across reload (validated restore)', async ({ page }) => {
+test('domain and output format persist across reload (validated restore)', async ({ page }) => {
   await gotoClean(page);
-  await page.keyboard.press('a');
   await sideItem(page, 'Motion').click();
   await page.locator('.out [aria-label="Output format"] button', { hasText: ':root' }).click();
   await page.reload();
   await expect(page.locator('.panel__title')).toHaveText('Motion');
-  await expect(page.locator('[aria-label="Complexity mode"] button', { hasText: 'Advanced' })).toHaveAttribute('aria-pressed', 'true');
   await expect(page.locator('.out [aria-label="Output format"] button', { hasText: ':root' })).toHaveAttribute('aria-pressed', 'true');
   // Corrupt prefs fall back to the defaults instead of crashing.
   await page.evaluate(() => localStorage.setItem('slashed-configurator/ui/v1', '{broken'));
@@ -73,14 +84,13 @@ test('mode, domain and output format persist across reload (validated restore)',
   await expect(page.locator('.home__title')).toBeVisible();
 });
 
-test('rapid mode toggling never corrupts the active domain', async ({ page }) => {
-  const errors = watchErrors(page);
+test('a legacy persisted mode field is ignored on restore', async ({ page }) => {
   await gotoClean(page);
-  await sideItem(page, 'Borders').click();
-  for (let i = 0; i < 10; i++) await page.keyboard.press(i % 2 ? 'b' : 'a');
-  const active = page.locator('.side__item.side__item--on');
-  await expect(active).toHaveCount(1);
-  // Borders is valid in both modes, so it must survive every toggle.
-  await expect(active).toContainText('Borders');
-  expect(errors).toEqual([]);
+  // Older app versions stored a complexity mode; the flat IA must ignore it
+  // and still restore the saved domain cleanly.
+  await page.evaluate(() =>
+    localStorage.setItem('slashed-configurator/ui/v1', JSON.stringify({ mode: 'basic', domain: 'motion' }))
+  );
+  await page.reload();
+  await expect(page.locator('.panel__title')).toHaveText('Motion');
 });
diff --git a/configurator/tests-e2e/undo-redo.spec.js b/configurator/tests-e2e/undo-redo.spec.js
index 4b41c08d..a6adea9f 100644
--- a/configurator/tests-e2e/undo-redo.spec.js
+++ b/configurator/tests-e2e/undo-redo.spec.js
@@ -1,6 +1,6 @@
 /**
  * History: a chain of five mixed operations (two style presets, a scale
- * generator apply, a power knob, a theme preset) must unwind to the empty
+ * generator apply, a scaling knob, a theme preset) must unwind to the empty
  * state in exactly five undos and replay byte-for-byte in five redos.
  */
 import { test, expect } from '@playwright/test';
@@ -28,12 +28,9 @@ test('5-step mixed chain unwinds and replays exactly', async ({ page }) => {
   await gen.locator('button', { hasText: /Apply scale/ }).first().click();
   snapshots.push(stableSnapshot(await readOverrides(page)));
 
-  // 4. Power knob (advanced)
-  await page.keyboard.press('a');
+  // 4. Scaling knob (Settings "Scaling" group)
   await sideItem(page, 'Spacing').click();
-  const power = page.locator('details.power');
-  await power.locator('summary').click();
-  const knob = power.locator('.knob', { hasText: '--sf-space-scale' });
+  const knob = page.locator('.knobs .knob', { hasText: '--sf-space-scale' });
   await knob.locator('input[type="number"]').fill('1.3');
   await knob.locator('input[type="number"]').press('Enter');
   snapshots.push(stableSnapshot(await readOverrides(page)));
diff --git a/configurator/tests/basics.test.js b/configurator/tests/basics.test.js
index 3d485473..46b3b0dd 100644
--- a/configurator/tests/basics.test.js
+++ b/configurator/tests/basics.test.js
@@ -10,21 +10,21 @@
 import { test, describe } from 'node:test';
 import assert from 'node:assert/strict';
 import { BASIC_BY_DOMAIN, basicControlTokens, basicTokenNames } from '../src/lib/basics.js';
-import { BASIC_DOMAIN_IDS, DOMAIN_BY_ID } from '../src/lib/domains.js';
+import { OVERVIEW_DOMAIN_IDS, DOMAIN_BY_ID } from '../src/lib/domains.js';
 import data from '../src/data/api-index.generated.json' with { type: 'json' };
 
 const tokenByName = new Map(data.tokens.map((t) => [t.name, t]));
 
 describe('BASIC_BY_DOMAIN structure', () => {
-  test('every key is a Basic domain id', () => {
+  test('every key is an overview domain id', () => {
     for (const id of Object.keys(BASIC_BY_DOMAIN)) {
-      assert.ok(BASIC_DOMAIN_IDS.includes(id), `${id} is in BASIC_DOMAIN_IDS`);
+      assert.ok(OVERVIEW_DOMAIN_IDS.includes(id), `${id} is in OVERVIEW_DOMAIN_IDS`);
       assert.ok(DOMAIN_BY_ID.has(id), `${id} is a known domain`);
     }
   });
 
-  test('every non-color, non-tool Basic domain has curated groups', () => {
-    for (const id of BASIC_DOMAIN_IDS) {
+  test('every non-color, non-tool curated domain has groups', () => {
+    for (const id of OVERVIEW_DOMAIN_IDS) {
       const d = DOMAIN_BY_ID.get(id);
       if (d.tool || d.brandColors) continue; // themes (tool) + colors (brand rows)
       const def = BASIC_BY_DOMAIN[id];
diff --git a/configurator/tests/domains.test.js b/configurator/tests/domains.test.js
index 90d83bdc..ab8af36f 100644
--- a/configurator/tests/domains.test.js
+++ b/configurator/tests/domains.test.js
@@ -8,7 +8,7 @@
  */
 import { test, describe } from 'node:test';
 import assert from 'node:assert/strict';
-import { domainOf, DOMAINS, DOMAIN_BY_ID, BASIC_DOMAIN_IDS, KNOBS_BY_DOMAIN } from '../src/lib/domains.js';
+import { domainOf, DOMAINS, DOMAIN_BY_ID, OVERVIEW_DOMAIN_IDS, KNOBS_BY_DOMAIN } from '../src/lib/domains.js';
 import data from '../src/data/api-index.generated.json' with { type: 'json' };
 
 const tokens = data.tokens;
@@ -35,41 +35,41 @@ describe('DOMAINS metadata', () => {
   });
 });
 
-describe('BASIC mode surface', () => {
-  test('every BASIC_DOMAIN_IDS entry is a real domain id', () => {
-    for (const id of BASIC_DOMAIN_IDS) {
+describe('Overview surface', () => {
+  test('every OVERVIEW_DOMAIN_IDS entry is a real domain id', () => {
+    for (const id of OVERVIEW_DOMAIN_IDS) {
       assert.ok(DOMAIN_BY_ID.has(id), `${id} is a known domain`);
     }
   });
 
-  test('basic ids are unique', () => {
-    assert.equal(new Set(BASIC_DOMAIN_IDS).size, BASIC_DOMAIN_IDS.length);
+  test('overview ids are unique', () => {
+    assert.equal(new Set(OVERVIEW_DOMAIN_IDS).size, OVERVIEW_DOMAIN_IDS.length);
   });
 
-  test('every non-tool basic domain has intro copy', () => {
-    for (const id of BASIC_DOMAIN_IDS) {
+  test('every non-tool overview domain has intro copy', () => {
+    for (const id of OVERVIEW_DOMAIN_IDS) {
       const d = DOMAIN_BY_ID.get(id);
       if (d.tool) continue;
       assert.ok(
         typeof d.intro === 'string' && d.intro.trim().length > 0,
-        `${id} has non-empty intro copy for its Basic panel`
+        `${id} has non-empty intro copy for its panel`
       );
     }
   });
 
-  test('every domain with power knobs has powerIntro copy', () => {
+  test('every domain with scaling knobs has scaleIntro copy', () => {
     for (const [id, knobs] of Object.entries(KNOBS_BY_DOMAIN)) {
       if (!knobs.length) continue;
       const d = DOMAIN_BY_ID.get(id);
       assert.ok(d, `${id} (KNOBS_BY_DOMAIN key) is a known domain`);
       assert.ok(
-        typeof d.powerIntro === 'string' && d.powerIntro.trim().length > 0,
-        `${id} has non-empty powerIntro for its Power-knobs group`
+        typeof d.scaleIntro === 'string' && d.scaleIntro.trim().length > 0,
+        `${id} has non-empty scaleIntro for its Scaling group`
       );
     }
   });
 
-  test('every power knob token exists in the catalogue', () => {
+  test('every scaling knob token exists in the catalogue', () => {
     const known = new Set(tokens.map((t) => t.name));
     for (const knobs of Object.values(KNOBS_BY_DOMAIN)) {
       for (const k of knobs) {
diff --git a/configurator/tests/ui-state.test.js b/configurator/tests/ui-state.test.js
index 5801aa0c..210ac11a 100644
--- a/configurator/tests/ui-state.test.js
+++ b/configurator/tests/ui-state.test.js
@@ -4,29 +4,33 @@
 import { test, describe } from 'node:test';
 import assert from 'node:assert/strict';
 import { sanitiseUiState, UI_STORAGE_KEY } from '../src/lib/uiState.js';
-import { BASIC_DOMAIN_IDS } from '../src/lib/domains.js';
+import { DOMAINS } from '../src/lib/domains.js';
 
 describe('sanitiseUiState', () => {
-  test('round-trips a fully valid payload', () => {
-    const raw = JSON.stringify({ mode: 'advanced', domain: 'motion', outputMode: 'root' });
-    assert.deepEqual(sanitiseUiState(raw), { mode: 'advanced', domain: 'motion', outputMode: 'root' });
+  test('round-trips a valid payload', () => {
+    const raw = JSON.stringify({ domain: 'motion', outputMode: 'root' });
+    assert.deepEqual(sanitiseUiState(raw), { domain: 'motion', outputMode: 'root' });
   });
 
-  test('accepts home and every checklist domain in basic mode', () => {
-    for (const domain of ['home', ...BASIC_DOMAIN_IDS]) {
-      const raw = JSON.stringify({ mode: 'basic', domain });
+  test('accepts home and every domain id', () => {
+    for (const domain of ['home', ...DOMAINS.map((d) => d.id)]) {
+      const raw = JSON.stringify({ domain });
       assert.equal(sanitiseUiState(raw).domain, domain, domain);
     }
   });
 
-  test('drops a domain invalid for the saved mode', () => {
-    // motion is advanced-only; home does not exist in advanced.
-    assert.equal(sanitiseUiState(JSON.stringify({ mode: 'basic', domain: 'motion' })).domain, undefined);
-    assert.equal(sanitiseUiState(JSON.stringify({ mode: 'advanced', domain: 'home' })).domain, undefined);
+  test('ignores a legacy mode field (flat IA has no complexity mode)', () => {
+    const out = sanitiseUiState(JSON.stringify({ mode: 'advanced', domain: 'motion' }));
+    assert.equal(out.mode, undefined);
+    assert.equal(out.domain, 'motion');
+  });
+
+  test('drops an unknown domain id', () => {
+    assert.equal(sanitiseUiState(JSON.stringify({ domain: 'nope' })).domain, undefined);
   });
 
   test('drops unknown values field by field', () => {
-    const raw = JSON.stringify({ mode: 'turbo', domain: 'nope', outputMode: 'yaml', extra: 1 });
+    const raw = JSON.stringify({ domain: 'nope', outputMode: 'yaml', extra: 1 });
     assert.deepEqual(sanitiseUiState(raw), {});
   });