/* Collection: progress bar, class filter chips, class groups, card grid and the "known" badge. */
.progress{display:flex; align-items:center; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:14px}
.bar{flex:1 1 180px; max-width:320px; height:8px; background:var(--soft); border-radius:4px; overflow:hidden}
.bar span{display:block; height:100%; background:var(--good); width:0; transition:width .4s}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 8px}
.chip{border:1.5px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px; padding:5px 12px; font:700 14px var(--body); cursor:pointer; display:inline-flex; align-items:center; gap:6px}
/* Class dot with the class symbol (RSP-124): colour and shape, so the filter works without colour vision too. */
.chip i{flex:none; width:20px; height:20px; border-radius:50%; border:1.5px solid #33202F; color:#33202F; display:grid; place-items:center}
.chip i .cls-sym{width:13px; height:13px; display:block}
.chip[aria-pressed="true"]{border-color:var(--accent); background:var(--soft)}
.group{margin-top:28px}
.group h2{font:800 22px var(--display); margin:0 0 2px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.group h2 .official{font:600 16px var(--body); color:var(--muted)}   /* RSP-110: official RFC 9110 class name */
.group h2 code{font:800 15px var(--mono); padding:2px 8px; border-radius:6px; color:#2B1A28; display:inline-flex; align-items:center; gap:5px}
.group h2 code .cls-sym{width:.95em; height:.95em; display:block}
.group p.lede{margin:0 0 12px; color:var(--muted); font-size:14px}
/* Collection grid: 2 columns on phones; from 600px the same 3 columns in every class, cards capped at 240px, rows left-aligned with the class headings. */
.grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
@media (min-width:600px){.grid{grid-template-columns:repeat(3,minmax(0,240px)); gap:18px}}
/* The card itself lives in card.css. */