add pills

styles.css

@@ -1,10 +1,45 @@
 .org-todo-root {
   padding: 0 8px;
 }
-.org-todo-filter {
-  width: 100%;
+.org-todo-filterwrap {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  border: 1px solid var(--background-modifier-border);
+  border-radius: 6px;
+  padding: 4px 6px;
   margin-bottom: 8px;
 }
+.org-todo-pills {
+  display: contents;   /* pills participate directly in the wrap's flex layout */
+}
+.org-todo-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 0.78em;
+  padding: 2px 6px;
+  border-radius: 10px;
+  background: var(--interactive-accent);
+  color: var(--text-on-accent);
+  white-space: nowrap;
+}
+.org-todo-pill-x {
+  cursor: pointer;
+  font-weight: bold;
+  opacity: 0.8;
+}
+.org-todo-pill-x:hover {
+  opacity: 1;
+}
+.org-todo-filter {
+  flex: 1;
+  min-width: 80px;
+  border: none;
+  outline: none;
+  background: transparent;
+}
 .org-todo-toggle {
   display: flex;
   align-items: center;