/* GpuLadderPanel: the quality section at the top of a statistics panel. */
.gpu-ladder {
  min-width: 28ch;
}

.gpu-ladder-fps {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: baseline;
}

.gpu-ladder-fps-value {
  font-size: var(--font-size-lg);
}

/* Two runs side by side, ruled off above and below. The status carries
   the gaps to both rules, so the divider between the runs reaches them.
   Items centre in the min-height (the divider stretches on its own). */
.gpu-ladder-status {
  display: flex;
  align-items: center;
  gap: 1ch;
  min-height: 1.4em;
  margin-top: var(--space-1);
  border-top: 1px solid var(--overlay-white-25);
  padding: var(--space-1) 0;
}

.gpu-ladder-divider {
  align-self: stretch;
  margin: calc(-1 * var(--space-1)) 0; /* through the padding, rule to rule */
  border-left: 1px solid var(--overlay-white-25);
}

/* A run: w1, w2, decision, w3 (or the wait), mark. Natural widths, but
   the slot itself is fixed so the divider between the two never moves. */
.gpu-ladder-run {
  display: inline-flex;
  gap: 1ch;
  min-width: 14ch;
  white-space: nowrap;
}

.gpu-ladder-run > span:empty {
  display: none;
}

.gpu-ladder-rungs {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gpu-ladder-rung {
  display: grid;
  grid-template-columns: 1em 2ch 1fr;
  /* One character, like the space it stands in for: the rungs read as a
     line of text, not as three columns held apart. */
  gap: 1ch;
}

/* Rungs this device does not have. */
.gpu-ladder-rung.skip {
  color: var(--overlay-white-50);
}

/* The rung under test while a move is checked. */
.gpu-ladder-rung.testing > .gpu-ladder-mark {
  color: var(--overlay-white-50);
}

.gpu-ladder-rung.ineffective {
  text-decoration: line-through;
}

.gpu-ladder-number {
  text-align: right;
}

/* The window being collected. */
.gpu-ladder-spinner {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  border: 2px solid var(--overlay-white-50);
  border-top-color: var(--color-text);
  border-radius: 50%;
  vertical-align: -0.1em;
  animation: spin 0.75s linear infinite;
}