/* ================================================================
   Quiz page — sticky progress, running score, restart + summary
   Presentation only; question cards come from shared .qcard styles.
   ================================================================ */

/* Sticky progress bar ------------------------------------------- */
.cq .quiz-bar{
  position:sticky;
  top:8px;
  z-index:20;
  margin:0 0 22px;
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius, 12px);
  background:color-mix(in srgb, var(--surface, var(--bg-2)) 92%, transparent);
  backdrop-filter:blur(8px);
  box-shadow:var(--shadow, 0 4px 14px rgba(0,0,0,.12));
}
.cq .quiz-bar-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.cq .quiz-count{
  font-family:var(--font-label, inherit);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  color:var(--ink-soft);
}
.cq .quiz-bar .quiz-score{
  font-family:var(--font-mono, monospace);
  font-size:.9rem;
  font-weight:700;
  color:var(--amber);
}

.cq .quiz-track{
  height:8px;
  border-radius:99px;
  background:color-mix(in srgb, var(--ink) 12%, transparent);
  overflow:hidden;
}
.cq .quiz-fill{
  height:100%;
  width:0%;
  border-radius:99px;
  background:linear-gradient(90deg, var(--amber), var(--moss, var(--good, var(--amber))));
  transition:width .4s cubic-bezier(.4,0,.2,1);
}

/* Restart control ----------------------------------------------- */
.cq .quiz-controls{
  display:flex;
  justify-content:center;
  margin-top:26px;
}
.cq .quiz-restart{
  font-family:var(--font-label, inherit);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.78rem;
  font-weight:700;
  color:var(--ink);
  padding:11px 22px;
  border:1px solid var(--line-2);
  border-radius:99px;
  background:var(--surface, var(--bg-2));
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.cq .quiz-restart:hover{
  border-color:var(--amber);
  background:color-mix(in srgb, var(--amber) 12%, var(--surface, var(--bg-2)));
}
.cq .quiz-restart:active{ transform:translateY(1px); }

/* Final result summary ------------------------------------------ */
.cq .quiz-summary{
  display:none;
  margin-top:28px;
  padding:26px 24px;
  text-align:center;
  border:1px solid var(--amber);
  border-radius:var(--radius-lg, 16px);
  background:color-mix(in srgb, var(--amber) 8%, var(--surface, var(--bg-2)));
}
.cq .quiz-summary.show{
  display:block;
  animation:quizPop .35s cubic-bezier(.34,1.56,.64,1);
}
.cq .quiz-summary-score{
  font-family:var(--font-display, inherit);
  font-size:2.2rem;
  font-weight:800;
  line-height:1.1;
  color:var(--ink);
}
.cq .quiz-summary-score span{
  font-size:1.1rem;
  color:var(--amber);
}
.cq .quiz-summary-msg{
  margin:10px auto 0;
  max-width:var(--measure, 46ch);
  font-size:1rem;
  line-height:1.5;
  color:var(--ink-soft);
}

@keyframes quizPop{
  from{ opacity:0; transform:translateY(10px) scale(.98); }
  to{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion: reduce){
  .cq .quiz-fill{ transition:none; }
  .cq .quiz-summary.show{ animation:none; }
}