ruststream 0.7.5

/* The benchmark charts. Every color is one of the site's variables: the runtime in the accent,
   the two loops it is compared with in grays from the same Infima ramp, the raw client the more
   recessive of the two in each theme. */

.chart {
  --lane-height: 14px;
  container-type: inline-size;
  margin: 0 0 var(--ifm-spacing-vertical);
}

.raw {
  --lane: var(--ifm-color-gray-600);
}

.adapter {
  --lane: var(--ifm-color-gray-800);
}

.framework {
  --lane: var(--rs-accent);
}

:global([data-theme='dark']) .raw {
  --lane: var(--ifm-color-gray-700);
}

:global([data-theme='dark']) .adapter {
  --lane: var(--ifm-color-gray-500);
}

.caption {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.25rem;
}

.caption span {
  font-size: 0.85rem;
  color: var(--rs-muted);
}

/* A tab per crate: fourteen names wrap onto a second line rather than scroll out of sight. */
.tabs {
  flex-wrap: wrap;
  row-gap: 0.25rem;
}

.results :global(.tabs__item) {
  padding: 0.4rem 0.75rem;
  font-size: 0.9rem;
}

.results .chart + .chart {
  margin-top: 2rem;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  font-size: 0.8rem;
  color: var(--rs-muted);
}

.legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.swatch {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 4px;
  border-radius: 2px;
  background: var(--lane);
}

.keyRange,
.keyDot,
.keyMedian,
.keyBand {
  position: relative;
  display: inline-block;
  flex: none;
  width: 22px;
  height: var(--lane-height);
}

.keyRange::before,
.keyMedian::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 4px;
  border-radius: 2px;
  background: var(--lane);
}

.keyMedian::after {
  content: '';
  position: absolute;
  left: 10px;
  top: 3px;
  width: 2px;
  height: 8px;
  background: var(--ifm-background-color);
}

.keyDot::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lane);
}

.keyDot.hollow::before {
  background: var(--ifm-background-color);
  border: 2px solid var(--lane);
}

.keyBand {
  border-radius: 2px;
  background: color-mix(in srgb, var(--rs-muted) 16%, transparent);
}

.panel,
.codePanel {
  display: grid;
  /* The rows share the panel's columns, so every plot of a panel has the same width and the
     axis above reads for all of them. */
  grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr) max-content;
  column-gap: 1rem;
  margin-bottom: 1.5rem;
}

.codePanel {
  grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr) minmax(0, 1fr);
}

.panelHead {
  grid-column: 1 / -1;
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
  color: var(--rs-muted);
}

/* One scenario: its name, the plot of its loops, and the verdicts the document states. */
.row {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-areas: 'name plot verdicts';
  align-items: center;
  padding: 0.3rem 0.25rem;
  border-radius: 4px;
}

.row:hover,
.row:focus,
.codeRow:hover,
.codeRow:focus {
  background: var(--rs-raised);
}

.row:focus:not(:focus-visible),
.codeRow:focus:not(:focus-visible) {
  outline: none;
}

.axisRow,
.axisRow:hover {
  padding-bottom: 0;
  background: none;
}

.axisRow .ticks {
  grid-area: plot;
}

.name {
  grid-area: name;
  font-size: 0.85rem;
  line-height: 1.3;
}

.plot {
  grid-area: plot;
  position: relative;
}

.gridline,
.zero {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rs-border);
}

.zero {
  background: var(--rs-muted);
}

.lane {
  position: relative;
  height: var(--lane-height);
}

/* The spread the runtime's verdict rests on, centred on the raw client, behind every lane. */
.band {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 2px;
  background: color-mix(in srgb, var(--rs-muted) 16%, transparent);
}

.range {
  position: absolute;
  top: 5px;
  height: 4px;
  min-width: 2px;
  border-radius: 2px;
  background: var(--lane);
}

/* The median round is a notch cut into the range in the surface color. */
.median {
  position: absolute;
  top: 3px;
  width: 2px;
  height: 8px;
  transform: translateX(-1px);
  background: var(--ifm-background-color);
}

.dot {
  position: absolute;
  top: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translateX(-5px);
  background: var(--lane);
  box-shadow: 0 0 0 2px var(--ifm-background-color);
}

.dot.hollow {
  background: var(--ifm-background-color);
  border: 2px solid var(--lane);
}

/* The verdicts sit level with their lanes: the raw client, the first lane, has none. */
.verdicts {
  grid-area: verdicts;
  align-self: start;
  list-style: none;
  margin: 0;
  padding: calc(var(--lane-height)) 0 0;
  font-size: 0.75rem;
  line-height: var(--lane-height);
}

.verdicts li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: var(--lane-height);
  margin: 0;
  white-space: nowrap;
}

.ticks {
  position: relative;
  height: 1.2rem;
  font-size: 0.7rem;
  color: var(--rs-muted);
  font-variant-numeric: tabular-nums;
}

.tick {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}

.tick:first-child {
  transform: none;
}

.tick:last-child {
  transform: translateX(-100%);
}

/* The readout of a row on hover and on focus. Every value in it is in the table as well. */
.tooltip {
  display: none;
  position: absolute;
  z-index: 2;
  top: calc(100% - 0.25rem);
  left: min(14rem, 30%);
  min-width: 16rem;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rs-border);
  border-radius: 6px;
  background: var(--ifm-background-color);
  box-shadow: var(--rs-shadow);
  font-size: 0.8rem;
  pointer-events: none;
}

.row:hover .tooltip,
.row:focus .tooltip,
.codeRow:hover .tooltip,
.codeRow:focus .tooltip {
  display: block;
}

.tooltip div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.tooltip dt {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 400;
  color: var(--rs-muted);
}

.tooltip dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* The cost of the code: one row per scenario, a bar per measure, each measure on its own axis. */
.codeRow {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  padding: 0.3rem 0.25rem;
  border-radius: 4px;
}

.codeRow .name {
  grid-area: auto;
  grid-column: 1;
}

.codeRow.axisRow > :first-child {
  grid-column: 2;
}

.measure {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.5rem;
  column-gap: 0.5rem;
  align-items: center;
}

.measureName {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
}

.track {
  position: relative;
  height: 10px;
}

.bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 0 4px 4px 0;
  background: var(--rs-accent);
}

.value {
  font-size: 0.8rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table {
  margin-top: 0.5rem;
}

.table summary {
  cursor: pointer;
  color: var(--ifm-link-color);
}

/* A narrow column stacks each row: the name, then the plot, then what it shows. */
@container (max-width: 560px) {
  .panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .row {
    grid-template-areas: 'name' 'plot' 'verdicts';
    row-gap: 0.25rem;
  }

  .verdicts {
    padding-top: 0;
  }

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

  .codeRow {
    row-gap: 0.25rem;
  }

  .codeRow .name {
    grid-column: 1 / -1;
  }

  .codeRow.axisRow > :first-child {
    grid-column: 1;
  }

  .measure {
    grid-template-columns: minmax(0, 1fr) 3.5rem;
  }

  .tooltip {
    left: 0.25rem;
    right: 0.25rem;
    min-width: 0;
  }
}