/* Index filter bar (catalog + conjugation). Colors from skins/*.css */ /* First paint: JS class is set in so the full list / hidden filters do not flash in before catalog.js runs. Dropped after .catalog-ready. */ html.catalog-js:not(.catalog-ready) .catalog-hero[data-catalog-enhance][hidden] { display: block !important; } html.catalog-js:not(.catalog-ready) .catalog-controls__more[data-catalog-more-filters][hidden] { display: inline !important; } html.catalog-js:not(.catalog-ready) .index-results__pager[data-index-results-pager][hidden] { display: flex !important; } html.catalog-js:not(.catalog-ready) .catalog-topic:nth-child(n+11) { display: none !important; } html.catalog-pending .catalog-topic-list { visibility: hidden; } .catalog-controls { max-width: var(--layout-max); margin: -0.5rem auto 0; } .catalog-controls__panel { margin: 0; padding: 0.75rem 1rem; border: 1px solid var(--color-catalog-filter-line); border-radius: var(--radius-md); background: var(--color-catalog-filter-wash); } .catalog-hero__filters { margin: 0; } .catalog-controls__grid { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem; } .catalog-controls__field, .catalog-controls__levels, .catalog-controls__content { display: flex; flex-direction: column; margin: 0; min-width: 0; } .catalog-controls__field--q { flex: 1 1 14rem; } .catalog-controls__field--sort { flex: 0 1 10rem; } .catalog-controls__levels, .catalog-controls__content, .catalog-controls__dates { padding: 0; border: 0; } .catalog-controls__label, .catalog-controls__sublabel { display: block; margin: 0 0 0.2rem; padding: 0; font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); } .catalog-controls__dates > .catalog-controls__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .catalog-controls input[type="search"], .catalog-controls input[type="date"], .catalog-controls select { box-sizing: border-box; width: 100%; height: 2.25rem; padding: 0 0.65rem; border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-family: inherit; font-size: 0.875rem; line-height: 1.2; } .catalog-controls__pills { display: flex; flex-wrap: wrap; gap: 0.35rem; } .catalog-pill { display: inline-flex; align-items: center; height: 2.25rem; padding: 0 0.65rem; border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: inherit; font-family: inherit; font-size: 0.875rem; line-height: 1; cursor: pointer; } button.catalog-pill { appearance: none; } .catalog-pill input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .catalog-pill:has(input:checked), .catalog-pill--pressed, .catalog-pill[aria-pressed="true"] { background: var(--color-highlight); } .catalog-pill:hover { background: var(--color-highlight-hover); } .catalog-controls__clear, .catalog-controls__more { display: inline; padding: 0; border: 0; background: none; color: var(--color-text-muted); font-family: inherit; font-size: 0.875rem; line-height: 2.25rem; cursor: pointer; } .catalog-controls__clear:hover, .catalog-controls__more:hover { color: var(--color-text); text-decoration: underline; text-underline-offset: 0.14em; } .catalog-controls__clear[aria-disabled="true"] { pointer-events: none; opacity: 0.45; } .catalog-controls__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; margin-top: 0.5rem; } .catalog-controls__more { margin-top: 0; } .catalog-controls__more-panel { display: flex; flex-wrap: nowrap; align-items: end; gap: 0.75rem 1rem; margin-top: 0.5rem; } .catalog-controls__content { flex: 1 1 auto; min-width: 0; } .catalog-controls__more-panel[hidden] { display: none; } .catalog-controls__dates { display: flex; flex-wrap: nowrap; align-items: end; flex: 0 0 auto; gap: 0.5rem; } .catalog-controls__field--date { flex: 0 1 10rem; } @media (max-width: 768px) { .catalog-controls__field--q, .catalog-controls__field--sort, .catalog-controls__levels { flex: 1 1 100%; } .catalog-controls__more-panel { flex-wrap: wrap; } .catalog-controls__field--date { flex: 1 1 8rem; } } .catalog-active { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.85rem; max-width: var(--layout-max); margin: 0.75rem auto 0; } .catalog-active[hidden] { display: none; } .catalog-active__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; min-width: 0; } .catalog-chip { appearance: none; display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; height: 1.75rem; padding: 0 0.4rem 0 0.55rem; border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 0.8125rem; font-weight: 550; line-height: 1; cursor: pointer; } .catalog-chip:hover, .catalog-chip:focus-visible { background: var(--color-highlight-hover); } .catalog-chip:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; } .catalog-chip__label { min-width: 0; } .catalog-chip__x { color: var(--color-text-muted); font-size: 1rem; font-weight: 400; line-height: 1; } .catalog-chip:hover .catalog-chip__x, .catalog-chip:focus-visible .catalog-chip__x { color: var(--color-text); } .catalog-active__clear { appearance: none; margin: 0; padding: 0; border: 0; background: none; color: var(--color-text-muted); font: inherit; font-size: 0.875rem; line-height: 1.75rem; cursor: pointer; } .catalog-active__clear:hover, .catalog-active__clear:focus-visible { color: var(--color-text); text-decoration: underline; text-underline-offset: 0.14em; } .catalog-active__clear:focus-visible { outline: 2px solid var(--color-text); outline-offset: 3px; }