/* درس تفاعلي (مسار التعلّم) — كل حاجة متقفلة جوه .lesson */
.lesson{--bg:#F4F7FA; --surface:#FFFFFF; --line:#DCE4EB; --navy:#0E2A42; --ink-2:#3D5568; --muted:#5E7284;
  --teal:#107873; --teal-soft:#E3F5F3; --gold:#D4A23A; --gold-soft:#FBF3E2; --gold-ink:#5E4511;
  --f-num:var(--f-latin);
  --bull:#089981; --bear:#F23645; --chart-bg:#FFFFFF; --grid:#EEF2F6; --ok:#0B7A5A; --bad:#C0293A;}
.lesson{max-width:820px;margin:0 auto;padding-inline:16px;padding-block:28px 24px;display:flex;flex-direction:column;gap:28px;font-size:17px;line-height:1.85}
.lesson h1,.lesson h2,.lesson h3{font-family:var(--f-head);margin:0;text-wrap:balance;line-height:1.35}
.lesson h1{font-size:clamp(28px,6vw,40px);font-weight:800}
.lesson h2{font-size:24px;font-weight:800}
.lesson p{margin:0}
.lesson .num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.lesson a{color:var(--teal)}
.lesson :focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--muted)}
.crumbs b{font-weight:600;color:var(--teal)}
.head{display:flex;flex-direction:column;gap:12px}
.lead{font-size:18px;color:var(--ink-2);max-width:62ch}
.meta{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:13px;font-weight:600;border-radius:999px;padding:3px 12px;background:var(--teal-soft);color:var(--teal)}

