/* =========================================================================
   exam.css — graded end-of-module exams (hub cards + inline exam engine).
   Reuses the course :root color vars (--bg, --panel, --teal, etc.) declared
   on each host page. Bilingual, RTL-friendly, honors prefers-reduced-motion.
   ========================================================================= */

/* ---------- hub: exam cards grid ---------- */
.exam-hub{
  display:grid; gap:16px; margin:28px 0 8px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.exc{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; display:flex; flex-direction:column; gap:10px;
  transition:transform .15s, border-color .15s;
}
.exc:hover{ transform:translateY(-2px); border-color:var(--teal); }
.exc.passed{ border-color:rgba(155,225,93,.55); }
.exc-top{ display:flex; align-items:center; gap:10px; }
.exc-num{
  font-family:"JetBrains Mono",monospace; font-weight:700; font-size:.8rem;
  width:26px; height:26px; flex-shrink:0; border-radius:8px; display:grid; place-items:center;
  background:var(--panel-2); color:#cfcdec;
}
.exc.passed .exc-num{ background:linear-gradient(135deg,var(--lime),var(--teal)); color:#123; }
.exc-ico{ font-size:1.3rem; }
.exc-title{ font-weight:800; font-size:1.02rem; line-height:1.3; }
.exc-title .he{ color:var(--muted); font-size:.82em; font-weight:700; }
.exc-meta{ color:var(--muted); font-size:.8rem; font-family:"JetBrains Mono",monospace; }
.exc-best{ display:flex; align-items:baseline; gap:10px; margin-top:2px; }
.exc-score{ font-family:"JetBrains Mono",monospace; font-weight:800; font-size:1.5rem; line-height:1; }
.exc-score.s-pass{ color:var(--lime); }
.exc-score.s-fail{ color:var(--amber); }
.exc-score.s-none{ color:var(--muted); }
.exc-scorelbl{ font-size:.78rem; color:var(--muted); }
.exc-scorelbl .he{ color:var(--muted); }
.exc-date{ font-family:"JetBrains Mono",monospace; }
.exc-start{
  margin-top:auto; cursor:pointer; font:inherit; font-weight:800; font-size:.9rem; color:#04231D;
  background:linear-gradient(135deg,var(--teal),var(--blue)); border:none; border-radius:11px; padding:10px 16px;
  transition:filter .15s;
}
.exc-start:hover{ filter:brightness(1.08); }
.exc-start .he{ font-weight:700; }

/* ---------- stage: back bar + inline exam ---------- */
#exam-stage-back{
  display:none; align-items:center; gap:8px; margin:18px 0 0; cursor:pointer;
  font:inherit; font-weight:800; font-size:.9rem; color:var(--muted);
  background:var(--bg-2); border:1px solid var(--line); border-radius:11px; padding:9px 15px;
}
#exam-stage-back.show{ display:inline-flex; }
#exam-stage-back:hover{ color:#fff; border-color:var(--teal); }
#exam-stage{ display:none; }
#exam-stage.show{ display:block; margin-top:14px; }

/* ---------- the exam itself ---------- */
.exam{ font-family:"Cairo","Heebo",sans-serif; }
.ex-empty{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:22px; text-align:center; color:var(--muted); font-weight:700;
}
.ex-head{
  background:linear-gradient(135deg,rgba(91,141,239,.14),rgba(34,211,176,.10));
  border:1px solid rgba(91,141,239,.35); border-radius:var(--r); padding:18px 20px; margin-bottom:16px;
}
.ex-title{ font-weight:900; font-size:1.25rem; display:flex; align-items:center; gap:8px; }
.ex-title .he{ color:var(--muted); font-size:.72em; font-weight:800; }
.ex-ico{ font-size:1.4rem; }
.ex-sub{ margin-top:6px; color:var(--muted); font-size:.85rem; font-family:"JetBrains Mono",monospace; }

.ex-qs{ display:flex; flex-direction:column; gap:14px; }
.ex-q{
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px 18px;
  transition:border-color .15s;
}
.ex-q.ex-unanswered{ border-color:var(--amber); }
.ex-q.ex-correct{ border-color:rgba(155,225,93,.5); background:linear-gradient(180deg,rgba(155,225,93,.07),transparent); }
.ex-q.ex-wrong{ border-color:rgba(255,107,107,.45); background:linear-gradient(180deg,rgba(255,107,107,.07),transparent); }
.ex-qnum{ font-family:"JetBrains Mono",monospace; font-size:.72rem; color:var(--teal); margin-bottom:6px; }
.ex-qtext{ font-weight:800; font-size:1.06rem; line-height:1.5; margin-bottom:12px; }

.ex-opts{ display:grid; gap:8px; }
.ex-opt{
  display:flex; align-items:center; gap:10px; text-align:start; cursor:pointer; font:inherit;
  font-size:.98rem; color:#EEEDFB; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14); border-radius:11px; padding:11px 14px;
  transition:background .15s, border-color .15s, transform .1s;
}
.ex-opt:hover{ background:rgba(255,255,255,.09); }
.ex-opt:active{ transform:scale(.99); }
.ex-tick{
  width:18px; height:18px; flex-shrink:0; border-radius:50%;
  border:2px solid var(--muted); position:relative; transition:border-color .15s;
}
.ex-opt.sel .ex-tick{ border-color:var(--teal); }
.ex-opt.sel .ex-tick::after{
  content:""; position:absolute; inset:3px; border-radius:50%; background:var(--teal);
}
.ex-opt.sel{ background:rgba(34,211,176,.12); border-color:var(--teal); }
.ex-opt.ok{ background:rgba(155,225,93,.16); border-color:var(--lime); }
.ex-opt.ok .ex-tick{ border-color:var(--lime); }
.ex-opt.ok .ex-tick::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--lime); }
.ex-opt.no{ background:rgba(255,107,107,.14); border-color:var(--coral); }
.ex-opt.no .ex-tick{ border-color:var(--coral); }
.ex-opt[disabled]{ cursor:default; }

