/* Catalog active-filter chips (.kw-filterbar / .kw-fchip) — the removable
 * "what am I filtered on" row between the toolbar and the grid. Rendered
 * entirely by catalog_filter.js; the server ships an empty hidden container.
 *
 * Token-driven (--kw-* from tokens.css). Lives on the dark public catalog but
 * stays theme-aware like the sidebar chips. */

.kw-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--kw-space-5);
}
/* hidden attr must actually hide — Tailwind's :where([hidden]) reset loses to
   the display:flex above (same gotcha as .kw-card / .kw-sidebar__option). */
.kw-filterbar[hidden] { display: none !important; }

.kw-fchip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.625rem 0.3125rem 0.75rem;
  font-family: var(--kw-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--kw-fg);
  background: var(--kw-bg-subtle);
  border: 1px solid var(--kw-border-color);
  border-radius: var(--kw-radius-pill);
  cursor: pointer;
  transition: background 150ms, border-color 150ms, color 150ms;
  animation: kw-fchip-in 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
html.dark .kw-fchip {
  background: rgba(77, 96, 251, 0.10);
  border-color: rgba(77, 96, 251, 0.28);
  color: var(--kw-muted-lavender);
}
.kw-fchip:hover { border-color: var(--kw-blue); color: var(--kw-fg); }
html.dark .kw-fchip:hover {
  background: rgba(77, 96, 251, 0.20);
  color: #fff;
}

.kw-fchip__label { white-space: nowrap; }

/* The × glyph — reads as the affordance; the whole chip is the button. */
.kw-fchip__x {
  font-size: 0.875rem;
  line-height: 1;
  opacity: 0.65;
}
.kw-fchip:hover .kw-fchip__x { opacity: 1; }

/* Free-text query chip — quoted text, slightly distinct tint. */
.kw-fchip--query { font-style: italic; }

/* Trailing "Clear all" — text-link styling, no × glyph. */
.kw-fchip--clear {
  background: none;
  border-color: transparent;
  color: var(--kw-link);
  font-family: var(--kw-font-headline);
  font-weight: 600;
}
html.dark .kw-fchip--clear { background: none; border-color: transparent; color: var(--kw-link); }
.kw-fchip--clear:hover { color: var(--kw-link-hover); text-decoration: underline; border-color: transparent; }
html.dark .kw-fchip--clear:hover { background: none; }

@keyframes kw-fchip-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .kw-fchip { animation: none; }
}