:root{
  --brand:#8BC229;
  --brand-dark:#6f9e1d;
  --ink:#20302a;
  --muted:#5b6b63;
  --panel:#ffffff;
  --bg:#f6f8f3;
  --line:#dfe8d6;
  --neutral:#eef2eb;
  --correct1:#8BC229;
  --correct2:#f5a623;
  --wrong:#d64541;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(180deg, #f8fbf4 0%, #f3f6ee 100%);
  color:var(--ink);
}
.app{min-height:100vh;display:flex;flex-direction:column}
.topbar{
  background:#fff;border-bottom:1px solid var(--line);padding:14px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:56px;width:auto}
.brand h1{margin:0;font-size:28px;line-height:1.1}
.shell{width:min(1180px, calc(100% - 28px));margin:20px auto 32px}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;align-items:center}
.crumb{
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 14px;
  font-size:14px;cursor:pointer
}
.crumb.current{background:var(--brand);border-color:var(--brand);color:#fff;cursor:default}
.hero{
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;
  box-shadow:0 10px 28px rgba(0,0,0,0.04);margin-bottom:18px
}
.hero h2{margin:0 0 6px;font-size:34px}
.hero p{margin:0;color:var(--muted);font-size:17px}
.grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:16px}
/* Inside a grouped menu, use auto-fill (not auto-fit) so a group containing a
   single quiz keeps one column's width and aligns left, instead of the lone
   card stretching across the whole row. Multi-card groups are unchanged. */
