Inline :has(&) as it's REALLY slow in Safari

This makes Safari sluggish in general. A particular scenario where it chokes is when
rendering lots of local times with JS (such as in the cards screen when there are many cards).

app/assets/stylesheets/card-columns.css

@@ -92,29 +92,25 @@
       display: none;
     }
 
-    .card__background {
-      .card:has(& img:not([src=""])) {
-        .card__content,
-        .card__meta,
-        .workflow-stage:not(.workflow-stage--current) {
-          opacity: 0;
-          transition: opacity 0.2s ease-in-out;
+    .card:has(.card__background img:not([src=""])) {
+      .card__content,
+      .card__meta,
+      .workflow-stage:not(.workflow-stage--current) {
+        opacity: 0;
+        transition: opacity 0.2s ease-in-out;
 
-          @media (any-hover: hover) {
-            .card:hover & {
+        @media (any-hover: hover) {
+          .card:hover & {
               opacity: 1;
             }
-          }
         }
       }
+    }
 
-      @media (any-hover: hover) {
-        .card:hover & {
-          img:not([src=""]) {
-            filter: blur(3px) brightness(1.2);
-            opacity: 0.2;
-          }
-        }
+    @media (any-hover: hover) {
+      .card:has(.card__background img:not([src=""])):hover .card__background img:not([src=""]) {
+        filter: blur(3px) brightness(1.2);
+        opacity: 0.2;
       }
     }
 

app/assets/stylesheets/cards.css

@@ -308,11 +308,11 @@
     position: absolute;
     rotate: 5deg;
     transform-origin: top right;
+  }
 
-    .card:has(&),
-    .card-perma:has(&) {
-      --card-color: var(--color-card-complete) !important;
-    }
+  .card:has(.card__closed),
+  .card-perma:has(.card__closed) {
+    --card-color: var(--color-card-complete) !important;
   }
 
   .card__closed-title {

app/assets/stylesheets/filters.css

@@ -3,11 +3,14 @@
     position: relative;
     view-transition-name: "filters";
     z-index: var(--z-popup);
+  }
 
-    #header:has(&) {
-      position: relative;
-      z-index: var(--z-popup);
-    }
+  #header:has(.filters) {
+    position: relative;
+    z-index: var(--z-popup);
+  }
+
+  .filters {
 
     .btn {
       --btn-border-color: var(--color-ink-medium);

app/assets/stylesheets/inputs.css

@@ -60,13 +60,11 @@
         cursor: pointer;
         opacity: 0;
       }
+    }
 
-      &:focus,
-      &:focus-visible {
-        .input--file:has(&) {
-          outline: 0.15rem solid var(--color-selected-dark);
-        }
-      }
+    &:has(input[type="file"]:focus),
+    &:has(input[type="file"]:focus-visible) {
+      outline: 0.15rem solid var(--color-selected-dark);
     }
 
     &:is(.avatar) {

app/assets/stylesheets/popup.css

@@ -31,16 +31,16 @@
       --panel-padding: var(--block-space) var(--block-space) 0 var(--block-space);
     }
 
-    #header:has(&) {
-      position: relative;
-      z-index: var(--z-nav);
-    }
-
     .card & {
       inline-size: 260px;
     }
   }
 
+  #header:has(.popup) {
+    position: relative;
+    z-index: var(--z-nav);
+  }
+
   .popup__footer {
     background-color: var(--color-canvas);
     border-block-start: 1px solid var(--color-ink-lighter);

app/assets/stylesheets/rich-text-content.css

@@ -50,11 +50,12 @@
       margin-inline: auto;
       max-block-size: 32rem;
       object-fit: contain;
+    }
 
-      /* Links should hug media contained within */
-      a:has(&) {
-        display: inline-block;
-      }
+    /* Links should hug media contained within */
+    a:has(img),
+    a:has(video) {
+      display: inline-block;
     }
 
     /* Avoid extra space due to empty paragraphs */