/* 索引：記入欄は下罫だけ、分類は下線タブ。台帳の上に載る操作面なので枠を作らない。 */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem clamp(.9rem, 3vw, 2rem);
  margin-bottom: 1.1rem;
}
.filter-search {
  font: inherit;
  font-size: .92rem;
  color: var(--ink);
  background: none;
  border: none;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: .45em .1em;
  flex: 0 1 20rem;
  min-width: 0;
}
.filter-search::placeholder { color: var(--ink-2); }
.filter-search:focus { outline: none; border-bottom-color: var(--blue); border-bottom-width: 2px; padding-bottom: calc(.45em - 1px); }

.filter-genres { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; }
.genre-chip {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--ink-2);
  padding: .3em .1em;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.genre-chip:hover { color: var(--ink); }
.genre-chip.is-active { color: var(--ink); border-bottom-color: var(--blue); }

.filter-count {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--ink-2);
  margin-bottom: 1.2rem;
}

.filter-grid {
  counter-reset: obs;
  display: block;
}
.filter-item { min-width: 0; }
.filter-empty {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--ink-2);
  padding: 2.6rem 0;
  border-bottom: 1px solid var(--rule);
}