.quiz-group .grid{grid-template-columns:repeat(auto-fill, minmax(220px, 1fr))}
.card{
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px;
  box-shadow:0 10px 24px rgba(0,0,0,0.04)
}
.menu-card{min-height:144px;display:flex;flex-direction:column;justify-content:space-between}
.menu-card h3, .quiz-card h3{margin:0 0 10px;font-size:24px}
.menu-card p, .quiz-card p{margin:0;color:var(--muted);line-height:1.45}
.menu-card button, .quiz-card button, .btn{
  margin-top:16px;border:none;background:var(--brand);color:#fff;padding:13px 18px;
  border-radius:16px;font-size:18px;font-weight:700;cursor:pointer
}
.menu-card button:hover, .quiz-card button:hover, .btn:hover{background:var(--brand-dark)}
.quiz-card{display:flex;flex-direction:column;justify-content:space-between;min-height:190px}
.meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.badge{display:inline-flex;align-items:center;background:#eef6df;color:#48631b;border-radius:999px;padding:6px 10px;font-size:13px;font-weight:700}
.empty{text-align:center;color:var(--muted);font-size:18px;padding:38px 18px}
.panel{
  background:#fff;border:1px solid var(--line);border-radius:28px;padding:24px;
  box-shadow:0 10px 28px rgba(0,0,0,0.04)
}
.quiz-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:14px}
.quiz-head h2{margin:0 0 6px;font-size:30px}
.quiz-head p{margin:0;color:var(--muted)}
.progress{background:#eef6df;color:#48631b;border-radius:999px;padding:10px 14px;font-weight:700;white-space:nowrap}
.name-screen,.result-screen{text-align:center}
.name-screen h2,.result-screen h2{margin-top:0;font-size:34px}
.name-screen input{
  width:min(460px, 100%);font-size:22px;padding:14px 16px;border:1px solid #ccd7c2;
  border-radius:16px;margin:12px auto 0;display:block;text-align:center;
}
.question-text{font-size:22px;line-height:1.4;margin:12px auto 18px;max-width:900px;text-align:center}
.inline-wrap{
  margin:20px auto;display:flex;align-items:center;justify-content:center;gap:8px;
  flex-wrap:wrap;font-size:24px;line-height:1.4;text-align:center
}
.image-wrap{text-align:center;margin:6px 0 18px}
.image-wrap img{
  max-width:min(420px, 100%);max-height:280px;border-radius:18px;border:1px solid var(--line);
  background:#fff;padding:8px
}
.options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.option-btn{
  background:#fff;color:var(--ink);border:1px solid #cad8bc;border-radius:18px;padding:16px;
  font-size:19px;font-weight:700;cursor:pointer;min-height:68px
}
.option-btn:hover{border-color:var(--brand);background:#f8fbf3}
.option-btn:disabled{opacity:.65;cursor:default}
.controls{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.feedback{min-height:32px;text-align:center;font-size:20px;font-weight:700;margin-top:18px}
.feedback.good{color:#3a7b18}
.feedback.retry{color:#8b5a00}
.feedback.bad{color:#b42318}
.stars{font-size:38px;margin:10px 0 6px}
.score-big{font-size:54px;font-weight:800;color:var(--brand-dark);margin:8px 0 12px}
.muted{color:var(--muted)}
.small{font-size:14px;color:var(--muted)}

.text-answer-input{
  font-size:20px;padding:6px 6px;border:1px solid #ccd7c2;border-radius:12px;text-align:center;vertical-align:middle;
}
.inline-wrap .text-answer-input{width:72px;margin:0 2px;display:inline-block}
.standalone-answer-input{width:120px;margin:16px auto 0;display:block}

.question-strip{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center;
  margin:12px 0 18px;padding:12px;border:1px solid var(--line);border-radius:18px;background:#f9fbf6
}
.qnav-btn{
  width:38px;height:38px;border-radius:999px;border:2px solid transparent;background:var(--neutral);
  color:#38443e;font-weight:700;cursor:pointer
}
.qnav-btn.current{border-color:#20302a}
.qnav-btn.unanswered{background:var(--neutral);color:#4e5b55}
.qnav-btn.correct1{background:var(--correct1);color:#fff}
.qnav-btn.correct2{background:var(--correct2);color:#fff}
.qnav-btn.wrong{background:var(--wrong);color:#fff}

.legend{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:0 0 8px}
.legend-item{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.legend-dot{width:16px;height:16px;border-radius:999px;display:inline-block}
.legend-dot.unanswered{background:var(--neutral);border:1px solid #c8d2c6}
.legend-dot.correct1{background:var(--correct1)}
.legend-dot.correct2{background:var(--correct2)}
.legend-dot.wrong{background:var(--wrong)}

.drag-container{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:20px 0}
.drag-item{
  padding:10px 14px;background:#fff;border:2px solid #ccd7c2;border-radius:12px;cursor:grab;font-size:20px;font-weight:700
}
.drag-item.dragging{opacity:.5}
.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.match-item{
  padding:10px;border:1px solid #ccd7c2;border-radius:12px;background:#fff;cursor:pointer;text-align:center;font-weight:700
}
.drop-zone{
  width:80px;min-height:40px;border:2px dashed #ccd7c2;display:inline-flex;align-items:center;justify-content:center;
  margin:0 6px;background:#fff;border-radius:12px
}

.finish-bar{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.finish-bar .btn.secondary{background:#fff;color:var(--ink);border:1px solid var(--line)}
.finish-bar .btn.secondary:hover{background:#f5f7f1}

@media (max-width:760px){
  .topbar{padding:12px 16px}
  .brand img{height:44px}
  .brand h1{font-size:22px}
  .hero h2{font-size:28px}
  .panel{padding:20px}
  .quiz-head{flex-direction:column}
  .options{grid-template-columns:1fr}
  .question-text,.inline-wrap{font-size:20px}
  .qnav-btn{width:34px;height:34px}
}

.progress-wrap{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.timer-pill{background:#eef6df;color:#48631b;border:1px solid #cfe3ab;border-radius:999px;padding:6px 12px;font-weight:700;font-size:13px;line-height:1.2}
.right-timer{margin-top:0;align-self:flex-end}
.timer-mode-box{margin:12px auto 10px;padding:10px 12px;max-width:420px;background:#f8fbf3;border:1px solid var(--line);border-radius:16px;text-align:center}
.timer-mode-label{font-size:14px;font-weight:700;color:var(--muted);margin-bottom:8px}
.timer-choices{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.timer-choice{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink);background:transparent;border:none;padding:0;margin:0}
.timer-choice input{margin:0}
.btn.secondary{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.secondary:hover{background:#f5f7f1}

.bus-stop {
  font-size: 2rem;
  letter-spacing: 0.08em;
}

.bus-stop {
  font-size: 2rem !important;
  letter-spacing: 0.08em;
}

.question-text.bus-stop {
  font-size: 4rem !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
}

/* Image option buttons */
.image-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 10px;
}

.image-option-btn {
  background: #fff;
  border: 2px solid #cad8bc;
  border-radius: 16px;
  padding: 10px;
  cursor: pointer;
  transition: border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}

.image-option-btn:hover {
  border-color: var(--brand);
  background: #f8fbf3;
}

.image-option-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.image-option-btn img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* ─────────────────────────────────────────────────────────
   SECTION HEADING (item #1)
   Renders between consecutive questions when the section
   field changes, e.g. "A — Retrieval Starter" → "B — Explicit Teaching".
   ───────────────────────────────────────────────────────── */
.section-heading {
  margin: 18px auto 10px;
  padding: 10px 16px;
  background: #eef6df;
  color: #48631b;
  border: 1px solid #cfe3ab;
  border-left: 4px solid var(--brand);
  border-radius: 12px;
  font-size: 17px;
  font-weight: 700;
  text-align: left;
  max-width: 900px;
  letter-spacing: 0.01em;
}

/* ─────────────────────────────────────────────────────────
   MARKS BADGE (item #2)
   Small SATs-style label on each question card showing the
   mark value. Multi-mark badges use the amber accent to draw
   the eye to higher-value questions.
   ───────────────────────────────────────────────────────── */
.marks-badge-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  max-width: 900px;
  margin: 4px auto 0;
  flex-wrap: wrap;
}
.marks-badge {
  display: inline-block;
  background: #eef6df;
  color: #48631b;
  border: 1px solid #cfe3ab;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.marks-badge-multi {
  background: #fff3dc;
  color: #8b5a00;
  border-color: #f5cf85;
}

/* Scoring-mode badge: sits next to the marks badge. Tells the pupil at a
   glance whether each correct answer scores or all must be correct.
   Neutral colour so it doesn't compete with the marks-badge colour. */
.mode-badge {
  display: inline-block;
  background: #fff;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-style: italic;
}
.mode-badge-aon {
  /* All-or-nothing: amber-tinted to mark "be careful" */
  background: #fff3dc;
  color: #8b5a00;
  border-color: #f5cf85;
  font-style: normal;
}

@media (max-width: 760px){
  .section-heading {
    font-size: 15px;
    padding: 9px 12px;
  }
  .marks-badge {
    font-size: 12px;
    padding: 3px 10px;
  }
  .mode-badge {
    font-size: 11px;
    padding: 3px 10px;
  }
}

/* ─────────────────────────────────────────────────────────
   MULTI-SELECT MCQ (item #3)
   "Tick all that apply" — options render as toggleable
   checkbox-style buttons stacked vertically. Marking on Check
   uses the same green/red/amber colour language as
   clickable-edit and highlight-evidence.
   ───────────────────────────────────────────────────────── */
.multi-mcq-question {
  margin: 16px 0;
}
.multi-mcq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 760px;
  margin: 14px auto 0;
}
.multi-mcq-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 2px solid #cad8bc;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease;
  text-align: left;
}
.multi-mcq-option::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 2px solid #b6c5a8;
  border-radius: 6px;
  background: #fff;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.multi-mcq-option:hover {
  background: #f8fbf3;
  border-color: var(--brand);
}
.multi-mcq-option.selected {
  background: #eef6df;
  border-color: var(--brand);
}
.multi-mcq-option.selected::before {
  background: var(--brand);
  border-color: var(--brand);
  /* Tick mark drawn with a small inline SVG-data-URL background */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3 3 7-7'/></svg>");
  background-size: 16px 16px;
  background-position: center;
  background-repeat: no-repeat;
}
/* Marking states (applied after Check) — match clickable-token colours */
.multi-mcq-option.correct {
  background: var(--correct1);
  border-color: var(--correct1);
  color: #fff;
}
.multi-mcq-option.correct::before {
  background: #fff;
  border-color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%238BC229' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3 3 7-7'/></svg>");
}
.multi-mcq-option.wrong {
  background: var(--wrong);
  border-color: var(--wrong);
  color: #fff;
}
.multi-mcq-option.wrong::before {
  background: #fff;
  border-color: #fff;
}
.multi-mcq-option.missed {
  background: #fff;
  border-color: var(--correct2);
  color: var(--ink);
}
.multi-mcq-option.missed::before {
  border-color: var(--correct2);
  background: #fff;
}

@media (max-width: 760px){
  .multi-mcq-option {
    font-size: 16px;
    padding: 12px 14px;
  }
  .multi-mcq-option::before {
    width: 20px;
    height: 20px;
  }
}

/* ─────────────────────────────────────────────────────────
   CATEGORY SORT (item #4)
   Word bank above, 2–4 columns below. Tap an item to "pick
   it up", then tap a column to place it. Tap an already-
   placed item to pick it up again (move it elsewhere).
   ───────────────────────────────────────────────────────── */
.category-sort-question {
  margin: 16px auto 0;
  max-width: 880px;
}
.category-bank-wrap {
  margin-bottom: 18px;
}
.category-bank-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.category-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 60px;
  padding: 12px;
  background: #f9fbf6;
  border: 1px dashed #cad8bc;
  border-radius: 14px;
  align-content: flex-start;
  cursor: pointer;
}
.category-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.category-columns-many {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.category-column {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.category-column-head {
  background: #eef6df;
  color: #48631b;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 15px;
  border-bottom: 1px solid var(--line);
  letter-spacing: 0.01em;
}
.category-column-body {
  flex: 1;
  min-height: 90px;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
  cursor: pointer;
}
.category-item {
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #cad8bc;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  font-family: inherit;
}
.category-item:hover:not(:disabled) {
  background: #f8fbf3;
  border-color: var(--brand);
}
.category-item.picked {
  background: #eef6df;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(139,194,41,0.25);
  transform: translateY(-1px);
}
/* Chip currently being dragged */
.category-item.dragging {
  opacity: 0.5;
}
/* Target receiving a drag-over event */
.category-bank.drag-over,
.category-column-body.drag-over {
  background: #eef6df;
  outline: 2px dashed var(--brand);
  outline-offset: -4px;
}
/* Marking states (applied after Check) */
.category-item.correct {
  background: var(--correct1);
  border-color: var(--correct1);
  color: #fff;
}
.category-item.wrong {
  background: var(--wrong);
  border-color: var(--wrong);
  color: #fff;
}
.category-item.unplaced {
  background: #fff;
  border-color: var(--correct2);
  color: var(--ink);
  border-style: dashed;
}
.category-item:disabled {
  opacity: 1; /* don't fade; the colour tells the story */
  cursor: default;
}

@media (max-width: 760px){
  .category-columns {
    grid-template-columns: 1fr;
  }
  .category-columns-many {
    grid-template-columns: 1fr;
  }
  .category-item {
    font-size: 14px;
    padding: 7px 12px;
  }
}

/* ─────────────────────────────────────────────────────────
   PASSAGE SUB-PARTS (item #5, Drop 4a)
   When clickable-edit / highlight-evidence / multi-select-mcq
   appear inside a passage's `parts`, they share the same DOM
   and CSS as their top-level versions. Just add a wrapper for
   spacing within the part row.
   ───────────────────────────────────────────────────────── */
/* Highlight-evidence phrase container gets a subtle tinted background
   so the passage text reads as a distinct readable block, matching
   the muted green of category-sort column headers. */
.highlight-evidence-question .highlight-passage {
  background: #eef6df;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 10px auto 4px;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Same tint for highlight-evidence appearing as a passage sub-part */
.passage-part-row .highlight-passage {
  background: #eef6df;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 10px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Each phrase sits on its own row and is clickable as a full-width block */
.highlight-part {
  display: block !important;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
  text-align: left;
  line-height: 1.5;
}
.highlight-part:hover {
  background: #dff0c0;
}
.highlight-part.selected {
  background: var(--brand);
  color: #fff;
}
.highlight-part.correct {
  background: #4caf50;
  color: #fff;
}
.highlight-part.wrong {
  background: #ef5350;
  color: #fff;
}
.highlight-part.missed {
  background: #fff3cd;
  color: #7a4e00;
  outline: 2px solid var(--correct2);
}

/* Bracketed-choice sentence container — same tint frames the sentence
   as a readable block; clickable chips pop out against it naturally */
.bracketed-sentence {
  background: #eef6df;
  border-radius: 12px;
  padding: 14px 18px;
  margin: 10px 0 4px;
}

.passage-subpart-wrap {
  margin-top: 6px;
}
.passage-part-row .multi-mcq-list {
  margin-top: 6px;
  max-width: 100%;
}
.passage-part-row .clickable-edit-sentence {
  margin-top: 6px;
}

/* Per-part status pill, shown next to the sub-prompt after a
   failed attempt 1. Tells the pupil which sub-parts need
   revisiting without revealing the right answer. */
.passage-part-badges {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.passage-part-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
  white-space: nowrap;
}
.passage-part-pill.pill-good {
  background: #eef6df;
  color: #48631b;
  border: 1px solid #cfe3ab;
}
.passage-part-pill.pill-retry {
  background: #fff3dc;
  color: #8b5a00;
  border: 1px solid #f5cf85;
}

/* ─────────────────────────────────────────────────────────
   ORDER + MATCH as passage sub-parts (item #5, Drop 4b)
   ───────────────────────────────────────────────────────── */

/* Order: per-item correctness marking after the passage's Check */
.drag-item.order-correct,
.drag-item.order-wrong {
  position: relative;
  padding-right: 32px;
  color: #fff;
}
.drag-item.order-correct {
  background: var(--correct1);
  border-color: var(--correct1);
}
.drag-item.order-wrong {
  background: var(--wrong);
  border-color: var(--wrong);
}
.drag-item.order-correct::after,
.drag-item.order-wrong::after {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.drag-item.order-correct::after { content: "✓"; }
.drag-item.order-wrong::after   { content: "✗"; }

/* Match: small "X of N paired" status line under the grid */
.match-status {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  font-weight: 600;
}

/* Match items that have been paired (sub-part interaction in progress).
   Solid green tint with a clear ✓ in the top-right corner. */
.match-item.match-paired {
  background: #eef6df;
  border-color: #cfe3ab;
  cursor: pointer;
  position: relative;
  padding-right: 28px; /* room for the corner mark */
}
.match-item.match-paired::after {
  content: "✓";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--brand-dark);
  font-weight: 800;
  line-height: 1;
}

/* Match items after Check has run (or during retry-wrong) — per-pair
   correctness. These layer on top of .match-paired. */
.match-item.match-correct {
  background: var(--correct1);
  border-color: var(--correct1);
  color: #fff;
}
.match-item.match-correct::after {
  content: "✓";
  color: #fff;
  font-size: 20px;
}
.match-item.match-wrong {
  background: var(--wrong);
  border-color: var(--wrong);
  color: #fff;
  padding-right: 28px;
}
.match-item.match-wrong::after {
  content: "✗";
  color: #fff;
  font-size: 20px;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-weight: 800;
  line-height: 1;
}
.match-item.match-unmatched {
  border-style: dashed;
  border-color: var(--correct2);
  color: var(--ink);
}
/* ── bracketed-choice ──────────────────────────────────────────── */
.bracketed-sentence {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  line-height: 2;
  font-size: 1.05rem;
  margin: 12px 0 18px;
  justify-content: center;
  text-align: left;
}
.bracketed-text {
  white-space: pre-wrap;
}
.bracketed-paren {
  color: #555;
  font-weight: 500;
}
.bracketed-sep {
  color: #888;
  font-size: 0.9em;
}
.bracketed-token {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 14px;
  border: 2px solid #d0d8cc;
  background: #fff;
  cursor: pointer;
  font-size: 0.98rem;
  line-height: 1.5;
  margin: 2px 2px;
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
  -webkit-user-select: none;
}
.bracketed-token:hover {
  border-color: var(--brand);
  background: #f0f8e8;
}
.bracketed-token.bracketed-selected {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}
.bracketed-token.bracketed-correct {
  background: #4caf50;
  border-color: #388e3c;
  color: #fff;
}
.bracketed-token.bracketed-wrong {
  background: #ef5350;
  border-color: #c62828;
  color: #fff;
}

/* ── letter-fill ───────────────────────────────────────────────── */
.letter-fill-sentence {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  line-height: 2.4;
  font-size: 1.05rem;
  margin: 12px 0 18px;
  justify-content: center;
  text-align: left;
}
.letter-fill-text {
  white-space: pre-wrap;
}
.letter-fill-word {
  display: inline-flex;
  align-items: baseline;
  background: #dcefc1;
  border: 1.5px solid #a9cd74;
  border-radius: 8px;
  padding: 2px 5px;
  margin: 0 2px;
}
.letter-fill-static {
  font-size: 1.05rem;
  line-height: 1;
  color: var(--brand-dark);
  font-weight: 700;
}
.letter-fill-box {
  display: inline-block;
  width: 1.7em;
  min-width: 1.7em;
  max-width: 1.7em;
  text-align: center;
  border: 2px solid #a9cd74;
  border-radius: 8px;
  background: #fff;
  font-size: 1rem;
  font-family: inherit;
  padding: 2px 2px;
  margin: 0 1px;
  outline: none;
  caret-color: var(--brand);
  -webkit-appearance: none;
  vertical-align: baseline;
  line-height: 1.5;
  transition: border-color 0.12s, background 0.12s;
}
.letter-fill-box:focus {
  border-color: var(--brand);
  background: #f6fbf0;
}
.letter-fill-box.letter-fill-correct {
  border-color: #4caf50;
  background: #eef6df;
  color: #2e7d32;
}
.letter-fill-box.letter-fill-wrong {
  border-color: #ef5350;
  background: #fdecea;
  color: #c62828;
}

/* ── error-spot (GL-style "find the mistake") ─────────────────── */
.error-spot-wrap {
  margin: 12px 0 18px;
}
.error-spot-sentence {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 4px 2px;
  font-size: 1.05rem;
  line-height: 1.5;
}
.error-spot-seg {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 5px 5px;
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
  -webkit-user-select: none;
}
/* N ("no mistake") chip sits inline at the end of the sentence, set a
   little apart from the last word group so it doesn't read as part of it. */
.error-spot-sentence .error-spot-none {
  margin-left: 12px;
}
.error-spot-seg:hover {
  border-color: var(--brand);
  background: #f0f8e8;
}
.error-spot-seg-text {
  text-align: center;
  white-space: normal;
}
.error-spot-letter {
  font-size: 0.78rem;
  font-weight: 700;
  color: #666;
  border: 1.5px solid #b9c4b2;
  border-radius: 6px;
  padding: 0 9px;
  line-height: 1.45;
  background: #fff;
}
.error-spot-seg.error-spot-selected {
  background: var(--brand);
  border-color: var(--brand);
}
.error-spot-seg.error-spot-selected .error-spot-seg-text {
  color: #fff;
  font-weight: 600;
}
.error-spot-seg.error-spot-selected .error-spot-letter {
  color: var(--brand);
  border-color: #fff;
}
.error-spot-seg.error-spot-correct {
  background: #4caf50;
  border-color: #388e3c;
}
.error-spot-seg.error-spot-correct .error-spot-seg-text {
  color: #fff;
  font-weight: 600;
}
.error-spot-seg.error-spot-correct .error-spot-letter {
  color: #388e3c;
  border-color: #fff;
  background: #fff;
}
.error-spot-seg.error-spot-wrong {
  background: #ef5350;
  border-color: #c62828;
}
.error-spot-seg.error-spot-wrong .error-spot-seg-text {
  color: #fff;
  font-weight: 600;
}
.error-spot-seg.error-spot-wrong .error-spot-letter {
  color: #c62828;
  border-color: #fff;
  background: #fff;
}
.error-spot-seg.error-spot-none .error-spot-seg-text {
  font-style: italic;
}
.error-spot-wrap.passage-subpart-wrap {
  margin-top: 6px;
  margin-bottom: 6px;
}