/* Lesson engine styles — matches the Mehar's World palette (Languages = pink/rose). */

.ls-wrap { max-width: 860px; margin: 0 auto; padding: 26px clamp(14px,3vw,36px) 130px; }

.ls-head { text-align: center; margin-bottom: 14px; }
.ls-back {
  display: inline-block; border: none; background: rgba(255,255,255,.85); cursor: pointer;
  font-family: 'Nunito',sans-serif; font-weight: 900; font-size: 13px; color: #b8336a;
  border-radius: 999px; padding: 10px 18px; min-height: 44px; margin-bottom: 12px;
}
.ls-title { font-family: 'Fredoka',sans-serif; font-weight: 700; font-size: clamp(28px,4vw,40px); color: #fff; text-shadow: 0 3px 18px rgba(40,20,80,.28); }
.ls-sub { font-weight: 800; font-size: 14px; color: rgba(255,255,255,.9); margin-bottom: 12px; }
.ls-bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,.45); overflow: hidden; max-width: 420px; margin: 0 auto; }
.ls-bar-in { height: 100%; background: linear-gradient(90deg,#ff8fc0,#ffd166); border-radius: 999px; transition: width .45s ease; }
.ls-prog { font-size: 12.5px; font-weight: 800; color: rgba(255,255,255,.92); margin-top: 6px; }

.ls-steps { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin: 16px 0 14px; }
.ls-step {
  width: 38px; height: 38px; border-radius: 12px; border: none; cursor: pointer;
  font-family: 'Nunito',sans-serif; font-weight: 900; font-size: 13px;
  background: rgba(255,255,255,.55); color: #8b6a86;
}
.ls-step.done   { background: #1f7a4d; color: #fff; }
.ls-step.here   { background: #fff; color: #b8336a; box-shadow: 0 0 0 3px rgba(255,255,255,.55); }
.ls-step.open   { background: rgba(255,255,255,.85); color: #b8336a; }
.ls-step.locked { opacity: .4; cursor: not-allowed; }

.ls-card { background: #fff; border-radius: 26px; box-shadow: 0 20px 50px rgba(80,30,70,.22); padding: 28px clamp(18px,3vw,34px); }
.ls-h2 { font-family: 'Fredoka',sans-serif; font-weight: 700; font-size: clamp(21px,3vw,27px); color: #b8336a; margin: 0 0 14px; }
.ls-body { font-size: 15.5px; line-height: 1.65; color: #2b2440; }
.ls-p { margin: 0 0 13px; }
.ls-label { font-size: 11.5px; font-weight: 900; letter-spacing: 2px; color: #8b90b8; margin: 4px 0 8px; }

.ls-poem {
  background: #f6f0ff; border-left: 5px solid #8a5cd6; border-radius: 14px;
  padding: 18px 22px; font-style: italic; color: #3a1a5c; line-height: 1.95; margin: 6px 0 14px;
}

.ls-vocab { background: #fff4e0; border-radius: 16px; padding: 14px 18px; margin: 12px 0; }
.ls-vocab-tag { font-size: 11px; font-weight: 900; letter-spacing: 2px; color: #c9760a; margin-bottom: 8px; }
.ls-vrow { font-size: 14.5px; margin-bottom: 5px; color: #4a3520; }

.ls-trick { background: #fff9db; border-radius: 16px; padding: 14px 18px; margin: 12px 0; font-size: 14.5px; color: #4a3f10; }
.ls-trick-tag { display: block; font-size: 11px; font-weight: 900; letter-spacing: 2px; color: #b8860b; margin-bottom: 6px; }

.ls-model { background: #eaf6ef; border-radius: 16px; padding: 16px 20px; font-size: 14.8px; line-height: 1.7; color: #1c3a2a; }
.ls-model-ans { background: #eaf6ef; border-radius: 12px; padding: 13px 16px; font-size: 14.5px; line-height: 1.65; color: #1c3a2a; margin-bottom: 10px; }

.ls-kv { border-radius: 16px; overflow: hidden; border: 2px solid #f0e8fb; margin: 8px 0 14px; }
.ls-kvrow { display: flex; gap: 0; border-bottom: 1px solid #f0e8fb; }
.ls-kvrow:last-child { border-bottom: none; }
.ls-kvk { flex: 0 0 34%; background: #f6f0ff; padding: 11px 14px; font-weight: 900; font-size: 13.5px; color: #6b2fae; }
.ls-kvv { flex: 1; padding: 11px 14px; font-size: 14.5px; }

.ls-fig { margin: 12px 0; text-align: center; }
.ls-fig img { max-width: 100%; border-radius: 14px; }
.ls-fig figcaption { font-size: 12.5px; font-weight: 700; color: #8b90b8; margin-top: 6px; }

/* ---- understand check ---- */
.ls-check { margin-top: 22px; padding-top: 20px; border-top: 2px dashed #f0e0ea; text-align: center; }
.ls-check-q { font-family: 'Fredoka',sans-serif; font-weight: 600; font-size: 19px; color: #2b2440; margin-bottom: 14px; }
.ls-check-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ls-yes, .ls-no, .ls-submit, .ls-pdf {
  border: none; cursor: pointer; min-height: 46px; padding: 12px 22px; border-radius: 999px;
  font-family: 'Nunito',sans-serif; font-weight: 900; font-size: 14.5px;
}
.ls-yes { background: #1f7a4d; color: #fff; }
.ls-no  { background: #f0edf5; color: #6a5fa8; }
.ls-submit { background: #b8336a; color: #fff; margin-top: 8px; width: 100%; }
.ls-check.reread   { border-top-color: #ffd9a8; }
.ls-check.passed   { border-top-color: #b6e0cb; }
.ls-check.explained{ border-top-color: #cdd4ff; }
.ls-reread-msg { font-size: 15.5px; font-weight: 700; color: #8a5a00; background: #fff8e8; border-radius: 14px; padding: 14px 18px; margin-bottom: 14px; }
.ls-pass-msg   { font-size: 16.5px; font-weight: 900; color: #1f7a4d; margin-bottom: 14px; }

/* ---- quiz ---- */
.ls-quiz { margin-top: 22px; padding-top: 20px; border-top: 2px dashed #f0e0ea; }
.ls-quiz-head { font-family: 'Fredoka',sans-serif; font-weight: 600; font-size: 19px; color: #b8336a; margin-bottom: 14px; }
.ls-q { background: #fbf7fd; border-radius: 16px; padding: 16px 18px; margin-bottom: 12px; }
.ls-qtag { font-size: 10.5px; font-weight: 900; letter-spacing: 1.5px; color: #a39bbd; text-transform: uppercase; margin-bottom: 6px; }
.ls-qtext { font-weight: 900; font-size: 15px; color: #2b2440; margin-bottom: 11px; line-height: 1.5; }
.ls-opts { display: flex; flex-direction: column; gap: 8px; }
.ls-opt { display: flex; align-items: center; gap: 10px; background: #fff; border: 2px solid #f0edf5; border-radius: 12px; padding: 11px 14px; cursor: pointer; font-size: 14.5px; min-height: 44px; }
.ls-opt:hover { border-color: #ffc2da; }
.ls-opt input { width: 18px; height: 18px; accent-color: #b8336a; flex: none; }
.ls-text, .ls-area {
  width: 100%; border: 2px solid #f0edf5; border-radius: 12px; padding: 12px 14px;
  font-family: 'Nunito',sans-serif; font-size: 14.5px; min-height: 46px; resize: vertical;
}
.ls-text:focus, .ls-area:focus { outline: none; border-color: #ffc2da; }
.ls-reveal { margin-top: 9px; border: none; background: #f0edf5; color: #6a5fa8; border-radius: 999px; padding: 9px 16px; font-weight: 900; font-size: 13px; cursor: pointer; min-height: 40px; }
.ls-selfbox { margin-top: 10px; }
.ls-selfask { font-size: 13.5px; font-weight: 800; color: #6a5fa8; margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ls-selfask button { border: none; border-radius: 999px; padding: 8px 14px; font-weight: 900; font-size: 13px; cursor: pointer; min-height: 38px; }
.ls-selfyes { background: #1f7a4d; color: #fff; }
.ls-selfno  { background: #f7dede; color: #a3342a; }
.ls-ok  { color: #1f7a4d; font-weight: 900; }
.ls-bad { color: #a3342a; font-weight: 900; }
.ls-fb { margin-top: 9px; font-weight: 900; font-size: 13.5px; border-radius: 10px; padding: 8px 12px; }
.ls-fb.good { background: #eaf6ef; color: #1f7a4d; }
.ls-fb.bad  { background: #fbe9ee; color: #a3342a; }

.ls-match { display: flex; flex-direction: column; gap: 7px; }
.ls-mrow { display: flex; align-items: center; gap: 10px; background: #fff; border: 2px solid #f0edf5; border-radius: 12px; padding: 10px 14px; font-size: 14.2px; }
.ls-mrow.done { background: #eaf6ef; border-color: #cbe8d8; }
.ls-marrow { color: #cdd4ff; font-weight: 900; }
.ls-mblank { color: #cdd4ff; font-weight: 900; }

.ls-expl { text-align: left; }
.ls-ex { background: #f7f9ff; border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; }
.ls-ex-q { font-weight: 900; font-size: 14.5px; color: #2b2440; margin-bottom: 6px; }
.ls-ex-a { font-size: 14.2px; color: #1f4e8c; margin-bottom: 6px; }
.ls-ex-w { font-size: 13.8px; color: #5a6a86; line-height: 1.6; }

.ls-done { text-align: center; }
.ls-done-emoji { font-size: 54px; margin-bottom: 8px; }

.ls-foot { margin-top: 18px; text-align: center; }
.ls-pdf { background: rgba(255,255,255,.9); color: #b8336a; }
.ls-note { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.85); margin-top: 12px; line-height: 1.55; max-width: 640px; margin-left: auto; margin-right: auto; }

@media (max-width: 620px) {
  .ls-kvrow { flex-direction: column; }
  .ls-kvk { flex: none; }
  .ls-check-btns { flex-direction: column; }
  .ls-yes, .ls-no, .ls-pdf { width: 100%; }
}

/* ---- PDF export: printing the lesson produces a clean document ---- */
@media print {
  body { background: #fff !important; }
  .ls-steps, .ls-check, .ls-quiz, .ls-foot, .ls-back, .ls-bar, .ls-prog,
  nav, .ls-reveal, .ls-submit { display: none !important; }
  .ls-wrap { max-width: none; padding: 0; }
  .ls-card { box-shadow: none; border-radius: 0; padding: 0 0 18px; page-break-inside: avoid; }
  .ls-title { color: #0D5C77 !important; text-shadow: none !important; }
  .ls-sub { color: #444 !important; }
  .ls-h2 { color: #6B2FAE !important; page-break-after: avoid; }
  .ls-poem, .ls-vocab, .ls-trick, .ls-model, .ls-kv { page-break-inside: avoid; }
}