/* One-question-at-a-time quiz, used with station-quiz-steps.js. */
/* With two columns (above the station pages' 820px breakpoint), the quiz
   stays in view beside the lesson as it scrolls. It stops above the
   floating reading controls and scrolls inside itself if it is ever
   taller than the window. .panel.quiz outranks the pages' .panel rule. */
@media screen and (min-width:821px) {
  .panel.quiz {
    position:sticky;
    top:1rem;
    max-height:calc(100vh - 7rem);
    overflow-y:auto
  }
}
.quiz-progress {
  margin:0 0 20px
}
.quiz-progress[hidden] {
  display:none
}
.quiz-progress__label {
  display:block;
  margin:0 0 7px;
  font-size:.75rem;
  font-weight:750;
  color:var(--muted);
  letter-spacing:.06em;
  text-transform:uppercase
}
.quiz-progress__track {
  height:8px;
  border-radius:999px;
  background:var(--theme-hover);
  overflow:hidden
}
.quiz-progress__fill {
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:var(--green);
  transition:width 450ms cubic-bezier(.3,1.3,.5,1)
}
.is-stepped fieldset {
  margin-bottom:20px
}
.is-stepped fieldset:not([hidden]) {
  animation:quiz-step-in 320ms ease-out both
}
.is-stepped fieldset:focus {
  outline:none
}
.is-stepped .choice {
  position:relative
}
.is-stepped .is-answered .choice {
  cursor:default
}
.is-stepped .is-answered .choice:hover {
  border-color:var(--line);
  background:var(--inset-paper,var(--theme-surface))
}
.is-stepped .is-answered .choice:not(.is-correct):not(.is-wrong) {
  opacity:.6
}
.is-stepped .choice.is-correct,
.is-stepped .choice.is-correct:hover {
  border-color:var(--green);
  background:var(--soft-green);
  box-shadow:inset 0 0 0 1px var(--green)
}
.is-stepped .choice.is-wrong,
.is-stepped .choice.is-wrong:hover {
  border-color:var(--error);
  background:var(--soft-error);
  box-shadow:inset 0 0 0 1px var(--error)
}
.is-stepped .choice.is-wrong input {
  accent-color:var(--error)
}
/* A tick or cross badge on the right of the answered choices. */
.is-stepped .choice.is-correct::after,
.is-stepped .choice.is-wrong::after {
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  margin-left:auto;
  flex-shrink:0;
  border-radius:50%;
  color:var(--theme-on-accent);
  font-size:.8rem;
  font-weight:800;
  line-height:1
}
.is-stepped .choice.is-correct::after {
  content:"✓";
  background:var(--green)
}
.is-stepped .choice.is-wrong::after {
  content:"✕";
  background:var(--error)
}
.is-stepped .choice.is-celebrating {
  animation:quiz-pop 520ms cubic-bezier(.3,1.6,.5,1)
}
.is-stepped .choice.is-celebrating::after {
  animation:quiz-badge 520ms 80ms cubic-bezier(.3,1.8,.5,1) both
}
.is-stepped .feedback:not([hidden]) {
  animation:quiz-step-in 260ms ease-out both
}
.feedback__title {
  display:block;
  margin-bottom:2px;
  font-size:.95rem
}
.is-stepped .feedback.is-correct .feedback__title [lang="ja"] {
  display:inline-block;
  animation:quiz-cheer 700ms 120ms ease-out both
}
.is-stepped .actions {
  border-top:0;
  padding-top:0
}
.primary:disabled {
  opacity:.45
}
.primary:disabled:hover {
  background:var(--indigo)
}
.quiz-summary {
  position:relative;
  padding:26px 18px 22px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--inset-paper,var(--theme-surface));
  text-align:center;
  animation:quiz-step-in 320ms ease-out both
}
.quiz-summary[hidden] {
  display:none
}
.quiz-summary:focus {
  outline:none
}
.quiz-summary__kicker {
  margin:0;
  font-size:.75rem;
  font-weight:750;
  color:var(--green);
  letter-spacing:.1em;
  text-transform:uppercase
}
.quiz-summary__score {
  position:relative;
  margin:6px 0 4px;
  font-size:1.1rem;
  font-weight:700;
  color:var(--muted)
}
.quiz-summary__score strong {
  font-size:2.6rem;
  line-height:1.1;
  color:var(--ink)
}
.quiz-summary.is-perfect .quiz-summary__score strong {
  display:inline-block;
  color:var(--green);
  animation:quiz-pop 600ms cubic-bezier(.3,1.6,.5,1)
}
.quiz-summary__message {
  margin:0 0 18px;
  font-size:.95rem;
  font-weight:650;
  line-height:1.6
}
.quiz-summary .secondary {
  min-width:10rem
}
/* Confetti burst from the middle of a correct choice or a perfect score. */
.quiz-burst {
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  pointer-events:none;
  z-index:2
}
.quiz-burst span {
  position:absolute;
  top:-4px;
  left:-3px;
  width:6px;
  height:9px;
  border-radius:2px;
  opacity:0;
  animation:quiz-confetti 900ms var(--delay,0ms) cubic-bezier(.2,.7,.4,1) forwards
}
.quiz-burst span.is-round {
  width:7px;
  height:7px;
  border-radius:50%
}
@keyframes quiz-step-in {
  from { opacity:0; transform:translateY(6px) }
  to { opacity:1; transform:none }
}
@keyframes quiz-pop {
  0% { transform:scale(1) }
  40% { transform:scale(1.04) }
  100% { transform:scale(1) }
}
@keyframes quiz-badge {
  from { transform:scale(0) rotate(-30deg) }
  to { transform:scale(1) rotate(0) }
}
@keyframes quiz-cheer {
  0% { transform:scale(.6); opacity:0 }
  50% { transform:scale(1.15); opacity:1 }
  100% { transform:scale(1) }
}
@keyframes quiz-confetti {
  0% { opacity:1; transform:translate(0,0) rotate(0) scale(.6) }
  70% { opacity:1 }
  100% { opacity:0; transform:translate(var(--dx),calc(var(--dy) + 26px)) rotate(var(--spin)) scale(1) }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-progress__fill { transition:none }
  .is-stepped fieldset:not([hidden]),
  .is-stepped .feedback:not([hidden]),
  .is-stepped .choice.is-celebrating,
  .is-stepped .choice.is-celebrating::after,
  .is-stepped .feedback.is-correct .feedback__title [lang="ja"],
  .quiz-summary,
  .quiz-summary.is-perfect .quiz-summary__score strong { animation:none }
}
@media print {
  .is-stepped fieldset[hidden] { display:block }
  .quiz-progress,.quiz-summary { display:none }
}
.quiz .visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0
}