/* =====================================================================
   Filter Chip — Figma set 3:278 (Default / Active / Follow / Follow Active; props Show icon, Icon swap).
   One component for Recent (clock), Trending (trending-up), "Did you mean", "Or try" and the options in the Filters sheet.
   38 high (Default, with its 1px border) / 36 (Active, no border), 8/16 padding, 8 gap, 14px icon, text-sm.
   Default: filter-chip bg + border, text/secondary. Active: filter-chip active bg, text/primary.
   Optional remove ×: .filter-chip__x (active filter chips on the results page).
   ===================================================================== */
.filter-chip{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);flex:none;
  min-height:38px;padding:var(--space-8) var(--space-16);border:1px solid var(--filter-chip-border);border-radius:var(--radius-full);
  background:var(--filter-chip-background);color:var(--text-secondary);font:var(--text-sm);white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background-color .2s,border-color .2s,color .2s;-webkit-tap-highlight-color:transparent}
.filter-chip:hover{border-color:var(--border-strong);color:var(--text-primary)}
.filter-chip:focus-visible,.filter-chip.is-active-option{outline:none;box-shadow:var(--shadow-focus-ring-accent)}
.filter-chip__icon{width:14px;height:14px;flex:none;fill:none;stroke:var(--text-primary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.filter-chip.is-active,.filter-chip[aria-pressed="true"],.filter-chip[aria-checked="true"]{min-height:36px;margin-block:var(--space-1);border-color:transparent;background:var(--accent-default);color:var(--text-primary)}
.filter-chip:disabled,.filter-chip[aria-disabled="true"]{opacity:.45;cursor:not-allowed;border-color:var(--filter-chip-border);color:var(--text-secondary)}
.filter-chip__x{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:calc(-1 * var(--space-4))}
.filter-chip__x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.filter-chips{display:flex;flex-wrap:wrap;gap:var(--space-8)}
/* Follow / Follow Active (Figma 120:1165 / 120:1169): label · 1×16 divider · Follow / Following, 12 apart */
.filter-chip--follow{gap:var(--space-12)}
.filter-chip__divider{width:1px;height:16px;flex:none;border-radius:var(--radius-full);background:var(--border-strong)}
.filter-chip--follow:is(.is-active,[aria-pressed="true"]) .filter-chip__divider{background:color-mix(in srgb,var(--text-primary) 20%,transparent)}