/* Same brand gradient as this benchmark's card on the hub. */
.hero {
  background: var(--gradient-white-to-ice-blue);
  border-bottom: 1px solid var(--grey-300);
}
@media (max-width: 640px) {
  .hero-inner {
    padding: 24px 0 20px;
  }
}
.result-row:hover,
.cost-row:hover,
.dbar-row:hover,
.pie-item:hover {
  background: var(--grey-100);
}

.board-pad {
  padding: 24px;
}
.board + .failure-cards {
  margin-top: 18px;
}

.tube-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 20px;
  /* Reserve room for the rail's hanging labels. */
  padding-bottom: 14px;
}
/* A <button> doesn't inherit the page's type. */
.tube-controls .btn {
  font-family: inherit;
}
.tube-controls .btn-primary {
  min-width: 92px;
}
/* The box is the dot row only, so centring lines the rail up with the button. */
.stepper {
  display: flex;
  flex: 1 1 320px;
  min-width: 0;
  height: 14px;
}
.step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 14px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
/* Segment to the next node; the z-index keeps it under the dots. */
.step::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 6px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--grey-200);
}
.step:last-child::after {
  display: none;
}
.step.done::after {
  background: var(--sky-blue-200);
}
.step .dot {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--grey-300);
  background: var(--white);
  transition: 0.15s;
}
.step .lbl {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: var(--text-12);
  color: var(--grey-500);
}
.step:hover .dot {
  border-color: var(--sky-blue-200);
}
.step:hover .lbl {
  color: var(--midnight-blue);
}
.step.done .dot {
  background: var(--sky-blue-200);
  border-color: var(--sky-blue-200);
}
.step.now .dot {
  background: var(--bio-blue-200);
  border-color: var(--bio-blue-200);
  box-shadow: 0 0 0 4px var(--ice-blue);
}
.step.now .lbl {
  color: var(--midnight-blue);
  font-weight: 600;
}
.lanes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-template-rows: auto auto auto;
  column-gap: 18px;
  row-gap: 0;
  margin-top: 18px;
}
.lane {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  min-width: 0;
  padding: 18px 18px 20px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  background: var(--white);
}
.lane-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.lane-head h4 {
  margin: 0;
  font-size: var(--text-18);
  font-weight: 500;
  color: var(--midnight-blue);
}
.lane-head h4::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: 1px;
}
.lane.miss .lane-head h4::before { background: var(--purple-500); }
.lane.hit .lane-head h4::before { background: var(--green-500); }
.lane svg text {
  font-family: var(--font-primary);
  fill: var(--midnight-blue);
}
.lane svg .mono {
  font-family: var(--font-primary);
  font-variant-numeric: tabular-nums;
}
.story {
  margin-top: 4px;
  min-height: 7.5em;
}
.story p {
  margin: 0;
  font-size: var(--text-14);
  line-height: 1.65;
  color: var(--marine);
}
.story .stepname {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-primary);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-12);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-500);
}
.story .k {
  font-weight: 600;
  color: var(--midnight-blue);
}
/* Parts start hidden; the lane's data-step reveals them. */
.lane .unknown, .lane .mark, .lane .tool, .lane .nick, .lane .insert,
.lane .verdict, .lane .host, .lane .glow, .lane .tcf,
.lane .inner, .lane .sitelabel {
  transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lane .mark, .lane .tool, .lane .nick, .lane .insert,
.lane .verdict, .lane .glow {
  opacity: 0;
}
/* data-step: 0 start, 1 grow, 2 cut, 3 ligate, 4 result. */
.lane:not([data-step="0"]) .unknown { opacity: 0; }
.lane:not([data-step="0"]) .mark { opacity: 1; }
.lane[data-step="2"] .tool { opacity: 1; }
.lane.miss:is([data-step="2"], [data-step="3"]) .nick { opacity: 1; }
.lane.hit:is([data-step="2"], [data-step="3"], [data-step="4"]) .tcf { transform: translateY(-52px); }
.lane.hit:is([data-step="3"], [data-step="4"]) .tcf { opacity: 0; }
.lane .insert { transform: translateY(-130px); }
.lane.hit:is([data-step="3"], [data-step="4"]) .insert { opacity: 1; transform: none; }
.lane.miss[data-step="3"] .insert { opacity: 1; transform: translateY(-26px); animation: nudge 1.1s ease 1s 1; }
.lane.miss[data-step="4"] .insert { opacity: 0; transform: translateY(-26px); }
.lane:is([data-step="3"], [data-step="4"]) .sitelabel { opacity: 0; }
.lane[data-step="4"] .inner { opacity: 0; }
.lane[data-step="4"] .verdict { opacity: 1; }
.lane[data-step="4"] .glow { opacity: 0.3; }
/* The duplex that can't find a partner. */
@keyframes nudge {
  0%, 100% { transform: translate(0, -26px); }
  20% { transform: translate(-7px, -26px); }
  40% { transform: translate(7px, -26px); }
  60% { transform: translate(-4px, -26px); }
  80% { transform: translate(4px, -26px); }
}
@media (prefers-reduced-motion: reduce) {
  .lane * {
    transition-duration: 0.01ms !important;
    animation: none !important;
  }
}

/* Breakpoints below query this board's width, not the window's. */
.cost-board {
  container-type: inline-size;
}

.cost-row,
.cost-axis,
.cost-head {
  display: grid;
  grid-template-columns: minmax(140px, 176px) minmax(88px, 108px) 1fr 80px 96px;
  gap: 16px;
  align-items: center;
}
.cost-row {
  padding: 12px 0;
  border-top: 1px solid var(--grey-200);
}
.cost-gridline {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 1px;
  background: var(--grey-300);
  transform: translateX(-50%);
}
.cost-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 14px;
  background: var(--bio-blue-100);
  border-radius: var(--radius-bar);
}
.cost-axis-track {
  grid-column: 3;
  container-type: inline-size;
  position: relative;
  height: 30px;
  border-top: 1px solid var(--grey-300);
}
/* Under 200px every other tick label goes. */
@container (max-width: 200px) {
  .cost-axis-track span:nth-child(even) {
    display: none;
  }
}
@container (max-width: 720px) {
  .cost-row,
  .cost-axis,
  .cost-head {
    grid-template-columns: minmax(104px, 1fr) 1fr 72px 70px;
  }

  /* The head has a cell per body cell, so its Provider label goes too. */
  .cost-provider,
  .cost-head span:nth-child(2) {
    display: none;
  }

  .cost-axis-track {
    grid-column: 2;
  }
}
/* Under 440px the bar and axis go; the row is model, cost, score. */
@container (max-width: 440px) {
  .cost-head,
  .cost-row,
  .cost-axis {
    grid-template-columns: minmax(0, 1fr) 70px 58px;
    gap: 4px 10px;
  }

  .cost-head span:nth-child(3) {
    display: none;
  }

  .cost-row {
    padding: 10px 0;
  }

  .cost-name {
    white-space: normal;
    font-size: var(--text-12);
    line-height: 1.35;
  }

  .cost-score {
    padding-right: 0;
  }

  .cost-track,
  .cost-axis {
    display: none;
  }
}
@media (max-width: 680px) {
  .board-pad {
    padding: 16px;
  }
}

