.filter-pill{position:relative}.filter-pill .filter-pill-button{background:var(--canvas-raised);border:1px solid var(--ink-100);border-radius:var(--r-full);color:var(--ink-700);cursor:pointer;font-family:var(--font-ui);height:36px;transition:background-color .2s var(--ease-out),border-color .2s var(--ease-out),color .2s var(--ease-out);align-items:center;gap:6px;padding:0 14px;font-size:14px;font-weight:500;line-height:1;display:inline-flex}.filter-pill .filter-pill-button:hover{border-color:var(--ink-300);color:var(--ink-900)}.filter-pill .filter-pill-button:focus-visible{box-shadow:var(--ring);outline:none}.filter-pill .filter-pill-button .filter-pill-count{background:var(--accent-600);border-radius:var(--r-full);color:var(--canvas);justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 5px;font-size:11px;font-weight:600;line-height:1;display:inline-flex}.filter-pill .filter-pill-button .filter-pill-caret{transition:transform .2s var(--ease-out)}.filter-pill.active .filter-pill-button{background:var(--accent-100);border-color:var(--accent-300);color:var(--accent-700)}.filter-pill.open .filter-pill-button{background:var(--canvas-raised);border-color:var(--accent-600);color:var(--accent-700)}.filter-pill.open .filter-pill-button .filter-pill-caret{transform:rotate(180deg)}.filter-pill .filter-pill-popover{background:var(--canvas-raised);border:1px solid var(--ink-100);border-radius:var(--r-lg);box-shadow:var(--elev-2);z-index:20;min-width:240px;max-height:min(420px,70vh);animation:filter-pill-fade-in .16s var(--ease-out);margin-top:8px;padding:16px;position:absolute;top:100%;left:0;overflow-y:auto}.filter-pill .filter-pill-popover.filter-pill-popover--wide{min-width:320px}@keyframes filter-pill-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.filter-pill .filter-pill-popover{animation:none}}
.filter-chip{background:var(--accent-100);border:1px solid var(--accent-300);border-radius:var(--r-full);color:var(--accent-700);font-family:var(--font-ui);height:30px;transition:border-color .2s var(--ease-out);white-space:nowrap;align-items:center;gap:4px;padding:0 6px 0 12px;font-size:13px;font-weight:500;display:inline-flex}.filter-chip .filter-chip-label{line-height:1}.filter-chip .filter-chip-remove{border-radius:var(--r-full);color:var(--accent-700);cursor:pointer;height:20px;transition:background-color .15s var(--ease-out),color .15s var(--ease-out);background:0 0;border:0;justify-content:center;align-items:center;width:20px;padding:0;display:inline-flex}.filter-chip .filter-chip-remove:hover,.filter-chip .filter-chip-remove:focus-visible{background:var(--accent-600);color:var(--canvas);outline:none}.filter-chip .filter-chip-remove svg{display:block}
.filter-sheet{display:none}@media (max-width:767px){.filter-sheet{pointer-events:none;z-index:60;display:block;position:fixed;inset:0}.filter-sheet .filter-sheet-backdrop{cursor:pointer;pointer-events:none;transition:background-color .24s var(--ease-out);background:#1a171400;border:0;padding:0;position:absolute;inset:0}.filter-sheet .filter-sheet-panel{background:var(--canvas);border-top-left-radius:var(--r-lg);border-top-right-radius:var(--r-lg);box-shadow:var(--elev-3);pointer-events:none;max-height:90dvh;transition:transform .28s var(--ease-out);flex-direction:column;display:flex;position:absolute;bottom:0;left:0;right:0;transform:translateY(100%)}.filter-sheet.filter-sheet--open{pointer-events:auto}.filter-sheet.filter-sheet--open .filter-sheet-backdrop{pointer-events:auto;background:#1a171473}.filter-sheet.filter-sheet--open .filter-sheet-panel{pointer-events:auto;transform:translateY(0)}.filter-sheet .filter-sheet-head{border-bottom:1px solid var(--ink-100);align-items:center;gap:12px;padding:16px 20px;display:flex}.filter-sheet .filter-sheet-head .filter-sheet-close{border-radius:var(--r-full);color:var(--ink-700);cursor:pointer;height:36px;transition:background-color .2s var(--ease-out),color .2s var(--ease-out);background:0 0;border:0;justify-content:center;align-items:center;width:36px;padding:0;display:inline-flex}.filter-sheet .filter-sheet-head .filter-sheet-close:hover{background:var(--canvas-sunk);color:var(--ink-900)}.filter-sheet .filter-sheet-head .filter-sheet-title{color:var(--ink-900);font-family:var(--font-display);letter-spacing:-.01em;flex:auto;margin:0;font-size:22px;font-weight:500}.filter-sheet .filter-sheet-head .filter-sheet-clear{color:var(--accent-600);cursor:pointer;font-family:var(--font-ui);transition:color .2s var(--ease-out);background:0 0;border:0;padding:8px 0;font-size:14px;font-weight:500}.filter-sheet .filter-sheet-head .filter-sheet-clear:hover{color:var(--accent-700);text-decoration:underline}.filter-sheet .filter-sheet-body{flex-direction:column;flex:auto;gap:24px;padding:20px;display:flex;overflow-y:auto}.filter-sheet .filter-sheet-foot{border-top:1px solid var(--ink-100);padding:16px 20px env(safe-area-inset-bottom,16px)}.filter-sheet .filter-sheet-foot .filter-sheet-apply{background:var(--accent-600);border-radius:var(--r-md);color:var(--canvas);cursor:pointer;font-family:var(--font-ui);height:48px;transition:background-color .2s var(--ease-out);border:0;width:100%;padding:0 20px;font-size:15px;font-weight:500}.filter-sheet .filter-sheet-foot .filter-sheet-apply:hover{background:var(--accent-700)}}@media (prefers-reduced-motion:reduce){.filter-sheet .filter-sheet-panel,.filter-sheet .filter-sheet-backdrop{transition:none}}
