/* Make in-reading Quick Check results immediately recognisable. */
.reading-check {
  position: relative;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.quick-check-result-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.reading-check.is-correct {
  border-color: #5f9875;
  background: #edf8f1;
  box-shadow:
    inset 5px 0 0 #397757,
    0 8px 22px rgba(57, 119, 87, 0.12);
}

.reading-check.is-correct .quick-check-result-badge {
  border: 1px solid #5f9875;
  background: #d9efe1;
  color: #24583d;
}

.reading-check.is-correct .activity-feedback {
  color: #24583d;
  font-weight: 800;
}

.reading-check.is-correct .answer-option:has(input:checked) {
  border-color: #5f9875;
  background: #f5fcf7;
  box-shadow: 0 0 0 2px rgba(57, 119, 87, 0.12);
}

.reading-check.is-correct .activity-button {
  background: #397757;
}

.reading-check.is-incorrect {
  border-color: #c96d72;
  background: #fff1f1;
  box-shadow:
    inset 5px 0 0 #b8474d,
    0 8px 22px rgba(184, 71, 77, 0.12);
}

.reading-check.is-incorrect .quick-check-result-badge {
  border: 1px solid #c96d72;
  background: #f8dadd;
  color: #873238;
}

.reading-check.is-incorrect .activity-feedback {
  color: #873238;
  font-weight: 800;
}

.reading-check.is-incorrect .answer-option:has(input:checked) {
  border-color: #c96d72;
  background: #fff8f8;
  box-shadow: 0 0 0 2px rgba(184, 71, 77, 0.11);
}

.reading-check.is-incorrect .activity-button {
  background: #9f3e44;
}

.reading-check.is-unanswered {
  border-color: #c7a45e;
  background: #fff9eb;
  box-shadow: inset 5px 0 0 #b68b38;
}

.reading-check.is-unanswered .quick-check-result-badge {
  border: 1px solid #c7a45e;
  background: #f8ebc8;
  color: #765718;
}

.reading-check.is-unanswered .activity-feedback {
  color: #765718;
  font-weight: 800;
}

@media (max-width: 620px) {
  .quick-check-result-badge {
    position: static;
    margin: 0 0 12px 8px;
    vertical-align: middle;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reading-check {
    transition: none;
  }
}