/* dmari.de – Text index: category filter (2026-09-27)
   Loaded only by text.html after /css/styles.css (uses its tokens: --ink, --mute, --faint, --line, --font-ui, --nav-fs).
   Understated, nav-like: same face/size/tracking as .nav; active = ink + hairline.
   Bar is [hidden] in HTML and shown by js/text-filter.js (no-JS: full list). */
.text-filter {
  max-width: min(100%, 46rem); /* = .text-index-list */
  margin: -0.75rem auto 1.1rem;
}

.text-filter[hidden] { display: none; }

.text-filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
}

.text-filter-btn {
  padding: 0.3rem 0 0.2rem;
  font-family: var(--font-ui);
  font-size: var(--nav-fs, 0.78rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--mute);
  border-bottom: 1px solid transparent;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.text-filter-btn:hover { color: var(--ink); }

.text-filter-btn[aria-pressed="true"] {
  color: var(--ink);
  border-bottom-color: color-mix(in srgb, var(--ink) 45%, transparent);
}

.text-filter-btn:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
  border-radius: 1px;
}

.text-filter-n {
  color: var(--faint);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.text-filter-btn[aria-pressed="true"] .text-filter-n { color: var(--mute); }

/* keep the closing hairline when the last row is filtered out */
#text-list.is-filtered { border-bottom: 1px solid var(--line); }
#text-list.is-filtered > .text-row:last-child { border-bottom: 0; }
#text-list > .text-row[hidden] { display: none; }

@media (max-width: 600px) {
  .text-filter { margin: -1rem auto 0.9rem; }
  .text-filter-list { gap: 0.15rem 0.95rem; }
  .text-filter-btn { padding: 0.45rem 0 0.35rem; } /* ~40px tap rows incl. gap */
}