diff --git a/src/lib/components/button.css b/src/lib/components/button.css
index 56b819db..d783f14b 100644
--- a/src/lib/components/button.css
+++ b/src/lib/components/button.css
@@ -164,43 +164,42 @@
   .button-pill {
     @apply rounded-full;
   }
-}
 
-/* these are unlayered, so they beat the @layer rules above no matter their
-   specificity — hence the :not(.button-outline) on every filled variant */
-[data-fl-theme="clay"] .button-primary:not(.button-outline),
-[data-fl-theme="clay"] .button-secondary:not(.button-outline),
-[data-fl-theme="clay"] .button-error:not(.button-outline) {
-  box-shadow: var(--shadow-sm), var(--shadow-inset-strong);
-}
+  /* a theme rule outranks the outline variants above, hence the :not(.button-outline) */
+  [data-fl-theme="clay"] .button-primary:not(.button-outline),
+  [data-fl-theme="clay"] .button-secondary:not(.button-outline),
+  [data-fl-theme="clay"] .button-error:not(.button-outline) {
+    box-shadow: var(--shadow-sm), var(--shadow-inset-strong);
+  }
 
-/* hover lift + bigger offset shadow; active press + smaller offset shadow */
-[data-fl-theme="clay"] .button-primary:not(.button-outline):hover {
-  background: var(--primary-bold);
-  transform: translateY(-2px);
-  box-shadow:
-    6px 6px 0 rgba(var(--shadow-color), 0.3),
-    var(--shadow-inset-strong);
-}
-[data-fl-theme="clay"] .button-secondary:not(.button-outline):hover {
-  background: var(--secondary-bold);
-  transform: translateY(-2px);
-  box-shadow:
-    6px 6px 0 rgba(var(--shadow-color), 0.3),
-    var(--shadow-inset-strong);
-}
-[data-fl-theme="clay"] .button-neutral:hover,
-[data-fl-theme="clay"] .button-outline:hover,
-[data-fl-theme="clay"] .button-error:not(.button-outline):hover {
-  transform: translateY(-2px);
-}
-[data-fl-theme="clay"] .button-primary:not(.button-outline):active,
-[data-fl-theme="clay"] .button-secondary:not(.button-outline):active,
-[data-fl-theme="clay"] .button-neutral:active,
-[data-fl-theme="clay"] .button-outline:active {
-  transform: translateY(2px);
-  box-shadow: 2px 2px 0 rgba(var(--shadow-color), 0.3);
-}
-[data-fl-theme="clay"] .button-error:not(.button-outline):active {
-  transform: translateY(2px);
+  /* hover lift + bigger offset shadow; active press + smaller offset shadow */
+  [data-fl-theme="clay"] .button-primary:not(.button-outline):hover {
+    background: var(--primary-bold);
+    transform: translateY(-2px);
+    box-shadow:
+      6px 6px 0 rgba(var(--shadow-color), 0.3),
+      var(--shadow-inset-strong);
+  }
+  [data-fl-theme="clay"] .button-secondary:not(.button-outline):hover {
+    background: var(--secondary-bold);
+    transform: translateY(-2px);
+    box-shadow:
+      6px 6px 0 rgba(var(--shadow-color), 0.3),
+      var(--shadow-inset-strong);
+  }
+  [data-fl-theme="clay"] .button-neutral:hover,
+  [data-fl-theme="clay"] .button-outline:hover,
+  [data-fl-theme="clay"] .button-error:not(.button-outline):hover {
+    transform: translateY(-2px);
+  }
+  [data-fl-theme="clay"] .button-primary:not(.button-outline):active,
+  [data-fl-theme="clay"] .button-secondary:not(.button-outline):active,
+  [data-fl-theme="clay"] .button-neutral:active,
+  [data-fl-theme="clay"] .button-outline:active {
+    transform: translateY(2px);
+    box-shadow: 2px 2px 0 rgba(var(--shadow-color), 0.3);
+  }
+  [data-fl-theme="clay"] .button-error:not(.button-outline):active {
+    transform: translateY(2px);
+  }
 }
