/* =============================================================================
   Quiz mode
   -----------------------------------------------------------------------------
   This is the one screen in Drazil where the student has to read carefully
   and then act, so it gets its own surface rather than borrowing the chat
   card.

   The signature is the ANSWER SHEET at the top of every question: the row of
   squares you fill in on a mark sheet in an exam hall. It is not a progress
   bar dressed up as one - it says where you are, how the attempt is going,
   and it is also the way back to a question you have already done. One
   component doing three jobs, instead of a progress bar and a nav strip and
   a score readout that can disagree with each other.

   The options carry their own letters. They used to be unlabelled, which is
   exactly how a wrong answer key went unnoticed in three notebooks in a row:
   with no letter on the screen, "the key is B" was invisible. The letters
   also make the keyboard shortcuts legible.

   The palette is the app's own theme tokens. This screen follows the theme
   the student picked; it does not invent a second one beside it.
   ========================================================================== */

/* ---- The shell ------------------------------------------------------------
   The card's own padding is dropped so the sheet can bleed to the edges,
   the way the header strip of a paper does. */
.qz-shell{
  /* The quiz card is a flex item of .vbody.qz-wrap, which has a definite
     height. Left alone it would shrink to fit and clip the action bar off
     the bottom, so it is told not to shrink and .vbody does the scrolling. */
  flex:0 0 auto;
  padding:0;max-width:760px;overflow:hidden;border-radius:16px
}
.qz-shell .qz-mode{display:flex;flex-direction:column}

/* The generating states render raw rows straight into .qz-shell, whose
   padding is dropped so the answer-sheet strip can bleed to the edges. Fill
   the edges back in for those states or the text sits on the curve. */