.ex-review{ display:none; }
.ex-graded .ex-q .ex-review{ display:block; margin-top:12px; padding-top:10px; border-top:1px dashed var(--line); }
.ex-rev-line{ font-weight:800; font-size:.92rem; }
.ex-rev-line.good{ color:var(--lime); }
.ex-rev-line.bad{ color:var(--coral); }
.ex-rev-exp{ margin-top:6px; color:#C9C7E8; font-size:.9rem; line-height:1.5; }

.ex-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:16px;
}
.ex-count{ color:var(--muted); font-size:.85rem; font-family:"JetBrains Mono",monospace; }
.ex-submit{
  cursor:pointer; font:inherit; font-weight:900; font-size:1rem; color:#04231D;
  background:linear-gradient(135deg,var(--lime),var(--teal)); border:none; border-radius:12px; padding:12px 26px;
  transition:filter .15s, transform .1s;
}
.ex-submit:hover{ filter:brightness(1.06); }
.ex-submit:active{ transform:scale(.98); }

/* ---------- result panel ---------- */
.ex-result{ display:none; margin-top:18px; }
.ex-result.show{ display:block; }
.ex-result.warn{
  background:rgba(246,183,60,.12); border:1px solid rgba(246,183,60,.4); border-radius:14px;
  padding:14px 18px; color:var(--amber); font-weight:800; text-align:center;
}
.ex-result.pass, .ex-result.fail{
  border-radius:var(--r); padding:24px 20px; text-align:center;
}
.ex-result.pass{ background:linear-gradient(180deg,rgba(155,225,93,.14),rgba(34,211,176,.06)); border:1px solid rgba(155,225,93,.5); }
.ex-result.fail{ background:linear-gradient(180deg,rgba(246,183,60,.12),rgba(255,107,107,.05)); border:1px solid rgba(246,183,60,.45); }
.ex-scorebig{ font-family:"JetBrains Mono",monospace; font-weight:800; font-size:3rem; line-height:1; }
.ex-result.pass .ex-scorebig{ color:var(--lime); }
.ex-result.fail .ex-scorebig{ color:var(--amber); }
.ex-scorelbl{ font-weight:900; font-size:1.1rem; margin-top:8px; }
.ex-scoremeta{ color:var(--muted); font-size:.86rem; margin-top:8px; }
.ex-bestnote{ display:block; margin-top:4px; color:var(--teal); font-weight:800; }
.ex-retry{
  margin-top:16px; cursor:pointer; font:inherit; font-weight:800; font-size:.95rem; color:#EEEDFB;
  background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:11px 22px;
  transition:border-color .15s, background .15s;
}
.ex-retry:hover{ border-color:var(--teal); background:var(--panel); }

/* ---------- animation (respect reduced motion) ---------- */
@keyframes ex-pop{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.exam:not(.ex-noanim) .ex-result.show{ animation:ex-pop .3s ease both; }
.exam.ex-noanim *{ animation:none !important; transition:none !important; }