/* The Quest page (one page for quests, topic tests and sheets), the staff sheet and teacher pages, and the teacher's room. */

/* ---- small icon tabs ---- */
.qx-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; }
.qx-tabs button { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .84rem; font-weight: 600; min-height: 36px; padding: 6px 14px;
  border-radius: 999px; border: 1px solid var(--edge, #dbe4fb); background: #fff; color: var(--ink, #0f1a3d); cursor: pointer; }
.qx-tabs button .i { width: 15px; height: 15px; }
.qx-tabs button.on { background: var(--blue, #2f6bff); border-color: var(--blue, #2f6bff); color: #fff; }
.qx-tabs button:focus-visible { outline: 3px solid var(--gold, #ffb547); outline-offset: 2px; }

.qx-loading, .qx-empty p { margin: 8px 0; }

/* ---- the sheet ---- */
.qx-head { border-top: 4px solid var(--subj, var(--blue, #2f6bff)); }
.qx-head h2 { margin: 2px 0 4px; }
.qx-questions { display: grid; gap: 12px; margin: 12px 0; }
.qx-q { position: relative; }
.qx-qtop { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.qx-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--subj-soft, #eef3ff); color: var(--subj, var(--blue-d, #1d4ed8));
  font-family: var(--display); font-weight: 700; }
.qx-hint { margin-left: auto; font: inherit; font-size: .78rem; font-weight: 600; border: 1px solid #d9d2ff; background: #f6f3ff; color: #5b4bd6; border-radius: 999px; padding: 4px 12px; min-height: 30px; cursor: pointer; }
.qx-text { line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.qx-opts { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.qx-opt { display: flex; gap: 8px; align-items: baseline; padding: 8px 10px; border-radius: 10px; background: var(--soft, #f1f5ff); }
.qx-opt.right { background: #e6f8ee; outline: 2px solid #2bb673; }
.qx-parts { margin-top: 8px; }
.qx-fix { margin-top: 10px; border-top: 1px dashed var(--edge, #dbe4fb); padding-top: 8px; }
.qx-fix summary { cursor: pointer; font-weight: 600; color: var(--blue-d, #1d4ed8); }

.qx-up h3 { margin-top: 0; }
.qx-steps { margin: 6px 0 12px; padding-left: 20px; line-height: 1.6; }
.qx-pick { margin-right: 8px; }
.qx-thumbs { margin: 10px 0; }
.qx-go { margin-top: 6px; }
.qx-alt { margin-top: 14px; font-size: .9rem; }
.qx-alt summary { cursor: pointer; color: var(--mute, #5a6788); }
.qx-alt textarea { width: 100%; }

.qx-score { text-align: center; border-top: 4px solid var(--blue, #2f6bff); }
.qx-score.good { border-top-color: #2bb673; } .qx-score.mid { border-top-color: var(--gold, #ffb547); } .qx-score.bad { border-top-color: var(--ember, #ff6a3d); }
.qx-score h2 { font-family: var(--display); font-size: 2.2rem; margin: 4px 0; }
.qx-summary { text-align: left; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #f6f3ff; }
.qx-summary h3 { margin: 0 0 6px; font-size: 1rem; color: #5b4bd6; }

/* ---- test a topic ---- */
.qx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.qx-chip { font: inherit; font-size: .84rem; border: 1px solid var(--edge, #dbe4fb); background: #fff; border-radius: 999px; padding: 6px 12px; min-height: 34px; cursor: pointer; }
.qx-chip.on { background: var(--blue, #2f6bff); color: #fff; border-color: var(--blue, #2f6bff); }
.qx-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.qx-topic { display: grid; gap: 2px; text-align: left; font: inherit; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--edge, #dbe4fb); background: #fff; cursor: pointer; min-height: 56px; }
.qx-topic:hover { border-color: var(--blue, #2f6bff); }
.qx-topic.suggested { border-color: #8f7bff; background: #f6f3ff; }

/* ---- my sheets ---- */
.qx-list { display: grid; gap: 8px; }
.qx-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "s p" "w p"; gap: 2px 10px; text-align: left; font: inherit; cursor: pointer; border-left: 4px solid var(--subj, var(--blue, #2f6bff)); }
.qx-row b { grid-area: s; } .qx-row .muted { grid-area: w; } .qx-row .pill { grid-area: p; align-self: center; }

/* ---- staff ---- */
.sb-sheet.done, .room-q.done { opacity: .6; }
.sb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.sb-row input[type=number] { width: 80px; }
.sb-flags { color: var(--ember, #ff6a3d); margin: 6px 0; }
.sb-q summary { cursor: pointer; font-weight: 600; margin-top: 6px; }
.sb-table, .room-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.sb-table th, .sb-table td, .room-table th, .room-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--edge, #dbe4fb); }
.sb-teachers { display: grid; gap: 10px; margin-top: 12px; }
.sb-add select { width: 100%; }

/* ---- the teacher's room (its own page) ---- */
.room-body { background: var(--soft, #f1f5ff); min-height: 100vh; margin: 0; }
.room-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; background: linear-gradient(180deg, var(--navy, #0a1238), var(--navy-deep, #060b26)); color: #fff; }
.room-top .brand { color: #fff; } .room-who { font-size: .9rem; opacity: .85; }
.room-main { max-width: 1040px; margin: 0 auto; padding: 16px; }
#roomRoot { display: grid; gap: 12px; }
.room-subject { border-top: 4px solid var(--subj, var(--blue, #2f6bff)); }
.room-hard { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
/* a long topic name wraps inside its chip instead of running off a phone screen */
.room-hard .pill { white-space: normal; max-width: 100%; text-align: left; line-height: 1.35; overflow-wrap: anywhere; }
.room-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.room-scroll .room-table { min-width: 720px; }
.room-table td { vertical-align: top; }
.room-swipe { display: none; margin: 6px 0 0; font-size: .78rem; color: var(--mute, #5d6b8f); }
@media (max-width: 760px) { .room-swipe { display: block; } }
.room-prof { white-space: nowrap; }
.room-bar { display: inline-block; width: 80px; height: 8px; border-radius: 4px; background: var(--edge, #dbe4fb); vertical-align: middle; margin-right: 6px; overflow: hidden; }
.room-bar i { display: block; height: 100%; background: var(--blue, #2f6bff); }
.room-why { color: #5b4bd6; font-weight: 600; font-size: .88rem; }
.room-guide { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--soft, #f1f5ff); }
.room-part ul { margin: 4px 0 8px; }
.room-rate { display: grid; gap: 6px; margin: 12px 0 8px; }
.room-stars { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.room-stars span { min-width: 210px; font-size: .88rem; }
.room-stars .star { font-size: 1.3rem; border: 0; background: none; color: #c9d2ea; cursor: pointer; min-width: 32px; min-height: 32px; }
.room-stars .star.on { color: var(--gold, #ffb547); }
.room-q textarea { width: 100%; }
.room-acts { display: flex; gap: 8px; margin-top: 8px; }

@media (max-width: 640px) {
  .room-stars span { min-width: 100%; }
  .qx-topics { grid-template-columns: 1fr; }
}

/* long formulas and tables scroll inside their card instead of widening the page on a phone */
.qx-questions > *, .qx-result > *, #roomRoot > * { min-width: 0; }
.qx-text, .qx-opt > span, .qx-fix .md, .qx-summary .md, .room-guide, .sb-q .md { overflow-x: auto; max-width: 100%; }
.qx-opt { min-width: 0; }

.qx-text.md { white-space: normal; }
.qx-text.md table { border-collapse: collapse; margin: 8px 0; }
.qx-text.md th, .qx-text.md td { border: 1px solid var(--edge, #dbe4fb); padding: 4px 8px; min-width: 60px; }
.qx-text.md p { margin: 4px 0; }

/* ---- tap-to-answer multiple choice ---- */
.qx-pickopt { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.qx-opt:has(.qx-pickopt) { padding: 0; }
.qx-opt .qx-pickopt { padding: 10px 12px; border-radius: 10px; min-height: 44px; }
.qx-opt .qx-pickopt:hover { background: #e8eeff; }
.qx-opt .qx-pickopt:focus-visible { outline: 3px solid var(--blue, #2f6bff); outline-offset: 1px; }
.qx-opt.chosen { background: #e3ebff; outline: 2px solid var(--blue, #2f6bff); }
.qx-opt.wrong { background: #fdeceb; outline: 2px solid var(--ember, #ff6a3d); }
.qx-again { display: flex; justify-content: center; margin-top: 8px; }

/* ---- Test myself: the setter ---- */
.ts-card { border-top: 4px solid var(--subj, var(--gold, #ffb547)); display: grid; gap: 14px; }
.ts-card h2 { margin: 0; }
.ts-row { display: grid; grid-template-columns: 180px 1fr; gap: 12px; align-items: start; }
.ts-label { display: grid; gap: 2px; padding-top: 6px; }
.ts-label small { font-size: .78rem; line-height: 1.35; }
.ts-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ts-opt { font: inherit; font-size: .86rem; font-weight: 600; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--edge, #dbe4fb); background: #fff; color: var(--ink, #0f1a3d); cursor: pointer; }
.ts-opt.on { background: var(--navy, #0a1238); border-color: var(--navy, #0a1238); color: #fff; }
.ts-opt:focus-visible, .ts-topics .qx-chip:focus-visible { outline: 3px solid var(--gold, #ffb547); outline-offset: 2px; }
.ts-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-topics .qx-chip.suggested { border-color: #8f7bff; }
.ts-star { color: #8f7bff; }
.ts-match { margin: 0; min-height: 1.2em; }
.ts-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-card.collapsed { gap: 0; padding-top: 12px; padding-bottom: 12px; }
.ts-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: .9rem; }
#tsRoot { margin-top: 12px; display: grid; gap: 12px; }
@media (max-width: 640px) {
  .ts-row { grid-template-columns: 1fr; gap: 6px; }
  .ts-label { padding-top: 0; }
}

.qx-report { margin-top: 6px; font: inherit; font-size: .76rem; color: var(--mute, #5a6788); background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 4px 0; }
.room-reports { margin: 4px 0 8px; color: var(--ember, #ff6a3d); font-size: .88rem; }

/* ---- explanatory solutions: step cards ---- */
.sol { display: grid; gap: 6px; margin-top: 8px; }
.sol-step { background: #fff; border: 1px solid var(--edge, #dbe4fb); border-radius: 10px; padding: 6px 12px 8px; border-left: 4px solid #2bb673; }
.sol-step.error { border-left-color: var(--ember, #ff6a3d); }
.sol-step.missing { border-left-color: #c9d2ea; }
.sol-step.partial { border-left-color: #f2a900; }
.sol-missed { margin: 4px 0 0; color: #8a5a00; font-size: .92rem; overflow-wrap: anywhere; }
/* a diagram drawn for a step, and the full answer to every part */
.sol-fig { margin: 6px 0 2px; max-width: 420px; }
/* a drawing from the SVG bank style: light ink on dark navy whatever the site theme; a wide one scrolls inside its panel */
.sol-svg { margin: 8px 0 4px; background: #0f1330; border-radius: 10px; padding: 8px; overflow-x: auto; max-width: 680px; -webkit-overflow-scrolling: touch; }
.sol-svg .wr-fig { margin: 0; }
.sol-svg .wr-fig svg { max-width: none; min-width: 400px; width: 100%; }
.sol-svg .wr-fig-missing { color: #a9c4ff; margin: 4px; }
.sol-key { margin: 0 0 8px; padding: 8px 10px; border-left: 3px solid var(--primary, #2b59c3); background: color-mix(in srgb, var(--primary, #2b59c3) 8%, transparent); border-radius: 6px; }
.sol-tip { margin: 8px 0 0; padding: 8px 10px; border-left: 3px solid #e0a800; background: color-mix(in srgb, #e0a800 10%, transparent); border-radius: 6px; }
.sol-model { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: #eef8f2; border: 1px solid #bfe5cf; display: grid; gap: 8px; min-width: 0; }
.sol-model-h { color: #12613a; }
.sol-model-part { min-width: 0; border-top: 1px solid #d3eedd; padding-top: 6px; }
.sol-model-part:first-of-type { border-top: 0; padding-top: 0; }
.sol-model-top { display: flex; gap: 8px; align-items: baseline; }
.sol-model-q { margin: 2px 0; color: var(--mute, #5d6b8f); font-size: .9rem; overflow-wrap: anywhere; }
.sol-model-a { overflow-x: auto; overflow-wrap: anywhere; }
.sol-step.final { background: #eef8f2; border: 2px solid #2bb673; }
.sol-head { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.sol-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--soft, #f1f5ff); font-size: .75rem; font-weight: 700; color: var(--mute, #5a6788); }
.sol-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mute, #5a6788); }
.sol-mark { font-weight: 800; }
.sol-step.ok .sol-mark { color: #1f9d5c; } .sol-step.partial .sol-mark { color: #b07800; } .sol-step.error .sol-mark { color: #d4380d; } .sol-step.missing .sol-mark { color: #9aa5c4; }
.sol-nbtn { margin-left: auto; font: inherit; font-size: .74rem; font-weight: 600; border: 1px solid var(--edge, #dbe4fb); background: var(--soft, #f1f5ff); border-radius: 999px; padding: 3px 10px; min-height: 30px; cursor: pointer; }
.sol-nbtn:focus-visible { outline: 3px solid var(--blue, #2f6bff); outline-offset: 1px; }
.sol-math { overflow-x: auto; overflow-y: hidden; }
.sol-math .katex-display { margin: .35em 0; }
.sol-err { margin: 4px 0; padding-left: 8px; border-left: 3px solid var(--ember, #ff6a3d); font-size: .92rem; }
.sol-err .bad { color: #d4380d; font-weight: 700; } .sol-err .ok { color: #1f9d5c; font-weight: 700; }
.sol-why { display: block; color: var(--mute, #5a6788); }
.sol-you, .sol-miss { margin: 2px 0; font-size: .85rem; color: var(--mute, #5a6788); }
.sol-note { background: var(--soft, #f1f5ff); border-left: 3px solid #2bb673; border-radius: 6px; padding: 6px 10px; margin: 4px 0; font-size: .9rem; }
.sol-note[hidden] { display: none; }
.sol-check { margin: 2px 0; font-size: .88rem; color: var(--mute, #5a6788); }
.sol-marks { padding: 8px 12px; border-radius: 10px; background: var(--soft, #f1f5ff); font-size: .88rem; }
.sol-marks ul { margin: 4px 0 0; padding-left: 18px; }
.sol-marks li.earn b { color: #1f9d5c; } .sol-marks li.lost b { color: #d4380d; }
.sol-next { margin: 2px 0; font-weight: 600; }

/* This week: target topics per subject and the weekend mock */
.wk-head h2 { margin: 0 0 4px; }
.wk-subj { display: grid; gap: 10px; }
.wk-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wk-top h3 { margin: 0; }
.wk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wk-chip { background: var(--subj-soft, #eef3ff); color: var(--subj, var(--blue-d, #1d4ed8)); border-radius: 999px; padding: 5px 12px; font-weight: 600; font-size: .88rem; }
.wk-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wk-edit { border-top: 1px dashed var(--edge, #dbe4fb); padding-top: 10px; display: grid; gap: 8px; }
.wk-topics { display: grid; gap: 4px; max-height: 320px; overflow-y: auto; }
.wk-topic { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; cursor: pointer; }
.wk-topic:hover { background: var(--subj-soft, #eef3ff); }

/* the reading quest */
.rd-card { border-top: 4px solid var(--gold, #ffb547); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* a grid child is as wide as its content by default: a wide formula, table or link in the reading ("Read it again" after
   the summary) would push the card past the screen. Each child may shrink; wide content scrolls inside it */
.rd-card > * { min-width: 0; }
.rd-again > .md { max-width: 100%; overflow-x: auto; overflow-wrap: anywhere; }
.rd-head h2 { margin: 2px 0; }
.rd-concepts ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.rd-concepts li small { display: block; }
.rd-concepts li.ok span { color: #18864f; font-weight: 600; }
.rd-concepts li.miss span { color: var(--ember, #d9480f); font-weight: 600; }
.rd-timer { position: sticky; top: 8px; z-index: 2; justify-self: start; margin-bottom: 6px; box-shadow: 0 4px 12px rgba(10, 18, 56, .25); background: var(--navy, #0a1238); color: #fff; border-radius: 999px; padding: 6px 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rd-timer.done { background: #18864f; }
.rd-text { line-height: 1.65; max-width: 72ch; overflow-x: auto; }
.rd-form { display: grid; gap: 6px; }
.rd-summary { width: 100%; }
.rd-start, .rd-send { justify-self: start; }
.rd-again summary { cursor: pointer; font-weight: 600; color: var(--blue-d, #1d4ed8); }

/* the correction never runs past the card: each step may shrink, long formulas scroll inside their own step, text wraps */
.sol { grid-template-columns: minmax(0, 1fr); }
.sol > *, .qx-fix, .qx-q { min-width: 0; }
.sol-err, .sol-you, .sol-note, .sol-check, .sol-next, .sol-step.final > p { overflow-x: auto; overflow-y: hidden; overflow-wrap: anywhere; }
.sol-marks li { overflow-wrap: anywhere; }
.sol-marks li .katex, .sol-err .katex { white-space: normal; }


/* the parts of a question written part by part: (a) what it asks ... [marks] */
.qx-partlist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.qx-partlist li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: baseline; }
.qx-pid { color: var(--blue-d, #1d4ed8); font-family: var(--display); }
.qx-ptext { overflow-x: auto; }
.qx-ptext > p:first-child { margin-top: 0; } .qx-ptext > p:last-child { margin-bottom: 0; }
.qx-pmk { font-size: .8rem; font-weight: 700; color: var(--mute, #5a6788); white-space: nowrap; }

/* Test myself: topics, then the parts of each chosen topic */
.ts-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-subs { display: grid; gap: 8px; margin-top: 8px; }
.ts-subs:empty { display: none; }
.ts-subrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; background: var(--soft, #f1f5ff); border-left: 3px solid var(--blue, #2f6bff); }
.ts-subhead { font-size: .82rem; color: var(--ink, #0f1a3d); margin-right: 2px; }
.ts-subrow .qx-chip { font-size: .8rem; min-height: 32px; padding: 5px 11px; }
.ts-subrow .qx-chip.on { background: var(--navy, #0a1238); border-color: var(--navy, #0a1238); }
.ts-subrow .qx-chip:focus-visible { outline: 3px solid var(--gold, #ffb547); outline-offset: 2px; }
.ts-subhint { margin: 6px 0 0; }

/* the reading quest's summary: a photo of it on paper, or typed */
.rd-steps { margin: 4px 0; padding-left: 20px; display: grid; gap: 2px; font-size: .9rem; }
.rd-pick { justify-self: start; }
.rd-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-thumbs:empty { display: none; }
.rd-thumb { position: relative; width: 96px; height: 120px; border-radius: 10px; overflow: hidden; border: 1px solid var(--edge, #dbe4fb); }
.rd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rd-thumb-x { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(10, 18, 56, .75); color: #fff; font-size: 1rem; cursor: pointer; }
.rd-alt summary { cursor: pointer; color: var(--mute, #5a6788); font-size: .88rem; }
.rd-alt[open] { display: grid; gap: 6px; }

/* ---------- Conquest (public/js/conquest.js): topics and the level reached on each ---------- */
.cq-head h2 { margin: 0 0 4px; }
.cq-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #eef1f8; color: #5a6788; }
.cq-badge.gold { background: #fff1c2; color: #8a6200; }
.cq-subject .card-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.cq-subject.conquered { border-top: 4px solid #f2c14e; }
.cq-theme { font-weight: 600; color: var(--ink, #0f1a3d); margin: 6px 0; overflow-wrap: anywhere; }
.cq-run-head { position: sticky; top: 0; z-index: 5; }
.cq-count { display: inline-block; font-weight: 700; font-size: 13px; padding: 3px 10px; border-radius: 999px; background: #eaf0ff; color: var(--primary, #2554e8); }
.cq-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; counter-reset: cq; }
.cq-q { counter-increment: cq; min-width: 0; }
.cq-q .cq-stem::before { content: counter(cq) ". "; font-weight: 700; color: var(--primary, #2554e8); }
.cq-stem { overflow-wrap: anywhere; overflow-x: auto; }
.cq-opts { display: grid; gap: 6px; margin-top: 8px; }
.cq-opt { display: flex; gap: 10px; align-items: baseline; text-align: left; width: 100%; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1.5px solid #dbe4fb; background: #fff; color: var(--ink, #0f1a3d); font: inherit; cursor: pointer; }
.cq-opt span { min-width: 0; overflow-wrap: anywhere; overflow-x: auto; }
.cq-opt b { flex: none; color: #5a6788; }
.cq-opt.chosen { border-color: var(--primary, #2554e8); background: #eef3ff; }
.cq-opt.chosen b { color: var(--primary, #2554e8); }
.cq-opt:focus-visible { outline: 3px solid var(--primary, #2554e8); outline-offset: 2px; }
.cq-foot { display: grid; gap: 6px; justify-items: start; margin-bottom: 24px; }
.cq-result { text-align: center; }
.cq-result.won { border-top: 6px solid #f2c14e; background: #fffaf0; }
.cq-result.again { border-top: 6px solid var(--primary, #2554e8); }
.cq-score { font-size: 44px; font-weight: 800; margin: 4px 0; color: var(--ink, #0f1a3d); }
.cq-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.cq-miss { border-top: 1px solid #e4e9f5; padding: 10px 0; min-width: 0; }
.cq-yours { color: #b3261e; margin: 4px 0; } .cq-right { color: #1d7a3d; font-weight: 600; margin: 4px 0; }
.cq-lock { border-top: 4px solid var(--gold, #ffb547); }

/* "Redo this correction" on a marked sheet */
.qx-redo { display: grid; gap: 4px; justify-items: start; margin: 8px 0 4px; }

/* ---- a marked sheet: two key windows (the full correction, and your work marked), switched by tabs ---- */
.qx-wins { margin-top: 14px; }
.qx-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 14px; background: #e3eaff; position: sticky; top: 8px; z-index: 5; }
.qx-tab { border: 0; background: transparent; padding: 11px 8px; border-radius: 10px; font: inherit; font-weight: 700; color: var(--mute, #5a6788); cursor: pointer; }
.qx-tab.on { background: #fff; color: var(--ink, #0f1a3d); box-shadow: 0 2px 8px rgba(15, 26, 61, .12); }
.qx-tab:focus-visible { outline: 3px solid var(--gold, #ffb547); outline-offset: 2px; }
.qx-win { margin-top: 10px; background: #fff; border: 1px solid var(--edge, #dbe4fb); border-radius: 16px; padding: 16px 14px 6px; }
.qx-win-h { margin: 0 0 2px; font-size: 1.25rem; }
.qx-cq, .qx-mq { padding: 16px 0 14px; border-top: 1px solid var(--edge, #dbe4fb); min-width: 0; }
.qx-win > p + .qx-cq, .qx-win > p + .qx-mq { margin-top: 10px; }
.qx-cq-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.qx-cq-top .pill { margin-left: auto; }
.qx-key { background: color-mix(in srgb, var(--blue, #2f6bff) 8%, transparent); border-left: 4px solid var(--blue, #2f6bff); border-radius: 8px; padding: 8px 12px; margin: 10px 0; }
.qx-key b, .qx-tip b, .qx-answer > b { display: block; font-size: .8rem; letter-spacing: .02em; color: var(--mute, #5a6788); margin-bottom: 2px; }
.qx-key p, .qx-tip p { margin: 0; }
.qx-steps { list-style: none; counter-reset: step; padding: 0; margin: 10px 0; display: grid; gap: 10px; }
.qx-step { counter-increment: step; position: relative; padding: 10px 12px 10px 44px; border-radius: 12px; background: #f7f9ff; border: 1px solid #e6ecfb; min-width: 0; }
.qx-step::before { content: counter(step); position: absolute; left: 12px; top: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--navy, #0a1238); color: #fff; font-size: .78rem; font-weight: 700; display: grid; place-items: center; }
.qx-step-h { display: block; margin-bottom: 4px; }
.qx-step .sol-math { overflow-x: auto; }
.qx-why { margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; background: #fffbea; border-left: 3px solid #e0a800; color: var(--ink, #0f1a3d); line-height: 1.55; overflow-wrap: anywhere; }
.qx-sub { margin: 8px 0; border: 1px solid #cfd9f5; border-radius: 12px; overflow: hidden; background: #fff; }
.qx-sub figcaption { font-size: .78rem; font-weight: 700; color: var(--mute, #5a6788); padding: 6px 10px; background: #eef2fd; border-bottom: 1px solid #cfd9f5; }
.qx-sub .sol-fig, .qx-sub .sol-svg { margin: 0; max-width: none; border-radius: 0; }
.qx-sub .sol-fig { padding: 8px; }
.qx-answer { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: #eef8f2; border: 2px solid #2bb673; overflow-x: auto; }
.qx-tip { margin: 8px 0; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, #e0a800 10%, transparent); border-left: 4px solid #e0a800; }
.qx-mlist { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; }
.qx-mline { padding: 8px 10px; border-radius: 10px; border: 1px solid #e6ecfb; background: #fafbff; min-width: 0; overflow-wrap: anywhere; }
.qx-mline .sol-mark { margin-right: 6px; }
.qx-mline.ok { border-left: 4px solid #2bb673; } .qx-mline.partial { border-left: 4px solid #e0a800; } .qx-mline.error { border-left: 4px solid #d64545; } .qx-mline.missing { border-left: 4px solid #9aa6c4; }
.qx-mline p { margin: 4px 0 0; }
p.qx-mline { margin: 6px 0; }
/* the two windows are paper: dark ink on white whatever the site's theme (headings, labels, marks lists included) */
.qx-win, .qx-win h2, .qx-win h3, .qx-win b, .qx-win strong, .qx-win p, .qx-win li, .qx-win span:not(.pill):not(.sol-mark):not(.bad):not(.ok):not(.qx-n), .qx-win .md, .qx-win .katex { color: #0f1a3d; }
.qx-win .muted, .qx-win .muted *, .qx-win small, .qx-key b, .qx-tip b, .qx-answer > b, .qx-sub figcaption { color: #5a6788; }
.qx-win .sol-marks .earn b, .qx-win .ok { color: #1f8a55; } .qx-win .sol-marks .lost b, .qx-win .bad { color: #c03a3a; }
.qx-win .sol-svg, .qx-win .sol-svg * { color: inherit; }
.qx-win .qx-report { color: var(--blue, #2f6bff); }