/* Kavvi check results (learners-20261013): the screen after a concept check - and the final exam's, which shares it.
   The owner: "I don't like how this page looks when I finish a quiz". What it was: a ring drawn with colour variables
   the current theme no longer defines (so a flat dark disc), typewriter-spaced mono labels, every question cut to one
   line mid-word, and the whole card frosted by pro-hex's [role=dialog] glass.

   Now: a real ring that fills to the score (green when passed, amber when it needs another loop), the status as a pill,
   the questions in full with a coloured edge and "Correct" / "Missed", the review as clear blocks, a solid card.
   kv-quiz-results-20261013.js adds "2 of 3 right", the status words and, on mastery, a burst of hexagons. */
@property --kvqr-fill { syntax: '<number>'; inherits: false; initial-value: 0; }

.focus-quiz-container:has(.concept-check-results) {
  --qr-bg: #0c1714; --qr-card: rgba(255,255,255,.035); --qr-line: rgba(255,255,255,.09); --qr-ink: #ecf6f1; --qr-ink2: #a9bdb4;
  --qr-ok: #5fd6a2; --qr-ok-wash: rgba(95,214,162,.13); --qr-bad: #ff8f7a; --qr-bad-wash: rgba(255,143,122,.12);
  --qr-warn: #ffc25c; --qr-warn-wash: rgba(255,194,92,.13); --qr-track: rgba(255,255,255,.08);
  --qr-face: var(--kv-font-head, 'Syne'), system-ui, sans-serif; --qr-body: var(--kv-font-body, 'DM Sans'), 'IBM Plex Sans Arabic', system-ui, sans-serif;
}
:root[data-theme='light'] .focus-quiz-container:has(.concept-check-results) {
  --qr-bg: #ffffff; --qr-card: #f6faf8; --qr-line: rgba(16,36,29,.1); --qr-ink: #10241d; --qr-ink2: #51675e;
  --qr-ok: #17805a; --qr-ok-wash: rgba(23,128,90,.1); --qr-bad: #c2412c; --qr-bad-wash: rgba(194,65,44,.08);
  --qr-warn: #a35f00; --qr-warn-wash: rgba(255,176,50,.14); --qr-track: rgba(16,36,29,.08);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .focus-quiz-container:has(.concept-check-results) {
    --qr-bg: #ffffff; --qr-card: #f6faf8; --qr-line: rgba(16,36,29,.1); --qr-ink: #10241d; --qr-ink2: #51675e;
    --qr-ok: #17805a; --qr-ok-wash: rgba(23,128,90,.1); --qr-bad: #c2412c; --qr-bad-wash: rgba(194,65,44,.08);
    --qr-warn: #a35f00; --qr-warn-wash: rgba(255,176,50,.14); --qr-track: rgba(16,36,29,.08);
  }
}
:root[lang^='ar'] .focus-quiz-container:has(.concept-check-results) { --qr-face: 'Kavvi Alexandria', var(--kv-font-ar, 'IBM Plex Sans Arabic'), system-ui, sans-serif; --qr-body: var(--kv-font-ar, 'IBM Plex Sans Arabic'), system-ui, sans-serif; }

/* a solid card, not pro-hex's frosted glass */
.focus-quiz-container[role='dialog']:has(.concept-check-results),
[data-edition='pro'] .focus-quiz-container[role='dialog']:has(.concept-check-results) {
  background: var(--qr-bg) !important; background-image: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: var(--qr-ink);
}
.focus-quiz-container:has(.concept-check-results) .concept-check-header > div > span {
  font-family: var(--qr-body) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .12em !important; color: var(--qr-ok) !important;
}
:root[lang^='ar'] .focus-quiz-container:has(.concept-check-results) .concept-check-header > div > span { letter-spacing: 0 !important; font-size: 13.5px !important; }

