/* public/css/fm/filterbar.css
 *
 * fm-filterbar — só o LAYOUT da barra (busca + chips). Os estilos da busca e dos
 * chips vêm de fm/searchbar.css e fm/chip.css (composição). Consome tokens fm.
 */
.fm-filterbar {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--fm-space-4);
  width: 100%;
}
.fm-filterbar-search {
  max-width: 26rem;
}
.fm-filterbar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fm-space-2);
  align-items: center;
}

/* telas estreitas: chips rolam em faixa horizontal em vez de quebrar muito */
@media (max-width: 600px) {
  .fm-filterbar-search {
    max-width: none;
  }
  .fm-filterbar-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--fm-space-1);
    scrollbar-width: none;
  }
  .fm-filterbar-chips::-webkit-scrollbar {
    display: none;
  }
}