diff --git a/src/lib/components/card-button.css b/src/lib/components/card-button.css
index 914bf554..572a0f55 100644
--- a/src/lib/components/card-button.css
+++ b/src/lib/components/card-button.css
@@ -43,26 +43,26 @@
       @apply text-sm;
     }
   }
-}
 
-[data-fl-theme="flat"] .card-button {
-  @apply border border-solid;
-}
-
-[data-fl-theme="navy"] .card-button {
-  @apply border border-solid;
-}
-
-[data-fl-theme="clay"] .card-button {
-  @apply border-2 border-solid shadow-sm;
-
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-lg), var(--shadow-inset);
+  [data-fl-theme="flat"] .card-button {
+    @apply border border-solid;
   }
 
-  &:active {
-    transform: translateY(2px);
-    box-shadow: 2px 2px 0 rgba(var(--shadow-color), 0.3);
+  [data-fl-theme="navy"] .card-button {
+    @apply border border-solid;
+  }
+
+  [data-fl-theme="clay"] .card-button {
+    @apply border-2 border-solid shadow-sm;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: var(--shadow-lg), var(--shadow-inset);
+    }
+
+    &:active {
+      transform: translateY(2px);
+      box-shadow: 2px 2px 0 rgba(var(--shadow-color), 0.3);
+    }
   }
 }
diff --git a/src/lib/components/card.css b/src/lib/components/card.css
index 6725bacd..5c9bb0ec 100644
--- a/src/lib/components/card.css
+++ b/src/lib/components/card.css
@@ -51,46 +51,46 @@
   .dialog .card {
     box-shadow: none;
   }
-}
 
-[data-fl-theme="clay"] .card {
-  box-shadow: var(--shadow-lg), var(--shadow-inset);
-}
+  [data-fl-theme="clay"] .card {
+    box-shadow: var(--shadow-lg), var(--shadow-inset);
+  }
 
-[data-fl-theme="clay"] .card-sm {
-  box-shadow: var(--shadow), var(--shadow-inset);
-}
+  [data-fl-theme="clay"] .card-sm {
+    box-shadow: var(--shadow), var(--shadow-inset);
+  }
 
-[data-fl-theme="clay"] .card-primary,
-[data-fl-theme="clay"] .card-secondary {
-  box-shadow:
-    8px 8px 0 color-mix(in srgb, var(--accent) 28%, transparent),
-    var(--shadow-inset);
-}
+  [data-fl-theme="clay"] .card-primary,
+  [data-fl-theme="clay"] .card-secondary {
+    box-shadow:
+      8px 8px 0 color-mix(in srgb, var(--accent) 28%, transparent),
+      var(--shadow-inset);
+  }
 
-[data-fl-theme="clay"] .card-sm.card-primary,
-[data-fl-theme="clay"] .card-sm.card-secondary {
-  box-shadow:
-    6px 6px 0 color-mix(in srgb, var(--accent) 28%, transparent),
-    var(--shadow-inset);
-}
+  [data-fl-theme="clay"] .card-sm.card-primary,
+  [data-fl-theme="clay"] .card-sm.card-secondary {
+    box-shadow:
+      6px 6px 0 color-mix(in srgb, var(--accent) 28%, transparent),
+      var(--shadow-inset);
+  }
 
-/* cards nested in another card (or a dialog) drop the raised clay treatment and
-   read flat — no offset shadow / inset, hairline border. */
-[data-fl-theme="clay"] .card .card,
-[data-fl-theme="clay"] .dialog .card {
-  box-shadow: none;
-  border-width: 1px;
-}
+  /* cards nested in another card (or a dialog) drop the raised clay treatment and
+     read flat — no offset shadow / inset, hairline border. */
+  [data-fl-theme="clay"] .card .card,
+  [data-fl-theme="clay"] .dialog .card {
+    box-shadow: none;
+    border-width: 1px;
+  }
 
