From e864ec6d69ab5a9fb5695e7a8bdf05a51499fb2c Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Fri, 12 Sep 2025 10:49:30 -0500
Subject: [PATCH 1/5] Organize existing popup styles

---
 app/assets/stylesheets/popup.css              | 54 +++++++++++--------
 app/views/cards/assignments/new.html.erb      |  2 +-
 .../cards/display/perma/_collection.html.erb  |  2 +-
 app/views/cards/taggings/new.html.erb         |  2 +-
 app/views/filters/menu/_collections.html.erb  | 19 +++----
 .../filters/settings/_assignees.html.erb      |  2 +-
 app/views/filters/settings/_closers.html.erb  |  2 +-
 app/views/filters/settings/_creators.html.erb |  2 +-
 .../filters/settings/_indexed_by.html.erb     |  2 +-
 .../filters/settings/_sorted_by.html.erb      |  2 +-
 app/views/filters/settings/_tags.html.erb     |  2 +-
 11 files changed, 50 insertions(+), 41 deletions(-)

diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index e9c3bcbaf..4deab9f7e 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -41,17 +41,9 @@
     }
   }
 
-  .popup__footer {
-    background-color: var(--color-canvas);
-    border-block-start: 1px solid var(--color-ink-lighter);
-    font-size: var(--text-small);
-    inset: auto 0 0;
-    line-height: 1.6;
-    margin-block-start: var(--block-space-half);
-    padding: 1.5ch;
-    position: sticky;
-    text-align: center;
-    z-index: 1;
+  .popup__title {
+    font-weight: 800;
+    white-space: nowrap;
   }
 
   .popup__group {
@@ -87,6 +79,22 @@
     }
   }
 
+  .popup__group-title {
+    background: var(--color-canvas);
+    font-size: var(--text-small);
+    font-weight: bold;
+    list-style: none;
+    padding: var(--block-space-half) var(--inline-space-half);
+    position: sticky;
+    text-transform: uppercase;
+    top: calc(-1 * var(--block-space));
+    z-index: 1;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+  }
+
   .popup__list {
     display: flex;
     flex-direction: column;
@@ -125,8 +133,7 @@
     }
 
     .icon {
-      block-size: 1em;
-      inline-size: 1em;
+      --icon-size: 1em;
     }
 
     &:has(input:checked)  {
@@ -155,21 +162,22 @@
     }
   }
 
-  .popup__title {
-    font-weight: 800;
-  }
-
-  .popup__group-title {
-    background: var(--color-canvas);
+  .popup__footer {
+    background-color: var(--color-canvas);
+    border-block-start: 1px solid var(--color-ink-lighter);
     font-size: var(--text-small);
-    font-weight: bold;
-    padding: var(--block-space-half) var(--inline-space-half);
+    inset: auto 0 0;
+    line-height: 1.6;
+    margin-block-start: var(--block-space-half);
+    padding: 1.5ch;
     position: sticky;
-    text-transform: uppercase;
-    top: calc(-1 * var(--block-space));
+    text-align: center;
     z-index: 1;
   }
 
+  /* Variants
+  /* ------------------------------------------------------------------------ */
+
   .popup--animated {
     opacity: 0;
     transform: scale(0.2) translateX(-50%);
diff --git a/app/views/cards/assignments/new.html.erb b/app/views/cards/assignments/new.html.erb
index 69c499524..27eaf3a91 100644
--- a/app/views/cards/assignments/new.html.erb
+++ b/app/views/cards/assignments/new.html.erb
@@ -5,7 +5,7 @@
 				dialog_target: "dialog",
 				navigable_list_focus_on_selection_value: false,
 				navigable_list_actionable_items_value: true } do %>
-    <strong class="popup__title txt-nowrap">Assign this to…</strong>
+    <strong class="popup__title">Assign this to…</strong>
 
     <% if @collection.users.active.count > 1 %>
 			<%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small margin-block-half", autofocus: true,
diff --git a/app/views/cards/display/perma/_collection.html.erb b/app/views/cards/display/perma/_collection.html.erb
index bd8bb7873..d73e49486 100644
--- a/app/views/cards/display/perma/_collection.html.erb
+++ b/app/views/cards/display/perma/_collection.html.erb
@@ -12,7 +12,7 @@
           dialog_target: "dialog",
           navigable_list_focus_on_selection_value: false,
 				  navigable_list_actionable_items_value: true } do %>
-        <strong class="popup__title pad-inline-half txt-nowrap">Move this card to…</strong>
+        <strong class="popup__title pad-inline-half">Move this card to…</strong>
 
         <% if Current.user.collections.count > 1 %>
           <%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small margin-block-half font-weight-normal", autofocus: true,
diff --git a/app/views/cards/taggings/new.html.erb b/app/views/cards/taggings/new.html.erb
index fda452f3a..ae49ef1cd 100644
--- a/app/views/cards/taggings/new.html.erb
+++ b/app/views/cards/taggings/new.html.erb
@@ -5,7 +5,7 @@
     data-navigable-list-actionable-items-value="true"
     data-action="keydown->navigable-list#navigate filter:changed->navigable-list#reset dialog:show@document->navigable-list#reset"
   >
-    <strong class="popup__title txt-nowrap">Tag this…</strong>
+    <strong class="popup__title">Tag this…</strong>
 
     <%= form_with url: card_taggings_path(@card), class: "flex flex-column gap-half full-width margin-block-half" do |form| %>
       <%= form.text_field :tag_title, placeholder: @tags.any? ? "Add a new tag or filter…" : "Name this tag…", class: "input txt-small full-width",
diff --git a/app/views/filters/menu/_collections.html.erb b/app/views/filters/menu/_collections.html.erb
index 0375ff705..2b81a5890 100644
--- a/app/views/filters/menu/_collections.html.erb
+++ b/app/views/filters/menu/_collections.html.erb
@@ -1,11 +1,12 @@
-<%= form_with url: user_filtering.self_filter_path, method: :get, class: "display-contents",
-      data: { controller: "form" } do |form| %>
-  <% if user_filtering.collections.any? %>
+<% if user_filtering.collections.any? %>
+  <details open>
+    <summary class="popup__group-title">Collections</summary>
 
-    <ul class="popup__list">
-      <li class="popup__group-title">Collections</li>
-      <%= render "filters/menu/collections/all_option", form: form, user_filtering: user_filtering %>
-      <%= render partial: "filters/menu/collections/collection", collection: user_filtering.collections, as: :collection, locals: { form: form, user_filtering: user_filtering } %>
-    </ul>
-  <% end %>
+    <%= form_with url: user_filtering.self_filter_path, method: :get, class: "display-contents", data: { controller: "form" } do |form| %>
+      <ul class="popup__list">
+        <%= render "filters/menu/collections/all_option", form: form, user_filtering: user_filtering %>
+        <%= render partial: "filters/menu/collections/collection", collection: user_filtering.collections, as: :collection, locals: { form: form, user_filtering: user_filtering } %>
+      </ul>
+    <% end %>
+  </details>
 <% end %>
diff --git a/app/views/filters/settings/_assignees.html.erb b/app/views/filters/settings/_assignees.html.erb
index 03b70336a..4634ba338 100644
--- a/app/views/filters/settings/_assignees.html.erb
+++ b/app/views/filters/settings/_assignees.html.erb
@@ -14,7 +14,7 @@
     </button>
 
     <%= filter_dialog "Assigned to…" do %>
-      <strong class="popup__title txt-nowrap">Assigned to…</strong>
+      <strong class="popup__title">Assigned to…</strong>
 
       <% if User.active.many? %>
         <%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
diff --git a/app/views/filters/settings/_closers.html.erb b/app/views/filters/settings/_closers.html.erb
index fb8d723b2..a5d3e41ac 100644
--- a/app/views/filters/settings/_closers.html.erb
+++ b/app/views/filters/settings/_closers.html.erb
@@ -14,7 +14,7 @@
     </button>
 
     <%= filter_dialog "Closed by…" do %>
-      <strong class="popup__title txt-nowrap">Closed by…</strong>
+      <strong class="popup__title">Closed by…</strong>
 
       <% if user_filtering.users.many? %>
         <%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
diff --git a/app/views/filters/settings/_creators.html.erb b/app/views/filters/settings/_creators.html.erb
index 6546ffdf1..249fffa70 100644
--- a/app/views/filters/settings/_creators.html.erb
+++ b/app/views/filters/settings/_creators.html.erb
@@ -14,7 +14,7 @@
     </button>
 
     <%= filter_dialog "Added by…" do %>
-      <strong class="popup__title txt-nowrap">Added by…</strong>
+      <strong class="popup__title">Added by…</strong>
 
       <% if user_filtering.users.many? %>
         <%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
