feat: compose demo climax scenes

web/apps/console/src/presentation/styles/demo-workflow.css

@@ -72,7 +72,8 @@
 
 .demo-workflow-stage {
   position: relative;
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
   flex: 1 1 auto;
   min-height: 0;
   overflow: hidden;
@@ -629,6 +630,35 @@
   }
 }
 
+.demo-workflow-stage:has(.demo-outcome-panel) {
+  grid-template-columns: minmax(0, 1fr) minmax(15rem, 23%);
+  gap: 0.85rem;
+}
+
+.demo-workflow-stage:has(.demo-outcome-panel) .demo-workflow-stage__graph {
+  min-width: 0;
+}
+
+.demo-workflow-stage[data-demo-layout="approval"] {
+  grid-template-columns: minmax(0, 1.2fr) minmax(17rem, 0.55fr);
+}
+
+.demo-workflow-stage[data-demo-layout="approval"] .demo-workflow-stage__graph {
+  grid-template-columns: minmax(0, 1fr) minmax(17rem, 32%);
+}
+
+.demo-workflow-stage[data-demo-layout="evidence"] {
+  grid-template-columns: minmax(0, 1fr) minmax(16rem, 24%);
+}
+
+@container presentation-canvas (max-width: 1050px) {
+  .demo-workflow-stage:has(.demo-outcome-panel),
+  .demo-workflow-stage[data-demo-layout="approval"],
+  .demo-workflow-stage[data-demo-layout="evidence"] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
 @media (max-height: 760px) {
   .presentation-stage[data-scene-view="demo"] .presentation-stage__primary {
     gap: 0.55rem;