Nicer passkey styles

app/assets/stylesheets/credentials.css

@@ -1,29 +1,34 @@
 @layer components {
-  .passkey-icon--dark {
-    display: none;
+  .credential {
+    border-block-start: var(--border);
+    list-style: none;
+
+    &:last-child {
+      border-block-end: var(--border);
+    }
   }
 
-  .passkey-icon--light {
-    html[data-theme="dark"] & {
-      display: none;
-    }
+  .credential__link {
+    align-items: center;
+    block-size: 1.75lh;
+    color: currentcolor;
+    display: flex;
+    gap: 1ch;
+    padding-inline: 1ch;
 
-    @media (prefers-color-scheme: dark) {
-      html:not([data-theme]) & {
-        display: none;
+    @media (any-hover: hover) {
+      &:hover {
+        background: var(--color-ink-lightest);
+
+        .credential__arrow {
+          opacity: 0.66;
+        }
       }
     }
   }
 
-  .passkey-icon--dark {
-    html[data-theme="dark"] & {
-      display: inline;
-    }
-
-    @media (prefers-color-scheme: dark) {
-      html:not([data-theme]) & {
-        display: inline;
-      }
-    }
+  .credential__arrow {
+    margin-inline-start: auto;
+    opacity: 0;
   }
 }

app/assets/stylesheets/utilities.css

@@ -31,9 +31,10 @@
   .txt-capitalize-first-letter::first-letter { text-transform: capitalize; }
   .txt-link { color: var(--color-link); text-decoration: underline; }
 
-  .font-weight-normal { font-weight: normal; }
+  .font-weight-normal { font-weight: 400; }
+  .font-weight-medium { font-weight: 500; }
   .font-weight-semibold { font-weight: 600; }
-  .font-weight-bold { font-weight: bold; }
+  .font-weight-bold { font-weight: 700; }
   .font-weight-black { font-weight: 900; }
 
   /* Flexbox and Grid */
@@ -283,4 +284,28 @@
       display: none;
     }
   }
+
+  .hide-on-dark-mode {
+    html[data-theme="dark"] & {
+      display: none;
+    }
+
+    html:not([data-theme]) & {
+      @media (prefers-color-scheme: dark) {
+        display: none;
+      }
+    }
+  }
+
+  .hide-on-light-mode {
+    html[data-theme="light"] & {
+      display: none;
+    }
+
+    html:not([data-theme]) & {
+      @media (prefers-color-scheme: light) {
+        display: none;
+      }
+    }
+  }
 }