/* Verbatim <style> block from design/collection.html. Do not edit by hand; re-extract instead. */
/* collection.html — page-local layout. Tokens and ds-1.1 classes only: no new colors, fonts or gradients. */
main:focus { outline: none; }
.cp-page { padding-top: var(--sp-6); padding-bottom: var(--sp-12); }

/* 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); overflow-wrap: anywhere; }

/* Layout: main column + rail (rail drops below at < 1024) */
.cp-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); gap: var(--sp-8); align-items: start; margin-top: var(--sp-6); }
.cp-main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-8); }
.cp-content { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-8); }

/* Header */
.cp-head { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.cp-title { font-size: var(--fs-32); line-height: var(--lh-tight); letter-spacing: -0.025em; font-weight: var(--fw-semibold); max-width: 28ch; overflow-wrap: anywhere; text-wrap: balance; }
.cp-intro { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 68ch; }
.cp-lead { font-size: var(--fs-20); line-height: 1.5; color: var(--text); letter-spacing: -0.005em; }
.cp-intro__more { font-size: var(--fs-16); color: var(--muted); }
.cp-readmore { align-self: flex-start; margin-left: -10px; color: var(--muted); }
.cp-readmore .icon { transition: transform var(--dur-fast) var(--ease-out); }
.cp-readmore[aria-expanded="true"] .icon { transform: rotate(180deg); }

/* Key facts strip (od-stat cells) */
.cp-facts-wrap { margin-top: var(--sp-2); min-width: 0; }
.cp-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
}
.cp-fact { padding: var(--sp-3) var(--sp-4); align-content: start; }
.cp-fact + .cp-fact { border-left: 1px solid var(--border); }
.cp-fact dt, .cp-fact__label { font-size: var(--fs-12); color: var(--muted); line-height: 1.35; }
.cp-fact__value { font-size: var(--fs-20); font-weight: var(--fw-semibold); letter-spacing: -0.02em; line-height: 1.25; color: var(--text); overflow-wrap: anywhere; }
.cp-fact__value.is-rise { color: var(--rise-text); }
.cp-fact__value--text { font-family: var(--font-sans); letter-spacing: -0.01em; }
.cp-fact__sub { font-size: var(--fs-12); color: var(--muted); line-height: 1.35; }
.cp-fact .skeleton + .skeleton { margin-top: var(--sp-2); }

.cp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }

/* How this list is ranked */
.cp-method { display: grid; gap: var(--sp-2); padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); min-width: 0; }
.cp-method__title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.cp-method__title .icon { color: var(--muted); }
.cp-method__line { font-size: var(--fs-14); color: var(--muted); max-width: 72ch; }
.cp-method__w { color: var(--text); font-weight: var(--fw-semibold); white-space: nowrap; }
.cp-method__sep { color: var(--faint); margin: 0 2px; }
.cp-details > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 2px; margin-left: -2px;
  font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--muted); cursor: pointer; border-radius: var(--r-control);
}
.cp-details > summary::-webkit-details-marker { display: none; }
.cp-details > summary .icon { transition: transform var(--dur-fast) var(--ease-out); }
.cp-details[open] > summary .icon { transform: rotate(180deg); }
.cp-details ul { margin: var(--sp-1) 0 var(--sp-1); padding-left: 18px; display: grid; gap: 6px; font-size: var(--fs-13); color: var(--muted); max-width: 72ch; }
.cp-details li::marker { color: var(--faint); }
.cp-topics { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sp-2); margin-top: var(--sp-1); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.cp-topics__label { font-size: var(--fs-12); color: var(--muted); margin-right: 2px; }

/* Sections */
.cp-section { min-width: 0; }
.cp-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--sp-3); }
.cp-h2 { font-size: var(--fs-20); letter-spacing: -0.015em; }
.cp-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-13); color: var(--muted); }
.cp-sec-sub { margin: var(--sp-1) 0 var(--sp-3); font-size: var(--fs-14); color: var(--muted); max-width: 64ch; }
.cp-sec-link { margin-left: auto; font-size: var(--fs-13); color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }

/* "Show the N others" reveal */
.cp-more { display: flex; justify-content: center; margin-top: var(--sp-3); }
.cp-more-block { margin-top: var(--sp-2); }
/* (legacy) tools newcomers strip — no longer used: newcomers are a grid on every type */
.cp-nc-rail { --od-rail-pad: 0px; --od-gap: var(--sp-3); contain: inline-size; padding-block: 4px; margin-block: -4px; }
.cp-nc-item { display: flex; width: 300px; max-width: 85%; }
.cp-nc-item > .newcomer-card { flex: 1 1 auto; min-width: 0; }
.cp-nc-skel .skeleton-text { flex: 1 1 auto; }

