css: make each connect step a card while the picker is stacked

Stacked in a prose column, the three steps were a single column of headings with
only whitespace between them, so 02 read as a continuation of 01 rather than the
next thing to do. Each step now carries a border, a tint and its own padding, and
the panel gap drops from 2rem to 1rem because the border is doing the separating
the whitespace was.

Only while stacked. Three across the columns already separate themselves, so the
wide container query strips the card treatment rather than nesting three boxes
inside a box. Applies to every surface that stacks the picker: this post, the
changelog entry and the docs page.

Author: dimitrieh

src/css/style.css

@@ -3396,12 +3396,22 @@ lite-youtube::before {
 .ff-agent-panel {
     display: grid;
     grid-template-columns: 1fr;
-    gap: 2rem;
+    /* Tighter than the 2rem this used to carry, because stacked the steps are now
+       cards and the border does the separating that the whitespace was doing. */
+    gap: 1rem;
     padding: 1.5rem;
 }
+/* Stacked, each step is a card. One column of three headings with nothing but air
+   between them read as one continuous block, so 02 looked like more of 01 rather
+   than the next thing to do. Three across, the columns already separate themselves
+   and a border around each would just be noise, so the wide state below strips it. */
 .ff-agent-step {
     display: flex;
     flex-direction: column;
+    border: 1px solid var(--color-gray-200);
+    border-radius: 0.5rem;
+    background-color: var(--color-gray-50);
+    padding: 1.25rem;
 }
 .ff-agent-step__num {
     margin: 0;
@@ -3458,6 +3468,14 @@ lite-youtube::before {
         gap: 2.5rem;
         padding: 2rem;
     }
+    /* Back to bare columns: side by side the steps are already separate, so the card
+       treatment the stacked state needs becomes three boxes inside a box. */
+    .ff-agent-step {
+        border: 0;
+        border-radius: 0;
+        background-color: transparent;
+        padding: 0;
+    }
     /* Three across, the columns are narrow enough that filling them is right. */
     .ff-agent-step__cta {
         align-self: stretch;