/* Collapsible filter chrome for /cards/ only, loaded after site.css.
   The .directory-controls-rich prefixes are load-bearing: site.css sets
   `.directory-controls button{border,padding,min-height:48px}` at specificity
   (0,1,1), which beats a bare `.filter-toggle` (0,1,0) no matter the order and
   stretched the pill to 48px. Matching that specificity here and winning on
   order is the fix; these rules exist nowhere else, so the prefix is free. */
.directory-controls-rich .filter-toggle{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;border:1px solid #b4c6b2;background:#fff;border-radius:999px;padding:6px 15px;font-size:12.5px;font-weight:600;color:var(--deep);cursor:pointer;min-height:34px}
.directory-controls-rich .filter-toggle:hover{border-color:#8fae86;color:#327453}
.directory-controls-rich .filter-toggle[aria-expanded=true]{background:#e9f1e2;border-color:#8fae86}
.filter-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.filter-chips-label{font-size:12px;font-weight:600;color:var(--muted);flex:0 0 auto}
.filter-chips-list{display:flex;flex-wrap:wrap;gap:6px}
.filter-chip{display:inline-flex;align-items:center;gap:4px;border:1px solid #c7d4c5;background:#fff;border-radius:999px;padding:3px 5px 3px 12px;font-size:12.5px;line-height:1.7;color:var(--ink);max-width:100%}
.directory-controls-rich .filter-chip button{border:0;background:transparent;cursor:pointer;padding:0 6px;font-size:15px;line-height:1;color:var(--muted);border-radius:999px;min-height:0;min-width:0}
.directory-controls-rich .filter-chip button:hover{color:#b3261e}
@media(max-width:740px){.filter-chips{align-items:flex-start;flex-direction:column;gap:6px}.directory-controls-rich .filter-toggle{align-self:stretch;justify-content:center}}