/* Class Zaban | Student practice feedback palette | 2026-10-20
   Vocabulary, Grammar, Reading: correct / wrong / unanswered.
   Exclusively results UI. No change to answer keys or other modules. */

html body .phase4-page .practice-results:not(.practice-results--writing) {
  --pr-green: #17674d;
  --pr-green-edge: #5aa68b;
  --pr-green-bg: #edf8f3;
  --pr-red: #a33c52;
  --pr-red-edge: #cf8796;
  --pr-red-bg: #fff1f3;
  --pr-amber: #79571e;
  --pr-amber-edge: #d5af68;
  --pr-amber-bg: #fff8e9;
}

html body .phase4-page .practice-results:not(.practice-results--writing) .practice-result-card {
  border-width: 1.5px !important;
  box-shadow: 0 7px 23px rgba(20, 42, 84, .07) !important;
}

html body .phase4-page .practice-results:not(.practice-results--writing) .practice-result-card-heading {
  background: linear-gradient(
    115deg,
    var(--pr-state-bg) 0%,
    color-mix(in srgb, var(--pr-state-bg) 58%, var(--pr-surface)) 100%
  );
}

html body .phase4-page .practice-results:not(.practice-results--writing) .practice-result-verdict {
  background: var(--pr-state-bg);
  font-weight: 750;
}

html body .phase4-page .practice-results:not(.practice-results--writing) .practice-result-answer-panel.is-submitted {
  border-color: color-mix(in srgb, var(--pr-state-edge) 68%, var(--pr-line));
}

html body .phase4-page .practice-results:not(.practice-results--writing) .practice-result-answer-panel.is-reference {
  border-color: color-mix(in srgb, var(--pr-green-edge) 68%, var(--pr-line));
}

html body .phase4-page .practice-results:not(.practice-results--writing) .practice-results-metric-icon {
  border: 1px solid color-mix(in srgb, var(--pr-state-edge) 55%, var(--pr-line));
}

:root[data-theme="dark"] body .phase4-page .practice-results:not(.practice-results--writing) {
  --pr-green: #a1e7c9;
  --pr-green-edge: #4aa687;
  --pr-green-bg: #19352f;
  --pr-red: #ffbdcb;
  --pr-red-edge: #bd7084;
  --pr-red-bg: #3c2734;
  --pr-amber: #f5d69c;
  --pr-amber-edge: #bb9557;
  --pr-amber-bg: #3b3227;
}

:root[data-theme="dark"] body .phase4-page .practice-results:not(.practice-results--writing) .practice-result-card {
  box-shadow: 0 7px 24px rgba(0, 0, 0, .22) !important;
}

@media (forced-colors: active) {
  html body .phase4-page .practice-results:not(.practice-results--writing) .practice-result-card-heading {
    background: Canvas;
    border-bottom-color: CanvasText;
  }
  html body .phase4-page .practice-results:not(.practice-results--writing) .practice-result-card {
    border-color: CanvasText !important;
  }
}