Straighten out focus ring for the background image button

app/assets/stylesheets/_global.css

@@ -52,6 +52,7 @@
   --focus-ring-color: var(--color-link);
   --focus-ring-offset: 1px;
   --focus-ring-size: 2px;
+  --focus-ring: var(--focus-ring-size) solid var(--focus-ring-color);
 
   /* Dialogs */
   --dialog-duration: 150ms;

app/assets/stylesheets/card-perma.css

@@ -166,6 +166,18 @@
     }
   }
 
+  .card-perma__image-btn {
+    &:has(input[type="file"]:focus),
+    &:has(input[type="file"]:focus-visible) {
+      outline: var(--focus-ring) !important;
+      outline-offset: var(--focus-ring-offset);
+    }
+
+    input[type="file"] {
+      outline: none;
+    }
+  }
+
   .card__banner {
     align-items: center;
     background-color: var(--color-highlight);

app/views/cards/container/_image.html.erb

@@ -5,7 +5,7 @@
   <% end %>
 <% elsif !card.closed? %>
   <%= form_with model: card, data: { controller: "form" } do |form| %>
-    <label class="btn input--file" data-controller="tooltip">
+    <label class="card-perma__image-btn btn input--file" data-controller="tooltip">
       <%= icon_tag "picture-add" %>
       <span class="for-screen-reader">Add background image</span>