.ayubhaedu-il-lesson{
  --il-forest:#173f3a;
  --il-forest-2:#2f6f66;
  --il-sage:#eaf1ed;
  --il-sage-2:#f4f8f6;
  --il-coral:#d88b68;
  --il-coral-soft:#fbf0ea;
  --il-cream:#fbfaf7;
  --il-gold:#c6a15b;
  --il-border:#dfe5e2;
  --il-text:#25332f;
  --il-muted:#66736f;
  --il-white:#fff;
  display:grid;
  gap:24px;
  width:100%;
  min-width:0;
  color:var(--il-text);
}
.ayubhaedu-il-alert{padding:14px 16px;border:1px solid #d9b45b;border-radius:14px;background:#fff8e5;box-shadow:0 3px 12px rgba(33,45,41,.04)}
.ayubhaedu-il-progress{padding:15px 17px;border:1px solid var(--il-border);border-radius:14px;background:#fff;box-shadow:0 6px 22px rgba(23,63,58,.05)}
.ayubhaedu-il-progress>div:first-child{display:flex;justify-content:space-between;gap:12px;align-items:center}
.ayubhaedu-il-progress>div:first-child strong{color:var(--il-forest)}
.ayubhaedu-il-progress>div:first-child span{color:var(--il-muted);font-size:.9rem}
.ayubhaedu-il-progress-track{height:7px;background:#e9efec;border-radius:20px;margin-top:10px;overflow:hidden}
.ayubhaedu-il-progress-track span{display:block;height:100%;background:linear-gradient(90deg,var(--il-forest-2),var(--il-coral));transition:width .3s ease}

.ayubhaedu-il-block,.ayubhaedu-il-reading{border:1px solid var(--il-border);border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 9px 30px rgba(23,63,58,.055)}
.ayubhaedu-il-block>header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:18px 21px;border-bottom:1px solid var(--il-border);background:var(--il-cream)}
.ayubhaedu-il-block h2{margin:3px 0 0;font-size:clamp(1.18rem,2vw,1.42rem);line-height:1.25;color:var(--il-forest)}
.ayubhaedu-il-kicker{text-transform:uppercase;letter-spacing:.11em;font-size:.72rem;font-weight:800;color:var(--il-coral)}
.ayubhaedu-il-state{display:flex;gap:8px;align-items:center;font-size:.82rem;white-space:nowrap;color:var(--il-forest)}
.ayubhaedu-il-required{padding:5px 9px;border-radius:999px;border:1px solid #cad8d2;background:#fff;color:var(--il-forest);font-weight:700}
.ayubhaedu-il-body{padding:21px}
.ayubhaedu-il-reading{padding:24px 25px;background:#fff}
.ayubhaedu-il-reading>.ayubhaedu-il-kicker{display:block;margin-bottom:12px}
.ayubhaedu-il-reading :is(h2,h3,h4){color:var(--il-forest)}

/* Video-led lesson */
.ayubhaedu-il-video{margin:0}
/* v0.3.4: no branded wrapper here. Core ayuBhaEdu LMS owns lesson-video presentation. */
.ayubhaedu-il-video-media{display:block;width:100%;max-width:100%;aspect-ratio:16/9;border:0;background:#000}
.ayubhaedu-il-html5-video{height:auto;max-height:75vh;object-fit:contain}
.ayubhaedu-il-caption{font-size:.91rem;color:var(--il-muted);margin:13px 2px 0}
.ayubhaedu-il-transcript{margin-top:14px;border-top:1px solid var(--il-border);padding-top:11px}
.ayubhaedu-il-transcript summary{cursor:pointer;font-weight:700;color:var(--il-forest)}

/* Scroll transition between the video and lesson panels */
.ayubhaedu-il-flow-cue{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:2px;align-items:center;margin:-3px auto 0;max-width:760px;padding:13px 18px;border-radius:999px;background:var(--il-sage-2);border:1px solid #dce7e2;color:var(--il-forest);box-shadow:0 5px 18px rgba(23,63,58,.045)}
.ayubhaedu-il-flow-cue>span{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--il-forest);color:#fff;font-weight:800}
.ayubhaedu-il-flow-cue strong{font-size:.94rem;line-height:1.2}
.ayubhaedu-il-flow-cue small{color:var(--il-muted);font-size:.78rem;line-height:1.3}

/* Distinct but restrained panel types */
.ayubhaedu-il-quick_check{border-color:#cfded7}
.ayubhaedu-il-quick_check>header{background:linear-gradient(90deg,#edf5f1,#fafcfb)}
.ayubhaedu-il-clinical_case{border-color:#ead4ca}
.ayubhaedu-il-clinical_case>header{background:linear-gradient(90deg,#fcf1eb,#fffaf7)}
.ayubhaedu-il-flashcards{border-color:#e6dec9}
.ayubhaedu-il-flashcards>header{background:linear-gradient(90deg,#faf5e9,#fffdfa)}
.ayubhaedu-il-hotspot>header{background:#f5f7f6}
.ayubhaedu-il-callout>header{background:#f1f6f3}
.ayubhaedu-il-summary{border-color:#cddbd5}
.ayubhaedu-il-summary>header{background:linear-gradient(90deg,#eaf2ee,#f8fbf9)}
.ayubhaedu-il-block.is-complete>header{box-shadow:inset 5px 0 0 #5f8f75}

/* Questions */
.ayubhaedu-il-stem{padding:15px 16px;border-radius:12px;background:var(--il-cream);border-left:4px solid var(--il-coral);margin-bottom:15px;line-height:1.55}
.ayubhaedu-il-question-text{font-weight:750;font-size:1.06rem;line-height:1.45;color:var(--il-forest)}
.ayubhaedu-il-options{display:grid;gap:10px;margin:14px 0 16px}
.ayubhaedu-il-options label{display:flex;gap:11px;align-items:flex-start;padding:12px 13px;border:1px solid var(--il-border);border-radius:11px;cursor:pointer;background:#fff;transition:border-color .18s,background .18s,transform .18s}
.ayubhaedu-il-options label:hover{border-color:#b9cfc6;background:#f8fbf9;transform:translateY(-1px)}
.ayubhaedu-il-options input{margin-top:.18em}
.ayubhaedu-il-button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;padding:11px 16px;background:var(--il-forest);color:#fff;font-weight:750;cursor:pointer;margin-top:8px;box-shadow:0 5px 14px rgba(23,63,58,.16)}
.ayubhaedu-il-button:hover{background:#23554d}
.ayubhaedu-il-button:disabled{opacity:.6;cursor:wait}
.ayubhaedu-il-feedback{margin-top:13px;line-height:1.5}
.ayubhaedu-il-feedback.is-correct{padding:12px 14px;background:#eef7f1;border:1px solid #cfe4d5;border-radius:10px;color:#28553a}
.ayubhaedu-il-feedback.is-incorrect{padding:12px 14px;background:#fcf1ef;border:1px solid #edcfca;border-radius:10px;color:#704036}


.ayubhaedu-il-options label.is-wrong-attempt{border-color:#dca79d;background:#fff4f1}
.ayubhaedu-il-options label.is-correct-attempt{border-color:#9cc5aa;background:#f0f8f2}
form:has(input[name="action"][value="ayubhaedu_complete_lesson"]) .ayubhaedu-button.ayubhaedu-il-completion-locked,
.ayubhaedu-button.ayubhaedu-il-completion-locked{opacity:.48;cursor:not-allowed;filter:saturate(.65)}

/* Flashcards */
.ayubhaedu-il-flashcard-instruction{display:flex;align-items:center;gap:8px;margin:0 0 14px;color:var(--il-muted);font-size:.91rem}
.ayubhaedu-il-flashcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.ayubhaedu-il-flashcard{position:relative;min-height:150px;border:1px solid #dfdacb;border-radius:14px;background:linear-gradient(145deg,#fff,#fcfaf4);padding:24px 20px 20px;text-align:left;cursor:pointer;box-shadow:0 5px 16px rgba(55,48,30,.04);transition:transform .18s,box-shadow .18s,border-color .18s}
.ayubhaedu-il-flashcard:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(55,48,30,.08);border-color:#d1c39e}
.ayubhaedu-il-flashcard .front,.ayubhaedu-il-flashcard .back{display:flex;min-height:104px;flex-direction:column;justify-content:space-between;gap:14px}
.ayubhaedu-il-flashcard .front{font-weight:750;color:var(--il-forest)}
.ayubhaedu-il-flashcard .back{display:none;line-height:1.5;color:var(--il-text)}
.ayubhaedu-il-flashcard small{display:block;margin-top:auto;font-size:.76rem;font-weight:700;letter-spacing:.02em;color:#947d50}
.ayubhaedu-il-flashcard.is-flipped{background:#f6f1e5}
.ayubhaedu-il-flashcard.is-flipped .front{display:none}
.ayubhaedu-il-flashcard.is-flipped .back{display:flex}
.ayubhaedu-il-flashcard.is-seen{box-shadow:inset 0 0 0 2px rgba(198,161,91,.25)}

/* Hotspots */
.ayubhaedu-il-hotspot{display:grid;grid-template-columns:minmax(0,2fr) minmax(220px,1fr);gap:16px}
.ayubhaedu-il-hotspot-image{position:relative}
.ayubhaedu-il-hotspot-image img{display:block;width:100%;height:auto;border-radius:12px}
.ayubhaedu-il-hotspot-pin{position:absolute;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;border:2px solid #fff;background:var(--il-forest);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.ayubhaedu-il-hotspot-pin.is-seen{outline:3px solid rgba(47,111,102,.25)}
.ayubhaedu-il-hotspot-detail{padding:15px;background:var(--il-sage-2);border:1px solid #dfe9e5;border-radius:12px}
.ayubhaedu-il-prose{font-size:1rem;line-height:1.65}
.ayubhaedu-il-prose>:first-child{margin-top:0}.ayubhaedu-il-prose>:last-child{margin-bottom:0}

/* Lesson panels are intentionally always visible. Normal scrolling reveals them without JS visibility gates. */

@media(max-width:720px){
 .ayubhaedu-il-lesson{gap:18px}
 .ayubhaedu-il-block,.ayubhaedu-il-reading{border-radius:14px}
 .ayubhaedu-il-block>header{flex-direction:column;padding:16px}
 .ayubhaedu-il-body{padding:16px}
 .ayubhaedu-il-reading{padding:18px 16px}
 .ayubhaedu-il-state{align-self:flex-start;white-space:normal}
 .ayubhaedu-il-progress>div:first-child{flex-direction:column;align-items:flex-start}
 .ayubhaedu-il-resume{align-items:flex-start}
 .ayubhaedu-il-flow-cue{border-radius:14px;margin-top:0;max-width:none;padding:12px 13px}
 .ayubhaedu-il-flow-cue small{font-size:.76rem}
 .ayubhaedu-il-flashcards{grid-template-columns:1fr}
 .ayubhaedu-il-hotspot{grid-template-columns:1fr}
}