/* quizflow.css: the WAJDQuiz skin, as a real same origin stylesheet.
   These rules used to be injected by quizflow.js as a <style> element. The
   production Content Security Policy sends style-src 'self', which blocks an
   injected inline stylesheet, so the whole Practise it and Prove it interface
   rendered completely unstyled on the live site. Nothing threw an error, which
   is exactly why it went unnoticed: a blocked stylesheet fails silently.
   Keep these rules HERE, in a file. Never move them back into a template string.
   Body font is Roboto, the self-hosted face the rest of the site uses.
   Author: WAJD AI. */

.qf { background: #fff; border-radius: 18px; box-shadow: var(--shadow); padding: 26px; }
.qf-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.qf-bar { flex: 1; height: 8px; background: var(--light-bg); border-radius: 6px; overflow: hidden; }
.qf-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--blue)); transition: width .4s ease; }
.qf-count { font-size: .78rem; font-weight: 800; color: var(--text-light); white-space: nowrap; }
.qf-brand { display: inline-flex; align-items: center; gap: 5px; font-family: 'Poppins', sans-serif; font-weight: 900; font-size: .64rem; letter-spacing: .3px; color: var(--blue); background: var(--cyan-light); border-radius: 12px; padding: 3px 9px; white-space: nowrap; }
.qf-brand img { width: 14px; height: 14px; border-radius: 4px; }
.qf-prompt { font-family: 'Poppins', sans-serif; font-size: 1.2rem; line-height: 1.5; color: var(--navy); margin-bottom: 16px; }
.qf-diagram { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 0 16px; border: 1px solid var(--border); border-radius: 12px; padding: 8px; background: #fff; }
.qf-opts { display: grid; gap: 10px; }
.qf-opt { display: flex; align-items: center; gap: 12px; text-align: left; border: 2px solid var(--border); background: #fff; border-radius: 14px; padding: 14px 16px; font-family: 'Roboto', sans-serif; font-size: 1.02rem; font-weight: 500; color: var(--text-dark); cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.qf-opt:hover:not(.locked) { border-color: var(--cyan); transform: translateY(-1px); }
.qf-opt .qf-mark { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; color: #fff; }
.qf-opts.locked .qf-opt { cursor: default; }
.qf-opt.correct { border-color: var(--success); background: rgba(56,161,105,.08); }
.qf-opt.correct .qf-mark { background: var(--success); border-color: var(--success); }
.qf-opt.wrong { border-color: var(--error); background: rgba(229,62,62,.06); }
.qf-opt.wrong .qf-mark { background: var(--error); border-color: var(--error); }
.qf-row { display: flex; gap: 10px; }
.qf-input { flex: 1; border: 2px solid var(--border); border-radius: 14px; padding: 13px 16px; font-family: 'Roboto', sans-serif; font-size: 1.02rem; outline: none; }
.qf-input:focus { border-color: var(--cyan); }
.qf-check { background: var(--cyan); color: #fff; border: none; border-radius: 14px; padding: 0 22px; font-family: 'Roboto', sans-serif; font-weight: 700; cursor: pointer; }
.qf-fb { border-radius: 14px; padding: 14px 16px; margin-top: 16px; font-size: .95rem; line-height: 1.6; display: none; }
.qf-fb.show { display: block; }
.qf-fb.ok { background: rgba(56,161,105,.1); color: #1f7a4d; }
.qf-fb.no { background: rgba(245,166,35,.12); color: #8a5a00; }
.qf-fb b { font-family: 'Poppins', sans-serif; }
.qf-next { margin-top: 18px; width: 100%; justify-content: center; display: none; }
.qf-next.show { display: flex; }
.qf-results { text-align: center; padding: 18px 6px; }
.qf-ring { width: 120px; height: 120px; margin: 6px auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.8rem; color: #fff; }
.qf-results h2 { font-family: 'Poppins', sans-serif; font-size: 1.4rem; margin-bottom: 6px; color: var(--navy); }
.qf-results p { color: var(--text-mid); line-height: 1.6; max-width: 420px; margin: 0 auto 18px; }
.qf-results .qf-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.qf-support { margin-top: 16px; border: 1.5px solid #cfe0f5; background: #eef4fc; border-radius: 14px; padding: 15px 17px; font-size: .93rem; color: #2a3550; line-height: 1.55; }
.qf-support b { font-family: 'Poppins', sans-serif; color: var(--navy); }
.qf-support-row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.qf-breather { text-align: center; padding: 6px 0 2px; }
.qf-breathe-ring { width: 56px; height: 56px; margin: 6px auto; border-radius: 50%; background: var(--cyan); animation: qf-breathe 4s ease-in-out infinite; }
.qf-breathe-num { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--blue); margin: 4px 0; }
@keyframes qf-breathe { 0%, 100% { transform: scale(.62); opacity: .35; } 50% { transform: scale(1.04); opacity: .6; } }

/* The quiz mounts inside a .panel, and the buttons it builds use the WAJD button
   classes, which live in skills.css. Nothing else is needed here. */