/* The benchmarks page. It uses the tokens and components of styles.css, the
   research blocks that the front page had before, and adds the page's head,
   the text beside each task's picture and the list of what comes next. */

.bm-head {
  padding-block: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 40px);
}

.bm-head h1 {
  font-family: var(--font-content);
  font-weight: var(--heading-weight);
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.8rem);
  line-height: 1.15;
  margin-bottom: 18px;
}

/* The label benchmark is a section of its own here, right under its heading. */
.section-head + .tiny {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.research-split-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-content: start;
}

.bm-picts {
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}

.bench-table + .bench-table {
  margin-top: 8px;
}

.bm-remote {
  margin-top: clamp(28px, 4vw, 40px);
  color: var(--ink-2);
}

.bm-remote p {
  margin: 4px 0 10px;
}

.bm-sources {
  gap: 10px;
}

/* What the score of the order measures, beside an example. */
.bm-proxy {
  margin-top: clamp(28px, 4vw, 40px);
}

.bm-proxy .research-split-text p {
  margin: 0;
  color: var(--ink-2);
}

.bm-example-head {
  margin: 0;
  font-size: 14px;
  color: var(--ink);
}

.bm-example-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
}

.bm-example-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.bm-pick {
  font-size: 12px;
  font-weight: 600;
  padding: 0 7px;
  border-radius: 999px;
  white-space: nowrap;
}

/* The first question by each prompt: blue as the named methods of the plots, grey for the other. */
.bm-pick-next {
  color: var(--blue);
  background: var(--blue-wash);
}

.bm-pick-should {
  color: var(--ink-2);
  background: var(--surface-3);
}

/* What comes next: numbered, in the order that we would take them. */
.bm-next {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: next;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px clamp(20px, 3vw, 40px);
}

.bm-next li {
  counter-increment: next;
  padding-top: 12px;
  border-top: 2px solid var(--line-2);
}

.bm-next h3 {
  font-size: 1.05rem;
  font-weight: 600;
}

.bm-next h3::before {
  content: counter(next) '. ';
  color: var(--ink-3);
}

.bm-next p {
  margin-top: 6px;
  font-size: 15px;
  color: var(--ink-2);
}

@media (width <= 900px) {
  .bm-next {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 560px) {
  .bm-next {
    grid-template-columns: minmax(0, 1fr);
  }
}