/* ═══════════════════════════════════════════════════════════════════════════
   IQ Test — Practice mode
   Reuses the whole shape vocabulary of the test screen (take.css); this file
   adds only what practice has: instant marking, explanations, a running score.
   ═══════════════════════════════════════════════════════════════════════════ */

.pr-bar {
    border-bottom: 1px solid var(--line); background: var(--surface);
}
.pr-bar__inner {
    max-width: 900px; margin-inline: auto;
    padding: var(--s4) var(--gutter);
    display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
}
.pr-bar__title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; }
.pr-bar__score {
    margin-left: auto; font-size: var(--fs-sm); color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
.pr-bar__score strong { color: var(--ink); }
.pr-streak {
    display: inline-flex; align-items: center; gap: var(--s2);
    font-size: var(--fs-xs); font-weight: 600;
    color: var(--signal); background: var(--signal-wash);
    border: 1px solid var(--signal); border-radius: var(--r-pill);
    padding: 2px var(--s3);
}

/* Instant marking: right and wrong carry color, border and words alike */
.tk-opt.is-correct {
    border-color: var(--good); background: var(--good-wash);
    box-shadow: inset 0 0 0 1px var(--good);
}
.tk-opt.is-correct .tk-opt__key { background: var(--good); color: var(--surface); border-color: var(--good); }
.tk-opt.is-wrong {
    border-color: var(--danger); background: var(--danger-wash);
    box-shadow: inset 0 0 0 1px var(--danger);
}
.tk-opt.is-wrong .tk-opt__key { background: var(--danger); color: var(--surface); border-color: var(--danger); }
.tk-opt.is-faded { opacity: .45; }
.tk-opt:disabled { cursor: default; }

.pr-verdict {
    margin-top: var(--s5); padding: var(--s5);
    border: 1px solid var(--line); border-left-width: 3px;
    border-radius: var(--r-md); background: var(--surface);
}
.pr-verdict--right { border-left-color: var(--good); }
.pr-verdict--wrong { border-left-color: var(--danger); }
.pr-verdict__head {
    font-size: var(--fs-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: var(--track-caps);
    margin-bottom: var(--s2);
}
.pr-verdict--right .pr-verdict__head { color: var(--good); }
.pr-verdict--wrong .pr-verdict__head { color: var(--danger); }
.pr-verdict__body { font-size: var(--fs-sm); color: var(--ink-2); line-height: var(--lh-normal); max-width: 62ch; }
.pr-verdict__body strong { color: var(--ink); }

.pr-actions { display: flex; justify-content: flex-end; gap: var(--s3); margin-top: var(--s5); }

.pr-summary { text-align: center; }
.pr-summary__score {
    font-family: var(--font-display); font-size: var(--fs-2xl);
    font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums;
    margin: var(--s3) 0 var(--s2);
}
.pr-summary__sub { color: var(--ink-2); max-width: 46ch; margin-inline: auto; }
.pr-summary__actions {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: var(--s3); margin-top: var(--s7);
}

.pr-empty { text-align: center; color: var(--ink-2); padding: var(--s8) 0; }