/* Draft answers stay neutral until the learner asks to check them. */
.oslot.placed { border-style:solid; border-color:var(--brand); background:var(--brand-l); color:var(--ink); cursor:pointer; }
.oslot.ok { border-color:var(--ok); background:var(--ok-l); color:var(--ok-d); }
.oslot.bad,.mitem.bad { border-color:var(--bad); background:var(--bad-l); color:var(--bad-d); }
.mitem { position:relative; flex-wrap:wrap; gap:6px; }
.mitem.paired:not(.done):not(.bad) { border-color:var(--brand); background:var(--brand-l); }
.match-value { min-width:0; }
.match-pair { display:block; width:100%; font-size:12px; color:var(--ink-2); }
.q-solution { max-width:780px; margin:24px auto; padding:20px; border:2px solid var(--ok); border-radius:18px; background:var(--surface); color:var(--ink); overflow-wrap:anywhere; }
.q-solution h2 { font-size:21px; margin:0 0 16px; }
.q-solution .easy-visual { margin:8px 0; text-align:left; }
.q-solution .answer-pair { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:10px; align-items:center; border-bottom:1px solid var(--line); padding:8px 0; }
.q-solution .answer-group { padding:8px 0; border-bottom:1px solid var(--line); }
.q-solution .answer-group h3 { font-size:17px; }
.answer-explanation { margin-top:18px; padding-top:14px; border-top:1px solid var(--line); line-height:1.8; }
.q-solution svg.art { max-width:100%; }
.checkpoint-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.checkpoint-actions [hidden] { display:none; }
.drill-actions { display:flex; justify-content:center; padding:18px 0; }
.drill-actions { flex-wrap:wrap; gap:12px; }
.solution-steps { padding-left:26px; line-height:1.8; }
.solution-steps li { padding:8px 0 14px 7px; }
.solution-steps li::marker { color:var(--brand); font-weight:800; }
.solution-steps strong { display:block; margin-bottom:6px; }
.solution-steps li>div { overflow-x:auto; }
.solution-figure { margin:18px 0 0; overflow-x:auto; }
.solution-figure figcaption { font-size:14px; line-height:1.6; color:var(--ink-2); }
.solution-art { display:block; width:100%; max-width:440px; height:auto; margin:auto; }
.solution-notice { flex-basis:100%; margin:0; line-height:1.6; }
.player-foot.solution-open { flex-wrap:wrap; position:static; }
.q-solution { scroll-margin-top:calc(var(--zoom-top, 0px) + 85px); }
.solution-question .keypad { display:none; }
.q-solution:focus-visible { outline:3px solid var(--brand); outline-offset:3px; }
@media(max-width:480px){.q-solution{padding:14px;}.player-foot .solution-help{font-size:14px;padding:10px;}}