/*
 * ONE FILTER CHIP, for every row of filters on both surfaces: the Field Console's kill feed kinds and
 * leaderboard groups, and the admin Log Viewer's kill feed kinds. Loaded by both pages (the admin
 * panel from the root, like catalogue.css), so the two cannot drift apart. The tokens it reads are
 * named the same in both stylesheets.
 *
 *   <div class="fc-chips" role="group">
 *     <button type="button" class="fc-chip active" aria-pressed="true">
 *       <svg class="ico"><use href="#i-skull"/></svg><span>All</span><span class="fc-chip-n">12</span>
 *     </button> …
 *
 * A pill with a glyph, a word and an optional count; the active chip is the accent fill. It wraps
 * onto as many rows as it needs, so a phone never scrolls sideways, and every chip is at least 44px
 * tall for a fingertip, the admin panel's touch floor. Hover retunes background AND text together (the panel's `button:hover`
 * paints every button amber, and changing one half alone leaves a pair nobody can read).
 */
.fc-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.85rem; max-width: 100%; }
.fc-chips[hidden] { display: none; }
.fc-chip {
  display: inline-flex; align-items: center; gap: 0.45rem; flex: none; max-width: 100%;
  min-height: 2.75rem; padding: 0.3rem 0.85rem; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: var(--pill); background: var(--inset); color: var(--muted);
  font-family: var(--ui); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer; transition: border-color 0.12s;
}
.fc-chip > span { overflow: hidden; text-overflow: ellipsis; }
.fc-chip .ico { flex: none; width: 1.05em; height: 1.05em; font-size: 1rem; color: var(--amber); }
.fc-chip-n {
  flex: none; min-width: 1.4rem; padding: 0.05rem 0.4rem; border-radius: var(--pill); text-align: center;
  font-size: 0.72rem; letter-spacing: 0; background: var(--line); color: var(--text);
}
.fc-chip:hover { background: var(--inset); color: var(--text); border-color: var(--line-amber); }
.fc-chip:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.fc-chip.active, .fc-chip.active:hover { background: var(--amber); color: var(--on-amber); border-color: var(--amber); }
.fc-chip.active .ico { color: var(--on-amber); }
.fc-chip.active .fc-chip-n { background: var(--on-amber); color: var(--amber); }
/* On a phone the chips share each row they wrap onto rather than standing in a ragged column. */
@media (max-width: 560px) {
  .fc-chip { flex: 1 1 auto; justify-content: center; }
}