/* /components/: the core harness and the extensions (pages/components.html). Tokens come from g6.css. */
.cmp-counts { display: flex; flex-wrap: wrap; gap: 24px 48px; margin: 40px 0 0; }
.cmp-counts div { border-top: 2px solid var(--ink); padding-top: 10px; min-width: 9em; }
.cmp-counts dt { font-size: 15px; color: var(--graphite); }
.cmp-counts dd { margin: 4px 0 0; font-size: clamp(40px, 4.4vw, 60px); font-weight: 800; line-height: 1;
  font-variation-settings: "wdth" 70; }

.cmp-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.cmp { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 4px var(--gap); padding: 16px 0;
  border-bottom: 1px solid var(--rule); }
.cmp__name { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.cmp__title { margin: 0; font-size: 17px; font-weight: 650; line-height: 1.3; }
.cmp__meta code { font-size: 13px; }
.cmp__what { margin: 0; }
.cmp__meta { grid-column: 2; margin: 0; font-size: 14px; color: var(--graphite); }

.cmp-family { border-top: 2px solid var(--ink); margin: 0 0 8px; }
.cmp-family summary { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0;
  cursor: pointer; list-style: none; }
.cmp-family summary::-webkit-details-marker { display: none; }
.cmp-family summary::after { content: "+"; font-size: 22px; line-height: 1; margin-left: 12px; }
.cmp-family[open] summary::after { content: "\2212"; }
.cmp-family summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.cmp-family__name { font-size: 22px; font-weight: 650; font-variation-settings: "wdth" 92; }
.cmp-family__n { margin-left: auto; color: var(--graphite); font-size: 15px; }
.cmp-family .cmp-list { border-top: 0; margin-bottom: 16px; }

/* the core harness in groups (the formal methods engines together), and the rows planned to join another entry */
.cmp-group + .cmp-group { margin-top: 40px; }
.cmp-group__title { margin: 0 0 6px; }
.cmp-group__lede { margin: 0 0 16px; max-width: 46rem; color: var(--graphite); }
.cmp-joined { grid-column: 2; margin: 8px 0 0; }
.cmp-joined .cmp-list { border-top: 1px solid var(--rule); margin: 4px 0 0; }
.cmp-joined .cmp { grid-template-columns: minmax(0, 1fr); padding: 10px 0; }
.cmp-joined .cmp__meta { grid-column: 1; }
.cmp-shared { margin: 0 0 4px; }

/* the capability extension harness: what a model cannot do alone, what it can achieve, and which parts do the work */
.caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 0 var(--gap);
  margin: 32px 0 0; }
.cap { border-top: 2px solid var(--ink); padding: 14px 0 24px; }
.cap .h3 { margin: 0 0 8px; }
.cap__gap { margin: 0; color: var(--graphite); }
.cap__achieve { margin: 8px 0 12px; }
.cap__meta { margin: 4px 0 0; font-size: 14px; color: var(--graphite); }
.cap__meta code { font-size: 13px; }
.cap__meta a { color: inherit; }
.cap-status { max-width: 46rem; margin: 8px 0 0; color: var(--graphite); }

@media (max-width: 720px) {
  .cmp { grid-template-columns: minmax(0, 1fr); }
  .cmp__meta, .cmp-joined { grid-column: 1; }
}