diff --git a/client/src/components/pipeline/CanonCard.jsx b/client/src/components/pipeline/CanonCard.jsx
index 751a1c614e..011808f238 100644
--- a/client/src/components/pipeline/CanonCard.jsx
+++ b/client/src/components/pipeline/CanonCard.jsx
@@ -11,7 +11,7 @@
  */
 
 import { useEffect, useRef, useState } from 'react';
-import { Loader2, ImagePlus, ImageUp, WandSparkles, Lock, Unlock, Shirt, Plus, Trash2, X, Star, Square, BookOpen, ScanText } from 'lucide-react';
+import { Loader2, ImagePlus, ImageUp, WandSparkles, Lock, Unlock, Shirt, Plus, Trash2, X, Star, Square, ScanText } from 'lucide-react';
 import useMediaJobProgress from '../../hooks/useMediaJobProgress';
 import useRowDraft from '../../hooks/useRowDraft';
 import useFieldDraft from '../../hooks/useFieldDraft';
@@ -209,23 +209,6 @@ function RevealTimingField({ entry, editable, onPatch }) {
   );
 }
 
-// Collapsible wrapper for the universe-only character details panel
-// (CharacterDetailEditor + CharacterReferenceSheetPanel). Single toggle so the
-// card stays terse by default — the user opens it only when filling in
-// novelist / graphic-novelist fields or generating a reference sheet.
-function CharacterDetailsToggle({ children }) {
-  return (
-    <CollapsibleSection
-      className="mt-2"
-      icon={BookOpen}
-      label="Character details"
-      summary="+ reference sheet"
-    >
-      {children}
-    </CollapsibleSection>
-  );
-}
-
 function SourceSeriesChip({ sourceSeriesId, seriesName }) {
   return (
     <span
@@ -466,6 +449,31 @@ export default function CanonCard({
     </div>
   );
 
+  // Three-state thumbnail slot (pending / empty / completed). Empty state
+  // shows a placeholder box with a Render button that fires the same handler
+  // as the actions-column Image button — surfaces a one-click affordance for
+  // canon entries that haven't been visualized yet. Pending shows the live
+  // diffusion spinner from MediaJobThumb (also mirrored in the footer's
+  // ref-grid for live-progress detail).
+  // Lock no longer gates rendering — see the `blockedByLock` comment above.
+  // Render still requires a description (the prompt source) + an actual
+  // handler from the parent. Pending state is checked inside EntryThumbSlot.
+
+  const showCharacterSheet = kind.key === 'characters' && !!characterExtensions && !!onPatchEntry;
+  const canRender = !!onRender && !!description.trim();
+  const thumbnail = (
+    <EntryThumbSlot
+      size={showCharacterSheet ? 'sheet' : 'sm'}
+      inFlightJobId={inFlightJobId || null}
+      imageRefs={refs}
+      primaryImageRef={entry.primaryImageRef || null}
+      alt={`${entry.name} reference`}
+      onPreview={onPreview ? (visibleFilename) => onPreview(visibleFilename || thumbnailRef) : null}
+      onRender={onRender}
+      canRender={canRender}
+    />
+  );
+
   const body = (
     <>
       {tags.length > 0 ? (
@@ -514,7 +522,7 @@ export default function CanonCard({
         editable={!!onPatchEntry && !locked}
         onPatch={(patch) => onPatchEntry?.(entry.id, patch)}
       />
-      {kind.key === 'characters' ? (
+      {kind.key === 'characters' && !showCharacterSheet ? (
         <WardrobeSection
           wardrobes={Array.isArray(entry.wardrobes) ? entry.wardrobes : []}
           editable={!!onPatchEntry && !locked}
@@ -524,16 +532,22 @@ export default function CanonCard({
       {/* Universe-only: extended character detail editor + AI expand action.
           Hidden when the caller didn't pass `characterExtensions` (pipeline
           series view). Locked characters render read-only inputs. */}
-      {kind.key === 'characters' && characterExtensions && onPatchEntry ? (
-        <CharacterDetailsToggle>
-          <CharacterDetailEditor
-            entry={entry}
-            universeId={characterExtensions.universeId}
-            characters={characterExtensions.castList || []}
-            onPatch={(patch) => onPatchEntry(entry.id, patch)}
-            onExpand={characterExtensions.onExpandCharacter ? () => characterExtensions.onExpandCharacter(entry.id) : null}
-            expanding={!!characterExtensions.expanding}
-            disabled={locked}
+      {showCharacterSheet ? (
+        <CharacterDetailEditor
+          key={entry.id}
+          portrait={thumbnail}
+          entry={entry}
+          universeId={characterExtensions.universeId}
+          characters={characterExtensions.castList || []}
+          onPatch={(patch) => onPatchEntry(entry.id, patch)}
+          onExpand={characterExtensions.onExpandCharacter ? () => characterExtensions.onExpandCharacter(entry.id) : null}
+          expanding={!!characterExtensions.expanding}
+          disabled={locked}
+        >
+          <WardrobeSection
+            wardrobes={Array.isArray(entry.wardrobes) ? entry.wardrobes : []}
+            editable={!locked}
+            onChange={(next) => onPatchEntry(entry.id, { wardrobes: next })}
           />
           <CharacterReferenceSheetPanel
             universeId={characterExtensions.universeId}
@@ -552,7 +566,7 @@ export default function CanonCard({
               universeId={characterExtensions.universeId}
             />
           </div>
-        </CharacterDetailsToggle>
+        </CharacterDetailEditor>
       ) : null}
       {/* Universe-only: object↔character attachment editor (#1288). Hidden when
           the caller didn't pass `objectExtensions` (pipeline series view).
@@ -750,32 +764,11 @@ export default function CanonCard({
     </>
   );
 
-  // Three-state thumbnail slot (pending / empty / completed). Empty state
-  // shows a placeholder box with a Render button that fires the same handler
-  // as the actions-column Image button — surfaces a one-click affordance for
-  // canon entries that haven't been visualized yet. Pending shows the live
-  // diffusion spinner from MediaJobThumb (also mirrored in the footer's
-  // ref-grid for live-progress detail).
-  // Lock no longer gates rendering — see the `blockedByLock` comment above.
-  // Render still requires a description (the prompt source) + an actual
-  // handler from the parent. Pending state is checked inside EntryThumbSlot.
-  const canRender = !!onRender && !!description.trim();
-  const thumbnail = (
-    <EntryThumbSlot
-      inFlightJobId={inFlightJobId || null}
-      imageRefs={refs}
-      primaryImageRef={entry.primaryImageRef || null}
-      alt={`${entry.name} reference`}
-      onPreview={onPreview ? (visibleFilename) => onPreview(visibleFilename || thumbnailRef) : null}
-      onRender={onRender}
-      canRender={canRender}
-    />
-  );
 
   return (
     <EntryCard
       locked={locked}
-      thumbnail={thumbnail}
+      thumbnail={showCharacterSheet ? null : thumbnail}
       title={title}
       body={body}
       actions={actions}
diff --git a/client/src/components/universe/CharacterDetailEditor.jsx b/client/src/components/universe/CharacterDetailEditor.jsx
index 215b8235f1..8a2d7e9a72 100644
--- a/client/src/components/universe/CharacterDetailEditor.jsx
+++ b/client/src/components/universe/CharacterDetailEditor.jsx
@@ -10,7 +10,7 @@
  * only knows the field shape.
  */
 
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useId, useRef, useState } from 'react';
 import {
   Plus, Trash2, WandSparkles, Loader2,
   Palette, Hand, Smile, Package, BookOpen, Eye, Activity, Users, Swords,
@@ -50,7 +50,8 @@ import {
   startFineTuningJob,
 } from '../../services/apiVoice';
 import VoicePicker from '../voice/VoicePicker';
-import CollapsibleSection from '../ui/CollapsibleSection';
+import TabPills from '../ui/TabPills';
+import useDrawerTab from '../../hooks/useDrawerTab';
 
 const SECTIONS = Object.freeze([
   {
@@ -245,22 +246,18 @@ function ListRow({ row, idx, columns, swatchHex, onChange, onDelete, disabled })
   );
 }
 
-// Local wrapper over the shared primitive so the three call sites below keep
-// their boxed chrome (bordered card, header/body padding) in one place.
-function BoxedSection({ icon, label, summary, defaultOpen = false, children }) {
+// Sheet cards stay open: navigation groups the form instead of nesting disclosures.
+function BoxedSection({ icon: Icon, label, summary, children }) {
+  const headingId = useId();
   return (
-    <CollapsibleSection
-      size="md"
-      icon={icon}
-      label={label}
-      summary={summary ? `— ${summary}` : ''}
-      defaultOpen={defaultOpen}
-      className="rounded border border-port-border bg-port-bg/50"
-      buttonClassName="px-2 py-1.5"
-      bodyClassName="px-2.5 pb-2.5 pt-1 space-y-2"
-    >
-      {children}
-    </CollapsibleSection>
+    <section aria-labelledby={headingId} className="min-w-0 rounded-lg border border-port-border bg-port-bg/50 overflow-hidden">
+      <div className="flex flex-wrap items-center gap-2 border-b border-port-border bg-port-card px-3 py-2.5">
+        {Icon ? <Icon size={14} className="shrink-0 text-port-accent" /> : null}
+        <h4 id={headingId} className="text-xs font-semibold text-gray-200">{label}</h4>
+        {summary ? <span className="ml-auto text-[10px] text-gray-500">{summary}</span> : null}
+      </div>
+      <div className="p-3 space-y-3">{children}</div>
+    </section>
   );
 }
 
@@ -1379,93 +1376,120 @@ function IdentityPackSection({ entry, onPatch, disabled }) {
   );
 }
 
-export default function CharacterDetailEditor({ entry, universeId = null, onPatch, onExpand, expanding = false, disabled = false, characters = [] }) {
+const SHEET_PAGES = [
+  { id: 'attributes', label: 'Attributes', icon: Activity },
+  { id: 'story', label: 'Story', icon: BookOpen },
+  { id: 'appearance', label: 'Appearance', icon: Eye },
+  { id: 'voice', label: 'Voice', icon: Mic },
+];
+const SHEET_PAGE_IDS = SHEET_PAGES.map((page) => page.id);
+
+export default function CharacterDetailEditor({ entry, universeId = null, onPatch, onExpand, expanding = false, disabled = false, characters = [], portrait = null, children }) {
+  const [activePage, setActivePage] = useDrawerTab(`castSheet-${entry?.id}`, 'attributes', SHEET_PAGE_IDS);
+  // Keep visited pages mounted so pending list rows and local voice drafts survive
+  // navigation. Unvisited production tools do not load until explicitly opened.
+  const [visited, setVisited] = useState({});
+  useEffect(() => {
+    setVisited((previous) => previous[activePage] ? previous : { ...previous, [activePage]: true });
+  }, [activePage]);
   if (!entry) return null;
 
   const patchField = (name, value) => onPatch?.({ [name]: value });
-  const patchList = (field, next) => onPatch?.({ [field]: next });
-
-  const sectionSummary = (section) => {
-    const filled = section.fields.filter((f) => (entry[f.name] || '').trim()).length;
-    return filled ? `${filled}/${section.fields.length} filled` : 'empty';
+  const renderFields = (fields) => fields.map((field) => (
+    <DraftField key={field.name} field={field} value={entry[field.name]}
+      onCommit={(value) => patchField(field.name, value)} disabled={disabled} idPrefix={entry.id} />
+  ));
+  const proseSection = (key) => {
+    const section = SECTIONS.find((item) => item.key === key);
+    const filled = section.fields.filter((field) => (entry[field.name] || '').trim()).length;
+    return <BoxedSection icon={section.icon} label={section.label} summary={`${filled}/${section.fields.length} filled`}>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">{renderFields(section.fields)}</div>
+    </BoxedSection>;
   };
+  const listSection = (key) => <ListSectionEditor section={LIST_SECTIONS.find((item) => item.key === key)}
+    entry={entry} onPatchList={patchField} disabled={disabled} />;
 
   return (
-    <div className="mt-2 space-y-1.5">
-      {onExpand ? (
-        <button
-          type="button"
-          onClick={onExpand}
-          disabled={expanding || disabled}
-          className="inline-flex items-center gap-1.5 px-2 py-1 text-[10px] rounded border border-port-accent/40 bg-port-accent/10 text-port-accent hover:bg-port-accent/20 disabled:opacity-40"
-          title={`Fill blank fields on ${entry.name} via one LLM call. Populated fields are preserved.`}
-        >
-          {expanding ? <Loader2 size={10} className="animate-spin" /> : <WandSparkles size={10} />}
-          AI: expand character
-        </button>
-      ) : null}
-
-      {SECTIONS.map((section) => (
-        <BoxedSection
-          key={section.key}
-          icon={section.icon}
-          label={section.label}
-          summary={sectionSummary(section)}
-        >
-          {section.fields.map((field) => (
-            <DraftField
-              key={field.name}
-              field={field}
-              value={entry[field.name]}
-              onCommit={(v) => patchField(field.name, v)}
-              disabled={disabled}
-              idPrefix={entry.id}
-            />
+    <div className="mt-3 space-y-3">
+      <div className="flex flex-wrap items-center justify-between gap-2 border-t border-port-border pt-3">
+        <h3 className="text-sm font-semibold text-port-accent">Character sheet</h3>
+        {onExpand ? (
+          <button type="button" onClick={onExpand} disabled={expanding || disabled}
+            className="inline-flex min-h-[40px] items-center gap-1.5 px-3 py-2 text-xs rounded border border-port-accent/40 bg-port-accent/10 text-port-accent hover:bg-port-accent/20 disabled:opacity-40"
+            title={`Fill blank fields on ${entry.name} via one LLM call. Populated fields are preserved.`}>
+            {expanding ? <Loader2 size={14} className="animate-spin" /> : <WandSparkles size={14} />}
+            AI: expand character
+          </button>
+        ) : null}
+      </div>
+      <div className="grid grid-cols-1 gap-4 xl:grid-cols-[240px_minmax(0,1fr)] items-start">
+        <aside className="min-w-0 space-y-3" aria-label={`${entry.name} identity`}>
+          <div className={`rounded-lg border border-port-accent/30 bg-port-accent/5 p-3 xl:p-4 grid gap-3 ${portrait ? 'grid-cols-[80px_minmax(0,1fr)] xl:grid-cols-1' : 'grid-cols-1'}`}>
+            {portrait ? <div className="flex justify-center">{portrait}</div> : null}
+            <div className="space-y-3">
+              <div className="xl:text-center">
+                <p className="text-[10px] uppercase tracking-widest text-port-accent">Universe cast</p>
+                <p className="text-lg font-semibold text-white">Identity</p>
+                <p className="text-xs text-gray-500">{disabled ? 'Locked character' : 'Edits save when you leave a field'}</p>
+              </div>
+              {renderFields(SECTIONS[0].fields.slice(0, 3))}
+            </div>
+          </div>
+          {listSection('stats')}
+        </aside>
+        <div className="min-w-0 space-y-3">
+          <TabPills tabs={SHEET_PAGES} activeTab={activePage} onChange={setActivePage}
+            variant="pills" size="sm" mobileDropdown ariaLabel={`${entry.name} sheet page`} />
+          {SHEET_PAGES.map((page) => (
+            <div key={page.id} role="tabpanel" aria-label={page.label} hidden={activePage !== page.id}>
+              {activePage === page.id || visited[page.id] ? (
+                <div className="space-y-3">
+                  {page.id === 'attributes' ? <>
+                    {proseSection('personality')}
+                    <ArcFrameworkControls entry={entry} onPatch={onPatch} disabled={disabled} idPrefix={entry.id} />
+                  </> : null}
+                  {page.id === 'story' ? <>
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-3 items-start">
+                      {proseSection('framework')}
+                      <div className="min-w-0 space-y-3">
+                        <RelationshipsSection entry={entry} characters={characters} onPatch={onPatch} disabled={disabled} />
+                        {listSection('secrets')}
+                      </div>
+                    </div>
+                    <PsychologySection entry={entry} onPatch={onPatch} disabled={disabled} />
+                  </> : null}
+                  {page.id === 'appearance' ? <>
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-3 items-start">
+                      <div className="min-w-0 space-y-3">
+                        {proseSection('visualIdentity')}
+                        <BoxedSection icon={Eye} label="Visual notes">{renderFields([SECTIONS[0].fields[5]])}</BoxedSection>
+                        {listSection('colorPalette')}
+                        {listSection('props')}
+                      </div>
+                      <div className="min-w-0 space-y-3">
+                        {listSection('expressions')}
+                        {listSection('handGestures')}
+                        <IdentityPackSection entry={entry} onPatch={onPatch} disabled={disabled} />
+                      </div>
+                    </div>
+                    {children}
+                  </> : null}
+                  {page.id === 'voice' ? <>
+                    <BoxedSection icon={Mic} label="Speech & delivery">
+                      {renderFields(SECTIONS[0].fields.slice(3, 5))}
+                      <VoicePicker label="Voice (TTS)" value={entry.voiceId || null}
+                        onChange={(value) => patchField('voiceId', value)} disabled={disabled}
+                        placeholder="Project default voice" previewText={entry.name ? `Hi, I'm ${entry.name}. This is how I sound.` : undefined} />
+                    </BoxedSection>
+                    <VoiceCanonSection entry={entry} onPatch={onPatch} disabled={disabled} />
+                    <VoiceProfileSection universeId={universeId} entry={entry} disabled={disabled} />
+                  </> : null}
+                </div>
+              ) : null}
+            </div>
           ))}
-          {section.key === 'identity' ? (
-            <VoicePicker
-              label="Voice (TTS)"
-              value={entry.voiceId || null}
-              onChange={(v) => patchField('voiceId', v)}
-              disabled={disabled}
-              placeholder="Project default voice"
-              previewText={entry.name ? `Hi, I'm ${entry.name}. This is how I sound.` : undefined}
-            />
-          ) : null}
-        </BoxedSection>
-      ))}
-
-      <ArcFrameworkControls
-        entry={entry}
-        onPatch={onPatch}
-        disabled={disabled}
-        idPrefix={entry.id}
-      />
-
-      <PsychologySection entry={entry} onPatch={onPatch} disabled={disabled} />
-
-      <VoiceCanonSection entry={entry} onPatch={onPatch} disabled={disabled} />
-
-      <VoiceProfileSection universeId={universeId} entry={entry} disabled={disabled} />
-
-      <IdentityPackSection entry={entry} onPatch={onPatch} disabled={disabled} />
-
-      <RelationshipsSection
-        entry={entry}
-        characters={characters}
-        onPatch={onPatch}
-        disabled={disabled}
-      />
-
-      {LIST_SECTIONS.map((section) => (
-        <ListSectionEditor
-          key={section.key}
-          section={section}
-          entry={entry}
-          onPatchList={patchList}
-          disabled={disabled}
-        />
-      ))}
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/client/src/components/universe/CharacterDetailEditor.test.jsx b/client/src/components/universe/CharacterDetailEditor.test.jsx
index 1f51c96ff1..2986a4c704 100644
--- a/client/src/components/universe/CharacterDetailEditor.test.jsx
+++ b/client/src/components/universe/CharacterDetailEditor.test.jsx
@@ -1,6 +1,9 @@
 import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render as rtlRender, screen, fireEvent, waitFor } from '@testing-library/react';
 import CharacterDetailEditor from './CharacterDetailEditor';
+import { MemoryRouter, useLocation } from 'react-router';
+
+const render = (ui, options) => rtlRender(ui, { wrapper: MemoryRouter, ...options });
 
 // Mock VoicePicker — it pulls in the voice API/socket layer the relationship
 // tests don't care about.
@@ -29,10 +32,9 @@ const ARIA = { id: 'chr-aria', name: 'Aria' };
 const BRAM = { id: 'chr-bram', name: 'Bram' };
 const CASS = { id: 'chr-cass', name: 'Cass' };
 
-// CollapsibleSection starts closed — open the Relationships one by clicking its
-// header button.
+// Story groups relationships, secrets, framework, and psychology on one sheet page.
 const openRelationships = () => {
-  fireEvent.click(screen.getByRole('button', { name: /Relationships/i }));
+  fireEvent.click(screen.getByRole('tab', { name: 'Story' }));
 };
 
 describe('CharacterDetailEditor — Relationships (#1287)', () => {
@@ -127,19 +129,19 @@ describe('CharacterDetailEditor — Relationships (#1287)', () => {
       ],
     };
     render(<CharacterDetailEditor entry={entry} characters={[ARIA, BRAM, CASS]} onPatch={() => {}} />);
-    // Summary renders inside the collapsed header.
+    openRelationships();
     expect(screen.getByText(/2 links · 1 opposing/i)).toBeInTheDocument();
   });
 });
 
 describe('CharacterDetailEditor — character framework (#2175)', () => {
-  const openArc = () => fireEvent.click(screen.getByRole('button', { name: /Arc type & sliders/i }));
+  const openArc = () => expect(screen.getByRole('heading', { name: /Arc type & sliders/i })).toBeInTheDocument();
 
   it('renders the arc-type select seeded from the entry and patches on change', () => {
     const onPatch = vi.fn();
     render(<CharacterDetailEditor entry={{ ...ARIA, arcType: 'positive' }} characters={[ARIA]} onPatch={onPatch} />);
     openArc();
-    const select = screen.getByLabelText(/Arc type/i);
+    const select = screen.getByRole('combobox', { name: /^Arc type$/i });
     expect(select).toHaveValue('positive');
     fireEvent.change(select, { target: { value: 'negative' } });
     expect(onPatch).toHaveBeenCalledWith({ arcType: 'negative' });
@@ -167,7 +169,7 @@ describe('CharacterDetailEditor — character framework (#2175)', () => {
     const onPatch = vi.fn();
     const entry = { ...ARIA, secrets: ['forged the charter'] };
     render(<CharacterDetailEditor entry={entry} characters={[ARIA]} onPatch={onPatch} />);
-    fireEvent.click(screen.getByRole('button', { name: /Secrets/i }));
+    fireEvent.click(screen.getByRole('tab', { name: 'Story' }));
     // Existing secret is rendered in its row input.
     const input = screen.getByDisplayValue('forged the charter');
     fireEvent.change(input, { target: { value: 'forged the charter and the seal' } });
@@ -178,7 +180,7 @@ describe('CharacterDetailEditor — character framework (#2175)', () => {
 
   it('exposes the Ghost→Wound→Lie→Want→Need prose fields', () => {
     render(<CharacterDetailEditor entry={{ ...ARIA, lie: 'I only matter if I win' }} characters={[ARIA]} onPatch={() => {}} />);
-    fireEvent.click(screen.getByRole('button', { name: /Character framework/i }));
+    fireEvent.click(screen.getByRole('tab', { name: 'Story' }));
     expect(screen.getByDisplayValue('I only matter if I win')).toBeInTheDocument();
   });
 });
@@ -196,7 +198,7 @@ describe('CharacterDetailEditor — production package (#5378)', () => {
     render(<CharacterDetailEditor
       entry={{ ...ARIA, voiceId: 'kokoro:af_heart' }} universeId="uni-1" characters={[ARIA]} onPatch={() => {}}
     />);
-    fireEvent.click(screen.getByRole('button', { name: /Local voice profile/i }));
+    fireEvent.click(screen.getByRole('tab', { name: 'Voice' }));
     expect(await screen.findByText(/Promote the selected Kokoro or Piper preset/i)).toBeInTheDocument();
     fireEvent.click(screen.getByRole('button', { name: /Promote selected preset/i }));
     await waitFor(() => expect(promoteVoicePreset).toHaveBeenCalledWith({
@@ -217,7 +219,7 @@ describe('CharacterDetailEditor — production package (#5378)', () => {
     render(<CharacterDetailEditor
       entry={{ ...ARIA, voiceId: 'kokoro:af_heart' }} universeId="uni-1" characters={[ARIA]} onPatch={() => {}}
     />);
-    fireEvent.click(screen.getByRole('button', { name: /Local voice profile/i }));
+    fireEvent.click(screen.getByRole('tab', { name: 'Voice' }));
     expect(await screen.findByLabelText(/Voice benchmark identity/i)).toHaveAttribute(
       'src', '/data/voice-profiles/voice-profile-1/benchmarks/v1/01-identity.wav',
     );
@@ -236,7 +238,7 @@ describe('CharacterDetailEditor — production package (#5378)', () => {
     render(<CharacterDetailEditor
       entry={ARIA} universeId="uni-1" characters={[ARIA]} onPatch={() => {}}
     />);
-    fireEvent.click(screen.getByRole('button', { name: /Local voice profile/i }));
+    fireEvent.click(screen.getByRole('tab', { name: 'Voice' }));
 
     // Switch to Design tab
     fireEvent.click(screen.getByRole('button', { name: /Design/i }));
@@ -262,7 +264,7 @@ describe('CharacterDetailEditor — production package (#5378)', () => {
     render(<CharacterDetailEditor
       entry={ARIA} universeId="uni-1" characters={[ARIA]} onPatch={() => {}}
     />);
-    fireEvent.click(screen.getByRole('button', { name: /Local voice profile/i }));
+    fireEvent.click(screen.getByRole('tab', { name: 'Voice' }));
     expect(await screen.findByText(/Machine-local voice design/i)).toBeInTheDocument();
 
     // Switch to Clone tab
@@ -296,7 +298,7 @@ describe('CharacterDetailEditor — production package (#5378)', () => {
     render(<CharacterDetailEditor
       entry={ARIA} universeId="uni-1" characters={[ARIA]} onPatch={() => {}}
     />);
-    fireEvent.click(screen.getByRole('button', { name: /Local voice profile/i }));
+    fireEvent.click(screen.getByRole('tab', { name: 'Voice' }));
     fireEvent.click(await screen.findByRole('button', { name: /Qualify interactive route/i }));
 
     await waitFor(() => expect(benchmarkProfileInteractive).toHaveBeenCalledWith(
@@ -307,7 +309,7 @@ describe('CharacterDetailEditor — production package (#5378)', () => {
   it('marks a voice-canon revision as approved', () => {
     const onPatch = vi.fn();
     render(<CharacterDetailEditor entry={ARIA} characters={[ARIA]} onPatch={onPatch} />);
-    fireEvent.click(screen.getByRole('button', { name: /Voice canon/i }));
+    fireEvent.click(screen.getByRole('tab', { name: 'Voice' }));
     fireEvent.click(screen.getByRole('checkbox', { name: /Candidate revision/i }));
     expect(onPatch).toHaveBeenCalledWith({
       voiceCanon: { version: 1, approved: true },
@@ -317,7 +319,7 @@ describe('CharacterDetailEditor — production package (#5378)', () => {
   it('adds an identity reference as a candidate and surfaces missing required roles', () => {
     const onPatch = vi.fn();
     render(<CharacterDetailEditor entry={{ ...ARIA, imageRefs: ['neutral.png'] }} characters={[ARIA]} onPatch={onPatch} />);
-    fireEvent.click(screen.getByRole('button', { name: /Identity pack/i }));
+    fireEvent.click(screen.getByRole('tab', { name: 'Appearance' }));
     expect(screen.getByText(/Missing: neutral, profile, full-body/i)).toBeInTheDocument();
     fireEvent.click(screen.getByRole('button', { name: /Add reference/i }));
     expect(onPatch).toHaveBeenCalledWith({
@@ -331,7 +333,7 @@ describe('CharacterDetailEditor — production package (#5378)', () => {
       ...ARIA,
       voiceCanon: { version: 2, description: 'measured', approved: true },
     }} characters={[ARIA]} onPatch={onPatch} />);
-    fireEvent.click(screen.getByRole('button', { name: /Voice canon/i }));
+    fireEvent.click(screen.getByRole('tab', { name: 'Voice' }));
     const description = screen.getByRole('textbox', { name: /voice canon description/i });
     fireEvent.change(description, { target: { value: 'more urgent' } });
     fireEvent.blur(description);
@@ -347,7 +349,7 @@ describe('CharacterDetailEditor — production package (#5378)', () => {
       imageRefs: ['neutral.png', 'replacement.png'],
       identityPack: { assets: [{ imageRef: 'neutral.png', role: 'neutral', approved: true }] },
     }} characters={[ARIA]} onPatch={onPatch} />);
-    fireEvent.click(screen.getByRole('button', { name: /Identity pack/i }));
+    fireEvent.click(screen.getByRole('tab', { name: 'Appearance' }));
     fireEvent.change(screen.getByRole('combobox', { name: /identity asset 1 image/i }), {
       target: { value: 'replacement.png' },
     });
@@ -359,7 +361,7 @@ describe('CharacterDetailEditor — production package (#5378)', () => {
   it('adds only a complete pronunciation row', () => {
     const onPatch = vi.fn();
     render(<CharacterDetailEditor entry={ARIA} characters={[ARIA]} onPatch={onPatch} />);
-    fireEvent.click(screen.getByRole('button', { name: /Voice canon/i }));
+    fireEvent.click(screen.getByRole('tab', { name: 'Voice' }));
 
     const addButton = screen.getByRole('button', { name: /Add pronunciation/i });
     fireEvent.change(screen.getByRole('textbox', { name: /new pronunciation term/i }), {
@@ -383,12 +385,12 @@ describe('CharacterDetailEditor — production package (#5378)', () => {
 });
 
 describe('CharacterDetailEditor — Psychology (#6414)', () => {
-  const openPsychology = () => fireEvent.click(screen.getByRole('button', { name: /Psychology \(theory of control/i }));
+  const openPsychology = () => fireEvent.click(screen.getByRole('tab', { name: 'Story' }));
 
   it('reads as unassessed on a legacy character and offers no clear action', () => {
     render(<CharacterDetailEditor entry={ARIA} characters={[ARIA]} onPatch={() => {}} />);
-    expect(screen.getByRole('button', { name: /Psychology \(theory of control/i })).toHaveTextContent(/unassessed/i);
     openPsychology();
+    expect(screen.getByText('unassessed')).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /Clear psychology profile/i })).toBeDisabled();
   });
 
@@ -430,7 +432,7 @@ describe('CharacterDetailEditor — Psychology (#6414)', () => {
     const entry = { ...ARIA, lie: 'I only matter if I win.' };
     render(<CharacterDetailEditor entry={entry} characters={[ARIA]} onPatch={() => {}} />);
     openPsychology();
-    expect(screen.getByText(/I only matter if I win\./)).toBeInTheDocument();
+    expect(screen.getByText(/I only matter if I win\./, { selector: 'span' })).toBeInTheDocument();
     expect(screen.getByText(/suggested starting point only/i)).toBeInTheDocument();
     expect(screen.getByText(/not the same sentence/i)).toBeInTheDocument();
     // The theory of control is NOT pre-filled from the Lie.
@@ -470,3 +472,38 @@ describe('CharacterDetailEditor — Psychology (#6414)', () => {
     expect(onPatch).toHaveBeenCalledWith({ psychology: null });
   });
 });
+
+
+describe('CharacterDetailEditor — sheet navigation', () => {
+  it('keeps identity visible, retains pending rows across pages, and writes the page to the URL', () => {
+    function LocationProbe() {
+      return <output aria-label="Location">{useLocation().search}</output>;
+    }
+    const onPatch = vi.fn();
+    render(<><CharacterDetailEditor entry={ARIA} onPatch={onPatch} /><LocationProbe /></>);
+    expect(screen.getByRole('textbox', { name: 'Pronouns' })).toBeVisible();
+    expect(screen.getByRole('heading', { name: 'Personality & motivations' })).toBeVisible();
+    expect(listVoiceEngines).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByRole('tab', { name: 'Appearance' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Add prop' }));
+    const purpose = screen.getByRole('textbox', { name: 'row 1 purpose' });
+    fireEvent.change(purpose, { target: { value: 'navigation' } });
+    fireEvent.blur(purpose);
+    fireEvent.click(screen.getByRole('tab', { name: 'Story' }));
+    expect(screen.getByLabelText('Location')).toHaveTextContent('castSheet-chr-aria=story');
+    expect(screen.getByRole('textbox', { name: 'Pronouns' })).toBeVisible();
+    fireEvent.click(screen.getByRole('tab', { name: 'Appearance' }));
+    expect(screen.getByRole('textbox', { name: 'row 1 purpose' })).toHaveValue('navigation');
+    expect(onPatch).not.toHaveBeenCalled();
+  });
+
+  it('opens a linked page with locked fields and disables generation', () => {
+    render(<CharacterDetailEditor entry={ARIA} disabled onPatch={vi.fn()} onExpand={vi.fn()} />, {
+      wrapper: ({ children }) => <MemoryRouter initialEntries={['/?castSheet-chr-aria=appearance']}>{children}</MemoryRouter>,
+    });
+    expect(screen.getByRole('tab', { name: 'Appearance' })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('textbox', { name: 'Silhouette notes' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Add prop' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'AI: expand character' })).toBeDisabled();
+  });
+});
diff --git a/client/src/components/universe/EntryThumbSlot.jsx b/client/src/components/universe/EntryThumbSlot.jsx
index f83f260d81..6f7aeadcf2 100644
--- a/client/src/components/universe/EntryThumbSlot.jsx
+++ b/client/src/components/universe/EntryThumbSlot.jsx
@@ -23,6 +23,13 @@ import { useCallback, useState, useEffect } from 'react';
 import { Sparkles, Star } from 'lucide-react';
 import MediaJobThumb from '../pipeline/MediaJobThumb';
 
+const THUMB_DIMENSIONS = {
+  sm: 'w-12 h-20',
+  lg: 'w-16 h-24',
+  xl: 'w-40 h-60',
+  sheet: 'w-20 h-30 xl:w-40 xl:h-60',
+};
+
 export default function EntryThumbSlot({
   inFlightJobId = null,
   imageRefs = null,
@@ -49,6 +56,7 @@ export default function EntryThumbSlot({
   // `'lg'` renders the empty-state box at 64x96 with a bigger Sparkles
   // affordance (reserved for slots that ride a wider card). `'xl'` is the
   // 160x240 hero footprint used by the base-style probe on the universe page.
+  // 'sheet' keeps a compact portrait on phones and the hero size on desktop.
   // Defaults to the compact 48x80 (w-12 h-20) portrait footprint shared with
   // variation + canon avatar rows — matched to the 2:3 aspect of typical
   // 1024x1536 universe renders so the slot doesn't crop the subject.
@@ -112,7 +120,7 @@ export default function EntryThumbSlot({
   // (48x80 / 64x96 / 160x240) matches the 2:3 aspect of typical universe
   // renders so the row reserves the same vertical space as WalkBackThumb's
   // completed image, eliminating row jitter across the three states.
-  const dim = size === 'xl' ? 'w-40 h-60' : size === 'lg' ? 'w-16 h-24' : 'w-12 h-20';
+  const dim = THUMB_DIMENSIONS[size] || THUMB_DIMENSIONS.sm;
   const iconSize = size === 'xl' ? 32 : size === 'lg' ? 18 : 14;
   return (
     <button
@@ -146,7 +154,7 @@ function WalkBackThumb({ filename, alt, onClick, isPrimary = false, fallbackRefs
   const candidateKey = candidates.join('|');
   const [idx, setIdx] = useState(0);
   useEffect(() => { setIdx(0); }, [candidateKey]);
-  const dim = size === 'xl' ? 'w-40 h-60' : size === 'lg' ? 'w-16 h-24' : 'w-12 h-20';
+  const dim = THUMB_DIMENSIONS[size] || THUMB_DIMENSIONS.sm;
   if (!candidates.length || idx >= candidates.length) {
     // All candidates failed to load — collapse to empty (no render button
     // here; the user can re-render from the action column).