/* Level complete: earned stars and the three star criteria. */

.result-stars {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}

.result-star {
  color: var(--line-strong);
}

.result-star.earned {
  color: var(--yellow-strong);
}

.result-star svg {
  width: 36px;
  height: 36px;
  fill: currentColor;
  stroke-width: 1.2;
}

.star-criteria {
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.star-criteria li {
  min-height: 48px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--muted);
}

.star-criteria svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--line-strong);
  fill: currentColor;
  stroke-width: 1.2;
}

.star-criteria li.earned {
  color: var(--ink);
}

.star-criteria li.earned svg {
  color: var(--yellow-strong);
}

/* Criteria and the numbers below read as one table. */
.star-criteria:has(+ .result-strip) {
  margin-bottom: 0;
}

.star-criteria + .result-strip {
  border-top: 0;
}