/* ============================================================
   FILTER — chip filter bars for the directory hubs.
   Behavior + markup contract: /static/filter1.js.

   The chip look is cloned from .subpage-toc's links (style3.css),
   the active state from .lang-toggle-btn.active, and the
   .mountains override exists because the alpine palette is the
   light one — without it the chips would wash out there.
   This file is versioned (filter1) — rename on material change,
   like every other shared asset.
   ============================================================ */

.filter-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem;
  margin:1.6rem 0 .4rem;
}
.filter-bar + .filter-bar{margin-top:.7rem;}

.filter-label{
  font-size:.62rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
  opacity:.7;
  margin-right:.3rem;
}

.filter-chip{
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
  color:inherit;
  font-family:var(--sans);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  padding:.5rem .95rem;
  border:1px solid rgba(255,255,255,.32);
  border-radius:2px;
  background:rgba(255,255,255,.07);
  transition:background .22s ease, border-color .22s ease, color .22s ease;
}
.filter-chip:hover{background:rgba(255,255,255,.18);border-color:currentColor;}
.filter-chip:focus-visible{outline:2px solid var(--dawn-1);outline-offset:2px;}

.filter-chip.is-active{
  background:var(--dawn-1);
  border-color:var(--dawn-1);
  color:var(--dusk-4);
}
.filter-chip.is-active:hover{background:var(--dawn-1);color:var(--dusk-4);}

/* The light alpine palette needs darker inactive chips; the active
   fill carries its own background so it needs no override. */
.mountains .filter-chip{
  border-color:rgba(21,42,64,.28);
  background:rgba(255,255,255,.5);
}
.mountains .filter-chip:hover{background:rgba(255,255,255,.8);border-color:currentColor;}

@media(prefers-reduced-motion:reduce){
  .filter-chip{transition:none;}
}