.qz-generating{padding:16px 20px 18px}
.qz-generating .qz-meta{margin-bottom:10px}
.qz-generating .qz-stream{margin:10px 0 0}
/* ---- The answer sheet ----------------------------------------------------- */
.qz-top{display:flex;flex-direction:column;gap:10px;padding:12px 18px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.qz-tophead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.qz-sheet-label{font:600 11px var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--soft);white-space:nowrap}
.qz-sheet{display:flex;flex-wrap:wrap;gap:6px}
.qz-cell{
  width:30px;height:30px;flex:0 0 auto;border:1.5px solid var(--line2);border-radius:7px;
  background:var(--panel);color:var(--soft);font:600 12.5px/1 var(--mono);cursor:pointer;
  display:grid;place-items:center;padding:0;transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.qz-cell:hover{border-color:var(--accent);color:var(--fg)}
.qz-cell.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.qz-cell.bad{background:var(--err);border-color:var(--err);color:#fff}
.qz-cell.part{background:var(--warn);border-color:var(--warn);color:#fff}
/* The question you are on is ringed, not filled - a filled square means
   "answered", and this one has not been answered yet. */
.qz-cell.cur{border-color:var(--accent);color:var(--fg);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 32%,transparent)}
.qz-cell:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.qz-topmeta{display:flex;align-items:baseline;gap:14px;flex:0 0 auto}
.qz-counter{font:13px var(--sans);color:var(--soft);white-space:nowrap}
.qz-counter b{font:600 17px var(--mono);color:var(--fg)}
.qz-score{font:13px var(--sans);color:var(--soft);white-space:nowrap}
.qz-score b{font:600 17px var(--mono);color:var(--accent)}

/* ---- The question --------------------------------------------------------- */
.qz-stage{padding:22px 26px 24px}
.qz-eyebrow{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:600 11.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.qz-eyebrow .qz-dot{opacity:.5}
.qz-q{margin:0 0 18px;font:italic clamp(20px,2.1vw,26px)/1.28 var(--serif);color:var(--fg);letter-spacing:-.01em}
.qz-prompt-line{margin:0 0 14px;font:14px/1.55 var(--sans);color:var(--soft)}

/* ---- The options ---------------------------------------------------------- */
.qz-mc{display:grid;gap:10px;margin:0}
.qz-opt{
  display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--fg);
  padding:13px 15px;font:16px/1.5 var(--read);cursor:pointer;
  transition:border-color var(--dur-layout) var(--ease-out),background var(--dur-layout) var(--ease-out),transform var(--dur-layout) var(--ease-out);
}
.qz-opt:hover:not(:disabled){border-color:var(--accent);background:var(--panel)}
.qz-opt:active:not(:disabled){transform:translateY(1px)}
.qz-opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.qz-opt:disabled{cursor:default;opacity:1}
/* The letter. A mark sheet's bubble: monospaced, boxed, unmissable. */
.qz-k{
  flex:0 0 auto;width:26px;height:26px;margin-top:-1px;border-radius:6px;
  display:grid;place-items:center;background:var(--panel);border:1px solid var(--line2);
  font:600 13px/1 var(--mono);color:var(--soft);
}
.qz-opt-t{flex:1 1 auto;min-width:0}
.qz-opt.correct{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--surface-2))}
.qz-opt.correct .qz-k{background:var(--ok);border-color:var(--ok);color:#fff}
.qz-opt.wrong{border-color:var(--err);background:color-mix(in srgb,var(--err) 12%,var(--surface-2))}
.qz-opt.wrong .qz-k{background:var(--err);border-color:var(--err);color:#fff}

/* ---- The feedback --------------------------------------------------------- */
.qz-feedback{margin-top:18px;padding:0;min-height:1px}
.qz-feedback.done{padding:14px 16px;border-radius:11px;background:var(--surface-2);border:1px solid var(--line);font:14.5px/1.6 var(--read)}
.qz-verdict{font:600 15px/1.4 var(--sans);margin:0 0 5px}
.qz-verdict.good{color:var(--ok)}
.qz-verdict.bad{color:var(--err)}
.qz-feedback .qz-ans{margin-top:8px}
.qz-fill-answer{margin-top:12px;font:15px var(--read);color:var(--soft)}
.qz-fill-answer b{color:var(--fg)}

/* ---- The action bar ------------------------------------------------------- */
.qz-foot{
  display:flex;align-items:center;gap:14px;justify-content:space-between;
  padding:13px 18px;border-top:1px solid var(--line);background:var(--surface-2);
}
.qz-tip{margin:0;font:12.5px/1.45 var(--sans);color:var(--soft)}
.qz-tip kbd{
  display:inline-block;min-width:19px;text-align:center;padding:1px 5px;margin:0 1px;
  border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;background:var(--panel);
  font:600 11.5px/1.5 var(--mono);color:var(--fg);
}
.qz-foot .btn{min-height:44px;padding:0 20px;font-size:15px}
.qz-foot .btn.is-skip{background:transparent;color:var(--soft);border-color:var(--line2)}
.qz-foot .btn.is-skip:hover{color:var(--fg);border-color:var(--accent)}

/* ---- The results ---------------------------------------------------------- */
.qz-done-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:24px 26px 0}
.qz-score-big{display:flex;align-items:baseline;gap:6px}
.qz-score-big b{font:700 54px/1 var(--mono);letter-spacing:-.03em;color:var(--fg)}
.qz-score-big span{font:400 22px/1 var(--mono);color:var(--soft)}
.qz-done-pct{margin:0;font:600 16px var(--mono);color:var(--accent)}
.qz-done-verdict{margin:6px 26px 0;font:italic 400 17px/1.4 var(--serif);color:var(--soft)}
.qz-done-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;padding:20px 26px 4px}
.qz-done-card{border:1px solid var(--line2);border-radius:12px;background:var(--surface-2);padding:15px 16px}
.qz-done-card h3{margin:0 0 10px;font:600 12px var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--soft)}
.qz-done-stats{display:grid;gap:7px;margin:0;font:14px/1.45 var(--sans)}
.qz-done-stats div{display:flex;justify-content:space-between;gap:10px}
.qz-done-stats b{font:600 14px var(--mono)}
.qz-done-acts{display:flex;flex-wrap:wrap;gap:9px;padding:18px 26px 22px}
.qz-done-acts .btn{min-height:42px;padding:0 16px;font-size:14px}
.qz-done .qz-an{margin:0 26px 26px;padding-top:18px;border-top:1px solid var(--line)}
.qz-done #qzMist{margin:0 26px 26px}
.qz-done #qzMist h3{font:600 17px var(--serif)}

/* ---- Narrow screens ------------------------------------------------------- */
@media (max-width:820px){
  .qz-shell{border-radius:0}
  .qz-top{padding:10px 12px;gap:10px;align-items:flex-start;flex-direction:column}
  .qz-sheet{width:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
  .qz-sheet::-webkit-scrollbar{display:none}
  /* On a phone the squares say "answer sheet" on their own, and the label
     was pushing the counter and the score onto a second line. */
  .qz-sheet-label{display:none}
  .qz-cell{width:32px;height:32px}
  .qz-topmeta{width:100%;justify-content:space-between}
  .qz-stage{padding:18px 16px 20px}
  .qz-opt{padding:14px;min-height:52px;font-size:16px}
  .qz-k{width:28px;height:28px;font-size:14px}
  .qz-foot{flex-direction:column;align-items:stretch;gap:10px;padding:12px 14px}
  .qz-foot .btn{width:100%}
  .qz-tip{order:2;text-align:center}
  .qz-done-head{padding:20px 16px 0;gap:10px}
  .qz-score-big b{font-size:44px}
  .qz-done-verdict{margin:4px 16px 0;font-size:16px}
  .qz-done-grid{padding:16px 16px 4px;grid-template-columns:minmax(0,1fr)}
  .qz-done-acts{padding:16px}
  .qz-done-acts .btn{flex:1 1 auto}
  .qz-done .qz-an,.qz-done #qzMist{margin:0 16px 20px}
}

@media (prefers-reduced-motion:reduce){
  .qz-cell,.qz-opt{transition:none}
}