Standardize create-flow option steps on one question-and-options layout and Selection sizes.

Method cards, chips, and the right rail now share the two-column shell; last options clear the footer fade, See all stays under the stack, and the left heading no longer jumps when the list expands.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/(app)/create/screens/card/ConflictManagementScreen.tsx

@@ -4,6 +4,9 @@
  * `conflict-management` step — Figma compact card stack (node `20879-15979`).
  * Registry: `CREATE_FLOW_SCREEN_REGISTRY["conflict-management"]`.
  *
+ * Page chrome is the shared question-and-options shell
+ * (`CreateFlowTwoColumnSelectShell`); options are CardStack `singleStack`.
+ *
  * Card click opens the Figma "Add Approach" create modal (node `20874-172292`)
  * with four controls rendered by {@link ConflictManagementEditFields}: Core
  * Principle, Applicable Scope (text area), Process Protocol, and Restoration
@@ -15,11 +18,11 @@
 import { useState, useCallback, useMemo, useRef } from "react";
 import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
-import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import { useBeforeUnloadGuard } from "../../../../hooks/useBeforeUnloadGuard";
 import { useDiscardCustomizeConfirm } from "../../hooks/useDiscardCustomizeConfirm";
 import { useMethodCardDeckOrdering } from "../../hooks/useMethodCardDeckOrdering";
-import { CreateFlowCardStackStepShell } from "../../components/CreateFlowCardStackStepShell";
+import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
+import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoColumnSelectShell";
 import CardStack from "../../../../components/cards/CardStack";
 import Create from "../../../../components/modals/Create";
 import InlineTextButton from "../../../../components/buttons/InlineTextButton";
@@ -58,7 +61,6 @@ export function ConflictManagementScreen() {
   const m = useMessages();
   const cm = m.create.customRule.conflictManagement;
   const modalKebabMenu = m.create.customRule.modalKebabMenu;
-  const mdUp = useCreateFlowMdUp();
   const { confirmDiscard, confirmDialog } = useDiscardCustomizeConfirm();
   const { state, updateState, replaceState, markCreateFlowInteraction } =
     useCreateFlow();
@@ -117,17 +119,9 @@ export function ConflictManagementScreen() {
     setAddCustomWizardOpen(true);
   }, [markCreateFlowInteraction]);
 
-  const title = expanded ? cm.page.expandedTitle : cm.page.compactTitle;
+  const title = cm.page.compactTitle;
 
-  const description = expanded ? (
-    <>
-      {cm.page.expandedDescriptionBefore}
-      <InlineTextButton onClick={handleOpenAddWizard}>
-        {cm.page.compactDescriptionLinkLabel}
-      </InlineTextButton>
-      {cm.page.expandedDescriptionAfter}
-    </>
-  ) : (
+  const description = (
     <>
       {cm.page.compactDescriptionBefore}
       <InlineTextButton onClick={handleOpenAddWizard}>
@@ -695,30 +689,41 @@ export function ConflictManagementScreen() {
 
   return (
     <>
-    <CreateFlowCardStackStepShell
-      lockupTitle={title}
-      lockupDescription={description}
-      stackBusy={!recommendationsReady}
-    >
-      {recommendationsReady && (
-        <CardStack
-          cards={sampleCards}
-          selectedIds={selectedIds}
-          onCardSelect={handleCardClick}
-          expanded={expanded}
-          onToggleExpand={() => {
-            markCreateFlowInteraction();
-            setExpanded((prev) => !prev);
-          }}
-          hasMore={true}
-          toggleLabel={cm.page.seeAllLink}
-          compactRecommendedLimit={5}
-          compactCardIds={compactCardIds}
-          compactDesktopLayout="pyramidFive"
-          headerLockupSize={mdUp ? "L" : "M"}
+    <CreateFlowTwoColumnSelectShell
+      contentTopBelowMd="space-800"
+      lgVerticalAlign="start"
+      header={
+        <CreateFlowHeaderLockup
+          title={title}
+          description={description}
+          justification="left"
         />
-      )}
-    </CreateFlowCardStackStepShell>
+      }
+    >
+      <div
+        className="flex w-full min-w-0 flex-col items-stretch gap-6 py-0 lg:h-full lg:min-h-0 lg:flex-1"
+        aria-busy={!recommendationsReady}
+      >
+        {recommendationsReady && (
+          <CardStack
+            cards={sampleCards}
+            selectedIds={selectedIds}
+            onCardSelect={handleCardClick}
+            expanded={expanded}
+            onToggleExpand={() => {
+              markCreateFlowInteraction();
+              setExpanded((prev) => !prev);
+            }}
+            hasMore={true}
+            toggleLabel={cm.page.seeAllLink}
+            compactRecommendedLimit={5}
+            compactCardIds={compactCardIds}
+            layout="singleStack"
+            className="w-full lg:h-full lg:min-h-0 lg:flex-1"
+          />
+        )}
+      </div>
+    </CreateFlowTwoColumnSelectShell>
       <Create
         isOpen={createModalOpen}
         onClose={handleCreateModalClose}