-[data-fl-theme="clay"] .card-interactive:hover {
-  box-shadow:
-    10px 10px 0 rgba(var(--shadow-color), 0.18),
-    var(--shadow-inset);
-}
+  [data-fl-theme="clay"] .card-interactive:hover {
+    box-shadow:
+      10px 10px 0 rgba(var(--shadow-color), 0.18),
+      var(--shadow-inset);
+  }
 
-/* excludes presses on nested buttons/links, which :active otherwise cascades to too */
-[data-fl-theme="clay"] .card-interactive:active:not(:has(button:active, a:active)) {
-  transform: translateY(2px);
-  box-shadow: 2px 2px 0 rgba(var(--shadow-color), 0.3);
+  /* excludes presses on nested buttons/links, which :active otherwise cascades to too */
+  [data-fl-theme="clay"] .card-interactive:active:not(:has(button:active, a:active)) {
+    transform: translateY(2px);
+    box-shadow: 2px 2px 0 rgba(var(--shadow-color), 0.3);
+  }
 }
diff --git a/src/lib/components/chat.css b/src/lib/components/chat.css
index 463e199b..d89e9546 100644
--- a/src/lib/components/chat.css
+++ b/src/lib/components/chat.css
@@ -7,8 +7,8 @@
   .chat-bubble--user {
     @apply border-primary;
   }
-}
 
-[data-fl-theme="clay"] .chat-bubble {
-  box-shadow: var(--shadow-sm), var(--shadow-inset);
+  [data-fl-theme="clay"] .chat-bubble {
+    box-shadow: var(--shadow-sm), var(--shadow-inset);
+  }
 }
diff --git a/src/lib/components/primary-nav.css b/src/lib/components/primary-nav.css
index 83b29caa..ca84b160 100644
--- a/src/lib/components/primary-nav.css
+++ b/src/lib/components/primary-nav.css
@@ -67,23 +67,23 @@
   .primary-nav__nav-item--active::after {
     @apply h-10;
   }
-}
 
-[data-fl-theme="clay"] .primary-nav {
-  .primary-nav__nav-item:hover {
-    background-color: color-mix(in srgb, var(--primary) 30%, transparent);
-    box-shadow: var(--shadow-sm);
-  }
+  [data-fl-theme="clay"] .primary-nav {
+    .primary-nav__nav-item:hover {
+      background-color: color-mix(in srgb, var(--primary) 30%, transparent);
+      box-shadow: var(--shadow-sm);
+    }
 
-  .primary-nav__nav-item--active {
-    background-color: var(--primary);
-    color: var(--primary-content);
-    box-shadow: var(--shadow-sm), var(--shadow-inset);
-  }
+    .primary-nav__nav-item--active {
+      background-color: var(--primary);
+      color: var(--primary-content);
+      box-shadow: var(--shadow-sm), var(--shadow-inset);
+    }
 
-  .primary-nav__nav-item:active {
-    background-color: color-mix(in srgb, var(--primary) 50%, transparent);
-    transform: translateY(1px);
-    box-shadow: none;
+    .primary-nav__nav-item:active {
+      background-color: color-mix(in srgb, var(--primary) 50%, transparent);
+      transform: translateY(1px);
+      box-shadow: none;
+    }
   }
 }
diff --git a/src/lib/components/room.css b/src/lib/components/room.css
index 3eefad3a..2884a236 100644
--- a/src/lib/components/room.css
+++ b/src/lib/components/room.css
@@ -82,12 +82,12 @@
   .room-pins__nav {
     @apply flex items-center gap-1 text-sm;
   }
-}
 
