/* Question variety in the interactive lessons (F25, 6 October 2026): fill the missing words from a word bank, pick one
   of each pair, true or false, and find and fix the mistake. Drawn by assets/question-variants.js inside the lesson's
   question card (.cj-card). Right parts turn green and wrong parts amber in place, as the multiple-choice options do,
   each with a word for screen readers, so colour is never the only signal. */
.cj-shell .qv-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cj-shell .qv-sentence{max-width:640px;margin:14px auto 6px;font-size:18px;line-height:2.25;color:var(--cj-ink,#30304a);text-align:center}
.cj-shell .qv-sentence b{font-weight:600}

/* gaps and the word bank */
.cj-shell .qv-gap{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;min-width:96px;min-height:44px;margin:2px 4px;padding:4px 12px;border:0;border-bottom:3px dashed #8f80c9;border-radius:10px 10px 4px 4px;background:#faf8ff;color:#514569;font:inherit;font-weight:600;line-height:1.3;cursor:pointer}
.cj-shell .qv-gap.qv-filled{border-bottom-style:solid;background:#f3effc}
.cj-shell .qv-gap.qv-active{background:#efe9fd;border-bottom-color:#7060c9;box-shadow:inset 0 0 0 2px #b6a6df}
.cj-shell .qv-blank{display:inline-block;width:56px;height:1em}
.cj-shell .qv-bank{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:640px;margin:18px auto 20px}
.cj-shell .qv-chip{min-height:44px;padding:8px 18px;border:1px solid #dfe2ed;border-bottom:3px solid #e3e5ee;border-radius:999px;background:#fff;color:#4f4c68;font:inherit;font-size:15px;line-height:1.3;cursor:pointer}
.cj-shell .qv-chip.qv-used{background:#f4f4f8;border-style:dashed;border-color:#a9a6bf;color:#6f6c85}

/* one of each pair */
.cj-shell .qv-rows{display:grid;gap:14px;max-width:660px;margin:14px auto 20px}
.cj-shell .qv-row{background:#fff;border:1px solid #eceef5;border-radius:14px;padding:12px 16px 6px;text-align:left}
.cj-shell .qv-row .qv-sentence{margin:4px 0;text-align:left;font-size:16px;line-height:2.3}
.cj-shell .qv-ask{margin:0;font-size:13px;line-height:1.5;color:var(--cj-muted,#7b7e95)}
.cj-shell .qv-pair{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;vertical-align:middle}
.cj-shell .qv-or{font-size:12px;color:#6f6c85}
.cj-shell .qv-choice{min-height:44px;padding:6px 14px;border:1px solid #d9d3ec;border-bottom:3px solid #d9d3ec;border-radius:999px;background:#faf8ff;color:#514569;font:inherit;font-size:15px;line-height:1.3;cursor:pointer}
.cj-shell .qv-choice.qv-on,.cj-shell .qv-word.qv-on,.cj-shell .qv-fix.qv-on{background:#efe9fd;border-color:#7060c9;color:#3f3570}

/* true or false */
.cj-shell .qv-claim{max-width:610px;margin:12px auto 4px;padding:14px 18px;border-left:4px solid #b6a6df;border-radius:6px 14px 14px 6px;background:#f7f5fd;text-align:left}
.cj-shell .qv-claim p{margin:4px 0 0;font-size:17px;line-height:1.55;color:var(--cj-ink,#30304a)}
.cj-shell .qv-claim-label{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#7060c9;font-weight:700}
.cj-shell .qv-tf{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:610px;margin:14px auto 0}
.cj-shell .qv-tf .cj-tile{justify-content:center;text-align:center;font-weight:600;font-size:16px!important}

/* find and fix the mistake */
.cj-shell .qv-statement{max-width:640px;margin:14px auto;padding:12px 14px;background:#fff;border:1px solid #eceef5;border-radius:14px;font-size:17px;line-height:2.3;text-align:left}
.cj-shell .qv-word{display:inline-block;min-height:40px;margin:0;padding:2px 5px;border:1px solid transparent;border-bottom:2px dotted #8f80c9;border-radius:8px;background:transparent;color:inherit;font:inherit;line-height:1.5;cursor:pointer}
.cj-shell .qv-fixes{display:grid;gap:10px;max-width:610px;margin:6px auto 18px}

/* in-place marking: colour plus a tick or a cross */
.cj-shell .qv-mark{display:inline-flex;align-items:center;margin-left:6px;font-weight:700;line-height:1}
.cj-shell .qv-mark svg{width:15px;height:15px}
.cj-shell .qv-right,.cj-shell .qv-right:disabled{background:#edf6ed!important;border-color:#9fcaa9!important;border-bottom-color:#7fb68c!important;color:#456f52!important;box-shadow:none!important;opacity:1}
.cj-shell .qv-wrong,.cj-shell .qv-wrong:disabled{background:#fff4e3!important;border-color:#ebc994!important;border-bottom-color:#ddb06a!important;color:#8a6232!important;box-shadow:none!important;opacity:1}
.cj-shell .qv-gap:disabled,.cj-shell .qv-chip:disabled,.cj-shell .qv-choice:disabled,.cj-shell .qv-word:disabled{cursor:default}
.cj-shell .qv-word:disabled{color:var(--cj-ink,#30304a);opacity:1}
.cj-shell .qv-gap:disabled{color:#514569;opacity:1}
.cj-shell .qv-chip:disabled:not(.qv-used),.cj-shell .qv-choice:disabled:not(.qv-on):not(.qv-right):not(.qv-wrong){color:#77748f;opacity:1}

.cj-shell .qv-gap:focus-visible,.cj-shell .qv-chip:focus-visible,.cj-shell .qv-choice:focus-visible,.cj-shell .qv-word:focus-visible{outline:3px solid #4540EB;outline-offset:2px}
@media(hover:hover) and (pointer:fine){
  .cj-shell .qv-chip:hover:not(:disabled),.cj-shell .qv-choice:hover:not(:disabled),.cj-shell .qv-gap:hover:not(:disabled){border-color:#b6a6df;background:#f5f1fd}
  .cj-shell .qv-word:hover:not(:disabled){background:#f5f1fd}
}
@media(max-width:600px){
  .cj-shell .qv-sentence{font-size:16px;line-height:2.2}
  .cj-shell .qv-gap{min-width:76px;padding:4px 8px}
  .cj-shell .qv-chip,.cj-shell .qv-choice{padding:6px 12px;font-size:14px}
  .cj-shell .qv-statement{font-size:16px;padding:10px}
  .cj-shell .qv-row{padding:10px 12px 4px}
}
@media(prefers-reduced-motion:reduce){.cj-shell .qv-gap,.cj-shell .qv-chip,.cj-shell .qv-choice,.cj-shell .qv-word{transition:none}}