/* practice-questions.css — NRP QBank / exam simulator */

/* ── Controls row ── */
.qb-controls{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;
}
.qb-mode-toggle{
  display:inline-flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;
}
.qb-mode-toggle button{
  padding:7px 16px;border:0;background:transparent;cursor:pointer;
  font-family:var(--sans);font-size:.82rem;font-weight:700;color:var(--ink-faint);
  transition:background .15s,color .15s;
}
.qb-mode-toggle button.active{background:var(--teal);color:#fff;}

.qb-timer{
  display:inline-flex;align-items:center;gap:6px;margin-left:auto;
  padding:6px 12px;border-radius:8px;
  background:var(--amber-wash);color:var(--amber-surface,var(--amber));
  font-family:var(--mono);font-size:.9rem;font-weight:700;
  font-variant-numeric:tabular-nums;
}
.qb-timer.hidden{display:none;}
.qb-timer.qb-timer-low{
  background:rgba(185,28,28,0.12);color:#B91C1C;
  animation:qbTimerPulse 1s infinite ease-in-out;
}
[data-theme="dark"] .qb-timer.qb-timer-low{color:#EF8A8A;}
@keyframes qbTimerPulse{50%{opacity:.55;}}
@media(prefers-reduced-motion:reduce){.qb-timer.qb-timer-low{animation:none;}}

.qb-mode-hint{
  font-family:var(--sans);font-size:.8rem;color:var(--ink-faint);
  margin:0 0 20px;line-height:1.5;
}

/* ── Question card ── */
.qb-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;margin-bottom:32px;box-shadow:var(--shadow);
}

.qb-progress-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;
}
.qb-counter{
  font-family:var(--mono);font-size:.76rem;font-weight:700;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.qb-lesson-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:20px;
  background:var(--teal-wash);color:var(--teal);
  font-family:var(--sans);font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
}
.qb-progress-bar{height:4px;background:var(--line);border-radius:2px;overflow:hidden;margin-bottom:20px;}
.qb-progress-fill{height:100%;background:var(--teal);transition:width .3s cubic-bezier(.4,0,.2,1);}

.qb-question{
  font-family:var(--sans);font-size:1.05rem;font-weight:600;line-height:1.5;
  color:var(--ink);margin:0 0 20px;text-wrap:pretty;
}

/* Options */
.qb-options{display:flex;flex-direction:column;gap:10px;}
.qb-opt{
  display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;
  padding:14px 16px;border:1.5px solid var(--line-strong);border-radius:10px;
  background:var(--panel);cursor:pointer;
  font-family:var(--sans);font-size:.92rem;line-height:1.45;color:var(--ink-soft);
  transition:border-color .15s,background .15s,color .15s;
}
.qb-opt:hover:not(:disabled){border-color:var(--teal);background:var(--teal-wash);}
.qb-opt:disabled{cursor:default;}
.qb-opt.opt-selected{border-color:var(--teal);background:var(--teal-wash);color:var(--ink);}
.qb-opt.opt-correct{
  border-color:var(--alg-routine,#059669);background:rgba(5,150,105,0.1);color:var(--ink);font-weight:600;
}
.qb-opt.opt-incorrect{
  border-color:#B91C1C;background:rgba(185,28,28,0.08);color:var(--ink);
}
.qb-opt-mark{
  flex:none;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:800;margin-top:1px;
  border:1.5px solid currentColor;
}
.qb-opt.opt-correct .qb-opt-mark{background:var(--alg-routine,#059669);border-color:var(--alg-routine,#059669);color:#fff;}
.qb-opt.opt-incorrect .qb-opt-mark{background:#B91C1C;border-color:#B91C1C;color:#fff;}

/* Explanation (tutor mode) */
.qb-explanation{
  margin-top:18px;padding:16px;border-radius:10px;
  font-family:var(--sans);font-size:.9rem;line-height:1.6;
  display:flex;gap:12px;align-items:flex-start;
}
.qb-explanation.exp-success{background:rgba(5,150,105,0.1);color:var(--ink-soft);}
.qb-explanation.exp-error{background:rgba(185,28,28,0.08);color:var(--ink-soft);}
.qb-explanation .qb-exp-icon{flex:none;margin-top:1px;}
.qb-explanation strong{color:var(--ink);display:block;margin-bottom:3px;}

/* Nav buttons */
.qb-nav{display:flex;gap:10px;margin-top:22px;}
.qb-nav button{
  flex:1;padding:11px 16px;border-radius:9px;
  font-family:var(--sans);font-size:.88rem;font-weight:700;cursor:pointer;
  border:1px solid var(--line-strong);background:transparent;color:var(--ink);
  transition:background .15s,opacity .15s;
}
.qb-nav button.qb-primary{background:var(--teal);border-color:var(--teal);color:#fff;flex:1.6;}
.qb-nav button.qb-primary:hover{opacity:.92;}
.qb-nav button:not(.qb-primary):hover:not(:disabled){background:var(--teal-wash);}
.qb-nav button:disabled{opacity:.35;cursor:default;}

/* ── Results screen ── */
.qb-results{text-align:center;padding:20px 12px;}
.qb-results-badge{
  width:64px;height:64px;border-radius:50%;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
}
.qb-results.res-pass .qb-results-badge{background:rgba(5,150,105,0.14);color:var(--alg-routine,#059669);}
.qb-results.res-fail .qb-results-badge{background:var(--amber-wash);color:var(--amber-surface,var(--amber));}
.qb-results h2{
  font-family:var(--sans);font-size:1.15rem;font-weight:800;margin:0 0 4px;
  text-transform:uppercase;letter-spacing:.02em;
}
.qb-results.res-pass h2{color:var(--alg-routine,#059669);}
.qb-results.res-fail h2{color:var(--amber-surface,var(--amber));}
.qb-score-big{
  font-family:var(--mono);font-size:3.2rem;font-weight:700;color:var(--ink);
  line-height:1.1;margin:8px 0;font-variant-numeric:tabular-nums;
}
.qb-results p{font-family:var(--sans);font-size:.9rem;color:var(--ink-soft);line-height:1.6;margin:4px 0;}
.qb-results .qb-result-actions{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap;}
.qb-results .qb-result-actions button{
  padding:11px 20px;border-radius:9px;font-family:var(--sans);font-size:.88rem;font-weight:700;cursor:pointer;
  border:1px solid var(--line-strong);background:transparent;color:var(--ink);transition:background .15s;
}
.qb-results .qb-result-actions button.qb-primary{background:var(--teal);border-color:var(--teal);color:#fff;}
.qb-results .qb-result-actions button:hover{background:var(--teal-wash);}
.qb-results .qb-result-actions button.qb-primary:hover{background:var(--teal);opacity:.92;}