Bring back On Deck to stand in for Not Now

app/assets/stylesheets/card-columns.css

@@ -104,16 +104,16 @@
         display: flex;
         flex-direction: column;
         justify-content: start;
-      }
 
-      &:after {
-        background-color: color-mix(in srgb, var(--card-color) 20%, var(--color-canvas));
-        block-size: 100%;
-        content: " ";
-        inline-size: 1px;
-        inset: 0 0 0 0;
-        position: absolute;
-        z-index: -1;
+        &:after {
+          background-color: color-mix(in srgb, var(--card-color) 20%, var(--color-canvas));
+          block-size: 100%;
+          content: " ";
+          inline-size: 1px;
+          inset: 0 0 0 0;
+          position: absolute;
+          z-index: -2;
+        }
       }
     }
 
@@ -447,6 +447,17 @@
     }
   }
 
+  /* On Deck (Not Now)
+  /* ------------------------------------------------------------------------ */
+
+  .cards--on-deck {
+    margin-block: var(--cards-gap);
+  
+    @media (min-width: 640px) {
+      padding-inline: var(--cards-gap);
+    }
+  }
+
   /* Doing
   /* ------------------------------------------------------------------------ */
 

app/views/cards/index/_columns.html.erb

@@ -1,6 +1,7 @@
 <% cache @cache_key do %>
   <%= turbo_frame_tag :card_columns do %>
     <div class="card-columns">
+      <%= render "cards/index/engagement/on_deck", user_filtering: user_filtering, **on_deck.to_h %>
       <%= render "cards/index/engagement/considering", user_filtering: user_filtering, **considering.to_h %>
 
       <% if workflow = user_filtering.single_collection.workflow %>

app/views/cards/index/engagement/_on_deck.html.erb

@@ -1,9 +1,14 @@
-<section id="on-deck-cards" class="cards cards--on-deck"
+<section id="on-deck-cards" class="cards cards--on-deck is-collapsed" style="--card-color: var(--color-black);"
+    data-controller="toggle-class" 
+    data-toggle-class-toggle-class="is-collapsed"
     data-drag-and-drop-target="container"
-    data-drop-target="on_deck"
-    data-related-element-target="related"
-    data-related-element-group-value="card-columns"
-    data-action="mouseover->related-element#highlight mouseout->related-element#unhighlight">
+    data-drop-target="on_deck">
+  <div class="cards__expander btn btn--plain" data-action="click->toggle-class#toggle">
+    <strong class="font-weight-black cards__expander-count"><%= page.records.count %></strong>
+    <button class="btn btn--plain cards__expander-button txt-uppercase">Not Now</button>
+    <div class="progress progress-<%= [page.records.count, 20].min %>"></div>
+  </div>
+
   <% if page.used? %>
     <%= render partial: "cards/display/preview", collection: page.records, as: :card, locals: { draggable: true }, cached: true %>