/* "browse" layout: page heading + lede, search field, category filter chips, the shared hairline
   accordion and an optional help card, all in the narrow container. The accordion itself keeps the
   `faq-list.css` rules so the two layouts never drift apart. */
.faq-browse {
  display: block;
  background: rgba(var(--color-background));
  color: rgba(var(--color-text));
}
/* The source's compact page rhythm (56px, 40px on narrow screens) lives on the wrapper, so the keyed
   container measures as the bare content box. */
.faq-browse--pad-top { padding-top: 56px; }
.faq-browse--pad-bottom { padding-bottom: 56px; }
.faq-browse--pad-both { padding-block: 56px; }
@media (max-width: 560px) {
  .faq-browse--pad-top { padding-top: 40px; }
  .faq-browse--pad-bottom { padding-bottom: 40px; }
  .faq-browse--pad-both { padding-block: 40px; }
}

.faq-browse__inner { display: block; }
.faq-browse__lede {
  margin-top: var(--faq-browse-lede-gap, 16px);
  max-width: var(--faq-browse-lede-width, 48ch);
}
.faq-browse__browser { display: block; }

.faq-browse__searchbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: var(--faq-browse-search-gap, 30px);
}
.faq-browse__searchbar .theme-input { flex: 1; min-width: 220px; }
.faq-browse__cats { margin-top: var(--faq-browse-filters-gap, 16px); gap: 8px; }
.faq-browse__list { margin-top: var(--faq-browse-list-gap, 26px); }
.faq-browse__empty {
  padding: 60px 20px; text-align: center; color: rgba(var(--color-light-text));
}
.faq-browse__help { margin-top: var(--faq-browse-help-gap, 40px); }

@media (max-width: 620px) {
  .faq-browse__searchbar { gap: 8px; }
  .faq-browse__searchbar .theme-input { min-width: 0; flex: 1 1 100%; }
}