/* ---- the score */
.focus-quiz-container .concept-check-results .concept-check-score { display: grid !important; justify-items: center; text-align: center; gap: 16px; }
.focus-quiz-container .concept-check-results .concept-check-score-ring {
  --qr-ring: var(--qr-ok);
  position: relative; width: 156px !important; height: 156px !important; border-radius: 50%;
  background: conic-gradient(var(--qr-ring) calc(var(--kvqr-fill) * 1%), var(--qr-track) 0) !important;
  animation: kvqr-fill 1.1s cubic-bezier(.2,.8,.2,1) .15s both;
}
@keyframes kvqr-fill { from { --kvqr-fill: 0; } to { --kvqr-fill: var(--score); } }
.focus-quiz-container .concept-check-results.needs-work .concept-check-score-ring { --qr-ring: var(--qr-warn); }
.focus-quiz-container .concept-check-results .concept-check-score-ring::before { inset: 12px !important; background: var(--qr-bg) !important; box-shadow: inset 0 0 0 1px var(--qr-line); }
.focus-quiz-container .concept-check-results .concept-check-score-ring strong { font: 800 34px/1 var(--qr-face) !important; letter-spacing: -.03em; color: var(--qr-ink) !important; }
.focus-quiz-container .concept-check-results .concept-check-score-ring small { font: 600 12.5px/1.3 var(--qr-body) !important; color: var(--qr-ink2) !important; letter-spacing: 0; margin-top: 4px; }
.focus-quiz-container .concept-check-results .concept-check-score-ring small.kvqr-hide { display: none !important; }
.focus-quiz-container .concept-check-results.passed .concept-check-score-ring { box-shadow: 0 0 0 0 rgba(95,214,162,.0); animation: kvqr-fill 1.1s cubic-bezier(.2,.8,.2,1) .15s both, kvqr-glow 2.4s 1.3s ease-out 1; }
@keyframes kvqr-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--qr-ok) 40%, transparent); } 100% { box-shadow: 0 0 0 26px transparent; } }

/* the status pill and the words */
.focus-quiz-container .concept-check-results .concept-check-score > div:last-child { display: grid; justify-items: center; gap: 8px; }
.focus-quiz-container .concept-check-results .concept-check-score > div:last-child > span {
  display: inline-flex !important; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  font: 700 12.5px/1 var(--qr-body) !important; letter-spacing: .06em !important; text-transform: uppercase;
  background: var(--qr-ok-wash); color: var(--qr-ok) !important;
}
.focus-quiz-container .concept-check-results.needs-work .concept-check-score > div:last-child > span { background: var(--qr-warn-wash); color: var(--qr-warn) !important; }
:root[lang^='ar'] .focus-quiz-container .concept-check-results .concept-check-score > div:last-child > span { letter-spacing: 0 !important; font-size: 13.5px !important; }
.focus-quiz-container .concept-check-results .concept-check-score h3 { margin: 0; font: 800 clamp(24px, 5vw, 30px)/1.2 var(--qr-face) !important; letter-spacing: -.02em; color: var(--qr-ink) !important; }
:root[lang^='ar'] .focus-quiz-container .concept-check-results .concept-check-score h3 { font-weight: 700 !important; letter-spacing: 0; line-height: 1.45 !important; }
.focus-quiz-container .concept-check-results .concept-check-score p { margin: 0; max-width: 34em; font: 500 15px/1.55 var(--qr-body) !important; color: var(--qr-ink2) !important; }

/* ---- the questions */
.focus-quiz-container .concept-check-results .concept-check-review-list { display: grid; gap: 10px; }
.focus-quiz-container .concept-check-results .concept-check-review-list details {
  border-radius: 16px !important; border: 1px solid var(--qr-line) !important; background: var(--qr-card) !important; overflow: hidden;
  box-shadow: inset 4px 0 0 var(--qr-ok);
}
.focus-quiz-container .concept-check-results .concept-check-review-list details.incorrect { box-shadow: inset 4px 0 0 var(--qr-bad); }
[dir='rtl'] .focus-quiz-container .concept-check-results .concept-check-review-list details, :root[lang^='ar'] .focus-quiz-container .concept-check-results .concept-check-review-list details { box-shadow: inset -4px 0 0 var(--qr-ok); }
[dir='rtl'] .focus-quiz-container .concept-check-results .concept-check-review-list details.incorrect, :root[lang^='ar'] .focus-quiz-container .concept-check-results .concept-check-review-list details.incorrect { box-shadow: inset -4px 0 0 var(--qr-bad); }
.focus-quiz-container .concept-check-results .concept-check-review-list summary { display: grid !important; grid-template-columns: 30px minmax(0, 1fr) 18px; align-items: start; gap: 12px; padding: 14px 16px !important; cursor: pointer; }
.focus-quiz-container .concept-check-results .concept-check-review-list summary > span:first-child {
  display: inline-grid !important; place-items: center; width: 30px !important; height: 30px !important; border-radius: 99px !important; margin-top: 2px;
  background: var(--qr-ok-wash) !important; color: var(--qr-ok) !important;
}
.focus-quiz-container .concept-check-results .concept-check-review-list details.incorrect summary > span:first-child { background: var(--qr-bad-wash) !important; color: var(--qr-bad) !important; }
.focus-quiz-container .concept-check-results .concept-check-review-list summary > svg:last-child { margin-top: 6px; color: var(--qr-ink2); transition: transform .2s; }
.focus-quiz-container .concept-check-results .concept-check-review-list details[open] summary > svg:last-child { transform: rotate(90deg); }
.focus-quiz-container .concept-check-results .concept-check-review-list summary small {
  display: flex; align-items: center; gap: 8px; font: 700 12px/1.3 var(--qr-body) !important; letter-spacing: .04em !important; color: var(--qr-ink2) !important;
}
.focus-quiz-container .concept-check-results .kvqr-state { font-weight: 700; color: var(--qr-ok); }
.focus-quiz-container .concept-check-results details.incorrect .kvqr-state { color: var(--qr-bad); }
/* the whole question, not one line cut mid-word */
.focus-quiz-container .concept-check-results .review-question, .focus-quiz-container .concept-check-results .review-question * {
  white-space: normal !important; overflow: visible !important; text-overflow: clip !important; max-height: none !important; -webkit-line-clamp: unset !important;
}
.focus-quiz-container .concept-check-results .review-question .bidi-paragraph { margin: 4px 0 0 !important; font: 600 15.5px/1.5 var(--qr-body) !important; color: var(--qr-ink) !important; }