-[data-fl-theme="clay"] .room {
-  @apply bg-surface;
+  [data-fl-theme="clay"] .room {
+    @apply bg-surface;
 
-  .room__item:hover {
-    @apply bg-surface-less/50;
+    .room__item:hover {
+      @apply bg-surface-less/50;
+    }
   }
 }
diff --git a/src/lib/components/secondary-nav.css b/src/lib/components/secondary-nav.css
index 6e71ea02..99ee18d0 100644
--- a/src/lib/components/secondary-nav.css
+++ b/src/lib/components/secondary-nav.css
@@ -14,27 +14,27 @@
       }
     }
   }
-}
 
-[data-fl-theme="clay"] .secondary-nav {
-  .secondary-nav__nav-item:hover {
-    background-color: color-mix(in srgb, var(--primary) 30%, transparent);
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-sm);
-  }
+  [data-fl-theme="clay"] .secondary-nav {
+    .secondary-nav__nav-item:hover {
+      background-color: color-mix(in srgb, var(--primary) 30%, transparent);
+      transform: translateY(-2px);
+      box-shadow: var(--shadow-sm);
+    }
 
-  .secondary-nav__nav-item--active {
-    background-color: var(--primary);
-    box-shadow: var(--shadow-sm), var(--shadow-inset);
+    .secondary-nav__nav-item--active {
+      background-color: var(--primary);
+      box-shadow: var(--shadow-sm), var(--shadow-inset);
 
-    &:hover {
-      color: var(--content);
+      &:hover {
+        color: var(--content);
+      }
+    }
+
+    .secondary-nav__nav-item:active {
+      background-color: color-mix(in srgb, var(--primary) 50%, transparent);
+      transform: translateY(1px);
+      box-shadow: none;
     }
   }
-
-  .secondary-nav__nav-item:active {
-    background-color: color-mix(in srgb, var(--primary) 50%, transparent);
-    transform: translateY(1px);
-    box-shadow: none;
-  }
 }
diff --git a/src/lib/components/space-menu.css b/src/lib/components/space-menu.css
index 1ca9062a..92631d71 100644
--- a/src/lib/components/space-menu.css
+++ b/src/lib/components/space-menu.css
@@ -100,36 +100,36 @@
       @apply justify-start px-1;
     }
   }
-}
 
-@media (max-width: 768px) {
-  [data-theme="dark"] .secondary-nav--mobile-space {
-    @apply bg-surface-less;
-  }
+  @media (max-width: 768px) {
+    [data-theme="dark"] .secondary-nav--mobile-space {
+      @apply bg-surface-less;
+    }
 
-  [data-fl-theme="clay"] .secondary-nav--mobile-space {
-    .secondary-nav__nav-item:hover,
-    .secondary-nav__nav-item:active {
-      background-color: var(--surface-less);
+    [data-fl-theme="clay"] .secondary-nav--mobile-space {
+      .secondary-nav__nav-item:hover,
+      .secondary-nav__nav-item:active {
+        background-color: var(--surface-less);
+        transform: none;
+        box-shadow: none;
+      }
+
+      .secondary-nav__nav-item--active,
+      .secondary-nav__nav-item--active:hover {
+        background-color: color-mix(in srgb, var(--primary) 14%, var(--surface));
+        color: var(--content);
+        box-shadow: none;
+      }
+    }
+
+    [data-fl-theme="clay"] .space-menu__status-link:hover,
+    [data-fl-theme="clay"] .space-menu__status-link:active {
       transform: none;
       box-shadow: none;
     }
 
-    .secondary-nav__nav-item--active,
-    .secondary-nav__nav-item--active:hover {
-      background-color: color-mix(in srgb, var(--primary) 14%, var(--surface));
-      color: var(--content);
-      box-shadow: none;
+    .space-menu__status .text-sm {
+      @apply font-medium;
     }
   }
-
-  [data-fl-theme="clay"] .space-menu__status-link:hover,
-  [data-fl-theme="clay"] .space-menu__status-link:active {
-    transform: none;
-    box-shadow: none;
-  }
-
-  .space-menu__status .text-sm {
-    @apply font-medium;
-  }
 }