/* =========================================================================
   practice.css — student practice challenges, progress, Student/Teacher mode.
   ========================================================================= */

/* ---------- mode visibility ---------- */
html[data-mode="student"] .teacher-only { display:none !important; }
html[data-mode="teacher"] .student-only { display:none !important; }
html[data-mode="student"] .pr-launch    { display:none !important; }

/* mode + lang pill buttons in the nav */
.mode-btn{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-family:"Cairo","Heebo",sans-serif; font-weight:800; font-size:.8rem;
  color:#04231D; background:linear-gradient(135deg,#F6B73C,#FF6B6B);
  border:none; border-radius:999px; padding:6px 12px; white-space:nowrap;
}
.mode-btn.tmode{ background:linear-gradient(135deg,#5B8DEF,#A06BFF); color:#fff; }

/* ---------- per-page progress bar (students) ---------- */
.pprogress{
  max-width:900px; margin:14px auto 0; padding:10px 16px; display:flex; align-items:center; gap:12px;
  background:rgba(34,211,176,.08); border:1px solid rgba(34,211,176,.28); border-radius:14px;
  font-family:"Cairo","Heebo",sans-serif;
}
.pprogress .pp-label{ font-weight:800; font-size:.9rem; white-space:nowrap; }
.pprogress .pp-bar{ flex:1; height:9px; border-radius:999px; background:rgba(255,255,255,.10); overflow:hidden; }
.pprogress .pp-bar > i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#9BE15D,#22D3B0); transition:width .4s; }
.pprogress .pp-pct{ font-family:"JetBrains Mono",monospace; font-weight:700; color:#22D3B0; }
.pprogress .pp-reset{ cursor:pointer; background:none; border:none; color:#9694C0; font-size:1rem; }

/* ---------- challenge card ---------- */
.pchal{
  margin-top:20px; border:1px solid rgba(34,211,176,.34); border-radius:16px;
  padding:16px 18px; background:linear-gradient(180deg,rgba(34,211,176,.08),rgba(34,211,176,.02));
  font-family:"Cairo","Heebo",sans-serif;
}
.pchal .ptag{
  display:inline-flex; align-items:center; gap:7px; font-weight:900; font-size:.82rem;
  color:#22D3B0; background:rgba(34,211,176,.12); border:1px solid rgba(34,211,176,.3);
  padding:4px 12px; border-radius:999px; margin-bottom:12px;
}
.pchal .pdone-badge{ margin-inline-start:8px; color:#9BE15D; font-weight:900; display:none; }
.pchal.pdone .pdone-badge{ display:inline; }
.pchal.pdone{ border-color:rgba(155,225,93,.55); background:linear-gradient(180deg,rgba(155,225,93,.10),rgba(155,225,93,.02)); }
.pchal .pq{ font-weight:800; font-size:1.05rem; margin-bottom:12px; line-height:1.5; }

.pchal .popts{ display:grid; gap:8px; }
.pchal .popt{
  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;
}
.pchal .popt:hover{ background:rgba(255,255,255,.09); }
.pchal .popt:active{ transform:scale(.99); }
.pchal .popt.ok{ background:rgba(155,225,93,.16); border-color:#9BE15D; }
.pchal .popt.no{ background:rgba(255,107,107,.14); border-color:#FF6B6B; }

.pchal .ptext{ display:flex; gap:8px; flex-wrap:wrap; }
.pchal .ptext input{
  flex:1; min-width:180px; font:inherit; font-size:1rem; color:#EEEDFB;
  background:#14122C; border:1px solid rgba(255,255,255,.16); border-radius:11px; padding:11px 14px;
}
.pchal .pcheck{
  cursor:pointer; font:inherit; font-weight:800; color:#04231D;
  background:linear-gradient(135deg,#22D3B0,#5B8DEF); border:none; border-radius:11px; padding:11px 18px;
}
.pchal .phint-btn{ cursor:pointer; background:none; border:none; color:#F6B73C; font:inherit; font-weight:700; text-decoration:underline; margin-top:8px; }
.pchal .pfb{ margin-top:12px; font-weight:700; font-size:.95rem; display:none; }
.pchal .pfb.show{ display:block; }
.pchal .pfb.good{ color:#9BE15D; }
.pchal .pfb.bad{ color:#FF6B6B; }
.pchal .pfb .phint{ display:block; color:#F6B73C; font-weight:600; margin-top:4px; }

/* in presenter, keep challenge readable at scale */
.pr-stage .pchal{ font-size:1.05em; }