/* Shared interactive quiz styling for grade-level practice pages. */
.quiz-section{background:var(--bg-alt);padding:clamp(42px,6vw,74px) 0}
.quiz-shell{
  max-width:780px;margin-inline:auto;scroll-margin-top:92px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);
  padding:clamp(20px,4vw,38px);
}
.quiz__top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:12px}
.quiz__eyebrow{color:var(--muted);font-size:.76rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.quiz__count{font-weight:800;color:var(--brand-ink);white-space:nowrap}
.quiz__progress{height:9px;background:#dcecf4;border-radius:var(--radius-pill);overflow:hidden;margin-bottom:26px}
.quiz__progress span{display:block;height:100%;width:20%;background:var(--accent);border-radius:inherit;transition:width .3s var(--ease)}
.quiz-question[hidden],.quiz-result[hidden],.quiz-feedback[hidden],.quiz__next[hidden]{display:none}
.quiz-question:focus{outline:none}
.question-media{
  --answers-top:50%;
  position:relative;width:min(100%,clamp(340px,24vw,380px));margin-inline:auto;
  border-radius:18px;overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px var(--line),var(--shadow-sm);
}
.question-media img{width:100%;height:auto}
.choice-overlay{
  position:absolute;inset:var(--answers-top) 0 0;
  display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);
  gap:1.5%;padding:.25%;
}
.choice-overlay button{appearance:none;border:0;border-radius:16px;background:transparent;cursor:pointer;transition:background .18s,box-shadow .18s}
.choice-overlay button:hover,.choice-overlay button:focus-visible{background:rgba(43,82,166,.09);box-shadow:inset 0 0 0 4px rgba(43,82,166,.82);outline:0}
.choice-overlay button.is-correct{background:rgba(61,158,92,.15);box-shadow:inset 0 0 0 5px var(--good)}
.choice-overlay button.is-incorrect{background:rgba(190,55,55,.12);box-shadow:inset 0 0 0 5px #ba3838}
.choice-overlay button:disabled{cursor:default}
.quiz-feedback{margin-top:22px;padding:18px 20px;border-radius:var(--radius-sm);border:1px solid var(--chip-line);background:var(--brand-050)}
.quiz-feedback--correct{background:var(--good-050);border-color:var(--pill-grade-line)}
.quiz-feedback--incorrect{background:#fff1f1;border-color:#efcaca}
.quiz-feedback strong{display:block;font-family:var(--font-display);font-size:1.1rem}
.quiz-feedback p{color:var(--ink-2);margin-top:5px;font-size:.96rem}
.quiz__actions{display:flex;justify-content:flex-end;margin-top:18px}
.quiz__next{min-width:150px}
.quiz-result{text-align:center;padding:clamp(18px,4vw,38px) 0}
.quiz-result__score{display:grid;place-items:center;width:126px;height:126px;margin:0 auto 22px;border-radius:50%;background:var(--brand-050);color:var(--brand-ink);font-family:var(--font-display);font-size:2rem;font-weight:700;box-shadow:inset 0 0 0 8px #d6e3f7}
.quiz-result h2{font-size:clamp(1.65rem,1.25rem + 1.4vw,2.25rem)}
.quiz-result__message{max-width:50ch;margin:12px auto 0;color:var(--ink-2)}
.quiz-result__cta{display:grid;justify-items:center;gap:18px;max-width:430px;margin:28px auto 0;padding:24px;border:1px solid var(--chip-line);border-radius:var(--radius-lg);background:var(--brand-050)}
.quiz-result__cta h3{font-size:clamp(1.3rem,1.08rem + .8vw,1.65rem)}
.quiz-result__app{display:flex;align-items:center;justify-content:center;gap:12px;text-align:left;text-decoration:none}
.quiz-result__app:hover strong{text-decoration:underline}
.quiz-result__app:focus-visible{outline:3px solid var(--brand);outline-offset:5px;border-radius:var(--radius-sm)}
.quiz-result__app img{width:52px;height:52px;border-radius:13px;box-shadow:var(--shadow-sm)}
.quiz-result__app span{display:flex;flex-direction:column;line-height:1.12}
.quiz-result__app strong{font-family:var(--font-display);font-size:1.12rem;color:var(--brand-ink)}
.quiz-result__app small{margin-top:3px;color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.035em;text-transform:uppercase}
.practice-note{margin-top:26px;padding:20px 22px;border-radius:var(--radius-sm);background:var(--brand-050);border:1px solid var(--chip-line);color:var(--ink-2)}
.practice-note strong{color:var(--ink)}

@media (max-width:720px){
  .quiz-section .container{padding-inline:12px}
  .quiz-shell{border-radius:20px;padding:18px 12px 22px}
  .quiz__top{padding-inline:4px}
  .question-media{border-radius:13px}
  .choice-overlay button{border-radius:10px}
  .choice-overlay button:hover,.choice-overlay button:focus-visible{box-shadow:inset 0 0 0 3px rgba(43,82,166,.82)}
  .choice-overlay button.is-correct{box-shadow:inset 0 0 0 4px var(--good)}
  .choice-overlay button.is-incorrect{box-shadow:inset 0 0 0 4px #ba3838}
  .quiz-result__cta{padding:22px 16px}
}

/* Readable question review: available with or without JavaScript. */
.question-review{scroll-margin-top:100px}
.review-app-link{
  color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px;
}
.review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.review-card{padding:clamp(18px,3vw,30px);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);scroll-margin-top:100px}
.review-card h3{margin-bottom:18px;font-size:1.25rem}
.review-card>img{display:block;width:min(100%,360px);height:auto;margin-inline:auto;border-radius:12px}
.review-answer{margin-top:22px;border-top:1px solid var(--line);padding-top:16px}
.review-answer summary{cursor:pointer;color:var(--brand-ink);font-weight:800;padding:8px 0}
.review-answer summary:focus-visible{outline:3px solid var(--brand);outline-offset:4px;border-radius:4px}
.review-answer p{margin-top:12px;color:var(--ink-2)}
@media(max-width:720px){.review-grid{grid-template-columns:1fr}}