.task-detail .tube-controls,
.task-detail .lanes {
  margin-top: 0;
}
.task-detail .tube-controls {
  padding-bottom: 30px;
}
/* The detail pane's h4 style shouldn't reach the run titles. */
.task-detail .lane-head h4 {
  margin: 0;
  font-size: var(--text-18);
  font-weight: 500;
  text-transform: none;
  color: var(--midnight-blue);
}
.cd-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.cd-row {
  display: grid;
  /* The blocks shrink to 280px before the sentence drops below 190px. */
  grid-template-columns: 96px minmax(280px, 480px) minmax(190px, 1fr) 20px;
  align-items: center;
  column-gap: 22px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: var(--text-14);
  color: var(--midnight-blue);
}
.cd-row.control {
  background: var(--grey-100);
}
.cd-name {
  font-size: var(--text-16);
}
.cd-row.control .cd-name {
  font-weight: 600;
}
.cd-blocks {
  display: flex;
  gap: 6px;
  min-width: 0;
}
.cd-b {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 3px;
  font-size: var(--text-14);
  color: var(--midnight-blue);
  white-space: nowrap;
  overflow: hidden;
}
.cd-b.ren {
  flex: 0 1 140px;
  min-width: 56px;
  background: var(--sky-blue-200);
  color: var(--white);
}
.cd-b.fly {
  flex: 0 1 148px;
  min-width: 56px;
  background: var(--brown-300);
}
.cd-b.cod {
  flex: 0 0 56px;
  font-family: var(--font-primary);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-12);
}
.cd-b.ucc { background: var(--grey-300); }
.cd-b.gau { background: var(--grey-200); }
.cd-b.uga { background: var(--midnight-blue); color: var(--white); }
.cd-b.uaa { background: var(--brown-400); }
.cd-b.ext1 { flex-basis: 26px; background: var(--powder-blue); }
.cd-b.ext2 { flex-basis: 38px; background: var(--powder-blue); }
.cd-says {
  line-height: 1.4;
}
.cd-mark {
  font-size: var(--text-20);
  line-height: 1;
  text-align: center;
}
.cd-mark.ok { color: var(--green-500); }
.cd-mark.no { color: var(--brown-400); }
.cd-result {
  margin-top: 22px;
  padding: 0 14px;
}
.cd-says .nb {
  white-space: nowrap;
}
.cd-result-label {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-primary);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-12);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-500);
}
.cd-result p {
  margin: 0;
  max-width: 84ch;
  font-size: var(--text-14);
  line-height: 1.65;
  color: var(--marine);
}
@media (max-width: 760px) {
  .cd-row {
    grid-template-columns: minmax(0, 1fr) 20px;
    row-gap: 8px;
    padding: 12px;
  }

  .cd-result {
    padding: 0 12px;
  }

  .cd-blocks,
  .cd-says {
    grid-column: 1 / -1;
  }

  .cd-mark {
    grid-column: 2;
    grid-row: 1;
  }

  .cd-b.cod { flex-basis: 40px; }
  .cd-b.ext1 { flex-basis: 22px; }
  .cd-b.ext2 { flex-basis: 30px; }
}