Tighten up

app/assets/stylesheets/cards.css

@@ -112,9 +112,12 @@
   }
 
   .card__actions-container {
+    --border-radius: 1em;
+  
     background-color: var(--color-bg);
-    margin-block: calc(var(--block-space) * -1) var(--block-space);
-    padding: var(--block-space) var(--inline-space-double);
+    color: color-mix(in srgb, var(--bubble-color) 40%, var(--color-ink));
+    margin-block: calc(var(--block-space) * -1.66) calc(var(--block-space) * 1.66);
+    padding: calc(var(--block-space) * 0.66) calc(var(--inline-space) * 1.5);
     position: relative;
     z-index: 0;
 
@@ -139,8 +142,9 @@
   }
 
   .card__actions-container--top {
-    margin: var(--block-space-half) auto calc(var(--block-space) * -2);
-    padding: var(--block-space) 3ch;
+    min-inline-size: 36ch;
+    margin: calc(var(--block-space) * 1) auto calc(var(--block-space) * -0.33);
+    padding: 0.5em 0.75em;
 
     #header:has(&) {
       position: relative;
@@ -150,8 +154,16 @@
     .switch__input:checked + .switch__btn {
       background-color: var(--bubble-color) !important;
     }
-  }
 
+    strong {
+      flex: 1 0 42%;
+      text-align: end;
+
+      &:last-of-type {
+        text-align: start;
+      }
+    }
+  }
 
   .cards .card__assignees:not(:has(.avatar)) {
     .txt-uppercase {
@@ -235,8 +247,8 @@
     background-color: color-mix(in srgb, var(--bubble-color) 33%, var(--color-bg));
     border-radius: 0.2em;
     display: inline-flex;
-    padding-block: var(--padding-block);
-    padding-inline: var(--padding-inline);
+    margin-block: calc(var(--block-space) * -1) calc(var(--block-space) * -0.33);
+    padding: var(--padding-block) var(--padding-inline);
 
     &:has(.card__star-input:checked) {
       .card {

app/views/bubbles/show.html.erb

@@ -21,11 +21,10 @@
 
   <nav class="align-start max-width">
     <%= link_to_home %>
-
     <%= link_to_back fallback_path: bubbles_path(bucket_id: @bubble.bucket) %>
 
-    <div class="card__actions-container card__actions-container--top center border-radius flex-inline align-center justify-center gap"  style="--bubble-color: <%= @bubble.color %>;">
-      <span>Considering</span>
+    <div class="card__actions-container card__actions-container--top center flex align-center gap border-radius" style="--bubble-color: <%= @bubble.color %>;">
+      <strong class="txt-uppercase">Considering</strong>
       <% if @bubble.doing? %>
         <%= form_with url: bubble_engagement_path(@bubble), method: :delete, data: { controller: "form" }, class: "flex" do %>
           <label class="switch flex-item-no-shrink">
@@ -43,7 +42,7 @@
           </label>
         <% end %>
       <% end %>
-      <span>Doing</span>
+      <strong class="txt-uppercase">Doing</strong>
     </div>
 
     <div class="btn btn--placeholder flex-item-justify-end"></div>