Consolidate a few styles for card headers

app/assets/stylesheets/cards.css

@@ -68,16 +68,6 @@
     }
   }
 
-  .card__id {
-    display: inline-flex;
-    margin-inline-start: calc(var(--inline-space) * -1);
-
-    .card-perma &:before {
-      content: "No.";
-      opacity: 0.5;
-    }
-  }
-
   .card__link {
     --hover-size: 0;
 
@@ -95,12 +85,25 @@
   .card__collection {
     background-color: var(--card-color);
     border-radius: var(--border-radius) 0 var(--border-radius) 0;
+    color: var(--color-ink-inverted);
     font-weight: 800;
     padding: var(--block-space-half) var(--inline-space) var(--block-space-half) var(--inline-space-double);
+    text-transform: uppercase;
+  }
+
+  .card__id {
+    display: inline-flex;
+    margin-inline-start: calc(var(--inline-space) * -1);
+
+    .card-perma &:before {
+      content: "No.";
+      opacity: 0.5;
+    }
   }
 
   .card__collection-name {
     border-inline-start: 1px solid color-mix(in srgb, var(--color-ink-inverted) 33%, var(--card-color));
+    color: currentcolor;
     display: inline-flex;
     margin-inline-start: var(--inline-space-half);
     padding-inline-start: calc(var(--inline-space) * 0.75);

app/views/cards/_container.html.erb

@@ -11,9 +11,9 @@
     <%= card_article_tag card, class: "card" do %>
       <header class="card__header flex align-center gap-half min-width">
         <span class="card__collection">
-          <span class="card__id txt-reversed"><%= card.id %></span>
+          <span class="card__id"><%= card.id %></span>
           <%= link_to card.collection.name, cards_path(collection_ids: [ card.collection ]),
-                class: "card__collection-name txt-uppercase overflow-ellipsis txt-reversed" %>
+                class: "card__collection-name overflow-ellipsis" %>
         </span>
 
         <%= render "cards/display/perma/tags", card: card %>

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

@@ -2,9 +2,9 @@
   <%= card_article_tag card, class: "card" do %>
     <header class="card__header flex align-center gap min-width">
       <span class="card__collection">
-        <span class="card__id txt-reversed"><%= card.id %></span>
+        <span class="card__id"><%= card.id %></span>
         <%= link_to card.collection.name, cards_path(collection_ids: [ card.collection ]),
-              class: "card__collection-name txt-uppercase overflow-ellipsis txt-reversed" %>
+              class: "card__collection-name overflow-ellipsis" %>
       </span>
       <%= render "cards/display/preview/tags", card: card %>
     </header>