diff --git a/app/views/filters/settings/_indexed_by.html.erb b/app/views/filters/settings/_indexed_by.html.erb
index 085e85fca..2060c1d14 100644
--- a/app/views/filters/settings/_indexed_by.html.erb
+++ b/app/views/filters/settings/_indexed_by.html.erb
@@ -9,7 +9,7 @@
     </button>
 
     <%= filter_dialog "Filter by…" do %>
-      <strong class="popup__title txt-nowrap">Filter by…</strong>
+      <strong class="popup__title">Filter by…</strong>
 
       <ul class="popup__list" data-filter-target="list">
         <% Filter::INDEXES.each do |index| %>
diff --git a/app/views/filters/settings/_sorted_by.html.erb b/app/views/filters/settings/_sorted_by.html.erb
index ccd7ef853..94567eede 100644
--- a/app/views/filters/settings/_sorted_by.html.erb
+++ b/app/views/filters/settings/_sorted_by.html.erb
@@ -9,7 +9,7 @@
     </button>
 
     <%= filter_dialog "Sort by…" do %>
-      <strong class="popup__title txt-nowrap">Sort by…</strong>
+      <strong class="popup__title">Sort by…</strong>
 
       <ul class="popup__list" data-filter-target="list">
         <% Filter::SORTED_BY.each do |sort| %>
diff --git a/app/views/filters/settings/_tags.html.erb b/app/views/filters/settings/_tags.html.erb
index d5e5c0a54..967d45286 100644
--- a/app/views/filters/settings/_tags.html.erb
+++ b/app/views/filters/settings/_tags.html.erb
@@ -13,7 +13,7 @@
     </button>
 
     <%= filter_dialog "Tagged…" do %>
-      <strong class="popup__title txt-nowrap">Tagged…</strong>
+      <strong class="popup__title">Tagged…</strong>
 
       <% if user_filtering.tags.many? %>
         <%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,

From a2fd470c63f76e0636065bfd8f4a0320ca69fbe9 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Fri, 12 Sep 2025 11:27:47 -0500
Subject: [PATCH 2/5] Refactor popup item class names

---
 app/assets/stylesheets/card-perma.css         |  2 +-
 app/assets/stylesheets/cards.css              |  4 +
 app/assets/stylesheets/fizzy-menu.css         |  2 +-
 app/assets/stylesheets/layout.css             |  5 +
 app/assets/stylesheets/popup.css              | 95 ++++++++-----------
 app/helpers/filters_helper.rb                 |  6 +-
 app/views/cards/assignments/new.html.erb      |  4 +-
 .../cards/display/perma/_collection.html.erb  |  4 +-
 .../cards/index/_collections_filter.html.erb  | 12 +--
 .../cards/index/_workflow_filter.html.erb     |  4 +-
 app/views/cards/show/_collections.html.erb    | 14 +--
 app/views/cards/taggings/new.html.erb         |  4 +-
 app/views/filters/menu/_collections.html.erb  |  7 +-
 app/views/filters/menu/_custom.html.erb       |  8 +-
 app/views/filters/menu/_places.html.erb       |  3 +-
 app/views/filters/menu/_tags.html.erb         |  2 +-
 app/views/filters/menu/_users.html.erb        |  2 +-
 .../menu/collections/_all_option.html.erb     |  4 +-
 .../menu/collections/_collection.html.erb     |  4 +-
 .../filters/menu/custom/_create.html.erb      |  4 +-
 .../filters/menu/custom/_filter.html.erb      |  4 +-
 app/views/filters/menu/tags/_tag.html.erb     |  4 +-
 app/views/filters/menu/users/_user.html.erb   |  4 +-
 .../filters/settings/_assignees.html.erb      |  8 +-
 app/views/filters/settings/_closers.html.erb  |  4 +-
 app/views/filters/settings/_creators.html.erb |  4 +-
 .../filters/settings/_indexed_by.html.erb     |  4 +-
 .../filters/settings/_sorted_by.html.erb      |  4 +-
 app/views/filters/settings/_tags.html.erb     |  4 +-
 .../filters/settings/_time_window.html.erb    |  2 +-
 30 files changed, 107 insertions(+), 125 deletions(-)

diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index 19138c0de..e589d4333 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -221,7 +221,7 @@
       z-index: 1;
     }
 
-    .btn:not(.popup__item, .btn--plain, .btn--reversed) {
+    .btn:not(.popup__btn, .btn--plain, .btn--reversed) {
       --btn-background: var(--card-color);
       --btn-color: var(--color-ink-inverted);
     }
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 1f2c4b84b..7a427a6d2 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -27,6 +27,10 @@
     @media (prefers-color-scheme: dark) {
       box-shadow: 0 0 0 1px var(--color-ink-lighter);
     }
+
+    .popup {
+      inline-size: 260px;
+    }
   }
 
   /* Header
diff --git a/app/assets/stylesheets/fizzy-menu.css b/app/assets/stylesheets/fizzy-menu.css
index 050a4fd9c..7eb992d1c 100644
--- a/app/assets/stylesheets/fizzy-menu.css
+++ b/app/assets/stylesheets/fizzy-menu.css
@@ -63,7 +63,7 @@
     max-inline-size: 100%;
 
     /* When all its children are hidden, hide this as well so it doesn't take up space */
-    &:has(.popup__group[hidden]):not(:has(.popup__group:not([hidden]))) {
+    &:has(.popup__item[hidden]):not(:has(.popup__item:not([hidden]))) {
       display: none;
     }
 
diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css
index 634e306ec..f4157a270 100644
--- a/app/assets/stylesheets/layout.css
+++ b/app/assets/stylesheets/layout.css
@@ -20,6 +20,11 @@
     max-inline-size: 100dvw;
   }
 
+  :where(#header) {
+    position: relative;
+    z-index: var(--z-nav);
+  }
+
   :is(#header, #footer) {
     @media print {
       display: none;
diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index 4deab9f7e..a0db67496 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -3,6 +3,7 @@
     --panel-border-radius: 0.5em;
     --panel-padding: var(--block-space);
     --panel-size: auto;
+    --btn-background: transparent;
 
     inset: 0 auto auto 50%;
     max-block-size: 80vh;
@@ -31,13 +32,8 @@
       --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;
+    form {
+      display: contents;
     }
   }
 
@@ -46,40 +42,9 @@
     white-space: nowrap;
   }
 