/* Ranking footer */
.cp-list-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border);
  font-size: var(--fs-13); color: var(--muted);
}
.cp-list-foot p { max-width: 64ch; }
.cp-list-foot__ask { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-1); }
.cp-rel-grid { margin-top: var(--sp-3); }
.cp-list-foot .num { color: var(--text); }

/* Building / empty panels */
.cp-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.cp-panel__note {
  display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0 var(--sp-4) var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--border); font-size: var(--fs-14); color: var(--muted);
}
.cp-panel__note .icon { margin-top: 3px; }

/* Rail */
.cp-rail { display: grid; gap: var(--sp-4); align-content: start; min-width: 0; }
.rail-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--sp-4); min-width: 0; }
.rail-card__title { font-size: var(--fs-14); font-weight: var(--fw-semibold); margin-bottom: var(--sp-3); }
.rail-card p { font-size: var(--fs-13); color: var(--muted); }
.cp-glance__hint { margin-top: 6px; }
.cp-weights { margin-top: var(--sp-4); }
.cp-weights__label { font-size: var(--fs-12); color: var(--muted); margin-bottom: 6px; }
.cp-weights__bar { display: flex; gap: 2px; height: 8px; border-radius: var(--r-chip); overflow: hidden; }
.cp-weights__seg { display: block; flex-grow: 0; flex-shrink: 1; min-width: 0; }
.cp-weights__seg--health, .cp-swatch--health { background: var(--border-strong); }
.cp-weights__seg--momentum, .cp-swatch--momentum { background: var(--rise-soft); box-shadow: inset 0 0 0 1px var(--rise-line); }
.cp-weights__legend { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--sp-3); font-size: var(--fs-12); color: var(--muted); }
.cp-weights__legend li { display: inline-flex; align-items: center; gap: 6px; }
.cp-weights__legend .num { color: var(--text); font-weight: var(--fw-semibold); }
.cp-swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.cp-glance__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.cp-glance__stats dt { font-size: var(--fs-12); color: var(--muted); }
.cp-glance__stats dd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-16); font-weight: var(--fw-semibold); }
.cp-glance__note { display: flex; gap: 6px; align-items: flex-start; margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.cp-glance__note .icon { margin-top: 2px; flex: none; }
.cp-digest__links { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-3); }
.cp-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Suggest-a-repo sheet */
.cp-suggest { display: grid; gap: var(--sp-4); }
.cp-suggest__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); }

/* Not found */
.cp-notfound { padding: var(--sp-12) 0; }
.cp-notfound h1.empty-state__title { font-size: var(--fs-24); }

/* Read more only below 768: paragraph 2 is always visible on larger screens */
@media (min-width: 768px) { .cp-readmore { display: none; } }
@media (max-width: 767.98px) { .cp-intro:not(.is-open) .cp-intro__more { display: none; } }

@media (max-width: 1023.98px) {
  .cp-layout { grid-template-columns: minmax(0, 1fr); }
  .cp-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .cp-page { padding-top: var(--sp-4); }
  .cp-layout { margin-top: var(--sp-4); gap: var(--sp-6); }
  .cp-main, .cp-content { gap: var(--sp-6); }
  .cp-title { font-size: var(--fs-24); letter-spacing: -0.02em; }
  .cp-lead { font-size: var(--fs-16); }
  .cp-intro__more { font-size: var(--fs-14); }
  .cp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-fact { padding: var(--sp-3); }
  .cp-fact:nth-child(odd) { border-left: 0; }
  .cp-fact:nth-child(n+3) { border-top: 1px solid var(--border); }
  .cp-fact__value { font-size: var(--fs-16); }
  .cp-actions .btn { flex: 1 1 auto; }
  .cp-actions .btn:first-child { flex-basis: 100%; }
  .cp-h2 { font-size: var(--fs-16); }
  .cp-nc-rail { --od-rail-pad: var(--sp-4); margin-inline: calc(-1 * var(--sp-4)); }
  .cp-rail { grid-template-columns: minmax(0, 1fr); }
  .cp-suggest .input, .cp-suggest .textarea { font-size: var(--fs-16); }
  .crumbs a { display: inline-flex; align-items: center; min-height: 32px; }
  .cp-details > summary { min-height: 40px; }
}
@media (hover: hover) {
  .crumbs a:hover, .cp-sec-link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
  .cp-details > summary:hover, .cp-readmore:hover { color: var(--text); }
}