Style drafted cards

app/assets/stylesheets/cards.css

@@ -50,6 +50,13 @@
       .card__tags {
         font-size: var(--text-small);
       }
+
+      &:is(.card--drafted) {
+        --card-color: var(--color-subtle-dark) !important;
+
+        border-color: var(--card-color) !important;
+        border-style: dashed !important;
+      }
     }
   }
 

app/views/cards/display/_mini.html.erb

@@ -1,4 +1,5 @@
-<div class="card card--mini border flex flex-column gap position-relative txt-align-start full-width border-radius fill-white" style="--card-color: <%= card.color %>; view-transition-name: <%= dom_id(card, :ticket) %>;">
+<%= tag.div class: ["card card--mini border flex flex-column gap position-relative txt-align-start full-width border-radius fill-white", { "card--drafted": card.drafted? }], 
+    style: "--card-color: #{ card.color }; view-transition-name: #{ dom_id(card, :ticket) };" do %>
   <header class="card__header flex align-center gap min-width">
     <span class="card__collection txt-uppercase overflow-ellipsis txt-reversed">
       <%= card.collection.name %>
@@ -20,4 +21,4 @@
   <%= link_to collection_card_path(card.collection, card), class: "card__link" do %>
     <span class="for-screen-reader"><%= card_title(card) %></span>
   <% end %>
-</div>
+<% end %>

app/views/cards/display/common/_meta.html.erb

@@ -4,6 +4,9 @@
   <div class="flex flex-column gap txt-align-start">
     <span class="pad-inline overflow-ellipsis">Added
       <%= local_datetime_tag(card.created_at, style: :daysago) %>
+      <% if card.drafted? %>
+        <strong>(Draft)</strong>
+      <% end %>
     </span>
 
     <hr class="full-width separator--horizontal unpad margin-none">