/* Shared facet-chip visuals for zero-JS CSS filtering (home deck-focus + deck-index
   type filter). The per-surface :has() filter rules live in each surface's own
   stylesheet. Named .facet-chip (NOT .chip) to avoid base.css's existing .chip. */
.facet{display:flex;flex-direction:column;gap:.6rem;margin:0 0 clamp(1.2rem,3vw,2rem)}
.facet-row{display:flex;flex-wrap:wrap;gap:.5rem}
.cf-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.facet-chip{display:inline-flex;align-items:center;gap:.45em;cursor:pointer;
  padding:.42rem .85rem;border:1px solid var(--hair);border-radius:999px;
  font-family:'Josefin Sans',system-ui,sans-serif;
  font-size:var(--s--1);font-weight:600;letter-spacing:.04em;color:var(--muted,var(--ink-muted));
  background:color-mix(in srgb,var(--bg2,#15131F) 55%,transparent);
  transition:color .15s,border-color .15s,background .15s}
.facet-chip:hover{color:var(--ink)}
.facet-n{font-size:.82em;opacity:.7}
.cf-radio:checked+.facet-chip{color:var(--ink);
  border-color:color-mix(in srgb,var(--accent,#fff) 70%,transparent);
  background:color-mix(in srgb,var(--accent,#fff) 16%,transparent)}
.cf-radio:focus-visible+.facet-chip{outline:3px solid var(--focus);outline-offset:3px}
.facet-chip--muted{opacity:.35;cursor:default;pointer-events:none}