frontend: tags

frontend/src/styles.css

@@ -1192,7 +1192,7 @@ button.danger:hover:not([disabled]) {
   border-radius: 999px;
   padding: 0.25rem 0.6rem;
   font-size: 0.75rem;
-  font-weight: 500;
+  font-weight: 600;
   line-height: 1;
   cursor: pointer;
   background: var(--surface-soft);
@@ -1687,6 +1687,7 @@ button.danger:hover:not([disabled]) {
   gap: 0.25rem;
   border-radius: 1rem;
   padding: 0.2rem 0.4rem;
+  font-weight: 600;
 }
 
 .tag-chip--more {
@@ -1695,6 +1696,39 @@ button.danger:hover:not([disabled]) {
   color: var(--muted);
 }
 
+.tag-chip--removable {
+  gap: 0.35rem;
+}
+
+.tag-chip__label {
+  line-height: 1;
+}
+
+.tag-chip__remove {
+  background: none;
+  border: none;
+  color: inherit;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.9em;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.8;
+}
+
+.tag-chip__remove:hover,
+.tag-chip__remove:focus-visible {
+  opacity: 1;
+}
+
+.tag-chip__remove:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+  border-radius: 50%;
+}
+
 .empty-state {
   border: 1px dashed var(--border);
   border-radius: 0;
@@ -2093,32 +2127,6 @@ button.danger:hover:not([disabled]) {
   line-height: 1.45;
 }
 
-.tag-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.18rem;
-  background: var(--surface-subtle);
-  color: var(--fg);
-  padding: 0.2rem 0.45rem;
-  border-radius: 2px;
-  font-size: 0.78rem;
-  border: 1px solid var(--border);
-}
-
-.tag-pill button {
-  background: none;
-  border: none;
-  color: inherit;
-  padding: 0;
-  cursor: pointer;
-  font-size: 0.85rem;
-  opacity: 0.8;
-}
-
-.tag-pill button:hover {
-  opacity: 1;
-}
-
 input,
 textarea,
 select {