:root { --cards-min: 18rem; }
.brand { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.beta { padding: .1rem .45rem; border: 1px solid var(--pico-primary); border-radius: .3rem;
        color: var(--pico-primary); font-size: .7rem; font-weight: 600; letter-spacing: .05em;
        line-height: 1.4; }
.dataset-date { padding: .1rem .45rem; border: 1px solid var(--pico-muted-border-color); border-radius: .3rem;
                color: var(--pico-muted-color); font-size: .7rem; line-height: 1.4; text-decoration: none; white-space: nowrap; }
.dataset-date:hover { color: var(--pico-primary); border-color: var(--pico-primary); }
.brand-item { display: flex; align-items: center; gap: .5rem; }
@media (max-width: 576px) {
  .dataset-date { display: none; }
  header nav, header nav ul { flex-wrap: wrap; }
  .brand strong { white-space: nowrap; }
}
.hero { text-align: center; padding: 2rem 0 1rem; }
.hero p { max-width: 42rem; margin-inline: auto; }
.searchbox { display: flex; gap: .5rem; max-width: 46rem; margin: 1rem auto; }
/* Pico rounds a search form's ends into a pill, which turns a tall field into a blob. */
.searchbox[role=search] > :is(textarea, button) { border-radius: 1.5rem; }
.searchbox textarea { flex: 1; margin-bottom: 0; resize: none; overflow-y: auto; max-height: 40vh; }
.searchbox button { flex: none; width: auto; margin-bottom: 0; align-self: flex-end; }
.examples { font-size: .9rem; }
h2 small, h3 small { font-size: .8rem; font-weight: normal; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--cards-min), 100%), 1fr)); gap: 1rem; }
.cards .card { margin: 0; display: flex; flex-direction: column; }
.cards .card header { margin-bottom: .5rem; }
.cards .card header a.badge { text-decoration: none; }
.cards .card .summary { flex: 1; font-size: .9rem; }
.tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .5rem; }
.tag { font-size: .75rem; padding: .05rem .5rem; border-radius: 1rem; border: 1px solid var(--pico-muted-border-color); color: var(--pico-muted-color); text-decoration: none; }
a.tag:hover { border-color: var(--pico-primary); color: var(--pico-primary); }
.taglist { list-style: none; padding: 0; columns: 2 20rem; }
.taglist li { list-style: none; break-inside: avoid; margin-bottom: .5rem; }
.taglist .count { color: var(--pico-muted-color); }
.cards .card footer.meta { margin-top: .5rem; font-size: .8rem; display: flex; flex-wrap: wrap; gap: .25rem .75rem; }

.ai { border-left: 4px solid var(--pico-primary); padding-left: 1rem; margin-bottom: 2rem; }
.answer.streaming { white-space: pre-wrap; }
.status .error { color: var(--pico-del-color); }
.disclaimer { color: var(--pico-muted-color); }
.pager { display: flex; justify-content: space-between; margin-top: 1rem; }

.actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.facts { margin-bottom: 2rem; }
.facts article { margin: 0; }
.facts dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0; }
.facts dd { margin: 0; }
.readme, .description-html { overflow-x: auto; }
.readme img, .description-html img { max-width: 100%; height: auto; }
.readme [align=center], .description-html [align=center] { text-align: center; }
.description, .pre-wrap { white-space: pre-wrap; }
[data-collapsible].collapsed { max-height: 24rem; overflow: hidden; }
[data-collapsible].collapsed.overflowing { mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.expand { margin-top: .5rem; padding: .3rem .9rem; font-size: .9rem; }
.summary footer { margin-top: .5rem; }

mark.label-active, mark.verdict-supported { background: #bbf7d0; color: #14532d; }
mark.label-stale, mark.verdict-likely { background: #fef08a; color: #713f12; }
mark.label-abandoned, mark.verdict-unsupported { background: #fecaca; color: #7f1d1d; }
.versions { overflow-x: auto; }
.versions table { margin: 0; }
.versions td, .versions th { white-space: nowrap; }
.versions td.best { font-weight: bold; }
.versions .depth { display: inline-block; }
.versions tr.current td:first-child { box-shadow: inset 3px 0 var(--pico-primary); }

.tabs { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-bottom: 1rem; }
.tabs a[aria-current="page"] { font-weight: bold; text-decoration: underline; }
.kpis article { margin: 0; text-align: center; }
.kpi { font-size: 2rem; font-weight: bold; margin: 0; }
.groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr)); gap: 1rem; margin-top: 1rem; }
.groups article { margin: 0; }
td.num, th.num { text-align: right; }
.bars td { padding: .2rem .4rem; font-size: .85rem; }
.bars td.bar { width: 40%; }
.bars td.bar span { display: block; height: .6rem; background: var(--pico-primary); border-radius: 2px; }
footer.container { margin-top: 3rem; color: var(--pico-muted-color); }

.search-layout { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.search-results { min-width: 0; }
.filters { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; font-size: .9rem; margin: 0; }
.filters summary { display: none; }
.filters fieldset { margin-bottom: 1rem; }
.filters legend { font-weight: 600; margin-bottom: .25rem; }
.filters label { margin-bottom: .25rem; }
.filters input:not([type=checkbox], [type=radio]), .filters select { margin-bottom: .25rem; padding-block: .4rem; height: auto; }
.filter-tags { max-height: 16rem; overflow-y: auto; }
.filter-tags .count, .filters legend small { color: var(--pico-muted-color); font-weight: normal; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .85rem; }
.chip { color: var(--pico-color); }
@media (max-width: 767px) {
  .search-layout { grid-template-columns: 1fr; gap: 1rem; }
  .filters { position: static; max-height: none; }
  .filters summary { display: list-item; font-weight: 600; }
}