/* the review: your answer, the right one, why */
.focus-quiz-container .concept-check-results .concept-check-review-body { display: grid; gap: 8px; padding: 0 16px 16px 58px !important; }
[dir='rtl'] .focus-quiz-container .concept-check-results .concept-check-review-body, :root[lang^='ar'] .focus-quiz-container .concept-check-results .concept-check-review-body { padding: 0 58px 16px 16px !important; }
.focus-quiz-container .concept-check-results .review-answer { display: grid; gap: 2px; padding: 10px 12px !important; border-radius: 12px !important; border: 0 !important; background: var(--qr-ok-wash) !important; }
.focus-quiz-container .concept-check-results details.incorrect .review-answer.chosen { background: var(--qr-bad-wash) !important; }
.focus-quiz-container .concept-check-results .review-answer > span { font: 700 11.5px/1.2 var(--qr-body) !important; letter-spacing: .06em !important; color: var(--qr-ok) !important; }
.focus-quiz-container .concept-check-results details.incorrect .review-answer.chosen > span { color: var(--qr-bad) !important; }
.focus-quiz-container .concept-check-results .review-answer .bidi-paragraph, .focus-quiz-container .concept-check-results .review-explanation .bidi-paragraph { margin: 0 !important; font: 500 14.5px/1.5 var(--qr-body) !important; color: var(--qr-ink) !important; }
.focus-quiz-container .concept-check-results .review-explanation { display: grid !important; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 10px 12px !important; border-radius: 12px !important; background: transparent !important; border: 1px dashed var(--qr-line) !important; color: var(--qr-ink2); }
.focus-quiz-container .concept-check-results .review-explanation > svg { margin-top: 3px; color: var(--qr-warn); }

/* the way on */
.focus-quiz-container .concept-check-results .concept-check-result-actions { display: grid !important; gap: 10px; }
.focus-quiz-container .concept-check-results .concept-check-result-actions button { min-height: 52px !important; border-radius: 16px !important; font: 700 16px/1.2 var(--qr-body) !important; }
.focus-quiz-container .concept-check-results .concept-check-result-actions button.primary {
  background: linear-gradient(180deg, #d9fbe9, #7de3b8) !important; color: #06140f !important; border: 0 !important; box-shadow: 0 12px 32px rgba(95,214,162,.22);
}
:root[data-theme='light'] .focus-quiz-container .concept-check-results .concept-check-result-actions button.primary { background: linear-gradient(180deg, #1f8a64, #15684b) !important; color: #fff !important; }
@media (prefers-color-scheme: light) { :root:not([data-theme='dark']) .focus-quiz-container .concept-check-results .concept-check-result-actions button.primary { background: linear-gradient(180deg, #1f8a64, #15684b) !important; color: #fff !important; } }

/* mastery: a burst of hexagons from the ring (kv-quiz-results-20261013.js puts them there, once) */
.kvqr-burst, .focus-quiz-container .concept-check-results .concept-check-score-ring > .kvqr-burst { position: absolute !important; inset: 0; pointer-events: none; z-index: 2; }
.kvqr-burst i {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 14px; margin: -7px 0 0 -6px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--qr-ok); opacity: 0;
  animation: kvqr-pop 1.2s cubic-bezier(.15,.8,.3,1) forwards; animation-delay: calc(.9s + var(--d, 0s));
}
@keyframes kvqr-pop {
  0% { opacity: 0; transform: translate(0, 0) scale(.4) rotate(0deg); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r)); }
}
@media (prefers-reduced-motion: reduce) {
  .focus-quiz-container .concept-check-results .concept-check-score-ring { animation: none !important; --kvqr-fill: var(--score); }
  .kvqr-burst { display: none; }
}