/* Styles for src/pages/training.js, lesson.js and guide.js. */

.training__progress { min-width: 240px; }
.training__lessons { margin-bottom: var(--s-3); }
.training__filters { margin-bottom: var(--s-2); }
.training__area { margin: var(--s-3) 0 var(--s-1); color: var(--c-text-gray); }

.lesson__objective { margin-top: var(--s-2); }
.lesson__steps { padding-left: 0; list-style: none; counter-reset: step; }
.lesson__step {
  counter-increment: step;
  position: relative;
  padding: var(--s-2) var(--s-3) var(--s-2) 40px;
  border: 1px solid var(--c-button-border);
  background: var(--c-window);
  margin-bottom: var(--s-1);
}
.lesson__step::before {
  content: counter(step);
  position: absolute;
  left: var(--s-2);
  top: var(--s-2);
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-xs);
  border: 1px solid var(--c-button-border);
  background: var(--c-control);
}
.lesson__step--done { border-color: var(--c-success); }
.lesson__step--done::before { content: "\2713"; color: var(--c-success); }
.lesson__check { display: flex; align-items: flex-start; gap: 4px; font-weight: 600; }
.lesson__detail { color: var(--c-text); margin-top: 2px; }
.lesson__try { display: inline-block; margin-top: 4px; }
.lesson__nav { display: flex; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-3); }

.guide__open { margin: var(--s-3) 0; }