/* ============================================================================
 *  exercises.css — Targetes d'exercici pràctic i descàrregues .pkt
 * ==========================================================================*/

.examples-intro,.exercises{margin-top:.4rem}
.examples-intro p{color:var(--text-dim);font-size:.95rem;margin-bottom:1rem}

.exercises{display:grid;gap:1.1rem}
.exercise{
  background:var(--bg-card);border:1px solid var(--border);border-radius:14px;
  padding:1.2rem 1.3rem;transition:.2s var(--ease);
}
.exercise.done{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));background:color-mix(in srgb,var(--accent) 5%,var(--bg-card))}

.exercise-head{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:.6rem}
.exercise-head h3{font-size:1.1rem;flex:1;min-width:12rem}
.ex-level{font-size:.7rem;font-weight:700;padding:.2rem .55rem;border-radius:6px;text-transform:uppercase;letter-spacing:.03em}
.ex-basic{background:rgba(34,211,168,.16);color:#22d3a8}
.ex-mid{background:rgba(43,157,255,.16);color:#2b9dff}
.ex-hard{background:rgba(245,158,11,.18);color:#f59e0b}
.ex-challenge{background:rgba(236,72,153,.18);color:#ec4899}

.ex-check{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--text-dim);cursor:pointer;user-select:none}
.ex-check input{width:20px;height:20px;accent-color:var(--accent);cursor:pointer}

.ex-goal{color:var(--text);font-size:.96rem;margin-bottom:.6rem}
.ex-topology{font-size:.9rem;color:var(--text-dim);background:var(--hover);padding:.6rem .8rem;border-radius:9px;margin-bottom:.7rem;border-left:3px solid var(--accent)}
.ex-topology strong{color:var(--text)}

.ex-steps{margin-bottom:.7rem}
.ex-steps summary{cursor:pointer;font-weight:600;font-size:.9rem;color:var(--accent);padding:.3rem 0}
.ex-steps ol{margin:.5rem 0 0 1.2rem;display:grid;gap:.4rem}
.ex-steps li{font-size:.92rem;color:var(--text-dim)}
.ex-steps li::marker{color:var(--accent);font-weight:700}

.ex-verify{font-size:.9rem;background:var(--tip-bg);padding:.6rem .8rem;border-radius:9px;margin-bottom:.8rem;border-left:3px solid var(--accent2)}
.ex-verify strong{color:var(--text)}

/* ─── Autoavaluació (quiz) ───────────────────────────────────────────────── */
.quiz-loading{color:var(--text-dim);padding:2rem;text-align:center}
.quiz-list{display:grid;gap:1rem;margin-bottom:1.2rem}
.q{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:1.1rem 1.2rem}
.q.answered-ok{border-color:color-mix(in srgb,var(--accent2) 55%,var(--border))}
.q.answered-bad{border-color:rgba(248,113,113,.5)}
.q-text{font-size:1rem;margin-bottom:.7rem}
.q-opts{display:grid;gap:.4rem}
.q-opt{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:9px;background:var(--bg-elev);border:1px solid var(--border);cursor:pointer;font-size:.93rem;transition:.15s var(--ease)}
.q-opt:hover{border-color:var(--accent)}
.q-opt input{width:18px;height:18px;accent-color:var(--accent)}
.q-hint{font-size:.8rem;color:var(--text-muted);margin-top:.4rem}

.q-order{list-style:none;display:grid;gap:.4rem}
.q-order li{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;background:var(--bg-elev);border:1px solid var(--border);border-radius:9px;cursor:grab;font-size:.92rem}
.q-order li.dragging{opacity:.5;border-color:var(--accent)}
.q-order .drag{color:var(--text-muted);cursor:grab}

.q-feedback{margin-top:.7rem;padding:.6rem .8rem;border-radius:9px;font-size:.88rem}
.q-feedback.good{background:var(--tip-bg);color:var(--text)}
.q-feedback.bad{background:rgba(248,113,113,.12);color:var(--text)}

.quiz-actions{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.quiz-score{font-weight:700;font-family:var(--mono)}
.quiz-score.pass{color:#22d3a8}
.quiz-score.fail{color:#f59e0b}