/* Lesson progress — "Megjelölöm késznek" a lecke alján (progress.js).
 * A gomb a közös gombkészletből jön: .btn .btn-ink (rögzítő művelet), kész
 * állapotban .btn.is-done (zöld keretes megerősítés, shared/buttons.css).
 * Kész után egy kézzel rajzolt zöld pipa rajzolódik be a gomb mellé és a
 * sidebar aktuális lecke-sorába (.md-check, ~600 ms SVG stroke).
 */

.lesson-mark-done {
  margin: 2rem 0 1rem;
  padding: 1.1rem 1.5rem 1.2rem;
  border: 1px dashed rgba(0, 0, 0, 0.22);
  background: rgba(255, 255, 255, 0.32);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: flex-start;
}
.lesson-mark-done .md-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.lesson-mark-done .mark-done-btn.is-done { cursor: default; }
/* a kész gomb tiltott (disabled), de nem halványul: a .btn:disabled 50%-a itt nem kell */
.lesson-mark-done .mark-done-btn.is-done:disabled { opacity: 1; }

.mark-done-hint {
  margin: 0;
  font-family: 'Caveat', cursive;
  font-size: 1.08rem;
  line-height: 1.4;
  color: #6b6660;
}

/* ---- kézzel rajzolt pipa ---- */
.md-check {
  display: inline-block;
  width: 30px;
  height: 27px;
  overflow: visible;
  flex: none;
  visibility: hidden;          /* csak kész állapotban látszik */
}
.md-check.is-drawn { visibility: visible; }
.md-check path {
  fill: none;
  stroke: var(--green, #00823C);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.md-check-btn { transform: rotate(-4deg); }

/* a sidebar lecke-sorában (shell.js rendereli a sort, a pipát a progress.js teszi be) */
.md-check-side {
  width: 18px;
  height: 16px;
  margin-left: 0.3rem;
  vertical-align: -2px;
}
.md-check-side path { stroke-width: 3; }

@media (max-width: 720px) {
  .lesson-mark-done { padding: 1rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .md-check path { transition: none !important; stroke-dashoffset: 0 !important; }
}