.block{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px 18px;display:flex;flex-direction:column;gap:16px}
.step{display:flex;gap:12px;align-items:center}
.step .n{flex:0 0 36px;height:36px;border-radius:50%;background:var(--gold);color:#0E2A42;display:grid;place-items:center;font-family:var(--f-num);font-weight:800}
.prose{display:flex;flex-direction:column;gap:10px;color:var(--ink-2);max-width:65ch}
.prose strong{color:var(--navy)}

.four{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.four div{border:1px solid var(--line);border-radius:14px;padding:10px 12px;font-size:15px;color:var(--ink-2)}
.four b{display:block;font-family:var(--f-head);color:var(--navy);font-size:16px}

/* builder */
.lab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:18px;align-items:start}
@media (max-width:640px){.lab{grid-template-columns:1fr}}
.chart{background:var(--chart-bg);border:1px solid var(--line);border-radius:16px;padding:6px;max-width:100%}
.chart svg{display:block;width:100%;height:auto;direction:ltr}
.qrow svg{direction:ltr}
.controls{display:flex;flex-direction:column;gap:12px;min-width:0}
.ctl{display:flex;flex-direction:column;gap:2px}
.ctl label{display:flex;justify-content:space-between;font-weight:600;font-size:15px}
.ctl output{font-family:var(--f-num);font-variant-numeric:tabular-nums;color:var(--teal)}
input[type=range]{width:100%;accent-color:var(--teal);height:28px}
.presets{display:flex;flex-wrap:wrap;gap:8px}
.lbtn{font:inherit;font-family:var(--f-head);font-weight:700;font-size:14px;border-radius:10px;padding:7px 12px;border:1px solid var(--line);background:var(--surface);color:var(--navy);cursor:pointer;min-height:40px}
.lbtn:hover{border-color:var(--teal);color:var(--teal)}
.lbtn-main{background:var(--teal);border-color:var(--teal);color:var(--surface)}
.lbtn-main:hover{color:var(--surface);filter:brightness(1.08)}
.reading{border-radius:14px;background:var(--teal-soft);padding:12px 14px;display:flex;flex-direction:column;gap:6px;font-size:16px}
.reading b{font-family:var(--f-head)}
.tagline{display:inline-block;font-size:13px;font-weight:700;border-radius:999px;padding:1px 10px;color:#fff}

/* tap game */
.game{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:18px;align-items:center}
@media (max-width:640px){.game{grid-template-columns:1fr}}
.ask{font-family:var(--f-head);font-size:20px;font-weight:800}
.ask em{font-style:normal;color:var(--teal)}
.fb{min-height:56px;font-size:16px;color:var(--ink-2)}
.fb.ok{color:var(--ok)} .fb.bad{color:var(--bad)}
.score{font-size:14px;color:var(--muted)}
.hit{cursor:pointer}
.hit rect{fill:transparent}
.hit:hover rect,.hit:focus rect{fill:var(--teal);fill-opacity:.12}
.hit:focus{outline:none}

/* quiz */
.q{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:16px}
.q:first-of-type{border-top:0;padding-top:0}
.qrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.qrow svg{flex:0 0 auto}
.qtext{flex:1 1 240px;min-width:0;font-weight:600}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{text-align:right;font-family:var(--f-body);font-weight:500;font-size:15px}
.opt.right{border-color:var(--ok);color:var(--ok)}
.opt.wrong{border-color:var(--bad);color:var(--bad)}
.why{font-size:15px;color:var(--ink-2)}

.note{background:var(--gold-soft);color:var(--gold-ink);border-radius:16px;padding:14px 16px;font-size:15px}
.next{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.next small{color:var(--muted);font-size:14px}
@media (prefers-reduced-motion:no-preference){.candle-anim *{transition:all .18s ease}}

/* درس الفريمات */
.lesson .tabs{display:flex;flex-wrap:wrap;gap:8px}
.lesson .tabs .lbtn[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:var(--surface)}
.lesson .cap{font-size:15px;color:var(--muted)}
.lesson .pairs{width:100%;border-collapse:collapse;font-size:15px}
.lesson .pairs th,.lesson .pairs td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:right}
.lesson .pairs th{font-family:var(--f-head);color:var(--navy)}
.lesson .pairs td.num{font-weight:700;color:var(--teal)}
.lesson .tblwrap{overflow-x:auto}
.lesson .sim{display:flex;flex-direction:column;gap:12px}
.lesson .simbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.lesson .badge{font-family:var(--f-num);font-weight:700;font-size:13px;border-radius:999px;padding:2px 12px;background:var(--navy);color:var(--surface)}
.lesson .stepnum{font-size:14px;color:var(--muted)}
.lesson .choices{display:flex;flex-wrap:wrap;gap:8px}
.lesson .chart.big svg{min-height:220px}
.lesson .zone-hit{cursor:pointer}
.lesson .zone-hit:hover rect,.lesson .zone-hit:focus rect{stroke-width:2.5}
.lesson .zone-hit:focus{outline:none}

/* إصلاحات: زرار الدرس الجاي لما يبقى رابط، ومسافة السؤال في الاختبار */
.lesson a.lbtn{text-decoration:none;display:inline-flex;align-items:center}
.lesson a.lbtn-main,.lesson a.lbtn-main:hover{color:var(--surface)}
.lesson .q > .qtext{flex:none}

/* درس اللوت */
.lesson .calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:640px){.lesson .calc{grid-template-columns:1fr}}
.lesson .out{border-radius:16px;background:var(--teal-soft);padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.lesson .big{font-family:var(--f-num);font-weight:800;font-size:30px;color:var(--teal);font-variant-numeric:tabular-nums;line-height:1.2}
.lesson .row2{display:flex;justify-content:space-between;gap:12px;font-size:15px;border-top:1px solid var(--line);padding-top:8px}
.lesson .row2 b{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.lesson .warn{background:var(--gold-soft);color:var(--gold-ink);border-radius:12px;padding:10px 12px;font-size:15px}
.lesson .warn[hidden]{display:none}
.lesson .seg{display:flex;flex-wrap:wrap;gap:8px}
.lesson .seg .lbtn[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:var(--surface)}
.lesson .quote{display:flex;gap:10px;flex-wrap:wrap}
.lesson .quote div{flex:1 1 120px;border-radius:12px;padding:10px 12px;color:#fff;text-align:center}
.lesson .quote small{display:block;font-size:13px;opacity:.9}
.lesson .quote b{font-family:var(--f-num);font-size:22px}
.lesson #calc{scroll-margin-top:80px}

/* الـ .chip بتاع الموقع position:absolute (للهيرو)، فبنرجّعه عادي جوه الدرس */
.lesson .meta .chip{position:static;box-shadow:none;padding:3px 12px;font-size:13px;background:var(--teal-soft);color:var(--teal)}

/* دروس هيكل السوق */
.lesson .tabs{display:flex;flex-wrap:wrap;gap:8px}
.lesson .tabs .lbtn[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:var(--surface)}
.lesson .video{display:flex;gap:16px;align-items:center;flex-wrap:wrap;text-decoration:none;color:inherit}
.lesson .video .thumb{position:relative;flex:0 0 260px;max-width:100%;aspect-ratio:16/9;border-radius:14px;background:linear-gradient(135deg,#0E2A42,#12425E 55%,#107873);display:grid;place-items:center}
.lesson .video .thumb span{width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center}
.lesson .video .vt{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:4px}
.lesson .video .vt b{font-family:var(--f-head);font-size:19px}
.lesson .video .vt small{color:var(--muted);font-size:14px}
.lesson .three{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.lesson .three div{border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:15px;color:var(--ink-2);display:flex;flex-direction:column;gap:4px}
.lesson .three b{font-family:var(--f-head);color:var(--navy);font-size:17px}
.lesson .three .num{font-weight:700}
.lesson .chart.big svg{min-height:220px}
.lesson .checklist{margin:0;padding-inline-start:20px;color:var(--ink-2);display:flex;flex-direction:column;gap:4px}
.lesson .three .k{font-family:var(--f-num);font-weight:800;color:var(--gold);font-size:20px}
.lesson .tblwrap{overflow-x:auto}
.lesson .cmp{width:100%;border-collapse:collapse;font-size:15px;min-width:420px}
.lesson .cmp th,.lesson .cmp td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:right;vertical-align:top}
.lesson .cmp th{font-family:var(--f-head);color:var(--navy)}
.lesson .cmp td:first-child{color:var(--muted)}
.lesson .checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:15px}
.lesson .checks li{display:flex;gap:8px;align-items:flex-start}
.lesson .checks .ic{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff}
.lesson .choices{display:flex;flex-wrap:wrap;gap:8px}
.lesson .simbar{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.lesson .lvhit{cursor:pointer}
.lesson .lvhit:focus{outline:none}
.lesson .lvhit:hover line,.lesson .lvhit:focus line{stroke-width:3.5}
.lesson .lesson-video{max-width:640px;border-radius:16px;overflow:hidden}
.lesson .video[aria-disabled="true"] .thumb{opacity:.55}

/* دروس السيولة والخطة */
.lesson .tabs{display:flex;flex-wrap:wrap;gap:8px}
.lesson .tabs .lbtn[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:var(--surface)}
.lesson .video{display:flex;gap:16px;align-items:center;flex-wrap:wrap;text-decoration:none;color:inherit}
.lesson .video .thumb{position:relative;flex:0 0 260px;max-width:100%;aspect-ratio:16/9;border-radius:14px;background:linear-gradient(135deg,#0E2A42,#12425E 55%,#107873);display:grid;place-items:center}
.lesson .video .thumb span{width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center}
.lesson .video .vt{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:4px}
.lesson .video .vt b{font-family:var(--f-head);font-size:19px}
.lesson .video .vt small{color:var(--muted);font-size:14px}
.lesson .chart.big svg{min-height:220px}
.lesson .choices{display:flex;flex-wrap:wrap;gap:8px}
.lesson .simbar{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.lesson .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.lesson .two div{border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:15px;color:var(--ink-2);display:flex;flex-direction:column;gap:4px}
.lesson .two b{font-family:var(--f-head);color:var(--navy);font-size:17px}
.lesson .lab3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:center}
@media (max-width:640px){.lesson .lab3{grid-template-columns:1fr}}
.lesson .state{border-radius:14px;padding:12px 14px;font-size:16px;font-weight:600}
.lesson .state.yes{background:var(--teal-soft);color:var(--teal)}
.lesson .state.no{background:var(--gold-soft);color:var(--gold-ink)}
.lesson .cndhit{cursor:pointer}
.lesson .cndhit:focus{outline:none}
.lesson .cndhit:hover rect,.lesson .cndhit:focus rect{fill:var(--teal);fill-opacity:.1}
.lesson .steps3{display:flex;flex-wrap:wrap;gap:8px}
.lesson .steps3 .lbtn[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--surface)}
.lesson .pct{display:flex;height:28px;border-radius:8px;overflow:hidden;font-family:var(--f-num);font-weight:700;font-size:13px;color:#fff}
.lesson .pct span{display:flex;align-items:center;justify-content:center}
.lesson .pt{cursor:pointer}
.lesson .pt:focus{outline:none}
.lesson .pt:focus circle,.lesson .pt:hover circle{stroke-width:4}
.lesson .plan{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.lesson .plan div{border:1px solid var(--line);border-radius:12px;padding:8px 12px;display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--muted)}
.lesson .plan b{font-family:var(--f-num);font-size:18px;color:var(--navy);font-variant-numeric:tabular-nums}
.lesson .plan .rr b{color:var(--teal)}
.lesson .conds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lesson .conds li{display:flex;gap:8px;align-items:center;font-size:15px;color:var(--muted)}
.lesson .conds li.on{color:var(--navy);font-weight:600}
.lesson .conds .ic{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;background:var(--line)}
.lesson .conds li.on .ic{background:var(--ok)}
.lesson .zhit{cursor:pointer}
.lesson .zhit:focus{outline:none}
.lesson .zhit:hover rect,.lesson .zhit:focus rect{stroke-width:3}
.lesson .checklist{margin:0;padding-inline-start:20px;color:var(--ink-2);display:flex;flex-direction:column;gap:4px}
.lesson .calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:640px){.lesson .calc{grid-template-columns:1fr}}
.lesson .out{border-radius:16px;background:var(--teal-soft);padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.lesson .big{font-family:var(--f-num);font-weight:800;font-size:28px;color:var(--teal);line-height:1.2}
.lesson .warn{background:var(--gold-soft);color:var(--gold-ink);border-radius:12px;padding:10px 12px;font-size:15px}