diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index 59a5b9357..1431f23e8 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -10,6 +10,10 @@
   --block-space-double: calc(var(--block-space) * 2);
 
   /* Text */
+  --font-sans: system-ui;
+  --font-serif: ui-serif, serif;
+  --font-mono: ui-monospace, monospace;
+
   --text-xx-small: 0.55rem;
   --text-x-small: 0.75rem;
   --text-small: 0.85rem;
@@ -33,6 +37,11 @@
   --footer-height: 3.5rem;
   --tray-size: clamp(12rem, 25dvw, 24rem);
 
+  /* Focus rings for keyboard navigation */
+  --focus-ring-color: var(--color-link);
+  --focus-ring-offset: 1px;
+  --focus-ring-size: 2px;
+
   @media (max-width: 799px) {
     --tray-size: var(--footer-height);
   }
diff --git a/app/assets/stylesheets/actiontext-lexical.css b/app/assets/stylesheets/actiontext-lexical.css
index 2ad1ab090..aefcb864b 100644
--- a/app/assets/stylesheets/actiontext-lexical.css
+++ b/app/assets/stylesheets/actiontext-lexical.css
@@ -6,12 +6,12 @@
 
     figure.node--selected {
       &:not(:has(img)) {
-        box-shadow: 0 0 0 var(--hover-size) var(--color-selected-dark);
+        box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring-color);
       }
 
       &:has(img) {
         img {
-          box-shadow: 0 0 0 var(--hover-size) var(--color-selected-dark);
+          box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring-color);
         }
       }
     }
@@ -45,7 +45,7 @@
       &:is([type="submit"]) {
         --btn-background: var(--card-color, var(--color-link));
         --btn-color: var(--color-ink-inverted);
-        --outline-color: var(--card-color, var(--color-link));
+        --focus-ring-color: var(--card-color, var(--color-link));
       }
     }
 
