/* Verbatim <style> block from design/collections.html. Do not edit by hand; re-extract instead. */
main:focus { outline: none; }
.page { padding-top: var(--sp-6); padding-bottom: var(--sp-16); }

/* Breadcrumb (same pattern as topic.html / repo.html) */
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--fs-13); color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.crumbs li + li::before { content: "/"; color: var(--faint); margin-right: 2px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs [aria-current="page"] { color: var(--text); }

/* Intro */
.cx-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: var(--sp-8) var(--sp-12); align-items: start; margin-top: var(--sp-6); padding-bottom: var(--sp-8); border-bottom: 1px solid var(--border); }
.cx-intro__main { min-width: 0; }
.cx-title { font-size: var(--fs-48); line-height: var(--lh-tight); letter-spacing: -0.03em; font-weight: var(--fw-bold); }
.cx-kicker { margin-top: var(--sp-3); font-size: var(--fs-20); line-height: 1.4; letter-spacing: -0.01em; color: var(--text); max-width: 36ch; }
.cx-lede { margin-top: var(--sp-4); max-width: 60ch; color: var(--muted); font-size: var(--fs-16); line-height: 1.6; }

/* How they are ranked */
.cx-how { min-width: 0; }
.cx-how__title { font-size: var(--fs-14); font-weight: var(--fw-semibold); margin-bottom: var(--sp-3); }
.cx-how__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.cx-how__item { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.cx-how__weights { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-14); font-weight: var(--fw-semibold); line-height: 1.4; color: var(--text); }
.cx-how__body { font-size: var(--fs-13); color: var(--muted); line-height: 1.5; }
.cx-how__jump { margin-top: auto; padding-top: var(--sp-1); align-self: flex-start; min-height: 32px; }

/* Stats */
.cx-stats { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-12); margin: var(--sp-6) 0 0; }
.cx-stats .stat-value.is-rise { color: var(--rise-text); }
.cx-stats .skeleton { width: 56px; height: 24px; }

/* Filter */
.cx-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-8); }
.cx-toolbar__status { font-size: var(--fs-13); color: var(--muted); }
.cx-toolbar[hidden] { display: none; }

/* Groups */
.cx-groups { margin-top: var(--sp-6); min-width: 0; }
.cx-groups > .empty-state, .cx-groups > .error-state { border: 1px solid var(--border); border-radius: var(--r-card); }
.cx-group { min-width: 0; scroll-margin-top: calc(64px + var(--sp-6)); }
.cx-group + .cx-group { margin-top: var(--sp-12); }
.cx-group[hidden] { display: none; }
.cx-group__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-2) var(--sp-6); margin-bottom: var(--sp-4); }
.cx-group__heading { min-width: 0; }
.cx-group__title .type-cue { gap: var(--sp-2); font-family: var(--font-sans); font-size: var(--fs-24); font-weight: var(--fw-semibold); letter-spacing: -0.015em; color: var(--text); white-space: normal; }
.cx-group__title .type-cue .icon { width: 20px; height: 20px; }
.cx-group__sub { margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-14); max-width: 62ch; }
.cx-group__meta { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-12); color: var(--muted); }

/* Grid: 3 cols >= 1280, 2 cols 768-1279, 1 col < 768 (overrides the auto-fill default) */
.cx-groups .collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* CTA band */
.cx-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-6);
  margin-top: var(--sp-16); padding: var(--sp-8); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
}
.cx-cta__copy { min-width: 0; flex: 1 1 360px; }
.cx-cta h2 { font-size: var(--fs-24); letter-spacing: -0.015em; line-height: var(--lh-heading); }
.cx-cta p { margin-top: var(--sp-2); color: var(--muted); max-width: 58ch; font-size: var(--fs-14); }
.cx-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

@media (max-width: 1279.98px) {
  .cx-groups .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023.98px) {
  .cx-intro { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .page { padding-top: var(--sp-4); padding-bottom: var(--sp-12); }
  .crumbs a { display: inline-flex; align-items: center; min-height: 32px; }
  .cx-intro { margin-top: var(--sp-4); padding-bottom: var(--sp-6); gap: var(--sp-6); }
  .cx-title { font-size: var(--fs-32); }
  .cx-kicker { font-size: var(--fs-16); }
  .cx-lede { font-size: var(--fs-14); }
  .cx-how__grid { grid-template-columns: minmax(0, 1fr); }
  .cx-stats { gap: var(--sp-3) var(--sp-6); }
  .cx-stats .stat-value { font-size: var(--fs-16); }
  .cx-toolbar { margin-top: var(--sp-6); }
  .cx-toolbar .segmented { display: flex; width: 100%; }
  .cx-toolbar .segmented__item { flex: 1 1 0; min-width: 0; height: 44px; padding-inline: var(--sp-2); }
  .cx-groups .collection-grid { grid-template-columns: minmax(0, 1fr); }
  .cx-group + .cx-group { margin-top: var(--sp-8); }
  .cx-group__title .type-cue { font-size: var(--fs-20); }
  .cx-cta { margin-top: var(--sp-12); padding: var(--sp-6) var(--sp-4); }
  .cx-cta__actions, .cx-cta__actions .btn { width: 100%; }
}
@media (hover: hover) {
  .crumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
}