@@ -27,12 +27,14 @@
  *    action row (objectstack#27241) — not on the crumb row, which keeps only
  *    the ways back and has no child without one;
  *  - it is drawn only where the tier has a right column: both two-column
- *    tiers, the embedded record at those widths too, never the one column.
+ *    tiers, the embedded record at those widths too, never the one column;
+ *  - the chord is the topmost record view's: a drawer wide enough for its
+ *    own right column flips its own switch, never the page's under it.
  */
 
 import * as React from 'react';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, screen, cleanup, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen, cleanup, fireEvent, waitFor, within } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { MetadataCtx } from '@object-ui/react';
 import { RelatedCountStore } from '@object-ui/components';
@@ -125,6 +127,8 @@ const OBJECTS = [
 ];
 
 let rootWidth = 0;
+/** A record view inside a dialog (a drawer over the page) measures this, when set. */
+let dialogRootWidth: number | null = null;
 
 function makeDataSource() {
   return {
@@ -136,8 +140,13 @@ function makeDataSource() {
   };
 }
 
-function renderPage({ object = LEAD, width = 1440, embedded = false }: { object?: string; width?: number; embedded?: boolean } = {}) {
-  rootWidth = width;
+function renderPage({
+  object = LEAD,
+  width = 1440,
+  embedded = false,
+  container,
+}: { object?: string; width?: number; embedded?: boolean; container?: HTMLElement } = {}) {
+  if (!container) rootWidth = width;
   const metadata = {
     objects: OBJECTS,
     pages: [],
@@ -162,6 +171,7 @@ function renderPage({ object = LEAD, width = 1440, embedded = false }: { object?
         />
       </MetadataCtx.Provider>
     </MemoryRouter>,
+    container ? { container } : undefined,
   );
 }
 
@@ -182,6 +192,7 @@ const RIGHT_KEY = (object: string) => `os:pref:record.columns.related@object:${o
 
 beforeEach(() => {
   cleanup();
+  dialogRootWidth = null;
   window.localStorage.clear();
   RelatedCountStore._reset();
   vi.stubGlobal(
@@ -193,7 +204,8 @@ beforeEach(() => {
   const measure = HTMLElement.prototype.getBoundingClientRect;
   vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function (this: HTMLElement) {
     if (!this.hasAttribute('data-record-page-root')) return measure.call(this);
-    return { x: 0, y: 0, top: 0, left: 0, right: rootWidth, bottom: 800, width: rootWidth, height: 800, toJSON: () => ({}) } as DOMRect;
+    const width = dialogRootWidth !== null && this.closest('[role="dialog"]') ? dialogRootWidth : rootWidth;
+    return { x: 0, y: 0, top: 0, left: 0, right: width, bottom: 800, width, height: 800, toJSON: () => ({}) } as DOMRect;
   });
 });
 
@@ -331,4 +343,34 @@ describe('RecordDetailView — the right-column switch ⊟ (objectstack#27052, o
     await screen.findByRole('group', { name: 'Panels' }, { timeout: 5000 });
     expect(shown(embedded.container)).toBe('details right');
   });
+
+  it('⌘⇧, flips the topmost record view\'s switch alone: a 1000 px drawer over a 1440 px page (objectstack#27524)', async () => {
+    // A record page keeps its own tree mounted under the drawer its rows and
+    // lookups open (`RecordPageDrawerHost`), and the drawer's sheet is
+    // portaled after it, to the end of the body. A drawer dragged to 1000 px
+    // has a right column of its own, so both views draw ⊟: the chord is the
+    // drawer's, and never writes the hidden page's stored choice.
+    dialogRootWidth = 1000;
+    const page = renderPage();
+    await waitFor(() => expect(shown(page.container)).toBe('details right'), { timeout: 5000 });
+    const sheet = document.createElement('div');
+    sheet.setAttribute('role', 'dialog');
+    document.body.appendChild(sheet);
+    const drawer = renderPage({ object: PRODUCT, embedded: true, container: sheet });
+    await waitFor(() => expect(shown(sheet)).toBe('details right'), { timeout: 5000 });
+    expect(sheet.querySelector('[data-record-page-tier]')?.getAttribute('data-record-page-tier')).toBe('two-column');
+    expect(within(sheet).queryByRole('group', { name: 'Panels' })).not.toBeNull();
+
+    press('related');
+    await waitFor(() => expect(shown(sheet)).toBe('details'));
+    expect(window.localStorage.getItem(RIGHT_KEY(PRODUCT))).toContain('off');
+    expect(shown(page.container)).toBe('details right');
+    expect(window.localStorage.getItem(RIGHT_KEY(LEAD))).toBeNull();
+
+    // The drawer closes: the chord is the page's again.
+    drawer.unmount();
+    sheet.remove();
+    press('related');
+    await waitFor(() => expect(shown(page.container)).toBe('details'));
+  });
 });
@@ -164,6 +164,20 @@ function isTypingTarget(target: EventTarget | null): boolean {
   return target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"]), [role="textbox"]') !== null;
 }
 
+/**
+ * Whether this record view is the topmost one, the one a page-wide chord is
+ * for. A record page keeps its own tree mounted under the drawer its rows and
+ * lookups open (`RecordPageDrawerHost`), and the drawer's sheet is portaled
+ * after it, to the end of the body; once the drawer is wide enough for a right
+ * column its view listens too (objectstack#27524). The last record root in
+ * document order is the one on top.
+ */
+function isTopmostRecordView(root: Element | null): boolean {
+  if (!root) return false;
+  const roots = root.ownerDocument.querySelectorAll('[data-record-page-root]');
+  return roots[roots.length - 1] === root;
+}
+
 /** `aria-keyshortcuts` spelling of a chord, for the platform the page runs on. */
 function ariaKeyShortcutsOf(chord: ShortcutChord): string {
   const mac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform || '');
@@ -972,7 +986,7 @@ export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverri
   );
   // Whether the toolbar draws ⊟ — a right column the page has content for —
   // set at render below and read by the shortcut, so a shortcut never flips a
-  // switch the reader cannot see.
+  // switch the reader cannot see: not this page's under a drawer either.
   const drawnPanelSwitch = useRef(false);
   useEffect(() => {
     if (!pageHasRightColumn) return undefined;
@@ -981,12 +995,13 @@ export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverri
       if (!matchesPanelChord(e, TOGGLE_RELATED_SHORTCUT.chord)) return;
       if (isTypingTarget(e.target)) return;
       if (!drawnPanelSwitch.current) return;
+      if (!isTopmostRecordView(pageRootEl)) return;
       e.preventDefault();
       setRelatedSwitch(relatedSwitch === 'on' ? 'off' : 'on');
     };
     document.addEventListener('keydown', onKeyDown);
     return () => document.removeEventListener('keydown', onKeyDown);
-  }, [pageHasRightColumn, relatedSwitch, setRelatedSwitch]);
+  }, [pageHasRightColumn, pageRootEl, relatedSwitch, setRelatedSwitch]);
   useAdvertiseShortcut(TOGGLE_RELATED_SHORTCUT, pageHasRightColumn);
   const [pageRecord, setPageRecord] = useState<any>(null);
   // 'idle' | 'loading' | 'loaded' | 'missing' | 'forbidden' | 'failed' —
 
@@ -88,25 +88,51 @@ function relatedNodeId(node: any): RelatedCardId | null {
  * record header, at the page's full width, with ‹ to return. Esc returns too;
  * a dialog or menu open over the page keeps its own Esc.
  */
+/**
+ * Whether an `Esc` belongs to something other than the open face: a field the
+ * reader types in, an open menu or alert, or a dialog the face is not inside
+ * (a popover, a confirm, a drawer opened over the page that holds the face).
+ * The dialog that holds the face — the record pane's drawer — is not one.
+ */
+function escapeOwnedElsewhere(target: EventTarget | null, face: Element | null): boolean {
+  if (!face) return true;
+  if (
+    target instanceof Element &&
+    target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"]), [role="textbox"]')
+  ) {
+    return true;
+  }
+  const doc = face.ownerDocument;
+  if (doc.querySelector('[role="alertdialog"], [role="menu"]')) return true;
+  return Array.from(doc.querySelectorAll('[role="dialog"]')).some((dialog) => !dialog.contains(face));
+}
+
 const EnlargedFace: React.FC<{ id: string; title: string; onClose?: () => void; children: React.ReactNode }> = ({
   id,
   title,
   onClose,
   children,
 }) => {
   const { t } = useDetailTranslation();
+  const faceRef = React.useRef<HTMLElement | null>(null);
   React.useEffect(() => {
     if (!onClose) return undefined;
+    // On the window, in the capture phase: inside the record pane the pane's
+    // own `Esc` (the drawer's dialog layer, the split pane's document
+    // listener) would act first and close or step the pane (objectstack#27524).
+    // The face takes the key, and keeps it from the pane.
     const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key !== 'Escape' || event.defaultPrevented) return;
-      if (document.querySelector('[role="dialog"], [role="alertdialog"], [role="menu"]')) return;
+      if (event.key !== 'Escape' || event.defaultPrevented || event.isComposing) return;
+      if (escapeOwnedElsewhere(event.target, faceRef.current)) return;
+      event.preventDefault();
+      event.stopPropagation();
       onClose();
     };
-    document.addEventListener('keydown', onKeyDown);
-    return () => document.removeEventListener('keydown', onKeyDown);
+    window.addEventListener('keydown', onKeyDown, true);
+    return () => window.removeEventListener('keydown', onKeyDown, true);
   }, [onClose]);
   return (
-    <section className="flex min-w-0 flex-col gap-3" data-related-enlarged={id} aria-label={title}>
+    <section ref={faceRef} className="flex min-w-0 flex-col gap-3" data-related-enlarged={id} aria-label={title}>
       <div className="flex items-center gap-2">
         <Button
           type="button"
 
@@ -0,0 +1,137 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * objectstack#27524 (Target 5, 6) — `Esc` on an open face (the 动态 tab, a
+ * related list's whole face) returns to the record's page, inside the record
+ * pane too. Since the pane follows the width rule its record draws these
+ * faces, and the pane has an `Esc` of its own: the drawer's dialog layer
+ * dismisses (or, below the stack's root, goes back a level), and the split
+ * pane beside a list closes on a document listener. The face takes the key
+ * first; only an `Esc` pressed with no face open is the pane's.
+ *
+ * Driven through the real `NavigationOverlay` (its Radix sheet and its split
+ * listener), with the page's blocks stubbed: what is measured is who answers
+ * the key.
+ */
+
+import * as React from 'react';
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, cleanup, fireEvent } from '@testing-library/react';
+import { NavigationOverlay, type NavigationOverlayProps } from '@object-ui/components';
+
+vi.mock('@object-ui/react', async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  SchemaRenderer: ({ schema }: { schema: any }) => <div data-node={schema?.type} />,
+}));
+
+import { RecordPageColumns } from '../RecordPageColumns';
+import { buildDefaultPageColumns, RECORD_PAGE_TIMELINE_PANEL } from '../synth/recordPageColumns';
+import { buildDefaultPageSchema } from '../synth/buildDefaultPageSchema';
+
+const page = buildDefaultPageSchema(
+  { name: 'lead', label: 'Lead', fields: { name: { name: 'name', type: 'text' } } },
+  { related: [{ objectName: 'task', relationshipField: 'lead_id', title: 'Tasks' }] },
+);
+const columns = buildDefaultPageColumns(page)!;
+
+/** The record the pane draws, opened on its 动态 tab. */
+function PaneRecord() {
+  const [enlarged, setEnlarged] = React.useState<string | null>(RECORD_PAGE_TIMELINE_PANEL);
+  return (
+    <RecordPageColumns
+      tier="stack"
+      columns={columns}
+      enlargedRelated={enlarged ?? undefined}
+      onEnlargeRelated={setEnlarged}
+      onCloseEnlargedRelated={() => setEnlarged(null)}
+    />
+  );
+}
+
+function pane(props: Partial<NavigationOverlayProps>) {
+  return (
+    <NavigationOverlay
+      isOpen
+      isOverlay
+      selectedRecord={{ id: 'r1' }}
+      mode="drawer"
+      close={() => {}}
+      setIsOpen={() => {}}
+      title="Lead"
+      width="720px"
+      {...props}
+    >
+      {() => <PaneRecord />}
+    </NavigationOverlay>
+  );
+}
+
+const face = () => document.querySelector(`[data-related-enlarged="${RECORD_PAGE_TIMELINE_PANEL}"]`);
+const pageColumns = () => document.querySelector('[data-record-columns]');
+const escape = (target: Element) => fireEvent.keyDown(target, { key: 'Escape', code: 'Escape', bubbles: true });
+
+afterEach(() => cleanup());
+
+describe('Esc on an open face inside the record pane (objectstack#27524)', () => {
+  it('the drawer: Esc on the 动态 tab returns to the record\'s page; the next Esc is the drawer\'s', () => {
+    const setIsOpen = vi.fn();
+    render(pane({ setIsOpen }));
+    expect(document.querySelector('[role="dialog"]')?.contains(face())).toBe(true);
+
+    escape(face()!.querySelector('[data-related-enlarged-back]')!);
+    expect(face()).toBeNull();
+    expect(pageColumns()).not.toBeNull();
+    expect(setIsOpen).not.toHaveBeenCalled();
+
+    // CONTROL: with no face open, Esc dismisses the drawer as it always did.
+    escape(pageColumns()!);
+    expect(setIsOpen).toHaveBeenCalledWith(false);
+  });
+
+  it('a level below the drawer\'s root: the face closes and the drawer stays on that level', () => {
+    const onBack = vi.fn();
+    const setIsOpen = vi.fn();
+    render(pane({ onBack, setIsOpen }));
+    escape(face()!);
+    expect(face()).toBeNull();
+    expect(onBack).not.toHaveBeenCalled();
+    expect(setIsOpen).not.toHaveBeenCalled();
+    escape(pageColumns()!);
+    expect(onBack).toHaveBeenCalledTimes(1);
+  });
+
+  it('the split pane beside a list: the face closes, the pane stays; the next Esc closes the pane', () => {
+    const close = vi.fn();
+    render(pane({ mode: 'split', mainContent: <div>list</div>, close }));
+    expect(document.querySelector('[data-testid="record-split-pane"]')?.contains(face())).toBe(true);
+    escape(face()!);
+    expect(face()).toBeNull();
+    expect(close).not.toHaveBeenCalled();
+    escape(pageColumns()!);
+    expect(close).toHaveBeenCalledTimes(1);
+  });
+
+  it('an open menu owns Esc: the face stays open under it', () => {
+    render(pane({}));
+    const menu = document.createElement('div');
+    menu.setAttribute('role', 'menu');
+    document.body.appendChild(menu);
+    escape(menu);
+    expect(face()).not.toBeNull();
+    menu.remove();
+  });
+
+  it('a text field owns Esc: the face stays open while the reader types in it', () => {
+    render(pane({}));
+    const input = document.createElement('input');
+    face()!.appendChild(input);
+    escape(input);
+    expect(face()).not.toBeNull();
+  });
+});