Create custom flow UI

app/create/components/CreateFlowTwoColumnSelectShell.tsx

@@ -1,7 +1,10 @@
 "use client";
 
 import type { ReactNode } from "react";
-import { CreateFlowStepShell } from "./CreateFlowStepShell";
+import {
+  CreateFlowStepShell,
+  type CreateFlowContentTopBelowMd,
+} from "./CreateFlowStepShell";
 import { CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS } from "./createFlowLayoutTokens";
 
 export type CreateFlowSelectShellLgVerticalAlign = "center" | "start";
@@ -9,23 +12,29 @@ export type CreateFlowSelectShellLgVerticalAlign = "center" | "start";
 interface CreateFlowTwoColumnSelectShellProps {
   header: ReactNode;
   children: ReactNode;
+  /**
+   * Top padding below create-flow chrome. Select steps use `space-1400`; right-rail uses `space-800`
+   * (Figma Flow — Right Rail).
+   */
+  contentTopBelowMd?: CreateFlowContentTopBelowMd;
   /**
    * At `lg+`, layout variant: `"center"` = vertically centered pair (community size/structure).
-   * `"start"` = top-weighted layout with a scrollable right column (core values): uses `items-stretch`
+   * `"start"` = top-weighted layout with a scrollable right column (core values, right-rail): uses `items-stretch`
    * so the right column gets a bounded height; `items-start` would grow with content and break scroll.
    */
   lgVerticalAlign?: CreateFlowSelectShellLgVerticalAlign;
 }
 
 /**
- * Two-column layout for create-flow select steps (community size/structure, core values).
- * Below `lg`, layout and scrolling match the previous single-column behavior (full page scroll).
+ * Two-column layout for create-flow select steps (community size/structure, core values) and
+ * {@link RightRailScreen} (decision approaches). Below `lg` (1024px), one column + main scrolls.
  * At `lg+`, mirrors {@link CompletedScreen}: static header column + scrollable controls column
  * (`min-h-0` + `overflow-y-auto` height chain; see completed page right rail).
  */
 export function CreateFlowTwoColumnSelectShell({
   header,
   children,
+  contentTopBelowMd = "space-1400",
   lgVerticalAlign = "center",
 }: CreateFlowTwoColumnSelectShellProps) {
   /** `stretch` is required for `min-h-0` + `overflow-y-auto` on the right column. */
@@ -38,7 +47,7 @@ export function CreateFlowTwoColumnSelectShell({
   return (
     <CreateFlowStepShell
       variant="centeredNarrow"
-      contentTopBelowMd="space-1400"
+      contentTopBelowMd={contentTopBelowMd}
       className={
         /* Below `lg`: natural height — same as legacy select screens (main scrolls). */
         /* At `lg+`: fill main + clip so only the right column scrolls (CompletedScreen pattern). */

app/create/components/createFlowLayoutTokens.ts

@@ -8,3 +8,11 @@ export const CREATE_FLOW_MD_UP_GRID_CELL_CLASS =
 
 /** Two 640px columns + `--measures-spacing-1200` (48px) gutter. */
 export const CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS = "md:max-w-[1328px]";
+
+/**
+ * Card-stack steps only (Figma compact card stack): wider than header lockup so the card grid /
+ * pyramid fits (max 860px). Header lockup stays {@link CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}.
+ * Card–card gap uses `gap-2` in `CardStack` (same on mobile and md+).
+ */
+export const CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS =
+  "w-full min-w-0 md:max-w-[min(100%,860px)]";