Pin the review card description under the sections and tint the card from the uploaded logo.

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

tests/unit/Rule.test.jsx

@@ -257,11 +257,49 @@ describe("Rule Component", () => {
         ],
       },
     ];
-    render(
-      <Rule {...defaultProps} expanded={true} categories={categories} />,
-    );
+    render(<Rule {...defaultProps} expanded={true} categories={categories} />);
 
     expect(screen.getByText("Values")).toBeInTheDocument();
+    const description = screen.getByText("This is a test rule description");
+    expect(
+      description.compareDocumentPosition(screen.getByText("Values")) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).not.toBe(0);
+    expect(description.parentElement).toHaveClass("border-b");
+  });
+
+  it("pins the description under categories when descriptionAtBottom is set", () => {
+    const categories = [
+      {
+        name: "Values",
+        chipOptions: [
+          { id: "v1", label: "Consciousness", state: "unselected" },
+        ],
+      },
+    ];
+    render(
+      <Rule
+        {...defaultProps}
+        expanded={true}
+        descriptionAtBottom
+        categories={categories}
+      />,
+    );
+
+    const description = screen.getByText("This is a test rule description");
+    expect(
+      screen.getByText("Values").compareDocumentPosition(description) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).not.toBe(0);
+    expect(description.parentElement).toHaveClass("border-t");
+    expect(description.parentElement).not.toHaveClass("border-b");
+  });
+
+  it("applies a runtime surface color over the background class", () => {
+    render(<Rule {...defaultProps} surfaceColor="rgb(12, 80, 40)" />);
+    expect(screen.getByRole("button")).toHaveStyle({
+      backgroundColor: "rgb(12, 80, 40)",
+    });
   });
 
   it("renders with logo URL", () => {