Filter Chips

<!-- Filter Chips — radio chips filter the cards, zero JS.
     Selecting a chip dims the cards that don't match its data-cat. -->
<div class="nuda-css-chips">
  <input class="nuda-css-chips__input" type="radio" name="nuda-css-chips" id="nuda-css-ch-all" checked />
  <input class="nuda-css-chips__input" type="radio" name="nuda-css-chips" id="nuda-css-ch-design" />
  <input class="nuda-css-chips__input" type="radio" name="nuda-css-chips" id="nuda-css-ch-dev" />

  <div class="nuda-css-chips__bar">
    <label class="nuda-css-chips__chip" for="nuda-css-ch-all">All</label>
    <label class="nuda-css-chips__chip" for="nuda-css-ch-design">Design</label>
    <label class="nuda-css-chips__chip" for="nuda-css-ch-dev">Dev</label>
  </div>

  <div class="nuda-css-chips__grid">
    <div class="nuda-css-chips__card" data-cat="design"><span class="nuda-css-chips__tag">Design</span> Color tokens</div>
    <div class="nuda-css-chips__card" data-cat="dev"><span class="nuda-css-chips__tag">Dev</span> CSS selectors</div>
    <div class="nuda-css-chips__card" data-cat="design"><span class="nuda-css-chips__tag">Design</span> Spacing scale</div>
  </div>
</div>

/* Filter Chips
   Hidden radios select a filter; sibling selectors dim the
   cards whose data-cat doesn't match. "All" dims nothing.
   No JS. Customize: --nuda-css-ch-accent */

.nuda-css-chips {
  --nuda-css-ch-accent: #e4ff54;
  width: 100%;
  max-width: 420px;
}

.nuda-css-chips__input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); border: 0;
}

.nuda-css-chips__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 0.8rem;
}

.nuda-css-chips__chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #aaa;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.15s;
}

.nuda-css-chips__chip:hover { color: #fff; transform: translateY(-1px); }

.nuda-css-chips__grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nuda-css-chips__card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  color: #ccc;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.nuda-css-chips__tag {
  font-size: 0.65rem;
  font-weight: 700;
  color: #09090b;
  background: var(--nuda-css-ch-accent);
  padding: 1px 6px;
  border-radius: 6px;
}

/* Active chip */
#nuda-css-ch-design:checked ~ .nuda-css-chips__bar label[for="nuda-css-ch-design"],
#nuda-css-ch-dev:checked ~ .nuda-css-chips__bar label[for="nuda-css-ch-dev"] {
  color: #09090b;
  background: var(--nuda-css-ch-accent);
  border-color: var(--nuda-css-ch-accent);
}

/* Filtering: dim cards that don't match the active category */
#nuda-css-ch-design:checked ~ .nuda-css-chips__grid .nuda-css-chips__card[data-cat="dev"],
#nuda-css-ch-dev:checked ~ .nuda-css-chips__grid .nuda-css-chips__card[data-cat="design"] {
  opacity: 0.15;
  transform: scale(0.97);
}

.nuda-css-chips__input:focus-visible + .nuda-css-chips__bar label {
  outline: 2px solid var(--nuda-css-ch-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-css-chips__chip,
  .nuda-css-chips__card { transition: none; }
}