/* Binary lesson progress, Odin-style: completed / total as a thin bar. */
.progress {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.progress__track {
  background-color: var(--progress-track-color, var(--color-subtle));
  block-size: var(--progress-height, 0.375rem);
  border-radius: 999px;
  overflow: hidden;
}

.progress__fill {
  background-color: var(--progress-fill-color, var(--color-positive));
  block-size: 100%;
  border-radius: inherit;
  min-inline-size: 0;
  transition: inline-size 400ms ease;
}

.progress__label {
  color: var(--color-subtle-dark);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.progress--done .progress__label {
  color: var(--color-positive);
}

/* Design copied from The Odin Project's ProgressCircle. Content sits on an
   opaque disc stacked over the always-rendered percent label; hovering the
   circle fades the disc out, revealing "N% пройдено". */
.progress-ring {
  block-size: 100%;
  display: inline-grid;
  /* One explicit full-size track: without it the auto track shrinks to the
     widest stacked item (the percent label) and the 100%-sized SVG collapses
     with it. */
  grid-template: 100% / 100%;
  inline-size: 100%;
  place-items: center;

  > * {
    grid-area: 1 / 1;
  }
}

.progress-ring__svg {
  block-size: 100%;
  fill: none;
  inline-size: 100%;
  /* The arc is thicker than the track and pokes past the viewBox edge —
     let it render instead of clipping (TOP does the same). */
  overflow: visible;
  transform: rotate(-90deg);
}

.progress-ring__track {
  stroke: var(--progress-ring-track-color, var(--color-subtle));
  stroke-width: 1.3;
}

.progress-ring__arc {
  stroke: var(--progress-ring-color, var(--color-positive));
  stroke-linecap: round;
  stroke-width: 1;
}

.progress-ring__percent {
  align-items: center;
  color: var(--color-subtle-dark);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
}

/* Opaque, slightly smaller than the ring (the gap TOP leaves between artwork
   and ring). Background must match the surface it sits on — override per
   context. */
.progress-ring__body {
  align-items: center;
  background-color: var(--progress-ring-body-bg, var(--color-bg));
  block-size: 84%;
  border-radius: 50%;
  display: inline-flex;
  inline-size: 84%;
  justify-content: center;
  transition: opacity 200ms ease;
}

.progress-ring:hover .progress-ring__body {
  opacity: 0;
}