/* Bonus · The Keeper's Judgement
   Reading system lives in ../lesson-reading.css. */

.bonus-badge {
  border-color: color-mix(in srgb, var(--moss) 55%, var(--line));
  background: color-mix(in srgb, var(--moss) 12%, transparent);
  color: var(--moss);
}

/* The ordered ladder — numbered, so the sequence reads as a sequence */

.ladder {
  counter-reset: rung;
}

.ladder li {
  position: relative;
  padding-left: 3.4rem;
  counter-increment: rung;
}

.ladder li::before {
  position: absolute;
  top: 1.1rem;
  left: 1.3rem;
  color: var(--jade);
  content: counter(rung);
  font: 800 0.95rem/1 var(--mono);
}

/* Anti-patterns read as warnings rather than steps */

.mistakes li {
  border-left-color: color-mix(in srgb, var(--moss) 40%, var(--line));
}

@media (max-width: 720px) {
  .ladder li {
    padding-left: 2.8rem;
  }

  .ladder li::before {
    left: 1rem;
  }
}