/* ===================================================== FILTER BAR (wraps, never scrolls) */
.filterbar{
  flex:0 0 auto; background:var(--bg-1); border-bottom:1px solid var(--panel-2);
  padding:var(--sp-2) 14px; display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2);
}
.fb-desktop{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; flex:1 1 auto; }
.fb-desktop .count{ margin-left:auto; }
.fb-group{ display:inline-flex; align-items:center; gap:7px; }
.fb-sep{ width:1px; height:20px; align-self:center; background:var(--panel-2); margin:2px 2px; }
.search{ position:relative; display:flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--border); border-radius:var(--r-md); padding:0 10px; height:32px; min-width:180px; flex:1 1 200px; max-width:340px; }
.search input{ background:none; border:none; outline:none; color:var(--text-1); width:100%; font-size:var(--fs-sm); }
.search .ico{ width:15px; height:15px; color:var(--text-3); }
.picker{ height:32px; padding:0 10px; border:1px solid var(--border); background:var(--panel); border-radius:var(--r-md); color:var(--text-2); display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); }
.picker:hover{ color:var(--text-1); }
.seg{ display:inline-flex; align-items:center; gap:2px; background:var(--bg-0); border:1px solid var(--panel-2); border-radius:9px; padding:3px; }
.seg button{ padding:5px 11px; font-size:12px; font-weight:600; color:var(--text-2); background:transparent; border:1px solid transparent; border-radius:6px; white-space:nowrap; line-height:1.1; }
.seg button:hover{ color:var(--text-1); }
.seg button.on{ background:var(--accent); color:#fff; }
.seg button.on.neutral{ background:var(--panel); color:var(--text-1); border-color:var(--border); }
.fb-label{ font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:.09em; font-weight:700; margin-right:2px; }
/* rank ladder */
.ladder{ display:inline-flex; align-items:center; gap:2px; background:var(--bg-0); border:1px solid var(--panel-2); border-radius:9px; padding:3px; }
.ladder button{ min-width:24px; height:22px; padding:0 4px; border-radius:6px; font-size:10.5px; font-weight:800; color:var(--text-2); background:transparent; border:1px solid transparent; line-height:1; }
.ladder button.none{ font-weight:400; }
/* facet chips (active filters) */
.chips{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.chip{ display:inline-flex; align-items:center; gap:5px; padding:3px 5px 3px 9px; border-radius:var(--r-full); background:var(--panel-2); border:1px solid var(--border); font-size:11.5px; color:var(--text-1); }
.chip button{ display:flex; color:var(--text-3); }
.chip button:hover{ color:var(--err); }
.count{ display:inline-flex; align-items:baseline; gap:6px; font-size:11.5px; color:var(--text-3); }
.count b{ font-family:var(--font-mono); font-size:17px; font-weight:800; color:#f8fafc; }
.icon-btn{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--panel); color:var(--text-2); }
.icon-btn:hover{ color:var(--text-1); }
.icon-btn.on{ color:var(--accent); border-color:var(--accent); }

/* mobile filter trigger (hidden on desktop) */
.filter-pill{ display:none; }