
/* ==========================================================
   V13 CONSTRUCTIVIST LESSON ENGINE
   ========================================================== */
.lesson-page{max-width:1100px}
.lesson-top{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:14px}
.lesson-top h1{margin:8px 0 3px}.lesson-top p{margin:0;color:var(--muted)}
.lesson-progress{min-width:145px;text-align:center;background:#f2f8f5;border-radius:14px;padding:13px}
.lesson-progress strong{display:block;font-size:28px;color:var(--green)}.lesson-progress span{font-size:12px;color:var(--muted)}
.lesson-phasebar{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin:14px 0}
.lesson-phasebar a{text-decoration:none;text-align:center;padding:9px 5px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--muted);pointer-events:none}
.lesson-phasebar a.done,.lesson-phasebar a.active{pointer-events:auto}
.lesson-phasebar a.active{border-color:#65aa90;background:#eef8f4;color:var(--green);box-shadow:0 6px 18px rgba(8,91,71,.08)}
.lesson-phasebar a.done{background:#f7fbf9;color:#277157}
.lesson-phasebar b{display:block;font-family:"Noto Naskh Arabic","Amiri",serif;font-size:18px}.lesson-phasebar span{font-size:10px}
.lesson-card{padding:28px;margin-top:15px}
.lesson-phase-title{display:flex;gap:14px;align-items:center}
.lesson-phase-title>span{width:62px;height:62px;display:grid;place-items:center;border-radius:17px;background:#eaf6f1;color:var(--green);font-family:"Noto Naskh Arabic","Amiri",serif;font-size:25px;font-weight:700}
.lesson-phase-title small{color:var(--muted)}.lesson-phase-title h2{margin:1px 0 0}
.lesson-prompt{font-size:20px;margin:22px 0 10px}
.lesson-content{background:#fafcfb;border:1px solid var(--line);border-radius:14px;padding:20px;font-size:19px;line-height:1.9}
.choice-grid{display:grid;gap:10px;margin:20px 0}
.choice-option{display:flex;gap:11px;align-items:center;border:1px solid var(--line);border-radius:13px;padding:14px 15px;cursor:pointer;background:#fff}
.choice-option:hover{border-color:#8ab9a9;background:#f9fcfb}.choice-option input{transform:scale(1.15)}
.lesson-textarea{margin:18px 0;line-height:1.6}
.lesson-actions{display:flex;justify-content:space-between;gap:10px;margin-top:18px}
.hint-stack{display:grid;gap:8px;margin-top:16px}.hint-box{border-left:4px solid #d5aa47;background:#fff9e9;border-radius:10px;padding:11px 13px}.hint-box b{display:block;margin-bottom:3px}.hint-box span{color:#6f603f}
.answer-review{margin:20px 0;padding:17px;border-radius:14px;background:#f7fbf9;border:1px solid #dcebe4}.answer-review small{color:var(--muted)}.answer-review>p{font-size:17px}
.explanation{border-top:1px solid #dcebe4;margin-top:12px;padding-top:12px}.explanation p{margin-bottom:0;color:#40584f}
.understand-check{margin:18px 0;padding:15px;border-radius:13px;background:#f5f8f7;color:#40584f}
.lesson-microstats{display:flex;gap:18px;justify-content:flex-end;margin-top:10px;color:var(--muted);font-size:12px}
.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{padding:12px;border-bottom:1px solid var(--line);text-align:left}.data-table th{font-size:12px;color:var(--muted)}
@media(max-width:900px){.lesson-phasebar{grid-template-columns:repeat(4,1fr)}}
@media(max-width:720px){
  .lesson-top{flex-direction:column;align-items:stretch}
  .lesson-progress{text-align:left}
  .lesson-phasebar{grid-template-columns:repeat(2,1fr)}
  .lesson-card{padding:18px}
  .lesson-actions{flex-direction:column}
  .lesson-actions .btn{width:100%}
}