@@ -55,8 +55,6 @@
   }
 
   .lexical-editor__content {
-    --outline-size: max(2px, 0.08em);
-
     margin: var(--block-space-half) 0;
     min-block-size: calc(7lh + var(--block-space));
     outline: 0;
@@ -177,15 +175,11 @@
     padding: var(--lexical-prompt-padding);
 
     &:hover {
-      background-color: var(--color-selected);
+      background-color: var(--color-ink-lightest);
     }
 
     &[aria-selected] {
-      box-shadow: 0 0 0 var(--hover-size) var(--color-selected-dark) inset;
-
-      &:hover {
-        --hover-size: 0;
-      }
+      background-color: var(--color-selected);
     }
 
     img {
@@ -196,6 +190,10 @@
       margin: 0;
     }
 
+    + & {
+      margin-top: 2px;
+    }
+
     code {
       background-color: var(--color-terminal-text-light);
       border-radius: 0.25ch;
diff --git a/app/assets/stylesheets/avatars.css b/app/assets/stylesheets/avatars.css
index 214ac26f1..e3f15d4ab 100644
--- a/app/assets/stylesheets/avatars.css
+++ b/app/assets/stylesheets/avatars.css
@@ -2,8 +2,7 @@
   .avatar {
     --avatar-border-radius: 50%;
     --avatar-size-default: 5ch;
-      --btn-border-size: 0;
-      --hover-size: 0;
+    --btn-border-size: 0;
 
     aspect-ratio: 1;
     block-size: var(--avatar-size, var(--avatar-size-default));
@@ -16,19 +15,13 @@
 
     :is(img, .icon) {
       aspect-ratio: 1;
-      block-size: auto;
+      block-size: 100%;
       border-radius: var(--avatar-border-radius);
       grid-area: 1/1;
-      inline-size: var(--avatar-size, var(--avatar-size-default));
+      inline-size: 100%;
       max-inline-size: 100%;
       object-fit: cover;
     }
-
-    &:where(a):not(:active):hover {
-      @media (any-hover: hover) {
-        filter: brightness(0.7);
-      }
-    }
   }
 
   .avatar__form {
diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css
index 8ec590969..3971e9a95 100644
--- a/app/assets/stylesheets/base.css
+++ b/app/assets/stylesheets/base.css
@@ -8,13 +8,6 @@
   }
 
   body {
-    --font-sans: system-ui;
-    --font-serif: ui-serif, serif;
-    --font-mono: ui-monospace, monospace;
-    --hover-color: var(--color-ink-medium);
-    --hover-size: 0.15rem;
-    --hover-filter: brightness(1);
-
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     -webkit-text-size-adjust: none;
@@ -28,55 +21,33 @@
     text-size-adjust: none;
   }
 
-  a:not([class]) {
-    --hover-size: 0;
+  a {
+    text-decoration: none;
 
-    color: var(--color-link);
-    text-decoration: underline;
-    text-decoration-skip-ink: auto;
+    &:not([class]) {
+      color: var(--color-link);
+      text-decoration: underline;
+      text-decoration-skip-ink: auto;
+    }
   }
 
   :is(a, button, input, textarea, .switch, .btn) {
-    --outline-size: 2px;
-
-    caret-color: var(--color-link);
-    text-decoration: none;
+    transition: 100ms ease-out;
+    transition-property: background-color, border-color, box-shadow, filter, outline;
     touch-action: manipulation;
-    transition:
-      box-shadow 150ms ease,
-      outline-offset 150ms ease,
-      background-color 150ms ease,
-      opacity 150ms ease,
-      filter 150ms ease;
-
-    /* Hover */
-    @media (any-hover: hover) {
-      &:where(:not(:active):hover) {
-        box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
-      }
-    }
 
     /* Keyboard navigation */
-    &:where(:not(:active)):focus-visible {
-      outline-color: var(--outline-color, currentColor);
-      outline-width: var(--outline-size);
-      outline-offset: var(--outline-offset, calc(var(--outline-size) * 2));
+    &:where(:focus-visible) {
+      border-radius: 0.25ch;
+      outline: var(--focus-ring-size) solid var(--focus-ring-color);
+      outline-offset: var(--focus-ring-offset);
     }
 
-    &:where(:focus-visible):focus,
-    &:where(:focus-visible):active {
-      outline: 0;
-    }
-
-    /* Pressing */
-    &:focus:not(:focus-visible) {
-      --outline-offset: 0;
-    }
-
-    /* Disabled */
-    &:where([disabled]):not(:hover):not(:active) {
+    /* Default disabled styles */
+    &:where([disabled]) {
       cursor: not-allowed;
-      filter: brightness(0.75);
+      opacity: 0.5;
+      pointer-events: none;
     }
   }
 
diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css
index 34ceab7f4..cc8e2186b 100644
--- a/app/assets/stylesheets/buttons.css
+++ b/app/assets/stylesheets/buttons.css
@@ -1,7 +1,8 @@
 @layer components {
   .btn {
-    --transition: 150ms ease;
+    --icon-size: var(--btn-icon-size, 1.3em);
     --btn-border-radius: 99rem;
+    --btn-hover-brightness: 0.9;
 
     align-items: center;
     background-color: var(--btn-background, var(--color-canvas));
@@ -16,57 +17,18 @@
     justify-content: center;
     padding: var(--btn-padding, 0.5em 1.1em);
     pointer-events: auto;
-    transition:
-      background-color var( --transition),
-      border var( --transition),
-      color var( --transition),
-      filter var( --transition),
-      opacity var( --transition),
-      scale var( --transition);
+    position: relative;
+    transition: 100ms ease-out;
+    transition-property: background-color, border, box-shadow, color, filter, opacity, scale;
 
-    /* Default icon styles */
-    &:where(:has(.icon)) {
-      --icon-size: var(--btn-icon-size, 1.3em);
-
-      text-align: start;
-    }
-
-    /* With radios and checkboxes */
-    &:has(input[type=radio]),
-    &:has(input[type=checkbox]) {
-      position: relative;
-
-      :is(input[type=radio]),
-      :is(input[type=checkbox]) {
-        --hover-size: 0;
-
-        appearance: none;
-        border-radius: var(--btn-border-radius);
-        cursor: pointer;
-        display: flex;
-        inset: 0;
-        margin: 0;
-        padding: 0;
-        position: absolute;
-
-        &:focus-visible {
-          outline: none;
-        }
-      }
-
-      .checked {
-        display: none;
+    @media (any-hover: hover) {
+      &:hover {
+        filter: brightness(var(--btn-hover-brightness));
       }
     }
 
-    &:has(input:checked)  {
-      --btn-background: var(--color-ink);
-      --btn-color: var(--color-ink-inverted);
-      --outline-color: var(--color-ink);
-
-      .checked {
-        display: block;
-      }
+    @media (prefers-color-scheme: dark) {
+      --btn-hover-brightness: 1.25;
     }
 
     &[disabled],
@@ -93,15 +55,13 @@
     --btn-color: inherit;
     --btn-icon-size: 100%;
     --btn-padding: 0;
-    --hover-size: 0;
-    --outline-size: 0;
   }
 
   .btn--link {
     --btn-background: var(--color-link);
     --btn-border-color: var(--color-canvas);
     --btn-color: var(--color-ink-inverted);
-    --outline-color: var(--color-link);
+    --focus-ring-color: var(--color-link);
   }
 
   .btn--circle,
@@ -122,16 +82,16 @@
 
   .btn--negative {
     --btn-background: var(--color-negative);
-    --btn-border-color: var(--color-canvas);
+    --btn-border-color: var(--color-negative);
     --btn-color: var(--color-ink-inverted);
-    --outline-color: var(--color-negative);
+    --focus-ring-color: var(--color-negative);
   }
 
   .btn--positive {
     --btn-background: var(--color-positive);
     --btn-border-color: var(--color-canvas);
     --btn-color: var(--color-ink-inverted);
-    --outline-color: var(--color-positive);
+    --focus-ring-color: var(--color-positive);
   }
 
   .btn--success {
@@ -157,7 +117,47 @@
     --btn-background: var(--color-ink);
     --btn-border-color: var(--color-canvas);
     --btn-color: var(--color-canvas);
-    --outline-color: var(--color-ink);
+    --focus-ring-color: var(--color-ink);
+  }
+
+  /* Toggleable buttons
+  /* ------------------------------------------------------------------------ */
+
+  .btn {
+    :is(input[type=radio], input[type=checkbox]) {
+      appearance: none;
+      border-radius: var(--btn-border-radius);
+      cursor: pointer;
+      display: flex;
+      inset: 0;
+      margin: 0;
+      padding: 0;
+      position: absolute;
+
+      &:focus-visible {
+        outline: none;
+      }
+    }
+
+    .checked {
+      display: none;
+    }
+
+    &:has(input:focus-visible)  {
+      outline: var(--focus-ring-size) solid var(--focus-ring-color);
+      outline-offset: var(--focus-ring-offset);
+    }
+
+    &:has(input:checked)  {
+      --btn-background: var(--color-ink);
+      --btn-border-color: var(--color-ink);
+      --btn-color: var(--color-ink-inverted);
+      --focus-ring-color: var(--color-ink);
+
+      .checked {
+        display: block;
+      }
+    }
   }
 
   /* Button groups
diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 4e028663f..ec8a848e0 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -118,6 +118,7 @@
   /* ------------------------------------------------------------------------ */
 
   .cards__heading {
+
     background-color: var(--color-canvas);
     display: flex;
     font-size: var(--text-medium);
@@ -129,17 +130,19 @@
     position: sticky;
     z-index: 2;
 
-    &, button {
+    &, .cards__filter {
       font-weight: bold;
       text-transform: uppercase;
     }
 
-    button {
-      --hover-size: 0;
+    .cards__filter {
+      --filter-block-padding: 0.5rem;
 
+      background-color: var(--color-canvas);
+      border-radius: 99rem;
       inline-size: auto;
-      margin-inline-start: 2em;
-      padding: 0 2em 0 0;
+      margin-block: calc(-1 * var(--filter-block-padding));
+      padding-block: var(--filter-block-padding);
     }
 
     dialog {
diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index 9a4de11ed..13933d9da 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -48,10 +48,10 @@
 
     .collection-picker__button {
       --btn-border-size: 0;
-    
+
       font-size: 0.5em;
       margin-inline-start: 1ch;
-  
+
       + .panel {
         --panel-size: 18ch;
       }
@@ -152,6 +152,7 @@
 
       &:has(input:checked)  {
         --btn-background: var(--card-color);
+        --btn-border-color: var(--card-color);
         --btn-color: var(--color-ink-inverted);
       }
     }
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 4462dfb6e..82151afcc 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -4,6 +4,7 @@
 
   .card {
     --avatar-size: 2.75em;
+    --card-bg-color: color-mix(in srgb, var(--card-color) 4%, var(--color-canvas));
     --card-padding-inline: var(--inline-space-double);
     --card-padding-block: var(--block-space);
     --border-color: transparent;
@@ -11,7 +12,7 @@
     --border-size: 0;
 
     aspect-ratio: var(--card-aspect-ratio, auto);
-    background-color: color-mix(in srgb, var(--card-color) 4%, var(--color-canvas));
+    background-color: var(--card-bg-color);
     border-radius: var(--border-radius);
     box-shadow: var(--shadow);
     color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
@@ -64,6 +65,22 @@
     max-inline-size: 100%;
     min-inline-size: 0;
     padding: var(--block-space-half) var(--inline-space) var(--block-space-half) var(--card-padding-inline);
+
+    &:has(.collection-picker__button) {
+      cursor: pointer;
+      transition: background-color: 100ms ease-out;
+
+      @media (any-hover: hover) {
+        &:hover {
+          background-color: color-mix(in srgb, var(--card-color) 90%, var(--color-ink));
+        }
+      }
+
+      &:has(.btn:focus-visible) {
+        outline: var(--focus-ring-size) solid var(--focus-ring-color);
+        outline-offset: var(--focus-ring-offset);
+      }
+    }
   }
 
   .card__collection-name {
@@ -139,8 +156,6 @@
   }
 
   .card__link {
-    --hover-size: 0;
-
     content: "";
     inset: 0;
     position: absolute;
@@ -168,7 +183,6 @@
   }
 
   .card__title {
-    --hover-size: 0;
     --input-border-radius: 0;
     --input-color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
     --lines: 3;
@@ -204,10 +218,17 @@
     --btn-icon-size: 1em;
     --card-padding-block: calc(var(--block-space) * 1.25);
 
-    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-link) 20%, var(--color-canvas));
+    box-shadow: 0 0 0 1px oklch(var(--lch-blue-lighter));
     color: var(--btn-color);
     font-weight: 700;
-    transition: none;
+    transition: box-shadow 100ms ease-out;
+
+    @media (any-hover: hover) {
+      &:hover {
+        filter: none;
+        box-shadow: 0 0 0 1px oklch(var(--lch-blue-lighter)), var(--shadow);
+      }
+    }
   }
 
   .card__move-button {
@@ -393,7 +414,6 @@
     --btn-icon-size: 0.75em;
     --btn-padding: 0;
     --btn-size: 1.25em;
-    --hover-size: 0;
 
     position: relative;
     z-index: 1;
diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css
index 1d7f2264c..54bc73484 100644
--- a/app/assets/stylesheets/events.css
+++ b/app/assets/stylesheets/events.css
@@ -198,10 +198,7 @@
   }
 
   .event--related {
-    --hover-color: var(--card-color);
-    --hover-size: 0.15rem;
-
-    box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
+    box-shadow: 0 0 0 0.15rem var(--card-color);
   }
 
   .event__content {
diff --git a/app/assets/stylesheets/expander.css b/app/assets/stylesheets/expander.css
index 291851b34..0182f6497 100644
--- a/app/assets/stylesheets/expander.css
+++ b/app/assets/stylesheets/expander.css
@@ -30,7 +30,7 @@
   }
 
   [open] & {
-    box-shadow: none;
+    filter: none;
   }
 
   .icon {
@@ -44,6 +44,7 @@
   align-items: stretch;
   border-radius: var(--expander-radius);
   flex-direction: column;
+  filter: none;
   gap: 0;
   padding-block-start: var(--expander-height);
 
@@ -92,21 +93,19 @@
 }
 
 .expander__item {
-  --btn-background: transparent;
+  --btn-background: var(--card-color);
   --btn-border-radius: 0.3em;
   --btn-border-size: 0;
   --btn-font-weight: 500;
   --btn-padding: var(--inline-space-half) var(--inline-space);
-  --hover-size: 0;
-  --outline-color: transparent;
 
   inline-size: calc(100% + var(--inline-space-double));
   margin-inline-start: calc(-1 * var(--inline-space));
   justify-content: flex-start;
   white-space: nowrap;
 
-  &:hover,
+  /* &:hover,
   &:focus-visible {
     background-color: oklch(var(--lch-canvas) / 15%);
-  }
+  } */
 }
diff --git a/app/assets/stylesheets/fizzy-menu.css b/app/assets/stylesheets/fizzy-menu.css
index bead9d38a..fa29fe8b6 100644
--- a/app/assets/stylesheets/fizzy-menu.css
+++ b/app/assets/stylesheets/fizzy-menu.css
@@ -14,12 +14,19 @@
     --input-border-color: var(--color-selected-dark);
     --input-padding: 0.2em 2em 0.2em 0.9em;
 
+    background-color: var(--color-canvas);
     box-shadow: 0 0 0 1px oklch(var(--lch-blue-medium) / 5%),
                 0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%),
                 0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%),
                 0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%);
     margin-block-start: 0.1em;
 
+    @media (any-hover: hover) {
+      &:hover {
+        filter: brightness(0.9);
+      }
+    }
+
     svg {
       block-size: auto;
       inline-size: 1.1em;
@@ -69,4 +76,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/inputs.css b/app/assets/stylesheets/inputs.css
index ed4a51072..ecd175e10 100644
--- a/app/assets/stylesheets/inputs.css
+++ b/app/assets/stylesheets/inputs.css
@@ -21,18 +21,12 @@
       -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
     }
 
-    &:where(:not(:active)):focus {
-      --input-border-color: var(--color-selected-dark);
-      --hover-color: var(--color-selected-dark);
-      --outline-size: 0;
-      --outline-color: transparent;
-
-      filter: var(--hover-filter);
-      box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
+    &:where(:focus) {
+      --focus-ring-offset: -1px;
     }
 
-    &:where([disabled]):not(:hover):not(:active) {
-      filter: none;
+    &[readonly] {
+      --focus-ring-size: 0;
     }
   }
 
@@ -134,6 +128,9 @@
 
   /* Switches */
   .switch {
+    --switch-color: var(--color-ink-medium);
+    --switch-hover-brightness: 0.9;
+
     block-size: 1.75em;
     border-radius: 2em;
     display: inline-flex;
@@ -142,9 +139,7 @@
 
     &:has(:focus-visible) {
       .switch__btn {
-        box-shadow:
-          0 0 0 var(--outline-size) var(--color-canvas),
-          0 0 0 calc(var(--outline-size) * 2) var(--color-ink);
+        outline: var(--focus-ring-size) solid var(--focus-ring-color);
       }
     }
   }
@@ -156,10 +151,11 @@
   }
 
   .switch__btn {
-    background-color: var(--color-ink-medium);
+    background-color: var(--switch-color);
     border-radius: 2em;
     cursor: pointer;
     inset: 0;
+    outline-offset: var(--focus-ring-offset);
     position: absolute;
     transition: 150ms ease;
 
@@ -175,13 +171,20 @@
       transition: 150ms ease;
     }
 
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: color-mix(in srgb, var(--switch-color) 80%, var(--color-ink));
+      }
+    }
+
     .switch__input:disabled + & {
-      background-color: var(--color-ink-medium) !important;
+      --switch-color: var(--color-ink-medium) !important;
+
       cursor: not-allowed;
     }
 
     .switch__input:checked + & {
-      background-color: var(--color-link);
+      --switch-color: var(--color-link);
 
       &::before {
         transform: translateX(1.2em);
@@ -191,15 +194,13 @@
 
   /* Containers that act like (and contain) inputs */
   .input--actor {
+    outline-offset: -1px;
     transition: box-shadow 150ms ease, outline-offset 150ms ease;
 
     &:focus-within {
       --input-border-color: var(--color-selected-dark);
-      --hover-color: var(--color-selected-dark);
-      --outline-size: 0;
 
-      filter: var(--hover-filter);
-      box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
+      outline: var(--focus-ring-size) solid var(--focus-ring-color);
     }
 
     .input {
@@ -207,9 +208,6 @@
       --input-border-radius: 0;
       --input-background: transparent;
       --input-border-size: 0;
-      --hover-size: 0;
-      --outline-size: 0;
-      --outline-color: transparent;
 
       inline-size: 100%;
       outline: 0;
@@ -233,11 +231,9 @@
   }
 
   .input.boost__input {
-    --hover-size: 0;
     --input-border-radius: 0;
     --input-border-size: 0;
     --input-padding: 0;
-    --outline-size: 0;
 
     color: inherit;
     font-size: inherit;
diff --git a/app/assets/stylesheets/knobs.css b/app/assets/stylesheets/knobs.css
index 390fa6d5a..cf73d217b 100644
--- a/app/assets/stylesheets/knobs.css
+++ b/app/assets/stylesheets/knobs.css
@@ -19,8 +19,6 @@
   }
 
   .knob__slider {
-    --hover-size: 0;
-
     appearance: none;
     background-color: transparent;
     block-size: var(--knob-size);
@@ -75,7 +73,8 @@
     }
 
     &:has(:focus-visible) {
-      box-shadow: 0 0 0 2px var(--knob-color);
+      outline: var(--focus-ring-size) solid var(--focus-ring-color);
+      outline-offset: 0;
     }
 
     /* Tick marks */
diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css
index 9bf4d4953..40de97e09 100644
--- a/app/assets/stylesheets/layout.css
+++ b/app/assets/stylesheets/layout.css
@@ -92,7 +92,9 @@
       display: none;
     }
   }
+}
 
+@layer components {
   .skip-navigation {
     --left-offset: -999em;
 
diff --git a/app/assets/stylesheets/markdown.css b/app/assets/stylesheets/markdown.css
index 3e91fb41e..5dfac832c 100644
--- a/app/assets/stylesheets/markdown.css
+++ b/app/assets/stylesheets/markdown.css
@@ -1,6 +1,5 @@
 @layer components {
   .heading__link {
-    --hover-size: 0;
     --opacity: 0.5;
     --size: 0.8em;
 
diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index 8e9edcea5..1b158f9e6 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -59,14 +59,18 @@
 
     @media (any-hover: hover) {
       &:hover {
-        --hover-size: 0;
-
-        background: var(--color-selected);
+        background: var(--color-ink-lightest);
       }
     }
 
     &[aria-selected] {
-      box-shadow: 0 0 0 var(--hover-size) var(--color-selected-dark) inset;
+      background-color: var(--color-selected);
+
+      @media (any-hover: hover) {
+        &:hover {
+          background-color: var(--color-selected);
+        }
+      }
     }
   }
 
@@ -76,8 +80,6 @@
     --btn-border-size: 0;
     --btn-font-weight: 500;
     --btn-padding: var(--inline-space-half) 0 var(--inline-space-half) var(--inline-space);
-    --hover-size: 0;
-    --outline-color: transparent;
 
     flex: 1 1 auto;
     justify-content: start;
@@ -90,11 +92,6 @@
       }
     }
 
-    &[aria-selected] {
-      border-radius: 0.3em;
-      box-shadow: 0 0 0 var(--hover-size) var(--color-selected-dark) inset;
-    }
-
     &:has(input:checked)  {
       --btn-background: transparent;
       --btn-color: var(--color-ink);
@@ -110,7 +107,6 @@
 
       @media (any-hover: hover) {
         &:where(:not(:active):hover) {
-          --hover-size: 0;
           --btn-background: var(--color-selected);
         }
       }
diff --git a/app/assets/stylesheets/reactions.css b/app/assets/stylesheets/reactions.css
index 22454ca51..f232c925f 100644
--- a/app/assets/stylesheets/reactions.css
+++ b/app/assets/stylesheets/reactions.css
@@ -26,6 +26,7 @@
 
   .reaction {
     --btn-size: 100%;
+    --reaction-hover-brightness: 0.9;
 
     align-items: center;
     background-color: var(--color-canvas);
@@ -51,18 +52,13 @@
 
     @media (any-hover: hover) {
       &:not(:active):hover {
-        --reaction-border-color: var(--color-ink-medium);
+        filter: brightness(var(--reaction-hover-brightness));
 
-        box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
+        @media (prefers-color-scheme: dark) {
+          --reaction-hover-brightness: 1.25;
+        }
       }
     }
-
-    &:has(.reaction__input):focus-within {
-      --hover-color: var(--color-selected-dark);
-      --reaction-border-color: var(--color-selected-dark);
-
-      box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
-    }
   }
 
   /* Make the avatar and delete buttons fit nicely within the reaction */
@@ -74,6 +70,7 @@
 
   .reaction__delete {
     display: none;
+    translate: 0.25em;
 
     .expanded & {
       display: flex;
@@ -89,17 +86,20 @@
       transform-origin: left center;
     }
 
+    &:has(.input:focus) {
+      outline: var(--focus-ring-size) solid var(--focus-ring-color);
+      outline-offset: var(--focus-ring-offset);
+    }
+
     .reaction__form-label:focus {
       outline: none;
     }
   }
 
   .reaction__input {
-    --hover-size: 0;
     --input-background: transparent;
     --input-border-size: 0;
     --input-padding: 0;
-    --outline-size: 0;
 
     box-shadow: none;
     display: inherit;
diff --git a/app/assets/stylesheets/rich-text-content.css b/app/assets/stylesheets/rich-text-content.css
index a24c1845d..396e56db1 100644
--- a/app/assets/stylesheets/rich-text-content.css
+++ b/app/assets/stylesheets/rich-text-content.css
@@ -210,10 +210,6 @@
     }
   }
 
-  .attachment__figure {
-    --hover-size: 0;
-  }
-
   .attachment--file {
     align-items: center;
     display: inline-flex;
@@ -329,8 +325,6 @@
   }
 
   .attachment__link {
-    --hover-size: 0;
-
     color: var(--color-link);
     text-decoration: underline;
   }
diff --git a/app/assets/stylesheets/terminals.css b/app/assets/stylesheets/terminals.css
index 116a92e1c..b6960ff7e 100644
--- a/app/assets/stylesheets/terminals.css
+++ b/app/assets/stylesheets/terminals.css
@@ -23,8 +23,6 @@
     --btn-border-color: var(--color-terminal-text);
     --btn-padding: 0.1em 0.7em;
     --btn-border-size: 1px;
-    --hover-color: var(--color-terminal-text);
-    --hover-size: 1px;
 
     font-family: var(--font-mono);
     font-size: var(--text-x-small);
@@ -95,10 +93,7 @@
   .terminal__input:is(.input) {
     --input-border-color: transparent;
     --input-border-radius: 0.3em;
-    --hover-color: transparent;
     --input-color: var(--color-terminal-text);
-    --outline-size: 0;
-    --outline-color: transparent;
 
     accent-color: var(--color-terminal-text);
     caret-color: var(--color-terminal-text);
diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css
index 48ae50b31..8ea7aea54 100644
--- a/app/assets/stylesheets/trays.css
+++ b/app/assets/stylesheets/trays.css
@@ -63,9 +63,6 @@
   /* ------------------------------------------------------------------------ */
 
   .tray__expander {
-    --hover-size: 0;
-    --outline-size: 0;
-
     align-self: stretch;
     background: transparent;
     border: 0;
@@ -116,8 +113,6 @@
   /* ------------------------------------------------------------------------ */
 
   .tray__actions {
-    --hover-size: 0;
-
     align-self: center;
     align-items: stretch;
     border: 1px dashed oklch(var(--lch-white) / 50%);
diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css
index 741e417d7..65ec98fcf 100644
--- a/app/assets/stylesheets/utilities.css
+++ b/app/assets/stylesheets/utilities.css
@@ -218,4 +218,8 @@
   /* Visibility */
   [hidden] { display: none !important; }
   [contents] { display: contents; }
+
+  .hide-focus-ring {
+    --focus-ring-size: 0;
+  }
 }
diff --git a/app/assets/stylesheets/workflows.css b/app/assets/stylesheets/workflows.css
index 2486b99fa..2dc043584 100644
--- a/app/assets/stylesheets/workflows.css
+++ b/app/assets/stylesheets/workflows.css
@@ -4,14 +4,13 @@
     --btn-padding: 0.2em 0.5em;
     --btn-border-size: 0;
     --btn-border-radius: 0.2em;
-    --hover-size: 0;
 
     color: inherit;
     inline-size: 100%;
 
     @media (hover: hover) {
       &:hover {
-        background-color: color(from var(--card-color) srgb r g b / 0.15);
+        --btn-background: color(from var(--card-color) srgb r g b / 0.15);
       }
     }
   }
@@ -23,21 +22,29 @@
 
     @media (hover: hover) {
       &:hover {
-        background-color: color(from var(--card-color) srgb r g b / 0.65);
+        --btn-background: var(--card-color);
       }
     }
   }
 
+  /* Workflow settings
+  /* ------------------------------------------------------------------------ */
+
   .workflow-preview {
     --border-size: 0.2em;
 
     aspect-ratio: 1;
+    border: 0.2em solid var(--color-ink-lighter);
     flex: 1 1 30%;
     max-inline-size: 30%;
 
-    button {
-      --hover-size: 0;
+    @media (any-hover: hover) {
+      &:hover:not(.workflow-preview--selected) {
+        border-color: var(--color-ink-light);
+      }
+    }
 
+    button {
       appearance: none;
       aspect-ratio: 1;
       background: transparent;
@@ -58,15 +65,23 @@
   }
 
   .workflow-preview--selected {
-    --border-color: var(--color-link);
+    border-color: var(--color-link);
   }
 
   .workflow-preview__swatch {
     --btn-size: 1em;
     --btn-border-radius: 50%;
     --btn-border-size: 0;
-    --hover-size: 0;
 
     cursor: auto;
   }
+
+  .workflow__swatch-btn {
+
+    @media (any-hover: hover) {
+      &:hover {
+        filter: brightness(0.9);
+      }
+    }
+  }
 }
diff --git a/app/views/accounts/settings/_users.html.erb b/app/views/accounts/settings/_users.html.erb
index 7ffd3c5a5..60eecef33 100644
--- a/app/views/accounts/settings/_users.html.erb
+++ b/app/views/accounts/settings/_users.html.erb
@@ -7,7 +7,7 @@
       <input placeholder="Filter…" class="input input--transparent full-width" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-filter-target="input" data-action="input->filter#filter">
     </div>
 
-    <div data-filter-target="list" class="users-list flex flex-column gap">
+    <div data-filter-target="list" class="users-list">
       <%= render partial: "accounts/user", collection: users %>
     </div>
   </div>
diff --git a/app/views/cards/comments/reactions/_reaction.html.erb b/app/views/cards/comments/reactions/_reaction.html.erb
index 8f5c121a6..621b8406a 100644
--- a/app/views/cards/comments/reactions/_reaction.html.erb
+++ b/app/views/cards/comments/reactions/_reaction.html.erb
@@ -17,7 +17,7 @@
 
   <%= button_to card_comment_reaction_path(reaction.comment.card, reaction.comment, reaction),
         method: :delete,
-        class: "btn btn--negative flex-item-justify-end reaction__delete",
+        class: "reaction__delete btn btn--negative flex-item-justify-end",
         data: { action: "reaction-delete#perform", reaction_delete_target: "button" } do %>
     <%= icon_tag "minus" %>
     <span class="for-screen-reader">Delete this reaction</span>
diff --git a/app/views/cards/display/common/_assignees.html.erb b/app/views/cards/display/common/_assignees.html.erb
index 19d5d1c83..614a976e0 100644
--- a/app/views/cards/display/common/_assignees.html.erb
+++ b/app/views/cards/display/common/_assignees.html.erb
@@ -4,7 +4,7 @@
   <% end %>
 
   <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
-    <button class="btn card__hide-on-index fill-transparent" data-action="click->dialog#open:stop">
+    <button class="btn card__hide-on-index" data-action="click->dialog#open:stop" style="--btn-background: var(--card-bg-color);">
       <%= icon_tag "person-add" %>
       <span class="for-screen-reader">Assign</span>
     </button>
diff --git a/app/views/cards/display/perma/_tags.html.erb b/app/views/cards/display/perma/_tags.html.erb
index 637b55097..4e870078c 100644
--- a/app/views/cards/display/perma/_tags.html.erb
+++ b/app/views/cards/display/perma/_tags.html.erb
@@ -12,7 +12,7 @@
   </div>
 
   <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
-    <button class="tag-picker__button btn card__hide-on-index fill-transparent" data-action="click->dialog#open:stop">
+    <button class="tag-picker__button btn card__hide-on-index" data-action="click->dialog#open:stop" style="--btn-background: var(--card-bg-color);">
       <%= icon_tag "tag" %>
       <span class="for-screen-reader">Add a tag</span>
     </button>
diff --git a/app/views/cards/display/public_preview/_meta.html.erb b/app/views/cards/display/public_preview/_meta.html.erb
index 6b62fe970..a49cbfbcb 100644
--- a/app/views/cards/display/public_preview/_meta.html.erb
+++ b/app/views/cards/display/public_preview/_meta.html.erb
@@ -28,7 +28,7 @@
       <% end %>
 
       <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
-        <button class="btn card__hide-on-index fill-transparent" data-action="click->dialog#open:stop">
+        <button class="btn card__hide-on-index" data-action="click->dialog#open:stop" style="--btn-background: var(--card-bg-color);">
           <%= icon_tag "person-add" %>
           <span class="for-screen-reader">Assign</span>
         </button>
diff --git a/app/views/cards/edit.html.erb b/app/views/cards/edit.html.erb
index e438dbbdb..8cf623422 100644
--- a/app/views/cards/edit.html.erb
+++ b/app/views/cards/edit.html.erb
@@ -2,7 +2,7 @@
   <%= form_with model: @card, url: collection_card_path(@card.collection, @card), class: "card__content", data: { controller: "autoresize form" } do |form| %>
     <h1 class="card__title">
       <%= form.label :title, class: "flex flex-column align-center autoresize__wrapper", data: { autoresize_target: "wrapper", autoresize_clone_value: "" } do %>
-        <%= form.text_area :title, class: "input input--textarea full-width borderless txt-align-start card-field__title autoresize__textarea",
+        <%= form.text_area :title, class: "card-field__title input input--textarea hide-focus-ring full-width borderless txt-align-start autoresize__textarea",
               required: true, autofocus: true, placeholder: "Name it…", rows: 1,
               data: { autoresize_target: "textarea", action: "input->autoresize#resize keydown.enter->form#submit:prevent keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel focus->form#select" } %>
       <% end %>
diff --git a/app/views/cards/index/_closure_filter.html.erb b/app/views/cards/index/_closure_filter.html.erb
index da5b5bf22..49116a255 100644
--- a/app/views/cards/index/_closure_filter.html.erb
+++ b/app/views/cards/index/_closure_filter.html.erb
@@ -1,5 +1,5 @@
 <div class="cards__heading" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
-  <button class="cards__filter input input--select borderless overflow-ellipsis" data-action="click->dialog#open:stop">
+  <button class="cards__filter btn input input--select borderless overflow-ellipsis" data-action="click->dialog#open:stop">
     Recently closed
   </button>
 
diff --git a/app/views/cards/index/_workflow_filter.html.erb b/app/views/cards/index/_workflow_filter.html.erb
index d453917d5..e0f9dea0b 100644
--- a/app/views/cards/index/_workflow_filter.html.erb
+++ b/app/views/cards/index/_workflow_filter.html.erb
@@ -1,5 +1,5 @@
-<div class="cards__heading cards__filter" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
-  <button class="cards__filter input input--select borderless overflow-ellipsis" data-action="click->dialog#open:stop">
+<div class="cards__heading" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+  <button class="cards__filter btn input input--select borderless overflow-ellipsis" data-action="click->dialog#open:stop">
     <% if filter.stages.any? %>
       <%= filter.stages.map(&:name).to_sentence %>
     <% else %>
diff --git a/app/views/cards/show.html.erb b/app/views/cards/show.html.erb
index fe318394e..19d95cae0 100644
--- a/app/views/cards/show.html.erb
+++ b/app/views/cards/show.html.erb
@@ -27,8 +27,11 @@
 <% end %>
 
 <header class="card-perma__collection-header">
-  <%= link_to cards_path(collection_ids: [ @card.collection ]), class: "txt-large overflow-ellipsis margin-none txt-ink", style: "view-transistion-name: card-collection-title", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
-    &larr; <strong class="font-black"><%= @card.collection.name %></strong>
+  <%= link_to cards_path(collection_ids: [ @card.collection ]), class: "btn borderless txt-large", style: "--btn-padding: 0.25ch 1ch 0.25ch 0.75ch; view-transistion-name: card-collection-title;", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
+    <span>
+      &larr;
+      <strong class="font-black"><%= @card.collection.name %></strong>
+    </span>
   <% end %>
 </header>
 
diff --git a/app/views/collections/edit/_publication.html.erb b/app/views/collections/edit/_publication.html.erb
index 921cd6fe2..32299fe88 100644
--- a/app/views/collections/edit/_publication.html.erb
+++ b/app/views/collections/edit/_publication.html.erb
@@ -18,7 +18,7 @@
         </div>
 
         <div class="flex align-center gap-half margin-block">
-          <%= text_field_tag :publication_url, published_collection_url(collection), disabled: true, class: "full-width input fill-white" %>
+          <%= text_field_tag :publication_url, published_collection_url(collection), readonly: true, class: "full-width input fill-white" %>
           <div class="flex align-center justify-center gap-half">
             <%= button_to_copy_to_clipboard(published_collection_url(collection)) do %>
               <%= icon_tag "copy-paste" %>
diff --git a/app/views/collections/edit/_workflows.html.erb b/app/views/collections/edit/_workflows.html.erb
index 8fa62947d..4914f4c38 100644
--- a/app/views/collections/edit/_workflows.html.erb
+++ b/app/views/collections/edit/_workflows.html.erb
@@ -3,7 +3,7 @@
   <div class="flex justify-center margin-block-end">Use a Workflow to track progress in this Collection.</div>
   <div class="flex flex-wrap gap justify-center">
     <% Workflow.all.each do |workflow| %>
-      <div class="workflow-preview txt-align-start border border-radius <%= 'workflow-preview--selected' if workflow == collection.workflow %>">
+      <div class="workflow-preview txt-align-start border-radius <%= 'workflow-preview--selected' if workflow == collection.workflow %>">
         <%= button_to collection_workflow_path(collection), method: :patch, aria: { label: workflow == collection.workflow ? "Stop using this workflow" : "Use this workflow" } do %>
           <%= hidden_field_tag "collection[workflow_id]", workflow == collection.workflow ? "" : workflow.id %>
           <strong class="txt-small overflow-ellipsis flex-item-no-shrink"><%= workflow.name %></strong>
diff --git a/app/views/commands/_form.html.erb b/app/views/commands/_form.html.erb
index 32965e244..06156f3e9 100644
--- a/app/views/commands/_form.html.erb
+++ b/app/views/commands/_form.html.erb
@@ -22,7 +22,7 @@
 
   <%= rich_textarea_tag "command", nil,
         toolbar: false,
-        class: "terminal__input input fill-transparent unpad",
+        class: "terminal__input input hide-focus-ring fill-transparent unpad",
         "single-line": true,
         attachments: false,
         data: {
diff --git a/app/views/workflows/stages/_color.html.erb b/app/views/workflows/stages/_color.html.erb
index b51ae516d..071503cf0 100644
--- a/app/views/workflows/stages/_color.html.erb
+++ b/app/views/workflows/stages/_color.html.erb
@@ -1,5 +1,5 @@
 <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close">
-  <button class="btn btn--reversed txt-small borderless" data-action="dialog#open:stop" style="--btn-background: <%= stage_color(stage) %>">
+  <button class="workflow__swatch-btn btn btn--reversed txt-small borderless" data-action="dialog#open:stop" style="--btn-background: <%= stage_color(stage) %>">
     <%= icon_tag "art" %>
     <span class="for-screen-reader">Change color</span>
   </button>