/* VERBATIM from packages/artifacts-runtime/src/guest.css — the checkpoint is
   guest content, and this is the stylesheet the runtime actually renders it
   with. Copied, never re-derived: a second approximation of a component that
   already exists is how the two drift. */
.quiz .q-intro{font-size:14px;color:var(--ink-2);margin:2px 0 16px}
.quiz .q-kick{display:block;margin-bottom:8px}
.quiz .q-text{font-size:14px;font-weight:400;margin-bottom:14px}
.quiz .opts{display:flex;flex-direction:column;gap:12px}
.quiz .opt{display:flex;gap:10px;align-items:flex-start;background:none;border:0;padding:0;
  font:inherit;font-size:14px;color:var(--ink);text-align:left;cursor:pointer}
.quiz .box{width:16px;height:16px;border-radius:5px;background:var(--panel-2);flex:none;
  margin-top:1px;display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--t-fast) var(--ease)}
/* check and cross use Lucide's geometry, masked in --paper — crisp and
   font-independent, the same construction as chrome's .g-done */
.quiz .box::after{width:10px;height:10px;background:var(--paper);
  -webkit-mask:var(--glyph) center/contain no-repeat;
  mask:var(--glyph) center/contain no-repeat}
.quiz .opt.sel .box{background:var(--ink)}
.quiz .opt.hit .box{background:var(--good)}
.quiz .opt.sel .box::after,.quiz .opt.hit .box::after{content:"";
  --glyph:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>')}
.quiz .opt.miss .box{background:var(--crit)}
.quiz .opt.miss .box::after{content:"";
  --glyph:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>')}
/* the honest way out of guessing: quieter than the options, never a miss-red —
   declining to guess is not an error. The glyph is Lucide's question mark. */
.quiz .opt.idk{color:var(--ink-2);margin-top:2px}
.quiz .opt.idk .box::after{content:"";background:var(--ink-3);
  --glyph:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>')}
.quiz .opt.idk.on{color:var(--ink)}
.quiz .opt.idk.on .box{background:var(--ink)}
.quiz .opt.idk.on .box::after{background:var(--paper)}
.quiz .why{display:block;font-size:12.5px;color:var(--ink-2);margin-top:4px}
/* entry (typed-answer) questions — the same instrument as the report's `entry`
   quiz items, in the thread's presentation: a quiet inset field, graded with the
   status hue as text+tint (the .why line under it carries the teaching, canon#11). */
.quiz .q-entry{margin-bottom:12px}
.quiz .q-entry-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.quiz .q-entry label{font-size:13px;color:var(--ink-2)}
.quiz .q-entry input{font-family:var(--font-mono);font-size:13.5px;color:var(--ink);
  background:var(--panel-2);border:0;border-radius:var(--r-sm);padding:8px 12px;
  min-width:9ch;max-width:100%;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.quiz .q-entry input.hit{background:color-mix(in srgb,var(--good) 16%,var(--panel-2));color:var(--good)}
.quiz .q-entry input.miss{background:color-mix(in srgb,var(--crit) 16%,var(--panel-2));color:var(--crit)}
.quiz .q-entry .why{margin-top:8px}
.q-controls{display:flex;align-items:center;gap:8px;margin-top:18px}
.q-check{background:var(--panel-2);border:0;border-radius:var(--r-full);padding:8px 16px;
  font:inherit;font-size:13px;font-weight:600;line-height:20px;color:var(--ink);cursor:pointer}
.q-check[disabled]{opacity:.5;pointer-events:none}
.q-controls .iconbtn{background:var(--panel-2);width:36px;height:36px}
.q-dots{display:flex;gap:6px;margin:0 auto;align-items:center}
.q-dot{width:6px;height:6px;border-radius:50%;background:var(--ink-3);
  transition:width var(--t-fast) var(--ease),height var(--t-fast) var(--ease)}
.q-dot.on{background:var(--ink);width:9px;height:9px}