/* The workshop quiz, styled. Loaded by every deck in this folder that has one.
 *
 * Lifted verbatim out of the fifteen inline <style> blocks it replaces, minus the
 * .wsq-reveal rules — the questions now come from control.junctionnet.nl, which does not
 * send the right answer until an answer is in, so there is nothing for a per-question
 * "Show answer" button to reveal.
 *
 * Structural colour comes from the deck's own CSS variables, so this file inherits each
 * deck's light and dark theme without knowing anything about them. The few literals that
 * survived the lift — the red wrong-state, the grey on a code snippet — came across
 * verbatim and read acceptably in both. Reach for a variable before adding another.
 *
 * Paired with ws-quiz.js. See apps/control/lib/forms.js for the other end.
 */

.wsquiz{max-width:760px;margin:0 auto;padding:8px 24px 72px}
.wsquiz-inner{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px}
.wsquiz-kicker{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.wsquiz-title{font-size:24px;font-weight:800;color:var(--white);margin:0 0 6px}
.wsquiz-sub{color:var(--muted);font-size:15px;margin:0 0 18px}
.wsquiz-bar{height:6px;background:var(--dark);border:1px solid var(--border);border-radius:999px;overflow:hidden;margin:0 0 8px}
.wsquiz-bar>div{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .3s}
.wsq-q{border-top:1px solid var(--border);padding:20px 0}
.wsq-q:first-child{border-top:none;padding-top:4px}
.wsq-qn{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.wsq-qt{font-size:17px;font-weight:700;color:var(--white);margin:6px 0 14px}
.wsq-code{margin:0 0 14px}
.wsq-code code{font-size:13px;white-space:pre;color:#cbd5e1}
.wsq-opt{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin:8px 0;cursor:pointer;color:var(--text);transition:border-color .12s,background .12s}
.wsq-opt:hover{border-color:var(--accent)}
.wsq-opt .l{flex:0 0 22px;height:22px;border-radius:6px;background:var(--black);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--muted)}
.wsq-opt.sel{border-color:var(--accent);background:rgba(59,130,246,.12)}
.wsq-opt.correct{border-color:var(--green);background:rgba(16,185,129,.15)}
.wsq-opt.wrong{border-color:#ef4444;background:rgba(239,68,68,.15)}
.wsq-opt.correct .l{background:var(--green);color:#04210f;border-color:var(--green)}
.wsq-opt.wrong .l{background:#ef4444;color:#2a0707;border-color:#ef4444}
.wsquiz.locked .wsq-opt{cursor:default}
.wsquiz-actions{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.wsq-btn{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;border:none;padding:12px 22px;border-radius:10px;font-weight:700;cursor:pointer;font-size:15px;font-family:inherit}
.wsq-btn:disabled{opacity:.45;cursor:not-allowed}
.wsq-btn.ghost{background:none;border:1px solid var(--border);color:var(--text)}
.wsquiz-result{margin-top:18px;font-size:17px;color:var(--muted)}
.wsquiz-result b{color:var(--white);font-size:22px}
body.mode-present .wsquiz{display:none}

/* Added for the Control-backed version: the name field, and the failure state. */
/* Sits after the last question, so it takes the same top rule the questions use to
   separate from each other rather than floating loose above the buttons. */
.wsquiz-name{display:block;border-top:1px solid var(--border);padding-top:20px;margin:0}
.wsquiz-name span{display:block;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.wsquiz-name input{width:100%;box-sizing:border-box;background:var(--dark);border:1px solid var(--border);border-radius:10px;padding:11px 14px;color:var(--text);font-size:15px;font-family:inherit}
.wsquiz-name input:focus{outline:none;border-color:var(--accent)}
.wsq-loading,.wsq-error{padding:18px 0;color:var(--muted);font-size:15px}
.wsq-error b{color:var(--white);display:block;margin-bottom:4px}