/* Task mode: the exam, Before you finish, fixes and the answer review. Warm paper, one cream sheet, navy actions.
   No scenery, no decorative monster. The question screens follow the question boards in the design artifact
   (QuestionPick, QuestionType, QuestionBoxes, QuestionBeside, QuestionChoice, QuestionBuild, QuestionPhone,
   QuestionFeedback, FinishPaper, FinishPaperAll). Built on the parts and paper tokens in mq.css. */

body[data-mode="task"] #app{max-width:var(--maxw);padding:0 var(--gut)}
.qz{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;color:var(--pInk)}
/* The boards' column: 1180px less its gutters, centred. */
.qz-top,.qz-body,.qz-act{width:100%;max-width:calc(1180px - 2 * var(--gut));margin-left:auto;margin-right:auto}

/* ---- The strip above every question: Leave, the subject, the trail, the timer, and the position, which opens
   All questions. Leaving is not going back a question, so it is a cross, never a second back arrow. */
.qz-top{position:relative;padding-top:18px}
.qz-top-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.qz-leave{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;min-height:var(--tap);padding:8px 12px 8px 4px;border:0;border-radius:12px;background:none;color:var(--pInk3);font:700 16px/1.2 var(--fD)}
.qz-leave svg{width:22px;height:22px;stroke-width:2.4}
.qz-leave:hover{color:var(--pInk)}
.qz-subject{margin:0;font:700 19px/1.2 var(--fD);color:var(--pInk)}
.qz-trail{flex:999 1 240px;min-width:0;display:flex;align-items:center;gap:5px;margin:0;padding:0;list-style:none}
.qz-trail li{flex:1 1 0;height:7px;border-radius:6px;background:rgba(20,24,43,.14)}
.qz-trail li.is-done{background:#9daad0}
.qz-trail li.is-now{flex:2.6 1 0;height:12px;background:var(--navyHi)}
.qz-timer{display:inline-flex;align-items:center;gap:7px;min-height:40px;font:700 17px/1 var(--fD);font-variant-numeric:tabular-nums;color:var(--pInk3)}
.qz-timer svg{width:20px;height:20px}
.qz-all{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);padding:8px 14px;border:0;border-radius:12px;background:none;color:var(--pInk2);font:600 17px/1.2 var(--fD);transition:color 120ms}
.qz-all:hover{color:var(--pInk)}
.qz-all-t{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#2b3c75}
.qz-chev{width:18px;height:18px;stroke-width:2.6;transition:transform .2s}
.qz-all[aria-expanded="true"] .qz-chev{transform:rotate(180deg)}
.qz-nav{margin-top:12px;padding:16px 18px 18px;border-radius:12px;background:rgba(255,252,245,.74);box-shadow:inset 0 0 0 1px var(--pLine)}
.qz-nav[hidden]{display:none}
.qz-nav-key{display:flex;flex-wrap:wrap;gap:20px;margin:0 0 13px;font:600 14px/1.3 var(--fD);color:var(--pInk2)}
.qz-nav-key span{display:inline-flex;align-items:center;gap:8px}
.qz-k{width:16px;height:16px;border-radius:5px;background:var(--gap);box-shadow:inset 0 0 0 2px var(--gapLine)}
.qz-k.is-done{background:var(--sel);box-shadow:inset 0 0 0 2px var(--navyHi)}
.qz-tiles{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.qz-tile{min-width:var(--tap);height:var(--tap);display:inline-flex;align-items:center;justify-content:center;padding:0 6px;border:0;border-radius:11px;background:var(--gap);box-shadow:inset 0 0 0 2px var(--gapLine);color:var(--gapInk);font:800 18px/1 var(--fH);transition:transform 110ms,box-shadow 110ms}
.qz-tile.is-done{background:var(--sel);box-shadow:inset 0 0 0 2px var(--navyHi);color:var(--navyHi)}
.qz-tile.is-now{background:var(--navyHi);box-shadow:none;color:#fff}
.qz-tile:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 2.5px #2b3c75}
.qz-nav-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:15px;padding-top:14px;border-top:1px solid var(--pLine)}
.qz-tally{font:500 15px/1.4 var(--fD);color:var(--pInk2)}

/* ---- The sheet. One cream sheet for the question; a story or picture gets its own sheet beside it. */
.qz-body{flex:1 0 auto;padding-top:16px}
.qz-sheet{min-width:0;background:var(--sheet);border-radius:6px;box-shadow:var(--sheetShadow);padding:clamp(26px,3.4vw,46px)}
.qz-task-build,.qz-task-cloze.is-checked{padding:34px 44px 36px}
.qz.has-source:not(.fx-task) .qz-body{display:flex;flex-wrap:wrap;align-items:flex-start;gap:18px}
.qz.has-source .qz-sheet{flex:1 1 420px;padding:30px 34px 32px}
.qz-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px}
.qz-head.has-count{padding-bottom:20px;border-bottom:1px solid var(--pRule)}
.qz-text{margin:0;max-width:34ch;font:700 clamp(26px,2.6vw,32px)/1.3 var(--fR);color:var(--pInk);white-space:pre-line;text-wrap:pretty}
.qz-text:lang(zh){font-family:var(--zh),var(--fR);letter-spacing:.02em}
.qz.has-source .qz-text{font-size:28px}
.qz-title{margin:0;font:700 clamp(28px,3vw,36px)/1.12 var(--fH);letter-spacing:-.008em;color:var(--pInk)}
.qz-text:focus,.qz-title:focus,.qz-h:focus{outline:0}
.qz-count{margin:0;display:inline-flex;align-items:baseline;gap:9px;font:500 18px/1.2 var(--fD);color:var(--pInk2)}
.qz-count b{font:800 32px/1 var(--fH)}
.qz-count.is-full{color:var(--navyHi)}
.qz-meta{margin:0;font:600 17px/1.3 var(--fD);color:var(--ink2)}

/* A story or picture */
.qz-h{margin:0;font:700 24px/1.2 var(--fH);color:var(--pInk)}
.qz-passage{margin-top:16px;max-height:430px;overflow:auto;padding-right:6px}
.qz-passage p{margin:0 0 14px;font:400 20px/1.8 var(--fR);color:#1c2032}
.qz-passage p:last-child{margin-bottom:0}
.qz-passage :lang(zh){font-family:var(--zh),var(--fR)}
.qz-bank{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:12px 16px;border-radius:12px;background:#fff9ec;box-shadow:inset 0 0 0 1.5px #ebe0c7}
.qz-bank b{font:700 18px var(--fD)}
.qz-bank span{font:700 21px/1.5 var(--fR);letter-spacing:.01em}
.qz-bank small{flex-basis:100%;font:500 16px var(--fD);color:var(--pInk2)}
.qz-blank{padding:0 4px;border-radius:5px;background:var(--armed);color:inherit;box-shadow:0 0 0 2px var(--armedLine)}
.qz-fig{margin:16px 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.qz-fig img{display:block;width:100%;max-height:min(56vh,520px);height:auto;border-radius:12px;border:1.5px solid #ebe0c7;background:#fff9ec;object-fit:contain}
.qz-fig figcaption{margin:0}
.qz-jump,.qz-back-src{display:none;margin:0}

/* ---- Answers. Waiting, a gap or box is the paper's cream; filled, it wears the kit's colour for her own choice (a navy
   tint). Green waits until something is marked right. */
.qz-answer{margin-top:30px;display:flex;flex-direction:column;gap:var(--s4)}
.qz-head.has-count+.qz-answer{margin-top:26px}
.qz.has-source .qz-answer{margin-top:24px}
.qz-in-col{display:flex;flex-direction:column;gap:12px;min-width:0}

/* Choices: picked with a tap, never submitted by it */
.qz-opts{display:grid;grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));gap:12px}
.qz-opts.is-words{max-width:760px}
.qz-opts.is-long{max-width:820px}
.qz.has-source .qz-opts{max-width:none}
.qz.has-source .qz-opts.has-long-word{grid-template-columns:minmax(0,1fr)}
.qz-opt{position:relative;display:flex;align-items:center;gap:16px;min-height:66px;padding:12px 20px;border:0;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 2px var(--pLine),0 3px 0 rgba(20,24,43,.07);color:var(--pInk);font:700 21px/1.35 var(--fR);text-align:left;transition:transform 130ms cubic-bezier(.3,1.3,.4,1),box-shadow 130ms,background 130ms}
.qz-opts.is-words .qz-opt{min-height:80px;font-size:23px}
.qz-opts.is-tiny .qz-opt{min-height:80px;justify-content:center;font-size:28px}
.qz.has-source .qz-opts.is-words .qz-opt{min-height:76px;font-size:26px}
.qz.has-source .qz-opts.is-long .qz-opt{min-height:64px;padding:12px 18px;font-size:20px}
.qz-opt:hover:not(:disabled){transform:translateY(-3px)}
.qz-radio{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 2px #c9bfa8}
.qz-opt-t{flex:1 1 auto;min-width:0}
.qz-opts.is-tiny .qz-opt-t{flex:0 1 auto}
.qz-opt.is-picked,.qz-opt[aria-pressed="true"]{background:var(--sel);box-shadow:inset 0 0 0 2.5px var(--navyHi)}
.qz-opt.is-picked .qz-radio,.qz-opt[aria-pressed="true"] .qz-radio{background:#fff;box-shadow:inset 0 0 0 9px var(--navyHi)}
.qz-opt:disabled{cursor:default}
.qz-opt.is-right{background:var(--okTint);box-shadow:inset 0 0 0 2.5px var(--okLine)}
.qz-opt.is-answer{box-shadow:inset 0 0 0 2.5px var(--okLine)}
.qz-opt.is-right .qz-radio,.qz-opt.is-answer .qz-radio{background:#fff;box-shadow:inset 0 0 0 9px var(--ok)}
.qz-opt.is-mine{background:#fff8e9;box-shadow:inset 0 0 0 2.5px #e0a33c}
.qz-opt.is-mine .qz-radio{background:#fff;box-shadow:inset 0 0 0 9px #b2742e}
.qz-opt.is-dim{opacity:.6}
.qz-tag{display:inline-flex;align-items:center;gap:4px;margin-left:auto;padding:2px 10px;border-radius:999px;background:#fff;font:700 15px/1.3 var(--fD);color:var(--pInk)}
.qz-tag svg{width:16px;height:16px}
/* Short choices sit up to four across; on a phone two across, so “She” or “12” never pushes the page sideways. */
@media (max-width:480px){.qz-opts.is-tiny{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* One typed answer: a big box in the paper's own type */
.qz-lab{font:700 16px/1.3 var(--fD);color:var(--pInk2)}
.qz-lab+.qz-in{margin-top:-2px}
.qz-in{width:100%;max-width:560px;min-height:76px;padding:0 24px;border:0;border-radius:12px;background:var(--gap);box-shadow:inset 0 0 0 2px var(--gapLine);color:var(--pInk);font:700 32px/1.2 var(--fR);caret-color:var(--navyHi);transition:box-shadow 130ms,background 130ms}
.qz-in.is-on{background:var(--sel);box-shadow:inset 0 0 0 2.5px var(--navyHi)}
.qz-in:focus,.qz-in:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--navyHi),0 0 0 4px rgba(38,59,115,.16)}
.qz-in:not(.is-on):focus{background:var(--armed)}
.qz-in[readonly]{cursor:default}
.qz-in.is-num{max-width:320px;min-height:80px;font:800 44px/1 var(--fH);letter-spacing:.02em;text-align:center}
/* Several boxes in a sentence or a sum: tap a box, then the keys */
.qz-parts{display:flex;flex-direction:column;gap:22px}
.qz-part{display:grid;grid-template-columns:minmax(110px,max-content) minmax(0,1fr);align-items:center;gap:16px}
.qz-part-q{font:700 24px/1.3 var(--fR);color:#1c2032}
.qz-part.is-inline{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;font:700 40px/1.2 var(--fR);color:#1c2032}
.qz-box{width:260px;max-width:100%;min-height:80px;font-size:30px}
.qz-box.is-num{width:auto;min-width:112px;max-width:180px;field-sizing:content;height:80px;padding:0 16px;font:800 44px/1 var(--fH);text-align:center}
.qz-part.is-inline .qz-box{flex:0 0 auto}
/* Boxes in a row with the paper's signs between ("[ ] − [ ] = [ ]"): they share the line, so a phone keeps them on one line */
.qz-row{display:flex;align-items:center;gap:14px;font:700 40px/1.2 var(--fR);color:#1c2032}
.qz-row .qz-box.is-num{flex:1 1 0;min-width:0;max-width:150px;field-sizing:fixed;padding:0 8px}
.qz-tie{display:inline-flex;align-items:center;gap:4px}
.qz-parts.is-zh .qz-part{grid-template-columns:64px minmax(0,1fr);padding:10px 14px;border-radius:12px;background:#fff9ec;box-shadow:inset 0 0 0 1.5px #ebe0c7}
.qz-parts.is-zh .qz-part-q{font:700 44px/1 var(--zh),sans-serif;text-align:center}
.qz-pad-hint{margin:4px 0 0;font:600 17px/1.4 var(--fD);color:var(--pInk2)}
/* The number pad: 1–9, 0, delete and clear, three across. Beside the boxes on a big screen, under them on a phone. */
.qz-answer.has-pad{flex-direction:row;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:34px}
.qz-answer.has-pad .qz-in-col{flex:1 1 380px}
.qz-pad{flex:0 0 276px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.qz-key{display:flex;align-items:center;justify-content:center;min-height:64px;min-width:0;border:0;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--pLine),0 3px 0 rgba(20,24,43,.07);color:var(--pInk);font:800 30px/1 var(--fH);font-variant-numeric:tabular-nums;transition:transform 100ms,background 100ms}
.qz-key.is-fn{color:var(--pInk2)}
.qz-key.is-fn svg{width:32px;height:32px;stroke-width:2.2}
.qz-key:active{transform:translateY(2px);background:#f3ecdc}
/* Pinyin tone keys keep the caret where it was */
.qz-tones{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:var(--s4);padding:var(--s4);border-radius:12px;background:#fff9ec;box-shadow:inset 0 0 0 1.5px #ebe0c7}
.qz-tones-h{display:flex;flex-direction:column;gap:4px}
.qz-tones-h b{font:700 19px/1.3 var(--fD)}
.qz-tones-h span{font:500 16px/1.4 var(--fD);color:var(--pInk2)}
.qz-tone-keys{display:grid;grid-template-columns:repeat(4,minmax(48px,1fr));gap:6px}
.qz.has-source .qz-tones{grid-template-columns:minmax(0,1fr)}
.qz-tone{min-height:var(--tap);border:0;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--pLine),0 2px 0 rgba(20,24,43,.07);color:var(--pInk);font:400 24px/1 var(--fR)}
.qz-tone:active{transform:translateY(1px);background:#f3ecdc}
/* Writing, for Chinese characters only: she cannot type a character without an IME. */
.qz-modes{align-self:flex-start}
.qz .ui-seg{background:#efe7d6;border-color:var(--pLine)}
.qz-hand{display:flex;flex-direction:column;gap:var(--s3)}
.qz-write canvas{display:block;width:100%;aspect-ratio:800/300;height:auto;border-radius:12px;background:#fff linear-gradient(180deg,transparent 0,transparent 32%,#e6dccb 32%,#e6dccb 33%,transparent 33%,transparent 66%,#e6dccb 66%,#e6dccb 67%,transparent 67%);box-shadow:inset 0 0 0 2px var(--gapLine);touch-action:none;cursor:crosshair}
.qz-write.is-zi canvas{aspect-ratio:900/300}
.qz-write-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}
.qz-note{display:flex;align-items:center;gap:8px;margin:0;font:500 16px/1.4 var(--fD);color:var(--pInk2)}
.qz-note svg{width:22px;height:22px;flex:0 0 auto}
.qz-note.is-warn{padding:10px 14px;border-radius:12px;background:var(--laterTint);color:var(--later)}
#qz-sent{padding:8px 12px;border-radius:12px;background:#fff9ec;box-shadow:inset 0 0 0 1px #ebe0c7;color:var(--pInk)}
.qz-tip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;padding:8px 8px 8px 14px;border-radius:12px;background:var(--sel);box-shadow:inset 0 0 0 1px #c9d3ea;font:600 17px/1.4 var(--fD);color:var(--pInk)}
.qz-tip>svg{width:22px;height:22px;flex:0 0 auto}
.qz-tip>span{flex:1 1 220px}
.qz-tip-x{margin-left:auto;font-size:16px}
.qz-tip-x svg{width:18px;height:18px}
.qz-msg{margin:12px 0 0;font:700 18px/1.4 var(--fD);color:var(--err)}
.qz-msg:empty{display:none}

/* ---- Gap-fills (QuestionChoice): the story is the question, every gap live at once. The words sit below a rule. */
.qz-cloze-text{margin-top:26px;max-width:72ch;font:400 21px/2.15 var(--fR);color:#1c2032}
.qz-cloze-text p{margin:0 0 10px}
.qz-cloze-text p:last-child{margin-bottom:0}
.qz-slot{display:inline-flex;align-items:center;justify-content:center;vertical-align:baseline;min-width:142px;min-height:var(--tap);padding:2px 14px;border:0;border-radius:12px;background:var(--gap);box-shadow:inset 0 0 0 2px var(--gapLine);color:var(--gapInk);font:700 21px/1.2 var(--fR);transition:background 130ms,box-shadow 130ms,transform 130ms}
.qz-slot.is-armed{background:var(--armed);box-shadow:inset 0 0 0 2.5px var(--armedLine)}
.qz-slot.is-on{background:var(--sel);box-shadow:inset 0 0 0 2.5px var(--navyHi);color:var(--pInk)}
.qz-slot.is-over{background:#d8dff4;box-shadow:inset 0 0 0 2.5px var(--navyHi);transform:scale(1.05)}
.qz-slot:disabled{cursor:default}
.qz-bank-zone{margin-top:32px;padding-top:24px;border-top:1px solid var(--pRule)}
.qz-bank-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:14px}
.qz-hint{margin:0;font:500 17px/1.4 var(--fD);color:var(--pInk2)}
.qz-undo{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);margin:-14px -8px;padding:0 8px;border:0;border-radius:8px;background:none;color:var(--pInk2);font:600 15px/1.2 var(--fD)}
.qz-undo svg{width:17px;height:17px;stroke-width:2}
.qz-undo:hover{color:var(--pInk)}
.qz-words{display:flex;flex-wrap:wrap;gap:11px;min-height:62px}
.qz-chip{min-height:58px;display:inline-flex;align-items:center;padding:10px 22px;border:0;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 2px var(--pLine),0 3px 0 rgba(20,24,43,.07);color:var(--pInk);font:700 21px/1.2 var(--fR);cursor:grab;touch-action:manipulation;transition:transform 130ms cubic-bezier(.3,1.3,.4,1),box-shadow 130ms}
.qz-chip:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 2px var(--pLine),0 12px 20px -10px rgba(20,24,43,.45)}
.qz-chip:active{cursor:grabbing;transform:translateY(1px) scale(1.04)}
.qz-chip.is-picked{background:#2b3c75;color:var(--sheet);box-shadow:inset 0 0 0 2px #192750,inset 0 1px rgba(255,255,255,.2)}
.qz-all-placed{margin:0;align-self:center;font:400 19px/1.4 var(--fR);color:#8a8072}

/* ---- Building a sentence (QuestionBuild): the given first word is locked; tiles go into slots; the app adds the end mark. */
.qz-task-build .qz-title{font-size:34px}
.qz-task-build .qz-head.has-count{padding-bottom:18px}
.qz-given-line{margin:22px 0 0;font:400 19px/1.4 var(--fR);color:#5a5444}
.qz-build{display:flex;flex-wrap:wrap;align-items:center;gap:13px;min-height:96px;margin-top:14px}
.qz-head+.qz-build{margin-top:26px}
.qz-given{position:relative;min-width:128px;min-height:92px;display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;border-radius:12px;background:#f1eada;box-shadow:inset 0 0 0 2px #c9bb9d;color:#4a4536;font:700 27px/1.2 var(--fR)}
.qz-given svg{position:absolute;top:9px;right:10px;width:17px;height:17px;color:#9a8f77;stroke-width:2.3}
.qz-slot.is-tile{min-width:176px;min-height:92px;padding:10px 20px;font-size:27px;box-shadow:inset 0 0 0 2px var(--gapLine)}
.qz-slot.is-tile.is-armed{box-shadow:inset 0 0 0 3px var(--armedLine)}
.qz-slot.is-tile.is-on,.qz-slot.is-tile.is-over{box-shadow:inset 0 0 0 3px var(--navyHi)}
.qz-end{align-self:center;font:700 27px/1 var(--fR);color:#9a8f77}
.qz-task-build .qz-bank-zone{margin-top:30px;padding-top:22px}
.qz-task-build .qz-words{gap:12px}
.qz-task-build .qz-chip{min-height:62px;padding:11px 24px;font-size:24px}

/* ---- Marked as she goes (QuestionFeedback): her own work stays where it stands, under a teacher's highlighter, and one
   card says the sentence read properly. Right is green; one to look at again is amber, never red. */
.qz-cloze.is-checked .qz-cloze-text{margin-top:22px;max-width:74ch;font-size:20px;line-height:2.05}
.qz-cloze.is-checked .qz-head.has-count{padding-bottom:18px}
.qz-cloze.is-checked .qz-count{font-size:17px}
.qz-hl{padding:0 .14em;font-weight:700;color:inherit;background-color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;background-repeat:no-repeat;background-position:0 0;background-size:0% 100%;background-image:linear-gradient(transparent 54%,rgba(157,170,208,.55) 54%,rgba(157,170,208,.55) 95%,transparent 95%);animation:qz-wipe .34s cubic-bezier(.3,.8,.4,1) both}
.qz-hl.is-ok{background-image:linear-gradient(transparent 54%,rgba(109,186,126,.62) 54%,rgba(109,186,126,.62) 95%,transparent 95%)}
.qz-hl.is-fix{background-image:linear-gradient(transparent 54%,rgba(242,187,86,.72) 54%,rgba(242,187,86,.72) 95%,transparent 95%)}
@keyframes qz-wipe{from{background-size:0% 100%}to{background-size:100% 100%}}
.qz-x{display:inline-flex;margin-left:5px;vertical-align:-1px;color:#b2742e}
.qz-x svg{width:17px;height:17px;stroke-width:3}
.qz-fb-slot:empty{display:none}
.qz-fb-slot:not(:empty){margin-top:28px}
.qz-verdict{--d:.5s;display:flex;gap:20px;padding:26px 30px 28px;border-radius:14px;border-left:6px solid #e0a33c;background:linear-gradient(100deg,#fff8e9,#fffbf2 70%)}
.qz-verdict:focus{outline:0}
.qz-verdict>svg{flex:0 0 auto;width:30px;height:30px;margin-top:7px;color:#b2742e;stroke-width:2.3}
.qz-verdict.is-ok{border-left-color:#4f9a5d;background:linear-gradient(100deg,#edf6ee,#f7fbf6 70%)}
.qz-verdict.is-ok>svg{color:var(--ok)}
.qz-verdict.is-wait{border-left-color:#9daad0;background:linear-gradient(100deg,#eef1f9,#f8f9fc 70%)}
.qz-verdict.is-wait>svg{color:var(--navyHi)}
.qz-v-in{min-width:0}
.qz-v-kick{margin:0 0 9px;font:700 15px/1.3 var(--fD);color:#8a6410}
.qz-v-main{margin:0;font:700 30px/1.25 var(--fH);color:var(--pInk)}
.qz-v-line{margin:0;font:400 29px/1.5 var(--fR);color:var(--pInk)}
.qz-v-line+.qz-v-line,.qz-v-why+.qz-v-line{margin-top:14px}
.qz-v-why{margin:14px 0 0;max-width:54ch;font:400 19px/1.5 var(--fR);color:#5a5444}
.qz-verdict .qz-hl{animation-delay:.78s}
/* Older parts kept for the practice question in set-up and the fix screens */
.qz-fb{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;font:400 19px/1.45 var(--fR)}
.qz-fb:focus{outline:0}
.qz-fb:focus-visible{outline:3px solid #1b2a6b;outline-offset:2px}
.qz-mark{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:#fff;color:inherit}
.qz-mark svg{width:22px;height:22px}
.qz-say{display:flex;flex-direction:column;gap:2px}
.qz-say b{font-weight:700}
.qz-fb.is-ok{background:var(--okTint);color:var(--ok)}
.qz-fb.is-ans{background:var(--ansTint);color:var(--ans)}
.qz-fb.is-later{background:var(--laterTint);color:var(--later)}

/* ---- The foot: the way back, and the one thing to do next, pinned to the bottom of the screen. The main button is
   never faded: pressed too early it stays put and one amber line says what is missing. */
.qz-foot{position:sticky;bottom:0;z-index:12;margin:22px calc(-1 * var(--gut)) 0;padding:0 var(--gut) env(safe-area-inset-bottom);background:var(--paperLow);border-top:1px solid rgba(20,24,43,.1)}
@media (max-height:560px){.qz-foot{position:static}}
.qz-act{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:14px 0 20px}
.qz-foot-l,.qz-foot-r{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.qz-foot-r{margin-left:auto}
.qz-prev{color:var(--pInk3)}
.qz-prev:hover{color:var(--pInk)}
.qz-prev svg{stroke-width:2.4}
.qz-nudge{display:flex;align-items:center;gap:8px;margin:0 4px 0 0;font:700 16px/1.3 var(--fD);color:var(--later)}
.qz-nudge svg{width:20px;height:20px;flex:0 0 auto}
.qz-submit svg{stroke-width:3}

/* ---- Before you finish (FinishPaper): only what is unfinished, never right or wrong */
.ag .qz-top-row{gap:20px}
.ag-prog{flex:999 1 260px;min-width:0;display:flex;flex-direction:column;gap:7px}
.ag-prog-t{font:500 15px/1.3 var(--fD);color:var(--pInk2)}
.ag .qz-body{padding-top:18px;padding-bottom:34px}
.ag-sheet{padding:38px 46px 40px}
.ag-kicker{margin:0;font:500 16px/1.3 var(--fD);color:var(--pInk2)}
.ag .qz-title{margin-top:9px;font-size:42px;line-height:1.08;letter-spacing:-.012em}
.ag-lead{margin:14px 0 0;font:400 21px/1.5 var(--fR);color:#4a4536}
.ag-list{display:flex;flex-direction:column;gap:10px;margin:26px 0 0;padding:0;list-style:none}
.ag-q{display:flex;align-items:center;gap:16px;width:100%;padding:15px 18px;border:0;border-radius:12px;background:#fff9ec;box-shadow:inset 0 0 0 1.5px #ebe0c7;color:var(--pInk);text-align:left;transition:box-shadow 130ms,transform 130ms}
.ag-q:hover{transform:translateX(3px);box-shadow:inset 0 0 0 2px var(--armedLine)}
.ag-q>svg{flex:0 0 auto;width:22px;height:22px;color:#9a8f77;stroke-width:2.4}
.ag-num{flex:0 0 auto;width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:var(--laterTint);box-shadow:inset 0 0 0 2px var(--laterLine);color:var(--later);font:800 21px/1 var(--fH)}
.ag-txt{flex:1 1 auto;min-width:0;display:block}
.ag-n{display:flex;flex-wrap:wrap;align-items:baseline;gap:11px}
.ag-n b{font:700 18px/1.3 var(--fD)}
.ag-st{font:700 14px/1.3 var(--fD);color:var(--later)}
.ag-p{display:block;margin-top:5px;font:400 17px/1.45 var(--fR);color:var(--pInk2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:30px}
.ag-note{margin:20px 0 0;font:500 15px/1.55 var(--fD);color:var(--pInk2)}
/* Every one answered (FinishPaperAll): a narrow sheet, centred, with every number as the way back. */
.ag-sheet.is-all{width:100%;max-width:680px;margin:16px auto 0;padding:40px 48px 44px;box-sizing:border-box}
.ag-again{margin-top:30px;padding-top:24px;border-top:1.5px solid var(--pRule)}
.ag-again-h{margin:0 0 14px;font:600 16px/1.4 var(--fD);color:var(--pInk2)}
.ag-tiles{display:grid;grid-template-columns:repeat(auto-fill,52px);gap:9px;margin:0;padding:0;list-style:none}
.ag-tiles .qz-tile{width:52px;height:52px;font-size:19px}
.is-all .ag-act{margin-top:34px}

/* ---- Fix screens and the answer review (finish.js) keep their own bar and layout until their own stage. */
.qz-bar{padding:var(--s3) 0 var(--s2)}
.qz-bar-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:var(--s3) var(--s4)}
.qz-logo{display:block;width:clamp(120px,12vw,170px);height:auto}
.qz-bar .qz-subject{text-align:center;font:600 clamp(24px,2.4vw,32px)/1.2 var(--fH);color:var(--ink)}
.fx-task .qz-top,.fx-task .qz-body{max-width:none}
.fx-task .qz-body{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);align-items:start;padding:var(--s3) 0 var(--s5)}
.fx-task:not(.has-source) .qz-task{width:100%;max-width:1040px;justify-self:center}
.fx-task .qz-source,.fx-task .qz-task{min-width:0;padding:clamp(18px,2.6vw,36px)}
.fx-task .qz-task{display:flex;flex-direction:column;gap:var(--s4)}
.fx-task .qz-source{display:flex;flex-direction:column;gap:var(--s3)}
.qz.fx-task .qz-answer{margin-top:0}
.fx-task .qz-passage{max-height:none;margin-top:0;padding-right:0}
@media (min-width:900px){
.fx-task.has-source .qz-body{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.fx-task.has-source .qz-task{grid-column:1;grid-row:1}
.fx-task.has-source .qz-source{grid-column:2;grid-row:1;position:sticky;top:var(--s3);max-height:calc(100vh - 180px);overflow:auto}
}

/* ---- Tablet portrait and phones: one document. The source comes first, then the question, with a way back. */
@media (max-width:899px){
.qz.has-passage .qz-jump,.qz.has-passage .qz-back-src{display:block}
.qz.has-source .qz-passage{max-height:none}
}
/* Phones (QuestionPhone): one row of chrome with the trail under it, the sheet, then the keys and the foot. */
@media (max-width:639px){
.qz-top{padding-top:14px}
.qz-top-row{gap:6px}
.qz-leave{width:var(--tap);justify-content:center;padding:0}
.qz-leave svg{width:24px;height:24px;color:var(--pInk2)}
.qz-leave span,.qz-pos-w,.qz-all-w{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.qz-subject{flex:1 1 auto;font-size:18px}
.qz-all{gap:6px;padding:8px 10px;color:#2b3c75;font-size:16px;font-weight:700}
.qz-trail{order:9;flex:1 1 100%;gap:3px;margin-top:6px}
.qz-nav{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 8px);margin:0;padding:16px;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--pLine),0 20px 40px -20px rgba(20,24,43,.6)}
.qz-nav-key{gap:16px;margin-bottom:12px}
.qz-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.qz-tile{width:100%}
.qz-nav-foot{gap:10px;margin-top:14px;padding-top:12px}
.qz-body{padding-top:14px}
.qz-sheet,.qz.has-source .qz-sheet,.qz-task-build,.qz-task-cloze.is-checked{padding:22px 22px 24px;box-shadow:0 16px 36px -22px rgba(20,24,43,.55),0 2px 4px rgba(20,24,43,.07)}
.qz-text,.qz.has-source .qz-text{font-size:25px;line-height:1.34}
.qz-title{font-size:28px}
.qz-task-build .qz-title{font-size:28px}
.qz-answer{margin-top:20px}
.qz-in{max-width:none}
.qz-in.is-num{max-width:none;min-height:92px;font-size:58px}
.qz-part{grid-template-columns:1fr}
.qz-part.is-inline{font-size:32px}
.qz-row{gap:10px;font-size:32px}
.qz-parts.is-zh .qz-part{grid-template-columns:52px minmax(0,1fr)}
.qz-opts.is-words{grid-template-columns:minmax(0,1fr)}
.qz-opts.is-words .qz-opt,.qz.has-source .qz-opts.is-words .qz-opt{min-height:66px;font-size:22px}
/* The keys sit under the sheet, on the paper, as on the phone board: the sheet's colour moves to the question and the box. */
.qz-answer.has-pad{gap:14px}
.qz-answer.has-pad .qz-in-col{flex-basis:100%}
.qz-pad{flex:1 1 100%}
.qz-key{min-height:62px;background:var(--sheet);font-size:32px}
.qz .qz-task.has-pad{background:none;box-shadow:none;padding:0}
.qz-task.has-pad>.qz-head{padding:22px 22px 0;border-radius:6px 6px 0 0;background:var(--sheet)}
.qz-task.has-pad>.qz-head.has-count{padding-bottom:16px}
.qz-task.has-pad>.qz-back-src{padding:0 22px;background:var(--sheet)}
.qz-task.has-pad .qz-answer{margin-top:0}
.qz-task.has-pad .qz-in-col{padding:20px 22px 24px;border-radius:0 0 6px 6px;background:var(--sheet);box-shadow:0 16px 36px -22px rgba(20,24,43,.55),0 2px 4px rgba(20,24,43,.07);clip-path:inset(0 -40px -60px -40px)}
.qz-task.has-pad .qz-lab{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.qz-tones{grid-template-columns:1fr}
.qz-cloze-text{font-size:19px;line-height:2.2}
.qz-slot{min-width:112px;font-size:19px}
.qz-chip{font-size:19px;padding:10px 18px}
.qz-slot.is-tile,.qz-given{min-width:0;min-height:72px;font-size:23px}
.qz-verdict{gap:14px;padding:20px 20px 22px}
.qz-v-line{font-size:24px}
.qz-v-main{font-size:26px}
/* The same buttons as a big screen, stacked: the way back and the quiet skip share a row, and the main button takes
   the whole width, where a thumb finds it. */
.qz-foot{border-top:0}
.qz-act{gap:10px;padding:10px 0 16px}
.qz-foot-r{display:contents}
.qz-foot-l{order:1;flex:1 1 auto}
.qz-skip{order:2;min-height:var(--tap);padding:10px 16px;font-size:17px}
.qz-nudge{order:3;flex:1 1 100%;justify-content:center;margin:0}
.qz-foot .mq-btn{order:4;flex:1 1 100%}
.ag-sheet{padding:24px 22px 26px}
.ag .qz-title{font-size:32px}
.ag-q{gap:12px;padding:12px 14px}
.ag-act>.mq-btn,.ag-act>.mq-btn2{flex:1 1 100%}
.ag-sheet.is-all{margin-top:4px;padding:26px 22px 28px}
.ag-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}
.ag-tiles .qz-tile{width:100%}
.qz-bar-in{grid-template-columns:auto 1fr auto;gap:var(--s2) var(--s3)}
.qz-bar .qz-subject{display:none}
.fx-task .qz-source,.fx-task .qz-task{padding:var(--s4)}
}
@media (max-width:479px){
.qz-more{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
.qz-opt,.qz-chev,.qz-in,.qz-tile,.qz-chip,.qz-slot,.qz-key,.ag-q{transition:none}
.qz-opt:hover:not(:disabled),.qz-tile:hover,.qz-chip:hover,.qz-chip:active,.qz-key:active,.qz-tone:active,.ag-q:hover{transform:none}
.qz-slot.is-over{transform:none}
.qz-hl{animation:none;background-size:100% 100%}
}