-  .popup__group {
-    align-items: center;
-    background: transparent;
-    border-radius: 0.3em;
-    display: flex;
-    inline-size: 100%;
-    max-inline-size: 100%;
+  .popup__section {}
 
-    .popup__list &:has(*:first-child:not(.popup__item)) {
-      padding-inline-start: var(--inline-space-half);
-    }
-
-    .btn {
-      --btn-background: transparent;
-    }
-
-    @media (any-hover: hover) {
-      &:hover {
-        background: var(--color-ink-lightest);
-      }
-    }
-
-    &[aria-selected] {
-      background-color: var(--color-selected);
-
-      @media (any-hover: hover) {
-        &:hover {
-          background-color: var(--color-selected);
-        }
-      }
-    }
-  }
-
-  .popup__group-title {
+  .popup__section-title {
     background: var(--color-canvas);
     font-size: var(--text-small);
     font-weight: bold;
@@ -106,13 +71,43 @@
     row-gap: 2px;
 
     /* Hide lists when all the items within are hidden */
-    &:has(.popup__group-title:only-child),
-    &:has(.popup__group[hidden]):not(:has(.popup__group:not([hidden]))) {
+    &:has(.popup__section-title:only-child),
+    &:has(.popup__item[hidden]):not(:has(.popup__item:not([hidden]))) {
       display: none;
     }
   }
 
   .popup__item {
+    align-items: center;
+    background: transparent;
+    border-radius: 0.3em;
+    display: flex;
+    inline-size: 100%;
+    max-inline-size: 100%;
+
+    /* .popup__list &:has(*:first-child:not(.popup__btn)) {
+      padding-inline-start: var(--inline-space-half);
+    } */
+
+    @media (any-hover: hover) {
+      &:hover {
+        background: var(--color-ink-lightest);
+      }
+    }
+
+    &[aria-selected] {
+      background-color: var(--color-selected);
+
+      @media (any-hover: hover) {
+        &:hover {
+          background-color: var(--color-selected);
+        }
+      }
+    }
+  }
+
+  /* The actionable thing with padding within popup__item */
+  .popup__btn {
     --btn-background: transparent;
     --btn-border-radius: 0.3em;
     --btn-border-size: 0;
@@ -126,12 +121,6 @@
     max-inline-size: 100%;
     text-align: start;
 
-    @media (any-hover: hover) {
-      &:where(:not(:active):hover) {
-        --btn-background: var(--color-selected);
-      }
-    }
-
     .icon {
       --icon-size: 1em;
     }
@@ -152,16 +141,6 @@
     }
   }
 
-  .popup__new {
-    --btn-icon-size: 1em;
-
-    padding-inline-start: var(--inline-space-half);
-
-    .icon {
-      margin-inline-end: 0.5em;
-    }
-  }
-
   .popup__footer {
     background-color: var(--color-canvas);
     border-block-start: 1px solid var(--color-ink-lighter);
diff --git a/app/helpers/filters_helper.rb b/app/helpers/filters_helper.rb
index b6b95418b..1d7646ab3 100644
--- a/app/helpers/filters_helper.rb
+++ b/app/helpers/filters_helper.rb
@@ -16,9 +16,9 @@ module FiltersHelper
   end
 
   def filter_place_menu_item(path, label, icon)
-    tag.li class: "popup__group", id: "filter-place-#{label.parameterize}", data: { filter_target: "item", navigable_list_target: "item" } do
+    tag.li class: "popup__item", id: "filter-place-#{label.parameterize}", data: { filter_target: "item", navigable_list_target: "item" } do
       concat icon_tag(icon)
-      concat(link_to(path, class: "popup__item btn") do
+      concat(link_to(path, class: "popup__btn btn") do
         concat tag.span(label, class: "overflow-ellipsis")
         concat tag.span(" ›", class: "translucent flex-item-no-shrink flex-item-justify-end")
       end)
@@ -37,7 +37,7 @@ module FiltersHelper
   end
 
   def filter_hotkey_link(title, path, key, icon)
-    link_to path, class: "popup__group btn borderless", id: "filter-hotkey-#{key}", role: "listitem", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.#{key}@document->hotkey#click keydown.shift+#{key}@document->hotkey#click" } do
+    link_to path, class: "popup__item btn borderless", id: "filter-hotkey-#{key}", role: "listitem", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.#{key}@document->hotkey#click keydown.shift+#{key}@document->hotkey#click" } do
       concat icon_tag(icon)
       concat tag.span(title.html_safe)
       concat tag.kbd(key)
diff --git a/app/views/cards/assignments/new.html.erb b/app/views/cards/assignments/new.html.erb
index 27eaf3a91..0c16aa94d 100644
--- a/app/views/cards/assignments/new.html.erb
+++ b/app/views/cards/assignments/new.html.erb
@@ -14,9 +14,9 @@
 
     <ul class="popup__list" data-filter-target="list">
       <% @collection.users.active.alphabetically.each do |user| %>
-        <li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+        <li class="popup__item" data-filter-target="item" data-navigable-list-target="item">
           <%= button_to card_assignments_path(@card, params: { assignee_id: user.id }), method: :post,
-              class: "popup__item btn",
+              class: "popup__btn btn",
               form_class: "max-width flex-item-grow" do %>
             <span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
             <%= icon_tag "check", size: 18, class: "checked flex-item-no-shrink flex-item-justify-end", style: "--icon-size: 1em" if @card.assignees.include?(user) %>
diff --git a/app/views/cards/display/perma/_collection.html.erb b/app/views/cards/display/perma/_collection.html.erb
index d73e49486..9ec3e15cc 100644
--- a/app/views/cards/display/perma/_collection.html.erb
+++ b/app/views/cards/display/perma/_collection.html.erb
@@ -21,9 +21,9 @@
 
         <ul class="popup__list margin-block-start-half margin-none-block-end" data-filter-target="list">
           <% Current.user.collections.ordered_by_recently_accessed.each do |collection| %>
-            <li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+            <li class="popup__item" data-filter-target="item" data-navigable-list-target="item">
               <%= button_to card_collection_path(card, params: { collection_id: collection.id }), method: :patch,
-                  class: "popup__item btn",
+                  class: "popup__btn btn",
                   form_class: "max-width flex-item-grow" do %>
                 <span class="overflow-ellipsis flex-item-grow"><%= collection.name %></span>
                 <%= icon_tag "check", size: 18, class: "checked flex-item-no-shrink flex-item-justify-end", style: "--icon-size: 1em" if card.collection == collection %>
diff --git a/app/views/cards/index/_collections_filter.html.erb b/app/views/cards/index/_collections_filter.html.erb
index 3b3b6580f..db254df13 100644
--- a/app/views/cards/index/_collections_filter.html.erb
+++ b/app/views/cards/index/_collections_filter.html.erb
@@ -5,14 +5,14 @@
   <% end %>
 
   <% if Current.user.collections.one? %>
-    <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__group", id: "filter-collection-init", data: { filter_target: "item", navigable_list_target: "item" } do %>
-      <%= tag.div class: "popup__item btn" do %>
+    <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__item", id: "filter-collection-init", data: { filter_target: "item", navigable_list_target: "item" } do %>
+      <%= tag.div class: "popup__btn btn" do %>
         <span class="overflow-ellipsis"><%= Current.user.collections.first.name %></span>
         <span class="txt-ink translucent flex-item-no-shrink flex-item-justify-end"><span class="txt-x-small txt-uppercase">GO TO</span> ›</span>
       <% end %>
     <% end %>
   <% elsif Current.user.collections.many? %>
-    <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__group", id: "filter-collections-all", data: { filter_target: "item", navigable_list_target: "item" } do %>
+    <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__item", id: "filter-collections-all", data: { filter_target: "item", navigable_list_target: "item" } do %>
       <label class="popup__radio btn txt-xx-small flex-item-no-shrink">
         <input type="checkbox" <%= "checked" if filter.collection_ids.empty? %>>
 
@@ -21,14 +21,14 @@
         </span>
         <%= icon_tag "check", size: 18, class: "checked" %>
       </label>
-      <%= tag.div class: "popup__item btn" do %>
+      <%= tag.div class: "popup__btn btn" do %>
         <span class="overflow-ellipsis">All collections</span>
         <span class="txt-ink translucent flex-item-no-shrink flex-item-justify-end"><span class="txt-x-small txt-uppercase">GO TO</span> ›</span>
       <% end %>
     <% end %>
 
     <% Current.user.collections.ordered_by_recently_accessed.each do |collection| %>
-      <li class="popup__group" data-filter-target="item" data-navigable-list-target="item" id="<%= "filter-collection-#{collection.id}" %>">
+      <li class="popup__item" data-filter-target="item" data-navigable-list-target="item" id="<%= "filter-collection-#{collection.id}" %>">
         <label class="popup__radio btn txt-xx-small flex-item-no-shrink">
           <%= form.check_box "collection_ids[]", {
                 checked: filter.collections.include?(collection),
@@ -42,7 +42,7 @@
           <%= icon_tag "check", size: 18, class: "checked" %>
         </label>
 
-        <%= link_to cards_path(collection_ids: [ collection ]), class: "popup__item btn" do %>
+        <%= link_to cards_path(collection_ids: [ collection ]), class: "popup__btn btn" do %>
           <span class="overflow-ellipsis"><%= collection.name %></span>
           <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
         <% end %>
diff --git a/app/views/cards/index/_workflow_filter.html.erb b/app/views/cards/index/_workflow_filter.html.erb
index 3f1dad724..2c64572f3 100644
--- a/app/views/cards/index/_workflow_filter.html.erb
+++ b/app/views/cards/index/_workflow_filter.html.erb
@@ -17,12 +17,12 @@
         <%= filter_hidden_field_tag key, value %>
       <% end %>
 
-      <%= link_to cards_path(filter.as_params.except(:stage_ids, :engagement_status)), class: "popup__item btn" do %>
+      <%= link_to cards_path(filter.as_params.except(:stage_ids, :engagement_status)), class: "popup__btn btn" do %>
         <span class="overflow-ellipsis">All stages</span>
       <% end %>
 
       <% workflow.stages.each do |stage| %>
-        <div class="popup__item btn">
+        <div class="popup__btn btn">
           <%= form.check_box :stage_ids, {
                 multiple: true,
                 checked: filter.stages.include?(stage),
diff --git a/app/views/cards/show/_collections.html.erb b/app/views/cards/show/_collections.html.erb
index 41aba2c1c..c770471cd 100644
--- a/app/views/cards/show/_collections.html.erb
+++ b/app/views/cards/show/_collections.html.erb
@@ -1,16 +1,16 @@
-<li class="popup__group-title">Collections</li>
+<li class="popup__section-title">Collections</li>
 <%= form_with url: cards_path, method: :get, class: "display-contents",
       data: { controller: "form" } do |form| %>
   <% if Current.user.collections.one? %>
-    <%= link_to cards_path, class: "popup__group", data: { filter_target: "item", navigable_list_target: "item" } do %>
-      <%= tag.div class: "popup__item btn" do %>
+    <%= link_to cards_path, class: "popup__item", data: { filter_target: "item", navigable_list_target: "item" } do %>
+      <%= tag.div class: "popup__btn btn" do %>
         <span class="overflow-ellipsis"><%= Current.user.collections.first.name %></span>
         <span class="txt-ink translucent flex-item-no-shrink flex-item-justify-end"><span class="txt-x-small txt-uppercase">GO TO</span> ›</span>
       <% end %>
     <% end %>
   <% elsif Current.user.collections.many? %>
     <li>
-      <%= link_to cards_path, class: "popup__group", data: { filter_target: "item", navigable_list_target: "item" } do %>
+      <%= link_to cards_path, class: "popup__item", data: { filter_target: "item", navigable_list_target: "item" } do %>
         <label class="btn txt-xx-small flex-item-no-shrink">
           <input type="checkbox">
 
@@ -19,7 +19,7 @@
           </span>
           <%= icon_tag "check", size: 18, class: "checked" %>
         </label>
-        <%= tag.div class: "popup__item btn" do %>
+        <%= tag.div class: "popup__btn btn" do %>
           <span class="overflow-ellipsis">All collections</span>
           <span class="txt-ink translucent flex-item-no-shrink flex-item-justify-end"><span class="txt-x-small txt-uppercase">GO TO</span> ›</span>
         <% end %>
@@ -27,7 +27,7 @@
     </li>
 
     <% Current.user.collections.ordered_by_recently_accessed.each do |collection| %>
-      <li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+      <li class="popup__item" data-filter-target="item" data-navigable-list-target="item">
         <label class="btn txt-xx-small flex-item-no-shrink">
           <%= form.check_box "collection_ids[]", {
                 checked: collection == @collection,
@@ -41,7 +41,7 @@
           <%= icon_tag "check", size: 18, class: "checked" %>
         </label>
 
-        <%= link_to cards_path(collection_ids: [ collection ]), class: "popup__item btn" do %>
+        <%= link_to cards_path(collection_ids: [ collection ]), class: "popup__btn btn" do %>
           <span class="overflow-ellipsis"><%= collection.name %></span>
           <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
         <% end %>
diff --git a/app/views/cards/taggings/new.html.erb b/app/views/cards/taggings/new.html.erb
index ae49ef1cd..940ebe8a1 100644
--- a/app/views/cards/taggings/new.html.erb
+++ b/app/views/cards/taggings/new.html.erb
@@ -14,9 +14,9 @@
 
     <ul class="popup__list" data-filter-target="list">
       <% @tags.each do |tag| %>
-        <li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+        <li class="popup__item" data-filter-target="item" data-navigable-list-target="item">
           <%= button_to card_taggings_path(@card, params: { tag_title: tag.title }), method: :post,
-              class: "popup__item btn",
+              class: "popup__btn btn",
               form_class: "max-width flex-item-grow" do %>
             <span class="overflow-ellipsis flex-item-grow"><%= tag.hashtag %></span>
             <%= icon_tag "check", size: 18, class: "checked flex-item-no-shrink flex-item-justify-end", style: "--icon-size: 1em" if @card.tagged_with?(tag) %>
diff --git a/app/views/filters/menu/_collections.html.erb b/app/views/filters/menu/_collections.html.erb
index 2b81a5890..48897047f 100644
--- a/app/views/filters/menu/_collections.html.erb
+++ b/app/views/filters/menu/_collections.html.erb
@@ -1,8 +1,7 @@
 <% if user_filtering.collections.any? %>
-  <details open>
-    <summary class="popup__group-title">Collections</summary>
-
-    <%= form_with url: user_filtering.self_filter_path, method: :get, class: "display-contents", data: { controller: "form" } do |form| %>
+  <details class="popup__section" open>
+    <summary class="popup__section-title">Collections</summary>
+    <%= form_with url: user_filtering.self_filter_path, method: :get, data: { controller: "form" } do |form| %>
       <ul class="popup__list">
         <%= render "filters/menu/collections/all_option", form: form, user_filtering: user_filtering %>
         <%= render partial: "filters/menu/collections/collection", collection: user_filtering.collections, as: :collection, locals: { form: form, user_filtering: user_filtering } %>
diff --git a/app/views/filters/menu/_custom.html.erb b/app/views/filters/menu/_custom.html.erb
index 6fb583668..b88827328 100644
--- a/app/views/filters/menu/_custom.html.erb
+++ b/app/views/filters/menu/_custom.html.erb
@@ -1,11 +1,7 @@
-<%= form_with url: cards_path, method: :get, class: "display-contents",
-      data: { controller: "form" } do |form| %>
-
+<%= form_with url: cards_path, method: :get, data: { controller: "form" } do |form| %>
+  <div class="popup__section-title">Saved filters</div>
   <ul class="popup__list">
-    <li class="popup__group-title">Saved filters</li>
-
     <%= render "filters/menu/custom/create" %>
     <%= render partial: "filters/menu/custom/filter", collection: user_filtering.filters, as: :filter, locals: { user_filtering: user_filtering } %>
   </ul>
-
 <% end %>
diff --git a/app/views/filters/menu/_places.html.erb b/app/views/filters/menu/_places.html.erb
index b36b8b33e..cff259149 100644
--- a/app/views/filters/menu/_places.html.erb
+++ b/app/views/filters/menu/_places.html.erb
@@ -1,6 +1,5 @@
+<div class="popup__section-title">Jump to…</div>
 <ul class="popup__list">
-  <li class="popup__group-title">Jump to…</li>
-
   <%= filter_place_menu_item account_settings_path, "Account Settings", "settings" %>
   <%= filter_place_menu_item user_path(Current.user), "My Profile", "person" %>
   <%= filter_place_menu_item notifications_path, "Notifications", "bell" %>
diff --git a/app/views/filters/menu/_tags.html.erb b/app/views/filters/menu/_tags.html.erb
index aa2358ace..2c1f40983 100644
--- a/app/views/filters/menu/_tags.html.erb
+++ b/app/views/filters/menu/_tags.html.erb
@@ -1,5 +1,5 @@
+<div class="popup__section-title">Tags</div>
 <ul class="popup__list">
-  <li class="popup__group-title">Tags</li>
   <%= render partial: "filters/menu/tags/tag", collection: user_filtering.tags, as: :tag %>
 </ul>
 
diff --git a/app/views/filters/menu/_users.html.erb b/app/views/filters/menu/_users.html.erb
index 4ef41e458..70dc9a077 100644
--- a/app/views/filters/menu/_users.html.erb
+++ b/app/views/filters/menu/_users.html.erb
@@ -1,4 +1,4 @@
+<div class="popup__section-title">People</div>
 <ul class="popup__list">
-  <li class="popup__group-title">People</li>
   <%= render partial: "filters/menu/users/user", collection: user_filtering.users, as: :user %>
 </ul>
diff --git a/app/views/filters/menu/collections/_all_option.html.erb b/app/views/filters/menu/collections/_all_option.html.erb
index d5b5ade05..1326bdbbf 100644
--- a/app/views/filters/menu/collections/_all_option.html.erb
+++ b/app/views/filters/menu/collections/_all_option.html.erb
@@ -1,7 +1,7 @@
 <% clear_url_path = user_filtering.self_filter_path(user_filtering.as_params.except(:collection_ids)) %>
 
 <% if Current.user.collections.many? %>
-  <li class="popup__group" data-filter-target="item" data-navigable-list-target="item" id="filter-collection-all">
+  <li class="popup__item" data-filter-target="item" data-navigable-list-target="item" id="filter-collection-all">
     <%= link_to clear_url_path, class: "btn txt-xx-small flex-item-no-shrink" do %>
       <%= check_box_tag "filter_collections", nil, user_filtering.collections.blank?, class: "form-checkbox" %>
       <span class="for-screen-reader">
@@ -10,7 +10,7 @@
       <%= icon_tag "check", size: 18, class: "checked" %>
     <% end %>
 
-    <%= link_to clear_url_path, class: "popup__item btn" do %>
+    <%= link_to clear_url_path, class: "popup__btn btn" do %>
       <span class="overflow-ellipsis">All collections</span>
       <span class="txt-ink translucent flex-item-no-shrink flex-item-justify-end"><span class="txt-x-small txt-uppercase">GO TO</span> ›</span>
     <% end %>
diff --git a/app/views/filters/menu/collections/_collection.html.erb b/app/views/filters/menu/collections/_collection.html.erb
index 089fbab1c..fc32048b0 100644
--- a/app/views/filters/menu/collections/_collection.html.erb
+++ b/app/views/filters/menu/collections/_collection.html.erb
@@ -1,4 +1,4 @@
-<li class="popup__group" data-filter-target="item" data-navigable-list-target="item" id="filter-collection-<%= collection.id %>">
+<li class="popup__item" data-filter-target="item" data-navigable-list-target="item" id="filter-collection-<%= collection.id %>">
   <label class="btn txt-xx-small">
     <%= form.check_box "collection_ids[]", {
           checked: user_filtering.filter.collections.include?(collection),
@@ -12,7 +12,7 @@
     <%= icon_tag "check", size: 18, class: "checked" %>
   </label>
 
-  <%= link_to cards_path(collection_ids: [ collection ]), class: "popup__item btn" do %>
+  <%= link_to cards_path(collection_ids: [ collection ]), class: "popup__btn btn" do %>
     <span class="overflow-ellipsis"><%= collection.name %></span>
     <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
   <% end %>
diff --git a/app/views/filters/menu/custom/_create.html.erb b/app/views/filters/menu/custom/_create.html.erb
index 50c7388a2..71fe414fc 100644
--- a/app/views/filters/menu/custom/_create.html.erb
+++ b/app/views/filters/menu/custom/_create.html.erb
@@ -1,5 +1,5 @@
-<li class="popup__group gap-half overflow-ellipsis" data-navigable-list-target="item" data-filter-target="item" id="filter-custom-create">
-  <%= link_to cards_path(expand_all: true), class: "btn popup__new popup__item" do %>
+<li class="popup__item overflow-ellipsis" data-navigable-list-target="item" data-filter-target="item" id="filter-custom-create">
+  <%= link_to cards_path(expand_all: true), class: "popup__btn btn" do %>
     <%= icon_tag "bookmark" %>
     <div class="flex flex-column txt-tight-lines min-width txt-small">
       <strong class="overflow-ellipsis">Create a new filter</strong>
diff --git a/app/views/filters/menu/custom/_filter.html.erb b/app/views/filters/menu/custom/_filter.html.erb
index ced275e14..d01a054e2 100644
--- a/app/views/filters/menu/custom/_filter.html.erb
+++ b/app/views/filters/menu/custom/_filter.html.erb
@@ -1,5 +1,5 @@
-<li class="popup__group gap-half overflow-ellipsis" data-filter-target="item" data-navigable-list-target="item" id="filter-custom-<%= filter.id %>">
-  <%= link_to cards_path(filter_id: filter.id), class: "btn popup__new popup__item" do %>
+<li class="popup__item overflow-ellipsis" data-filter-target="item" data-navigable-list-target="item" id="filter-custom-<%= filter.id %>">
+  <%= link_to cards_path(filter_id: filter.id), class: "popup__btn btn" do %>
     <%= icon_tag "bookmark" %>
     <div class="flex flex-column txt-tight-lines min-width txt-small">
       <span class="overflow-ellipsis"><%= filter_selected_collections_title(user_filtering) %></span>
diff --git a/app/views/filters/menu/tags/_tag.html.erb b/app/views/filters/menu/tags/_tag.html.erb
index 29112e07a..6e0c90d8e 100644
--- a/app/views/filters/menu/tags/_tag.html.erb
+++ b/app/views/filters/menu/tags/_tag.html.erb
@@ -1,6 +1,6 @@
-<li class="popup__group" data-filter-target="item" data-navigable-list-target="item" id="<%= "filter-tag-#{tag.id}" %>">
+<li class="popup__item" data-filter-target="item" data-navigable-list-target="item" id="<%= "filter-tag-#{tag.id}" %>">
   <%= icon_tag "tag" %>
-  <%= link_to cards_path(tag_ids: [tag]), class: "popup__item btn" do %>
+  <%= link_to cards_path(tag_ids: [tag]), class: "popup__btn btn" do %>
     <span class="overflow-ellipsis"><%= tag.title %> (<%= tag.cards_count %>)</span>
     <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
   <% end %>
diff --git a/app/views/filters/menu/users/_user.html.erb b/app/views/filters/menu/users/_user.html.erb
index 5e513d190..bdf23f089 100644
--- a/app/views/filters/menu/users/_user.html.erb
+++ b/app/views/filters/menu/users/_user.html.erb
@@ -1,6 +1,6 @@
-<li class="popup__group" data-filter-target="item" data-navigable-list-target="item" id="<%= "filter-user-#{user.id}" %>">
+<li class="popup__item" data-filter-target="item" data-navigable-list-target="item" id="<%= "filter-user-#{user.id}" %>">
   <%= icon_tag "person" %>
-  <%= link_to user, class: "popup__item btn" do %>
+  <%= link_to user, class: "popup__btn btn" do %>
     <span class="overflow-ellipsis"><%= user.name %></span>
     <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
   <% end %>
diff --git a/app/views/filters/settings/_assignees.html.erb b/app/views/filters/settings/_assignees.html.erb
index 4634ba338..dba613314 100644
--- a/app/views/filters/settings/_assignees.html.erb
+++ b/app/views/filters/settings/_assignees.html.erb
@@ -22,7 +22,7 @@
       <% end %>
 
       <ul class="popup__list" data-filter-target="list">
-        <li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+        <li class="popup__item" data-filter-target="item" data-navigable-list-target="item">
           <%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %>
             <% filter.as_params.except(:assignee_ids, :assignment_status).each do |key, value| %>
               <%= filter_hidden_field_tag key, value %>
@@ -36,7 +36,7 @@
               <%= hidden_field_tag :expand_all, user_filtering.expanded? %>
             <% end %>
 
-            <%= form.button type: "submit", class: "popup__item btn" do %>
+            <%= form.button type: "submit", class: "popup__btn btn" do %>
               <span class="overflow-ellipsis flex-item-grow">No one</span>
               <% if filter.assignment_status.unassigned? %>
                 <%= icon_tag "check", class: "checked flex-item-justify-end" %>
@@ -45,7 +45,7 @@
           <% end %>
         </li>
         <% User.active.order(:name).each do |user| %>
-          <li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+          <li class="popup__item" data-filter-target="item" data-navigable-list-target="item">
             <%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %>
               <% filter.as_params.except(:assignee_ids, :assignment_status).each do |key, value| %>
                 <%= filter_hidden_field_tag key, value %>
@@ -65,7 +65,7 @@
                 <%= hidden_field_tag :expand_all, user_filtering.expanded? %>
               <% end %>
 
-              <%= form.button type: "submit", class: "popup__item btn" do %>
+              <%= form.button type: "submit", class: "popup__btn btn" do %>
                 <span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
                 <% if filter.assignees.include?(user) %>
                   <%= icon_tag "check", class: "checked flex-item-justify-end" %>
diff --git a/app/views/filters/settings/_closers.html.erb b/app/views/filters/settings/_closers.html.erb
index a5d3e41ac..ded05ef85 100644
--- a/app/views/filters/settings/_closers.html.erb
+++ b/app/views/filters/settings/_closers.html.erb
@@ -23,7 +23,7 @@
 
       <ul class="popup__list" data-filter-target="list">
         <% user_filtering.users.each do |user| %>
-          <li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+          <li class="popup__item" data-filter-target="item" data-navigable-list-target="item">
             <%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %>
               <% filter.as_params.except(:closer_ids).each do |key, value| %>
                 <%= filter_hidden_field_tag key, value %>
@@ -43,7 +43,7 @@
                 <%= hidden_field_tag :expand_all, user_filtering.expanded? %>
               <% end %>
 
-              <%= form.button type: "submit", class: "popup__item btn" do %>
+              <%= form.button type: "submit", class: "popup__btn btn" do %>
                 <span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
                 <% if filter.closers.include?(user) %>
                   <%= icon_tag "check", class: "checked flex-item-justify-end" %>
diff --git a/app/views/filters/settings/_creators.html.erb b/app/views/filters/settings/_creators.html.erb
index 249fffa70..326b6d65a 100644
--- a/app/views/filters/settings/_creators.html.erb
+++ b/app/views/filters/settings/_creators.html.erb
@@ -23,7 +23,7 @@
 
       <ul class="popup__list" data-filter-target="list">
         <% user_filtering.users.each do |user| %>
-          <li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+          <li class="popup__item" data-filter-target="item" data-navigable-list-target="item">
             <%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %>
               <% filter.as_params.except(:creator_ids).each do |key, value| %>
                 <%= filter_hidden_field_tag key, value %>
@@ -43,7 +43,7 @@
                 <%= hidden_field_tag :expand_all, user_filtering.expanded? %>
               <% end %>
 
-              <%= form.button type: "submit", class: "popup__item btn" do %>
+              <%= form.button type: "submit", class: "popup__btn btn" do %>
                 <span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
                 <% if filter.creators.include?(user) %>
                   <%= icon_tag "check", class: "checked flex-item-justify-end" %>
diff --git a/app/views/filters/settings/_indexed_by.html.erb b/app/views/filters/settings/_indexed_by.html.erb
index 2060c1d14..3c457a248 100644
--- a/app/views/filters/settings/_indexed_by.html.erb
+++ b/app/views/filters/settings/_indexed_by.html.erb
@@ -13,7 +13,7 @@
 
       <ul class="popup__list" data-filter-target="list">
         <% Filter::INDEXES.each do |index| %>
-          <li class="popup__group" data-navigable-list-target="item">
+          <li class="popup__item" data-navigable-list-target="item">
             <%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %>
               <% filter.as_params.except(:indexed_by).each do |key, value| %>
                 <%= filter_hidden_field_tag key, value %>
@@ -25,7 +25,7 @@
                 <%= hidden_field_tag :expand_all, user_filtering.expanded? %>
               <% end %>
 
-              <%= form.button type: "submit", class: "popup__item btn" do %>
+              <%= form.button type: "submit", class: "popup__btn btn" do %>
                 <span class="overflow-ellipsis flex-item-grow"><%= index.humanize %></span>
                 <% if filter.indexed_by == index %>
                   <%= icon_tag "check", class: "checked flex-item-justify-end" %>
diff --git a/app/views/filters/settings/_sorted_by.html.erb b/app/views/filters/settings/_sorted_by.html.erb
index 94567eede..14a77f9c6 100644
--- a/app/views/filters/settings/_sorted_by.html.erb
+++ b/app/views/filters/settings/_sorted_by.html.erb
@@ -13,7 +13,7 @@
 
       <ul class="popup__list" data-filter-target="list">
         <% Filter::SORTED_BY.each do |sort| %>
-          <li class="popup__group" data-navigable-list-target="item">
+          <li class="popup__item" data-navigable-list-target="item">
             <%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %>
               <% filter.as_params.except(:sorted_by).each do |key, value| %>
                 <%= filter_hidden_field_tag key, value %>
@@ -25,7 +25,7 @@
                 <%= hidden_field_tag :expand_all, user_filtering.expanded? %>
               <% end %>
 
-              <%= form.button type: "submit", class: "popup__item btn" do %>
+              <%= form.button type: "submit", class: "popup__btn btn" do %>
                 <span class="overflow-ellipsis flex-item-grow"><%= sorted_by_label(sort) %></span>
                 <% if filter.sorted_by == sort %>
                   <%= icon_tag "check", class: "checked flex-item-justify-end" %>
diff --git a/app/views/filters/settings/_tags.html.erb b/app/views/filters/settings/_tags.html.erb
index 967d45286..5d0bce826 100644
--- a/app/views/filters/settings/_tags.html.erb
+++ b/app/views/filters/settings/_tags.html.erb
@@ -22,7 +22,7 @@
 
       <ul class="popup__list" data-filter-target="list">
         <% user_filtering.tags.each do |tag| %>
-          <li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+          <li class="popup__item" data-filter-target="item" data-navigable-list-target="item">
             <%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %>
               <% filter.as_params.except(:tag_ids).each do |key, value| %>
                 <%= filter_hidden_field_tag key, value %>
@@ -42,7 +42,7 @@
                 <%= hidden_field_tag :expand_all, user_filtering.expanded? %>
               <% end %>
 
-              <%= form.button type: "submit", class: "popup__item btn" do %>
+              <%= form.button type: "submit", class: "popup__btn btn" do %>
                 <span class="overflow-ellipsis flex-item-grow"><%= tag.hashtag %></span>
                 <% if filter.tags.include?(tag) %>
                   <%= icon_tag "check", class: "checked flex-item-justify-end" %>
diff --git a/app/views/filters/settings/_time_window.html.erb b/app/views/filters/settings/_time_window.html.erb
index 20590bd40..0ddb3c495 100644
--- a/app/views/filters/settings/_time_window.html.erb
+++ b/app/views/filters/settings/_time_window.html.erb
@@ -18,7 +18,7 @@
         <% end %>
 
         <% TimeWindowParser::VALUES.each do |value| %>
-          <div class="popup__item btn">
+          <div class="popup__btn btn">
             <%= form.radio_button name, value,
                   checked: filter.public_send(name) == value,
                   data: { action: "change->form#submit" } %>

From e1a428b46b09f7e566e9c1bd65cf9821993550f4 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Fri, 12 Sep 2025 11:59:16 -0500
Subject: [PATCH 3/5] Straighten out icon and radio sizes

---
 app/assets/stylesheets/icons.css              |  3 +-
 app/assets/stylesheets/popup.css              | 43 ++++++++++++++-----
 app/helpers/filters_helper.rb                 |  2 +-
 .../menu/collections/_all_option.html.erb     |  2 +-
 .../menu/collections/_collection.html.erb     |  2 +-
 .../filters/menu/custom/_create.html.erb      |  7 +--
 app/views/filters/menu/tags/_tag.html.erb     |  2 +-
 app/views/filters/menu/users/_user.html.erb   |  2 +-
 8 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/app/assets/stylesheets/icons.css b/app/assets/stylesheets/icons.css
index 8b1e2421d..b476cc73b 100644
--- a/app/assets/stylesheets/icons.css
+++ b/app/assets/stylesheets/icons.css
@@ -7,8 +7,9 @@
     flex-shrink: 0;
     inline-size: var(--icon-size, 1em);
     mask-image: var(--svg);
+    mask-position: center;
     mask-repeat: no-repeat;
-    mask-size: cover;
+    mask-size: var(--icon-size, 1em);
     pointer-events: none;
     user-select: none;
   }
diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index a0db67496..989d6af99 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -5,6 +5,9 @@
     --panel-size: auto;
     --btn-background: transparent;
 
+    --popup-icon-size: 24px;
+    --popup-item-padding-inline: var(--inline-space-half);
+
     inset: 0 auto auto 50%;
     max-block-size: 80vh;
     min-inline-size: min(25ch, calc(100dvw - var(--block-space-double)));
@@ -68,7 +71,7 @@
     margin: 0;
     max-inline-size: 100%;
     padding: 0;
-    row-gap: 2px;
+    row-gap: 1px;
 
     /* Hide lists when all the items within are hidden */
     &:has(.popup__section-title:only-child),
@@ -85,10 +88,6 @@
     inline-size: 100%;
     max-inline-size: 100%;
 
-    /* .popup__list &:has(*:first-child:not(.popup__btn)) {
-      padding-inline-start: var(--inline-space-half);
-    } */
-
     @media (any-hover: hover) {
       &:hover {
         background: var(--color-ink-lightest);
@@ -104,6 +103,14 @@
         }
       }
     }
+
+    &:has(> :first-child:not(.popup__btn)) {
+      padding-inline-start: var(--popup-item-padding-inline);
+    }
+
+    &:has(> :last-child:not(.popup__btn)) {
+      padding-inline-end: var(--popup-item-padding-inline);
+    }
   }
 
   /* The actionable thing with padding within popup__item */
@@ -111,20 +118,16 @@
     --btn-background: transparent;
     --btn-border-radius: 0.3em;
     --btn-border-size: 0;
-    --btn-font-weight: 500;
-    --btn-padding: var(--inline-space-half) var(--inline-space);
 
     flex: 1 1 auto;
+    font-weight: 500;
     justify-content: start;
     inline-size: 100%;
     min-inline-size: 0;
     max-inline-size: 100%;
+    padding: var(--inline-space-half) var(--popup-item-padding-inline);
     text-align: start;
 
-    .icon {
-      --icon-size: 1em;
-    }
-
     &:has(input:checked)  {
       --btn-background: transparent;
       --btn-color: var(--color-ink);
@@ -141,6 +144,24 @@
     }
   }
 
+  .popup__icon {
+    --icon-size: 1em;
+
+    inline-size: var(--popup-icon-size);
+  }
+
+  .popup__radio {
+    --icon-size: var(--text-x-small);
+
+    block-size: var(--popup-icon-size);
+    inline-size: var(--popup-icon-size);
+    flex-shrink: 0;
+
+    &:hover {
+      --btn-border-color: var(--color-ink);
+    }
+  }
+
   .popup__footer {
     background-color: var(--color-canvas);
     border-block-start: 1px solid var(--color-ink-lighter);
diff --git a/app/helpers/filters_helper.rb b/app/helpers/filters_helper.rb
index 1d7646ab3..ea155ccfd 100644
--- a/app/helpers/filters_helper.rb
+++ b/app/helpers/filters_helper.rb
@@ -17,7 +17,7 @@ module FiltersHelper
 
   def filter_place_menu_item(path, label, icon)
     tag.li class: "popup__item", id: "filter-place-#{label.parameterize}", data: { filter_target: "item", navigable_list_target: "item" } do
-      concat icon_tag(icon)
+      concat icon_tag(icon, class: "popup__icon")
       concat(link_to(path, class: "popup__btn btn") do
         concat tag.span(label, class: "overflow-ellipsis")
         concat tag.span(" ›", class: "translucent flex-item-no-shrink flex-item-justify-end")
diff --git a/app/views/filters/menu/collections/_all_option.html.erb b/app/views/filters/menu/collections/_all_option.html.erb
index 1326bdbbf..00c7cf614 100644
--- a/app/views/filters/menu/collections/_all_option.html.erb
+++ b/app/views/filters/menu/collections/_all_option.html.erb
@@ -2,7 +2,7 @@
 
 <% if Current.user.collections.many? %>
   <li class="popup__item" data-filter-target="item" data-navigable-list-target="item" id="filter-collection-all">
-    <%= link_to clear_url_path, class: "btn txt-xx-small flex-item-no-shrink" do %>
+    <%= link_to clear_url_path, class: "popup__radio btn" do %>
       <%= check_box_tag "filter_collections", nil, user_filtering.collections.blank?, class: "form-checkbox" %>
       <span class="for-screen-reader">
         See everything in all collections
diff --git a/app/views/filters/menu/collections/_collection.html.erb b/app/views/filters/menu/collections/_collection.html.erb
index fc32048b0..6eaa2c35e 100644
--- a/app/views/filters/menu/collections/_collection.html.erb
+++ b/app/views/filters/menu/collections/_collection.html.erb
@@ -1,5 +1,5 @@
 <li class="popup__item" data-filter-target="item" data-navigable-list-target="item" id="filter-collection-<%= collection.id %>">
-  <label class="btn txt-xx-small">
+  <label class="popup__radio btn">
     <%= form.check_box "collection_ids[]", {
           checked: user_filtering.filter.collections.include?(collection),
           data: { action: "change->form#submit" },
diff --git a/app/views/filters/menu/custom/_create.html.erb b/app/views/filters/menu/custom/_create.html.erb
index 71fe414fc..42d40536a 100644
--- a/app/views/filters/menu/custom/_create.html.erb
+++ b/app/views/filters/menu/custom/_create.html.erb
@@ -1,9 +1,6 @@
 <li class="popup__item overflow-ellipsis" data-navigable-list-target="item" data-filter-target="item" id="filter-custom-create">
+  <%= icon_tag "bookmark", class: "popup__icon" %>
   <%= link_to cards_path(expand_all: true), class: "popup__btn btn" do %>
-    <%= icon_tag "bookmark" %>
-    <div class="flex flex-column txt-tight-lines min-width txt-small">
-      <strong class="overflow-ellipsis">Create a new filter</strong>
-    </div>
-    <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
+    Create a new filter
   <% end %>
 </li>
diff --git a/app/views/filters/menu/tags/_tag.html.erb b/app/views/filters/menu/tags/_tag.html.erb
index 6e0c90d8e..1e2b8c2c7 100644
--- a/app/views/filters/menu/tags/_tag.html.erb
+++ b/app/views/filters/menu/tags/_tag.html.erb
@@ -1,5 +1,5 @@
 <li class="popup__item" data-filter-target="item" data-navigable-list-target="item" id="<%= "filter-tag-#{tag.id}" %>">
-  <%= icon_tag "tag" %>
+  <%= icon_tag "tag", class: "popup__icon" %>
   <%= link_to cards_path(tag_ids: [tag]), class: "popup__btn btn" do %>
     <span class="overflow-ellipsis"><%= tag.title %> (<%= tag.cards_count %>)</span>
     <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
diff --git a/app/views/filters/menu/users/_user.html.erb b/app/views/filters/menu/users/_user.html.erb
index bdf23f089..6102a4c7f 100644
--- a/app/views/filters/menu/users/_user.html.erb
+++ b/app/views/filters/menu/users/_user.html.erb
@@ -1,5 +1,5 @@
 <li class="popup__item" data-filter-target="item" data-navigable-list-target="item" id="<%= "filter-user-#{user.id}" %>">
-  <%= icon_tag "person" %>
+  <%= icon_tag "person", class: "popup__icon" %>
   <%= link_to user, class: "popup__btn btn" do %>
     <span class="overflow-ellipsis"><%= user.name %></span>
     <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>

From 373b139b9a05c3ad7cf2042fd5f2b8caa5cc93da Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Fri, 12 Sep 2025 12:32:32 -0500
Subject: [PATCH 4/5] Add collapsible nav sections

---
 app/assets/stylesheets/popup.css              | 21 +++++++++++++++++--
 app/helpers/filters_helper.rb                 | 13 +++++++++++-
 app/views/filters/menu/_collections.html.erb  | 11 ++++------
 app/views/filters/menu/_custom.html.erb       |  7 +++----
 app/views/filters/menu/_places.html.erb       |  6 ++----
 app/views/filters/menu/_tags.html.erb         |  6 ++----
 app/views/filters/menu/_users.html.erb        |  5 ++---
 .../menu/collections/_all_option.html.erb     |  1 -
 .../menu/collections/_collection.html.erb     |  1 -
 .../filters/menu/custom/_create.html.erb      |  2 +-
 .../filters/menu/custom/_filter.html.erb      | 11 +++++-----
 app/views/filters/menu/tags/_tag.html.erb     |  1 -
 app/views/filters/menu/users/_user.html.erb   |  1 -
 13 files changed, 50 insertions(+), 36 deletions(-)

diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index 989d6af99..894e7b4d1 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -45,8 +45,6 @@
     white-space: nowrap;
   }
 
-  .popup__section {}
-
   .popup__section-title {
     background: var(--color-canvas);
     font-size: var(--text-small);
@@ -61,6 +59,25 @@
     &::-webkit-details-marker {
       display: none;
     }
+
+    &:is(summary) {
+      align-items: center;
+      cursor: pointer;
+      display: flex;
+      gap: 2ch;
+      justify-content: space-between;
+    }
+
+    .icon--caret-down {
+      opacity: 0.66;
+      transition: rotate 150ms ease-out;
+    }
+
+    .popup__section:not([open]) & {
+      .icon--caret-down {
+        rotate: -90deg;
+      }
+    }
   }
 
   .popup__list {
diff --git a/app/helpers/filters_helper.rb b/app/helpers/filters_helper.rb
index ea155ccfd..797682c51 100644
--- a/app/helpers/filters_helper.rb
+++ b/app/helpers/filters_helper.rb
@@ -20,7 +20,6 @@ module FiltersHelper
       concat icon_tag(icon, class: "popup__icon")
       concat(link_to(path, class: "popup__btn btn") do
         concat tag.span(label, class: "overflow-ellipsis")
-        concat tag.span(" ›", class: "translucent flex-item-no-shrink flex-item-justify-end")
       end)
     end
   end
@@ -36,6 +35,18 @@ module FiltersHelper
     }, &block
   end
 
+  def filter_collapsible_section(title, &block)
+    tag.details class: "popup__section", open: true do
+      concat(tag.summary(class: "popup__section-title") do
+        concat title
+        concat icon_tag "caret-down"
+      end)
+      concat(tag.ul(class: "popup__list") do
+        capture(&block)
+      end)
+    end
+  end
+
   def filter_hotkey_link(title, path, key, icon)
     link_to path, class: "popup__item btn borderless", id: "filter-hotkey-#{key}", role: "listitem", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.#{key}@document->hotkey#click keydown.shift+#{key}@document->hotkey#click" } do
       concat icon_tag(icon)
diff --git a/app/views/filters/menu/_collections.html.erb b/app/views/filters/menu/_collections.html.erb
index 48897047f..5dd859360 100644
--- a/app/views/filters/menu/_collections.html.erb
+++ b/app/views/filters/menu/_collections.html.erb
@@ -1,11 +1,8 @@
 <% if user_filtering.collections.any? %>
-  <details class="popup__section" open>
-    <summary class="popup__section-title">Collections</summary>
+  <%= filter_collapsible_section "Collections" do %>
     <%= form_with url: user_filtering.self_filter_path, method: :get, data: { controller: "form" } do |form| %>
-      <ul class="popup__list">
-        <%= render "filters/menu/collections/all_option", form: form, user_filtering: user_filtering %>
-        <%= render partial: "filters/menu/collections/collection", collection: user_filtering.collections, as: :collection, locals: { form: form, user_filtering: user_filtering } %>
-      </ul>
+      <%= render "filters/menu/collections/all_option", form: form, user_filtering: user_filtering %>
+      <%= render partial: "filters/menu/collections/collection", collection: user_filtering.collections, as: :collection, locals: { form: form, user_filtering: user_filtering } %>
     <% end %>
-  </details>
+  <% end %>
 <% end %>
diff --git a/app/views/filters/menu/_custom.html.erb b/app/views/filters/menu/_custom.html.erb
index b88827328..e9e061345 100644
--- a/app/views/filters/menu/_custom.html.erb
+++ b/app/views/filters/menu/_custom.html.erb
@@ -1,7 +1,6 @@
-<%= form_with url: cards_path, method: :get, data: { controller: "form" } do |form| %>
-  <div class="popup__section-title">Saved filters</div>
-  <ul class="popup__list">
+<%= filter_collapsible_section "Saved filters" do %>
+  <%= form_with url: cards_path, method: :get, data: { controller: "form" } do |form| %>
     <%= render "filters/menu/custom/create" %>
     <%= render partial: "filters/menu/custom/filter", collection: user_filtering.filters, as: :filter, locals: { user_filtering: user_filtering } %>
-  </ul>
+  <% end %>
 <% end %>
diff --git a/app/views/filters/menu/_places.html.erb b/app/views/filters/menu/_places.html.erb
index cff259149..0bf30d8e4 100644
--- a/app/views/filters/menu/_places.html.erb
+++ b/app/views/filters/menu/_places.html.erb
@@ -1,10 +1,8 @@
-<div class="popup__section-title">Jump to…</div>
-<ul class="popup__list">
+<%= filter_collapsible_section "Jump to…" do %>
   <%= filter_place_menu_item account_settings_path, "Account Settings", "settings" %>
   <%= filter_place_menu_item user_path(Current.user), "My Profile", "person" %>
   <%= filter_place_menu_item notifications_path, "Notifications", "bell" %>
   <%= filter_place_menu_item notifications_settings_path, "Notification Settings", "settings" %>
   <%= filter_place_menu_item search_path, "Search", "search" %>
   <%= filter_place_menu_item workflows_path, "Workflows", "bolt" %>
-</ul>
-
+<% end %>
diff --git a/app/views/filters/menu/_tags.html.erb b/app/views/filters/menu/_tags.html.erb
index 2c1f40983..1b2c27c86 100644
--- a/app/views/filters/menu/_tags.html.erb
+++ b/app/views/filters/menu/_tags.html.erb
@@ -1,5 +1,3 @@
-<div class="popup__section-title">Tags</div>
-<ul class="popup__list">
+<%= filter_collapsible_section "Tags" do %>
   <%= render partial: "filters/menu/tags/tag", collection: user_filtering.tags, as: :tag %>
-</ul>
-
+<% end %>
diff --git a/app/views/filters/menu/_users.html.erb b/app/views/filters/menu/_users.html.erb
index 70dc9a077..cbc88ce98 100644
--- a/app/views/filters/menu/_users.html.erb
+++ b/app/views/filters/menu/_users.html.erb
@@ -1,4 +1,3 @@
-<div class="popup__section-title">People</div>
-<ul class="popup__list">
+<%= filter_collapsible_section "People" do %>
   <%= render partial: "filters/menu/users/user", collection: user_filtering.users, as: :user %>
-</ul>
+<% end %>
diff --git a/app/views/filters/menu/collections/_all_option.html.erb b/app/views/filters/menu/collections/_all_option.html.erb
index 00c7cf614..7745a4c64 100644
--- a/app/views/filters/menu/collections/_all_option.html.erb
+++ b/app/views/filters/menu/collections/_all_option.html.erb
@@ -12,7 +12,6 @@
 
     <%= link_to clear_url_path, class: "popup__btn btn" do %>
       <span class="overflow-ellipsis">All collections</span>
-      <span class="txt-ink translucent flex-item-no-shrink flex-item-justify-end"><span class="txt-x-small txt-uppercase">GO TO</span> ›</span>
     <% end %>
   </li>
 <% end %>
diff --git a/app/views/filters/menu/collections/_collection.html.erb b/app/views/filters/menu/collections/_collection.html.erb
index 6eaa2c35e..d3d528b62 100644
--- a/app/views/filters/menu/collections/_collection.html.erb
+++ b/app/views/filters/menu/collections/_collection.html.erb
@@ -14,6 +14,5 @@
 
   <%= link_to cards_path(collection_ids: [ collection ]), class: "popup__btn btn" do %>
     <span class="overflow-ellipsis"><%= collection.name %></span>
-    <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
   <% end %>
 </li>
diff --git a/app/views/filters/menu/custom/_create.html.erb b/app/views/filters/menu/custom/_create.html.erb
index 42d40536a..e10d5313f 100644
--- a/app/views/filters/menu/custom/_create.html.erb
+++ b/app/views/filters/menu/custom/_create.html.erb
@@ -1,6 +1,6 @@
 <li class="popup__item overflow-ellipsis" data-navigable-list-target="item" data-filter-target="item" id="filter-custom-create">
   <%= icon_tag "bookmark", class: "popup__icon" %>
   <%= link_to cards_path(expand_all: true), class: "popup__btn btn" do %>
-    Create a new filter
+    <strong class="txt-small">Create a new filter</strong>
   <% end %>
 </li>
diff --git a/app/views/filters/menu/custom/_filter.html.erb b/app/views/filters/menu/custom/_filter.html.erb
index d01a054e2..7f40cb83f 100644
--- a/app/views/filters/menu/custom/_filter.html.erb
+++ b/app/views/filters/menu/custom/_filter.html.erb
@@ -1,10 +1,9 @@
-<li class="popup__item overflow-ellipsis" data-filter-target="item" data-navigable-list-target="item" id="filter-custom-<%= filter.id %>">
+<li class="popup__item" data-filter-target="item" data-navigable-list-target="item" id="filter-custom-<%= filter.id %>">
+  <%= icon_tag "bookmark", class: "popup__icon" %>
   <%= link_to cards_path(filter_id: filter.id), class: "popup__btn btn" do %>
-    <%= icon_tag "bookmark" %>
-    <div class="flex flex-column txt-tight-lines min-width txt-small">
-      <span class="overflow-ellipsis"><%= filter_selected_collections_title(user_filtering) %></span>
-      <span class="overflow-ellipsis"><%= filter.summary %></span>
+    <div class="txt-tight-lines min-width txt-small overflow-ellipsis">
+      <div><%= filter_selected_collections_title(user_filtering) %></div>
+      <div><%= filter.summary %></div>
     </div>
-    <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
   <% end %>
 </li>
diff --git a/app/views/filters/menu/tags/_tag.html.erb b/app/views/filters/menu/tags/_tag.html.erb
index 1e2b8c2c7..3f502ba6b 100644
--- a/app/views/filters/menu/tags/_tag.html.erb
+++ b/app/views/filters/menu/tags/_tag.html.erb
@@ -2,6 +2,5 @@
   <%= icon_tag "tag", class: "popup__icon" %>
   <%= link_to cards_path(tag_ids: [tag]), class: "popup__btn btn" do %>
     <span class="overflow-ellipsis"><%= tag.title %> (<%= tag.cards_count %>)</span>
-    <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
   <% end %>
 </li>
diff --git a/app/views/filters/menu/users/_user.html.erb b/app/views/filters/menu/users/_user.html.erb
index 6102a4c7f..e4e3ea9da 100644
--- a/app/views/filters/menu/users/_user.html.erb
+++ b/app/views/filters/menu/users/_user.html.erb
@@ -2,6 +2,5 @@
   <%= icon_tag "person", class: "popup__icon" %>
   <%= link_to user, class: "popup__btn btn" do %>
     <span class="overflow-ellipsis"><%= user.name %></span>
-    <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
   <% end %>
 </li>

From 6924b86b23aefbfd058dfeb36f47089dc5a85b2b Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Fri, 12 Sep 2025 12:36:49 -0500
Subject: [PATCH 5/5] Remove redundant vars

---
 app/assets/stylesheets/popup.css | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index 894e7b4d1..c6035dedd 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -1,10 +1,9 @@
 @layer components {
   .popup {
+    --btn-background: transparent;
     --panel-border-radius: 0.5em;
     --panel-padding: var(--block-space);
     --panel-size: auto;
-    --btn-background: transparent;
-
     --popup-icon-size: 24px;
     --popup-item-padding-inline: var(--inline-space-half);
 
@@ -45,6 +44,14 @@
     white-space: nowrap;
   }
 
+  /* Hide lists when all the items within are hidden */
+  .popup__section {
+    &:has(.popup__section-title:only-child),
+    &:has(.popup__item[hidden]):not(:has(.popup__item:not([hidden]))) {
+      display: none;
+    }
+  }
+
   .popup__section-title {
     background: var(--color-canvas);
     font-size: var(--text-small);
@@ -56,10 +63,6 @@
     top: calc(-1 * var(--block-space));
     z-index: 1;
 
-    &::-webkit-details-marker {
-      display: none;
-    }
-
     &:is(summary) {
       align-items: center;
       cursor: pointer;
@@ -68,6 +71,10 @@
       justify-content: space-between;
     }
 
+    &::-webkit-details-marker {
+      display: none;
+    }
+
     .icon--caret-down {
       opacity: 0.66;
       transition: rotate 150ms ease-out;
@@ -89,12 +96,6 @@
     max-inline-size: 100%;
     padding: 0;
     row-gap: 1px;
-
-    /* Hide lists when all the items within are hidden */
-    &:has(.popup__section-title:only-child),
-    &:has(.popup__item[hidden]):not(:has(.popup__item:not([hidden]))) {
-      display: none;
-    }
   }
 
   .popup__item {
@@ -132,7 +133,6 @@
 
   /* The actionable thing with padding within popup__item */
   .popup__btn {
-    --btn-background: transparent;
     --btn-border-radius: 0.3em;
     --btn-border-size: 0;
 
@@ -146,7 +146,6 @@
     text-align: start;
 
     &:has(input:checked)  {
-      --btn-background: transparent;
       --btn-color: var(--color-ink);
 
       .icon.checked {