/* Globals: how contributions to a procedure entry combine */

:where(.scene-solver) .solver-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

:where(.scene-solver) .solver-table {
  min-width: 760px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

:where(.scene-solver) .solver-table th[scope="row"] {
  color: var(--primary);
  background: var(--surface);
  font-size: 0.88rem;
  white-space: nowrap;
}

:where(.scene-solver) .solver-table td {
  color: var(--text);
}

:where(.scene-solver) .solver-table td code {
  color: var(--text);
  background: transparent;
  font-size: 0.9rem;
  font-weight: 600;
}

:where(.scene-solver) .solver-table .c1,
:where(.scene-solver) .solver-table .c2,
:where(.scene-solver) .solver-table .c3,
:where(.scene-solver) .solver-table .c4 {
  text-align: center;
}

/* The column of the step being played gets a soft highlight; every value stays readable. */
:where(.scene-solver) .solver-table thead th small {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 400;
  white-space: nowrap;
}

:where(.scene-solver) .solver-table thead th small code {
  background: transparent;
  font-size: 0.72rem;
}

:where(.scene-solver) .solver-table th.c1 {
  animation: column-now 12s ease infinite backwards;
}

:where(.scene-solver) .solver-table th.c2 {
  animation: column-now 12s ease infinite backwards;
  animation-delay: 3s;
}

:where(.scene-solver) .solver-table th.c3 {
  animation: column-now 12s ease infinite backwards;
  animation-delay: 6s;
}

:where(.scene-solver) .solver-table th.c4 {
  animation: column-now 12s ease infinite backwards;
  animation-delay: 9s;
}

:where(.scene-solver) .solver-table td.c1 {
  animation: column-now 12s ease infinite backwards;
}

:where(.scene-solver) .solver-table td.c2 {
  animation: column-now 12s ease infinite backwards;
  animation-delay: 3s;
}

:where(.scene-solver) .solver-table td.c3 {
  animation: column-now 12s ease infinite backwards;
  animation-delay: 6s;
}

:where(.scene-solver) .solver-table td.c4 {
  animation: column-now 12s ease infinite backwards;
  animation-delay: 9s;
}

@keyframes column-now {
  0% {
    box-shadow: none;
  }
  2%,
  22% {
    box-shadow: inset 0 0 0 999px rgb(23 75 87 / 0.07);
  }
  27%,
  100% {
    box-shadow: none;
  }
}

:where(.scene-solver) .solver-table td.best {
  background: var(--success-soft);
}

:where(.scene-solver) .solver-table td.best code {
  color: var(--success);
}

:where(.scene-solver) .solver-table td.widened {
  background: var(--accent-soft);
}

:where(.scene-solver) .solver-table td.widened code {
  color: var(--accent-hover);
}

/* Values in the measurement tables are the content itself, not code inside prose. */
:where(.scene-solver) .solver-table td code {
  padding: 0;
  border: 0;
}